Fix false positive 'this site cant work cos drm' errors ... xcept for real

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

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

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){