@theoplayer/react-native-ui/lib/module/ui/components/chapterlabel/ChapterLabel.js

A React Native UI for @theoplayer/react-native

import { Text } from 'react-native';
import React, { useContext } from 'react';
import { PlayerContext } from '../util/PlayerContext';
import { useChaptersTrack } from '../../hooks/useChaptersTrack';
import { useCurrentTime } from '../../hooks/useCurrentTime';
import { jsx as _jsx } from "react/jsx-runtime";
/**
 * The default style for the time label.
 */
export const DEFAULT_CHAPTER_LABEL_STYLE = {
  marginLeft: 10,
  marginRight: 10,
  height: 20,
  alignSelf: 'center'
};

/**
 * The default time label component for the `react-native-theoplayer` UI.
 */

export const ChapterLabel = props => {
  const currentTime = useCurrentTime();
  const chapters = useChaptersTrack();
  const context = useContext(PlayerContext);
  const {
    style,
    scrubTime
  } = props;
  const expectedSeekTarget = scrubTime || currentTime;
  const currentChapter = chapters?.cues?.find(cue => cue.startTime <= expectedSeekTarget && cue.endTime > expectedSeekTarget);
  const label = currentChapter?.content;
  return /*#__PURE__*/_jsx(Text, {
    style: [DEFAULT_CHAPTER_LABEL_STYLE, context.style.text, {
      color: context.style.colors.text,
      userSelect: 'none'
    }, style],
    children: label
  });
};
//# sourceMappingURL=ChapterLabel.js.map