search

zoriya / Kyoo

A portable and vast media library solution.
https://kyoo.zoriya.dev
GNU General Public License v3.0
1.77k stars 43 forks source link

Fullscreen on Safari iOS #669

Open thomaslochet opened 2 weeks ago

thomaslochet commented 2 weeks ago

Kyoo's version

v4.7.0

What happened?

The fullscreen button does not work on Safari iOS :(

zoriya commented 2 weeks ago

I unfortunately don't own an ios device to test this. Could you send the console logs/error of the browser?

felipemarinho97 commented 2 days ago

Thats what I got from Safari Mobile on iOS 17 Simulator via MacOS

[Error] TypeError: document.body.requestFullscreen is not a function. (In 'document.body.requestFullscreen({navigationUI:"hide"})', 'document.body.requestFullscreen' is undefined)
(anonymous function) — _app-a52ebceb2ec88a05.js:20:114379
(anonymous function) — _app-a52ebceb2ec88a05.js:20:114582
(anonymous function) — _app-a52ebceb2ec88a05.js:20:114583
f — _app-a52ebceb2ec88a05.js:24:35507
(anonymous function) — _app-a52ebceb2ec88a05.js:20:141547
uI — framework-2880adef1ccdc07d.js:9:84056
oU — framework-2880adef1ccdc07d.js:9:113103
oC — framework-2880adef1ccdc07d.js:9:95922
r8 — framework-2880adef1ccdc07d.js:9:44813
(anonymous function) — framework-2880adef1ccdc07d.js:9:111549
oI — framework-2880adef1ccdc07d.js:9:111553
oS — framework-2880adef1ccdc07d.js:9:94925
x — framework-2880adef1ccdc07d.js:17:1366
T — framework-2880adef1ccdc07d.js:17:1896

    (anonymous function) (_app-a52ebceb2ec88a05.js:20:114577)
    (anonymous function) (_app-a52ebceb2ec88a05.js:20:114582)
    (anonymous function) (_app-a52ebceb2ec88a05.js:20:114583)
    f (_app-a52ebceb2ec88a05.js:24:35507)
    (anonymous function) (_app-a52ebceb2ec88a05.js:20:141547)
    uI (framework-2880adef1ccdc07d.js:9:84056)
    oU (framework-2880adef1ccdc07d.js:9:113103)
    oC (framework-2880adef1ccdc07d.js:9:95922)
    r8 (framework-2880adef1ccdc07d.js:9:44813)
    (anonymous function) (framework-2880adef1ccdc07d.js:9:111549)
    oI (framework-2880adef1ccdc07d.js:9:111553)
    oS (framework-2880adef1ccdc07d.js:9:94925)
    x (framework-2880adef1ccdc07d.js:17:1366)
    T (framework-2880adef1ccdc07d.js:17:1896)

Those 2 methods are defined and working:

 document.querySelector('video').webkitEnterFullscreen()
 document.querySelector("video").webkitEnterFullScreen();

Sources from my research into this issue:

zoriya commented 2 days ago

oh yeah, i missed that: image

from what i gathered, you can't put elements on fullscreen on ios? you can make videos fullscreen on ipad but no other containers & it doesn't work on mobile?

the only solution i can see would be to just disable the fullscreen button on ios. for ipads, we could put the video element on fullscreen but it would prevent subtitles & controls from showing so idk if that makes sense to offer this

felipemarinho97 commented 2 days ago

If I call document.querySelector('video').webkitEnterFullscreen() from developer console I can enter fullscreen. But it's using the default player from Safari. Subtitles and controls (play/pause, forward and back) are ok. And there is no quality controls. I can exit fullscreen also from the default player.

Screenshot 2024-11-22 at 14 21 46

Edit: quality controls are not working because transcoding is not working:

{errors: ["no level with compatible codecs found in manifest"]}

I can only play Pristine mode.

zoriya commented 2 days ago

Okay let's use that then! Should be better than no fullscreen at all.

That means ios fullscreen can't change quality or display ass subtitles nor pgs w/ #335 (after the web player rework i'll do for https://github.com/TheWidlarzGroup/react-native-video/issues/2719 we should be abble to display ass subtitles without styling tho).

@felipemarinho97 do you want to do the PR? I think the simplest fix would be something like

if (!document.body.requestFullscreen)
    document.body.requestFullscreen = webkitEnterFullscreen;

in a web only polyfill file

zoriya commented 2 days ago

the transcode error might be worth investigating also