diff --git a/package-lock.json b/package-lock.json index 6c1c395..5b6eca8 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 963c850..eaf108d 100644 --- a/package.json +++ b/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", diff --git a/src/components/recordbox.tsx b/src/components/recordbox.tsx index f97dc6d..4acdc45 100644 --- a/src/components/recordbox.tsx +++ b/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(); + const [shouldAutoPlay, setShouldAutoPlay] = useState(true); useEffect(() => { setFirstSong(randomSong()); + // Get autoplay preference from cookie + const autoplayCookie = getCookie('jukebox-autoplay'); + setShouldAutoPlay(autoplayCookie === 'true' || autoplayCookie === undefined); }, []); return
@@ -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); } } }} /> { player = element; }} src={firstSong} onPlay={() => {started(player, notes)}} - onEnded={() => {ended(player, notes)}} + onEnded={() => {ended(player, notes, shouldAutoPlay)}} onPause={() => {stopped(player, notes)}} />
@@ -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(); + } } }