From 66df97414329838533172c475ad91edbf36cc96d Mon Sep 17 00:00:00 2001
From: f0x52 <f0x@cthu.lu>
Date: Fri, 12 May 2023 13:50:37 +0200
Subject: [PATCH] [frogend/bugfix] fix dynamicSpoiler elements (#1771)

---
 web/source/frontend/index.js | 34 ++++++++++++++++------------------
 web/template/status.tmpl     |  2 +-
 2 files changed, 17 insertions(+), 19 deletions(-)

diff --git a/web/source/frontend/index.js b/web/source/frontend/index.js
index 2fa035adb..6fb1d5be7 100644
--- a/web/source/frontend/index.js
+++ b/web/source/frontend/index.js
@@ -104,31 +104,29 @@ function dynamicSpoiler(className, updateFunc) {
 }
 
 dynamicSpoiler("text-spoiler", (spoiler) => {
-	const button = spoiler.querySelector("button");
+	const button = spoiler.querySelector(".button");
 
-	if (button != undefined) {
-		return () => {
-			button.textContent = spoiler.open
-				? "Show less"
-				: "Show more";
-		};
-	}
+	return () => {
+		button.textContent = spoiler.open
+			? "Show less"
+			: "Show more";
+	};
 });
 
-dynamicSpoiler("video-spoiler", (spoiler) => {
-	const video = spoiler.querySelector(".plyr-video");
+dynamicSpoiler("media-spoiler", (spoiler) => {
 	const eye = spoiler.querySelector(".eye.button");
+	const video = spoiler.querySelector(".plyr-video");
 
-	if (video != undefined) {
-		return () => {
-			if (spoiler.open) {
-				eye.setAttribute("aria-label", "Hide media");
-			} else {
-				eye.setAttribute("aria-label", "Show media");
+	return () => {
+		if (spoiler.open) {
+			eye.setAttribute("aria-label", "Hide media");
+		} else {
+			eye.setAttribute("aria-label", "Show media");
+			if (video) {
 				video.pause();
 			}
-		};
-	}
+		}
+	};
 });
 
 Array.from(document.getElementsByClassName("plyr-video")).forEach((video) => {
diff --git a/web/template/status.tmpl b/web/template/status.tmpl
index a8c9792ab..08cbdcf01 100644
--- a/web/template/status.tmpl
+++ b/web/template/status.tmpl
@@ -55,7 +55,7 @@
 		{{range $index, $media := .}}
 		{{with $media}}
 		<div class="media-wrapper">
-			<details class="{{.Type}}-spoiler" {{if not $.Sensitive}}open{{end}}>
+			<details class="{{.Type}}-spoiler media-spoiler" {{if not $.Sensitive}}open{{end}}>
 				<summary>
 					<div class="show sensitive button" aria-hidden="true">
 						Show sensitive media