Fix Scene Player CLS issue (#1739)

ui/v2.5/src/components/Changelog/versions/v0100.md

@@ -14,6 +14,7 @@
 * Added sv-SE language option. ([#1691](https://github.com/stashapp/stash/pull/1691))
 
 ### 🐛 Bug fixes
+* Fix Scene Player CLS issue ([#1739](https://github.com/stashapp/stash/pull/1739))
 * Fix Scene Edit Panel form layout for mobile and desktop. ([#1737](https://github.com/stashapp/stash/pull/1737))
 * Fix Gallery create plugin hook not being invoked when creating Gallery from folder. ([#1731](https://github.com/stashapp/stash/pull/1731)) 
 * Fix tag aliases not being matched when autotagging from the tasks page. ([#1713](https://github.com/stashapp/stash/pull/1713))

ui/v2.5/src/components/ScenePlayer/ScenePlayer.tsx

@@ -349,6 +349,7 @@ export class ScenePlayerImpl extends React.Component<
           onSeeked={this.onSeeked}
           onTime={this.onTime}
           onOneHundredPercent={() => this.onComplete()}
+          className="video-wrapper"
         />
         <ScenePlayerScrubber
           scene={this.props.scene}

ui/v2.5/src/components/ScenePlayer/styles.scss

@@ -1,43 +1,31 @@
 $scrubberHeight: 120px;
+$menuHeight: 4rem;
+$sceneTabWidth: 450px;
 
 #jwplayer-container {
-  /* full height minus the top navbar */
-  height: calc(100vh - 4rem);
+  display: flex;
+  flex-direction: column;
+  max-height: calc(100vh - #{$menuHeight});
   padding-bottom: 0.25rem;
 
-  @media (max-width: 1200px) {
-    height: inherit;
-
-    .jw-aspect {
-      display: block;
-      height: 56.25vw;
-      max-height: calc(100vh - #{$scrubberHeight} - 4.25rem - 15px);
-    }
-
-    &.portrait .jw-aspect {
-      height: 177.78vw;
-    }
-  }
-  @media (max-height: 449px), (max-width: 575px) {
-    .jw-aspect {
-      max-height: calc(100vh - 4.25rem);
-    }
+  @media (min-width: 1200px) {
+    height: 100vh;
   }
 
   & video:focus {
     outline: 0;
   }
 
-  > div:first-child {
-    /* minus the scrubber height and margin */
-    height: calc(100% - #{$scrubberHeight} - 15px);
-  }
-}
+  .video-wrapper {
+    height: 56.25vw;
 
-/* scrubber is hidden when height < 450px or width < 576, so use entire height for scene player */
-@media (max-height: 449px), (max-width: 575px) {
-  #jwplayer-container > div:first-child {
-    height: 100%;
+    @media (min-width: 1200px) {
+      height: 100%;
+    }
+  }
+
+  &.portrait .video-wrapper {
+    height: 177.78vw;
   }
 }
 
@@ -57,9 +45,6 @@ $scrubberHeight: 120px;
     padding-right: 15px;
   }
 }
-
-$sceneTabWidth: 450px;
-
 @media (min-width: 1200px) {
   .scene-tabs {
     flex: 0 0 $sceneTabWidth;
@@ -117,6 +102,7 @@ $sceneTabWidth: 450px;
 }
 
 .scrubber-wrapper {
+  flex-shrink: 0;
   margin: 5px 0;
   overflow: hidden;
   position: relative;