React Native Thumbnail Preview

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

Installation

• Run $ npm install react-native-thumbnail-preview
• Optional [email protected] to caching image for improve load image only first time. (recommended)

VTT

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

Usage

• ThumbnailPreview
• ProgressThumbnailPreview
• ThumbnailPreviewConfig

ThumbnailPreview

thumbnail preview like image crop from vtt and second you provided (if you need to use your prograss bar)

ThumbnailPreviewPops

| 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 or baseMaxHeight with width and height in vtt file xywh=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>;

ProgressThumbnailPreview

progress bar with thumbnail preview while seeking

ProgressThumbnailPreviewPops

| 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,
  }}
/>;

ThumbnailPreviewConfig

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();
  };
}, []);