61 lines
1.8 KiB
TypeScript
Executable File
61 lines
1.8 KiB
TypeScript
Executable File
import {ButtonProps} from '@common/ui/buttons/button';
|
|
import {useTrans} from '@common/i18n/use-trans';
|
|
import {usePlayerActions} from '@common/player/hooks/use-player-actions';
|
|
import {usePlayerStore} from '@common/player/hooks/use-player-store';
|
|
import {IconButton} from '@common/ui/buttons/icon-button';
|
|
import {message} from '@common/i18n/message';
|
|
import {Tooltip} from '@common/ui/tooltip/tooltip';
|
|
import {Trans} from '@common/i18n/trans';
|
|
import {MediaPictureInPictureExitIcon} from '@common/icons/media/media-picture-in-picture-exit';
|
|
import {MediaPictureInPictureIcon} from '@common/icons/media/media-picture-in-picture';
|
|
|
|
interface Props {
|
|
color?: ButtonProps['color'];
|
|
size?: ButtonProps['size'];
|
|
iconSize?: ButtonProps['size'];
|
|
className?: string;
|
|
}
|
|
export function PipButton({size = 'md', iconSize, color, className}: Props) {
|
|
const {trans} = useTrans();
|
|
const player = usePlayerActions();
|
|
const playerReady = usePlayerStore(s => s.providerReady);
|
|
const isPip = usePlayerStore(s => s.isPip);
|
|
const canPip = usePlayerStore(s => s.canPip);
|
|
|
|
if (!canPip) {
|
|
return null;
|
|
}
|
|
|
|
const labelMessage = trans(
|
|
isPip
|
|
? message('Exit picture-in-picture (p)')
|
|
: message('Enter picture-in-picture (p)')
|
|
);
|
|
|
|
return (
|
|
<Tooltip label={<Trans message={labelMessage} />} usePortal={false}>
|
|
<IconButton
|
|
disabled={!playerReady}
|
|
aria-label={labelMessage}
|
|
size={size}
|
|
color={color}
|
|
iconSize={iconSize}
|
|
className={className}
|
|
onClick={() => {
|
|
if (isPip) {
|
|
player.exitPip();
|
|
} else {
|
|
player.enterPip();
|
|
}
|
|
}}
|
|
>
|
|
{isPip ? (
|
|
<MediaPictureInPictureExitIcon />
|
|
) : (
|
|
<MediaPictureInPictureIcon />
|
|
)}
|
|
</IconButton>
|
|
</Tooltip>
|
|
);
|
|
}
|