feat: Add volume control

e2e/volumeControl.spec.ts

@@ -0,0 +1,201 @@
+import { expect, test, type Locator } from '@playwright/test'
+
+test.describe.serial('Volume control functionality', () => {
+  let startOrPauseOrResumeButton: Locator
+  let muteUnmuteButton: Locator
+  let volumeControl: Locator
+  const youtubeLink = 'https://youtu.be/HRhNujE-oCQ?si=RIYHkbcwGp1a4645'
+
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/')
+
+    startOrPauseOrResumeButton = page.getByRole('button', {
+      name: /Começar|Pausar|Continuar/,
+    })
+    muteUnmuteButton = page
+      .locator('div')
+      .filter({ hasText: /^Volume$/ })
+      .getByRole('button')
+    volumeControl = page.getByLabel('Volume')
+
+    const youtubeLinkInput = page.getByPlaceholder('Link do youtube')
+    await youtubeLinkInput.click()
+    await youtubeLinkInput.fill(youtubeLink)
+  })
+
+  test('Volume change while playing', async ({ page }) => {
+    await expect(volumeControl).toBeVisible()
+    await expect(volumeControl).toHaveValue('0.5')
+
+    await startOrPauseOrResumeButton.click()
+    await page.waitForTimeout(2000)
+
+    await expect(volumeControl).toHaveValue('0.5')
+
+    await volumeControl.fill('0.25')
+    await page.waitForTimeout(2000)
+
+    await expect(volumeControl).toHaveValue('0.25')
+
+    await volumeControl.fill('1')
+    await page.waitForTimeout(2000)
+
+    await expect(volumeControl).toHaveValue('1')
+
+    await volumeControl.fill('0.75')
+    await page.waitForTimeout(2000)
+
+    await expect(volumeControl).toHaveValue('0.75')
+
+    await startOrPauseOrResumeButton.click()
+  })
+
+  test('Starting with pre-set volume', async ({ page }) => {
+    await expect(volumeControl).toBeVisible()
+    await expect(volumeControl).toHaveValue('0.5')
+
+    await volumeControl.fill('0.1')
+
+    await expect(volumeControl).toHaveValue('0.1')
+
+    await startOrPauseOrResumeButton.click()
+    await page.waitForTimeout(2000)
+
+    await expect(volumeControl).toHaveValue('0.1')
+
+    await startOrPauseOrResumeButton.click()
+  })
+
+  test('Starting already muted by changing volume to zero', async ({
+    page,
+  }) => {
+    await expect(volumeControl).toBeVisible()
+    await expect(volumeControl).toHaveValue('0.5')
+
+    await volumeControl.fill('0')
+
+    await expect(volumeControl).toHaveValue('0')
+
+    await startOrPauseOrResumeButton.click()
+    await page.waitForTimeout(2000)
+
+    await expect(volumeControl).toHaveValue('0')
+
+    await startOrPauseOrResumeButton.click()
+  })
+
+  test('Starting already muted by mute button', async ({ page }) => {
+    await expect(volumeControl).toBeVisible()
+    await expect(volumeControl).toHaveValue('0.5')
+
+    await muteUnmuteButton.click()
+
+    await expect(volumeControl).toHaveValue('0')
+
+    await startOrPauseOrResumeButton.click()
+    await page.waitForTimeout(2000)
+
+    await expect(volumeControl).toHaveValue('0')
+
+    await startOrPauseOrResumeButton.click()
+  })
+
+  test('Muting and unmuting by changing volume while playing', async ({
+    page,
+  }) => {
+    await expect(volumeControl).toBeVisible()
+    await expect(volumeControl).toHaveValue('0.5')
+
+    await startOrPauseOrResumeButton.click()
+    await page.waitForTimeout(2000)
+
+    await expect(volumeControl).toHaveValue('0.5')
+
+    await volumeControl.fill('0')
+    await page.waitForTimeout(2000)
+
+    await expect(volumeControl).toHaveValue('0')
+
+    await volumeControl.fill('0.5')
+    await page.waitForTimeout(2000)
+
+    await expect(volumeControl).toHaveValue('0.5')
+
+    await startOrPauseOrResumeButton.click()
+  })
+
+  test('Muting and unmuting using mute button while playing', async ({
+    page,
+  }) => {
+    await expect(volumeControl).toBeVisible()
+    await expect(volumeControl).toHaveValue('0.5')
+
+    await startOrPauseOrResumeButton.click()
+    await page.waitForTimeout(2000)
+
+    await expect(volumeControl).toHaveValue('0.5')
+
+    await volumeControl.fill('0.25')
+    await page.waitForTimeout(2000)
+
+    await expect(volumeControl).toHaveValue('0.25')
+
+    await muteUnmuteButton.click()
+    await page.waitForTimeout(2000)
+
+    await expect(volumeControl).toHaveValue('0')
+
+    await muteUnmuteButton.click()
+    await page.waitForTimeout(2000)
+
+    await expect(volumeControl).toHaveValue('0.25')
+
+    await startOrPauseOrResumeButton.click()
+  })
+
+  test("Changing volume while it's muted and playing", async ({ page }) => {
+    await expect(volumeControl).toBeVisible()
+    await expect(volumeControl).toHaveValue('0.5')
+
+    await startOrPauseOrResumeButton.click()
+    await page.waitForTimeout(2000)
+
+    await expect(volumeControl).toHaveValue('0.5')
+
+    await muteUnmuteButton.click()
+    await page.waitForTimeout(2000)
+
+    await expect(volumeControl).toHaveValue('0')
+
+    await volumeControl.fill('0.75')
+    await page.waitForTimeout(2000)
+
+    await expect(volumeControl).toHaveValue('0.75')
+
+    await startOrPauseOrResumeButton.click()
+  })
+
+  test('Muting by changing volume to zero and unmuting while playing', async ({
+    page,
+  }) => {
+    await expect(volumeControl).toBeVisible()
+    await expect(volumeControl).toHaveValue('0.5')
+
+    await startOrPauseOrResumeButton.click()
+    await page.waitForTimeout(2000)
+
+    await expect(volumeControl).toHaveValue('0.5')
+
+    await volumeControl.fill('0')
+    await page.waitForTimeout(2000)
+
+    await expect(volumeControl).toHaveValue('0')
+
+    await muteUnmuteButton.click()
+    await page.waitForTimeout(2000)
+
+    await expect(volumeControl).toHaveValue('0.5')
+
+    await startOrPauseOrResumeButton.click()
+  })
+})

src/App.tsx

@@ -1,5 +1,7 @@
 import { useEffect, useState } from 'react'
 
+import cn from './lib/cn'
+
 import { MediaPlayer, MediaProvider } from '@vidstack/react'
 import '@vidstack/react/player/styles/base.css'
 
@@ -8,26 +10,31 @@ import {
   Button,
   StartOrPauseTimerButton,
   Timer,
+  VolumeControl,
 } from './components'
 
 import usePlayer from './hooks/usePlayer'
 import useTimer from './hooks/useTimer'
 
-import { useTranslation } from 'react-i18next'
-
 import OneHourRandomAudioMomentsGenerator from './classes/oneHourRandomAudioMomentsGenerator'
 
-import { FaGithub } from 'react-icons/fa'
+import { useTranslation } from 'react-i18next'
 
 import { ONE_HOUR_IN_SECONDS } from './constants'
 
+import { FaGithub } from 'react-icons/fa'
+
 export default function App() {
   const {
     player,
     playerPaused,
     playerCurrentTime,
     playerDuration,
     playerCanPlay,
+    playerVolume,
+    changePlayerVolume,
+    playerMuted,
+    setPlayerMuted,
     playerSource,
     setPlayerSource,
     resumePlayer,
@@ -125,12 +132,28 @@ export default function App() {
   }, [t, i18n.language])
 
   return (
-    <main className='flex h-screen flex-col items-center justify-center gap-40 bg-[#FFD700] pb-32'>
-      <h1 className='font-[Baloo] text-6xl font-bold text-[#333333] shadow-black drop-shadow'>
+    <main
+      className={cn(
+        'flex h-screen flex-col items-center justify-center gap-40',
+        'bg-[#FFD700] pb-32',
+      )}
+    >
+      <h1
+        className={cn(
+          'font-[Baloo] text-6xl font-bold text-[#333333] shadow-black',
+          'drop-shadow',
+        )}
+      >
         {t('title')}
       </h1>
       <section className='flex flex-col items-center gap-12'>
         <Timer className='mb-10' timeLeft={timeLeft} />
+        <VolumeControl
+          playerVolume={playerVolume}
+          changePlayerVolume={changePlayerVolume}
+          playerMuted={playerMuted}
+          setPlayerMuted={setPlayerMuted}
+        />
         <AudioOrVideoSourceInput
           onChange={handleAudioOrVideoSourceInputChange}
         />
@@ -151,7 +174,13 @@ export default function App() {
         </div>
       </section>
       <div className='absolute bottom-0 -z-50 opacity-0'>
-        <MediaPlayer src={playerSource} ref={player} onEnd={resetPlayer}>
+        <MediaPlayer
+          src={playerSource}
+          ref={player}
+          volume={playerVolume}
+          muted={playerMuted}
+          onEnd={resetPlayer}
+        >
           <MediaProvider />
         </MediaPlayer>
       </div>

src/components/VolumeControl.tsx

@@ -0,0 +1,40 @@
+import { FaVolumeMute, FaVolumeUp } from 'react-icons/fa'
+
+interface VolumeControlProps {
+  playerVolume: number
+  changePlayerVolume: (volume: number) => void
+  playerMuted: boolean
+  setPlayerMuted: (muted: boolean) => void
+}
+
+export default function VolumeControl({
+  playerVolume,
+  changePlayerVolume,
+  playerMuted,
+  setPlayerMuted,
+}: VolumeControlProps) {
+  return (
+    <div className='flex gap-2'>
+      <button
+        type='button'
+        onClick={() => setPlayerMuted(!playerMuted)}
+        className='transition duration-700 ease-in-out hover:scale-110'
+      >
+        {playerMuted ? <FaVolumeMute size={24} /> : <FaVolumeUp size={24} />}
+      </button>
+      <label id='volume-control' className='sr-only'>
+        Volume
+      </label>
+      <input
+        type='range'
+        min='0'
+        max='1'
+        step='0.01'
+        value={playerMuted ? 0 : playerVolume}
+        onChange={(e) => changePlayerVolume(parseFloat(e.target.value))}
+        className='w-16 accent-blue-500'
+        aria-labelledby='volume-control'
+      />
+    </div>
+  )
+}

src/components/index.tsx

@@ -2,5 +2,12 @@ import AudioOrVideoSourceInput from './AudioOrVideoSourceInput'
 import Button from './Button'
 import StartOrPauseTimerButton from './StartOrPauseTimerButton'
 import Timer from './Timer'
+import VolumeControl from './VolumeControl'
 
-export { AudioOrVideoSourceInput, Button, StartOrPauseTimerButton, Timer }
+export {
+  AudioOrVideoSourceInput,
+  Button,
+  StartOrPauseTimerButton,
+  Timer,
+  VolumeControl,
+}

src/hooks/usePlayer.ts

@@ -6,13 +6,30 @@ import {
   type MediaPlayerInstance,
 } from '@vidstack/react'
 
+const volumeAtFifthPercent = 0.5
+
 export default function usePlayer() {
   const player = useRef<MediaPlayerInstance>(null)
   const remote = useMediaRemote(player)
 
   const { paused, currentTime, duration, canPlay } = useMediaStore(player)
 
   const [playerSource, setPlayerSource] = useState<string | File>('')
+  const [playerVolume, setPlayerVolume] = useState<number>(volumeAtFifthPercent)
+  const [playerMuted, setPlayerMuted] = useState<boolean>(false)
+
+  function changePlayerVolume(volume: number) {
+    if (volume === 0) {
+      setPlayerMuted(true)
+      setPlayerVolume(volumeAtFifthPercent)
+
+      return
+    }
+
+    if (playerMuted) setPlayerMuted(false)
+
+    setPlayerVolume(volume)
+  }
 
   const pausePlayer = () => remote.pause()
   const resetPlayerCurrentTime = () => remote.seek(0)
@@ -38,6 +55,10 @@ export default function usePlayer() {
     playerCurrentTime: currentTime,
     playerDuration: duration,
     playerCanPlay: canPlay,
+    playerVolume,
+    changePlayerVolume,
+    playerMuted,
+    setPlayerMuted,
     playerSource,
     setPlayerSource,
     resumePlayer: () => remote.play(),