movie player test

frontend/src/app/genres/[genre]/page.js

@@ -168,7 +168,7 @@ export default function GenrePage({ params }) {
           {genreItems.series && genreItems.series.length > 0 && (
             <section className="section series">
               <div className="section-controls">
-                <h2>Series</h2>
+                <h2>TV Shows</h2>
                 <div className="scroll-controls">
                   <button
                     onClick={() => scroll(seriesRef, "left")}

frontend/src/app/movie/[title]/page.js

@@ -92,7 +92,7 @@ export default function MovieDetailsPage({ params }) {
           />
         </div>
         <div className="movie-details-actions">
-          <Link href={"#play"}>
+          <Link href={`/player/movie/${params.title}`}>
             <button className="play-button">
               <FontAwesomeIcon icon={faPlay} size="lg" /> Play
             </button>

frontend/src/app/movies/filmsPage.css

@@ -1,10 +1,3 @@
-/* Global Styles */
-body {
-  background-color: #121212;
-  color: #e0e0e0;
-  font-family: Arial, sans-serif;
-}
-
 /* Films Page Container */
 .films-page-container {
   display: flex;

frontend/src/app/player/film/[title]/page.js

@@ -1,16 +0,0 @@
-'use client';
-
-import { useParams } from 'next/navigation';
-
-export default function FilmPlayer() {
-  const { title } = useParams();
-
-  return (
-    <>
-      <div>
-        <h1 className='text-white'>Film Player - {title}</h1>
-        {/* Add film player component here */}
-      </div>
-    </>
-  );
-}

frontend/src/app/player/movie/[title]/page.js

@@ -0,0 +1,158 @@
+"use client";
+import apiClient from "@/api/apiClient";
+import { useEffect, useState } from "react";
+
+export default function FilmPlayer({ params }) {
+  const title = decodeURIComponent(params.title);
+  const [videoUrl, setVideoUrl] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [downloadProgress, setDownloadProgress] = useState(null);
+  const [downloadProgressUrl, setDownloadProgressUrl] = useState(null);
+  const [metadata, setMetadata] = useState(null);
+
+  useEffect(() => {
+    const fetchMovieCard = async () => {
+      try {
+        const data = await apiClient.getMovieCard(title);
+        if (data.title) {
+          setMetadata(data);
+        } else {
+          setError("Movie card not found");
+          setLoading(false);
+        }
+      } catch (err) {
+        setError("Failed to fetch movie card");
+        setLoading(false);
+      }
+    };
+
+    fetchMovieCard();
+  }, [title]);
+
+  useEffect(() => {
+    if (!metadata) return;
+
+    const fetchVideoData = async () => {
+      try {
+        const data = await apiClient.getMovieByTitle(title);
+
+        if (data.url) {
+          setVideoUrl(data.url);
+          setLoading(false);
+        } else if (data.status === "Download started") {
+          setDownloadProgressUrl(data.progress_url);
+          setLoading(false);
+        }
+      } catch (err) {
+        setError("Failed to fetch video data");
+        setLoading(false);
+      }
+    };
+
+    fetchVideoData();
+  }, [title, metadata]);
+
+  useEffect(() => {
+    if (!downloadProgressUrl) return;
+
+    const intervalId = setInterval(async () => {
+      try {
+        const response = await fetch(downloadProgressUrl);
+        const progressData = await response.json();
+
+        if (progressData.progress.status === "Completed") {
+          clearInterval(intervalId);
+          setDownloadProgressUrl(null);
+          setDownloadProgress(null);
+          setLoading(true);
+          setTimeout(async () => {
+            const data = await apiClient.getMovieByTitle(title);
+            if (data.url) {
+              setVideoUrl(data.url);
+              setLoading(false);
+            }
+          }, 5000); // Wait 5 seconds before fetching the video URL again
+        } else {
+          setDownloadProgress(progressData.progress);
+        }
+      } catch (err) {
+        setError("Failed to fetch download progress");
+      }
+    }, 5000);
+
+    return () => clearInterval(intervalId);
+  }, [downloadProgressUrl, title]);
+
+  return (
+    <div className="film-player-container">
+      {loading && <p className="text-white">Loading...</p>}
+      {error && <p className="text-red-500">{error}</p>}
+      {metadata && !error && (
+        <div className="metadata">
+          <p className="text-white">
+            {metadata.title} ({metadata.year})
+          </p>
+          {metadata.image && (
+            <img
+              src={
+                metadata.banner?.thumbnail
+                  ? metadata.banner.thumbnail
+                  : metadata.image
+              }
+              alt={`${metadata.title} banner`}
+            />
+          )}
+        </div>
+      )}
+      {downloadProgressUrl && downloadProgress ? (
+        <div className="download-status">
+          <p className="text-yellow-500">
+            {downloadProgress.status} - {downloadProgress.progress.toFixed(2)}%
+            downloaded
+          </p>
+          <p className="text-yellow-500">
+            ETA: {downloadProgress.eta.toFixed(2)} seconds
+          </p>
+        </div>
+      ) : (
+        videoUrl && (
+          <div className="video-player">
+            <video controls>
+              <source src={videoUrl} type="video/mp4" />
+              Your browser does not support the video tag.
+            </video>
+          </div>
+        )
+      )}
+      <style jsx>{`
+        .film-player-container {
+          padding: 20px;
+        }
+        .text-white {
+          color: white;
+        }
+        .text-red-500 {
+          color: red;
+        }
+        .text-yellow-500 {
+          color: yellow;
+        }
+        .metadata {
+          margin-bottom: 20px;
+        }
+        .metadata img {
+          max-width: 100%;
+          margin-bottom: 10px;
+        }
+        .video-player {
+          margin-top: 20px;
+        }
+        video {
+          width: 100%;
+          max-width: 800px;
+        }
+      `}</style>
+    </div>
+  );
+}