Merge pull request #22 from amarcu5/develop-hotfix

v0.2.2+hotfix.1

src/scripts/main.js

@@ -127,13 +127,14 @@ const prepareCaptions = function(video) {
 /**
  * Removes visible Picture in Picture mode captions
  * @param {HTMLVideoElement} video - video element showing captions
+ * @param {boolean} workaround - apply Safari bug workaround
  */
-const removeCaptions = function(video) {
+const removeCaptions = function(video, workaround = true) {
   track.mode = 'showing';
   while (track.activeCues.length) track.removeCue(track.activeCues[0]);
 
   // Workaround Safari bug; 'removeCue' doesn't immediately remove captions shown in Picture in Picture mode
-  track.addCue(new VTTCue(video.currentTime, video.currentTime, ''));
+  if (workaround) track.addCue(new VTTCue(video.currentTime, video.currentTime + 60, ''));
 }
 
 /**
@@ -145,11 +146,9 @@ const processCaptions = function() {
   const captionElement = currentResource.captionElement();
   const video = /** @type {?HTMLVideoElement} */ (currentResource.videoElement());
 
-  // Remove old captions
-  removeCaptions(video);
-
-  // Show native captions if no longer showing captions or encountered an error
+  // Remove Picture in Picture mode captions and show native captions if no longer showing captions or encountered an error
   if (!showingCaptions || !captionElement) {
+    removeCaptions(video);
     if (captionElement) captionElement.style.visibility = '';
     return;
   }
@@ -162,6 +161,9 @@ const processCaptions = function() {
   if (unprocessedCaption == lastUnprocessedCaption) return;
   lastUnprocessedCaption = unprocessedCaption;
 
+  // Remove old captions and apply Safari bug fix if caption has no content as otherwise causes flicker
+  removeCaptions(video, !unprocessedCaption);
+
   // Performance optimisation - early exit if caption has no content
   if (!unprocessedCaption) return;
 
@@ -653,29 +655,26 @@ const resources = {
 
       // Workaround Safari bug; old captions persist in Picture in Picture mode when MediaSource buffers change
       const video = /** @type {?HTMLVideoElement} */ (currentResource.videoElement());
-      document.addEventListener('spfrequest', function(){
+      window.addEventListener('yt-navigate-start', function() {
         showingCaptions = false;
         removeCaptions(video);
       });
-      document.addEventListener('spfdone', function(){
+      window.addEventListener('yt-navigate-finish', function() {
         showingCaptions = video.webkitPresentationMode == 'picture-in-picture';
       });
     },
     buttonInsertBefore: function(/** Element */ parent) {
       return parent.lastChild;
     },
     buttonParent: function() {
-      const e = document.getElementById('movie_player') || document.getElementById('player');
-      return e && e.querySelector('.ytp-right-controls');
+      return document.querySelector('.ytp-right-controls');
     },
     buttonScale: 0.68,
     captionElement: function() {
-      const e = document.getElementById('movie_player') || document.getElementById('player');
-      return e && e.querySelector('.captions-text');      
+      return document.querySelector('.caption-window');      
     },
     videoElement: function() {
-      const e = document.getElementById('movie_player') || document.getElementById('player');
-      return e && e.querySelector('video.html5-main-video');
+      return document.querySelector('video.html5-main-video');
     },
   },
 };

update.plist

@@ -10,7 +10,7 @@
 			<key>CFBundleShortVersionString</key>
 			<string>0.2.2</string>
 			<key>CFBundleVersion</key>
-			<string>63</string>
+			<string>73</string>
 			<key>Developer Identifier</key>
 			<string>BQ6Q24MF9X</string>
 			<key>URL</key>