vhad/PiPer
1
0
Fork 0
mirror of https://github.com/gosticks/PiPer.git synced 2026-08-12 13:00:27 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Added inline CSS compression with CSSO

Browse Source
This commit is contained in:
amarcu5
2017-09-11 00:25:15 +01:00
parent 126fe57f86
commit 2ea6553e45
6 changed files with 128 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+1
View File
@@ -37,6 +37,7 @@ Get the latest release from the [Safari Extension Gallery](https://safari-extens
* [Google](https://github.com/google/material-design-icons) for the Picture in Picture icon
## Build tools
* [csso](https://github.com/css/csso) (3.1.1) for compressing CSS
* [svgo](https://github.com/svg/svgo) (0.7.2) for compressing SVG images
* [xarjs](https://github.com/robertknight/xar-js) (0.2.0) for packaging Safari extension
* [google-closure-compiler-js](https://github.com/google/closure-compiler-js) (20170806.0.0) for compiling JavaScript
build-tools/csso
Executable
BIN
View File
Binary file not shown.
make.sh
+20
View File
@@ -5,6 +5,7 @@
EXTENSION_NAME="PiPer"
# Build tool paths; fallback to local build tools
CSSO_PATH="./build-tools/csso"
CCJS_PATH=$(type "google-closure-compiler-js" >/dev/null 2>&1 && echo "google-closure-compiler-js" || echo "./build-tools/google-closure-compiler-js")
XARJS_PATH=$(type "xarjs" >/dev/null 2>&1 && echo "xarjs" || echo "./build-tools/xarjs")
SVGO_PATH=$(type "svgo" >/dev/null 2>&1 && echo "svgo" || echo "./build-tools/svgo")
@@ -25,6 +26,7 @@ Usage: make.sh [options]
Options:
-h -? --help Show this screen
-p --profile <release|debug> Set settings according to profile [default: debug]
-c --compress-css Compress CSS
-j --compress-js Compress JavaScript
-s --compress-svg Compress SVG
-e --package-extension Package Safari extension (requires private key)
@@ -51,11 +53,13 @@ done
case $profile in
release)
compress_svg=1
compress_css=1
compress_js=1
package_ext=1
;;
*)
compress_svg=0
compress_css=0
compress_js=0
package_ext=0
esac
@@ -66,6 +70,7 @@ set -- "${arguments[@]}"
# Second pass processing arguments
while :; do
case $1 in
-c|--compress-css) compress_css=1 ;;
-j|--compress-js) compress_js=1 ;;
-s|--compress-svg) compress_svg=1 ;;
-e|--package-extension) package_ext=1 ;;
@@ -100,6 +105,21 @@ if [[ "$compress_svg" -eq 1 ]]; then
${SVGO_PATH} -q -f "out/${EXTENSION_NAME}.safariextension/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}.safariextension/scripts"/*.js; do
source=$(cat "${path}")
echo "echo \"$(sed -e 's/\\/\\\\/g' -e 's/\$/\\$/g' -e 's/\`/\\`/g' -e 's/\"/\\\"/g' -e 's/\\n/\\\\n/g' <<< "$source" \
| perl -0pe 's/\/\*\*\s+CSS\s+\*\/\s*\(\s*\\`(.*?)\\`\s*\)/\\`\$(minify_css '\''$1'\'')\\`/gms')\"" \
| sh > "${path}"
done
fi
# Use closure compiler to compress javascript
if [[ "$compress_js" -eq 1 ]]; then
for path in "out/${EXTENSION_NAME}.safariextension/scripts"/*.js; do
out/PiPer.safariextz
BIN
View File
Binary file not shown.
src/scripts/main.js
+106 -25
View File
@@ -267,7 +267,7 @@ const bypassBackgroundTimerThrottling = function() {
const resources = {
'amazon': {
buttonHoverStyle: 'opacity:1!important',
buttonHoverStyle: /** CSS */ (`opacity: 1 !important`),
buttonInsertBefore: function(/** Element */ parent) {
return parent.querySelector('.fullscreenButtonWrapper');
},
@@ -275,7 +275,18 @@ const resources = {
const e = document.getElementById('dv-web-player');
return e && e.querySelector('.hideableTopButtons');
},
buttonStyle: 'border:0;padding:0;background-color:transparent;opacity:0.8;position:relative;left:8px;width:3vw;height:2vw;min-width:35px;min-height:24px',
buttonStyle: /** CSS */ (`
position: relative;
left: 8px;
width: 3vw;
height: 2vw;
min-width: 35px;
min-height: 24px;
border: 0px;
padding: 0px;
background-color: transparent;
opacity: 0.8;
`),
captionElement: function() {
const e = document.getElementById('dv-web-player');
return e && e.querySelector('.captions');
@@ -296,7 +307,7 @@ const resources = {
return e && e.querySelector('.vjs-control-bar');
},
buttonScale: 0.6,
buttonStyle: 'cursor:pointer',
buttonStyle: /** CSS */ (`cursor: pointer`),
videoElement: function() {
return document.getElementById('vjs_video_3_html5_api');
},
@@ -316,7 +327,7 @@ const resources = {
videoContainer.style.removeProperty('max-height');
});
},
buttonHoverStyle: 'opacity:1!important',
buttonHoverStyle: /** CSS */ (`opacity: 1 !important`),
buttonInsertBefore: function(/** Element */ parent) {
return parent.lastChild;
},
@@ -325,7 +336,10 @@ const resources = {
return e && e.querySelector('.vjs-control-bar');
},
buttonScale: 0.7,
buttonStyle: 'opacity:0.8;cursor:pointer',
buttonStyle: /** CSS */ (`
opacity: 0.8;
cursor: pointer;
`),
videoElement: function() {
return document.getElementById('main-player_html5_api');
},
@@ -333,12 +347,17 @@ const resources = {
'eurosportplayer': {
buttonElementType: 'div',
buttonHoverStyle: 'opacity:1!important',
buttonHoverStyle: /** CSS */ (`opacity: 1 !important`),
buttonParent: function() {
return document.querySelector('.video-controls__group-right');
},
buttonScale: 0.7,
buttonStyle: 'margin-right:15px;height:100%;opacity:0.8;cursor:pointer',
buttonStyle: /** CSS */ (`
height: 100%;
margin-right: 15px;
opacity: 0.8;
cursor: pointer;
`),
videoElement: function() {
return document.querySelector('.video-player__screen');
},
@@ -351,13 +370,19 @@ const resources = {
currentResource.buttonParent().querySelector('.progress-time-container').style.marginRight = '45px';
},
buttonElementType: 'div',
buttonHoverStyle: 'filter:brightness(50%)sepia(1)hue-rotate(58deg)saturate(160%)brightness(110%)!important',
buttonHoverStyle: /** CSS */ (`
filter: brightness(50%) sepia(1) hue-rotate(58deg) saturate(160%) brightness(110%) !important;
`),
buttonParent: function() {
const e = document.getElementById('site-player');
return e && e.querySelector('.main-bar');
},
buttonScale: 0.7,
buttonStyle: 'top:-45px;left:-50px;filter:brightness(80%)',
buttonStyle: /** CSS */ (`
top: -45px;
left: -50px;
filter: brightness(80%);
`),
captionElement: function() {
return document.querySelector('.closed-caption-container');
},
@@ -375,7 +400,7 @@ const resources = {
buttonParent: function() {
return document.querySelector('.jw-controlbar-right-group');
},
buttonStyle: 'width:38px',
buttonStyle: /** CSS */ (`width: 38px`),
videoElement: function() {
return document.querySelector('video.jw-video');
},
@@ -391,7 +416,10 @@ const resources = {
const e = document.getElementById('player');
return e && e.querySelector('.jw-controlbar-right-group');
},
buttonStyle: 'width:38px;top:-2px',
buttonStyle: /** CSS */ (`
top: -2px;
width: 38px;
`),
videoElement: function() {
const e = document.getElementById('player');
return e && e.querySelector('video.jw-video');
@@ -424,7 +452,11 @@ const resources = {
buttonParent: function() {
return document.querySelector('.control-container .toolbar');
},
buttonStyle: 'position:relative;top:2px;cursor:pointer',
buttonStyle: /** CSS */ (`
position: relative;
top: 2px;
cursor: pointer;
`),
videoElement: function() {
return document.querySelector('.control-container + video');
},
@@ -440,7 +472,15 @@ const resources = {
const e = document.getElementById('playerContainer');
return e ? e.querySelector('.player-status') : null;
},
buttonStyle: 'position:absolute;right:0;top:0;width:2em;height:100%;cursor:pointer;background-color:#262626',
buttonStyle: /** CSS */ (`
position: absolute;
right: 0px;
top: 0px;
width: 2em;
height: 100%;
background-color: #262626;
cursor: pointer;
`),
captionElement: function() {
const e = currentResource.videoElement();
return e && e.parentElement.querySelector('.player-timedtext');
@@ -460,7 +500,16 @@ const resources = {
return document.querySelector('.footer-block:last-child');
},
buttonScale: 1.2,
buttonStyle: 'border:0;margin-right:10px;padding:0;background-color:transparent;margin-bottom:-10px;display:block;width:25px;height:18px',
buttonStyle: /** CSS */ (`
display: block;
width: 25px;
height: 18px;
margin-right: 10px;
margin-bottom: -10px;
padding: 0px;
border: 0px;
background-color: transparent;
`),
videoElement: function() {
return document.getElementById('LgyVideoPlayer');
},
@@ -476,7 +525,10 @@ const resources = {
return e && e.querySelector('.vjs-control-bar');
},
buttonScale: 0.6,
buttonStyle: 'left:5px;cursor:pointer',
buttonStyle: /** CSS */ (`
left: 5px;
cursor: pointer;
`),
videoElement: function() {
return document.getElementById('olvideo_html5_api');
},
@@ -486,7 +538,7 @@ const resources = {
buttonDidAppear: function() {
bypassBackgroundTimerThrottling();
},
buttonHoverStyle: 'opacity:1!important',
buttonHoverStyle: /** CSS */ (`opacity: 1 !important`),
buttonInsertBefore: function(/** Element */ parent) {
return parent.lastChild;
},
@@ -495,7 +547,15 @@ const resources = {
return /** @type {?Element} */ (e && e.lastChild);
},
buttonScale: 0.6,
buttonStyle: 'border:0;background:transparent;opacity:0.7;position:relative;top:-3px;padding:10px;text-shadow:0 0 4px rgba(0,0,0,.45)',
buttonStyle: /** CSS */ (`
position: relative;
top: -3px;
padding: 10px;
border: 0px;
background: transparent;
opacity: 0.7;
text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.45);
`),
captionElement: function() {
return document.querySelector('.libjass-subs');
},
@@ -514,7 +574,11 @@ const resources = {
const e = document.getElementById('container');
return e && e.querySelector('.jw-controlbar-right-group');
},
buttonStyle: 'width:38px;top:-2px;left:10px',
buttonStyle: /** CSS */ (`
top: -2px;
left: 10px;
width: 38px;
`),
videoElement: function() {
const e = document.getElementById('container');
return e && e.querySelector('video.jw-video');
@@ -542,7 +606,9 @@ const resources = {
if (video) video.webkitSetPresentationMode('inline');
});
},
buttonHoverStyle: 'filter:brightness(50%)sepia(1)hue-rotate(219deg)saturate(117%)brightness(112%)',
buttonHoverStyle: /** CSS */ (`
filter: brightness(50%) sepia(1) hue-rotate(219deg) saturate(117%) brightness(112%);
`),
buttonInsertBefore: function(/** Element */ parent) {
return parent.querySelector('.player-button--fullscreen');
},
@@ -569,7 +635,7 @@ const resources = {
return document.querySelector('.vjs-control-bar');
},
buttonScale: 0.7,
buttonStyle: 'order:7',
buttonStyle: /** CSS */ (`order: 7`),
captionElement: function() {
const e = currentResource.videoElement();
return e && e.parentElement.querySelector('.vjs-text-track-display');
@@ -589,7 +655,10 @@ const resources = {
return e && e.querySelector('.right-controls');
},
buttonScale: 0.7,
buttonStyle: 'border:0;background:transparent',
buttonStyle: /** CSS */ (`
border: 0px;
background: transparent;
`),
videoElement: function() {
return document.getElementById('html5-player');
},
@@ -605,7 +674,7 @@ const resources = {
return document.querySelector('.vp__controls__icons');
},
buttonScale: 0.6,
buttonStyle: 'top:-11px',
buttonStyle: /** CSS */ (`top: -11px`),
videoElement: function() {
return document.querySelector('video.jw-video');
},
@@ -620,7 +689,13 @@ const resources = {
return e && e.querySelector('.vjs-control-bar');
},
buttonScale: 0.7,
buttonStyle: 'position:relative;left:9px;top:-2px;padding:0;margin:0',
buttonStyle: /** CSS */ (`
position: relative;
top: -2px;
left: 9px;
padding: 0px;
margin: 0px;
`),
videoElement: function() {
return document.getElementById('video_player_html5_api');
},
@@ -636,7 +711,7 @@ const resources = {
});
bypassBackgroundTimerThrottling();
},
buttonHoverStyle: 'opacity:1!important',
buttonHoverStyle: /** CSS */ (`opacity: 1 !important`),
buttonInsertBefore: function(/** Element */ parent) {
return parent.lastChild;
},
@@ -644,7 +719,13 @@ const resources = {
return document.querySelector('.vjs-control-bar');
},
buttonScale: 0.6,
buttonStyle: 'position:absolute;right:calc(50px + 2.5rem);width:50px;cursor:pointer;opacity:0.6',
buttonStyle: /** CSS */ (`
position: absolute;
right: calc(50px + 2.5rem);
width: 50px;
cursor: pointer;
opacity: 0.6;
`),
captionElement: function() {
return document.querySelector('.libjass-subs');
},
update.plist
+1 -1
View File
@@ -10,7 +10,7 @@
<key>CFBundleShortVersionString</key>
<string>0.2.3</string>
<key>CFBundleVersion</key>
<string>84</string>
<string>85</string>
<key>Developer Identifier</key>
<string>BQ6Q24MF9X</string>
<key>URL</key>