0.0.3 V Alpha UI update

frontend/package-lock.json

@@ -18,6 +18,7 @@
         "http-proxy-middleware": "^2.0.6",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-modal": "^3.16.1",
         "react-router-dom": "^6.25.1",
         "react-scripts": "5.0.1",
         "serve": "^14.2.3",
@@ -8390,6 +8391,11 @@
         "url": "https://github.com/sindresorhus/execa?sponsor=1"
       }
     },
+    "node_modules/exenv": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz",
+      "integrity": "sha512-Z+ktTxTwv9ILfgKCk32OX3n/doe+OcLTRtqK9pcL+JsP3J1/VW8Uvl4ZjLlKqeW4rzK4oesDOGMEMRIZqtP4Iw=="
+    },
     "node_modules/exit": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz",
@@ -15141,6 +15147,29 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
+    "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-modal": {
+      "version": "3.16.1",
+      "resolved": "https://registry.npmjs.org/react-modal/-/react-modal-3.16.1.tgz",
+      "integrity": "sha512-VStHgI3BVcGo7OXczvnJN7yT2TWHJPDXZWyI/a0ssFNhGZWsPmB8cF0z33ewDXq4VfYMO1vXgiv/g8Nj9NDyWg==",
+      "dependencies": {
+        "exenv": "^1.2.0",
+        "prop-types": "^15.7.2",
+        "react-lifecycles-compat": "^3.0.0",
+        "warning": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "peerDependencies": {
+        "react": "^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18",
+        "react-dom": "^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18"
+      }
+    },
     "node_modules/react-refresh": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
@@ -17558,6 +17587,14 @@
         "makeerror": "1.0.12"
       }
     },
+    "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/watchpack": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",

frontend/package.json

@@ -13,6 +13,7 @@
     "http-proxy-middleware": "^2.0.6",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-modal": "^3.16.1",
     "react-router-dom": "^6.25.1",
     "react-scripts": "5.0.1",
     "serve": "^14.2.3",

frontend/src/App.css

@@ -1,5 +1,5 @@
 body {
-  background-color: #1a1a1a; /* Dark background for a sleek look */
+  background: linear-gradient(to top, #1e2634 30%, #181e28);
   color: #f5f5f5; /* Light gray text for contrast */
   font-family: "Signika", sans-serif;
   font-optical-sizing: auto;
@@ -15,8 +15,8 @@ body {
 .App-header {
   background: linear-gradient(
     to right,
-    #232323,
-    #1b1b1b
+    #171717,
+    #31506e
   ); /* Dark gradient for a sophisticated header */
   padding: 10px 0; /* Padding for spacing */
   color: #f5f5f5; /* Light text color for readability */

frontend/src/api/LoadBalancer.js

@@ -1,101 +1,132 @@
 class LoadBalancerAPI {
-    constructor(baseURL) {
-      this.baseURL = baseURL;
-    }
-  
-    async getInstances() {
-      return this._getRequest('/api/instances');
-    }
-  
-    async getInstancesHealth() {
-      return this._getRequest('/api/instances/health');
-    }
-  
-    async getMovieByTitle(title) {
-      return this._getRequest(`/api/film/${encodeURIComponent(title)}`);
-    }
-  
-    async getTVEpisode(title, season, episode) {
-      return this._getRequest(`/api/tv/${encodeURIComponent(title)}/${season}/${episode}`);
-    }
-  
-    async getFilmIDByTitle(title) {
-      return this._getRequest(`/api/filmid/${encodeURIComponent(title)}`);
-    }
-  
-    async getEpisodeIDByTitleSeasonEpisode(title, season, episode) {
-      return this._getRequest(`/api/episodeid/${encodeURIComponent(title)}/${season}/${episode}`);
-    }
-  
-    async getCacheSize() {
-      return this._getRequest('/api/cache/size');
-    }
-  
-    async clearCache() {
-      return this._postRequest('/api/cache/clear');
-    }
-  
-    async getTVStore() {
-      return this._getRequest('/api/tv/store');
-    }
-  
-    async getFilmStore() {
-      return this._getRequest('/api/film/store');
-    }
-  
-    async getFilmMetadataByTitle(title) {
-      return this._getRequest(`/api/film/metadata/${encodeURIComponent(title)}`);
-    }
-  
-    async getTVMetadataByTitle(title) {
-      return this._getRequest(`/api/tv/metadata/${encodeURIComponent(title)}`);
-    }
-  
-    async getAllFilms() {
-      return this._getRequest('/api/film/all');
-    }
-  
-    async getAllTVShows() {
-      return this._getRequest('/api/tv/all');
+  constructor(baseURL) {
+    this.baseURL = baseURL;
+    this.filmCache = null; // Cache for film store
+    this.tvCache = null;   // Cache for TV store
+  }
+
+  async getInstances() {
+    return this._getRequest('/api/instances');
+  }
+
+  async getInstancesHealth() {
+    return this._getRequest('/api/instances/health');
+  }
+
+  async getMovieByTitle(title) {
+    return this._getRequest(`/api/film/${encodeURIComponent(title)}`);
+  }
+
+  async getTVEpisode(title, season, episode) {
+    return this._getRequest(`/api/tv/${encodeURIComponent(title)}/${season}/${episode}`);
+  }
+
+  async getFilmIDByTitle(title) {
+    return this._getRequest(`/api/filmid/${encodeURIComponent(title)}`);
+  }
+
+  async getEpisodeIDByTitleSeasonEpisode(title, season, episode) {
+    return this._getRequest(`/api/episodeid/${encodeURIComponent(title)}/${season}/${episode}`);
+  }
+
+  async getCacheSize() {
+    return this._getRequest('/api/cache/size');
+  }
+
+  async clearCache() {
+    return this._postRequest('/api/cache/clear');
+  }
+
+  async getTVStore() {
+    const response = await this._getRequest('/api/tv/store');
+    
+    if (response && Object.keys(response).length > 0) {
+      this.tvCache = response; // Update cache if response is not empty
+    }
+    
+    return this.tvCache || {}; // Return cache if response is empty
+  }
+
+  async getFilmStore() {
+    const response = await this._getRequest('/api/film/store');
+    
+    if (response && Object.keys(response).length > 0) {
+      this.filmCache = response; // Update cache if response is not empty
+    }
+    
+    return this.filmCache || {}; // Return cache if response is empty
+  }
+
+  async getFilmMetadataByTitle(title) {
+    return this._getRequest(`/api/film/metadata/${encodeURIComponent(title)}`);
+  }
+
+  async getTVMetadataByTitle(title) {
+    return this._getRequest(`/api/tv/metadata/${encodeURIComponent(title)}`);
+  }
+
+  async getAllFilms() {
+    return this._getRequest('/api/film/all');
+  }
+
+  async getAllTVShows() {
+    return this._getRequest('/api/tv/all');
+  }
+
+  async getDownloadProgress(url) {
+    return this._getRequestNoBase(url);
+  }
+
+  // Helper methods for GET and POST requests
+  async _getRequest(endpoint) {
+    try {
+      const response = await fetch(`${this.baseURL}${endpoint}`, {
+        method: 'GET',
+        headers: { 'Content-Type': 'application/json' },
+      });
+      console.log(`api endpoint: ${this.baseURL}${endpoint}`);
+      return await this._handleResponse(response);
+    } catch (error) {
+      console.error(`Error during GET request to ${endpoint}:`, error);
+      throw error;
     }
-  
-    // Helper methods for GET and POST requests
-    async _getRequest(endpoint) {
-      try {
-        const response = await fetch(`${this.baseURL}${endpoint}`, {
-          method: 'GET',
-          headers: { 'Content-Type': 'application/json' },
-        });
-        console.log(`api endpoint: ${this.baseURL}${endpoint}`)
-        return await this._handleResponse(response);
-      } catch (error) {
-        console.error(`Error during GET request to ${endpoint}:`, error);
-        throw error;
-      }
+  }
+
+  async _postRequest(endpoint, body) {
+    try {
+      const response = await fetch(`${this.baseURL}${endpoint}`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(body),
+      });
+      return await this._handleResponse(response);
+    } catch (error) {
+      console.error(`Error during POST request to ${endpoint}:`, error);
+      throw error;
     }
-  
-    async _postRequest(endpoint, body) {
-      try {
-        const response = await fetch(`${this.baseURL}${endpoint}`, {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify(body),
-        });
-        return await this._handleResponse(response);
-      } catch (error) {
-        console.error(`Error during POST request to ${endpoint}:`, error);
-        throw error;
-      }
+  }
+
+  async _handleResponse(response) {
+    if (!response.ok) {
+      const errorDetails = await response.text();
+      throw new Error(`HTTP error! status: ${response.status}, details: ${errorDetails}`);
     }
-  
-    async _handleResponse(response) {
-      if (!response.ok) {
-        const errorDetails = await response.text();
-        throw new Error(`HTTP error! status: ${response.status}, details: ${errorDetails}`);
-      }
-      return response.json();
+    return response.json();
+  }
+
+  async _getRequestNoBase(url) {
+    try {
+      const response = await fetch(`${url}`, {
+        method: 'GET',
+        headers: { 'Content-Type': 'application/json' },
+      });
+      console.log(`api endpoint: ${url}`);
+      return await this._handleResponse(response);
+    } catch (error) {
+      console.error(`Error during GET request to ${url}:`, error);
+      throw error;
     }
   }
-  
-  export { LoadBalancerAPI };
-  
+}
+
+export { LoadBalancerAPI };

frontend/src/components/film/modals/playModal.css

@@ -0,0 +1,129 @@
+.play-modal {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background: linear-gradient(135deg, #171717, #31506e); /* Deep blue gradient */
+    padding: 30px;
+    border-radius: 20px;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7);
+    color: #f0f0f0; /* Light gray text color */
+    text-align: center;
+    width: 90%;
+    max-width: 600px;
+    z-index: 1001;
+    animation: fadeIn 0.3s ease-out;
+  }
+  
+  .play-modal-overlay {
+    background-color: rgba(0, 0, 0, 0.8);
+    z-index: 1000;
+  }
+  
+  .modal-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+  
+  .modal-title {
+    font-size: 2.5rem;
+    margin-bottom: 20px;
+    color: #ffffff; /* White text color for the title */
+    font-family: 'Roboto', sans-serif;
+    text-transform: uppercase;
+    letter-spacing: 2px;
+  }
+  
+  .progress-container {
+    width: 100%;
+  }
+  
+  .progress-bar {
+    width: 100%;
+    background: #003366; /* Darker blue for the progress bar background */
+    border-radius: 10px;
+    overflow: hidden;
+    margin-bottom: 10px;
+    height: 15px;
+  }
+  
+  .progress {
+    height: 100%;
+    background: #1e90ff; /* Bright blue for the progress */
+    transition: width 0.3s ease-in-out;
+  }
+  
+  .progress-info {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    padding: 0 10px;
+  }
+  
+  .progress-text {
+    font-size: 1.1rem;
+    color: #d3d3d3; /* Light gray text color for progress info */
+  }
+  
+  .modal-actions {
+    display: flex;
+    justify-content: center;
+    gap: 15px;
+  }
+  
+  .confirm-button {
+    background: #3f75d2; /* Soft blue for the confirm button */
+    color: #fff;
+    border: none;
+    padding: 12px 25px;
+    border-radius: 8px;
+    cursor: pointer;
+    font-size: 1.1rem;
+    transition: background 0.3s ease;
+  }
+  
+  .confirm-button:hover {
+    background: #4244b3; /* Slightly darker blue on hover */
+  }
+  
+  .cancel-button {
+    background: #b0bec5; /* Light silver-blue for the cancel button */
+    color: #000; /* Dark text color for contrast */
+    border: none;
+    padding: 12px 25px;
+    border-radius: 8px;
+    cursor: pointer;
+    font-size: 1.1rem;
+    transition: background 0.3s ease;
+  }
+  
+  .cancel-button:hover {
+    background: #90a4ae; /* Slightly darker silver-blue on hover */
+  }
+  
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+  
+  @media (max-width: 768px) {
+    .play-modal {
+      width: 95%;
+      padding: 20px;
+    }
+  
+    .modal-title {
+      font-size: 2rem;
+    }
+  
+    .confirm-button, .cancel-button {
+      padding: 10px 20px;
+      font-size: 1rem;
+    }
+  }
+  

frontend/src/components/film/modals/playModal.js

@@ -0,0 +1,99 @@
+import React, { useEffect, useState } from "react";
+import Modal from "react-modal";
+import apiClient from "../../../api/apiClient";
+import "./playModal.css";
+
+Modal.setAppElement("#root");
+
+const PlayModal = ({ isOpen, onRequestClose, videoUrl, setVideoUrl, downloadProgress, title }) => {
+  const [progress, setProgress] = useState(null);
+  const [completed, setCompleted] = useState(false);
+
+  useEffect(() => {
+    let interval;
+    if (downloadProgress) {
+      interval = setInterval(async () => {
+        try {
+          const response = await apiClient.getDownloadProgress(downloadProgress);
+          setProgress(response.progress);
+          if (response.progress.status === "Completed") {
+            setCompleted(true);
+            clearInterval(interval);
+          }
+        } catch (error) {
+          console.error("Failed to fetch download progress:", error);
+        }
+      }, 5000);
+    }
+    return () => clearInterval(interval);
+  }, [downloadProgress]);
+
+  useEffect(() => {
+    const fetchVideoUrl = async () => {
+      try {
+        const response = await apiClient.getMovieByTitle(title);
+        if (response.url) {
+          setVideoUrl(response.url);
+        }
+      } catch (error) {
+        console.error("Failed to fetch video URL:", error);
+      }
+    };
+
+    if (completed) {
+      const timer = setTimeout(() => {
+        fetchVideoUrl();
+      }, 5000);
+      return () => clearTimeout(timer);
+    }
+  }, [completed, title, setVideoUrl]);
+
+  const handleConfirm = () => {
+    if (videoUrl) {
+      window.location.href = videoUrl;
+    }
+  };
+
+  const handleCancel = () => {
+    onRequestClose();
+  };
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onRequestClose={onRequestClose}
+      contentLabel="Play Modal"
+      className="play-modal"
+      overlayClassName="play-modal-overlay"
+    >
+      <div className="modal-content">
+        {videoUrl ? (
+          <>
+            <h2 className="modal-title">Ready to Play</h2>
+            <div className="modal-actions">
+              <button className="confirm-button" onClick={handleConfirm}>Play</button>
+              <button className="cancel-button" onClick={handleCancel}>No</button>
+            </div>
+          </>
+        ) : progress ? (
+          <>
+            <h2 className="modal-title">Downloading...</h2>
+            <div className="progress-container">
+              <div className="progress-bar">
+                <div className="progress" style={{ width: `${progress.progress}%` }}></div>
+              </div>
+              <div className="progress-info">
+                <span className="progress-text">Progress: {progress.progress.toFixed(2)}%</span>
+                <span className="progress-text">ETA: {progress.eta.toFixed(2)} seconds</span>
+              </div>
+            </div>
+          </>
+        ) : (
+          <h2 className="modal-title">Initializing download...</h2>
+        )}
+      </div>
+    </Modal>
+  );
+};
+
+export default PlayModal;

frontend/src/config.js

@@ -1,7 +1,7 @@
 // src/config.js
 const config = {
     apiBaseUrl: 'https://unicone-studio-load-balancer.hf.space',
-    version: "0.0.2 V Alpha",
+    version: "0.0.3 V Alpha",
   };
   
 export default config;

frontend/src/pages/filmDetailsPage.css

@@ -40,7 +40,7 @@
   left: 0;
   right: 0;
   bottom: 0;
-  background: linear-gradient(to top, rgb(24, 24, 24) 30%, transparent);
+  background: linear-gradient(to top, #181e28 30%, transparent);
   z-index: 1;
 }
 

frontend/src/pages/filmDetailsPage.js

@@ -1,8 +1,9 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useCallback } from "react";
 import { useParams } from "react-router-dom";
 import apiClient from "../api/apiClient";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faPlay } from "@fortawesome/free-solid-svg-icons";
+import PlayModal from "../components/film/modals/playModal";
 import "./filmDetailsPage.css";
 
 function FilmDetailsPage() {
@@ -10,28 +11,56 @@ function FilmDetailsPage() {
   const [filmDetails, setFilmDetails] = useState(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [videoUrl, setVideoUrl] = useState(null);
+  const [downloadProgress, setDownloadProgress] = useState(null);
 
-  useEffect(() => {
-    const fetchFilmDetails = async () => {
-      try {
-        const response = await apiClient.getFilmMetadataByTitle(title);
-        if (response.data) {
-          setFilmDetails(response.data);
-        } else {
-          setError("No film details found.");
-        }
-      } catch (err) {
-        setError("Failed to fetch film details.");
-      } finally {
-        setLoading(false);
+  const fetchFilmDetails = useCallback(async () => {
+    try {
+      const response = await apiClient.getFilmMetadataByTitle(title);
+      if (response.data) {
+        setFilmDetails(response.data);
+      } else {
+        setError("No film details found.");
       }
-    };
+    } catch (err) {
+      setError("Failed to fetch film details.");
+    } finally {
+      setLoading(false);
+    }
+  }, [title]);
 
-    fetchFilmDetails();
+  const fetchVideoUrl = useCallback(async () => {
+    try {
+      const response = await apiClient.getMovieByTitle(title);
+      console.log(response);
+      if (response.url) {
+        setVideoUrl(response.url);
+      } else if (response.progress_url) {
+        setDownloadProgress(response.progress_url);
+      }
+    } catch (err) {
+      console.log(err);
+      setError("Failed to fetch video URL.");
+    }
   }, [title]);
 
+  useEffect(() => {
+    fetchFilmDetails();
+  }, [fetchFilmDetails]);
+
+  useEffect(() => {
+    if (isModalOpen && !videoUrl) {
+      fetchVideoUrl();
+    }
+  }, [isModalOpen, videoUrl, fetchVideoUrl]);
+
   const handlePlay = () => {
-    window.location.href = `/player/${title}`;
+    setIsModalOpen(true);
+  };
+
+  const handleModalClose = () => {
+    setIsModalOpen(false);
   };
 
   if (loading) {
@@ -147,6 +176,14 @@ function FilmDetailsPage() {
           </div>
         )}
       </div>
+      <PlayModal
+        isOpen={isModalOpen}
+        onRequestClose={handleModalClose}
+        videoUrl={videoUrl}
+        setVideoUrl={setVideoUrl}
+        downloadProgress={downloadProgress}
+        title={title}
+      />
     </div>
   );
 }

nginx.conf

@@ -14,6 +14,18 @@ http {
     tcp_nopush      on;
     tcp_nodelay     on;
     keepalive_timeout  65;
+    types {
+        text/html html;
+        text/css css;
+        text/xml xml;
+        image/gif gif;
+        image/jpeg jpeg jpg;
+        application/javascript js;
+        application/json json;
+        application/xml xml;
+        application/rss+xml rss;
+        text/plain txt;
+    }
 
     # Improve performance and security
     gzip on;