perf(desktop): cache display media and retain shown images (#3264)

This commit is contained in:
Hampus authored and GitHub committed 2026-10-08 03:02:41 +02:00
1 parent 6a24ac3f4e
commit ee1c861eb2
14 files changed
+172 -18

No files matched your search

@@ -22,6 +22,7 @@ import {useDeleteAttachment} from '@app/features/messaging/hooks/useDeleteAttach
import {useMatureMedia} from '@app/features/messaging/hooks/useMatureMedia';
import {useMediaFavorite} from '@app/features/messaging/hooks/useMediaFavorite';
import {useNearViewport} from '@app/features/messaging/hooks/useNearViewport';
import {resolveDesktopCrossOriginMediaURL} from '@app/features/messaging/utils/DesktopResourceUrl';
import {createDownloadHandler} from '@app/features/messaging/utils/FileDownloadUtils';
import * as ImageCacheUtils from '@app/features/messaging/utils/ImageCacheUtils';
import {buildMediaProxyURL, mediaDevicePixelRatio} from '@app/features/messaging/utils/MediaProxyUtils';
@@ -575,7 +576,7 @@ const EmbedVideo: FC<EmbedVideoProps> = observer(
muted
playsInline
preload="metadata"
src={effectiveSrc}
src={resolveDesktopCrossOriginMediaURL(effectiveSrc)}
tabIndex={-1}
onLoadedMetadata={handleMetadataProbeLoaded}
data-flx="channel.embeds.media.embed-video.metadata-probe"
@@ -609,7 +610,7 @@ const EmbedVideo: FC<EmbedVideoProps> = observer(
<video
ref={inlineVideoRef}
className={styles.inlineVideo}
src={effectiveSrc}
src={resolveDesktopCrossOriginMediaURL(effectiveSrc)}
poster={presentedPosterSrc ?? undefined}
autoPlay
playsInline
@@ -7,6 +7,7 @@ import {useMaybeMessageViewContext} from '@app/features/channel/components/Messa
import {PAUSE_DESCRIPTOR, PLAY_DESCRIPTOR} from '@app/features/i18n/utils/CommonMessageDescriptors';
import {getCachedNumberFormat} from '@app/features/i18n/utils/IntlCache';
import {useAttachmentRefreshOnError} from '@app/features/messaging/hooks/useAttachmentRefreshOnError';
import {resolveDesktopCrossOriginMediaURL} from '@app/features/messaging/utils/DesktopResourceUrl';
import {buildMediaProxyURL} from '@app/features/messaging/utils/MediaProxyUtils';
import {Logger} from '@app/features/platform/utils/AppLogger';
import {remFromPx} from '@app/features/theme/layout/RemFromPx';
@@ -324,7 +325,7 @@ const VoiceMessagePlayer: React.FC<VoiceMessagePlayerProps> = observer(
>
<audio
ref={mediaRef as React.RefObject<HTMLAudioElement>}
src={hasStarted || wantsMetadata ? effectiveSrc : undefined}
src={hasStarted || wantsMetadata ? resolveDesktopCrossOriginMediaURL(effectiveSrc) : undefined}
preload={wantsMetadata ? 'metadata' : 'none'}
onError={handleMediaError}
data-flx="channel.embeds.media.voice-message-player.audio"