Merge pull request #38 from Pithaya/fixes

Fixes

custom-apps/better-local-files/package.json

@@ -1,6 +1,6 @@
 {
     "name": "better-local-files",
-    "version": "2.0.0",
+    "version": "2.0.1",
     "private": true,
     "scripts": {
         "init": "npm run build && npm run apply",

custom-apps/better-local-files/src/change-notes.ts

@@ -1,5 +1 @@
-export const CHANGE_NOTES = [
-    'Added drag and drop to the track list and album cards',
-    'Select multiple tracks by holding the Ctrl key and clicking on the tracks',
-    'Switch between list and compact display modes',
-];
+export const CHANGE_NOTES = ['Fix error "Cannot read properties of undefined"'];

custom-apps/better-local-files/src/services/local-tracks-service.ts

@@ -7,7 +7,7 @@ import { BehaviorSubject, type Observable } from 'rxjs';
 import { StorageService } from './storage-service';
 import type { CachedAlbum } from '../models/cached-album';
 import { waitForPlatformApi } from '@shared/utils/spicetify-utils';
-import type { LocalFilesAPI } from '@shared/platform/local-files';
+import type { LocalFilesAPI, LocalTrack } from '@shared/platform/local-files';
 
 /**
  * A list of tracks with an associated cover.
@@ -181,7 +181,7 @@ export class LocalTracksService {
                 album = new Album(
                     albumKey,
                     albumName,
-                    localTrack.album.images[0].url,
+                    this.getImageUrlFromAlbum(localTrack.album),
                 );
 
                 this.albums.set(albumKey, album);
@@ -270,7 +270,7 @@ export class LocalTracksService {
                 const newAlbum = new Album(
                     albumKey,
                     album.name,
-                    firstTrack.localTrack.album.images[0].url,
+                    this.getImageUrlFromAlbum(firstTrack.localTrack.album),
                 );
 
                 for (const artist of firstTrack.artists) {
@@ -403,7 +403,9 @@ export class LocalTracksService {
 
             // For each artist(s), take the album cover of the first track
             for (const tracks of albumTrackMap.values()) {
-                const coverUrl = tracks[0].localTrack.album.images[0].url;
+                const coverUrl = this.getImageUrlFromAlbum(
+                    tracks[0].localTrack.album,
+                );
 
                 let image: HTMLImageElement;
 
@@ -525,4 +527,13 @@ export class LocalTracksService {
 
         return mismatchedPixels;
     }
+
+    /**
+     * Get the image url from an album. Return an empty string if there is are no images.
+     * @param album The album.
+     * @returns The image url.
+     */
+    private getImageUrlFromAlbum(album: LocalTrack['album']): string {
+        return album.images.length === 0 ? '' : album.images[0].url;
+    }
 }

libs/shared/src/utils/dom-utils.ts

@@ -9,17 +9,24 @@ export async function waitForElement(
     selector: string,
     timeout: number = 5 * 1000,
     parentElement: HTMLElement | null = null,
+    debug = false,
 ): Promise<Element> {
     return await new Promise<Element>((resolve, reject) => {
-        const element: Element | null = document.querySelector(selector);
+        let element: Element | null = document.querySelector(selector);
         if (element !== null) {
+            if (debug) {
+                console.log('found element in querySelector');
+            }
             resolve(element);
             return;
         }
 
         const observer = new MutationObserver(() => {
-            const element: Element | null = document.querySelector(selector);
+            element = document.querySelector(selector);
             if (element !== null) {
+                if (debug) {
+                    console.log('found element in observer');
+                }
                 resolve(element);
                 observer.disconnect();
             }
@@ -35,11 +42,20 @@ export async function waitForElement(
         });
 
         setTimeout(() => {
+            // Observer found the element already
+            if (element !== null) {
+                return;
+            }
+
+            if (debug) {
+                console.log('trying to find element from querySelector again');
+            }
+
             observer.disconnect();
 
-            // Sometimes the observer do not work ?
+            // Sometimes the observer does not work ?
             // So try one last time to find the element
-            const element: Element | null = document.querySelector(selector);
+            element = document.querySelector(selector);
             if (element !== null) {
                 resolve(element);
             } else {