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

MediaAttachmentGrid: calc only when not loaded

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