Merge pull request #84 from amarcu5/develop-1.0.x

v1.0.3

Author: amarcu5

README.md

@@ -52,7 +52,9 @@ Install from the [Chrome Web Store](https://chrome.google.com/webstore/detail/pi
 ## Supported sites
 * [9Now](http://www.9now.com.au)
 * [Amazon Video](http://www.amazon.com/PrimeVideo)
+* [Česká televize](http://www.ceskatelevize.cz)
 * [CollegeHumor](http://www.collegehumor.com)
+* [Crunchyroll](http://www.crunchyroll.com)
 * [CuriosityStream](http://www.curiositystream.com)
 * [Eurosport player](http://www.eurosportplayer.com)
 * [FuboTV](http://www.fubo.tv)
@@ -82,6 +84,7 @@ Install from the [Chrome Web Store](https://chrome.google.com/webstore/detail/pi
 * [Video Aktálně](http://video.aktualne.cz)
 * [Vier](http://www.vier.be)
 * [Vijf](http://www.vijf.be)
+* [VK](http://www.vk.com)
 * [VRV](http://www.vrv.co)
 * [VRT NU](http://www.vrt.be/vrtnu/)
 * [Yelo Play](http://www.yeloplay.be)

out/PiPer-chrome.zip

@@ -41,7 +41,7 @@ export const enableCaptions = function(ignoreNowPlayingCheck) {
   const video = /** @type {?HTMLVideoElement} */ (getResource().videoElement(true));
   if (!video) return;
   showingCaptions = videoPlayingPictureInPicture(video);
-  prepareCaptions(video);
+  track = getCaptionTrack(video);
   processCaptions();
 };
 
@@ -55,27 +55,35 @@ export const shouldProcessCaptions = function() {
 };
 
 /**
- * Prepares video for captions
+ * Gets caption track for video (creates or returns existing track as needed)
  *
  * @param {HTMLVideoElement} video - video element that will display captions
+ * @return {TextTrack}
  */
-const prepareCaptions = function(video) {
+const getCaptionTrack = function(video) {
 
   // Find existing caption track
-  track = null;
   const allTracks = video.textTracks;
   for (let trackId = allTracks.length; trackId--;) {
     if (allTracks[trackId].label === TRACK_ID) {
-      track = allTracks[trackId];
       info('Existing caption track found');
-      break;
+      return allTracks[trackId];
     }
   }
-  if (track) return;
 
   // Otherwise create new caption track
   info('Caption track created');
-  track = video.addTextTrack('captions', TRACK_ID, 'en');
+  return video.addTextTrack('captions', TRACK_ID, 'en');
+};
+
+/**
+ * Adds caption tracks to all video elements
+ */
+export const addVideoCaptionTracks = function() {
+  const elements = document.getElementsByTagName('video');
+  for (let index = 0, element; element = elements[index]; index++) {
+    getCaptionTrack(/** @type {?HTMLVideoElement} */ (element));
+  }
 };
 
 /**
@@ -88,7 +96,10 @@ const pictureInPictureEventListener = function(video, isPlayingPictureInPicture)
 
   // Toggle display of the captions and prepare video if needed
   showingCaptions = isPlayingPictureInPicture;
-  if (showingCaptions) prepareCaptions(video);
+  if (showingCaptions) {
+    track = getCaptionTrack(video);
+    track.mode = 'showing';
+  }
   lastUnprocessedCaption = '';
   processCaptions();
 

out/PiPer-safari-legacy.safariextz

@@ -1,4 +1,5 @@
 import { info } from './logger.js'
+import { videoPlayingPictureInPicture } from './video.js'
 
 let activeVideo = null;
 let timeoutId = 0;
@@ -107,7 +108,7 @@ const bypassBackgroundTimerThrottling = function() {
     const allVideos = document.querySelectorAll('video');
     for (let videoId = allVideos.length; videoId--;) {
       const video = /** @type {?HTMLVideoElement} */ (allVideos[videoId]);
-      if (video.webkitPresentationMode == 'picture-in-picture') {
+      if (videoPlayingPictureInPicture(video)) {
         activeVideo = video;
         break;
       }

out/PiPer-safari.pkg

@@ -3,23 +3,26 @@ import { Browser, getBrowser, getResource, setResource } from './common.js'
 import { addVideoElementListeners } from './video.js'
 import { resources } from './resources/index.js';
 import { checkButton, addButton } from './button.js'
-import { shouldProcessCaptions, enableCaptions, processCaptions } from './captions.js'
+import { shouldProcessCaptions, enableCaptions, processCaptions, addVideoCaptionTracks } from './captions.js'
 import { initialiseCaches } from './cache.js'
 
 /**
  * Tracks injected button and captions
  */
 const mutationObserver = function() {
+  const currentResource = getResource();
 
   // Process video captions if needed
   if (shouldProcessCaptions()) processCaptions();
 
   // Workaround Chrome's lack of an entering Picture in Picture mode event by monitoring all video elements
   if (getBrowser() == Browser.CHROME) addVideoElementListeners();
 
+  // Workaround Safari bug; captions are not displayed if the track is added after the video has loaded
+  if (getBrowser() == Browser.SAFARI && currentResource.captionElement) addVideoCaptionTracks();
+
   // Try adding the button to the page if needed
   if (checkButton()) return;
-  const currentResource = getResource();
   const buttonParent = currentResource.buttonParent();
   if (buttonParent) {
     addButton(buttonParent);

src/common/scripts/captions.js

@@ -0,0 +1,24 @@
+export const domain = 'ceskatelevize';
+
+export const resource = {
+  buttonClassName: 'videoButtonShell dontHideControls cursorPointer focusableBtn',
+  buttonElementType: 'div',
+  buttonHoverStyle: /** CSS */ (`
+    filter: brightness(50%) sepia(1) hue-rotate(170deg) saturate(250%) brightness(90%);
+  `),
+  buttonInsertBefore: function(/** Element */ parent) {
+    return document.getElementById('fullScreenShell');
+  },
+  buttonScale: 1.2,
+  buttonStyle: /** CSS */ (`
+    width: 18px;
+    height: 18px;
+    display: inline-block;
+  `),
+  buttonParent: function() {
+    return document.getElementById('videoButtons');
+  },
+  videoElement: function() {
+    return document.getElementById('video');
+  },
+};

src/common/scripts/fix.js

@@ -0,0 +1,19 @@
+export const domain = 'crunchyroll';
+
+export const resource = {
+  buttonClassName: 'vjs-control vjs-button',
+  buttonHoverStyle: /** CSS */ (`opacity: 1 !important`),
+  buttonScale: 0.6,
+  buttonStyle: /** CSS */ (`
+    position: absolute;
+    right: 100px;
+    opacity: 0.75;
+    cursor: pointer;
+  `),
+  buttonParent: function() {
+    return document.querySelector('.vjs-control-bar');
+  },
+  videoElement: function() {
+    return document.getElementById('player_html5_api');
+  },
+};

src/common/scripts/main.js

@@ -0,0 +1,53 @@
+import { getButton } from './../button.js'
+
+export const domain = 'espn';
+
+export const resource = {
+  buttonClassName: 'media-icon',
+  buttonDidAppear: function() {
+    // Get localized button title and hide default tooltip
+    const button = getButton();
+    const /** string */ title = button.title;
+    button.title = '';
+
+    // Create stylized tooltip and add to DOM
+    const tooltip = /** @type {HTMLElement} */ (document.createElement('div'));
+    tooltip.className = 'control-tooltip';
+    tooltip.style.cssText = /** CSS */ (`
+      right: 0px;
+      bottom: 35px;
+      transition: bottom 0.2s ease-out;
+    `);
+    tooltip.textContent = title;
+    button.appendChild(tooltip);
+
+    // Display stylized tooltip on mouseover
+    button.addEventListener('mouseover', function() {
+      button.classList.add('displaying');
+      tooltip.style.bottom = '75px';
+    });
+    button.addEventListener('mouseout', function() {
+      button.classList.remove('displaying');
+      tooltip.style.bottom = '35px';
+    });
+  },
+  buttonElementType: 'div',
+  buttonInsertBefore: function(/** Element */ parent) {
+    return parent.lastChild;
+  },
+  buttonParent: function() {
+    return document.querySelector('.controls-right-horizontal');
+  },
+  buttonScale: 0.7,
+  buttonStyle: /** CSS */ (`
+    width: 44px;
+    height: 44px;
+    order: 4;
+  `),
+  captionElement: function() {
+    return document.querySelector('.text-track-display');
+  },
+  videoElement: function() {
+    return document.querySelector('video.js-video-content');
+  },
+};