Spaces:

Hans-Den
/

nexora

Running

App Files Files Community

ChandimaPrabath commited on Sep 20

Commit

25dca33

•

1 Parent(s): d0c3311

player test 0.1

Browse files

Files changed (5) hide show

frontend/src/app/layout.js +14 -6
frontend/src/app/player/movie/[title]/MoviePlayerPage.css +9 -0
frontend/src/app/player/movie/[title]/page.js +4 -3
frontend/src/components/MoviePlayer.css +114 -36
frontend/src/components/MoviePlayer.js +148 -13

frontend/src/app/layout.js CHANGED Viewed

@@ -1,3 +1,4 @@
 import { Inter } from "next/font/google";
 import "./globals.css";
 import Sidebar from "@/components/Sidebar";
@@ -5,20 +6,27 @@ import { FilmProvider } from "@/context/FilmContext";
 import { config } from "@fortawesome/fontawesome-svg-core";
 import "@fortawesome/fontawesome-svg-core/styles.css";
 import Header from "@/components/Header";
 config.autoAddCss = false;
 const inter = Inter({ subsets: ["latin"] });
 export default function RootLayout({ children }) {
   return (
     <html lang="en">
       <body className={inter.className}>
         <div className="app-container">
-        <header>
-          <link rel="icon" href="/favicon.ico" sizes="any" />
-          <Sidebar />
-          <Header />
-        </header>
-        <FilmProvider>{children}</FilmProvider>
         </div>
       </body>
     </html>

+'use client';
 import { Inter } from "next/font/google";
 import "./globals.css";
 import Sidebar from "@/components/Sidebar";
 import { config } from "@fortawesome/fontawesome-svg-core";
 import "@fortawesome/fontawesome-svg-core/styles.css";
 import Header from "@/components/Header";
+import { usePathname } from "next/navigation";
 config.autoAddCss = false;
 const inter = Inter({ subsets: ["latin"] });
 export default function RootLayout({ children }) {
+  const pathname = usePathname();
+  const isPlayerPage = pathname.startsWith('/player/movie') || pathname.startsWith('/player/tvshow');
   return (
     <html lang="en">
       <body className={inter.className}>
         <div className="app-container">
+          {!isPlayerPage && (
+            <header>
+              <link rel="icon" href="/favicon.ico" sizes="any" />
+              <Sidebar />
+              <Header />
+            </header>
+          )}
+          <FilmProvider>{children}</FilmProvider>
         </div>
       </body>
     </html>

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

	@@ -0,0 +1,9 @@

+.film-player-container{
+    width: 100dvw;
+    height: 100dvh;
+}
+.app-container{
+    padding: 0;
+    margin: 0;
+}

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

@@ -1,7 +1,8 @@
 "use client";
 import apiClient from "@/api/apiClient";
 import { useEffect, useState } from "react";
-import MoviePlayer from "@/components/moviePlayer";
 export default function FilmPlayer({ params }) {
   const title = decodeURIComponent(params.title);
@@ -89,7 +90,7 @@ export default function FilmPlayer({ params }) {
     <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})
@@ -105,7 +106,7 @@ export default function FilmPlayer({ params }) {
             />
           )}
         </div>
-      )}
       {downloadProgressUrl && downloadProgress ? (
         <div className="download-status">
           <p className="text-yellow-500">

 "use client";
 import apiClient from "@/api/apiClient";
 import { useEffect, useState } from "react";
+import MoviePlayer from "@/components/MoviePlayer";
+import './MoviePlayerPage.css';
 export default function FilmPlayer({ params }) {
   const title = decodeURIComponent(params.title);
     <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})
             />
           )}
         </div>
+      )} */}
       {downloadProgressUrl && downloadProgress ? (
         <div className="download-status">
           <p className="text-yellow-500">

frontend/src/components/MoviePlayer.css CHANGED Viewed

@@ -1,37 +1,115 @@
 .video-player-container {
-    max-width: 900px;
-    margin: auto;
-    background: rgba(0, 0, 0, 0.8);
-    padding: 20px;
-    border-radius: 12px;
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
-  }
-  .video-title {
-    color: white;
-    margin-bottom: 15px;
-    font-size: 24px;
-  }
-  .controls {
-    display: flex;
-    justify-content: space-between;
-    margin-top: 10px;
-  }
-  .play-pause-btn, .control-btn {
-    padding: 10px 15px;
-    cursor: pointer;
-    background: #e50914;
-    color: white;
-    border: none;
-    border-radius: 5px;
-    font-size: 16px;
-    transition: background 0.3s;
-  }
-  .play-pause-btn:hover, .control-btn:hover {
-    background: #f40612;
-  }
-  .video-element {
-    width: 100%;
-    height: auto;
-    border-radius: 8px;
-    outline: none;
-  }

 .video-player-container {
+  position: relative;
+  max-width: 100dvw;
+  height: 100%;
+  margin: auto;
+  background-color: #000;
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+  display: flex;
+}
+.video-title {
+  color: #fff;
+  text-align: left;
+  padding: 20px;
+  padding-bottom: 50px;
+  font-size: 1.5em;
+  font-weight: bold;
+  background-image: linear-gradient(#0e0f19 60%, transparent 100%);
+}
+.video-element {
+  width: 100%;
+  height: auto;
+  display: block;
+}
+.player-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  background-color: rgba(0, 0, 0, 0.5);
+  transition: opacity 0.5s;
+  z-index: 100;
+}
+.player-overlay.hide {
+  opacity: 0;
+  pointer-events: none;
+}
+.player-overlay.show {
+  opacity: 1;
+}
+.player-controls-down{
+  display: flex;
+  flex-direction: row;
+  width: 100dvw;
+  justify-content: center;
+  align-items: center;
+}
+.player-controls-top{
+  display: flex;
+  flex-direction: column;
+  width: 100dvw;
+  justify-content: center;
+  align-items: center;
+}
+.controls {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 10px;
+  background-color: rgba(0, 0, 0, 0.7);
+  bottom: 0;
+  position: relative;
+  width: 100dvw;
+  flex-direction: column;
+}
+.play-pause-btn,
+.control-btn {
+  color: #fff;
+  border: 1px solid #5f59d1;
+  border-radius: 10px;
+  padding: 10px 15px;
+  margin: 0 5px;
+  cursor: pointer;
+  font-size: 1em;
+  transition: background-color 0.3s;
+}
+.play-pause-btn:hover,
+.control-btn:hover {
+  background-color: #5f6293;
+}
+.control-btn:disabled {
+  background-color: #232435;
+  cursor: not-allowed;
+}
+.progress-bar,
+.volume-control {
+  margin: 0 5px;
+}
+.progress-bar {
+  width: 85%;
+  cursor: pointer;
+}
+.volume-control {
+  width: 100px;
+  cursor: pointer;
+}

frontend/src/components/MoviePlayer.js CHANGED Viewed

@@ -1,35 +1,70 @@
 "use client";
 import { useEffect, useRef, useState } from "react";
-import './MoviePlayer.css';
 export default function MoviePlayer({ videoUrl, title }) {
   const videoRef = useRef(null);
   const [isPlaying, setIsPlaying] = useState(false);
   useEffect(() => {
     const videoElement = videoRef.current;
     const handlePlay = () => setIsPlaying(true);
     const handlePause = () => setIsPlaying(false);
     videoElement.addEventListener("play", handlePlay);
     videoElement.addEventListener("pause", handlePause);
     return () => {
       videoElement.removeEventListener("play", handlePlay);
       videoElement.removeEventListener("pause", handlePause);
     };
   }, []);
   const handleFastForward = () => {
     if (videoRef.current) {
-      videoRef.current.currentTime = Math.min(videoRef.current.duration, videoRef.current.currentTime + 10);
     }
   };
   const handleRewind = () => {
     if (videoRef.current) {
-      videoRef.current.currentTime = Math.max(0, videoRef.current.currentTime - 10);
     }
   };
@@ -41,9 +76,116 @@ export default function MoviePlayer({ videoUrl, title }) {
     }
   };
   return (
-    <div className="video-player-container">
-      <h2 className="video-title">{title}</h2>
       <video
         ref={videoRef}
         className="video-element"
@@ -54,18 +196,11 @@ export default function MoviePlayer({ videoUrl, title }) {
         <track
           kind="subtitles"
           label="English"
-          srLang="en"
           src="path/to/your/subtitles.vtt" // Replace with actual subtitles URL
         />
         Your browser does not support the video tag.
       </video>
-      <div className="controls">
-        <button onClick={togglePlayPause} className="play-pause-btn">
-          {isPlaying ? '❚❚ Pause' : '► Play'}
-        </button>
-        <button onClick={handleRewind} className="control-btn" disabled={!isPlaying}>⏪ 10s</button>
-        <button onClick={handleFastForward} className="control-btn" disabled={!isPlaying}>⏩ 10s</button>
-      </div>
     </div>
   );
 }

 "use client";
 import { useEffect, useRef, useState } from "react";
+import "./MoviePlayer.css";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {
+  faFastBackward,
+  faFastForward,
+  faPause,
+  faPlay,
+  faVolumeUp,
+  faVolumeMute,
+  faExpand,
+} from "@fortawesome/free-solid-svg-icons";
 export default function MoviePlayer({ videoUrl, title }) {
   const videoRef = useRef(null);
   const [isPlaying, setIsPlaying] = useState(false);
+  const [volume, setVolume] = useState(1);
+  const [isMuted, setIsMuted] = useState(false);
+  const [progress, setProgress] = useState(0);
+  const [isFullscreen, setIsFullscreen] = useState(false);
+  const [showControls, setShowControls] = useState(true);
+  const overlayTimeout = useRef(null);
   useEffect(() => {
     const videoElement = videoRef.current;
     const handlePlay = () => setIsPlaying(true);
     const handlePause = () => setIsPlaying(false);
+    const handleTimeUpdate = () =>
+      setProgress((videoElement.currentTime / videoElement.duration) * 100);
     videoElement.addEventListener("play", handlePlay);
     videoElement.addEventListener("pause", handlePause);
+    videoElement.addEventListener("timeupdate", handleTimeUpdate);
     return () => {
       videoElement.removeEventListener("play", handlePlay);
       videoElement.removeEventListener("pause", handlePause);
+      videoElement.removeEventListener("timeupdate", handleTimeUpdate);
     };
   }, []);
+  useEffect(() => {
+    if (showControls) {
+      if (overlayTimeout.current) {
+        clearTimeout(overlayTimeout.current);
+      }
+      overlayTimeout.current = setTimeout(() => setShowControls(false), 3000);
+    }
+  }, [showControls]);
   const handleFastForward = () => {
     if (videoRef.current) {
+      videoRef.current.currentTime = Math.min(
+        videoRef.current.duration,
+        videoRef.current.currentTime + 10
+      );
     }
   };
   const handleRewind = () => {
     if (videoRef.current) {
+      videoRef.current.currentTime = Math.max(
+        0,
+        videoRef.current.currentTime - 10
+      );
     }
   };
     }
   };
+  const handleVolumeChange = (event) => {
+    const volumeValue = event.target.value;
+    setVolume(volumeValue);
+    videoRef.current.volume = volumeValue;
+    setIsMuted(volumeValue === 0);
+  };
+  const toggleMute = () => {
+    if (isMuted) {
+      videoRef.current.volume = volume;
+      setIsMuted(false);
+    } else {
+      videoRef.current.volume = 0;
+      setIsMuted(true);
+    }
+  };
+  const toggleFullscreen = () => {
+    const doc = window.document;
+    const docEl = doc.documentElement;
+    const requestFullscreen =
+      docEl.requestFullscreen ||
+      docEl.mozRequestFullScreen ||
+      docEl.webkitRequestFullscreen ||
+      docEl.msRequestFullscreen;
+    const exitFullscreen =
+      doc.exitFullscreen ||
+      doc.mozCancelFullScreen ||
+      doc.webkitExitFullscreen ||
+      doc.msExitFullscreen;
+    if (!isFullscreen) {
+      requestFullscreen.call(docEl);
+    } else {
+      exitFullscreen.call(doc);
+    }
+    setIsFullscreen(!isFullscreen);
+  };
+  const handleProgressChange = (event) => {
+    const progressValue = event.target.value;
+    videoRef.current.currentTime =
+      (progressValue / 100) * videoRef.current.duration;
+    setProgress(progressValue);
+  };
+  const handleMouseMove = () => {
+    setShowControls(true);
+  };
   return (
+    <div className="video-player-container" onMouseMove={handleMouseMove}>
+      <div className={`player-overlay ${showControls ? "show" : "hide"}`}>
+        <h2 className="video-title">{title}</h2>
+        <div className="controls">
+          <div className="player-controls-top">
+            {" "}
+            <input
+              type="range"
+              className="progress-bar"
+              value={progress}
+              onChange={handleProgressChange}
+            />
+          </div>
+          <div className="player-controls-down">
+            <button onClick={togglePlayPause} className="play-pause-btn">
+              {isPlaying ? (
+                <FontAwesomeIcon icon={faPause} size="xl" />
+              ) : (
+                <FontAwesomeIcon icon={faPlay} size="xl" />
+              )}
+            </button>
+            <button
+              onClick={handleRewind}
+              className="control-btn"
+              disabled={!isPlaying}
+            >
+              <FontAwesomeIcon icon={faFastBackward} size="xl" />
+            </button>
+            <button
+              onClick={handleFastForward}
+              className="control-btn"
+              disabled={!isPlaying}
+            >
+              <FontAwesomeIcon icon={faFastForward} size="xl" />
+            </button>
+            <button onClick={toggleMute} className="control-btn">
+              <FontAwesomeIcon
+                icon={isMuted ? faVolumeMute : faVolumeUp}
+                size="xl"
+              />
+            </button>
+            <input
+              type="range"
+              className="volume-control"
+              min="0"
+              max="1"
+              step="0.01"
+              value={volume}
+              onChange={handleVolumeChange}
+            />
+            <button onClick={toggleFullscreen} className="control-btn">
+              <FontAwesomeIcon icon={faExpand} size="xl" />
+            </button>
+          </div>
+        </div>
+      </div>
       <video
         ref={videoRef}
         className="video-element"
         <track
           kind="subtitles"
           label="English"
+          srcLang="en"
           src="path/to/your/subtitles.vtt" // Replace with actual subtitles URL
         />
         Your browser does not support the video tag.
       </video>
     </div>
   );
 }