From 445b31bbd7b534b78630ac3f88cb0d3a5b0a2de8 Mon Sep 17 00:00:00 2001
From: SeinopSys <seinopsys@protonmail.com>
Date: Sat, 26 Mar 2022 00:44:28 +0100
Subject: [PATCH] convert image utils to typescript

---
 assets/jest.config.js                  |  2 +-
 assets/js/utils/{image.js => image.ts} | 67 ++++++++++++++++----------
 assets/js/utils/store.ts               |  2 +-
 3 files changed, 44 insertions(+), 27 deletions(-)
 rename assets/js/utils/{image.js => image.ts} (59%)

diff --git a/assets/jest.config.js b/assets/jest.config.js
index bf0c13d5..192b61fd 100644
--- a/assets/jest.config.js
+++ b/assets/jest.config.js
@@ -16,7 +16,7 @@ export default {
       functions: 0,
       lines: 0,
     },
-    './js/utils/**/*.js': {
+    './js/utils/**/*.ts': {
       statements: 100,
       branches: 100,
       functions: 100,
diff --git a/assets/js/utils/image.js b/assets/js/utils/image.ts
similarity index 59%
rename from assets/js/utils/image.js
rename to assets/js/utils/image.ts
index 505ad6fb..f8cc5cbc 100644
--- a/assets/js/utils/image.js
+++ b/assets/js/utils/image.ts
@@ -1,9 +1,12 @@
 import { clearEl } from './dom';
 import store from './store';
 
-function showVideoThumb(img) {
+function showVideoThumb(img: HTMLDivElement) {
   const size = img.dataset.size;
-  const uris = JSON.parse(img.dataset.uris);
+  const urisString = img.dataset.uris;
+  if (!size || !urisString) return;
+
+  const uris = JSON.parse(urisString);
   const thumbUri = uris[size];
 
   const vidEl = img.querySelector('video');
@@ -21,14 +24,18 @@ function showVideoThumb(img) {
   vidEl.classList.remove('hidden');
   vidEl.play();
 
-  img.querySelector('.js-spoiler-info-overlay').classList.add('hidden');
+  const overlay = img.querySelector('.js-spoiler-info-overlay');
+  if (overlay) overlay.classList.add('hidden');
 
   return true;
 }
 
-export function showThumb(img) {
+export function showThumb(img: HTMLDivElement) {
   const size = img.dataset.size;
-  const uris = JSON.parse(img.dataset.uris);
+  const urisString = img.dataset.uris;
+  if (!size || !urisString) return;
+
+  const uris = JSON.parse(urisString);
   const thumbUri = uris[size].replace(/webm$/, 'gif');
 
   const picEl = img.querySelector('picture');
@@ -45,26 +52,30 @@ export function showThumb(img) {
   }
 
   imgEl.src = thumbUri;
+  const overlay = img.querySelector('.js-spoiler-info-overlay');
+  if (!overlay) return;
+
   if (uris[size].indexOf('.webm') !== -1) {
-    const overlay = img.querySelector('.js-spoiler-info-overlay');
     overlay.classList.remove('hidden');
     overlay.innerHTML = 'WebM';
   }
   else {
-    img.querySelector('.js-spoiler-info-overlay').classList.add('hidden');
+    overlay.classList.add('hidden');
   }
 
   return true;
 }
 
-export function showBlock(img) {
-  img.querySelector('.image-filtered').classList.add('hidden');
-  const imageShowClasses = img.querySelector('.image-show').classList;
-  imageShowClasses.remove('hidden');
-  imageShowClasses.add('spoiler-pending');
+export function showBlock(img: HTMLDivElement) {
+  img.querySelector('.image-filtered')?.classList.add('hidden');
+  const imageShowClasses = img.querySelector('.image-show')?.classList;
+  if (imageShowClasses) {
+    imageShowClasses.remove('hidden');
+    imageShowClasses.add('spoiler-pending');
+  }
 }
 
-function hideVideoThumb(img, spoilerUri, reason) {
+function hideVideoThumb(img: HTMLDivElement, spoilerUri: string, reason: string) {
   const vidEl = img.querySelector('video');
   if (!vidEl) return;
 
@@ -74,15 +85,17 @@ function hideVideoThumb(img, spoilerUri, reason) {
 
   imgEl.classList.remove('hidden');
   imgEl.src = spoilerUri;
-  imgOverlay.innerHTML = reason;
-  imgOverlay.classList.remove('hidden');
+  if (imgOverlay) {
+    imgOverlay.innerHTML = reason;
+    imgOverlay.classList.remove('hidden');
+  }
 
   clearEl(vidEl);
   vidEl.classList.add('hidden');
   vidEl.pause();
 }
 
-export function hideThumb(img, spoilerUri, reason) {
+export function hideThumb(img: HTMLDivElement, spoilerUri: string, reason: string) {
   const picEl = img.querySelector('picture');
   if (!picEl) return hideVideoThumb(img, spoilerUri, reason);
 
@@ -93,11 +106,13 @@ export function hideThumb(img, spoilerUri, reason) {
 
   imgEl.srcset = '';
   imgEl.src = spoilerUri;
-  imgOverlay.innerHTML = reason;
-  imgOverlay.classList.remove('hidden');
+  if (imgOverlay) {
+    imgOverlay.innerHTML = reason;
+    imgOverlay.classList.remove('hidden');
+  }
 }
 
-export function spoilerThumb(img, spoilerUri, reason) {
+export function spoilerThumb(img: HTMLDivElement, spoilerUri: string, reason: string) {
   hideThumb(img, spoilerUri, reason);
 
   switch (window.booru.spoilerType) {
@@ -114,15 +129,17 @@ export function spoilerThumb(img, spoilerUri, reason) {
   }
 }
 
-export function spoilerBlock(img, spoilerUri, reason) {
-  const imgEl = img.querySelector('.image-filtered img');
-  const imgReason = img.querySelector('.filter-explanation');
+export function spoilerBlock(img: HTMLDivElement, spoilerUri: string, reason: string) {
+  const imgEl = img.querySelector<HTMLImageElement>('.image-filtered img');
+  const imgReason = img.querySelector<HTMLElement>('.filter-explanation');
 
   if (!imgEl) return;
 
   imgEl.src = spoilerUri;
-  imgReason.innerHTML = reason;
+  if (imgReason) {
+    imgReason.innerHTML = reason;
+  }
 
-  img.querySelector('.image-show').classList.add('hidden');
-  img.querySelector('.image-filtered').classList.remove('hidden');
+  img.querySelector('.image-show')?.classList.add('hidden');
+  img.querySelector('.image-filtered')?.classList.remove('hidden');
 }
diff --git a/assets/js/utils/store.ts b/assets/js/utils/store.ts
index 677b611a..21250946 100644
--- a/assets/js/utils/store.ts
+++ b/assets/js/utils/store.ts
@@ -59,7 +59,7 @@ export default {
     const lastUpdatedKey = key + lastUpdatedSuffix;
     const lastUpdatedTime = this.get<number>(lastUpdatedKey);
 
-    return lastUpdatedTime !== null && Date.now() > lastUpdatedTime;
+    return lastUpdatedTime === null || Date.now() > lastUpdatedTime;
   },
 
 };