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 | 19x | import { ReactElement, SVGProps } from "react";
import { useFullScreenControl, useSpotify } from "hooks";
import { DisplayInFullScreen } from "types/spotify";
type Props = {
icon: (props: SVGProps<SVGSVGElement>) => ReactElement;
displayInFullScreen: DisplayInFullScreen;
};
export default function FullScreenControl({
icon,
displayInFullScreen,
}: Props): ReactElement {
const { setDisplayInFullScreen } = useFullScreenControl(displayInFullScreen);
const isVisible = useSpotify().displayInFullScreen === displayInFullScreen;
return (
<>
<button
type="button"
className="button full-screen-control"
aria-label={isVisible ? "Hide" : "Show"}
onClick={(e) => {
e.stopPropagation();
setDisplayInFullScreen(!isVisible);
}}
>
{icon({ fill: isVisible ? "#1db954" : "#ffffffb3" })}
</button>
<style jsx>{`
button {
color: ${isVisible ? "#1db954" : "#ffffffb3"};
}
`}</style>
<style jsx>{`
.full-screen-control:hover :global(svg path) {
fill: #fff;
}
button {
display: flex;
justify-content: center;
align-items: center;
border: none;
background-color: transparent;
position: relative;
width: 32px;
height: 32px;
}
`}</style>
</>
);
}
|