Add play/pause functionality to the play button

lib/playback/index.ts

@@ -210,6 +210,10 @@ export class Player {
 		return this.#catalog.tracks.filter(Catalog.isAudioTrack).map((track) => track.name)
 	}
 
+	isPaused() {
+		return this.#paused
+	}
+
 	async switchTrack(trackname: string) {
 		const currentTrack = this.getCurrentTrack()
 		if (this.#paused) {

web/src/components/play-button.tsx

@@ -1,19 +1,28 @@
 type PlayButtonProps = {
-	play: () => void
+	onClick: () => Promise<void>
+	isPlaying: boolean
 }
 
 export const PlayButton = (props: PlayButtonProps) => {
 	return (
 		<button
 			class="
-				absolute bottom-0 left-4 flex h-4 w-8 items-center justify-center
-				rounded bg-black/70 px-6 py-4 shadow-lg
+				absolute bottom-0 left-4 flex h-8 w-12 items-center justify-center
+				rounded bg-black/70 px-2 py-2 shadow-lg
 				hover:bg-black/80 focus:bg-black/100 focus:outline-none
 			"
-			onClick={() => props.play()}
-			aria-label="Play"
+			onClick={() => void props.onClick()}
+			aria-label={props.isPlaying ? "Pause" : "Play"}
 		>
-			▶
+			{props.isPlaying ? (
+				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#fff" class="h-6 w-6">
+					<path d="M6 5h4v14H6zM14 5h4v14h-4z" />
+				</svg>
+			) : (
+				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#fff" class="h-4 w-4">
+					<path d="M3 22v-20l18 10-18 10z" />
+				</svg>
+			)}
 		</button>
 	)
 }

web/src/components/watch.tsx

@@ -16,6 +16,7 @@ export default function Watch(props: { name: string }) {
 
 	const [error, setError] = createSignal<Error | undefined>()
 	const [player, setPlayer] = createSignal<Player | undefined>()
+	const [isPlaying, setIsPlaying] = createSignal(!player()?.isPaused())
 	const [showCatalog, setShowCatalog] = createSignal(false)
 	const [hovered, setHovered] = createSignal(false)
 	const [showControls, setShowControls] = createSignal(true)
@@ -43,11 +44,17 @@ export default function Watch(props: { name: string }) {
 		return player()?.getVideoTracks()
 	}
 
-	const handlePlayPause = () => {
-		const playerInstance = player()
-		if (!playerInstance) return
+	const handlePlayPause = async () => {
+		const instance = player()
+		if (!instance) return
 
-		player()?.play().catch(setError)
+		if (instance.isPaused()) {
+			await instance.play()
+			setIsPlaying(true)
+		} else {
+			await instance.play() // Assuming the same method toggles play/pause
+			setIsPlaying(false)
+		}
 	}
 
 	// The JSON catalog for debugging.
@@ -85,7 +92,7 @@ export default function Watch(props: { name: string }) {
 			<div class="relative aspect-video w-full">
 				<canvas
 					ref={canvas}
-					onClick={handlePlayPause}
+					onClick={() => void handlePlayPause()}
 					class="h-full w-full rounded-lg"
 					onMouseEnter={() => setHovered(true)}
 					onMouseLeave={() => setHovered(false)}
@@ -95,7 +102,7 @@ export default function Watch(props: { name: string }) {
 						showControls() ? "opacity-100" : "opacity-0"
 					} absolute bottom-4 flex h-[40px] w-[100%] items-center gap-[4px] rounded transition-opacity duration-200 `}
 				>
-					<PlayButton play={handlePlayPause} />
+					<PlayButton onClick={handlePlayPause} isPlaying={isPlaying()} />
 					<div class="absolute bottom-0 right-4 flex h-[32px] w-fit items-center justify-evenly gap-[4px] rounded bg-black/70 p-2">
 						<VolumeButton mute={mute} />
 						<TrackSelect trackNum={tracknum} getVideoTracks={getVideoTracks} switchTrack={switchTrack} />