You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
60 lines
1.4 KiB
60 lines
1.4 KiB
import {
|
|
memo,
|
|
RefObject,
|
|
useEffect,
|
|
} from 'react'
|
|
|
|
import styled from 'styled-components/macro'
|
|
|
|
import { Icon } from 'features/Icon'
|
|
import { useAuthStore } from 'features/AuthStore'
|
|
|
|
const PipWrapper = styled.div`
|
|
cursor: pointer;
|
|
margin-left: 25px;
|
|
margin-right: 25px;
|
|
margin-top: 4px;
|
|
`
|
|
|
|
type PipProps = {
|
|
isPlaying: boolean,
|
|
videoRef: RefObject<HTMLVideoElement>,
|
|
}
|
|
|
|
export const PiP = memo(({ isPlaying, videoRef }: PipProps) => {
|
|
const { user } = useAuthStore()
|
|
const togglePip = async () => {
|
|
try {
|
|
if (
|
|
document.pictureInPictureEnabled && videoRef.current !== document.pictureInPictureElement
|
|
) {
|
|
await videoRef.current?.requestPictureInPicture()
|
|
} else {
|
|
await document.exitPictureInPicture()
|
|
}
|
|
} catch (err) {
|
|
await document.exitPictureInPicture()
|
|
}
|
|
}
|
|
|
|
useEffect(() => {
|
|
window.addEventListener('visibilitychange', async () => {
|
|
if (
|
|
document.hidden === true
|
|
&& document.pictureInPictureEnabled
|
|
&& videoRef.current !== document.pictureInPictureElement
|
|
&& videoRef.current?.hidden === false
|
|
&& isPlaying
|
|
&& user
|
|
) {
|
|
await videoRef.current?.requestPictureInPicture()
|
|
}
|
|
})
|
|
}, [videoRef, isPlaying, user])
|
|
|
|
return (
|
|
<PipWrapper id='match_video_pic_in_pic'>
|
|
<Icon refIcon='PiP' onClick={togglePip} />
|
|
</PipWrapper>
|
|
)
|
|
})
|
|
|