From 7b5157a48d1ef21ea46b19cf737eddf70bcc7136 Mon Sep 17 00:00:00 2001 From: Tamius Han Date: Sun, 10 Mar 2019 23:27:50 +0100 Subject: [PATCH] Aspect ratio types were enumified. --- src/common/enums/aspect-ratio.enum.js | 10 ++ src/ext/conf/ActionList.js | 12 ++- src/ext/conf/Debug.js | 2 +- src/ext/conf/ExtensionConf.js | 18 ++-- src/ext/lib/ActionHandler.js | 2 +- src/ext/lib/ar-detect/ArDetector.js | 17 ++-- src/ext/lib/comms/CommsClient.js | 2 +- src/ext/lib/video-data/PageInfo.js | 5 +- src/ext/lib/video-data/PlayerData.js | 3 +- src/ext/lib/video-transform/Resizer.js | 94 +++++++++++++++---- src/ext/lib/video-transform/Scaler.js | 67 +++++++------ .../add-edit-action-popup.vue | 8 +- .../command-builder/command-add-edit.vue | 14 +-- src/res/popup/js/popup.js | 2 +- 14 files changed, 168 insertions(+), 88 deletions(-) create mode 100644 src/common/enums/aspect-ratio.enum.js diff --git a/src/common/enums/aspect-ratio.enum.js b/src/common/enums/aspect-ratio.enum.js new file mode 100644 index 0000000..9337b9e --- /dev/null +++ b/src/common/enums/aspect-ratio.enum.js @@ -0,0 +1,10 @@ +var AspectRatio = Object.freeze({ + Initial: -1, + Reset: 0, + Automatic: 1, + FitWidth: 2, + FitHeight: 3, + Fixed: 4, +}); + +export default AspectRatio; diff --git a/src/ext/conf/ActionList.js b/src/ext/conf/ActionList.js index 5b3f4ef..b73d1c0 100644 --- a/src/ext/conf/ActionList.js +++ b/src/ext/conf/ActionList.js @@ -1,24 +1,26 @@ import VideoAlignment from '../../common/enums/video-alignment.enum'; import Stretch from '../../common/enums/stretch.enum'; import ExtensionMode from '../../common/enums/extension-mode.enum'; +import AspectRatio from '../../common/enums/aspect-ratio.enum'; var ActionList = { 'set-ar': { name: 'Set aspect ratio', args: [{ name: 'Automatic', - arg: 'auto', + arg: AspectRatio.Automatic, },{ name: 'Fit width', - arg: 'fitw' + arg: AspectRatio.FitWidth, },{ name: 'Fit height', - arg: 'fith', + arg: AspectRatio.FitHeight, },{ name: 'Reset', - arg: 'reset', + arg: AspectRatio.Reset, },{ - name: 'Ratio', + name: 'Manually specify ratio', + arg: AspectRatio.Fixed, customArg: true, hintHTML: '', }], diff --git a/src/ext/conf/Debug.js b/src/ext/conf/Debug.js index 9097015..f9ec873 100644 --- a/src/ext/conf/Debug.js +++ b/src/ext/conf/Debug.js @@ -7,7 +7,7 @@ var Debug = { init: true, debug: true, // debug: false, - // keyboard: true, + keyboard: true, // debugResizer: true, // debugArDetect: true, // debugStorage: false, diff --git a/src/ext/conf/ExtensionConf.js b/src/ext/conf/ExtensionConf.js index 37dd962..f8122d3 100644 --- a/src/ext/conf/ExtensionConf.js +++ b/src/ext/conf/ExtensionConf.js @@ -4,6 +4,7 @@ import VideoAlignment from '../../common/enums/video-alignment.enum'; import Stretch from '../../common/enums/stretch.enum'; import ExtensionMode from '../../common/enums/extension-mode.enum'; import AntiGradientMode from '../../common/enums/anti-gradient-mode.enum'; +import AspectRatio from '../../common/enums/aspect-ratio.enum'; if(Debug.debug) console.log("Loading: ExtensionConf.js"); @@ -163,7 +164,7 @@ var ExtensionConf = { label: 'Automatic', // name displayed in ui (can be overriden in scope/playerUi) cmd: [{ action: 'set-ar', - arg: 'auto', + arg: AspectRatio.Automatic, persistent: false, // optional, false by default. If true, change doesn't take effect immediately. // Instead, this action saves stuff to settings }], @@ -197,7 +198,7 @@ var ExtensionConf = { label: 'Reset', cmd: [{ action: 'set-ar', - arg: 'reset', + arg: AspectRatio.Reset, }], scopes: { page: { @@ -222,7 +223,7 @@ var ExtensionConf = { label: 'Fit width', cmd: [{ action: 'set-ar', - arg: 'fitw', + arg: AspectRatio.FitWidth, }], scopes: { page: { @@ -247,7 +248,7 @@ var ExtensionConf = { label: 'Fit height', cmd: [{ action: 'set-ar', - arg: 'fith', + arg: AspectRatio.FitHeight }], scopes: { page: { @@ -272,7 +273,8 @@ var ExtensionConf = { label: '16:9', cmd: [{ action: 'set-ar', - arg: 1.78, + arg: AspectRatio.Fixed, + customArg: 1.78, }], scopes: { page: { @@ -297,7 +299,8 @@ var ExtensionConf = { label: '21:9', cmd: [{ action: 'set-ar', - arg: 2.39, + arg: AspectRatio.Fixed, + customArg: 2.39 }], scopes: { page: { @@ -322,7 +325,8 @@ var ExtensionConf = { label: '18:9', cmd: [{ action: 'set-ar', - arg: 2.0, + arg: AspectRatio.Fixed, + customArg: 2.0, }], scopes: { page: { diff --git a/src/ext/lib/ActionHandler.js b/src/ext/lib/ActionHandler.js index 6e56669..f6e6583 100644 --- a/src/ext/lib/ActionHandler.js +++ b/src/ext/lib/ActionHandler.js @@ -180,7 +180,7 @@ class ActionHandler { for (var cmd of action.cmd) { if (action.scope === 'page') { if (cmd.action === "set-ar") { - this.pageInfo.setAr(cmd.arg); + this.pageInfo.setAr({type: cmd.arg, ratio: cmd.customArg}); } else if (cmd.action === "change-zoom") { this.pageInfo.zoomStep(cmd.arg); } else if (cmd.action === "set-zoom") { diff --git a/src/ext/lib/ar-detect/ArDetector.js b/src/ext/lib/ar-detect/ArDetector.js index 4f6d1e4..f7dcf9d 100644 --- a/src/ext/lib/ar-detect/ArDetector.js +++ b/src/ext/lib/ar-detect/ArDetector.js @@ -6,6 +6,7 @@ import EdgeDetectQuality from './edge-detect/enums/EdgeDetectQualityEnum'; import GuardLine from './GuardLine'; import DebugCanvas from './DebugCanvas'; import VideoAlignment from '../../../common/enums/video-alignment.enum'; +import AspectRatio from '../../../common/enums/aspect-ratio.enum'; class ArDetector { @@ -192,7 +193,7 @@ class ArDetector { this.resetBlackLevel(); // if we're restarting ArDetect, we need to do this in order to force-recalculate aspect ratio - this.conf.resizer.setLastAr({type: "auto", ar: null}); + this.conf.resizer.setLastAr({type: AspectRatio.Automatic, ratio: null}); this.canvasImageDataRowLength = cwidth << 2; this.noLetterboxCanvasReset = false; @@ -213,9 +214,9 @@ class ArDetector { if (Debug.debug) { console.log("%c[ArDetect::setup] Starting automatic aspect ratio detection.", _ard_console_start); } - if (this.conf.resizer.lastAr.type === 'auto') { + if (this.conf.resizer.lastAr.type === AspectRatio.Automatic) { // ensure first autodetection will run in any case - this.conf.resizer.setLastAr({type: 'auto', ar: null}); + this.conf.resizer.setLastAr({type: AspectRatio.Automatic, ratio: null}); } // launch main() if it's currently not running: @@ -475,7 +476,7 @@ class ArDetector { // poglejmo, če se je razmerje stranic spremenilo // check if aspect ratio is changed: var lastAr = this.conf.resizer.getLastAr(); - if( lastAr.type == "auto" && lastAr.ar != null){ + if( lastAr.type === AspectRatio.Automatic && lastAr.ar != null){ // spremembo lahko zavrnemo samo, če uporabljamo avtomatski način delovanja in če smo razmerje stranic // že nastavili. // @@ -509,7 +510,7 @@ class ArDetector { console.log("%c[ArDetect::processAr] Triggering aspect ratio change. New aspect ratio: ", _ard_console_change, trueAr); } - this.conf.resizer.setAr(trueAr, {type: "auto", ar: trueAr}); + this.conf.resizer.setAr({type: AspectRatio.Automatic, ratio: trueAr}, {type: AspectRatio.Automatic, ratio: trueAr}); } frameCheck(){ @@ -599,7 +600,7 @@ class ArDetector { // If we don't detect letterbox, we reset aspect ratio to aspect ratio of the video file. The aspect ratio could // have been corrected manually. It's also possible that letterbox (that was there before) disappeared. console.log("FAST LETTERBOX PRESENCE TEST FAILED, CALLING RESET") - this.conf.resizer.reset({type: "auto", ar: null}); + this.conf.resizer.reset({type: AspectRatio.Automatic, ar: null}); this.guardLine.reset(); this.noLetterboxCanvasReset = true; @@ -638,7 +639,7 @@ class ArDetector { // (since the new letterbox edge isn't present in our sample due to technical // limitations) if (this.fallbackMode && guardLineOut.blackbarFail) { - this.conf.resizer.reset({type: "auto", ar: null}); + this.conf.resizer.reset({type: AspectRatio.Automatic, ar: null}); this.guardLine.reset(); this.noLetterboxCanvasReset = true; @@ -664,7 +665,7 @@ class ArDetector { } if(guardLineOut.blackbarFail){ - this.conf.resizer.reset({type: "auto", ar: null}); + this.conf.resizer.reset({type: AspectRatio.Automatic, ar: null}); this.guardLine.reset(); } diff --git a/src/ext/lib/comms/CommsClient.js b/src/ext/lib/comms/CommsClient.js index 53e5202..43fd598 100644 --- a/src/ext/lib/comms/CommsClient.js +++ b/src/ext/lib/comms/CommsClient.js @@ -65,7 +65,7 @@ class CommsClient { } if (message.cmd === "set-ar") { - this.pageInfo.setAr(message.arg, message.playing); + this.pageInfo.setAr({type: message.arg, ratio: message.customArg}, message.playing); } else if (message.cmd === 'set-alignment') { this.pageInfo.setvideoAlignment(message.arg, message.playing); this.pageInfo.restoreAr(); diff --git a/src/ext/lib/video-data/PageInfo.js b/src/ext/lib/video-data/PageInfo.js index f7a5f95..370ed92 100644 --- a/src/ext/lib/video-data/PageInfo.js +++ b/src/ext/lib/video-data/PageInfo.js @@ -1,6 +1,7 @@ import Debug from '../../conf/Debug'; import VideoData from './VideoData'; import RescanReason from './enums/RescanReason'; +import AspectRatio from '../../../common/enums/aspect-ratio.enum'; if(Debug.debug) console.log("Loading: PageInfo.js"); @@ -308,7 +309,7 @@ class PageInfo { console.log('[PageInfo::setAr] aspect ratio:', ar, "playing only?", playingOnly) } - if (ar !== 'auto') { + if (ar.type !== AspectRatio.Automatic) { this.stopArDetection(playingOnly); } else { if (Debug.debug) { @@ -330,7 +331,7 @@ class PageInfo { } // TODO: find a way to only change aspect ratio for one video - if (ar === 'reset') { + if (ar === AspectRatio.Reset) { for (var vd of this.videos) { if (!playingOnly || vd.isPlaying()) { vd.resetAr(); diff --git a/src/ext/lib/video-data/PlayerData.js b/src/ext/lib/video-data/PlayerData.js index 5799529..d11defb 100644 --- a/src/ext/lib/video-data/PlayerData.js +++ b/src/ext/lib/video-data/PlayerData.js @@ -1,5 +1,6 @@ import Debug from '../../conf/Debug'; import ExtensionMode from '../../../common/enums/extension-mode.enum' +import AspectRatio from '../../../common/enums/aspect-ratio.enum'; if(Debug.debug) console.log("Loading: PlayerData.js"); @@ -199,7 +200,7 @@ class PlayerData { this.videoData.resizer.restore(); - if (lastAr.type === 'original' || lastAr.type === 'auto') { + if (lastAr.type === 'original' || lastAr.type === AspectRatio.Automatic) { this.videoData.rebootArDetection(); } } else { diff --git a/src/ext/lib/video-transform/Resizer.js b/src/ext/lib/video-transform/Resizer.js index 6a09847..f1ca95f 100644 --- a/src/ext/lib/video-transform/Resizer.js +++ b/src/ext/lib/video-transform/Resizer.js @@ -6,6 +6,7 @@ import PlayerData from '../video-data/PlayerData'; import ExtensionMode from '../../../common/enums/extension-mode.enum'; import Stretch from '../../../common/enums/stretch.enum'; import VideoAlignment from '../../../common/enums/video-alignment.enum'; +import AspectRatio from '../../../common/enums/aspect-ratio.enum'; if(Debug.debug) { console.log("Loading: Resizer.js"); @@ -39,7 +40,7 @@ class Resizer { // this.lastAr = this.settings.getDefaultAr(); // this is the aspect ratio we start with - this.lastAr = {type: 'original'}; + this.lastAr = {type: AspectRatio.Initial}; this.videoAlignment = this.settings.getDefaultVideoAlignment(window.location.hostname); // this is initial video alignment this.destroyed = false; @@ -71,6 +72,61 @@ class Resizer { this.stopCssWatcher(); } + calculateRatioForLegacyOptions(ar){ + // also present as modeToAr in Scaler.js + if (ar.ratio) { + return ar.ratio; + } + // Skrbi za "stare" možnosti, kot na primer "na širino zaslona", "na višino zaslona" in "ponastavi". + // Približevanje opuščeno. + // handles "legacy" options, such as 'fit to widht', 'fit to height' and AspectRatio.Reset. No zoom tho + var ratioOut; + + if (!this.conf.video) { + if(Debug.debug){ + console.log("[Scaler.js::modeToAr] No video??",this.conf.video, "killing videoData"); + } + this.conf.destroy(); + return null; + } + + + if(! this.conf.player.dimensions ){ + ratioOut = screen.width / screen.height; + } + else { + ratioOut = this.conf.player.dimensions.width / this.conf.player.dimensions.height; + } + + // POMEMBNO: lastAr je potrebno nastaviti šele po tem, ko kličemo _res_setAr(). _res_setAr() predvideva, + // da želimo nastaviti statično (type: 'static') razmerje stranic — tudi, če funkcijo kličemo tu oz. v ArDetect. + // + // IMPORTANT NOTE: lastAr needs to be set after _res_setAr() is called, as _res_setAr() assumes we're + // setting a static aspect ratio (even if the function is called from here or ArDetect). + + var fileAr = this.conf.video.videoWidth / this.conf.video.videoHeight; + + if (ar.type === AspectRatio.FitWidth){ + ratioOut > fileAr ? ratioOut : fileAr + ar.ratio = ratioOut; + return ratioOut; + } + else if(ar.type === AspectRatio.FitHeight){ + ratioOut < fileAr ? ratioOut : fileAr + ar.ratio = ratioOut; + return ratioOut; + } + else if(ar.type === AspectRatio.Reset){ + if(Debug.debug){ + console.log("[Scaler.js::modeToAr] Using original aspect ratio -", fileAr) + } + ar.ar = fileAr; + return fileAr; + } + + return null; + } + setAr(ar, lastAr){ if (this.destroyed) { @@ -81,7 +137,7 @@ class Resizer { console.log('[Resizer::setAr] trying to set ar. New ar:', ar) } - if (ar === null) { + if (ar == null) { return; } @@ -89,13 +145,16 @@ class Resizer { this.lastAr = lastAr; } else { if(isNaN(ar)){ - this.lastAr = {type: 'legacy', ar: ar} + // NOTE: "fitw" "fith" and "reset" should ignore ar.ratio bit, but + // I'm not sure whether they do. Check that. + this.lastAr = {type: ar.type, ratio: ar.ratio} + this.calculateRatioForLegacyOptions(ar); } else { - this.lastAr = {type: 'static', ar: ar}; + throw 'Ar was passed as a number rather than an object. You missed one.' } } - if (this.extensionMode === ExtensionMode.Basic && !PlayerData.isFullScreen() && ar !== 'reset') { + if (this.extensionMode === ExtensionMode.Basic && !PlayerData.isFullScreen() && ar.type !== AspectRatio.Reset) { // don't actually apply or calculate css when using basic mode if not in fullscreen // ... unless we're resetting the aspect ratio to original return; @@ -117,7 +176,7 @@ class Resizer { if (this.stretcher.mode === Stretch.Basic) { this.conf.arDetector.pause(); } else { - if (this.lastAr.type === 'auto') { + if (this.lastAr.type === AspectRatio.Automatic) { this.conf.arDetector.unpause(); } } @@ -139,7 +198,7 @@ class Resizer { return; } if(this.stretcher.mode === Stretch.Conditional){ - this.stretcher.applyConditionalStretch(stretchFactors, ar); + this.stretcher.applyConditionalStretch(stretchFactors, ar.ratio); } if (Debug.debug) { @@ -147,7 +206,7 @@ class Resizer { } } else if (this.stretcher.mode === Stretch.Hybrid) { - var stretchFactors = this.stretcher.calculateStretch(ar); + var stretchFactors = this.stretcher.calculateStretch(ar.ratio); if (Debug.debug) { console.log('[Resizer::setAr] Processed stretch factors for hybrid stretch/crop. Stretch factors are:', stretchFactors); } @@ -172,7 +231,7 @@ class Resizer { } resetLastAr() { - this.lastAr = {type: 'original'}; + this.lastAr = {type: AspectRatio.Initial}; } setLastAr(override){ @@ -259,7 +318,6 @@ class Resizer { } if(timeout === undefined) { - console.log("?") this.cssCheck(); // no timeout = one-off return; } @@ -282,7 +340,9 @@ class Resizer { } stopCssWatcher() { - if(Debug.debug) console.log("[Resizer.js] STOPPING CSS WATCHER!") + if (Debug.debug) { + console.log("[Resizer.js] STOPPING CSS WATCHER!") + } clearInterval(this.cssWatcherTimeout); } @@ -295,15 +355,15 @@ class Resizer { // this is true until we verify that css has actually been applied this.restore_wd = true; - if(this.lastAr.type === 'original'){ - this.setAr('reset'); + if(this.lastAr.type === AspectRatio.Initial){ + this.setAr({type: AspectRatio.Reset}); } else { - if (this.lastAr && this.lastAr.ar === null) { + if (this.lastAr && this.lastAr.ratio === null) { console.log("[Resizer::restore] LAST AR IS NULL") throw "Last ar is null!" } - this.setAr(this.lastAr.ar, this.lastAr) + this.setAr(this.lastAr, this.lastAr) } } @@ -311,7 +371,7 @@ class Resizer { this.setStretchMode(this.settings.active.sites[window.location.hostname] ? this.settings.active.sites[window.location.hostname].stretch : this.settings.active.sites['@global'].stretch); this.zoom.setZoom(1); this.resetPan(); - this.setAr('reset'); + this.setAr({type: AspectRatio.Reset}); } setPanMode(mode) { @@ -342,7 +402,7 @@ class Resizer { } resetCrop(){ - this.setAr('reset'); + this.setAr({type: AspectRatio.Reset}); } resetStretch(){ diff --git a/src/ext/lib/video-transform/Scaler.js b/src/ext/lib/video-transform/Scaler.js index fd85128..cb35be4 100644 --- a/src/ext/lib/video-transform/Scaler.js +++ b/src/ext/lib/video-transform/Scaler.js @@ -1,4 +1,5 @@ import Debug from '../../conf/Debug'; +import AspectRatio from '../../../common/enums/aspect-ratio.enum'; // računa velikost videa za približevanje/oddaljevanje // does video size calculations for zooming/cropping @@ -11,12 +12,15 @@ class Scaler { constructor(videoData) { this.conf = videoData; } - - modeToAr(mode){ + + modeToAr(ar){ + if (ar.ratio) { + return ar.ratio; + } // Skrbi za "stare" možnosti, kot na primer "na širino zaslona", "na višino zaslona" in "ponastavi". // Približevanje opuščeno. - // handles "legacy" options, such as 'fit to widht', 'fit to height' and 'reset'. No zoom tho - var ar; + // handles "legacy" options, such as 'fit to widht', 'fit to height' and AspectRatio.Reset. No zoom tho + var ratioOut; if (!this.conf.video) { if(Debug.debug){ @@ -28,10 +32,10 @@ class Scaler { if(! this.conf.player.dimensions ){ - ar = screen.width / screen.height; + ratioOut = screen.width / screen.height; } else { - ar = this.conf.player.dimensions.width / this.conf.player.dimensions.height; + ratioOut = this.conf.player.dimensions.width / this.conf.player.dimensions.height; } // POMEMBNO: lastAr je potrebno nastaviti šele po tem, ko kličemo _res_setAr(). _res_setAr() predvideva, @@ -42,26 +46,28 @@ class Scaler { var fileAr = this.conf.video.videoWidth / this.conf.video.videoHeight; - if (mode == "fitw"){ - return ar > fileAr ? ar : fileAr; + if (ar.type === AspectRatio.FitWidth){ + ratioOut > fileAr ? ratioOut : fileAr + ar.ratio = ratioOut; + return ratioOut; } - else if(mode == "fith"){ - return ar < fileAr ? ar : fileAr; + else if(ar.type === AspectRatio.FitHeight){ + ratioOut < fileAr ? ratioOut : fileAr + ar.ratio = ratioOut; + return ratioOut; } - else if(mode == "reset"){ + else if(ar.type === AspectRatio.Reset){ if(Debug.debug){ console.log("[Scaler.js::modeToAr] Using original aspect ratio -", fileAr) } - + ar.ar = fileAr; return fileAr; } return null; } - calculateCrop(mode) { - - + calculateCrop(ar) { if(!this.conf.video || this.conf.video.videoWidth == 0 || this.conf.video.videoHeight == 0){ if(Debug.debug) console.log("[Scaler::calculateCrop] ERROR — no video detected."); @@ -74,27 +80,21 @@ class Scaler { // če je 'ar' string, potem bomo z njim opravili v legacy wrapperju. Seveda obstaja izjema // if 'ar' is string, we'll handle that in legacy wrapper, with one exception - if (mode === 'reset'){ + if (ar.type === AspectRatio.Reset){ return {xFactor: 1, yFactor: 1} } - - var ar = 0; - if(isNaN(mode)){ - ar = this.modeToAr(mode); - } else { - ar = mode; - } + var ratio = this.modeToAr(ar); // handle fuckie-wuckies - if (! ar){ + if (! ratio){ if(Debug.debug) - console.log("[Scaler::calculateCrop] no ar?", ar, " -- we were given this mode:", mode); - return {error: "no_ar", ar: ar}; + console.log("[Scaler::calculateCrop] no ar?", ratio, " -- we were given this mode:", ar); + return {error: "no_ar", ratio: ratio}; } if(Debug.debug) - console.log("[Scaler::calculateCrop] trying to set ar. args are: ar->",ar,"; this.conf.player.dimensions->",this.conf.player.dimensions.width, "×", this.conf.player.dimensions.height, "| obj:", this.conf.player.dimensions); + console.log("[Scaler::calculateCrop] trying to set ar. args are: ar->",ratio,"; this.conf.player.dimensions->",this.conf.player.dimensions.width, "×", this.conf.player.dimensions.height, "| obj:", this.conf.player.dimensions); if( (! this.conf.player.dimensions) || this.conf.player.dimensions.width === 0 || this.conf.player.dimensions.height === 0 ){ if(Debug.debug) @@ -105,18 +105,17 @@ class Scaler { // zdaj lahko končno začnemo računati novo velikost videa // we can finally start computing required video dimensions now: - // Dejansko razmerje stranic datoteke/