react-native-thumbnail-preview v0.3.2

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

1. Run $ npm install react-native-thumbnail-preview --save
2. Require react-native-image-size@1.1.3 to get original image size.
3. Optional rn-fetch-blob@0.12.0 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

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

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)

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