vhad/PiPer
1
0
Fork 0
mirror of https://github.com/gosticks/PiPer.git synced 2026-07-03 22:50:02 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Improved Picture in Picture button creation

Browse Source 
Button is now cached so can be injected back into webpage quickly if
removed
This commit is contained in:
amarcu5
2017-05-29 15:19:42 +01:00
parent d1d99908dd
commit cffcba4b8d
3 changed files with 41 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
out/PiPer.safariextz
View File

Binary file not shown.

78
src/scripts/main.js
View File

@@ -22,7 +22,7 @@ const COMPILED = false;
const BUTTON_ID = 'PIPButton';
let /** boolean */ buttonAdded = false;
let /** ?Element */ button = null;
let /** ?PIPResource */ currentResource = null;
const log = function(message) {
@@ -30,38 +30,43 @@ const log = function(message) {
}
const addButton = function(/** Element */ parent) {
const button = document.createElement(currentResource.buttonElementType || 'button');
button.id = BUTTON_ID;
button.title = 'Open Picture in Picture mode';
if (currentResource.buttonStyle) button.style.cssText = currentResource.buttonStyle;
if (currentResource.buttonClassName) button.className = currentResource.buttonClassName;
const image = document.createElement('img');
image.src = safari.extension.baseURI + 'images/' + (currentResource.buttonImage || 'default') + '.svg';
image.style.width = image.style.height = '100%';
if (currentResource.buttonScale) image.style.transform = 'scale(' + currentResource.buttonScale + ')';
button.appendChild(image);
if (currentResource.buttonHoverStyle) {
const style = document.createElement('style');
const css = '#' + BUTTON_ID + ':hover{' + currentResource.buttonHoverStyle + '}';
style.appendChild(document.createTextNode(css));
button.appendChild(style);
}
button.addEventListener('click', function(event) {
event.preventDefault();
const video = /** @type {?HTMLVideoElement} */ (currentResource.videoElement());
if (!video) {
log('Unable to find video');
return;
if (!button) {
button = document.createElement(currentResource.buttonElementType || 'button');
button.id = BUTTON_ID;
button.title = 'Open Picture in Picture mode';
if (currentResource.buttonStyle) button.style.cssText = currentResource.buttonStyle;
if (currentResource.buttonClassName) button.className = currentResource.buttonClassName;
const image = document.createElement('img');
image.src = safari.extension.baseURI + 'images/' + (currentResource.buttonImage || 'default') + '.svg';
image.style.width = image.style.height = '100%';
if (currentResource.buttonScale) image.style.transform = 'scale(' + currentResource.buttonScale + ')';
button.appendChild(image);
if (currentResource.buttonHoverStyle) {
const style = document.createElement('style');
const css = '#' + BUTTON_ID + ':hover{' + currentResource.buttonHoverStyle + '}';
style.appendChild(document.createTextNode(css));
button.appendChild(style);
}
const presentationMode = 'inline' === video.webkitPresentationMode ? 'picture-in-picture' : 'inline';
video.webkitSetPresentationMode(presentationMode);
});
button.addEventListener('click', function(event) {
event.preventDefault();
const video = /** @type {?HTMLVideoElement} */ (currentResource.videoElement());
if (!video) {
log('Unable to find video');
return;
}
const presentationMode = 'inline' === video.webkitPresentationMode ? 'picture-in-picture' : 'inline';
video.webkitSetPresentationMode(presentationMode);
});
log('Picture in Picture button created');
}
const referenceNode = currentResource.buttonInsertBefore ? currentResource.buttonInsertBefore(parent) : null;
parent.insertBefore(button, referenceNode);
@@ -69,18 +74,13 @@ const addButton = function(/** Element */ parent) {
const buttonObserver = function() {
if (buttonAdded) {
if (document.getElementById(BUTTON_ID)) return;
log('Button removed');
buttonAdded = false;
}
if (document.getElementById(BUTTON_ID)) return;
const buttonParent = currentResource.buttonParent();
if (buttonParent) {
addButton(buttonParent);
if (currentResource.buttonDidAppear) currentResource.buttonDidAppear();
log('Button added');
buttonAdded = true;
log('Picture in Picture button added to webpage');
}
};

4
update.plist
View File

@@ -8,9 +8,9 @@
<key>CFBundleIdentifier</key>
<string>com.amarcus.safari.piper</string>
<key>CFBundleShortVersionString</key>
<string>0.1.3</string>
<string>0.2.0</string>
<key>CFBundleVersion</key>
<string>24</string>
<string>25</string>
<key>Developer Identifier</key>
<string>BQ6Q24MF9X</string>
<key>URL</key>