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.
41 lines
828 B
41 lines
828 B
import {
|
|
memo,
|
|
RefObject,
|
|
} from 'react'
|
|
|
|
import styled from 'styled-components/macro'
|
|
|
|
import { Icon } from 'features/Icon'
|
|
|
|
const PipWrapper = styled.div`
|
|
cursor: pointer;
|
|
margin-left: 25px;
|
|
margin-right: 25px;
|
|
margin-top: 4px;
|
|
`
|
|
|
|
type PipProps = {
|
|
videoRef: RefObject<HTMLVideoElement>,
|
|
}
|
|
|
|
export const PiP = memo(({ videoRef }: PipProps) => {
|
|
const togglePip = async () => {
|
|
try {
|
|
if (
|
|
document.pictureInPictureEnabled && videoRef.current !== document.pictureInPictureElement
|
|
) {
|
|
await videoRef.current?.requestPictureInPicture()
|
|
} else {
|
|
await document.exitPictureInPicture()
|
|
}
|
|
} catch (err) {
|
|
await document.exitPictureInPicture()
|
|
}
|
|
}
|
|
|
|
return (
|
|
<PipWrapper>
|
|
<Icon refIcon='PiP' onClick={togglePip} />
|
|
</PipWrapper>
|
|
)
|
|
})
|
|
|