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 79 80 81 82 83 84 | 19x 19x 19x 19x 19x | import { ReactElement, useCallback, useState } from "react";
import { Slider } from "components";
import { Volume } from "components/icons";
import { useSpotify } from "hooks";
import { configuration } from "utils";
export default function VolumeControl(): ReactElement {
const { player, volume, setVolume, lastVolume, setLastVolume } = useSpotify();
const [isHoveringVolume, setIsHoveringVolume] = useState(false);
const getActualVolume = useCallback(() => {
Iif (volume > 0) {
return 0;
}
Iif (lastVolume === 0 && volume === 0) {
return 1;
}
return lastVolume;
}, [lastVolume, volume]);
return (
<>
<button
type="button"
className="button volume"
onMouseEnter={() => {
setIsHoveringVolume(true);
}}
onMouseLeave={() => {
setIsHoveringVolume(false);
}}
aria-label={`${volume > 0 ? "Mute" : "Unmute"}`}
onClick={(e) => {
e.stopPropagation();
setVolume(getActualVolume());
Iif (volume > 0) {
setLastVolume(volume);
}
player?.setVolume(getActualVolume());
}}
>
<Volume volume={volume} />
</button>
<Slider
updateProgress={volume * 100}
action={(progressPercent) => {
Iif (!player) return;
const currentVolume = progressPercent / 100;
player.setVolume(currentVolume);
setLastVolume(currentVolume);
setVolume(currentVolume);
configuration.set("volume", currentVolume);
}}
valueText={`${volume}`}
title={"Control the volume"}
initialValuePercent={100}
showDot={isHoveringVolume}
className="volume-slider"
/>
<style jsx>{`
.volume:hover :global(svg path) {
fill: #fff;
}
button {
display: flex;
justify-content: center;
align-items: center;
border: none;
background-color: transparent;
position: relative;
}
.button {
width: 32px;
height: 32px;
}
:global(.volume-slider) {
max-width: 100px;
}
`}</style>
</>
);
}
|