@theoplayer/react-native-ui/lib/module/ui/components/menu/PlaybackRateSubMenu.js

A React Native UI for @theoplayer/react-native

import React, { useContext, useState } from 'react';
import { PlayerContext } from '../util/PlayerContext';
import { MenuView } from './common/MenuView';
import { ScrollableMenu } from './common/ScrollableMenu';
import { MenuRadioButton } from './common/MenuRadioButton';
import { SubMenuWithButton } from './common/SubMenuWithButton';
import { jsx as _jsx } from "react/jsx-runtime";
/**
 * The default playback rate values for the menu.
 *
 * @deprecated, use DEFAULT_NUMBER_PLAYBACK_RATE_MENU_VALUES instead.
 */
export const DEFAULT_PLAYBACK_RATE_MENU_VALUES = [{
  value: 0.25,
  label: '0.25x'
}, {
  value: 0.5,
  label: '0.5x'
}, {
  value: 1,
  label: 'Normal'
}, {
  value: 1.25,
  label: '1.25x'
}, {
  value: 1.5,
  label: '1.5x'
}, {
  value: 2,
  label: '2x'
}];

/**
 * The default number playback rate values for the menu.
 */
export const DEFAULT_NUMBER_PLAYBACK_RATE_MENU_VALUES = [0.25, 0.5, 1, 1.25, 1.5, 2];
/**
 * A button component that opens a playbackRate selection menu for the `react-native-theoplayer` UI.
 */
export const PlaybackRateSubMenu = props => {
  const {
    values,
    menuStyle
  } = props;
  const {
    player,
    locale
  } = useContext(PlayerContext);
  const selectedValues = values ?? DEFAULT_NUMBER_PLAYBACK_RATE_MENU_VALUES;
  const localizedValues = selectedValues.map(value => {
    if (typeof value === 'number') {
      return {
        value: value,
        label: locale.playbackRateLabel({
          rate: value
        })
      };
    }
    return value;
  });
  const createMenu = () => {
    return /*#__PURE__*/_jsx(PlaybackSelectionView, {
      values: localizedValues,
      menuStyle: menuStyle
    });
  };
  return /*#__PURE__*/_jsx(SubMenuWithButton, {
    menuConstructor: createMenu,
    label: locale.playbackRateTitle,
    preview: locale.playbackRateLabel({
      rate: player.playbackRate
    })
  });
};
export const PlaybackSelectionView = props => {
  const {
    values,
    menuStyle
  } = props;
  const {
    player,
    locale
  } = useContext(PlayerContext);
  const [selectedPlaybackRate, setSelectedPlaybackRate] = useState(player.playbackRate);
  const onChangePlaybackRate = playbackRate => {
    if (playbackRate) {
      player.playbackRate = playbackRate;
      setSelectedPlaybackRate(playbackRate);
    }
  };
  return /*#__PURE__*/_jsx(MenuView, {
    style: menuStyle,
    menu: /*#__PURE__*/_jsx(ScrollableMenu, {
      title: locale.playbackRateTitle,
      items: values.map((playbackRateValue, id) => /*#__PURE__*/_jsx(MenuRadioButton, {
        label: playbackRateValue.label,
        uid: playbackRateValue.value,
        onSelect: onChangePlaybackRate,
        selected: selectedPlaybackRate === playbackRateValue.value
      }, id))
    })
  });
};
//# sourceMappingURL=PlaybackRateSubMenu.js.map