chore: add HEVC codec support detection and user notification (#375)

Author: lukepolo

components/clips/ClipPlayer.vue

@@ -8,7 +8,14 @@ import {
   Volume2,
   VolumeX,
 } from "lucide-vue-next";
+import { useI18n } from "vue-i18n";
 import StreamCanvas from "~/components/match/StreamCanvas.vue";
+import {
+  browserSupportsHevc,
+  notifyMissingHevcOnce,
+} from "~/utilities/hevcSupport";
+
+const { t } = useI18n();
 
 // Shared video surface for clips — used by the inline highlights reel
 // (featured clip) and the clip detail modal. Encapsulates: custom
@@ -180,6 +187,25 @@ function startProgressLoop() {
   progressRafId = requestAnimationFrame(tickProgress);
 }
 
+// Browsers surface a missing HEVC decoder as either MEDIA_ERR_SRC_NOT_SUPPORTED
+// or MEDIA_ERR_DECODE on the <video> element. We can't tell a clip's codec
+// before it loads, so we only warn after a failure — and only when the browser
+// itself can't decode H.265 — to avoid noise on H.264 clips that fail for
+// unrelated reasons (network, expired URL, etc).
+function onVideoError(event: Event) {
+  const video = event.target as HTMLVideoElement | null;
+  const code = video?.error?.code;
+  if (code !== MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED && code !== MediaError.MEDIA_ERR_DECODE) {
+    return;
+  }
+  if (browserSupportsHevc()) return;
+  notifyMissingHevcOnce({
+    title: t("toasts.hevc_missing_title"),
+    body: t("toasts.hevc_missing_body"),
+    linkLabel: t("toasts.hevc_missing_link"),
+  });
+}
+
 async function tryPlay(video: HTMLVideoElement) {
   video.muted = muted.value;
   try {
@@ -443,6 +469,7 @@ defineExpose({ play, pause, toggle, videoEl: videoRef, isFullscreen });
         "
         @webkitbeginfullscreen="onVideoWebkitBeginFullscreen"
         @webkitendfullscreen="onVideoWebkitEndFullscreen"
+        @error="onVideoError"
         @click="toggle"
       />
       <slot v-else name="empty" />

i18n/locales/en.json

@@ -33,7 +33,10 @@
         "set_winner_failed_description": "Selected lineup id is missing for this match.",
         "match_reset_applied": "Tournament match reset applied",
         "match_reset_failed": "Unable to reset tournament match",
-        "please_try_again": "Please try again."
+        "please_try_again": "Please try again.",
+        "hevc_missing_title": "Can't play this clip",
+        "hevc_missing_body": "This video is encoded with HEVC (H.265). Your browser can't decode it — install the HEVC Video Extensions on Windows to enable playback:",
+        "hevc_missing_link": "Get the HEVC Video Extensions"
     },
     "shortcut_groups": {
         "playback": "Playback",

utilities/hevcSupport.ts

@@ -0,0 +1,71 @@
+import { h } from "vue";
+import { toast } from "~/components/ui/toast/use-toast";
+
+// Microsoft Store listing for the HEVC Video Extensions. Most Windows
+// Chromium browsers can't decode H.265 clips without this installed.
+const HEVC_PLUGIN_URL =
+  "https://apps.microsoft.com/detail/9nmzlz57r3t7";
+
+let cachedSupport: boolean | null = null;
+let warnedThisSession = false;
+
+export function browserSupportsHevc(): boolean {
+  if (cachedSupport !== null) return cachedSupport;
+  if (typeof document === "undefined") {
+    cachedSupport = true;
+    return cachedSupport;
+  }
+
+  const video = document.createElement("video");
+  const canPlay =
+    video.canPlayType('video/mp4; codecs="hvc1.1.6.L93.B0"') ||
+    video.canPlayType('video/mp4; codecs="hev1.1.6.L93.B0"') ||
+    video.canPlayType('video/mp4; codecs="hvc1"');
+  if (canPlay) {
+    cachedSupport = true;
+    return cachedSupport;
+  }
+
+  const ms = (
+    window as unknown as { MediaSource?: { isTypeSupported(t: string): boolean } }
+  ).MediaSource;
+  if (
+    ms &&
+    (ms.isTypeSupported('video/mp4; codecs="hvc1.1.6.L93.B0"') ||
+      ms.isTypeSupported('video/mp4; codecs="hev1.1.6.L93.B0"'))
+  ) {
+    cachedSupport = true;
+    return cachedSupport;
+  }
+
+  cachedSupport = false;
+  return cachedSupport;
+}
+
+export function notifyMissingHevcOnce(strings: {
+  title: string;
+  body: string;
+  linkLabel: string;
+}): void {
+  if (warnedThisSession) return;
+  warnedThisSession = true;
+
+  toast({
+    title: strings.title,
+    description: h("span", { class: "select-text break-words" }, [
+      `${strings.body} `,
+      h(
+        "a",
+        {
+          href: HEVC_PLUGIN_URL,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          class:
+            "underline underline-offset-2 font-medium hover:opacity-80",
+        },
+        strings.linkLabel,
+      ),
+    ]),
+    variant: "destructive",
+  });
+}