Function useMaskedThumbnail

src/hooks/useMaskedThumbnail.ts:127–191

(
  imageFile: File | undefined,
  maskFile: File | undefined,
  imageName: string,
  enabled: boolean,
  inverseMask = false
)

}

export function useMaskedThumbnail(
  imageFile: File | undefined,
  maskFile: File | undefined,
  imageName: string,
  enabled: boolean,
  inverseMask = false
): string | null {
  const cacheKey = useMemo(
    () => enabled && imageFile && maskFile
      ? getMaskedThumbnailCacheKey(imageName, imageFile, maskFile, inverseMask)
      : '',
    [enabled, imageFile, imageName, maskFile, inverseMask]
  );
  const [state, setState] = useState<{ cacheKey: string; url: string | null }>(() => ({
    cacheKey,
    url: cacheKey ? maskedThumbnailCache.get(cacheKey) ?? null : null,
  }));

  useEffect(() => {
    let cancelled = false;

    if (!enabled || !imageFile || !maskFile || !cacheKey) {
      return () => {
        cancelled = true;
      };
    }

    const cached = maskedThumbnailCache.get(cacheKey);
    if (cached) {
      return () => {
        cancelled = true;
      };
    }

    let load = maskedThumbnailLoads.get(cacheKey);
    if (!load) {
      const loadGeneration = maskedThumbnailCacheGeneration;
      load = loadMaskedThumbnail(imageFile, maskFile, inverseMask).then((result) => {
        maskedThumbnailLoads.delete(cacheKey);
        if (loadGeneration !== maskedThumbnailCacheGeneration) {
          if (result) URL.revokeObjectURL(result);
          return null;
        }
        if (result) {
          maskedThumbnailCache.set(cacheKey, result);
        }
        return result;
      });
      maskedThumbnailLoads.set(cacheKey, load);
    }

    load.then((result) => {
      if (!cancelled) {
        setState({ cacheKey, url: result });
      }
    });

    return () => {