rewrite ui with vite+react

web/src/player/context.ts

@@ -0,0 +1,21 @@
+import { createContext, useContext } from "react";
+import type { EpisodeDetail } from "../api/podcasts";
+
+export type PlayerStatus = "stopped" | "playing" | "paused";
+
+export type PlayerContext = {
+  status: PlayerStatus;
+  setStatus: (status: PlayerStatus) => void;
+  episode: EpisodeDetail | null;
+  setEpisode: (episode: EpisodeDetail | null) => void;
+};
+
+export const playerContext = createContext<PlayerContext | null>(null);
+
+export const usePlayerContext = () => {
+  const ctx = useContext(playerContext);
+  if (!ctx) {
+    throw new Error("No PlayerProvider in component tree");
+  }
+  return ctx;
+};

web/src/player/player.tsx

@@ -0,0 +1,128 @@
+import { useEffect, useRef, useState } from "react";
+import { usePlayerContext } from "./context";
+import { RewindIcon } from "../icons/rewind";
+import { FastForwardIcon } from "../icons/fastforward";
+import { PauseIcon } from "../icons/pause";
+import { PlayIcon } from "../icons/play";
+
+export const Player = () => {
+  const { status, episode, setStatus } = usePlayerContext();
+
+  const audioRef = useRef<HTMLAudioElement>(null);
+
+  const [currentTime, setCurrentTime] = useState(0);
+  const [duration, setDuration] = useState(0);
+
+  useEffect(() => {
+    if (!episode) return;
+    audioRef.current = new Audio(episode.url);
+
+    audioRef.current.addEventListener("timeupdate", (e) => {
+      const t = e.target as HTMLAudioElement;
+      setCurrentTime(t.currentTime);
+    });
+
+    audioRef.current.addEventListener("loadeddata", (e) => {
+      const t = e.target as HTMLAudioElement;
+      setDuration(t.duration);
+    });
+  }, [episode]);
+
+  useEffect(() => {
+    if (!audioRef.current) return;
+
+    if (status === "playing") {
+      audioRef.current.play();
+    } else {
+      audioRef.current.pause();
+    }
+  }, [status, audioRef]);
+
+  useEffect(() => {
+    const handleKeyPress = (e: KeyboardEvent) => {
+      switch (e.key) {
+        case "ArrowLeft":
+          if (audioRef.current) {
+            audioRef.current.currentTime -= 10;
+          }
+          break;
+        case "ArrowRight":
+          if (audioRef.current) {
+            audioRef.current.currentTime += 10;
+          }
+          break;
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyPress);
+
+    return () => {
+      window.addEventListener("keydown", handleKeyPress);
+    };
+  }, []);
+
+  const progress = currentTime / duration;
+
+  if (status === "stopped") {
+    return null;
+  }
+
+  return (
+    <div className="fixed bottom-0 left-0 right-0 z-50 max-w-[1440px] w-full mx-auto">
+      <div className="bg-white py-2 px-4 flex items-center gap-4">
+        <div className="flex items-center gap-2">
+          {status === "playing" ? (
+            <button onClick={() => setStatus("paused")}>
+              <PauseIcon size={24} />
+            </button>
+          ) : (
+            <button onClick={() => setStatus("playing")}>
+              <PlayIcon size={24} />
+            </button>
+          )}
+          <button
+            onClick={() => {
+              if (!audioRef.current) return;
+              audioRef.current.currentTime -= 10;
+            }}
+          >
+            <RewindIcon size={24} />
+          </button>
+          <button
+            onClick={() => {
+              if (!audioRef.current) return;
+              audioRef.current.currentTime += 10;
+            }}
+          >
+            <FastForwardIcon size={24} />
+          </button>
+        </div>
+        <div
+          className="w-full h-2 flex items-center rounded-lg bg-neutral-200 overflow-hidden hover:h-5 transition-[height] ease-linear"
+          onClick={(e) => {
+            if (!audioRef.current) return;
+
+            const rect = e.currentTarget.getBoundingClientRect();
+            const left = e.clientX - rect.x;
+            const percent = Math.floor((left / rect.width) * 100);
+            const newTime = (duration * percent) / 100;
+            audioRef.current.currentTime = newTime;
+            setCurrentTime(newTime);
+          }}
+        >
+          <div
+            style={{ width: `${progress * 100}%` }}
+            className="bg-red-500 h-full"
+          ></div>
+        </div>
+        <p className="min-w-[50px] text-right">{formatTime(currentTime)}</p>
+      </div>
+    </div>
+  );
+};
+
+const formatTime = (seconds: number): string => {
+  const m = Math.floor(seconds / 60);
+  const s = Math.floor(seconds % 60);
+  return `${m}:${String(s).padStart(2, "0")}`;
+};

web/src/player/provider.tsx

@@ -0,0 +1,23 @@
+import { useState, type ReactNode } from "react";
+import {
+  type PlayerContext,
+  type PlayerStatus,
+  playerContext,
+} from "./context";
+import type { EpisodeDetail } from "../api/podcasts";
+
+export const PlayerProvider = ({ children }: { children: ReactNode }) => {
+  const [status, setStatus] = useState<PlayerStatus>("stopped");
+  const [episode, setEpisode] = useState<EpisodeDetail | null>(null);
+
+  const value = {
+    status,
+    setStatus,
+    episode,
+    setEpisode,
+  } satisfies PlayerContext;
+
+  return (
+    <playerContext.Provider value={value}>{children}</playerContext.Provider>
+  );
+};