(feat): Change dimensions on-the-fly when video metadata is loaded

src/app/modules/media/components/video-player/player.component.html

@@ -21,6 +21,7 @@
       (plyrPlay)="onPlayed($event)"
       (plyrEnterFullScreen)="fullScreenChange.next($event)"
       (plyrExitFullScreen)="fullScreenChange.next($event)"
+      (plyrLoadedMetadata)="emitDimensions($event)"
     >
     </plyr>
   </div>

src/app/modules/media/components/video-player/player.component.ts

@@ -32,6 +32,11 @@ export class MindsVideoPlayerComponent implements OnInit, OnDestroy {
    */
   @Output() fullScreenChange: EventEmitter<Event> = new EventEmitter();
 
+  /**
+   * Dimension change event for parent components
+   */
+  @Output() dimensions: EventEmitter<any> = new EventEmitter<any>();
+
   /**
    * This is the video player component
    */
@@ -142,4 +147,26 @@ export class MindsVideoPlayerComponent implements OnInit, OnDestroy {
       return;
     }
   }
+
+  /**
+   * Emits dimensions to parent component,
+   * called after HTML5 metadata is loaded
+   * @param e
+   */
+  emitDimensions(e) {
+    try {
+      const media = e.detail.plyr.media;
+
+      if (!media) {
+        return;
+      }
+
+      this.dimensions.next({
+        width: media.videoWidth,
+        height: media.videoHeight,
+      });
+    } catch (e) {
+      console.info('Error emitting dimensions', e);
+    }
+  }
 }

src/app/modules/media/modal/modal.component.html

@@ -54,6 +54,7 @@
               isModal="true"
               autoplay="true"
               (fullScreenChange)="onFullscreenChange($event)"
+              (dimensions)="onDimensions($event)"
             ></m-videoPlayer>
           </div>
 

src/app/modules/media/modal/modal.component.ts

@@ -368,8 +368,13 @@ export class MediaModalComponent implements OnInit, OnDestroy {
     // (but don't actually redirect)
     this.location.replaceState(this.pageUrl);
 
-    // * DIMENSION CALCULATIONS * ---------------------------------------------------------------------
+    // Set Dimensions based on entity
+    this.setEntityDimensions();
+  }
+
+  // * DIMENSION CALCULATIONS * ---------------------------------------------------------------------
 
+  setEntityDimensions() {
     switch (this.contentType) {
       case 'video':
       case 'image':
@@ -549,6 +554,15 @@ export class MediaModalComponent implements OnInit, OnDestroy {
     return Math.round(this.mediaHeight * this.aspectRatio);
   }
 
+  onDimensions($event) {
+    if ($event.width && $event.height) {
+      this.entity.width = $event.width;
+      this.entity.height = $event.height;
+
+      this.setEntityDimensions();
+    }
+  }
+
   // * FULLSCREEN * --------------------------------------------------------------------------------
   // Listen for fullscreen change event in case user enters/exits full screen without clicking button
   @HostListener('document:fullscreenchange', ['$event'])