diff --git a/_scripts/webpack.web.config.js b/_scripts/webpack.web.config.js
index afe6c942c37a2..aa2f3597e6916 100644
--- a/_scripts/webpack.web.config.js
+++ b/_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'],
diff --git a/jsconfig.json b/jsconfig.json
index 2a959e13bafe6..9f6c21afbeabe 100644
--- a/jsconfig.json
+++ b/jsconfig.json
@@ -3,6 +3,8 @@
     "target": 3.5
   },
   "compilerOptions": {
+    "module": "esnext",
+    "moduleResolution": "bundler",
     "strictNullChecks": true,
     "baseUrl": "./",
     "paths": {
diff --git a/package.json b/package.json
index 77fd2da2f847c..36a5aea851d68 100644
--- a/package.json
+++ b/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": "^17.0.1",
     "process": "^0.11.10",
     "shaka-player": "^4.16.10",
diff --git a/src/renderer/components/ExperimentalSettings/ExperimentalSettings.vue b/src/renderer/components/ExperimentalSettings/ExperimentalSettings.vue
index 1e6a2bfd73db2..b0186a9ad19c4 100644
--- a/src/renderer/components/ExperimentalSettings/ExperimentalSettings.vue
+++ b/src/renderer/components/ExperimentalSettings/ExperimentalSettings.vue
@@ -16,6 +16,16 @@
         @change="handleRestartPrompt"
       />
     </FtFlexBox>
+    <FtFlexBox v-if="sabrAllowedOnPlatform">
+      <FtToggleSwitch
+        tooltip-position="top"
+        :label="$t('Settings.SABR.Label')"
+        compact
+        :default-value="sabrEnabled"
+        :tooltip="$t('Settings.SABR.Tooltip')"
+        @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" />
diff --git a/src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.js b/src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.js
index e4b52d37b4097..a38f08791c543 100644
--- a/src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.js
+++ b/src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.js
@@ -1,4 +1,4 @@
-import { computed, defineComponent, nextTick, onBeforeUnmount, onMounted, reactive, ref, shallowRef, watch } from 'vue'
+import { computed, defineComponent, nextTick, onBeforeUnmount, onMounted, onUnmounted, reactive, ref, shallowRef, watch } from 'vue'
 import shaka from 'shaka-player'
 import { useI18n } from '../../composables/use-i18n-polyfill'
 
@@ -17,7 +17,6 @@ import {
   getSponsorBlockSegments,
   logShakaError,
   repairInvidiousManifest,
-  sortCaptions,
   translateSponsorBlockCategory
 } from '../../helpers/player/utils'
 import {
@@ -25,8 +24,11 @@ import {
   showToast,
   writeFileWithPicker,
   throttle,
+  debounce,
   removeFromArrayIfExists,
 } from '../../helpers/utils'
+import { MANIFEST_TYPE_SABR } from '../../helpers/player/SabrManifestParser'
+import { setupSabrScheme } from '../../helpers/player/SabrSchemePlugin'
 
 /** @typedef {import('../../helpers/sponsorblock').SponsorBlockCategory} SponsorBlockCategory */
 
@@ -38,6 +40,7 @@ const USE_OVERFLOW_MENU_WIDTH_THRESHOLD = 634
 const RequestType = shaka.net.NetworkingEngine.RequestType
 const AdvancedRequestType = shaka.net.NetworkingEngine.AdvancedRequestType
 const TrackLabelFormat = shaka.ui.Overlay.TrackLabelFormat
+const { Severity: ErrorSeverity, Category: ErrorCategory, Code: ErrorCode } = shaka.util.Error
 
 /*
   Mapping of Shaka localization keys for control labels to FreeTube shortcuts.
@@ -74,6 +77,10 @@ export default defineComponent({
       type: String,
       required: true
     },
+    sabrData: {
+      type: Object,
+      default: null
+    },
     legacyFormats: {
       type: Array,
       default: () => ([])
@@ -146,6 +153,10 @@ export default defineComponent({
       type: Number,
       default: 1
     },
+    delayLoadUntilUnix: {
+      type: Number,
+      default: 0
+    },
   },
   emits: [
     'error',
@@ -157,6 +168,7 @@ export default defineComponent({
     'playback-rate-updated',
     'skip-to-next',
     'skip-to-prev',
+    'player-reload-requested',
   ],
   setup: function (props, { emit, expose }) {
     const { locale, t } = useI18n()
@@ -193,31 +205,10 @@ export default defineComponent({
     let startInFullscreen = props.startInFullscreen
     let startInPip = props.startInPip
 
-    /**
-     * @type {{
-     *   url: string,
-     *   label: string,
-     *   language: string,
-     *   mimeType: string,
-     *   isAutotranslated?: boolean
-     * }[]}
-     */
-    let sortedCaptions
-
-    // we don't need to sort if we only have one caption or don't have any
-    if (props.captions.length > 1) {
-      // theoretically we would resort when the language changes, but we can't remove captions that we already added to the player
-      sortedCaptions = sortCaptions(props.captions)
-    } else if (props.captions.length === 1) {
-      sortedCaptions = props.captions
-    } else {
-      sortedCaptions = []
-    }
-
     /** @type {number|null} */
     let restoreCaptionIndex = null
 
-    if (store.getters.getEnableSubtitlesByDefault && sortedCaptions.length > 0) {
+    if (store.getters.getEnableSubtitlesByDefault && props.captions.length > 0) {
       restoreCaptionIndex = 0
     }
 
@@ -228,10 +219,6 @@ export default defineComponent({
         height: 0,
         frameRate: 0
       },
-      playerDimensions: {
-        width: 0,
-        height: 0
-      },
       bitrate: '0',
       volume: '100',
       bandwidth: '0',
@@ -248,6 +235,11 @@ export default defineComponent({
       }
     })
 
+    const playerDimensions = computed(() => ({
+      width: playerWidth.value,
+      height: playerHeight.value
+    }))
+
     // #region settings
 
     /** @type {import('vue').ComputedRef<boolean>} */
@@ -802,7 +794,7 @@ export default defineComponent({
         trackLabelFormat: hasMultipleAudioTracks.value ? TrackLabelFormat.LABEL : TrackLabelFormat.LANGUAGE_ROLE,
         // Only set it to label if we added the captions ourselves,
         // some live streams come with subtitles in the DASH manifest, but without labels
-        textTrackLabelFormat: sortedCaptions.length > 0 ? TrackLabelFormat.LABEL : TrackLabelFormat.LANGUAGE,
+        textTrackLabelFormat: props.captions.length > 0 ? TrackLabelFormat.LABEL : TrackLabelFormat.LANGUAGE,
         displayInVrMode: useVrMode.value
       }
 
@@ -1049,7 +1041,7 @@ export default defineComponent({
     })
 
     /** @type {ResizeObserver|null} */
-    let resizeObserver = null
+    let containerResizeObserver = null
 
     /** @type {ResizeObserverCallback} */
     function resized(entries) {
@@ -1207,8 +1199,88 @@ export default defineComponent({
       }
     }
 
+    const videoElementWidth = ref(0)
+    const videoElementHeight = ref(0)
+
+    /** @type {ResizeObserver} */
+    const videoResizeObserver = new ResizeObserver(() => {
+      if (video.value) {
+        const devicePixelRatio = window.devicePixelRatio > 1 ? window.devicePixelRatio : 1
+        const video_ = video.value
+
+        videoElementWidth.value = video_.clientWidth * devicePixelRatio
+        videoElementHeight.value = video_.clientHeight * devicePixelRatio
+      }
+    })
+
+    /** @type {PictureInPictureWindow | null} */
+    let pipWindow = null
+    const pipWindowWidth = ref(null)
+    const pipWindowHeight = ref(null)
+
+    /**
+     * @param {PictureInPictureEvent} event
+     */
+    function handleEnterPictureInPicture(event) {
+      pipWindow = event.pictureInPictureWindow
+      handlePictureInPictureResize()
+      pipWindow.addEventListener('resize', handlePictureInPictureResize)
+    }
+
+    function handleLeavePictureInPicture() {
+      pipWindow.removeEventListener('resize', handlePictureInPictureResize)
+
+      pipWindow = null
+      pipWindowWidth.value = null
+      pipWindowHeight.value = null
+    }
+
+    function handlePictureInPictureResize() {
+      const devicePixelRatio = window.devicePixelRatio > 1 ? window.devicePixelRatio : 1
+
+      pipWindowWidth.value = pipWindow.width * devicePixelRatio
+      pipWindowHeight.value = pipWindow.height * devicePixelRatio
+    }
+
+    const playerWidth = computed(() => Math.round(pipWindowWidth.value ?? videoElementWidth.value))
+    const playerHeight = computed(() => Math.round(pipWindowHeight.value ?? videoElementHeight.value))
+
     // #endregion video event handlers
 
+    // #region SABR
+
+    /** @type {shaka.extern.Manifest | undefined} */
+    let sabrManifest
+
+    /** @type {import('../../helpers/player/SabrSchemePlugin').SabrStream | undefined} */
+    let sabrStream
+    /** @type {AbortController | undefined} */
+    let sabrAbortController
+
+    if (process.env.SUPPORTS_LOCAL_API && props.sabrData) {
+      sabrStream = /** @__NOINLINE__ */ setupSabrScheme(props.sabrData, () => player, () => sabrManifest, playerWidth, playerHeight)
+      sabrAbortController = new AbortController()
+      // Since there can be 2 requests at the same time (video + audio), we debounce the listener to only show the message once
+      sabrStream.onBackoffRequested(debounce(({ backoffMs }) => {
+        showToast(
+          ({ remainingMs }) => {
+            // `+value` converts string back to float
+            return t('Video.Watch.Remaining SABR backoff time: {remindingTimeSeconds}s', { remindingTimeSeconds: +(remainingMs / 1000).toFixed(1) })
+          },
+          // So that we don't see last countdown text like 0/N
+          backoffMs,
+          null,
+          sabrAbortController.signal,
+        )
+      }, 1000))
+      sabrStream.onReloadOnce(() => {
+        sabrAbortController.abort()
+        emit('player-reload-requested')
+      })
+    }
+
+    // #endregion SABR
+
     // #region request/response filters
 
     /** @type {shaka.extern.RequestFilter} */
@@ -1218,7 +1290,7 @@ export default defineComponent({
 
         // only when we aren't proxying through Invidious,
         // it doesn't like the range param and makes get requests to youtube anyway
-        if (url.hostname.endsWith('.googlevideo.com') && url.pathname === '/videoplayback') {
+        if (url.protocol !== 'sabr:' && url.hostname.endsWith('.googlevideo.com') && url.pathname === '/videoplayback') {
           request.method = 'POST'
           request.body = new Uint8Array([0x78, 0]) // protobuf: { 15: 0 } (no idea what it means but this is what YouTube uses)
 
@@ -1232,13 +1304,15 @@ export default defineComponent({
       }
     }
 
-    /**
-     * Handles Application Level Redirects
-     * Based on the example in the YouTube.js repository
-     * @type {shaka.extern.ResponseFilter}
-     */
+    /** @type {shaka.extern.ResponseFilter} */
     async function responseFilter(type, response, context) {
       if (type === RequestType.SEGMENT) {
+        const url = new URL(response.uri)
+
+        if (url.protocol === 'sabr:') {
+          return
+        }
+
         if (response.data && response.data.byteLength > 4 &&
           new DataView(response.data).getUint32(0) === HTTP_IN_HEX) {
           // Interpret the response data as a URL string.
@@ -1258,8 +1332,6 @@ export default defineComponent({
           response.headers = redirectResponse.headers
           response.uri = redirectResponse.uri
         } else {
-          const url = new URL(response.uri)
-
           // Fix positioning for auto-generated subtitles
           if (url.hostname.endsWith('.youtube.com') && url.pathname === '/api/timedtext' &&
             url.searchParams.get('caps') === 'asr' && url.searchParams.get('kind') === 'asr' && url.searchParams.get('fmt') === 'vtt') {
@@ -1438,12 +1510,6 @@ export default defineComponent({
         updateLegacyQualityStats(activeLegacyFormat.value)
       }
 
-      const playerDimensions = video_.getBoundingClientRect()
-      stats.playerDimensions = {
-        width: Math.floor(playerDimensions.width),
-        height: Math.floor(playerDimensions.height)
-      }
-
       if (!hasLoaded.value) {
         player.addEventListener('loaded', () => {
           if (showStats.value) {
@@ -1499,14 +1565,13 @@ export default defineComponent({
         stats.resolution.width = newTrack.width
         stats.resolution.height = newTrack.height
       } else {
-        // for videos with multiple audio tracks, youtube.js appends the track id to the itag, to make it unique
-        stats.codecs.audioItag = newTrack.originalAudioId.split('-')[0]
+        stats.codecs.audioItag = newTrack.originalAudioId.split('-', 1)[0]
         stats.codecs.audioCodec = newTrack.audioCodec
 
         if (props.format === 'dash') {
           stats.resolution.frameRate = newTrack.frameRate
 
-          stats.codecs.videoItag = newTrack.originalVideoId
+          stats.codecs.videoItag = newTrack.originalVideoId.split('-', 1)[0]
           stats.codecs.videoCodec = newTrack.videoCodec
 
           stats.resolution.width = newTrack.width
@@ -1539,12 +1604,6 @@ export default defineComponent({
     }
 
     function updateStats() {
-      const playerDimensions = video.value.getBoundingClientRect()
-      stats.playerDimensions = {
-        width: Math.floor(playerDimensions.width),
-        height: Math.floor(playerDimensions.height)
-      }
-
       const playerStats = player.getStats()
 
       if (props.format !== 'audio') {
@@ -2380,10 +2439,27 @@ export default defineComponent({
     function handleError(error, context, details) {
       // These two errors are just wrappers around another error, so use the original error instead
       // As they can be nested (e.g. multiple googlevideo redirects because the Invidious server was far away from the user) we should pick the inner most one
-      while (error.code === shaka.util.Error.Code.REQUEST_FILTER_ERROR || error.code === shaka.util.Error.Code.RESPONSE_FILTER_ERROR) {
+      while (error.code === ErrorCode.REQUEST_FILTER_ERROR || error.code === ErrorCode.RESPONSE_FILTER_ERROR) {
         error = error.data[0]
       }
 
+      // Allow shaka-player to retry on potentially recoverable network errors
+      if (error.severity === ErrorSeverity.RECOVERABLE && error.category === ErrorCategory.NETWORK) {
+        /** @type {keyof ErrorCategory} */
+        const categoryText = Object.keys(ErrorCategory).find((/** @type {keyof ErrorCategory} */ key) => ErrorCategory[key] === error.category)
+
+        /** @type {keyof ErrorCode} */
+        const codeText = Object.keys(ErrorCode).find((/** @type {keyof ErrorCode} */ key) => ErrorCode[key] === error.code)
+
+        console.warn(
+          'Recoverable network error retrying...\n' +
+          `Category: ${categoryText} (${error.category})\n` +
+          `Code: ${codeText} (${error.code})\n` +
+          'Data', error.data
+        )
+        return
+      }
+
       logShakaError(error, context, props.videoId, details)
 
       // text related errors aren't serious (captions and seek bar thumbnails), so we should just log them
@@ -2507,6 +2583,7 @@ export default defineComponent({
     // #endregion offline message
 
     // #region setup
+    const initLoadWaitTimeToastAC = new AbortController()
 
     onMounted(async () => {
       const videoElement = video.value
@@ -2569,6 +2646,8 @@ export default defineComponent({
         return
       }
 
+      videoResizeObserver.observe(videoElement)
+
       registerScreenshotButton()
       registerAudioTrackSelection()
       registerAutoplayToggle()
@@ -2583,8 +2662,8 @@ export default defineComponent({
       } else {
         onlyUseOverFlowMenu.value = container.value.getBoundingClientRect().width <= USE_OVERFLOW_MENU_WIDTH_THRESHOLD
 
-        resizeObserver = new ResizeObserver(resized)
-        resizeObserver.observe(container.value)
+        containerResizeObserver = new ResizeObserver(resized)
+        containerResizeObserver.observe(container.value)
       }
 
       controls.addEventListener('uiupdated', addUICustomizations)
@@ -2627,13 +2706,53 @@ export default defineComponent({
       container.value.classList.add('no-cursor')
 
       await performFirstLoad()
+      // Whatever runs after `performFirstLoad` might be after switching to another page due to SABR backoff
 
-      player.addEventListener('ratechange', () => {
+      player?.addEventListener('ratechange', () => {
         emit('playback-rate-updated', player.getPlaybackRate())
       })
     })
+    onUnmounted(() => {
+      initLoadWaitTimeToastAC.abort()
+    })
 
     async function performFirstLoad() {
+      if (process.env.SUPPORTS_LOCAL_API && sabrStream) {
+        // Longer timeout for receiving larger responses
+        player.configure({
+          streaming: {
+            retryParameters: {
+              timeout: 30 * 1000 * 2,
+            }
+          }
+        })
+      } else {
+        // Reset to default value
+        player.configure({
+          streaming: {
+            retryParameters: {
+              timeout: 30 * 1000,
+            }
+          }
+        })
+      }
+
+      const delayLoadUntilUnix = props.delayLoadUntilUnix
+      const initialLoadDelayMs = delayLoadUntilUnix - Date.now()
+      if (initialLoadDelayMs > 0) {
+        showToast(
+          ({ remainingMs }) => {
+            // `+value` converts string back to float
+            return t('Video.Watch.Remaining preroll-ad time: {remindingTimeSeconds}s', { remindingTimeSeconds: +(remainingMs / 1000).toFixed(1) })
+          },
+          // So that we don't see last countdown text like 0/N
+          initialLoadDelayMs,
+          null,
+          initLoadWaitTimeToastAC.signal,
+        )
+        await new Promise((resolve) => setTimeout(resolve, initialLoadDelayMs))
+      }
+
       if (props.format === 'dash' || props.format === 'audio') {
         try {
           await player.load(props.manifestSrc, props.startTime, props.manifestMimeType)
@@ -2676,40 +2795,59 @@ export default defineComponent({
       // getAudioTracks() returns an empty array when no variant is active, so we can't do this in the `streaming` event
       hasMultipleAudioTracks.value = deduplicateAudioTracks(player.getAudioTracks()).size > 1
 
-      const promises = []
-
-      for (const caption of sortedCaptions) {
-        if (props.format === 'legacy') {
-          const url = new URL(caption.url)
-
-          if (url.hostname.endsWith('.youtube.com') && url.pathname === '/api/timedtext' &&
-            url.searchParams.get('caps') === 'asr' && url.searchParams.get('kind') === 'asr' && url.searchParams.get('fmt') === 'vtt') {
-            promises.push((async () => {
-              try {
-                const response = await fetch(caption.url)
-                let text = await response.text()
-
-                // position:0% for LTR text and position:100% for RTL text
-                text = text.replaceAll(/ align:start position:(?:10)?0%$/gm, '')
-
-                const url = `data:${caption.mimeType};charset=utf-8,${encodeURIComponent(text)}`
-
-                await player.addTextTrackAsync(
-                  url,
+      if (process.env.SUPPORTS_LOCAL_API && props.format !== 'legacy' && props.manifestMimeType === MANIFEST_TYPE_SABR) {
+        sabrManifest = player.getManifest()
+      }
+
+      // For SABR we include the thumbnails and subtitles in the manifest
+      if (!process.env.SUPPORTS_LOCAL_API || props.format === 'legacy' || props.manifestMimeType !== MANIFEST_TYPE_SABR) {
+        const promises = []
+
+        for (const caption of props.captions) {
+          if (props.format === 'legacy') {
+            const url = new URL(caption.url)
+
+            if (url.hostname.endsWith('.youtube.com') && url.pathname === '/api/timedtext' &&
+              url.searchParams.get('caps') === 'asr' && url.searchParams.get('kind') === 'asr' && url.searchParams.get('fmt') === 'vtt') {
+              promises.push((async () => {
+                try {
+                  const response = await fetch(caption.url)
+                  let text = await response.text()
+
+                  // position:0% for LTR text and position:100% for RTL text
+                  text = text.replaceAll(/ align:start position:(?:10)?0%$/gm, '')
+
+                  const url = `data:${caption.mimeType};charset=utf-8,${encodeURIComponent(text)}`
+
+                  await player.addTextTrackAsync(
+                    url,
+                    caption.language,
+                    'captions',
+                    caption.mimeType,
+                    undefined, // codec, only needed if the captions are inside a container (e.g. mp4)
+                    caption.label
+                  )
+                } catch (error) {
+                  if (error instanceof shaka.util.Error) {
+                    handleError(error, 'addTextTrackAsync', caption)
+                  } else {
+                    console.error(error)
+                  }
+                }
+              })())
+            } else {
+              promises.push(
+                player.addTextTrackAsync(
+                  caption.url,
                   caption.language,
                   'captions',
                   caption.mimeType,
                   undefined, // codec, only needed if the captions are inside a container (e.g. mp4)
                   caption.label
                 )
-              } catch (error) {
-                if (error instanceof shaka.util.Error) {
-                  handleError(error, 'addTextTrackAsync', caption)
-                } else {
-                  console.error(error)
-                }
-              }
-            })())
+                  .catch(error => handleError(error, 'addTextTrackAsync', caption))
+              )
+            }
           } else {
             promises.push(
               player.addTextTrackAsync(
@@ -2723,32 +2861,20 @@ export default defineComponent({
                 .catch(error => handleError(error, 'addTextTrackAsync', caption))
             )
           }
-        } else {
+        }
+
+        if (!isLive.value && props.storyboardSrc) {
           promises.push(
-            player.addTextTrackAsync(
-              caption.url,
-              caption.language,
-              'captions',
-              caption.mimeType,
-              undefined, // codec, only needed if the captions are inside a container (e.g. mp4)
-              caption.label
-            )
-              .catch(error => handleError(error, 'addTextTrackAsync', caption))
+            // Only log the error, as the thumbnails are a nice to have
+            // If an error occurs with them, it's not critical
+            player.addThumbnailsTrack(props.storyboardSrc, 'text/vtt')
+              .catch(error => logShakaError(error, 'addThumbnailsTrack', props.videoId, props.storyboardSrc))
           )
         }
-      }
 
-      if (!isLive.value && props.storyboardSrc) {
-        promises.push(
-          // Only log the error, as the thumbnails are a nice to have
-          // If an error occurs with them, it's not critical
-          player.addThumbnailsTrack(props.storyboardSrc, 'text/vtt')
-            .catch(error => logShakaError(error, 'addThumbnailsTrack', props.videoId, props.storyboardSrc))
-        )
+        await Promise.all(promises)
       }
 
-      await Promise.all(promises)
-
       if (restoreCaptionIndex !== null) {
         const index = restoreCaptionIndex
         restoreCaptionIndex = null
@@ -2935,9 +3061,13 @@ export default defineComponent({
       document.removeEventListener('keydown', keyboardShortcutHandler)
       document.removeEventListener('fullscreenchange', fullscreenChangeHandler)
 
-      if (resizeObserver) {
-        resizeObserver.disconnect()
-        resizeObserver = null
+      if (containerResizeObserver) {
+        containerResizeObserver.disconnect()
+        containerResizeObserver = null
+      }
+
+      if (videoResizeObserver) {
+        videoResizeObserver.disconnect()
       }
 
       cleanUpCustomPlayerControls()
@@ -3010,6 +3140,11 @@ export default defineComponent({
         player = null
       }
 
+      if (process.env.SUPPORTS_LOCAL_API && sabrStream) {
+        sabrStream.cleanup()
+        sabrAbortController?.abort()
+      }
+
       // shaka-player doesn't clear these itself, which prevents shaka.ui.Overlay from being garbage collected
       // Should really be fixed in shaka-player but it's easier just to do it ourselves
       if (container.value) {
@@ -3078,6 +3213,7 @@ export default defineComponent({
 
       showStats,
       stats,
+      playerDimensions,
 
       autoplayVideos,
       sponsorBlockShowSkippedToast,
@@ -3092,6 +3228,8 @@ export default defineComponent({
       handleEnded,
       updateVolume,
       handleTimeupdate,
+      handleEnterPictureInPicture,
+      handleLeavePictureInPicture,
 
       valueChangeMessage,
       valueChangeIcon,
diff --git a/src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.vue b/src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.vue
index 198d8b98ad7d1..869d43e5ec23e 100644
--- a/src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.vue
+++ b/src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.vue
@@ -22,6 +22,8 @@
       @canplay="handleCanPlay"
       @volumechange="updateVolume"
       @timeupdate="handleTimeupdate"
+      @enterpictureinpicture="handleEnterPictureInPicture"
+      @leavepictureinpicture="handleLeavePictureInPicture"
     />
     <!--
       VR playback is only possible for VR videos with "EQUIRECTANGULAR" projection
@@ -65,7 +67,7 @@
         v-else
       >{{ $t('Video.Player.Stats.CodecsVideoAudioNoItags', stats.codecs) }}</span>
       <br>
-      <span>{{ $t('Video.Player.Stats.Player Dimensions', stats.playerDimensions) }}</span>
+      <span>{{ $t('Video.Player.Stats.Player Dimensions', playerDimensions) }}</span>
       <br>
       <template
         v-if="format !== 'audio'"
diff --git a/src/renderer/helpers/api/local.js b/src/renderer/helpers/api/local.js
index 74de151d08470..a9ccb72109852 100644
--- a/src/renderer/helpers/api/local.js
+++ b/src/renderer/helpers/api/local.js
@@ -1,4 +1,4 @@
-import { ClientType, Innertube, Misc, Mixins, Parser, Platform, UniversalCache, Utils, YT, YTNodes } from 'youtubei.js'
+import { ClientType, Constants, Innertube, Misc, Mixins, Parser, Platform, UniversalCache, Utils, YT, YTNodes } from 'youtubei.js'
 import Autolinker from 'autolinker'
 import { SEARCH_CHAR_LIMIT } from '../../../constants'
 
@@ -86,9 +86,10 @@ if (process.env.SUPPORTS_LOCAL_API) {
  * @param {boolean} options.safetyMode whether to hide mature content
  * @param {import('youtubei.js').ClientType} options.clientType use an alterate client
  * @param {boolean} options.generateSessionLocally generate the session locally or let YouTube generate it (local is faster, remote is more accurate)
+ * @param {?import('youtubei.js').FetchFunction} options.fetchFunc optional custom fetch function
  * @returns the Innertube instance
  */
-async function createInnertube({ withPlayer = false, location = undefined, safetyMode = false, clientType = undefined, generateSessionLocally = true } = {}) {
+async function createInnertube({ withPlayer = false, location = undefined, safetyMode = false, clientType = undefined, generateSessionLocally = true, fetchFunc = null } = {}) {
   let cache
   if (withPlayer) {
     if (process.env.IS_ELECTRON) {
@@ -111,49 +112,7 @@ async function createInnertube({ withPlayer = false, location = undefined, safet
     client_type: clientType,
 
     // use browser fetch
-    fetch: !withPlayer
-      ? (input, init) => fetch(input, init)
-      : async (input, init) => {
-        if (input.url?.startsWith('https://www.youtube.com/youtubei/v1/player') && init?.headers?.get('X-Youtube-Client-Name') === '2') {
-          const response = await fetch(input, init)
-
-          const responseText = await response.text()
-
-          const json = JSON.parse(responseText)
-
-          if (Array.isArray(json.adSlots)) {
-            let waitSeconds = 0
-
-            for (const adSlot of json.adSlots) {
-              if (adSlot.adSlotRenderer?.adSlotMetadata?.triggerEvent === 'SLOT_TRIGGER_EVENT_BEFORE_CONTENT') {
-                const playerVars = adSlot.adSlotRenderer.fulfillmentContent?.fulfilledLayout?.playerBytesAdLayoutRenderer
-                  ?.renderingContent?.instreamVideoAdRenderer?.playerVars
-
-                if (playerVars) {
-                  const match = playerVars.match(/length_seconds=([\d.]+)/)
-
-                  if (match) {
-                    waitSeconds += parseFloat(match[1])
-                  }
-                }
-              }
-            }
-
-            if (waitSeconds > 0) {
-              await new Promise((resolve) => setTimeout(resolve, waitSeconds * 1000))
-            }
-          }
-
-          // Need to return a new response object, as you can only read the response body once.
-          return new Response(responseText, {
-            status: response.status,
-            statusText: response.statusText,
-            headers: response.headers
-          })
-        }
-
-        return fetch(input, init)
-      },
+    fetch: (fetchFunc ?? ((input, init) => fetch(input, init))),
     cache,
     generate_session_locally: !!generateSessionLocally
   })
@@ -429,9 +388,62 @@ export async function getLocalSearchContinuation(continuationData) {
 
 /**
  * @param {string} id
+ * @param {boolean} forceEnableSabrOnlyResponseWorkaround - When true workaround will be forced and there will be no audio track selection
+ * @returns {Promise<{
+ *   info: import('youtubei.js').YT.VideoInfo,
+ *   poToken: string | undefined,
+ *   clientInfo: {
+ *     clientName: number,
+ *     clientVersion: string,
+ *     osName: string,
+ *     osVersion: string
+ *   },
+ *   adEndTimeUnixMs: number,
+ *   sabrCanBeUsed: boolean,
+ * }>}
  */
-export async function getLocalVideoInfo(id) {
-  const webInnertube = await createInnertube({ withPlayer: true, generateSessionLocally: false })
+export async function getLocalVideoInfo(id, { forceEnableSabrOnlyResponseWorkaround = false } = {}) {
+  let totalAdTimeSeconds = 0
+
+  const webInnertube = await createInnertube({
+    withPlayer: true,
+    generateSessionLocally: false,
+    fetchFunc: async (input, init) => {
+      if (!(input.url?.startsWith('https://www.youtube.com/youtubei/v1/player') && init?.headers?.get('X-Youtube-Client-Name') === '2')) {
+        return fetch(input, init)
+      }
+
+      const response = await fetch(input, init)
+
+      const responseText = await response.text()
+
+      const json = JSON.parse(responseText)
+
+      if (Array.isArray(json.adSlots)) {
+        for (const adSlot of json.adSlots) {
+          if (adSlot.adSlotRenderer?.adSlotMetadata?.triggerEvent === 'SLOT_TRIGGER_EVENT_BEFORE_CONTENT') {
+            const playerVars = adSlot.adSlotRenderer.fulfillmentContent?.fulfilledLayout?.playerBytesAdLayoutRenderer
+              ?.renderingContent?.instreamVideoAdRenderer?.playerVars
+
+            if (playerVars) {
+              const match = playerVars.match(/length_seconds=([\d.]+)/)
+
+              if (match) {
+                totalAdTimeSeconds += parseFloat(match[1])
+              }
+            }
+          }
+        }
+      }
+
+      // Need to return a new response object, as you can only read the response body once.
+      return new Response(responseText, {
+        status: response.status,
+        statusText: response.statusText,
+        headers: response.headers
+      })
+    }
+  })
 
   // based on the videoId
   let contentPoToken
@@ -450,33 +462,39 @@ export async function getLocalVideoInfo(id) {
     }
   }
 
-  let clientName = webInnertube.session.context.client.clientName
-
   const info = await webInnertube.getInfo(id, { po_token: contentPoToken })
+  const sabrCannotBeUsed = info.streaming_data?.server_abr_streaming_url == null ||
+    info.player_config?.media_common_config?.media_ustreamer_request_config?.video_playback_ustreamer_config == null
+  const workaroundRequired = forceEnableSabrOnlyResponseWorkaround || sabrCannotBeUsed
+  // Some time would be used for parsing and maybe additional requests so end time should be calculated sooner to reduce actual waiting time
+  let adEndTimeUnixMs = Date.now()
 
   // #region temporary workaround for SABR-only responses
 
-  // MWEB doesn't have an audio track selector so it picks the audio track on the server based on the request language.
-
-  const originalAudioTrackFormat = info.streaming_data?.adaptive_formats.find(format => {
-    return format.has_audio && format.is_original && format.language
-  })
-
-  if (originalAudioTrackFormat) {
-    webInnertube.session.context.client.hl = originalAudioTrackFormat.language
-  }
+  if (workaroundRequired) {
+    // MWEB doesn't have an audio track selector so it picks the audio track on the server based on the request language.
+    const originalAudioTrackFormat = info.streaming_data?.adaptive_formats.find(format => {
+      return format.has_audio && format.is_original && format.language
+    })
 
-  const mwebInfo = await webInnertube.getBasicInfo(id, { client: 'MWEB', po_token: contentPoToken })
+    if (originalAudioTrackFormat) {
+      webInnertube.session.context.client.hl = originalAudioTrackFormat.language
+    }
 
-  if (mwebInfo.playability_status.status === 'OK' && mwebInfo.streaming_data) {
-    info.playability_status = mwebInfo.playability_status
-    info.streaming_data = mwebInfo.streaming_data
+    const mwebInfo = await webInnertube.getBasicInfo(id, { client: 'MWEB', po_token: contentPoToken })
+    // Some time would be used for parsing and maybe additional requests so end time should be calculated sooner to reduce actual waiting time
+    adEndTimeUnixMs += totalAdTimeSeconds * 1000
 
-    clientName = 'MWEB'
+    if (mwebInfo.playability_status.status === 'OK' && mwebInfo.streaming_data?.adaptive_formats) {
+      info.playability_status = mwebInfo.playability_status
+      info.streaming_data.adaptive_formats = mwebInfo.streaming_data.adaptive_formats
+    }
   }
 
   // #endregion temporary workaround for SABR-only responses
 
+  let { clientName, clientVersion, osName, osVersion } = webInnertube.session.context.client
+
   let hasTrailer = info.has_trailer
   let trailerIsAgeRestricted = info.getTrailerInfo() === null
 
@@ -504,15 +522,22 @@ export async function getLocalVideoInfo(id) {
       info.storyboards = bypassedInfo.storyboards
 
       hasTrailer = false
-      trailerIsAgeRestricted = false
+      trailerIsAgeRestricted = false;
 
-      clientName = webEmbeddedInnertube.session.context.client.clientName
+      ({ clientName, clientVersion, osName, osVersion } = webEmbeddedInnertube.session.context.client)
     }
   }
 
+  const clientInfo = {
+    clientName: Constants.CLIENT_NAME_IDS[clientName],
+    clientVersion,
+    osName,
+    osVersion
+  }
+
   if ((info.playability_status.status === 'UNPLAYABLE' && (!hasTrailer || trailerIsAgeRestricted)) ||
     info.playability_status.status === 'LOGIN_REQUIRED') {
-    return info
+    return { info, poToken: undefined, clientInfo }
   }
 
   if (hasTrailer && info.playability_status.status !== 'OK') {
@@ -531,12 +556,18 @@ export async function getLocalVideoInfo(id) {
   }
 
   if (info.streaming_data) {
-    await decipherFormats(info.streaming_data.formats, webInnertube.session.player)
+    const player = webInnertube.session.player
+
+    await decipherFormats(info.streaming_data.formats, player)
+
+    if (info.streaming_data.server_abr_streaming_url) {
+      info.streaming_data.server_abr_streaming_url = await player.decipher(info.streaming_data.server_abr_streaming_url)
+    }
 
     const firstFormat = info.streaming_data.adaptive_formats[0]
 
     if (firstFormat.url || firstFormat.signature_cipher || firstFormat.cipher) {
-      await decipherFormats(info.streaming_data.adaptive_formats, webInnertube.session.player)
+      await decipherFormats(info.streaming_data.adaptive_formats, player)
     }
 
     if (info.streaming_data.dash_manifest_url) {
@@ -568,7 +599,13 @@ export async function getLocalVideoInfo(id) {
     }
   }
 
-  return info
+  return {
+    info,
+    poToken: contentPoToken,
+    clientInfo,
+    adEndTimeUnixMs,
+    sabrCanBeUsed: !sabrCannotBeUsed,
+  }
 }
 
 /**
diff --git a/src/renderer/helpers/player/EbmlParser.js b/src/renderer/helpers/player/EbmlParser.js
new file mode 100644
index 0000000000000..53f15e5109231
--- /dev/null
+++ b/src/renderer/helpers/player/EbmlParser.js
@@ -0,0 +1,276 @@
+// Based on https://github.com/shaka-project/shaka-player/blob/main/lib/dash/ebml_parser.js
+// Adapted for use in FreeTube:
+// - General changes such as removing Closure compiler specific stuff
+
+import shaka from 'shaka-player'
+
+const ShakaError = shaka.util.Error
+const BufferUtils = shaka.util.BufferUtils
+
+export class EbmlParser {
+  /**
+   * @param {BufferSource} data
+   */
+  constructor(data) {
+    /** @private */
+    this.dataView_ = BufferUtils.toDataView(data)
+
+    /** @private */
+    this.reader_ = new shaka.util.DataViewReader(this.dataView_, shaka.util.DataViewReader.Endianness.BIG_ENDIAN)
+  }
+
+  /**
+   * @returns {boolean} True if the parser has more data, false otherwise.
+   */
+  hasMoreData() {
+    return this.reader_.hasMoreData()
+  }
+
+  /**
+   * Parses an EBML element from the parser's current position, and advances
+   * the parser.
+   * @returns {EbmlElement} The EBML element.
+   * @see http://matroska.org/technical/specs/rfc/index.html
+   */
+  parseElement() {
+    const id = this.parseId_()
+
+    // Parse the element's size.
+    const vint = this.parseVint_()
+    let size
+    if (/** @__NOINLINE__ */isDynamicSizeValue(vint)) {
+      // If this has an unknown size, assume that it takes up the rest of the
+      // data.
+      size = this.dataView_.byteLength - this.reader_.getPosition()
+    } else {
+      size = /** @__NOINLINE__ */ getVintValue(vint)
+    }
+
+    // Note that if the element's size is larger than the buffer then we are
+    // parsing a "partial element". This may occur if for example we are
+    // parsing the beginning of some WebM container data, but our buffer does
+    // not contain the entire WebM container data.
+    const elementSize =
+      this.reader_.getPosition() + size <= this.dataView_.byteLength
+        ? size
+        : this.dataView_.byteLength - this.reader_.getPosition()
+
+    const dataView = BufferUtils.toDataView(this.dataView_, this.reader_.getPosition(), elementSize)
+
+    this.reader_.skip(elementSize)
+
+    return new EbmlElement(id, dataView)
+  }
+
+  /**
+   * Parses an EBML ID from the parser's current position, and advances the
+   * parser.
+   * @returns {number} The EBML ID.
+   * @private
+   */
+  parseId_() {
+    const vint = this.parseVint_()
+
+    if (vint.length > 7) {
+      throw new ShakaError(
+        ShakaError.Severity.CRITICAL,
+        ShakaError.Category.MEDIA,
+        ShakaError.Code.EBML_OVERFLOW
+      )
+    }
+
+    let id = 0
+    for (const /* byte */ b of vint) {
+      // Note that we cannot use << since |value| may exceed 32 bits.
+      id = (256 * id) + b
+    }
+
+    return id
+  }
+
+  /**
+   * Parses a variable sized integer from the parser's current position, and
+   * advances the parser.
+   * For example:
+   *   1 byte  wide: 1xxx xxxx
+   *   2 bytes wide: 01xx xxxx xxxx xxxx
+   *   3 bytes wide: 001x xxxx xxxx xxxx xxxx xxxx
+   * @returns {Uint8Array} The variable sized integer.
+   * @private
+   */
+  parseVint_() {
+    const position = this.reader_.getPosition()
+    const firstByte = this.reader_.readUint8()
+    if (firstByte === 0) {
+      throw new ShakaError(
+        ShakaError.Severity.CRITICAL,
+        ShakaError.Category.MEDIA,
+        ShakaError.Code.EBML_OVERFLOW
+      )
+    }
+
+    // Determine the index of the highest bit set.
+    const index = Math.floor(Math.log2(firstByte))
+    const numBytes = 8 - index
+
+    if (process.env.NODE_ENV === 'development' && (numBytes > 8 || numBytes < 1)) {
+      throw new Error('Assertion failure: Incorrect log2 value')
+    }
+
+    this.reader_.skip(numBytes - 1)
+    return BufferUtils.toUint8(this.dataView_, position, numBytes)
+  }
+}
+
+// Lets us use the type in ./WebmSegmentIndexParser.js without actually exporting the class
+/** @typedef {EbmlElement} EbmlElement */
+
+class EbmlElement {
+  /**
+   * @param {number} id The ID.
+   * @param {DataView} dataView The DataView.
+   */
+  constructor(id, dataView) {
+    /** @type {number} */
+    this.id = id
+
+    /** @private {DataView} */
+    this.dataView_ = dataView
+  }
+
+  /**
+   * Gets the element's offset from the beginning of the buffer.
+   * @returns {number}
+   */
+  getOffset() {
+    return this.dataView_.byteOffset
+  }
+
+  /**
+   * Interpret the element's data as a list of sub-elements.
+   * @returns {EbmlParser} A parser over the sub-elements.
+   */
+  createParser() {
+    return new EbmlParser(this.dataView_)
+  }
+
+  /**
+   * Interpret the element's data as an unsigned integer.
+   * @returns {number}
+   */
+  getUint() {
+    if (this.dataView_.byteLength > 8) {
+      throw new ShakaError(
+        ShakaError.Severity.CRITICAL,
+        ShakaError.Category.MEDIA,
+        ShakaError.Code.EBML_OVERFLOW
+      )
+    }
+
+    // Ensure we have at most 53 meaningful bits.
+    if ((this.dataView_.byteLength === 8) &&
+      (this.dataView_.getUint8(0) & 0xe0)) {
+      throw new ShakaError(
+        ShakaError.Severity.CRITICAL,
+        ShakaError.Category.MEDIA,
+        ShakaError.Code.JS_INTEGER_OVERFLOW
+      )
+    }
+
+    let value = 0
+
+    for (let i = 0; i < this.dataView_.byteLength; i++) {
+      const chunk = this.dataView_.getUint8(i)
+      value = (256 * value) + chunk
+    }
+
+    return value
+  }
+
+  /**
+   * Interpret the element's data as a floating point number
+   * (32 bits or 64 bits). 80-bit floating point numbers are not supported.
+   * @returns {number}
+   */
+  getFloat() {
+    if (this.dataView_.byteLength === 4) {
+      return this.dataView_.getFloat32(0)
+    } else if (this.dataView_.byteLength === 8) {
+      return this.dataView_.getFloat64(0)
+    } else {
+      throw new ShakaError(
+        ShakaError.Severity.CRITICAL,
+        ShakaError.Category.MEDIA,
+        ShakaError.Code.EBML_BAD_FLOATING_POINT_SIZE
+      )
+    }
+  }
+}
+
+/**
+ * Gets the value of a variable sized integer.
+ * For example, the x's below are part of the vint's value.
+ *    7-bit value: 1xxx xxxx
+ *   14-bit value: 01xx xxxx xxxx xxxx
+ *   21-bit value: 001x xxxx xxxx xxxx xxxx xxxx
+ * @param {Uint8Array} vint The variable sized integer.
+ * @returns {number} The value of the variable sized integer.
+ */
+function getVintValue(vint) {
+  // If |vint| is 8 bytes wide then we must ensure that it does not have more
+  // than 53 meaningful bits. For example, assume |vint| is 8 bytes wide,
+  // so it has the following structure,
+  // 0000 0001 | xxxx xxxx ...
+  // Thus, the first 3 bits following the first byte of |vint| must be 0.
+  if ((vint.length === 8) && (vint[1] & 0xe0)) {
+    throw new ShakaError(
+      ShakaError.Severity.CRITICAL,
+      ShakaError.Category.MEDIA,
+      ShakaError.Code.JS_INTEGER_OVERFLOW
+    )
+  }
+
+  let value = 0
+  for (let i = 0; i < vint.length; i++) {
+    const item = vint[i]
+    if (i === 0) {
+      // Mask out the first few bits of |vint|'s first byte to get the most
+      // significant bits of |vint|'s value. If |vint| is 8 bytes wide then
+      // |value| will be set to 0.
+      const mask = 0x1 << (8 - vint.length)
+      value = item & (mask - 1)
+    } else {
+      // Note that we cannot use << since |value| may exceed 32 bits.
+      value = (256 * value) + item
+    }
+  }
+
+  return value
+}
+
+const DYNAMIC_SIZES = [
+  [0xff],
+  [0x7f, 0xff],
+  [0x3f, 0xff, 0xff],
+  [0x1f, 0xff, 0xff, 0xff],
+  [0x0f, 0xff, 0xff, 0xff, 0xff],
+  [0x07, 0xff, 0xff, 0xff, 0xff, 0xff],
+  [0x03, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff],
+  [0x01, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff]
+]
+
+/**
+ * Checks if the given variable sized integer represents a dynamic size value.
+ * @param {Uint8Array} vint The variable sized integer.
+ * @returns {boolean} true if |vint| represents a dynamic size value,
+ *   false otherwise.
+ */
+function isDynamicSizeValue(vint) {
+  for (const dynamicSizeConst of DYNAMIC_SIZES) {
+    if (BufferUtils.equal(vint, new Uint8Array(dynamicSizeConst))) {
+      return true
+    }
+  }
+
+  return false
+}
diff --git a/src/renderer/helpers/player/Mp4SegmentIndexParser.js b/src/renderer/helpers/player/Mp4SegmentIndexParser.js
new file mode 100644
index 0000000000000..9c1b95d1127cb
--- /dev/null
+++ b/src/renderer/helpers/player/Mp4SegmentIndexParser.js
@@ -0,0 +1,178 @@
+// Based on https://github.com/shaka-project/shaka-player/blob/main/lib/dash/mp4_segment_index_parser.js
+// Adapted for use in FreeTube:
+// - General changes such as removing Closure compiler specific stuff
+// - Rewritten to use functions instead of a class
+// - The segment URLs receive the start time and segment number
+
+import shaka from 'shaka-player'
+
+const ShakaError = shaka.util.Error
+const SeverityCritical = ShakaError.Severity.CRITICAL
+const CategoryMedia = ShakaError.Category.MEDIA
+
+/**
+ * Parses SegmentReferences from an ISO BMFF SIDX structure.
+ * @param {BufferSource} sidxData The MP4's container's SIDX.
+ * @param {number} sidxOffset The SIDX's offset, in bytes, from the start of
+ *   the MP4 container.
+ * @param {string} uri The location of the MP4 file that contains the segments.
+ * @param {shaka.media.InitSegmentReference} initSegmentReference
+ * @param {number} timestampOffset
+ * @param {number} appendWindowStart
+ * @param {number} appendWindowEnd
+ * @returns {shaka.media.SegmentReference[]}
+ */
+export function parseMp4SegmentIndex(
+  sidxData,
+  sidxOffset,
+  uri,
+  initSegmentReference,
+  timestampOffset,
+  appendWindowStart,
+  appendWindowEnd
+) {
+  let references
+
+  const parser = new shaka.util.Mp4Parser()
+    .fullBox('sidx', (box) => {
+      references = /** @__NOINLINE__ */ parseSIDX(
+        sidxOffset,
+        initSegmentReference,
+        timestampOffset,
+        appendWindowStart,
+        appendWindowEnd,
+        uri,
+        box
+      )
+    })
+
+  if (sidxData) {
+    parser.parse(sidxData)
+  }
+
+  if (references) {
+    return references
+  } else {
+    console.error('[parseMp4SegmentIndex] Invalid box type, expected "sidx".')
+    throw new ShakaError(
+      SeverityCritical,
+      CategoryMedia,
+      ShakaError.Code.MP4_SIDX_WRONG_BOX_TYPE
+    )
+  }
+}
+
+/**
+ * Parse a SIDX box from the given reader.
+ *
+ * @param {number} sidxOffset
+ * @param {shaka.media.InitSegmentReference} initSegmentReference
+ * @param {number} timestampOffset
+ * @param {number} appendWindowStart
+ * @param {number} appendWindowEnd
+ * @param {string} uri The location of the MP4 file that contains the segments.
+ * @param {shaka.extern.ParsedBox} box
+ * @returns {shaka.media.SegmentReference[]}
+ */
+function parseSIDX(
+  sidxOffset,
+  initSegmentReference,
+  timestampOffset,
+  appendWindowStart,
+  appendWindowEnd,
+  uri,
+  box
+) {
+  if (process.env.NODE_ENV === 'development' && box.version == null) {
+    throw new Error('Assertion failure: SIDX is a full box and should have a valid version.')
+  }
+
+  const references = []
+
+  // Parse the SIDX structure.
+  // Skip reference_ID (32 bits).
+  box.reader.skip(4)
+
+  const timescale = box.reader.readUint32()
+
+  if (timescale === 0) {
+    console.error('[parseMp4SegmentIndex] Invalid timescale.')
+    throw new ShakaError(
+      SeverityCritical,
+      CategoryMedia,
+      ShakaError.Code.MP4_SIDX_INVALID_TIMESCALE
+    )
+  }
+
+  let earliestPresentationTime
+  let firstOffset
+
+  if (box.version === 0) {
+    earliestPresentationTime = box.reader.readUint32()
+    firstOffset = box.reader.readUint32()
+  } else {
+    earliestPresentationTime = box.reader.readUint64()
+    firstOffset = box.reader.readUint64()
+  }
+
+  // Skip reserved (16 bits).
+  box.reader.skip(2)
+
+  // Add references.
+  const referenceCount = box.reader.readUint16()
+
+  // Subtract the presentation time offset
+  let unscaledStartTime = earliestPresentationTime
+  let startByte = sidxOffset + box.size + firstOffset
+
+  for (let i = 0; i < referenceCount; i++) {
+    // |chunk| is 1 bit for |referenceType|, and 31 bits for |referenceSize|.
+    const chunk = box.reader.readUint32()
+    const referenceType = (chunk & 0x80000000) >>> 31
+    const referenceSize = chunk & 0x7FFFFFFF
+
+    const subsegmentDuration = box.reader.readUint32()
+
+    // Skipping 1 bit for |startsWithSap|, 3 bits for |sapType|, and 28 bits
+    // for |sapDelta|.
+    box.reader.skip(4)
+
+    // If |referenceType| is 1 then the reference is to another SIDX.
+    // We do not support this.
+    if (referenceType === 1) {
+      console.error('[parseMp4SegmentIndex] Hierarchical SIDXs are not supported.')
+      throw new ShakaError(
+        SeverityCritical,
+        CategoryMedia,
+        ShakaError.Code.MP4_SIDX_TYPE_NOT_SUPPORTED
+      )
+    }
+
+    // The media timestamps inside the container.
+    const nativeStartTime = unscaledStartTime / timescale
+    const nativeEndTime =
+      (unscaledStartTime + subsegmentDuration) / timescale
+
+    const uris = [`${uri}&startTimeMs=${Math.round((nativeStartTime + timestampOffset) * 1000)}&sq=${i + 1}`]
+
+    references.push(
+      new shaka.media.SegmentReference(
+        nativeStartTime + timestampOffset,
+        nativeEndTime + timestampOffset,
+        () => uris,
+        startByte,
+        startByte + referenceSize - 1,
+        initSegmentReference,
+        timestampOffset,
+        appendWindowStart,
+        appendWindowEnd
+      )
+    )
+
+    unscaledStartTime += subsegmentDuration
+    startByte += referenceSize
+  }
+
+  box.parser.stop()
+  return references
+}
diff --git a/src/renderer/helpers/player/SabrManifestParser.js b/src/renderer/helpers/player/SabrManifestParser.js
new file mode 100644
index 0000000000000..aa50aff96b389
--- /dev/null
+++ b/src/renderer/helpers/player/SabrManifestParser.js
@@ -0,0 +1,718 @@
+import shaka from 'shaka-player'
+import { parseWebmSegmentIndex } from './WebmSegmentIndexParser'
+import { parseMp4SegmentIndex } from './Mp4SegmentIndexParser'
+
+/**
+ * @typedef {{
+ *   duration: number,
+ *   formats: {
+ *     itag: number,
+ *     lastModified: string,
+ *     mimeType: string,
+ *     xtags: string | undefined,
+ *     bitrate: number,
+ *     initRange: {
+ *       start: number,
+ *       end: number
+ *     },
+ *     indexRange: {
+ *       start: number,
+ *       end: number
+ *     },
+ *     width: number | undefined,
+ *     height: number | undefined,
+ *     frameRate: number | undefined,
+ *     quality: string,
+ *     language: string | undefined,
+ *     audioSampleRate: number | undefined,
+ *     audioChannels: number | undefined,
+ *     isDrc: boolean | undefined,
+ *     isOriginal: boolean | undefined,
+ *     isDubbed: boolean | undefined,
+ *     isAutoDubbed: boolean | undefined,
+ *     isDescriptive: boolean | undefined,
+ *     isSecondary: boolean | undefined,
+ *     spatialAudio: boolean
+ *     label: string | undefined,
+ *     colorTransferCharacteristics: 'BT709' | 'BT2020_10' | 'SMPTEST2084' | 'ARIB_STD_B67' | undefined,
+ *     colorPrimaries: 'BT709' | 'BT2020' | undefined
+ *   }[],
+ *   captions: {
+ *     id: string,
+ *     label: string,
+ *     mimeType: string,
+ *     language: string,
+ *     url: string
+ *   }[],
+ *   storyboards: {
+ *     templateUrl: string,
+ *     mimeType: string,
+ *     columns: number,
+ *     rows: number,
+ *     thumbnailCount: number,
+ *     thumbnailWidth: number,
+ *     thumbnailHeight: number,
+ *     storyboardCount: number,
+ *     interval: number
+ *   }[]
+ * }} SabrManifest
+ */
+
+const NetworkingEngine = shaka.net.NetworkingEngine
+
+export const MANIFEST_TYPE_SABR = 'application/sabr+json'
+
+const CODECS_REGEX = /codecs="?([^"]+)"?/
+
+const VIDEO_CODEC_PRIORITIES = [
+  'av01',
+  'vp09',
+  'vp9',
+  'avc1'
+]
+
+/**
+ * @implements {shaka.extern.ManifestParser}
+ */
+class SabrManifestParser {
+  constructor() {
+    /**
+     * @private
+     * @type {shaka.extern.ManifestConfiguration | null}
+     */
+    this._config = null
+  }
+
+  /**
+   * @param {string} _uri
+   */
+  banLocation(_uri) {
+  }
+
+  /**
+   * @param {shaka.extern.ManifestConfiguration} config
+   * @param {(() => boolean) | undefined} _isPreloadFn
+   */
+  configure(config, _isPreloadFn) {
+    this._config = config
+  }
+
+  /**
+   * @param {shaka.extern.Variant} _variant
+   */
+  onInitialVariantChosen(_variant) {
+  }
+
+  /**
+   * @param {HTMLMediaElement | null} _mediaElement
+   */
+  setMediaElement(_mediaElement) {
+  }
+
+  /**
+   * @param {string} uri
+   * @param {shaka.extern.ManifestParser.PlayerInterface} playerInterface
+   * @returns {Promise<shaka.extern.Manifest>}
+   */
+  async start(uri, { filter, networkingEngine }) {
+    // As SABR manifests are a FreeTube internal thing we can skip going through the networking engine
+    // because we know it will always have the same format
+
+    // "data:" (5) + mime type length + "," (1)
+    const uriPrefixLength = 5 + MANIFEST_TYPE_SABR.length + 1
+
+    /** @type {SabrManifest} */
+    const manifestData = JSON.parse(decodeURIComponent(uri.slice(uriPrefixLength)))
+
+    const presentationTimeline = new shaka.media.PresentationTimeline(0, 0, true)
+    presentationTimeline.setStatic(true)
+    presentationTimeline.setSegmentAvailabilityDuration(Infinity)
+    presentationTimeline.lockStartTime()
+    presentationTimeline.setDuration(manifestData.duration)
+
+    let currentId = 0
+
+    /** @type {shaka.extern.Stream[]} */
+    const audioStreams = []
+    /** @type {shaka.extern.Stream[]} */
+    const videoStreams = []
+
+    const hasDrcAudio = manifestData.formats.some(format => format.isDrc)
+
+    // For audio only playback we still need to specify a video fromat ID
+    // the server won't return it but it will error if we don't list one
+    // so lets pick the worst video quality  just in case
+    let fakeVideoFormatId
+
+    if (this._config.disableVideo) {
+      const worstVideoFormat = manifestData.formats.reduce((previousFormat, currentFormat) => {
+        if (currentFormat.width === undefined) {
+          return previousFormat
+        } else if (previousFormat === null) {
+          return currentFormat
+        } else {
+          return currentFormat.bitrate < previousFormat.bitrate ? currentFormat : previousFormat
+        }
+      }, null)
+
+      fakeVideoFormatId = buildFormatId(worstVideoFormat)
+    }
+
+    for (const format of manifestData.formats) {
+      if (format.mimeType.startsWith('audio/')) {
+        if (format.xtags === 'CgcKAnZiEgEx') {
+          // Workaround to reject certain xtags value to avoid reload
+          // https://github.com/LuanRT/googlevideo/issues/42
+          // console.log('CgcKAnZiEgEx audio format', format)
+          continue
+        }
+        audioStreams.push(
+          /** @__NOINLINE__ */ createAudioStream(
+            format,
+            currentId++,
+            hasDrcAudio,
+            presentationTimeline,
+            networkingEngine,
+            fakeVideoFormatId
+          )
+        )
+      } else if (!this._config.disableVideo) {
+        videoStreams.push(
+          /** @__NOINLINE__ */ createVideoStream(format, currentId++, presentationTimeline, networkingEngine)
+        )
+      }
+    }
+
+    audioStreams.sort((a, b) => b.bandwidth - a.bandwidth)
+
+    if (!this._config.disableVideo) {
+      videoStreams.sort((a, b) => {
+        return VIDEO_CODEC_PRIORITIES.findIndex(codec => a.codecs.startsWith(codec)) -
+          VIDEO_CODEC_PRIORITIES.findIndex(codec => b.codecs.startsWith(codec))
+      })
+    }
+
+    /** @type {shaka.extern.Variant[]} */
+    const variants = []
+    let variantId = 0
+
+    if (this._config.disableVideo) {
+      for (const stream of audioStreams) {
+        variants.push({
+          id: variantId++,
+          audio: stream,
+          bandwidth: stream.bandwidth,
+          language: stream.language,
+          allowedByApplication: true,
+          allowedByKeySystem: true,
+          decodingInfos: [],
+          disabledUntilTime: 0,
+          primary: stream.primary,
+          video: null
+        })
+      }
+    } else {
+      for (const audioStream of audioStreams) {
+        for (const videoStream of videoStreams) {
+          variants.push({
+            id: variantId++,
+            audio: audioStream,
+            video: videoStream,
+            bandwidth: audioStream.bandwidth + videoStream.bandwidth,
+            language: audioStream.language,
+            allowedByApplication: true,
+            allowedByKeySystem: true,
+            decodingInfos: [],
+            disabledUntilTime: 0,
+            primary: audioStream.primary
+          })
+        }
+      }
+    }
+
+    const textStreams = /** @__NOINLINE__ */ createTextStreams(manifestData.captions, presentationTimeline, currentId)
+    currentId += textStreams.length
+
+    const imageStreams = /** @__NOINLINE__ */ createImageStreams(manifestData.storyboards, presentationTimeline, currentId)
+
+    const manifest = {
+      type: 'SABR',
+      startTime: 0,
+      variants,
+      textStreams,
+      imageStreams,
+      presentationTimeline,
+
+      gapCount: 0,
+      ignoreManifestTimestampsInSegmentsMode: false,
+      isLowLatency: false,
+      nextUrl: null,
+      offlineSessionIds: [],
+      periodCount: 1,
+      sequenceMode: false,
+      serviceDescription: null,
+    }
+
+    await filter(manifest)
+
+    return manifest
+  }
+
+  /**
+   * @returns {Promise<void>}
+   */
+  stop() {
+    this._config = null
+    return Promise.resolve()
+  }
+}
+
+/**
+ * @param {SabrManifest['formats'][0]} format
+ */
+function buildFormatId(format) {
+  return `${format.itag}-${format.lastModified ?? '0'}-${format.xtags ?? ''}`
+}
+
+/**
+ * @param {SabrManifest['formats'][0]} format
+ * @param {number} id
+ * @param {boolean} hasDrcAudio
+ * @param {shaka.media.PresentationTimeline} presentationTimeline
+ * @param {shaka.net.NetworkingEngine} networkingEngine
+ * @param {string | undefined} fakeVideoFormatId
+ */
+function createAudioStream(
+  format,
+  id,
+  hasDrcAudio,
+  presentationTimeline,
+  networkingEngine,
+  fakeVideoFormatId
+) {
+  const roles = []
+
+  if (format.isOriginal) {
+    roles.push('main')
+  } else if (format.isDrc) {
+    roles.push('drc')
+  } else if (format.isDubbed) {
+    roles.push('dubbed')
+  } else if (format.isAutoDubbed) {
+    roles.push('dubbed-auto')
+  } else if (format.isDescriptive) {
+    roles.push('descriptive')
+  } else if (format.isSecondary) {
+    roles.push('secondary')
+  }
+
+  let label = null
+
+  if (format.label) {
+    label = format.label
+  } else if (hasDrcAudio) {
+    label = format.isDrc ? 'Stable Volume' : 'Original'
+  }
+
+  /** @type {shaka.extern.Stream} */
+  const stream = {
+    type: 'audio',
+    id,
+    originalId: buildFormatId(format),
+    mimeType: format.mimeType.split(';', 1)[0],
+    codecs: format.mimeType.match(CODECS_REGEX)[1],
+    fullMimeTypes: new Set([format.mimeType]),
+    bandwidth: format.bitrate,
+    audioSamplingRate: format.audioSampleRate ?? null,
+    channelsCount: format.audioChannels ?? null,
+    label,
+    language: format.language ?? 'und',
+    originalLanguage: format.language ?? null,
+    spatialAudio: format.spatialAudio,
+    roles,
+    primary: roles.includes('main'),
+    segmentIndex: null,
+    createSegmentIndex: async () => {
+      // shaka-player sometimes calls the create function even when the segment index already exists
+      if (stream.segmentIndex) { return }
+
+      stream.segmentIndex = await createMediaSegmentIndex(
+        format,
+        stream,
+        presentationTimeline,
+        networkingEngine,
+        fakeVideoFormatId
+      )
+    },
+    closeSegmentIndex: () => {
+      if (stream.segmentIndex) {
+        stream.segmentIndex.release()
+        stream.segmentIndex = null
+      }
+    },
+
+    accessibilityPurpose: null,
+    closedCaptions: null,
+    drmInfos: [],
+    emsgSchemeIdUris: null,
+    encrypted: false,
+    external: false,
+    fastSwitching: false,
+    forced: false,
+    groupId: null,
+    isAudioMuxedInVideo: false,
+    keyIds: new Set(),
+    trickModeVideo: null
+  }
+
+  return stream
+}
+
+/**
+ * @param {SabrManifest['formats'][0]} format
+ * @param {number} id
+ * @param {shaka.media.PresentationTimeline} presentationTimeline
+ * @param {shaka.net.NetworkingEngine} networkingEngine
+ */
+function createVideoStream(format, id, presentationTimeline, networkingEngine) {
+  const colorGamut = format.colorPrimaries === 'BT2020' ? 'rec2020' : 'srgb'
+
+  let hdr = 'SDR'
+
+  if (format.colorTransferCharacteristics === 'SMPTEST2084') {
+    hdr = 'PQ'
+  } else if (format.colorTransferCharacteristics === 'ARIB_STD_B67') {
+    hdr = 'HLG'
+  }
+
+  /** @type {shaka.extern.Stream} */
+  const stream = {
+    type: 'video',
+    id,
+    originalId: buildFormatId(format),
+    mimeType: format.mimeType.split(';', 1)[0],
+    codecs: format.mimeType.match(CODECS_REGEX)[1],
+    fullMimeTypes: new Set([format.mimeType]),
+    bandwidth: format.bitrate,
+    width: format.width,
+    height: format.height,
+    frameRate: format.frameRate,
+    colorGamut,
+    hdr,
+    roles: [],
+    segmentIndex: null,
+    createSegmentIndex: async () => {
+      // shaka-player sometimes calls the create function even when the segment index already exists
+      if (stream.segmentIndex) { return }
+
+      stream.segmentIndex = await createMediaSegmentIndex(format, stream, presentationTimeline, networkingEngine)
+    },
+    closeSegmentIndex: () => {
+      if (stream.segmentIndex) {
+        stream.segmentIndex.release()
+        stream.segmentIndex = null
+      }
+    },
+
+    accessibilityPurpose: null,
+    audioSamplingRate: null,
+    channelsCount: null,
+    closedCaptions: null,
+    drmInfos: [],
+    emsgSchemeIdUris: null,
+    encrypted: false,
+    external: false,
+    fastSwitching: false,
+    forced: false,
+    groupId: null,
+    isAudioMuxedInVideo: false,
+    keyIds: new Set(),
+    label: null,
+    language: 'und',
+    originalLanguage: null,
+    primary: false,
+    spatialAudio: false,
+    trickModeVideo: null
+  }
+
+  return stream
+}
+
+/**
+ * @param {SabrManifest['captions']} captions
+ * @param {shaka.media.PresentationTimeline} presentationTimeline
+ * @param {number} currentId
+ */
+function createTextStreams(captions, presentationTimeline, currentId) {
+  return captions.map((caption) => {
+    /** @type {shaka.extern.Stream} */
+    const stream = {
+      type: 'text',
+      id: currentId++,
+      originalId: caption.id,
+      mimeType: caption.mimeType,
+      fullMimeTypes: new Set([caption.mimeType]),
+      label: caption.label,
+      language: caption.language,
+      originalLanguage: caption.language,
+      kind: 'captions',
+      segmentIndex: null,
+      createSegmentIndex: () => {
+        stream.segmentIndex = shaka.media.SegmentIndex.forSingleSegment(
+          0,
+          presentationTimeline.getDuration(),
+          [caption.url]
+        )
+
+        stream.segmentIndex.get(0).mimeType = caption.mimeType
+
+        return Promise.resolve()
+      },
+      closeSegmentIndex: () => {
+        if (stream.segmentIndex) {
+          stream.segmentIndex.release()
+          stream.segmentIndex = null
+        }
+      },
+
+      accessibilityPurpose: null,
+      audioSamplingRate: null,
+      channelsCount: null,
+      closedCaptions: null,
+      codecs: '',
+      drmInfos: [],
+      emsgSchemeIdUris: null,
+      encrypted: false,
+      external: false,
+      fastSwitching: false,
+      forced: false,
+      groupId: null,
+      isAudioMuxedInVideo: false,
+      keyIds: new Set(),
+      primary: false,
+      roles: [],
+      spatialAudio: false,
+      trickModeVideo: null
+    }
+
+    return stream
+  })
+}
+
+/**
+ * @param {SabrManifest['storyboards']} storyboards
+ * @param {shaka.media.PresentationTimeline} presentationTimeline
+ * @param {number} currentId
+ */
+function createImageStreams(storyboards, presentationTimeline, currentId) {
+  return storyboards.map((storyboard) => {
+    const tilesLayout = `${storyboard.columns}x${storyboard.rows}`
+
+    /** @type {shaka.extern.Stream} */
+    const stream = {
+      type: 'image',
+      id: currentId++,
+      mimeType: storyboard.mimeType,
+      fullMimeTypes: new Set([storyboard.mimeType]),
+      tilesLayout,
+      width: storyboard.thumbnailWidth * storyboard.columns,
+      height: storyboard.thumbnailHeight * storyboard.rows,
+      segmentIndex: null,
+      createSegmentIndex: () => {
+        const duration = presentationTimeline.getDuration()
+
+        const interval = storyboard.interval > 0 ? storyboard.interval : duration / storyboard.thumbnailCount
+        const segmentDuration = interval * storyboard.columns * storyboard.rows
+
+        const references = []
+
+        for (let i = 0; i < storyboard.storyboardCount; i++) {
+          const startTime = i * segmentDuration
+          const endTime = Math.min(startTime + segmentDuration, duration)
+
+          const urls = [storyboard.templateUrl.replace('$M', i)]
+
+          const segmentReference = new shaka.media.SegmentReference(
+            startTime,
+            endTime,
+            () => urls,
+            0,
+            null,
+            null,
+            0,
+            0,
+            Infinity,
+            undefined,
+            tilesLayout,
+            interval
+          )
+
+          segmentReference.mimeType = storyboard.mimeType
+
+          references.push(segmentReference)
+        }
+
+        stream.segmentIndex = new shaka.media.SegmentIndex(references)
+
+        return Promise.resolve()
+      },
+      closeSegmentIndex: () => {
+        if (stream.segmentIndex) {
+          stream.segmentIndex.release()
+          stream.segmentIndex = null
+        }
+      },
+
+      accessibilityPurpose: null,
+      audioSamplingRate: null,
+      channelsCount: null,
+      closedCaptions: null,
+      codecs: '',
+      drmInfos: [],
+      emsgSchemeIdUris: null,
+      encrypted: false,
+      external: false,
+      fastSwitching: false,
+      forced: false,
+      groupId: null,
+      isAudioMuxedInVideo: false,
+      keyIds: new Set(),
+      label: null,
+      language: 'und',
+      originalId: null,
+      originalLanguage: null,
+      primary: false,
+      roles: [],
+      spatialAudio: false,
+      trickModeVideo: null
+    }
+
+    return stream
+  })
+}
+
+/**
+ * @param {SabrManifest['formats'][0]} format
+ * @param {shaka.extern.Stream} stream
+ * @param {shaka.media.PresentationTimeline} presentationTimeline
+ * @param {shaka.net.NetworkingEngine} networkingEngine
+ * @param {string | undefined} fakeVideoFormatId
+ */
+async function createMediaSegmentIndex(
+  format,
+  stream,
+  presentationTimeline,
+  networkingEngine,
+  fakeVideoFormatId = undefined
+) {
+  let url = `sabr:${stream.type}?formatId=${encodeURIComponent(stream.originalId)}`
+
+  if (fakeVideoFormatId) {
+    url += `&videoFormatId=${encodeURIComponent(fakeVideoFormatId)}`
+  }
+
+  if (format.isDrc) {
+    url += '&drc'
+  }
+
+  if (stream.type === 'video') {
+    const resolution = format.height || 360
+
+    url += `&resolution=${resolution}`
+  }
+
+  /** @type {shaka.extern.Request} */
+  const request = {
+    method: 'GET',
+    uris: [`${url}&init`],
+    contentType: stream.type,
+    body: null,
+    headers: {},
+    allowCrossSiteCredentials: false,
+    retryParameters: NetworkingEngine.defaultRetryParameters(),
+    licenseRequestType: null,
+    sessionId: null,
+    drmInfo: null,
+    initData: null,
+    initDataType: null,
+    streamDataCallback: null,
+  }
+
+  /** @type {shaka.extern.Response} */
+  const response = await networkingEngine.request(
+    NetworkingEngine.RequestType.SEGMENT,
+    request,
+    {
+      stream: stream,
+      type: NetworkingEngine.AdvancedRequestType.INIT_SEGMENT
+    }
+  ).promise
+
+  return /** @__NOINLINE__ */ createVodMediaSegmentIndex(url, response, format, stream, presentationTimeline.getDuration())
+}
+
+/**
+ * @param {string} url
+ * @param {shaka.extern.Response} response
+ * @param {SabrManifest['formats'][0]} format
+ * @param {shaka.extern.Stream} stream
+ * @param {number} duration
+ */
+function createVodMediaSegmentIndex(url, response, format, stream, duration) {
+  /** @type {shaka.extern.MediaQualityInfo} */
+  const mediaQuality = {
+    contentType: stream.type,
+    bandwidth: stream.bandwidth,
+    mimeType: stream.mimeType,
+    codecs: stream.codecs,
+    language: stream.language,
+    label: stream.label,
+    audioSamplingRate: stream.audioSamplingRate,
+    channelsCount: stream.channelsCount,
+    width: stream.width ?? null,
+    height: stream.height ?? null,
+    frameRate: stream.frameRate ?? null,
+    roles: stream.roles,
+    pixelAspectRatio: stream.pixelAspectRatio ?? null
+  }
+
+  const buffer = ArrayBuffer.isView(response.data) ? response.data.buffer : response.data
+
+  const initData = buffer.slice(format.initRange.start, format.initRange.end + 1)
+  const indexData = buffer.slice(format.indexRange.start, format.indexRange.end + 1)
+
+  const initUrls = [`${url}&init`]
+
+  const initSegmentReference = new shaka.media.InitSegmentReference(
+    () => initUrls,
+    format.initRange.start,
+    format.initRange.end,
+    mediaQuality,
+    null,
+    initData,
+    null
+  )
+
+  initSegmentReference.mimeType = stream.mimeType
+  initSegmentReference.codecs = stream.codecs
+
+  /** @type {shaka.media.SegmentReference[] | undefined} */
+  let references
+
+  if (stream.mimeType.endsWith('/webm')) {
+    references = /** @__NOINLINE__ */ parseWebmSegmentIndex(indexData, initData, url, initSegmentReference, 0, 0, duration)
+  } else {
+    references = /** @__NOINLINE__ */ parseMp4SegmentIndex(indexData, format.indexRange.start, url, initSegmentReference, 0, 0, duration)
+  }
+
+  for (const reference of references) {
+    reference.mimeType = stream.mimeType
+    reference.codecs = stream.codecs
+  }
+
+  return new shaka.media.SegmentIndex(references)
+}
+
+if (process.env.SUPPORTS_LOCAL_API) {
+  shaka.media.ManifestParser.registerParserByMime(MANIFEST_TYPE_SABR, () => new SabrManifestParser())
+}
diff --git a/src/renderer/helpers/player/SabrSchemePlugin.js b/src/renderer/helpers/player/SabrSchemePlugin.js
new file mode 100644
index 0000000000000..0e63f4ff5b93f
--- /dev/null
+++ b/src/renderer/helpers/player/SabrSchemePlugin.js
@@ -0,0 +1,863 @@
+import { base64ToU8, concatenateChunks, EventEmitterLike, MAX_INT32_VALUE } from 'googlevideo/utils'
+import { CompositeBuffer, UmpReader } from 'googlevideo/ump'
+import {
+  UMPPartId,
+  VideoPlaybackAbrRequest,
+  StreamProtectionStatus,
+  SabrError,
+  SabrRedirect,
+  MediaHeader,
+  SabrContextSendingPolicy,
+  SabrContextUpdate,
+  SabrContextWritePolicy,
+  NextRequestPolicy,
+  PlaybackCookie,
+  ReloadPlaybackContext,
+} from 'googlevideo/protos'
+import shaka from 'shaka-player'
+
+import { deepCopy } from '../utils'
+
+const AbortableOperation = shaka.util.AbortableOperation
+const ShakaError = shaka.util.Error
+
+/**
+ * @typedef OperationInputs
+ * @type {object}
+ * @property {string} uri
+ * @property {shaka.extern.Request} request
+ * @property {shaka.net.NetworkingEngine.RequestType} requestType
+ * @property {shaka.extern.HeadersReceived} headersReceived
+ * The following are calculated from above properties
+ * @property {string} formatIdString
+ * @property {boolean} isInit
+ * @property {number} sequenceNumber
+ */
+/**
+ * @typedef AbortStatus
+ * @type {object}
+ * @property {boolean} cancelled
+ * @property {boolean} timedOut
+ * @property {boolean} playerReloadRequested
+ * @property {boolean} finished
+ */
+/**
+ * @typedef CurrentState
+ * @type {object}
+ * @property {Map<string, Uint8Array>} initDataCache
+ * @property {VideoPlaybackAbrRequest} abrRequest
+ * @property {RequestInit} requestInit
+ * @property {AbortStatus} abortStatus
+ * @property {AbortController} abortController
+ * @property {SabrStreamState} sabrStreamState
+ * @property {?TimeoutController} timeoutController
+ * @property {?EventEmitterLike} eventEmitter
+ * @property {number} cumulativeBackOffTimeMs
+ * @property {number} cumulativeBackOffRequested
+ * @property {number} cumulativeRetryDueToNextRequestPolicy
+ */
+/**
+ * @typedef SabrStreamState
+ * @type {object}
+ * @property {string} sabrUrl
+ * @property {Set<number>} activeSabrContextTypes
+ * @property {Map<number, SabrContextUpdate>} sabrContexts
+ * @property {?NextRequestPolicy} nextRequestPolicy
+ * @property {boolean} playerReloadRequested
+ * @property {number} requestNumber
+ */
+/**
+ * @typedef TimeoutController
+ * @type {object}
+ * @property {() => void} resetTimeoutOnce
+ * @property {() => void} clearTimeout
+ */
+/**
+ * @typedef SabrStream
+ * @type {object}
+ * @property {(cb: ({backoffMs: number}) => void) => void} onBackoffRequested
+ * @property {(cb: () => void) => void} onReloadOnce
+ * @property {() => void | undefined} cleanup
+ */
+
+/**
+ * @param {string} str
+ */
+function formatIdFromString(str) {
+  const videoFormatIdParts = str.split('-')
+
+  return {
+    itag: parseInt(videoFormatIdParts[0]),
+    lastModified: videoFormatIdParts[1],
+    xtags: videoFormatIdParts[2]
+  }
+}
+
+/**
+ * @param {import('googlevideo/protos').FormatId} formatId
+ * @param {shaka.extern.BufferedRange} buffered
+ * @param {shaka.media.SegmentIndex} segmentIndex
+ */
+function createBufferedRange(formatId, buffered, segmentIndex) {
+  let endSegmentIndex = segmentIndex.find(buffered.end)
+  if (endSegmentIndex == null) {
+    // Using Last end time will get `null` in `segmentIndex.find`
+    endSegmentIndex = segmentIndex.getNumReferences() - 1
+  }
+
+  return {
+    formatId,
+    startTimeMs: String(Math.round(buffered.start * 1000)),
+    durationMs: String(Math.round((buffered.end - buffered.start) * 1000)),
+    startSegmentIndex: segmentIndex.find(buffered.start),
+    endSegmentIndex: endSegmentIndex,
+  }
+}
+
+/**
+ * Creates a bogus buffered range for a format. Used when we want to signal to the server to not send any
+ * segments for this format.
+ * @param {import('googlevideo/protos').FormatId} formatId - The format to create a full buffer range for.
+ * @returns {import('googlevideo/protos').BufferedRange} A BufferedRange object indicating the entire format is buffered.
+ */
+function createFullBufferRange(formatId) {
+  return {
+    formatId: formatId,
+    durationMs: MAX_INT32_VALUE,
+    startTimeMs: '0',
+    startSegmentIndex: parseInt(MAX_INT32_VALUE),
+    endSegmentIndex: parseInt(MAX_INT32_VALUE),
+    timeRange: {
+      durationTicks: MAX_INT32_VALUE,
+      startTicks: '0',
+      timescale: 1000
+    }
+  }
+}
+
+/**
+ * @param {shaka.Player} player
+ * @param {shaka.extern.Manifest} manifest
+ * @param {boolean} audioFormatsActive
+ * @param {boolean} streamIsVideo - Fake audio bufferRange can be used
+ * @param {boolean} streamIsAudio - Fake video bufferRange can be used
+ * @param {import('googlevideo/protos').BufferedRange[]} bufferedRanges
+ * @param {shaka.extern.Track} activeVariant
+ */
+function fillBufferedRanges(player, manifest, audioFormatsActive, streamIsVideo, streamIsAudio, bufferedRanges, activeVariant) {
+  const bufferedInfo = player.getBufferedInfo()
+
+  if (bufferedInfo.audio.length > 0 || bufferedInfo.video.length > 0) {
+    let activeManifestVariant
+    if (audioFormatsActive) {
+      activeManifestVariant = manifest.variants.find((variant) => {
+        return variant.audio.originalId === activeVariant.originalAudioId
+      })
+    } else {
+      activeManifestVariant = manifest.variants.find((variant) => {
+        return variant.audio.originalId === activeVariant.originalAudioId &&
+          variant.video.originalId === activeVariant.originalVideoId
+      })
+    }
+
+    const audioFormatId = formatIdFromString(activeVariant.originalAudioId)
+    const audioSegmentIndex = activeManifestVariant.audio.segmentIndex
+
+    if (streamIsVideo) {
+      bufferedRanges.push(createFullBufferRange(audioFormatId))
+    } else {
+      for (const buffered of bufferedInfo.audio) {
+        bufferedRanges.push(createBufferedRange(audioFormatId, buffered, audioSegmentIndex))
+      }
+    }
+
+    // Lazily initialize these variables as video data won't exist for audio-only playback
+    let videoFormatId
+    let videoSegmentIndex
+
+    if (streamIsAudio && bufferedInfo.video.length > 0) {
+      videoFormatId = formatIdFromString(activeVariant.originalVideoId)
+      bufferedRanges.push(createFullBufferRange(videoFormatId))
+    } else {
+      for (const buffered of bufferedInfo.video) {
+        if (!videoFormatId) {
+          videoFormatId = formatIdFromString(activeVariant.originalVideoId)
+        }
+
+        if (!videoSegmentIndex) {
+          videoSegmentIndex = activeManifestVariant.video.segmentIndex
+        }
+
+        bufferedRanges.push(createBufferedRange(videoFormatId, buffered, videoSegmentIndex))
+      }
+    }
+  }
+}
+
+/**
+ * @param {string} uri
+ * @param {shaka.extern.Request} request
+ * @param {Uint8Array} data
+ * @returns {shaka.util.AbortableOperation<shaka.extern.Response>}
+ */
+function createCacheResponse(uri, request, data) {
+  return AbortableOperation.completed({
+    data,
+    fromCache: true,
+    headers: {},
+    originalRequest: request,
+    originalUri: uri,
+    uri
+  })
+}
+
+/**
+ * @param {shaka.util.Error.Code} code
+ * @param {...any} args
+ */
+function createRecoverableNetworkError(code, ...args) {
+  return new ShakaError(ShakaError.Severity.RECOVERABLE, ShakaError.Category.NETWORK, code, ...args)
+}
+
+/**
+ * @param {SabrStreamState} sabrStreamState
+ */
+function prepareSabrContexts(sabrStreamState) {
+  /** @type {SabrContextUpdate[]} */
+  const sabrContexts = []
+  /** @type {number[]} */
+  const unsentSabrContexts = []
+
+  for (const ctxUpdate of sabrStreamState.sabrContexts.values()) {
+    if (sabrStreamState.activeSabrContextTypes.has(ctxUpdate.type)) {
+      sabrContexts.push(ctxUpdate)
+    } else {
+      unsentSabrContexts.push(ctxUpdate.type)
+    }
+  }
+
+  return { sabrContexts, unsentSabrContexts }
+}
+
+/**
+ * @template T
+ * @param {import('googlevideo/shared-types').Part} part
+ * @param {{ decode: (data: Uint8Array) => T }} decoder
+ * @returns {T | undefined}
+ */
+function decodePart(part, decoder) {
+  if (!part.data.chunks.length) return undefined
+
+  try {
+    const chunk = part.data.chunks.length === 1 ? part.data.chunks[0] : concatenateChunks(part.data.chunks)
+    return decoder.decode(chunk)
+  } catch {
+    return undefined
+  }
+}
+
+/**
+ * @param {(args: void) => void} callback
+ * @param {number} timeoutMs
+ * @return TimeoutController
+ */
+function createTimeoutController(callback, timeoutMs) {
+  return {
+    _timeout: setTimeout(callback, timeoutMs),
+    _resetCount: 0,
+    resetTimeoutOnce() {
+      if (this._resetCount > 0) return
+
+      this.clearTimeout()
+      this._timeout = setTimeout(callback, timeoutMs)
+      this._resetCount++
+    },
+    clearTimeout() {
+      clearTimeout(this._timeout)
+    },
+  }
+}
+
+/**
+ * @param {OperationInputs} operationInputs - readonly
+ * @param {CurrentState} currentState - can be updated
+ */
+async function doRequest(
+  operationInputs,
+  currentState,
+) {
+  let response
+  /** @type {CompositeBuffer | null} */
+  let chunkedDataBuffer = null
+  /** @type {Uint8Array[]} */
+  const responseDataChunks = []
+  let segmentComplete = false
+  let shouldRetry = false
+  let shouldRetryDueToNextRequestPolicy = false
+
+  let invalidPoToken = false
+  let error
+
+  if (currentState.sabrStreamState.playerReloadRequested) {
+    // Multiple requests might be issued at the same time, other requests should abort themselves once reload requested
+    throw createRecoverableNetworkError(ShakaError.Code.OPERATION_ABORTED, operationInputs.uri, operationInputs.requestType)
+  }
+
+  try {
+    let shouldReloadDueToBackoffLoop = false
+    if ((currentState.sabrStreamState.nextRequestPolicy?.backoffTimeMs || 0) > 0) {
+      const currentBackoffTimeMs = currentState.sabrStreamState.nextRequestPolicy.backoffTimeMs
+      currentState.eventEmitter.emit('backoff-requested', { backoffMs: currentBackoffTimeMs })
+      // Wait but can be aborted
+      await new Promise((resolve, reject) => {
+        setTimeout(resolve, currentBackoffTimeMs)
+        currentState.abortController.signal.addEventListener('abort', reject)
+      })
+      // Must reset AFTER waiting to avoid requested aborted
+      // Since long backoff time mostly happens on the start of video playback we only reset timeout once
+      // i.e. backoff time parts received will not reset timeout - counted as video loading issue
+      currentState.timeoutController?.resetTimeoutOnce()
+
+      currentState.cumulativeBackOffTimeMs += currentState.sabrStreamState.nextRequestPolicy.backoffTimeMs
+      currentState.cumulativeBackOffRequested += 1
+      const timeoutMs = operationInputs.request.retryParameters.timeout
+      // Detect infinite backoff loop by no. of times requested and cumulative time approaching timeout
+      if (currentState.cumulativeBackOffRequested >= 3 || (timeoutMs > 0 && timeoutMs <= (currentState.cumulativeBackOffTimeMs + currentBackoffTimeMs))) {
+        shouldReloadDueToBackoffLoop = true
+      }
+    }
+    if (shouldReloadDueToBackoffLoop || currentState.cumulativeRetryDueToNextRequestPolicy >= 100) {
+      // Fire fake reload event due to detecting retry loop
+      currentState.sabrStreamState.playerReloadRequested = true
+      if (!currentState.abortController.signal.aborted) {
+        currentState.abortController.abort()
+        currentState.eventEmitter.emit('reload')
+      }
+    }
+
+    const sabrURL = new URL(currentState.sabrStreamState.sabrUrl)
+    sabrURL.searchParams.set('rn', String(currentState.sabrStreamState.requestNumber++))
+    response = await fetch(sabrURL.toString(), currentState.requestInit)
+
+    operationInputs.headersReceived({})
+
+    const { itag, lastModified, xtags } = formatIdFromString(operationInputs.formatIdString)
+    let mediaHeaderId
+
+    const reader = response.body.getReader()
+    let readObj = await reader.read()
+
+    while (!readObj.done && !currentState.abortStatus.finished) {
+      if (chunkedDataBuffer) {
+        chunkedDataBuffer.append(readObj.value)
+      } else {
+        chunkedDataBuffer = new CompositeBuffer([readObj.value])
+      }
+
+      const remainingData = new UmpReader(chunkedDataBuffer).read((part) => {
+        switch (part.type) {
+          case UMPPartId.STREAM_PROTECTION_STATUS: {
+            const streamProtectionStatus = decodePart(part, StreamProtectionStatus)
+            if (streamProtectionStatus.status === 3) {
+              invalidPoToken = true
+            }
+            break
+          }
+          case UMPPartId.SABR_ERROR: {
+            const sabrError = decodePart(part, SabrError)
+            if (!sabrError) break
+
+            error = `SABR Error: type: ${sabrError.type}, code: ${sabrError.code}`
+            break
+          }
+          case UMPPartId.SABR_REDIRECT: {
+            const sabrRedirect = decodePart(part, SabrRedirect)
+            if (!sabrRedirect) break
+
+            currentState.sabrUrl = sabrRedirect.url
+            shouldRetry = true
+            break
+          }
+          case UMPPartId.MEDIA_HEADER: {
+            if (mediaHeaderId === undefined) {
+              const mediaHeader = decodePart(part, MediaHeader)
+              if (!mediaHeader) break
+
+              if (
+                mediaHeader.formatId.itag === itag &&
+                mediaHeader.formatId.lastModified === lastModified &&
+                mediaHeader.formatId.xtags === xtags
+              ) {
+                if (operationInputs.isInit && mediaHeader.isInitSeg) {
+                  mediaHeaderId = mediaHeader.headerId
+                } else if (!operationInputs.isInit && mediaHeader.sequenceNumber === operationInputs.sequenceNumber) {
+                  mediaHeaderId = mediaHeader.headerId
+                }
+              }
+            }
+
+            break
+          }
+          case UMPPartId.MEDIA: {
+            if (mediaHeaderId === part.data.getUint8(0)) {
+              responseDataChunks.push(...part.data.split(1).remainingBuffer.chunks)
+            }
+            break
+          }
+          case UMPPartId.MEDIA_END: {
+            if (mediaHeaderId === part.data.getUint8(0)) {
+              segmentComplete = true
+              currentState.abortStatus.finished = true
+              currentState.abortController.abort()
+            }
+            break
+          }
+          case UMPPartId.NEXT_REQUEST_POLICY: {
+            const nextRequestPolicy = decodePart(part, NextRequestPolicy)
+
+            shouldRetry = true
+            shouldRetryDueToNextRequestPolicy = true
+
+            currentState.sabrStreamState.nextRequestPolicy = nextRequestPolicy
+            currentState.abrRequest.streamerContext.playbackCookie = nextRequestPolicy?.playbackCookie ? PlaybackCookie.encode(nextRequestPolicy.playbackCookie).finish() : undefined
+
+            currentState.abrRequest.streamerContext.backoffTimeMs = nextRequestPolicy?.backoffTimeMs
+            break
+          }
+          case UMPPartId.FORMAT_INITIALIZATION_METADATA: {
+            break
+          }
+          case UMPPartId.SABR_CONTEXT_UPDATE: {
+            const sabrContextUpdate = decodePart(part, SabrContextUpdate)
+            if (!sabrContextUpdate) break
+
+            if (sabrContextUpdate.type !== undefined && sabrContextUpdate.value?.length) {
+              if (
+                sabrContextUpdate.writePolicy === SabrContextWritePolicy.KEEP_EXISTING &&
+                currentState.sabrStreamState.sabrContexts.has(sabrContextUpdate.type)
+              ) {
+                break
+              }
+
+              currentState.sabrStreamState.sabrContexts.set(sabrContextUpdate.type, sabrContextUpdate)
+
+              if (sabrContextUpdate.sendByDefault) {
+                currentState.sabrStreamState.activeSabrContextTypes.add(sabrContextUpdate.type)
+              }
+            }
+            break
+          }
+          case UMPPartId.SABR_CONTEXT_SENDING_POLICY: {
+            const sabrContextSendingPolicy = decodePart(part, SabrContextSendingPolicy)
+            if (!sabrContextSendingPolicy) break
+
+            for (const startPolicy of sabrContextSendingPolicy.startPolicy) {
+              if (!currentState.sabrStreamState.activeSabrContextTypes.has(startPolicy)) {
+                currentState.sabrStreamState.activeSabrContextTypes.add(startPolicy)
+              }
+            }
+
+            for (const stopPolicy of sabrContextSendingPolicy.stopPolicy) {
+              if (currentState.sabrStreamState.activeSabrContextTypes.has(stopPolicy)) {
+                currentState.sabrStreamState.activeSabrContextTypes.delete(stopPolicy)
+              }
+            }
+
+            for (const discardPolicy of sabrContextSendingPolicy.discardPolicy) {
+              if (currentState.sabrStreamState.sabrContexts.has(discardPolicy)) {
+                currentState.sabrStreamState.sabrContexts.delete(discardPolicy)
+              }
+            }
+            break
+          }
+          case UMPPartId.RELOAD_PLAYER_RESPONSE: {
+            const reloadPlaybackContext = decodePart(part, ReloadPlaybackContext)
+            if (!reloadPlaybackContext) break
+
+            // Whole video cannot be played
+            currentState.sabrStreamState.playerReloadRequested = true
+            if (!currentState.abortController.signal.aborted) {
+              currentState.abortController.abort()
+              currentState.eventEmitter.emit('reload')
+            }
+            break
+          }
+          default: {
+            break
+          }
+        }
+      })
+
+      if (!currentState.abortStatus.finished) {
+        if (remainingData) {
+          chunkedDataBuffer = remainingData.data
+        } else {
+          chunkedDataBuffer = null
+        }
+
+        readObj = await reader.read()
+      }
+    }
+  } catch (error) {
+    if (currentState.abortStatus.cancelled) {
+      throw createRecoverableNetworkError(ShakaError.Code.OPERATION_ABORTED, operationInputs.uri, operationInputs.requestType)
+    } else if (currentState.abortStatus.timedOut) {
+      throw createRecoverableNetworkError(ShakaError.Code.TIMEOUT, operationInputs.uri, operationInputs.requestType)
+    } else if (!currentState.abortStatus.finished) {
+      throw createRecoverableNetworkError(ShakaError.Code.HTTP_ERROR, operationInputs.uri, error, operationInputs.requestType)
+    }
+  }
+
+  if (currentState.abortStatus.cancelled) {
+    throw createRecoverableNetworkError(ShakaError.Code.OPERATION_ABORTED, operationInputs.uri, operationInputs.requestType)
+  } else if (currentState.abortStatus.timedOut) {
+    throw createRecoverableNetworkError(ShakaError.Code.TIMEOUT, operationInputs.uri, operationInputs.requestType)
+  }
+
+  if (responseDataChunks.length > 0 && segmentComplete) {
+    const data = /** @__NOINLINE__ */ concatenateChunks(responseDataChunks)
+
+    if (operationInputs.isInit) {
+      currentState.initDataCache.set(operationInputs.formatIdString, data)
+    }
+
+    /** @type {shaka.extern.Response} */
+    return {
+      uri: operationInputs.uri,
+      originalUri: operationInputs.uri,
+      data,
+      status: response.status,
+      headers: {},
+      fromCache: false,
+      originalRequest: operationInputs.request,
+    }
+  } else if (shouldRetry) {
+    if (shouldRetryDueToNextRequestPolicy) {
+      // Only count on actual retry to avoid counting false positive (when segmentComplete
+      currentState.cumulativeRetryDueToNextRequestPolicy += 1
+    }
+
+    const { sabrContexts, unsentSabrContexts } = prepareSabrContexts(currentState.sabrStreamState)
+
+    currentState.abrRequest.streamerContext.sabrContexts = sabrContexts
+    currentState.abrRequest.streamerContext.unsentSabrContexts = unsentSabrContexts
+
+    let body
+
+    try {
+      body = VideoPlaybackAbrRequest.encode(currentState.abrRequest).finish()
+    } catch (error) {
+      console.error('Invalid VideoPlaybackAbrRequest data', currentState.abrRequest)
+      throw error
+    }
+
+    currentState.requestInit = {
+      body,
+      method: 'POST',
+      headers: {
+        'content-type': 'application/x-protobuf',
+        'accept-encoding': 'identity',
+        accept: 'application/vnd.yt-ump',
+      },
+      signal: currentState.abortController.signal,
+    }
+    currentState.abortStatus.timedOut = false
+
+    currentState.abortStatus.finished = false
+    return doRequest(operationInputs, currentState)
+  } else if (invalidPoToken) {
+    throw new ShakaError(
+      ShakaError.Severity.CRITICAL,
+      ShakaError.Category.NETWORK,
+      ShakaError.Code.HTTP_ERROR,
+      operationInputs.uri,
+      new Error('Invalid PO token'),
+      operationInputs.requestType,
+    )
+  } else if (error) {
+    throw createRecoverableNetworkError(
+      ShakaError.Code.HTTP_ERROR,
+      operationInputs.uri,
+      new Error(error),
+      operationInputs.requestType,
+    )
+  } else if (responseDataChunks.length > 0 && !segmentComplete) {
+    throw createRecoverableNetworkError(
+      ShakaError.Code.HTTP_ERROR,
+      operationInputs.uri,
+      new Error('Incomplete segment, missing MEDIA_END part'),
+      operationInputs.requestType,
+    )
+  } else if (response.status === 200) {
+    throw createRecoverableNetworkError(
+      ShakaError.Code.HTTP_ERROR,
+      operationInputs.uri,
+      new Error('Empty response, this should not happen'),
+      operationInputs.requestType,
+    )
+  } else {
+    const severity = response.status === 401 || response.status === 403
+      ? ShakaError.Severity.CRITICAL
+      : ShakaError.Severity.RECOVERABLE
+
+    throw new ShakaError(
+      severity,
+      ShakaError.Category.NETWORK,
+      ShakaError.Code.BAD_HTTP_STATUS,
+      operationInputs.uri,
+      response.status,
+      '',
+      {},
+      operationInputs.requestType,
+      operationInputs.uri,
+    )
+  }
+}
+
+/**
+ * @param {import('../../views/Watch/Watch').SabrData} sabrData
+ * @param {() => shaka.Player} getPlayer
+ * @param {() => shaka.extern.Manifest} getManifest
+ * @param {import('vue').ComputedRef<number>} playerWidth
+ * @param {import('vue').ComputedRef<number>} playerHeight
+ * @return SabrStream
+ */
+export function setupSabrScheme(sabrData, getPlayer, getManifest, playerWidth, playerHeight) {
+  const eventEmitter = new EventEmitterLike()
+
+  /**
+   * Caches the init data until the video ends
+   * that way changing qualities and between audio and DASH
+   * doesn't have to fetch the init data and segment index again
+   * @type {Map<string, Uint8Array>}
+   */
+  const initDataCache = new Map()
+
+  const poToken = base64ToU8(sabrData.poToken)
+  const videoPlaybackUstreamerConfig = base64ToU8(sabrData.ustreamerConfig)
+  const clientInfo = deepCopy(sabrData.clientInfo)
+
+  /** @type {SabrStreamState} */
+  const sabrStreamState = {
+    sabrUrl: sabrData.url,
+    activeSabrContextTypes: new Set(),
+    sabrContexts: new Map(),
+    nextRequestPolicy: undefined,
+    playerReloadRequested: false,
+    requestNumber: 0,
+  }
+
+  shaka.net.NetworkingEngine.registerScheme('sabr', (uri, request, requestType, _progressUpdated, headersReceived, _config) => {
+    // lazily fetch it as the variable is only set after setupSabrScheme is called
+    // but it will definitely exist when we receive a request here.
+    const player = getPlayer()
+    if (player == null) {
+      // This is true during reload, returning a promise to suppress error
+      return new AbortableOperation(Promise.resolve())
+    }
+    const isAudioOnly = player.isAudioOnly()
+
+    const url = new URL(request.uris[0])
+
+    const isInit = url.searchParams.has('init')
+    const formatIdString = url.searchParams.get('formatId')
+
+    if (isInit && initDataCache.has(formatIdString)) {
+      return /** @__NOINLINE__ */ createCacheResponse(uri, request, initDataCache.get(formatIdString))
+    }
+
+    const variantTracks = player.getVariantTracks()
+    const activeVariant = variantTracks.find(track => track.active)
+
+    const streamIsAudio = url.pathname === 'audio'
+    const streamIsVideo = url.pathname === 'video'
+
+    let audioFormatId
+    let videoFormatId
+
+    if (streamIsAudio) {
+      audioFormatId = formatIdFromString(formatIdString)
+
+      if (isAudioOnly) {
+        // We need to specify a video format even for audio only otherwise we get an error response
+        videoFormatId = formatIdFromString(url.searchParams.get('videoFormatId'))
+      } else {
+        videoFormatId = formatIdFromString((activeVariant ?? variantTracks[0]).originalVideoId)
+      }
+    } else if (streamIsVideo) {
+      videoFormatId = formatIdFromString(formatIdString)
+
+      // for the first fetching of the initial data there won't be an active variant
+      // (shaka-player only sets it to active after it has fetched the init/segment data)
+      if (activeVariant) {
+        audioFormatId = formatIdFromString(activeVariant.originalAudioId)
+      } else {
+        const candidates = variantTracks.filter((track) => track.audioRoles.includes('main'))
+
+        const probableAudioFormat = candidates.reduce((previous, current) => {
+          return current.audioBandwidth >= previous.audioBandwidth ? current : previous
+        }, candidates[0])
+
+        audioFormatId = formatIdFromString(probableAudioFormat.originalAudioId)
+      }
+    }
+
+    /** @type {import('googlevideo/protos').BufferedRange[]} */
+    const bufferedRanges = []
+
+    if (!isInit && activeVariant) {
+      /** @__NOINLINE__ */ fillBufferedRanges(player, getManifest(), isAudioOnly, streamIsVideo, streamIsAudio, bufferedRanges, activeVariant)
+    }
+
+    let playerTimeMs = '0'
+
+    if (url.searchParams.has('startTimeMs')) {
+      playerTimeMs = url.searchParams.get('startTimeMs')
+    }
+
+    const drcEnabled = url.searchParams.has('drc') || !!(activeVariant && activeVariant.audioRoles.includes('drc'))
+
+    const resolution = streamIsVideo ? parseInt(url.searchParams.get('resolution')) : undefined
+
+    const { sabrContexts, unsentSabrContexts } = prepareSabrContexts(sabrStreamState)
+
+    /** @type {VideoPlaybackAbrRequest} */
+    const requestData = {
+      clientAbrState: {
+        bandwidthEstimate: String(Math.round(player.getStats().estimatedBandwidth)),
+        timeSinceLastManualFormatSelectionMs: streamIsVideo ? '0' : undefined,
+        stickyResolution: resolution,
+        lastManualSelectedResolution: resolution,
+        playbackRate: player.getPlaybackRate(),
+        enabledTrackTypesBitfield: streamIsAudio ? 1 : 0,
+        drcEnabled,
+        playerTimeMs,
+        clientViewportWidth: playerWidth.value,
+        clientViewportHeight: playerHeight.value,
+        clientViewportIsFlexible: false
+      },
+      preferredAudioFormatIds: [audioFormatId],
+      preferredVideoFormatIds: [videoFormatId],
+      preferredSubtitleFormatIds: [],
+      selectedFormatIds: isInit ? [] : [audioFormatId, videoFormatId],
+      bufferedRanges,
+      streamerContext: {
+        poToken,
+        clientInfo,
+        sabrContexts,
+        unsentSabrContexts,
+        playbackCookie: sabrStreamState.nextRequestPolicy?.playbackCookie ? PlaybackCookie.encode(sabrStreamState.nextRequestPolicy.playbackCookie).finish() : undefined,
+      },
+      field1000: [],
+      videoPlaybackUstreamerConfig,
+    }
+
+    let body
+
+    try {
+      body = VideoPlaybackAbrRequest.encode(requestData).finish()
+    } catch (error) {
+      console.error('Invalid VideoPlaybackAbrRequest data', requestData)
+      throw error
+    }
+
+    const sequenceNumber = parseInt(url.searchParams.get('sq'))
+
+    /**
+     * Stores whatever state that should be updated across the whole "session"
+     * @type {OperationInputs}
+     */
+    const opInputs = {
+      uri,
+      request,
+      requestType,
+      headersReceived,
+
+      formatIdString,
+      isInit,
+      sequenceNumber,
+    }
+
+    const abortController = new AbortController()
+
+    /** @type {RequestInit} */
+    const init = {
+      body,
+      method: 'POST',
+      headers: {
+        'content-type': 'application/x-protobuf',
+        'accept-encoding': 'identity',
+        accept: 'application/vnd.yt-ump',
+      },
+      signal: abortController.signal,
+    }
+
+    /**
+     * Stores whatever state that should be updated across the whole "session"
+     * @type {AbortStatus}
+     */
+    const abortStatus = {
+      cancelled: false,
+      timedOut: false,
+      finished: false,
+    }
+
+    const timeoutMs = request.retryParameters.timeout
+    let timeoutController = null
+    if (timeoutMs) {
+      timeoutController = createTimeoutController(() => {
+        abortStatus.timedOut = true
+        abortController.abort()
+      }, timeoutMs)
+    }
+
+    /**
+     * Stores whatever state that should be updated across the whole "session"
+     * @type {CurrentState}
+     */
+    const currentState = {
+      initDataCache,
+      abrRequest: requestData,
+      requestInit: init,
+      abortStatus: abortStatus,
+      abortController,
+      sabrStreamState,
+      timeoutController,
+      eventEmitter,
+      cumulativeBackOffTimeMs: 0,
+      cumulativeBackOffRequested: 0,
+      cumulativeRetryDueToNextRequestPolicy: 0,
+    }
+
+    const pendingRequest = doRequest(opInputs, currentState)
+
+    const op = new AbortableOperation(pendingRequest, () => {
+      abortStatus.cancelled = true
+      abortController.abort()
+      return Promise.resolve()
+    })
+
+    if (timeoutController) {
+      op.finally(() => {
+        timeoutController.clearTimeout()
+      })
+    }
+
+    return op
+  })
+
+  const cleanup = () => {
+    shaka.net.NetworkingEngine.unregisterScheme('sabr')
+    initDataCache.clear()
+  }
+
+  return {
+    onBackoffRequested(callback) {
+      eventEmitter.on('backoff-requested', callback)
+    },
+    onReloadOnce(callback) {
+      eventEmitter.once('reload', callback)
+    },
+    cleanup,
+  }
+}
diff --git a/src/renderer/helpers/player/WebmSegmentIndexParser.js b/src/renderer/helpers/player/WebmSegmentIndexParser.js
new file mode 100644
index 0000000000000..1725e4368e7a1
--- /dev/null
+++ b/src/renderer/helpers/player/WebmSegmentIndexParser.js
@@ -0,0 +1,338 @@
+// Based on https://github.com/shaka-project/shaka-player/blob/main/lib/dash/webm_segment_index_parser.js
+// Adapted for use in FreeTube:
+// - General changes such as removing Closure compiler specific stuff
+// - Rewritten to use functions instead of a class
+// - The segment URLs receive the start time and segment number
+
+import shaka from 'shaka-player'
+import { EbmlParser } from './EbmlParser'
+
+const EBML_ID = 0x1a45dfa3
+const SEGMENT_ID = 0x18538067
+const INFO_ID = 0x1549a966
+const TIMECODE_SCALE_ID = 0x2ad7b1
+const DURATION_ID = 0x4489
+const CUES_ID = 0x1c53bb6b
+const CUE_POINT_ID = 0xbb
+const CUE_TIME_ID = 0xb3
+const CUE_TRACK_POSITIONS_ID = 0xb7
+const CUE_CLUSTER_POSITION = 0xf1
+
+const ShakaError = shaka.util.Error
+const SeverityCritical = ShakaError.Severity.CRITICAL
+const CategoryMedia = ShakaError.Category.MEDIA
+
+/**
+ * Parses SegmentReferences from a WebM container.
+ * @param {BufferSource} cuesData The WebM container's "Cueing Data" section.
+ * @param {BufferSource} initData The WebM container's headers.
+ * @param {string} uri The location of the WebM file that contains the segments.
+ * @param {shaka.media.InitSegmentReference} initSegmentReference
+ * @param {number} timestampOffset
+ * @param {number} appendWindowStart
+ * @param {number} appendWindowEnd
+ * @returns {shaka.media.SegmentReference[]}
+ * @see http://www.matroska.org/technical/specs/index.html
+ * @see http://www.webmproject.org/docs/container/
+ */
+export function parseWebmSegmentIndex(
+  cuesData,
+  initData,
+  uri,
+  initSegmentReference,
+  timestampOffset,
+  appendWindowStart,
+  appendWindowEnd
+) {
+  const tuple = /** @__NOINLINE__ */ parseWebmContainer(initData)
+  const parser = new EbmlParser(cuesData)
+  const cuesElement = parser.parseElement()
+  if (cuesElement.id !== CUES_ID) {
+    console.error('[parseWebmSegmentIndex] Not a Cues element.')
+    throw new ShakaError(
+      SeverityCritical,
+      CategoryMedia,
+      ShakaError.Code.WEBM_CUES_ELEMENT_MISSING
+    )
+  }
+
+  return /** @__NOINLINE__ */ parseCues(
+    cuesElement,
+    tuple.segmentOffset,
+    tuple.timecodeScale,
+    tuple.duration,
+    uri,
+    initSegmentReference,
+    timestampOffset,
+    appendWindowStart,
+    appendWindowEnd
+  )
+}
+
+/**
+ * Parses a WebM container to get the segment's offset, timecode scale, and
+ * duration.
+ *
+ * @param {BufferSource} initData
+ * @returns {{segmentOffset: number, timecodeScale: number, duration: number}}
+ *   The segment's offset in bytes, the segment's timecode scale in seconds,
+ *   and the duration in seconds.
+ */
+function parseWebmContainer(initData) {
+  const parser = new EbmlParser(initData)
+
+  // Check that the WebM container data starts with the EBML header, but
+  // skip its contents.
+  const ebmlElement = parser.parseElement()
+  if (ebmlElement.id !== EBML_ID) {
+    console.error('Not an EBML element.')
+    throw new ShakaError(
+      SeverityCritical,
+      CategoryMedia,
+      ShakaError.Code.WEBM_EBML_HEADER_ELEMENT_MISSING
+    )
+  }
+
+  const segmentElement = parser.parseElement()
+  if (segmentElement.id !== SEGMENT_ID) {
+    console.error('[parseWebmSegmentIndex] Not a Segment element.')
+    throw new ShakaError(
+      SeverityCritical,
+      CategoryMedia,
+      ShakaError.Code.WEBM_SEGMENT_ELEMENT_MISSING
+    )
+  }
+
+  // This value is used as the initial offset to the first referenced segment.
+  const segmentOffset = segmentElement.getOffset()
+
+  // Parse the Segment element to get the segment info.
+  const segmentInfo = /** @__NOINLINE__ */ parseSegment(segmentElement)
+  return {
+    segmentOffset: segmentOffset,
+    timecodeScale: segmentInfo.timecodeScale,
+    duration: segmentInfo.duration,
+  }
+}
+
+/**
+ * Parses a WebM Info element to get the segment's timecode scale and
+ * duration.
+ * @param {import('./EbmlParser').EbmlElement} segmentElement
+ * @returns {{timecodeScale: number, duration: number}} The segment's timecode
+ *   scale in seconds and duration in seconds.
+ */
+function parseSegment(segmentElement) {
+  const parser = segmentElement.createParser()
+
+  // Find the Info element.
+  let infoElement = null
+  while (parser.hasMoreData()) {
+    const elem = parser.parseElement()
+    if (elem.id !== INFO_ID) {
+      continue
+    }
+
+    infoElement = elem
+
+    break
+  }
+
+  if (!infoElement) {
+    console.error('[parseWebmSegmentIndex] Not an Info element.')
+    throw new ShakaError(
+      SeverityCritical,
+      CategoryMedia,
+      ShakaError.Code.WEBM_INFO_ELEMENT_MISSING
+    )
+  }
+
+  return /** @__NOINLINE__ */ parseInfo(infoElement)
+}
+
+/**
+ * Parses a WebM Info element to get the segment's timecode scale and
+ * duration.
+ * @param {import('./EbmlParser').EbmlElement} infoElement
+ * @returns {{timecodeScale: number, duration: number}} The segment's timecode
+ *   scale in seconds and duration in seconds.
+ */
+function parseInfo(infoElement) {
+  const parser = infoElement.createParser()
+
+  // The timecode scale factor in units of [nanoseconds / T], where [T] are
+  // the units used to express all other time values in the WebM container.
+  // By default it's assumed that [T] == [milliseconds].
+  let timecodeScaleNanoseconds = 1000000
+  /** @type {?number} */
+  let durationScale = null
+
+  while (parser.hasMoreData()) {
+    const elem = parser.parseElement()
+    if (elem.id === TIMECODE_SCALE_ID) {
+      timecodeScaleNanoseconds = elem.getUint()
+    } else if (elem.id === DURATION_ID) {
+      durationScale = elem.getFloat()
+    }
+  }
+  if (durationScale == null) {
+    throw new ShakaError(
+      SeverityCritical,
+      CategoryMedia,
+      ShakaError.Code.WEBM_DURATION_ELEMENT_MISSING
+    )
+  }
+
+  // The timecode scale factor in units of [seconds / T].
+  const timecodeScale = timecodeScaleNanoseconds / 1000000000
+  // The duration is stored in units of [T]
+  const durationSeconds = durationScale * timecodeScale
+
+  return { timecodeScale: timecodeScale, duration: durationSeconds }
+}
+
+/**
+ * Parses a WebM CuesElement.
+ * @param {import('./EbmlParser').EbmlElement} cuesElement
+ * @param {number} segmentOffset
+ * @param {number} timecodeScale
+ * @param {number} duration
+ * @param {string} uri
+ * @param {shaka.media.InitSegmentReference} initSegmentReference
+ * @param {number} timestampOffset
+ * @param {number} appendWindowStart
+ * @param {number} appendWindowEnd
+ * @returns {shaka.media.SegmentReference[]}
+ */
+function parseCues(
+  cuesElement,
+  segmentOffset,
+  timecodeScale,
+  duration,
+  uri,
+  initSegmentReference,
+  timestampOffset,
+  appendWindowStart,
+  appendWindowEnd
+) {
+  const references = []
+
+  const parser = cuesElement.createParser()
+
+  let lastTime = null
+  let lastOffset = null
+  let sq = 1
+
+  while (parser.hasMoreData()) {
+    const elem = parser.parseElement()
+    if (elem.id !== CUE_POINT_ID) {
+      continue
+    }
+
+    const tuple = parseCuePoint(elem)
+    if (!tuple) {
+      continue
+    }
+
+    // Subtract the presentation time offset from the unscaled time
+    const currentTime = timecodeScale * tuple.unscaledTime
+    const currentOffset = segmentOffset + tuple.relativeOffset
+
+    if (lastTime != null) {
+      if (process.env.NODE_ENV === 'development' && lastOffset == null) {
+        throw new Error('Assertion failure: last offset cannot be null')
+      }
+
+      const uris = [`${uri}&startTimeMs=${Math.round((lastTime + timestampOffset) * 1000)}&sq=${sq++}`]
+
+      references.push(
+        new shaka.media.SegmentReference(
+          lastTime + timestampOffset,
+          currentTime + timestampOffset,
+          () => uris,
+          /* startByte= */ lastOffset, /* endByte= */ currentOffset - 1,
+          initSegmentReference,
+          timestampOffset,
+          appendWindowStart,
+          appendWindowEnd
+        )
+      )
+    }
+
+    lastTime = currentTime
+    lastOffset = currentOffset
+  }
+
+  if (lastTime != null) {
+    if (process.env.NODE_ENV === 'development' && lastOffset == null) {
+      throw new Error('Assertion failure: last offset cannot be null')
+    }
+
+    const uris = [`${uri}&startTimeMs=${Math.round((lastTime + timestampOffset) * 1000)}&sq=${sq}`]
+
+    references.push(
+      new shaka.media.SegmentReference(
+        lastTime + timestampOffset,
+        duration + timestampOffset,
+        () => uris,
+        /* startByte= */ lastOffset, /* endByte= */ null,
+        initSegmentReference,
+        timestampOffset,
+        appendWindowStart,
+        appendWindowEnd
+      )
+    )
+  }
+
+  return references
+}
+
+/**
+ * Parses a WebM CuePointElement to get an "unadjusted" segment reference.
+ * @param {import('./EbmlParser').EbmlElement} cuePointElement
+ * @returns {{unscaledTime: number, relativeOffset: number}} The referenced
+ *   segment's start time in units of [T] (see parseInfo_()), and the
+ *   referenced segment's offset in bytes, relative to a WebM Segment
+ *   element.
+ */
+function parseCuePoint(cuePointElement) {
+  const parser = cuePointElement.createParser()
+
+  // Parse CueTime element.
+  const cueTimeElement = parser.parseElement()
+  if (cueTimeElement.id !== CUE_TIME_ID) {
+    console.warn('[parseWebmSegmentIndex] Not a CueTime element.')
+    throw new ShakaError(
+      SeverityCritical,
+      CategoryMedia,
+      ShakaError.Code.WEBM_CUE_TIME_ELEMENT_MISSING
+    )
+  }
+  const unscaledTime = cueTimeElement.getUint()
+
+  // Parse CueTrackPositions element.
+  const cueTrackPositionsElement = parser.parseElement()
+  if (cueTrackPositionsElement.id !== CUE_TRACK_POSITIONS_ID) {
+    console.warn('[parseWebmSegmentIndex] Not a CueTrackPositions element.')
+    throw new ShakaError(
+      SeverityCritical,
+      CategoryMedia,
+      ShakaError.Code.WEBM_CUE_TRACK_POSITIONS_ELEMENT_MISSING
+    )
+  }
+
+  const cueTrackParser = cueTrackPositionsElement.createParser()
+  let relativeOffset = 0
+
+  while (cueTrackParser.hasMoreData()) {
+    const elem = cueTrackParser.parseElement()
+    if (elem.id !== CUE_CLUSTER_POSITION) {
+      continue
+    }
+
+    relativeOffset = elem.getUint()
+    break
+  }
+
+  return { unscaledTime: unscaledTime, relativeOffset: relativeOffset }
+}
diff --git a/src/renderer/helpers/player/utils.js b/src/renderer/helpers/player/utils.js
index 7e1d7beabf846..2ca7561a912c8 100644
--- a/src/renderer/helpers/player/utils.js
+++ b/src/renderer/helpers/player/utils.js
@@ -136,7 +136,7 @@ export function sortCaptions(captions) {
 
   const collator = new Intl.Collator([currentLocale, 'en'])
 
-  return captions.slice().sort((captionA, captionB) => {
+  return captions.sort((captionA, captionB) => {
     const aCode = captionA.language.split('-') // ex. [en,US] or [en]
     const bCode = captionB.language.split('-')
     const aName = captionA.label // ex: english (auto-generated)
diff --git a/src/renderer/store/modules/settings.js b/src/renderer/store/modules/settings.js
index 4339079b7962b..404ae01d497c4 100644
--- a/src/renderer/store/modules/settings.js
+++ b/src/renderer/store/modules/settings.js
@@ -168,6 +168,7 @@ const state = {
   defaultSkipInterval: 5,
   defaultViewingMode: 'default',
   defaultVideoFormat: 'dash',
+  sabrEnabled: true,
   disableSmoothScrolling: false,
   displayVideoPlayButton: false,
   enableSearchSuggestions: true,
diff --git a/src/renderer/views/Watch/Watch.js b/src/renderer/views/Watch/Watch.js
index 42ee8d687a0a2..82f88eb7ab728 100644
--- a/src/renderer/views/Watch/Watch.js
+++ b/src/renderer/views/Watch/Watch.js
@@ -1,4 +1,5 @@
 import { defineComponent } from 'vue'
+import { isNavigationFailure, NavigationFailureType } from 'vue-router'
 import { mapActions, mapMutations } from 'vuex'
 import shaka from 'shaka-player'
 import { Utils, YTNodes } from 'youtubei.js'
@@ -36,6 +37,22 @@ import {
   mapInvidiousLegacyFormat,
   youtubeImageUrlToInvidious
 } from '../../helpers/api/invidious'
+import { sortCaptions } from '../../helpers/player/utils'
+import { MANIFEST_TYPE_SABR } from '../../helpers/player/SabrManifestParser'
+
+/**
+ * @typedef {{
+ *   url: string,
+ *   poToken: string,
+ *   ustreamerConfig: string,
+ *   clientInfo: {
+ *     clientName: number,
+ *     clientVersion: string,
+ *     osName: string,
+ *     osVersion: string
+ *   }
+ * }} SabrData
+ */
 
 const MANIFEST_TYPE_DASH = 'application/dash+xml'
 const MANIFEST_TYPE_HLS = 'application/x-mpegurl'
@@ -109,8 +126,12 @@ export default defineComponent({
       videoStoryboardSrc: '',
       /** @type {string|null} */
       manifestSrc: null,
-      /** @type {(MANIFEST_TYPE_DASH|MANIFEST_TYPE_HLS)} */
+      /** @type {(MANIFEST_TYPE_DASH|MANIFEST_TYPE_HLS|MANIFEST_TYPE_SABR)} */
       manifestMimeType: MANIFEST_TYPE_DASH,
+      /** @type {SabrData | null} */
+      sabrData: null,
+      // For the same video
+      sabrReloadCount: 0,
       legacyFormats: [],
       captions: [],
       /** @type {'EQUIRECTANGULAR' | 'EQUIRECTANGULAR_THREED_TOP_BOTTOM' | 'MESH'| null} */
@@ -125,12 +146,17 @@ export default defineComponent({
       playlistItemId: null,
       /** @type {number|null} */
       timestamp: null,
+      // This should never be saved into history
+      /** @type {number|null} */
+      oneTimeTimestamp: null,
       playNextTimeout: null,
       playNextCountDownIntervalId: null,
       infoAreaSticky: true,
       blockVideoAutoplay: false,
       autoplayInterruptionTimeout: null,
       playabilityStatus: '',
+      totalAdTimeSeconds: 0,
+      adEndTimeUnixMs: 0,
 
       onMountedRun: false,
 
@@ -268,7 +294,9 @@ export default defineComponent({
         return null
       }
 
-      if (this.timestamp !== null && this.timestamp < this.videoLengthSeconds) {
+      if (this.oneTimeTimestamp !== null && this.oneTimeTimestamp < this.videoLengthSeconds) {
+        return this.oneTimeTimestamp
+      } else if (this.timestamp !== null && this.timestamp < this.videoLengthSeconds) {
         return this.timestamp
       } else if (this.watchedProgressSavingEnabled && this.historyEntryExists) {
         // For UX consistency, no progress reading if writing disabled
@@ -290,10 +318,44 @@ export default defineComponent({
       // `this.$refs.player?.hasLoaded` cannot be used in computed property
       return !this.isLoading
     },
+
+    sabrEnabled() {
+      return this.$store.getters.getSabrEnabled
+    },
+
+    sabrReloadedTooManyTimes() {
+      // Hardcoded since no idea what causes player reload loop, but 3 times probably too much already
+      return this.sabrReloadCount >= 3
+    }
   },
   watch: {
     async $route() {
-      this.handleRouteChange()
+      await this.reloadView()
+    },
+    userPlaylistsReady() {
+      this.onMountedDependOnLocalStateLoading()
+    },
+    videoId() {
+      // Reset SABR reload count when videoID changed
+      this.sabrReloadCount = 0
+    },
+  },
+  created: function () {
+    this.videoId = this.$route.params.id
+    this.activeFormat = this.defaultVideoFormat
+    // So that the value for this session remains unchanged even if setting changed
+    this.autoplayNextRecommendedVideo = this.autoplayNextRecommendedVideoByDefault
+    this.autoplayNextPlaylistVideo = this.autoplayNextPlaylistVideoByDefault
+
+    this.checkIfTimestamp()
+    this.currentPlaybackRate = this.$store.getters.getDefaultPlayback
+  },
+  mounted: function () {
+    this.onMountedDependOnLocalStateLoading()
+  },
+  methods: {
+    async reloadView() {
+      await this.handleRouteChange()
 
       if (this.$refs.player) {
         await this.destroyPlayer()
@@ -307,6 +369,7 @@ export default defineComponent({
       this.errorMessage = null
       this.customErrorIcon = null
       this.activeFormat = this.defaultVideoFormat
+      this.sabrData = null
       this.videoStoryboardSrc = ''
       this.captions = []
       this.vrProjection = null
@@ -319,31 +382,13 @@ export default defineComponent({
 
       switch (this.backendPreference) {
         case 'local':
-          this.getVideoInformationLocal(this.videoId)
+          await this.getVideoInformationLocal()
           break
         case 'invidious':
-          this.getVideoInformationInvidious(this.videoId)
+          this.getVideoInformationInvidious()
           break
       }
     },
-    userPlaylistsReady() {
-      this.onMountedDependOnLocalStateLoading()
-    },
-  },
-  created: function () {
-    this.videoId = this.$route.params.id
-    this.activeFormat = this.defaultVideoFormat
-    // So that the value for this session remains unchanged even if setting changed
-    this.autoplayNextRecommendedVideo = this.autoplayNextRecommendedVideoByDefault
-    this.autoplayNextPlaylistVideo = this.autoplayNextPlaylistVideoByDefault
-
-    this.checkIfTimestamp()
-    this.currentPlaybackRate = this.$store.getters.getDefaultPlayback
-  },
-  mounted: function () {
-    this.onMountedDependOnLocalStateLoading()
-  },
-  methods: {
     onMountedDependOnLocalStateLoading() {
       // Prevent running twice
       if (this.onMountedRun) { return }
@@ -402,7 +447,16 @@ export default defineComponent({
       }
 
       try {
-        const result = await getLocalVideoInfo(this.videoId)
+        const sabrShouldBeTried = this.sabrEnabled && !this.sabrReloadedTooManyTimes
+
+        const videoInfo = await getLocalVideoInfo(this.videoId, { forceEnableSabrOnlyResponseWorkaround: !sabrShouldBeTried })
+        const { info: result, poToken, clientInfo, adEndTimeUnixMs } = videoInfo
+
+        const sabrShouldBeUsed = sabrShouldBeTried && videoInfo.sabrCanBeUsed
+        if (!sabrShouldBeUsed) {
+          // The hack should only be used on non-SABR
+          this.adEndTimeUnixMs = adEndTimeUnixMs
+        }
 
         this.isFamilyFriendly = result.basic_info.is_family_safe
 
@@ -623,12 +677,16 @@ export default defineComponent({
           let useRemoteManifest = true
 
           if (this.isPostLiveDvr) {
-            try {
-              this.manifestSrc = await this.createLocalDashManifest(result, true)
-              this.manifestMimeType = MANIFEST_TYPE_DASH
-              useRemoteManifest = false
-            } catch (error) {
-              console.error(`Failed to generate DASH manifest for this Post Live DVR video ${this.videoId}, falling back to using YouTube's provided one...`, error)
+            // I wasn't able to get SABR working with Post-Live-DVR yet, so for the moment we'll use YouTube's provided DASH manifest instead.
+            // It only contains the last 4 hours of the stream, instead of starting from the beginning but that is better than nothing.
+            if (result.streaming_data.adaptive_formats.some(format => format.freeTubeUrl)) {
+              try {
+                this.manifestSrc = await this.createLocalDashManifest(result, true)
+                this.manifestMimeType = MANIFEST_TYPE_DASH
+                useRemoteManifest = false
+              } catch (error) {
+                console.error(`Failed to generate DASH manifest for this Post Live DVR video ${this.videoId}, falling back to using YouTube's provided one...`, error)
+              }
             }
           }
 
@@ -745,6 +803,7 @@ export default defineComponent({
                 url.searchParams.set('fmt', 'vtt')
 
                 return {
+                  id: caption.vss_id,
                   url: url.toString(),
                   label: caption.name.text,
                   language: caption.language_code,
@@ -779,7 +838,7 @@ export default defineComponent({
                 }
               }
 
-              this.captions = captionTracks
+              this.captions = sortCaptions(captionTracks)
 
               const captionLinks = captionTracks.map((caption) => {
                 const label = `${caption.label} (${caption.language}) - text/vtt`
@@ -803,7 +862,20 @@ export default defineComponent({
             return
           }
 
-          if (result.streaming_data?.adaptive_formats.length > 0 && result.streaming_data.adaptive_formats[0].freeTubeUrl) {
+          let storyboard
+
+          if (result.storyboards?.type === 'PlayerStoryboardSpec') {
+            /** @type {import('youtubei.js/dist/src/parser/classes/PlayerStoryboardSpec').StoryboardData[]} */
+            let source = result.storyboards.boards
+            if (window.innerWidth < 500) {
+              source = source.filter((board) => board.thumbnail_height <= 90)
+            }
+
+            storyboard = source.at(-1)
+            this.videoStoryboardSrc = this.createLocalStoryboardUrls(storyboard)
+          }
+
+          if (result.streaming_data?.adaptive_formats.length > 0) {
             this.vrProjection = result.streaming_data.adaptive_formats
               .find(format => {
                 return format.has_video &&
@@ -812,21 +884,34 @@ export default defineComponent({
               })
               ?.projection_type ?? null
 
-            this.manifestSrc = await this.createLocalDashManifest(result)
-            this.manifestMimeType = MANIFEST_TYPE_DASH
+            if (sabrShouldBeUsed) {
+              const storyboards = storyboard
+                ? [{
+                    templateUrl: storyboard.template_url,
+                    mimeType: 'image/webp',
+                    columns: storyboard.columns,
+                    rows: storyboard.rows,
+                    thumbnailCount: storyboard.thumbnail_count,
+                    thumbnailWidth: storyboard.thumbnail_width,
+                    thumbnailHeight: storyboard.thumbnail_height,
+                    storyboardCount: storyboard.storyboard_count,
+                    interval: storyboard.interval > 0 ? storyboard.interval / 1000 : 0
+                  }]
+                : []
+
+              this.manifestSrc = this.createLocalSabrManifest(result, poToken, clientInfo, storyboards)
+              this.manifestMimeType = MANIFEST_TYPE_SABR
+            } else if (result.streaming_data.adaptive_formats[0].freeTubeUrl) {
+              this.manifestSrc = await this.createLocalDashManifest(result)
+              this.manifestMimeType = MANIFEST_TYPE_DASH
+            } else {
+              this.manifestSrc = null
+              this.enableLegacyFormat()
+            }
           } else {
             this.manifestSrc = null
             this.enableLegacyFormat()
           }
-
-          if (result.storyboards?.type === 'PlayerStoryboardSpec') {
-            /** @type {import('youtubei.js/dist/src/parser/classes/PlayerStoryboardSpec').StoryboardData[]} */
-            let source = result.storyboards.boards
-            if (window.innerWidth < 500) {
-              source = source.filter((board) => board.thumbnail_height <= 90)
-            }
-            this.videoStoryboardSrc = this.createLocalStoryboardUrls(source.at(-1))
-          }
         }
 
         this.isLoading = false
@@ -909,14 +994,14 @@ export default defineComponent({
           this.isPostLiveDvr = !!result.isPostLiveDvr
           this.isUnlisted = !result.isListed
 
-          this.captions = result.captions.map(caption => {
+          this.captions = sortCaptions(result.captions.map(caption => {
             return {
               url: this.currentInvidiousInstanceUrl + caption.url,
               label: caption.label,
               language: caption.language_code,
               mimeType: 'text/vtt'
             }
-          })
+          }))
 
           if (!this.isLive && !this.isPostLiveDvr) {
             this.videoStoryboardSrc = `${this.currentInvidiousInstanceUrl}/api/v1/storyboards/${this.videoId}?height=90`
@@ -1204,6 +1289,15 @@ export default defineComponent({
     },
 
     handleVideoLoaded: function () {
+      if (this.sabrReloadCount > 0) {
+        // DO NOT count player reload requests during video playback (at the middle)
+        // Video loaded = not reload loop
+        this.sabrReloadCount--
+      }
+
+      // Only used one time = remove after use
+      this.oneTimeTimestamp = null
+
       // will trigger again if you switch formats or change legacy quality
       // Check isUpcoming to avoid marking upcoming videos as watched if the user has only watched the trailer
       if (!this.videoPlayerLoaded && !this.isUpcoming) {
@@ -1273,6 +1367,9 @@ export default defineComponent({
     },
 
     checkIfTimestamp: function () {
+      const oneTimeTimestamp = parseInt(this.$route.query.oneTimeTimestamp)
+      this.oneTimeTimestamp = isNaN(oneTimeTimestamp) || oneTimeTimestamp < 0 ? null : oneTimeTimestamp
+
       const timestamp = parseInt(this.$route.query.timestamp)
       this.timestamp = isNaN(timestamp) || timestamp < 0 ? null : timestamp
     },
@@ -1526,6 +1623,62 @@ export default defineComponent({
       return `data:application/dash+xml;charset=UTF-8,${encodeURIComponent(xmlData)}`
     },
 
+    /**
+     * @param {import('youtubei.js').IParsedResponse} videoInfo
+     * @param {string} poToken
+     * @param {SabrData['clientInfo']} clientInfo
+     * @param {import('../../helpers/player/SabrManifestParser').SabrManifest['storyboards']} storyboards
+     */
+    createLocalSabrManifest: function (videoInfo, poToken, clientInfo, storyboards) {
+      const url = new URL(videoInfo.streaming_data.server_abr_streaming_url)
+      url.searchParams.set('alr', 'yes')
+      url.searchParams.set('cpn', videoInfo.cpn)
+
+      this.sabrData = {
+        url: url.toString(),
+        poToken,
+        ustreamerConfig: videoInfo.player_config.media_common_config.media_ustreamer_request_config.video_playback_ustreamer_config,
+        clientInfo
+      }
+
+      /** @type {import('../../helpers/player/SabrManifestParser').SabrManifest} */
+      const sabrManifest = {
+        // Different formats have different durations and
+        // use of slightly longer duration in PresentationTimeline causes player to stuck at the end
+        duration: Math.min(...videoInfo.streaming_data.adaptive_formats.map(f => f.approx_duration_ms)) / 1000,
+        formats: videoInfo.streaming_data.adaptive_formats.map((format) => ({
+          itag: format.itag,
+          lastModified: format.last_modified_ms,
+          mimeType: format.mime_type,
+          xtags: format.xtags,
+          bitrate: format.bitrate,
+          initRange: format.init_range,
+          indexRange: format.index_range,
+          width: format.width,
+          height: format.height,
+          frameRate: format.fps,
+          quality: format.quality,
+          language: format.language,
+          audioSampleRate: format.audio_sample_rate,
+          audioChannels: format.audio_channels,
+          isDrc: format.is_drc,
+          isOriginal: format.is_original,
+          isDubbed: format.is_dubbed,
+          isAutoDubbed: format.is_auto_dubbed,
+          isDescriptive: format.is_descriptive,
+          isSecondary: format.is_secondary,
+          spatialAudio: !!format.spatial_audio_type,
+          label: format.audio_track?.display_name,
+          colorTransferCharacteristics: format.color_info?.transfer_characteristics,
+          colorPrimaries: format.color_info?.primaries
+        })),
+        captions: this.captions,
+        storyboards
+      }
+
+      return `data:${MANIFEST_TYPE_SABR},${encodeURIComponent(JSON.stringify(sabrManifest))}`
+    },
+
     createInvidiousDashManifest: async function (result) {
       let url = `${this.currentInvidiousInstanceUrl}/api/manifest/dash/id/${this.videoId}`
 
@@ -1691,6 +1844,7 @@ export default defineComponent({
       })
 
       return {
+        id: `${trackToTranslate.vss_id}.${translationCode}`,
         url: url.toString(),
         label,
         language: translationCode,
@@ -1788,6 +1942,29 @@ export default defineComponent({
       this.startNextVideoInPip = uiState.startNextVideoInPip
     },
 
+    async onPlayerReloadRequested() {
+      showToast('Reloading player according to SABR request')
+      this.sabrReloadCount++
+
+      const timestamp = this.getTimestamp()
+      if (timestamp > 0) {
+        // Reload at the middle should restart at current timestamp
+        try {
+          await this.$router.replace({
+            path: this.$route.path,
+            query: { ...this.$route.query, oneTimeTimestamp: timestamp },
+          })
+        } catch (failure) {
+          if (isNavigationFailure(failure, NavigationFailureType.duplicated)) {
+            // Already on route with same timestamp, allow reloadView to run instead
+          } else {
+            throw failure
+          }
+        }
+      }
+      await this.reloadView()
+    },
+
     ...mapActions([
       'updateHistory',
       'updateWatchProgress',
diff --git a/src/renderer/views/Watch/Watch.vue b/src/renderer/views/Watch/Watch.vue
index bbac535bb25f8..295380542b638 100644
--- a/src/renderer/views/Watch/Watch.vue
+++ b/src/renderer/views/Watch/Watch.vue
@@ -21,6 +21,7 @@
           ref="player"
           :manifest-src="manifestSrc"
           :manifest-mime-type="manifestMimeType"
+          :sabr-data="sabrData"
           :legacy-formats="legacyFormats"
           :start-time="startTimeSeconds"
           :captions="captions"
@@ -40,6 +41,7 @@
           :start-in-fullwindow="startNextVideoInFullwindow"
           :start-in-pip="startNextVideoInPip"
           :current-playback-rate="currentPlaybackRate"
+          :delay-load-until-unix="adEndTimeUnixMs"
           class="videoPlayer"
           @error="handlePlayerError"
           @loaded="handleVideoLoaded"
@@ -50,6 +52,7 @@
           @playback-rate-updated="updatePlaybackRate"
           @skip-to-next="handleSkipToNext"
           @skip-to-prev="handleSkipToPrev"
+          @player-reload-requested="onPlayerReloadRequested"
         />
         <div
           v-if="!isLoading && (isUpcoming || errorMessage)"
diff --git a/static/locales/en-US.yaml b/static/locales/en-US.yaml
index 5f59876cc6d88..76b9871996c9a 100644
--- a/static/locales/en-US.yaml
+++ b/static/locales/en-US.yaml
@@ -690,6 +690,9 @@ Settings:
     Set Password To Prevent Access: Set a password to prevent access to settings
     Set Password: Set Password
     Remove Password: Remove Password
+  SABR:
+    Label: Enable SABR as DASH backend
+    Tooltip: SABR will become the only DASH backend in future release and cannot be disabled. This toggle is provided in case early implementation has unrecoverable issues.
 About:
   #On About page
   About: About
@@ -950,6 +953,9 @@ Video:
     You appear to be offline: You appear to be offline.
     Playback will resume automatically when your connection comes back: Playback will resume automatically when your connection comes back.
     Skipped segment: 'Skipped {segmentCategory} segment'
+  Watch:
+    'Remaining preroll-ad time: {remindingTimeSeconds}s': 'Remaining preroll-ad time: {remindingTimeSeconds}s'
+    'Remaining SABR backoff time: {remindingTimeSeconds}s': 'Remaining SABR backoff time: {remindingTimeSeconds}s'
 #& Playlists
 Playlist:
   #& About
diff --git a/yarn.lock b/yarn.lock
index 73d04e2ab2e20..5e77f5a69e926 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4839,6 +4839,13 @@ globjoin@^0.1.4:
   resolved "https://registry.yarnpkg.com/globjoin/-/globjoin-0.1.4.tgz#2f4494ac8919e3767c5cbb691e9f463324285d43"
   integrity sha512-xYfnw62CKG8nLkZBfWbhWwDw02CHty86jfPcc2cr3ZfeuK9ysoVPPEUxf21bAD/rWAgk52SuBrLJlefNy8mvFg==
 
+googlevideo@^4.0.4:
+  version "4.0.4"
+  resolved "https://registry.yarnpkg.com/googlevideo/-/googlevideo-4.0.4.tgz#a6420cc512179ce3cbe572707258738bcdee97fc"
+  integrity sha512-S/rfuoPBI+qXCEUPJeVhXsHoISMgVhOz8hHSpGWa0OztfHhh+g9EKaEcqAb/+ttO7meoNQNqIy9dfIpz7HPc4g==
+  dependencies:
+    "@bufbuild/protobuf" "^2.0.0"
+
 gopd@^1.0.1, gopd@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/gopd/-/gopd-1.2.0.tgz#89f56b8217bdbc8802bd299df6d7f1081d7e51a1"