cswimr/revite
1
0
Fork 0
mirror of https://github.com/revoltchat/revite.git synced 2024-11-10 01:03:36 -05:00
Code Issues Projects Releases Packages Wiki Activity

Add spoilers back.

Browse source
This commit is contained in:
Paul 2021-07-10 15:55:21 +01:00
parent ef5944b065
commit 392cb23541
3 changed files with 52 additions and 93 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

102
src/components/common/messaging/attachments/Attachment.tsx
View file

@ -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

10
src/components/common/messaging/attachments/Grid.tsx
View file

@ -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;

33
src/components/common/messaging/attachments/Spoiler.tsx Normal file
View file

@ -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>
)
}