Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 | 19x 19x 19x | import { ReactElement } from "react";
import { PictureInPicture } from "components/icons";
import { useSpotify } from "hooks";
import { callPictureInPicture } from "utils";
export default function PictureInPictureButton(): ReactElement {
const {
pictureInPictureCanvas,
videoRef,
setIsPip,
isPip,
isPictureInPictureLyircsCanvas,
setIsPictureInPictureLyircsCanvas,
} = useSpotify();
return (
<button
type="button"
aria-label="Picture in Picture"
className="navBar-Button pictureInPicture"
onClick={async (e) => {
e.stopPropagation();
Iif (pictureInPictureCanvas.current && videoRef.current) {
if (
isPip &&
document.pictureInPictureElement &&
!isPictureInPictureLyircsCanvas
) {
setIsPip(false);
setIsPictureInPictureLyircsCanvas.off();
await document.exitPictureInPicture();
} else {
setIsPictureInPictureLyircsCanvas.off();
setIsPip(true);
callPictureInPicture(
pictureInPictureCanvas.current,
videoRef.current
);
}
}
}}
>
<PictureInPicture />
<style jsx>{`
.navBar-Button {
background: transparent;
border: none;
outline: none;
margin: 0 10px;
color: #ffffffb3;
}
.navBar-Button.pictureInPicture {
color: ${isPip && !isPictureInPictureLyircsCanvas
? "#1db954"
: "#ffffffb3"};
}
.navBar-Button.pictureInPicture:hover {
color: ${isPip && !isPictureInPictureLyircsCanvas
? "#1db954"
: "#fff"};
}
`}</style>
</button>
);
}
|