also hide titlebar when autohideControls = true

Author: OpenHypervideo

src/player/modules/Sidebar/style.css

@@ -8,11 +8,10 @@
     color: #cececb;
     font-weight: 100;
     z-index: 4;
-    /*box-shadow: 0 0 2px 1px #000;*/
-    -webkit-transition: all 200ms linear; /* Firefox */
-    -moz-transition: all 200ms linear; /* WebKit */
-    -o-transition: all 200ms linear; /* Opera */
-    transition: all 200ms linear; /* Standard */
+    transition: all 200ms linear;
+    overflow-x: hidden;
+    overflow-y: auto;
+    scrollbar-width: thin;
 }
 
 .sidebar.open {

src/player/modules/ViewVideo/module.js

@@ -722,12 +722,13 @@ FrameTrail.defineModule('ViewVideo', function(FrameTrail){
 
         var isMobileWidth = (_target.offsetWidth <= 768),
             inEditMode = (FrameTrail.getState('editMode') != false && FrameTrail.getState('editMode') != 'preview' && FrameTrail.getState('editMode') != 'layout'),
+            autohideTitlebar = (FrameTrail.getState('hv_config_autohideControls') && FrameTrail.getState('editMode') == false),
             editBorder = (FrameTrail.getState('editMode') != false) ? (parseInt(getComputedStyle(domElement).borderTopWidth)*2) : 0,
             mainContainerWidth  = _target.offsetWidth
                                     - ((FrameTrail.getState('sidebarOpen') && !FrameTrail.getState('fullscreen')) ? FrameTrail.module('Sidebar').width : 0)
                                     - editBorder,
             mainContainerHeight = _target.offsetHeight
-                                    - _titlebar.offsetHeight
+                                    - (autohideTitlebar ? 0 : _titlebar.offsetHeight)
                                     - editBorder,
             _video              = Video,
             videoFit            = (FrameTrail.module('Database').config.videoFit) ? FrameTrail.module('Database').config.videoFit : 'contain';
@@ -1163,13 +1164,16 @@ FrameTrail.defineModule('ViewVideo', function(FrameTrail){
      */
     function toggleConfig_autohideControls(newState, oldState) {
 
+        var _target = document.querySelector(FrameTrail.getState('target'));
         if (newState) {
-            document.body.classList.add('autohideControls');
+            _target.classList.add('autohideControls');
         } else {
-            document.body.classList.remove('autohideControls');
-            document.body.classList.remove('userinactive');
+            _target.classList.remove('autohideControls');
+            _target.classList.remove('userinactive');
         }
 
+        adjustHypervideo();
+
     };
 
 
@@ -1532,10 +1536,11 @@ FrameTrail.defineModule('ViewVideo', function(FrameTrail){
     function toggleUserActive(activeState) {
 
         if (FrameTrail.getState('hv_config_autohideControls')) {
+            var _target = document.querySelector(FrameTrail.getState('target'));
             if (activeState) {
-                document.body.classList.remove('userinactive');
+                _target.classList.remove('userinactive');
             } else {
-                document.body.classList.add('userinactive');
+                _target.classList.add('userinactive');
             }
         }
 

src/player/modules/ViewVideo/style.css

@@ -80,8 +80,9 @@
 }
 
 /* Autohide: overlay controls on top of the video so no empty space remains.
-   Active in player mode and preview mode, but not in real edit modes. */
-body.autohideControls .mainContainer:not([data-edit-mode="overlays"]):not([data-edit-mode="annotations"]):not([data-edit-mode="codesnippets"]):not([data-edit-mode="layout"]) .playerContainer .controls {
+   Active in player mode and preview mode, but not in real edit modes.
+   Classes are set on the target element (.frametrail-body), not body. */
+.autohideControls .mainContainer:not([data-edit-mode="overlays"]):not([data-edit-mode="annotations"]):not([data-edit-mode="codesnippets"]):not([data-edit-mode="layout"]) .playerContainer .controls {
     position: absolute;
     bottom: 0;
     left: 0;
@@ -90,7 +91,7 @@ body.autohideControls .mainContainer:not([data-edit-mode="overlays"]):not([data-
     transition: visibility 0.4s, opacity 0.4s;
 }
 
-body.autohideControls .mainContainer:not([data-edit-mode="overlays"]):not([data-edit-mode="annotations"]):not([data-edit-mode="codesnippets"]):not([data-edit-mode="layout"]) .playerContainer .playerProgress {
+.autohideControls .mainContainer:not([data-edit-mode="overlays"]):not([data-edit-mode="annotations"]):not([data-edit-mode="codesnippets"]):not([data-edit-mode="layout"]) .playerContainer .playerProgress {
     position: absolute;
     bottom: 40px;
     left: 0;
@@ -99,14 +100,31 @@ body.autohideControls .mainContainer:not([data-edit-mode="overlays"]):not([data-
     transition: visibility 0.4s, opacity 0.4s;
 }
 
-body.userinactive .mainContainer:not([data-edit-mode="overlays"]):not([data-edit-mode="annotations"]):not([data-edit-mode="codesnippets"]):not([data-edit-mode="layout"]) .playerContainer .controls,
-body.userinactive .mainContainer:not([data-edit-mode="overlays"]):not([data-edit-mode="annotations"]):not([data-edit-mode="codesnippets"]):not([data-edit-mode="layout"]) .playerContainer .playerProgress {
+/* Titlebar: only autohide when NOT in edit mode (not even preview) */
+.autohideControls:has(.mainContainer:not(.editActive)) > .titlebar {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    width: 100%;
+    background: var(--secondary-bg-color);
+    transition: visibility 0.4s, opacity 0.4s;
+}
+
+.userinactive .mainContainer:not([data-edit-mode="overlays"]):not([data-edit-mode="annotations"]):not([data-edit-mode="codesnippets"]):not([data-edit-mode="layout"]) .playerContainer .controls,
+.userinactive .mainContainer:not([data-edit-mode="overlays"]):not([data-edit-mode="annotations"]):not([data-edit-mode="codesnippets"]):not([data-edit-mode="layout"]) .playerContainer .playerProgress {
     display: block;
     visibility: hidden;
     opacity: 0;
     transition: visibility 1.5s, opacity 1.5s;
 }
 
+.userinactive:has(.mainContainer:not(.editActive)) > .titlebar {
+    visibility: hidden;
+    opacity: 0;
+    transition: visibility 1.5s, opacity 1.5s;
+}
+
 /* Progress Bar */
 
 .playerContainer .playerProgress {