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

MediaAttachmentGrid: reduce closure creation

Browse source
This commit is contained in:
thislight 2024-10-29 19:35:40 +08:00
parent 41d15887a7
commit 6e28d8808b
No known key found for this signature in database
GPG key ID: A50F9451AC56A63E
1 changed files with 47 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

94
src/timelines/MediaAttachmentGrid.tsx
View file

@ -2,6 +2,7 @@ import type { mastodon } from "masto";
import {
type Component,
For,
Index,
createMemo,
createRenderEffect,
createSignal,
@ -103,6 +104,31 @@ const MediaAttachmentGrid: Component<{
};
});
const itemStyle = (item: mastodon.v1.MediaAttachment) => {
const { width, height } = constraintedSize(
item.meta?.small || { width: 1, height: 1 },
{ width: 2, height: 2 },
itemMaxSize(),
);
// I don't know why mastodon does not return this
// and the condition for it to return this.
// Anyway, It is useless now.
// My hope is the FastAverageColor, but
// we may need better tool to manage the performance impact
// before using this. See #37.
// TODO: use fast average color to extract accent color
const accentColor = item.meta?.colors?.accent;
return Object.assign(
{
width: `${width}px`,
height: `${height}px`,
},
accentColor ? { "--media-color-accent": accentColor } : {},
);
};
css`
.attachments {
column-count: ${columnCount().toString()};
@ -118,74 +144,48 @@ const MediaAttachmentGrid: Component<{
}
}}
>
<For each={props.attachments}>
<Index each={props.attachments}>
{(item, index) => {
// I don't know why mastodon does not return this
// and the condition for it to return this.
// Anyway, It is useless now.
// My hope is the FastAverageColor, but
// we may need better tool to manage the performance impact
// before using this. See #37.
// TODO: use fast average color to extract accent color
const accentColor = item.meta?.colors?.accent;
const { width, height } = item.meta?.small || {};
const size = () => {
return constraintedSize(
item.meta?.small || { width: 1, height: 1 },
{ width: 2, height: 2 },
itemMaxSize(),
);
};
const style = () => {
return Object.assign(
{
width: `${size().width}px`,
height: `${size().height}px`,
},
accentColor ? { "--media-color-accent": accentColor } : {},
);
};
switch (item.type) {
switch (item().type) {
case "image":
return (
<img
src={item.previewUrl}
width={width}
height={height}
alt={item.description || undefined}
onClick={[openViewerFor, index()]}
data-sort={index}
src={item().previewUrl}
width={item().meta?.small?.width}
height={item().meta?.small?.height}
alt={item().description || undefined}
onClick={[openViewerFor, index]}
loading="lazy"
style={style()}
style={itemStyle(item())}
></img>
);
case "video":
return (
<video
src={item.url || undefined}
data-sort={index}
src={item().url || undefined}
autoplay={settings().autoPlayVideos}
playsinline={settings().autoPlayVideos ? true : undefined}
controls
poster={item.previewUrl}
width={width}
height={height}
style={style()}
poster={item().previewUrl}
width={item().meta?.small?.width}
height={item().meta?.small?.height}
style={itemStyle(item())}
/>
);
case "gifv":
return (
<video
src={item.url || undefined}
src={item().url || undefined}
autoplay={settings().autoPlayGIFs}
controls
playsinline /* or safari on iOS will play in full-screen */
loop
poster={item.previewUrl}
width={width}
height={height}
style={style()}
poster={item().previewUrl}
width={item().meta?.small?.width}
height={item().meta?.small?.height}
style={itemStyle(item())}
/>
);
@ -194,7 +194,7 @@ const MediaAttachmentGrid: Component<{
return <div></div>;
}
}}
</For>
</Index>
</section>
);
};