feat: supported format detection in videoviewer

webui/src/components/display/blobs/VideoViewer.svelte

@@ -3,10 +3,14 @@
   import Spinner from "../../utils/Spinner.svelte";
   import Icon from "../../utils/Icon.svelte";
   import { API_URL } from "../../../lib/api";
+  import { useEntity } from "../../../lib/entity";
+  import { i18n } from "../../../i18n";
 
   export let address: string;
   export let detail: boolean;
 
+  const { entity } = useEntity(address);
+
   enum State {
     LOADING = "loading",
     PREVIEW = "preview",
@@ -15,6 +19,16 @@
     ERRORED = "errored",
   }
   let state = State.LOADING;
+  let supported = true;
+
+  $: {
+    if ($entity && videoEl) {
+      const mime = $entity.get("FILE_MIME");
+      if (mime) {
+        supported = Boolean(videoEl.canPlayType(mime as string));
+      }
+    }
+  }
 
   let videoEl: HTMLVideoElement;
   let currentTime: number;
@@ -62,7 +76,7 @@
   }
 </script>
 
-<div class="video-viewer {state}">
+<div class="video-viewer {state}" class:unsupported={!supported}>
   <div class="player" style="--icon-size: {detail ? 100 : 32}px">
     {#if state === State.LOADING}
       <Spinner />
@@ -91,6 +105,13 @@
         bind:this={videoEl}
         bind:currentTime
       />
+      {#if !supported}
+        <div class="unsupported-message">
+          <div class="label">
+            {$i18n.t("UNSUPPORTED FORMAT")}
+          </div>
+        </div>
+      {/if}
     {/if}
     <div class="play-icon">
       <Icon plain border name="play" />
@@ -174,6 +195,28 @@
       opacity: 0.66;
     }
 
+    .unsupported-message {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: rgba(1, 1, 1, 0.7);
+      pointer-events: none;
+
+      .label {
+        position: absolute;
+        top: 50%;
+        left: 0;
+        width: 100%;
+        text-align: center;
+
+        font-weight: bold;
+
+        color: darkred;
+      }
+    }
+
     &.loading {
       .player > * {
         position: absolute;