Local API: Implement SABR for VODs

_scripts/webpack.web.config.js

@@ -31,7 +31,8 @@ const config = {
     filename: '[name].js',
   },
   externals: {
-    'youtubei.js': '{}'
+    'youtubei.js': '{}',
+    googlevideo: '{}'
   },
   module: {
     rules: [
@@ -131,7 +132,7 @@ const config = {
       'process.env.SWIPER_VERSION': `'${swiperVersion}'`
     }),
     new webpack.ProvidePlugin({
-      process: 'process/browser'
+      process: 'process/browser.js'
     }),
     new HtmlWebpackPlugin({
       excludeChunks: ['processTaskWorker'],

package.json

@@ -63,6 +63,7 @@
     "autolinker": "^4.1.5",
     "bgutils-js": "^3.2.0",
     "electron-context-menu": "^4.1.1",
+    "googlevideo": "^4.0.4",
     "marked": "^16.3.0",
     "portal-vue": "^2.1.7",
     "process": "^0.11.10",

src/renderer/components/ExperimentalSettings/ExperimentalSettings.vue

@@ -16,6 +16,16 @@
         @change="handleRestartPrompt"
       />
     </FtFlexBox>
+    <FtFlexBox v-if="sabrAllowedOnPlatform">
+      <FtToggleSwitch
+        tooltip-position="top"
+        :label="'Enable SABR as DASH backend'"
+        compact
+        :default-value="sabrEnabled"
+        :tooltip="'Experimental and often has backoff time at the start of video playback. But a good alternative backend to try when default DASH backend failed.'"
+        @change="updateSabrEnabled"
+      />
+    </FtFlexBox>
     <FtPrompt
       v-if="showRestartPrompt"
       :label="$t('Settings[\'The app needs to restart for changes to take effect. Restart and apply change?\']')"
@@ -27,13 +37,15 @@
 </template>
 
 <script setup>
-import { onMounted, ref } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 
 import FtSettingsSection from '../FtSettingsSection/FtSettingsSection.vue'
 import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
 import FtToggleSwitch from '../FtToggleSwitch/FtToggleSwitch.vue'
 import FtPrompt from '../FtPrompt/FtPrompt.vue'
 
+import store from '../../store/index'
+
 const replaceHttpCacheLoading = ref(true)
 const replaceHttpCache = ref(false)
 const showRestartPrompt = ref(false)
@@ -69,6 +81,18 @@ function handleReplaceHttpCache(value) {
     window.ftElectron.toggleReplaceHttpCache()
   }
 }
+
+const sabrAllowedOnPlatform = process.env.SUPPORTS_LOCAL_API
+/** @type {import('vue').ComputedRef<boolean>} */
+const sabrEnabled = process.env.SUPPORTS_LOCAL_API ? computed(() => store.getters.getSabrEnabled) : false
+
+/**
+ * @param {boolean} value
+ */
+function updateSabrEnabled(value) {
+  store.dispatch('updateSabrEnabled', value)
+}
+
 </script>
 
 <style scoped src="./ExperimentalSettings.css" />

src/renderer/components/FtToast/FtToast.vue

@@ -30,14 +30,15 @@ let idCounter = 0
  * @property {Function | null} action
  * @property {boolean} isOpen
  * @property {NodeJS.Timeout | number} timeout
+ * @property {NodeJS.Timeout | number} interval
  * @property {number} id
  */
 
 /** @type {import('vue').ShallowReactive<Toast[]>} */
 const toasts = shallowReactive([])
 
 /**
- * @param {CustomEvent<{ message: string, time: number | null, action: Function | null, abortSignal: AbortSignal | null }>} event
+ * @param {CustomEvent<{ message: string | (({elapsedMs: number, remainingMs: number}) => string), time: number | null, action: Function | null, abortSignal: AbortSignal | null }>} event
  */
 function open({ detail: { message, time, action, abortSignal } }) {
   /** @type {Toast} */
@@ -46,10 +47,24 @@ function open({ detail: { message, time, action, abortSignal } }) {
     action,
     isOpen: false,
     timeout: 0,
+    interval: 0,
     id: idCounter++
   }
+  time = time || 3000
+  let elapsed = 0
+  const updateDelay = 1000
+
+  if (typeof message === 'function') {
+    toast.message = message({ elapsedMs: elapsed, remainingMs: time - elapsed })
+    toast.interval = setInterval(() => {
+      elapsed += updateDelay
+      // Skip last update
+      if (elapsed >= time) { return }
+      toast.message = message({ elapsedMs: elapsed, remainingMs: time - elapsed })
+    }, updateDelay)
+  }
 
-  toast.timeout = setTimeout(close, time || 3000, toast)
+  toast.timeout = setTimeout(close, time, toast)
   if (abortSignal != null) {
     abortSignal.addEventListener('abort', () => {
       close(toast)
@@ -92,6 +107,7 @@ function remove(toast) {
   if (index !== -1) {
     toasts.splice(index, 1)
     clearTimeout(toast.timeout)
+    clearInterval(toast.interval)
   }
 }