130 lines
3.8 KiB
TypeScript
130 lines
3.8 KiB
TypeScript
import type { mastodon } from "masto";
|
|
import {
|
|
type Component,
|
|
For,
|
|
createEffect,
|
|
createRenderEffect,
|
|
createSignal,
|
|
onCleanup,
|
|
onMount,
|
|
} from "solid-js";
|
|
import { css } from "solid-styled";
|
|
import tootStyle from "./toot.module.css";
|
|
import MediaViewer from "./MediaViewer";
|
|
import { render } from "solid-js/web";
|
|
import { useWindowSize } from "@solid-primitives/resize-observer";
|
|
|
|
const MediaAttachmentGrid: Component<{
|
|
attachments: mastodon.v1.MediaAttachment[];
|
|
}> = (props) => {
|
|
let rootRef: HTMLElement;
|
|
const [viewerIndex, setViewerIndex] = createSignal<number>();
|
|
const viewerOpened = () => typeof viewerIndex() !== "undefined";
|
|
const windowSize = useWindowSize();
|
|
const vh35 = () => Math.floor(windowSize.height * 0.35);
|
|
|
|
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);
|
|
};
|
|
|
|
css`
|
|
.attachments {
|
|
column-count: ${(props.attachments.length === 1 ? 1 : 3).toString()};
|
|
}
|
|
`;
|
|
return (
|
|
<section
|
|
ref={rootRef!}
|
|
class={[tootStyle.tootAttachmentGrp, "attachments"].join(" ")}
|
|
onClick={(e) => e.stopImmediatePropagation()}
|
|
>
|
|
<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 =
|
|
width && height && height > maxHeight
|
|
? maxHeight / (aspectRatio ?? 1)
|
|
: width;
|
|
const style = () =>
|
|
loaded()
|
|
? undefined
|
|
: {
|
|
width: realWidth ? `${realWidth}px` : undefined,
|
|
height: realHeight ? `${realHeight}px` : undefined,
|
|
};
|
|
switch (item.type) {
|
|
case "image":
|
|
return (
|
|
<img
|
|
src={item.previewUrl}
|
|
style={style()}
|
|
alt={item.description || undefined}
|
|
onClick={[openViewerFor, index()]}
|
|
onLoad={[setLoaded, true]}
|
|
loading="lazy"
|
|
></img>
|
|
);
|
|
case "video":
|
|
return (
|
|
<video
|
|
src={item.url || undefined}
|
|
style={style()}
|
|
onLoadedMetadata={[setLoaded, true]}
|
|
autoplay={false}
|
|
controls
|
|
/>
|
|
);
|
|
case "gifv": // Later we can handle the preview
|
|
return (
|
|
<video
|
|
src={item.url || undefined}
|
|
style={style()}
|
|
onLoadedMetadata={[setLoaded, true]}
|
|
autoplay={false}
|
|
controls
|
|
playsinline /* or safari on iOS will play in full-screen */
|
|
loop
|
|
/>
|
|
);
|
|
|
|
case "audio":
|
|
case "unknown":
|
|
return <div></div>;
|
|
}
|
|
}}
|
|
</For>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default MediaAttachmentGrid;
|