0.0.0.5 Alpha

frontend/package-lock.json

@@ -17,8 +17,10 @@
         "@fortawesome/react-fontawesome": "^0.2.2",
         "@mui/material": "^6.1.1",
         "axios": "^1.7.4",
+        "bootstrap": "^5.3.3",
         "next": "14.2.5",
         "react": "^18",
+        "react-bootstrap": "^2.10.4",
         "react-dom": "^18",
         "sharp": "^0.33.5",
         "styled-components": "^6.1.13",
@@ -1426,6 +1428,59 @@
         "url": "https://opencollective.com/popperjs"
       }
     },
+    "node_modules/@react-aria/ssr": {
+      "version": "3.9.5",
+      "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.9.5.tgz",
+      "integrity": "sha512-xEwGKoysu+oXulibNUSkXf8itW0npHHTa6c4AyYeZIJyRoegeteYuFpZUBPtIDE8RfHdNsSmE1ssOkxRnwbkuQ==",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      },
+      "engines": {
+        "node": ">= 12"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@restart/hooks": {
+      "version": "0.4.16",
+      "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.4.16.tgz",
+      "integrity": "sha512-f7aCv7c+nU/3mF7NWLtVVr0Ra80RqsO89hO72r+Y/nvQr5+q0UFGkocElTH6MJApvReVh6JHUFYn2cw1WdHF3w==",
+      "dependencies": {
+        "dequal": "^2.0.3"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@restart/ui": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/@restart/ui/-/ui-1.8.0.tgz",
+      "integrity": "sha512-xJEOXUOTmT4FngTmhdjKFRrVVF0hwCLNPdatLCHkyS4dkiSK12cEu1Y0fjxktjJrdst9jJIc5J6ihMJCoWEN/g==",
+      "dependencies": {
+        "@babel/runtime": "^7.21.0",
+        "@popperjs/core": "^2.11.6",
+        "@react-aria/ssr": "^3.5.0",
+        "@restart/hooks": "^0.4.9",
+        "@types/warning": "^3.0.0",
+        "dequal": "^2.0.3",
+        "dom-helpers": "^5.2.0",
+        "uncontrollable": "^8.0.1",
+        "warning": "^4.0.3"
+      },
+      "peerDependencies": {
+        "react": ">=16.14.0",
+        "react-dom": ">=16.14.0"
+      }
+    },
+    "node_modules/@restart/ui/node_modules/uncontrollable": {
+      "version": "8.0.4",
+      "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-8.0.4.tgz",
+      "integrity": "sha512-ulRWYWHvscPFc0QQXvyJjY6LIXU56f0h8pQFvhxiKk5V1fcI8gp9Ht9leVAhrVjzqMw0BgjspBINx9r6oyJUvQ==",
+      "peerDependencies": {
+        "react": ">=16.14.0"
+      }
+    },
     "node_modules/@rushstack/eslint-patch": {
       "version": "1.10.4",
       "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.10.4.tgz",
@@ -1484,6 +1539,11 @@
       "resolved": "https://registry.npmjs.org/@types/stylis/-/stylis-4.2.5.tgz",
       "integrity": "sha512-1Xve+NMN7FWjY14vLoY5tL3BVEQ/n42YLwaqJIPYhotZ9uBHt87VceMwWQpzmdEt2TNXIorIFG+YeCUUW7RInw=="
     },
+    "node_modules/@types/warning": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.3.tgz",
+      "integrity": "sha512-D1XC7WK8K+zZEveUPY+cf4+kgauk8N4eHr/XIHXGlGYkHLud6hK9lYfZk1ry1TNh798cZUCgb6MqGEG8DkJt6Q=="
+    },
     "node_modules/@typescript-eslint/parser": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-7.2.0.tgz",
@@ -2066,6 +2126,24 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/bootstrap": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.3.tgz",
+      "integrity": "sha512-8HLCdWgyoMguSO9o+aH+iuZ+aht+mzW0u3HIMzVu7Srrpv7EBBxTnrFlSCskwdY1+EOFQSm7uMJhNQHkdPcmjg==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/twbs"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/bootstrap"
+        }
+      ],
+      "peerDependencies": {
+        "@popperjs/core": "^2.11.8"
+      }
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -2214,6 +2292,11 @@
         "node": ">= 6"
       }
     },
+    "node_modules/classnames": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
+      "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow=="
+    },
     "node_modules/client-only": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
@@ -2520,6 +2603,14 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/dequal": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
+      "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/detect-libc": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.3.tgz",
@@ -3790,6 +3881,14 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/invariant": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
+      "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "node_modules/is-arguments": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.1.tgz",
@@ -5174,6 +5273,18 @@
         "react-is": "^16.13.1"
       }
     },
+    "node_modules/prop-types-extra": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.1.tgz",
+      "integrity": "sha512-59+AHNnHYCdiC+vMwY52WmvP5dM3QLeoumYuEyceQDi9aEhtwN9zIQ2ZNo25sMyXnbh32h+P1ezDsUpUH3JAew==",
+      "dependencies": {
+        "react-is": "^16.3.2",
+        "warning": "^4.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=0.14.0"
+      }
+    },
     "node_modules/proxy-from-env": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
@@ -5219,6 +5330,35 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-bootstrap": {
+      "version": "2.10.4",
+      "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-2.10.4.tgz",
+      "integrity": "sha512-W3398nBM2CBfmGP2evneEO3ZZwEMPtHs72q++eNw60uDGDAdiGn0f9yNys91eo7/y8CTF5Ke1C0QO8JFVPU40Q==",
+      "dependencies": {
+        "@babel/runtime": "^7.24.7",
+        "@restart/hooks": "^0.4.9",
+        "@restart/ui": "^1.6.9",
+        "@types/react-transition-group": "^4.4.6",
+        "classnames": "^2.3.2",
+        "dom-helpers": "^5.2.1",
+        "invariant": "^2.2.4",
+        "prop-types": "^15.8.1",
+        "prop-types-extra": "^1.1.0",
+        "react-transition-group": "^4.4.5",
+        "uncontrollable": "^7.2.1",
+        "warning": "^4.0.3"
+      },
+      "peerDependencies": {
+        "@types/react": ">=16.14.8",
+        "react": ">=16.14.0",
+        "react-dom": ">=16.14.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-dom": {
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
@@ -5236,6 +5376,11 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
+    "node_modules/react-lifecycles-compat": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
+    },
     "node_modules/react-transition-group": {
       "version": "4.4.5",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
@@ -6243,6 +6388,20 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/uncontrollable": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-7.2.1.tgz",
+      "integrity": "sha512-svtcfoTADIB0nT9nltgjujTi7BzVmwjZClOmskKu/E8FW9BXzg9os8OLr4f8Dlnk0rYWJIWr4wv9eKUXiQvQwQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.6.3",
+        "@types/react": ">=16.9.11",
+        "invariant": "^2.2.4",
+        "react-lifecycles-compat": "^3.0.4"
+      },
+      "peerDependencies": {
+        "react": ">=15.0.0"
+      }
+    },
     "node_modules/uri-js": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
@@ -6310,6 +6469,14 @@
         "global": "^4.3.1"
       }
     },
+    "node_modules/warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",

frontend/package.json

@@ -18,8 +18,10 @@
     "@fortawesome/react-fontawesome": "^0.2.2",
     "@mui/material": "^6.1.1",
     "axios": "^1.7.4",
+    "bootstrap": "^5.3.3",
     "next": "14.2.5",
     "react": "^18",
+    "react-bootstrap": "^2.10.4",
     "react-dom": "^18",
     "sharp": "^0.33.5",
     "styled-components": "^6.1.13",

frontend/src/app/globals.css

@@ -6,7 +6,7 @@
 
 body {
   font-family: 'Inter', 'Noto Sans', sans-serif;
-  background-color: #0a0a10;
+  background-color: #0a0a10 !important;
   -ms-overflow-style: none;  /* IE and Edge */
   scrollbar-width: none;  /* Firefox */
   scroll-behavior: smooth;

frontend/src/app/player/movie/[title]/MoviePlayerPage.css

@@ -1,11 +1,32 @@
-.film-player-container{
-    width: 100dvw;
-    height: 100dvh;
-    padding: 0 !important;
-    margin: 0 !important;
+.film-player-container {
+  width: 100dvw;
+  height: 100dvh;
+  padding: 0;
+  margin: 0;
+  background-color: transparent;
 }
 
-.app-container{
-    padding: 0;
-    margin: 0;
-}
+.app-container {
+  padding: 0;
+  margin: 0;
+}
+
+.loading {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  justify-content: center;
+  align-items: center;
+  z-index: 100;
+}
+.text-white {
+  color: black;
+}
+
+.download-status {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+}

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

@@ -2,7 +2,12 @@
 import apiClient from "@/api/apiClient";
 import { useEffect, useState } from "react";
 import MoviePlayer from "@/components/MoviePlayer";
-import './MoviePlayerPage.css';
+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);
@@ -14,142 +19,124 @@ export default function FilmPlayer({ params }) {
   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");
+    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);
         }
-      } catch (err) {
-        setError("Failed to fetch movie card");
-        setLoading(false);
-      }
-    };
+      };
 
-    fetchMovieCard();
+      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);
+    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);
         }
-      } catch (err) {
-        setError("Failed to fetch video data");
-        setLoading(false);
-      }
-    };
+      };
 
-    fetchVideoData();
+      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);
+    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");
         }
-      } catch (err) {
-        setError("Failed to fetch download progress");
-      }
-    }, 5000);
+      }, 5000);
 
-    return () => clearInterval(intervalId);
+      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`}
-            />
-          )}
+      {loading && (
+        <div className="loading">
+          <Spinner />
         </div>
-      )} */}
+      )}
+      {error && <Alert variant="danger">{error}</Alert>}
       {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>
+          <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}/>
+          <MoviePlayer
+            videoUrl={videoUrl}
+            title={`${metadata.title} (${metadata.year})`}
+          />
         )
       )}
-      <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>
   );
 }

frontend/src/lib/config.js

@@ -1,7 +1,7 @@
 const config = {
     apiBaseUrl: 'https://hans-den-load-balancer.hf.space',
     searchUrl: 'https://unicone-studio-search.hf.space/api/search',
-    version: "0.0.0.4 Alpha",
+    version: "0.0.0.5 Alpha",
   };
   
 export default config;