From 549927fe0306b01bdef3bf43c63b950cde83c30c Mon Sep 17 00:00:00 2001
From: absidue <48293849+absidue@users.noreply.github.com>
Date: Thu, 3 Apr 2025 23:22:20 +0200
Subject: [PATCH 01/11] Local API: Implement SABR for VODs

---
 package.json                                  |   1 +
 .../ft-shaka-video-player.js                  | 260 ++++---
 .../ft-shaka-video-player.vue                 |   4 +-
 src/renderer/helpers/api/local.js             |  39 +-
 src/renderer/helpers/player/EbmlParser.js     | 276 +++++++
 .../helpers/player/Mp4SegmentIndexParser.js   | 178 +++++
 .../helpers/player/SabrManifestParser.js      | 703 ++++++++++++++++++
 .../helpers/player/SabrSchemePlugin.js        | 499 +++++++++++++
 .../helpers/player/WebmSegmentIndexParser.js  | 338 +++++++++
 src/renderer/helpers/player/utils.js          |   2 +-
 src/renderer/views/Watch/Watch.js             | 148 +++-
 src/renderer/views/Watch/Watch.vue            |   1 +
 yarn.lock                                     |   7 +
 13 files changed, 2321 insertions(+), 135 deletions(-)
 create mode 100644 src/renderer/helpers/player/EbmlParser.js
 create mode 100644 src/renderer/helpers/player/Mp4SegmentIndexParser.js
 create mode 100644 src/renderer/helpers/player/SabrManifestParser.js
 create mode 100644 src/renderer/helpers/player/SabrSchemePlugin.js
 create mode 100644 src/renderer/helpers/player/WebmSegmentIndexParser.js

diff --git a/package.json b/package.json
index d8dced20385ae..1a4579a09babb 100644
--- a/package.json
+++ b/package.json
@@ -62,6 +62,7 @@
     "autolinker": "^4.1.0",
     "bgutils-js": "^3.2.0",
     "electron-context-menu": "^4.0.5",
+    "googlevideo": "^3.0.0",
     "marked": "^15.0.7",
     "path-browserify": "^1.0.1",
     "portal-vue": "^2.1.7",
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 68230be2fe75c..b1a498d0a63f6 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
@@ -16,7 +16,6 @@ import {
   getSponsorBlockSegments,
   logShakaError,
   repairInvidiousManifest,
-  sortCaptions,
   translateSponsorBlockCategory
 } from '../../helpers/player/utils'
 import {
@@ -24,6 +23,8 @@ import {
   showToast,
   writeFileWithPicker
 } from '../../helpers/utils'
+import { MANIFEST_TYPE_SABR } from '../../helpers/player/SabrManifestParser'
+import { setupSabrScheme } from '../../helpers/player/SabrSchemePlugin'
 
 /** @typedef {import('../../helpers/sponsorblock').SponsorBlockCategory} SponsorBlockCategory */
 
@@ -71,6 +72,10 @@ export default defineComponent({
       type: String,
       required: true
     },
+    sabrData: {
+      type: Object,
+      default: null
+    },
     legacyFormats: {
       type: Array,
       default: () => ([])
@@ -188,31 +193,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
     }
 
@@ -223,10 +207,6 @@ export default defineComponent({
         height: 0,
         frameRate: 0
       },
-      playerDimensions: {
-        width: 0,
-        height: 0
-      },
       bitrate: '0',
       volume: '100',
       bandwidth: '0',
@@ -243,6 +223,11 @@ export default defineComponent({
       }
     })
 
+    const playerDimensions = computed(() => ({
+      width: playerWidth.value,
+      height: playerHeight.value
+    }))
+
     // #region settings
 
     /** @type {import('vue').ComputedRef<boolean>} */
@@ -791,7 +776,7 @@ export default defineComponent({
         trackLabelFormat: hasMultipleAudioTracks.value ? TrackLabelFormat.LABEL : TrackLabelFormat.LANGUAGE,
         // 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
       }
 
@@ -1045,7 +1030,7 @@ export default defineComponent({
     })
 
     /** @type {ResizeObserver|null} */
-    let resizeObserver = null
+    let containerResizeObserver = null
 
     /** @type {ResizeObserverCallback} */
     function resized(entries) {
@@ -1207,8 +1192,68 @@ 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(() => pipWindowWidth.value ?? videoElementWidth.value)
+    const playerHeight = computed(() => pipWindowHeight.value ?? videoElementHeight.value)
+
     // #endregion video event handlers
 
+    // #region SABR
+
+    /** @type {shaka.extern.Manifest | undefined} */
+    let sabrManifest
+
+    /** @type {() => void | undefined} */
+    let cleanupSabrScheme
+
+    if (props.sabrData) {
+      cleanupSabrScheme = /** @__NOINLINE__ */ setupSabrScheme(props.sabrData, () => player, () => sabrManifest, playerWidth, playerHeight)
+    }
+
+    // #endregion SABR
+
     // #region request/response filters
 
     /** @type {shaka.extern.RequestFilter} */
@@ -1218,7 +1263,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 +1277,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 +1305,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') {
@@ -1434,12 +1479,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) {
@@ -1495,14 +1534,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.audioCodec = newTrack.audioCodec
 
         if (props.format === 'dash') {
           stats.resolution.frameRate = newTrack.frameRate
 
-          stats.codecs.videoItag = newTrack.originalVideoId
+          stats.codecs.videoItag = newTrack.originalVideoId.split('-')[0]
           stats.codecs.videoCodec = newTrack.videoCodec
 
           stats.resolution.width = newTrack.width
@@ -1535,12 +1573,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') {
@@ -2468,6 +2500,8 @@ export default defineComponent({
         return
       }
 
+      videoResizeObserver.observe(videoElement)
+
       registerScreenshotButton()
       registerAudioTrackSelection()
       registerAutoplayToggle()
@@ -2482,8 +2516,8 @@ export default defineComponent({
       } else {
         useOverFlowMenu.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)
@@ -2574,40 +2608,59 @@ export default defineComponent({
       // ideally we would set this in the `streaming` event handler, but for HLS this is only set to true after the loaded event fires.
       isLive.value = player.isLive()
 
-      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 (props.format !== 'legacy' && props.manifestMimeType === MANIFEST_TYPE_SABR) {
+        sabrManifest = player.getManifest()
+      }
+
+      // For SABR we include the thumbnails and subtitles in the manifest
+      if (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(
@@ -2621,32 +2674,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
@@ -2833,9 +2874,13 @@ export default defineComponent({
 
       document.removeEventListener('keydown', keyboardShortcutHandler)
 
-      if (resizeObserver) {
-        resizeObserver.disconnect()
-        resizeObserver = null
+      if (containerResizeObserver) {
+        containerResizeObserver.disconnect()
+        containerResizeObserver = null
+      }
+
+      if (videoResizeObserver) {
+        videoResizeObserver.disconnect()
       }
 
       cleanUpCustomPlayerControls()
@@ -2908,6 +2953,10 @@ export default defineComponent({
         player = null
       }
 
+      if (cleanupSabrScheme) {
+        cleanupSabrScheme()
+      }
+
       // 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) {
@@ -2962,6 +3011,7 @@ export default defineComponent({
 
       showStats,
       stats,
+      playerDimensions,
 
       autoplayVideos,
       sponsorBlockShowSkippedToast,
@@ -2976,6 +3026,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 f1e8cc8d86e8f..f74b2287879e5 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 30f0c2aebae0b..54e2de6c22fb7 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, UniversalCache, Utils, YT, YTNodes } from 'youtubei.js'
+import { ClientType, Constants, Innertube, Misc, Mixins, Parser, UniversalCache, Utils, YT, YTNodes } from 'youtubei.js'
 import Autolinker from 'autolinker'
 import { IpcChannels, SEARCH_CHAR_LIMIT } from '../../../constants'
 
@@ -194,6 +194,16 @@ export async function getLocalSearchContinuation(continuationData) {
 
 /**
  * @param {string} id
+ * @returns {Promise<{
+ *   info: YT.VideoInfo,
+ *   poToken: string | undefined,
+ *   clientInfo: {
+ *     clientName: number,
+ *     clientVersion: string,
+ *     osName: string,
+ *     osVersion: string
+ *   }
+ * }>}
  */
 export async function getLocalVideoInfo(id) {
   const webInnertube = await createInnertube({ withPlayer: true, generateSessionLocally: false })
@@ -224,6 +234,8 @@ export async function getLocalVideoInfo(id) {
 
   const info = await webInnertube.getInfo(id)
 
+  let { clientName, clientVersion, osName, osVersion } = webInnertube.session.context.client
+
   let hasTrailer = info.has_trailer
   let trailerIsAgeRestricted = info.getTrailerInfo() === null
 
@@ -255,13 +267,22 @@ export async function getLocalVideoInfo(id) {
       info.storyboards = bypassedInfo.storyboards
 
       hasTrailer = false
-      trailerIsAgeRestricted = false
+      trailerIsAgeRestricted = false;
+
+      ({ 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) {
@@ -279,12 +300,18 @@ export async function getLocalVideoInfo(id) {
   }
 
   if (info.streaming_data) {
-    decipherFormats(info.streaming_data.formats, webInnertube.session.player)
+    const player = webInnertube.session.player
+
+    decipherFormats(info.streaming_data.formats, player)
+
+    if (info.streaming_data.server_abr_streaming_url) {
+      info.streaming_data.server_abr_streaming_url = 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) {
-      decipherFormats(info.streaming_data.adaptive_formats, webInnertube.session.player)
+      decipherFormats(info.streaming_data.adaptive_formats, player)
     }
 
     if (info.streaming_data.dash_manifest_url) {
@@ -300,7 +327,7 @@ export async function getLocalVideoInfo(id) {
     }
   }
 
-  return info
+  return { info, poToken: sessionPoToken, clientInfo }
 }
 
 /**
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..1db6d554f2bbc
--- /dev/null
+++ b/src/renderer/helpers/player/SabrManifestParser.js
@@ -0,0 +1,703 @@
+import shaka from 'shaka-player'
+import { parseWebmSegmentIndex } from './WebmSegmentIndexParser'
+import { parseMp4SegmentIndex } from './Mp4SegmentIndexParser'
+import { QUALITY } from 'googlevideo'
+
+/**
+ * @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)
+    }
+
+    manifestData.formats.forEach((format) => {
+      if (format.mimeType.startsWith('audio/')) {
+        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)
+    currentId += imageStreams.length
+
+    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(';')[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(';')[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]
+        )
+        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 = QUALITY[format.quality.toUpperCase()]
+
+    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
+
+  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)
+  }
+
+  return new shaka.media.SegmentIndex(references)
+}
+
+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..af14cc073399c
--- /dev/null
+++ b/src/renderer/helpers/player/SabrSchemePlugin.js
@@ -0,0 +1,499 @@
+import { GoogleVideo, base64ToU8, concatenateChunks, PART, Protos } from 'googlevideo'
+import shaka from 'shaka-player'
+
+import { deepCopy } from '../utils'
+
+const AbortableOperation = shaka.util.AbortableOperation
+const ShakaError = shaka.util.Error
+
+/**
+ * @param {string} str
+ */
+function formatIdFromString(str) {
+  const videoFormatIdParts = str.split('-')
+
+  return {
+    itag: parseInt(videoFormatIdParts[0]),
+    lastModified: parseInt(videoFormatIdParts[1]),
+    xtags: videoFormatIdParts[2]
+  }
+}
+
+/**
+ * @param {Protos.FormatId} formatId
+ * @param {shaka.extern.BufferedRange} buffered
+ * @param {shaka.media.SegmentIndex} segmentIndex
+ */
+function createBufferedRange(formatId, buffered, segmentIndex) {
+  return {
+    formatId,
+    startTimeMs: Math.round(buffered.start * 1000),
+    durationMs: Math.round((buffered.end - buffered.start) * 1000),
+    startSegmentIndex: segmentIndex.find(buffered.start),
+    endSegmentIndex: segmentIndex.find(buffered.end)
+  }
+}
+
+/**
+ * @param {shaka.Player} player
+ * @param {shaka.extern.Manifest} manifest
+ * @param {boolean} audioFormatsActive
+ * @param {Protos.BufferedRange[]} bufferedRanges
+ * @param {shaka.extern.Track} activeVariant
+ */
+function fillBufferedRanges(player, manifest, audioFormatsActive, 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
+      })
+    }
+
+    let audioFormatId
+    let videoFormatId
+    let audioSegmentIndex
+    let videoSegmentIndex
+
+    for (const buffered of bufferedInfo.audio) {
+      if (!audioFormatId) {
+        audioFormatId = formatIdFromString(activeVariant.originalAudioId)
+      }
+
+      if (!audioSegmentIndex) {
+        audioSegmentIndex = activeManifestVariant.audio.segmentIndex
+      }
+
+      bufferedRanges.push(createBufferedRange(audioFormatId, buffered, audioSegmentIndex))
+    }
+
+    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 {string} sabrUrl
+ * @param {(newUrl: string) => void} updateSabrUrl
+ * @param {Map<string, Uint8Array>} initDataCache
+ * @param {string} uri
+ * @param {string} formatIdString
+ * @param {boolean} isInit
+ * @param {number} sequenceNumber
+ * @param {shaka.extern.Request} request
+ * @param {shaka.net.NetworkingEngine.RequestType} requestType
+ * @param {RequestInit} init
+ * @param {{ cancelled: boolean, timedOut: boolean, finished: boolean }} abortStatus
+ * @param {AbortController} abortController
+ * @param {(headers: Record<string, string>) => void} headersReceived
+ */
+async function doRequest(
+  sabrUrl,
+  updateSabrUrl,
+  initDataCache,
+  uri,
+  formatIdString,
+  isInit,
+  sequenceNumber,
+  request,
+  requestType,
+  init,
+  abortStatus,
+  abortController,
+  headersReceived
+) {
+  let response
+  /** @type {GoogleVideo.ChunkedDataBuffer | null} */
+  let chunkedDataBuffer = null
+  /** @type {Uint8Array[]} */
+  const responseDataChunks = []
+  const errors = []
+  /** @type {string | undefined} */
+  let redirectUrl
+
+  try {
+    response = await fetch(sabrUrl, init)
+
+    headersReceived({})
+
+    const { itag, lastModified, xtags } = formatIdFromString(formatIdString)
+    let mediaHeaderId
+
+    const reader = response.body.getReader()
+    let readObj = await reader.read()
+
+    while (!readObj.done && !abortStatus.finished) {
+      if (chunkedDataBuffer) {
+        chunkedDataBuffer.append(readObj.value)
+      } else {
+        chunkedDataBuffer = new GoogleVideo.ChunkedDataBuffer([readObj.value])
+      }
+
+      const remainingData = new GoogleVideo.UMP(chunkedDataBuffer).parse((part) => {
+        switch (part.type) {
+          case PART.STREAM_PROTECTION_STATUS: {
+            const streamProtectionStatus = Protos.StreamProtectionStatus.decode(part.data.chunks[0])
+            if (streamProtectionStatus.status === 3) {
+              errors.push('Invalid PO token')
+            }
+            break
+          }
+          case PART.SABR_ERROR: {
+            const sabrError = Protos.SabrError.decode(part.data.chunks[0])
+            errors.push(`SABR Error: type: ${sabrError.type}, code: ${sabrError.code}`)
+            break
+          }
+          case PART.SABR_REDIRECT: {
+            const sabrRedirect = Protos.SabrRedirect.decode(part.data.chunks[0])
+            redirectUrl = sabrRedirect.url
+            updateSabrUrl(redirectUrl)
+            break
+          }
+          case PART.MEDIA_HEADER: {
+            if (mediaHeaderId === undefined) {
+              const mediaHeader = Protos.MediaHeader.decode(part.data.chunks[0])
+
+              if (
+                mediaHeader.formatId.itag === itag &&
+                mediaHeader.formatId.lastModified === lastModified &&
+                mediaHeader.formatId.xtags === xtags
+              ) {
+                if (isInit && mediaHeader.isInitSeg) {
+                  mediaHeaderId = mediaHeader.headerId
+                } else if (!isInit && mediaHeader.sequenceNumber === sequenceNumber) {
+                  mediaHeaderId = mediaHeader.headerId
+                }
+              }
+            }
+
+            break
+          }
+          case PART.MEDIA: {
+            if (mediaHeaderId === part.data.getUint8(0)) {
+              responseDataChunks.push(...part.data.split(1).remainingBuffer.chunks)
+            }
+            break
+          }
+          case PART.MEDIA_END: {
+            if (mediaHeaderId === part.data.getUint8(0)) {
+              abortStatus.finished = true
+              abortController.abort()
+            }
+            break
+          }
+        }
+      })
+
+      if (remainingData) {
+        chunkedDataBuffer = remainingData.data
+      } else {
+        chunkedDataBuffer = null
+      }
+
+      if (!abortStatus.finished) {
+        readObj = await reader.read()
+      }
+    }
+  } catch (error) {
+    if (abortStatus.cancelled) {
+      throw createRecoverableNetworkError(ShakaError.Code.OPERATION_ABORTED, uri, requestType)
+    } else if (abortStatus.timedOut) {
+      throw createRecoverableNetworkError(ShakaError.Code.TIMEOUT, uri, requestType)
+    } else if (!abortStatus.finished) {
+      throw createRecoverableNetworkError(ShakaError.Code.HTTP_ERROR, uri, error, requestType)
+    }
+  }
+
+  if (abortStatus.cancelled) {
+    throw createRecoverableNetworkError(ShakaError.Code.OPERATION_ABORTED, uri, requestType)
+  } else if (abortStatus.timedOut) {
+    throw createRecoverableNetworkError(ShakaError.Code.TIMEOUT, uri, requestType)
+  }
+
+  if (responseDataChunks.length > 0) {
+    const data = /** @__NOINLINE__ */ concatenateChunks(responseDataChunks)
+
+    if (isInit) {
+      initDataCache.set(formatIdString, data)
+    }
+
+    /** @type {shaka.extern.Response} */
+    return {
+      uri,
+      originalUri: uri,
+      data,
+      status: response.status,
+      headers: {},
+      fromCache: false,
+      originalRequest: request
+    }
+  } else if (redirectUrl) {
+    abortStatus.finished = false
+    return doRequest(
+      redirectUrl,
+      updateSabrUrl,
+      initDataCache,
+      uri,
+      formatIdString,
+      isInit,
+      sequenceNumber,
+      request,
+      requestType,
+      init,
+      abortStatus,
+      abortController,
+      () => { }
+    )
+  } else if (errors.length > 0) {
+    throw new ShakaError(
+      ShakaError.Severity.CRITICAL,
+      ShakaError.Category.NETWORK,
+      ShakaError.Code.HTTP_ERROR,
+      uri,
+      new Error(errors.join(', ')),
+      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,
+      uri,
+      response.status,
+      '',
+      {},
+      requestType,
+      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
+ */
+export function setupSabrScheme(sabrData, getPlayer, getManifest, playerWidth, playerHeight) {
+  /**
+   * 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)
+
+  let sabrUrl = sabrData.url
+
+  const updateSabrUrl = (newUrl) => {
+    sabrUrl = newUrl
+  }
+
+  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()
+    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.hostname === 'audio'
+    const streamIsVideo = url.hostname === '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 {Protos.BufferedRange[]} */
+    const bufferedRanges = []
+
+    if (!isInit && activeVariant) {
+      /** @__NOINLINE__ */ fillBufferedRanges(player, getManifest(), isAudioOnly, bufferedRanges, activeVariant)
+    }
+
+    let playerTimeMs = 0
+
+    if (url.searchParams.has('startTimeMs')) {
+      playerTimeMs = parseInt(url.searchParams.get('startTimeMs'))
+    }
+
+    const drcEnabled = url.searchParams.has('drc') || !!(activeVariant && activeVariant.audioRoles.includes('drc'))
+
+    const resolution = streamIsVideo ? parseInt(url.searchParams.get('resolution')) : undefined
+
+    /** @type {Protos.VideoPlaybackAbrRequest} */
+    const requestData = {
+      clientAbrState: {
+        bandwidthEstimate: 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
+      },
+      selectedAudioFormatIds: [audioFormatId],
+      selectedVideoFormatIds: [videoFormatId],
+      selectedFormatIds: isInit ? [] : [audioFormatId, videoFormatId],
+      bufferedRanges,
+      streamerContext: {
+        poToken: poToken,
+        clientInfo: clientInfo,
+        field5: [],
+        field6: []
+      },
+      field1000: [],
+      videoPlaybackUstreamerConfig,
+    }
+
+    const controller = new AbortController()
+
+    /** @type {RequestInit} */
+    const init = {
+      body: Protos.VideoPlaybackAbrRequest.encode(requestData).finish(),
+      method: 'POST',
+      signal: controller.signal
+    }
+
+    const abortStatus = {
+      cancelled: false,
+      timedOut: false,
+      finished: false
+    }
+
+    const sequenceNumber = parseInt(url.searchParams.get('sq'))
+
+    const pendingRequest = doRequest(
+      sabrUrl,
+      updateSabrUrl,
+      initDataCache,
+      uri,
+      formatIdString,
+      isInit,
+      sequenceNumber,
+      request,
+      requestType,
+      init,
+      abortStatus,
+      controller,
+      headersReceived
+    )
+
+    const op = new AbortableOperation(pendingRequest, () => {
+      abortStatus.cancelled = true
+      controller.abort()
+      return Promise.resolve()
+    })
+
+    const timeoutMs = request.retryParameters.timeout
+    if (timeoutMs) {
+      const timeout = setTimeout(() => {
+        abortStatus.timedOut = true
+        controller.abort()
+      }, timeoutMs)
+
+      op.finally(() => {
+        clearTimeout(timeout)
+      })
+    }
+
+    return op
+  })
+
+  const cleanup = () => {
+    shaka.net.NetworkingEngine.unregisterScheme('sabr')
+    initDataCache.clear()
+  }
+
+  return 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 0c68dcae097e0..87bcc075265bc 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/views/Watch/Watch.js b/src/renderer/views/Watch/Watch.js
index cba1c5d751f7f..7e453516f6d1f 100644
--- a/src/renderer/views/Watch/Watch.js
+++ b/src/renderer/views/Watch/Watch.js
@@ -36,6 +36,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'
@@ -108,8 +124,10 @@ 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,
       legacyFormats: [],
       captions: [],
       /** @type {'EQUIRECTANGULAR' | 'EQUIRECTANGULAR_THREED_TOP_BOTTOM' | 'MESH'| null} */
@@ -305,6 +323,7 @@ export default defineComponent({
       this.errorMessage = null
       this.customErrorIcon = null
       this.activeFormat = this.defaultVideoFormat
+      this.sabrData = null
       this.videoStoryboardSrc = ''
       this.captions = []
       this.vrProjection = null
@@ -400,7 +419,7 @@ export default defineComponent({
       }
 
       try {
-        const result = await getLocalVideoInfo(this.videoId)
+        const { info: result, poToken, clientInfo } = await getLocalVideoInfo(this.videoId)
 
         this.isFamilyFriendly = result.basic_info.is_family_safe
 
@@ -615,12 +634,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)
+              }
             }
           }
 
@@ -735,6 +758,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,
@@ -769,7 +793,7 @@ export default defineComponent({
                 }
               }
 
-              this.captions = captionTracks
+              this.captions = sortCaptions(captionTracks)
 
               const captionLinks = captionTracks.map((caption) => {
                 const label = `${caption.label} (${caption.language}) - text/vtt`
@@ -793,7 +817,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 &&
@@ -802,21 +839,31 @@ export default defineComponent({
               })
               ?.projection_type ?? null
 
-            this.manifestSrc = await this.createLocalDashManifest(result)
-            this.manifestMimeType = MANIFEST_TYPE_DASH
+            if (result.streaming_data.server_abr_streaming_url) {
+              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 {
+              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
@@ -883,14 +930,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`
@@ -1483,6 +1530,60 @@ export default defineComponent({
       return `data:application/dash+xml;charset=UTF-8,${encodeURIComponent(xmlData)}`
     },
 
+    /**
+     * @param {import('youtubei.js').YT.VideoInfo} 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 = {
+        duration: videoInfo.streaming_data.adaptive_formats[0].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}`
 
@@ -1647,6 +1748,7 @@ export default defineComponent({
       })
 
       return {
+        id: `${trackToTranslate.vss_id}.${translationCode}`,
         url: url.toString(),
         label,
         language: translationCode,
diff --git a/src/renderer/views/Watch/Watch.vue b/src/renderer/views/Watch/Watch.vue
index 18d62186ac483..165b90d923513 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"
diff --git a/yarn.lock b/yarn.lock
index 1e2eb30933777..1a7e221750e6d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4978,6 +4978,13 @@ globjoin@^0.1.4:
   resolved "https://registry.yarnpkg.com/globjoin/-/globjoin-0.1.4.tgz#2f4494ac8919e3767c5cbb691e9f463324285d43"
   integrity sha512-xYfnw62CKG8nLkZBfWbhWwDw02CHty86jfPcc2cr3ZfeuK9ysoVPPEUxf21bAD/rWAgk52SuBrLJlefNy8mvFg==
 
+googlevideo@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/googlevideo/-/googlevideo-3.0.0.tgz#383137303553c6625bafae32c1b8a7203be565a8"
+  integrity sha512-8LGFjbZFG4RCsyhMbjX2+IlU5Suj94FeQr1JandPSsKfAMrqL08pOoQsBYl/5P+bqIFm0wQEVpKIhm5wpiekwg==
+  dependencies:
+    "@bufbuild/protobuf" "^2.0.0"
+
 gopd@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/gopd/-/gopd-1.0.1.tgz#29ff76de69dac7489b7c0918a5788e56477c332c"

From b3721d1bf1cbb585effa7ee032be46f8d1d070f3 Mon Sep 17 00:00:00 2001
From: absidue <48293849+absidue@users.noreply.github.com>
Date: Fri, 4 Apr 2025 18:59:11 +0200
Subject: [PATCH 02/11] Optimisations

---
 .../ft-shaka-video-player.js                  |  4 +--
 .../helpers/player/Mp4SegmentIndexParser.js   |  2 +-
 .../helpers/player/SabrManifestParser.js      |  9 +++--
 .../helpers/player/SabrSchemePlugin.js        | 34 ++++++++-----------
 .../helpers/player/WebmSegmentIndexParser.js  |  4 +--
 5 files changed, 23 insertions(+), 30 deletions(-)

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 b1a498d0a63f6..87ae619f38127 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
@@ -1534,13 +1534,13 @@ export default defineComponent({
         stats.resolution.width = newTrack.width
         stats.resolution.height = newTrack.height
       } else {
-        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.split('-')[0]
+          stats.codecs.videoItag = newTrack.originalVideoId.split('-', 1)[0]
           stats.codecs.videoCodec = newTrack.videoCodec
 
           stats.resolution.width = newTrack.width
diff --git a/src/renderer/helpers/player/Mp4SegmentIndexParser.js b/src/renderer/helpers/player/Mp4SegmentIndexParser.js
index 9c1b95d1127cb..724a39d6d6c66 100644
--- a/src/renderer/helpers/player/Mp4SegmentIndexParser.js
+++ b/src/renderer/helpers/player/Mp4SegmentIndexParser.js
@@ -153,7 +153,7 @@ function parseSIDX(
     const nativeEndTime =
       (unscaledStartTime + subsegmentDuration) / timescale
 
-    const uris = [`${uri}&startTimeMs=${Math.round((nativeStartTime + timestampOffset) * 1000)}&sq=${i + 1}`]
+    const uris = [`${uri}&startTimeMs=${Math.trunc((nativeStartTime + timestampOffset) * 1000)}&sq=${i + 1}`]
 
     references.push(
       new shaka.media.SegmentReference(
diff --git a/src/renderer/helpers/player/SabrManifestParser.js b/src/renderer/helpers/player/SabrManifestParser.js
index 1db6d554f2bbc..eff6193f8bd9b 100644
--- a/src/renderer/helpers/player/SabrManifestParser.js
+++ b/src/renderer/helpers/player/SabrManifestParser.js
@@ -159,7 +159,7 @@ class SabrManifestParser {
       fakeVideoFormatId = buildFormatId(worstVideoFormat)
     }
 
-    manifestData.formats.forEach((format) => {
+    for (const format of manifestData.formats) {
       if (format.mimeType.startsWith('audio/')) {
         audioStreams.push(
           /** @__NOINLINE__ */ createAudioStream(
@@ -176,7 +176,7 @@ class SabrManifestParser {
           /** @__NOINLINE__ */ createVideoStream(format, currentId++, presentationTimeline, networkingEngine)
         )
       }
-    })
+    }
 
     audioStreams.sort((a, b) => b.bandwidth - a.bandwidth)
 
@@ -229,7 +229,6 @@ class SabrManifestParser {
     currentId += textStreams.length
 
     const imageStreams = /** @__NOINLINE__ */ createImageStreams(manifestData.storyboards, presentationTimeline, currentId)
-    currentId += imageStreams.length
 
     const manifest = {
       type: 'SABR',
@@ -315,7 +314,7 @@ function createAudioStream(
     type: 'audio',
     id,
     originalId: buildFormatId(format),
-    mimeType: format.mimeType.split(';')[0],
+    mimeType: format.mimeType.split(';', 1)[0],
     codecs: format.mimeType.match(CODECS_REGEX)[1],
     fullMimeTypes: new Set([format.mimeType]),
     bandwidth: format.bitrate,
@@ -386,7 +385,7 @@ function createVideoStream(format, id, presentationTimeline, networkingEngine) {
     type: 'video',
     id,
     originalId: buildFormatId(format),
-    mimeType: format.mimeType.split(';')[0],
+    mimeType: format.mimeType.split(';', 1)[0],
     codecs: format.mimeType.match(CODECS_REGEX)[1],
     fullMimeTypes: new Set([format.mimeType]),
     bandwidth: format.bitrate,
diff --git a/src/renderer/helpers/player/SabrSchemePlugin.js b/src/renderer/helpers/player/SabrSchemePlugin.js
index af14cc073399c..6f911a99cc8c6 100644
--- a/src/renderer/helpers/player/SabrSchemePlugin.js
+++ b/src/renderer/helpers/player/SabrSchemePlugin.js
@@ -27,8 +27,8 @@ function formatIdFromString(str) {
 function createBufferedRange(formatId, buffered, segmentIndex) {
   return {
     formatId,
-    startTimeMs: Math.round(buffered.start * 1000),
-    durationMs: Math.round((buffered.end - buffered.start) * 1000),
+    startTimeMs: Math.trunc(buffered.start * 1000),
+    durationMs: Math.trunc((buffered.end - buffered.start) * 1000),
     startSegmentIndex: segmentIndex.find(buffered.start),
     endSegmentIndex: segmentIndex.find(buffered.end)
   }
@@ -57,23 +57,17 @@ function fillBufferedRanges(player, manifest, audioFormatsActive, bufferedRanges
       })
     }
 
-    let audioFormatId
-    let videoFormatId
-    let audioSegmentIndex
-    let videoSegmentIndex
+    const audioFormatId = formatIdFromString(activeVariant.originalAudioId)
+    const audioSegmentIndex = activeManifestVariant.audio.segmentIndex
 
     for (const buffered of bufferedInfo.audio) {
-      if (!audioFormatId) {
-        audioFormatId = formatIdFromString(activeVariant.originalAudioId)
-      }
-
-      if (!audioSegmentIndex) {
-        audioSegmentIndex = activeManifestVariant.audio.segmentIndex
-      }
-
       bufferedRanges.push(createBufferedRange(audioFormatId, buffered, audioSegmentIndex))
     }
 
+    // Lazily initalise these variables as video data won't exist for audio-only playback
+    let videoFormatId
+    let videoSegmentIndex
+
     for (const buffered of bufferedInfo.video) {
       if (!videoFormatId) {
         videoFormatId = formatIdFromString(activeVariant.originalVideoId)
@@ -225,13 +219,13 @@ async function doRequest(
         }
       })
 
-      if (remainingData) {
-        chunkedDataBuffer = remainingData.data
-      } else {
-        chunkedDataBuffer = null
-      }
-
       if (!abortStatus.finished) {
+        if (remainingData) {
+          chunkedDataBuffer = remainingData.data
+        } else {
+          chunkedDataBuffer = null
+        }
+
         readObj = await reader.read()
       }
     }
diff --git a/src/renderer/helpers/player/WebmSegmentIndexParser.js b/src/renderer/helpers/player/WebmSegmentIndexParser.js
index 1725e4368e7a1..650da7916f097 100644
--- a/src/renderer/helpers/player/WebmSegmentIndexParser.js
+++ b/src/renderer/helpers/player/WebmSegmentIndexParser.js
@@ -243,7 +243,7 @@ function parseCues(
         throw new Error('Assertion failure: last offset cannot be null')
       }
 
-      const uris = [`${uri}&startTimeMs=${Math.round((lastTime + timestampOffset) * 1000)}&sq=${sq++}`]
+      const uris = [`${uri}&startTimeMs=${Math.trunc((lastTime + timestampOffset) * 1000)}&sq=${sq++}`]
 
       references.push(
         new shaka.media.SegmentReference(
@@ -268,7 +268,7 @@ function parseCues(
       throw new Error('Assertion failure: last offset cannot be null')
     }
 
-    const uris = [`${uri}&startTimeMs=${Math.round((lastTime + timestampOffset) * 1000)}&sq=${sq}`]
+    const uris = [`${uri}&startTimeMs=${Math.trunc((lastTime + timestampOffset) * 1000)}&sq=${sq}`]
 
     references.push(
       new shaka.media.SegmentReference(

From b8b395be7758665bcccbf95b9839a32b8d31bef8 Mon Sep 17 00:00:00 2001
From: absidue <48293849+absidue@users.noreply.github.com>
Date: Fri, 4 Apr 2025 19:18:49 +0200
Subject: [PATCH 03/11] Add mime types and codecs to segment references

---
 src/renderer/helpers/player/SabrManifestParser.js | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/renderer/helpers/player/SabrManifestParser.js b/src/renderer/helpers/player/SabrManifestParser.js
index eff6193f8bd9b..919aaac2cfc8e 100644
--- a/src/renderer/helpers/player/SabrManifestParser.js
+++ b/src/renderer/helpers/player/SabrManifestParser.js
@@ -458,6 +458,9 @@ function createTextStreams(captions, presentationTimeline, currentId) {
           presentationTimeline.getDuration(),
           [caption.url]
         )
+
+        stream.segmentIndex.get(0).mimeType = caption.mimeType
+
         return Promise.resolve()
       },
       closeSegmentIndex: () => {
@@ -688,6 +691,7 @@ function createVodMediaSegmentIndex(url, response, format, stream, duration) {
   initSegmentReference.mimeType = stream.mimeType
   initSegmentReference.codecs = stream.codecs
 
+  /** @type {shaka.media.SegmentReference[] | undefined} */
   let references
 
   if (stream.mimeType.endsWith('/webm')) {
@@ -696,6 +700,11 @@ function createVodMediaSegmentIndex(url, response, format, stream, duration) {
     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)
 }
 

From d5223646fd2e3f82a3adf9baf3acb1acb54bd9d9 Mon Sep 17 00:00:00 2001
From: absidue <48293849+absidue@users.noreply.github.com>
Date: Sat, 5 Apr 2025 14:56:25 +0200
Subject: [PATCH 04/11] Fix web build

---
 _scripts/webpack.web.config.js                            | 5 +++--
 .../ft-shaka-video-player/ft-shaka-video-player.js        | 8 ++++----
 src/renderer/helpers/player/SabrManifestParser.js         | 4 +++-
 3 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/_scripts/webpack.web.config.js b/_scripts/webpack.web.config.js
index 53a471d046f5b..476ff1a6dfc8b 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: [
@@ -126,7 +127,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/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 87ae619f38127..41fafe98e0b57 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
@@ -1248,7 +1248,7 @@ export default defineComponent({
     /** @type {() => void | undefined} */
     let cleanupSabrScheme
 
-    if (props.sabrData) {
+    if (process.env.SUPPORTS_LOCAL_API && props.sabrData) {
       cleanupSabrScheme = /** @__NOINLINE__ */ setupSabrScheme(props.sabrData, () => player, () => sabrManifest, playerWidth, playerHeight)
     }
 
@@ -2608,12 +2608,12 @@ export default defineComponent({
       // ideally we would set this in the `streaming` event handler, but for HLS this is only set to true after the loaded event fires.
       isLive.value = player.isLive()
 
-      if (props.format !== 'legacy' && props.manifestMimeType === MANIFEST_TYPE_SABR) {
+      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 (props.format === 'legacy' || props.manifestMimeType !== MANIFEST_TYPE_SABR) {
+      if (!process.env.SUPPORTS_LOCAL_API || props.format === 'legacy' || props.manifestMimeType !== MANIFEST_TYPE_SABR) {
         const promises = []
 
         for (const caption of props.captions) {
@@ -2953,7 +2953,7 @@ export default defineComponent({
         player = null
       }
 
-      if (cleanupSabrScheme) {
+      if (process.env.SUPPORTS_LOCAL_API && cleanupSabrScheme) {
         cleanupSabrScheme()
       }
 
diff --git a/src/renderer/helpers/player/SabrManifestParser.js b/src/renderer/helpers/player/SabrManifestParser.js
index 919aaac2cfc8e..5bace0cd06fa5 100644
--- a/src/renderer/helpers/player/SabrManifestParser.js
+++ b/src/renderer/helpers/player/SabrManifestParser.js
@@ -708,4 +708,6 @@ function createVodMediaSegmentIndex(url, response, format, stream, duration) {
   return new shaka.media.SegmentIndex(references)
 }
 
-shaka.media.ManifestParser.registerParserByMime(MANIFEST_TYPE_SABR, () => new SabrManifestParser())
+if (process.env.SUPPORTS_LOCAL_API) {
+  shaka.media.ManifestParser.registerParserByMime(MANIFEST_TYPE_SABR, () => new SabrManifestParser())
+}

From 2acfb1c29b22d394b222a80f42266f0c4aee817e Mon Sep 17 00:00:00 2001
From: absidue <48293849+absidue@users.noreply.github.com>
Date: Sun, 6 Apr 2025 00:15:53 +0200
Subject: [PATCH 05/11] Auto-retry on SABR errors and empty responses

---
 .../ft-shaka-video-player.js                  |  5 ++++
 .../helpers/player/SabrSchemePlugin.js        | 25 +++++++++++++++----
 2 files changed, 25 insertions(+), 5 deletions(-)

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 41fafe98e0b57..0b4fd07b7c889 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
@@ -2323,6 +2323,11 @@ export default defineComponent({
         error = error.data[0]
       }
 
+      // Allow shaka-player to retry on potentially recoverable network errors
+      if (error.severity === shaka.util.Error.Severity.RECOVERABLE && error.category === shaka.util.Error.Category.NETWORK) {
+        return
+      }
+
       logShakaError(error, context, props.videoId, details)
 
       // text related errors aren't serious (captions and seek bar thumbnails), so we should just log them
diff --git a/src/renderer/helpers/player/SabrSchemePlugin.js b/src/renderer/helpers/player/SabrSchemePlugin.js
index 6f911a99cc8c6..5812fd40569f7 100644
--- a/src/renderer/helpers/player/SabrSchemePlugin.js
+++ b/src/renderer/helpers/player/SabrSchemePlugin.js
@@ -142,7 +142,8 @@ async function doRequest(
   let chunkedDataBuffer = null
   /** @type {Uint8Array[]} */
   const responseDataChunks = []
-  const errors = []
+  let invalidPoToken = false
+  let error
   /** @type {string | undefined} */
   let redirectUrl
 
@@ -169,13 +170,13 @@ async function doRequest(
           case PART.STREAM_PROTECTION_STATUS: {
             const streamProtectionStatus = Protos.StreamProtectionStatus.decode(part.data.chunks[0])
             if (streamProtectionStatus.status === 3) {
-              errors.push('Invalid PO token')
+              invalidPoToken = true
             }
             break
           }
           case PART.SABR_ERROR: {
             const sabrError = Protos.SabrError.decode(part.data.chunks[0])
-            errors.push(`SABR Error: type: ${sabrError.type}, code: ${sabrError.code}`)
+            error = `SABR Error: type: ${sabrError.type}, code: ${sabrError.code}`
             break
           }
           case PART.SABR_REDIRECT: {
@@ -279,13 +280,27 @@ async function doRequest(
       abortController,
       () => { }
     )
-  } else if (errors.length > 0) {
+  } else if (invalidPoToken) {
     throw new ShakaError(
       ShakaError.Severity.CRITICAL,
       ShakaError.Category.NETWORK,
       ShakaError.Code.HTTP_ERROR,
       uri,
-      new Error(errors.join(', ')),
+      new Error('Invalid PO token'),
+      requestType
+    )
+  } else if (error) {
+    throw createRecoverableNetworkError(
+      ShakaError.Code.HTTP_ERROR,
+      uri,
+      new Error(error),
+      requestType
+    )
+  } else if (response.status === 200) {
+    throw createRecoverableNetworkError(
+      ShakaError.Code.HTTP_ERROR,
+      uri,
+      new Error('Empty response, this should not happen'),
       requestType
     )
   } else {

From 89bd0c87dde1bd1a40a692c46038ebf6b2517213 Mon Sep 17 00:00:00 2001
From: absidue <48293849+absidue@users.noreply.github.com>
Date: Fri, 11 Apr 2025 17:59:38 +0200
Subject: [PATCH 06/11] Round player width and height to fix int32 error

---
 .../components/ft-shaka-video-player/ft-shaka-video-player.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

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 0b4fd07b7c889..beb2a0c1ffa26 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
@@ -1235,8 +1235,8 @@ export default defineComponent({
       pipWindowHeight.value = pipWindow.height * devicePixelRatio
     }
 
-    const playerWidth = computed(() => pipWindowWidth.value ?? videoElementWidth.value)
-    const playerHeight = computed(() => pipWindowHeight.value ?? videoElementHeight.value)
+    const playerWidth = computed(() => Math.round(pipWindowWidth.value ?? videoElementWidth.value))
+    const playerHeight = computed(() => Math.round(pipWindowHeight.value ?? videoElementHeight.value))
 
     // #endregion video event handlers
 

From 76cc43e7c7aa3713c1058d54a3e79122457b5828 Mon Sep 17 00:00:00 2001
From: absidue <48293849+absidue@users.noreply.github.com>
Date: Mon, 14 Apr 2025 22:55:46 +0200
Subject: [PATCH 07/11] Log recoverable networking errors as warnings

---
 .../ft-shaka-video-player.js                  | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

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 beb2b0dac65c9..d7c09854ad3a4 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
@@ -36,6 +36,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.
@@ -2324,12 +2325,24 @@ 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 === shaka.util.Error.Severity.RECOVERABLE && error.category === shaka.util.Error.Category.NETWORK) {
+      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
       }
 
@@ -2337,7 +2350,7 @@ export default defineComponent({
 
       // text related errors aren't serious (captions and seek bar thumbnails), so we should just log them
       // TODO: consider only emitting when the severity is crititcal?
-      if (!ignoreErrors && error.category !== shaka.util.Error.Category.TEXT) {
+      if (!ignoreErrors && error.category !== ErrorCategory.TEXT) {
         // don't react to multiple consecutive errors, otherwise we don't give the format fallback from the previous error a chance to work
         ignoreErrors = true
 

From 21ab650e3472e5b37b57fa08ad2e4da49c92856e Mon Sep 17 00:00:00 2001
From: absidue <48293849+absidue@users.noreply.github.com>
Date: Fri, 18 Apr 2025 15:30:32 +0200
Subject: [PATCH 08/11] Log data when protobuf encoding fails

---
 src/renderer/helpers/player/SabrSchemePlugin.js | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/renderer/helpers/player/SabrSchemePlugin.js b/src/renderer/helpers/player/SabrSchemePlugin.js
index 5812fd40569f7..4128a9158e1fc 100644
--- a/src/renderer/helpers/player/SabrSchemePlugin.js
+++ b/src/renderer/helpers/player/SabrSchemePlugin.js
@@ -445,11 +445,20 @@ export function setupSabrScheme(sabrData, getPlayer, getManifest, playerWidth, p
       videoPlaybackUstreamerConfig,
     }
 
+    let body
+
+    try {
+      body = Protos.VideoPlaybackAbrRequest.encode(requestData).finish()
+    } catch (error) {
+      console.error('Invalid VideoPlaybackAbrRequest data', requestData)
+      throw error
+    }
+
     const controller = new AbortController()
 
     /** @type {RequestInit} */
     const init = {
-      body: Protos.VideoPlaybackAbrRequest.encode(requestData).finish(),
+      body,
       method: 'POST',
       signal: controller.signal
     }

From f89b9d9448e1453661b9b0b16f54ce7aa0e95bc4 Mon Sep 17 00:00:00 2001
From: absidue <48293849+absidue@users.noreply.github.com>
Date: Thu, 1 May 2025 13:33:06 +0200
Subject: [PATCH 09/11] Don't pass incomplete segments to the player

---
 src/renderer/helpers/player/SabrSchemePlugin.js | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/renderer/helpers/player/SabrSchemePlugin.js b/src/renderer/helpers/player/SabrSchemePlugin.js
index 4128a9158e1fc..120be5ac63b30 100644
--- a/src/renderer/helpers/player/SabrSchemePlugin.js
+++ b/src/renderer/helpers/player/SabrSchemePlugin.js
@@ -142,6 +142,8 @@ async function doRequest(
   let chunkedDataBuffer = null
   /** @type {Uint8Array[]} */
   const responseDataChunks = []
+  let segmentComplete = false
+
   let invalidPoToken = false
   let error
   /** @type {string | undefined} */
@@ -212,6 +214,7 @@ async function doRequest(
           }
           case PART.MEDIA_END: {
             if (mediaHeaderId === part.data.getUint8(0)) {
+              segmentComplete = true
               abortStatus.finished = true
               abortController.abort()
             }
@@ -246,7 +249,7 @@ async function doRequest(
     throw createRecoverableNetworkError(ShakaError.Code.TIMEOUT, uri, requestType)
   }
 
-  if (responseDataChunks.length > 0) {
+  if (responseDataChunks.length > 0 && segmentComplete) {
     const data = /** @__NOINLINE__ */ concatenateChunks(responseDataChunks)
 
     if (isInit) {
@@ -296,6 +299,13 @@ async function doRequest(
       new Error(error),
       requestType
     )
+  } else if (responseDataChunks.length > 0 && !segmentComplete) {
+    throw createRecoverableNetworkError(
+      ShakaError.Code.HTTP_ERROR,
+      uri,
+      new Error('Incomplete segment, missing MEDIA_END part'),
+      requestType
+    )
   } else if (response.status === 200) {
     throw createRecoverableNetworkError(
       ShakaError.Code.HTTP_ERROR,

From 743f7b11c85980358f070cff9743497a507c1ae7 Mon Sep 17 00:00:00 2001
From: absidue <48293849+absidue@users.noreply.github.com>
Date: Sun, 20 Jul 2025 19:09:32 +0200
Subject: [PATCH 10/11] Fix locating the last buffered segment

---
 src/renderer/helpers/player/SabrSchemePlugin.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/renderer/helpers/player/SabrSchemePlugin.js b/src/renderer/helpers/player/SabrSchemePlugin.js
index 120be5ac63b30..2a92974ef10b9 100644
--- a/src/renderer/helpers/player/SabrSchemePlugin.js
+++ b/src/renderer/helpers/player/SabrSchemePlugin.js
@@ -30,7 +30,7 @@ function createBufferedRange(formatId, buffered, segmentIndex) {
     startTimeMs: Math.trunc(buffered.start * 1000),
     durationMs: Math.trunc((buffered.end - buffered.start) * 1000),
     startSegmentIndex: segmentIndex.find(buffered.start),
-    endSegmentIndex: segmentIndex.find(buffered.end)
+    endSegmentIndex: segmentIndex.find(buffered.end) ?? segmentIndex.find(buffered.end - 0.001)
   }
 }
 

From 36e76b4d9a7fd7f954c48a523ea8486c023629d2 Mon Sep 17 00:00:00 2001
From: absidue <48293849+absidue@users.noreply.github.com>
Date: Fri, 25 Jul 2025 15:16:53 +0200
Subject: [PATCH 11/11] Update googlevideo to 4.0.2

---
 jsconfig.json                                 |  2 +
 package.json                                  |  2 +-
 .../helpers/player/SabrManifestParser.js      | 16 ++++-
 .../helpers/player/SabrSchemePlugin.js        | 68 +++++++++++--------
 yarn.lock                                     |  8 +--
 5 files changed, 61 insertions(+), 35 deletions(-)

diff --git a/jsconfig.json b/jsconfig.json
index dad8a794996bf..14e2302c9a784 100644
--- a/jsconfig.json
+++ b/jsconfig.json
@@ -5,6 +5,8 @@
   "compilerOptions": {
     "strictNullChecks": true,
     "baseUrl": "./",
+    "module": "esnext",
+    "moduleResolution": "bundler",
     "paths": {
       "DB_HANDLERS_ELECTRON_RENDERER_OR_WEB": [
         "src/datastores/handlers/electron",
diff --git a/package.json b/package.json
index 6b81122f950b4..233ad0ee80de1 100644
--- a/package.json
+++ b/package.json
@@ -63,7 +63,7 @@
     "autolinker": "^4.1.5",
     "bgutils-js": "^3.2.0",
     "electron-context-menu": "^4.1.0",
-    "googlevideo": "^3.0.0",
+    "googlevideo": "^4.0.2",
     "marked": "^16.1.1",
     "portal-vue": "^2.1.7",
     "process": "^0.11.10",
diff --git a/src/renderer/helpers/player/SabrManifestParser.js b/src/renderer/helpers/player/SabrManifestParser.js
index 5bace0cd06fa5..4946be45d826c 100644
--- a/src/renderer/helpers/player/SabrManifestParser.js
+++ b/src/renderer/helpers/player/SabrManifestParser.js
@@ -1,7 +1,6 @@
 import shaka from 'shaka-player'
 import { parseWebmSegmentIndex } from './WebmSegmentIndexParser'
 import { parseMp4SegmentIndex } from './Mp4SegmentIndexParser'
-import { QUALITY } from 'googlevideo'
 
 /**
  * @typedef {{
@@ -586,6 +585,21 @@ function createImageStreams(storyboards, presentationTimeline, currentId) {
   })
 }
 
+const QUALITY = {
+  AUTO: 0,
+  TINY: 144,
+  SMALL: 240,
+  MEDIUM: 360,
+  LIGHT: 144,
+  LARGE: 480,
+  HD720: 720,
+  HD1080: 1080,
+  HD1440: 1440,
+  HD2160: 2160,
+  HD2880: 2880,
+  HIGHRES: 4320
+}
+
 /**
  * @param {SabrManifest['formats'][0]} format
  * @param {shaka.extern.Stream} stream
diff --git a/src/renderer/helpers/player/SabrSchemePlugin.js b/src/renderer/helpers/player/SabrSchemePlugin.js
index 2a92974ef10b9..4d0e592ca1937 100644
--- a/src/renderer/helpers/player/SabrSchemePlugin.js
+++ b/src/renderer/helpers/player/SabrSchemePlugin.js
@@ -1,4 +1,13 @@
-import { GoogleVideo, base64ToU8, concatenateChunks, PART, Protos } from 'googlevideo'
+import {
+  MediaHeader,
+  SabrError,
+  SabrRedirect,
+  StreamProtectionStatus,
+  UMPPartId,
+  VideoPlaybackAbrRequest
+} from 'googlevideo/protos'
+import { CompositeBuffer, UmpReader } from 'googlevideo/ump'
+import { base64ToU8, concatenateChunks, EnabledTrackTypes } from 'googlevideo/utils'
 import shaka from 'shaka-player'
 
 import { deepCopy } from '../utils'
@@ -20,7 +29,7 @@ function formatIdFromString(str) {
 }
 
 /**
- * @param {Protos.FormatId} formatId
+ * @param {import('googlevideo/protos').FormatId} formatId
  * @param {shaka.extern.BufferedRange} buffered
  * @param {shaka.media.SegmentIndex} segmentIndex
  */
@@ -38,7 +47,7 @@ function createBufferedRange(formatId, buffered, segmentIndex) {
  * @param {shaka.Player} player
  * @param {shaka.extern.Manifest} manifest
  * @param {boolean} audioFormatsActive
- * @param {Protos.BufferedRange[]} bufferedRanges
+ * @param {import('googlevideo/protos').BufferedRange[]} bufferedRanges
  * @param {shaka.extern.Track} activeVariant
  */
 function fillBufferedRanges(player, manifest, audioFormatsActive, bufferedRanges, activeVariant) {
@@ -138,8 +147,8 @@ async function doRequest(
   headersReceived
 ) {
   let response
-  /** @type {GoogleVideo.ChunkedDataBuffer | null} */
-  let chunkedDataBuffer = null
+  /** @type {CompositeBuffer | null} */
+  let compositeBuffer = null
   /** @type {Uint8Array[]} */
   const responseDataChunks = []
   let segmentComplete = false
@@ -161,35 +170,35 @@ async function doRequest(
     let readObj = await reader.read()
 
     while (!readObj.done && !abortStatus.finished) {
-      if (chunkedDataBuffer) {
-        chunkedDataBuffer.append(readObj.value)
+      if (compositeBuffer) {
+        compositeBuffer.append(readObj.value)
       } else {
-        chunkedDataBuffer = new GoogleVideo.ChunkedDataBuffer([readObj.value])
+        compositeBuffer = new CompositeBuffer([readObj.value])
       }
 
-      const remainingData = new GoogleVideo.UMP(chunkedDataBuffer).parse((part) => {
+      const remainingData = new UmpReader(compositeBuffer).read((part) => {
         switch (part.type) {
-          case PART.STREAM_PROTECTION_STATUS: {
-            const streamProtectionStatus = Protos.StreamProtectionStatus.decode(part.data.chunks[0])
+          case UMPPartId.STREAM_PROTECTION_STATUS: {
+            const streamProtectionStatus = StreamProtectionStatus.decode(part.data.chunks[0])
             if (streamProtectionStatus.status === 3) {
               invalidPoToken = true
             }
             break
           }
-          case PART.SABR_ERROR: {
-            const sabrError = Protos.SabrError.decode(part.data.chunks[0])
+          case UMPPartId.SABR_ERROR: {
+            const sabrError = SabrError.decode(part.data.chunks[0])
             error = `SABR Error: type: ${sabrError.type}, code: ${sabrError.code}`
             break
           }
-          case PART.SABR_REDIRECT: {
-            const sabrRedirect = Protos.SabrRedirect.decode(part.data.chunks[0])
+          case UMPPartId.SABR_REDIRECT: {
+            const sabrRedirect = SabrRedirect.decode(part.data.chunks[0])
             redirectUrl = sabrRedirect.url
             updateSabrUrl(redirectUrl)
             break
           }
-          case PART.MEDIA_HEADER: {
+          case UMPPartId.MEDIA_HEADER: {
             if (mediaHeaderId === undefined) {
-              const mediaHeader = Protos.MediaHeader.decode(part.data.chunks[0])
+              const mediaHeader = MediaHeader.decode(part.data.chunks[0])
 
               if (
                 mediaHeader.formatId.itag === itag &&
@@ -206,13 +215,13 @@ async function doRequest(
 
             break
           }
-          case PART.MEDIA: {
+          case UMPPartId.MEDIA: {
             if (mediaHeaderId === part.data.getUint8(0)) {
               responseDataChunks.push(...part.data.split(1).remainingBuffer.chunks)
             }
             break
           }
-          case PART.MEDIA_END: {
+          case UMPPartId.MEDIA_END: {
             if (mediaHeaderId === part.data.getUint8(0)) {
               segmentComplete = true
               abortStatus.finished = true
@@ -225,9 +234,9 @@ async function doRequest(
 
       if (!abortStatus.finished) {
         if (remainingData) {
-          chunkedDataBuffer = remainingData.data
+          compositeBuffer = remainingData.data
         } else {
-          chunkedDataBuffer = null
+          compositeBuffer = null
         }
 
         readObj = await reader.read()
@@ -409,7 +418,7 @@ export function setupSabrScheme(sabrData, getPlayer, getManifest, playerWidth, p
       }
     }
 
-    /** @type {Protos.BufferedRange[]} */
+    /** @type {import('googlevideo/protos').BufferedRange[]} */
     const bufferedRanges = []
 
     if (!isInit && activeVariant) {
@@ -426,7 +435,7 @@ export function setupSabrScheme(sabrData, getPlayer, getManifest, playerWidth, p
 
     const resolution = streamIsVideo ? parseInt(url.searchParams.get('resolution')) : undefined
 
-    /** @type {Protos.VideoPlaybackAbrRequest} */
+    /** @type {import('googlevideo/protos').VideoPlaybackAbrRequest} */
     const requestData = {
       clientAbrState: {
         bandwidthEstimate: Math.round(player.getStats().estimatedBandwidth),
@@ -434,22 +443,23 @@ export function setupSabrScheme(sabrData, getPlayer, getManifest, playerWidth, p
         stickyResolution: resolution,
         lastManualSelectedResolution: resolution,
         playbackRate: player.getPlaybackRate(),
-        enabledTrackTypesBitfield: streamIsAudio ? 1 : 0,
+        enabledTrackTypesBitfield: streamIsAudio ? EnabledTrackTypes.AUDIO_ONLY : EnabledTrackTypes.VIDEO_AND_AUDIO,
         drcEnabled,
         playerTimeMs,
         clientViewportWidth: playerWidth.value,
         clientViewportHeight: playerHeight.value,
         clientViewportIsFlexible: false
       },
-      selectedAudioFormatIds: [audioFormatId],
-      selectedVideoFormatIds: [videoFormatId],
+      preferredAudioFormatIds: [audioFormatId],
+      preferredVideoFormatIds: [videoFormatId],
+      preferredSubtitleFormatIds: [],
       selectedFormatIds: isInit ? [] : [audioFormatId, videoFormatId],
       bufferedRanges,
       streamerContext: {
         poToken: poToken,
         clientInfo: clientInfo,
-        field5: [],
-        field6: []
+        sabrContexts: [],
+        unsentSabrContexts: []
       },
       field1000: [],
       videoPlaybackUstreamerConfig,
@@ -458,7 +468,7 @@ export function setupSabrScheme(sabrData, getPlayer, getManifest, playerWidth, p
     let body
 
     try {
-      body = Protos.VideoPlaybackAbrRequest.encode(requestData).finish()
+      body = VideoPlaybackAbrRequest.encode(requestData).finish()
     } catch (error) {
       console.error('Invalid VideoPlaybackAbrRequest data', requestData)
       throw error
diff --git a/yarn.lock b/yarn.lock
index cc5dd072ba289..87b46d4005a7b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4813,10 +4813,10 @@ globjoin@^0.1.4:
   resolved "https://registry.yarnpkg.com/globjoin/-/globjoin-0.1.4.tgz#2f4494ac8919e3767c5cbb691e9f463324285d43"
   integrity sha512-xYfnw62CKG8nLkZBfWbhWwDw02CHty86jfPcc2cr3ZfeuK9ysoVPPEUxf21bAD/rWAgk52SuBrLJlefNy8mvFg==
 
-googlevideo@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/googlevideo/-/googlevideo-3.0.0.tgz#383137303553c6625bafae32c1b8a7203be565a8"
-  integrity sha512-8LGFjbZFG4RCsyhMbjX2+IlU5Suj94FeQr1JandPSsKfAMrqL08pOoQsBYl/5P+bqIFm0wQEVpKIhm5wpiekwg==
+googlevideo@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/googlevideo/-/googlevideo-4.0.2.tgz#981a854c4b198e20c0f180785383a9511c9d50c4"
+  integrity sha512-Act4v5gCsJ9WL6+/XbJwnAF/Ui/pEQHqBve5eN4VCni+cy7xoJ/fWLP0TMdsaTzSH+OK3+6vNI0Y9tW9sFysqg==
   dependencies:
     "@bufbuild/protobuf" "^2.0.0"