Add collapse button to scene page (#838)

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

@@ -3,6 +3,7 @@
 * Add selective scene export.
 
 ### 🎨 Improvements
+* Add button to hide left panel on scene page.
 * Add link to parent studio in studio page.
 * Add missing scenes movie filter.
 * Add gallery icon to scene cards.

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

@@ -41,6 +41,14 @@ $scrubberHeight: 120px;
   }
 }
 
+.scene-tabs,
+.scene-player-container {
+  padding-left: 15px;
+  padding-right: 15px;
+  position: relative;
+  width: 100%;
+}
+
 $sceneTabWidth: 450px;
 
 @media (min-width: 1200px) {
@@ -48,20 +56,48 @@ $sceneTabWidth: 450px;
     flex: 0 0 $sceneTabWidth;
     max-width: $sceneTabWidth;
     overflow: auto;
+
+    &.collapsed {
+      display: none;
+    }
+  }
+
+  .scene-divider {
+    flex: 0 0 15px;
+    max-width: 15px;
+
+    button {
+      background-color: transparent;
+      border: 0;
+      color: $link-color;
+      cursor: pointer;
+      font-size: 10px;
+      font-weight: 800;
+      height: 100%;
+      line-height: 100%;
+      padding: 0;
+      text-align: center;
+      width: 100%;
+
+      &:active:not(:hover),
+      &:focus:not(:hover) {
+        background-color: transparent;
+        border: 0;
+        box-shadow: none;
+      }
+    }
   }
 
   .scene-player-container {
-    flex: 0 0 calc(100% - #{$sceneTabWidth});
+    flex: 0 0 calc(100% - #{$sceneTabWidth} - 15px);
-    max-width: calc(100% - #{$sceneTabWidth});
+    max-width: calc(100% - #{$sceneTabWidth} - 15px);
-  }
+    padding-left: 0;
-}
 
-.scene-tabs,
+    &.expanded {
-.scene-player-container {
+      flex: 0 0 calc(100% - 15px);
-  padding-left: 15px;
+      max-width: calc(100% - 15px);
-  padding-right: 15px;
+    }
-  position: relative;
+  }
-  width: 100%;
 }
 
 .scrubber-wrapper {

ui/v2.5/src/components/Scenes/SceneDetails/Scene.tsx

@@ -1,4 +1,4 @@
-import { Tab, Nav, Dropdown } from "react-bootstrap";
+import { Tab, Nav, Dropdown, Button } from "react-bootstrap";
 import queryString from "query-string";
 import React, { useEffect, useState } from "react";
 import { useParams, useLocation, useHistory, Link } from "react-router-dom";
@@ -37,6 +37,7 @@ export const Scene: React.FC = () => {
   const Toast = useToast();
   const [generateScreenshot] = useSceneGenerateScreenshot();
   const [timestamp, setTimestamp] = useState<number>(getInitialTimestamp());
+  const [collapsed, setCollapsed] = useState(false);
 
   const [scene, setScene] = useState<GQL.SceneDataFragment | undefined>();
   const { data, error, loading } = useFindScene(id);
@@ -315,6 +316,10 @@ export const Scene: React.FC = () => {
     };
   });
 
+  function getCollapseButtonText() {
+    return collapsed ? ">" : "<";
+  }
+
   if (loading || streamableLoading || !scene || !data?.findScene) {
     return <LoadingIndicator />;
   }
@@ -326,7 +331,11 @@ export const Scene: React.FC = () => {
     <div className="row">
       {maybeRenderSceneGenerateDialog()}
       {maybeRenderDeleteDialog()}
-      <div className="scene-tabs order-xl-first order-last">
+      <div
+        className={`scene-tabs order-xl-first order-last ${
+          collapsed ? "collapsed" : ""
+        }`}
+      >
         <div className="d-none d-xl-block">
           {scene.studio && (
             <h1 className="text-center">
@@ -345,7 +354,16 @@ export const Scene: React.FC = () => {
         </div>
         {renderTabs()}
       </div>
-      <div className="scene-player-container">
+      <div className="scene-divider d-none d-xl-block">
+        <Button
+          onClick={() => {
+            setCollapsed(!collapsed);
+          }}
+        >
+          {getCollapseButtonText()}
+        </Button>
+      </div>
+      <div className={`scene-player-container ${collapsed ? "expanded" : ""}`}>
         <ScenePlayer
           className="w-100 m-sm-auto no-gutter"
           scene={scene}