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

"use client";
import apiClient from "@/api/apiClient";
import { useEffect, useState } from "react";
import MoviePlayer from "@/components/MoviePlayer";
import "./MoviePlayerPage.css";
import { Spinner } from "@/components/Spinner";
import { ProgressBar, Container, Row, Col, Alert } from "react-bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";

const DEBUG = false; // Set to true to enable debug mode

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(() => {
    if (DEBUG) {
      setMetadata({ title: "Debug Movie", year: "2024" });
    } else {
      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;

    if (DEBUG) {
      setTimeout(() => {
        setDownloadProgressUrl("dummy_progress_url");
        setLoading(false);
      }, 1000);
    } else {
      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;

    if (DEBUG) {
      const dummyProgressData = {
        progress: {
          status: "Downloading",
          progress: 45.5,
          eta: 120,
        },
      };
      setDownloadProgress(dummyProgressData.progress);
    } else {
      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 && (
        <div className="loading">
          <Spinner />
        </div>
      )}
      {error && <Alert variant="danger">{error}</Alert>}
      {downloadProgressUrl && downloadProgress ? (
        <div className="download-status">
          <Alert variant="info">
            <strong>{downloadProgress.status}</strong> -{" "}
            {downloadProgress.progress.toFixed(2)}%{" "}
            <p>
              Wait for {downloadProgress.eta.toFixed(1)} Seconds
            </p>
          </Alert>
        </div>
      ) : (
        videoUrl && (
          <MoviePlayer
            videoUrl={videoUrl}
            title={`${metadata.title} (${metadata.year})`}
          />
        )
      )}
    </div>
  );
}