From 4febd2f6024785e7ee75739881f4125f507450a3 Mon Sep 17 00:00:00 2001 From: Tamius Han Date: Wed, 17 Feb 2021 00:20:30 +0100 Subject: [PATCH 1/6] fix --- src/ext/lib/uwui/UI.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/ext/lib/uwui/UI.js b/src/ext/lib/uwui/UI.js index 2a1cbc5..5821f3e 100644 --- a/src/ext/lib/uwui/UI.js +++ b/src/ext/lib/uwui/UI.js @@ -15,7 +15,7 @@ class UI { ) { this.interfaceId = interfaceId; this.commsConfig = commsConfig; - this.storeConfig = storeConfig, + this.storeConfig = storeConfig; this.uiConfig = uiConfig; this.init(); From b322ef0db19c8b9b8a78334809d229c808b9863e Mon Sep 17 00:00:00 2001 From: Tamius Han Date: Wed, 17 Feb 2021 00:21:25 +0100 Subject: [PATCH 2/6] Fix for #134 --- src/options/AutodetectionSettings.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/options/AutodetectionSettings.vue b/src/options/AutodetectionSettings.vue index 88ad7d3..94915b7 100644 --- a/src/options/AutodetectionSettings.vue +++ b/src/options/AutodetectionSettings.vue @@ -185,7 +185,7 @@
From 6031e3513338a8b7f3955a1ee9c2833be0b6a4ad Mon Sep 17 00:00:00 2001 From: Tamius Han Date: Wed, 17 Feb 2021 00:51:56 +0100 Subject: [PATCH 3/6] Add new DRM detection. Do it _before_ launching AARD --- src/ext/lib/ar-detect/DrmDetecor.js | 48 +++++++++++++++++++++++++++++ src/ext/lib/video-data/VideoData.js | 8 +++++ 2 files changed, 56 insertions(+) create mode 100644 src/ext/lib/ar-detect/DrmDetecor.js diff --git a/src/ext/lib/ar-detect/DrmDetecor.js b/src/ext/lib/ar-detect/DrmDetecor.js new file mode 100644 index 0000000..6462387 --- /dev/null +++ b/src/ext/lib/ar-detect/DrmDetecor.js @@ -0,0 +1,48 @@ +import BrowserDetect from '../../conf/BrowserDetect'; + +/** + * Checks whether video we're trying to play is protected by DRM. + * @param {*} video video we're trying to check + */ +export function hasDrm(video) { + /** + * DRM DETECTION 101: + * + * When trying to get an image frame of a DRM-protected video in + * firefox, the method canvas.drawImage(video) will throw an exception. + * + * This doesn't happen in Chrome. As opposed to Firefox, chrome will + * simply draw a transparent black image and not tell anyone that + * anything is amiss. However, since the image is (according to my testing + * on netflix) completely transparent, this means we can determine whether + * the video is DRM-protected by looking at the alpha byte of the image. + * + * (Videos don't tend to have an alpha channel, so they're always + * completely opaque (i.e. have value of 255)) + */ + + // setup canvas + const canvas = document.createElement('canvas'); + canvas.width = 2; + canvas.height = 2; + const context = canvas.getContext(); + + if (BrowserDetect.firefox) { + try { + context.drawImage(video, 0, 0, canvas.width, canvas.height); + return false; + } catch (e) { + console.error('Exception occured while trying to draw image. Error:', e); + return true; + } + } else if (BrowserDetect.anyChromium) { + // oh btw, there's one exception to the alpha rule. + // 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. + + context.drawImage(video, 0, 0, canvas.width, canvas.height); + return this.blackframeContext.getImageData(0,0,1,1).data[3] === 0; + } +} \ No newline at end of file diff --git a/src/ext/lib/video-data/VideoData.js b/src/ext/lib/video-data/VideoData.js index 9454a08..9d63e2c 100644 --- a/src/ext/lib/video-data/VideoData.js +++ b/src/ext/lib/video-data/VideoData.js @@ -5,6 +5,7 @@ import ArDetector from '../ar-detect/ArDetector'; import AspectRatio from '../../../common/enums/aspect-ratio.enum'; import _ from 'lodash'; import BrowserDetect from '../../conf/BrowserDetect'; +import { hasDrm } from '../ar-detect/DrmDetecor'; class VideoData { @@ -53,6 +54,8 @@ class VideoData { } else if (!this.videoDimensionsLoaded) { this.logger.log('info', 'debug', "%c[VideoData::restoreCrop] Recovering from illegal video dimensions. Resetting aspect ratio.", "background: #afd, color: #132"); + // test for + this.restoreCrop(); this.videoDimensionsLoaded = true; } @@ -450,6 +453,11 @@ class VideoData { // throw {error: 'VIDEO_DATA_DESTROYED', data: {videoData: this}}; return; } + if (hasDrm(this.video)) { + this.player.showNotification('AARD_DRM'); + return; + } + if (this.arDetector){ this.arDetector.init(); } From ec2cd3d6a000ba5b0478023701e9157c0cbc80c6 Mon Sep 17 00:00:00 2001 From: Tamius Han Date: Wed, 17 Feb 2021 01:06:11 +0100 Subject: [PATCH 4/6] Fix DRM detector bugs --- src/ext/lib/ar-detect/DrmDetecor.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/ext/lib/ar-detect/DrmDetecor.js b/src/ext/lib/ar-detect/DrmDetecor.js index 6462387..b264b30 100644 --- a/src/ext/lib/ar-detect/DrmDetecor.js +++ b/src/ext/lib/ar-detect/DrmDetecor.js @@ -25,7 +25,7 @@ export function hasDrm(video) { const canvas = document.createElement('canvas'); canvas.width = 2; canvas.height = 2; - const context = canvas.getContext(); + const context = canvas.getContext('2d'); if (BrowserDetect.firefox) { try { @@ -43,6 +43,7 @@ export function hasDrm(video) { // of whether the video is actually DRM-protected or not. context.drawImage(video, 0, 0, canvas.width, canvas.height); - return this.blackframeContext.getImageData(0,0,1,1).data[3] === 0; + + return context.getImageData(0,0,1,1).data[3] === 0; } } \ No newline at end of file From 6de5ae63554fb602de17369e179f38e6777e1c53 Mon Sep 17 00:00:00 2001 From: Tamius Han Date: Thu, 18 Feb 2021 00:13:34 +0100 Subject: [PATCH 5/6] Fix false positive 'this site cant work cos drm' errors ... xcept for real --- src/ext/lib/ar-detect/ArDetector.js | 52 ++++++++--------------------- src/ext/lib/ar-detect/DrmDetecor.js | 7 ++++ src/ext/lib/video-data/VideoData.js | 18 +++++++--- 3 files changed, 34 insertions(+), 43 deletions(-) diff --git a/src/ext/lib/ar-detect/ArDetector.js b/src/ext/lib/ar-detect/ArDetector.js index ad8f058..674000a 100644 --- a/src/ext/lib/ar-detect/ArDetector.js +++ b/src/ext/lib/ar-detect/ArDetector.js @@ -510,32 +510,6 @@ class ArDetector { id = undefined; } - /** - * Checks whether video we're trying to play is protected by DRM. - * - * When trying to get an image frame of a DRM-protected video in - * firefox, the method canvas.drawImage(video) will throw an exception. - * - * This doesn't happen in Chrome. As opposed to Firefox, chrome will - * simply draw a transparent black image and not tell anyone that - * anything is amiss. However, since the image is (according to my testing - * on netflix) completely transparent, this means we can determine whether - * the video is DRM-protected by looking at the alpha byte of the image. - * - * (Videos don't tend to have an alpha channel, so they're always - * 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; - } - frameCheck(){ if(! this.video){ this.logger.log('error', 'debug', `%c[ArDetect::frameCheck] <@${this.arid}> Video went missing. Destroying current instance of videoData.`); @@ -557,10 +531,10 @@ class ArDetector { this.blackframeContext.drawImage(this.video, 0, 0, this.blackframeCanvas.width, this.blackframeCanvas.height); // special browsers require special tests - if (this.hasDRM()) { - this.fallbackMode = false; - throw 'VIDEO_DRM_PROTECTED'; - } + // if (this.hasDRM()) { + // this.fallbackMode = false; + // 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); @@ -569,17 +543,17 @@ class ArDetector { // 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; + // 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}); - } + // this.conf.player.showNotification('AARD_DRM'); + // this.conf.resizer.setAr({type: AspectRatio.Reset}); + // } - return; - } + // return; + // } if (! this.canvasReadyForDrawWindow()) { // this means canvas needs to be resized, so we'll just re-run setup with all those new parameters diff --git a/src/ext/lib/ar-detect/DrmDetecor.js b/src/ext/lib/ar-detect/DrmDetecor.js index b264b30..b98f977 100644 --- a/src/ext/lib/ar-detect/DrmDetecor.js +++ b/src/ext/lib/ar-detect/DrmDetecor.js @@ -5,6 +5,11 @@ import BrowserDetect from '../../conf/BrowserDetect'; * @param {*} video video we're trying to check */ export function hasDrm(video) { + // if video is not playing, we cannot know whether autodetection will work or not + if (!video || !(video.currentTime > 0 && !video.paused && !video.ended && video.readyState > 2)) { + return undefined; + } + /** * DRM DETECTION 101: * @@ -44,6 +49,8 @@ export function hasDrm(video) { context.drawImage(video, 0, 0, canvas.width, canvas.height); + console.log(context.getImageData(0,0,1,1).data, 'drm result', video.videoTracks) + return context.getImageData(0,0,1,1).data[3] === 0; } } \ No newline at end of file diff --git a/src/ext/lib/video-data/VideoData.js b/src/ext/lib/video-data/VideoData.js index 9d63e2c..894d9ae 100644 --- a/src/ext/lib/video-data/VideoData.js +++ b/src/ext/lib/video-data/VideoData.js @@ -38,9 +38,21 @@ class VideoData { async onVideoLoaded() { if (!this.videoLoaded) { - if (!this.video.videoWidth || !this.video.videoHeight) { + + // video.readyState 101: + // 0 — no info. Can't play. + // 1 — we have metadata but nothing else + // 2 — we have data for current playback position, but not future <--- meaning current frame, meaning Aard can work here or higher + // 3 — we have a lil bit for the future + // 4 — we'll survive to the end + if (!this.video?.videoWidth || !this.video?.videoHeight || this.video.readyState < 2) { return; // onVideoLoaded is a lie in this case } + // const hasDrmResult = hasDrm(this.video); + // if (hasDrmResult === undefined) { + // console.info('video not playing or doesnt exist. doing nothing.'); + // } + this.logger.log('info', 'init', '%c[VideoData::onVideoLoaded] ——————————— Initiating phase two of videoData setup ———————————', 'color: #0f9'); this.videoLoaded = true; @@ -54,8 +66,6 @@ class VideoData { } else if (!this.videoDimensionsLoaded) { this.logger.log('info', 'debug', "%c[VideoData::restoreCrop] Recovering from illegal video dimensions. Resetting aspect ratio.", "background: #afd, color: #132"); - // test for - this.restoreCrop(); this.videoDimensionsLoaded = true; } @@ -455,7 +465,7 @@ class VideoData { } if (hasDrm(this.video)) { this.player.showNotification('AARD_DRM'); - return; + // return; } if (this.arDetector){ From 5c6ea49c669ed630def01b34b477e26c28a43a25 Mon Sep 17 00:00:00 2001 From: Tamius Han Date: Thu, 18 Feb 2021 00:13:51 +0100 Subject: [PATCH 6/6] Version bump + version notes --- CHANGELOG.md | 2 ++ src/manifest.json | 2 +- src/popup/panels/WhatsNewPanel.vue | 6 ++++++ 3 files changed, 9 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 38f9247..c716e20 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -19,6 +19,8 @@ ### v4.5.3 * Provides workaround for the fullscreen stretching bug Chrome 88 (or a recent Windows 10 update) introduced for nVidia users using hardware acceleration on Windows 10. In order to mitigate this bug, Ultrawidify needs to keep a 5-10 px wide black border while watching videos in full screen. This bug is also present in Edge. +* **[4.5.3.1]** Fixed letterbox misalignment binding in settings (#134) +* **[4.5.3.1]** Fixed false 'autodetection not supported' notifications. ### v4.5.2 diff --git a/src/manifest.json b/src/manifest.json index d9744e7..a859168 100644 --- a/src/manifest.json +++ b/src/manifest.json @@ -2,7 +2,7 @@ "manifest_version": 2, "name": "Ultrawidify", "description": "Removes black bars on ultrawide videos and offers advanced options to fix aspect ratio.", - "version": "4.5.3", + "version": "4.5.3.1", "applications": { "gecko": { "id": "{cf02b1a7-a01a-4e37-a609-516a283f1ed3}" diff --git a/src/popup/panels/WhatsNewPanel.vue b/src/popup/panels/WhatsNewPanel.vue index 1b744f8..fce5e25 100644 --- a/src/popup/panels/WhatsNewPanel.vue +++ b/src/popup/panels/WhatsNewPanel.vue @@ -7,6 +7,12 @@
  • Provided a workaround for the fullscreen stretching bug Chrome 88 (or a recent Windows 10 update) introduced for nVidia users using hardware acceleration on Windows 10. In order to mitigate this bug, Ultrawidify needs to keep a 5-10 px wide black border while watching videos in full screen. This bug is also present in Edge.
    • +
  • + [4.5.3.1] Fixed binding for letterbox misalignment treshold binding in settings. +
    • +
  • + [4.5.3.1] Removed false positive "this extension can't work due to DRM" notifications. Note that this also gets rid of all such notifications in non-Firefox browsers. +