README
Quick documentation on how to use the component
the simplest way to use the component would be as follows.
<SubclipMarker
// thumbnails with all the photos
thumbnails={{
"0.0": "url",
"0.5": "url",
...
}}
// where the marker starts.
startAt="1.0"
// where the marker ends.
endAt="13.0"
/>
numberOfThumbnails
is the number of phontos that would display on the slider defaults to 10
if none was provided.
keep in mind that if you provide less entries in the objects the numberOfThumbnails
that would be used instead of the numberOfThumbnails
.
onStartMarkChagned
fn: will be called when the start value of the marker change
onEndMarkChagned
fn: will be called when the end value of the marker change
highlightUpdated
fn: will be called when either start/end values are changed
minimum_marked_length
minimum length is sec that the marker can't be below.
play_position
where to render the play position indicator startAt
when to start marker at. endAt
when to end marker at.
keep in mind that play_position
, startAt
and endAt
all have to match keys in the thumbnails
object provided.
play_position
is optional.
startAt
and endAt
are mandatory without them the component be diplayed.
previewPosition
prop specify where the preview should render, it accepts "top" or "bottom" values it defaults to "top"
you can pretty much overriding any components style with
highlightStyles
, resizeIndicatorsStyle
, resizeLeftIndicatorStyle
, resizeRightIndicatorStyle
,resizeIndicatorCirclesStyle
, previewStyle
, imgPreviewStyle
.
names are indicative of what they override.
to override the numver of circles in the resize indicator use prop resizeIndicatorCirclesCount