plebbit / plebchan

A GUI for plebbit similar to 4chan
https://plebchan.eth.limo
GNU General Public License v2.0
21 stars 8 forks source link

add: android app capacitor plugin for thumbnail fetching from any website link #568

Closed plebeius-eth closed 2 weeks ago

plebeius-eth commented 2 weeks ago

it's possible to fetch thumbnail images from any webpage link on the android app, even if the subplebbit doesn't allow thumbnail fetching

plebeius-eth commented 2 weeks ago

it should also fetch the dimensions, which are displayed on 4chan next to the link, in parentheses

plebeius-eth commented 2 weeks ago

https://t.me/plebchanreact/8954

6f8a6e38d49adff7252287268db512d792e448be

estebanabaroa commented 2 weeks ago
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)
plebeius-eth commented 2 weeks ago

fixed f0a6ab0b15a292ebf94474702d6dc45026bb6648