@theoplayer/react-native-ui
Version:
A React Native UI for @theoplayer/react-native
113 lines (111 loc) • 4.04 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.PlaybackSelectionView = exports.PlaybackRateSubMenu = exports.DEFAULT_PLAYBACK_RATE_MENU_VALUES = exports.DEFAULT_NUMBER_PLAYBACK_RATE_MENU_VALUES = void 0;
var _react = _interopRequireWildcard(require("react"));
var _PlayerContext = require("../util/PlayerContext");
var _MenuView = require("./common/MenuView");
var _ScrollableMenu = require("./common/ScrollableMenu");
var _MenuRadioButton = require("./common/MenuRadioButton");
var _SubMenuWithButton = require("./common/SubMenuWithButton");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
/**
* The default playback rate values for the menu.
*
* @deprecated, use DEFAULT_NUMBER_PLAYBACK_RATE_MENU_VALUES instead.
*/
const DEFAULT_PLAYBACK_RATE_MENU_VALUES = exports.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.
*/
const DEFAULT_NUMBER_PLAYBACK_RATE_MENU_VALUES = exports.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.
*/
const PlaybackRateSubMenu = props => {
const {
values,
menuStyle
} = props;
const {
player,
locale
} = (0, _react.useContext)(_PlayerContext.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__*/(0, _jsxRuntime.jsx)(PlaybackSelectionView, {
values: localizedValues,
menuStyle: menuStyle
});
};
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SubMenuWithButton.SubMenuWithButton, {
menuConstructor: createMenu,
label: locale.playbackRateTitle,
preview: locale.playbackRateLabel({
rate: player.playbackRate
})
});
};
exports.PlaybackRateSubMenu = PlaybackRateSubMenu;
const PlaybackSelectionView = props => {
const {
values,
menuStyle
} = props;
const {
player,
locale
} = (0, _react.useContext)(_PlayerContext.PlayerContext);
const [selectedPlaybackRate, setSelectedPlaybackRate] = (0, _react.useState)(player.playbackRate);
const onChangePlaybackRate = playbackRate => {
if (playbackRate) {
player.playbackRate = playbackRate;
setSelectedPlaybackRate(playbackRate);
}
};
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuView.MenuView, {
style: menuStyle,
menu: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScrollableMenu.ScrollableMenu, {
title: locale.playbackRateTitle,
items: values.map((playbackRateValue, id) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuRadioButton.MenuRadioButton, {
label: playbackRateValue.label,
uid: playbackRateValue.value,
onSelect: onChangePlaybackRate,
selected: selectedPlaybackRate === playbackRateValue.value
}, id))
})
});
};
exports.PlaybackSelectionView = PlaybackSelectionView;
//# sourceMappingURL=PlaybackRateSubMenu.js.map