add video page

src/static/populateIndex.js

@@ -14,7 +14,7 @@ function randomElements(src, count) {
 async function populateIndex() {
   let config = await get("/data/config.json");
   let images = await get("/data/images.json");
-  // let videos = await get("/data/videos.json");
+  let videos = await get("/data/videos.json");
 
   const Images = document.querySelectorAll('[data-type="placeholder__image"]');
   const VisibleImages = [];
@@ -24,6 +24,14 @@ async function populateIndex() {
     }
   });
 
+  const Videos = document.querySelectorAll('[data-type="placeholder__video"]');
+  const VisibleVideos = [];
+  Videos.forEach((placeholder) => {
+    if (placeholder.checkVisibility()) {
+      VisibleVideos.push(placeholder);
+    }
+  });
+
   randomElements(images, VisibleImages.length).forEach((image, idx) => {
     renderImage(
       config.endpoint,
@@ -34,6 +42,15 @@ async function populateIndex() {
       VisibleImages[idx]
     );
   });
+
+  randomElements(videos, VisibleVideos.length).forEach((video, idx) => {
+    renderVideo(
+      config.endpoint,
+      config.bucket,
+      config.prefix,
+      video.src,
+      VisibleVideos[idx])
+  });
 }
 window.onload = () => {
   populateIndex();

src/static/populateVideos.js

@@ -0,0 +1,56 @@
+function PlaceholderVid() {
+  const placeholder = document.createElement("video");
+  placeholder.dataset.type = "placeholder__video";
+  placeholder.controls = true;
+  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 [&:not(:fullscreen)]:object-cover";
+
+  const placeholder_loader = document.createElement("div");
+  placeholder_loader.dataset.type = "placeholder__video__loader";
+  placeholder_loader.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;
+}
+
+async function __tmp_loadVideos() {
+  const container = document.getElementById("videos_videos");
+
+  let config = await get("/data/config.json");
+  let videos = await get("/data/videos.json");
+
+  const start = getOffset();
+  const end = getOffset() + getVideosPerPage();
+
+  const url = new URL(window.location.toString());
+
+  if (start < 0) {
+    url.searchParams.set("offset", 0);
+    window.location.href = url.href;
+  } else if (end > videos.length) {
+    url.searchParams.set("offset", videos.length - getVideosPerPage());
+    window.location.href = url.href;
+  }
+
+  videos.slice(start, end).forEach((video, idx) => {
+    container.appendChild(PlaceholderVid());
+    let videos = document.querySelectorAll('[data-type="placeholder__video"]');
+    setTimeout(() => {
+      renderVideo(
+        config.endpoint,
+        config.bucket,
+        config.prefix,
+        video,
+        videos[idx]
+      );
+    }, 250);
+  });
+}
+
+window.onload = () => {
+  enableNav();
+  __tmp_loadVideos();
+};

src/static/tailwind.css

@@ -587,6 +587,9 @@
   .mt-2 {
     margin-top: calc(var(--spacing) * 2);
   }
+  .mb-4 {
+    margin-bottom: calc(var(--spacing) * 4);
+  }
   .contents {
     display: contents;
   }
@@ -620,6 +623,9 @@
   .h-full {
     height: 100%;
   }
+  .max-h-48 {
+    max-height: calc(var(--spacing) * 48);
+  }
   .min-h-16 {
     min-height: calc(var(--spacing) * 16);
   }
@@ -635,6 +641,9 @@
   .w-full {
     width: 100%;
   }
+  .max-w-48 {
+    max-width: calc(var(--spacing) * 48);
+  }
   .min-w-48 {
     min-width: calc(var(--spacing) * 48);
   }
@@ -772,6 +781,16 @@
       height: calc(var(--spacing) * 10);
     }
   }
+  .sm\:max-h-none {
+    @media (width >= 40rem) {
+      max-height: none;
+    }
+  }
+  .sm\:max-w-none {
+    @media (width >= 40rem) {
+      max-width: none;
+    }
+  }
   .sm\:min-w-auto {
     @media (width >= 40rem) {
       min-width: auto;
@@ -854,6 +873,11 @@
       color: #f9ebeb;
     }
   }
+  .\[\&\:not\(\:fullscreen\)\]\:object-cover {
+    &:not(:fullscreen) {
+      object-fit: cover;
+    }
+  }
 }
 .material-symbols--arrow-forward-rounded {
   display: inline-block;

src/static/utils.js

@@ -9,6 +9,9 @@ async function get(url) {
 function getAspect(image) {
   return Number(image.naturalWidth / image.naturalHeight);
 }
+function getAspectVid(video) {
+  return Number(video.videoWidth / video.videoHeight);
+}
 
 function renderImage(endpoint, bucket, prefix, isrc, iid, placeholder) {
   const src = `${endpoint}/${bucket}/${prefix}/${isrc}`;
@@ -34,7 +37,12 @@ function renderImage(endpoint, bucket, prefix, isrc, iid, placeholder) {
   placeholder.appendChild(blurImg);
   placeholder.appendChild(Img);
 
-  if (view == "masonry" && ["/images", "/images/", "/images/index.html"].includes(window.location.pathname)) {
+  if (
+    view == "masonry" &&
+    ["/images", "/images/", "/images/index.html"].includes(
+      window.location.pathname
+    )
+  ) {
     container.classList.remove(
       "xl:grid-cols-[repeat(auto-fill,minmax(20%,1fr))]"
     );
@@ -75,6 +83,55 @@ function renderImage(endpoint, bucket, prefix, isrc, iid, placeholder) {
   });
 }
 
+function renderVideo(endpoint, bucket, prefix, vsrc, placeholder) {
+  const loader = placeholder.querySelector(
+    '[data-type="placeholder__video__loader"]'
+  );
+
+  const view = getView();
+  const container = document.getElementById("videos_videos");
+
+  const source = placeholder.querySelector("source");
+  const ext = vsrc.split(".")[vsrc.split(".").length - 1];
+  placeholder.src = `${endpoint}/${bucket}/${prefix}/${vsrc}`;
+  placeholder.preload = "metadata";
+  source.src = `${endpoint}/${bucket}/${prefix}/${vsrc}`;
+  source.type = `video/${ext}`;
+
+  if (
+    view == "masonry" &&
+    ["/videos", "/videos/", "/videos/index.html"].includes(
+      window.location.pathname
+    )
+  ) {
+    container.classList.remove(
+      "xl:grid-cols-[repeat(auto-fill,minmax(20%,1fr))]"
+    );
+    container.classList.add("xl:grid-cols-[repeat(6,minmax(180px,1fr))]");
+    container.classList.add("xl:[grid-auto-flow:_row_dense]");
+
+    placeholder.addEventListener("loadedmetadata", () => {
+      const aspect = getAspectVid(placeholder);
+
+      if (aspect < 0.95) {
+        placeholder.classList.remove("aspect-square");
+        placeholder.classList.add("aspect-[1/2]");
+        placeholder.classList.add("w-full");
+        placeholder.classList.add("h-full");
+        placeholder.classList.add("[grid-row:span_2]");
+      } else if (aspect > 1.05) {
+        placeholder.classList.remove("aspect-square");
+        placeholder.classList.add("aspect-[2/1]");
+        placeholder.classList.add("w-full");
+        placeholder.classList.add("h-full");
+        placeholder.classList.add("[grid-column:span_2]");
+      }
+
+      placeholder.removeEventListener("loadedmetadata", this);
+    });
+  }
+}
+
 function setView(view) {
   localStorage.setItem("view", view);
 }
@@ -130,6 +187,43 @@ function getImagesPerPage() {
   return count;
 }
 
+function setVideosPerPage(count) {
+  localStorage.setItem("VideosPP", count);
+}
+function getVideosPerPage() {
+  let count = localStorage.getItem("VideosPP");
+  const url = new URL(window.location.toString());
+  const countParam = url.searchParams.get("VideosPP");
+
+  if (!count && !countParam) {
+    setVideosPerPage(24);
+    url.searchParams.set("VideosPP", 24);
+    count = Number(24);
+  } else if (countParam) {
+    count = Number(countParam);
+  } else if (count) {
+    url.searchParams.set("VideosPP", count);
+    window.history.pushState(
+      "",
+      `Wah-Collection/Videos`,
+      `?${url.searchParams.toString()}`
+    );
+    count = Number(count);
+  } else {
+    count = 24;
+  }
+
+  const active = document.querySelectorAll(`[data-ipp="${count}"]`);
+  if (active.length > 0) {
+    active.forEach((item) => {
+      item.classList.add("underline");
+      item.classList.add("text-orange-500");
+      item.classList.add("font-bold");
+    });
+  }
+  return count;
+}
+
 function setOffset(offset) {
   const url = new URL(window.location.toString());
   url.searchParams.set("offset", offset);
@@ -146,19 +240,40 @@ function getOffset() {
 }
 
 function enableNav() {
-  function handleClickPrev() {
-    setOffset(getOffset() - getImagesPerPage());
-  }
+  if (
+    ["/images", "/images/", "/images/index.html"].includes(
+      window.location.pathname
+    )
+  ) {
+    function handleClickPrev() {
+      setOffset(getOffset() - getImagesPerPage());
+    }
 
-  function handleClickNext() {
-    setOffset(getOffset() + getImagesPerPage());
-  }
+    function handleClickNext() {
+      setOffset(getOffset() + getImagesPerPage());
+    }
 
-  function handleClickIpp(ipp) {
-    setImagesPerPage(ipp);
-    const url = new URL(window.location.toString());
-    url.searchParams.set("ImagesPP", ipp);
-    window.location.href = url.href;
+    function handleClickIpp(ipp) {
+      setImagesPerPage(ipp);
+      const url = new URL(window.location.toString());
+      url.searchParams.set("ImagesPP", ipp);
+      window.location.href = url.href;
+    }
+  } else {
+    function handleClickPrev() {
+      setOffset(getOffset() - getVideosPerPage());
+    }
+
+    function handleClickNext() {
+      setOffset(getOffset() + getVideosPerPage());
+    }
+
+    function handleClickIpp(ipp) {
+      setVideosPerPage(ipp);
+      const url = new URL(window.location.toString());
+      url.searchParams.set("VideosPP", ipp);
+      window.location.href = url.href;
+    }
   }
 
   function handleClickView(view) {