ztr/TelegramPWA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Media Viewer: Fix picture-in-picture mode breaking use of spaces (#221)

Browse Source
This commit is contained in:
Ibrahima G. Coulibaly 2023-01-22 17:18:49 +01:00 committed by GitHub
parent e15d569d7f
commit 9286889ea8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 18 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/mediaViewer/VideoPlayer.tsx
View File

@ -92,6 +92,7 @@ const VideoPlayer: FC<OwnProps> = ({
const [ const [
isPictureInPictureSupported, isPictureInPictureSupported,
enterPictureInPicture, enterPictureInPicture,
isInPictureInPicture,
] = usePictureInPicture(videoRef, handleEnterFullscreen, handleLeaveFullscreen); ] = usePictureInPicture(videoRef, handleEnterFullscreen, handleLeaveFullscreen);
const handleVideoMove = useCallback(() => { const handleVideoMove = useCallback(() => {
@ -207,7 +208,7 @@ const VideoPlayer: FC<OwnProps> = ({
useEffect(() => { useEffect(() => {
if (!isMediaViewerOpen) return undefined; if (!isMediaViewerOpen) return undefined;
const togglePayingStateBySpace = (e: KeyboardEvent) => { const togglePayingStateBySpace = (e: KeyboardEvent) => {
if (e.key === 'Enter' || e.key === ' ') { if ((e.key === 'Enter' || e.key === ' ') && !isInPictureInPicture) {
e.preventDefault(); e.preventDefault();
togglePlayState(e); togglePlayState(e);
} }
@ -218,7 +219,7 @@ const VideoPlayer: FC<OwnProps> = ({
return () => { return () => {
document.removeEventListener('keydown', togglePayingStateBySpace, false); document.removeEventListener('keydown', togglePayingStateBySpace, false);
}; };
}, [togglePlayState, isMediaViewerOpen]); }, [togglePlayState, isMediaViewerOpen, isInPictureInPicture]);
const wrapperStyle = posterSize && `width: ${posterSize.width}px; height: ${posterSize.height}px`; const wrapperStyle = posterSize && `width: ${posterSize.width}px; height: ${posterSize.height}px`;
const videoStyle = `background-image: url(${posterData})`; const videoStyle = `background-image: url(${posterData})`;

21
src/hooks/usePictureInPicture.ts
View File

@ -7,7 +7,7 @@ type RefType = {
current: HTMLVideoElement | null; current: HTMLVideoElement | null;
}; };
type ReturnType = [boolean, () => void] | [false]; type ReturnType = [boolean, () => void, boolean] | [false];
type CallbackType = () => void; type CallbackType = () => void;
export default function usePictureInPicture( export default function usePictureInPicture(
@ -16,6 +16,7 @@ export default function usePictureInPicture(
onLeave: CallbackType, onLeave: CallbackType,
): ReturnType { ): ReturnType {
const [isSupported, setIsSupported] = useState(false); const [isSupported, setIsSupported] = useState(false);
const [isInPictureInPicture, setIsInPictureInPicture] = useState(false);
useLayoutEffect(() => { useLayoutEffect(() => {
// PIP is not supported in PWA on iOS, despite being detected // PIP is not supported in PWA on iOS, despite being detected
@ -28,11 +29,19 @@ export default function usePictureInPicture(
// @ts-ignore // @ts-ignore
video.autoPictureInPicture = true; video.autoPictureInPicture = true;
setIsSupported(true); setIsSupported(true);
video.addEventListener('enterpictureinpicture', onEnter); const onEnterInternal = () => {
video.addEventListener('leavepictureinpicture', onLeave); onEnter();
setIsInPictureInPicture(true);
};
const onLeaveInternal = () => {
onLeave();
setIsInPictureInPicture(false);
};
video.addEventListener('enterpictureinpicture', onEnterInternal);
video.addEventListener('leavepictureinpicture', onLeaveInternal);
return () => { return () => {
video.removeEventListener('enterpictureinpicture', onEnter); video.removeEventListener('enterpictureinpicture', onEnterInternal);
video.removeEventListener('leavepictureinpicture', onLeave); video.removeEventListener('leavepictureinpicture', onLeaveInternal);
}; };
}, [elRef, onEnter, onLeave]); }, [elRef, onEnter, onLeave]);
@ -68,7 +77,7 @@ export default function usePictureInPicture(
return [false]; return [false];
} }
return [isSupported, enterPictureInPicture]; return [isSupported, enterPictureInPicture, isInPictureInPicture];
} }
function getSetPresentationMode(video: HTMLVideoElement) { function getSetPresentationMode(video: HTMLVideoElement) {