From 12b06812bf98d0a4190d8893b35869b5d8030119 Mon Sep 17 00:00:00 2001
From: Matt Mascarenhas <admin@miblo.net>
Date: Fri, 11 Jun 2021 14:03:13 +0100
Subject: [PATCH] cinera.js: Improve style
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

•   Do not modify visibility of list view during resize
•   Stabilise player sizing across fullscreen toggle and resize
---
 cinera/cinera.c             |  2 +-
 cinera/cinera_player_pre.js |  5 +++--
 cinera/cinera_pre.js        | 22 +++++++++++++++++-----
 cinera/cinera_search_pre.js |  7 ++-----
 4 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/cinera/cinera.c b/cinera/cinera.c
index b19ddd6..223852b 100644
--- a/cinera/cinera.c
+++ b/cinera/cinera.c
@@ -23,7 +23,7 @@ typedef struct
 version CINERA_APP_VERSION = {
     .Major = 0,
     .Minor = 8,
-    .Patch = 19
+    .Patch = 20
 };
 
 #include <stdarg.h> // NOTE(matt): varargs
diff --git a/cinera/cinera_player_pre.js b/cinera/cinera_player_pre.js
index 70990ce..8b3578a 100644
--- a/cinera/cinera_player_pre.js
+++ b/cinera/cinera_player_pre.js
@@ -485,9 +485,10 @@ Player.prototype.updateSize = function() {
     CineraProps.O = GetRealOrientation(orientations.LANDSCAPE_LEFT, CineraProps.IsMobile);
     if(!CineraProps.IsMobile)
     {
-        var VisibleArea = GetWindowDim(false);
+        var VisibleArea = MaxDimensionsOfElement(this.container, GetWindowDim(false));
         var AvailableHeight = VisibleArea.Y - titleBar.offsetHeight;
-        width = this.videoContainer.offsetWidth;
+        var VerticalScrollBarWidth = this.markersContainer.offsetWidth - this.markersContainer.clientWidth;
+        width = VisibleArea.X - (this.markersContainer.scrollWidth + VerticalScrollBarWidth);
         height = width / 16 * 9; // TODO(matt): Get the aspect ratio from the video itself?
         if(height > AvailableHeight)
         {
diff --git a/cinera/cinera_pre.js b/cinera/cinera_pre.js
index 915f9c7..13a9250 100644
--- a/cinera/cinera_pre.js
+++ b/cinera/cinera_pre.js
@@ -57,8 +57,8 @@ GetWindowDim(IsMobile)
     }
     else
     {
-        Result.X = document.body.clientWidth;
-        Result.Y = window.innerHeight;
+        Result.X = document.documentElement.clientWidth;
+        Result.Y = document.documentElement.clientHeight;
     }
     return Result;
 }
@@ -227,7 +227,7 @@ function IsMobile() {
 function GetRule(SelectorText)
 {
     // NOTE(matt):  Modifying CSS style
-    //              from    https://stackoverflow.com/a/566445
+    //              From    https://stackoverflow.com/a/566445
     //                      https://usefulangle.com/post/39/adding-css-to-stylesheet-with-javascript
     var Result = undefined;
 
@@ -423,7 +423,7 @@ MaxWidthOfElement(Element, WindowDim)
     var NaturalMax = Element.offsetWidth;
     Element.style.width = OriginalWidth;
 
-    var InnerWidth = WindowDim ? WindowDim.X : document.body.clientWidth;
+    var InnerWidth = WindowDim ? WindowDim.X : document.documentElement.clientWidth;
     Result = Math.min(NaturalMax, InnerWidth);
     return Result;
 }
@@ -446,7 +446,7 @@ MaxHeightOfElement(Element, WindowDim)
     var NaturalMax = Element.offsetHeight;
     Element.style.height = OriginalHeight;
 
-    var InnerHeight = WindowDim ? WindowDim.Y : window.innerHeight;
+    var InnerHeight = WindowDim ? WindowDim.Y : document.documentElement.clientHeight;
     if(NaturalMax > 0)
     {
         Result = Math.min(NaturalMax, InnerHeight);
@@ -465,6 +465,18 @@ MaxHeightOfElement(Element, WindowDim)
     return Result;
 }
 
+function
+MaxDimensionsOfElement(Element, WindowDim)
+{
+    var Result = {
+        X: null,
+        Y: null,
+    };
+    Result.X = MaxWidthOfElement(Element, WindowDim);
+    Result.Y = MaxHeightOfElement(Element, WindowDim);
+    return Result;
+}
+
 function
 Clamp(EndA, N, EndB)
 {
diff --git a/cinera/cinera_search_pre.js b/cinera/cinera_search_pre.js
index 4eba9b1..1255c61 100644
--- a/cinera/cinera_search_pre.js
+++ b/cinera/cinera_search_pre.js
@@ -2957,7 +2957,6 @@ ComputeOptimalGridSize()
     var GridWasHidden = Nav.GridContainer.classList.contains("hidden");
     if(GridWasHidden)
     {
-        Nav.List.classList.add("hidden");
         Nav.GridContainer.classList.remove("hidden");
     }
     if(CineraProps.IsMobile && (CineraProps.Orientation == orientations.LANDSCAPE_LEFT || CineraProps.Orientation == orientations.LANDSCAPE_RIGHT))
@@ -2969,13 +2968,12 @@ ComputeOptimalGridSize()
         DimReduction.Y += Nav.Controls.GridTraversal.Container.offsetHeight;
     }
 
-    var MaxWidth = MaxWidthOfElement(Nav.GridContainer, WindowDim) - DimReduction.X;
-    var MaxHeight = MaxHeightOfElement(Nav.GridContainer, WindowDim) - DimReduction.Y;
+    var MaxWidth = MaxWidthOfElement(Nav.Transition.ButtonsTransitionContainerElement, WindowDim) - DimReduction.X;
+    var MaxHeight = MaxHeightOfElement(Nav.Transition.ButtonsTransitionContainerElement, WindowDim) - DimReduction.Y;
 
     if(GridWasHidden)
     {
         Nav.GridContainer.classList.add("hidden");
-        Nav.List.classList.remove("hidden");
     }
 
     var BodyStyle = window.getComputedStyle(document.body);
@@ -3029,7 +3027,6 @@ ComputeOptimalGridSize()
             SetDim(Nav.Controls.GridTraversal.Prev, TraversalButtonDim + "px", TraversalButtonDim + "px");
             SetDim(Nav.Controls.GridTraversal.Next, TraversalButtonDim + "px", TraversalButtonDim + "px");
         }
-
     }
 
     ResetButtonsContainerClone(); // NOTE(matt): This reapplies the sorting Z-rotation