Enforce piped for playback toggle

src/components/Settings/playback.ts

@@ -13,92 +13,102 @@ export default function() {
         <p>${i18n('settings_playback')}</p>
       </b>
 
-        ${Selector({
-    label: 'settings_audio_quality',
-    id: 'qualityPreference',
-    handler: async (e) => {
-      setState('quality', e.target.value as 'low' | 'medium' | 'high');
-      quickSwitch();
-    },
-    onmount: async (target) => {
-      target.value = state.quality || 'medium';
-    },
-    children: html`
-            <option value="low">Low</option>
-            <option value="medium">Medium</option>
-            <option value="high">High</option>
-          `
-  })}
+      ${Selector({
+        label: 'settings_audio_quality',
+        id: 'qualityPreference',
+        handler: async (e) => {
+          setState('quality', e.target.value as 'low' | 'medium' | 'high');
+          quickSwitch();
+        },
+        onmount: async (target) => {
+          target.value = state.quality || 'medium';
+        },
+        children: html`
+          <option value="low">Low</option>
+          <option value="medium">Medium</option>
+          <option value="high">High</option>
+        `
+      })}
 
-        ${ToggleSwitch({
-    id: "prefetchSwitch",
-    name: 'settings_prefetch',
-    checked: Boolean(state.prefetch),
-    handler: () => {
-      setState('prefetch', !state.prefetch);
-    }
-  })}
+      ${ToggleSwitch({
+        id: "prefetchSwitch",
+        name: 'settings_prefetch',
+        checked: Boolean(state.prefetch),
+        handler: () => {
+          setState('prefetch', !state.prefetch);
+        }
+      })}
 
       ${!state.HLS ? html`
         ${Selector({
-    label: 'settings_codec_preference',
-    id: 'codecPreference',
-    handler: async (e) => {
-      setState('codec', e.target.value as 'opus' | 'any' | 'aac');
-      quickSwitch();
-    },
-    onmount: async (target) => {
-      target.value = state.codec;
-    },
-    children: html`
+          label: 'settings_codec_preference',
+          id: 'codecPreference',
+          handler: async (e) => {
+            setState('codec', e.target.value as 'opus' | 'any' | 'aac');
+            quickSwitch();
+          },
+          onmount: async (target) => {
+            target.value = state.codec;
+          },
+          children: html`
             <option value="opus">Opus</option>
             <option value="aac">AAC</option>
             <option value="any">Any</option>
           `
-  })}
+        })}
 
         ${ToggleSwitch({
-    id: "stableVolumeSwitch",
-    name: 'settings_stable_volume',
-    checked: Boolean(state.stableVolume),
-    handler: () => {
-      setState('stableVolume', !state.stableVolume);
-      quickSwitch();
-    }
-  })}
+          id: "stableVolumeSwitch",
+          name: 'settings_stable_volume',
+          checked: Boolean(state.stableVolume),
+          handler: () => {
+            setState('stableVolume', !state.stableVolume);
+            quickSwitch();
+          }
+        })}
+
+        ${ToggleSwitch({
+          id: "enforcePipedSwitch",
+          name: 'settings_enforce_piped',
+          checked: state.enforcePiped,
+          handler: () => {
+            setState('enforcePiped', !state.enforcePiped);
+            quickSwitch();
+          }
+        })}
 
         ${ToggleSwitch({
-    id: "enforceProxySwitch",
-    name: 'settings_always_proxy_streams',
-    checked: state.enforceProxy,
-    handler: () => {
-      setState('enforceProxy', !state.enforceProxy);
-      quickSwitch();
-    }
-  })}
+          id: "enforceProxySwitch",
+          name: 'settings_always_proxy_streams',
+          checked: state.enforceProxy,
+          handler: () => {
+            setState('enforceProxy', !state.enforceProxy);
+            quickSwitch();
+          }
+        })}
       ` : html``}
 
       ${ToggleSwitch({
-    id: "HLS_Switch",
-    name: 'settings_hls',
-    checked: state.HLS,
-    handler: () => {
-      setState('HLS', !state.HLS);
-      notify(i18n('settings_reload'));
-    }
-  })}
+        id: "HLS_Switch",
+        name: 'settings_hls',
+        checked: state.HLS,
+        handler: () => {
+          setState('HLS', !state.HLS);
+          notify(i18n('settings_reload'));
+        }
+      })}
 
       ${ToggleSwitch({
-    id: "watchModeSwitch",
-    name: 'settings_watchmode',
-    checked: Boolean(state.watchMode),
-    handler: () => {
-      setState('watchMode',
-        state.watchMode ?
-          '' : '144p'
-      );
-    }
-  })}
+        id: "watchModeSwitch",
+        name: 'settings_watchmode',
+        checked: Boolean(state.watchMode),
+        handler: () => {
+          setState('watchMode',
+            state.watchMode ?
+              '' : '144p'
+          );
+        }
+      })}
     </div>
   `;
 }

src/lib/store.ts

@@ -3,6 +3,7 @@ export const params = (new URL(location.href)).searchParams;
 
 export let state = {
   enforceProxy: false,
+  enforcePiped: false,
   defaultSuperCollection: 'featured',
   customInstance: '',
   stableVolume: false,
@@ -72,8 +73,7 @@ export const store: {
     supportsOpus: Promise<boolean>,
     data: Piped | undefined,
     legacy: boolean,
-    fallback: string,
-    usePiped: boolean
+    fallback: string
   },
   lrcSync: (arg0: number) => {} | void,
   queue: {
@@ -111,8 +111,7 @@ export const store: {
     }).then(res => res.supported),
     data: undefined,
     legacy: !('OffscreenCanvas' in window),
-    fallback: '',
-    usePiped: true
+    fallback: ''
   },
   lrcSync: () => { },
   queue: {

src/locales/en.json

@@ -110,6 +110,7 @@
   "settings_audio_quality": "Audio Quality",
   "settings_prefetch": "Queue Prefetch",
   "settings_codec_preference": "Codec Preference",
+  "settings_enforce_piped": "Enforce Piped for Playback",
   "settings_always_proxy_streams": "Always Proxy Streams",
   "settings_stable_volume": "Prefer Stable Volume",
   "settings_hls": "HTTP Live Streaming",
@@ -171,4 +172,4 @@
   "updater_update": "Update",
   "updater_later": "Later",
   "pwa_share_prompt": "Click ok to Play, click cancel to Download"
-}
+}

src/modules/audioErrorHandler.ts

@@ -6,11 +6,12 @@ export default function(audio: HTMLAudioElement) {
   audio.pause();
   const message = 'Error 403 : Unauthenticated Stream';
   const id = store.stream.id;
-  const { usePiped, fallback } = store.player;
+  const { fallback } = store.player;
   const { index, invidious } = store.api;
-  const playViaPiped = usePiped && state.customInstance;
+  const { enforcePiped, HLS, customInstance } = state;
 
-  if (playViaPiped || state.HLS) return notify(message);
+  if (enforcePiped || HLS || customInstance)
+    return notify(message);
 
   const origin = new URL(audio.src).origin;
 

src/modules/getStreamData.ts

@@ -93,7 +93,7 @@ export default async function(
     });
 
 
-  return state.HLS ? useHls() : store.player.usePiped ? usePiped() : useInvidious();
+  return state.HLS ? useHls() : state.enforcePiped ? usePiped() : useInvidious();
 
 }
 

src/modules/start.ts

@@ -17,7 +17,7 @@ export default async function() {
     store.player.hls.api[0] =
       store.api.piped[0] = pi;
     store.api.invidious[0] = iv;
-    store.player.usePiped = !useInvidious;
+    state.enforcePiped = !useInvidious;
 
   } else await fetch('https://raw.githubusercontent.com/n-ce/Uma/main/dynamic_instances.json')
     .then(res => res.json())
@@ -26,7 +26,7 @@ export default async function() {
       store.api.invidious = data.invidious;
       store.api.hyperpipe = data.hyperpipe;
       store.player.hls.api = data.hls;
-      store.player.usePiped = data.status === 1;
+      state.enforcePiped = state.enforcePiped || data.status === 1;
       store.player.fallback = location.origin;
     });