Compare commits
4 commits
73a56357d9
...
da32969f5a
Author | SHA1 | Date | |
---|---|---|---|
|
da32969f5a | ||
|
6b889666ad | ||
|
6e28d8808b | ||
|
41d15887a7 |
2 changed files with 56 additions and 41 deletions
|
@ -116,6 +116,13 @@ const Profile: Component = () => {
|
|||
gap: 16px;
|
||||
}
|
||||
|
||||
.description {
|
||||
& :global(a) {
|
||||
color: inherit;
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
|
||||
.acct-grp {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
|
@ -274,6 +281,7 @@ const Profile: Component = () => {
|
|||
average: colors.hex,
|
||||
text: colors.isDark ? "white" : "black",
|
||||
});
|
||||
ins.destroy();
|
||||
}}
|
||||
></img>
|
||||
</div>
|
||||
|
@ -309,6 +317,7 @@ const Profile: Component = () => {
|
|||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="description"
|
||||
ref={(e) =>
|
||||
createRenderEffect(() => (e.innerHTML = description() || ""))
|
||||
}
|
||||
|
|
|
@ -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,68 +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(),
|
||||
);
|
||||
};
|
||||
|
||||
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={Object.assign(
|
||||
{
|
||||
width: `${size().width}px`,
|
||||
height: `${size().height}px`,
|
||||
},
|
||||
accentColor ? { "--media-color-accent": accentColor } : {},
|
||||
)}
|
||||
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}
|
||||
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}
|
||||
poster={item().previewUrl}
|
||||
width={item().meta?.small?.width}
|
||||
height={item().meta?.small?.height}
|
||||
style={itemStyle(item())}
|
||||
/>
|
||||
);
|
||||
|
||||
|
@ -188,7 +194,7 @@ const MediaAttachmentGrid: Component<{
|
|||
return <div></div>;
|
||||
}
|
||||
}}
|
||||
</For>
|
||||
</Index>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
|
Loading…
Reference in a new issue