show episode title & duration in player

web/src/player/player.tsx

@@ -68,58 +68,65 @@ export const Player = () => {
   }
 
   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;
+    <div className="fixed bottom-0 left-0 right-0 z-50">
+      <div className="max-w-[1440px] w-full mx-auto">
+        <div className="bg-white py-2 px-4 flex flex-col">
+          <div className="w-full 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>
+                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={`${Math.floor(duration / 3600) > 0 ? "min-w-[70px]" : "min-w-[50px]"} text-right`}
+            >
+              {formatTime(currentTime)}
+            </p>
+          </div>
+
+          <h3 className="text-base font-semibold mt-2">{episode?.title}</h3>
+          <p className="opacity-50 mt-1">{formatTime(duration)}</p>
         </div>
-        <p
-          className={`${Math.floor(duration / 3600) > 0 ? "min-w-[70px]" : "min-w-[50px]"} text-right`}
-        >
-          {formatTime(currentTime)}
-        </p>
       </div>
     </div>
   );