Rubicon/tutu
1
0
Fork 0
Code Issues 19 Pull requests Projects Activity Actions

MediaAttachmentGrid: calc only when not loaded
All checks were successful
/ depoly (push) Successful in 1m7s
Details

Browse source 
* This is a workaround, the best solution is we do
  the calculation correctly.
This commit is contained in:
thislight 2024-09-25 17:37:11 +08:00
parent f4ce206c52
commit 6306c5afbe
No known key found for this signature in database
GPG key ID: A50F9451AC56A63E
1 changed files with 9 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
src/timelines/MediaAttachmentGrid.tsx
View file

@ -64,28 +64,29 @@ const MediaAttachmentGrid: Component<{
>
<For each={props.attachments}>
{(item, index) => {
const [loaded, setLoaded] = createSignal(false)
const width = item.meta?.small?.width;
const height = item.meta?.small?.height;
const aspectRatio = item.meta?.small?.aspect;
const maxHeight = vh35();
const realHeight = height && height > maxHeight ? maxHeight : height;
const realWidth =
height && height > maxHeight
? maxHeight * (aspectRatio ?? 1)
width && height && height > maxHeight
? maxHeight / (aspectRatio ?? 1)
: width;
const style = {
const style = () => loaded() ? undefined : {
width: realWidth ? `${realWidth}px` : undefined,
height: realHeight ? `${realHeight}px` : undefined,
"aspect-ratio": aspectRatio?.toString(),
};
switch (item.type) {
case "image":
return (
<img
src={item.previewUrl}
style={style}
style={style()}
alt={item.description || undefined}
onClick={[openViewerFor, index()]}
onLoad={[setLoaded, true]}
loading="lazy"
></img>
);
@ -93,8 +94,10 @@ const MediaAttachmentGrid: Component<{
return (
<video
src={item.url || undefined}
style={style}
style={style()}
onLoadedMetadata={[setLoaded, true]}
autoplay={false}
controls
/>
);
case "gifv":