Update pages

built/web/player/FastStreamClient.mjs

@@ -620,6 +620,9 @@ export class FastStreamClient extends EventEmitter {
     this.context.on(DefaultPlayerEvents.FRAGMENT_UPDATE, () => {
       this.interfaceController.updateFragmentsLoaded();
     });
+    this.context.on(DefaultPlayerEvents.SKIP_SEGMENTS, () => {
+      this.interfaceController.updateSkipSegments();
+    });
   }
   bindPreviewPlayer(player) {
     this.previewContext = player.createContext();

built/web/player/assets/fluidplayer/css/fluidplayer.css

@@ -898,6 +898,10 @@ body {
     background-color: var(--intro-outro-bar-color);
 }
 
+.intro_outro_container > .skip_segment {
+    min-width: 3px;
+}
+
 .intro_outro_container > div.chapter {
     background-color: rgb(0,0,0,0.3);
     border-radius: 0px;

built/web/player/enums/DefaultPlayerEvents.mjs

@@ -99,4 +99,8 @@ export const DefaultPlayerEvents = {
    * Fired when the player requests a key (DRM not supported)
    */
   NEED_KEY: 'needkey',
+  /**
+   * Fired when the player has skip segments
+   */
+  SKIP_SEGMENTS: 'skipsegments',
 };

built/web/player/network/DownloadManager.mjs

@@ -1,4 +1,5 @@
 import {DownloadStatus} from '../enums/DownloadStatus.mjs';
+import {PlayerModes} from '../enums/PlayerModes.mjs';
 import {EnvUtils} from '../utils/EnvUtils.mjs';
 import {DownloadEntry} from './DownloadEntry.mjs';
 import {IndexedDBManager} from './IndexedDBManager.mjs';
@@ -186,7 +187,8 @@ export class DownloadManager {
               speed = this.speedTestBuffer.reduce((a, b) => a + b, 0) / this.speedTestBuffer.length;
               this.speedTestBuffer = [];
               if (speed > this.lastSpeed) {
-                if (this.downloaders.length < 6) {
+                const maxDownloaders = (this.client?.source?.mode === PlayerModes.ACCELERATED_YT) ? 3 : 6;
+                if (this.downloaders.length < maxDownloaders) {
                   console.log('Adding downloader, speed: ' + speed);
                   this.downloaders.push(new StandardDownloader(this));
                   this.lastSpeed = speed;

built/web/player/players/dash/DashPlayer.mjs

@@ -70,7 +70,7 @@ export default class DashPlayer extends EventEmitter {
       // Get best quality but within screen resolution
       this.levels.forEach((level, key) => {
         if (level.bitrate > max) {
-          if (level.width > window.innerWidth * window.devicePixelRatio * 2 || level.height > window.innerHeight * window.devicePixelRatio * 2) return;
+          if (level.width > window.innerWidth * window.devicePixelRatio * 1.2 || level.height > window.innerHeight * window.devicePixelRatio * 1.2) return;
           max = level.bitrate;
           maxLevel = key;
         }

built/web/player/players/hls/HLSPlayer.mjs

@@ -178,7 +178,7 @@ export default class HLSPlayer extends EventEmitter {
       // Get best quality but within screen resolution
       this.levels.forEach((level, key) => {
         if (level.bitrate > max) {
-          if (level.width > window.innerWidth * window.devicePixelRatio * 2 || level.height > window.innerHeight * window.devicePixelRatio * 2) return;
+          if (level.width > window.innerWidth * window.devicePixelRatio * 1.2 || level.height > window.innerHeight * window.devicePixelRatio * 1.2) return;
           max = level.bitrate;
           maxLevel = key;
         }

built/web/player/players/yt/YTPlayer.mjs

@@ -1,93 +1,27 @@
 import {DefaultPlayerEvents} from '../../enums/DefaultPlayerEvents.mjs';
 import {PlayerModes} from '../../enums/PlayerModes.mjs';
-import {Innertube, UniversalCache} from '../../modules/yt.mjs';
+import {ClientType, Innertube, UniversalCache} from '../../modules/yt.mjs';
 import {SubtitleTrack} from '../../SubtitleTrack.mjs';
 import {EnvUtils} from '../../utils/EnvUtils.mjs';
+import {URLUtils} from '../../utils/URLUtils.mjs';
 import {VideoSource} from '../../VideoSource.mjs';
 import DashPlayer from '../dash/DashPlayer.mjs';
 export default class YTPlayer extends DashPlayer {
   constructor(client, options) {
     super(client, options);
   }
   async setSource(source) {
-    const youtube = await Innertube.create({
-      cache: !EnvUtils.isIncognito() ? new UniversalCache() : undefined,
-      fetch: async (input, init) => {
-        // url
-        const url = typeof input === 'string' ?
-                    new URL(input) :
-                    input instanceof URL ?
-                        input :
-                        new URL(input.url);
-        // transform the url for use with our proxy
-        // url.searchParams.set('__host', url.host);
-        // url.host = 'localhost:8080';
-        // url.protocol = 'http';
-        const headers = init?.headers ?
-                    new Headers(init.headers) :
-                    input instanceof Request ?
-                        input.headers :
-                        new Headers();
-        const redirectHeaders = [
-          'user-agent',
-          'origin',
-          'referer',
-        ];
-        // now serialize the headers
-        let headersArr = [...headers];
-        const customHeaderCommands = [];
-        headersArr = headersArr.filter((header) => {
-          const name = header[0];
-          const value = header[1];
-          if (redirectHeaders.includes(name.toLowerCase())) {
-            customHeaderCommands.push({
-              operation: 'set',
-              header: name,
-              value,
-            });
-            return false;
-          }
-          return true;
-        });
-        const newHeaders = new Headers(headersArr);
-        if (!customHeaderCommands.find((c) => c.header === 'origin')) {
-          customHeaderCommands.push({
-            operation: 'remove',
-            header: 'origin',
-          });
-        }
-        customHeaderCommands.push({
-          operation: 'remove',
-          header: 'x-client-data',
-        });
-        if (EnvUtils.isExtension()) {
-          await chrome.runtime.sendMessage({
-            type: 'header_commands',
-            url: url.toString(),
-            commands: customHeaderCommands,
-          });
-        }
-        // fetch the url
-        return fetch(input, init ? {
-          ...init,
-          headers: newHeaders,
-        } : {
-          headers: newHeaders,
-        });
-      },
-    }).catch((e)=>{
-      this.emit(DefaultPlayerEvents.ERROR, e);
-    });
-    const url = new URL(source.url);
-    let identifier = url.searchParams.get('v');
+    const identifier = URLUtils.get_yt_identifier(source.url);
     if (!identifier) {
-      identifier = url.pathname.split('/').pop();
+      this.emit(DefaultPlayerEvents.ERROR, new Error('Invalid YouTube URL'));
+      return;
     }
     try {
-      const videoInfo = await youtube.getInfo(identifier);
-      this.youtube = youtube;
-      this.videoInfo = videoInfo;
-      const manifest = await videoInfo.toDash((url) => {
+      this.videoInfo = await this.getVideoInfo(identifier);
+      if (this.videoInfo.playability_status?.status === 'LOGIN_REQUIRED') {
+        this.videoInfo = await this.getVideoInfo(identifier, true);
+      }
+      const manifest = await this.videoInfo.toDash((url) => {
         return url;
       });
       this.oldSource = source;
@@ -116,6 +50,74 @@ export default class YTPlayer extends DashPlayer {
     this.extractChapters();
     this.fetchSponsorBlock(identifier);
   }
+  async youtubeFetch(input, init) {
+    // url
+    const url = typeof input === 'string' ?
+                  new URL(input) :
+                  input instanceof URL ?
+                      input :
+                      new URL(input.url);
+    const headers = init?.headers ?
+                  new Headers(init.headers) :
+                  input instanceof Request ?
+                      input.headers :
+                      new Headers();
+    const redirectHeaders = [
+      'user-agent',
+      'origin',
+      'referer',
+    ];
+      // now serialize the headers
+    let headersArr = [...headers];
+    const customHeaderCommands = [];
+    headersArr = headersArr.filter((header) => {
+      const name = header[0];
+      const value = header[1];
+      if (redirectHeaders.includes(name.toLowerCase())) {
+        customHeaderCommands.push({
+          operation: 'set',
+          header: name,
+          value,
+        });
+        return false;
+      }
+      return true;
+    });
+    const newHeaders = new Headers(headersArr);
+    if (!customHeaderCommands.find((c) => c.header === 'origin')) {
+      customHeaderCommands.push({
+        operation: 'remove',
+        header: 'origin',
+      });
+    }
+    customHeaderCommands.push({
+      operation: 'remove',
+      header: 'x-client-data',
+    });
+    if (EnvUtils.isExtension()) {
+      await chrome.runtime.sendMessage({
+        type: 'header_commands',
+        url: url.toString(),
+        commands: customHeaderCommands,
+      });
+    }
+    // fetch the url
+    return fetch(input, init ? {
+      ...init,
+      headers: newHeaders,
+    } : {
+      headers: newHeaders,
+    });
+  }
+  async getVideoInfo(identifier, tvMode = false) {
+    const cache = !EnvUtils.isIncognito() ? new UniversalCache() : undefined;
+    const youtube = await Innertube.create({
+      cache,
+      fetch: this.youtubeFetch.bind(this),
+      clientType: tvMode ? ClientType.TV_EMBEDDED : ClientType.WEB,
+    });
+    return youtube.getInfo(identifier, tvMode ? 'TV_EMBEDDED' : 'WEB');
+  }
   fetchSponsorBlock(identifier) {
     if (EnvUtils.isExtension()) {
       chrome.runtime.sendMessage({
@@ -124,22 +126,29 @@ export default class YTPlayer extends DashPlayer {
         videoId: identifier,
       }, (segments)=>{
         if (segments) {
+          console.log('Recieved Skip Segments', segments);
           this._skipSegments = segments.map((segment) => {
             return {
               startTime: segment.segment[0],
               endTime: segment.segment[1],
               class: 'sponsor_block_' + segment.category,
+              category: segment.category,
+              name: segment.category.charAt(0)?.toUpperCase() + segment.category.substring(1),
+              color: segment.color,
               skipText: 'Skip ' + segment.category,
               autoSkip: !!segment.autoSkip,
               onSkip: () => {
-                chrome.runtime.sendMessage({
-                  type: 'sponsor_block',
-                  action: 'segmentSkipped',
-                  UUID: segment.UUID,
-                });
+                if (segment.UUID) {
+                  chrome.runtime.sendMessage({
+                    type: 'sponsor_block',
+                    action: 'segmentSkipped',
+                    UUID: segment.UUID,
+                  });
+                }
               },
             };
           });
+          this.emit(DefaultPlayerEvents.SKIP_SEGMENTS);
         }
       });
     }

built/web/player/ui/InterfaceController.mjs

@@ -24,6 +24,7 @@ export class InterfaceController {
     this.mouseOverControls = false;
     this.mouseActivityCooldown = 0;
     this.playbackRate = 10;
+    this.skipSegments = [];
     this.hasShownSkip = false;
     this.failed = false;
     this.optionsWindow = new OptionsWindow();
@@ -124,6 +125,7 @@ export class InterfaceController {
     DOMElements.progressLoadedContainer.replaceChildren();
     this.progressCache = [];
     this.progressCacheAudio = [];
+    this.skipSegments = [];
     this.hasShownSkip = false;
     this.failed = false;
     this.setStatusMessage('error', null, 'error');
@@ -710,6 +712,7 @@ export class InterfaceController {
       this.stopProgressLoop();
     }
     this.updateProgress();
+    this.updateSkipSegments();
   }
   runProgressLoop() {
     if (!this.isRunningProgressLoop) {
@@ -896,7 +899,6 @@ export class InterfaceController {
     }
   }
   skipSegment() {
-    if (!this.skipSegments) return;
     const time = this.client.currentTime;
     const currentSegment = this.skipSegments.find((segment) => segment.startTime <= time && segment.endTime >= time);
     this.client.currentTime = currentSegment.endTime;
@@ -991,13 +993,18 @@ export class InterfaceController {
     const totalWidth = DOMElements.progressContainer.clientWidth;
     const time = this.client.duration * currentX / totalWidth;
     const chapter = this.client.chapters.find((chapter) => chapter.startTime <= time && chapter.endTime >= time);
+    const segment = this.skipSegments.find((segment) => segment.startTime <= time && segment.endTime >= time);
     let text = '';
+    let offset = 25;
+    if (segment) {
+      text += segment.name + '\n';
+      offset += 25;
+    }
     if (chapter) {
       text += chapter.name + '\n';
-      DOMElements.seekPreviewVideo.style.bottom = '50px';
-    } else {
-      DOMElements.seekPreviewVideo.style.bottom = '';
+      offset += 25;
     }
+    DOMElements.seekPreviewVideo.style.bottom = offset + 'px';
     text += StringUtils.formatTime(time);
     DOMElements.seekPreviewText.innerText = text;
     const maxWidth = Math.max(DOMElements.seekPreviewVideo.clientWidth, DOMElements.seekPreview.clientWidth);
@@ -1122,12 +1129,16 @@ export class InterfaceController {
     const introMatch = this.client.videoAnalyzer.getIntro();
     const outroMatch = this.client.videoAnalyzer.getOutro();
     const duration = this.client.duration;
+    if (!duration) {
+      return;
+    }
     const skipSegments = [];
     if (introMatch) {
       skipSegments.push({
         startTime: Utils.clamp(introMatch.startTime, 0, duration),
         endTime: Utils.clamp(introMatch.endTime, 0, duration),
         class: 'intro',
+        name: 'Intro',
         skipText: Localize.getMessage('player_skipintro'),
       });
     }
@@ -1136,6 +1147,7 @@ export class InterfaceController {
         startTime: Utils.clamp(outroMatch.startTime, 0, duration),
         endTime: Utils.clamp(outroMatch.endTime, 0, duration),
         class: 'outro',
+        name: 'Outro',
         skipText: Localize.getMessage('player_skipoutro'),
       });
     }
@@ -1154,6 +1166,9 @@ export class InterfaceController {
       segmentElement.classList.add(segment.class);
       segmentElement.style.left = segment.startTime / duration * 100 + '%';
       segmentElement.style.width = (segment.endTime - segment.startTime) / duration * 100 + '%';
+      if (segment.color) {
+        segmentElement.style.backgroundColor = segment.color;
+      }
       DOMElements.skipSegmentsContainer.appendChild(segmentElement);
       if (!currentSegment && time >= segment.startTime && time < segment.endTime) {
         currentSegment = segment;

built/web/player/ui/subtitles/SubtitlesManager.mjs

@@ -27,8 +27,10 @@ export class SubtitlesManager {
       return returnedTrack;
     }
     const defLang = this.settingsManager.getSettings()['default-lang'];
-    if (autoset && this.client.options.autoEnableBestSubtitles && subtitleTrack.language === defLang && this.activeTracks.length === 0) {
-      this.activateTrack(subtitleTrack);
+    if (autoset && this.activeTracks.length === 0 && this.client.options.autoEnableBestSubtitles) {
+      if (subtitleTrack.language && subtitleTrack.language.substring(0, defLang.length) === defLang) {
+        this.activateTrack(subtitleTrack);
+      }
     }
     return returnedTrack;
   }

built/web/player/utils/EnvUtils.mjs

@@ -19,7 +19,7 @@ export class EnvUtils {
   static getVersion() {
     // eslint-disable-next-line prefer-const
     let version = '1.0.0.web';
-version = '1.2.6';
+version = '1.2.8';
     return this.isExtension() ? chrome.runtime.getManifest().version : version;
   }
   static isIncognito() {