-
Notifications
You must be signed in to change notification settings - Fork 790
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.
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
iOS PWA improvments #89
base: main
Are you sure you want to change the base?
Changes from all commits
1a36d96
05c4988
c748d0c
2e08ed9
d6a2b91
1e4ec0c
3543ec0
9083f11
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,23 @@ | ||
/* eslint-disable no-alert */ | ||
import { Icon, Icons } from "../Icon"; | ||
|
||
function IosPwaLimitations() { | ||
const showAlert = () => { | ||
alert( | ||
"Due to Apple’s limitations, Picture-in-Picture (PiP) and Fullscreen are disabled on iOS PWAs. Use the browser vertion to re-enable these features.\n" + | ||
"Tip: To hide the iOS home indicator, use guided access within the PWA!", | ||
); | ||
}; | ||
|
||
return ( | ||
<button | ||
type="button" | ||
onClick={showAlert} | ||
className="tabbable p-2 rounded-full hover:bg-video-buttonBackground hover:bg-opacity-50 transition-transform duration-100 flex items-center gap-3 active:scale-110 active:bg-opacity-75 active:text-white" | ||
> | ||
<Icon className="text-2xl" icon={Icons.CIRCLE_QUESTION} /> | ||
</button> | ||
); | ||
} | ||
|
||
export default IosPwaLimitations; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,23 @@ | ||
import { useState } from "react"; | ||
|
||
import { Icons } from "@/components/Icon"; | ||
import { VideoPlayerButton } from "@/components/player/internals/Button"; | ||
|
||
export function Widescreen() { | ||
// Add widescreen status | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Widescreen isn't a replacement/alternative to fullscreen There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. For now please remove this |
||
const [isWideScreen, setIsWideScreen] = useState(false); | ||
|
||
return ( | ||
<VideoPlayerButton | ||
icon={isWideScreen ? Icons.SHRINK : Icons.STRETCH} | ||
className="text-white" | ||
onClick={() => { | ||
const videoElement = document.getElementById("video-element"); | ||
if (videoElement) { | ||
videoElement.classList.toggle("object-cover"); | ||
setIsWideScreen(!isWideScreen); | ||
} | ||
}} | ||
/> | ||
); | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,7 +1,9 @@ | ||
import { ReactNode } from "react"; | ||
import { ReactNode, useState } from "react"; | ||
|
||
import IosPwaLimitations from "@/components/buttons/IosPwaLimitations"; | ||
import { BrandPill } from "@/components/layout/BrandPill"; | ||
import { Player } from "@/components/player"; | ||
import { Widescreen } from "@/components/player/atoms/Widescreen"; | ||
import { useShouldShowControls } from "@/components/player/hooks/useShouldShowControls"; | ||
import { useIsMobile } from "@/hooks/useIsMobile"; | ||
import { PlayerMeta, playerStatus } from "@/stores/player/slices/source"; | ||
|
@@ -20,6 +22,26 @@ export function PlayerPart(props: PlayerPartProps) { | |
const { isMobile } = useIsMobile(); | ||
const isLoading = usePlayerStore((s) => s.mediaPlaying.isLoading); | ||
|
||
// Detect if running as a PWA on iOS | ||
const isIOSPWA = | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Just make this a separate hook in /hooks |
||
/iPad|iPhone|iPod/i.test(navigator.userAgent) && | ||
window.matchMedia("(display-mode: standalone)").matches; | ||
|
||
// Detect if Shift key is being held | ||
const [isShifting, setIsShifting] = useState(false); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. this has to go since we aren't adding widescreen for now |
||
|
||
document.addEventListener("keydown", (event) => { | ||
if (event.key === "Shift") { | ||
setIsShifting(true); | ||
} | ||
}); | ||
|
||
document.addEventListener("keyup", (event) => { | ||
if (event.key === "Shift") { | ||
setIsShifting(false); | ||
} | ||
}); | ||
|
||
return ( | ||
<Player.Container onLoad={props.onLoad} showingControls={showTargets}> | ||
{props.children} | ||
|
@@ -116,18 +138,41 @@ export function PlayerPart(props: PlayerPartProps) { | |
<Player.Settings /> | ||
</> | ||
) : null} | ||
<Player.Fullscreen /> | ||
{/* Fullscreen on when not shifting */} | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Same here, all this has to go |
||
{!isShifting && <Player.Fullscreen />} | ||
|
||
{/* Expand button visible when shifting */} | ||
{isShifting && ( | ||
<div> | ||
<Widescreen /> | ||
</div> | ||
)} | ||
</div> | ||
</div> | ||
<div className="grid grid-cols-[2.5rem,1fr,2.5rem] gap-3 lg:hidden"> | ||
<div /> | ||
<div className="flex justify-center space-x-3"> | ||
{status === playerStatus.PLAYING ? <Player.Pip /> : null} | ||
{/* Disable PiP for iOS PWA */} | ||
{!isIOSPWA && | ||
(status === playerStatus.PLAYING ? <Player.Pip /> : null)} | ||
<Player.Episodes /> | ||
{status === playerStatus.PLAYING ? <Player.Settings /> : null} | ||
{/* Expand button for iOS PWA only */} | ||
{isIOSPWA && status === playerStatus.PLAYING && <Widescreen />} | ||
</div> | ||
<div> | ||
<Player.Fullscreen /> | ||
{/* Disable for iOS PWA */} | ||
{!isIOSPWA && ( | ||
<div> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. You can just do {!isIOSPWA && (<Player.Fullscreen />)} |
||
<Player.Fullscreen /> | ||
</div> | ||
)} | ||
{/* Add info for iOS PWA */} | ||
{isIOSPWA && ( | ||
<div> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. same here |
||
<IosPwaLimitations /> | ||
</div> | ||
)} | ||
</div> | ||
</div> | ||
</Player.BottomControls> | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can't be using this
please do smth better like a modal that also is themed properly