✨ Minimum mute for YouTube auto subs

src/script/lib/config.ts

@@ -29,6 +29,7 @@ export default class Config {
   words: {
     [key: string]: WordOptions;
   };
+  youTubeAutoSubsMin: number;
 
   // TODO: Finish removing magic numbers?
   static readonly filterMethods = {
@@ -66,7 +67,8 @@ export default class Config {
     showSubtitles: 0,
     showSummary: true,
     showUpdateNotification: true,
-    substitutionMark: false
+    substitutionMark: false,
+    youTubeAutoSubsMin: 0
   };
 
   static readonly _defaultWords = {

src/script/optionPage.ts

@@ -333,10 +333,12 @@ export default class OptionPage {
     let selectedMuteMethod = document.querySelector(`input[name=audioMuteMethod][value='${this.cfg.muteMethod}']`) as HTMLInputElement;
     let selectedshowSubtitle = document.querySelector(`input[name=audioShowSubtitles][value='${this.cfg.showSubtitles}']`) as HTMLInputElement;
     let muteAudioOptionsContainer = document.getElementById('muteAudioOptionsContainer') as HTMLElement;
+    let audioYouTubeAutoSubsMin = document.getElementById('audioYouTubeAutoSubsMin') as HTMLInputElement;
     muteAudioInput.checked = this.cfg.muteAudio;
     this.cfg.muteAudio ? OptionPage.show(muteAudioOptionsContainer) : OptionPage.hide(muteAudioOptionsContainer);
     selectedMuteMethod.checked = true;
     selectedshowSubtitle.checked = true;
+    audioYouTubeAutoSubsMin.value = this.cfg.youTubeAutoSubsMin.toString();
   }
 
   populateConfig() {
@@ -527,8 +529,9 @@ export default class OptionPage {
     let substitutionMark = document.getElementById('substitutionMark') as HTMLInputElement;
     let defaultWordSubstitution = document.getElementById('defaultWordSubstitutionText') as HTMLInputElement;
     let muteAudioInput = document.getElementById('muteAudio') as HTMLInputElement;
-    let showSubtitlesInput = document.querySelector('input[name="audioShowSubtitles"]:checked') as HTMLInputElement;
     let muteMethodInput = document.querySelector('input[name="audioMuteMethod"]:checked') as HTMLInputElement;
+    let showSubtitlesInput = document.querySelector('input[name="audioShowSubtitles"]:checked') as HTMLInputElement;
+    let audioYouTubeAutoSubsMin = document.getElementById('audioYouTubeAutoSubsMin') as HTMLInputElement;
     self.cfg.censorCharacter = censorCharacterSelect.value;
     self.cfg.censorFixedLength = censorFixedLengthSelect.selectedIndex;
     self.cfg.defaultWordMatchMethod = defaultWordMatchMethodSelect.selectedIndex;
@@ -546,6 +549,7 @@ export default class OptionPage {
     self.cfg.muteAudio = muteAudioInput.checked;
     self.cfg.muteMethod = parseInt(muteMethodInput.value);
     self.cfg.showSubtitles = parseInt(showSubtitlesInput.value);
+    self.cfg.youTubeAutoSubsMin = parseFloat(audioYouTubeAutoSubsMin.value);
 
     // Save settings
     let error = await self.cfg.save();
@@ -708,6 +712,16 @@ export default class OptionPage {
       }
     }
   }
+
+  async updateYouTubeAutoMin(target) {
+    OptionPage.hideInputError(target);
+    if (target.checkValidity()) {
+      this.cfg.youTubeAutoSubsMin = parseFloat(target.value);
+      await option.saveProp('youTubeAutoSubsMin');
+    } else {
+      OptionPage.showInputError(target, 'Please enter a valid number of seconds.');
+    }
+  }
 }
 
 let filter = new Filter;
@@ -763,6 +777,7 @@ document.getElementById('disabledDomainRemove').addEventListener('click', e => {
 document.getElementById('muteAudio').addEventListener('click', e => { option.saveOptions(e); });
 document.querySelectorAll('#audioMuteMethod input').forEach(el => { el.addEventListener('click', e => { option.saveOptions(e); }); });
 document.querySelectorAll('#audioSubtitleSelection input').forEach(el => { el.addEventListener('click', e => { option.saveOptions(e); }); });
+document.getElementById('audioYouTubeAutoSubsMin').addEventListener('input', e => { option.updateYouTubeAutoMin(e.target); });
 // Bookmarklet
 document.getElementById('bookmarkletFile').addEventListener('click', e => { option.exportBookmarkletFile(); });
 document.getElementById('bookmarkletHostedURL').addEventListener('input', e => { option.createBookmarklet(); });

src/script/webAudio.ts

@@ -32,17 +32,21 @@ export default class WebAudio {
   }
 
   static cleanYouTubeAutoSubs(filter, node): void {
-    let filtered = false;
     let result = filter.replaceTextResult(node.textContent);
+    let currentTime = document.getElementsByTagName('video')[0].currentTime;
     if (result.modified) {
-      filtered = true;
       node.textContent = result.filtered;
       WebAudio.mute(filter);
+      filter.mutedAt = currentTime;
+      filter.updateCounterBadge();
     } else {
-      WebAudio.unmute(filter);
+      if (filter.muted) {
+        if (currentTime < filter.mutedAt) { filter.mutedAt = 0; } // Reset mutedAt if video reversed
+        if (currentTime > (filter.mutedAt + filter.cfg.youTubeAutoSubsMin)) {
+          WebAudio.unmute(filter);
+        }
+      }
     }
-
-    if (filtered) { filter.updateCounterBadge(); } // Update if modified
   }
 
   static mute(filter): void {
@@ -94,26 +98,24 @@ export default class WebAudio {
   }
 
   static unmute(filter): void {
-    if (filter.muted) {
-      filter.muted = false;
-
-      switch(filter.cfg.muteMethod) {
-        case 0: // Mute tab
-          chrome.runtime.sendMessage({ mute: false });
-          break;
-        case 1: { // Mute video
-          let video = document.getElementsByTagName('video')[0];
-          if (video && video.volume != null) {
-            video.volume = filter.volume;
-          }
-          break;
+    filter.muted = false;
+
+    switch(filter.cfg.muteMethod) {
+      case 0: // Mute tab
+        chrome.runtime.sendMessage({ mute: false });
+        break;
+      case 1: { // Mute video
+        let video = document.getElementsByTagName('video')[0];
+        if (video && video.volume != null) {
+          video.volume = filter.volume;
         }
+        break;
       }
     }
   }
 
   static youTubeAutoSubsCurrentRow(node): boolean {
-    return !!(node.parentElement.parentElement == node.parentElement.parentElement.parentElement.lastChild) // Bottom row (or only row)
+    return !!(node.parentElement.parentElement == node.parentElement.parentElement.parentElement.lastChild);
   }
 
   static youTubeAutoSubsNodeIsSubtitleText(node): boolean {

src/script/webFilter.ts

@@ -20,6 +20,7 @@ export default class WebFilter extends Filter {
   mutePage: boolean;
   lastSubtitle: string;
   muted: boolean;
+  mutedAt: number;
   subtitleSelector: string;
   summary: object;
   volume: number;
@@ -28,6 +29,7 @@ export default class WebFilter extends Filter {
     super();
     this.advanced = false;
     this.muted = false;
+    this.mutedAt = 0;
     this.summary = {};
     this.volume = 1;
   }
@@ -78,7 +80,7 @@ export default class WebFilter extends Filter {
     });
 
     mutation.removedNodes.forEach(node => {
-      if (filter.mutePage && WebAudio.supportedNode(filter.hostname, node)) {
+      if (filter.mutePage && filter.muted && WebAudio.supportedNode(filter.hostname, node)) {
         WebAudio.unmute(filter);
       }
     });

src/static/optionPage.css

@@ -10,6 +10,8 @@ h4.sectionHeader
 {padding-bottom:16px}
 #menu > a:hover
 {color:#fff!important;background-color:#2980b9!important}
+#audioYouTubeAutoSubsMin
+{width:80px;text-align:right;}
 .disabled
 {cursor:not-allowed!important;}
 .notes

src/static/optionPage.html

@@ -289,6 +289,14 @@ <h4 class="sectionHeader">Subtitles</h4>
         Hide all
       </label>
     </div>
+
+    <h4 class="sectionHeader">Other</h4>
+    <div id="audioOther">
+      <label>YouTube Minimum Muting
+        <input id="audioYouTubeAutoSubsMin" class="w3-input w3-border small" type="text" pattern="([0-9]*[.])?[0-9]+" style="display:inline;">
+        <span class="notes">For Auto-Generated Subtitles, expressed as seconds (0.5 = half a second)</span>
+      </label>
+    </div>
   </div>
 </div>