movie player 0.1

frontend/package-lock.json

@@ -18,6 +18,7 @@
         "react": "^18",
         "react-dom": "^18",
         "sharp": "^0.33.5",
+        "styled-components": "^6.1.13",
         "video.js": "^8.17.4"
       },
       "devDependencies": {
@@ -59,6 +60,24 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@emotion/is-prop-valid": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.2.tgz",
+      "integrity": "sha512-uNsoYd37AFmaCdXlg6EYD1KaPOaRWRByMCYzbKUX4+hhMfrxdVSelShywL4JVaAeM/eHUOSprYBQls+/neX3pw==",
+      "dependencies": {
+        "@emotion/memoize": "^0.8.1"
+      }
+    },
+    "node_modules/@emotion/memoize": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz",
+      "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA=="
+    },
+    "node_modules/@emotion/unitless": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz",
+      "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ=="
+    },
     "node_modules/@eslint-community/eslint-utils": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
@@ -865,6 +884,11 @@
       "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==",
       "dev": true
     },
+    "node_modules/@types/stylis": {
+      "version": "4.2.5",
+      "resolved": "https://registry.npmjs.org/@types/stylis/-/stylis-4.2.5.tgz",
+      "integrity": "sha512-1Xve+NMN7FWjY14vLoY5tL3BVEQ/n42YLwaqJIPYhotZ9uBHt87VceMwWQpzmdEt2TNXIorIFG+YeCUUW7RInw=="
+    },
     "node_modules/@typescript-eslint/parser": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-7.2.0.tgz",
@@ -1503,6 +1527,14 @@
         "node": ">= 6"
       }
     },
+    "node_modules/camelize": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz",
+      "integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/caniuse-lite": {
       "version": "1.0.30001651",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001651.tgz",
@@ -1656,6 +1688,24 @@
         "node": ">= 8"
       }
     },
+    "node_modules/css-color-keywords": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
+      "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/css-to-react-native": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz",
+      "integrity": "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==",
+      "dependencies": {
+        "camelize": "^1.0.0",
+        "css-color-keywords": "^1.0.0",
+        "postcss-value-parser": "^4.0.2"
+      }
+    },
     "node_modules/cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -1668,6 +1718,11 @@
         "node": ">=4"
       }
     },
+    "node_modules/csstype": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
+    },
     "node_modules/damerau-levenshtein": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
@@ -4389,8 +4444,7 @@
     "node_modules/postcss-value-parser": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
-      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
-      "dev": true
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
     },
     "node_modules/prelude-ls": {
       "version": "1.2.1",
@@ -4737,6 +4791,11 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/shallowequal": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
+      "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
+    },
     "node_modules/sharp": {
       "version": "0.33.5",
       "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.33.5.tgz",
@@ -5077,6 +5136,65 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/styled-components": {
+      "version": "6.1.13",
+      "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.1.13.tgz",
+      "integrity": "sha512-M0+N2xSnAtwcVAQeFEsGWFFxXDftHUD7XrKla06QbpUMmbmtFBMMTcKWvFXtWxuD5qQkB8iU5gk6QASlx2ZRMw==",
+      "dependencies": {
+        "@emotion/is-prop-valid": "1.2.2",
+        "@emotion/unitless": "0.8.1",
+        "@types/stylis": "4.2.5",
+        "css-to-react-native": "3.2.0",
+        "csstype": "3.1.3",
+        "postcss": "8.4.38",
+        "shallowequal": "1.1.0",
+        "stylis": "4.3.2",
+        "tslib": "2.6.2"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/styled-components"
+      },
+      "peerDependencies": {
+        "react": ">= 16.8.0",
+        "react-dom": ">= 16.8.0"
+      }
+    },
+    "node_modules/styled-components/node_modules/postcss": {
+      "version": "8.4.38",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz",
+      "integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "dependencies": {
+        "nanoid": "^3.3.7",
+        "picocolors": "^1.0.0",
+        "source-map-js": "^1.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/styled-components/node_modules/tslib": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
+      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
+    },
     "node_modules/styled-jsx": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.1.tgz",
@@ -5099,6 +5217,11 @@
         }
       }
     },
+    "node_modules/stylis": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.2.tgz",
+      "integrity": "sha512-bhtUjWd/z6ltJiQwg0dUfxEJ+W+jdqQd8TbWLWyeIJHlnsqmGLRFFd8e5mA0AZi/zx90smXRlN66YMTcaSFifg=="
+    },
     "node_modules/sucrase": {
       "version": "3.35.0",
       "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz",

frontend/package.json

@@ -19,6 +19,7 @@
     "react": "^18",
     "react-dom": "^18",
     "sharp": "^0.33.5",
+    "styled-components": "^6.1.13",
     "video.js": "^8.17.4"
   },
   "devDependencies": {

frontend/src/app/tvshows/TvShows.css

@@ -0,0 +1,4 @@
+.page-container{
+    width: 100dvw;
+    height: 100dvh;
+}

frontend/src/app/tvshows/page.js

@@ -1,10 +1,13 @@
+import { Spinner } from "@/components/Spinner";
+import './TvShows.css';
+
 export default function TVShows() {
   return (
     <>
-      <div>
+      <div className="page-container">
         <h1>TV Shows</h1>
         <p className='text-white'>Browse our TV show collection.</p>
-        {/* Add TV show list here */}
+        <Spinner/>
       </div>
     </>
   );

frontend/src/components/MoviePlayer.css

@@ -11,7 +11,7 @@
 }
 
 .video-title {
-  color: #fff;
+  color: #8e91b4;
   text-align: left;
   padding: 20px;
   padding-bottom: 50px;
@@ -49,22 +49,35 @@
   opacity: 1;
 }
 
-.player-controls-down{
+.player-controls-top {
   display: flex;
   flex-direction: row;
-  width: 100dvw;
+  width: 95dvw;
   justify-content: center;
   align-items: center;
 }
 
-.player-controls-top{
+.player-controls-down {
   display: flex;
-  flex-direction: column;
-  width: 100dvw;
-  justify-content: center;
+  flex-direction: row;
+  width: 90dvw;
+
+  justify-content: space-between;
   align-items: center;
 }
 
+.player-controls-left {
+  width: 100%;
+  display: flex;
+  justify-content: left;
+}
+
+.player-controls-right {
+  width: 100%;
+  display: flex;
+  justify-content: right;
+}
+
 .controls {
   display: flex;
   justify-content: center;
@@ -73,14 +86,16 @@
   background-color: rgba(0, 0, 0, 0.7);
   bottom: 0;
   position: relative;
-  width: 100dvw;
   flex-direction: column;
 }
 
+.current-time, .duration{
+  color: white;
+}
+
 .play-pause-btn,
 .control-btn {
-  color: #fff;
-  border: 1px solid #5f59d1;
+  color: #6c66b0;
   border-radius: 10px;
   padding: 10px 15px;
   margin: 0 5px;
@@ -91,11 +106,11 @@
 
 .play-pause-btn:hover,
 .control-btn:hover {
-  background-color: #5f6293;
+  color: #5f6293;
 }
 
 .control-btn:disabled {
-  background-color: #232435;
+  color: #232435;
   cursor: not-allowed;
 }
 
@@ -113,3 +128,12 @@
   width: 100px;
   cursor: pointer;
 }
+
+.buffering-indicator{
+  color: white;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%,-50%);
+  opacity: 1;
+}

frontend/src/components/MoviePlayer.js

@@ -11,6 +11,7 @@ import {
   faVolumeMute,
   faExpand,
 } from "@fortawesome/free-solid-svg-icons";
+import { Spinner } from "@/components/Spinner";
 
 export default function MoviePlayer({ videoUrl, title }) {
   const videoRef = useRef(null);
@@ -20,6 +21,7 @@ export default function MoviePlayer({ videoUrl, title }) {
   const [progress, setProgress] = useState(0);
   const [isFullscreen, setIsFullscreen] = useState(false);
   const [showControls, setShowControls] = useState(true);
+  const [isBuffering, setIsBuffering] = useState(false);
   const overlayTimeout = useRef(null);
 
   useEffect(() => {
@@ -29,15 +31,21 @@ export default function MoviePlayer({ videoUrl, title }) {
     const handlePause = () => setIsPlaying(false);
     const handleTimeUpdate = () =>
       setProgress((videoElement.currentTime / videoElement.duration) * 100);
+    const handleWaiting = () => setIsBuffering(true);
+    const handlePlaying = () => setIsBuffering(false);
 
     videoElement.addEventListener("play", handlePlay);
     videoElement.addEventListener("pause", handlePause);
     videoElement.addEventListener("timeupdate", handleTimeUpdate);
+    videoElement.addEventListener("waiting", handleWaiting);
+    videoElement.addEventListener("playing", handlePlaying);
 
     return () => {
       videoElement.removeEventListener("play", handlePlay);
       videoElement.removeEventListener("pause", handlePause);
       videoElement.removeEventListener("timeupdate", handleTimeUpdate);
+      videoElement.removeEventListener("waiting", handleWaiting);
+      videoElement.removeEventListener("playing", handlePlaying);
     };
   }, []);
 
@@ -48,6 +56,8 @@ export default function MoviePlayer({ videoUrl, title }) {
       }
       overlayTimeout.current = setTimeout(() => setShowControls(false), 3000);
     }
+
+    return () => clearTimeout(overlayTimeout.current);
   }, [showControls]);
 
   const handleFastForward = () => {
@@ -71,8 +81,10 @@ export default function MoviePlayer({ videoUrl, title }) {
   const togglePlayPause = () => {
     if (isPlaying) {
       videoRef.current.pause();
+      setShowControls(true);
     } else {
       videoRef.current.play();
+      setShowControls(false);
     }
   };
 
@@ -105,7 +117,7 @@ export default function MoviePlayer({ videoUrl, title }) {
     const exitFullscreen =
       doc.exitFullscreen ||
       doc.mozCancelFullScreen ||
-      doc.webkitExitFullscreen ||
+      docEl.webkitExitFullscreen ||
       doc.msExitFullscreen;
 
     if (!isFullscreen) {
@@ -128,64 +140,84 @@ export default function MoviePlayer({ videoUrl, title }) {
     setShowControls(true);
   };
 
+  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}`;
+  };
+
   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">
-            {" "}
+            <label className="current-time">{formatTime(videoRef?.current?.currentTime)}</label>
             <input
               type="range"
               className="progress-bar"
               value={progress}
               onChange={handleProgressChange}
             />
+            <label className="duration">{formatTime(videoRef?.current?.duration)}</label>
           </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"
+            <div className="player-controls-left">
+              <button
+                onClick={handleRewind}
+                className="control-btn"
+                disabled={!isPlaying}
+              >
+                <FontAwesomeIcon icon={faFastBackward} 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"
+                disabled={!isPlaying}
+              >
+                <FontAwesomeIcon icon={faFastForward} size="xl" />
+              </button>
+            </div>
+            <div className="player-controls-right">
+              <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>
-            <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>
+              <button onClick={toggleFullscreen} className="control-btn">
+                <FontAwesomeIcon icon={faExpand} size="xl" />
+              </button>
+            </div>
           </div>
         </div>
+        {isBuffering && <div className="buffering-indicator"><Spinner/></div>}
       </div>
-
       <video
         ref={videoRef}
         className="video-element"

frontend/src/components/Spinner.css

@@ -0,0 +1,67 @@
+.spinner-wrapper {
+    height: 5rem;
+    width: 5rem;
+    position: relative;
+    animation: spinner 2.5s infinite linear both;
+}
+
+@keyframes spinner {
+    100% {
+        transform: rotate(-360deg);
+    }
+}
+
+.spinner-dot {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+    animation: spinner-dot 1.5s infinite ease-in-out both;
+    border-radius: 100%;
+}
+
+.spinner-dot:before {
+    content: "";
+    display: block;
+    width: 25%;
+    height: 25%;
+    background-color: rgb(93, 101, 171); /* Use a CSS variable for the color */
+    border-radius: 100%;
+    animation: spinner-dot-before 1.5s infinite ease-in-out both;
+}
+.spinner-dot:nth-child(1) {
+    animation-delay: -1s; /* Adjusted for smooth start */
+}
+.spinner-dot:nth-child(2) {
+    animation-delay: -.9s; /* Slightly less delay */
+}
+.spinner-dot:nth-child(3) {
+    animation-delay: -.7s; /* Medium delay */
+}
+.spinner-dot:nth-child(4) {
+    animation-delay: -0.6s; /* Shorter delay */
+}
+.spinner-dot:nth-child(5) {
+    animation-delay: -0.5s; /* Even shorter delay */
+}
+.spinner-dot:nth-child(6) {
+    animation-delay: -0.3s; /* Quickest delay */
+}
+
+@keyframes spinner-dot {
+    80%,
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+@keyframes spinner-dot-before {
+    50% {
+        transform: scale(0.2);
+    }
+    100%,
+    0% {
+        transform: scale(.6);
+    }
+}

frontend/src/components/Spinner.js

@@ -0,0 +1,16 @@
+// Spinner.js
+import React from "react";
+import "./Spinner.css"; // Import the CSS file
+
+export const Spinner = () => {
+    return (
+        <div className="spinner-wrapper">
+            <div className="spinner-dot" />
+            <div className="spinner-dot" />
+            <div className="spinner-dot" />
+            <div className="spinner-dot" />
+            <div className="spinner-dot" />
+            <div className="spinner-dot" />
+        </div>
+    );
+};