Adds Themed Animation option

Longhorn-Developers · Oct 16, 2024 · c3117a3 · c3117a3
1 parent 656853c
commit c3117a3
Show file tree

Hide file tree

Showing 4 changed files with 124 additions and 94 deletions.
diff --git a/html/index.html b/html/index.html
@@ -131,6 +131,20 @@ <h3 class="w-full font-medium" id="volumeOutput">Volume: 50%</h3>
             </label>
             <h3 class="font-medium">Full Screen</h3>
           </div>
+
+          <div class="size-full flex items-center">
+            <label class="switch">
+              <input id="themedAnims" type="checkbox" />
+              <span class="toggleslider round"></span>
+            </label>
+            <h3
+              class="font-medium"
+              style="cursor: help"
+              title="If you have this enabled and the animation is normal, there is no themed animation at the moment"
+            >
+              Themed Anims &#9432;
+            </h3>
+          </div>
         </div>
 
         <!-- SOCIALS -->

diff --git a/js/content.js b/js/content.js
@@ -1,5 +1,7 @@
 const videoURL = "https://aidenjohnson.dev/Images/Bevo.mp4";
 const fullVideoURL = "https://aidenjohnson.dev/Images/BevoCrop.mp4";
+const themedVideoURL = "https://aidenjohnson.dev/Images/ThemedBevo.mp4";
+
 const name = "Help Me Bevo"; // Name of Extension
 const debug = false;
 var volume = 0.5;
@@ -26,15 +28,18 @@ const videoOverlay = document.getElementById("video-overlay");
 const video = document.getElementById("video");
 const skip = document.getElementById("skip-button");
 
-var enabled = true;
-var assignments = true;
-var quizzes = false;
-var discussions = true;
-var other = true;
-var fullScreen = true;
-var classroom = true;
-var gradescope = true;
-var playing = false;
+var OPTIONS = [
+  (enabled = true),
+  (assignments = true),
+  (quizzes = false),
+  (discussions = true),
+  (other = true),
+  (fullScreen = true),
+  (classroom = true),
+  (gradescope = true),
+  (playing = false),
+  (themedAnims = false),
+];
 
 /**
  * LOAD SETTINGS
@@ -89,6 +94,9 @@ load("playing", null, function (value) {
     save("playing", null);
   }
 });
+load("themedAnims", true, function (value) {
+  themedAnims = value;
+});
 
 /**
  * EVENTS & LISTENERS
@@ -128,11 +136,11 @@ chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
 });
 
 skip.addEventListener("click", () => {
-  video.pause()
+  video.pause();
   video.currentTime = 0;
   videoOverlay.classList.remove("show-bevo");
   setPlaying(false);
-})
+});
 
 /**
  * ATTACHING TO BUTTONS
@@ -176,7 +184,7 @@ const callback = (mutationList, observer) => {
             } else if (isSubmitButton(button, true, "other")) {
               initButton(button, "other");
             } else if (isSubmitButton(button, true, "gradescope")) {
-              initButton(button, "gradescope"); 
+              initButton(button, "gradescope");
             } else if (
               button.parentElement.classList.contains(
                 "discussions-editor-submit"
@@ -224,6 +232,8 @@ function changeValue(data) {
       classroom = value;
     case "gradescope":
       gradescope = value;
+    case "themedAnims":
+      themedAnims = value;
   }
 }
 
@@ -261,7 +271,7 @@ function clamp(value, min, max) {
   return Math.max(min, Math.min(value, max));
 }
 
-function displayBevo(type) {
+async function displayBevo(type) {
   if (!enabled || playing) return;
   if (type == "assignments" && !assignments) return;
   if (type == "quizzes" && !quizzes) return;
@@ -270,7 +280,23 @@ function displayBevo(type) {
 
   video.style.width = fullScreen ? "100%" : "90%";
 
-  video.src = fullScreen ? fullVideoURL : videoURL;
+  var URL = themedVideoURL;
+  if (!themedAnims) {
+    URL = fullScreen ? fullVideoURL : videoURL;
+  } else {
+    const isValid = await isValidVideo(URL);
+
+    if (!isValid) {
+      URL = fullScreen ? fullVideoURL : videoURL;
+      console.log(URL);
+    }
+
+    console.log("Video is " + (isValid ? "valid" : "invalid"));
+  }
+
+  console.log(URL);
+
+  video.src = URL;
   video.pause();
 
   setPlaying(true, type);
@@ -307,6 +333,37 @@ function toggle(value) {
   enabled = value;
 }
 
+function isValidVideo(url) {
+  // First, check if the URL ends with .mp4
+  if (!url.toLowerCase().endsWith(".mp4")) {
+    return false;
+  }
+
+  // Create a video element to check if the video can be loaded
+  const video = document.createElement("video");
+  video.src = url;
+
+  return new Promise((resolve) => {
+    // Add an event listener for video load success
+    video.onloadeddata = () => {
+      resolve(true); // Valid video
+    };
+
+    // Add an event listener for video load failure
+    video.onerror = () => {
+      resolve(false); // Invalid video
+    };
+  });
+}
+
+isValidVideo(videoUrl).then((isValid) => {
+  if (isValid) {
+    console.log("The video is valid.");
+  } else {
+    console.log("The video is not valid.");
+  }
+});
+
 function initButton(button, type) {
   if (button != null) {
     button.addEventListener("click", () => {

diff --git a/js/script.js b/js/script.js
@@ -66,6 +66,7 @@ const otherSlider = document.getElementById("other");
 const fullScreenSlider = document.getElementById("fullScreen");
 const classroomSlider = document.getElementById("classroom");
 const gradescopeSlider = document.getElementById("gradescope");
+const themedSlider = document.getElementById("themedAnims");
 
 const sliderSaveKeys = {
   [assignmentSlider]: "assignments",
@@ -75,6 +76,7 @@ const sliderSaveKeys = {
   [fullScreenSlider]: "fullScreen",
   [classroomSlider]: "classroom",
   [gradescopeSlider]: "gradescope",
+  [themedSlider]: "themedAnims",
 };
 
 const sliders = [
@@ -85,6 +87,7 @@ const sliders = [
   fullScreenSlider,
   classroomSlider,
   gradescopeSlider,
+  themedSlider,
 ];
 
 sliders.forEach((settingSlider) => {
@@ -167,6 +170,16 @@ load("gradescope", function (value) {
 
   updateSlider(gradescopeSlider, value);
 });
+
+load("themedAnims", function (value) {
+  if (value == null) {
+    value = true;
+
+    save("themedAnims", true);
+  }
+
+  updateSlider(themedSlider, value);
+});
 /**
  * OTHER
  */

diff --git a/styles/output.css b/styles/output.css
@@ -590,6 +590,14 @@ video {
   grid-column-start: 2;
 }
 
+.col-start-4 {
+  grid-column-start: 4;
+}
+
+.col-start-3 {
+  grid-column-start: 3;
+}
+
 .col-end-1 {
   grid-column-end: 1;
 }
@@ -610,6 +618,14 @@ video {
   grid-row: span 4 / span 4;
 }
 
+.row-span-5 {
+  grid-row: span 5 / span 5;
+}
+
+.row-span-1 {
+  grid-row: span 1 / span 1;
+}
+
 .mb-0\.5 {
   margin-bottom: 0.125rem;
 }
@@ -688,6 +704,14 @@ video {
   grid-template-rows: repeat(6, minmax(0, 1fr));
 }
 
+.grid-rows-4 {
+  grid-template-rows: repeat(4, minmax(0, 1fr));
+}
+
+.grid-rows-2 {
+  grid-template-rows: repeat(2, minmax(0, 1fr));
+}
+
 .flex-col {
   flex-direction: column;
 }
@@ -779,94 +803,16 @@ video {
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
-.from-orange-500\/80 {
-  --tw-gradient-from: rgb(249 115 22 / 0.8) var(--tw-gradient-from-position);
-  --tw-gradient-to: rgb(249 115 22 / 0) var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
-}
-
-.from-orange-500 {
-  --tw-gradient-from: #f97316 var(--tw-gradient-from-position);
-  --tw-gradient-to: rgb(249 115 22 / 0) var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
-}
-
-.from-orange-500\/10 {
-  --tw-gradient-from: rgb(249 115 22 / 0.1) var(--tw-gradient-from-position);
-  --tw-gradient-to: rgb(249 115 22 / 0) var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
-}
-
-.from-orange-500\/100 {
-  --tw-gradient-from: rgb(249 115 22 / 1) var(--tw-gradient-from-position);
-  --tw-gradient-to: rgb(249 115 22 / 0) var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
-}
-
-.from-orange-500\/\[\.10\] {
-  --tw-gradient-from: rgb(249 115 22 / .10) var(--tw-gradient-from-position);
-  --tw-gradient-to: rgb(249 115 22 / 0) var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
-}
-
-.from-orange-100\/\[\.10\] {
-  --tw-gradient-from: rgb(255 237 213 / .10) var(--tw-gradient-from-position);
-  --tw-gradient-to: rgb(255 237 213 / 0) var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
-}
-
-.from-orange-900\/\[\.10\] {
-  --tw-gradient-from: rgb(124 45 18 / .10) var(--tw-gradient-from-position);
-  --tw-gradient-to: rgb(124 45 18 / 0) var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
-}
-
-.from-orange-500\/25 {
-  --tw-gradient-from: rgb(249 115 22 / 0.25) var(--tw-gradient-from-position);
-  --tw-gradient-to: rgb(249 115 22 / 0) var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
-}
-
-.from-orange-500\/15 {
-  --tw-gradient-from: rgb(249 115 22 / 0.15) var(--tw-gradient-from-position);
-  --tw-gradient-to: rgb(249 115 22 / 0) var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
-}
-
 .to-black {
   --tw-gradient-to: #000 var(--tw-gradient-to-position);
 }
 
-.to-slate-950 {
-  --tw-gradient-to: #020617 var(--tw-gradient-to-position);
-}
-
-.to-orange-500\/50 {
-  --tw-gradient-to: rgb(249 115 22 / 0.5) var(--tw-gradient-to-position);
-}
-
-.to-orange-500\/100 {
-  --tw-gradient-to: rgb(249 115 22 / 1) var(--tw-gradient-to-position);
-}
-
 .to-orange-500\/5 {
   --tw-gradient-to: rgb(249 115 22 / 0.05) var(--tw-gradient-to-position);
 }
 
-.to-orange-500 {
-  --tw-gradient-to: #f97316 var(--tw-gradient-to-position);
-}
-
-.to-orange-500\/15 {
-  --tw-gradient-to: rgb(249 115 22 / 0.15) var(--tw-gradient-to-position);
-}
-
-.to-orange-500\/10 {
-  --tw-gradient-to: rgb(249 115 22 / 0.1) var(--tw-gradient-to-position);
-}
-
-.to-orange-500\/0 {
-  --tw-gradient-to: rgb(249 115 22 / 0) var(--tw-gradient-to-position);
+.to-slate-950 {
+  --tw-gradient-to: #020617 var(--tw-gradient-to-position);
 }
 
 .p-4 {