diff --git a/src/components/Settings/playback.ts b/src/components/Settings/playback.ts index f64cf71c0..68b3210bc 100644 --- a/src/components/Settings/playback.ts +++ b/src/components/Settings/playback.ts @@ -13,92 +13,102 @@ export default function() {

${i18n('settings_playback')}

- ${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` - - - - ` - })} + ${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` + + + + ` + })} - ${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` ` - })} + })} ${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' + ); + } + })} `; } diff --git a/src/lib/store.ts b/src/lib/store.ts index 87086e718..4c3cd416f 100644 --- a/src/lib/store.ts +++ b/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, 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: { diff --git a/src/locales/en.json b/src/locales/en.json index 1b259dd76..7d3929d86 100644 --- a/src/locales/en.json +++ b/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" -} \ No newline at end of file +} diff --git a/src/modules/audioErrorHandler.ts b/src/modules/audioErrorHandler.ts index 25d3b97cf..25f25fc6d 100644 --- a/src/modules/audioErrorHandler.ts +++ b/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; diff --git a/src/modules/getStreamData.ts b/src/modules/getStreamData.ts index 5e1c82116..fe03b3810 100644 --- a/src/modules/getStreamData.ts +++ b/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(); } diff --git a/src/modules/start.ts b/src/modules/start.ts index 5d609cc84..4b9353746 100644 --- a/src/modules/start.ts +++ b/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; });