BuboBubo/bruitiste
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

stop button

Browse Source
This commit is contained in:
Raphaël Forment
2025-10-03 23:39:58 +02:00
parent 0fc7ffdee0
commit 2d0bfe2297
1 changed files with 19 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/App.tsx
View File

@ -1,5 +1,6 @@
import { useState, useRef, useEffect } from 'react' import { useState, useRef, useEffect } from 'react'
import { useStore } from '@nanostores/react' import { useStore } from '@nanostores/react'
import { Square } from 'lucide-react'
import { PlaybackManager } from './services/PlaybackManager' import { PlaybackManager } from './services/PlaybackManager'
import { DownloadService } from './services/DownloadService' import { DownloadService } from './services/DownloadService'
import { generateFormulaGrid, generateRandomFormula } from './utils/bytebeatFormulas' import { generateFormulaGrid, generateRandomFormula } from './utils/bytebeatFormulas'
@ -168,12 +169,30 @@ function App() {
} }
} }
const handleStop = () => {
playbackManagerRef.current?.stop()
setPlaying(null)
setQueued(null)
if (animationFrameRef.current) {
cancelAnimationFrame(animationFrameRef.current)
animationFrameRef.current = null
}
}
return ( return (
<div className="w-screen h-screen flex flex-col bg-black overflow-hidden"> <div className="w-screen h-screen flex flex-col bg-black overflow-hidden">
<header className="bg-black border-b-2 border-white px-6 py-3"> <header className="bg-black border-b-2 border-white px-6 py-3">
<div className="flex items-center justify-between mb-3"> <div className="flex items-center justify-between mb-3">
<h1 className="font-mono text-sm tracking-[0.3em] text-white">BRUITISTE</h1> <h1 className="font-mono text-sm tracking-[0.3em] text-white">BRUITISTE</h1>
<div className="flex gap-4"> <div className="flex gap-4">
<button
onClick={handleStop}
disabled={!playing}
className="px-6 py-2 bg-black text-white border-2 border-white font-mono text-[11px] tracking-[0.2em] hover:bg-white hover:text-black transition-all disabled:opacity-30 disabled:cursor-not-allowed flex items-center gap-2"
>
<Square size={14} strokeWidth={2} fill="currentColor" />
STOP
</button>
<button <button
onClick={handleRandom} onClick={handleRandom}
className="px-6 py-2 bg-white text-black font-mono text-[11px] tracking-[0.2em] hover:bg-black hover:text-white border-2 border-white transition-all" className="px-6 py-2 bg-white text-black font-mono text-[11px] tracking-[0.2em] hover:bg-black hover:text-white border-2 border-white transition-all"