Svoboda | Graniru | BBC Russia | Golosameriki | Facebook
BBC RussianHomePhabricator
Log In
Maniphest T338469

Improve rendering of fullscreen video on the desktop website on an iOS phone without fullscreen support
Closed, ResolvedPublic

Description

I've been thinking about this, and there are some hacks that we might want to apply.

Apparently a good way to detect mobile devices with desktop mode is https://stackoverflow.com/a/76012165

function isDesktopMode() {
    return window.innerWidth > screen.availWidth;
}

We can use this, to ensure we always open the ooui dialog as fullscreen in this particular case.
Then using something like the following CSS.

@media screen and (pointer: coarse) and (-webkit-min-device-pixel-ratio: 2) {
    .video-js {
    	font-size: 2vh;
    }
}

We could easily enlarge the UI components of the player to make it easier to interact with the video player.

Event Timeline

TheDJ renamed this task from Improve rendering of fullscreen video on the desktop website on a mobile device to Improve rendering of fullscreen video on the desktop website on an iOS phone without fullscreen support.Jun 8 2023, 2:54 PM

Change 929028 had a related patch set uploaded (by TheDJ; author: TheDJ):

[mediawiki/extensions/TimedMediaHandler@master] Improve fullscreen on iOS mobile and in desktop on mobile

https://gerrit.wikimedia.org/r/929028

Managed to make this work. We might have to double check on other devices a bit that this doesn't mess with anything, but with the kinks worked out, this is going to make the video a LOT easier to use on iOS devices in my opinion.

For some reason on iPad portrait mode, the oo.ui window manager turns to its fullscreen size class when entering fullscreen mode.. Wonder what resize magic inside of OO.ui does that....

Apparently this is done by OO.ui.WindowManager.prototype.updateWindowSize
Will have to see how I can work around that.

TheDJ triaged this task as Medium priority.

Change 929028 merged by jenkins-bot:

[mediawiki/extensions/TimedMediaHandler@master] Improve fullscreen on iOS mobile and in desktop on mobile

https://gerrit.wikimedia.org/r/929028

Test wiki on Patch demo by TheDJ using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/9fdbf6e106/w/