[#39] Video quality setting

Author: cpiber

src/_locales/de/messages.json

@@ -83,6 +83,42 @@
     "message": "Wenn gesetzt, dann wird das Video beim Laden auf Fenstergröße erweitert. Es gibt die Option auch manuell im Spieler.",
     "description": "Hilfstext für Expand der Optionen Seite."
   },
+  "optionsQualityTitle": {
+    "message": "Automatische Videoqualität",
+    "description": "Beschriftung für Quality der Optionen Seite."
+  },
+  "optionsQualityHint": {
+    "message": "Erlaubt das automatische Überschreiben der Videoqualität je auch höchste/niedrigste Verfügbare, oder mit Präferenz und wechsel auf nächst-höhere/nierere Option wenn nicht verfügbar.",
+    "description": "Hilfstext für Quality der Optionen Seite."
+  },
+  "optionsQualityTypeLabel": {
+    "message": "Qualität Modus",
+    "description": "Beschriftung für Quality der Optionen Seite."
+  },
+  "optionsQualityPreferredLabel": {
+    "message": "Bevorzugte Qualität",
+    "description": "Beschriftung für Preferred Quality der Optionen Seite."
+  },
+  "optionsQualityOff": {
+    "message": "Aus (keine Anpassung)",
+    "description": "Beschriftung für Quality Off der Optionen Seite."
+  },
+  "optionsQualityHighest": {
+    "message": "Höchste Verfügbare",
+    "description": "Beschriftung für Quality Highest der Optionen Seite."
+  },
+  "optionsQualityLowest": {
+    "message": "Niedrigste Verfügbare",
+    "description": "Beschriftung für Quality Lowest der Optionen Seite."
+  },
+  "optionsQualityPreferredChooseHigher": {
+    "message": "Bevorzugt, Rückfallend auf Höhere",
+    "description": "Beschriftung für Quality PreferredChooseHigher der Optionen Seite."
+  },
+  "optionsQualityPreferredChooseLower": {
+    "message": "Bevorzugt, Rückfallend auf Niederere",
+    "description": "Beschriftung für Quality PreferredChooseLower der Optionen Seite."
+  },
   "optionsPlayerConfigureTitle": {
     "message": "Videospieler konfigurieren",
     "description": "Beschriftung für PlayerConfigure der Optionen Seite."

src/_locales/en/messages.json

@@ -83,6 +83,42 @@
     "message": "If set the video will be expanded to the size of the window on load. This can also be done manually in the player.",
     "description": "Hint for Expand of options page."
   },
+  "optionsQualityTitle": {
+    "message": "Auto Video Quality",
+    "description": "Label for Quality of options page."
+  },
+  "optionsQualityHint": {
+    "message": "Override the video quality of the player to highest/lowest available, or to a preferred quality with switch to next higher/lower if not available.",
+    "description": "Hint for Quality of options page."
+  },
+  "optionsQualityTypeLabel": {
+    "message": "Quality Mode",
+    "description": "Label for Quality of options page."
+  },
+  "optionsQualityPreferredLabel": {
+    "message": "Preferred Quality",
+    "description": "Label for Preferred Quality of options page."
+  },
+  "optionsQualityOff": {
+    "message": "Off (default)",
+    "description": "Label for Quality Off of options page."
+  },
+  "optionsQualityHighest": {
+    "message": "Highest available",
+    "description": "Label for Quality Highest of options page."
+  },
+  "optionsQualityLowest": {
+    "message": "Lowest available",
+    "description": "Label for Quality Lowest of options page."
+  },
+  "optionsQualityPreferredChooseHigher": {
+    "message": "Preferred, fallback to next higher",
+    "description": "Label for Quality PreferredChooseHigher of options page."
+  },
+  "optionsQualityPreferredChooseLower": {
+    "message": "Preferred, fallback to next lower",
+    "description": "Label for Quality PreferredChooseLower of options page."
+  },
   "optionsPlayerConfigureTitle": {
     "message": "Configure player",
     "description": "Label for PlayerConfigure of options page."

src/options.html

@@ -76,6 +76,22 @@ <h3 class="enhancer-field-title i18n">__MSG_optionsExpandTitle__</h3>
             <p class="hint i18n">__MSG_optionsExpandHint__</p>
           </div>
 
+          <div class="enhancer-field">
+            <h3 class="enhancer-field-title i18n">__MSG_optionsQualityTitle__</h3>
+
+            <div class="enhancer-control">
+              <select name="qualityType" id="qualityType" class="enhancer-text-input" data-default="Off"></select>
+              <label class="title i18n" for="preferredQuality">__MSG_optionsQualityTypeLabel__</label>
+            </div>
+
+            <div class="enhancer-control">
+              <input type="number" class="enhancer-text-input" name="preferredQuality" id="preferredQuality" data-default="1080" size="5" placeholder="1080p" />
+              <label class="title i18n" for="preferredQuality">__MSG_optionsQualityPreferredLabel__</label>
+            </div>
+          
+            <p class="hint i18n">__MSG_optionsQualityHint__</p>
+          </div>
+
           <div class="enhancer-field">
             <h3 class="enhancer-field-title i18n">__MSG_optionsPlayerConfigureTitle__</h3>
 

src/scripts/helpers/shared/constants.ts

@@ -37,3 +37,11 @@ export const enum BrowserMessage {
   GET_YTID = 'getYoutubeId',
   GET_VID = 'getNebulaVid',
 }
+
+export const QualityType = {
+  Off: 'Off',
+  Highest: 'Highest',
+  Lowest: 'Lowest',
+  PreferredChooseHigher: 'PreferredChooseHigher',
+  PreferredChooseLower: 'PreferredChooseLower',
+} as const;

src/scripts/options.ts

@@ -3,7 +3,7 @@ import { loadCreators } from './background';
 import { purgeCache } from './background/ext';
 import { getChannels } from './helpers/api';
 import { buildModal } from './helpers/modal';
-import { BrowserMessage, getBrowserInstance, getFromStorage, notification, setToStorage } from './helpers/sharedExt';
+import { BrowserMessage, QualityType, getBrowserInstance, getFromStorage, notification, setToStorage } from './helpers/sharedExt';
 import { load, saveDirect } from './options/form';
 import { showLogs } from './options/logs';
 import { showManageCreators } from './options/managecreators';
@@ -46,6 +46,11 @@ const vChange = () => {
   els.volumeChange.disabled = !c;
 };
 els.volumeEnabled.addEventListener('change', vChange);
+const qChange = () => {
+  const type = els.qualityType.value as keyof typeof QualityType;
+  els.preferredQuality.parentElement.style.display = type === QualityType.PreferredChooseHigher || type === QualityType.PreferredChooseLower ? '' : 'none';
+};
+els.qualityType.addEventListener('change', qChange);
 const nChange = () => {
   els.ytOpenTab.disabled = !els.watchnebula.checked;
 };
@@ -82,6 +87,7 @@ document.querySelector('#configurePlayer').addEventListener('click', showConfigu
 load(true)
   .then(aChange)
   .then(vChange)
+  .then(qChange)
   .then(nChange)
   .then(nTabChange)
   .then(hChange)

src/scripts/options/settings.ts

@@ -1,5 +1,5 @@
 import { purgeCacheIfNecessary } from '../background/ext';
-import { arrFromLengthy, getBrowserInstance, getFromStorage, parseTimeString, toTimeString } from '../helpers/sharedExt';
+import { QualityType, arrFromLengthy, getBrowserInstance, getFromStorage, parseTimeString, toTimeString } from '../helpers/sharedExt';
 
 export class Settings {
   private static instance: Settings = null;
@@ -12,6 +12,8 @@ export class Settings {
   volumeShow: HTMLInputElement = undefined;
   volumeChange: HTMLInputElement = undefined;
   autoExpand: HTMLInputElement = undefined;
+  qualityType: HTMLSelectElement = undefined;
+  preferredQuality: HTMLInputElement = undefined;
   youtube: HTMLInputElement = undefined;
   ytOpenTab: HTMLInputElement = undefined;
   ytMuteOnly: HTMLInputElement = undefined;
@@ -43,6 +45,13 @@ export class Settings {
         }
       }
     });
+
+    for (const opt of Object.keys(QualityType)) {
+      const option = document.createElement('option');
+      option.value = QualityType[opt];
+      option.text = getBrowserInstance().i18n.getMessage('optionsQuality' + QualityType[opt]);
+      this.qualityType.appendChild(option);
+    }
   }
 
   static get() {
@@ -71,6 +80,9 @@ export const toData = async (useDefaults = false) => {
     data[key] = val;
   });
 
+  if (!((data.qualityType as string) in QualityType))
+    data.qualityType = QualityType.Off;
+
   data.visitedColor = (data.visitedColor as string).split(';')[0].trim();
   els.visitedColor.value = data.visitedColor;
 

src/scripts/page/player.ts

@@ -6,7 +6,7 @@ import createQueueButton, { toggleQueueButton } from './components/queue';
 import createSpeedDial from './components/speeddial';
 import attachVolumeText, { toggleVolumeShow } from './components/volume';
 import { init as initDispatch, loadPrefix, navigatePrefix } from './dispatcher';
-import { Message, getFromStorage, notification, onStorageChange, parseTypeObject, replyMessage, sendMessage } from './sharedpage';
+import { Message, QualityType, getFromStorage, notification, onStorageChange, parseTypeObject, replyMessage, sendMessage } from './sharedpage';
 
 export type Player = HTMLVideoElement & { _enhancerInit: boolean; };
 
@@ -20,6 +20,8 @@ const optionsDefaults = {
   volumeLog: false,
   autoExpand: false,
   playerSettings: {} as Partial<Settings>,
+  qualityType: QualityType.Off as keyof typeof QualityType,
+  preferredQuality: 1080,
 };
 let options = { ...optionsDefaults };
 let lastPositon: number | undefined = undefined;
@@ -79,6 +81,7 @@ export const init = async () => {
     player.autoplay = options.autoplay;
     toggleVolumeShow(player, options.volumeShow);
     addPlayerControls(player);
+    setPlayerQuality();
   });
 };
 
@@ -90,6 +93,9 @@ export const initPlayer = async () => {
   await waitForButtonsAndSetIds();
 
   player.addEventListener('ended', () => sendMessage(Message.QUEUE_NEXT, null, false));
+  const handlers = getPlayerController();
+  handlers.store.subscribe(e => e.qualityLevels, setPlayerQuality);
+  setPlayerQuality();
 
   const { autoplay, autoplayQueue } = options;
   console.debug('autoplay?', autoplay, 'autoplayQueue?', autoplayQueue);
@@ -376,4 +382,128 @@ export const setupHistory = () => {
     console.error(e);
   }
   return false;
+};
+
+interface Store<T> {
+  getInitialState: () => T,
+  getState: () => T & { set: (n: Partial<T>) => void; },
+  setState: (n: T | ((old: T) => T), options?: any) => void,
+  subscribe: <U>(selector: (state: T) => U, notify: (old_value: U, new_value: U) => void, options?: Partial<{ equalityFn: (o: U, n: U) => boolean, fireImmediately: boolean; }>) => (() => void),
+}
+
+interface VideoStoreData {
+  airPlayAvailable: boolean;
+  airPlayConnected: undefined;
+  aspectRatio: number,
+  autoplayAvailable: boolean;
+  autoplayEnabled: boolean;
+  buffered: number[];
+  chromecastAvailable: boolean;
+  chromecastConnected: boolean;
+  chromecastDeviceName: string;
+  chromecastQueue: undefined;
+  currentAutoLevel: any;
+  currentLanguage: string;
+  currentTime: number;
+  deviceSupportsVideoCodecs: boolean;
+  duration: number,
+  fullScreenAvailable: boolean;
+  hasEnded: boolean;
+  isBuffering: boolean;
+  isEndScreenShowing: boolean;
+  isFullScreen: boolean;
+  isInitialized: boolean;
+  isMuted: boolean;
+  isPictureInPicture: boolean;
+  isPlaying: boolean;
+  isScrubbing: boolean;
+  isSeeking: boolean;
+  mediaId: string;
+  mediaSessionMetadata: any;
+  mediaTitle: 'The Hunt For the World\'s Top-4 Most Wanted Leaders';
+  mediaType: 'video/mp4';
+  muteChangeAvailable: true;
+  muxData: any;
+  pictureInPictureAvailable: undefined;
+  playbackSpeed: number;
+  quality: number;
+  qualityLevels: ({ height: number; } & Record<string, any>)[];
+  resetTech: () => void;
+  src: string;
+  subtitles: { label: string, language: string; }[];
+  volume: number;
+  volumeChangeAvailable: boolean;
+  wasEverPlayed: boolean;
+}
+
+interface PlayerHandlers {
+  store: Store<VideoStoreData>,
+  hls: any,
+  options: Record<string, any>,
+  relativeSeek: any,
+  videoElement: HTMLVideoElement,
+  changeLanguage: (name: string) => void,
+  nextFrame: () => void,
+  previousFrame: () => void,
+  setCurrentTime: (time: number) => void,
+  setHls: (hls: any) => void,
+  setQualityLevel: (level: number) => void,
+}
+
+const getPlayerController = () => {
+  try {
+    const root = document.getElementById('video-player');
+    if (!root) {
+      console.dev.error('Player not found');
+      return undefined;
+    }
+    for (const key of Object.keys(root)) {
+      if (key.startsWith('__reactProps')) {
+        for (const child of (root[key] as any).children) {
+          if (child.props && child.props.playerHandlers)
+            return child.props.playerHandlers as PlayerHandlers;
+        }
+        break;
+      }
+    }
+  } catch (e) {
+    console.error(e);
+  }
+  console.dev.error('Player handlers not found');
+  return undefined;
+};
+
+const setPlayerQuality = () => {
+  const handlers = getPlayerController();
+  if (!handlers) return;
+  const state = handlers.store.getState();
+  const levels = state.qualityLevels.map(e => e.height);
+  if (levels.length === 0) {
+    console.dev.debug('No quality levels defined, postponing setting of quality');
+    return;
+  }
+  let targetQuality: number;
+  switch (options.qualityType) {
+    case QualityType.Highest:
+      targetQuality = Math.max(...levels);
+      break;
+    case QualityType.Lowest:
+      targetQuality = Math.min(...levels);
+      break;
+    case QualityType.PreferredChooseHigher:
+      // sort ascending, choose first which is higher than preferred
+      targetQuality = levels.filter(a => a >= options.preferredQuality).toSorted((a, b) => a - b)[0];
+      break;
+    case QualityType.PreferredChooseLower:
+      targetQuality = levels.filter(a => a <= options.preferredQuality).toSorted((a, b) => b - a)[0];
+      break;
+    default:
+      return;
+  }
+  if (state.quality === targetQuality) {
+    console.dev.debug('Target quality', targetQuality, 'already matches current state');
+    return;
+  }
+  console.log('Setting quality to', targetQuality, 'setting was', options.qualityType);
+  handlers.setQualityLevel(targetQuality);
 };

src/styles/helpers/shared.scss

@@ -39,7 +39,7 @@
       white-space: nowrap;
     }
 
-    input {
+    input, select {
       &.enhancer-text-input {
         display: block;
         appearance: none;

src/styles/options.scss

@@ -81,7 +81,8 @@ form {
 }
 
 label + .enhancer-control,
-.hint + .enhancer-control {
+.hint + .enhancer-control,
+.enhancer-control + .enhancer-control {
   margin-top: 8px;
 }