cswimr/revite
1
0
Fork 0
mirror of https://github.com/revoltchat/revite.git synced 2024-12-25 07:02:10 -05:00
Code Issues Projects Releases Packages Wiki Activity

remove content jumping when loading image and video attachments

Browse source
This commit is contained in:
bree 2021-07-08 10:22:42 -04:00
parent 69193e9a46
commit f0397f8af8
No known key found for this signature in database
GPG key ID: 1B2E56B9EC985B96
2 changed files with 43 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
src/components/common/messaging/attachments/Attachment.module.scss
View file

@ -17,18 +17,26 @@
margin-top: 4px;
}
&.image {
&.image, &.video > video {
cursor: pointer;
max-height: 640px;
max-width: min(480px, 100%);
aspect-ratio: var(--width) / var(--height);
max-height: min(640px, var(--height-px));
max-width: min(480px, 100%, var(--width-px));
object-fit: contain;
}
&.loaded {
width: auto;
&.image {
&.long {
width: min(100%, var(--width-px));
height: auto;
}
&.tall {
height: min(100%, var(--height-px));
width: auto;
}
}
&.video {
@ -40,13 +48,13 @@
video {
border-radius: 0 0 6px 6px;
max-height: 640px;
max-width: min(480px, 100%);
}
&.long {
height: auto;
}
video.loaded {
width: auto;
height: auto;
&.tall {
width: auto;
}
}
}

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

@ -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,
@ -50,20 +49,28 @@ export default function Attachment({ attachment, hasContent }: Props) {
alt={filename}
width={metadata.width}
height={metadata.height}
loading="lazy"
data-spoiler={spoiler}
data-has-content={hasContent}
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>
);
@ -99,12 +106,22 @@ export default function Attachment({ attachment, hasContent }: Props) {
src={url}
width={metadata.width}
height={metadata.height}
className={classNames(loaded && styles.loaded)}
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")
}
onLoadedMetadata={() => setLoaded(true)}
/>
</div>
</div>