Thumbnail preview for video progress bar
- Support Android and iOS
- Use only thumbnail preview and make your own progress bar
- Use progress bar and thumbnail preview
- Run
$ npm install react-native-thumbnail-preview
- Optional rn-fetch-blob@0.12.0 to caching image for improve load image only first time. (recommended)
example vtt file: https://stdlwcdn.lwcdn.com/i/8fdb4e20-8ebb-4590-8844-dae39680d837/160p.vtt
WEBVTT
1
00:00:00.000 --> 00:00:01.000
160p-00001.jpg#xywh=0,0,284,160
2
00:00:01.000 --> 00:00:02.000
160p-00001.jpg#xywh=284,0,284,160
thumbnail preview like image crop from vtt and second you provided (if you need to use your prograss bar)
name | type | required | description |
---|---|---|---|
vttUrl | string | true | |
currentSecond | number | true | |
baseUrl | string | false | if url image in vtt file has only path like 160p-00001.jpg , you can set baseUrl here. |
baseMaxWidth | number | true, if baseMaxHeight unset | max width of thumbnail preview |
baseMaxHeight | number | true, if baseMaxWidth unset | max height of thumbnail preview |
children | Element | false | render in ThumbnailPreview's children eg. display duration while seeking |
Note. Aspect ratio calculate your
baseMaxWidth
orbaseMaxHeight
with width and height in vtt filexywh=284,0,284,160
import {ThumbnailPreview} from 'react-native-thumbnail-preview';
<ThumbnailPreview
vttUrl={'https://endpoint.com/file.vtt'}
baseUrl={'https://endpoint.com/'}
baseMaxWidth={200}
baseMaxHeight={200}
currentSecond={5}>
<Text>{00:00}</Text>
</ThumbnailPreview>;
progress bar with thumbnail preview while seeking
name | type | required | description |
---|---|---|---|
style | ViewStyle | false | be carefull about padding, margin |
duration | number | true | video's duration (second) |
currentTime | number | true | display currentTime in progress bar |
progressbarVisible | boolean | false | show/hide progress bar animated |
thumbSize | number | false | default: 20 |
thumbTouchSize | number | false | default: 50 |
trackHeight | number | false | default: 10 |
trackColor | string | false | |
trackRadius | number | false | |
trackFillColor | string | false | |
thumbColor | string | false | |
thumbTouchColor | string | false | |
onSeekStart | (timeSecond: number) => void | false | when start seek |
onSeekEnd | (timeSecond: number) => void | false | when end seek |
thumbnailPreview | ThumbnailPreviewPops | false | currentSecond will be replace |
thumbnailPreview.renderChild | (e: {seekTime: number}) => Element | false | render in ThumbnailPreview's children |
import {ProgressThumbnailPreview} from 'react-native-thumbnail-preview';
<ProgressThumbnailPreview
style={{
backgroundColor: '#eeeeeeaf',
justifyContent: 'center',
borderRadius: 8,
paddingHorizontal: 8,
marginHorizontal: 8,
marginBottom: 8,
}}
trackHeight={8}
trackColor="#aa00333f"
trackFillColor="#a03"
thumbColor="#500"
thumbTouchColor="#5500007f"
thumbSize={10}
thumbTouchSize={30}
duration={52}
currentTime={20}
onSeekStart={() => {
// start seek
}}
onSeekEnd={(time) => {
// set video to seek time after seeking
}}
thumbnailPreview={{
vttUrl: 'https://endpoint.com/file.vtt',
baseUrl: 'https://endpoint.com/',
baseMaxWidth: 160,
}}
/>;
Optionnal: Set thumbnail preview config to caching image (reccommended)
name | type | required | description |
---|---|---|---|
initCacheImage | (RNFetchBlob) => void | false | setup RNFetchBlob for caching image |
preFetchVttImage | (vttUrl: string, baseUrl?: string) => void | false | download image and cache before display while seeking (requires RNFetchBlob) |
removeCacheImage | () => void | false | clear cache image (requires RNFetchBlob) |
Note. if url image in vtt file has only path like
160p-00001.jpg
, you can set baseUrl here.
import {ThumbnailPreviewConfig} from 'react-native-thumbnail-preview';
useEffect(() => {
// setup RNFetchBlob for caching image
ThumbnailPreviewConfig.initCacheImage(RNFetchBlob);
// download and cache image before display thumbnail while seeking
ThumbnailPreviewConfig.preFetchVttImage(vttUrl, baseUrl + '/');
return () => {
// clear cache image
ThumbnailPreviewConfig.removeCacheImage();
};
}, []);