From 907eb2eb14ece55b43f117212406a1086bb7667d Mon Sep 17 00:00:00 2001
From: Varun Patil <varunpatil@ucla.edu>
Date: Thu, 1 Dec 2022 12:48:29 -0800
Subject: [PATCH] FIx multiple redundant transcodes

---
 src/components/PsVideo.ts | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/components/PsVideo.ts b/src/components/PsVideo.ts
index 3140811f..1240b7a2 100644
--- a/src/components/PsVideo.ts
+++ b/src/components/PsVideo.ts
@@ -210,13 +210,18 @@ class VideoContentSetup {
     content.videojs.on("canplay", () => {
       canPlay = true;
       this.updateRotation(content); // also gets the correct video elem as a side effect
-
-      // Wait (also below) for the transition to end
-      window.setTimeout(() => this.initPlyr(content), 250);
+      window.setTimeout(() => this.initPlyr(content), 0);
     });
 
     content.videojs.qualityLevels()?.on("addqualitylevel", (e) => {
-      window.setTimeout(() => this.initPlyr(content), 250);
+      if (e.qualityLevel?.label?.includes("max.m3u8")) {
+        // This is the highest quality level
+        // and guaranteed to be the last one
+        this.initPlyr(content);
+      }
+
+      // Fallback
+      window.setTimeout(() => this.initPlyr(content), 0);
     });
 
     // Get correct orientation
@@ -317,6 +322,12 @@ class VideoContentSetup {
 
     content.plyr = plyr;
 
+    // Wait for animation to end before showing Plyr
+    plyr.elements.container.style.opacity = "0";
+    setTimeout(() => {
+      plyr.elements.container.style.opacity = "1";
+    }, 250);
+
     // Restore original parent of video element
     origParent.appendChild(content.videoElement);
     // Move plyr to the slide container