@hyperframes/studio 0.6.29 → 0.6.30

package/src/hooks/useServerConnection.ts

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { buildProjectHash, parseProjectIdFromHash } from "../utils/projectRouting";
 import { useMountEffect } from "./useMountEffect";
 
@@ -67,5 +67,15 @@ export function useServerConnection(): ServerConnectionState {
     };
   });
 
+  // eslint-disable-next-line no-restricted-syntax
+  useEffect(() => {
+    const onHashChange = () => {
+      const next = parseProjectIdFromHash(window.location.hash);
+      if (next && next !== projectId) setProjectId(next);
+    };
+    window.addEventListener("hashchange", onHashChange);
+    return () => window.removeEventListener("hashchange", onHashChange);
+  }, [projectId]);
+
   return { projectId, resolving, waitingForServer };
 }

package/src/main.tsx

@@ -1,10 +1,31 @@
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import { StudioApp } from "./App";
+import { StudioErrorBoundary } from "./components/StudioErrorBoundary";
+import { trackStudioEvent } from "./utils/studioTelemetry";
 import "./styles/studio.css";
 
+trackStudioEvent("session_start");
+
+window.addEventListener("error", (event) => {
+  trackStudioEvent("unhandled_error", {
+    error_message: event.message,
+    filename: event.filename ?? null,
+    lineno: event.lineno ?? null,
+    colno: event.colno ?? null,
+  });
+});
+
+window.addEventListener("unhandledrejection", (event) => {
+  trackStudioEvent("unhandled_promise_rejection", {
+    error_message: event.reason instanceof Error ? event.reason.message : String(event.reason),
+  });
+});
+
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
-    <StudioApp />
+    <StudioErrorBoundary>
+      <StudioApp />
+    </StudioErrorBoundary>
   </StrictMode>,
 );

package/src/player/components/CompositionThumbnail.tsx

@@ -5,7 +5,6 @@ interface CompositionThumbnailProps {
   previewUrl: string;
   label: string;
   labelColor: string;
-  accentColor?: string;
   selector?: string;
   selectorIndex?: number;
   seekTime?: number;
@@ -16,7 +15,6 @@ interface CompositionThumbnailProps {
 
 const CLIP_HEIGHT = 66;
 const THUMBNAIL_URL_VERSION = "v3";
-const COMPOSITION_THUMBNAIL_LABEL_Z_INDEX = 10;
 
 export function buildCompositionThumbnailUrl({
   previewUrl,
@@ -53,7 +51,6 @@ export const CompositionThumbnail = memo(function CompositionThumbnail({
   previewUrl,
   label,
   labelColor,
-  accentColor = "#6B7280",
   selector,
   selectorIndex,
   seekTime = 2,
@@ -110,8 +107,11 @@ export const CompositionThumbnail = memo(function CompositionThumbnail({
         className="hidden"
       />
 
-      {loaded ? (
-        <div className="absolute inset-0 flex">
+      {loaded && (
+        <div
+          className="absolute inset-0 flex"
+          style={{ animation: "hf-thumb-fade 200ms ease-out", mixBlendMode: "lighten" }}
+        >
           {Array.from({ length: frameCount }).map((_, i) => (
             <div
               key={i}
@@ -122,59 +122,25 @@ export const CompositionThumbnail = memo(function CompositionThumbnail({
                 src={url}
                 alt=""
                 draggable={false}
-                className="absolute inset-0 h-full w-full object-cover opacity-60"
+                className="absolute inset-0 h-full w-full object-cover"
+                style={{ opacity: 0.7 }}
               />
             </div>
           ))}
         </div>
-      ) : (
-        <div
-          className="absolute inset-0 animate-pulse"
-          style={{
-            background:
-              "linear-gradient(90deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0.05) 50%, rgba(255,255,255,0.02) 100%)",
-          }}
-        />
       )}
 
-      <div
-        className="absolute inset-0"
-        style={{
-          background: `linear-gradient(120deg, ${accentColor}2e, transparent 34%), linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.08))`,
-        }}
-      />
-
-      <div
-        className="absolute left-2 top-2"
-        style={{ zIndex: COMPOSITION_THUMBNAIL_LABEL_Z_INDEX }}
-      >
+      <div className="absolute left-3 top-0 bottom-0 flex items-center" style={{ zIndex: 10 }}>
         <span
-          className="block max-w-full truncate rounded-md px-1.5 py-0.5 text-[9px] font-semibold uppercase leading-none"
+          className="block max-w-full truncate text-[10px] font-semibold leading-none"
           style={{
             color: labelColor,
-            background: `${accentColor}2e`,
-            boxShadow: `inset 0 0 0 1px ${accentColor}40`,
+            textShadow: loaded ? "0 1px 4px rgba(0,0,0,0.9), 0 0 8px rgba(0,0,0,0.6)" : "none",
           }}
         >
           {label}
         </span>
       </div>
-
-      <div
-        className="absolute bottom-0 left-0 right-0 px-1.5 pb-0.5 pt-3"
-        style={{
-          zIndex: COMPOSITION_THUMBNAIL_LABEL_Z_INDEX,
-          background:
-            "linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 60%, transparent 100%)",
-        }}
-      >
-        <span
-          className="block truncate text-[9px] font-semibold leading-tight"
-          style={{ color: labelColor, textShadow: "0 1px 2px rgba(0,0,0,0.9)" }}
-        >
-          {label}
-        </span>
-      </div>
     </div>
   );
 });

package/src/player/components/PlayerControls.tsx

@@ -3,6 +3,7 @@ import { useMountEffect } from "../../hooks/useMountEffect";
 import { formatFrameTime, frameToSeconds, stepFrameTime, formatTime } from "../lib/time";
 import { shouldMutePreviewAudio } from "../lib/timelineIframeHelpers";
 import { usePlayerStore, liveTime } from "../store/playerStore";
+import { trackStudioEvent } from "../../utils/studioTelemetry";
 
 const SPEED_OPTIONS = [0.25, 0.5, 1, 1.5, 2] as const;
 const SEEK_EDGE_SNAP_PX = 8;
@@ -15,6 +16,8 @@ const SHORTCUT_SECTIONS = [
       { key: "J", label: "Play backward" },
       { key: "K", label: "Stop" },
       { key: "L", label: "Play forward" },
+      { key: "M", label: "Toggle mute" },
+      { key: "⇧L", label: "Toggle loop" },
       { key: "←/→", label: "Step 1 frame" },
       { key: "⇧←/⇧→", label: "Step 10 frames" },
     ],
@@ -335,7 +338,10 @@ export const PlayerControls = memo(function PlayerControls({
       <button
         type="button"
         aria-label={isPlaying ? "Pause" : "Play"}
-        onClick={onTogglePlay}
+        onClick={() => {
+          trackStudioEvent("playback", { action: isPlaying ? "pause" : "play" });
+          onTogglePlay();
+        }}
         disabled={controlsDisabled}
         className="flex-shrink-0 w-8 h-8 flex items-center justify-center rounded-lg disabled:opacity-30 disabled:pointer-events-none transition-colors"
         style={{ background: "rgba(255,255,255,0.06)" }}
@@ -461,7 +467,10 @@ export const PlayerControls = memo(function PlayerControls({
       <button
         type="button"
         onClick={() => {
-          if (!audioAutoMuted) setAudioMuted(!audioMuted);
+          if (!audioAutoMuted) {
+            trackStudioEvent("playback", { action: "mute_toggle", muted: !audioMuted });
+            setAudioMuted(!audioMuted);
+          }
         }}
         disabled={controlsDisabled || audioAutoMuted}
         title={muteButtonLabel}
@@ -528,6 +537,7 @@ export const PlayerControls = memo(function PlayerControls({
               <button
                 key={rate}
                 onClick={() => {
+                  trackStudioEvent("playback", { action: "speed_change", rate });
                   setPlaybackRate(rate);
                   setShowSpeedMenu(false);
                 }}
@@ -553,7 +563,10 @@ export const PlayerControls = memo(function PlayerControls({
 
       <button
         type="button"
-        onClick={() => setLoopEnabled(!loopEnabled)}
+        onClick={() => {
+          trackStudioEvent("playback", { action: "loop_toggle", enabled: !loopEnabled });
+          setLoopEnabled(!loopEnabled);
+        }}
         disabled={disabled}
         className={`h-7 w-7 flex items-center justify-center rounded-md border transition-colors ${
           loopEnabled

package/src/player/components/TimelineCanvas.tsx

@@ -10,7 +10,6 @@ import { getRenderedTimelineElement, type TimelineTheme } from "./timelineTheme"
 import { GUTTER, TRACK_H, RULER_H, CLIP_Y, CLIP_HANDLE_W } from "./timelineLayout";
 import type { TimelineElement } from "../store/playerStore";
 import type { DraggedClipState, ResizingClipState, BlockedClipState } from "./useTimelineClipDrag";
-import { formatTime } from "../lib/time";
 import type { TrackVisualStyle } from "./timelineIcons";
 
 interface TimelineCanvasProps {
@@ -134,28 +133,16 @@ export const TimelineCanvas = memo(function TimelineCanvas({
         className={
           renderClipContent
             ? "absolute inset-0 overflow-hidden"
-            : "flex flex-col justify-center overflow-hidden flex-1 min-w-0 px-6"
+            : "flex items-center overflow-hidden flex-1 min-w-0 px-3 gap-2"
         }
       >
         {renderClipContent?.(element, clipStyle) ?? (
-          <div className="flex h-full min-h-0 flex-col justify-between py-3">
-            <span
-              className="max-w-full truncate rounded-md px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-[0.08em] leading-none"
-              style={{
-                color: clipStyle.label,
-                background: `${clipStyle.accent}26`,
-                boxShadow: `inset 0 0 0 1px ${clipStyle.accent}33`,
-              }}
-            >
-              {element.tag}
-            </span>
-            <span
-              className="max-w-full truncate rounded-md px-1.5 py-0.5 text-[10px] font-medium tabular-nums leading-none"
-              style={{ color: theme.textSecondary, background: "rgba(255,255,255,0.04)" }}
-            >
-              {formatTime(element.start)} {"→"} {formatTime(element.start + element.duration)}
-            </span>
-          </div>
+          <span
+            className="truncate text-[10px] font-medium leading-none"
+            style={{ color: clipStyle.label }}
+          >
+            {element.label || element.id || element.tag}
+          </span>
         )}
       </div>
     </>
@@ -221,10 +208,9 @@ export const TimelineCanvas = memo(function TimelineCanvas({
                     paddingLeft: 16,
                     color: ts.label,
                     fontSize: 11,
-                    letterSpacing: "0.08em",
+                    letterSpacing: "0.06em",
                     textTransform: "uppercase",
-                    background: `linear-gradient(90deg, ${ts.accent}14, transparent 28%)`,
-                    boxShadow: `inset 0 0 0 1px ${ts.accent}24`,
+                    opacity: 0.5,
                   }}
                 >
                   New track

package/src/player/components/TimelineClip.tsx

@@ -51,14 +51,14 @@ export const TimelineClip = memo(function TimelineClip({
   const handleOpacity = getClipHandleOpacity({ isHovered, isSelected, isDragging });
 
   const borderColor = isSelected
-    ? theme.clipBorderActive
+    ? trackStyle.accent + "60"
     : isHovered
       ? theme.clipBorderHover
       : theme.clipBorder;
   const boxShadow = isDragging
     ? theme.clipShadowDragging
     : isSelected
-      ? theme.clipShadowActive
+      ? `0 0 0 1px ${trackStyle.accent}40`
       : isHovered
         ? theme.clipShadowHover
         : theme.clipShadow;
@@ -77,20 +77,14 @@ export const TimelineClip = memo(function TimelineClip({
         top: clipY,
         bottom: clipY,
         borderRadius: theme.clipRadius,
-        background: isSelected
-          ? `linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0)), linear-gradient(120deg, ${trackStyle.accent}22, transparent 28%), ${theme.clipBackgroundActive}`
-          : `linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0)), linear-gradient(120deg, ${trackStyle.accent}1e, transparent 28%), ${theme.clipBackground}`,
-        backgroundImage:
-          isComposition && !hasCustomContent
-            ? `repeating-linear-gradient(135deg, transparent, transparent 3px, rgba(255,255,255,0.05) 3px, rgba(255,255,255,0.05) 6px)`
-            : undefined,
+        background: trackStyle.clip,
         border: `1px solid ${borderColor}`,
         boxShadow,
-        transition:
-          "border-color 120ms ease-out, box-shadow 140ms ease-out, background 140ms ease-out",
+        transition: "border-color 100ms, box-shadow 100ms",
         zIndex: isDragging ? 20 : isSelected ? 10 : isHovered ? 5 : 1,
         cursor: capabilities.canMove ? "grab" : "default",
         transform: isDragging ? "translateY(-1px)" : undefined,
+        opacity: isDragging ? 0.92 : 1,
       }}
       title={
         isComposition
@@ -103,78 +97,80 @@ export const TimelineClip = memo(function TimelineClip({
       onClick={onClick}
       onDoubleClick={onDoubleClick}
     >
+      {/* Left accent stripe */}
       <div
         aria-hidden="true"
-        role="presentation"
-        onPointerDown={(e) => onResizeStart?.("start", e)}
         style={{
           position: "absolute",
           left: 0,
           top: 0,
           bottom: 0,
-          width: 18,
-          opacity: showHandles && capabilities.canTrimStart ? 1 : 0,
-          pointerEvents: onResizeStart && capabilities.canTrimStart ? "auto" : "none",
-          zIndex: 4,
-          transition: "opacity 120ms ease-out",
-          cursor: "col-resize",
-          background:
-            showHandles && capabilities.canTrimStart
-              ? `linear-gradient(90deg, ${trackStyle.accent}4d 0%, ${trackStyle.accent}22 42%, transparent 100%)`
-              : "transparent",
+          width: 3,
+          background: trackStyle.accent,
+          opacity: isSelected ? 0.7 : 0.3,
+          borderRadius: `${theme.clipRadius} 0 0 ${theme.clipRadius}`,
+          zIndex: 2,
+          pointerEvents: "none",
         }}
-      >
+      />
+      {/* Left trim handle */}
+      {showHandles && capabilities.canTrimStart && (
         <div
+          aria-hidden="true"
+          onPointerDown={(e) => onResizeStart?.("start", e)}
           style={{
             position: "absolute",
-            left: 6,
-            top: 7,
-            bottom: 7,
-            width: 3,
-            borderRadius: 999,
-            background: theme.handleColor,
-            boxShadow: `0 0 0 1px ${trackStyle.accent}38, 0 0 12px ${trackStyle.accent}18`,
-            opacity: handleOpacity,
-            pointerEvents: "none",
+            left: 0,
+            top: 0,
+            bottom: 0,
+            width: 14,
+            cursor: "col-resize",
+            zIndex: 4,
           }}
-        />
-      </div>
-      <div
-        aria-hidden="true"
-        role="presentation"
-        onPointerDown={(e) => onResizeStart?.("end", e)}
-        style={{
-          position: "absolute",
-          right: 0,
-          top: 0,
-          bottom: 0,
-          width: 18,
-          opacity: showHandles && capabilities.canTrimEnd ? 1 : 0,
-          pointerEvents: onResizeStart && capabilities.canTrimEnd ? "auto" : "none",
-          zIndex: 4,
-          transition: "opacity 120ms ease-out",
-          cursor: "col-resize",
-          background:
-            showHandles && capabilities.canTrimEnd
-              ? `linear-gradient(270deg, ${trackStyle.accent}4d 0%, ${trackStyle.accent}22 42%, transparent 100%)`
-              : "transparent",
-        }}
-      >
+        >
+          <div
+            style={{
+              position: "absolute",
+              left: 4,
+              top: 6,
+              bottom: 6,
+              width: 2,
+              borderRadius: 1,
+              background: trackStyle.accent,
+              opacity: handleOpacity * 0.6,
+            }}
+          />
+        </div>
+      )}
+      {/* Right trim handle */}
+      {showHandles && capabilities.canTrimEnd && (
         <div
+          aria-hidden="true"
+          onPointerDown={(e) => onResizeStart?.("end", e)}
           style={{
             position: "absolute",
-            right: 6,
-            top: 7,
-            bottom: 7,
-            width: 3,
-            borderRadius: 999,
-            background: theme.handleColor,
-            boxShadow: `0 0 0 1px ${trackStyle.accent}38, 0 0 12px ${trackStyle.accent}18`,
-            opacity: handleOpacity,
-            pointerEvents: "none",
+            right: 0,
+            top: 0,
+            bottom: 0,
+            width: 14,
+            cursor: "col-resize",
+            zIndex: 4,
           }}
-        />
-      </div>
+        >
+          <div
+            style={{
+              position: "absolute",
+              right: 4,
+              top: 6,
+              bottom: 6,
+              width: 2,
+              borderRadius: 1,
+              background: trackStyle.accent,
+              opacity: handleOpacity * 0.6,
+            }}
+          />
+        </div>
+      )}
       {children}
     </div>
   );

package/src/player/components/timelineTheme.ts

@@ -35,33 +35,13 @@ export interface TimelineTheme {
   clipRadius: string;
 }
 
-const TIMELINE_TEAL = "#3CE6AC";
-const TIMELINE_TEAL_LABEL = "#E9FFF6";
-const TIMELINE_TEAL_ICON_BACKGROUND = "rgba(60,230,172,0.12)";
-
-function createTrackStyle(): TimelineTrackStyle {
-  return {
-    clip: TIMELINE_TEAL,
-    accent: TIMELINE_TEAL,
-    label: TIMELINE_TEAL_LABEL,
-    iconBackground: TIMELINE_TEAL_ICON_BACKGROUND,
-  };
-}
-
-const TRACK_STYLES: Record<string, TimelineTrackStyle> = {
-  video: createTrackStyle(),
-  audio: createTrackStyle(),
-  img: createTrackStyle(),
-  div: createTrackStyle(),
-  span: createTrackStyle(),
-  p: createTrackStyle(),
-  h1: createTrackStyle(),
-  section: createTrackStyle(),
-  sfx: createTrackStyle(),
+const TRACK_STYLE: TimelineTrackStyle = {
+  clip: "#1c2028",
+  accent: "#3CE6AC",
+  label: "#dde1e8",
+  iconBackground: "rgba(255,255,255,0.06)",
 };
 
-const DEFAULT_TRACK_STYLE: TimelineTrackStyle = createTrackStyle();
-
 export const defaultTimelineTheme: TimelineTheme = {
   shellBackground: "#0A0A0B",
   shellBorder: "rgba(255,255,255,0.05)",
@@ -75,33 +55,23 @@ export const defaultTimelineTheme: TimelineTheme = {
   tickText: "rgba(131,145,168,0.92)",
   tickMajor: "rgba(255,255,255,0.13)",
   tickMinor: "rgba(255,255,255,0.08)",
-  clipBackground: "linear-gradient(180deg, rgba(20,25,34,0.98), rgba(14,18,27,0.98))",
-  clipBackgroundActive: "linear-gradient(180deg, rgba(24,30,40,0.99), rgba(15,20,29,0.99))",
-  clipBorder: "rgba(255,255,255,0.07)",
-  clipBorderHover: "rgba(255,255,255,0.11)",
-  clipBorderActive: "rgba(255,255,255,0.14)",
-  clipShadow: "inset 0 1px 0 rgba(255,255,255,0.03), 0 6px 18px rgba(0,0,0,0.18)",
-  clipShadowHover: "inset 0 1px 0 rgba(255,255,255,0.035), 0 8px 20px rgba(0,0,0,0.2)",
-  clipShadowActive:
-    "inset 0 1px 0 rgba(255,255,255,0.04), 0 10px 24px rgba(0,0,0,0.22), 0 0 0 1px rgba(255,255,255,0.035)",
-  clipShadowDragging:
-    "inset 0 1px 0 rgba(255,255,255,0.04), 0 18px 36px rgba(0,0,0,0.34), 0 8px 16px rgba(0,0,0,0.18), 0 0 0 1px rgba(255,255,255,0.04)",
-  handleColor: "rgba(255,255,255,0.11)",
+  clipBackground: "#141922",
+  clipBackgroundActive: "#181e28",
+  clipBorder: "rgba(255,255,255,0.10)",
+  clipBorderHover: "rgba(255,255,255,0.18)",
+  clipBorderActive: "rgba(255,255,255,0.24)",
+  clipShadow: "none",
+  clipShadowHover: "0 2px 8px rgba(0,0,0,0.2)",
+  clipShadowActive: "0 2px 8px rgba(0,0,0,0.2), 0 0 0 1px rgba(255,255,255,0.04)",
+  clipShadowDragging: "0 8px 24px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.06)",
+  handleColor: "rgba(255,255,255,0.2)",
   panelResizeSeam: "rgba(255,255,255,0.12)",
   panelResizeActive: "rgba(255,255,255,0.24)",
-  clipRadius: "11px 15px 13px 9px / 10px 14px 12px 10px",
+  clipRadius: "6px",
 };
 
-export function getTimelineTrackStyle(tag: string): TimelineTrackStyle {
-  const normalized = tag.toLowerCase();
-  if (
-    normalized.startsWith("h") &&
-    normalized.length === 2 &&
-    "123456".includes(normalized[1] ?? "")
-  ) {
-    return TRACK_STYLES.h1;
-  }
-  return TRACK_STYLES[normalized] ?? DEFAULT_TRACK_STYLE;
+export function getTimelineTrackStyle(_tag: string): TimelineTrackStyle {
+  return TRACK_STYLE;
 }
 
 export function getClipHandleOpacity({

package/src/player/hooks/usePlaybackKeyboard.test.ts

@@ -172,3 +172,58 @@ describe("usePlaybackKeyboard — keyboard layout independence (#834)", () => {
     expect(spies.play).toHaveBeenCalledTimes(1);
   });
 });
+
+describe("usePlaybackKeyboard — mute & loop shortcuts (#905)", () => {
+  it("M toggles audioMuted", () => {
+    const { dispatch } = setupHook();
+    expect(usePlayerStore.getState().audioMuted).toBe(false);
+
+    act(() => {
+      dispatch(keydown({ code: "KeyM", key: "m" }));
+    });
+    expect(usePlayerStore.getState().audioMuted).toBe(true);
+
+    act(() => {
+      dispatch(keydown({ code: "KeyM", key: "m" }));
+    });
+    expect(usePlayerStore.getState().audioMuted).toBe(false);
+  });
+
+  it("M does NOT toggle audioMuted above 1x playback (matches button gating)", () => {
+    const { dispatch } = setupHook();
+    usePlayerStore.setState({ playbackRate: 2, audioMuted: false });
+
+    act(() => {
+      dispatch(keydown({ code: "KeyM", key: "m" }));
+    });
+
+    expect(usePlayerStore.getState().audioMuted).toBe(false);
+  });
+
+  it("Shift+L toggles loopEnabled without starting forward shuttle", () => {
+    const { dispatch, spies } = setupHook();
+    expect(usePlayerStore.getState().loopEnabled).toBe(false);
+
+    act(() => {
+      dispatch(keydown({ code: "KeyL", key: "L", shiftKey: true }));
+    });
+    expect(usePlayerStore.getState().loopEnabled).toBe(true);
+    expect(spies.play).not.toHaveBeenCalled();
+
+    act(() => {
+      dispatch(keydown({ code: "KeyL", key: "L", shiftKey: true }));
+    });
+    expect(usePlayerStore.getState().loopEnabled).toBe(false);
+  });
+
+  it("Plain L still starts forward shuttle (regression guard)", () => {
+    const { dispatch, spies } = setupHook();
+
+    act(() => {
+      dispatch(keydown({ code: "KeyL", key: "l" }));
+    });
+
+    expect(spies.play).toHaveBeenCalledTimes(1);
+    expect(usePlayerStore.getState().loopEnabled).toBe(false);
+  });
+});

package/src/player/hooks/usePlaybackKeyboard.ts

@@ -108,6 +108,21 @@ export function usePlaybackKeyboard({
         return;
       }
       if (e.repeat) return;
+      if (key === "m") {
+        e.preventDefault();
+        const state = usePlayerStore.getState();
+        // Audio is force-muted above 1x playback — match the mute button's gating.
+        if (state.playbackRate <= 1) {
+          state.setAudioMuted(!state.audioMuted);
+        }
+        return;
+      }
+      if (key === "l" && e.shiftKey) {
+        e.preventDefault();
+        const state = usePlayerStore.getState();
+        state.setLoopEnabled(!state.loopEnabled);
+        return;
+      }
       if (key === "k") {
         e.preventDefault();
         pause();

package/src/player/lib/mediaProbe.ts

@@ -1,5 +1,3 @@
-import { Input, UrlSource, ALL_FORMATS } from "mediabunny";
-
 export interface MediaProbeResult {
   duration: number;
   width?: number;
@@ -11,6 +9,20 @@ export interface MediaProbeResult {
 const cache = new Map<string, MediaProbeResult>();
 const inflight = new Map<string, Promise<MediaProbeResult | null>>();
 
+let mediabunnyModule: typeof import("mediabunny") | null | false = null;
+
+async function loadMediabunny() {
+  if (mediabunnyModule === false) return null;
+  if (mediabunnyModule) return mediabunnyModule;
+  try {
+    mediabunnyModule = await import("mediabunny");
+    return mediabunnyModule;
+  } catch {
+    mediabunnyModule = false;
+    return null;
+  }
+}
+
 function normalizeUrl(url: string): string {
   try {
     return new URL(url, window.location.href).href;
@@ -20,9 +32,12 @@ function normalizeUrl(url: string): string {
 }
 
 async function probeOne(url: string): Promise<MediaProbeResult | null> {
-  const input = new Input({
-    source: new UrlSource(url),
-    formats: ALL_FORMATS,
+  const mb = await loadMediabunny();
+  if (!mb) return null;
+
+  const input = new mb.Input({
+    source: new mb.UrlSource(url),
+    formats: mb.ALL_FORMATS,
   });
   try {
     const duration = await input.getDurationFromMetadata();