Closed plebeius-eth closed 2 weeks ago
it should also fetch the dimensions, which are displayed on 4chan next to the link, in parentheses
https://t.me/plebchanreact/8954
6f8a6e38d49adff7252287268db512d792e448be
export const getCachedThumbnail = (url: string): string | null => {
const cache = JSON.parse(localStorage.getItem(THUMBNAIL_CACHE_KEY) || '{}');
return cache[url] || null;
};
export const setCachedThumbnail = (url: string, thumbnail: string): void => {
const cache = JSON.parse(localStorage.getItem(THUMBNAIL_CACHE_KEY) || '{}');
cache[url] = thumbnail;
localStorage.setItem(THUMBNAIL_CACHE_KEY, JSON.stringify(cache));
};
you can't do this, the cache will grow forever and never gets cleared, and as it grows, it becomes slower and slower to parse.
the browser has a key value store database called indexeddb. it has an easy to use API using this library https://www.npmjs.com/package/localforage this means you dont need to json parse/stringify to store a key, which solves your problem of wasting resources to parse/stringify.
the other problem of the forever growing cache can be solved by using a "last recently used" (LRU) cache algorithm, which deletes from the cache the oldest used item when it reaches the maximum. there were no libraries that combined both LRU and indexeddb so we made our own. there's an example of how to use it here https://github.com/plebbit/plebones/blob/32a922ab1f03b1227dbff7f80113aeb59834f536/src/hooks/use-unread-reply-count.js
basically it's
import localForageLru from '@plebbit/plebbit-react-hooks/dist/lib/localforage-lru/index.js'
const thumbnailUrlsDb = localForageLru.createInstance({name: `seeditThumbnailUrls`, size: 500})
await thumbnailUrlsDb.setItem(commentCid, 'https://example.com/image.png')
const thumbnailUrl = await thumbnailUrlsDb.getItem(commentCid)
fixed f0a6ab0b15a292ebf94474702d6dc45026bb6648
it's possible to fetch thumbnail images from any webpage link on the android app, even if the subplebbit doesn't allow thumbnail fetching