Merge pull request #66 from amarcu5/develop-1.0.0

v1.0.1

Author: amarcu5

README.md

@@ -64,6 +64,7 @@ Install from the [Chrome Web Store](https://chrome.google.com/webstore/detail/pi
 * [Netflix](http://www.netflix.com)
 * [OCS](http://www.ocs.fr)
 * [Openload](http://www.openload.co)
+* [PBS](http://www.pbs.org)
 * [Periscope](http://www.periscope.tv)
 * [Plex](http://www.plex.tv)
 * [Seznam Zprávy](http://www.seznam.cz/zpravy)
@@ -111,10 +112,7 @@ The following build tools are used to build the extension:
 
 These can be installed by executing the following command:
 ```Shell
-npm install -g csso-cli
-npm install -g svgo
-npm install -g xar-js
-npm install -g google-closure-compiler
+npm install -g csso-cli svgo xar-js google-closure-compiler
 ```
 
 #### Steps
@@ -182,4 +180,4 @@ export const resource = {
 For more examples, please see the [source](https://github.com/amarcu5/PiPer/tree/master/src/)
 
 ## Acknowledgements
-* [Pied PíPer](https://github.com/JoeKuhns/PiedPiPer.safariextension) for the original inspiration and the Netflix icon
+* [Pied PíPer](https://github.com/JoeKuhns/PiedPiPer.safariextension) for the original inspiration

make.sh

@@ -4,7 +4,7 @@
 
 EXTENSION_NAME="PiPer"
 
-SOURCE_FILES=("main.js" "fix.js" "background.js" "install.js" "localization-bridge.js")
+SOURCE_FILES=("main.js" "fix.js" "background.js" "install.js" "localization-bridge.js" "legacy.js")
 
 # Certifcate paths
 LEAF_CERT_PATH="../certs/cert.pem"
@@ -226,24 +226,6 @@ if [[ "${compress_svg}" -eq 1 ]]; then
   ${SVGO_PATH} -q -f "out/${EXTENSION_NAME}/images"
 fi
 
-# Compress all inline CSS with CSSO
-if [[ "${compress_css}" -eq 1 ]]; then
-  function minify_css() { 
-    echo "$@" | sed -e 's/\\"/"/g' -e 's/\\\$/$/g' | ${CSSO_PATH} --declaration-list
-  }
-  export -f minify_css
-  export CSSO_PATH
-  for path in "out/${EXTENSION_NAME}/scripts"/{*,**/*}.js; do
-    [[ ! -f "${path}" ]] && continue
-    source=$(cat "${path}")
-    echo "echo \"$(sed -e 's/\\/\\\\/g' -e 's/\$/\\$/g' -e 's/`/\\`/g' -e 's/\"/\\\"/g' -e 's/\\n/\\\\n/g' <<< "$source" \
-      | tr '\n' '\f' \
-      | sed -E 's/\/\*\*[[:space:]]+CSS[[:space:]]+\*\/[[:space:]]*\([[:space:]]*\\`([^`]*)\\`[[:space:]]*\)/\\`\$(minify_css '\''\1'\'')\\`/g' \
-      | tr '\f' '\n')\"" \
-      | sh > "${path}"
-  done
-fi
-
 # Get current version from git if automatic versioning enabled
 if [[ "${update_version}" -eq 1 ]]; then
 
@@ -344,6 +326,23 @@ for target in "${targets[@]}"; do
   # Copy target specific items to target output folder
   cp -r "src/${target}"/* "out/${EXTENSION_NAME}-${target}${target_extension}/" 2>/dev/null
 
+  # Compress all inline CSS with CSSO
+  if [[ "${compress_css}" -eq 1 ]]; then
+    function minify_css() { 
+      echo "$@" | sed -e 's/\\"/"/g' -e 's/\\\$/$/g' | ${CSSO_PATH} --declaration-list
+    }
+    export -f minify_css
+    export CSSO_PATH
+    for path in "out/${EXTENSION_NAME}-${target}${target_extension}${common_file_path}/scripts"/{*,**/*}.js; do
+      [[ ! -f "${path}" ]] && continue
+      source=$(cat "${path}")
+      echo "echo \"$(sed -e 's/\\/\\\\/g' -e 's/\$/\\$/g' -e 's/`/\\`/g' -e 's/\"/\\\"/g' -e 's/\\n/\\\\n/g' <<< "$source" \
+        | tr '\n' '\f' \
+        | sed -E 's/\/\*\*[[:space:]]+CSS[[:space:]]+\*\/[[:space:]]*\([[:space:]]*\\`([^`]*)\\`[[:space:]]*\)/\\`\$(minify_css '\''\1'\'')\\`/g' \
+        | tr '\f' '\n')\"" \
+        | sh > "${path}"
+    done
+  fi
 
   # Use closure compiler to compress javascript
   function remove_element() {

out/PiPer-chrome.zip

@@ -76,7 +76,6 @@ const prepareCaptions = function(video) {
   // Otherwise create new caption track
   info('Caption track created');
   track = video.addTextTrack('captions', TRACK_ID, 'en');
-  track.mode = 'showing';
 };
 
 /**
@@ -124,6 +123,7 @@ const removeCaptions = function(video, workaround = true) {
 const addCaption = function(video, caption) {
 
   info(`Showing caption '${caption}'`);
+  track.mode = 'showing';
   track.addCue(new VTTCue(video.currentTime, video.currentTime + 60, caption));
 
   if (getBrowser() == Browser.SAFARI) {

out/PiPer-safari-legacy.safariextz

@@ -24,16 +24,7 @@ HTMLVideoElement.prototype.webkitSetPresentationMode = function(mode) {};
 /** @type {string} */
 TextTrack.prototype.label;
 
-/** @return {undefined} */
-safari.extension.dispatchMessage = function(message, userInfo) {};
-
-/** @const */
-safari.self = {};
-
-/** @return {undefined} */
-safari.self.addEventListener = function(type, listener) {};
-
-/** @constructor */
+/** @interface */
 const SafariExtensionMessageEvent = function() {};
 
 /** @type {*} */
@@ -42,6 +33,24 @@ SafariExtensionMessageEvent.prototype.message;
 /** @type {string} */
 SafariExtensionMessageEvent.prototype.name;
 
+/** @type {EventTarget} */
+SafariExtensionMessageEvent.prototype.target;
+
+/** @interface */
+const SafariEventTarget = function() {};
+
+/** @return {function(string,function(SafariExtensionMessageEvent),boolean=):undefined} */
+SafariEventTarget.prototype.addEventListener = function(type, listener, capture) {};
+
+/** @return {function(string,function(SafariExtensionMessageEvent),boolean=):undefined} */
+SafariEventTarget.prototype.removeEventListener = function(type, listener, capture) {};
+
+/** @type {!SafariEventTarget} */
+safari.self;
+
+/** @type {function(string,*=):undefined} */
+safari.extension.dispatchMessage = function(message, userInfo) {};
+
 
 /* Legacy Safari Extension */
 
@@ -51,6 +60,27 @@ safari.extension.settings = {};
 /** @return {undefined} */
 safari.extension.settings.clear = function() {};
 
+/** @type {!SafariEventTarget} */
+safari.application;
+
+/** @const */
+safari.self.tab = {};
+
+/** @type {function(string,*=):undefined} */
+safari.self.tab.dispatchMessage = function(message, userInfo) {};
+
+/** @interface */
+const SafariBrowserTab = function() {};
+
+/** @type {SafariWebPageProxy} */
+SafariBrowserTab.prototype.page;
+
+/** @interface */
+const SafariWebPageProxy = function() {};
+
+/** @type {function(string,*=):undefined} */
+SafariWebPageProxy.prototype.dispatchMessage = function(message, userInfo) {};
+
 
 /* Chrome Extension */
 

out/PiPer-safari.pkg

@@ -1,31 +1,51 @@
-import { getResource } from './../common.js'
+import { getButton } from './../button.js'
 
 export const domain = 'hulu';
 
 export const resource = {
-  buttonClassName: 'simple-button',
   buttonDidAppear: function() {
-    const buttonParent = getResource().buttonParent();
-    buttonParent.querySelector('.progress-bar-tracker').style.width = 'calc(100% - 380px)';
-    buttonParent.querySelector('.progress-time-container').style.marginRight = '45px';
+    
+    // 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 = 'button-tool-tips';
+    tooltip.style.cssText = /** CSS */ (`
+      white-space: nowrap;
+      padding: 0 5px;
+      right: 0;
+    `);
+    tooltip.textContent = title.toUpperCase();
+    button.appendChild(tooltip);
+    
+    // Display stylized tooltip on mouseover
+    button.addEventListener('mouseover', function() {
+      tooltip.style.display = 'block';
+    });
+    button.addEventListener('mouseout', function() {
+      tooltip.style.display = 'none';
+    });
   },
   buttonElementType: 'div',
-  buttonHoverStyle: /** CSS */ (`
-    filter: brightness(50%) sepia(1) hue-rotate(58deg) saturate(160%) brightness(110%) !important;
-  `),
+  buttonHoverStyle: /** CSS */ (`opacity: 1.0 !important`),
+  buttonInsertBefore: function(/** Element */ parent) {
+    return document.querySelector('.controls__view-mode-button');
+  },
   buttonParent: function() {
-    return document.querySelector('#site-player .main-bar');
+    return document.querySelector('#dash-player-container .controls__menus-right');
   },
-  buttonScale: 0.7,
   buttonStyle: /** CSS */ (`
-    top: -45px;
-    left: -50px;
-    filter: brightness(80%);
+    opacity: 0.7;
+    cursor: pointer;
+    width: 24px;
   `),
   captionElement: function() {
-    return document.querySelector('.closed-caption-container');
+    return document.querySelector('.closed-caption-outband');
   },
   videoElement: function() {
-    return document.getElementById('content-video-player');
+    return document.querySelector('.video-player');
   },
 };

src/common/scripts/captions.js

@@ -0,0 +1,28 @@
+import { getResource } from './../common.js'
+import { videoPlayingPictureInPicture, togglePictureInPicture } from './../video.js'
+
+export const domain = 'pbs';
+
+export const resource = {
+  buttonClassName: 'jw-icon jw-icon-inline jw-button-color jw-reset',
+  buttonDidAppear: function() {
+    const fullscreenButton = document.querySelector('.jw-icon-fullscreen');
+    fullscreenButton.addEventListener('click', function() {
+      const video = /** @type {?HTMLVideoElement} */ (getResource().videoElement());
+      if (videoPlayingPictureInPicture(video)) togglePictureInPicture(video);
+    });
+  },
+  buttonElementType: 'div',
+  buttonHoverStyle: /** CSS */ (`opacity: 1 !important`),
+  buttonInsertBefore: function(/** Element */ parent) {
+    return parent.lastChild;
+  },
+  buttonParent: function() {
+    return document.querySelector('.jw-button-container');
+  },
+  buttonScale: 0.6,
+  buttonStyle: /** CSS */ (`opacity: 0.8`),
+  videoElement: function() {
+    return document.querySelector('.jw-video');
+  },
+};

src/common/scripts/externs.js

@@ -14,14 +14,16 @@ export const resource = {
     const e = document.querySelector('div[class^="FullPlayerTopControls-topControls"]');
     return /** @type {?Element} */ (e && e.lastChild);
   },
-  buttonScale: 0.6,
+  buttonScale: 2,
   buttonStyle: /** CSS */ (`
     position: relative;
     top: -3px;
+    width: 30px;
     padding: 10px;
     border: 0px;
     background: transparent;
     opacity: 0.7;
+    outline: 0;
     text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.45);
   `),
   captionElement: function() {

src/common/scripts/resources/hulu.js

@@ -16,13 +16,19 @@
 	<string>0.0</string>
 	<key>CFBundleVersion</key>
 	<string>0</string>
+	<key>Chrome</key>
+	<dict>
+		<key>Global Page</key>
+		<string>global.html</string>
+	</dict>
 	<key>Content</key>
 	<dict>
 		<key>Scripts</key>
 		<dict>
 			<key>End</key>
 			<array>
 				<string>scripts/main.js</string>
+				<string>scripts/legacy.js</string>
 			</array>
 		</dict>
 	</dict>

src/common/scripts/resources/pbs.js

@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>PiPer</title>
+  <script src="scripts/background.js"></script>
+</head>
+<body>
+</body>
+</html>

src/common/scripts/resources/plex.js

@@ -0,0 +1,13 @@
+const messageHandler = function(/** SafariExtensionMessageEvent */ messageEvent) {
+  switch (messageEvent.name) {
+    case 'getUpgradeAlertShown':
+      const setting = /** @type {string|undefined} */ (safari.extension.settings['upgradeAlertShown']);
+      const target = /** @type {SafariBrowserTab} */ (messageEvent.target);
+      target.page.dispatchMessage('upgradeAlertShownResponse', parseInt(setting || '0', 10));
+      break;
+    case 'setUpgradeAlertShown':
+      safari.extension.settings['upgradeAlertShown'] = messageEvent.message;
+      break;
+  }
+}
+safari.application.addEventListener('message', messageHandler, false);