Feat/web 943 playspeed design

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'
               />
             )}
-            <PlayerOptionButton
+            <PlaySpeed
               ariaDescription={t('Playback speed')}
-              onClick={() => playerNextSpeed(cookies, setCookie)}
+              onChange={(newSpeed) => playerSetPlaybackSpeedAndCookies(newSpeed, cookies, setCookie)}
               size='small'
-              type='speed'
-            >
-              {playSpeed}x
-            </PlayerOptionButton>
+              playSpeed={playSpeed}
+            />
             {!isEmbed && (
               <PlayerOptionButton
                 ariaLabel={t('Make Clip')}

src/components/Player/options/PlaySpeed.tsx

@@ -0,0 +1,62 @@
+import classnames from 'classnames'
+import { Dropdown } from '~/components'
+import { PV } from '~/resources'
+
+type Props = {
+  ariaDescription?: string
+  ariaLabel?: string
+  ariaPressed?: boolean
+  className?: string
+  linkUrl?: string
+  onChange?: any
+  size: 'small' | 'medium' | 'large'
+  playSpeed: number
+  children?: any
+}
+
+export const PlaySpeed = ({ ariaDescription, ariaLabel, ariaPressed, className, onChange, playSpeed, size }: Props) => {
+  const wrapperClass = classnames(className, 'player-option-button', size)
+
+  const DropdownOptions = PV.Player.speedOptions
+
+  return (
+    <div className={wrapperClass}>
+      <Dropdown
+        aria-label={ariaLabel}
+        aria-pressed={ariaPressed}
+        options={DropdownOptions}
+        dropdownAriaLabel={ariaDescription}
+        dropdownPosition={'top'}
+        dropdownWidthClass={
+          'width-small'
+          // 'width-medium'
+          // 'width-large'
+          //  |
+          // 'width-full'
+        }
+        // faIcon?: IconProp
+        // hasClipEditButtons?: boolean
+        hideCaret={true}
+        inlineElementStyle={false}
+        // isLabelUrl?: boolean
+        onChange={(a) => {
+          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'}
+      />
+    </div>
+  )
+}

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)
 }

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) => {