Skip to content

Added VolumeIcons to VolumeControl #5

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Othamae wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Added VolumeIcons to VolumeControl #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
79ea21b
Added VolumeIcons
Othamae Oct 8, 2023
3d7b278
Added volumeIcons to volumeControl
Othamae Oct 8, 2023
fb65d11
Separate VolumeControl from Player
Othamae Oct 8, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 1 addition & 37 deletions src/components/Player.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { usePlayerStore } from "@/store/playerStore"
import { useEffect, useRef, useState } from "react"
import { Slider } from "./Slider"
import { VolumeControl } from "./VolumeControl"

export const Pause = ({ className }) => (
<svg className={className} role="img" height="16" width="16" aria-hidden="true" viewBox="0 0 16 16"><path d="M2.7 1a.7.7 0 0 0-.7.7v12.6a.7.7 0 0 0 .7.7h2.6a.7.7 0 0 0 .7-.7V1.7a.7.7 0 0 0-.7-.7H2.7zm8 0a.7.7 0 0 0-.7.7v12.6a.7.7 0 0 0 .7.7h2.6a.7.7 0 0 0 .7-.7V1.7a.7.7 0 0 0-.7-.7h-2.6z"></path></svg>
Expand Down Expand Up @@ -92,43 +93,6 @@ const SongControl = ({ audio }) => {



const VolumeControl = () => {
const volume = usePlayerStore(state => state.volume)
const setVolume = usePlayerStore(state => state.setVolume)
const previousVolumeRef = useRef(volume)

const isVolumeSilenced = volume < 0.1

const handleClickVolumen = () => {
if (isVolumeSilenced) {
setVolume(previousVolumeRef.current)
} else {
previousVolumeRef.current = volume
setVolume(0)
}
}

return (
<div className="flex justify-center gap-x-2 text-white">
<button className="opacity-70 hover:opacity-100 transition" onClick={handleClickVolumen}>
{isVolumeSilenced ? <VolumeSilence /> : <Volume />}
</button>

<Slider
defaultValue={[100]}
max={100}
min={0}
value={[volume * 100]}
className="w-[95px]"
onValueChange={(value) => {
const [newVolume] = value
const volumeValue = newVolume / 100
setVolume(volumeValue)
}}
/>
</div>
)
}

export function Player () {
const { currentMusic, isPlaying, setIsPlaying, volume } = usePlayerStore(state => state)
Expand Down
46 changes: 46 additions & 0 deletions src/components/VolumeControl.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
import { VolumeMax, VolumeMedium, VolumeMin, VolumeSilence } from "@/icons/Volume"
import { usePlayerStore } from "@/store/playerStore"
import { useRef } from "react"
import { Slider } from "./Slider"


export const VolumeControl = () => {
const volume = usePlayerStore(state => state.volume)
const setVolume = usePlayerStore(state => state.setVolume)
const previousVolumeRef = useRef(volume)

const isVolumeSilenced = volume < 0.1

const handleClickVolumen = () => {
if (isVolumeSilenced) {
setVolume(previousVolumeRef.current)
} else {
previousVolumeRef.current = volume
setVolume(0)
}
}

return (
<div className="flex justify-center gap-x-2 text-white">
<button className="opacity-70 hover:opacity-100 transition" onClick={handleClickVolumen}>
{volume <= 0 ? <VolumeSilence /> :
(volume < 0.3 ? <VolumeMin /> : (
volume < 0.7 ? <VolumeMedium /> : <VolumeMax />
))}
</button>

<Slider
defaultValue={[100]}
max={100}
min={0}
value={[volume * 100]}
className="w-[95px]"
onValueChange={(value) => {
const [newVolume] = value
const volumeValue = newVolume / 100
setVolume(volumeValue)
}}
/>
</div>
)
}
20 changes: 20 additions & 0 deletions src/icons/Volume.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
export const VolumeSilence = () => (
<svg fill="currentColor" role="presentation" height="16" width="16" aria-hidden="true" aria-label="Volumen apagado" viewBox="0 0 16 16" ><path d="M13.86 5.47a.75.75 0 0 0-1.061 0l-1.47 1.47-1.47-1.47A.75.75 0 0 0 8.8 6.53L10.269 8l-1.47 1.47a.75.75 0 1 0 1.06 1.06l1.47-1.47 1.47 1.47a.75.75 0 0 0 1.06-1.06L12.39 8l1.47-1.47a.75.75 0 0 0 0-1.06z"></path><path d="M10.116 1.5A.75.75 0 0 0 8.991.85l-6.925 4a3.642 3.642 0 0 0-1.33 4.967 3.639 3.639 0 0 0 1.33 1.332l6.925 4a.75.75 0 0 0 1.125-.649v-1.906a4.73 4.73 0 0 1-1.5-.694v1.3L2.817 9.852a2.141 2.141 0 0 1-.781-2.92c.187-.324.456-.594.78-.782l5.8-3.35v1.3c.45-.313.956-.55 1.5-.694V1.5z"></path></svg>
)

export const VolumeMax = () => (
<svg fill="currentColor" height="16" width="16" aria-hidden="true" aria-label="Volume high" viewBox="0 0 16 16" >
<path d="M9.741.85a.75.75 0 0 1 .375.65v13a.75.75 0 0 1-1.125.65l-6.925-4a3.642 3.642 0 0 1-1.33-4.967 3.639 3.639 0 0 1 1.33-1.332l6.925-4a.75.75 0 0 1 .75 0zm-6.924 5.3a2.139 2.139 0 0 0 0 3.7l5.8 3.35V2.8l-5.8 3.35zm8.683 4.29V5.56a2.75 2.75 0 0 1 0 4.88z"></path><path d="M11.5 13.614a5.752 5.752 0 0 0 0-11.228v1.55a4.252 4.252 0 0 1 0 8.127v1.55z"></path>
</svg>
)


export const VolumeMedium = () => (
<svg fill="currentColor" height="16" width="16" aria-hidden="true" aria-label="Volume medium" viewBox="0 0 16 16" >
<path d="M9.741.85a.75.75 0 0 1 .375.65v13a.75.75 0 0 1-1.125.65l-6.925-4a3.642 3.642 0 0 1-1.33-4.967 3.639 3.639 0 0 1 1.33-1.332l6.925-4a.75.75 0 0 1 .75 0zm-6.924 5.3a2.139 2.139 0 0 0 0 3.7l5.8 3.35V2.8l-5.8 3.35zm8.683 6.087a4.502 4.502 0 0 0 0-8.474v1.65a2.999 2.999 0 0 1 0 5.175v1.649z"></path>
</svg>
)

export const VolumeMin = () => (
<svg fill="currentColor" height="16" width="16" aria-hidden="true" aria-label="Volume low" viewBox="0 0 16 16"><path d="M9.741.85a.75.75 0 0 1 .375.65v13a.75.75 0 0 1-1.125.65l-6.925-4a3.642 3.642 0 0 1-1.33-4.967 3.639 3.639 0 0 1 1.33-1.332l6.925-4a.75.75 0 0 1 .75 0zm-6.924 5.3a2.139 2.139 0 0 0 0 3.7l5.8 3.35V2.8l-5.8 3.35zm8.683 4.29V5.56a2.75 2.75 0 0 1 0 4.88z"></path></svg>
)