@zezosoft/zezo-ott-react-native-video-player/lib/module/VideoPlayer/model/VideoPlayerSettings.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";

/* eslint-disable react/no-unstable-nested-components */
import { useCallback } from 'react';
import { FlatList, TouchableOpacity, View, StyleSheet, Text } from 'react-native';
import { scale, verticalScale } from 'react-native-size-matters';
import { RFValue } from 'react-native-responsive-fontsize';
import { SelectedVideoTrackType } from 'react-native-video';
import globalStyles from "../Styles/globalStyles.js";
import { useVideoPlayerStore } from "../store/index.js";
import { useVideoPlayerConfig } from "../context/index.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const VideoPlayerSettings = ({
  resolutions
}) => {
  const {
    setMaxBitRate,
    setSelectedVideoTrack,
    setIsPaused,
    setSettingsModal,
    setControlsVisible,
    maxBitRate
  } = useVideoPlayerStore();
  const {
    colors
  } = useVideoPlayerConfig();
  const handleSelect = useCallback(item => {
    if (item.height === 'auto') {
      setSelectedVideoTrack(null);
      setMaxBitRate(null);
    } else {
      setSelectedVideoTrack({
        type: SelectedVideoTrackType.RESOLUTION,
        value: Number(item.height)
      });
      setMaxBitRate(item.bandwidth ?? null);
    }
    setIsPaused(false);
    setSettingsModal({
      isVisible: false,
      action: 'none'
    });
    setControlsVisible(false);
  }, [setMaxBitRate, setSelectedVideoTrack, setIsPaused, setSettingsModal, setControlsVisible]);
  const keyExtractor = useCallback((item, index) => `${item.height}-${index}`, []);
  const renderItem = useCallback(({
    item
  }) => {
    const isSelected = maxBitRate === item.bandwidth;
    return /*#__PURE__*/_jsx(TouchableOpacity, {
      onPress: () => handleSelect(item),
      activeOpacity: 0.7,
      children: /*#__PURE__*/_jsx(Text, {
        style: [styles.optionText, {
          color: colors.text
        }, isSelected ? styles.optionTextSelected : styles.optionTextUnselected],
        children: item.height === 'auto' ? 'Auto' : `${item.height}p`
      })
    });
  }, [colors.text, handleSelect, maxBitRate]);
  return /*#__PURE__*/_jsxs(View, {
    style: [globalStyles.flexOne, styles.container],
    children: [/*#__PURE__*/_jsx(Text, {
      style: [styles.headerText, {
        color: colors.text
      }, styles.marginTopBottom],
      children: "Video Quality"
    }), /*#__PURE__*/_jsx(FlatList, {
      data: resolutions,
      renderItem: renderItem,
      keyExtractor: keyExtractor,
      showsVerticalScrollIndicator: false,
      contentContainerStyle: {
        paddingBottom: verticalScale(50)
      },
      ItemSeparatorComponent: () => /*#__PURE__*/_jsx(View, {
        style: {
          height: verticalScale(12)
        }
      })
    })]
  });
};
export default VideoPlayerSettings;
const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    paddingHorizontal: 20
  },
  headerText: {
    fontSize: RFValue(20),
    fontWeight: '700',
    textAlign: 'center'
  },
  marginTopBottom: {
    marginBottom: verticalScale(16),
    paddingTop: verticalScale(24)
  },
  optionText: {
    fontSize: RFValue(17),
    paddingVertical: verticalScale(4),
    paddingHorizontal: scale(12),
    textAlign: 'center'
  },
  optionTextSelected: {
    fontWeight: '700',
    textDecorationLine: 'underline' // selected highlight
  },
  optionTextUnselected: {
    opacity: 0.8
  }
});
//# sourceMappingURL=VideoPlayerSettings.js.map