0.0.1 Alpha Player

frontend/src/components/MoviePlayer.css

@@ -129,11 +129,49 @@
   cursor: pointer;
 }
 
+.download-btn{
+  color: white;
+}
+
 .buffering-indicator{
   color: white;
+  background-color: #00000069;
   position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%,-50%);
-  opacity: 1;
-}
+  top: 0;
+  width: 100dvw;
+  height: 100dvh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.buffering-indicator .position-fix{
+  transform: translate(-50%, -50%);
+}
+
+.context-menu {
+  position: absolute;
+  color: white;
+  background: rgb(29, 31, 57);
+  border: 1px solid #3640f7;
+  border-radius: 10px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  z-index: 1000;
+  padding: 10px;
+}
+
+.context-menu ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.context-menu li {
+  padding: 5px 10px;
+  cursor: pointer;
+  border-radius: 5px;
+}
+
+.context-menu li:hover {
+  background-color: #5755a2;
+}

frontend/src/components/MoviePlayer.js

@@ -10,6 +10,7 @@ import {
   faVolumeUp,
   faVolumeMute,
   faExpand,
+  faDownload,
 } from "@fortawesome/free-solid-svg-icons";
 import { Spinner } from "@/components/Spinner";
 
@@ -23,6 +24,8 @@ export default function MoviePlayer({ videoUrl, title }) {
   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.1 Alpha";
 
   useEffect(() => {
     const videoElement = videoRef.current;
@@ -60,6 +63,26 @@ export default function MoviePlayer({ videoUrl, title }) {
     return () => clearTimeout(overlayTimeout.current);
   }, [showControls]);
 
+  const handleContextMenu = (event) => {
+    event.preventDefault();
+    setContextMenu({
+      visible: true,
+      x: event.pageX,
+      y: event.pageY,
+    });
+  };
+
+  const hideContextMenu = () => {
+    setContextMenu({ visible: false, x: 0, y: 0 });
+  };
+
+  useEffect(() => {
+    window.addEventListener("click", hideContextMenu);
+    return () => {
+      window.removeEventListener("click", hideContextMenu);
+    };
+  }, []);
+
   const handleFastForward = () => {
     if (videoRef.current) {
       videoRef.current.currentTime = Math.min(
@@ -156,7 +179,7 @@ export default function MoviePlayer({ videoUrl, title }) {
   };
 
   return (
-    <div className="video-player-container" onMouseMove={handleMouseMove}>
+    <div className="video-player-container" onMouseMove={handleMouseMove} onContextMenu={handleContextMenu}>
       <div className={`player-overlay ${showControls ? "show" : "hide"}`}>
         <h2 className="video-title">{title}</h2>
         <div className="controls">
@@ -213,10 +236,14 @@ export default function MoviePlayer({ videoUrl, title }) {
               <button onClick={toggleFullscreen} className="control-btn">
                 <FontAwesomeIcon icon={faExpand} size="xl" />
               </button>
+              {videoUrl && (
+                <a href={videoUrl} download className="control-btn">
+                  <FontAwesomeIcon icon={faDownload} size="xl" />
+                </a>
+              )}
             </div>
           </div>
         </div>
-        {isBuffering && <div className="buffering-indicator"><Spinner/></div>}
       </div>
       <video
         ref={videoRef}
@@ -233,6 +260,17 @@ 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"
+          style={{ left: contextMenu.x, top: contextMenu.y }}
+        >
+          <ul>
+            <li>Player Version: {playerVersion}</li>
+          </ul>
+        </div>
+      )}
     </div>
   );
 }

frontend/src/components/Spinner.css

@@ -26,7 +26,7 @@
     display: block;
     width: 25%;
     height: 25%;
-    background-color: rgb(93, 101, 171); /* Use a CSS variable for the color */
+    background-color: rgb(74, 86, 194); /* Use a CSS variable for the color */
     border-radius: 100%;
     animation: spinner-dot-before 1.5s infinite ease-in-out both;
 }