Merge pull request #21 from amarcu5/develop

v0.2.2

src/scripts/fix.js

@@ -4,12 +4,10 @@
   let activeVideo = null;
   let timeoutId = 0;
 
-  const timeoutMessageName = 'PiPer_message';
-  const timeouts = [];
-
   const requests = [];
   const callbacks = [];
-
+  const timeouts = [];
+
   const originalRequestAnimationFrame = window.requestAnimationFrame;
   const originalSetTimeout = window.setTimeout;
 
@@ -43,31 +41,27 @@
   clearAnimationFrameRequests();
 
   /**
-   * Calls tracked animation frame requests
+   * Calls tracked animation frame requests and timeouts
    */
-  const callAnimationFrameRequests = function() {
+  const callAnimationFrameRequestsAndTimeouts = function() {
     const callbacksCopy = callbacks.slice();
     callbacks.length = 0;
 
     const timestamp = window.performance.now();
     for (let callback; callback = callbacksCopy.pop();) {
        callback(timestamp);
     };
-  };
-
-  /**
-   * Receives and calls timeouts from the message queue
-   */
-  const handleTimeoutMessages = function(event) {
-    if (event.data != timeoutMessageName) return;
-    event.stopPropagation();
 
-    if (timeouts.length) timeouts.shift()();
+    const timeoutsCopy = timeouts.slice();
+    timeouts.length = 0;
+
+    for (let timeout; timeout = timeoutsCopy.pop();) {
+       timeout();
+    };
   };
-  window.addEventListener('message', handleTimeoutMessages, true);
-
+
   /**
-   * Avoids background throttling by invoking small timeouts instantly using a message queue
+   * Avoids background throttling by invoking small timeouts with media 'timeupdate' events
    * @param {Function|string} callback
    * @param {number=} timeout
    * @return {number}
@@ -76,7 +70,6 @@
     if (timeout >= 500) return originalSetTimeout(callback, timeout);
 
     timeouts.push(callback);
-    window.postMessage(timeoutMessageName, location.href);
 
     return timeoutId++;
   };
@@ -102,7 +95,7 @@
       }
 
       window.setTimeout = unthrottledSetTimeout;
-      activeVideo.addEventListener('timeupdate', callAnimationFrameRequests);
+      activeVideo.addEventListener('timeupdate', callAnimationFrameRequestsAndTimeouts);
 
     } else if (activeVideo) {
 
@@ -112,8 +105,12 @@
       }
 
       window.setTimeout = originalSetTimeout;
-      activeVideo.removeEventListener('timeupdate', callAnimationFrameRequests);
+      activeVideo.removeEventListener('timeupdate', callAnimationFrameRequestsAndTimeouts);
 
+      for (let timeout; timeout = timeouts.pop();) {
+        timeout();
+      };
+
       activeVideo = null;
     }
   };

src/scripts/main.js

@@ -124,15 +124,32 @@ const prepareCaptions = function(video) {
   video.addEventListener('webkitendfullscreen', toggleCaptions);
 };
 
+/**
+ * Removes visible Picture in Picture mode captions
+ * @param {HTMLVideoElement} video - video element showing captions
+ */
+const removeCaptions = function(video) {
+  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, ''));
+}
+
 /**
  * Updates visible captions
  */
 const processCaptions = function() {
-  const captionElement = currentResource.captionElement();
 
-  // Hide Picture in Picture mode captions and show native captions if no longer showing captions or encountered an error
+  // Get handles to caption and video elements
+  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
   if (!showingCaptions || !captionElement) {
-    track.mode = 'disabled';
     if (captionElement) captionElement.style.visibility = '';
     return;
   }
@@ -144,24 +161,17 @@ const processCaptions = function() {
   const unprocessedCaption = captionElement.textContent;
   if (unprocessedCaption == lastUnprocessedCaption) return;
   lastUnprocessedCaption = unprocessedCaption;
-
-  // Get handle to video (called before accessing 'track' to guarentee valid) 
-  const video = /** @type {?HTMLVideoElement} */ (currentResource.videoElement());
-
-  // Remove old captions
-  track.mode = 'showing';
-  while (track.activeCues.length) track.removeCue(track.activeCues[0]);
-
-  // Line commented out to workaround Safari bug; 'removeCue' doesn't immediately remove captions shown in Picture in Picture mode
-  //if (!unprocessedCaption) return;
+
+  // Performance optimisation - early exit if caption has no content
+  if (!unprocessedCaption) return;
 
   // Show correctly spaced and formatted Picture in Picture mode caption
   let caption = '';
   const walk = document.createTreeWalker(captionElement, NodeFilter.SHOW_TEXT, null, false);
   while (walk.nextNode()) {
     const segment = walk.currentNode.nodeValue.trim();
     if (segment) {
-      const style = window.getComputedStyle(/** @type {Element} */ (walk.currentNode.parentNode));
+      const style = window.getComputedStyle(walk.currentNode.parentElement);
       if (style.fontStyle == 'italic') {
         caption += '<i>' + segment + '</i>';
       } else if (style.textDecoration == 'underline') {
@@ -288,6 +298,18 @@ const resources = {
 
   'curiositystream': {
     buttonClassName: 'vjs-control vjs-button',
+    buttonDidAppear: function() {
+      const video = /** @type {?HTMLVideoElement} */ (currentResource.videoElement());
+      const videoContainer = video.parentElement;
+      video.addEventListener('webkitbeginfullscreen', function(){
+        videoContainer.style.setProperty('height', Math.floor(100 * video.videoHeight / video.videoWidth) + 'vw', 'important');
+        videoContainer.style.setProperty('max-height', video.videoHeight + 'px');
+      });
+      video.addEventListener('webkitendfullscreen', function(){
+        videoContainer.style.removeProperty('height');
+        videoContainer.style.removeProperty('max-height');
+      });
+    },
     buttonHoverStyle: 'opacity:1!important',
     buttonInsertBefore: function(/** Element */ parent) {
       return parent.lastChild;
@@ -414,7 +436,7 @@ const resources = {
     },
     captionElement: function() {
       const e = currentResource.videoElement();
-      return /** @type {?Element} */ (e && e.parentNode.querySelector('.player-timedtext'));
+      return e && e.parentElement.querySelector('.player-timedtext');
     },
     videoElement: function() {
       const e = document.querySelector('.player-video-wrapper');
@@ -529,7 +551,7 @@ const resources = {
     buttonStyle: 'order:7',
     captionElement: function() {
       const e = currentResource.videoElement();
-      return /** @type {?Element} */ (e && e.parentNode.querySelector('.vjs-text-track-display'));
+      return e && e.parentElement.querySelector('.vjs-text-track-display');
     },
     videoElement: function() {
       return document.querySelector('video.vjs-tech');
@@ -628,6 +650,16 @@ const resources = {
         neighbourButton.title = neighbourTitle;
       });
       bypassBackgroundTimerThrottling();
+
+      // 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(){
+        showingCaptions = false;
+        removeCaptions(video);
+      });
+      document.addEventListener('spfdone', function(){
+        showingCaptions = video.webkitPresentationMode == 'picture-in-picture';
+      });
     },
     buttonInsertBefore: function(/** Element */ parent) {
       return parent.lastChild;

update.plist

@@ -8,9 +8,9 @@
 			<key>CFBundleIdentifier</key>
 			<string>com.amarcus.safari.piper</string>
 			<key>CFBundleShortVersionString</key>
-			<string>0.2.1</string>
+			<string>0.2.2</string>
 			<key>CFBundleVersion</key>
-			<string>58</string>
+			<string>63</string>
 			<key>Developer Identifier</key>
 			<string>BQ6Q24MF9X</string>
 			<key>URL</key>