feat: use context for audio related info

src/components/audio/audio.component.tsx

@@ -1,22 +1,40 @@
-import React from 'react';
+import {NextSeo} from 'next-seo';
+import React, {useEffect} from 'react';
+import {useAudioPlayerContext} from 'src/contexts/audio-player-context';
 import {useAudioRefContext} from 'src/contexts/audio-ref-context';
+import {useDynamicTitle} from 'src/hooks/use-dynamic-title';
 
 import {Invisible} from './audio.component.styles';
 import {useAudioModule} from './hooks/use-audio-component';
 
-export function AudioComponent() {
+interface Props {
+  defaultSpeed: string;
+}
+
+export function AudioComponent({defaultSpeed}: Props) {
   const audioRef = useAudioRefContext();
+  const {dynamicTitle} = useDynamicTitle();
+  const {setSpeed} = useAudioPlayerContext();
+
+  useEffect(() => {
+    setSpeed(defaultSpeed);
+  }, [defaultSpeed, setSpeed]);
+
   useAudioModule();
 
   return (
-    <Invisible>
-      <audio
-        ref={audioRef}
-        aria-label="player"
-        // controls
-      >
-        <track kind="captions" />
-      </audio>
-    </Invisible>
+    <>
+      <NextSeo title={dynamicTitle} />
+
+      <Invisible>
+        <audio
+          ref={audioRef}
+          aria-label="player"
+          // controls
+        >
+          <track kind="captions" />
+        </audio>
+      </Invisible>
+    </>
   );
 }

src/components/audio/hooks/use-audio-buffered.ts

@@ -1,6 +1,5 @@
-import {useAtom} from 'jotai';
 import {useEffect} from 'react';
-import {setBufferedAtom} from 'src/atoms/buffered.atoms';
+import {useAudioPlayerContext} from 'src/contexts/audio-player-context';
 import {useAudioRefContext} from 'src/contexts/audio-ref-context';
 
 const getBufferedAmount = (audio: HTMLAudioElement) => {
@@ -13,7 +12,7 @@ const getBufferedAmount = (audio: HTMLAudioElement) => {
 
 export function useAudioBuffered() {
   const ref = useAudioRefContext();
-  const [, setBuffered] = useAtom(setBufferedAtom);
+  const {setBuffered} = useAudioPlayerContext();
 
   useEffect(() => {
     if (ref.current === null) {

src/components/audio/hooks/use-audio-load.ts

@@ -1,20 +1,17 @@
-import {useAtom} from 'jotai';
 import {useCallback, useEffect, useState} from 'react';
-import {setDurationAtom} from 'src/atoms/duration.atoms';
-import {setLoadedAtom} from 'src/atoms/load.atoms';
+import {useAudioPlayerContext} from 'src/contexts/audio-player-context';
 import {useAudioRefContext} from 'src/contexts/audio-ref-context';
 import {useAudioUrlContext} from 'src/contexts/audio-url-context';
 
 export function useAudioLoad() {
   const ref = useAudioRefContext();
   const {url} = useAudioUrlContext();
+  const {setDuration, setReady} = useAudioPlayerContext();
   const [savedUrl, setSavedUrl] = useState<string>();
-  const [, setLoaded] = useAtom(setLoadedAtom);
-  const [, setDuration] = useAtom(setDurationAtom);
 
   const handleCanPlay = useCallback(() => {
-    setLoaded(true);
-  }, [setLoaded]);
+    setReady(true);
+  }, [setReady]);
 
   const handleMetadata = useCallback(() => {
     if (ref.current === null) {
@@ -38,12 +35,13 @@ export function useAudioLoad() {
     audio.src = url;
     setSavedUrl(url);
 
-    audio.addEventListener('canplay', () => handleCanPlay());
-    audio.addEventListener('loadedmetadata', () => handleMetadata());
+    audio.oncanplay = handleCanPlay;
+    audio.onloadedmetadata = handleMetadata;
 
-    return () => {
-      audio.removeEventListener('canplay', () => handleCanPlay());
-      audio.removeEventListener('loadedmetadata', () => handleMetadata());
-    };
+    // todo: fix me
+    // return () => {
+    //   audio.oncanplay = null;
+    //   audio.onloadedmetadata = null;
+    // };
   }, [ref, handleCanPlay, handleMetadata, savedUrl, setDuration, url]);
 }

src/components/audio/hooks/use-audio-loop.ts

@@ -1,11 +1,10 @@
-import {useAtom} from 'jotai';
 import {useEffect} from 'react';
-import {isRepeatingAtom} from 'src/atoms/repeat.atoms';
+import {useAudioPlayerContext} from 'src/contexts/audio-player-context';
 import {useAudioRefContext} from 'src/contexts/audio-ref-context';
 
 export function useAudioLoop() {
   const ref = useAudioRefContext();
-  const [isRepeating] = useAtom(isRepeatingAtom);
+  const {isRepeating} = useAudioPlayerContext();
 
   useEffect(() => {
     if (ref.current === null) {

src/components/audio/hooks/use-audio-play-pause.ts

@@ -1,11 +1,10 @@
-import {useAtom} from 'jotai';
 import {useEffect} from 'react';
-import {isPlayingAtom} from 'src/atoms/play-pause.atoms';
+import {useAudioPlayerContext} from 'src/contexts/audio-player-context';
 import {useAudioRefContext} from 'src/contexts/audio-ref-context';
 
 export function useAudioPlayPause() {
   const ref = useAudioRefContext();
-  const [isPlaying] = useAtom(isPlayingAtom);
+  const {isPlaying} = useAudioPlayerContext();
 
   useEffect(() => {
     if (ref.current === null) {

src/components/audio/hooks/use-audio-playback-rate.ts

@@ -1,11 +1,10 @@
-import {useAtom} from 'jotai';
 import {useEffect} from 'react';
-import {speedAtom} from 'src/atoms/speed.atoms';
+import {useAudioPlayerContext} from 'src/contexts/audio-player-context';
 import {useAudioRefContext} from 'src/contexts/audio-ref-context';
 
 export function useAudioPlaybackRate() {
   const ref = useAudioRefContext();
-  const [speed] = useAtom(speedAtom);
+  const {speed} = useAudioPlayerContext();
 
   useEffect(() => {
     if (ref.current === null) {

src/components/audio/hooks/use-audio-progress.ts

@@ -1,13 +1,10 @@
-import {useAtom} from 'jotai';
 import {useEffect} from 'react';
-import {isPlayingAtom} from 'src/atoms/play-pause.atoms';
-import {setProgressAtom} from 'src/atoms/progress.atoms';
+import {useAudioPlayerContext} from 'src/contexts/audio-player-context';
 import {useAudioRefContext} from 'src/contexts/audio-ref-context';
 
 export function useAudioProgress() {
   const ref = useAudioRefContext();
-  const [isPlaying] = useAtom(isPlayingAtom);
-  const [, setProgress] = useAtom(setProgressAtom);
+  const {isPlaying, setProgress} = useAudioPlayerContext();
   const fps = 10;
 
   useEffect(() => {

src/components/audio/hooks/use-audio-seek.ts

@@ -1,11 +1,10 @@
-import {useAtom} from 'jotai';
 import {useEffect} from 'react';
-import {seekAtom} from 'src/atoms/seek.atoms';
+import {useAudioPlayerContext} from 'src/contexts/audio-player-context';
 import {useAudioRefContext} from 'src/contexts/audio-ref-context';
 
 export function useAudioSeek() {
   const ref = useAudioRefContext();
-  const [seek] = useAtom(seekAtom);
+  const {seek} = useAudioPlayerContext();
 
   useEffect(() => {
     if (ref.current === null) {

src/components/audio/hooks/use-audio-volume.ts

@@ -1,12 +1,10 @@
-import {useAtom} from 'jotai';
 import {useEffect} from 'react';
-import {setVolumeAtom, volumeAtom} from 'src/atoms/volume.atoms';
+import {useAudioPlayerContext} from 'src/contexts/audio-player-context';
 import {useAudioRefContext} from 'src/contexts/audio-ref-context';
 
 export function useAudioVolume() {
   const ref = useAudioRefContext();
-  const [volume] = useAtom(volumeAtom);
-  const [, setVolume] = useAtom(setVolumeAtom);
+  const {volume, setVolume} = useAudioPlayerContext();
 
   useEffect(() => {
     if (ref.current === null) {

src/components/audio/hooks/use-keyboard-toggle.ts

@@ -1,33 +1,20 @@
-import {useAtom} from 'jotai';
 import {useEffect} from 'react';
+import {useAudioPlayerContext} from 'src/contexts/audio-player-context';
 
-import {
-  isPlayingAtom,
-  setPauseAtom,
-  setPlayAtom,
-} from '../../../atoms/play-pause.atoms';
-
-/**
- * Hook to toggle play/pause state with keyboard
- * @param keyCode
- */
 export function useKeyboardToggle(keyCode = 'Space'): void {
-  const [isPlaying] = useAtom(isPlayingAtom);
-  const [, setPlay] = useAtom(setPlayAtom);
-  const [, setPause] = useAtom(setPauseAtom);
+  const {togglePlaying} = useAudioPlayerContext();
 
   useEffect(() => {
-    const handleKeyboard = (event) => {
-      if (event.code === keyCode) {
-        if (isPlaying) {
-          return setPause();
-        }
-
-        setPlay();
+    const handler = (e: KeyboardEvent) => {
+      if (e.code === keyCode) {
+        togglePlaying();
       }
     };
 
-    document.addEventListener('keypress', handleKeyboard);
-    return () => document.removeEventListener('keypress', handleKeyboard);
-  }, [isPlaying, keyCode, setPause, setPlay]);
+    document.addEventListener('keypress', handler);
+
+    return () => {
+      document.removeEventListener('keypress', handler);
+    };
+  }, [keyCode, togglePlaying]);
 }

src/components/indicators/hooks/use-indicators-component.ts

@@ -1,22 +1,24 @@
-import {useAtom} from 'jotai';
 import {useMemo} from 'react';
 import speedToPercentage from 'speed-to-percentage';
 import speedToSemitones from 'speed-to-semitones';
-
-import {speedAtom} from '../../../atoms/speed.atoms';
+import {useAudioPlayerContext} from 'src/contexts/audio-player-context';
 
 interface UseIndicatorsComponent {
   percentage: string;
   semitones: string;
 }
 
-/**
- * Entry hook for the indicators component
- */
 export function useIndicatorsComponent(): UseIndicatorsComponent {
-  const [speed] = useAtom(speedAtom);
-  const percentage = useMemo(() => speedToPercentage(speed, 1).toString(), [speed]);
-  const semitones = useMemo(() => speedToSemitones(speed, 1).toString(), [speed]);
+  const {speed} = useAudioPlayerContext();
+
+  const percentage = useMemo(
+    () => speedToPercentage(speed, 1).toString(),
+    [speed],
+  );
+  const semitones = useMemo(
+    () => speedToSemitones(speed, 1).toString(),
+    [speed],
+  );
 
   return {
     percentage,