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

MediaAttachmentGrid: fix layout on WebKit
All checks were successful
/ depoly (push) Successful in 1m22s
Details

Browse source
This commit is contained in:
thislight 2024-11-20 21:51:29 +08:00
parent 8d8d2a8fb1
commit 147c9fbce1
No known key found for this signature in database
GPG key ID: FCFE5192241CCD4E
2 changed files with 79 additions and 69 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
src/timelines/MediaAttachmentGrid.css
View file

@ -6,7 +6,7 @@
gap: 4px; gap: 4px;
contain: layout style; contain: layout style;
>.cell { > :where(img, video, .sensitive-placeholder) {
max-height: 35vh; max-height: 35vh;
min-height: 40px; min-height: 40px;
min-width: 40px; min-width: 40px;
@ -24,16 +24,13 @@
border-color: var(--media-color-accent, var(--tutu-color-surface-d)); border-color: var(--media-color-accent, var(--tutu-color-surface-d));
} }
& > :where(img, video, .sensitive-placeholder) {
object-fit: contain; object-fit: contain;
width: 100%;
height: 100%;
} }
& > .sensitive-placeholder { >.sensitive-placeholder {
display: flex; display: inline-flex;
display: inline flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
}
} }

29
src/timelines/MediaAttachmentGrid.tsx
View file

@ -161,17 +161,17 @@ const MediaAttachmentGrid: Component<{
<Index each={props.attachments}> <Index each={props.attachments}>
{(item, index) => { {(item, index) => {
const itemType = () => item().type; const itemType = () => item().type;
const style = createMemo(() => itemStyle(item()));
return ( return (
<Switch>
<Match when={props.sensitive && !isReveal(index)}>
<div <div
class="cell" class="sensitive-placeholder"
role="presentation" style={style()}
style={itemStyle(item())}
data-sort={index} data-sort={index}
data-media-type={item().type} data-media-type={item().type}
> >
<Switch>
<Match when={props.sensitive && !isReveal(index)}>
<div class="sensitive-placeholder">
<IconButton <IconButton
color="inherit" color="inherit"
size="large" size="large"
@ -190,6 +190,9 @@ const MediaAttachmentGrid: Component<{
alt={item().description || undefined} alt={item().description || undefined}
onClick={[openViewerFor, index]} onClick={[openViewerFor, index]}
loading="lazy" loading="lazy"
style={style()}
data-sort={index}
data-media-type={item().type}
></img> ></img>
</Match> </Match>
<Match when={itemType() === "video"}> <Match when={itemType() === "video"}>
@ -201,6 +204,9 @@ const MediaAttachmentGrid: Component<{
poster={item().previewUrl} poster={item().previewUrl}
width={item().meta?.small?.width} width={item().meta?.small?.width}
height={item().meta?.small?.height} height={item().meta?.small?.height}
style={style()}
data-sort={index}
data-media-type={item().type}
/> />
</Match> </Match>
<Match when={itemType() === "gifv"}> <Match when={itemType() === "gifv"}>
@ -213,13 +219,20 @@ const MediaAttachmentGrid: Component<{
poster={item().previewUrl} poster={item().previewUrl}
width={item().meta?.small?.width} width={item().meta?.small?.width}
height={item().meta?.small?.height} height={item().meta?.small?.height}
style={style()}
data-sort={index}
data-media-type={item().type}
/> />
</Match> </Match>
<Match when={itemType() === "audio"}> <Match when={itemType() === "audio"}>
<audio src={item().url || undefined} controls></audio> <audio
src={item().url || undefined}
controls
data-sort={index}
data-media-type={item().type}
></audio>
</Match> </Match>
</Switch> </Switch>
</div>
); );
}} }}
</Index> </Index>