cswimr/revite
1
0
Fork 0
mirror of https://github.com/revoltchat/revite.git synced 2024-12-25 23:22:06 -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; margin-top: 4px;
} }
&.image { &.image, &.video > video {
cursor: pointer; cursor: pointer;
max-height: 640px; aspect-ratio: var(--width) / var(--height);
max-width: min(480px, 100%); max-height: min(640px, var(--height-px));
max-width: min(480px, 100%, var(--width-px));
object-fit: contain; object-fit: contain;
}
&.loaded { &.image {
width: auto; &.long {
width: min(100%, var(--width-px));
height: auto; height: auto;
} }
&.tall {
height: min(100%, var(--height-px));
width: auto;
}
} }
&.video { &.video {
@ -40,13 +48,13 @@
video { video {
border-radius: 0 0 6px 6px; border-radius: 0 0 6px 6px;
max-height: 640px; &.long {
max-width: min(480px, 100%); height: auto;
} }
video.loaded { &.tall {
width: auto; width: auto;
height: 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 { openScreen } = useIntermediate();
const { filename, metadata } = attachment; const { filename, metadata } = attachment;
const [spoiler, setSpoiler] = useState(filename.startsWith("SPOILER_")); const [spoiler, setSpoiler] = useState(filename.startsWith("SPOILER_"));
const [loaded, setLoaded] = useState(false);
const url = client.generateFileURL( const url = client.generateFileURL(
attachment, attachment,
@ -50,20 +49,28 @@ export default function Attachment({ attachment, hasContent }: Props) {
alt={filename} alt={filename}
width={metadata.width} width={metadata.width}
height={metadata.height} height={metadata.height}
loading="lazy"
data-spoiler={spoiler} data-spoiler={spoiler}
data-has-content={hasContent} data-has-content={hasContent}
className={classNames( className={classNames(
styles.attachment, styles.attachment,
styles.image, 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={() => onClick={() =>
openScreen({ id: "image_viewer", attachment }) openScreen({ id: "image_viewer", attachment })
} }
onMouseDown={(ev) => onMouseDown={(ev) =>
ev.button === 1 && window.open(url, "_blank") ev.button === 1 && window.open(url, "_blank")
} }
onLoad={() => setLoaded(true)}
/> />
</div> </div>
); );
@ -99,12 +106,22 @@ export default function Attachment({ attachment, hasContent }: Props) {
src={url} src={url}
width={metadata.width} width={metadata.width}
height={metadata.height} 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 controls
onMouseDown={(ev) => onMouseDown={(ev) =>
ev.button === 1 && window.open(url, "_blank") ev.button === 1 && window.open(url, "_blank")
} }
onLoadedMetadata={() => setLoaded(true)}
/> />
</div> </div>
</div> </div>