Rubicon/tutu
1
0
Fork 0
Code Issues 18 Pull requests 1 Projects 1 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
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;
contain: layout style;
>.cell {
> :where(img, video, .sensitive-placeholder) {
max-height: 35vh;
min-height: 40px;
min-width: 40px;
@ -24,16 +24,13 @@
border-color: var(--media-color-accent, var(--tutu-color-surface-d));
}
& > :where(img, video, .sensitive-placeholder) {
object-fit: contain;
width: 100%;
height: 100%;
}
object-fit: contain;
}
& > .sensitive-placeholder {
display: flex;
align-items: center;
justify-content: center;
}
>.sensitive-placeholder {
display: inline-flex;
display: inline flex;
align-items: center;
justify-content: center;
}
}

129
src/timelines/MediaAttachmentGrid.tsx
View file

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