finished First Blood video thing (good riddance)

fribyte-code · Feb 22, 2024 · 1f9eb37 · 1f9eb37
1 parent 99417dd
commit 1f9eb37
Show file tree

Hide file tree

Showing 5 changed files with 99 additions and 25 deletions.
diff --git a/frontend/src/components/heltsikkerComponents/firstBloodVideo.module.css b/frontend/src/components/heltsikkerComponents/firstBloodVideo.module.css
@@ -9,9 +9,10 @@
 .videoContainer {
   position: relative;
   width: 100%; /* Adjust based on your video size */
+
 }
 .teamName {
-  font-size: 1.5rem;
+  font-size: 5vh;
   position: absolute;
   top: 50%;
   left: 50%;
@@ -21,11 +22,38 @@
   display: none;
   font-family: "Bungee", sans-serif;
   text-shadow:
-    4px 4px 0px #000,
-    8px 8px 0px rgba(0, 0, 0, 0.5);
+    0.4vh 0.4vh 0.4vh #000,
+    0.8vh 0.8vh 0.8vh rgba(0, 0, 0, 0.5);
 
   animation: comeInFromBehind 1s ease-in forwards; /* Adjust duration and timing function as needed */
 }
 video {
   width: 100%;
+
+  border-radius: 0.5rem;
+}
+.backDrop {
+  background-color: rgba(0, 0, 0, 0.5);
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  backdrop-filter: blur(2px);
+  z-index: 90;
 }
+.dialog {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  max-width: 100%;
+  transform: translate(-50%, -50%);
+  max-height: 80%;
+  margin: 0;
+  overflow-y: auto;
+  background-color: var(--bgColor);
+  z-index: 100;
+  border-radius: 0.5rem;
+  padding: 2rem;
+}
+
diff --git a/frontend/src/components/heltsikkerComponents/firstBloodVideo.tsx b/frontend/src/components/heltsikkerComponents/firstBloodVideo.tsx
@@ -1,8 +1,12 @@
 import { SyntheticEvent, useEffect, useRef, useState } from "react";
 import style from "./firstBloodVideo.module.css";
-const FirstBloodVideo: React.FC = (props) => {
+
+export interface FirstBloodVideoProps {
+  teamId: string;
+  onClose: () => void;
+}
+const FirstBloodVideo: React.FC<FirstBloodVideoProps> = (props) => {
   const video = useRef(null);
-  const [teamName, setTeamName] = useState("LOOOL");
   const teamNameDivRef = useRef<HTMLDivElement>(null);
   const videOnTimeUpdate = (e: SyntheticEvent<HTMLVideoElement, Event>) => {
     let video = e.currentTarget;
@@ -48,20 +52,38 @@ const FirstBloodVideo: React.FC = (props) => {
       teamNameDiv.style.display = "none"; // Hide the text
     }
   };
-
+  const handleKeyPress = (event: React.KeyboardEvent) => {
+    if (event.key == "Escape") {
+      props.onClose();
+    }
+  };
   return (
     <>
-      <div className={style.videoContainer}>
-        <video autoPlay onTimeUpdate={(e) => videOnTimeUpdate(e)} ref={video}>
-          <source
-            src="https://files.fribyte.no/heltsikker/video.mp4"
-            type="video/mp4"
-          />
-        </video>
-        <div ref={teamNameDivRef} className={style.teamName}>
-          {teamName}
+      <dialog
+        open
+        key={props.teamId}
+        className={style.dialog}
+        onKeyUp={handleKeyPress}
+        autoFocus
+      >
+        <div className={style.videoContainer}>
+          <video
+            autoPlay
+            onTimeUpdate={(e) => videOnTimeUpdate(e)}
+            ref={video}
+            onEnded={() => props.onClose()}
+          >
+            <source
+              src="https://files.fribyte.no/heltsikker/video.mp4"
+              type="video/mp4"
+            />
+          </video>
+          <div ref={teamNameDivRef} className={style.teamName}>
+            {props.teamId}
+          </div>
         </div>
-      </div>
+      </dialog>
+      <div onClick={() => props.onClose()} className={style.backDrop} />
     </>
   );
 };

diff --git a/frontend/src/components/toasterSection.tsx b/frontend/src/components/toasterSection.tsx
@@ -1,4 +1,4 @@
-import { useContext, useEffect } from "react";
+import { ReactNode, useContext, useEffect, useState } from "react";
 import { useFirstBloodNotification } from "../hooks/useFirstBloodNotification";
 import { Bounce, ToastContainer, toast } from "react-toastify";
 import { ThemeContext, ToastContext } from "../App";
@@ -10,6 +10,8 @@ function ToasterSection() {
   const { message: toastMessage, toast: setMessage } = useContext(ToastContext);
   const { theme } = useContext(ThemeContext);
   const location = useLocation();
+  const [toRenderVideo, setToRenderVideo] = useState<ReactNode | null>(null);
+
   useEffect(() => {
     if (toastMessage == null) {
       return;
@@ -24,7 +26,12 @@ function ToasterSection() {
         config.APP_COLOR_SCHEME == "heltsikker" &&
         location.pathname == "/leaderboard"
       ) {
-        setMessage(<FirstBloodVideo />);
+        setToRenderVideo(
+          <FirstBloodVideo
+            teamId={firstBloodNotification.teamId ?? ""}
+            onClose={() => setToRenderVideo(null)}
+          />,
+        );
       } else {
         setMessage(
           `🩸First Blood: ${firstBloodNotification.task.name} solved by ${firstBloodNotification.teamId}🩸`,
@@ -48,6 +55,7 @@ function ToasterSection() {
         theme={theme}
         transition={Bounce}
       />
+      {toRenderVideo}
     </div>
   );
 }

diff --git a/frontend/src/pages/Admin.tsx b/frontend/src/pages/Admin.tsx
@@ -5,12 +5,13 @@ import {
   useAdminAllCategories,
   useAdminAllTasks,
 } from "../api/backendComponents";
-import { useEffect, useState } from "react";
+import { ReactNode, useEffect, useState } from "react";
 import { CtfTask, CtfTaskWriteModel } from "../api/backendSchemas";
 import { useNavigate } from "react-router-dom";
 import AdminTask from "../components/adminTask";
 import DateSelector from "../components/dateSelector";
 import style from "./Admin.module.css";
+import FirstBloodVideo from "../components/heltsikkerComponents/firstBloodVideo";
 export default function Admin() {
   const navigate = useNavigate();
   const {
@@ -118,6 +119,9 @@ export default function Admin() {
   }
   (window as any).batchImportTasks = batchImportTasks;
 
+  // This is to test volume and stuff of the video for the large display they plan to use :)
+  const [showFirstBloodVideoTest, setShowFirstBloodVideoTest] =
+    useState<ReactNode | null>(null);
   return (
     <Layout>
       {isLoading ? (
@@ -297,7 +301,24 @@ export default function Admin() {
               onClose={() => setCurrentEditingTask(null)}
             />
           )}
+
+           <h2 style={{ marginBottom: "1" }}>Test the First Blood Video:</h2>
+          <button
+            className="button solid"
+            onClick={() =>
+              setShowFirstBloodVideoTest(
+                <FirstBloodVideo
+                  teamId="SOME_NAME_that-is-super-long"
+                  onClose={() => setShowFirstBloodVideoTest(null)}
+                />,
+              )
+            }
+          >
+            Test First Blood!
+          </button>
+          {showFirstBloodVideoTest}
         </div>
+
       )}
     </Layout>
   );

diff --git a/frontend/src/pages/Leaderboard.tsx b/frontend/src/pages/Leaderboard.tsx
@@ -52,14 +52,9 @@ export default function Leaderboard() {
       },
     ]);
   }, [leaderboard]);
-  const { toast } = useContext(ToastContext);
   return (
     <Layout>
-      <button
-        onClick={() => {
-          toast(<FirstBloodVideo />);
-        }}
-      ></button>
+
       <div>
         <h1>Live leaderboard</h1>
         <br />