mirror of
https://github.com/revoltchat/revite.git
synced 2024-12-25 07:02:10 -05:00
remove content jumping when loading image and video attachments
This commit is contained in:
parent
69193e9a46
commit
f0397f8af8
2 changed files with 43 additions and 18 deletions
|
@ -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 {
|
||||||
|
@ -39,14 +47,14 @@
|
||||||
|
|
||||||
video {
|
video {
|
||||||
border-radius: 0 0 6px 6px;
|
border-radius: 0 0 6px 6px;
|
||||||
|
|
||||||
max-height: 640px;
|
|
||||||
max-width: min(480px, 100%);
|
|
||||||
}
|
|
||||||
|
|
||||||
video.loaded {
|
&.long {
|
||||||
width: auto;
|
height: auto;
|
||||||
height: auto;
|
}
|
||||||
|
|
||||||
|
&.tall {
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in a new issue