player 0.0.3 Alpha

frontend/src/app/globals.css

@@ -8,6 +8,7 @@
   --bg-primary: #11121f;
   --bg-secondary: #0c0c16;
   --primary-special-color:#4343ff;
+  --player-primary: rgb(79, 79, 216);
   --gray-text-color:#d8d8d8;
   --card-color: #1b1b3b;
 }

frontend/src/components/Player/Player.css

@@ -45,10 +45,12 @@
 .player-overlay.hide {
   opacity: 0;
   pointer-events: none;
+  background-color: transparent;
 }
 
 .player-overlay.show {
   opacity: 1;
+  background-color: #00000062;
 }
 
 .player-controls-top {
@@ -59,6 +61,39 @@
   align-items: center;
 }
 
+.player-controls-center {
+  gap: 5dvw;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.player-controls-center .control-btn,
+.player-controls-center .play-pause-btn {
+  cursor: pointer;
+  font-size: 3.5em;
+  transition: background-color 0.3s;
+  color: var(--player-primary);
+  border: none !important;
+  min-width: 10%;
+}
+
+.rewind-label-left{
+  font-size: 2rem;
+  font-weight: 600;
+  position: absolute;
+  transform: translate(2rem, 1.5rem);
+  color: white;
+}
+
+.rewind-label-right{
+  font-size: 2rem;
+  font-weight: 600;
+  position: absolute;
+  transform: translate(-4rem, 1.5rem);
+  color: white;
+}
+
 .player-controls-down {
   display: flex;
   flex-direction: row;
@@ -98,8 +133,9 @@
 
 .play-pause-btn,
 .control-btn {
-  color: #4237b8;
+  color: var(--player-primary);
   border-radius: 10px;
+  border: none;
   padding: 10px;
   cursor: pointer;
   font-size: 1em;
@@ -155,7 +191,7 @@
   position: absolute;
   color: white;
   background: rgb(29, 31, 57);
-  border: 1px solid #3640f7;
+  border: 1px solid var(--player-primary);
   border-radius: 10px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
   z-index: 1000;
@@ -174,10 +210,6 @@
   border-radius: 5px;
 }
 
-.context-menu li:hover {
-  background-color: #5755a2;
-}
-
 /********** Range Input Styles **********/
 /*Range Reset*/
 input[type="range"] {
@@ -206,7 +238,7 @@ input[type="range"]::-webkit-slider-thumb {
   appearance: none;
   margin-top: -6px; /* Centers thumb on the track */
   /*custom styles*/
-  background-color: #4237b8;
+  background-color: var(--player-primary);
   height: 1.2rem;
   width: 0.8rem;
   border-radius: 10px;
@@ -224,7 +256,7 @@ input[type="range"]::-moz-range-track {
 input[type="range"]::-moz-range-thumb {
   border: none; /*Removes extra border that FF applies*/
   /*custom styles*/
-  background-color: #4237b8;
+  background-color: var(--player-primary);
   height: 1.2rem;
   width: 0.8rem;
   border-radius: 10px;

frontend/src/components/Player/Player.js

@@ -9,16 +9,26 @@ import {
   faVolumeUp,
   faVolumeMute,
   faExpand,
-  faDownload,
   faArrowLeft,
-  faAngleDoubleRight,
-  faAngleDoubleLeft,
   faCompress,
+  faArrowRotateLeft,
+  faArrowRotateRight,
+  faClosedCaptioning as ccOn,
+  faBackwardStep,
+  faForwardStep,
+  faRectangleList as playlistOn,
 } from "@fortawesome/free-solid-svg-icons";
+import { faClosedCaptioning as ccOff, faRectangleList as playlistOff } from "@fortawesome/free-regular-svg-icons";
+
 import { Spinner } from "@/components/shared/Spinner/Spinner";
 import SeekableProgressBar from "@/components/shared/ProgressBar/SeekableProgressBar";
+import {
+  getFileNameWithoutExtension,
+  formatTime,
+  getStorageKey,
+} from "./utils";
 
-export default function MoviePlayer({ videoUrl, title, type, episode=null }) {
+export default function Player({ videoUrl, title, type, episode = null }) {
   const router = useRouter();
   const videoRef = useRef(null);
   const [isPlaying, setIsPlaying] = useState(false);
@@ -28,31 +38,32 @@ export default function MoviePlayer({ videoUrl, title, type, episode=null }) {
   const [buffer, setBuffer] = useState(0);
   const [isFullscreen, setIsFullscreen] = useState(false);
   const [showControls, setShowControls] = useState(true);
-  const [isBuffering, setIsBuffering] = useState(true); 
+  const [isBuffering, setIsBuffering] = useState(true);
   const overlayTimeout = useRef(null);
   const [contextMenu, setContextMenu] = useState({
     visible: false,
     x: 0,
     y: 0,
   });
-  const playerVersion = "0.0.2 Alpha";
-
-  const getFileNameWithoutExtension = (episodeFile) => {
-    if (!episodeFile) return null;
-  
-    const lastDotIndex = episodeFile.lastIndexOf('.');
-    if (lastDotIndex === -1) return episodeFile; // No dot found, return the original string
-  
-    return episodeFile.substring(0, lastDotIndex);
-  };
+  const playerVersion = "0.0.3 Alpha";
 
   useEffect(() => {
     const videoElement = videoRef.current;
+    const savedProgress = localStorage.getItem(
+      getStorageKey(type, title, episode)
+    );
+    if (savedProgress) {
+      videoElement.currentTime = parseFloat(savedProgress);
+    }
 
     const handlePlay = () => setIsPlaying(true);
     const handlePause = () => setIsPlaying(false);
     const handleTimeUpdate = () => {
       setProgress((videoElement.currentTime / videoElement.duration) * 100);
+      localStorage.setItem(
+        getStorageKey(type, title, episode),
+        videoElement.currentTime.toString()
+      );
       updateBuffer(); // Update buffer on time update
     };
     const handleWaiting = () => setIsBuffering(true);
@@ -192,21 +203,6 @@ export default function MoviePlayer({ videoUrl, title, type, episode=null }) {
     setShowControls(true);
   };
 
-  const formatTime = (seconds) => {
-    if (isNaN(seconds)) {
-      return "00:00:00";
-    }
-    const wholeSeconds = Math.floor(seconds);
-    const hours = Math.floor(wholeSeconds / 3600);
-    const minutes = Math.floor((wholeSeconds % 3600) / 60);
-    const secs = wholeSeconds % 60;
-
-    const formattedHours = String(hours).padStart(2, "0");
-    const formattedMinutes = String(minutes).padStart(2, "0");
-    const formattedSeconds = String(secs).padStart(2, "0");
-    return `${formattedHours}:${formattedMinutes}:${formattedSeconds}`;
-  };
-
   const updateBuffer = () => {
     const videoElement = videoRef.current;
     if (videoElement.buffered.length > 0) {
@@ -228,13 +224,31 @@ export default function MoviePlayer({ videoUrl, title, type, episode=null }) {
       onMouseMove={handleMouseMove}
       onContextMenu={handleContextMenu}
     >
+      <div className="player-indication-overlay"></div>
       <div className={`player-overlay ${showControls ? "show" : "hide"}`}>
         <h2 className="video-title">
           <div className="control-btn player-exit" onClick={handleExitClick}>
             <FontAwesomeIcon icon={faArrowLeft} size="lg" />
           </div>
-          {episode ? getFileNameWithoutExtension(episode):title}
+          {episode ? getFileNameWithoutExtension(episode) : title}
         </h2>
+        <div className="player-controls-center">
+          <button onClick={handleRewind} className="control-btn">
+            <label className="rewind-label-left">10</label>
+            <FontAwesomeIcon icon={faArrowRotateLeft} size="xl" />
+          </button>
+          <button onClick={togglePlayPause} className="play-pause-btn">
+            {isPlaying ? (
+              <FontAwesomeIcon icon={faPause} size="xl" />
+            ) : (
+              <FontAwesomeIcon icon={faPlay} size="xl" />
+            )}
+          </button>
+          <button onClick={handleFastForward} className="control-btn">
+            <FontAwesomeIcon icon={faArrowRotateRight} size="xl" />
+            <label className="rewind-label-right">10</label>
+          </button>
+        </div>
         <div className="controls">
           <div className="player-controls-top">
             <label className="current-time">
@@ -251,21 +265,6 @@ export default function MoviePlayer({ videoUrl, title, type, episode=null }) {
           </div>
           <div className="player-controls-down">
             <div className="player-controls-left">
-              <button onClick={handleRewind} className="control-btn">
-                <FontAwesomeIcon icon={faAngleDoubleLeft} size="xl" />
-              </button>
-              <button onClick={togglePlayPause} className="play-pause-btn">
-                {isPlaying ? (
-                  <FontAwesomeIcon icon={faPause} size="xl" />
-                ) : (
-                  <FontAwesomeIcon icon={faPlay} size="xl" />
-                )}
-              </button>
-              <button onClick={handleFastForward} className="control-btn">
-                <FontAwesomeIcon icon={faAngleDoubleRight} size="xl" />
-              </button>
-            </div>
-            <div className="player-controls-right">
               <button onClick={toggleMute} className="control-btn">
                 <FontAwesomeIcon
                   icon={isMuted ? faVolumeMute : faVolumeUp}
@@ -281,17 +280,44 @@ export default function MoviePlayer({ videoUrl, title, type, episode=null }) {
                 value={volume}
                 onChange={handleVolumeChange}
               />
+              <button onClick={handleRewind} className="previous-btn control-btn">
+                <FontAwesomeIcon icon={faBackwardStep} size="xl" />
+              </button>
+
+              <button onClick={handleFastForward} className="next-btn control-btn">
+                <FontAwesomeIcon icon={faForwardStep} size="xl" />
+              </button>
+              {isPlaying ? (
+                <button className="playlist-btn control-btn">
+                  <FontAwesomeIcon icon={playlistOn} size="xl" />
+                </button>
+              ) : (
+                <button className="playlist-btn control-btn" disabled={true}>
+                  <FontAwesomeIcon icon={playlistOff} size="xl" />
+                </button>
+              )}
+            </div>
+            <div className="player-controls-right">
+              {isPlaying ? (
+                <button className="cc-btn control-btn">
+                  <FontAwesomeIcon icon={ccOn} size="xl" />
+                </button>
+              ) : (
+                <button className="cc-btn control-btn" disabled={true}>
+                  <FontAwesomeIcon icon={ccOff} size="xl" />
+                </button>
+              )}
               <button onClick={toggleFullscreen} className="control-btn">
                 <FontAwesomeIcon
                   icon={isFullscreen ? faCompress : faExpand}
                   size="xl"
                 />
               </button>
-              {videoUrl && (
+              {/* {videoUrl && (
                 <a href={videoUrl} download className="control-btn">
                   <FontAwesomeIcon icon={faDownload} size="xl" />
                 </a>
-              )}
+              )} */}
             </div>
           </div>
         </div>
@@ -303,13 +329,13 @@ export default function MoviePlayer({ videoUrl, title, type, episode=null }) {
         src={videoUrl}
         autoPlay={true}
       >
-        <track
+        {/* <track
           kind="subtitles"
           label="English"
           srcLang="en"
           src="/My.Spy.The.Eternal.City.(2024).WEB.vtt"
           default
-        />
+        /> */}
         Your browser does not support the video tag.
       </video>
       {isBuffering && (
@@ -331,4 +357,4 @@ export default function MoviePlayer({ videoUrl, title, type, episode=null }) {
       )}
     </div>
   );
-}
+}

frontend/src/components/Player/utils.js

@@ -0,0 +1,29 @@
+export const getFileNameWithoutExtension = (episodeFile) => {
+    if (!episodeFile) return null;
+  
+    // Regular expression to match the file extension and common video quality suffixes
+    const regex = /\s*(HDTV-720p|HDTV-1080p|HDTV|720p|1080p|WEB-DL|WEBRip|BluRay|BRRip|DVDRip|CAM|TS|HDRip|BDRip|DVDScr)?(\.[^.]+)?$/i;
+  
+    // Remove the matched part (file extension and video quality suffixes if present)
+    return episodeFile.replace(regex, '').trim();
+  };
+  
+
+export const formatTime = (seconds) => {
+  if (isNaN(seconds)) {
+    return "00:00:00";
+  }
+  const wholeSeconds = Math.floor(seconds);
+  const hours = Math.floor(wholeSeconds / 3600);
+  const minutes = Math.floor((wholeSeconds % 3600) / 60);
+  const secs = wholeSeconds % 60;
+
+  const formattedHours = String(hours).padStart(2, "0");
+  const formattedMinutes = String(minutes).padStart(2, "0");
+  const formattedSeconds = String(secs).padStart(2, "0");
+  return `${formattedHours}:${formattedMinutes}:${formattedSeconds}`;
+};
+
+export const getStorageKey = (type, title, episode) => {
+  return type === "tvshow" ? `${title}-${episode}` : title;
+};

frontend/src/components/shared/ProgressBar/SeekableProgressBar.css

@@ -1,5 +1,5 @@
 .MuiLinearProgress-barColorPrimary{
-    background-color: #4237b8 !important;
+    background-color: var(--player-primary) !important;
 }
 
 .MuiLinearProgress-bar2Buffer{