fixed some bugs

psychoactive-studios · Dec 13, 2024 · 44778bc · 44778bc
1 parent 3d059d9
commit 44778bc
Show file tree

Hide file tree

Showing 5 changed files with 101 additions and 105 deletions.
diff --git a/app.js b/app.js
@@ -7,7 +7,7 @@ import audioImplementation from "./js/global/audio";
 import { showreelHome, showreelNav } from "./js/global/showreel";
 import { stopCmdClick } from "./js/global/bugFixes";
 import {
-  responsiveHomeVideos,
+  setAllHomepageVideoSources,
   responsiveNavShowreel,
   lazyLoadHomeVideos,
 } from "./js/global/dynamicVideos";
@@ -21,7 +21,7 @@ const onReady = () => {
   const audio = audioImplementation(homePage); // adds music, ui-sounds and mute-lottie functionality
   responsiveNavShowreel();
   if (homePage) {
-    responsiveHomeVideos();
+    setAllHomepageVideoSources();
     lazyLoadHomeVideos();
     showreelHome(audio); // code for homepage showreel video
   }

diff --git a/dist/app.js b/dist/app.js
diff --git a/dist/app.js.map b/dist/app.js.map
diff --git a/js/global/audio.js b/js/global/audio.js
@@ -1,6 +1,6 @@
 export default function audioImplementation(homePage) {
   const showreelHome = document.querySelector("#showreel_video");
-  const showreelNav = document.querySelector("#showreelNavXL");
+  const showreelNav = document.querySelector("#showreelNavXL_video");
 
   // MOBILE CHECK
   window.mobileCheck = function () {

diff --git a/js/global/dynamicVideos.js b/js/global/dynamicVideos.js
@@ -1,75 +1,60 @@
-export function responsiveHomeVideos() {
-  // dynamically set video sources based on screen size
-  function setVideoSource(video) {
-    const videoElem = document.getElementById(`${video}_video`);
-    let videoSrc = "";
+// dynamically set video sources based on screen size
+function setVideoSource(video) {
+  const videoElem = document.getElementById(`${video}_video`);
+  let videoSrc = "";
 
-    if (window.innerWidth <= 560) {
-      videoSrc = getURL(video, "mobile");
-    } else if (window.innerWidth <= 1680) {
-      videoSrc = getURL(video, "laptop");
-    } else {
-      videoSrc = getURL(video, "desktop");
-    }
+  if (window.innerWidth <= 560) {
+    videoSrc = getURL(video, "mobile");
+  } else if (window.innerWidth <= 1680) {
+    videoSrc = getURL(video, "laptop");
+  } else {
+    videoSrc = getURL(video, "desktop");
+  }
 
-    // Check if the current source is already set
-    if (videoElem.getAttribute("src") !== videoSrc) {
-      videoElem.src = videoSrc;
-    }
+  // Check if the current source is already set
+  if (videoElem.getAttribute("src") !== videoSrc) {
+    videoElem.src = videoSrc;
+  }
 
-    // Preload only if the video is already in the viewport
-    const isInViewport = (elem) => {
-      const rect = elem.getBoundingClientRect();
-      return (
-        rect.top <
-          (window.innerHeight || document.documentElement.clientHeight) &&
-        rect.bottom > 0 &&
-        rect.left <
-          (window.innerWidth || document.documentElement.clientWidth) &&
-        rect.right > 0
-      );
-    };
+  // Preload only if the video is already in the viewport
+  const isInViewport = (elem) => {
+    const rect = elem.getBoundingClientRect();
+    return (
+      rect.top <
+        (window.innerHeight || document.documentElement.clientHeight) &&
+      rect.bottom > 0 &&
+      rect.left < (window.innerWidth || document.documentElement.clientWidth) &&
+      rect.right > 0
+    );
+  };
 
-    if (isInViewport(videoElem) && videoElem.paused) {
-      videoElem.play().catch((error) => {
-        console.warn(`Failed to autoplay video: ${video}`, error);
-      });
-    }
+  if (isInViewport(videoElem) && videoElem.paused) {
+    videoElem.play().catch((error) => {
+      console.warn(`Failed to autoplay video: ${video}`, error);
+    });
   }
+}
 
-  function getURL(video, device) {
-    let url;
-    if (video.includes("Nav")) {
-      url = `https://psychoactive-website-media.sfo3.cdn.digitaloceanspaces.com/Responsive-Videos/showreel_${device}.mp4`;
-    } else {
-      url = `https://psychoactive-website-media.sfo3.cdn.digitaloceanspaces.com/Responsive-Videos/${video}_${device}.mp4`;
-    }
-    return url;
+// call to set all nav showreel video sources
+export function responsiveNavShowreel() {
+  function satNavSources() {
+    setVideoSource("showreelNav");
+    setVideoSource("showreelNavXL");
   }
+  satNavSources();
+  debounceWindowResizedListener(satNavSources);
+}
 
-  // Initial call to set the video source
+// call to set all homepage video sources
+export function setAllHomepageVideoSources() {
   function setAllVideoSources() {
     setVideoSource("oasis");
     setVideoSource("showreel");
     setVideoSource("sgf");
     setVideoSource("metamorphoses");
   }
-
   setAllVideoSources();
   debounceWindowResizedListener(setAllVideoSources);
-
-  return { setVideoSource };
-}
-
-export function responsiveNavShowreel() {
-  const { setVideoSource } = responsiveHomeVideos();
-  function satNavSources() {
-    setVideoSource("showreelNav");
-    setVideoSource("showreelNavXL");
-  }
-
-  satNavSources();
-  debounceWindowResizedListener(satNavSources);
 }
 
 // Main function to lazy load home videos
@@ -96,13 +81,13 @@ export function lazyLoadHomeVideos() {
   );
 }
 
-// Utility function to set up IntersectionObserver for lazy loading videos
+// UTILITY FUNCTIONS
+
+// set up IntersectionObserver for lazy loading videos
 function setupLazyLoad(videoElement, triggerElement) {
   const observer = new IntersectionObserver(
     ([entry]) => {
       if (entry.isIntersecting) {
-        console.log(videoElement, "is intersecting: ", triggerElement);
-
         videoElement.setAttribute("preload", "auto"); // Preload the video
         videoElement.play(); // Play the video
         observer.unobserve(triggerElement); // Stop observing after triggering
@@ -113,10 +98,22 @@ function setupLazyLoad(videoElement, triggerElement) {
   observer.observe(triggerElement); // Start observing the trigger element
 }
 
+// render new video source based on window screen size change event
 function debounceWindowResizedListener(func) {
   let resizeTimeout;
   window.addEventListener("resize", () => {
     clearTimeout(resizeTimeout);
     resizeTimeout = setTimeout(func, 500);
   });
 }
+
+// return correct digital ocean url
+function getURL(video, device) {
+  let url;
+  if (video.includes("Nav")) {
+    url = `https://psychoactive-website-media.sfo3.cdn.digitaloceanspaces.com/Responsive-Videos/showreel_${device}.mp4`;
+  } else {
+    url = `https://psychoactive-website-media.sfo3.cdn.digitaloceanspaces.com/Responsive-Videos/${video}_${device}.mp4`;
+  }
+  return url;
+}