Fix media-viewer: src reactivity, error state, configurable alt, CORS fallback, duplicate fetches

src/media-viewer/media-viewer-styles.ts

@@ -16,6 +16,11 @@ export function getMediaViewerStyles() {
       font-size: 1rem;
       text-align: center;
     }
+    .error {
+      color: red;
+      font-size: 1rem;
+      text-align: center;
+    }
     .loading {
       text-align: center;
       font-size: 1rem;

src/media-viewer/media-viewer.ts

@@ -1,12 +1,13 @@
-import { LitElement, html } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { LitElement, PropertyValues, html } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
 import { getMediaViewerStyles } from './media-viewer-styles';
 
 @customElement('media-viewer')
 export class MediaViewer extends LitElement {
   static override styles = getMediaViewerStyles();
 
   @property({ type: String }) src = '';
+  @property({ type: String }) alt = 'Image';
   @property({ type: String }) width = '100%';
   @property({ type: String }) height = 'auto';
   @property({ type: Boolean }) controls = true;
@@ -15,31 +16,61 @@ export class MediaViewer extends LitElement {
   @property({ type: Boolean }) muted = false;
 
   private mimeType: string | null = null;
+  @state() private _error = false;
+  private _fetchingFor: string | null = null;
 
   override connectedCallback() {
     super.connectedCallback();
-    this.determineFileType();
+    if (!this.mimeType && this.src && this._fetchingFor !== this.src) {
+      this.determineFileType();
+    }
+  }
+
+  override updated(changedProperties: PropertyValues) {
+    if (
+      changedProperties.has('src') &&
+      this.src &&
+      this._fetchingFor !== this.src
+    ) {
+      this.mimeType = null;
+      this._error = false;
+      this.determineFileType();
+    }
+  }
+
+  private fallbackToExtensionBasedType() {
+    const ext = this.src?.split('.').pop()?.toLowerCase();
+    if (ext && ['mp4', 'webm', 'ogg'].includes(ext)) {
+      this.mimeType = `video/${ext}`;
+    } else {
+      this.mimeType = 'image/unknown';
+    }
   }
 
   async determineFileType() {
-    if (this.src) {
-      try {
-        const response = await fetch(this.src, { method: 'HEAD' });
-        const contentType = response.headers.get('Content-Type');
-        if (contentType) {
-          this.mimeType = contentType;
-        } else {
-          console.error('Content-Type header not found');
-        }
-      } catch (error) {
-        console.error('Error fetching content type:', error);
+    if (!this.src) return;
+    this._fetchingFor = this.src;
+    try {
+      const response = await fetch(this.src, { method: 'HEAD' });
+      const contentType = response.headers.get('Content-Type');
+      if (contentType) {
+        this.mimeType = contentType;
+      } else {
+        console.error('Content-Type header not found');
+        this.fallbackToExtensionBasedType();
       }
-      this.requestUpdate();
+    } catch (error) {
+      console.error('Error fetching content type:', error);
+      this.fallbackToExtensionBasedType();
+    } finally {
+      this._fetchingFor = null;
     }
+    this.requestUpdate();
     if (
       !this.mimeType ||
       !(this.isImageMimeType(this.mimeType) || this.isVideoMimeType(this.mimeType))
     ) {
+      this._error = true;
       this.dispatchEvent(new Event('error'));
     }
   }
@@ -60,14 +91,18 @@ export class MediaViewer extends LitElement {
       return html`<div class="unsupported">No source provided</div>`;
     }
 
+    if (this._error) {
+      return html`<div class="error">Unable to load media</div>`;
+    }
+
     if (!this.mimeType) {
       return html`<div class="loading"></div>`;
     }
 
     if (this.isImageMimeType(this.mimeType)) {
       return html`<img
         src=${this.src}
-        alt="Image"
+        alt=${this.alt}
         style="width: ${this.width}; height: ${this.height};"
         @error=${this.handleEvent}
       />`;