Title support (#2)

Author: John Richard Chipps-Harding

README.md

@@ -21,3 +21,6 @@ You can configure a few things by editing the file `src/config/index.tsx`.
 - `POLL_INTERVAL` - How often should the frontend look for updates. Default 5 seconds.
 - `FILE_EXTENSION` - The filetypes supported. Default `png`.
 - `FILE_MIME` - The file mime type. Default `image/png`.
+- `SHOW_TITLE` - If the title should be overlaid. Default `true`.
+
+You can also adjust the title field formatter here: `src/utils/images.ts`.

src/components/ImageStack/ImageStack.module.css

@@ -1,3 +1,12 @@
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
 @keyframes slitherIn {
   from {
     opacity: 0;
@@ -21,13 +30,35 @@
 }
 
 .list li {
+  position: relative;
   width: 100%;
   margin-bottom: 16px;
   border-radius: 8px;
   overflow: hidden;
   animation-name: slitherIn;
-  animation-duration: 2s;
+  animation-duration: 4s;
+  animation-timing-function: ease-in-out;
+}
+
+.list li h2 {
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  font-weight: normal;
+  font-size: 1em;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 16px;
+  margin: 0;
+  background-color: #00000033;
+  text-shadow: 2px 2px  #00000044;
+  color: white;
+
+  animation-name: fadeIn;
+  animation-delay: 3s;
+  animation-duration: 4s;
   animation-timing-function: ease-in-out;
+  animation-fill-mode: both;
 }
 
 .list li img {

src/components/ImageStack/index.tsx

@@ -1,4 +1,7 @@
 /* eslint-disable @next/next/no-img-element */
+import { getTitle } from "@/utils/images";
+import { SHOW_TITLE } from "@/config";
+
 import styles from "./ImageStack.module.css";
 
 interface Props {
@@ -9,6 +12,7 @@ export const ImageStack = ({ images = [] }: Props) => (
   <ul className={styles.list}>
     {images.map((image) => (
       <li key={image}>
+        {SHOW_TITLE && <h2>{getTitle(image)}</h2>}
         <img src={`/api/image?image=${image}`} alt={image} />
       </li>
     ))}

src/config/index.ts

@@ -3,3 +3,4 @@ export const MAX_IMAGES = 10;
 export const POLL_INTERVAL = 5 * 1000;
 export const FILE_EXTENSION = "png";
 export const FILE_MIME = "image/png";
+export const SHOW_TITLE = true;

src/utils/images.ts

@@ -0,0 +1,7 @@
+export const getTitle = (url: string) => {
+  const split1 = url.split("-");
+  if (split1.length < 2) return "Filename: " + url;
+  const withoutNumbers = split1[2];
+  const lastDot = withoutNumbers.lastIndexOf(".");
+  return withoutNumbers.substring(0, lastDot);
+};