diff --git a/README.md b/README.md index f3b53f9..a9a7ba8 100644 --- a/README.md +++ b/README.md @@ -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 diff --git a/build-tools/csso b/build-tools/csso new file mode 100755 index 0000000..4c2a975 Binary files /dev/null and b/build-tools/csso differ diff --git a/make.sh b/make.sh index 80620b0..72e38be 100755 --- a/make.sh +++ b/make.sh @@ -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 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 diff --git a/out/PiPer.safariextz b/out/PiPer.safariextz index e5d162c..811bfd4 100644 Binary files a/out/PiPer.safariextz and b/out/PiPer.safariextz differ diff --git a/src/scripts/main.js b/src/scripts/main.js index bada4d0..3eaaab4 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -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'); }, diff --git a/update.plist b/update.plist index 030d21f..ae0c516 100644 --- a/update.plist +++ b/update.plist @@ -10,7 +10,7 @@ CFBundleShortVersionString 0.2.3 CFBundleVersion - 84 + 85 Developer Identifier BQ6Q24MF9X URL