@zezosoft/zezo-ott-react-native-video-player/lib/module/VideoPlayer/MediaControls/TopControls.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 React from 'react';
import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
import { moderateScale } from 'react-native-size-matters';
import { RFValue } from 'react-native-responsive-fontsize';
import { X } from 'lucide-react-native';
import { useVideoPlayerStore } from "../store/videoPlayerStore.js";
import { lockToPortrait } from "../utils/lockOrientation.js";
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { useVideoPlayerConfig } from "../context/index.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const TopControls = ({
  onClose
}) => {
  const {
    activeTrack,
    resetStore
  } = useVideoPlayerStore();
  const {
    top
  } = useSafeAreaInsets();
  const {
    colors
  } = useVideoPlayerConfig();
  const handleClose = () => {
    onClose?.();
    resetStore();
    lockToPortrait();
  };
  const showSubtitle = activeTrack?.isTrailer || activeTrack?.seasonNumber !== undefined || activeTrack?.episodeNumber !== undefined;
  return /*#__PURE__*/_jsxs(View, {
    style: [styles.container, {
      paddingTop: top + moderateScale(10)
    }],
    children: [/*#__PURE__*/_jsxs(View, {
      style: styles.textContainer,
      children: [/*#__PURE__*/_jsx(Text, {
        numberOfLines: 1,
        ellipsizeMode: "tail",
        style: [styles.title, {
          color: colors.text
        }],
        children: activeTrack?.title || 'Unknown'
      }), showSubtitle && /*#__PURE__*/_jsx(Text, {
        style: [styles.subtitle, {
          color: colors.text
        }],
        children: activeTrack?.isTrailer ? 'Trailer' : `${activeTrack?.seasonNumber ? `S${activeTrack.seasonNumber} ` : ''}${activeTrack?.episodeNumber ? `E${activeTrack.episodeNumber}` : ''}`
      })]
    }), /*#__PURE__*/_jsx(TouchableOpacity, {
      style: styles.closeButton,
      onPress: handleClose,
      accessibilityRole: "button",
      accessibilityLabel: "Close player",
      accessibilityHint: "Closes the video player and exits",
      children: /*#__PURE__*/_jsx(X, {
        size: moderateScale(25),
        color: colors.text
      })
    })]
  });
};
export default TopControls;
const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingHorizontal: moderateScale(16),
    zIndex: 51
  },
  textContainer: {
    flex: 1,
    paddingRight: moderateScale(10)
  },
  title: {
    fontSize: RFValue(18),
    fontWeight: '600'
  },
  subtitle: {
    fontSize: RFValue(14),
    fontWeight: '400',
    marginTop: moderateScale(2)
  },
  closeButton: {
    width: moderateScale(40),
    height: moderateScale(40),
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: moderateScale(20)
  }
});
//# sourceMappingURL=TopControls.js.map