Merge pull request #404 from openscript-ch/401-clickable-bubbles-odd-behavior

openscript · web-flow · commit 362a33e681f4 · 2025-03-27T19:06:00.000+01:00
401-clickable-bubbles-odd-behavior
diff --git a/.changeset/giant-oranges-raise.md b/.changeset/giant-oranges-raise.md
@@ -0,0 +1,5 @@
+---
+"@quassel/website": patch
+---
+
+Fix bubble and play button odd behaviours, and insert metadata into <html> tags.
diff --git a/apps/website/src/components/Accordion.astro b/apps/website/src/components/Accordion.astro
@@ -196,7 +196,7 @@ items.forEach((item) => {
 </div>
 
 <script>
-  const items = document.querySelectorAll(".accordion li");
+  const items = document.querySelectorAll(".accordion .features > ul > li");
   const ACTIVE_CLASS = "active";
 
   function setScreenshot(item: Element) {
diff --git a/apps/website/src/components/Head.astro b/apps/website/src/components/Head.astro
diff --git a/apps/website/src/layouts/Document.astro b/apps/website/src/layouts/Document.astro
@@ -8,6 +8,33 @@ import "@fontsource-variable/montserrat";
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width" />
+    <link rel="icon" href="/favicon.ico" type="image/x-icon" sizes="any" />
+    <link rel="icon" href="/favicon-16x16.png" type="image/png" sizes="16x16" />
+    <link rel="icon" href="/favicon-32x32.png" type="image/png" sizes="32x32" />
+    <link rel="icon" href="/favicon-48x48.png" type="image/png" sizes="48x48" />
+    <link rel="icon" href="/favicon-64x64.png" type="image/png" sizes="64x64" />
+    <link rel="icon" href="/favicon-96x96.png" type="image/png" sizes="96x96" />
+    <link rel="icon" href="/android-chrome-192x192.png" type="image/png" sizes="192x192" />
+    <title>Quassel</title>
+    <meta property="og:type" content="website" />
+    <meta
+      name="description"
+      content="Quassel is a web-based application designed to aid researchers in collecting and analyzing data on children's language exposure."
+    />
+    <meta property="og:locale" content="en_US" />
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content="https://www.quassel.ch/" />
+    <meta property="og:title" content="Quassel" />
+    <meta
+      property="og:description"
+      content="Quassel (previously Language Exposure Questionnaire) is a web-based application designed to aid researchers in collecting and analyzing data on children's language exposure. "
+    />
+    <meta property="og:image" content="/opengraph.png" />
+    <meta property="og:image:alt" content="Quassel Application Display" />
+    <meta
+      name="keywords"
+      content="Quassel, children, calendar-like interface, language, langauge exposure, web application, periods of life, data entry personnel, UZH, openscript, open source"
+    />
   </head>
   <body>
     <slot />
diff --git a/apps/website/src/pages/index.astro b/apps/website/src/pages/index.astro
@@ -1,5 +1,4 @@
 ---
-import Head from "../components/Head.astro";
 import Site from "../layouts/Site.astro";
 import Header from "../sections/Header.astro";
 import Footer from "../sections/Footer.astro";
@@ -9,7 +8,6 @@ import Administration from "../sections/Administration.astro";
 import About from "../sections/About.astro";
 ---
 
-<Head title="Quassel" />
 <Site>
   <Header />
   <main>
diff --git a/apps/website/src/sections/Spotlight.astro b/apps/website/src/sections/Spotlight.astro
@@ -44,6 +44,10 @@ import PlayButton from "../assets/videos/play-button.svg";
     margin-inline: var(--spacing-xl);
   }
 
+  .video-not-interactive {
+    pointer-events: none;
+  }
+
   video::-webkit-media-controls-panel {
     background-image: none;
     filter: brightness(0.2);
@@ -57,6 +61,11 @@ import PlayButton from "../assets/videos/play-button.svg";
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
+    visibility: visible;
+  }
+
+  .playButton-invisible {
+    visibility: hidden;
   }
 
   .playButton :hover {
@@ -96,14 +105,23 @@ import PlayButton from "../assets/videos/play-button.svg";
 <script>
   document.addEventListener("DOMContentLoaded", () => {
     const video = document.querySelector("video") as HTMLVideoElement;
-    const myButton = document.getElementsByClassName("playButton")[0] as HTMLButtonElement;
+    const playButton = document.getElementsByClassName("playButton")[0] as HTMLButtonElement;
     let isPlaying = false;
 
-    myButton.addEventListener("click", () => {
-      if (!isPlaying) {
-        video.play();
-        myButton.style.visibility = "hidden";
-        isPlaying = true;
+    video.classList.add("video-not-interactive");
+
+    playButton.addEventListener("click", () => {
+      video.play();
+      isPlaying = true;
+      playButton.classList.add("playButton-invisible");
+      video.classList.remove("video-not-interactive");
+    });
+
+    video.addEventListener("pause", () => {
+      if (isPlaying) {
+        isPlaying = false;
+        playButton.classList.remove("playButton-invisible");
+        video.classList.add("video-not-interactive");
       }
     });
   });

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"@quassel/website": patch
 +---
++
 +Fix bubble and play button odd behaviours, and insert metadata into <html> tags.