From 73c034b3d90ea32992050c0114afd35033fdfd0c Mon Sep 17 00:00:00 2001
From: nexy7574 <git@nexy7574.co.uk>
Date: Sun, 17 Nov 2024 20:51:01 +0000
Subject: [PATCH] Add spoilers to videos too

---
 .../ui/timeline/content/useMediaContent.tsx   | 20 ++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

diff --git a/web/src/ui/timeline/content/useMediaContent.tsx b/web/src/ui/timeline/content/useMediaContent.tsx
index 1b29ef0..2e190bc 100644
--- a/web/src/ui/timeline/content/useMediaContent.tsx
+++ b/web/src/ui/timeline/content/useMediaContent.tsx
@@ -37,10 +37,9 @@ export const useMediaContent = (
 		const onClick = (event: React.MouseEvent<HTMLImageElement>) => {
 			// Check if it is spoilered. If it is, remove the attachment-spoiler class
 			if(event.currentTarget.parentElement?.classList.contains("attachment-spoiler")) {
-				console.debug("Removing spoiler")
+				event.preventDefault()
 				event.currentTarget.parentElement?.classList.remove("attachment-spoiler")
 			} else {
-				console.debug("Opening lightbox")
 				return lightBox(event)
 			}
 		}
@@ -66,6 +65,19 @@ export const useMediaContent = (
 				event.currentTarget.currentTime = 0
 			}
 		}
+		let classes = ["video-container"]
+		if(content["m.spoiler"] === true) {
+			classes.push("attachment-spoiler")
+		}
+		const onPlay = (event: React.MouseEvent<HTMLVideoElement>) => {
+			// onclick doesn't appear to work for <video> elements, so we use onPlay instead
+			if(classes.includes("attachment-spoiler")) {
+				event.preventDefault()
+				event.currentTarget.pause()  // stop it autoplaying before the spoiler is removed
+				classes = classes.filter((c) => c !== "attachment-spoiler")
+				event.currentTarget.parentElement?.classList.remove("attachment-spoiler")
+			}
+		}
 		return [<video
 			autoPlay={autoplay}
 			controls={controls}
@@ -74,9 +86,11 @@ export const useMediaContent = (
 			onMouseOver={onMouseOver}
 			onMouseOut={onMouseOut}
 			preload="none"
+			title={content["m.spoiler.reason"]}
+			onPlay={onPlay}
 		>
 			<source src={mediaURL} type={content.info?.mimetype}/>
-		</video>, "video-container", {}]
+		</video>, classes.join(" "), {}]
 	} else if (content.msgtype === "m.audio") {
 		return [<audio controls src={mediaURL} preload="none"/>, "audio-container", {}]
 	} else if (content.msgtype === "m.file") {