Merge branch 'master' into typescriptify

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
 

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: AspectRatioType.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

src/ext/lib/ar-detect/DrmDetecor.js

@@ -0,0 +1,56 @@
+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) {
+  // 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:
+   *
+   * 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('2d');
+
+  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);
+
+    console.log(context.getImageData(0,0,1,1).data, 'drm result', video.videoTracks)
+
+    return context.getImageData(0,0,1,1).data[3] === 0;
+  }
+}

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();

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}"

src/options/AutodetectionSettings.vue

@@ -185,7 +185,7 @@
         </div>
         <div class="flex flex-input">
           <input type="text"
-                 v-model="settings.active.arDetect.allowedMisaligned"
+                 v-model="settings.active.arDetect.pillarTest.allowMisaligned"
           />
         </div>
       </div>

src/popup/panels/WhatsNewPanel.vue

@@ -7,6 +7,12 @@
       <li>
         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.
       </li>
+      <li>
+        <b>[4.5.3.1]</b> Fixed binding for letterbox misalignment treshold binding in settings.
+      </li>
+      <li>
+        <b>[4.5.3.1]</b> 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.
+      </li>
     </ul>
   </div>
 </template>