add pause / play button

site/src/components/PlayerControls.astro

@@ -0,0 +1,87 @@
+---
+
+---
+
+<div class="controls">
+  <button id="pausetoggle" class="playing" title="Pause"></button>
+</div>
+<style>
+  .controls {
+    display: none;
+    position: absolute;
+    top: 30px;
+    right: 30px;
+    z-index: 300;
+  }
+
+  /* The value content-box tells the div to place any border on the outside, increasing the width or height. If we change this value to border-box, the border is added to the inside of the box. */
+  button {
+    position: relative;
+    background-color: transparent;
+    box-sizing: border-box;
+    width: 0;
+    height: 22px;
+    border-style: solid;
+    border-width: 10px 0 10px 18px;
+    border-color: transparent transparent transparent rgba(255, 255, 255, 0.4);
+    cursor: pointer;
+    will-change: border-width;
+    /* transition: all 0.2s ease; */
+
+    &::after {
+      position: absolute;
+      top: -22px;
+      left: -33px;
+      border: 1px solid rgba(255, 255, 255, 0.4);
+      width: 44px;
+      height: 44px;
+      border-radius: 30px;
+      content: "";
+    }
+
+    &.playing {
+      border-style: double;
+      border-width: 0px 0 0px 20px;
+
+      &::after {
+        top: -12px;
+      }
+    }
+
+    &:hover {
+      border-color: transparent transparent transparent #fff;
+
+      &::after {
+        border-color: #fff;
+      }
+    }
+  }
+</style>
+<script>
+  import {
+    toggleAnimationState,
+    getAnimationState,
+  } from "../lib/browser/animations";
+
+  const controlContainer: HTMLDivElement | null =
+    document.querySelector(".controls");
+
+  const pauseToggle: HTMLButtonElement | null =
+    document.querySelector("#pausetoggle");
+
+  if (!controlContainer || !pauseToggle) {
+    console.warn("cannot setup controls, no selector match");
+  } else {
+    controlContainer.style.display = "block";
+    pauseToggle.addEventListener("click", () => {
+      toggleAnimationState();
+      if (getAnimationState() === "playing") {
+        pauseToggle.classList.add("playing");
+        pauseToggle.setAttribute("title", "Pause");
+      } else {
+        pauseToggle.classList.remove("playing");
+        pauseToggle.setAttribute("title", "Play");
+      }
+    });
+  }
+</script>

site/src/lib/browser/animations.ts

@@ -0,0 +1,43 @@
+let paused = false;
+
+export const getAnimationState = () => {
+  return paused ? "paused" : "playing";
+};
+
+const updatePostAnimations = (playState: "paused" | "running") => {
+  document.querySelectorAll(".post").forEach((post) => {
+    (post as HTMLDivElement).style.animationPlayState = playState;
+  });
+
+  document.querySelectorAll(".post-load-bar-fill").forEach((postBar) => {
+    (postBar as HTMLDivElement).style.animationPlayState = playState;
+  });
+};
+
+const pauseAllAnimations = () => {
+  paused = true;
+  // const animations = document.getAnimations();
+  // animations.forEach((anim) => anim.pause());
+  updatePostAnimations("paused");
+  (document.querySelector("#filledchart") as SVGSVGElement).pauseAnimations();
+};
+
+const resumeAllAnimations = () => {
+  paused = false;
+  // const animations = document.getAnimations();
+  // animations.forEach((anim) => anim.play());
+  updatePostAnimations("running");
+  (document.querySelector("#filledchart") as SVGSVGElement).unpauseAnimations();
+};
+
+export const toggleAnimationState = () => {
+  const state = getAnimationState();
+  switch (state) {
+    case "paused":
+      resumeAllAnimations();
+      break;
+    case "playing":
+      pauseAllAnimations();
+      break;
+  }
+};

site/src/lib/browser/posts.ts

@@ -7,10 +7,6 @@ export const handlePostEvents = () => {
   const posts: NodeListOf<HTMLElement> = document.querySelectorAll(".post");
   const postContainer = document.querySelector(".posts");
   if (postContainer) {
-    // postContainer.addEventListener("scroll", () => {
-    // console.log('>', event)
-    // });
-
     posts.forEach((post) => {
       post.addEventListener("animationstart", (event) => {
         const postDiv = event.target as HTMLDivElement | null;
@@ -19,6 +15,11 @@ export const handlePostEvents = () => {
           return;
         }
 
+        if (postDiv.classList.contains("post") === false) {
+          // child events may bubble up
+          return;
+        }
+
         const top =
           postDiv.getBoundingClientRect().top -
           postTopOffset +

site/src/pages/[...enabler].astro

@@ -5,6 +5,7 @@ import Layout from "../layouts/Layout.astro";
 import KilledGraph from "../generated/killed.astro";
 import PostTypeIcon from "../components/PostTypeIcon.astro";
 import OpacityOverlay from "../components/OpacityOverlay.astro";
+import PlayerControls from "../components/PlayerControls.astro";
 import { getTimeline } from "../lib/server/timeline";
 import { getSvgDomain } from "../lib/server/svg";
 import { getEnhancedPosts } from "../lib/server/posts";
@@ -42,6 +43,7 @@ const {
     <div class="graph">
       <div style={{ position: "relative" }}>
         <svg
+          id="filledchart"
           xmlns="http://www.w3.org/2000/svg"
           viewBox="0 0 400 235"
           style="width: 100vw; opacity: 0.9"
@@ -262,6 +264,7 @@ const {
     </div>
     <div class="bottom-line"></div>
     <div class="scroll-bottom-fade"></div>
+    <PlayerControls />
   </main>
 </Layout>