Refactor the code and bring back the initial naming

chehab · Oct 12, 2016 · c701cb4 · c701cb4
1 parent a0a0f36
commit c701cb4
Show file tree

Hide file tree

Showing 6 changed files with 82 additions and 77 deletions.
diff --git a/Info.plist b/Info.plist
@@ -3,22 +3,22 @@
 <plist version="1.0">
 <dict>
 	<key>Author</key>
-	<string>Joe Kuhns (Forked from Bogdan Matei)</string>
+	<string>Bogdan Matei, Joe Kuhns</string>
 	<key>Builder Version</key>
-	<string>12602.1.32.7</string>
+	<string>12602.1.50.0.10</string>
 	<key>CFBundleDisplayName</key>
 	<string>PiPTool</string>
 	<key>CFBundleIdentifier</key>
-	<string>com.meridianprinting.safari.PiedPiPr</string>
+	<string>com.bmatei.safari.piptool</string>
 	<key>CFBundleInfoDictionaryVersion</key>
 	<string>6.0</string>
 	<key>CFBundleShortVersionString</key>
-	<string>1.9</string>
+	<string>1.7</string>
 	<key>CFBundleVersion</key>
-	<string>1.9</string>
+	<string>1.7</string>
 	<key>Companion Bundle Identifier</key>
 	<array>
-		<string>com.meridianprinting.safari.PiedPiPr</string>
+		<string>com.bmatei.safari.piptool</string>
 	</array>
 	<key>Content</key>
 	<dict>
@@ -35,35 +35,35 @@
 		</array>
 	</dict>
 	<key>Description</key>
-	<string>Adds the Missing Picture-in-Picture functionality to Youtube, Netflix, Plex (Web), dailymotion</string>
+	<string>Adds the missing Picture-in-Picture functionality to Youtube, Netflix, Plex (Web), dailymotion</string>
 	<key>DeveloperIdentifier</key>
-	<string>3AY32522EW</string>
+	<string>EXZJ2ANP8U</string>
 	<key>ExtensionInfoDictionaryVersion</key>
 	<string>1.0</string>
 	<key>Permissions</key>
 	<dict>
-  		<key>Website Access</key>
-  		<dict>
- 			<key>Allowed Domains</key>
- 			<array>
- 				<string>*.youtube.com</string>
- 				<string>youtube.com</string>
- 				<string>youtu.be</string>
- 				<string>*.youtu.be</string>
- 				<string>plex.tv</string>
- 				<string>*.plex.tv</string>
- 				<string>dailymotion.com</string>
- 				<string>*.dailymotion.com</string>
- 				<string>netflix.com</string>
- 				<string>*.netflix.com</string>
- 			</array>
-  			<key>Include Secure Pages</key>
-  			<true/>
-  			<key>Level</key>
+		<key>Website Access</key>
+		<dict>
+			<key>Allowed Domains</key>
+			<array>
+				<string>*.youtube.com</string>
+				<string>youtube.com</string>
+				<string>youtu.be</string>
+				<string>*.youtu.be</string>
+				<string>plex.tv</string>
+				<string>*.plex.tv</string>
+				<string>dailymotion.com</string>
+				<string>*.dailymotion.com</string>
+				<string>netflix.com</string>
+				<string>*.netflix.com</string>
+			</array>
+			<key>Include Secure Pages</key>
+			<true/>
+			<key>Level</key>
 			<string>Some</string>
-  		</dict>
+		</dict>
 	</dict>
 	<key>Update Manifest URL</key>
-	<string>https://joekuhns.github.io/PiedPiPer.safariextension/Updates.plist</string>
+	<string>https://bfmatei.github.io/extensions/Updates.plist</string>
 </dict>
 </plist>
diff --git a/README.md b/README.md
@@ -1,8 +1,16 @@
-# Pied PíPer
-Pied PíPer is a Safari 10 extension that will add a PiP button for Netflix, DailyMotion, Youtube, and the Plex web interface.
+# PiP Tool
+PiP Tool is a Safari 10 extension built to add the Picture-in-Picture functionality to the video players that do not have it implemented.
+
+For example, YouTube or DailyMotion don't have the default HTML5 video player, so Safari cannot add the PiP button. This is where PiP Tool comes in place.
+
+## Supported Websites
+- YouTube
+- DailyMotion
+- Plex
+- Netflix
 
 ## Installation
-1. Download the extension https://joekuhns.github.io/PiedPiPer.safariextension/PiedP%C3%ADPer.safariextz.
+1. Download the extension from here: [https://bfmatei.github.io/extensions/PiPTool.safariextz](https://bfmatei.github.io/extensions/PiPTool.safariextz)
 2. Open the downloaded file
 3. Click trust
 4. Enjoy!
@@ -11,22 +19,11 @@ Pied PíPer is a Safari 10 extension that will add a PiP button for Netflix, Dai
 - Suggestions?
 
 ## Changelog
-### Version 1.90 (Joe's Fork)
-- Made Uppdating work.  Now any available updates will show up in the safari extension panel.
-- Also fixed it so the plugin only fires on appropriate domains (netflix, youtube, dailymotion, plex).
-
-### Version 1.85 (Joe's Fork)
-- changed the name
-- Improved Netflix support
-- more to come
-
-### Version 1.8 (Joe's Fork)
-- Added initial Netflix support
-- more to come
-
 ### Version 1.7
 - Added initial Plex support
+- Added Netflix support (many thanks to [https://github.com/JoeKuhns](Joe JoeKuhns) for his hard work)
 - Fixed issue with YouTube not working on embedded videos
+- Improved the performance by triggering the plugin only on the supported websites (thanks, again, to [https://github.com/JoeKuhns](Joe JoeKuhns))
 - more to come
 
 ### Version 1.6
@@ -52,3 +49,6 @@ Pied PíPer is a Safari 10 extension that will add a PiP button for Netflix, Dai
 
 ### Version 1.0
 - Initial release
+
+## Known Bugs
+- When leaving picture-in-picture mode the video stops
diff --git a/Settings.plist b/Settings.plist
@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
 <plist version="1.0">
-<array/>
+    <array/>
 </plist>
diff --git a/params.json b/params.json
@@ -1,6 +1,6 @@
 {
-  "name": "Pied PíPr",
-  "tagline": "Missing Picture-in-Picture functionality for Safari on macOS Seirra",
-  "body": "Download and Enjoy to enable Picture-in-Picture on Netflix, YouTube, Plex, and Daily Motion.",
-  "note": "Don't delete this file! It's used internally to help with page regeneration."
+    "name": "PiPTool",
+    "tagline": "Adds the missing Picture-in-Picture functionality to Youtube, Netflix, Plex (Web), Dailymotion",
+    "body": "Download and Enjoy to enable Picture-in-Picture on Netflix, YouTube, Plex, and Dailymotion.",
+    "note": "Don't delete this file! It's used internally to help with page regeneration."
 }
diff --git a/scripts/main.js b/scripts/main.js
@@ -1,3 +1,4 @@
+/* globals safari: false */
 (function () {
     'use strict';
 
@@ -24,12 +25,12 @@
         /** @type {Object} The video to be switched */
         video = videoWrapper.querySelector(currentResource.videoSelector);
 
-        /** @type {Object} The PiP button */
+        /** @type {Node} The PiP button */
         pipButton = document.createElement(currentResource.elementType);
         pipButton.classList = currentResource.buttonClassList;
         pipButton.title = 'PiP Mode';
 
-        /** @type {Object} The icon shown in the PiP button */
+        /** @type {Node} The icon shown in the PiP button */
         pipImage = document.createElement('img');
         pipImage.src = safari.extension.baseURI + 'images/' + currentResource.name + '-icon.svg';
         pipImage.setAttribute('height', '100%');
@@ -47,19 +48,13 @@
             }
         });
 
-
-
-	    controlsWrapper = videoWrapper.querySelector(currentResource.controlsWrapperClass);
+        controlsWrapper = videoWrapper.querySelector(currentResource.controlsWrapperClass);
 
-        if (currentResource.name == 'netflix' && document.body.querySelectorAll('.pip-button').length < 1) {
-// 	        document.body.appendChild(pipButton);
-	        document.querySelector('.player-status').appendChild(pipButton);
+        if ('netflix' === currentResource.name && 1 > document.body.querySelectorAll('.pip-button').length) {
+            document.querySelector('.player-status').appendChild(pipButton);
         } else if (controlsWrapper && 0 === controlsWrapper.querySelectorAll('.pip-button').length) {
             controlsWrapper.appendChild(pipButton);
         }
-
-
-
     };
 
     /** Find the videos according to the current resource options */
@@ -97,8 +92,13 @@
 
         /** Set the observer */
         observer.observe(document.querySelector(currentResource.customClasses.netflixContainer), {
-			childList: true, 
-		    subtree:true
+            childList: true,
+            attributes: false,
+            characterData: false,
+            subtree: true,
+            attributeOldValue: false,
+            characterDataOldValue: false,
+            attributeFilter: []
         });
     };
 
@@ -124,7 +124,13 @@
 
         /** Set the observer */
         observer.observe(document.querySelector(currentResource.customClasses.plexContainer), {
-            childList: true
+            childList: true,
+            attributes: false,
+            characterData: false,
+            subtree: false,
+            attributeOldValue: false,
+            characterDataOldValue: false,
+            attributeFilter: []
         });
     };
 

diff --git a/stylesheets/main.css b/stylesheets/main.css
@@ -26,21 +26,20 @@
 }
 
 .netflix-pip {
-	right: 0;
-	position: absolute;
-	z-index: 999999;
-	color: white;
-	display: block;
-	top: 0;
-	user-select: auto;
-	pointer-events: auto;
-	width: 2em;
-	height: 2em;
-	top: 0.5em;
-	right: 0.5em;
-	cursor: pointer;
+    color: white;
+    display: block;
+    width: 2em;
+    height: 2em;
+    position: absolute;
+    top: 0.5em;
+    right: 0.5em;
+    z-index: 999999;
+    cursor: pointer;
+    user-select: auto;
+    pointer-events: auto;
+
 }
 
 body:hover > .netflix-pip {
-  opacity: 0.8;
+    opacity: 0.8;
 }