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.
40 lines
1.1 KiB
40 lines
1.1 KiB
import { Icons } from "@/components/Icon"; |
|
import { useIsMobile } from "@/hooks/useIsMobile"; |
|
import { useTranslation } from "react-i18next"; |
|
import { useControls } from "@/video/state/logic/controls"; |
|
import { useVideoPlayerDescriptor } from "@/video/state/hooks"; |
|
import { useCallback } from "react"; |
|
import { |
|
canPictureInPicture, |
|
canWebkitPictureInPicture, |
|
} from "@/utils/detectFeatures"; |
|
import { VideoPlayerIconButton } from "../parts/VideoPlayerIconButton"; |
|
|
|
interface Props { |
|
className?: string; |
|
} |
|
|
|
export function PictureInPictureAction(props: Props) { |
|
const { isMobile } = useIsMobile(); |
|
const { t } = useTranslation(); |
|
|
|
const descriptor = useVideoPlayerDescriptor(); |
|
const controls = useControls(descriptor); |
|
|
|
const handleClick = useCallback(() => { |
|
controls.togglePictureInPicture(); |
|
}, [controls]); |
|
|
|
if (!canPictureInPicture() && !canWebkitPictureInPicture()) return null; |
|
|
|
return ( |
|
<VideoPlayerIconButton |
|
className={props.className} |
|
icon={Icons.PICTURE_IN_PICTURE} |
|
onClick={handleClick} |
|
text={ |
|
isMobile ? (t("videoPlayer.buttons.pictureInPicture") as string) : "" |
|
} |
|
/> |
|
); |
|
}
|
|
|