feat: use context for artwork related info and remove jotai

package.json

@@ -36,7 +36,6 @@
     "@react-three/fiber": "^8.17.9",
     "can-autoplay": "^3.0.2",
     "hoist-non-react-statics": "^3.3.2",
-    "jotai": "^2.10.0",
     "next": "^14.2.14",
     "next-replace-url": "^1.0.3",
     "next-seo": "^6.6.0",

src/contexts/audio-player-context.tsx

@@ -18,6 +18,8 @@ type Progress = number; // amount in time
 type Repeating = boolean;
 type Seek = number; // amount in time (requested by the user)
 type Ready = boolean;
+type Title = string;
+type Artwork = string; // url
 
 type Context = {
   speed: Speed;
@@ -39,6 +41,10 @@ type Context = {
   handleSeek: (e: ChangeEvent<HTMLInputElement>) => void;
   isReady: Ready;
   setReady: Dispatch<SetStateAction<Ready>>;
+  title: Title;
+  setTitle: Dispatch<SetStateAction<Title>>;
+  artwork: Artwork;
+  setArtwork: Dispatch<SetStateAction<Artwork>>;
 };
 
 const AudioPlayerContext = createContext<Context>({} as Context);
@@ -53,6 +59,8 @@ export function AudioPlayerContextProvider({children}) {
   const [isRepeating, setRepeating] = useState<Repeating>(true);
   const [seek, setSeek] = useState<Seek>(0);
   const [isReady, setReady] = useState<Ready>(false);
+  const [title, setTitle] = useState<Title>('');
+  const [artwork, setArtwork] = useState<Artwork>('');
 
   const setSpeedSanitized = useCallback((newSpeed: string) => {
     let newSpeedFloat = parseFloat(newSpeed);
@@ -116,6 +124,10 @@ export function AudioPlayerContextProvider({children}) {
       handleSeek,
       isReady,
       setReady,
+      title,
+      setTitle,
+      artwork,
+      setArtwork,
     }),
     [
       speed,
@@ -132,6 +144,8 @@ export function AudioPlayerContextProvider({children}) {
       seek,
       handleSeek,
       isReady,
+      title,
+      artwork,
     ],
   );
 

src/hooks/use-dynamic-title.ts

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

src/layouts/player/hooks/use-player-layout.ts

@@ -1,25 +1,18 @@
-import {useAtom} from 'jotai';
 import {useRouter} from 'next/router';
 import {useEffect} from 'react';
-import {setArtworkAtom} from 'src/atoms/artwork.atoms';
-import {setAudioTitleAtom} from 'src/atoms/audio-title.atoms';
 import {useAudioUrlContext} from 'src/contexts/audio-url-context';
 import {type PlayerLayoutProps} from 'src/layouts/player/player.layout';
 
 interface UsePlayerLayout {
   metaUrl: string;
 }
 
-export function usePlayerLayout({
-  title,
-  audio,
-  image,
-}: PlayerLayoutProps): UsePlayerLayout {
+export function usePlayerLayout({audio}: PlayerLayoutProps): UsePlayerLayout {
   const router = useRouter();
 
   // const [isLoaded] = useAtom(isLoadedAtom);
-  const [, setAudioTitle] = useAtom(setAudioTitleAtom);
-  const [, setArtwork] = useAtom(setArtworkAtom);
+  // const [, setAudioTitle] = useAtom(setAudioTitleAtom);
+  // const [, setArtwork] = useAtom(setArtworkAtom);
 
   const metaUrl = 'https://www.screwmycode.in/' + router.asPath;
 
@@ -31,13 +24,13 @@ export function usePlayerLayout({
 
   // usePlayerLoading();
 
-  useEffect(() => {
-    setAudioTitle(title);
-  }, [setAudioTitle, title]);
+  // useEffect(() => {
+  //   setAudioTitle(title);
+  // }, [setAudioTitle, title]);
 
-  useEffect(() => {
-    setArtwork(image);
-  }, [setArtwork, image]);
+  // useEffect(() => {
+  //   setArtwork(image);
+  // }, [setArtwork, image]);
 
   // todo: pause on url change
   // useEffect(() => () => {

src/layouts/player/player.layout.tsx

@@ -29,7 +29,10 @@ export function PlayerLayout({title, image, audio, speed}: PlayerLayoutProps) {
         <AudioRefContextProvider>
           <AudioPlayerContextProvider>
             <AudioComponent defaultSpeed={speed.toString()} />
-            <PlayerModule />
+            <PlayerModule
+              title={title}
+              artwork={image}
+            />
           </AudioPlayerContextProvider>
         </AudioRefContextProvider>
       </DefaultLayout>

src/modules/player/components/artwork/native.component.tsx

@@ -1,7 +1,5 @@
-import {useAtom} from 'jotai';
 import Image from 'next/image';
 import React, {type ReactElement} from 'react';
-import {artworkAtom} from 'src/atoms/artwork.atoms';
 import {useAudioPlayerContext} from 'src/contexts/audio-player-context';
 import {Container} from 'src/modules/player/components/artwork/artwork.component.styles';
 
@@ -10,13 +8,12 @@ interface Props {
 }
 
 export function NativeComponent({width}: Props): ReactElement {
-  const [artwork] = useAtom(artworkAtom);
-  const {speed} = useAudioPlayerContext();
+  const {speed, artwork} = useAudioPlayerContext();
 
   return (
     <Container speed={speed.toString()}>
       <Image
-        src={artwork || '/'}
+        src={artwork}
         width={width}
         height={width}
         alt="cover"

src/modules/player/components/artwork/web-gl.component.tsx

@@ -1,6 +1,4 @@
-import {useAtom} from 'jotai';
 import React, {type ReactElement} from 'react';
-import {artworkAtom} from 'src/atoms/artwork.atoms';
 import {TextureComponent} from 'src/components/texture/texture.component';
 import {useAudioPlayerContext} from 'src/contexts/audio-player-context';
 import {Container} from 'src/modules/player/components/artwork/artwork.component.styles';
@@ -10,13 +8,12 @@ interface Props {
 }
 
 export function WebGlComponent({width}: Props): ReactElement {
-  const [artwork] = useAtom(artworkAtom);
-  const {speed} = useAudioPlayerContext();
+  const {speed, artwork} = useAudioPlayerContext();
 
   return (
     <Container speed={speed.toString()}>
       <TextureComponent
-        image={artwork || '/'}
+        image={artwork}
         dryWet={speed}
         width={width}
       />

src/modules/player/components/title/title.component.tsx

@@ -1,14 +1,9 @@
-import {useAtom} from 'jotai';
-import React, {type ReactElement} from 'react';
+import React from 'react';
+import {useAudioPlayerContext} from 'src/contexts/audio-player-context';
 
-import {audioTitleAtom} from '../../../../atoms/audio-title.atoms';
 import {H2} from './title.component.styles';
 
-/**
- * Component to display the title of the audio
- */
-export function TitleComponent(): ReactElement {
-  const [audioTitle] = useAtom(audioTitleAtom);
-
-  return <H2>{audioTitle}</H2>;
+export function TitleComponent() {
+  const {title} = useAudioPlayerContext();
+  return <H2>{title}</H2>;
 }

src/modules/player/player.module.tsx

@@ -1,5 +1,5 @@
 import {ResizeObserver} from '@juggle/resize-observer';
-import React, {ReactElement, useMemo} from 'react';
+import React, {useEffect, useMemo} from 'react';
 import useMeasure from 'react-use-measure';
 import {p} from 'src/app/shared.styles';
 import {IndicatorsComponent} from 'src/components/indicators/indicators.component';
@@ -28,11 +28,21 @@ import {
   VolumeSliderWrapper,
 } from './player.module.styles';
 
-export function PlayerModule(): ReactElement {
+interface Props {
+  title: string;
+  artwork: string;
+}
+
+export function PlayerModule({title, artwork}: Props) {
   const [ref, {width}] = useMeasure({polyfill: ResizeObserver});
   const imageWidth = useMemo(() => width - p * 4, [width]);
   const playerWidth = useMemo(() => width - p * 6, [width]);
-  const {isReady} = useAudioPlayerContext();
+  const {isReady, setTitle, setArtwork} = useAudioPlayerContext();
+
+  useEffect(() => {
+    setTitle(title);
+    setArtwork(artwork);
+  }, [title, setTitle, artwork, setArtwork]);
 
   if (!isReady) {
     return <LoadingComponent />;