diff --git a/src/components/PictureInPicture/PiP.tsx b/src/components/PictureInPicture/PiP.tsx index b56290c9..30f8661e 100644 --- a/src/components/PictureInPicture/PiP.tsx +++ b/src/components/PictureInPicture/PiP.tsx @@ -1,6 +1,7 @@ import { memo, RefObject, + useEffect, } from 'react' import styled from 'styled-components/macro' @@ -15,10 +16,11 @@ const PipWrapper = styled.div` ` type PipProps = { + isPlaying: boolean, videoRef: RefObject, } -export const PiP = memo(({ videoRef }: PipProps) => { +export const PiP = memo(({ isPlaying, videoRef }: PipProps) => { const togglePip = async () => { try { if ( @@ -33,6 +35,20 @@ export const PiP = memo(({ videoRef }: PipProps) => { } } + useEffect(() => { + window.addEventListener('visibilitychange', async () => { + if ( + document.hidden === true + && document.pictureInPictureEnabled + && videoRef.current !== document.pictureInPictureElement + && videoRef.current?.hidden === false + && isPlaying + ) { + await videoRef.current?.requestPictureInPicture() + } + }) + }, [videoRef, isPlaying]) + return ( diff --git a/src/features/MatchPage/index.tsx b/src/features/MatchPage/index.tsx index ed4ec6ad..112a6a4d 100644 --- a/src/features/MatchPage/index.tsx +++ b/src/features/MatchPage/index.tsx @@ -82,6 +82,7 @@ const MatchPageComponent = () => { const sportName = history.location.pathname.split('/')[1] history.push(`/${sportName}/tournaments/${profile.tournament.id}`) } + return ( diff --git a/src/features/StreamPlayer/components/Controls/Components/ControlsWeb/index.tsx b/src/features/StreamPlayer/components/Controls/Components/ControlsWeb/index.tsx index a98c2f18..5c0f2d7e 100644 --- a/src/features/StreamPlayer/components/Controls/Components/ControlsWeb/index.tsx +++ b/src/features/StreamPlayer/components/Controls/Components/ControlsWeb/index.tsx @@ -114,7 +114,7 @@ export const ControlsWeb = (controlsProps: { props: ControlsPropsExtended }) => )} {document.pictureInPictureEnabled && ( - + )}