Moved banner to seperate page (embed into required pages), added late…

…st video popup
infernalstudios · Apr 19, 2024 · 6690869 · 6690869
1 parent 97ffc7e
commit 6690869
Show file tree

Hide file tree

Showing 12 changed files with 291 additions and 93 deletions.
diff --git a/.env.example b/.env.example
@@ -40,3 +40,9 @@ DATABASE_URL=postgres://username:password@localhost:5432/database
 
 # Determines if the database driver will log queries.
 DATABASE_LOG=false
+
+###############################################################################
+## API KEYS
+
+# The API key for YouTube Data API v3.
+YOUTUBE_API_KEY=
diff --git a/public/banner.html b/public/banner.html
@@ -0,0 +1,33 @@
+<!-- Copyright (c) 2022 Infernal Studios, All Rights Reserved unless otherwise explicitly stated. -->
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Infernal Studios | Under Contruction</title>
+    <link rel="stylesheet" href="/css/spectre.css" defer />
+    <link rel="stylesheet" href="/css/style.css" defer />
+    <link rel="stylesheet" href="/css/banner.css" defer />
+    <script src="/script/common.js" type="text/javascript" defer></script>
+    <script src="/script/banner.js" type="text/javascript" defer></script>
+  </head>
+
+  <body>
+    <div id="patreon-banner" draggable="false">
+      <noscript>
+        <img class="banner-bg" src="/img/patreon-banner-textless-1.webp" />
+      </noscript>
+      <div class="banner-text">
+        <p class="smol">Want to support the creation of mods like these?</p>
+        <p class="big">Consider supporting us on</p>
+        <p class="humongous">
+          <img src="/img/patreon-logo.webp" class="pr-5" draggable="false" />
+          <noscript>
+            <a href="/patreon"> PATREON </a>
+          </noscript>
+          <script>
+            document.write("PATREON");
+          </script>
+        </p>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/public/css/banner.css b/public/css/banner.css
@@ -0,0 +1,68 @@
+/* Copyright (c) 2022 Infernal Studios, All Rights Reserved unless otherwise explicitly stated. */
+* {
+  margin: 0;
+  padding: 0;
+  font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
+}
+
+#patreon-banner {
+  height: calc(100vw * (250 / 1920) + ((1920px - 100vw) / 15));
+  user-select: none;
+  cursor: pointer;
+
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center;
+}
+
+#patreon-banner .banner-bg {
+  position: absolute;
+  z-index: -1;
+  height: calc(100vw * (250 / 1920) + ((1920px - 100vw) / 15));
+  width: 100vw;
+}
+
+#patreon-banner .banner-text {
+  --banner-text-width: calc((100vw * (250 / 1920) + ((1920px - 100vw) / 15)) * 2.5);
+
+  font-family: "Century Gothic", "Arial Narrow", Arial, sans-serif;
+  font-size: calc(var(--banner-text-width) / 30);
+  font-weight: 600;
+  color: white;
+
+  text-shadow: black 0 0 15px;
+
+  display: flex;
+  margin-left: auto;
+  margin-right: 5%;
+  min-width: 330px;
+  max-width: var(--banner-text-width);
+  height: 100%;
+
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+#patreon-banner .banner-text p {
+  padding: 0;
+  margin: 0;
+}
+
+#patreon-banner .banner-text .smol {
+  font-size: 1em;
+}
+#patreon-banner .banner-text .big {
+  font-size: 2em;
+}
+#patreon-banner .banner-text .humongous {
+  font-size: 3.5em;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: row;
+}
+
+#patreon-banner .banner-text .humongous img {
+  max-height: 3.5rem;
+}
diff --git a/public/css/style.css b/public/css/style.css
@@ -44,60 +44,13 @@ hr {
   margin-bottom: 16px;
 }
 
-#patreon-banner {
-  height: calc(100vw * (250 / 1920) + ((1920px - 100vw) / 15));
-  user-select: none;
-  cursor: pointer;
+.video-embed {
+  width: 48vw;
+  height: 27vw;
 }
 
-#patreon-banner .banner-bg {
-  position: absolute;
-  transform: translateX(-50%);
-  z-index: -1;
-  height: calc(100vw * (250 / 1920) + ((1920px - 100vw) / 15));
-}
-
-#patreon-banner .banner-text {
-  --banner-text-width: calc((100vw * (250 / 1920) + ((1920px - 100vw) / 15)) * 2.5);
-
-  font-family: "Century Gothic", "Arial Narrow", Arial, sans-serif;
-  font-size: calc(var(--banner-text-width) / 30);
-  font-weight: 600;
-  color: white;
-
-  text-shadow: black 0 0 15px;
-
-  display: flex;
-  margin-left: auto;
-  margin-right: 5%;
-  min-width: 330px;
-  max-width: var(--banner-text-width);
-  height: 100%;
-
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-}
-
-#patreon-banner .banner-text p {
-  padding: 0;
-  margin: 0;
-}
-
-#patreon-banner .banner-text .smol {
-  font-size: 1em;
-}
-#patreon-banner .banner-text .big {
-  font-size: 2em;
-}
-#patreon-banner .banner-text .humongous {
-  font-size: 3.5em;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: row;
-}
-
-#patreon-banner .banner-text .humongous img {
-  max-height: 3.5rem;
+.banner {
+  --banner-width: 100vw;
+  width: var(--banner-width);
+  height: calc(var(--banner-width) * (250 / 1920) + ((1920px - var(--banner-width)) / 15));
 }
diff --git a/public/index.html b/public/index.html
@@ -20,24 +20,7 @@
 
       <div class="py-2"></div>
 
-      <div id="patreon-banner" draggable="false">
-        <noscript>
-          <img class="banner-bg" src="/img/patreon-banner-textless-1.webp" />
-        </noscript>
-        <div class="banner-text">
-          <p class="smol">Want to support the creation of mods like these?</p>
-          <p class="big">Consider supporting us on</p>
-          <p class="humongous">
-            <img src="/img/patreon-logo.webp" class="pr-5" draggable="false" />
-            <noscript>
-              <a href="/patreon"> PATREON </a>
-            </noscript>
-            <script>
-              document.write("PATREON");
-            </script>
-          </p>
-        </div>
-      </div>
+      <div class="container px-2 text-center" id="latest-video"></div>
 
       <div class="py-2"></div>
 
@@ -64,6 +47,8 @@ <h3>
       <div class="container px-2 text-center" id="mod-container"></div>
     </main>
 
+    <iframe src="/banner" frameborder="0" class="banner"></iframe>
+
     <footer class="text-center">
       <p class="mb-2">
         To contact the site's administrator, e-mail them at

diff --git a/public/script/banner.js b/public/script/banner.js
@@ -0,0 +1,31 @@
+/* eslint-disable no-undef */
+
+function preloadImage(url) {
+  const img = new Image();
+  img.src = url;
+}
+
+const patreonBannerImgs = [
+  "/img/patreon-banner-textless-1.webp",
+  "/img/patreon-banner-textless-2.webp",
+  "/img/patreon-banner-textless-3.webp",
+];
+
+for (let i = 0; i < patreonBannerImgs.length; i++) {
+  preloadImage(patreonBannerImgs[i]);
+}
+preloadImage("/img/patreon-logo.webp");
+
+// Patreon banner
+window.addEventListener("DOMContentLoaded", () => {
+  /** @type {HTMLDivElement} */
+  const bannerContainer = document.getElementById("patreon-banner");
+
+  bannerContainer.style.backgroundImage = `url(${JSON.stringify(
+    patreonBannerImgs[Math.floor(Math.random() * patreonBannerImgs.length)]
+  )})`;
+
+  bannerContainer.addEventListener("click", () => {
+    window.location.href = "/patreon";
+  });
+});
diff --git a/public/script/index.js b/public/script/index.js
@@ -148,19 +148,50 @@ window.addEventListener("DOMContentLoaded", () => {
   }
 });
 
-// Patreon banner
-window.addEventListener("DOMContentLoaded", () => {
-  /** @type {HTMLDivElement} */
-  const bannerContainer = document.getElementById("patreon-banner");
-
-  const bannerImg = new Image();
-  bannerImg.classList.add("banner-bg");
-  bannerImg.src = patreonBannerImgs[Math.floor(Math.random() * patreonBannerImgs.length)];
+// Latest video
+/**
+ * @returns {Promise<string | null>}
+ */
+async function getLatestVideoID() {
+  const response = await fetch("/api/content/latest-video");
+  if (!response.ok) return null;
+  const data = await response.json();
+  if (typeof data !== "string") return null;
+  return data;
+}
 
-  // We want the img to be first in the html
-  bannerContainer.insertBefore(bannerImg, bannerContainer.firstChild);
+window.addEventListener("DOMContentLoaded", async () => {
+  const videoContainer = document.getElementById("latest-video");
+  const videoId = await getLatestVideoID();
+  if (!videoId) {
+    videoContainer.style.display = "none";
+    return;
+  }
 
-  bannerContainer.addEventListener("click", () => {
-    window.location.href = "/patreon";
-  });
+  const videoElement = document.createElement("div");
+  videoElement.classList.add("columns", "col-9", "col-mx-auto");
+
+  let embedHTML = `
+    <div class="column col-12">
+      <h4 class="text-center">Check out our latest video!</h4>
+      <iframe
+        src=${JSON.stringify("https://www.youtube-nocookie.com/embed/" + videoId)}
+        title="YouTube video player"
+        frameborder="0"
+        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+        referrerpolicy="strict-origin-when-cross-origin"
+        allowfullscreen
+        class="video-embed"
+      ></iframe>
+    </div>
+  `;
+
+  videoElement.innerHTML = embedHTML;
+  videoContainer.appendChild(videoElement);
+
+  const sibling = videoContainer.nextElementSibling;
+  if (sibling?.classList?.contains("banner")) {
+    // Set --banner-width to video width
+    sibling.style.setProperty("--banner-width", sibling.clientWidth + "px");
+  }
 });
diff --git a/src/api/APIManager.ts b/src/api/APIManager.ts
@@ -4,6 +4,7 @@ import helmet from "helmet";
 import { RateLimiterMemory } from "rate-limiter-flexible";
 import { Database } from "../database/Database";
 import { getAuthAPI } from "./AuthAPI";
+import { getContentAPI } from "./ContentAPI";
 import { getModAPI } from "./ModAPI";
 import { getRedirectAPI } from "./RedirectAPI";
 import { StatusAPI } from "./StatusAPI";
@@ -66,6 +67,7 @@ export function getAPI(database: Database): Router {
   api.use("/mods", getModAPI(database));
   api.use("/users", getUserAPI(database));
   api.use("/everythingdescriptions", getTempEDAPI(database));
+  api.use("/content", getContentAPI(database));
 
   return api;
 }