diff --git a/CHANGELOG.md b/CHANGELOG.md index e5af22b..3ca3532 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -16,16 +16,23 @@ ## v4.x (current major) +### v4.5.2 + +* Fixed the issue where videos would sometimes get misaligned while using hybrid stretch, except for real this time. ([#125](https://github.com/tamius-han/ultrawidify/issues/125)) +* Improved DRM detection (the 'autodetection cannot work on this site' popup should now no longer show up on the sites where autodetection _can_ work) + ### v4.5.1 * Fixed the misalignment issue on netflix ... hopefully. * 'Site settings' tab should now work in Chrome as well ([#126](https://github.com/tamius-han/ultrawidify/issues/126)) * Popup interface now refreshes properly ([#127](https://github.com/tamius-han/ultrawidify/issues/127)) * Videos should now be scaled correctly when the display is narrower than video's native aspect ratio ([#118](https://github.com/tamius-han/ultrawidify/issues/118)) -* Edge users using CWS version of the extension get a very aggressive warning when trying to use the extension with Edge * Fullscreen videos on streamable are aligned correctly ([#116](https://github.com/tamius-han/ultrawidify/issues/118)). * **[4.5.1.1]** Streamable fix broke old.reddit + RES on embeds from v.redd.it and streamable.com. We're now using an alternative implementation. ([#128](https://github.com/tamius-han/ultrawidify/issues/128)) * **[4.5.1.2]** Fixed the issue where videos would sometimes get misaligned while using hybrid stretch. ([#125](https://github.com/tamius-han/ultrawidify/issues/125)) +* **[4.5.1.3]** Added fix for disney plus +* **[4.5.1.3]** Microsoft Edge has fixed the bugs that prevented the extension from working properly. Popup should no longer be shown. + ### v4.5.0 (Current) diff --git a/package-lock.json b/package-lock.json index e51b632..e885ec9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "ultrawidify", - "version": "4.5.1", + "version": "4.5.2", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index a46fe5a..2cebcce 100644 --- a/package.json +++ b/package.json @@ -1,11 +1,11 @@ { "name": "ultrawidify", - "version": "4.5.1", + "version": "4.5.2", "description": "Aspect ratio fixer for youtube and other sites, with automatic aspect ratio detection. Supports ultrawide and other ratios.", "author": "Tamius Han ", "scripts": { "build": "npm run pre-build; cross-env NODE_ENV=production BROWSER=firefox CHANNEL=stable webpack --hide-modules", - "build-all": "mkdir -p ./build/old; npm run pre-build; rm ./dist-zip/uw-amo-source.zip; mv -f ./dist-zip/*.zip ./build/old; npm run build; node scripts/build-zip.js ff; npm run build-chrome; node scripts/build-zip.js chrome; ./scripts/prepare-amo-source.sh", + "build-all": "mkdir -p ./build/old; npm run pre-build; rm ./dist-zip/uw-amo-source.zip; mv -f ./dist-zip/*.zip ./build/old; npm run build; node scripts/build-zip.js ff; npm run build-chrome; node scripts/build-zip.js chrome; npm run build-edge; node scripts/build-zip.js edge; ./scripts/prepare-amo-source.sh", "build-chrome": "cross-env NODE_ENV=production BROWSER=chrome CHANNEL=stable webpack --hide-modules", "build-chrome:dev": "cross-env NODE_ENV=development BROWSER=chrome webpack --hide-modules", "build-edge": "cross-env NODE_ENV=production BROWSER=edge CHANNEL=stable webpack --hide-modules", diff --git a/src/common/enums/aspect-ratio.enum.js b/src/common/enums/aspect-ratio.enum.js index 95c92f1..46c1f7d 100644 --- a/src/common/enums/aspect-ratio.enum.js +++ b/src/common/enums/aspect-ratio.enum.js @@ -6,6 +6,19 @@ var AspectRatio = Object.freeze({ FitHeight: 3, // legacy/dynamic: fit to height Fixed: 4, // pre-determined aspect ratio Manual: 5, // ratio achieved by zooming in/zooming out + + toString: (ar) => { + switch (ar) { + case -1: return 'Initial'; + case 0: return 'Reset'; + case 1: return 'Automatic'; + case 2: return 'FitWidth'; + case 3: return 'FitHeight'; + case 4: return 'Fixed'; + case 5: return 'Manual'; + default: return '' + } + } }); export default AspectRatio; diff --git a/src/csui/PlayerUiComponent.vue b/src/csui/PlayerUiComponent.vue index 7d48dc6..53f2588 100644 --- a/src/csui/PlayerUiComponent.vue +++ b/src/csui/PlayerUiComponent.vue @@ -61,6 +61,9 @@ export default { console.log("store:", this.$store, this); }, methods: { + getUrl(url) { + return BrowserDetect.getURL(url); + }, } } diff --git a/src/ext/conf/BrowserDetect.js b/src/ext/conf/BrowserDetect.js index d2d58e5..a552e7d 100644 --- a/src/ext/conf/BrowserDetect.js +++ b/src/ext/conf/BrowserDetect.js @@ -4,16 +4,28 @@ if (process.env.CHANNEL !== 'stable') { console.info('Loaded BrowserDetect'); } +function detectEdgeUA() { + return /Edg\/(\.?[0-9]*)*$/.test(window.navigator.userAgent); +} + +function getBrowserObj() { + return process.env.BROWSER === 'firefox' ? browser : chrome; +} + +function getURL(url) { + return process.env.BROWSER === 'firefox' ? browser.runtime.getURL(url) : chrome.runtime.getURL(url); +} const BrowserDetect = { firefox: process.env.BROWSER === 'firefox', + anyChromium: process.env.BROWSER !== 'firefox', chrome: process.env.BROWSER === 'chrome', edge: process.env.BROWSER === 'edge', processEnvBrowser: process.env.BROWSER, processEnvChannel: process.env.CHANNEL, - isEdgeUA: () => /Edg\/(\.?[0-9]*)*$/.test(window.navigator.userAgent), - getBrowserObj: () => { return process.env.BROWSER === 'firefox' ? browser : chrome; }, - getURL: (url) => { console.log('getting file:', url); console.log(process.env.BROWSER === 'firefox' ? browser.runtime.getURL(url) : chrome.runtime.getURL(url)); return process.env.BROWSER === 'firefox' ? browser.runtime.getURL(url) : chrome.runtime.getURL(url); }, + isEdgeUA: detectEdgeUA(), + browserObj: getBrowserObj(), + getURL: (url) => getURL(url), } if (process.env.CHANNEL !== 'stable') { diff --git a/src/ext/conf/ExtConfPatches.js b/src/ext/conf/ExtConfPatches.js index 242e449..349a2c2 100644 --- a/src/ext/conf/ExtConfPatches.js +++ b/src/ext/conf/ExtConfPatches.js @@ -436,6 +436,15 @@ const ExtensionConfPatch = [ userOptions.sites['streamable.com'].css = '.player {text-align: left}' }; } + }, { + forVersion: '4.5.1.3', + updateFn: (userOptions, defaultOptions) => { + try { + userOptions.sites['wwww.disneyplus.com']['css'] = ".hudson-container {\n height: 100%;\n}"; + } catch (e) { + // do nothing if disney+ is missing + } + } } ]; diff --git a/src/ext/conf/ExtensionConf.js b/src/ext/conf/ExtensionConf.js index d8b3412..0da109d 100644 --- a/src/ext/conf/ExtensionConf.js +++ b/src/ext/conf/ExtensionConf.js @@ -1066,7 +1066,8 @@ var ExtensionConf = { "useRelativeAncestor": false, "playerNodeCss": "" } - } + }, + css: ".hudson-container { height: 100%; }", }, "www.twitch.tv": { mode: ExtensionMode.Enabled, @@ -1145,13 +1146,6 @@ var ExtensionConf = { }, css: 'video {\n width: 100% !important;\n height: 100% !important;\n}', }, - "www.disneyplus.com": { - DOM: { - player: { - periodicallyRefreshPlayerElement: true, - } - } - }, "imgur.com": { mode: -1, autoar: -1, diff --git a/src/ext/lib/ar-detect/ArDetector.js b/src/ext/lib/ar-detect/ArDetector.js index 48b5fe8..ad8f058 100644 --- a/src/ext/lib/ar-detect/ArDetector.js +++ b/src/ext/lib/ar-detect/ArDetector.js @@ -474,19 +474,19 @@ class ArDetector { // poglejmo, če se je razmerje stranic spremenilo // check if aspect ratio is changed: - var lastAr = this.conf.resizer.getLastAr(); + let lastAr = this.conf.resizer.getLastAr(); if (lastAr.type === AspectRatio.Automatic && lastAr.ratio !== null && lastAr.ratio !== undefined){ // spremembo lahko zavrnemo samo, če uporabljamo avtomatski način delovanja in če smo razmerje stranic // že nastavili. // // we can only deny aspect ratio changes if we use automatic mode and if aspect ratio was set from here. - var arDiff = trueAr - lastAr.ar; + let arDiff = trueAr - lastAr.ar; if (arDiff < 0) arDiff = -arDiff; - var arDiff_percent = arDiff / trueAr; + const arDiff_percent = arDiff / trueAr; // ali je sprememba v mejah dovoljenega? Če da -> fertik // is ar variance within acceptable levels? If yes -> we done @@ -526,6 +526,13 @@ class ArDetector { * completely opaque (i.e. have value of 255)) */ hasDRM() { + // oh btw, there's one exception. There is this brief period between the point + // when metadata (video dimensions) have loaded and the moment the video starts + // playing where ctx.drawImage() will draw a transparent black square regardless + // of whether the video is actually DRM-protected or not. + if (! this.conf.hasVideoStartedPlaying()) { + return false; + } return this.blackframeContext.getImageData(0,0,1,1).data[3] === 0; } @@ -552,27 +559,25 @@ class ArDetector { // special browsers require special tests if (this.hasDRM()) { this.fallbackMode = false; - throw 'Video is protected by DRM. Autodetection cannot run here.'; + throw 'VIDEO_DRM_PROTECTED'; } this.fallbackMode = false; } catch (e) { this.logger.log('error', 'arDetect', `%c[ArDetect::frameCheck] <@${this.arid}> %c[ArDetect::frameCheck] can't draw image on canvas. ${this.canDoFallbackMode ? 'Trying canvas.drawWindow instead' : 'Doing nothing as browser doesn\'t support fallback mode.'}`, "color:#000; backgroud:#f51;", e); - // nothing to see here, really, if fallback mode isn't supported by browser - if (!this.drmNotificationShown) { - this.drmNotificationShown = true; - - // if we detect Edge, we'll throw the aggressive popup - this.conf.player.showEdgeNotification(); - this.conf.player.showNotification('AARD_DRM'); - - this.conf.resizer.setAr({type: AspectRatio.Reset}); - return; - } - // in case of DRM errors, we need to prevent the execution to reach the aspec - // ratio setting part of this function - if (e === 'Video is protected by DRM. Autodetection cannot run here.') { + // ratio setting part of this function. For the time being, we're only stopping + // in case we encounter DRM error in Chrome. Firefox has fallback mode and generates + // different error, so that goes. + if (e === 'VIDEO_DRM_PROTECTED') { + // nothing to see here, really, if fallback mode isn't supported by browser + if (!this.drmNotificationShown) { + this.drmNotificationShown = true; + + this.conf.player.showNotification('AARD_DRM'); + this.conf.resizer.setAr({type: AspectRatio.Reset}); + } + return; } diff --git a/src/ext/lib/comms/CommsClient.js b/src/ext/lib/comms/CommsClient.js index 8f6ef89..e6e0c30 100644 --- a/src/ext/lib/comms/CommsClient.js +++ b/src/ext/lib/comms/CommsClient.js @@ -11,7 +11,7 @@ class CommsClient { if (BrowserDetect.firefox) { this.port = browser.runtime.connect({name: name}); - } else if (BrowserDetect.chrome) { + } else if (BrowserDetect.anyChromium) { this.port = chrome.runtime.connect({name: name}); } diff --git a/src/ext/lib/video-data/PlayerData.js b/src/ext/lib/video-data/PlayerData.js index 4fbad9e..f0bb109 100644 --- a/src/ext/lib/video-data/PlayerData.js +++ b/src/ext/lib/video-data/PlayerData.js @@ -489,9 +489,9 @@ class PlayerData { * NOTE: this method needs to be deleted once Edge gets its shit together. */ showEdgeNotification() { - if (BrowserDetect.isEdgeUA() && !this.settings.active.mutedNotifications?.browserSpecific?.edge?.brokenDrm?.[window.hostname]) { - this.ui = new PlayerUi(this.element, this.settings); - } + // if (BrowserDetect.isEdgeUA && !this.settings.active.mutedNotifications?.browserSpecific?.edge?.brokenDrm?.[window.hostname]) { + // this.ui = new PlayerUi(this.element, this.settings); + // } } } diff --git a/src/ext/lib/video-data/VideoData.js b/src/ext/lib/video-data/VideoData.js index 9e62f8f..8f7d727 100644 --- a/src/ext/lib/video-data/VideoData.js +++ b/src/ext/lib/video-data/VideoData.js @@ -33,6 +33,9 @@ class VideoData { async onVideoLoaded() { if (!this.videoLoaded) { + if (!this.video.videoWidth || !this.video.videoHeight) { + return; // onVideoLoaded is a lie in this case + } this.logger.log('info', 'init', '%c[VideoData::onVideoLoaded] ——————————— Initiating phase two of videoData setup ———————————', 'color: #0f9'); this.videoLoaded = true; @@ -48,10 +51,13 @@ class VideoData { this.restoreCrop(); this.videoDimensionsLoaded = true; - } } + videoUnloaded() { + this.videoLoaded = false; + } + async injectBaseCss() { try { await this.pageInfo.injectCss(` @@ -71,25 +77,43 @@ class VideoData { this.video.classList.remove('uw-ultrawidify-base-wide-screen'); } + //#region