Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Remove fullscreen button on iPad if using a non Safari browser #334

Merged
merged 7 commits into from
Nov 29, 2024
Merged

Remove fullscreen button on iPad if using a non Safari browser #334

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
9bfc87c
Attempt to hide video player controls on iPad (it doesn't work)
lukehb Nov 26, 2024
b8bdf23
Added extra check to disable fullscreen button on iPad in non-safari …
lukehb Nov 28, 2024
9506b41
Fixing linting issue
lukehb Nov 28, 2024
b15f928
Better Safari detection and removing overflow on iPad
lukehb Nov 28, 2024
73329e3
Merge branch 'UE5.5' into issue219
lukehb Nov 28, 2024
f1dc50c
Remove code that was not for this PR.
lukehb Nov 28, 2024
5414daa
Merge branch 'UE5.5' into issue219
lukehb Nov 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions Frontend/implementations/typescript/src/player.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<html style="width: 100%; height: 100%">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

<!-- Optional: apply a font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
Expand All @@ -21,7 +21,7 @@
</head>

<!-- The Pixel Streaming player fills 100% of its parent element but body has a 0px height unless filled with content. As such, we explicitly force the body to be 100% of the viewport height -->
<body style="width: 100vw; height: 100svh; min-height: -webkit-fill-available; font-family: 'Montserrat'; margin: 0px">
<body style="width: 100vw; height: 100svh; min-height: -webkit-fill-available; overflow: hidden; overscroll-behavior: none; font-family: 'Montserrat'; margin: 0px">
Copy link
Contributor Author

@lukehb lukehb Nov 28, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This removes scroll bounce zone on iPad that is unhelpful for Pixel Streaming


</body>

Expand Down
21 changes: 20 additions & 1 deletion Frontend/ui-library/src/Application/Application.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -167,10 +167,29 @@ export class Application {
* Set up button click functions and button functionality
*/
public createButtons() {
const isIphone = /iPhone/.test(navigator.userAgent);
const isIpad =
/iPad/.test(navigator.userAgent) ||
(/Macintosh/.test(navigator.userAgent) && 'ontouchend' in document);
const isSafari =
navigator.vendor &&
navigator.vendor.indexOf('Apple') > -1 &&
navigator.userAgent &&
navigator.userAgent.indexOf('CriOS') == -1 &&
navigator.userAgent.indexOf('FxiOS') == -1;

// In some cases we want to disable fullscreen button if it is not explicitly requested:

// IPhone does not support fullscreen API as at 28th July 2024 (see: https://caniuse.com/fullscreen) so if
// we are on IPhone and user has not specified explicitly configured UI config for
// fullscreen button then we should disable this button as it doesn't work.
if (this._options.fullScreenControlsConfig === undefined && /iPhone/.test(navigator.userAgent)) {

// Additionally iPad on non-Safari browsers doesn't really allow touch inputs and fullscreen video at the same time.
// If you do this the video gets dragged off back to normal non-fullscreen video and then the video is paused.
// See: https://github.com/EpicGamesExt/PixelStreamingInfrastructure/issues/219
const disableFullscreenButton = isIphone || (!isSafari && isIpad);

if (this._options.fullScreenControlsConfig === undefined && disableFullscreenButton) {
this._options.fullScreenControlsConfig = { creationMode: UIElementCreationMode.Disable };
}

Expand Down
Loading