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

19
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;
align-items: center; display: inline flex;
justify-content: center; align-items: center;
} justify-content: center;
} }
} }

129
src/timelines/MediaAttachmentGrid.tsx
View file

@ -161,65 +161,78 @@ 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 (
<div <Switch>
class="cell" <Match when={props.sensitive && !isReveal(index)}>
role="presentation" <div
style={itemStyle(item())} class="sensitive-placeholder"
data-sort={index} style={style()}
data-media-type={item().type} data-sort={index}
> data-media-type={item().type}
<Switch> >
<Match when={props.sensitive && !isReveal(index)}> <IconButton
<div class="sensitive-placeholder"> color="inherit"
<IconButton size="large"
color="inherit" onClick={[addReveal, index]}
size="large" aria-label="Reveal this media"
onClick={[addReveal, index]} >
aria-label="Reveal this media" <Preview />
> </IconButton>
<Preview /> </div>
</IconButton> </Match>
</div> <Match when={itemType() === "image"}>
</Match> <img
<Match when={itemType() === "image"}> src={item().previewUrl}
<img width={item().meta?.small?.width}
src={item().previewUrl} height={item().meta?.small?.height}
width={item().meta?.small?.width} alt={item().description || undefined}
height={item().meta?.small?.height} onClick={[openViewerFor, index]}
alt={item().description || undefined} loading="lazy"
onClick={[openViewerFor, index]} style={style()}
loading="lazy" data-sort={index}
></img> data-media-type={item().type}
</Match> ></img>
<Match when={itemType() === "video"}> </Match>
<video <Match when={itemType() === "video"}>
src={item().url || undefined} <video
autoplay={!props.sensitive && settings().autoPlayVideos} src={item().url || undefined}
playsinline={settings().autoPlayVideos ? true : undefined} autoplay={!props.sensitive && settings().autoPlayVideos}
controls playsinline={settings().autoPlayVideos ? true : undefined}
poster={item().previewUrl} controls
width={item().meta?.small?.width} poster={item().previewUrl}
height={item().meta?.small?.height} width={item().meta?.small?.width}
/> height={item().meta?.small?.height}
</Match> style={style()}
<Match when={itemType() === "gifv"}> data-sort={index}
<video data-media-type={item().type}
src={item().url || undefined} />
autoplay={!props.sensitive && settings().autoPlayGIFs} </Match>
controls <Match when={itemType() === "gifv"}>
playsinline /* or safari on iOS will play in full-screen */ <video
loop src={item().url || undefined}
poster={item().previewUrl} autoplay={!props.sensitive && settings().autoPlayGIFs}
width={item().meta?.small?.width} controls
height={item().meta?.small?.height} playsinline /* or safari on iOS will play in full-screen */
/> loop
</Match> poster={item().previewUrl}
<Match when={itemType() === "audio"}> width={item().meta?.small?.width}
<audio src={item().url || undefined} controls></audio> height={item().meta?.small?.height}
</Match> style={style()}
</Switch> data-sort={index}
</div> data-media-type={item().type}
/>
</Match>
<Match when={itemType() === "audio"}>
<audio
src={item().url || undefined}
controls
data-sort={index}
data-media-type={item().type}
></audio>
</Match>
</Switch>
); );
}} }}
</Index> </Index>