Annotation-Pushers
/
Annotation-System
1
Fork 0
Code Issues 1 Pull Requests Projects Releases Wiki Activity

cinera.js: Improve style 

•   Do not modify visibility of list view during resize
•   Stabilise player sizing across fullscreen toggle and resize
This commit is contained in:
Matt Mascarenhas 2021-06-11 14:03:13 +01:00
parent 373195069a
commit 12b06812bf
4 changed files with 23 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
cinera/cinera.c
View File

@ -23,7 +23,7 @@ typedef struct
version CINERA_APP_VERSION = { version CINERA_APP_VERSION = {
.Major = 0, .Major = 0,
.Minor = 8, .Minor = 8,
.Patch = 19 .Patch = 20
}; };
#include <stdarg.h> // NOTE(matt): varargs #include <stdarg.h> // NOTE(matt): varargs

5
cinera/cinera_player_pre.js
View File

@ -485,9 +485,10 @@ Player.prototype.updateSize = function() {
CineraProps.O = GetRealOrientation(orientations.LANDSCAPE_LEFT, CineraProps.IsMobile); CineraProps.O = GetRealOrientation(orientations.LANDSCAPE_LEFT, CineraProps.IsMobile);
if(!CineraProps.IsMobile) if(!CineraProps.IsMobile)
{ {
var VisibleArea = GetWindowDim(false); var VisibleArea = MaxDimensionsOfElement(this.container, GetWindowDim(false));
var AvailableHeight = VisibleArea.Y - titleBar.offsetHeight; 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? height = width / 16 * 9; // TODO(matt): Get the aspect ratio from the video itself?
if(height > AvailableHeight) if(height > AvailableHeight)
{ {

22
cinera/cinera_pre.js
View File

@ -57,8 +57,8 @@ GetWindowDim(IsMobile)
} }
else else
{ {
Result.X = document.body.clientWidth; Result.X = document.documentElement.clientWidth;
Result.Y = window.innerHeight; Result.Y = document.documentElement.clientHeight;
} }
return Result; return Result;
} }
@ -227,7 +227,7 @@ function IsMobile() {
function GetRule(SelectorText) function GetRule(SelectorText)
{ {
// NOTE(matt): Modifying CSS style // 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 // https://usefulangle.com/post/39/adding-css-to-stylesheet-with-javascript
var Result = undefined; var Result = undefined;
@ -423,7 +423,7 @@ MaxWidthOfElement(Element, WindowDim)
var NaturalMax = Element.offsetWidth; var NaturalMax = Element.offsetWidth;
Element.style.width = OriginalWidth; 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); Result = Math.min(NaturalMax, InnerWidth);
return Result; return Result;
} }
@ -446,7 +446,7 @@ MaxHeightOfElement(Element, WindowDim)
var NaturalMax = Element.offsetHeight; var NaturalMax = Element.offsetHeight;
Element.style.height = OriginalHeight; Element.style.height = OriginalHeight;
var InnerHeight = WindowDim ? WindowDim.Y : window.innerHeight; var InnerHeight = WindowDim ? WindowDim.Y : document.documentElement.clientHeight;
if(NaturalMax > 0) if(NaturalMax > 0)
{ {
Result = Math.min(NaturalMax, InnerHeight); Result = Math.min(NaturalMax, InnerHeight);
@ -465,6 +465,18 @@ MaxHeightOfElement(Element, WindowDim)
return Result; 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 function
Clamp(EndA, N, EndB) Clamp(EndA, N, EndB)
{ {

7
cinera/cinera_search_pre.js
View File

@ -2957,7 +2957,6 @@ ComputeOptimalGridSize()
var GridWasHidden = Nav.GridContainer.classList.contains("hidden"); var GridWasHidden = Nav.GridContainer.classList.contains("hidden");
if(GridWasHidden) if(GridWasHidden)
{ {
Nav.List.classList.add("hidden");
Nav.GridContainer.classList.remove("hidden"); Nav.GridContainer.classList.remove("hidden");
} }
if(CineraProps.IsMobile && (CineraProps.Orientation == orientations.LANDSCAPE_LEFT || CineraProps.Orientation == orientations.LANDSCAPE_RIGHT)) 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; DimReduction.Y += Nav.Controls.GridTraversal.Container.offsetHeight;
} }
var MaxWidth = MaxWidthOfElement(Nav.GridContainer, WindowDim) - DimReduction.X; var MaxWidth = MaxWidthOfElement(Nav.Transition.ButtonsTransitionContainerElement, WindowDim) - DimReduction.X;
var MaxHeight = MaxHeightOfElement(Nav.GridContainer, WindowDim) - DimReduction.Y; var MaxHeight = MaxHeightOfElement(Nav.Transition.ButtonsTransitionContainerElement, WindowDim) - DimReduction.Y;
if(GridWasHidden) if(GridWasHidden)
{ {
Nav.GridContainer.classList.add("hidden"); Nav.GridContainer.classList.add("hidden");
Nav.List.classList.remove("hidden");
} }
var BodyStyle = window.getComputedStyle(document.body); var BodyStyle = window.getComputedStyle(document.body);
@ -3029,7 +3027,6 @@ ComputeOptimalGridSize()
SetDim(Nav.Controls.GridTraversal.Prev, TraversalButtonDim + "px", TraversalButtonDim + "px"); SetDim(Nav.Controls.GridTraversal.Prev, TraversalButtonDim + "px", TraversalButtonDim + "px");
SetDim(Nav.Controls.GridTraversal.Next, TraversalButtonDim + "px", TraversalButtonDim + "px"); SetDim(Nav.Controls.GridTraversal.Next, TraversalButtonDim + "px", TraversalButtonDim + "px");
} }
} }
ResetButtonsContainerClone(); // NOTE(matt): This reapplies the sorting Z-rotation ResetButtonsContainerClone(); // NOTE(matt): This reapplies the sorting Z-rotation