Refactor thumbnail cache

The thumbnail cache was trying to fit two concepts into one structure --
icons and multi-dimensional thumbnail arrays.

This was awkward originally, but now that we are moving towards ditching
the concept of a list of thumbnail types it really doesn't fit any
longer.

We can do better by having the cache store two types of thumbnails:
icons and images.  These are reflected explicitly now via TS interfaces.

Author: slifty

src/app/shared/utilities/thumbnail-cache/thumbnail-cache.spec.ts

@@ -30,7 +30,7 @@ describe('ThumbnailCache', () => {
 	it('should return an empty FolderThumbData object for uncached thumbnail', () => {
 		const thumbs = cache.getThumbnail(folder);
 
-		expect(thumbs.folderThumb).toBeDefined();
+		expect(thumbs.folderThumb).toBe('');
 		expect(thumbs.folderContentsType).toBe(
 			FolderContentsType.BROKEN_THUMBNAILS,
 		);
@@ -90,8 +90,20 @@ describe('ThumbnailCache', () => {
 			expect(cache.hasThumbnail(folder)).toBeFalse();
 		});
 
-		it('handles linking another value instead of a string tuple', () => {
-			storage.session.set('folderThumbnailCache', [[1234, 'potato']]);
+		it('reports no cache hit for stale entries', () => {
+			storage.session.set('folderThumbnailCache', [
+				[1234, ['https://old200', 'https://old500']],
+			]);
+			cache = new ThumbnailCache(storage);
+
+			expect(cache.hasThumbnail(folder)).toBeFalse();
+			expect(storage.session.get('folderThumbnailCache').length).toBe(0);
+		});
+
+		it('wipes stale [thumb200, thumb500] tuples from old format', () => {
+			storage.session.set('folderThumbnailCache', [
+				[1234, ['https://old200', 'https://old500']],
+			]);
 			cache = new ThumbnailCache(storage);
 			const thumbz = cache.getThumbnail(folder);
 
@@ -103,13 +115,19 @@ describe('ThumbnailCache', () => {
 			expect(storage.session.get('folderThumbnailCache').length).toBe(0);
 		});
 
-		it('handles properly casting other values to string if a tuple is provided', () => {
-			storage.session.set('folderThumbnailCache', [[1234, [3.141, {}]]]);
+		it('wipes entries with unrecognized shape', () => {
+			storage.session.set('folderThumbnailCache', [
+				[1234, { something: 'unexpected' }],
+			]);
 			cache = new ThumbnailCache(storage);
 			const thumbz = cache.getThumbnail(folder);
 
-			expect(thumbz.folderThumb).toBe('3.141');
-			expect(thumbz.folderContentsType).toBe(FolderContentsType.NORMAL);
+			expect(thumbz.folderThumb).toBe('');
+			expect(thumbz.folderContentsType).toBe(
+				FolderContentsType.BROKEN_THUMBNAILS,
+			);
+
+			expect(storage.session.get('folderThumbnailCache').length).toBe(0);
 		});
 	});
 });

src/app/shared/utilities/thumbnail-cache/thumbnail-cache.ts

@@ -7,43 +7,79 @@ export interface FolderThumbData {
 	folderContentsType: FolderContentsType;
 }
 
+enum CachedThumbnailType {
+	Image = 'image',
+	Icon = 'icon',
+}
+
+interface CachedImage {
+	type: CachedThumbnailType.Image;
+	url: string;
+}
+
+interface CachedIcon {
+	type: CachedThumbnailType.Icon;
+	icon: FolderContentsType;
+}
+
+type CachedThumbnail = CachedImage | CachedIcon;
+
+function isCachedThumbnail(entry: unknown): entry is CachedThumbnail {
+	return (
+		typeof entry === 'object' &&
+		entry !== null &&
+		'type' in entry &&
+		Object.values(CachedThumbnailType).includes(
+			(entry as CachedImage | CachedIcon).type,
+		)
+	);
+}
+
 export class ThumbnailCache {
-	private cache: Map<number, [string, string]>;
+	// Stores `unknown` because the cache is hydrated from local storage,
+	// which may contain entries in an old or otherwise unexpected format.
+	private cache: Map<number, unknown> = new Map();
 	private readonly STORAGE_KEY: string = 'folderThumbnailCache';
 
 	constructor(private storage: StorageService) {
-		this.fetchCacheMapFromStorage();
+		this.refreshCacheFromStorage();
 	}
 
 	public saveThumbnail(item: ItemVO, thumbs: FolderThumbData): void {
-		this.fetchCacheMapFromStorage();
+		this.refreshCacheFromStorage();
 		if (thumbs.folderContentsType === FolderContentsType.NORMAL) {
-			this.cache.set(item.folder_linkId, [thumbs.folderThumb, '']);
+			this.cache.set(item.folder_linkId, {
+				type: CachedThumbnailType.Image,
+				url: thumbs.folderThumb,
+			});
 		} else {
-			this.cache.set(item.folder_linkId, ['icon', thumbs.folderContentsType]);
+			this.cache.set(item.folder_linkId, {
+				type: CachedThumbnailType.Icon,
+				icon: thumbs.folderContentsType,
+			});
 		}
-		this.saveMapToStorage();
+		this.commitCacheToStorage();
 	}
 
 	public getThumbnail(item: ItemVO): FolderThumbData {
 		if (this.cache.has(item.folder_linkId)) {
-			const thumbs = this.cache.get(item.folder_linkId);
-			if (thumbs && Array.isArray(thumbs) && thumbs.length > 1) {
-				if (thumbs[0] === 'icon') {
+			const cacheEntry = this.cache.get(item.folder_linkId);
+			if (isCachedThumbnail(cacheEntry)) {
+				if (cacheEntry.type === CachedThumbnailType.Image) {
+					return {
+						folderThumb: cacheEntry.url,
+						folderContentsType: FolderContentsType.NORMAL,
+					};
+				}
+				if (cacheEntry.type === CachedThumbnailType.Icon) {
 					return {
 						folderThumb: '',
-						folderContentsType: thumbs[1] as FolderContentsType,
+						folderContentsType: cacheEntry.icon,
 					};
 				}
-				// Cast to string just to be sure we actually have strings from our data structure.
-				return {
-					folderThumb: `${thumbs[0]}`,
-					folderContentsType: FolderContentsType.NORMAL,
-				};
-			} else {
-				this.cache.delete(item.folder_linkId);
-				this.saveMapToStorage();
 			}
+			this.cache.delete(item.folder_linkId);
+			this.commitCacheToStorage();
 		}
 		return {
 			folderThumb: '',
@@ -52,27 +88,34 @@ export class ThumbnailCache {
 	}
 
 	public hasThumbnail(item: ItemVO): boolean {
-		return this.cache.has(item.folder_linkId);
+		if (!this.cache.has(item.folder_linkId)) {
+			return false;
+		}
+		if (isCachedThumbnail(this.cache.get(item.folder_linkId))) {
+			return true;
+		}
+		this.cache.delete(item.folder_linkId);
+		this.commitCacheToStorage();
+		return false;
 	}
 
 	public invalidateFolder(folderLinkId: number): void {
 		if (this.cache.has(folderLinkId)) {
 			this.cache.delete(folderLinkId);
-			this.saveMapToStorage();
+			this.commitCacheToStorage();
 		}
 	}
 
-	private fetchCacheMapFromStorage(): void {
+	private refreshCacheFromStorage(): void {
 		const cacheData = this.storage.session.get(this.STORAGE_KEY);
 		if (cacheData && Array.isArray(cacheData)) {
-			this.cache = new Map<number, [string, string]>(cacheData);
+			this.cache = new Map<number, unknown>(cacheData);
 		} else {
-			this.cache = new Map<number, [string, string]>();
-			this.saveMapToStorage();
+			this.cache = new Map<number, unknown>();
 		}
 	}
 
-	private saveMapToStorage(): void {
+	private commitCacheToStorage(): void {
 		this.storage.session.set(
 			this.STORAGE_KEY,
 			Array.from(this.cache.entries()),

src/app/views/components/timeline-view/timeline-templates.ts

@@ -5,13 +5,13 @@ export const TimelineLineTemplate = `
 `;
 export const TimelineRecordTemplate = compile(`
 <div class="timeline-item timeline-record">
-  <img src={{item.thumbnailUrl}} style="width:{{imageWidth}}" height="{{imageHeight}}" width="{{imageWidth}}">
+  <img src={{thumbnailUrl}} style="width:{{imageWidth}}" height="{{imageHeight}}" width="{{imageWidth}}">
 </div>
 `);
 
 export const TimelineFolderTemplate = compile(`
 <div class="timeline-item timeline-folder">
-  <img src={{item.thumbnailUrl}} style="width:{{imageWidth}}">
+  <img src={{thumbnailUrl}} style="width:{{imageWidth}}">
   <div>
     <div class="timeline-folder-name">{{item.displayName}}</div>
     {{#if item.FolderSizeVO}}