feat: merge all player context together + improve title generation

src/components/audio/audio.component.tsx

@@ -1,24 +1,24 @@
 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 {usePlayerContext} from 'src/contexts/player-context';
 import {useDynamicTitle} from 'src/hooks/use-dynamic-title';
 
 import {Invisible} from './audio.component.styles';
 import {useAudioModule} from './hooks/use-audio-component';
 
 interface Props {
+  url: string;
   defaultSpeed: string;
 }
 
-export function AudioComponent({defaultSpeed}: Props) {
-  const audioRef = useAudioRefContext();
+export function AudioComponent({url, defaultSpeed}: Props) {
+  const {ref, setUrl, setSpeed} = usePlayerContext();
   const {dynamicTitle} = useDynamicTitle();
-  const {setSpeed} = useAudioPlayerContext();
 
   useEffect(() => {
+    setUrl(url);
     setSpeed(defaultSpeed);
-  }, [defaultSpeed, setSpeed]);
+  }, [url, setUrl, defaultSpeed, setSpeed]);
 
   useAudioModule();
 
@@ -28,7 +28,7 @@ export function AudioComponent({defaultSpeed}: Props) {
 
       <Invisible>
         <audio
-          ref={audioRef}
+          ref={ref}
           aria-label="player"
           // controls
         >

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

@@ -1,6 +1,5 @@
 import {useEffect} from 'react';
-import {useAudioPlayerContext} from 'src/contexts/audio-player-context';
-import {useAudioRefContext} from 'src/contexts/audio-ref-context';
+import {usePlayerContext} from 'src/contexts/player-context';
 
 const getBufferedAmount = (audio: HTMLAudioElement) => {
   try {
@@ -11,8 +10,7 @@ const getBufferedAmount = (audio: HTMLAudioElement) => {
 };
 
 export function useAudioBuffered() {
-  const ref = useAudioRefContext();
-  const {setBuffered} = useAudioPlayerContext();
+  const {ref, setBuffered} = usePlayerContext();
 
   useEffect(() => {
     if (ref.current === null) {

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

@@ -1,12 +1,8 @@
 import {useCallback, useEffect, useState} from 'react';
-import {useAudioPlayerContext} from 'src/contexts/audio-player-context';
-import {useAudioRefContext} from 'src/contexts/audio-ref-context';
-import {useAudioUrlContext} from 'src/contexts/audio-url-context';
+import {usePlayerContext} from 'src/contexts/player-context';
 
 export function useAudioLoad() {
-  const ref = useAudioRefContext();
-  const {url} = useAudioUrlContext();
-  const {setDuration, setReady} = useAudioPlayerContext();
+  const {ref, setDuration, setReady, url} = usePlayerContext();
   const [savedUrl, setSavedUrl] = useState<string>();
 
   const handleCanPlay = useCallback(() => {

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

@@ -1,10 +1,8 @@
 import {useEffect} from 'react';
-import {useAudioPlayerContext} from 'src/contexts/audio-player-context';
-import {useAudioRefContext} from 'src/contexts/audio-ref-context';
+import {usePlayerContext} from 'src/contexts/player-context';
 
 export function useAudioLoop() {
-  const ref = useAudioRefContext();
-  const {isRepeating} = useAudioPlayerContext();
+  const {ref, isRepeating} = usePlayerContext();
 
   useEffect(() => {
     if (ref.current === null) {

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

@@ -1,5 +1,5 @@
 import {useEffect} from 'react';
-import {useAudioRefContext} from 'src/contexts/audio-ref-context';
+import {usePlayerContext} from 'src/contexts/player-context';
 
 declare global {
   interface HTMLAudioElement {
@@ -9,7 +9,7 @@ declare global {
 }
 
 export function useAudioPitch() {
-  const ref = useAudioRefContext();
+  const {ref} = usePlayerContext();
 
   useEffect(() => {
     if (ref.current === null) {

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

@@ -1,10 +1,8 @@
 import {useEffect} from 'react';
-import {useAudioPlayerContext} from 'src/contexts/audio-player-context';
-import {useAudioRefContext} from 'src/contexts/audio-ref-context';
+import {usePlayerContext} from 'src/contexts/player-context';
 
 export function useAudioPlayPause() {
-  const ref = useAudioRefContext();
-  const {isPlaying} = useAudioPlayerContext();
+  const {ref, isPlaying} = usePlayerContext();
 
   useEffect(() => {
     if (ref.current === null) {

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

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

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

@@ -1,11 +1,10 @@
 import {useEffect} from 'react';
-import {useAudioPlayerContext} from 'src/contexts/audio-player-context';
-import {useAudioRefContext} from 'src/contexts/audio-ref-context';
+import {usePlayerContext} from 'src/contexts/player-context';
+
+const fps = 10;
 
 export function useAudioProgress() {
-  const ref = useAudioRefContext();
-  const {isPlaying, setProgress} = useAudioPlayerContext();
-  const fps = 10;
+  const {ref, isPlaying, setProgress} = usePlayerContext();
 
   useEffect(() => {
     let i1: NodeJS.Timeout | undefined = undefined;

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

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

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

@@ -1,10 +1,8 @@
 import {useEffect} from 'react';
-import {useAudioPlayerContext} from 'src/contexts/audio-player-context';
-import {useAudioRefContext} from 'src/contexts/audio-ref-context';
+import {usePlayerContext} from 'src/contexts/player-context';
 
 export function useAudioVolume() {
-  const ref = useAudioRefContext();
-  const {volume, setVolume} = useAudioPlayerContext();
+  const {ref, volume, setVolume} = usePlayerContext();
 
   useEffect(() => {
     if (ref.current === null) {

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

@@ -1,8 +1,8 @@
 import {useEffect} from 'react';
-import {useAudioPlayerContext} from 'src/contexts/audio-player-context';
+import {usePlayerContext} from 'src/contexts/player-context';
 
 export function useKeyboardToggle(keyCode = 'Space'): void {
-  const {togglePlaying} = useAudioPlayerContext();
+  const {togglePlaying} = usePlayerContext();
 
   useEffect(() => {
     const handler = (e: KeyboardEvent) => {

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

@@ -1,15 +1,15 @@
 import {useMemo} from 'react';
 import speedToPercentage from 'speed-to-percentage';
 import speedToSemitones from 'speed-to-semitones';
-import {useAudioPlayerContext} from 'src/contexts/audio-player-context';
+import {usePlayerContext} from 'src/contexts/player-context';
 
 interface UseIndicatorsComponent {
   percentage: string;
   semitones: string;
 }
 
 export function useIndicatorsComponent(): UseIndicatorsComponent {
-  const {speed} = useAudioPlayerContext();
+  const {speed} = usePlayerContext();
 
   const percentage = useMemo(
     () => speedToPercentage(speed, 1).toString(),

src/contexts/audio-player-context.tsx → src/contexts/player-context.tsx

@@ -2,13 +2,16 @@ import React, {
   type ChangeEvent,
   createContext,
   type Dispatch,
+  type MutableRefObject,
   type SetStateAction,
   useCallback,
   useContext,
   useMemo,
+  useRef,
   useState,
 } from 'react';
 
+type Ref = HTMLAudioElement | null;
 type Speed = number;
 type Volume = number;
 type Buffered = number; // amount in time
@@ -20,8 +23,10 @@ type Seek = number; // amount in time (requested by the user)
 type Ready = boolean;
 type Title = string;
 type Artwork = string; // url
+type Url = string;
 
 type Context = {
+  ref: MutableRefObject<Ref>;
   speed: Speed;
   setSpeed: (speed: string) => void;
   volume: Volume;
@@ -45,11 +50,14 @@ type Context = {
   setTitle: Dispatch<SetStateAction<Title>>;
   artwork: Artwork;
   setArtwork: Dispatch<SetStateAction<Artwork>>;
+  url: Url;
+  setUrl: Dispatch<SetStateAction<Url>>;
 };
 
-const AudioPlayerContext = createContext<Context>({} as Context);
+const PlayerContext = createContext<Context>({} as Context);
 
-export function AudioPlayerContextProvider({children}) {
+export function PlayerContextProvider({children}) {
+  const ref = useRef<Ref>(null);
   const [speed, setSpeed] = useState<Speed>(1);
   const [volume, setVolume] = useState<Volume>(0.7);
   const [buffered, setBuffered] = useState<Buffered>(0);
@@ -61,6 +69,7 @@ export function AudioPlayerContextProvider({children}) {
   const [isReady, setReady] = useState<Ready>(false);
   const [title, setTitle] = useState<Title>('');
   const [artwork, setArtwork] = useState<Artwork>('');
+  const [url, setUrl] = useState<Url>('');
 
   const setSpeedSanitized = useCallback((newSpeed: string) => {
     let newSpeedFloat = parseFloat(newSpeed);
@@ -105,6 +114,7 @@ export function AudioPlayerContextProvider({children}) {
 
   const context = useMemo(
     () => ({
+      ref,
       speed,
       setSpeed: setSpeedSanitized,
       volume,
@@ -128,6 +138,8 @@ export function AudioPlayerContextProvider({children}) {
       setTitle,
       artwork,
       setArtwork,
+      url,
+      setUrl,
     }),
     [
       speed,
@@ -146,16 +158,15 @@ export function AudioPlayerContextProvider({children}) {
       isReady,
       title,
       artwork,
+      url,
     ],
   );
 
   return (
-    <AudioPlayerContext.Provider value={context}>
-      {children}
-    </AudioPlayerContext.Provider>
+    <PlayerContext.Provider value={context}>{children}</PlayerContext.Provider>
   );
 }
 
-export function useAudioPlayerContext() {
-  return useContext(AudioPlayerContext);
+export function usePlayerContext() {
+  return useContext(PlayerContext);
 }

src/hooks/use-dynamic-title.ts

@@ -1,28 +1,16 @@
-import {useRouter} from 'next/router';
 import {useNextReplaceUrl} from 'next-replace-url';
-import {useMemo} from 'react';
-import speedToSemitones from 'speed-to-semitones';
-import {TITLE_SEPARATOR} from 'src/constants';
-import {useAudioPlayerContext} from 'src/contexts/audio-player-context';
+import {usePlayerContext} from 'src/contexts/player-context';
 import {useCache} from 'src/hooks/use-cache';
-import {getProviderFromRouter} from 'src/utils/get-provider/get-provider-from-router';
+import {usePlayerDocumentTitle} from 'src/hooks/use-player-document-title';
 
+// todo: rename me
 export function useDynamicTitle() {
-  const router = useRouter();
-  const {speed, title} = useAudioPlayerContext();
+  const {speed, title} = usePlayerContext();
   const cachedSpeed = useCache(speed, 350);
 
   useNextReplaceUrl('speed', cachedSpeed.toString());
 
-  const dynamicTitle = useMemo(() => {
-    if (!title) {
-      return '';
-    }
-
-    const semitones = `${speedToSemitones(cachedSpeed, 1)} st`;
-    const provider = getProviderFromRouter(router);
-    return `${title} ${TITLE_SEPARATOR} ${provider} ${TITLE_SEPARATOR} ${semitones}`;
-  }, [title, cachedSpeed, router]);
+  const dynamicTitle = usePlayerDocumentTitle(title, cachedSpeed);
 
   return {
     dynamicTitle,

src/hooks/use-player-document-title.ts

@@ -0,0 +1,12 @@
+import {useRouter} from 'next/router';
+import speedToSemitones from 'speed-to-semitones';
+import {TITLE_SEPARATOR} from 'src/constants';
+import {getProviderFromRouter} from 'src/utils/get-provider/get-provider-from-router';
+
+export function usePlayerDocumentTitle(title: string, speed: number = 1) {
+  const router = useRouter();
+  const provider = getProviderFromRouter(router);
+  const semitones = `${speedToSemitones(speed, 1)} st`;
+
+  return `${title} ${TITLE_SEPARATOR} ${provider} ${TITLE_SEPARATOR} ${semitones}`;
+}