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 67 68 69 70 71 72 73 74 75 76 77 78 | 19x 19x | import { ReactElement } from "react";
import { LyricsPictureInPicture } from "components/icons";
import { useAuth, useSpotify, useToast, useTranslations } from "hooks";
interface ILyricsPIPButtonProps {
background?: string;
}
export default function LyricsPIPButton({
background,
}: Readonly<ILyricsPIPButtonProps>): ReactElement {
const {
setIsPictureInPictureLyircsCanvas,
isPictureInPictureLyircsCanvas,
videoRef,
setIsPip,
isPip,
} = useSpotify();
const { isPremium } = useAuth();
const { translations } = useTranslations();
const { addToast } = useToast();
return (
<button
className="lyrics-pip-button"
onClick={async (e) => {
e.stopPropagation();
Iif (!isPremium) {
addToast({
variant: "error",
message: translations.toastMessages.premiumRequired,
});
}
Iif (
isPictureInPictureLyircsCanvas &&
document.pictureInPictureElement
) {
await document.exitPictureInPicture();
setIsPictureInPictureLyircsCanvas.off();
setIsPip(false);
return;
}
setIsPictureInPictureLyircsCanvas.on();
setIsPip(true);
await videoRef.current?.play();
await videoRef.current?.requestPictureInPicture();
}}
>
<LyricsPictureInPicture />
<style jsx>{`
.lyrics-pip-button {
width: 40px;
height: 40px;
margin: 0 0 0 32px;
z-index: 999999999999900;
padding: 10px;
color: ${isPip && isPictureInPictureLyircsCanvas
? "#1db954"
: "#ffffffb3"};
--border-width: 3px;
display: flex;
justify-content: center;
align-items: center;
font-family: Lato, sans-serif;
font-size: 2.5rem;
text-transform: uppercase;
background: ${background ?? "transparent"};
border: none;
}
.lyrics-pip-button:hover {
color: #fff;
}
`}</style>
</button>
);
}
|