hide tabs when no name and only 1 tab

Author: OpenHypervideo

src/player/modules/ViewLayout/module.js

@@ -154,6 +154,8 @@ FrameTrail.defineModule('ViewLayout', function(FrameTrail){
 
         updateLayoutAreaVisibility();
 
+        updateHiddenTabs();
+
         updateManagedContent();
 
     }
@@ -169,6 +171,36 @@ FrameTrail.defineModule('ViewLayout', function(FrameTrail){
     }
 
 
+    function updateHiddenTabs() {
+
+        var ViewVideo = FrameTrail.module('ViewVideo');
+        var areas = [
+            { views: contentViewsTop,    key: 'areaTop',    container: ViewVideo.AreaTopContainer },
+            { views: contentViewsBottom,  key: 'areaBottom', container: ViewVideo.AreaBottomContainer },
+            { views: contentViewsLeft,    key: 'areaLeft',   container: ViewVideo.AreaLeftContainer },
+            { views: contentViewsRight,   key: 'areaRight',  container: ViewVideo.AreaRightContainer }
+        ];
+
+        for (var i = 0; i < areas.length; i++) {
+            var area = areas[i];
+            var shouldHide = (area.views.length === 1
+                && !area.views[0].contentViewData.name
+                && !area.views[0].contentViewData.icon);
+
+            if (area.container) {
+                area.container.classList.toggle('hiddenTabs', shouldHide);
+            }
+
+            // Also update layout manager preview area
+            var previewArea = HypervideoLayoutContainer.querySelector('.layoutArea[data-area="' + area.key + '"]');
+            if (previewArea) {
+                previewArea.classList.toggle('hiddenTabs', shouldHide);
+            }
+        }
+
+    }
+
+
     function createContentView(whichArea, templateContentViewData, renderPreview, skipUndo) {
 
         var arrayOfContentViews = ({
@@ -200,6 +232,7 @@ FrameTrail.defineModule('ViewLayout', function(FrameTrail){
         }
 
         updateLayoutAreaVisibility();
+        updateHiddenTabs();
 
         return newContentView;
 
@@ -245,6 +278,7 @@ FrameTrail.defineModule('ViewLayout', function(FrameTrail){
         updateManagedContent();
 
         updateLayoutAreaVisibility();
+        updateHiddenTabs();
 
         FrameTrail.module('HypervideoModel').newUnsavedChange('layout');
 
@@ -1503,6 +1537,8 @@ FrameTrail.defineModule('ViewLayout', function(FrameTrail){
 
         reorderContentView:  reorderContentView,
 
+        updateHiddenTabs: updateHiddenTabs,
+
         getLayoutAreaData: getLayoutAreaData,
 
     };

src/player/modules/ViewLayout/style.css

@@ -101,6 +101,48 @@
     overflow: hidden;
 }
 
+/* Hidden tabs: single content view with no name and no icon */
+
+.layoutArea.hiddenTabs > .layoutAreaTabs {
+    display: none !important;
+}
+
+.layoutArea.hiddenTabs .contentViewContainer {
+    top: 0;
+    height: 100%;
+}
+
+.layoutArea[data-area="areaLeft"].hiddenTabs .contentViewContainer {
+    right: 0;
+    width: 100%;
+}
+
+.layoutArea[data-area="areaRight"].hiddenTabs .contentViewContainer {
+    left: 0;
+    width: 100%;
+}
+
+/* Hidden tabs in layout manager preview */
+
+.layoutManager .layoutArea.hiddenTabs > .layoutAreaTabs {
+    display: none !important;
+}
+
+.layoutManager .layoutArea.hiddenTabs .contentViewPreview {
+    top: 10px;
+    height: calc(100% - 20px);
+}
+
+.layoutManager .layoutArea[data-area="areaLeft"].hiddenTabs .contentViewPreview {
+    right: 10px;
+    width: calc(100% - 20px);
+}
+
+.layoutManager .layoutArea[data-area="areaRight"].hiddenTabs .contentViewPreview {
+    left: 10px;
+    width: calc(100% - 20px);
+}
+
 /* Open & Close Mechanism — button lives inside the active contentViewTab */
 
 .layoutArea .layoutAreaTabs .contentViewTab .layoutAreaToggleCloseButton {
@@ -492,6 +534,41 @@ body > .contentViewTemplate .contentViewTemplateLabel {
     min-width: 400px;
 }
 
+/* Hidden tabs: reduce layout manager area sizes (remove 38px tab bar) */
+
+.layoutManager .layoutArea.hiddenTabs[data-area="areaTop"][data-size="small"],
+.layoutManager .layoutArea.hiddenTabs[data-area="areaBottom"][data-size="small"] {
+    min-height: calc(50px + 20px);
+}
+
+.layoutManager .layoutArea.hiddenTabs[data-area="areaTop"][data-size="medium"],
+.layoutManager .layoutArea.hiddenTabs[data-area="areaBottom"][data-size="medium"] {
+    min-height: calc(90px + 20px);
+}
+
+.layoutManager .layoutArea.hiddenTabs[data-area="areaTop"][data-size="large"],
+.layoutManager .layoutArea.hiddenTabs[data-area="areaBottom"][data-size="large"] {
+    min-height: calc(200px + 20px);
+}
+
+.layoutManager .layoutArea.hiddenTabs[data-area="areaLeft"][data-size="small"],
+.layoutManager .layoutArea.hiddenTabs[data-area="areaRight"][data-size="small"] {
+    flex: 0 0 74px;
+    min-width: 74px;
+}
+
+.layoutManager .layoutArea.hiddenTabs[data-area="areaLeft"][data-size="medium"],
+.layoutManager .layoutArea.hiddenTabs[data-area="areaRight"][data-size="medium"] {
+    flex: 0 0 364px;
+    min-width: 364px;
+}
+
+.layoutManager .layoutArea.hiddenTabs[data-area="areaLeft"][data-size="large"],
+.layoutManager .layoutArea.hiddenTabs[data-area="areaRight"][data-size="large"] {
+    flex: 0 0 364px;
+    min-width: 364px;
+}
+
 /* Sortable preview tabs */
 
 .layoutManager .layoutArea .layoutAreaTabs .contentViewTab {

src/player/modules/ViewVideo/style.css

@@ -219,7 +219,6 @@ body.userinactive .mainContainer:not([data-edit-mode="overlays"]):not([data-edit
     order: 0;
     align-self: stretch;
     background: var(--primary-bg-color);
-    border-bottom: 2px solid var(--primary-bg-color);
 }
 
 .areaLeftContainer {
@@ -299,6 +298,38 @@ body.userinactive .mainContainer:not([data-edit-mode="overlays"]):not([data-edit
     min-width: 650px;
 }
 
+/* Hidden tabs: reduce area size by 36px (tab bar height) */
+
+.areaTopContainer.hiddenTabs[data-size="small"], .areaBottomContainer.hiddenTabs[data-size="small"] {
+    flex-basis: 40px;
+    min-height: 40px;
+}
+
+.areaTopContainer.hiddenTabs[data-size="medium"], .areaBottomContainer.hiddenTabs[data-size="medium"] {
+    flex-basis: 120px;
+    min-height: 120px;
+}
+
+.areaTopContainer.hiddenTabs[data-size="large"], .areaBottomContainer.hiddenTabs[data-size="large"] {
+    flex-basis: clamp(164px, calc(100vh * 0.6 - 76px), 364px);
+    min-height: clamp(164px, calc(100vh * 0.6 - 76px), 364px);
+}
+
+.areaLeftContainer.hiddenTabs[data-size="small"], .areaRightContainer.hiddenTabs[data-size="small"] {
+    flex: 0 0 52px;
+    min-width: 52px;
+}
+
+.areaLeftContainer.hiddenTabs[data-size="medium"], .areaRightContainer.hiddenTabs[data-size="medium"] {
+    flex: 0 0 414px;
+    min-width: 414px;
+}
+
+.areaLeftContainer.hiddenTabs[data-size="large"], .areaRightContainer.hiddenTabs[data-size="large"] {
+    flex: 0 0 614px;
+    min-width: 614px;
+}
+
 .areaTopContainer.closed, .areaBottomContainer.closed {
     min-height: 36px !important;
     flex-basis: 36px !important;

src/player/types/ContentView/type.js

@@ -340,6 +340,7 @@ FrameTrail.defineType(
                     }
 
                     FrameTrail.module('ViewLayout').updateManagedContent();
+                    FrameTrail.module('ViewLayout').updateHiddenTabs();
 
                     window.setTimeout(function() {
                         self.resizeLayoutArea(false, suppressViewSizeChange);