@zezosoft/zezo-ott-react-native-video-player/lib/module/VideoPlayer/Settings/SpeedControls.js

Production-ready React Native OTT video player library for Android & iOS. Features: playlists, seasons, auto-next playback, subtitles (SRT/VTT), custom theming, analytics tracking, fullscreen mode, gesture controls, ads player (pre-roll/mid-roll/post-roll

"use strict";

import React, { useMemo } from 'react';
import { FlatList, TouchableOpacity, View, StyleSheet, Text } from 'react-native';
import { verticalScale } from 'react-native-size-matters';
import { RFValue } from 'react-native-responsive-fontsize';
import { useVideoPlayerStore } from "../store/videoPlayerStore.js";
import globalStyles from "../styles/globalStyles.js";
import { useVideoPlayerConfig } from "../context/index.js";
import { jsx as _jsx } from "react/jsx-runtime";
const SPEED_OPTIONS = [{
  name: '0.25x',
  value: 0.25
}, {
  name: '0.5x',
  value: 0.5
}, {
  name: '0.75x',
  value: 0.75
}, {
  name: 'Normal',
  value: 1
}, {
  name: '1.25x',
  value: 1.25
}, {
  name: '1.5x',
  value: 1.5
}, {
  name: '1.75x',
  value: 1.75
}, {
  name: '2x',
  value: 2
}];
const ListHeader = () => /*#__PURE__*/_jsx(View, {
  style: styles.listHeader
});
const ListFooter = () => /*#__PURE__*/_jsx(View, {
  style: styles.listFooter
});
const SpeedItem = ({
  name,
  value,
  isSelected,
  onPress,
  colors
}) => /*#__PURE__*/_jsx(TouchableOpacity, {
  onPress: () => onPress({
    value,
    name
  }),
  style: styles.itemTouchable,
  activeOpacity: 0.7,
  children: /*#__PURE__*/_jsx(Text, {
    style: [styles.itemText, {
      color: colors.text
    }, isSelected ? styles.itemTextSelected : styles.itemTextUnselected],
    children: name
  })
});
const SpeedControls = () => {
  const {
    setIsPaused,
    playBackRate,
    setPlayBackRate,
    setControlsVisible,
    setSettingsModal
  } = useVideoPlayerStore();
  const {
    colors
  } = useVideoPlayerConfig();
  const speeds = useMemo(() => SPEED_OPTIONS, []);
  const handleSelectSpeed = (value, name) => {
    setPlayBackRate(value, name);
    setSettingsModal({
      action: 'none',
      isVisible: false
    });
    setControlsVisible(true);
    setIsPaused(false);
  };
  return /*#__PURE__*/_jsx(View, {
    style: globalStyles.flexOneJustifyContentCenterAndAlignItemsCenter,
    children: /*#__PURE__*/_jsx(FlatList, {
      data: speeds,
      showsVerticalScrollIndicator: false,
      keyExtractor: item => item.name,
      ListHeaderComponent: ListHeader,
      ListFooterComponent: ListFooter,
      renderItem: ({
        item
      }) => /*#__PURE__*/_jsx(SpeedItem, {
        name: item.name,
        value: item.value,
        isSelected: playBackRate === item.value,
        onPress: ({
          value,
          name
        }) => handleSelectSpeed(value, name),
        colors: colors
      })
    })
  });
};
export default SpeedControls;
const styles = StyleSheet.create({
  listHeader: {
    height: verticalScale(20)
  },
  listFooter: {
    height: verticalScale(50)
  },
  itemTouchable: {
    paddingVertical: verticalScale(12),
    paddingHorizontal: verticalScale(30),
    alignItems: 'center'
  },
  itemText: {
    textAlign: 'center',
    fontSize: RFValue(17),
    // better readability
    fontWeight: '600' // semi-bold for better emphasis
  },
  itemTextSelected: {
    opacity: 1
  },
  itemTextUnselected: {
    opacity: 0.6
  }
});
//# sourceMappingURL=SpeedControls.js.map