refactor(caa edits): migrate to TypeScript, partially drop jQuery

I didn't remove jQuery in the artwork comparison dialog, because it
uses jquery-ui and because I'm afraid I'll break something. More jQuery
removal is probably something we should do later, but I've decided against
doing it in this migration pass. I also updated all dependencies.

Author: ROpdebee

package-lock.json

@@ -46,7 +46,10 @@
     "@types/greasemonkey": "4.0.3",
     "@types/jest": "28.1.1",
     "@types/jest-when": "3.5.0",
+    "@types/jquery": "^3.5.14",
+    "@types/jqueryui": "^1.12.16",
     "@types/postcss-preset-env": "6.7.3",
+    "@types/resemblejs": "^4.1.0",
     "@types/rollup__plugin-virtual": "2.0.1",
     "@types/rollup-plugin-progress": "1.1.1",
     "@types/setup-polly-jest": "0.5.1",
@@ -88,6 +91,7 @@
     "jest-html-reporters": "3.0.9",
     "jest-when": "3.5.1",
     "license-checker": "25.0.1",
+    "moment": "^2.29.3",
     "nativejsx": "github:ROpdebee/nativejsx",
     "node-fetch": "3.2.6",
     "postcss": "8.4.14",

package.json

@@ -69,9 +69,9 @@ export interface Place {
 }
 
 export interface RelationshipDate {
-    day: number | null;
-    month: number | null;
-    year: number | null;
+    day?: number | null;
+    month?: number | null;
+    year?: number | null;
 }
 
 interface BaseRecordingRelationship {
@@ -115,6 +115,30 @@ export interface ReleaseRecordingRels {
     };
 }
 
+export interface Release {
+    id: string;
+    packagingID: number;
+    statusID: number;
+    combined_format_name?: string;
+    barcode?: string;
+    events?: Array<{
+        country?: { primary_code: string };
+        date?: RelationshipDate;
+    }>;
+    labels?: Array<{
+        catalogNumber?: string;
+        label?: {
+            gid: string;
+            name: string;
+        };
+    }>;
+    mediums: Array<{
+        format?: {
+            name: string;
+        };
+    }>;
+}
+
 interface BaseAPIResponse {
     created: string;
     count: number;

src/lib/MB/types-api.ts

@@ -38,6 +38,16 @@ declare global {
                 GIT_BRANCH: string;
                 GIT_SHA: string;
             };
+            $c: {
+                user: {
+                    preferences: {
+                        datetime_format: string;
+                    };
+                };
+                stash: {
+                    current_language?: string;
+                };
+            };
         };
     }
 }

src/lib/MB/types.ts

@@ -24,10 +24,10 @@ export class HTTPResponseError extends ResponseError {
     public readonly statusCode: number;
     public readonly statusText: string;
     // eslint-disable-next-line no-restricted-globals
-    public readonly response: GM.Response<never>;
+    public readonly response: GM.Response<never> | Response;
 
     // eslint-disable-next-line no-restricted-globals
-    public constructor(url: string | URL, response: GM.Response<never>) {
+    public constructor(url: string | URL, response: GM.Response<never> | Response) {
         /* istanbul ignore else: Should not happen */
         if (response.statusText.trim()) {
             super(url, `HTTP error ${response.status}: ${response.statusText}`);

src/lib/util/xhr.ts

@@ -2,33 +2,25 @@
 
 import { logFailure } from '@lib/util/async';
 
-import type { ImageInfo } from './ImageInfo';
+import type { Dimensions, ImageInfo } from './ImageInfo';
 import type { InfoCache } from './InfoCache';
 import { CAAImageWithFullSizeURL, displayInfoWhenInView } from './DisplayedImage';
 import { CAAImage } from './Image';
 
-interface LegacyImageInfo {
-    url: string;
-    width: number;
-    height: number;
-    size?: number;
-    format?: string;
-}
+export type ROpdebee_getDimensionsWhenInView = (imgElement: HTMLImageElement) => void;
+export type ROpdebee_getCAAImageInfo = (imgUrl: string) => Promise<ImageInfo>;
+export type ROpdebee_getImageDimensions = (imgUrl: string) => Promise<Dimensions | undefined>;
 
 declare global {
     interface Window {
-        ROpdebee_getDimensionsWhenInView: (imgElement: HTMLImageElement) => void;
-        ROpdebee_getCAAImageInfo: (imgUrl: string) => Promise<ImageInfo>;
-        ROpdebee_loadImageDimensions: (imgUrl: string) => Promise<LegacyImageInfo>;
+        ROpdebee_getDimensionsWhenInView: ROpdebee_getDimensionsWhenInView;
+        ROpdebee_getCAAImageInfo: ROpdebee_getCAAImageInfo;
+        ROpdebee_getImageDimensions: ROpdebee_getImageDimensions;
     }
 }
 
 export function setupExports(cachePromise: Promise<InfoCache>): void {
     async function getCAAImageInfo(imgUrl: string): Promise<ImageInfo> {
-        if (new URL(imgUrl).hostname !== 'archive.org') {
-            throw new Error('Unsupported URL: Need direct image URL');
-        }
-
         const cache = await cachePromise;
         const image = new CAAImage(imgUrl, cache);
         return image.getImageInfo();
@@ -41,19 +33,14 @@ export function setupExports(cachePromise: Promise<InfoCache>): void {
         }), `Something went wrong when attempting to load image info for ${imgElement.src}`);
     }
 
-    async function loadImageDimensions(imgUrl: string): Promise<LegacyImageInfo> {
-        const imageInfo = await getCAAImageInfo(imgUrl);
-        return {
-            url: imgUrl,
-            ...imageInfo.dimensions ?? { width: 0, height: 0 },
-            size: imageInfo.size,
-            format: imageInfo.fileType,
-        };
+    async function getImageDimensions(imgUrl: string): Promise<Dimensions | undefined> {
+        const cache = await cachePromise;
+        const image = new CAAImage(imgUrl, cache);
+        return image.getDimensions();
     }
 
     // Expose the function for use in other scripts that may load images.
     window.ROpdebee_getDimensionsWhenInView = getDimensionsWhenInView;
-    // Deprecated, use `ROpdebee_getImageInfo` instead.
-    window.ROpdebee_loadImageDimensions = loadImageDimensions;
+    window.ROpdebee_getImageDimensions = getImageDimensions;
     window.ROpdebee_getCAAImageInfo = getCAAImageInfo;
 }

src/mb_caa_dimensions/exports.ts

@@ -10,12 +10,20 @@ import { gmxhr } from '@lib/util/xhr';
 import type { CoverArt } from './base';
 import { CoverArtProvider } from './base';
 
-interface CAAIndex {
+// TODO: This should probably be put in lib.
+export interface CAAIndex {
     images: Array<{
         comment: string;
         types: string[];
         id: string | number;  // Used to be string in the past, hasn't been applied retroactively yet, see CAA-129
         image: string;
+        thumbnails: {
+            '250': string;
+            '500': string;
+            '1200'?: string;
+            small: string;
+            large: string;
+        };
     }>;
 }