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: [
@@ -137,7 +138,7 @@ const config = {
       'process.env.SWIPER_VERSION': `'${swiperVersion}'`
     }),
     new webpack.ProvidePlugin({
-      process: 'process/browser'
+      process: 'process/browser.js'
     }),
     new HtmlWebpackPlugin({
       excludeChunks: ['processTaskWorker'],

jsconfig.json

@@ -3,6 +3,8 @@
     "target": 3.5
   },
   "compilerOptions": {
+    "module": "esnext",
+    "moduleResolution": "bundler",
     "strictNullChecks": true,
     "baseUrl": "./",
     "paths": {

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.4.1",
     "process": "^0.11.10",
     "shaka-player": "^4.16.8",

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" />