add video page

src/build.tsx

@@ -20,6 +20,7 @@ import { S3Client, ListObjectsV2Command } from "@aws-sdk/client-s3";
 import IndexPage from "./templates";
 import type { ReactNode } from "react";
 import ImagesPage from "./templates/images";
+import VideosPage from "./templates/videos";
 
 const S3 = new S3Client({
   region: "auto",
@@ -222,3 +223,17 @@ generateHTMLFile(
   <ImagesPage />,
   "out/images/index.html"
 );
+
+generateHTMLFile(
+  "Wah-Collection/Images",
+  "/videos/",
+  `Video page of Wah-Collection | ${videos.length} Videos`,
+  [
+    environment == "dev" ? "/static/utils.js" : "/static/utils.min.js",
+    environment == "dev"
+      ? "/static/populateVideos.js"
+      : "/static/populateVideos.min.js",
+  ],
+  <VideosPage />,
+  "out/videos/index.html"
+);

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,6 +240,11 @@ function getOffset() {
 }
 
 function enableNav() {
+  if (
+    ["/images", "/images/", "/images/index.html"].includes(
+      window.location.pathname
+    )
+  ) {
     function handleClickPrev() {
       setOffset(getOffset() - getImagesPerPage());
     }
@@ -160,6 +259,22 @@ function enableNav() {
       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) {
     setView(view);

src/templates/Components/PageNavigation.tsx

@@ -1,31 +1,56 @@
-export default function PageNav() {
-
-  const ipp = [12,24,32,48,72,100,250,500,1000]
+export default function PageNav(props: { path: string }) {
+  let ipp;
+  if (props.path == "/images") {
+    ipp = [12, 24, 32, 48, 72, 100, 250, 500, 1000];
+  } else {
+    ipp = [24, 48, 72, 100];
+  }
 
   return (
     <div className="bg-orange-800/50 rounded-sm p-2 text-white flex justify-between gap-4 items-center">
-      <button className="flex justify-center items-center cursor-pointer" id="nav_prev">
+      <button
+        className="flex justify-center items-center cursor-pointer"
+        id="nav_prev"
+      >
         <div className="material-symbols--navigate-before w-16 h-16"></div>
       </button>
       <div className="flex gap-4">
         {ipp.map((item, idx) => {
-            return <button key={`ipp_${item}`}
-            className={`${idx > 4 ? "hidden md:block" : ""} cursor-pointer md:text-lg lg:text-xl text-gray-200`}
+          return (
+            <button
+              key={`ipp_${item}`}
+              className={`${
+                idx > 4 ? "hidden md:block" : ""
+              } cursor-pointer md:text-lg lg:text-xl text-gray-200`}
               id="nav_ipp"
               data-ipp={item}
-            >{item}</button>
+            >
+              {item}
+            </button>
+          );
         })}
       </div>
       <div className="flex">
         <div className="gap-1 hidden xl:flex">
-            <button className="flex justify-center items-center cursor-pointer text-gray-200" id="nav_view" data-view="grid">
+          <button
+            className="flex justify-center items-center cursor-pointer text-gray-200"
+            id="nav_view"
+            data-view="grid"
+          >
             <div className="material-symbols--grid-on w-8 h-8"></div>
           </button>
-            <button className="flex justify-center items-center cursor-pointer text-gray-200" id="nav_view" data-view="masonry">
+          <button
+            className="flex justify-center items-center cursor-pointer text-gray-200"
+            id="nav_view"
+            data-view="masonry"
+          >
             <div className="material-symbols--dashboard-rounded w-8 h-8"></div>
           </button>
         </div>
-        <button className="flex justify-center items-center cursor-pointer" id="nav_next">
+        <button
+          className="flex justify-center items-center cursor-pointer"
+          id="nav_next"
+        >
           <div className="material-symbols--navigate-next w-16 h-16"></div>
         </button>
       </div>

src/templates/Components/PlaceHolderVid.tsx

@@ -0,0 +1,17 @@
+export default function PlaceholderVid(props: { isMobileHidden?: boolean }) {
+  return (
+    <video
+      data-type="placeholder__video"
+      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 [&:not(:fullscreen)]:object-cover ${
+        props.isMobileHidden ? "hidden xl:block" : ""
+      }`}
+    >
+      <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>
+  );
+}

src/templates/images.tsx

@@ -3,12 +3,12 @@ import PageNav from "./Components/PageNavigation";
 export default function ImagesPage() {
   return (
     <>
-      <PageNav />
+      <PageNav path="/images"/>
       <div
         id="images_images"
         className="my-2 overflow-hidden grid grid-cols-[repeat(auto-fill,minmax(250px,1fr))] xl:grid-cols-[repeat(auto-fill,minmax(20%,1fr))] sm:items-center sm:justify-center gap-2"
       ></div>
-      <PageNav />
+      <PageNav path="/images"/>
     </>
   );
 }

src/templates/index.tsx

@@ -1,5 +1,6 @@
 import AllLink from "./Components/AllLink";
 import Placeholder from "./Components/PlaceHolder";
+import PlaceholderVid from "./Components/PlaceHolderVid";
 
 export default function IndexPage() {
   return (
@@ -7,13 +8,33 @@ export default function IndexPage() {
       <p className="text-4xl bg-orange-800/50 rounded-sm p-4">Images</p>
       <div
         id="index_images"
-        className="mt-2 flex overflow-x-auto sm:overflow-x-hidden sm:grid sm:grid-cols-[repeat(auto-fill,minmax(25%,1fr))] xl:grid-cols-[repeat(auto-fill,minmax(20%,1fr))] sm:items-center sm:justify-center gap-2"
+        className="mt-2 mb-4 flex overflow-x-auto sm:overflow-x-hidden sm:grid sm:grid-cols-[repeat(auto-fill,minmax(25%,1fr))] xl:grid-cols-[repeat(auto-fill,minmax(20%,1fr))] sm:items-center sm:justify-center gap-2"
       >
         {[...Array(7).keys()].map((idx) => {
-          return <Placeholder key={`placeholder__image-${idx}`} isMobileHidden={idx > 4} />;
+          return (
+            <Placeholder
+              key={`placeholder__image-${idx}`}
+              isMobileHidden={idx > 4}
+            />
+          );
         })}
         <AllLink location="/images/" text="View All Images" />
       </div>
+      <p className="text-4xl bg-orange-800/50 rounded-sm p-4">Videos</p>
+      <div
+        id="index_videos"
+        className="mt-2 mb-4 flex overflow-x-auto sm:overflow-x-hidden sm:grid sm:grid-cols-[repeat(auto-fill,minmax(25%,1fr))] xl:grid-cols-[repeat(auto-fill,minmax(20%,1fr))] sm:items-center sm:justify-center gap-2"
+      >
+        {[...Array(3).keys()].map((idx) => {
+          return (
+            <PlaceholderVid
+              key={`placeholder__video-${idx}`}
+              isMobileHidden={idx > 1}
+            />
+          );
+        })}
+        <AllLink location="/videos/" text="View All Videos" />
+      </div>
     </div>
   );
 }

src/templates/videos.tsx

@@ -0,0 +1,14 @@
+import PageNav from "./Components/PageNavigation";
+
+export default function VideosPage() {
+  return (
+    <>
+      <PageNav path="/videos"/>
+      <div
+        id="videos_videos"
+        className="my-2 overflow-hidden grid grid-cols-[repeat(auto-fill,minmax(250px,1fr))] xl:grid-cols-[repeat(auto-fill,minmax(20%,1fr))] sm:items-center sm:justify-center gap-2"
+      ></div>
+      <PageNav path="/videos"/>
+    </>
+  );
+}