From 898b29ae9441be0c99f215084dd7c2623ec80b6e Mon Sep 17 00:00:00 2001
From: Talha Baris <1t1ebir@gmail.com>
Date: Wed, 18 Jan 2023 13:03:08 +0300
Subject: [PATCH 1/7] add basic dropdown

---
 src/components/Player/PlayerItemOptions.tsx   | 18 +++---
 src/components/Player/options/PlaySpeed.tsx   | 59 +++++++++++++++++++
 .../Player/options/PlayerOptionButton.tsx     | 14 +----
 3 files changed, 69 insertions(+), 22 deletions(-)
 create mode 100644 src/components/Player/options/PlaySpeed.tsx

diff --git a/src/components/Player/PlayerItemOptions.tsx b/src/components/Player/PlayerItemOptions.tsx
index a6f32d438..1a4832302 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,
+  playerSetPlaybackSpeed,
+  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,7 @@ export const PlayerItemButtons = (props: Props) => {
                 type='add'
               />
             )}
-            <PlayerOptionButton
-              ariaDescription={t('Playback speed')}
-              onClick={() => playerNextSpeed(cookies, setCookie)}
-              size='small'
-              type='speed'
-            >
-              {playSpeed}x
-            </PlayerOptionButton>
+            <PlaySpeed ariaDescription={t('Playback speed')} onChange={playerSetPlaybackSpeed} playSpeed={playSpeed} />
             {!isEmbed && (
               <PlayerOptionButton
                 ariaLabel={t('Make Clip')}
diff --git a/src/components/Player/options/PlaySpeed.tsx b/src/components/Player/options/PlaySpeed.tsx
new file mode 100644
index 000000000..a4acd494c
--- /dev/null
+++ b/src/components/Player/options/PlaySpeed.tsx
@@ -0,0 +1,59 @@
+import classnames from 'classnames'
+import { Dropdown } from '~/components'
+
+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 }: Props) => {
+  const wrapperClass = classnames(className, 'player-option-button')
+
+  return (
+    <div className={wrapperClass}>
+      <Dropdown
+        aria-label={ariaLabel}
+        aria-pressed={ariaPressed}
+        // options={[]}
+        options={[
+          { i18nKey: `Custom (${playSpeed})`, value: 3, key: '_custom' },
+          { i18nKey: '0.5', value: 0.5, key: '_playKey' },
+          { i18nKey: '0.75', value: 0.75, key: '_queueNextKey' },
+          { i18nKey: '1', value: 1, key: '_queueLastKey' },
+          { i18nKey: '1.25', value: 1.25, key: '_addToPlaylistKey' },
+          { i18nKey: '1.50', value: 1.5, key: '_shareKey' },
+          { i18nKey: '1.75', value: 1.75, key: '_key1' },
+          { i18nKey: '2', value: 2, key: '_key2' }
+        ]}
+        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) => {
+          onChange(a[0].value)
+        }}
+        // options: any[]
+        outlineStyle={false}
+        // selectedKey?: string | number
+        text={playSpeed + 'x'}
+      />
+    </div>
+  )
+}
diff --git a/src/components/Player/options/PlayerOptionButton.tsx b/src/components/Player/options/PlayerOptionButton.tsx
index de9326d77..6f0f001df 100644
--- a/src/components/Player/options/PlayerOptionButton.tsx
+++ b/src/components/Player/options/PlayerOptionButton.tsx
@@ -19,16 +19,7 @@ type Props = {
   linkUrl?: string
   onClick?: any
   size: 'small' | 'medium' | 'large'
-  type:
-    | 'speed'
-    | 'add'
-    | 'make-clip'
-    | 'share'
-    | 'fullscreen-hide'
-    | 'fullscreen-show'
-    | 'mute'
-    | 'unmute'
-    | 'value-enabled'
+  type: 'add' | 'make-clip' | 'share' | 'fullscreen-hide' | 'fullscreen-show' | 'mute' | 'unmute' | 'value-enabled'
   children?: any
 }
 
@@ -46,9 +37,6 @@ export const PlayerOptionButton = ({
   const wrapperClass = classnames(className, 'player-option-button', size)
   let icon = null
   switch (type) {
-    case 'speed':
-      icon = null
-      break
     case 'add':
       icon = faPlus
       break

From f90c626288ebf154d316d5380c33d03f3ca27e3c Mon Sep 17 00:00:00 2001
From: Talha Baris <1t1ebir@gmail.com>
Date: Wed, 18 Jan 2023 13:12:42 +0300
Subject: [PATCH 2/7] takeback speed in playerOptionButton

---
 .../Player/options/PlayerOptionButton.tsx          | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/components/Player/options/PlayerOptionButton.tsx b/src/components/Player/options/PlayerOptionButton.tsx
index 6f0f001df..de9326d77 100644
--- a/src/components/Player/options/PlayerOptionButton.tsx
+++ b/src/components/Player/options/PlayerOptionButton.tsx
@@ -19,7 +19,16 @@ type Props = {
   linkUrl?: string
   onClick?: any
   size: 'small' | 'medium' | 'large'
-  type: 'add' | 'make-clip' | 'share' | 'fullscreen-hide' | 'fullscreen-show' | 'mute' | 'unmute' | 'value-enabled'
+  type:
+    | 'speed'
+    | 'add'
+    | 'make-clip'
+    | 'share'
+    | 'fullscreen-hide'
+    | 'fullscreen-show'
+    | 'mute'
+    | 'unmute'
+    | 'value-enabled'
   children?: any
 }
 
@@ -37,6 +46,9 @@ export const PlayerOptionButton = ({
   const wrapperClass = classnames(className, 'player-option-button', size)
   let icon = null
   switch (type) {
+    case 'speed':
+      icon = null
+      break
     case 'add':
       icon = faPlus
       break

From ad76ec46e69df664ff4266d411755401ec6846c2 Mon Sep 17 00:00:00 2001
From: Talha Baris <1t1ebir@gmail.com>
Date: Wed, 18 Jan 2023 13:25:44 +0300
Subject: [PATCH 3/7] add cookie to playSpeedSet function

---
 src/components/Player/PlayerItemOptions.tsx |  8 ++++++--
 src/services/player/player.tsx              | 17 +++++++++++++++++
 2 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/src/components/Player/PlayerItemOptions.tsx b/src/components/Player/PlayerItemOptions.tsx
index 1a4832302..a731dbf7c 100644
--- a/src/components/Player/PlayerItemOptions.tsx
+++ b/src/components/Player/PlayerItemOptions.tsx
@@ -6,7 +6,7 @@ import { Slider } from '../Slider/Slider'
 import {
   playerGetPosition,
   playerMute,
-  playerSetPlaybackSpeed,
+  playerSetPlaybackSpeedAndCookies,
   playerSetVolume,
   playerUnmute
 } from '~/services/player/player'
@@ -44,7 +44,11 @@ export const PlayerItemButtons = (props: Props) => {
                 type='add'
               />
             )}
-            <PlaySpeed ariaDescription={t('Playback speed')} onChange={playerSetPlaybackSpeed} playSpeed={playSpeed} />
+            <PlaySpeed
+              ariaDescription={t('Playback speed')}
+              onChange={(newSpeed) => playerSetPlaybackSpeedAndCookies(newSpeed, cookies, setCookie)}
+              playSpeed={playSpeed}
+            />
             {!isEmbed && (
               <PlayerOptionButton
                 ariaLabel={t('Make Clip')}
diff --git a/src/services/player/player.tsx b/src/services/player/player.tsx
index df5c1c192..b655a6658 100644
--- a/src/services/player/player.tsx
+++ b/src/services/player/player.tsx
@@ -180,6 +180,7 @@ export const playerSeekTo = (position: number) => {
   }
 }
 
+// TODO: 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()) {

From 69fead1499f6dfb130c538e5ac53ce829ea490f4 Mon Sep 17 00:00:00 2001
From: Talha Baris <1t1ebir@gmail.com>
Date: Wed, 18 Jan 2023 14:12:14 +0300
Subject: [PATCH 4/7] set playspeed from prompt

---
 src/components/Player/options/PlaySpeed.tsx | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/components/Player/options/PlaySpeed.tsx b/src/components/Player/options/PlaySpeed.tsx
index a4acd494c..0ba713ee8 100644
--- a/src/components/Player/options/PlaySpeed.tsx
+++ b/src/components/Player/options/PlaySpeed.tsx
@@ -23,7 +23,7 @@ export const PlaySpeed = ({ ariaDescription, ariaLabel, ariaPressed, className,
         aria-pressed={ariaPressed}
         // options={[]}
         options={[
-          { i18nKey: `Custom (${playSpeed})`, value: 3, key: '_custom' },
+          { i18nKey: `Custom (${playSpeed})`, value: -1, key: '_custom' },
           { i18nKey: '0.5', value: 0.5, key: '_playKey' },
           { i18nKey: '0.75', value: 0.75, key: '_queueNextKey' },
           { i18nKey: '1', value: 1, key: '_queueLastKey' },
@@ -47,7 +47,17 @@ export const PlaySpeed = ({ ariaDescription, ariaLabel, ariaPressed, className,
         inlineElementStyle={false}
         // isLabelUrl?: boolean
         onChange={(a) => {
-          onChange(a[0].value)
+          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}

From c76c4b7e4836cf30d369fb69367459fcd2049e18 Mon Sep 17 00:00:00 2001
From: Talha Baris <1t1ebir@gmail.com>
Date: Wed, 18 Jan 2023 15:36:24 +0300
Subject: [PATCH 5/7] set speed options as private values

---
 src/components/Player/options/PlaySpeed.tsx | 15 ++-----
 src/resources/Player.ts                     | 43 +++++++++++++++------
 src/services/player/player.tsx              |  4 +-
 3 files changed, 38 insertions(+), 24 deletions(-)

diff --git a/src/components/Player/options/PlaySpeed.tsx b/src/components/Player/options/PlaySpeed.tsx
index 0ba713ee8..ce67ef725 100644
--- a/src/components/Player/options/PlaySpeed.tsx
+++ b/src/components/Player/options/PlaySpeed.tsx
@@ -1,5 +1,6 @@
 import classnames from 'classnames'
 import { Dropdown } from '~/components'
+import { PV } from '~/resources'
 
 type Props = {
   ariaDescription?: string
@@ -16,22 +17,14 @@ type Props = {
 export const PlaySpeed = ({ ariaDescription, ariaLabel, ariaPressed, className, onChange, playSpeed }: Props) => {
   const wrapperClass = classnames(className, 'player-option-button')
 
+  const DropdownOptions = PV.Player.speedOptions
+
   return (
     <div className={wrapperClass}>
       <Dropdown
         aria-label={ariaLabel}
         aria-pressed={ariaPressed}
-        // options={[]}
-        options={[
-          { i18nKey: `Custom (${playSpeed})`, value: -1, key: '_custom' },
-          { i18nKey: '0.5', value: 0.5, key: '_playKey' },
-          { i18nKey: '0.75', value: 0.75, key: '_queueNextKey' },
-          { i18nKey: '1', value: 1, key: '_queueLastKey' },
-          { i18nKey: '1.25', value: 1.25, key: '_addToPlaylistKey' },
-          { i18nKey: '1.50', value: 1.5, key: '_shareKey' },
-          { i18nKey: '1.75', value: 1.75, key: '_key1' },
-          { i18nKey: '2', value: 2, key: '_key2' }
-        ]}
+        options={DropdownOptions}
         dropdownAriaLabel={ariaDescription}
         dropdownPosition={'top'}
         dropdownWidthClass={
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 b655a6658..a47e761d1 100644
--- a/src/services/player/player.tsx
+++ b/src/services/player/player.tsx
@@ -180,7 +180,7 @@ export const playerSeekTo = (position: number) => {
   }
 }
 
-// TODO: look reference and change this fucntion
+// 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)
@@ -234,6 +234,8 @@ export const playerSetPlaybackSpeed = (newSpeed: number) => {
 
 const playerGetCurrentPlaybackSpeed = () => {
   const currentSpeed = OmniAural.state.player.playSpeed.value()
+  // TODO:SS this 2 lines are unnecessary
+  //  sometime refresh make current speed be undefidned
   const currentIndex = PV.Player.speeds.indexOf(currentSpeed)
   const playSpeed = PV.Player.speeds[currentIndex]
   return playSpeed

From 457b28b6414bea670609b6d6496f806ea00566e9 Mon Sep 17 00:00:00 2001
From: Talha Baris <1t1ebir@gmail.com>
Date: Sun, 22 Jan 2023 15:25:52 +0300
Subject: [PATCH 6/7] fix:undefined speed in reload

---
 src/services/player/player.tsx | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/services/player/player.tsx b/src/services/player/player.tsx
index a47e761d1..e815d55e0 100644
--- a/src/services/player/player.tsx
+++ b/src/services/player/player.tsx
@@ -235,10 +235,8 @@ export const playerSetPlaybackSpeed = (newSpeed: number) => {
 const playerGetCurrentPlaybackSpeed = () => {
   const currentSpeed = OmniAural.state.player.playSpeed.value()
   // TODO:SS this 2 lines are unnecessary
-  //  sometime refresh make current speed be undefidned
-  const currentIndex = PV.Player.speeds.indexOf(currentSpeed)
-  const playSpeed = PV.Player.speeds[currentIndex]
-  return playSpeed
+  //  check this function other referance
+  return currentSpeed
 }
 
 export const playerSetVolume = (newVolume: number) => {

From 104fa558c4801e3a0d62243313409cfeca28b480 Mon Sep 17 00:00:00 2001
From: Talha Baris <1t1ebir@gmail.com>
Date: Mon, 23 Jan 2023 01:18:56 +0300
Subject: [PATCH 7/7] fix:style, add size prop as PlayerItemOptions

---
 src/components/Player/PlayerItemOptions.tsx | 1 +
 src/components/Player/options/PlaySpeed.tsx | 4 ++--
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/Player/PlayerItemOptions.tsx b/src/components/Player/PlayerItemOptions.tsx
index a731dbf7c..36d0f8fbc 100644
--- a/src/components/Player/PlayerItemOptions.tsx
+++ b/src/components/Player/PlayerItemOptions.tsx
@@ -47,6 +47,7 @@ export const PlayerItemButtons = (props: Props) => {
             <PlaySpeed
               ariaDescription={t('Playback speed')}
               onChange={(newSpeed) => playerSetPlaybackSpeedAndCookies(newSpeed, cookies, setCookie)}
+              size='small'
               playSpeed={playSpeed}
             />
             {!isEmbed && (
diff --git a/src/components/Player/options/PlaySpeed.tsx b/src/components/Player/options/PlaySpeed.tsx
index ce67ef725..1dcb669f1 100644
--- a/src/components/Player/options/PlaySpeed.tsx
+++ b/src/components/Player/options/PlaySpeed.tsx
@@ -14,8 +14,8 @@ type Props = {
   children?: any
 }
 
-export const PlaySpeed = ({ ariaDescription, ariaLabel, ariaPressed, className, onChange, playSpeed }: Props) => {
-  const wrapperClass = classnames(className, 'player-option-button')
+export const PlaySpeed = ({ ariaDescription, ariaLabel, ariaPressed, className, onChange, playSpeed, size }: Props) => {
+  const wrapperClass = classnames(className, 'player-option-button', size)
 
   const DropdownOptions = PV.Player.speedOptions