pepepper/fluxer
1
0 Fork 0
mirror of https://github.com/fluxerapp/fluxer synced 2026-10-17 21:15:32 +09:00
Code Issues Packages Projects Releases Wiki Activity

perf(app): reuse pooled gif videos instead of caching blobs (#1928)

Browse Source
This commit is contained in:
Hampus authored and GitHub committed 2026-08-24 12:47:13 +02:00
1 parent e0464ee5be
commit d0b4688a6c
3 files changed
+74 -178
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

fluxer_app/src/features/channel/components/pickers/shared/usePooledVideo.ts
+42 -73
View File
@@ -1,18 +1,15 @@
// SPDX-License-Identifier: AGPL-3.0-or-later
import {safePause, safePlay} from '@app/features/channel/components/GifVideoPool';
import {Platform} from '@app/features/platform/types/Platform';
import {useEffect, useRef} from 'react';
const BYPASS_BLOB_URL_PATH = Platform.isIOSWeb;
const HAVE_METADATA_READY_STATE = 1;
interface GifVideoPoolLike {
getElement: (key: string) => HTMLVideoElement;
getBlobUrl: (key: string) => Promise<string>;
takeElement: () => HTMLVideoElement;
registerActive: (video: HTMLVideoElement) => void;
unregisterActive: (video: HTMLVideoElement) => void;
poolElement: (video: HTMLVideoElement, key: string) => void;
returnElement: (video: HTMLVideoElement) => void;
isGloballyPaused?: () => boolean;
}
@@ -22,8 +19,7 @@ export function usePooledVideo({
videoPool,
autoPlay,
enabled = true,
preload = 'auto',
useBlobCache = true,
preload,
playbackStartTime = null,
}: {
src: string | null | undefined;
@@ -32,86 +28,59 @@ export function usePooledVideo({
autoPlay: boolean;
enabled?: boolean;
preload?: HTMLVideoElement['preload'];
useBlobCache?: boolean;
playbackStartTime?: number | null;
}) {
const videoRef = useRef<HTMLVideoElement | null>(null);
const effectivePreload = preload ?? (autoPlay ? 'auto' : 'metadata');
useEffect(() => {
if (!enabled) return;
if (!src) return;
const container = containerRef.current;
if (!container) return;
let cancelled = false;
let attached = false;
let playOnMetadata: (() => void) | null = null;
const video = videoPool.getElement(src);
const video = videoPool.takeElement();
videoRef.current = video;
video.autoplay = autoPlay && playbackStartTime === null;
if (video.autoplay) {
video.setAttribute('autoplay', '');
} else {
video.removeAttribute('autoplay');
}
video.preload = preload;
video.autoplay = false;
video.preload = effectivePreload;
video.src = src;
container.appendChild(video);
videoPool.registerActive(video);
attached = true;
const seekToPlaybackStart = () => {
if (playbackStartTime === null || playbackStartTime <= 0) return;
const duration = Number.isFinite(video.duration) && video.duration > 0 ? video.duration : null;
const target = duration === null ? playbackStartTime : Math.min(playbackStartTime, Math.max(0, duration - 0.05));
try {
video.currentTime = target;
} catch {}
};
const playFromStartTime = () => {
if (cancelled) return;
seekToPlaybackStart();
void safePlay(video);
};
const run = async () => {
if (BYPASS_BLOB_URL_PATH || !useBlobCache) {
if (video.src !== src) video.src = src;
} else {
try {
const blobUrl = await videoPool.getBlobUrl(src);
if (cancelled) return;
if (video.src !== blobUrl) video.src = blobUrl;
} catch {
if (cancelled) return;
if (video.src !== src) video.src = src;
}
}
if (cancelled) return;
const currentContainer = containerRef.current;
if (!currentContainer) return;
currentContainer.appendChild(video);
if (videoPool.isGloballyPaused?.() ?? false) {
safePause(video);
} else if (playbackStartTime !== null && playbackStartTime > 0 && video.readyState < HAVE_METADATA_READY_STATE) {
playOnMetadata = playFromStartTime;
video.addEventListener('loadedmetadata', playOnMetadata, {once: true});
} else if (autoPlay) {
playFromStartTime();
}
};
void run();
return () => {
cancelled = true;
if (playOnMetadata) {
video.removeEventListener('loadedmetadata', playOnMetadata);
}
if (attached) {
videoPool.unregisterActive(video);
}
safePause(video);
try {
video.currentTime = 0;
} catch {}
videoPool.poolElement(video, src);
videoPool.unregisterActive(video);
videoPool.returnElement(video);
if (videoRef.current === video) {
videoRef.current = null;
}
};
}, [src, enabled, containerRef, videoPool, autoPlay, preload, useBlobCache, playbackStartTime]);
}, [src, enabled, containerRef, videoPool, effectivePreload]);
useEffect(() => {
const video = videoRef.current;
if (!video) return;
const globallyPaused = videoPool.isGloballyPaused?.() ?? false;
video.autoplay = autoPlay && playbackStartTime === null && !globallyPaused;
if (globallyPaused) return;
if (!autoPlay) {
safePause(video);
return;
}
const seekTarget = playbackStartTime !== null && playbackStartTime > 0 ? playbackStartTime : null;
const playFromStartTime = () => {
if (seekTarget !== null) {
const duration = Number.isFinite(video.duration) && video.duration > 0 ? video.duration : null;
const target = duration === null ? seekTarget : Math.min(seekTarget, Math.max(0, duration - 0.05));
try {
video.currentTime = target;
} catch {}
}
void safePlay(video);
};
if (seekTarget !== null && video.readyState < HAVE_METADATA_READY_STATE) {
video.addEventListener('loadedmetadata', playFromStartTime, {once: true});
return () => {
video.removeEventListener('loadedmetadata', playFromStartTime);
};
}
playFromStartTime();
return;
}, [src, enabled, containerRef, videoPool, effectivePreload, autoPlay, playbackStartTime]);
return videoRef;
}