feat: add video favorite client-side

src/static/Placeholders.js

@@ -34,29 +34,53 @@ function Placeholder() {
 }
 
 function PlaceholderVid() {
-  const placeholder = document.createElement("video");
+  const placeholderRoot = document.createElement("div");
-  placeholder.dataset.type = "placeholder__video";
+  placeholderRoot.dataset.type = "placeholder__video__container";
-  placeholder.controls = true;
+  placeholderRoot.className =
-  placeholder.className =
+    "relative aspect-square w-full h-full max-w-48 max-h-48 sm:max-w-none sm:max-h-none rounded-sm";
+
+  const placeholderVid = document.createElement("video");
+  placeholderVid.dataset.type = "placeholder__video";
+  placeholderVid.className =
     "relative aspect-square w-full h-full rounded-sm [&:not(:fullscreen)]:object-cover";
+  placeholderVid.controls = true;
 
-  const placeholder_loader = document.createElement("div");
+  const placeholderVidLoader = document.createElement("div");
-  placeholder_loader.dataset.type = "placeholder__video__loader";
+  placeholderVidLoader.dataset.type = "placeholder__video__loader";
-  placeholder_loader.className =
+  placeholderVidLoader.className =
     "w-full h-full absolute inset-0 bg-gray-400 opacity-30 animate-pulse z-[3]";
-  const placeholder_source = document.createElement("source");
-  placeholder.appendChild(placeholder_loader);
-  placeholder.appendChild(placeholder_source);
 
-  return placeholder;
+  const placeholderSrc = document.createElement("source");
+
+  const favoriteButton = document.createElement("button");
+  favoriteButton.dataset.type = "video__fav";
+  favoriteButton.className =
+    "hidden absolute right-2 top-2 w-8 h-8 cursor-pointer";
+  favoriteButton.innerHTML =
+    '<div class="text-[#faebeb] hover:text-orange-500 transition-colors material-symbols--favorite-outline-rounded w-full h-full"></div>';
+  const unfavoriteButton = document.createElement("button");
+  unfavoriteButton.dataset.type = "video__unfav";
+  unfavoriteButton.className =
+    "hidden absolute right-2 top-2 w-8 h-8 cursor-pointer";
+  unfavoriteButton.innerHTML =
+    '<div class="text-[#faebeb] hover:text-orange-500 transition-colors material-symbols--favorite-rounded w-full h-full"></div>';
+
+
+  placeholderVid.appendChild(placeholderVidLoader);
+  placeholderVid.appendChild(placeholderSrc);
+  placeholderRoot.appendChild(placeholderVid);
+  placeholderRoot.appendChild(favoriteButton);
+  placeholderRoot.appendChild(unfavoriteButton);
+  return placeholderRoot;
 }
 
 function AllLink(href, title) {
-    const link = document.createElement("a");
+  const link = document.createElement("a");
-    link.href = href;
+  link.href = href;
-    link.className = "text-[#f9ebeb] hover:bg-orange-600 rounded-sm overflow-hidden transition-colors aspect-square bg-yellow-950 min-w-48 sm:min-w-auto flex items-center justify-center flex-col";
+  link.className =
-    link.innerHTML = `
+    "text-[#f9ebeb] hover:bg-orange-600 rounded-sm overflow-hidden transition-colors aspect-square bg-yellow-950 min-w-48 sm:min-w-auto flex items-center justify-center flex-col";
+  link.innerHTML = `
     <span class="material-symbols--arrow-forward-rounded w-16 h-16"></span>
-    <p class="text-xl">${title}</p>`
+    <p class="text-xl">${title}</p>`;
-    return link
+  return link;
-}
+}

src/static/populateFavorites.js

@@ -29,7 +29,17 @@ async function __tmp_loadFavs() {
         );
       }, 250);
     } else {
-      console.log("video not supported");
+      pl = container.appendChild(PlaceholderVid());
+      setTimeout(() => {
+        renderVideo(
+          config.endpoint,
+          config.bucket,
+          config.prefix,
+          videos[item.vid],
+          item.vid,
+          pl
+        );
+      }, 250);
     }
   });
 }

src/static/populateIndex.js

@@ -28,7 +28,9 @@ async function populateIndex() {
     }
   });
 
-  const Videos = document.querySelectorAll('[data-type="placeholder__video"]');
+  const Videos = document.querySelectorAll(
+    '[data-type="placeholder__video__container"]'
+  );
   const VisibleVideos = [];
   Videos.forEach((placeholder) => {
     if (placeholder.checkVisibility()) {
@@ -53,6 +55,7 @@ async function populateIndex() {
       config.bucket,
       config.prefix,
       video.src,
+      video.id,
       VisibleVideos[idx]
     );
   });
@@ -76,6 +79,17 @@ async function populateIndex() {
           );
         }, 250);
       } else {
+        pl = FavoritesContainer.appendChild(PlaceholderVid());
+        setTimeout(() => {
+          renderVideo(
+            config.endpoint,
+            config.bucket,
+            config.prefix,
+            videos[item.vid],
+            item.vid,
+            pl
+          );
+        }, 250);
         console.log("video not supported");
       }
     });

src/static/populateVideos.js

@@ -19,13 +19,15 @@ async function __tmp_loadVideos() {
 
   videos.slice(start, end).forEach((video, idx) => {
     container.appendChild(PlaceholderVid());
-    let videos = document.querySelectorAll('[data-type="placeholder__video"]');
+    let videos = document.querySelectorAll('[data-type="placeholder__video__container"]');
+    const vid = Number(start) + Number(idx);
     setTimeout(() => {
       renderVideo(
         config.endpoint,
         config.bucket,
         config.prefix,
         video,
+        vid,
         videos[idx]
       );
     }, 250);

src/static/tailwind.css

@@ -533,6 +533,9 @@
   .invisible {
     visibility: hidden;
   }
+  .visible {
+    visibility: visible;
+  }
   .absolute {
     position: absolute;
   }
@@ -587,9 +590,15 @@
   .z-\[4\] {
     z-index: 4;
   }
+  .z-\[10\] {
+    z-index: 10;
+  }
   .z-\[15\] {
     z-index: 15;
   }
+  .z-\[50\] {
+    z-index: 50;
+  }
   .\[grid-column\:span_2\] {
     grid-column: span 2;
   }

src/static/utils.js

@@ -50,7 +50,7 @@ function renderImage(endpoint, bucket, prefix, isrc, iid, placeholderRoot) {
     unfavoriteButton.classList.remove("hidden");
   });
   unfavoriteButton.addEventListener("click", () => {
-    removeFavorites(iid);
+    removeFavorites(iid, "image");
     favoriteButton.classList.remove("hidden");
     unfavoriteButton.classList.add("hidden");
   });
@@ -61,7 +61,9 @@ function renderImage(endpoint, bucket, prefix, isrc, iid, placeholderRoot) {
   }
 
   const view = getView();
-  const container = document.getElementById("images_images") || document.getElementById("favorites_favorites");
+  const container =
+    document.getElementById("images_images") ||
+    document.getElementById("favorites_favorites");
 
   placeholderImage.appendChild(blurImg);
   placeholderImage.appendChild(Img);
@@ -117,26 +119,59 @@ function renderImage(endpoint, bucket, prefix, isrc, iid, placeholderRoot) {
   });
 }
 
-function renderVideo(endpoint, bucket, prefix, vsrc, placeholder) {
+function renderVideo(endpoint, bucket, prefix, vsrc, vid, placeholderRoot) {
-  const loader = placeholder.querySelector(
+  const placeholderVid = placeholderRoot.querySelector(
+    '[data-type="placeholder__video"]'
+  );
+  const placeholderVidLoader = placeholderVid.querySelector(
     '[data-type="placeholder__video__loader"]'
   );
+  const favoriteButton = placeholderRoot.querySelector(
+    '[data-type="video__fav"]'
+  );
+  const unfavoriteButton = placeholderRoot.querySelector(
+    '[data-type="video__unfav"]'
+  );
 
   const view = getView();
-  const container = document.getElementById("videos_videos");
+  const container =
+    document.getElementById("videos_videos") ||
+    document.getElementById("favorites_favorites");
 
-  const source = placeholder.querySelector("source");
+  const source = placeholderVid.querySelector("source");
   const ext = vsrc.split(".")[vsrc.split(".").length - 1];
-  placeholder.src = `${endpoint}/${bucket}/${prefix}/${vsrc}`;
+  placeholderVid.src = `${endpoint}/${bucket}/${prefix}/${vsrc}`;
-  placeholder.preload = "metadata";
+  placeholderVid.preload = "metadata";
   source.src = `${endpoint}/${bucket}/${prefix}/${vsrc}`;
   source.type = `video/${ext}`;
 
+  const isFav = getFavorites().find((el) => el.vid == vid) || false;
+  favoriteButton.addEventListener("click", () => {
+    addFavorites(vid, "video");
+    favoriteButton.classList.add("hidden");
+    unfavoriteButton.classList.remove("hidden");
+  });
+  unfavoriteButton.addEventListener("click", () => {
+    removeFavorites(vid, "video");
+    favoriteButton.classList.remove("hidden");
+    unfavoriteButton.classList.add("hidden");
+  });
+  if (!isFav) {
+    favoriteButton.classList.remove("hidden");
+  } else {
+    unfavoriteButton.classList.remove("hidden");
+  }
+
   if (
     view == "masonry" &&
-    ["/videos", "/videos/", "/videos/index.html"].includes(
+    [
-      window.location.pathname
+      "/videos",
-    )
+      "/videos/",
+      "/videos/index.html",
+      "/favorites",
+      "/favorites/",
+      "/favorites/index.html",
+    ].includes(window.location.pathname)
   ) {
     container.classList.remove(
       "xl:grid-cols-[repeat(auto-fill,minmax(20%,1fr))]"
@@ -144,24 +179,34 @@ function renderVideo(endpoint, bucket, prefix, vsrc, placeholder) {
     container.classList.add("xl:grid-cols-[repeat(6,minmax(180px,1fr))]");
     container.classList.add("xl:[grid-auto-flow:_row_dense]");
 
-    placeholder.addEventListener("loadedmetadata", () => {
+    placeholderVid.addEventListener("loadedmetadata", () => {
-      const aspect = getAspectVid(placeholder);
+      const aspect = getAspectVid(placeholderVid);
 
       if (aspect < 0.95) {
-        placeholder.classList.remove("aspect-square");
+        placeholderVid.classList.remove("aspect-square");
-        placeholder.classList.add("aspect-[1/2]");
+        placeholderRoot.classList.remove("aspect-square");
-        placeholder.classList.add("w-full");
+        placeholderVid.classList.add("aspect-[1/2]");
-        placeholder.classList.add("h-full");
+        placeholderRoot.classList.add("aspect-[1/2]");
-        placeholder.classList.add("[grid-row:span_2]");
+        placeholderVid.classList.add("w-full");
+        placeholderRoot.classList.add("w-full");
+        placeholderVid.classList.add("h-full");
+        placeholderRoot.classList.add("h-full");
+        placeholderVid.classList.add("[grid-row:span_2]");
+        placeholderRoot.classList.add("[grid-row:span_2]");
       } else if (aspect > 1.05) {
-        placeholder.classList.remove("aspect-square");
+        placeholderVid.classList.remove("aspect-square");
-        placeholder.classList.add("aspect-[2/1]");
+        placeholderRoot.classList.remove("aspect-square");
-        placeholder.classList.add("w-full");
+        placeholderVid.classList.add("aspect-[2/1]");
-        placeholder.classList.add("h-full");
+        placeholderRoot.classList.add("aspect-[2/1]");
-        placeholder.classList.add("[grid-column:span_2]");
+        placeholderVid.classList.add("w-full");
+        placeholderRoot.classList.add("w-full");
+        placeholderVid.classList.add("h-full");
+        placeholderRoot.classList.add("h-full");
+        placeholderVid.classList.add("[grid-column:span_2]");
+        placeholderRoot.classList.add("[grid-column:span_2]");
       }
 
-      placeholder.removeEventListener("loadedmetadata", this);
+      placeholderVid.removeEventListener("loadedmetadata", this);
     });
   }
 }
@@ -181,16 +226,30 @@ function setFavorites(favs) {
 
 function addFavorites(iid, type) {
   const favs = getFavorites();
-  const newFav = {
+  let newFav;
-    iid,
+  if (type == "image") {
-    type,
+    newFav = {
-  };
+      iid,
+      type,
+    };
+  } else {
+    newFav = {
+      vid: iid,
+      type,
+    };
+  }
+
   const newFavs = [...favs, newFav];
   setFavorites(newFavs);
 }
 
-function removeFavorites(iid) {
+function removeFavorites(iid, type) {
-  const idx = getFavorites().findIndex((el) => el.iid == iid);
+  let idx;
+  if (type == "image") {
+    idx = getFavorites().findIndex((el) => el.iid == iid);
+  } else {
+    idx = getFavorites().findIndex((el) => el.vid == iid);
+  }
   const favs = getFavorites();
   if (idx > -1) {
     favs.splice(idx, 1);

src/templates/Components/PlaceHolderVid.tsx

@@ -1,17 +1,38 @@
 export default function PlaceholderVid(props: { isMobileHidden?: boolean }) {
   return (
-    <video
+    <div
-      data-type="placeholder__video"
+      data-type="placeholder__video__container"
-      controls={true}
+      className={`relative aspect-square w-full h-full max-w-48 max-h-48 sm:max-w-none sm:max-h-none rounded-sm ${
-      className={`relative aspect-square w-full h-full max-w-48 max-h-48 sm:max-w-none sm:max-h-none rounded-sm [&:not(:fullscreen)]:object-cover ${
         props.isMobileHidden ? "hidden xl:block" : ""
       }`}
     >
-      <div
+      <video
-        data-type="placeholder__video__loader"
+        data-type="placeholder__video"
-        className="w-full h-full absolute inset-0 bg-gray-400 opacity-30 animate-pulse z-[3]"
+        className={`w-full h-full absolute inset-0 [&:not(:fullscreen)]:object-cover ${
-      ></div>
+          props.isMobileHidden ? "hidden xl:block" : ""
-      <source className={`${props.isMobileHidden ? "hidden xl:block" : ""}`}></source>
+        }`}
-    </video>
+        controls={true}
+      >
+        <div
+          data-type="placeholder__video__loader"
+          className="w-full h-full absolute inset-0 bg-gray-400 opacity-30 animate-pulse z-[3]"
+        ></div>
+        <source
+          className={`${props.isMobileHidden ? "hidden xl:block" : ""}`}
+        ></source>
+      </video>
+      <button
+        data-type="video__fav"
+        className="hidden absolute right-2 top-2 w-8 h-8 cursor-pointer"
+      >
+        <div className="text-[#faebeb] hover:text-orange-500 transition-colors material-symbols--favorite-outline-rounded w-full h-full"></div>
+      </button>
+      <button
+        data-type="video__unfav"
+        className="hidden absolute right-2 top-2 w-8 h-8 cursor-pointer"
+      >
+        <div className="text-[#faebeb] hover:text-orange-500 transition-colors material-symbols--favorite-rounded w-full h-full"></div>
+      </button>
+    </div>
   );
 }