fix: Various tiny fixes/improvements (#2433)

src/components-lib/media-grid-controller.ts

@@ -156,7 +156,7 @@ export class MediaGridController {
       this._masonry
     ) {
       // Implementation note: With the latest version of the Masonry library
-      // (4.2.2) using the prepended() and appended() methods in quick sucession
+      // (4.2.2) using the prepended() and appended() methods in quick succession
       // causes the layout to not show the newly added items. Instead, access
       // the items in place and swap them around.
       const otherItems = existingItems?.filter((item) => item !== selectedItem);

src/components/gallery/gallery.ts

@@ -193,14 +193,14 @@ export class AdvancedCameraCardGallery extends LitElement {
     const hasItems =
       (this._controller.getItems()?.length ?? 0) > 0 || !!this._upFolderItem;
 
-    const showFilter =
-      this.galleryConfig && this.galleryConfig.controls.filter.mode !== 'none';
+    const filterMode = this.galleryConfig?.controls.filter.mode;
+    const showFilter = filterMode && filterMode !== 'none';
 
     return html`
       <advanced-camera-card-surround-basic
         .drawerIcons=${{
           ...(showFilter && {
-            [this.galleryConfig!.controls.filter.mode]: GALLERY_FILTER_MENU_ICONS,
+            [filterMode]: GALLERY_FILTER_MENU_ICONS,
           }),
         }}
       >
@@ -211,7 +211,7 @@ export class AdvancedCameraCardGallery extends LitElement {
               .foldersManager=${this.foldersManager}
               .viewManagerEpoch=${this.viewManagerEpoch}
               .cardWideConfig=${this.cardWideConfig}
-              slot=${this.galleryConfig.controls.filter.mode}
+              slot=${filterMode}
             >
             </advanced-camera-card-media-filter>`
           : ''}

src/utils/thumbnail.ts

@@ -20,29 +20,23 @@ const fetchThumbnail = async (
   if (thumbnailURL.startsWith('data:') || thumbnailURL.match(ABSOLUTE_URL_REGEX)) {
     return thumbnailURL;
   }
-  return new Promise((resolve, reject) => {
-    hass
-      .fetchWithAuth(thumbnailURL)
-      // Since we are fetching with an authorization header, we cannot just put the
-      // URL directly into the document; we need to embed the image. We could do this
-      // using blob URLs, but then we would need to keep track of them in order to
-      // release them properly. Instead, we embed the thumbnail using base64.
-      .then((response) => {
-        if (!response.ok) {
-          throw new Error(response.statusText);
-        }
-        return response.blob();
-      })
-      .then((blob) => {
-        const reader = new FileReader();
-        reader.onload = () => {
-          const result = reader.result;
-          resolve(typeof result === 'string' ? result : null);
-        };
-        reader.onerror = (e) => reject(e);
-        reader.readAsDataURL(blob);
-      })
-      .catch((e) => reject(e));
+  // Since we are fetching with an authorization header, we cannot just put the
+  // URL directly into the document; we need to embed the image. We could do this
+  // using blob URLs, but then we would need to keep track of them in order to
+  // release them properly. Instead, we embed the thumbnail using base64.
+  const response = await hass.fetchWithAuth(thumbnailURL);
+  if (!response.ok) {
+    throw new Error(response.statusText);
+  }
+  const blob = await response.blob();
+  return new Promise<string | null>((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => {
+      const result = reader.result;
+      resolve(typeof result === 'string' ? result : null);
+    };
+    reader.onerror = (e) => reject(e);
+    reader.readAsDataURL(blob);
   });
 };