Customizable subtitle bottom margin

Author: Andrews54757

chrome/player/options/defaults/DefaultSubtitlesSettings.mjs

@@ -7,6 +7,7 @@ export const DefaultSubtitlesSettings = {
   outlineColor: 'rgb(0,0,0)',
   outlineWidth: '0px',
   defaultLanguage: 'en',
+  bottomMargin: '40px',
 };
 
 export const SubtitleSettingsConfigData = {
@@ -42,4 +43,7 @@ export const SubtitleSettingsConfigData = {
   defaultLanguage: {
     type: 'string',
   },
+  bottomMargin: {
+    type: 'string',
+  },
 };

chrome/player/players/yt/YTPlayer.mjs

@@ -208,7 +208,29 @@ export default class YTPlayer extends DashPlayer {
     await super.setSource(this.source);
 
     if (this.videoInfo.captions?.caption_tracks) {
-      this.videoInfo.captions.caption_tracks.forEach(async (track) => {
+      // Sort this.videoInfo.captions.caption_tracks so that the default language is first
+      let defLang = 'en';
+      const subtitlesSettings = await Utils.getSubtitlesSettingsFromStorage();
+      if (subtitlesSettings.defaultLanguage) {
+        defLang = subtitlesSettings.defaultLanguage;
+      }
+      const tracks = this.videoInfo.captions.caption_tracks.slice();
+      tracks.sort((a, b) => {
+        const aMatches = a.language_code.substring(0, defLang.length) === defLang;
+        const bMatches = b.language_code.substring(0, defLang.length) === defLang;
+        if (aMatches && !bMatches) return -1;
+        if (!aMatches && bMatches) return 1;
+        if (aMatches && bMatches) {
+          // if one is auto (a.kind === 'asr') and the other is not, prefer the non-auto
+          const aIsAuto = a.kind === 'asr';
+          const bIsAuto = b.kind === 'asr';
+          if (aIsAuto && !bIsAuto) return 1;
+          if (!aIsAuto && bIsAuto) return -1;
+        }
+        return 0;
+      });
+
+      const promises = tracks.map(async (track) => {
         let url = track.base_url;
         // if po token exists, add it to the url
         if (this.ytclient.session.content_token) {
@@ -223,7 +245,15 @@ export default class YTPlayer extends DashPlayer {
 
         const subTrack = new SubtitleTrack(label, language);
         await subTrack.loadURL(url);
-        this.client.loadSubtitleTrack(subTrack, true);
+        return subTrack;
+      });
+
+      await Promise.allSettled(promises).then((results) => {
+        results.forEach((result) => {
+          if (result.status === 'fulfilled' && result.value) {
+            this.client.loadSubtitleTrack(result.value, true);
+          }
+        });
       });
     }
 

chrome/player/ui/subtitles/SubtitlesManager.mjs

@@ -43,9 +43,22 @@ export class SubtitlesManager extends EventEmitter {
     }
 
     const defLang = this.settingsManager.getSettings().defaultLanguage;
-    if (autoset && this.activeTracks.length === 0 && this.client.options.autoEnableBestSubtitles) {
+    if (autoset && this.activeTracks.length <= 1 && this.client.options.autoEnableBestSubtitles) {
       if (subtitleTrack.language && subtitleTrack.language.substring(0, defLang.length) === defLang) {
-        this.activateTrack(subtitleTrack);
+        // check if active tracks exist with same language
+        const existingActive = this.activeTracks.find((t) => {
+          return t.language && subtitleTrack.language && t.language.substring(0, defLang.length) === defLang;
+        });
+        if (!existingActive) {
+          this.activateTrack(subtitleTrack);
+        } else {
+          // Check if existing has "auto" in label, if new one doesn't, prefer new one
+          if (existingActive.label && existingActive.label.toLowerCase().includes('auto') &&
+              subtitleTrack.label && !subtitleTrack.label.toLowerCase().includes('auto')) {
+            this.deactivateTrack(existingActive);
+            this.activateTrack(subtitleTrack);
+          }
+        }
       }
     }
 
@@ -690,6 +703,8 @@ export class SubtitlesManager extends EventEmitter {
 
     if (subtitlesVisible) {
       DOMElements.subtitlesContainer.style.display = '';
+      const margin = this.settingsManager.getSettings().bottomMargin;
+      DOMElements.subtitlesContainer.style.bottom = margin === '40px' ? '' : this.settingsManager.getSettings().bottomMargin;
     } else {
       DOMElements.subtitlesContainer.style.display = 'none';
     }