diff --git a/src/routes/Player/SpeedMenu/Option/Option.js b/src/routes/Player/SpeedMenu/Option/Option.js new file mode 100644 index 000000000..3310eb276 --- /dev/null +++ b/src/routes/Player/SpeedMenu/Option/Option.js @@ -0,0 +1,33 @@ +// Copyright (C) 2017-2022 Smart code 203358507 + +const React = require('react'); +const PropTypes = require('prop-types'); +const classnames = require('classnames'); +const { Button } = require('stremio/common'); +const styles = require('./styles'); + +const OptionButton = ({ className, value, selected, onSelect }) => { + const onClick = React.useCallback(() => { + if (typeof onSelect === 'function') { + onSelect(value); + } + }, [onSelect, value]); + return ( + + ); +}; + +OptionButton.propTypes = { + className: PropTypes.string, + value: PropTypes.number, + selected: PropTypes.bool, + onSelect: PropTypes.func, +}; + +module.exports = OptionButton; diff --git a/src/routes/Player/SpeedMenu/Option/index.js b/src/routes/Player/SpeedMenu/Option/index.js new file mode 100644 index 000000000..2bf2d108d --- /dev/null +++ b/src/routes/Player/SpeedMenu/Option/index.js @@ -0,0 +1,5 @@ +// Copyright (C) 2017-2022 Smart code 203358507 + +const Option = require('./Option'); + +module.exports = Option; diff --git a/src/routes/Player/SpeedMenu/Option/styles.less b/src/routes/Player/SpeedMenu/Option/styles.less new file mode 100644 index 000000000..1de1f65ff --- /dev/null +++ b/src/routes/Player/SpeedMenu/Option/styles.less @@ -0,0 +1,38 @@ +// Copyright (C) 2017-2022 Smart code 203358507 + +@import (reference) '~@stremio/stremio-colors/less/stremio-colors.less'; + +.option { + display: flex; + flex-direction: row; + align-items: center; + padding: 0 1.5em; + + &:global(.selected) { + background-color: @color-background; + + .icon { + display: block; + } + } + + &:hover, &:focus { + background-color: @color-background-light2; + } + + .label { + flex: 1; + font-weight: 400; + color: @color-surface-light5-90; + } + + .icon { + flex: none; + display: none; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + margin-left: 1rem; + background-color: @color-accent3-90; + } +} \ No newline at end of file diff --git a/src/routes/Player/SpeedMenu/SpeedMenu.js b/src/routes/Player/SpeedMenu/SpeedMenu.js index c03b0cb58..836a9ac80 100644 --- a/src/routes/Player/SpeedMenu/SpeedMenu.js +++ b/src/routes/Player/SpeedMenu/SpeedMenu.js @@ -3,7 +3,7 @@ const React = require('react'); const PropTypes = require('prop-types'); const classnames = require('classnames'); -const { Multiselect } = require('stremio/common'); +const Option = require('./Option'); const styles = require('./styles'); const RATES = Array.from(Array(8).keys(), (n) => n * 0.25 + 0.25).reverse(); @@ -12,31 +12,29 @@ const SpeedMenu = ({ className, playbackSpeed, onPlaybackSpeedChanged }) => { const onMouseDown = React.useCallback((event) => { event.nativeEvent.speedMenuClosePrevented = true; }, []); - const onOptionSelect = React.useCallback((event) => { - if (typeof onPlaybackSpeedChanged === 'function' && event.value) { - onPlaybackSpeedChanged(parseFloat(event.value)); + const onOptionSelect = React.useCallback((value) => { + if (typeof onPlaybackSpeedChanged === 'function') { + onPlaybackSpeedChanged(value); } }, [onPlaybackSpeedChanged]); - const selectableOptions = React.useMemo(() => ({ - title: 'Playback Speed', - options: RATES.map((rate) => ({ - value: `${rate}`, - label: `${rate}x`, - title: `${rate}x` - })), - selected: [`${playbackSpeed}`], - renderLabelText: () => `${playbackSpeed}x`, - onSelect: onOptionSelect - }), [playbackSpeed, onOptionSelect]); return (