tutu/src/timelines/MediaAttachmentGrid.tsx

112 lines
3.2 KiB
TypeScript
Raw Normal View History

2024-07-14 12:28:44 +00:00
import type { mastodon } from "masto";
import {
type Component,
For,
createEffect,
createRenderEffect,
createSignal,
onCleanup,
onMount,
} from "solid-js";
2024-07-14 12:28:44 +00:00
import { css } from "solid-styled";
import tootStyle from "./toot.module.css";
2024-08-12 13:55:26 +00:00
import MediaViewer from "./MediaViewer";
import { render } from "solid-js/web";
import { useWindowSize } from "@solid-primitives/resize-observer";
2024-07-14 12:28:44 +00:00
const MediaAttachmentGrid: Component<{
attachments: mastodon.v1.MediaAttachment[];
}> = (props) => {
let rootRef: HTMLElement;
const [viewerIndex, setViewerIndex] = createSignal<number>();
2024-08-05 07:33:00 +00:00
const viewerOpened = () => typeof viewerIndex() !== "undefined";
const windowSize = useWindowSize();
const vh35 = () => Math.floor(windowSize.height * 0.35);
2024-07-14 12:28:44 +00:00
createRenderEffect((lastDispose?: () => void) => {
lastDispose?.();
const vidx = viewerIndex();
if (typeof vidx === "undefined") return;
const container = document.createElement("div");
container.setAttribute("role", "presentation");
document.body.appendChild(container);
return render(() => {
onCleanup(() => {
document.body.removeChild(container);
});
return (
<MediaViewer
show={viewerOpened()}
index={viewerIndex() || 0}
onIndexUpdated={setViewerIndex}
media={props.attachments}
onClose={() => setViewerIndex()}
/>
);
}, container);
});
const openViewerFor = (index: number) => {
setViewerIndex(index);
2024-07-14 12:28:44 +00:00
};
css`
.attachments {
column-count: ${(props.attachments.length === 1 ? 1 : 3).toString()};
2024-07-14 12:28:44 +00:00
}
`;
return (
<section
ref={rootRef!}
class={[tootStyle.tootAttachmentGrp, "attachments"].join(" ")}
onClick={(e) => e.stopImmediatePropagation()}
>
<For each={props.attachments}>
{(item, index) => {
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;
const style = {
width: realWidth ? `${realWidth}px` : undefined,
height: realHeight ? `${realHeight}px` : undefined,
"aspect-ratio": aspectRatio?.toString(),
};
2024-07-14 12:28:44 +00:00
switch (item.type) {
case "image":
return (
<img
src={item.previewUrl}
style={style}
2024-07-14 12:28:44 +00:00
alt={item.description || undefined}
onClick={[openViewerFor, index()]}
loading="lazy"
></img>
);
case "video":
return (
<video
src={item.url || undefined}
style={style}
autoplay={false}
/>
);
2024-07-14 12:28:44 +00:00
case "gifv":
case "audio":
case "unknown":
return <div></div>;
}
}}
</For>
</section>
);
};
export default MediaAttachmentGrid;