AiTube Music

package-lock.json

@@ -61,16 +61,16 @@
         "sentence-splitter": "^4.3.0",
         "sharp": "^0.32.5",
         "styled-components": "^6.0.7",
-        "tailwind-merge": "^1.13.2",
-        "tailwindcss": "3.3.3",
-        "tailwindcss-animate": "^1.0.6",
+        "tailwind-merge": "^2.1.0",
+        "tailwindcss": "3.4.0",
+        "tailwindcss-animate": "^1.0.7",
         "temp-dir": "^3.0.0",
         "ts-node": "^10.9.1",
         "type-fest": "^4.8.2",
         "typescript": "5.1.6",
         "usehooks-ts": "^2.9.1",
         "uuid": "^9.0.1",
-        "zustand": "^4.4.1"
+        "zustand": "^4.4.7"
       },
       "devDependencies": {
         "@types/proper-lockfile": "^4.1.2",
@@ -1923,9 +1923,9 @@
       }
     },
     "node_modules/@upstash/redis": {
-      "version": "1.25.2",
-      "resolved": "https://registry.npmjs.org/@upstash/redis/-/redis-1.25.2.tgz",
-      "integrity": "sha512-iI3jgvmDIbe4Px0PskB8lrn1NXz7ZQyGpW9Ehmonk6SEFqhqssqIB04VmlNh8zZUXwzy6G9DaIa5gIUM6B7DwA==",
+      "version": "1.27.1",
+      "resolved": "https://registry.npmjs.org/@upstash/redis/-/redis-1.27.1.tgz",
+      "integrity": "sha512-K9UgTBypJ4Dx65s2u5auoyf/5YoCQjaN91QtxlkNg+3g0rqXXy4ELtzACstk1v+bTa547Mm3rzTjotDX/s9+Zg==",
       "dependencies": {
         "crypto-js": "^4.2.0"
       }
@@ -3162,9 +3162,9 @@
       }
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.4.614",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.614.tgz",
-      "integrity": "sha512-X4ze/9Sc3QWs6h92yerwqv7aB/uU8vCjZcrMjA8N9R1pjMFRe44dLsck5FzLilOYvcXuDn93B+bpGYyufc70gQ=="
+      "version": "1.4.615",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.615.tgz",
+      "integrity": "sha512-/bKPPcgZVUziECqDc+0HkT87+0zhaWSZHNXqF8FLd2lQcptpmUFwoCSWjCdOng9Gdq+afKArPdEg/0ZW461Eng=="
     },
     "node_modules/emoji-regex": {
       "version": "9.2.2",
@@ -3789,9 +3789,9 @@
       "dev": true
     },
     "node_modules/fastq": {
-      "version": "1.15.0",
-      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.15.0.tgz",
-      "integrity": "sha512-wBrocU2LCXXa+lWBt8RoIRD89Fi8OdABODa/kEnyeyjS5aZO5/GNvI5sEINADqP/h8M29UHTHUb53sUu5Ihqdw==",
+      "version": "1.16.0",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.16.0.tgz",
+      "integrity": "sha512-ifCoaXsDrsdkWTtiNJX5uzHDsrck5TzfKKDcuFFTIrrc/BS076qgEIfoIy1VeZqViznfKiysPYTh/QeHtnIsYA==",
       "dependencies": {
         "reusify": "^1.0.4"
       }
@@ -6419,28 +6419,31 @@
       }
     },
     "node_modules/tailwind-merge": {
-      "version": "1.14.0",
-      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-1.14.0.tgz",
-      "integrity": "sha512-3mFKyCo/MBcgyOTlrY8T7odzZFx+w+qKSMAmdFzRvqBfLlSigU6TZnlFHK0lkMwj9Bj8OYU+9yW9lmGuS0QEnQ==",
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.1.0.tgz",
+      "integrity": "sha512-l11VvI4nSwW7MtLSLYT4ldidDEUwQAMWuSHk7l4zcXZDgnCRa0V3OdCwFfM7DCzakVXMNRwAeje9maFFXT71dQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.5"
+      },
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/dcastil"
       }
     },
     "node_modules/tailwindcss": {
-      "version": "3.3.3",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.3.tgz",
-      "integrity": "sha512-A0KgSkef7eE4Mf+nKJ83i75TMyq8HqY3qmFIJSWy8bNt0v1lG7jUcpGpoTFxAwYcWOphcTBLPPJg+bDfhDf52w==",
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.0.tgz",
+      "integrity": "sha512-VigzymniH77knD1dryXbyxR+ePHihHociZbXnLZHUyzf2MMs2ZVqlUrZ3FvpXP8pno9JzmILt1sZPD19M3IxtA==",
       "dependencies": {
         "@alloc/quick-lru": "^5.2.0",
         "arg": "^5.0.2",
         "chokidar": "^3.5.3",
         "didyoumean": "^1.2.2",
         "dlv": "^1.1.3",
-        "fast-glob": "^3.2.12",
+        "fast-glob": "^3.3.0",
         "glob-parent": "^6.0.2",
         "is-glob": "^4.0.3",
-        "jiti": "^1.18.2",
+        "jiti": "^1.19.1",
         "lilconfig": "^2.1.0",
         "micromatch": "^4.0.5",
         "normalize-path": "^3.0.0",

package.json

@@ -62,16 +62,16 @@
     "sentence-splitter": "^4.3.0",
     "sharp": "^0.32.5",
     "styled-components": "^6.0.7",
-    "tailwind-merge": "^1.13.2",
-    "tailwindcss": "3.3.3",
-    "tailwindcss-animate": "^1.0.6",
+    "tailwind-merge": "^2.1.0",
+    "tailwindcss": "3.4.0",
+    "tailwindcss-animate": "^1.0.7",
     "temp-dir": "^3.0.0",
     "ts-node": "^10.9.1",
     "type-fest": "^4.8.2",
     "typescript": "5.1.6",
     "usehooks-ts": "^2.9.1",
     "uuid": "^9.0.1",
-    "zustand": "^4.4.1"
+    "zustand": "^4.4.7"
   },
   "devDependencies": {
     "@types/proper-lockfile": "^4.1.2",

src/app/interface/left-menu/index.tsx

@@ -47,7 +47,6 @@ export function LeftMenu() {
             Channels
           </MenuItem>
         </Link>
-        {/*
         <Link href="/music">
           <MenuItem
             icon={<MdOutlinePlayCircleOutline className="h-6.5 w-6.5" />}
@@ -56,7 +55,6 @@ export function LeftMenu() {
             Music
           </MenuItem>
         </Link>
-        */}
       </div>
       <div className={cn(
         `flex flex-col w-full`,

src/app/interface/media-list/index.tsx

@@ -9,6 +9,7 @@ export function MediaList({
   layout = "grid",
   className = "",
   onSelect,
+  selectedId,
 }: {
   items: VideoInfo[]
 
@@ -31,6 +32,8 @@ export function MediaList({
   className?: string
 
   onSelect?: (media: VideoInfo) => void
+
+  selectedId?: string
 }) {
   
   return (
@@ -56,6 +59,7 @@ export function MediaList({
           className="w-full"
           layout={layout}
           onSelect={onSelect}
+          selected={selectedId === media.id}
           index={i}
         />
       )

src/app/interface/playlist-control/index.tsx

@@ -0,0 +1,38 @@
+import { IoIosPlay } from "react-icons/io"
+import { IoIosPause } from "react-icons/io"
+
+import { cn } from "@/lib/utils"
+import { usePlaylist } from "@/lib/usePlaylist"
+import { VideoInfo } from "@/types"
+
+export function PlaylistControl() {
+  const playlist = usePlaylist()
+
+  return (
+    <div className="flex flex-row items-center justify-center bg-neutral-900 h-20 w-full">
+      {/* center buttons */}
+      <div className="flex flex-row items-center justify-center space-x-4">
+
+        {/*<div className="">{playlist.current?.label}</div>*/}
+
+        <div className={cn(
+          `flex flex-col items-center justify-center text-center`,
+          `size-16`,
+          `cursor-pointer`,
+          `transition-all duration-200 ease-in-out`,
+          `rounded-full border border-zinc-500 hover:border-zinc-400 hover:bg-zinc-800  text-zinc-400 hover:text-zinc-300`
+        )}
+        onClick={() => {
+          playlist.togglePause()
+        }}
+        >
+          {playlist.isPlaying
+            ? <IoIosPause className="size-10" />
+            : <IoIosPlay className="pl-1 size-10" />
+          }
+        </div>
+
+      </div>
+    </div>
+  )
+}

src/app/interface/top-header/index.tsx

@@ -37,7 +37,7 @@ export function TopHeader() {
 
 
   useEffect(() => {
-    if (view === "public_video" ||  view === "public_channel") {
+    if (view === "public_video" ||  view === "public_channel" || view === "public_music_videos") {
       setHeaderMode("compact")
       setMenuMode("slider_hidden")
     } else {
@@ -92,7 +92,7 @@ export function TopHeader() {
                 `rounded-lg w-6 h-7`
               )}>
                 <PiPopcornBold className={cn(
-                 `w-5 h-5`
+                 `size-5`
                 )} />
               </div>
             </div>

src/app/interface/track-card/index.tsx

@@ -12,18 +12,21 @@ import { isCertifiedUser } from "@/app/certification"
 import { transparentImage } from "@/lib/transparentImage"
 import { DefaultAvatar } from "../default-avatar"
 import { formatLargeNumber } from "@/lib/formatLargeNumber"
+import { usePlaylist } from "@/lib/usePlaylist"
 
 export function TrackCard({
   media,
   className = "",
   layout = "grid",
   onSelect,
+  selected,
   index
 }: {
   media: VideoInfo
   className?: string
   layout?: MediaDisplayLayout
   onSelect?: (media: VideoInfo) => void
+  selected?: boolean
   index: number
  }) {
   const ref = useRef<HTMLVideoElement>(null)
@@ -36,6 +39,8 @@ export function TrackCard({
   const [mediaThumbnailReady, setMediaThumbnailReady] = useState(false)
   const [shouldLoadMedia, setShouldLoadMedia] = useState(false)
 
+  const playlist = usePlaylist()
+  
   const isTable = layout === "table"
   const isMicro = layout === "micro"
   const isCompact = layout === "vertical"
@@ -54,9 +59,6 @@ export function TrackCard({
     }
   }
 
-  const handleClick = () => {
-    onSelect?.(media)
-  }
 
   const handleBadChannelThumbnail = () => {
     try {
@@ -84,14 +86,16 @@ export function TrackCard({
         `flex-col space-y-3`,
         `bg-line-900`,
         `cursor-pointer`,
+        `transition-all duration-200 ease-in-out`,
         (isTable || isMicro) ? (
-          (index % 2) ? "bg-neutral-800/40 hover:bg-neutral-800/70" : "hover:bg-neutral-800/70"
+          (index % 2) ? "bg-zinc-800/30 hover:bg-zinc-800/50" : "hover:bg-zinc-800/50"
         ) : "",
+        selected ? `border-2 border-zinc-400` : `border-2 border-transparent`,
         className,
       )}
       onPointerEnter={handlePointerEnter}
       onPointerLeave={handlePointerLeave}
-      // onClick={handleClick}
+      onClick={() => onSelect?.(media)}
       >
         {/* THUMBNAIL BLOCK */}
         <div
@@ -111,9 +115,6 @@ export function TrackCard({
           )}>
             {!isTable && mediaThumbnailReady && shouldLoadMedia
               ? <video
-                // mute the video
-                muted
-
                 // prevent iOS from attempting to open the video in full screen, which is annoying
                 playsInline
 
@@ -135,7 +136,7 @@ export function TrackCard({
                 `aspect-square object-cover`,
                 `rounded-lg overflow-hidden`,
                 mediaThumbnailReady ? `opacity-100`: 'opacity-0',
-                `hover:opacity-0 w-full h-full top-0 z-30`,
+                `hover:brightness-110 w-full h-full top-0 z-30`,
                 //`pointer-events-none`,
                 `transition-all duration-500 hover:delay-300 ease-in-out`,
               )}
@@ -216,7 +217,7 @@ export function TrackCard({
             <div className={cn(
               `flex flex-row items-center`,
               `text-neutral-400 font-normal space-x-1`,
-              isTable ? `text-2xs md:text-xs lg:text-sm` :
+              isTable ? `w-[30%] text-2xs md:text-xs lg:text-sm` :
               isCompact ? `text-3xs md:text-2xs lg:text-xs` : `text-sm`
               )}>
               <div>{media.channel.label}</div>
@@ -234,13 +235,12 @@ export function TrackCard({
             <div>{formatTimeAgo(media.updatedAt)}</div>
             </div>}
 
-            {/*
+    
             {isTable ? <div className={cn(
               `hidden md:flex flex-row flex-grow`,
               `text-zinc-100 mb-0 line-clamp-2`,
-              `w-[30%] font-normal text-xs md:text-sm lg:text-base mb-0.5` 
-            )}>{media.duration}</div> : null}
-            */}
+              `justify-end font-normal text-xs md:text-sm lg:text-base mb-0.5` 
+            )}>{formatDuration(media.duration || 0)}</div> : null}
           </div>
         </div>
       </div>

src/app/interface/tube-layout/index.tsx

@@ -24,7 +24,7 @@ export function TubeLayout({ children }: { children?: ReactNode }) {
       <div className={cn(
         `flex flex-col`,
         `w-full sm:w-[calc(100vw-96px)]`,
-        `px-2`
+        `pl-2`
       )}>
         <TopHeader />
         <main className={cn(

src/app/interface/video-card/index.tsx

@@ -18,12 +18,14 @@ export function VideoCard({
   className = "",
   layout = "grid",
   onSelect,
+  selected,
   index
 }: {
   media: VideoInfo
   className?: string
   layout?: MediaDisplayLayout
   onSelect?: (media: VideoInfo) => void
+  selected?: boolean
   index: number
  }) {
   const ref = useRef<HTMLVideoElement>(null)

src/app/views/public-music-videos-view/index.tsx

@@ -7,6 +7,8 @@ import { cn } from "@/lib/utils"
 import { VideoInfo } from "@/types"
 import { getVideos } from "@/app/server/actions/ai-tube-hf/getVideos"
 import { TrackList } from "@/app/interface/track-list"
+import { PlaylistControl } from "@/app/interface/playlist-control"
+import { usePlaylist } from "@/lib/usePlaylist"
 
 export function PublicMusicVideosView() {
   const [_isPending, startTransition] = useTransition()
@@ -15,6 +17,8 @@ export function PublicMusicVideosView() {
   const setPublicTrack = useStore(s => s.setPublicTrack)
   const publicTracks = useStore(s => s.publicTracks)
 
+  const playlist = usePlaylist()
+
   useEffect(() => {
   
     /*
@@ -31,21 +35,29 @@ export function PublicMusicVideosView() {
   }, [])
 
   const handleSelect = (media: VideoInfo) => {
-    //
-    // setView("public_video")
-    // setPublicVideo(video)
-    console.log("play the track in the background, but don't reload everything")
+    console.log("going to play:", media.assetUrl.replace(".mp4", ".mp3"))
+    playlist.playback({
+      url: media.assetUrl.replace(".mp4", ".mp3"),
+      meta: media,
+      isLastTrackOfPlaylist: false,
+      playNow: true,
+    })
   }
 
   return (
     <div className={cn(
-     `sm:pr-4`
+     `w-full h-full`
     )}>
-      <TrackList
-        items={publicTracks}
-        onSelect={handleSelect}
-        layout="table"
-      />
+      <div className="flex flex-col w-full overflow-y-scroll h-[calc(100%-80px)] sm:pr-4">
+        <TrackList
+          items={publicTracks}
+          onSelect={handleSelect}
+          selectedId={playlist.current?.id}
+          layout="table"
+        />
+      </div>
+
+      <PlaylistControl />
     </div>
   )
 }

src/lib/useAudio.ts

@@ -1,152 +0,0 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
-
-// Helper Types
-type UseAudioResponse = {
-  playback: (base64Data?: string, isLastTrackOfPlaylist?: boolean) => Promise<boolean>;
-  progress: number;
-  isLoaded: boolean;
-  isPlaying: boolean;
-  isSwitchingTracks: boolean; // when audio is temporary cut (but it's not a real pause)
-  togglePause: () => void;
-};
-
-export function useAudio(): UseAudioResponse {
-  const audioContextRef = useRef<AudioContext | null>(null);
-  const sourceNodeRef = useRef<AudioBufferSourceNode | null>(null);
-  const [progress, setProgress] = useState(0.0);
-  const [isPlaying, setIsPlaying] = useState(false);
-  const [isLoaded, setIsLoaded] = useState(false);
-  const [isSwitchingTracks, setSwitchingTracks] = useState(false);
-  const startTimeRef = useRef(0);
-  const pauseTimeRef = useRef(0);
-  
-  const stopAudio = useCallback(() => {
-    try {
-      audioContextRef.current?.close();
-    } catch (err) {
-      // already closed probably
-    }
-    setSwitchingTracks(false);
-
-    sourceNodeRef.current = null;
-    sourceNodeRef.current = null;
-
-    // setProgress(0); // Reset progress
-  }, []);
-
-  // Helper function to handle conversion from Base64 to an ArrayBuffer
-  async function base64ToArrayBuffer(base64: string): Promise<ArrayBuffer> {
-    const response = await fetch(base64);
-    return response.arrayBuffer();
-  }
-
-  const playback = useCallback(
-    async (base64Data?: string, isLastTrackOfPlaylist?: boolean): Promise<boolean> => {
-      stopAudio(); // Stop any playing audio first
-
-      // If no base64 data provided, we don't attempt to play any audio
-      if (!base64Data) {
-        return false;
-      }
-
-      // Initialize AudioContext
-      const audioContext = new AudioContext();
-      audioContextRef.current = audioContext;
-
-      // Format Base64 string if necessary and get ArrayBuffer
-      const formattedBase64 =
-        base64Data.startsWith('data:audio/wav') || base64Data.startsWith('data:audio/wav;base64,')
-          ? base64Data
-          : `data:audio/wav;base64,${base64Data}`;
-
-      console.log(`formattedBase64: ${formattedBase64.slice(0, 50)} (len: ${formattedBase64.length})`);
-
-      const arrayBuffer = await base64ToArrayBuffer(formattedBase64);
-
-      return new Promise((resolve, reject) => {
-        // Decode the audio data and play
-        audioContext.decodeAudioData(arrayBuffer, (audioBuffer) => {
-          // Create a source node and gain node
-          const source = audioContext.createBufferSource();
-          const gainNode = audioContext.createGain();
-          
-          // Set buffer and gain
-          source.buffer = audioBuffer;
-          gainNode.gain.value = 1.0; 
-
-          // Connect nodes
-          source.connect(gainNode);
-          gainNode.connect(audioContext.destination);
-
-          // Assign source node to ref for progress tracking
-          sourceNodeRef.current = source;
-          source.start(0, pauseTimeRef.current % audioBuffer.duration); // Start at the correct offset if paused previously
-          startTimeRef.current = audioContextRef.current!.currentTime - pauseTimeRef.current;
-          
-          setSwitchingTracks(false);
-          setProgress(0);
-          setIsLoaded(true);
-          setIsPlaying(true);
-
-          // Set up progress interval
-          const totalDuration = audioBuffer.duration;
-          const updateProgressInterval = setInterval(() => {
-            if (sourceNodeRef.current && audioContextRef.current) {
-              const currentTime = audioContextRef.current.currentTime;
-              const currentProgress = currentTime / totalDuration;
-              setProgress(currentProgress);
-              if (currentProgress >= 1.0) {
-                clearInterval(updateProgressInterval);
-              }
-            }
-          }, 50); // Update every 50ms
-          
-          if (source) {
-            source.onended = () => {
-              // used to indicate a temporary stop, while we switch tracks
-              if (!isLastTrackOfPlaylist) {
-                setSwitchingTracks(true);
-              }
-              setIsPlaying(false);
-              clearInterval(updateProgressInterval);
-              stopAudio();
-              resolve(true);
-            };
-          }
-        }, (error) => {
-          console.error('Error decoding audio data:', error);
-          reject(error);
-        });
-      })
-    },
-    [stopAudio]
-  );
-
-  const togglePause = useCallback(() => {
-    if (!audioContextRef.current || !sourceNodeRef.current) {
-      return; // Do nothing if audio is not initialized
-    }
-
-    if (isPlaying) {
-      // Pause the audio
-      pauseTimeRef.current += audioContextRef.current.currentTime - startTimeRef.current;
-      sourceNodeRef.current.stop(); // This effectively "pauses" the audio, but it also means the sourceNode will be unusable
-      sourceNodeRef.current = null; // As the node is now unusable, we nullify it
-      setIsPlaying(false);
-    } else {
-      // Resume playing
-      audioContextRef.current.resume().then(() => {
-        playback(); // This will pick up where we left off due to pauseTimeRef
-      });
-    }
-  }, [audioContextRef, sourceNodeRef, isPlaying, playback]);
-
-  // Effect to handle cleanup on component unmount
-  useEffect(() => {
-    return () => {
-      stopAudio();
-    };
-  }, [stopAudio]);
-
-  return { playback, isPlaying, isSwitchingTracks, isLoaded, progress, togglePause };
-}

src/lib/usePlaylist.ts

@@ -0,0 +1,173 @@
+"use client"
+
+import { useCallback, useEffect, useRef } from "react";
+import { create } from "zustand";
+
+import { VideoInfo } from "@/types";
+
+// Define the new track type with an optional playNow property
+interface PlaybackOptions<T> {
+  url: string;
+  meta: T;
+  isLastTrackOfPlaylist?: boolean;
+  playNow?: boolean; // New optional parameter
+}
+
+// Define the Zustand store
+interface PlaylistState<T> {
+  playlist: PlaybackOptions<T>[];
+  audio: HTMLAudioElement | null;
+  current: T | null;
+  interval: NodeJS.Timer | null;
+  progress: number;
+  setProgress: (progress: number) => void;
+  isPlaying: boolean;
+  isSwitchingTracks: boolean;
+  enqueue: (options: PlaybackOptions<T>) => void;
+  dequeue: () => void;
+  togglePause: () => void;
+}
+
+function getAudio(): HTMLAudioElement | null {
+  try {
+    return new Audio()
+  } catch (err) {
+    return null
+  }
+}
+
+export const usePlaylistStore = create<PlaylistState<VideoInfo>>((set, get) => ({
+  playlist: [],
+  audio: getAudio(),
+  current: null,
+  progress: 0,
+  interval: null,
+  setProgress: (progress) => set((state) => ({
+    progress: isNaN(progress) ? 0 : progress,
+  })),
+  isPlaying: false,
+  isSwitchingTracks: false,
+  enqueue: (options) => set((state) => ({ playlist: [...state.playlist, options] })),
+  dequeue: () => set((state) => {
+    const nextPlaying = state.playlist.length > 0 ? state.playlist[0] : null;
+    return {
+      current: nextPlaying ? nextPlaying.meta : null,
+      playlist: state.playlist.slice(1),
+      isSwitchingTracks: state.playlist.length > 1,
+    };
+  }),
+  togglePause: () => {
+    const { audio, isPlaying } = get()
+    // console.log("togglePause: " + isPlaying)
+    if (!audio) { return }
+    // console.log("doing the thing")
+
+    if (isPlaying) {
+      // console.log("we are playing! so setting to false..")
+      set({ isPlaying: false });
+      audio.pause();
+    } else {
+      // console.log("we are not playing! so setting to true..")
+      set({ isPlaying: true });
+      try {
+        audio.play()
+      } catch (err) {
+        console.error("Play failed:", err);
+        set({ isPlaying: false });
+      }
+    }
+  }
+}));
+
+// The refactored useAudioPlayer hook
+export function usePlaylist() {
+  const intervalRef = useRef<NodeJS.Timer>();
+
+  const {
+    playlist,
+    current,
+    progress,
+    isPlaying,
+    isSwitchingTracks,
+    enqueue,
+    dequeue,
+    audio,
+    interval,
+    setProgress,
+    togglePause,
+  } = usePlaylistStore();
+
+  const updateProgress = useCallback(() => {
+    if (!audio) { return }
+    // if (!isPlaying) { return }
+    const currentProgress = audio.currentTime / audio.duration;
+    // console.log("updateProgress: " + currentProgress)
+    setProgress(currentProgress);
+    if (currentProgress >= 1) {
+      if (!audio.loop) {
+        console.log("we reached the end!")
+        dequeue();
+      }
+    }
+  }, [audio?.currentTime, dequeue, setProgress, isPlaying]);
+
+  const playback = useCallback(async (options?: PlaybackOptions<VideoInfo>): Promise<void> => {
+    if (!audio) { return }
+
+    if (!options) {
+      clearInterval(intervalRef.current!);
+      // console.log("playback called with nothing, so setting isPlaying to false")
+      usePlaylistStore.setState({
+        playlist: [],
+        current: null,
+        isPlaying: false,
+        isSwitchingTracks: false
+      });
+      return
+    }
+
+    // console.log("playback!", options)
+
+    if (options.playNow) {
+      clearInterval(intervalRef.current!);
+      usePlaylistStore.setState({
+        playlist: [options as any], // Clears the previous playlist and adds the new track
+        current: options.meta,
+        isPlaying: true,
+        isSwitchingTracks: false
+      });
+
+      try {
+        audio.pause();
+      } catch (err) {}
+
+      try {
+        audio.src = options.url;
+        audio.load();
+      } catch (err) {}
+
+      try {
+        await audio.play();
+      } catch (err) {
+      }
+      intervalRef.current = setInterval(updateProgress, 250);
+    } else {
+      enqueue(options as any);
+    }
+  }, [enqueue, updateProgress]);
+
+  useEffect(() => {
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+        intervalRef.current = undefined;
+        usePlaylistStore.setState({ interval: null });
+      }
+      if (audio) {
+        audio.pause();
+      }
+    };
+  }, [audio]);
+
+  return { current, playlist, playback, progress, isPlaying, isSwitchingTracks, togglePause };
+}