diff --git a/src/components/Player/PlayerItemOptions.tsx b/src/components/Player/PlayerItemOptions.tsx index a6f32d438..36d0f8fbc 100644 --- a/src/components/Player/PlayerItemOptions.tsx +++ b/src/components/Player/PlayerItemOptions.tsx @@ -1,8 +1,15 @@ import classnames from 'classnames' import OmniAural, { useOmniAural } from 'omniaural' import { PlayerOptionButton } from './options/PlayerOptionButton' +import { PlaySpeed } from './options/PlaySpeed' import { Slider } from '../Slider/Slider' -import { playerGetPosition, playerMute, playerNextSpeed, playerSetVolume, playerUnmute } from '~/services/player/player' +import { + playerGetPosition, + playerMute, + playerSetPlaybackSpeedAndCookies, + playerSetVolume, + playerUnmute +} from '~/services/player/player' import { modalsAddToPlaylistShowOrAlert } from '~/state/modals/addToPlaylist/actions' import { convertSecToHHMMSS } from '~/lib/utility/time' import { OmniAuralState } from '~/state/omniauralState' @@ -37,14 +44,12 @@ export const PlayerItemButtons = (props: Props) => { type='add' /> )} - playerNextSpeed(cookies, setCookie)} + onChange={(newSpeed) => playerSetPlaybackSpeedAndCookies(newSpeed, cookies, setCookie)} size='small' - type='speed' - > - {playSpeed}x - + playSpeed={playSpeed} + /> {!isEmbed && ( { + const wrapperClass = classnames(className, 'player-option-button', size) + + const DropdownOptions = PV.Player.speedOptions + + return ( +
+ { + let newSpeed = null + + if (a[0].value === -1) { + const promptInput = prompt('Please enter your play speed', '3.12') + // TODO: add validation + newSpeed = parseFloat(promptInput) + onChange(newSpeed) + } else { + newSpeed = a[0].value + onChange(newSpeed) + } + }} + // options: any[] + outlineStyle={false} + // selectedKey?: string | number + text={playSpeed + 'x'} + /> +
+ ) +} diff --git a/src/resources/Player.ts b/src/resources/Player.ts index dca3cbc83..9a6717bda 100644 --- a/src/resources/Player.ts +++ b/src/resources/Player.ts @@ -1,25 +1,44 @@ +const _speedCustom = -1 const _speedOneHalfKey = 0.5 const _speedThreeQuartersKey = 0.75 const _speedNormalKey = 1.0 const _speedOneAndAQuarterKey = 1.25 const _speedOneAndAHalfKey = 1.5 +const _speedOneAndThreeQuartersKey = 1.75 const _speedDoubleKey = 2 -const _speedDoubleAndAHalfKey = 2.5 -const _speedTripleKey = 3 + +const speeds = { + _speedCustom, + _speedOneHalfKey, + _speedThreeQuartersKey, + _speedNormalKey, + _speedOneAndAQuarterKey, + _speedOneAndAHalfKey, + _speedOneAndThreeQuartersKey, + _speedDoubleKey +} + +const generateSpeedOptions = () => { + const options = Object.keys(speeds).map((key) => { + if (speeds[key] === -1) { + return { i18nKey: `Custom`, value: speeds[key], key } + } + + return { + i18nKey: speeds[key], + value: speeds[key], + key: key + } + }) + + return options +} export const Player = { playerTypes: { audio: '_audio', video: '_video' }, - speeds: [ - _speedOneHalfKey, - _speedThreeQuartersKey, - _speedNormalKey, - _speedOneAndAQuarterKey, - _speedOneAndAHalfKey, - _speedDoubleKey, - _speedDoubleAndAHalfKey, - _speedTripleKey - ] + speedOptions: generateSpeedOptions(), + speeds: Object.values(speeds) } diff --git a/src/services/player/player.tsx b/src/services/player/player.tsx index df5c1c192..e815d55e0 100644 --- a/src/services/player/player.tsx +++ b/src/services/player/player.tsx @@ -180,6 +180,7 @@ export const playerSeekTo = (position: number) => { } } +// TODO:SS look reference and change this fucntion export const playerNextSpeed = (cookies: any, setCookie: any) => { const currentSpeed = OmniAural.state.player.playSpeed.value() const currentIndex = PV.Player.speeds.indexOf(currentSpeed) @@ -206,6 +207,22 @@ export const playerNextSpeed = (cookies: any, setCookie: any) => { } } +export const playerSetPlaybackSpeedAndCookies = (newSpeed: number, cookies: any, setCookie: any) => { + playerSetPlaybackSpeed(newSpeed) + + if (setCookie) { + const cookiePlayerSettings = cookies?.playerSettings || {} + setCookie( + 'playerSettings', + { + ...cookiePlayerSettings, + playSpeed: newSpeed + }, + { path: PV.Cookies.path } + ) + } +} + export const playerSetPlaybackSpeed = (newSpeed: number) => { OmniAural.setPlaySpeed(newSpeed) if (audioIsLoaded()) { @@ -217,9 +234,9 @@ export const playerSetPlaybackSpeed = (newSpeed: number) => { const playerGetCurrentPlaybackSpeed = () => { const currentSpeed = OmniAural.state.player.playSpeed.value() - const currentIndex = PV.Player.speeds.indexOf(currentSpeed) - const playSpeed = PV.Player.speeds[currentIndex] - return playSpeed + // TODO:SS this 2 lines are unnecessary + // check this function other referance + return currentSpeed } export const playerSetVolume = (newVolume: number) => {