@zezosoft/zezo-ott-react-native-video-player/lib/module/VideoPlayer/components/SubtitleView.js

React Native OTT Video Player for Android & iOS. Supports playlists, seasons, auto-next playback, subtitles, theming, analytics, fullscreen mode, and custom controls. 🚀 Powered by ZezoSoft.

"use strict";

import { StyleSheet, View } from 'react-native';
import { RFValue } from 'react-native-responsive-fontsize';
import { scale } from 'react-native-size-matters';
import Subtitles from 'react-native-subtitles';
import { useVideoPlayerStore } from "../store/videoPlayerStore.js";
import Display from "../utils/Display.js";
import { useVideoPlayerConfig } from "../context/index.js";
import { jsx as _jsx } from "react/jsx-runtime";
const SubtitleView = () => {
  const {
    activeSubtitle,
    currentTime,
    controlsVisible,
    settingsModal
  } = useVideoPlayerStore();
  const {
    colors
  } = useVideoPlayerConfig();
  if (!activeSubtitle || !activeSubtitle.url || controlsVisible || settingsModal.isVisible) {
    return null;
  }
  return /*#__PURE__*/_jsx(View, {
    style: styles.container,
    children: /*#__PURE__*/_jsx(Subtitles, {
      containerStyle: styles.subtitleContainer,
      textStyle: {
        ...styles.text,
        color: colors.text
      },
      currentTime: currentTime,
      selectedsubtitle: {
        file: activeSubtitle.url
      }
    })
  });
};
export default SubtitleView;
const styles = StyleSheet.create({
  container: {
    width: '100%',
    position: 'absolute',
    bottom: Display.setHeight(3),
    zIndex: 10
  },
  subtitleContainer: {
    padding: scale(10)
  },
  text: {
    fontSize: RFValue(14),
    paddingHorizontal: scale(10),
    paddingVertical: scale(5),
    borderRadius: scale(5)
  }
});
//# sourceMappingURL=SubtitleView.js.map