Spaces:

Hans-Den
/

nexora

Paused

App Files Files Community

ChandimaPrabath commited on Oct 12, 2024

Commit

9977f83

1 Parent(s): 4d0458f

player version 0.0.4 Alpha

Browse files

Files changed (5) hide show

frontend/src/app/layout.js +27 -22
frontend/src/components/Player/Player.css +36 -13
frontend/src/components/Player/Player.js +62 -23
frontend/src/components/shared/ProgressBar/SeekableProgressBar.css +6 -2
frontend/src/components/shared/ProgressBar/SeekableProgressBar.js +1 -1

frontend/src/app/layout.js CHANGED Viewed

@@ -11,36 +11,41 @@ config.autoAddCss = false;
 const inter = Inter({ subsets: ["latin"] });
 export const metadata = {
-  generator: 'Next.js',
-  applicationName: 'Nexora',
-  referrer: 'origin-when-cross-origin',
   keywords: [
-    'Nexora',
-    'Movies',
-    'TV Shows',
-    'Streaming Service',
-    'Online Streaming',
-    'Watch Movies',
-    'Watch TV Shows',
-    'Movie Streaming',
-    'TV Show Streaming',
-    'HD Movies',
-    'HD TV Shows'
   ],
-  authors: [{ name: 'Prince Hans' }],
-  creator: 'Prince Hans',
-  publisher: 'Prince Hans',
-  description: 'Nexora is your go-to platform for streaming the latest movies and TV shows. Enjoy a seamless experience with a vast library of HD content.',
-  charset: 'UTF-8',
-  robots: 'index, follow',
-}
 export default function RootLayout({ children }) {
   return (
     <html lang="en">
       <head>
         <link rel="manifest" href="/webmanifest.json" />
-        <meta name="google-site-verification" content="I0Ek30weBtiN05x5O5wID0tPEPuo7ZCippWfbOWc4yo"/>
       </head>
       <body className={inter.className}>
         <Providers>

 const inter = Inter({ subsets: ["latin"] });
 export const metadata = {
+  generator: "Next.js",
+  applicationName: "Nexora",
+  referrer: "origin-when-cross-origin",
   keywords: [
+    "Nexora",
+    "Movies",
+    "TV Shows",
+    "Streaming Service",
+    "Online Streaming",
+    "Watch Movies",
+    "Watch TV Shows",
+    "Movie Streaming",
+    "TV Show Streaming",
+    "HD Movies",
+    "HD TV Shows",
   ],
+  authors: [{ name: "Prince Hans" }],
+  creator: "Prince Hans",
+  publisher: "Prince Hans",
+  description:
+    "Nexora is your go-to platform for streaming the latest movies and TV shows. Enjoy a seamless experience with a vast library of HD content.",
+  charset: "UTF-8",
+  robots: "index, follow",
+};
 export default function RootLayout({ children }) {
   return (
     <html lang="en">
       <head>
         <link rel="manifest" href="/webmanifest.json" />
+        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@40,400,0,-25" />
+        <meta
+          name="google-site-verification"
+          content="I0Ek30weBtiN05x5O5wID0tPEPuo7ZCippWfbOWc4yo"
+        />
       </head>
       <body className={inter.className}>
         <Providers>

frontend/src/components/Player/Player.css CHANGED Viewed

@@ -14,15 +14,21 @@
 .video-title {
   color: #d5d6d7;
   display: flex;
   align-items: center;
   text-align: left;
-  padding-bottom: 50px;
-  padding: 20px;
   font-size: 1.5em;
   font-weight: bold;
   background-image: linear-gradient(#0e0f19cb 50%, transparent 100%);
 }
 .video-element {
   width: 100%;
   height: auto;
@@ -93,19 +99,30 @@
   min-width: 10%;
 }
 .rewind-label-left {
   font-size: 1.2rem;
-  font-weight: 600;
   position: absolute;
-  transform: translate(1.2rem, 1.1rem);
   color: white;
 }
 .rewind-label-right {
   font-size: 1.2rem;
-  font-weight: 600;
   position: absolute;
-  transform: translate(-2.8rem, 1.1rem);
   color: white;
 }
@@ -151,7 +168,8 @@
   color: var(--player-primary);
   border-radius: 10px;
   border: none;
-  padding: 10px;
   cursor: pointer;
   font-size: 1em;
   transition: background-color 0.3s;
@@ -172,6 +190,10 @@
   margin: 0 5px;
 }
 .progress-bar {
   width: 85%;
   cursor: pointer;
@@ -210,7 +232,7 @@
   border-radius: 10px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
   z-index: 1000;
-  padding: 10px;
 }
 .context-menu ul {
@@ -220,9 +242,10 @@
 }
 .context-menu li {
-  padding: 5px 10px;
   cursor: pointer;
   border-radius: 5px;
 }
 /********** Range Input Styles **********/
@@ -244,17 +267,17 @@ input[type="range"]:focus {
 input[type="range"]::-webkit-slider-runnable-track {
   background-color: #403f4f;
   border-radius: 0.5rem;
-  height: 0.5rem;
 }
 /* slider thumb */
 input[type="range"]::-webkit-slider-thumb {
   -webkit-appearance: none; /* Override default look */
   appearance: none;
-  margin-top: -6px; /* Centers thumb on the track */
   /*custom styles*/
   background-color: var(--player-primary);
-  height: 1.2rem;
   width: 0.8rem;
   border-radius: 10px;
 }
@@ -282,4 +305,4 @@ input[type="range"]::-moz-range-thumb {
   background-color: rgba(0, 0, 0, 0.7);
   font-size: 1.3em;
   line-height: 1.2; /* Adjust line height for spacing */
-}

 .video-title {
   color: #d5d6d7;
   display: flex;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
   align-items: center;
   text-align: left;
+  padding: 15px;
   font-size: 1.5em;
   font-weight: bold;
   background-image: linear-gradient(#0e0f19cb 50%, transparent 100%);
 }
+.player-exit{
+  padding-bottom: 0 !important;
+}
 .video-element {
   width: 100%;
   height: auto;
   min-width: 10%;
 }
+.material-symbols-outlined.large {
+  font-size: 65px;
+}
+.material-symbols-outlined.medium {
+  font-size: 40px;
+}
+.material-symbols-outlined.small {
+  font-size: 25px;
+}
 .rewind-label-left {
   font-size: 1.2rem;
+  font-weight: 400;
   position: absolute;
+  transform: translate(1.5rem, 1.3rem);
   color: white;
 }
 .rewind-label-right {
   font-size: 1.2rem;
+  font-weight: 400;
   position: absolute;
+  transform: translate(-2.8rem, 1.3rem);
   color: white;
 }
   color: var(--player-primary);
   border-radius: 10px;
   border: none;
+  padding: 5px;
+  padding-bottom: 0;
   cursor: pointer;
   font-size: 1em;
   transition: background-color 0.3s;
   margin: 0 5px;
 }
+.volumn-btn{
+  padding-bottom: 0;
+}
 .progress-bar {
   width: 85%;
   cursor: pointer;
   border-radius: 10px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
   z-index: 1000;
+  padding: 5px;
 }
 .context-menu ul {
 }
 .context-menu li {
+  padding: 5px;
   cursor: pointer;
   border-radius: 5px;
+  color: rgb(184, 184, 189);
 }
 /********** Range Input Styles **********/
 input[type="range"]::-webkit-slider-runnable-track {
   background-color: #403f4f;
   border-radius: 0.5rem;
+  height: 0.3rem;
 }
 /* slider thumb */
 input[type="range"]::-webkit-slider-thumb {
   -webkit-appearance: none; /* Override default look */
   appearance: none;
+  margin-top: -5px; /* Centers thumb on the track */
   /*custom styles*/
   background-color: var(--player-primary);
+  height: 1rem;
   width: 0.8rem;
   border-radius: 10px;
 }
   background-color: rgba(0, 0, 0, 0.7);
   font-size: 1.3em;
   line-height: 1.2; /* Adjust line height for spacing */
+}

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

@@ -48,7 +48,7 @@ export default function Player({ videoUrl, title, type, episode = null }) {
     x: 0,
     y: 0,
   });
-  const playerVersion = "0.0.3 Alpha";
   const seekTime = 5;
   useEffect(() => {
@@ -258,9 +258,19 @@ export default function Player({ videoUrl, title, type, episode = null }) {
   };
   const handleVolumeChange = (event) => {
-    const volumeValue = event.target.value;
     setVolume(volumeValue);
-    videoRef.current.volume = volumeValue;
     setIsMuted(volumeValue === 0);
   };
@@ -333,24 +343,31 @@ export default function Player({ videoUrl, title, type, episode = null }) {
       <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}
         </h2>
         <div className="player-controls-center">
           <button onClick={handleRewind} className="control-btn">
             <label className="rewind-label-left">{seekTime}s</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">{seekTime}s</label>
           </button>
         </div>
@@ -370,11 +387,16 @@ export default function Player({ videoUrl, title, type, episode = null }) {
           </div>
           <div className="player-controls-down">
             <div className="player-controls-left">
-              <button onClick={toggleMute} className="control-btn">
-                <FontAwesomeIcon
-                  icon={isMuted ? faVolumeMute : faVolumeUp}
-                  size="xl"
-                />
               </button>
               <input
                 type="range"
@@ -389,40 +411,57 @@ export default function Player({ videoUrl, title, type, episode = null }) {
                 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 && (
                 <a href={videoUrl} download className="control-btn">

     x: 0,
     y: 0,
   });
+  const playerVersion = "0.0.4 Alpha";
   const seekTime = 5;
   useEffect(() => {
   };
   const handleVolumeChange = (event) => {
+    let volumeValue = parseFloat(event.target.value);
+    // Ensure the volume is a finite number between 0 and 1
+    if (!isFinite(volumeValue) || volumeValue < 0) {
+      volumeValue = 0;
+    } else if (volumeValue > 1) {
+      volumeValue = 1;
+    }
     setVolume(volumeValue);
+    if (videoRef.current) {
+      videoRef.current.volume = volumeValue;
+    }
     setIsMuted(volumeValue === 0);
   };
       <div className={`player-overlay ${showControls ? "show" : "hide"}`}>
         <h2 className="video-title">
           <div className="control-btn player-exit" onClick={handleExitClick}>
+            <span className="material-symbols-outlined medium">
+              keyboard_tab_rtl
+            </span>
           </div>
           {episode ? getFileNameWithoutExtension(episode) : title}
         </h2>
         <div className="player-controls-center">
           <button onClick={handleRewind} className="control-btn">
             <label className="rewind-label-left">{seekTime}s</label>
+            <span className="material-symbols-outlined large">rotate_left</span>
           </button>
           <button onClick={togglePlayPause} className="play-pause-btn">
             {isPlaying ? (
+              <span className="material-symbols-outlined large">pause</span>
             ) : (
+              <span className="material-symbols-outlined large">
+                play_arrow
+              </span>
             )}
           </button>
           <button onClick={handleFastForward} className="control-btn">
+            <span className="material-symbols-outlined large">
+              rotate_right
+            </span>
             <label className="rewind-label-right">{seekTime}s</label>
           </button>
         </div>
           </div>
           <div className="player-controls-down">
             <div className="player-controls-left">
+              <button onClick={toggleMute} className="control-btn volumn-btn">
+                {isMuted ? (
+                  <span className="material-symbols-outlined small">
+                    volume_off
+                  </span>
+                ) : (
+                  <span className="material-symbols-outlined small">
+                    volume_up
+                  </span>
+                )}
               </button>
               <input
                 type="range"
                 onClick={handleRewind}
                 className="previous-btn control-btn"
               >
+                <span className="material-symbols-outlined small">
+                  skip_previous
+                </span>
               </button>
               <button
                 onClick={handleFastForward}
                 className="next-btn control-btn"
               >
+                <span className="material-symbols-outlined small">
+                  skip_next
+                </span>
               </button>
               {isPlaying ? (
                 <button className="playlist-btn control-btn">
+                  <span className="material-symbols-outlined small">
+                    featured_play_list
+                  </span>
                 </button>
               ) : (
                 <button className="playlist-btn control-btn" disabled={true}>
+                  <span className="material-symbols-outlined small">
+                    featured_play_list
+                  </span>
                 </button>
               )}
             </div>
             <div className="player-controls-right">
               {isPlaying ? (
                 <button className="cc-btn control-btn">
+                  <span className="material-symbols-outlined small">
+                    closed_caption
+                  </span>
                 </button>
               ) : (
                 <button className="cc-btn control-btn" disabled={true}>
+                  <span className="material-symbols-outlined small">
+                    closed_caption_disabled
+                  </span>
                 </button>
               )}
               <button onClick={toggleFullscreen} className="control-btn">
+                {isFullscreen ? (
+                  <span className="material-symbols-outlined small">
+                    fullscreen_exit
+                  </span>
+                ) : (
+                  <span className="material-symbols-outlined small">
+                    fullscreen
+                  </span>
+                )}
               </button>
               {/* {videoUrl && (
                 <a href={videoUrl} download className="control-btn">

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

@@ -3,10 +3,14 @@
 }
 .MuiLinearProgress-bar2Buffer{
-    background-color: #7970dc !important;
 }
 .MuiLinearProgress-dashedColorPrimary{
-    background-image: radial-gradient(#282469 0%, #6b68a7 16%, transparent 42%) !important;
     margin-top: 2px !important;
 }

 }
 .MuiLinearProgress-bar2Buffer{
+    background-color: #82818c !important;
 }
 .MuiLinearProgress-dashedColorPrimary{
     margin-top: 2px !important;
+    animation: none !important;
+    -webkit-animation: none !important;
+    background-color: #424242 !important;
+    background-image: none !important;
+    top: -2px;
 }

frontend/src/components/shared/ProgressBar/SeekableProgressBar.js CHANGED Viewed

@@ -7,7 +7,7 @@ const SeekableProgressBar = ({
   buffer,
   onSeek,
   width = '100%',
-  height = '10px',
   margin = '10px',
   borderRadios = '10px'
 }) => {

   buffer,
   onSeek,
   width = '100%',
+  height = '6px',
   margin = '10px',
   borderRadios = '10px'
 }) => {