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 = {
.Major = 0,
.Minor = 8,
.Patch = 19
.Patch = 20
};
#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);
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)
{

22
cinera/cinera_pre.js
View File

@ -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)
{

7
cinera/cinera_search_pre.js
View File

@ -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