Merge pull request #2400 from raszpl/patch-8

Update player.js more subtitle safety

js&css/web-accessible/functions.js

@@ -611,7 +611,6 @@ tooltip.style.zIndex = 10001;} // needed for cinema mode
 
 ImprovedTube.empty = function (element) {for (var i = element.childNodes.length - 1; i > -1; i--) { element.childNodes[i].remove(); }};
 ImprovedTube.isset = function (variable) {return !(typeof variable === 'undefined' || variable === null || variable === 'null');};
-ImprovedTube.stopPropagation = function (event) {event.stopPropagation();};
 ImprovedTube.showStatus = function (value) {
  if (!this.elements.status) {
  this.elements.status = document.createElement('div');
@@ -655,3 +654,9 @@ ImprovedTube.extractSubscriberCount = function (subscriberCountNode) {
  ImprovedTube.subscriberCount = subscriberCount;
  }
 };
+
+// true if any subtitles are available at this moment
+// YT doesnt have a function returning status of captions currently loaded, checking button color is the only way I could find :(
+ImprovedTube.subtitlesEnabled = function () {
+ return this.elements.player_subtitles_button?.childNodes?.[0]?.getAttribute('fill-opacity') == 1;
+};

js&css/web-accessible/www.youtube.com/player.js

@@ -202,8 +202,8 @@ SUBTITLES
 ------------------------------------------------------------------------------*/
 ImprovedTube.playerSubtitles = function () {
  const player = this.elements.player;
- 
- if (player && player.isSubtitlesOn && player.toggleSubtitles && player.toggleSubtitlesOn) {
+
+ if (player && this.subtitlesEnabled() && player.isSubtitlesOn && player.toggleSubtitles && player.toggleSubtitlesOn) {
  switch(this.storage.player_subtitles) {
  case true:
  case 'enabled':
@@ -221,13 +221,11 @@ SUBTITLES LANGUAGE
 ------------------------------------------------------------------------------*/
 ImprovedTube.subtitlesLanguage = function () {
  const option = this.storage.subtitles_language,
- player = this.elements.player,
- button = this.elements.player_subtitles_button;
+ player = this.elements.player;
  let subtitlesState;
 
- if (option && player && player.getOption && player.isSubtitlesOn && player.toggleSubtitles && button && !button.title.includes('unavailable')) {
- const tracklists = player.getOption('captions', 'tracklist', {includeAsr: true}),
- matchedTrack = tracklists.find(element => element.languageCode.includes(option) && (!element.vss_id.includes("a.") || this.storage.auto_generate));
+ if (option && player && this.subtitlesEnabled() && player.getOption && player.setOption && player.isSubtitlesOn && player.toggleSubtitles) {
+ const matchedTrack = player.getOption('captions', 'tracklist', {includeAsr: true})?.find(track => track.languageCode.includes(option) && (!track.vss_id.includes("a.") || this.storage.auto_generate));
 
  if (matchedTrack) {
  subtitlesState = player.isSubtitlesOn();
@@ -260,55 +258,67 @@ default = {
 },
 ------------------------------------------------------------------------------*/
 ImprovedTube.subtitlesUserSettings = function () {
- const ourSettings = [
- ['fontFamily', 'number', this.storage.subtitles_font_family],
- ['color', 'color', this.storage.subtitles_font_color],
- ['fontSizeIncrement', 'number', this.storage.subtitles_font_size],
- ['background', 'color', this.storage.subtitles_background_color],
- ['backgroundOpacity', 'fraction', this.storage.subtitles_background_opacity],
- ['windowColor', 'color', this.storage.subtitles_window_color],
- ['windowOpacity', 'fraction', this.storage.subtitles_window_opacity],
- ['charEdgeStyle', 'number', this.storage.subtitles_character_edge_style],
- ['textOpacity', 'fraction', this.storage.subtitles_font_opacity]
- ],
- option = ourSettings.filter(element => element[2]),
- player = this.elements.player,
- button = this.elements.player_subtitles_button;
-
- if (option.length && player.getSubtitlesUserSettings && button && !button.title.includes('unavailable')) {
- let settings = player.getSubtitlesUserSettings();
-
- for (const value of option) {
- switch(value[1]) {
- case 'number':
- settings[value[0]] = Number(value[2]);
+ const ourSettings = {
+ fontFamily: this.storage.subtitles_font_family,
+ color: this.storage.subtitles_font_color,
+ fontSizeIncrement: this.storage.subtitles_font_size,
+ background: this.storage.subtitles_background_color,
+ backgroundOpacity: this.storage.subtitles_background_opacity,
+ windowColor: this.storage.subtitles_window_color,
+ windowOpacity: this.storage.subtitles_window_opacity,
+ charEdgeStyle: this.storage.subtitles_character_edge_style,
+ textOpacity: this.storage.subtitles_font_opacity
+ },
+ userSettings = Object.keys(ourSettings).filter(e => ourSettings[e]),
+ player = this.elements.player;
+
+ if (userSettings.length && player && this.subtitlesEnabled() && player.getSubtitlesUserSettings && player.updateSubtitlesUserSettings) {
+ let ytSettings = player.getSubtitlesUserSettings(),
+ setting;
+
+ for (const value of userSettings) {
+ setting = null;
+ switch(value) {
+ case 'fontFamily':
+ case 'fontSizeIncrement':
+ case 'charEdgeStyle':
+ setting = Number(ourSettings[value]);
  break;
 
  case 'color':
- settings[value[0]] = value[2];
+ case 'background':
+ case 'windowColor':
+ setting = ourSettings[value];
  break;
 
- case 'fraction':
- settings[value[0]] = Number(option) / 100;
+ case 'backgroundOpacity':
+ case 'windowOpacity':
+ case 'textOpacity':
+ setting = Number(ourSettings[value]) / 100;
  break;
  }
+
+ if (ytSettings?.hasOwnProperty(value) && setting) {
+ ytSettings[value] = setting;
+ } else {
+ console.error('subtitlesUserSettings failed at: ',value, setting);
+ }
  }
- player.updateSubtitlesUserSettings(settings);
+ player.updateSubtitlesUserSettings(ytSettings);
  }
 };
 /*------------------------------------------------------------------------------
 SUBTITLES DISABLE SUBTILES FOR LYRICS
 ------------------------------------------------------------------------------*/
 ImprovedTube.subtitlesDisableLyrics = function () {
  if (this.storage.subtitles_disable_lyrics) {
- var player = this.elements.player,
- button = this.elements.player_subtitles_button;
+ const player = this.elements.player;
 
- if (player && player.toggleSubtitles && button && !button.title.includes('unavailable')) {
+ if (player && this.subtitlesEnabled() && player.isSubtitlesOn && player.isSubtitlesOn() && player.toggleSubtitles) {
  // Music detection only uses 3 identifiers for Lyrics: lyrics, sing-along, karaoke.
  // Easier to simply use those here. Can replace with music detection later.
  const terms = ["sing along", "sing-along", "karaoke", "lyric", "卡拉OK", "卡拉OK", "الكاريوكي", "караоке", "カラオケ","노래방"];
- if (terms.some(term => ImprovedTube.videoTitle().toLowerCase().includes(term))) { 
+ if (terms.some(term => this.videoTitle().toLowerCase().includes(term))) { 
  player.toggleSubtitles();
  } 
  }