cinera: Fix mobile scrolling and centring

This commit fixes spurious scrolling in DeriveReliableWindowDimensions()
on mobile. It also fixes centring of Vimeo videos on mobile.

In addition, it replaces some deprecated JavaScript:
•   window.orientation → screen.orientation.type
•   window.onorientationchange → screen.orientation.onchange
This commit is contained in:
Matt Mascarenhas 2023-03-21 19:34:24 +00:00
parent 9d5f0f9146
commit 026585e50b
5 changed files with 21 additions and 8 deletions

View File

@ -23,7 +23,7 @@ typedef struct
version CINERA_APP_VERSION = { version CINERA_APP_VERSION = {
.Major = 0, .Major = 0,
.Minor = 10, .Minor = 10,
.Patch = 25 .Patch = 26
}; };
#define __USE_XOPEN2K8 // NOTE(matt): O_NOFOLLOW #define __USE_XOPEN2K8 // NOTE(matt): O_NOFOLLOW

View File

@ -42,7 +42,7 @@ window.addEventListener("resize", function() {
} }
}); });
window.onorientationchange = function() { screen.orientation.onchange = function() {
if(CineraProps.IsMobile) if(CineraProps.IsMobile)
{ {
setTimeout(DelayedUpdateSize, 512, player); setTimeout(DelayedUpdateSize, 512, player);

View File

@ -955,8 +955,7 @@ Player.prototype.InitMobileStyle = function()
this.IconifyMenuTogglers(); this.IconifyMenuTogglers();
this.InitMobileControls(); this.InitMobileControls();
this.ConnectMobileControls(); this.ConnectMobileControls();
var VideoContainer = this.root.querySelector(".video_container"); this.ApplyMobileStyle(this.videoContainer);
this.ApplyMobileStyle(VideoContainer);
} }
// Call this after changing the size of the video container in order to update the platform player. // Call this after changing the size of the video container in order to update the platform player.
@ -1461,7 +1460,10 @@ Player.prototype.onPlatformReady = function() {
case vod_platform.VIMEO: case vod_platform.VIMEO:
{ {
this.videoContainer.style.position = "relative"; this.videoContainer.style.position = "relative";
this.videoContainer.style.alignSelf = "unset"; if(!CineraProps.IsMobile)
{
this.videoContainer.style.alignSelf = "unset";
}
var CallData = { var CallData = {
id: this.videoContainer.getAttribute("data-videoId"), id: this.videoContainer.getAttribute("data-videoId"),

View File

@ -13,6 +13,9 @@ DeriveReliableWindowDimensions()
Y: null, Y: null,
}; };
var ScrollPosX = window.scrollX;
var ScrollPosY = window.scrollY;
var DisplaySettings = []; var DisplaySettings = [];
for(var i = 0; i < document.body.children.length; ++i) for(var i = 0; i < document.body.children.length; ++i)
{ {
@ -40,6 +43,9 @@ DeriveReliableWindowDimensions()
Child.style.display = DisplaySettings.shift(); Child.style.display = DisplaySettings.shift();
} }
ScrollTriggeredInternally = true;
window.scroll(ScrollPosX, ScrollPosY);
return Result; return Result;
} }
@ -76,7 +82,7 @@ function IsVisible(Element, WindowDim) {
function function
GetRealOrientation(PreferredLandscape, IsMobile) GetRealOrientation(PreferredLandscape, IsMobile)
{ {
var Result = window.orientation; var Result = screen.orientation.angle;
var WindowDim = GetWindowDim(IsMobile); var WindowDim = GetWindowDim(IsMobile);
if(WindowDim.Y > WindowDim.X) if(WindowDim.Y > WindowDim.X)
{ {
@ -317,6 +323,7 @@ function IsInRangeEx(Min, N, Max)
} }
/* Auto-scrolling */ /* Auto-scrolling */
var ScrollTriggeredInternally = false;
var LastScrollYPos = 0; var LastScrollYPos = 0;
var ScrollTicking = false; var ScrollTicking = false;
var ScrollerFunction; var ScrollerFunction;
@ -383,7 +390,11 @@ function
InitScrollEventListener(Element, IsMobile, StickyObscuringElement) InitScrollEventListener(Element, IsMobile, StickyObscuringElement)
{ {
window.addEventListener('scroll', function() { window.addEventListener('scroll', function() {
if(ScrollCondition == undefined || ScrollCondition == true) if(ScrollTriggeredInternally)
{
ScrollTriggeredInternally = false;
}
else if(ScrollCondition == undefined || ScrollCondition == true)
{ {
LastScrollYPos = window.scrollY; LastScrollYPos = window.scrollY;

View File

@ -3866,7 +3866,7 @@ InitResizeEventListener()
function function
InitOrientationChangeListener() InitOrientationChangeListener()
{ {
window.onorientationchange = function() screen.orientation.onchange = function()
{ {
if(CineraProps.IsMobile) if(CineraProps.IsMobile)
{ {