From 58d4b5619826210e63b7c0c5265f81db8a42210c Mon Sep 17 00:00:00 2001
From: Jon <134811123+jonsmy@users.noreply.github.com>
Date: Fri, 2 Feb 2024 18:08:49 +0000
Subject: [PATCH] js/mod/recent_posts.js: add audible bell on new post

---
 js/mod/recent_posts.js | 47 ++++++++++++++++++++++++++++--------------
 1 file changed, 32 insertions(+), 15 deletions(-)

diff --git a/js/mod/recent_posts.js b/js/mod/recent_posts.js
index cda7a363..8763a521 100644
--- a/js/mod/recent_posts.js
+++ b/js/mod/recent_posts.js
@@ -32,8 +32,10 @@
             const kPullEveryX = loadIntFromStorage("pull-every-x") ?? 8000
             const kRecentXPosts = parseInt(kLocationPath.slice(17).split(/[^\d]/)[0])
             const kWasEnabled = loadIntFromStorage("enabled") == 1
+            const kBellWasEnabled = loadIntFromStorage("bell-enabled") == 1
 
             let liveUpdateEnabled = false
+            let liveUpdateBellEnabled = kBellWasEnabled
             let liveUpdateAbortController = null
             let liveUpdateIntervalId = null
             let liveUpdateFaviconChanged = false
@@ -106,15 +108,14 @@
                 pageNext.href = `/mod.php?/recent/${kRecentXPosts}&last=${getPostTimestamp(oldestPost).getTime() / 1000}`
             }
 
-            const createCheckbox = () => {
-                const id = "jon-liveposts-enabled"
+            const createCheckbox = (id, text, initialState) => {
                 const div = document.createElement("div")
                 const label = document.createElement("label")
                 const checkbox = document.createElement("input")
                 checkbox.type = "checkbox"
                 checkbox.id = id
-                checkbox.checked = kWasEnabled
-                label.innerText = "live update: "
+                checkbox.checked = initialState
+                label.innerText = text
                 label.for = id
                 div.style.display = "inline"
                 div.append(" ")
@@ -124,9 +125,6 @@
                 return { checkbox, label, div }
             }
 
-            const pageNums = Array.prototype.find.apply(document.body.children, [ el => el.nodeName == "P" ])
-            const form = createCheckbox()
-
             const liveUpdateToggle = enabled => {
                 if (enabled) {
                     liveUpdateEnabled = true
@@ -140,16 +138,38 @@
                     liveUpdateAbortController = null
                 }
 
-                if (form.checkbox.checked != enabled) {
-                    form.checkbox.checked = enabled
+                if (kLiveForm.checkbox.checked != enabled) {
+                    kLiveForm.checkbox.checked = enabled
                 }
             }
 
-            form.checkbox.addEventListener("change", () => {
-                localStorage.setItem("jon-liveposts::enabled", form.checkbox.checked ? "1" : "0")
-                liveUpdateToggle(form.checkbox.checked)
+            const pageNums = Array.prototype.find.apply(document.body.children, [ el => el.nodeName == "P" ])
+            const kLiveForm = createCheckbox("jon-liveposts-enabled", "live: ", kWasEnabled)
+            const kBellForm = createCheckbox("jon-liveposts-bell-enabled", "beep: ", kBellWasEnabled)
+            const kBell = new Audio("/static/jannybell.mp3")
+
+            kLiveForm.checkbox.addEventListener("change", () => {
+                localStorage.setItem("jon-liveposts::enabled", kLiveForm.checkbox.checked ? "1" : "0")
+                liveUpdateToggle(kLiveForm.checkbox.checked)
             })
 
+            kBellForm.checkbox.addEventListener("change", () => {
+                localStorage.setItem("jon-liveposts::bell-enabled", kBellForm.checkbox.checked ? "1" : "0")
+                liveUpdateBellEnabled = kBellForm.checkbox.checked
+            })
+
+            $(document).on("new_post", () => {
+                if (liveUpdateBellEnabled && kBell.paused) {
+                    // XXX: Site requires autoplay media permission to do this
+                    kBell.play().catch(console.error)
+                }
+            })
+
+            for (const form of [ kLiveForm, kBellForm ]) {
+                pageNums.append("|")
+                pageNums.append(form.div)
+            }
+
             document.body.addEventListener("mousemove", () => {
                 if (liveUpdateFaviconChanged) {
                     liveUpdateFaviconChanged = false
@@ -157,9 +177,6 @@
                 }
             })
 
-            pageNums.append("|")
-            pageNums.append(form.div)
-
             if (kWasEnabled) {
                 setTimeout(() => liveUpdateToggle(true), 1)
             }