add playback speed setting

Author: Garrett Downs

src/contexts/SettingsProvider.tsx

@@ -23,18 +23,26 @@ const defaultSettings: Settings = {
   accentColor: 'ec5817',
   notificationType: NotificationType.EpisodeInfo,
   notificationAction: NotificationAction.ViewPlayer,
+  playbackSpeed: 1,
 };
 
 type SettingsContextValue = {
   settings: Settings;
   setSettings: (settings: Settings) => void;
+  setSetting: <T extends keyof Settings>(
+    settingsKey: keyof Settings,
+    val: Settings[T]
+  ) => void;
 };
 
 const defaultValue: SettingsContextValue = {
   settings: defaultSettings,
   setSettings: (settings) => {
     console.log('default', settings);
   },
+  setSetting: (settingsKey) => {
+    console.log('default', settingsKey);
+  },
 };
 
 const SettingsContext = createContext<SettingsContextValue>(defaultValue);
@@ -54,11 +62,22 @@ export function SettingsProvider(props: SettingsProviderProps): VNode {
     setSettingsInternal(val);
   }
 
+  function setSetting<T extends keyof Settings>(
+    key: T,
+    val: Settings[T]
+  ): void {
+    setSettings({
+      ...settings,
+      [key]: val,
+    });
+  }
+
   return (
     <SettingsContext.Provider
       value={{
         settings,
         setSettings,
+        setSetting,
       }}
     >
       {props.children}

src/contexts/playerContext.tsx

@@ -59,6 +59,11 @@ export function PlayerProvider(props: ComponentBaseProps): VNode {
   const { showToast } = useToast();
   const { settings } = useSettings();
 
+  useEffect(() => {
+    audioRef.playbackRate = settings.playbackSpeed;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [settings.playbackSpeed]);
+
   function getStatus(): PlaybackStatus {
     return {
       playing: !audioRef.paused,

src/hooks/useDpad.ts

@@ -33,7 +33,7 @@ export function useDpad<T>({
     stopPropagation: true,
     scrollIntoView: true,
     disabled: false,
-    mode: 'updownleftright',
+    mode: 'updown',
     ...options,
   };
 
@@ -89,6 +89,7 @@ export function useDpad<T>({
 
     if (options.stopPropagation) {
       ev.stopPropagation();
+      ev.stopImmediatePropagation();
       ev.preventDefault();
     }
 

src/models/Settings.ts

@@ -33,4 +33,5 @@ export type Settings = {
   accentColor: string;
   notificationType: NotificationType;
   notificationAction: NotificationAction;
+  playbackSpeed: number;
 };

src/routes/AppSettings.tsx

@@ -23,17 +23,10 @@ type SelectMenu = {
 };
 
 export default function AppSettings(): VNode {
-  const { settings, setSettings } = useSettings();
+  const { settings, setSettings, setSetting } = useSettings();
   const [selectMenu, setSelectMenu] = useState<SelectMenu>();
   const accentColorRef = useRef<HTMLInputElement>(null);
 
-  function saveSetting(key: keyof Settings, value: any): void {
-    setSettings({
-      ...settings,
-      [key]: value,
-    });
-  }
-
   function handleClick(id: keyof Settings): void {
     switch (id) {
       case 'theme':
@@ -89,7 +82,7 @@ export default function AppSettings(): VNode {
         });
         break;
       case 'accentColor':
-        saveSetting('accentColor', accentColorRef.current?.value);
+        setSetting('accentColor', accentColorRef.current?.value || '');
         break;
     }
   }
@@ -106,7 +99,10 @@ export default function AppSettings(): VNode {
     },
   });
 
-  function handleSettingSelect(key: keyof Settings, value: string): void {
+  function handleSettingSelect<T extends keyof Settings>(
+    key: T,
+    value: Settings[T]
+  ): void {
     if (key === 'theme') {
       // We want to use the theme's original accent color
       const theme = themes.find((a) => a.id === value) as ThemeConfig;
@@ -116,7 +112,7 @@ export default function AppSettings(): VNode {
         accentColor: theme.values.appAccentColor.value.slice(1),
       });
     } else {
-      saveSetting(key, value);
+      setSetting(key, value);
     }
 
     setSelectMenu(undefined);

src/routes/Player.module.css

@@ -59,6 +59,14 @@
   flex: 1;
 }
 
+.speed {
+  padding: 0 5px;
+  font-weight: 600;
+}
+.speed[data-selected] {
+  color: var(--accent-text-color);
+}
+
 .chevronDown {
   border-right: 2px solid;
   border-bottom: 2px solid;

src/routes/Player.tsx

@@ -12,11 +12,14 @@ import { Core } from '../services/core';
 import { ListItem, MenuOption, View } from '../ui-components';
 import { ifClass, joinClasses } from '../utils/classes';
 import styles from './Player.module.css';
+import { useSettings } from '../contexts/SettingsProvider';
+import { clamp } from '../utils/clamp';
 
 export default function Player(): VNode {
   const [chapters, setChapters] = useState<Chapter[] | null>(null);
   const [podcast, setPodcast] = useState<Podcast | null>(null);
   const [browsingChapters, setBrowsingChapters] = useState(false);
+  const [changingSpeed, setChangingSpeed] = useState(false);
   const [status, setStatus] = useState<PlaybackStatus>({
     playing: false,
     currentTime: 0,
@@ -25,6 +28,7 @@ export default function Player(): VNode {
   const [accentColor, setAccentColor] = useState<string>();
 
   const player = usePlayer();
+  const { settings, setSetting } = useSettings();
 
   useEffect(() => {
     const episode = player.episode;
@@ -98,6 +102,18 @@ export default function Player(): VNode {
       case 'minus30':
         newStatus = player.jump(-30);
         break;
+      case 'speedDown':
+        setSetting(
+          'playbackSpeed',
+          clamp(Math.round((settings.playbackSpeed - 0.2) * 100) / 100, 0.6, 4)
+        );
+        break;
+      case 'speedUp':
+        setSetting(
+          'playbackSpeed',
+          clamp(Math.round((settings.playbackSpeed + 0.2) * 100) / 100, 0.6, 4)
+        );
+        break;
       case 'detail':
         route(`/episode/${player.episode.id}`);
         break;
@@ -115,8 +131,6 @@ export default function Player(): VNode {
             ? { id: 'pause', label: 'Pause' }
             : { id: 'play', label: 'Play' },
           { id: 'stop', label: 'Stop' },
-          { id: 'plus30', label: '+30 seconds' },
-          { id: 'minus30', label: '-30 seconds' },
           { id: 'detail', label: 'View episode detail' },
         ]
       : [];
@@ -132,14 +146,19 @@ export default function Player(): VNode {
   useDpad({
     priority: SelectablePriority.Low,
     onEnter: handleClick,
-    onChange: (itemId) => setBrowsingChapters(!!itemId?.startsWith('chapter')),
-    options: { mode: 'updown' },
+    onChange: (itemId) => {
+      setChangingSpeed(itemId === 'speed');
+      setBrowsingChapters(!!itemId?.startsWith('chapter'));
+    },
+    options: { stopPropagation: false },
   });
 
   useNavKeys(
     {
-      ArrowLeft: () => handleAction('minus30'),
-      ArrowRight: () => handleAction('plus30'),
+      ArrowLeft: () =>
+        changingSpeed ? handleAction('speedDown') : handleAction('minus30'),
+      ArrowRight: () =>
+        changingSpeed ? handleAction('speedUp') : handleAction('plus30'),
       Enter: () => {
         if (!player.episode) {
           return;
@@ -195,6 +214,11 @@ export default function Player(): VNode {
                   {`${formatTime(status.duration)}`}
                 </span>
                 <div className={styles.spacer} />
+                <span
+                  className={styles.speed}
+                  data-selectable-priority={SelectablePriority.Low}
+                  data-selectable-id="speed"
+                >{`${settings.playbackSpeed}x`}</span>
                 {chapters && chapters.length > 0 ? (
                   <div className={styles.chevronDown} />
                 ) : null}

src/routes/Podcasts.tsx

@@ -50,6 +50,7 @@ export default function Podcasts({ selectedItemId }: Props): VNode {
         route(`/podcasts/`, true);
       }
     },
+    options: { mode: 'updownleftright' },
   });
 
   async function seedData(): Promise<void> {

src/utils/clamp.ts

@@ -0,0 +1,3 @@
+export function clamp(num: number, min: number, max: number): number {
+  return Math.min(Math.max(num, min), max);
+}