Create src/pages/Watch.jsx

src/pages/Watch.jsx

@@ -0,0 +1,44 @@
+import { useParams, useNavigate } from 'react-router-dom';
+import { useEffect, useState, useRef } from 'react';
+import { fetchAnichinData } from '../config/firebase';
+import Plyr from 'plyr';
+import 'plyr/dist/plyr.css';
+
+export default function Watch() {
+  const { id } = useParams();
+  const navigate = useNavigate();
+  const videoRef = useRef(null);
+  const [anime, setAnime] = useState(null);
+
+  useEffect(() => {
+    fetchAnichinData().then((data) => {
+      if (data && data[id]) setAnime(data[id]);
+    });
+  }, [id]);
+
+  useEffect(() => {
+    if (anime && videoRef.current) {
+      const player = new Plyr(videoRef.current, {
+        controls: ['play-large', 'play', 'progress', 'current-time', 'volume', 'fullscreen'],
+        theme: '#dc2626'
+      });
+      return () => player.destroy();
+    }
+  }, [anime]);
+
+  if (!anime) return <div className="p-10 text-white">Loading Player...</div>;
+
+  return (
+    <div className="min-h-screen bg-black px-4 py-8">
+      <button onClick={() => navigate('/')} className="mb-6 text-red-500 font-bold hover:text-white">&larr; Back to Home</button>
+      <div className="max-w-5xl mx-auto">
+        <video ref={videoRef} className="plyr-react plyr" data-poster={anime.poster_url}>
+          {/* Asumsi format data URL video di database: anime.video_url */}
+          <source src={anime.video_url} type="video/mp4" />
+        </video>
+        <h2 className="text-3xl font-black mt-6">{anime.title}</h2>
+        <p className="text-gray-400 mt-2">{anime.synopsis}</p>
+      </div>
+    </div>
+  );
+}