External/5chan
1
0
Fork 0
mirror of https://github.com/bitsocialnet/5chan.git synced 2026-08-03 07:41:04 +02:00
Code Issues Packages Projects Releases Wiki Activity

Update use-fetch-gif-first-frame.ts

Browse Source
This commit is contained in:
Tom (plebeius.eth)
2024-10-19 19:09:48 +02:00
parent f0a6ab0b15
commit 7ac06de9d1
1 changed files with 8 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/hooks/use-fetch-gif-first-frame.ts
+8 -11
View File
@@ -1,16 +1,14 @@
import { useEffect, useState } from 'react';
import localForageLru from '@plebbit/plebbit-react-hooks/dist/lib/localforage-lru/index.js';
const GIF_FRAME_CACHE_KEY = 'gifFrameCache';
const gifFrameDb = localForageLru.createInstance({ name: 'plebchanGifFrames', size: 500 });
const getCachedGifFrame = (url: string): string | null => {
const cache = JSON.parse(localStorage.getItem(GIF_FRAME_CACHE_KEY) || '{}');
return cache[url] || null;
const getCachedGifFrame = async (url: string): Promise<string | null> => {
return await gifFrameDb.getItem(url);
};
const setCachedGifFrame = (url: string, frameUrl: string): void => {
const cache = JSON.parse(localStorage.getItem(GIF_FRAME_CACHE_KEY) || '{}');
cache[url] = frameUrl;
localStorage.setItem(GIF_FRAME_CACHE_KEY, JSON.stringify(cache));
const setCachedGifFrame = async (url: string, frameUrl: string): Promise<void> => {
await gifFrameDb.setItem(url, frameUrl);
};
export const fetchImage = (url: string): Promise<ArrayBuffer> => {
@@ -75,7 +73,7 @@ const useFetchGifFirstFrame = (url: string | undefined) => {
const fetchFrame = async () => {
try {
const cachedFrame = getCachedGifFrame(url);
const cachedFrame = await getCachedGifFrame(url);
if (cachedFrame) {
if (isActive) setFrameUrl(cachedFrame);
return;
@@ -85,7 +83,7 @@ const useFetchGifFirstFrame = (url: string | undefined) => {
const objectUrl = URL.createObjectURL(blob);
if (isActive) {
setFrameUrl(objectUrl);
setCachedGifFrame(url, objectUrl);
await setCachedGifFrame(url, objectUrl);
}
} catch (error) {
console.error('Failed to load GIF frame:', error);
@@ -95,7 +93,6 @@ const useFetchGifFirstFrame = (url: string | undefined) => {
fetchFrame();
// Cleanup function to avoid setting state on unmounted component
return () => {
isActive = false;
};