@theoplayer/react-native-ui/lib/module/ui/components/seekbar/thumbnail/SingleThumbnailView.js

A React Native UI for @theoplayer/react-native

import { Dimensions, View } from 'react-native';
import { PlayerContext } from '../../util/PlayerContext';
import { ThumbnailView } from './ThumbnailView';
import React, { useContext, useMemo } from 'react';
import { useThumbnailTrack } from '../../../hooks/useThumbnailTrack';
import { useSeekable } from '../../../hooks/useSeekable';
import { useDuration } from '../../../hooks/useDuration';
import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
/**
 * Component for displaying a single preview thumbnail image, sourced from a metadata track containing thumbnail data.
 */
export function SingleThumbnailView(props) {
  const player = useContext(PlayerContext).player;
  const thumbnailTrack = useThumbnailTrack();
  const thumbnailSize = useMemo(() => {
    const window = Dimensions.get('window');
    return 0.35 * Math.min(window.height, window.width);
  }, []);
  const seekable = useSeekable();
  const duration = useDuration();
  if (!thumbnailTrack) {
    return /*#__PURE__*/_jsx(_Fragment, {});
  }
  const {
    currentTime,
    seekBarWidth
  } = props;
  const marginHorizontal = 8;
  const normalizedDuration = isNaN(duration) || !isFinite(duration) ? 0 : Math.max(0, duration);
  const seekableRange = {
    start: seekable.length > 0 ? seekable[0].start : 0,
    end: seekable.length > 0 ? seekable[seekable.length - 1].end : normalizedDuration
  };

  // Do not let the thumbnail pass left & right borders.
  const range = seekableRange.end - seekableRange.start;
  const offset = range ? seekBarWidth * (currentTime - seekableRange.start) / range : 0;
  let left = -0.5 * thumbnailSize;
  if (offset + marginHorizontal < 0.5 * thumbnailSize) {
    left = -offset - marginHorizontal;
  } else if (offset - marginHorizontal > seekBarWidth - 0.5 * thumbnailSize) {
    left = -offset + marginHorizontal + seekBarWidth - thumbnailSize;
  }
  return /*#__PURE__*/_jsx(View, {
    style: {
      left,
      marginHorizontal
    },
    children: /*#__PURE__*/_jsx(ThumbnailView, {
      thumbnailTrack: thumbnailTrack,
      duration: player.duration,
      time: currentTime,
      size: thumbnailSize,
      showTimeLabel: false
    })
  });
}
//# sourceMappingURL=SingleThumbnailView.js.map