hibna
b57b24d051
Add all source files for a feature-rich, reusable video player built with React, TypeScript, and Vite. Includes core components, context, hooks, utilities, styles, demo app, and configuration files.
27 lines
739 B
TypeScript
27 lines
739 B
TypeScript
import React from 'react'
|
|
import { usePlayerContext } from '../../contexts/PlayerContext'
|
|
import { PIPIcon } from '../../icons'
|
|
import './ControlButton.css'
|
|
|
|
export const PIPButton: React.FC = () => {
|
|
const { videoState, togglePictureInPicture } = usePlayerContext()
|
|
|
|
// Check if PIP is supported
|
|
const isPIPSupported = 'pictureInPictureEnabled' in document
|
|
|
|
if (!isPIPSupported) {
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<button
|
|
className="control-button pip-button"
|
|
onClick={togglePictureInPicture}
|
|
aria-label={videoState.pictureInPicture ? 'Exit picture-in-picture' : 'Enter picture-in-picture'}
|
|
title="Picture-in-picture (P)"
|
|
>
|
|
<PIPIcon size={24} color="var(--player-text)" />
|
|
</button>
|
|
)
|
|
}
|