include meta content, update subtitle styling

assets/css/index.css

@@ -224,9 +224,6 @@ li:has(> a):hover::marker {
   margin: 0;
   padding: 0 !important;
   line-height: 1.5;
-  /* color: var(--cc-primary-light); */
-  /* font-family: var(--ff-serif); */
-  /* margin-bottom: 0.5em; */
 }
 
 .pseudo-list-item {
@@ -538,6 +535,7 @@ header desktop
   }
   .dates li .time {
     display: block;
+    text-align: end;
   }
   .ae-subtitle {
     grid-column: 1 / -1;

assets/js/subtitles.js

@@ -1,70 +1,143 @@
 document.addEventListener("DOMContentLoaded", () => {
   const subtitles = {
-    0: "Kaya! This is the website of exploratory music festival Audible Edge, which will happen in Boorloo and Walyalup between April 26th and 28th this year.",
-    10: "This festival focusses on experimental, marginal and not-normal music.",
-    17: "[JM] We like how being playful, silly and freaky opens us up to new and even challenging experiences.",
-    22: "And we like trying to make experimental music accessible to all kinds of folks.",
-    27: "We hope this website and design by Alex Turner and Oli Rawlings, reflects this attitude.",
-    32: "[AM] If you have access needs or questions, we can do our best to support these via the Accessibility page.",
-    40: "You can also turn off the CSS with the Plain Text View button. By pressing the button, it will show the plain - text version of the site.",
-    48: "The full program is announced on March 13, with a launch party at Astral Weeks, a listening bar in Northbridge.",
-    56: "There'll be vinyl DJ sets by Sookie, and a live performance by improvising quartet Group Therapy. It's free, so we'd love to see you there.",
-    64: "In the meantime, check out the program for our Night School, a series of workshops, discussions and talks happening between March 24 and April 21.",
-    75: "On this launch page you can click on each little 'a' and 'e' button to hear someone from the Audible Edge team saying 'a' or 'e'.",
-    83: "It is very silly and we hope you have lots of fun creating your own tiny AE sonic collage piece.",
+    0: {
+      speaker: "AM",
+      text: "Kaya! This is the website of exploratory music festival Audible Edge, which will happen in Boorloo and Walyalup between April 26th and 28th this year.",
+    },
+    10: {
+      speaker: "AM",
+      text: "This festival focusses on experimental, marginal and not-normal music.",
+    },
+    17: {
+      speaker: "JM",
+      text: "We like how being playful, silly and freaky opens us up to new and even challenging experiences.",
+    },
+    22: {
+      speaker: "JM",
+      text: "And we like trying to make experimental music accessible to all kinds of folks.",
+    },
+    27: {
+      speaker: "JM",
+      text: "We hope this website and design by Alex Turner and Oli Rawlings, reflects this attitude.",
+    },
+    32: {
+      speaker: "AM",
+      text: "If you have access needs or questions, we can do our best to support these via the Accessibility page.",
+    },
+    40: {
+      speaker: "AM",
+      text: "You can also turn off the CSS with the Plain Text View button. By pressing the button, it will show the plain - text version of the site.",
+    },
+    48: {
+      speaker: "JM",
+      text: "The full program is announced on March 13, with a launch party at Astral Weeks, a listening bar in Northbridge.",
+    },
+    56: {
+      speaker: "JM",
+      text: "There'll be vinyl DJ sets by Sookie, and a live performance by improvising quartet Group Therapy. It's free, so we'd love to see you there.",
+    },
+    64: {
+      speaker: "AM",
+      text: "In the meantime, check out the program for our Night School, a series of workshops, discussions and talks happening between March 24 and April 21.",
+    },
+    75: {
+      speaker: "JM",
+      text: "On this launch page you can click on each little 'a' and 'e' button to hear someone from the Audible Edge team saying 'a' or 'e'.",
+    },
+    83: {
+      speaker: "JM",
+      text: "It is very silly and we hope you have lots of fun creating your own tiny AE sonic collage piece.",
+    },
   };
 
   const audioPlayer = document.getElementById("audio-intro-0");
   const subtitlesDiv = document.getElementById("subtitles");
 
-  // audioPlayer.addEventListener("timeupdate", () => {
-  //   const currentTime = Math.floor(audioPlayer.currentTime);
-  //   if (subtitles[currentTime]) {
-  //     subtitlesDiv.textContent = subtitles[currentTime];
-  //   }
-  // });
-
-  // audioPlayer.addEventListener("ended", () => {
-  //   subtitlesDiv.textContent = ""; // Clear subtitles when audio ends
-  // });
-
-  audioPlayer.addEventListener("pause", () => {
-    subtitlesDiv.classList.toggle("hidden");
-    subtitlesDiv.textContent = ""; // clear subtitles when audio is paused
-  });
+  // insert or update the current speaker span
+  function updateSubtitleContent(text, speaker) {
+    subtitlesDiv.innerHTML = ""; // clear the current content
+    if (speaker) {
+      const speakerSpan = document.createElement("span");
+      speakerSpan.className = "current-speaker";
+      speakerSpan.textContent = speaker + ": ";
+      subtitlesDiv.appendChild(speakerSpan);
+    }
+    subtitlesDiv.appendChild(document.createTextNode(text));
+  }
 
   audioPlayer.addEventListener("play", () => {
     subtitlesDiv.classList.toggle("hidden");
-    // Show subtitles when audio is played
     const currentTime = Math.floor(audioPlayer.currentTime);
-    if (subtitles[currentTime]) {
-      subtitlesDiv.textContent = subtitles[currentTime];
+    const subtitleEntry = subtitles[currentTime];
+    if (subtitleEntry) {
+      updateSubtitleContent(subtitleEntry.text, subtitleEntry.speaker);
     } else {
-      // This branch handles the case where the audio is resumed but the current time
-      // does not exactly match any key in the subtitles object.
-      // Find the nearest previous subtitle key to display.
       const keys = Object.keys(subtitles)
         .map(Number)
         .filter((time) => time <= currentTime);
       if (keys.length > 0) {
         const nearestTime = Math.max(...keys);
-        subtitlesDiv.textContent = subtitles[nearestTime];
+        const nearestEntry = subtitles[nearestTime];
+        updateSubtitleContent(nearestEntry.text, nearestEntry.speaker);
       }
     }
   });
 
   audioPlayer.addEventListener("timeupdate", () => {
     const currentTime = Math.floor(audioPlayer.currentTime);
-    if (subtitles[currentTime]) {
-      subtitlesDiv.textContent = subtitles[currentTime];
-    }
-    // hide subtitles if there's no matching subtitle for current time
-    else if (!subtitles[currentTime] && audioPlayer.played.length > 0) {
-      // subtitlesDiv.textContent = "";
+    const subtitleEntry = subtitles[currentTime];
+    if (subtitleEntry) {
+      updateSubtitleContent(subtitleEntry.text, subtitleEntry.speaker);
     }
   });
 
   audioPlayer.addEventListener("ended", () => {
     subtitlesDiv.textContent = ""; // clear subtitles when audio ends
   });
+
+  audioPlayer.addEventListener("pause", () => {
+    subtitlesDiv.classList.toggle("hidden");
+    subtitlesDiv.textContent = ""; // clear subtitles when audio is paused
+  });
+
+  // audioPlayer.addEventListener("pause", () => {
+  //   subtitlesDiv.classList.toggle("hidden");
+  //   subtitlesDiv.textContent = ""; // clear subtitles when audio is paused
+  // });
+
+  // audioPlayer.addEventListener("play", () => {
+  //   subtitlesDiv.classList.toggle("hidden");
+  //   // show subtitles when audio is played
+  //   const currentTime = Math.floor(audioPlayer.currentTime);
+  //   if (subtitles[currentTime]) {
+  //     subtitlesDiv.textContent = subtitles[currentTime];
+  //   } else {
+  //     // handle the case where the audio is resumed but the current time
+  //     // does not exactly match any key in the subtitles object
+
+  //     // find the nearest previous subtitle key to display.
+  //     const keys = Object.keys(subtitles)
+  //       .map(Number)
+  //       .filter((time) => time <= currentTime);
+  //     if (keys.length > 0) {
+  //       const nearestTime = Math.max(...keys);
+  //       subtitlesDiv.textContent = subtitles[nearestTime];
+  //     }
+  //   }
+  // });
+
+  // audioPlayer.addEventListener("timeupdate", () => {
+  //   const currentTime = Math.floor(audioPlayer.currentTime);
+  //   if (subtitles[currentTime]) {
+  //     subtitlesDiv.textContent = subtitles[currentTime];
+  //   }
+  //   // hide subtitles if there's no matching subtitle for current time
+  //   else if (!subtitles[currentTime] && audioPlayer.played.length > 0) {
+  //     // subtitlesDiv.textContent = "";
+  //   }
+  // });
+
+  // audioPlayer.addEventListener("ended", () => {
+  //   subtitlesDiv.textContent = ""; // clear subtitles when audio ends
+  // });
 });

content/artists/31_sookie/artist.txt

@@ -23,7 +23,7 @@ Links:
 
 - 
   url: https://a-t.com.au/
-  text: ""
+  text: Website
   popup: 'true'
   type: link
 

site.webmanifest

@@ -0,0 +1 @@
+{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}

site/snippets/header.php

@@ -10,7 +10,7 @@
   <?php if ($page->isHomePage()) : ?>
     <title><?= $site->title()->esc() ?></title>
   <?php else : ?>
-    <title><?= $site->title()->esc() ?> | <?= $page->title()->esc() ?></title>
+    <title>Audible Edge &#x25cf; <?= $page->title()->esc() ?></title>
   <?php endif ?>
 
   <script>
@@ -45,9 +45,11 @@
   <link rel="shortcut icon" type="image/x-icon" href="<?= url('favicon.ico') ?>">
   <meta name="mobile-web-app-capable" content="yes">
   <meta name="apple-mobile-web-app-capable" content="yes">
-  <meta name="description" content="<?= $site->metaDescription()->esc() ?> ">
-  <meta name="keywords" content="<?= $site->metaKeywords()->esc() ?>">
+
+  <meta name="description" content="<?= strip_tags($site->metaDescription()->value()) ?>">
+  <meta name="keywords" content="<?= strip_tags($site->metaKeywords()->value()) ?>">
   <meta name="author" content="Tone List">
+  <meta property="og:image" content="<?= url('/assets/AudibleEdge24.jpg') ?>">
 </head>
 
 <body>

site/templates/artist.php

@@ -126,7 +126,7 @@
         <?php endif; ?>
 
         <?php if ($page->support()->isNotEmpty()) : ?>
-            <p class="support"><?= html($page->support()) ?></p>
+            <p class="support"><span>Supported by: </span><?= html($page->support()) ?></p>
         <?php endif; ?>
     </section>
 

site/templates/home.php

@@ -354,7 +354,6 @@
         font-size: var(--fs-med);
         font-family: var(--ff-serif);
         font-style: italic;
-        /* margin-left: 1em; */
     }
 
     #subtitles {
@@ -364,6 +363,14 @@
         z-index: 10000;
         font-family: var(--ff-serif);
         padding: 0.25em 1.5em;
+        padding-left: 3em;
+    }
+
+    #subtitles .current-speaker {
+        font-style: italic;
+        color: var(--cc-olive-light);
+        position: absolute;
+        left: 1em;
     }
 
     @media (max-width: 769px) {