0.0.8 V Alpha. added Tv SHow Player.

frontend/src/App.js

@@ -29,10 +29,12 @@ import { TvShowsProvider } from "./context/TvShowsContext";
 import "./App.css";
 import MenueModal from "./components/modals/menueModal";
 import FilmPlayer from "./pages/filmPlayer";
+import TvshowPlayer from "./pages/tvshowPlayer";
 import TvShowDetailsPage from "./pages/tvshowDetailsPage";
 import AdminPage from "./pages/Admin/adminPage";
 import SearchPage from "./pages/searchPage";
 
+
 library.add(
   faEllipsisVertical,
   faPlay,
@@ -182,6 +184,7 @@ function AppContent() {
           <Route path="/tvshows" element={<TvShowsPage />} />
           <Route path="/film/:title" element={<FilmDetailsPage />} />
           <Route path="/player/film/:videoUrl" element={<FilmPlayer />} />
+          <Route path="/player/tvshow/:title/:season/:episode" element={<TvshowPlayer />} />
           <Route path="/tvshow/:title" element={<TvShowDetailsPage />} />
           <Route path="/admin" element={<AdminPage />} />
         </Routes>

frontend/src/components/tv/backArrow.js

@@ -0,0 +1,14 @@
+import React from "react";
+import { useNavigate } from "react-router-dom";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+const BackArrow = () => {
+  const navigate = useNavigate();
+  return (
+    <div className="back-arrow" onClick={() => navigate("/")}>
+      <FontAwesomeIcon icon="fa-solid fa-chevron-left" />
+    </div>
+  );
+};
+
+export default BackArrow;

frontend/src/config.js

@@ -2,7 +2,7 @@
 const config = {
     apiBaseUrl: 'https://unicone-studio-load-balancer.hf.space',
     searchUrl: 'https://unicone-studio-search.hf.space/api/search',
-    version: "0.0.7 V Alpha",
+    version: "0.0.8 V Alpha",
   };
   
 export default config;

frontend/src/pages/filmPlayer.css

@@ -1,8 +1,14 @@
 .film-player-container {
-    position: relative;
-    width: 100%;
-    height: 100vh;
-    background: #000;
+  background-color: #121212; /* Dark background */
+  color: #e0e0e0; /* Light text color for readability */
+  padding: 0; /* Remove padding to avoid unnecessary scrolling */
+  position: relative;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden; /* Prevent any overflow causing scroll */
   }
   
   .film-player-container .plyr {
@@ -38,7 +44,20 @@
     opacity: 1;
   }
   
-
+  .plyr {
+    width: 100%;
+    max-width: 100%;
+    height: 100%;
+    max-height: 100vh;
+    object-fit: contain;
+    --plyr-color-main: #ff5722; /* Orange */
+    --plyr-color-controls: #e0e0e0; /* Light controls */
+    --plyr-color-progress: #ff5722; /* Orange progress bar */
+    --plyr-color-buffer: #333; /* Dark buffer bar */
+    --plyr-color-volume: #ff5722; /* Orange volume control */
+    --plyr-color-time: #e0e0e0; /* Light time controls */
+    --plyr-color-fullscreen: #ff5722; /* Orange fullscreen button */
+  }
     /* Handle animations on page load */
     @keyframes pageLoad {
       from {

frontend/src/pages/searchPage.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from "react";
+import { useNavigate } from "react-router-dom";
 import { search } from "../api/searchApi";
-import { Link } from "react-router-dom";
 import "./searchPage.css";
 
 const SearchPage = () => {
@@ -10,6 +10,8 @@ const SearchPage = () => {
   const [error, setError] = useState(null);
   const [debouncedQuery, setDebouncedQuery] = useState("");
 
+  const navigate = useNavigate();
+
   useEffect(() => {
     const handler = setTimeout(() => {
       if (debouncedQuery) {
@@ -40,6 +42,10 @@ const SearchPage = () => {
     setDebouncedQuery(e.target.value);
   };
 
+  const handleItemClick = (path) => {
+    navigate(path);
+  };
+
   return (
     <div className="search-page">
       <div className="search-container">
@@ -63,13 +69,12 @@ const SearchPage = () => {
             <h2>Films</h2>
             <ul className="results-list">
               {results.films.map((film, index) => (
-                <li key={index} className="result-item">
-                  <Link
-                    to={`/film/${encodeURIComponent(film)}`}
-                    className="result-link"
-                  >
-                    {film}
-                  </Link>
+                <li
+                  key={index}
+                  className="result-item"
+                  onClick={() => handleItemClick(`/film/${encodeURIComponent(film)}`)}
+                >
+                  {film}
                 </li>
               ))}
             </ul>
@@ -80,13 +85,12 @@ const SearchPage = () => {
             <h2>TV Series</h2>
             <ul className="results-list">
               {results.tv_series.map((series, index) => (
-                <li key={index} className="result-item">
-                  <Link
-                    to={`/tvshow/${encodeURIComponent(series)}`}
-                    className="result-link"
-                  >
-                    {series}
-                  </Link>
+                <li
+                  key={index}
+                  className="result-item"
+                  onClick={() => handleItemClick(`/tvshow/${encodeURIComponent(series)}`)}
+                >
+                  {series}
                 </li>
               ))}
             </ul>

frontend/src/pages/tvshowDetailsPage.js

@@ -1,4 +1,5 @@
 import React, { useEffect, useState, useCallback } from "react";
+import { Link } from "react-router-dom";
 import { useParams } from "react-router-dom";
 import apiClient from "../api/apiClient";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -162,11 +163,11 @@ function TvShowDetailsPage() {
     if (index >= 0 && index < tvshowFiles.length) {
       setSeasonIndex(index);
       setSelectedSeason(tvshowFiles[index]);
+      console.log(selectedSeason);
     } else {
-      console.error('Invalid season index:', index);
+      console.error("Invalid season index:", index);
     }
   };
-  
 
   if (loading) {
     return <div className="loading">Loading...</div>;
@@ -306,9 +307,11 @@ function TvShowDetailsPage() {
             <h3>{selectedSeason.season}</h3>
             <div className="episode-cards">
               {selectedSeason.episodes.map((episode, i) => (
-                <div className="episode-card" key={i}>
-                  <p>{episode}</p>
-                </div>
+                <Link to={`/player/tvshow/${encodeURIComponent(title)}/${encodeURIComponent(selectedSeason.season)}/${encodeURIComponent(episode)}`}>
+                  <div className="episode-card" key={episode}>
+                    <p>{episode}</p>
+                  </div>
+                </Link>
               ))}
             </div>
           </div>

frontend/src/pages/tvshowPlayer.css

@@ -0,0 +1,100 @@
+/* TvshowPlayer.css */
+.tvshow-player-container {
+    background-color: #121212; /* Dark background */
+    color: #e0e0e0; /* Light text color for readability */
+    padding: 0; /* Remove padding to avoid unnecessary scrolling */
+    position: relative;
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden; /* Prevent any overflow causing scroll */
+  }
+  
+  /* Ensure the player controls don't affect the video aspect ratio */
+  .plyr__video-embed {
+    position: relative;
+    padding-bottom: 56.25%; /* 16:9 aspect ratio */
+    height: 0;
+    overflow: hidden;
+    max-width: 100%;
+    background: black;
+  }
+  
+  .plyr__video-embed iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+  
+  .plyr {
+    width: 100%;
+    max-width: 100%;
+    height: 100%;
+    max-height: 100vh;
+    object-fit: contain;
+    --plyr-color-main: #ff5722; /* Orange */
+    --plyr-color-controls: #e0e0e0; /* Light controls */
+    --plyr-color-progress: #ff5722; /* Orange progress bar */
+    --plyr-color-buffer: #333; /* Dark buffer bar */
+    --plyr-color-volume: #ff5722; /* Orange volume control */
+    --plyr-color-time: #e0e0e0; /* Light time controls */
+    --plyr-color-fullscreen: #ff5722; /* Orange fullscreen button */
+  }
+  
+  .plyr__controls {
+    background: #0e5bbf; /* Deep blue background for controls */
+  }
+  
+  .back-arrow {
+    position: absolute;
+    top: 20px;
+    left: 20px;
+    padding: 10px;
+    cursor: pointer;
+    transition: transform .2s ease;
+  }
+  
+  .back-arrow:hover {
+    transform: scale(1.2);
+  }
+  
+  /* Progress Circle */
+  .progress-container {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  
+  .progress-circle {
+    border: 8px solid rgba(255, 255, 255, 0.1);
+    border-radius: 50%;
+    border-top: 8px solid #ff5722;
+    width: 60px;
+    height: 60px;
+    animation: spin 1.5s linear infinite;
+  }
+  
+  /* Keyframes for spinning animation */
+  @keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+  }
+  
+  @media (max-width: 768px) {
+    .tvshow-player-container {
+      padding: 10px;
+    }
+  
+    .plyr {
+      max-width: 100%;
+    }
+  }
+  

frontend/src/pages/tvshowPlayer.js

@@ -0,0 +1,82 @@
+import React, { useState, useEffect, useCallback } from "react";
+import { useParams } from "react-router-dom";
+import apiClient from "../api/apiClient";
+import Plyr from "plyr-react";
+import "plyr-react/plyr.css";
+import "./tvshowPlayer.css";
+import BackArrow from "../components/tv/backArrow";
+
+const TvshowPlayer = React.memo(() => {
+  const { title, season, episode } = useParams();
+  const [videoUrl, setVideoUrl] = useState(null);
+  const [progress, setProgress] = useState(null);
+  const [error, setError] = useState(null);
+
+  const fetchProgress = useCallback(async (progressUrl) => {
+    try {
+      const response = await fetch(progressUrl);
+      const data = await response.json();
+      if (data.progress.status === "Completed") {
+        setTimeout(async () => {
+          const videoResponse = await apiClient.getTVEpisode(title, season, episode);
+          if (videoResponse.url) {
+            setVideoUrl(videoResponse.url);
+          } else {
+            setError("Error fetching video URL.");
+          }
+        }, 5000);
+      } else {
+        setProgress(data.progress);
+        setTimeout(() => fetchProgress(progressUrl), 2000);
+      }
+    } catch {
+      setError("Error fetching progress.");
+    }
+  }, [title, season, episode]);
+
+  useEffect(() => {
+    const getEpisode = async () => {
+      try {
+        const response = await apiClient.getTVEpisode(title, season, episode);
+        if (response.url) {
+          setVideoUrl(response.url);
+        } else if (response.status === "Download started") {
+          fetchProgress(response.progress_url);
+        } else if (response.error) {
+          setError(response.error);
+        }
+      } catch {
+        setError("Error fetching episode.");
+      }
+    };
+
+    getEpisode();
+  }, [title, season, episode, fetchProgress]);
+
+  if (error) {
+    return <div>Error: {error}</div>;
+  }
+
+  return (
+    <div className="tvshow-player-container">
+      <BackArrow />
+      {videoUrl ? (
+        <Plyr
+          source={{
+            type: 'video',
+            sources: [{ src: videoUrl, type: 'video/mp4' }],
+          }}
+          options={{
+            controls: ['play', 'progress', 'current-time', 'mute', 'volume', 'fullscreen'],
+          }}
+        />
+      ) : (
+        <div className="progress-container">
+          <div className="progress-circle"></div>
+        </div>
+      )}
+    </div>
+  );
+});
+
+export default TvshowPlayer;