player patch

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

@@ -137,6 +137,7 @@ export default function FilmPlayer({ params }) {
             videoUrl={videoUrl}
             title={`${metadata.title} (${metadata.year})`}
             type="movie"
+            videoThumbnail={metadata.image}
           />
         )
       )}

frontend/src/app/player/tvshow/[title]/[season]/[episode]/page.js

@@ -140,6 +140,7 @@ export default function FilmPlayer({ params }) {
             title={`${metadata.title}`}
             type="tvshow"
             episode={episode}
+            videoThumbnail={metadata.image}
           />
         )
       )}

frontend/src/components/Player/Player.css

@@ -21,11 +21,19 @@
   text-align: left;
   padding: 15px;
   font-size: 1.5em;
-  font-weight: bold;
+
   background-image: linear-gradient(#0e0f19cb 50%, transparent 100%);
 }
 
-.player-exit{
+.video-title-text {
+  font-weight: 100;
+  font-size:  1.2rem;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.player-exit {
   padding-bottom: 0 !important;
 }
 
@@ -177,7 +185,7 @@
 
 .play-pause-btn:hover,
 .control-btn:hover {
-  color: #5f6293;
+  scale: 1.1;
 }
 
 .control-btn:disabled {
@@ -185,12 +193,13 @@
   cursor: not-allowed;
 }
 
+
 .progress-bar,
 .volume-control {
   margin: 0 5px;
 }
 
-.volumn-btn{
+.volumn-btn {
   padding-bottom: 0;
 }
 
@@ -305,4 +314,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 */
-}
+}

frontend/src/components/Player/Player.js

@@ -2,27 +2,6 @@
 import { useEffect, useRef, useState } from "react";
 import { useRouter } from "next/navigation";
 import "./Player.css";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import {
-  faPause,
-  faPlay,
-  faVolumeUp,
-  faVolumeMute,
-  faExpand,
-  faArrowLeft,
-  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 {
@@ -31,7 +10,7 @@ import {
   getStorageKey,
 } from "./utils";
 
-export default function Player({ videoUrl, title, type, episode = null }) {
+export default function Player({ videoUrl, title, type, episode = null, videoThumbnail=null }) {
   const router = useRouter();
   const videoRef = useRef(null);
   const [isPlaying, setIsPlaying] = useState(false);
@@ -51,6 +30,34 @@ export default function Player({ videoUrl, title, type, episode = null }) {
   const playerVersion = "0.0.4 Alpha";
   const seekTime = 5;
 
+  useEffect(() => {
+    if ('mediaSession' in navigator) {
+      navigator.mediaSession.metadata = new MediaMetadata({
+        title: episode? episode: title,
+        artwork: [
+          { src: videoThumbnail, sizes: '680x1000', type: 'image/png' }
+        ]
+      });
+
+      navigator.mediaSession.setActionHandler('play', () => {
+        videoRef.current.play();
+      });
+      navigator.mediaSession.setActionHandler('pause', () => {
+        videoRef.current.pause();
+      });
+      navigator.mediaSession.setActionHandler('seekbackward', (details) => {
+        videoRef.current.currentTime = Math.max(videoRef.current.currentTime - (details.seekOffset || 10), 0);
+      });
+      navigator.mediaSession.setActionHandler('seekforward', (details) => {
+        videoRef.current.currentTime = Math.min(videoRef.current.currentTime + (details.seekOffset || 10), videoRef.current.duration);
+      });
+      navigator.mediaSession.setActionHandler('stop', () => {
+        videoRef.current.pause();
+        videoRef.current.currentTime = 0;
+      });
+    }
+  }, [title, videoThumbnail]);
+
   useEffect(() => {
     const videoElement = videoRef.current;
     const savedData = localStorage.getItem(getStorageKey(type, title, episode));
@@ -341,15 +348,16 @@ export default function Player({ videoUrl, title, type, episode = null }) {
     >
       <div className="player-indication-overlay"></div>
       <div className={`player-overlay ${showControls ? "show" : "hide"}`}>
-        <h2 className="video-title">
+        <div 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>
+          <label className="video-title-text">
+            {episode ? getFileNameWithoutExtension(episode) : title}
+          </label>
+        </div>
         <div className="player-controls-center">
           <button onClick={handleRewind} className="control-btn">
             <label className="rewind-label-left">{seekTime}s</label>

frontend/src/components/Player/utils.js

@@ -11,14 +11,14 @@ export const getFileNameWithoutExtension = (episodeFile) => {
 
 export const formatTime = (seconds) => {
   if (isNaN(seconds)) {
-    return "00:00:00";
+    return "0: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 formattedHours = String(hours).padStart(1, "0");
   const formattedMinutes = String(minutes).padStart(2, "0");
   const formattedSeconds = String(secs).padStart(2, "0");
   return `${formattedHours}:${formattedMinutes}:${formattedSeconds}`;