n/nyxmuks
1
0
Fork 0
forked from Mirrors/gomuks
Code Pull requests Activity

web/timeline: use content-visibility instead of loading=lazy for media

Browse source
This commit is contained in:
Tulir Asokan 2024-12-02 00:01:58 +02:00
parent b889f90c4d
commit ab9dbbcd2f
4 changed files with 9 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
web/src/ui/timeline/content/MediaMessageBody.tsx
View file

@ -62,9 +62,7 @@ const MediaMessageBody = ({ event, room, sender }: EventContentProps) => {
const renderPlaceholderElem = supportsClickToShow && (!renderMediaElem || !!contentWarning || !loaded) const renderPlaceholderElem = supportsClickToShow && (!renderMediaElem || !!contentWarning || !loaded)
const isLoadingOnlyCover = !loaded && !contentWarning && renderMediaElem const isLoadingOnlyCover = !loaded && !contentWarning && renderMediaElem
const [mediaContent, containerClass, containerStyle] = useMediaContent( const [mediaContent, containerClass, containerStyle] = useMediaContent(content, event.type, undefined, onLoad)
content, event.type, undefined, onLoad, !clickedShow,
)
let placeholderElem: JSX.Element | null = null let placeholderElem: JSX.Element | null = null
if (renderPlaceholderElem) { if (renderPlaceholderElem) {

4
web/src/ui/timeline/content/index.css
View file

@ -199,10 +199,6 @@ div.html-body {
} }
div.media-container { div.media-container {
&.image-container, &.video-container {
contain: strict;
}
> div.placeholder { > div.placeholder {
position: relative; position: relative;
width: 100%; width: 100%;

2
web/src/ui/timeline/content/useMediaContent.tsx
View file

@ -25,7 +25,6 @@ export const useMediaContent = (
evtType: EventType, evtType: EventType,
containerSize?: ImageContainerSize, containerSize?: ImageContainerSize,
onLoad?: () => void, onLoad?: () => void,
lazyLoad = true,
): [JSX.Element | null, string, CSSProperties] => { ): [JSX.Element | null, string, CSSProperties] => {
const mediaURL = content.file?.url ? getEncryptedMediaURL(content.file.url) : getMediaURL(content.url) const mediaURL = content.file?.url ? getEncryptedMediaURL(content.file.url) : getMediaURL(content.url)
const thumbnailURL = content.info?.thumbnail_file?.url const thumbnailURL = content.info?.thumbnail_file?.url
@ -34,7 +33,6 @@ export const useMediaContent = (
const style = calculateMediaSize(content.info?.w, content.info?.h, containerSize) const style = calculateMediaSize(content.info?.w, content.info?.h, containerSize)
return [<img return [<img
onLoad={onLoad} onLoad={onLoad}
loading={lazyLoad ? "lazy" : "eager"}
style={style.media} style={style.media}
src={mediaURL} src={mediaURL}
alt={content.filename ?? content.body} alt={content.filename ?? content.body}

8
web/src/util/mediasize.ts
View file

@ -39,6 +39,10 @@ export function calculateMediaSize(
container: { container: {
width: `${imageContainerWidth}px`, width: `${imageContainerWidth}px`,
height: `${imageContainerHeight}px`, height: `${imageContainerHeight}px`,
containIntrinsicWidth: `${imageContainerWidth}px`,
containIntrinsicHeight: `${imageContainerHeight}px`,
contentVisibility: "auto",
contain: "strict",
}, },
media: {}, media: {},
} }
@ -64,6 +68,10 @@ export function calculateMediaSize(
container: { container: {
width: `${width}px`, width: `${width}px`,
height: `${height}px`, height: `${height}px`,
containIntrinsicWidth: `${width}px`,
containIntrinsicHeight: `${height}px`,
contentVisibility: "auto",
contain: "strict",
}, },
media: { media: {
aspectRatio: `${origWidth} / ${origHeight}`, aspectRatio: `${origWidth} / ${origHeight}`,