/* xeslint-disable */ // x-@ts-nocheck import { downloadManager, type LivePhotoSourceURL, } from "@/gallery/services/download"; import type { EnteFile } from "@/media/file"; import { FileType } from "@/media/file-type"; // TODO(PS): //import { type SlideData } from "./ps5/dist/types/slide/" interface SlideData { /** * image URL */ src?: string | undefined; /** * image width */ width?: number | undefined; /** * image height */ height?: number | undefined; /** * html content of a slide */ html?: string | undefined; } type ItemData = SlideData & { // Our props. TODO(PS) document if end up using these. videoURL?: string; livePhotoVideoURL?: string; isContentLoading?: boolean; isContentZoomable?: boolean; }; /** * This module stores and serves data required by our custom PhotoSwipe * instance, effectively acting as an in-memory cache. * * By keeping this independent of the lifetime of the PhotoSwipe instance, we * can reuse the same cache for multiple displays of our file viewer. * * This will be cleared on logout. */ class FileViewerDataSourceState { itemDataByFileID = new Map(); needsRefreshByFileID = new Map void>(); } /** * State shared by functions in this module. * * See {@link FileViewerDataSourceState}. */ let _state = new FileViewerDataSourceState(); /** * Clear any internal state maintained by the file viewer data source. */ // TODO(PS): Call me during logout sequence once this is integrated. export const logoutFileViewerDataSource = () => { _state = new FileViewerDataSourceState(); }; /** * Return the best available ItemData for rendering the given {@link file}. * * If an entry does not exist for a particular file, then it is lazily added on * demand, and updated as we keep getting better data (thumbnail, original) for * the file. * * At each step, we call the provided callback so that file viewer can call us * again to get the updated data. * * --- * * Detailed flow: * * If we already have the final data about the file, then this function will * return it and do nothing subsequently. * * Otherwise, it will: * * 1. Return empty slide data; PhotoSwipe will not show anything in the image * area but will otherwise render UI controls properly (in most cases a * cached renderable thumbnail URL will be available shortly) * * 2. Insert empty data so that we don't enqueue multiple updates, and return * this empty data. * * Then it we start fetching data for the file. * * First it'll fetch the thumbnail. Once that is done, it'll update the data it * has cached, and notify the caller (using the provided callback) so it can * refresh the slide. * * Then it'll continue fetching the original. * * - For images and videos, this will be the single original. * * - For live photos, this will also be a two step process, first with the * original image, then again with the video component. * * At this point, the data for this file will be considered final, and * subsequent calls for the same file will return this same value unless it is * invalidated. * * If at any point an error occurs, we reset our cache so that the next time the * data is requested we repeat the process instead of continuing to serve the * incomplete result. */ export const itemDataForFile = (file: EnteFile, needsRefresh: () => void) => { let itemData = _state.itemDataByFileID.get(file.id); // We assume that there is only one file viewer that is using us at a given // point of time. This assumption is currently valid. _state.needsRefreshByFileID.set(file.id, needsRefresh); if (!itemData) { itemData = {}; _state.itemDataByFileID.set(file.id, itemData); void enqueueUpdates(file); } return itemData; }; const enqueueUpdates = async (file: EnteFile) => { const update = (itemData: ItemData) => { _state.itemDataByFileID.set(file.id, itemData); _state.needsRefreshByFileID.get(file.id)?.(); }; const thumbnailURL = await downloadManager.renderableThumbnailURL(file); // TODO(PS): const thumbnailData = await withDimensions(thumbnailURL!); update({ ...thumbnailData, isContentLoading: true, isContentZoomable: false, }); switch (file.metadata.fileType) { case FileType.image: { const sourceURLs = await downloadManager.renderableSourceURLs(file); // TODO(PS): const itemData = await withDimensions(sourceURLs.url as string); update(itemData); break; } case FileType.video: { const sourceURLs = await downloadManager.renderableSourceURLs(file); // TODO(PS): update({ videoURL: sourceURLs.url as string }); break; } case FileType.livePhoto: { const sourceURLs = await downloadManager.renderableSourceURLs(file); const livePhotoSourceURLs = sourceURLs.url as LivePhotoSourceURL; const imageURL = await livePhotoSourceURLs.image(); // TODO(PS): const imageData = await withDimensions(imageURL!); update(imageData); const livePhotoVideoURL = await livePhotoSourceURLs.video(); update({ ...imageData, livePhotoVideoURL }); break; } } }; /** * Take a image URL, determine its dimensions using browser APIs, and return the URL * and its dimensions in a form that can directly be passed to PhotoSwipe as * {@link ItemData}. */ const withDimensions = (imageURL: string): Promise => new Promise((resolve) => { const image = new Image(); image.onload = () => { resolve({ src: imageURL, width: image.naturalWidth, height: image.naturalHeight, }); }; // image.onerror = () // TODO(PS): Handle imageElement.onerror image.src = imageURL; });