fix: css animation forwards causing UI lag

muxinc · Aug 5, 2024 · 27735f2 · 27735f2
1 parent 05ed19b
commit 27735f2
Showing 1 changed file with 10 additions and 1 deletion.
diff --git a/packages/mux-player/src/themes/gerwig/gerwig.html b/packages/mux-player/src/themes/gerwig/gerwig.html
@@ -335,7 +335,16 @@
     [breakpointsm]:is([mediahasplayed], :not([mediapaused])):not([audio])
       .center-controls.pre-playback
       media-play-button {
-      animation: 0.3s linear forwards pre-play-hide;
+      /* Using `forwards` would lead to a laggy UI after the animation got in the end state */
+      animation: 0.3s linear pre-play-hide;
+      opacity: 0;
+      pointer-events: none;
+    }
+
+    /* Prevent re-running the animation when hasplayed and paused */
+
+    [breakpointsm][mediahasplayed][mediapaused]:not([audio]) .center-controls.pre-playback media-play-button {
+      animation: none;
     }
 
     .autoplay-unmute {