Save autoplay state

package-lock.json

@@ -8,6 +8,7 @@
       "name": "kdot",
       "version": "0.1.0",
       "dependencies": {
+        "cookies-next": "^6.0.0",
         "gray-matter": "^4.0.3",
         "lucide-react": "^0.511.0",
         "next": "15.3.2",
@@ -2429,6 +2430,28 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/cookie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz",
+      "integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/cookies-next": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/cookies-next/-/cookies-next-6.0.0.tgz",
+      "integrity": "sha512-Xq87TPIe7faqluf7gr3mobzO2JRe65oX+pnv4nrnDE/ak49Ic6QhNZSLCk+E5xOKtpVm1EoEazu0iBNyr5TXTA==",
+      "license": "MIT",
+      "dependencies": {
+        "cookie": "^1.0.1"
+      },
+      "peerDependencies": {
+        "next": ">=15.0.0",
+        "react": ">= 16.8.0"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",

package.json

@@ -9,6 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "cookies-next": "^6.0.0",
     "gray-matter": "^4.0.3",
     "lucide-react": "^0.511.0",
     "next": "15.3.2",

src/components/recordbox.tsx

@@ -3,15 +3,20 @@
 import Image from "next/image";
 import ReactAudioPlayer from "react-audio-player";
 import {useEffect, useState} from "react";
+import { getCookie, setCookie } from "cookies-next";
 
 export default function RecordBox() {
   let player: ReactAudioPlayer | null = null;
   let notes: HTMLImageElement | null = null;
 
   const [firstSong, setFirstSong] = useState<string | undefined>();
+  const [shouldAutoPlay, setShouldAutoPlay] = useState<boolean>(true);
 
   useEffect(() => {
     setFirstSong(randomSong());
+    // Get autoplay preference from cookie
+    const autoplayCookie = getCookie('jukebox-autoplay');
+    setShouldAutoPlay(autoplayCookie === 'true' || autoplayCookie === undefined);
   }, []);
 
   return <div>
@@ -29,21 +34,27 @@ export default function RecordBox() {
                  if (player.audioEl.current.paused) {
                    player.audioEl.current.play().then();
                    notes.className = "bottom-23 right-0 fixed z-50 pb-2 pr-2";
+                   // Save preference for autoplay ON
+                   setCookie('jukebox-autoplay', 'true');
+                   setShouldAutoPlay(true);
                  } else {
                    player.audioEl.current.pause();
                    notes.className = "hidden bottom-23 right-0 fixed z-50 pb-2 pr-2";
+                   // Save preference for autoplay OFF
+                   setCookie('jukebox-autoplay', 'false');
+                   setShouldAutoPlay(false);
                  }
                }
              }}
       />
     </button>
     <ReactAudioPlayer
-      autoPlay={true} controls={false} className=""
+      autoPlay={shouldAutoPlay} controls={false} className=""
       volume={0.2}
       ref={(element) => { player = element; }}
       src={firstSong}
       onPlay={() => {started(player, notes)}}
-      onEnded={() => {ended(player, notes)}}
+      onEnded={() => {ended(player, notes, shouldAutoPlay)}}
       onPause={() => {stopped(player, notes)}}
     />
   </div>
@@ -61,11 +72,13 @@ function stopped(player: ReactAudioPlayer | null, notes: HTMLImageElement | null
   }
 }
 
-function ended(player: ReactAudioPlayer | null, notes: HTMLImageElement | null) {
+function ended(player: ReactAudioPlayer | null, notes: HTMLImageElement | null, autoPlay: boolean = true) {
   if (player != null && notes != null) {
     notes.className = "hidden bottom-23 right-0 fixed z-50 pb-2 pr-2";
     player.audioEl.current.src = randomSong();
-    player.audioEl.current.play().then();
+    if (autoPlay) {
+      player.audioEl.current.play().then();
+    }
   }
 }