From 392cb23541a2b04a811b711501cfd54f653f6027 Mon Sep 17 00:00:00 2001
From: Paul <paulmakles@gmail.com>
Date: Sat, 10 Jul 2021 15:55:21 +0100
Subject: [PATCH] Add spoilers back.
---
.../messaging/attachments/Attachment.tsx | 102 ++----------------
.../common/messaging/attachments/Grid.tsx | 10 ++
.../common/messaging/attachments/Spoiler.tsx | 33 ++++++
3 files changed, 52 insertions(+), 93 deletions(-)
create mode 100644 src/components/common/messaging/attachments/Spoiler.tsx
diff --git a/src/components/common/messaging/attachments/Attachment.tsx b/src/components/common/messaging/attachments/Attachment.tsx
index d3a9980..ca219c5 100644
--- a/src/components/common/messaging/attachments/Attachment.tsx
+++ b/src/components/common/messaging/attachments/Attachment.tsx
@@ -2,7 +2,6 @@ import { Attachment as AttachmentRJS } from "revolt.js/dist/api/objects";
import styles from "./Attachment.module.scss";
import classNames from "classnames";
-import { Text } from "preact-i18n";
import { useContext, useState } from "preact/hooks";
import { useIntermediate } from "../../../../context/intermediate/Intermediate";
@@ -11,6 +10,7 @@ import { AppContext } from "../../../../context/revoltjs/RevoltClient";
import AttachmentActions from "./AttachmentActions";
import TextFile from "./TextFile";
import { SizedGrid } from "./Grid";
+import Spoiler from "./Spoiler";
interface Props {
attachment: AttachmentRJS;
@@ -24,7 +24,6 @@ export default function Attachment({ attachment, hasContent }: Props) {
const { openScreen } = useIntermediate();
const { filename, metadata } = attachment;
const [spoiler, setSpoiler] = useState(filename.startsWith("SPOILER_"));
- const [loaded, setLoaded] = useState(false);
const url = client.generateFileURL(
attachment,
@@ -36,7 +35,7 @@ export default function Attachment({ attachment, hasContent }: Props) {
case "Image": {
return (
<SizedGrid width={metadata.width} height={metadata.height}
- className={classNames({ [styles.margin]: hasContent })}>
+ className={classNames({ [styles.margin]: hasContent, spoiler })}>
<img src={url} alt={filename}
className={styles.image}
loading="lazy"
@@ -46,15 +45,18 @@ export default function Attachment({ attachment, hasContent }: Props) {
onMouseDown={(ev) =>
ev.button === 1 && window.open(url, "_blank")
} />
+ { spoiler && <Spoiler set={setSpoiler} /> }
</SizedGrid>
)
}
+
case "Video": {
return (
<div className={classNames(styles.container, { [styles.margin]: hasContent })}
style={{ '--width': metadata.width + 'px' }}>
<AttachmentActions attachment={attachment} />
- <SizedGrid width={metadata.width} height={metadata.height}>
+ <SizedGrid width={metadata.width} height={metadata.height}
+ className={classNames({ spoiler })}>
<video src={url} alt={filename}
controls
loading="lazy"
@@ -64,58 +66,12 @@ export default function Attachment({ attachment, hasContent }: Props) {
ev.button === 1 && window.open(url, "_blank")
}
/>
+ { spoiler && <Spoiler set={setSpoiler} /> }
</SizedGrid>
</div>
)
}
-
-
-
- /*return (
- <div
- className={styles.container}
- onClick={() => spoiler && setSpoiler(false)}>
- {spoiler && (
- <div className={styles.overflow}>
- <span>
- <Text id="app.main.channel.misc.spoiler_attachment" />
- </span>
- </div>
- )}
- <img
- src={url}
- alt={filename}
- width={metadata.width}
- height={metadata.height}
- loading="lazy"
- data-has-content={hasContent}
- data-spoiler={spoiler}
- className={classNames(
- styles.attachment,
- styles.image,
- loaded && styles.loaded,
- metadata.width > metadata.height
- ? styles.long
- : styles.tall,
- )}
- style={{
- "--width": metadata.width,
- "--height": metadata.height,
- "--width-px": metadata.width + "px",
- "--height-px": metadata.height + "px",
- }}
- onClick={() =>
- openScreen({ id: "image_viewer", attachment })
- }
- onMouseDown={(ev) =>
- ev.button === 1 && window.open(url, "_blank")
- }
- onLoad={() => setLoaded(true)}
- />
- </div>
- );
- }*/
case "Audio": {
return (
<div
@@ -126,48 +82,7 @@ export default function Attachment({ attachment, hasContent }: Props) {
</div>
);
}
- /*case "Video": {
- return (
- <div
- className={styles.container}
- onClick={() => spoiler && setSpoiler(false)}>
- {spoiler && (
- <div className={styles.overflow}>
- <span>
- <Text id="app.main.channel.misc.spoiler_attachment" />
- </span>
- </div>
- )}
- <div
- data-spoiler={spoiler}
- data-has-content={hasContent}
- className={classNames(styles.attachment, styles.video)}>
- <AttachmentActions attachment={attachment} />
- <video
- src={url}
- width={metadata.width}
- height={metadata.height}
- loading="lazy"
- className={classNames(
- metadata.width > metadata.height
- ? styles.long
- : styles.tall,
- )}
- style={{
- "--width": metadata.width,
- "--height": metadata.height,
- "--width-px": metadata.width + "px",
- "--height-px": metadata.height + "px",
- }}
- controls
- onMouseDown={(ev) =>
- ev.button === 1 && window.open(url, "_blank")
- }
- />
- </div>
- </div>
- );
- }*/
+
case "Text": {
return (
<div
@@ -178,6 +93,7 @@ export default function Attachment({ attachment, hasContent }: Props) {
</div>
);
}
+
default: {
return (
<div
diff --git a/src/components/common/messaging/attachments/Grid.tsx b/src/components/common/messaging/attachments/Grid.tsx
index d391714..b07a559 100644
--- a/src/components/common/messaging/attachments/Grid.tsx
+++ b/src/components/common/messaging/attachments/Grid.tsx
@@ -3,6 +3,8 @@ import { Children } from "../../../../types/Preact";
const Grid = styled.div`
display: grid;
+ overflow: hidden;
+
max-width: min(var(--attachment-max-width), 100%, var(--width));
max-height: min(var(--attachment-max-height), var(--height));
aspect-ratio: var(--aspect-ratio);
@@ -19,6 +21,14 @@ const Grid = styled.div`
grid-area: 1 / 1;
}
+
+ &.spoiler {
+ img, video {
+ filter: blur(44px);
+ }
+
+ border-radius: var(--border-radius);
+ }
`;
export default Grid;
diff --git a/src/components/common/messaging/attachments/Spoiler.tsx b/src/components/common/messaging/attachments/Spoiler.tsx
new file mode 100644
index 0000000..7857060
--- /dev/null
+++ b/src/components/common/messaging/attachments/Spoiler.tsx
@@ -0,0 +1,33 @@
+import { Text } from "preact-i18n";
+import styled from "styled-components"
+
+const Base = styled.div`
+ display: grid;
+ place-items: center;
+
+ z-index: 1;
+ grid-area: 1 / 1;
+
+ cursor: pointer;
+ user-select: none;
+ text-transform: uppercase;
+
+ span {
+ padding: 8px;
+ color: var(--foreground);
+ background: var(--primary-background);
+ border-radius: calc(var(--border-radius) * 4);
+ }
+`;
+
+interface Props {
+ set: (v: boolean) => void
+}
+
+export default function Spoiler({ set }: Props) {
+ return (
+ <Base onClick={() => set(false)}>
+ <span><Text id="app.main.channel.misc.spoiler_attachment" /></span>
+ </Base>
+ )
+}
\ No newline at end of file
--
GitLab