Handle delayed video thumbnail loading

Nebula has started to only render the thumbnail when it is visible. Due
to that, the "watch later" button was not correctly added to all videos,
as this was only done immediately on loading of the videos. Using a
different selector allows to handle this gracefully

Author: cpiber

src/scripts/content/nebula/index.ts

@@ -112,9 +112,10 @@ const setStyles = () => {
 };
 
 const doVideoActions = debounce(() => {
+  console.dev.debug('Video actions');
   // add links on mobile to substitute hover
   if (isMobile())
-    Array.from(document.querySelectorAll<HTMLImageElement>(`${videoselector} img`)).forEach(createLink);
+    Array.from(document.querySelectorAll<HTMLTimeElement>(`${videoselector} time`)).forEach(createLink);
   // hide creators
   if (isVideoListPage())
     Array.from(document.querySelectorAll<HTMLElement>(videoselector)).forEach(el =>
@@ -136,7 +137,7 @@ const hover = (e: MouseEvent) => {
     return;
   createLink(link.querySelector('img'));
 };
-const createLink = (img: HTMLImageElement): void => {
+const createLink = (img: HTMLImageElement | HTMLTimeElement): void => {
   if (!img || queueBottonLocation(img).querySelector('.enhancer-queueButton') !== null)
     return; // queue button exists
   // create queue button

src/scripts/helpers/locations.ts

@@ -1,8 +1,8 @@
 import { isVideoListPage } from './shared';
 
-export const queueBottonLocation = (img: HTMLImageElement) => img.parentElement.parentElement;
-export const durationLocation = (img: HTMLImageElement) => queueBottonLocation(img).querySelector('time').parentElement;
-export const watchLaterLocation = (img: HTMLImageElement) => queueBottonLocation(img).querySelector('[data-icon-itself]');
+export const queueBottonLocation = (img: HTMLImageElement | HTMLTimeElement) => img.parentElement.parentElement;
+export const durationLocation = (img: HTMLImageElement | HTMLTimeElement) => queueBottonLocation(img).querySelector('time').parentElement;
+export const watchLaterLocation = (img: HTMLImageElement | HTMLTimeElement) => queueBottonLocation(img).querySelector('[data-icon-itself]');
 export const titleLocation = (link: HTMLElement) => link.nextElementSibling ? link.nextElementSibling.querySelector('h3') : link.parentElement.nextElementSibling.querySelector('a[href^="/videos/"] span:last-child');
 export const creatorLocation = (link: HTMLElement) => isVideoListPage() && link.nextElementSibling ? titleLocation(link).nextElementSibling.firstElementChild : document.querySelector('h1, meta[property="og:title"]');
 export const watchProgressLocation = (link: HTMLElement) => link.querySelector('picture')?.parentElement?.lastElementChild as HTMLDivElement;