Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-03-11 21:27:05 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

include PIP api state, only show if PIP enabled

Browse source
This commit is contained in:
rift 2025-11-27 21:42:56 -05:00
parent 69fea4daac
commit 5bc7040ef6
2 changed files with 36 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
src/routes/Player/ControlBar/ControlBar.js
View file

@ -168,9 +168,14 @@ const ControlBar = ({
<Icon className={styles['icon']} name={'more-vertical'} />
</Button>
<div className={classnames(styles['control-bar-buttons-menu-container'], { 'open': buttonsMenuOpen })}>
<Button className={classnames(styles['control-bar-button'], { 'disabled': stream === null })} tabIndex={-1} onClick={onPipButtonClick}>
<Icon className={styles['icon']} name={'open-in-browser'} />
</Button>
{
document.pictureInPictureEnabled ?
<Button className={classnames(styles['control-bar-button'], { 'disabled': stream === null })} tabIndex={-1} onClick={onPipButtonClick}>
<Icon className={styles['icon']} name={'open-in-browser'} />
</Button>
:
null
}
<Button className={classnames(styles['control-bar-button'], { 'disabled': statistics === null || statistics.type === 'Err' || stream === null || typeof stream.infoHash !== 'string' || typeof stream.fileIdx !== 'number' })} tabIndex={-1} onMouseDown={onStatisticsButtonMouseDown} onClick={onToggleStatisticsMenu}>
<Icon className={styles['icon']} name={'network'} />
</Button>

35
src/routes/Player/Player.js
View file

@ -279,18 +279,39 @@ const Player = ({ urlParams, queryParams }) => {
const onPipEnableRequested = React.useCallback(() => {
console.log("Entering picture in picture");
const videoElement = video.containerRef.current?.querySelector('video');
videoElement.requestPictureInPicture().then(() => {
video.setPictureInPicture(true);
});
if (videoElement && videoElement !== document.pictureInPictureElement) {
videoElement.requestPictureInPicture();
}
}, []);
const onPipDisableRequested = React.useCallback(() => {
console.log("Exiting picture in picture");
document.exitPictureInPicture().then(() => {
video.setPictureInPicture(false);
});
if (document.pictureInPictureElement) {
document.exitPictureInPicture();
}
}, []);
// Listen to PiP events to sync state
React.useEffect(() => {
const videoElement = video.containerRef.current?.querySelector('video');
if (!videoElement) return;
const onEnterPip = () => {
video.setPictureInPicture(true);
};
const onLeavePip = () => {
video.setPictureInPicture(false);
};
videoElement.addEventListener('enterpictureinpicture', onEnterPip);
videoElement.addEventListener('leavepictureinpicture', onLeavePip);
return () => {
videoElement.removeEventListener('enterpictureinpicture', onEnterPip);
videoElement.removeEventListener('leavepictureinpicture', onLeavePip);
};
}, [video.state.stream]);
const onVideoClick = React.useCallback(() => {
if (video.state.paused !== null) {
if (video.state.paused) {