Rubicon/tutu
1
0
Fork 0
Code Issues 13 Pull requests Projects 2 Releases Activity Actions

MediaAttachmentGrid: improve layout as length % 2

Browse source
This commit is contained in:
thislight 2024-10-08 17:43:33 +08:00
parent eefe2812df
commit dbb93fd76c
No known key found for this signature in database
GPG key ID: A50F9451AC56A63E
1 changed files with 22 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
src/timelines/MediaAttachmentGrid.tsx
View file

@ -51,9 +51,19 @@ const MediaAttachmentGrid: Component<{
setViewerIndex(index);
};
const columnCount = () => {
if (props.attachments.length === 1) {
return 1;
} else if (props.attachments.length % 2 === 0) {
return 2;
} else {
return 3;
}
};
css`
.attachments {
column-count: ${(props.attachments.length === 1 ? 1 : 3).toString()};
column-count: ${columnCount.toString()};
}
`;
return (
@ -104,17 +114,17 @@ const MediaAttachmentGrid: Component<{
/>
);
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
/>
);
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":