Spaces:

Hans-Den
/

nexora

Running

App Files Files Community

ChandimaPrabath commited on Sep 23

Commit

6b07118

•

1 Parent(s): 3236c88

google-site-verification

Browse files

Files changed (3) hide show

frontend/src/app/layout.js +2 -1
frontend/src/components/Player/Movie/MoviePlayer.js +57 -30
frontend/src/components/shared/Sidebar/Sidebar.css +1 -0

frontend/src/app/layout.js CHANGED Viewed

@@ -17,7 +17,8 @@ export default function RootLayout({ children }) {
       <body className={inter.className}>
         <Providers>
           <header>
-            <link rel="manifest" href="webmanifest.json" />
             <Header />
           </header>
           <TvShowsProvider>

       <body className={inter.className}>
         <Providers>
           <header>
+            <link rel="manifest" href="/webmanifest.json" />
+            <meta name="google-site-verification" content="I0Ek30weBtiN05x5O5wID0tPEPuo7ZCippWfbOWc4yo"/>
             <Header />
           </header>
           <TvShowsProvider>

frontend/src/components/Player/Movie/MoviePlayer.js CHANGED Viewed

@@ -28,9 +28,13 @@ export default function MoviePlayer({ videoUrl, title }) {
   const [buffer, setBuffer] = useState(0); // Buffer state
   const [isFullscreen, setIsFullscreen] = useState(false);
   const [showControls, setShowControls] = useState(true);
-  const [isBuffering, setIsBuffering] = useState(false);
   const overlayTimeout = useRef(null);
-  const [contextMenu, setContextMenu] = useState({ visible: false, x: 0, y: 0 });
   const playerVersion = "0.0.2 Alpha";
   useEffect(() => {
@@ -45,6 +49,8 @@ export default function MoviePlayer({ videoUrl, title }) {
     const handleWaiting = () => setIsBuffering(true);
     const handlePlaying = () => setIsBuffering(false);
     const handleProgress = () => updateBuffer(); // Update buffer on progress
     videoElement.addEventListener("play", handlePlay);
     videoElement.addEventListener("pause", handlePause);
@@ -52,6 +58,8 @@ export default function MoviePlayer({ videoUrl, title }) {
     videoElement.addEventListener("waiting", handleWaiting);
     videoElement.addEventListener("playing", handlePlaying);
     videoElement.addEventListener("progress", handleProgress); // Listen to progress events
     return () => {
       videoElement.removeEventListener("play", handlePlay);
@@ -60,6 +68,8 @@ export default function MoviePlayer({ videoUrl, title }) {
       videoElement.removeEventListener("waiting", handleWaiting);
       videoElement.removeEventListener("playing", handlePlaying);
       videoElement.removeEventListener("progress", handleProgress); // Clean up progress listener
     };
   }, []);
@@ -164,7 +174,8 @@ export default function MoviePlayer({ videoUrl, title }) {
   };
   const handleSeek = (newProgress) => {
-    videoRef.current.currentTime = (newProgress / 100) * videoRef.current.duration;
     setProgress(newProgress);
   };
@@ -174,23 +185,25 @@ export default function MoviePlayer({ videoUrl, title }) {
   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) {
-      const bufferEnd = videoElement.buffered.end(videoElement.buffered.length - 1);
       const bufferValue = (bufferEnd / videoElement.duration) * 100;
       setBuffer(bufferValue);
     }
@@ -201,26 +214,35 @@ export default function MoviePlayer({ videoUrl, title }) {
   };
   return (
-    <div className="video-player-container" onMouseMove={handleMouseMove} onContextMenu={handleContextMenu}>
       <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>
-           {title}
-         </h2>
         <div className="controls">
           <div className="player-controls-top">
-            <label className="current-time">{formatTime(videoRef?.current?.currentTime)}</label>
-            <SeekableProgressBar progress={progress} buffer={buffer} onSeek={handleSeek} />
-            <label className="duration">{formatTime(videoRef?.current?.duration)}</label>
           </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">
@@ -230,10 +252,7 @@ export default function MoviePlayer({ videoUrl, title }) {
                   <FontAwesomeIcon icon={faPlay} size="xl" />
                 )}
               </button>
-              <button
-                onClick={handleFastForward}
-                className="control-btn"
-              >
                 <FontAwesomeIcon icon={faAngleDoubleRight} size="xl" />
               </button>
             </div>
@@ -254,7 +273,10 @@ export default function MoviePlayer({ videoUrl, title }) {
                 onChange={handleVolumeChange}
               />
               <button onClick={toggleFullscreen} className="control-btn">
-                <FontAwesomeIcon icon={isFullscreen ? faCompress : faExpand} size="xl" />
               </button>
               {videoUrl && (
                 <a href={videoUrl} download className="control-btn">
@@ -269,7 +291,6 @@ export default function MoviePlayer({ videoUrl, title }) {
         ref={videoRef}
         className="video-element"
         controls={false}
-        preload="auto"
         src={videoUrl}
         autoPlay={true}
       >
@@ -282,7 +303,13 @@ export default function MoviePlayer({ videoUrl, title }) {
         />
         Your browser does not support the video tag.
       </video>
-      {isBuffering && <div className="buffering-indicator"><div className="postion-fix"><Spinner/></div></div>}
       {contextMenu.visible && (
         <div
           className="context-menu"
@@ -295,4 +322,4 @@ export default function MoviePlayer({ videoUrl, title }) {
       )}
     </div>
   );
-}

   const [buffer, setBuffer] = useState(0); // Buffer state
   const [isFullscreen, setIsFullscreen] = useState(false);
   const [showControls, setShowControls] = useState(true);
+  const [isBuffering, setIsBuffering] = useState(true); // Initialize to true for initial loading
   const overlayTimeout = useRef(null);
+  const [contextMenu, setContextMenu] = useState({
+    visible: false,
+    x: 0,
+    y: 0,
+  });
   const playerVersion = "0.0.2 Alpha";
   useEffect(() => {
     const handleWaiting = () => setIsBuffering(true);
     const handlePlaying = () => setIsBuffering(false);
     const handleProgress = () => updateBuffer(); // Update buffer on progress
+    const handleLoadedData = () => setIsBuffering(false); // Handle initial data load
+    const handleCanPlayThrough = () => setIsBuffering(false); // Handle when video can play through
     videoElement.addEventListener("play", handlePlay);
     videoElement.addEventListener("pause", handlePause);
     videoElement.addEventListener("waiting", handleWaiting);
     videoElement.addEventListener("playing", handlePlaying);
     videoElement.addEventListener("progress", handleProgress); // Listen to progress events
+    videoElement.addEventListener("loadeddata", handleLoadedData); // Listen for initial load
+    videoElement.addEventListener("canplaythrough", handleCanPlayThrough); // Listen for full preload
     return () => {
       videoElement.removeEventListener("play", handlePlay);
       videoElement.removeEventListener("waiting", handleWaiting);
       videoElement.removeEventListener("playing", handlePlaying);
       videoElement.removeEventListener("progress", handleProgress); // Clean up progress listener
+      videoElement.removeEventListener("loadeddata", handleLoadedData); // Clean up initial load listener
+      videoElement.removeEventListener("canplaythrough", handleCanPlayThrough); // Clean up full preload listener
     };
   }, []);
   };
   const handleSeek = (newProgress) => {
+    videoRef.current.currentTime =
+      (newProgress / 100) * videoRef.current.duration;
     setProgress(newProgress);
   };
   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) {
+      const bufferEnd = videoElement.buffered.end(
+        videoElement.buffered.length - 1
+      );
       const bufferValue = (bufferEnd / videoElement.duration) * 100;
       setBuffer(bufferValue);
     }
   };
   return (
+    <div
+      className="video-player-container"
+      onMouseMove={handleMouseMove}
+      onContextMenu={handleContextMenu}
+    >
       <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>
+          {title}
+        </h2>
         <div className="controls">
           <div className="player-controls-top">
+            <label className="current-time">
+              {formatTime(videoRef?.current?.currentTime)}
+            </label>
+            <SeekableProgressBar
+              progress={progress}
+              buffer={buffer}
+              onSeek={handleSeek}
+            />
+            <label className="duration">
+              {formatTime(videoRef?.current?.duration)}
+            </label>
           </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">
                   <FontAwesomeIcon icon={faPlay} size="xl" />
                 )}
               </button>
+              <button onClick={handleFastForward} className="control-btn">
                 <FontAwesomeIcon icon={faAngleDoubleRight} size="xl" />
               </button>
             </div>
                 onChange={handleVolumeChange}
               />
               <button onClick={toggleFullscreen} className="control-btn">
+                <FontAwesomeIcon
+                  icon={isFullscreen ? faCompress : faExpand}
+                  size="xl"
+                />
               </button>
               {videoUrl && (
                 <a href={videoUrl} download className="control-btn">
         ref={videoRef}
         className="video-element"
         controls={false}
         src={videoUrl}
         autoPlay={true}
       >
         />
         Your browser does not support the video tag.
       </video>
+      {isBuffering && (
+        <div className="buffering-indicator">
+          <div className="postion-fix">
+            <Spinner />
+          </div>
+        </div>
+      )}
       {contextMenu.visible && (
         <div
           className="context-menu"
       )}
     </div>
   );
+}

frontend/src/components/shared/Sidebar/Sidebar.css CHANGED Viewed

@@ -118,6 +118,7 @@
     font-size: 0.875rem;
     font-weight: 500;
     margin-left: 10px;
   }

     font-size: 0.875rem;
     font-weight: 500;
     margin-left: 10px;
+    margin-bottom: 0;
   }