Mirrors/gomuks
1
0
Fork 1
mirror of https://github.com/tulir/gomuks.git synced 2025-04-20 18:43:41 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

Add spoilers to videos too

Browse source
This commit is contained in:
nexy7574 2024-11-17 20:51:01 +00:00
parent e1352872a0
commit 73c034b3d9
1 changed files with 17 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
web/src/ui/timeline/content/useMediaContent.tsx
View file

@ -37,10 +37,9 @@ export const useMediaContent = (
const onClick = (event: React.MouseEvent<HTMLImageElement>) => { const onClick = (event: React.MouseEvent<HTMLImageElement>) => {
// Check if it is spoilered. If it is, remove the attachment-spoiler class // Check if it is spoilered. If it is, remove the attachment-spoiler class
if(event.currentTarget.parentElement?.classList.contains("attachment-spoiler")) { if(event.currentTarget.parentElement?.classList.contains("attachment-spoiler")) {
console.debug("Removing spoiler") event.preventDefault()
event.currentTarget.parentElement?.classList.remove("attachment-spoiler") event.currentTarget.parentElement?.classList.remove("attachment-spoiler")
} else { } else {
console.debug("Opening lightbox")
return lightBox(event) return lightBox(event)
} }
} }
@ -66,6 +65,19 @@ export const useMediaContent = (
event.currentTarget.currentTime = 0 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 return [<video
autoPlay={autoplay} autoPlay={autoplay}
controls={controls} controls={controls}
@ -74,9 +86,11 @@ export const useMediaContent = (
onMouseOver={onMouseOver} onMouseOver={onMouseOver}
onMouseOut={onMouseOut} onMouseOut={onMouseOut}
preload="none" preload="none"
title={content["m.spoiler.reason"]}
onPlay={onPlay}
> >
<source src={mediaURL} type={content.info?.mimetype}/> <source src={mediaURL} type={content.info?.mimetype}/>
</video>, "video-container", {}] </video>, classes.join(" "), {}]
} else if (content.msgtype === "m.audio") { } else if (content.msgtype === "m.audio") {
return [<audio controls src={mediaURL} preload="none"/>, "audio-container", {}] return [<audio controls src={mediaURL} preload="none"/>, "audio-container", {}]
} else if (content.msgtype === "m.file") { } else if (content.msgtype === "m.file") {