@hienlh/ppm 0.18.2 → 0.18.4

package/src/web/components/editor/video-player/video-player-controls.tsx

@@ -0,0 +1,103 @@
+import { Maximize, Minimize, Pause, Play, Volume1, Volume2, VolumeX } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { VideoSettingsMenu } from "./video-settings-menu";
+import type { VideoTransform } from "./video-transform";
+
+interface Props {
+  playing: boolean;
+  position: number;
+  duration: number | null;
+  volume: number;
+  muted: boolean;
+  speed: number;
+  transform: VideoTransform;
+  fullscreen: boolean;
+  onTogglePlay: () => void;
+  /** Live value while the thumb is dragged (updates the clock only). */
+  onScrub: (t: number) => void;
+  /** Final value when the drag ends. */
+  onSeek: (t: number) => void;
+  onVolume: (v: number) => void;
+  onToggleMute: () => void;
+  onSpeed: (rate: number) => void;
+  onRotate: (direction: 1 | -1) => void;
+  onFlipH: () => void;
+  onFlipV: () => void;
+  onResetTransform: () => void;
+  onToggleFullscreen: () => void;
+}
+
+/** Bottom bar: 44px targets, primary actions in thumb reach on phones. */
+export function VideoPlayerControls(p: Props) {
+  const VolumeIcon = p.muted || p.volume === 0 ? VolumeX : p.volume < 0.5 ? Volume1 : Volume2;
+  const commit = (e: React.SyntheticEvent<HTMLInputElement>) => p.onSeek(Number((e.target as HTMLInputElement).value));
+
+  return (
+    <div className="flex items-center gap-1 px-2 py-1 bg-surface border-t border-border">
+      <Button variant="ghost" size="icon" className="size-11 shrink-0" onClick={p.onTogglePlay} aria-label={p.playing ? "Pause" : "Play"}>
+        {p.playing ? <Pause className="size-5" /> : <Play className="size-5" />}
+      </Button>
+
+      <span className="text-xs tabular-nums text-text-secondary shrink-0 min-w-[4.5rem] text-center">
+        {formatClock(p.position)}{p.duration ? ` / ${formatClock(p.duration)}` : ""}
+      </span>
+
+      {p.duration ? (
+        <input
+          type="range"
+          min={0}
+          max={p.duration}
+          step={0.1}
+          value={Math.min(p.position, p.duration)}
+          aria-label="Seek"
+          className="flex-1 h-11 accent-primary cursor-pointer min-w-0"
+          onChange={(e) => p.onScrub(Number(e.target.value))}
+          onPointerUp={commit}
+          onKeyUp={commit}
+          onTouchEnd={commit}
+        />
+      ) : <div className="flex-1" />}
+
+      {/* Volume: icon toggles mute, slider sets level. Slider hidden on phones (hardware keys). */}
+      <div className="flex items-center shrink-0">
+        <Button variant="ghost" size="icon" className="size-11" onClick={p.onToggleMute} aria-label={p.muted ? "Unmute" : "Mute"}>
+          <VolumeIcon className="size-5" />
+        </Button>
+        <input
+          type="range"
+          min={0}
+          max={1}
+          step={0.05}
+          value={p.muted ? 0 : p.volume}
+          aria-label="Volume"
+          className="hidden sm:block w-20 h-11 accent-primary cursor-pointer"
+          onChange={(e) => p.onVolume(Number(e.target.value))}
+        />
+      </div>
+
+      <VideoSettingsMenu
+        speed={p.speed}
+        onSpeed={p.onSpeed}
+        transform={p.transform}
+        onRotate={p.onRotate}
+        onFlipH={p.onFlipH}
+        onFlipV={p.onFlipV}
+        onResetTransform={p.onResetTransform}
+      />
+
+      <Button variant="ghost" size="icon" className="size-11 shrink-0" onClick={p.onToggleFullscreen} aria-label={p.fullscreen ? "Exit fullscreen" : "Fullscreen"}>
+        {p.fullscreen ? <Minimize className="size-5" /> : <Maximize className="size-5" />}
+      </Button>
+    </div>
+  );
+}
+
+/** 65 → "1:05", 3725 → "1:02:05". */
+export function formatClock(sec: number): string {
+  const s = Math.max(0, Math.floor(Number.isFinite(sec) ? sec : 0));
+  const h = Math.floor(s / 3600);
+  const m = Math.floor((s % 3600) / 60);
+  const r = s % 60;
+  const mm = h ? String(m).padStart(2, "0") : String(m);
+  return `${h ? `${h}:` : ""}${mm}:${String(r).padStart(2, "0")}`;
+}

package/src/web/components/editor/video-player/video-player.tsx

@@ -0,0 +1,190 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Loader2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { rawMediaUrl, transcodeMediaUrl } from "@/lib/media-url";
+import { VideoPlayerControls } from "./video-player-controls";
+import { SPEED_STEPS } from "./video-settings-menu";
+import { useVideoKeyboardShortcuts, type VideoPlayerActions } from "./use-video-keyboard-shortcuts";
+import {
+  IDENTITY_TRANSFORM, fittedMaxSize, rotateClockwise, rotateCounterClockwise, toCssTransform, type VideoTransform,
+} from "./video-transform";
+
+interface Props {
+  filePath: string;
+  projectName: string;
+  /**
+   * `native`: the browser decodes the file itself, streamed by Range requests — seeking
+   * is a `currentTime` assignment. `transcode`: ffmpeg pipes a live fragmented MP4 with
+   * no duration, so the bar uses ffprobe's duration and a seek restarts the stream at
+   * `?start=`; position on screen = start + currentTime.
+   */
+  mode: "native" | "transcode";
+  /** Seconds from ffprobe (transcode mode); native mode reads it from the element. */
+  probeDuration?: number | null;
+  /** Native decode failed (e.g. HEVC in .mov) — caller may retry through ffmpeg. */
+  onNativeError?: () => void;
+}
+
+/** Custom player shared by both playback paths so rotation, speed and shortcuts behave the same. */
+export function VideoPlayer({ filePath, projectName, mode, probeDuration = null, onNativeError }: Props) {
+  const rootRef = useRef<HTMLDivElement>(null);
+  const stageRef = useRef<HTMLDivElement>(null);
+  const videoRef = useRef<HTMLVideoElement>(null);
+  const resumeRef = useRef(true);
+
+  const [start, setStart] = useState(0);
+  const [elapsed, setElapsed] = useState(0);
+  const [nativeDuration, setNativeDuration] = useState<number | null>(null);
+  const [playing, setPlaying] = useState(false);
+  const [waiting, setWaiting] = useState(true);
+  const [scrub, setScrub] = useState<number | null>(null);
+  const [volume, setVolume] = useState(1);
+  const [muted, setMuted] = useState(false);
+  const [speed, setSpeed] = useState(1);
+  const [transform, setTransform] = useState<VideoTransform>(IDENTITY_TRANSFORM);
+  const [fullscreen, setFullscreen] = useState(false);
+  const [box, setBox] = useState({ width: 0, height: 0 });
+  const [error, setError] = useState<string | null>(null);
+
+  const isTranscode = mode === "transcode";
+  const src = isTranscode ? transcodeMediaUrl(filePath, projectName, start) : rawMediaUrl(filePath, projectName);
+  const duration = isTranscode ? probeDuration : nativeDuration;
+  const position = scrub ?? (isTranscode ? start + elapsed : elapsed);
+
+  // New source (mount, other file, or transcode restart) → back to loading state.
+  useEffect(() => { setElapsed(0); setWaiting(true); setError(null); }, [src]);
+  useEffect(() => { setStart(0); setNativeDuration(null); setTransform(IDENTITY_TRANSFORM); }, [filePath, mode]);
+
+  // Element properties survive src changes but not a remount; keep them in sync with state.
+  useEffect(() => { const v = videoRef.current; if (v) { v.volume = volume; v.muted = muted; } }, [volume, muted]);
+  useEffect(() => { const v = videoRef.current; if (v) v.playbackRate = speed; }, [speed, src]);
+
+  // A detached <video> keeps its network fetch alive until garbage-collected, which
+  // would leave ffmpeg encoding for nobody. Emptying the source aborts the load now.
+  // `isConnected` guards StrictMode's simulated unmount, where the element stays in the
+  // DOM and React would not re-apply the src attribute afterwards.
+  useEffect(() => {
+    const v = videoRef.current;
+    return () => { if (v && !v.isConnected) { v.pause(); v.removeAttribute("src"); v.load(); } };
+  }, []);
+
+  useEffect(() => {
+    const onFs = () => setFullscreen(document.fullscreenElement === rootRef.current);
+    document.addEventListener("fullscreenchange", onFs);
+    return () => document.removeEventListener("fullscreenchange", onFs);
+  }, []);
+
+  // Rotated 90°/270° video must be sized against the swapped stage axes.
+  useEffect(() => {
+    const el = stageRef.current;
+    if (!el) return;
+    const ro = new ResizeObserver(() => setBox({ width: el.clientWidth, height: el.clientHeight }));
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+
+  const seekTo = useCallback((t: number) => {
+    const v = videoRef.current;
+    const clamped = Math.max(0, duration ? Math.min(t, duration - 0.5) : t);
+    setScrub(null);
+    if (!isTranscode) { if (v) v.currentTime = clamped; return; }
+    // Restarting ffmpeg for a sub-second nudge is wasteful.
+    if (Math.abs(clamped - (start + (v?.currentTime ?? 0))) < 0.5) return;
+    resumeRef.current = !(v?.paused ?? false);
+    setStart(clamped);
+  }, [duration, isTranscode, start]);
+
+  const actions = useMemo<VideoPlayerActions>(() => ({
+    togglePlay: () => { const v = videoRef.current; if (!v) return; if (v.paused) void v.play().catch(() => {}); else v.pause(); },
+    seekBy: (d) => seekTo((isTranscode ? start : 0) + (videoRef.current?.currentTime ?? 0) + d),
+    toggleFullscreen: () => {
+      if (document.fullscreenElement) void document.exitFullscreen();
+      else void rootRef.current?.requestFullscreen?.();
+    },
+    toggleMute: () => setMuted((m) => !m),
+    volumeBy: (d) => { setMuted(false); setVolume((v) => Math.min(1, Math.max(0, Math.round((v + d) * 100) / 100))); },
+    speedStep: (dir) => setSpeed((s) => {
+      const i = SPEED_STEPS.indexOf(s as typeof SPEED_STEPS[number]);
+      return SPEED_STEPS[Math.min(SPEED_STEPS.length - 1, Math.max(0, (i === -1 ? 3 : i) + dir))] ?? 1;
+    }),
+    rotate: (dir) => setTransform((t) => (dir === 1 ? rotateClockwise(t) : rotateCounterClockwise(t))),
+  }), [seekTo, isTranscode, start]);
+
+  const onKeyDown = useVideoKeyboardShortcuts(actions);
+  const fitted = fittedMaxSize(transform, box);
+
+  if (error) {
+    return (
+      <div className="flex flex-col items-center justify-center h-full gap-3 text-text-secondary p-4 text-center">
+        <p className="text-sm">{error}</p>
+        <Button variant="outline" size="sm" onClick={() => { setError(null); setStart((s) => s + 0.001); }}>Retry</Button>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      ref={rootRef}
+      data-testid="video-player"
+      tabIndex={0}
+      onKeyDown={onKeyDown}
+      className="flex flex-col h-full bg-black outline-none focus-visible:ring-1 focus-visible:ring-primary/60"
+    >
+      <div
+        ref={stageRef}
+        className="relative flex-1 min-h-0 flex items-center justify-center overflow-hidden"
+        onClick={(e) => { rootRef.current?.focus(); if (e.detail === 1) actions.togglePlay(); }}
+        onDoubleClick={actions.toggleFullscreen}
+      >
+        <video
+          ref={videoRef}
+          src={src}
+          autoPlay
+          playsInline
+          preload={isTranscode ? "auto" : "metadata"}
+          style={{ transform: toCssTransform(transform), maxWidth: fitted.maxWidth || undefined, maxHeight: fitted.maxHeight || undefined }}
+          onLoadedMetadata={(e) => {
+            const v = e.currentTarget;
+            v.playbackRate = speed;
+            if (!isTranscode && Number.isFinite(v.duration)) setNativeDuration(v.duration);
+            if (isTranscode && !resumeRef.current) v.pause();
+          }}
+          onPlay={() => setPlaying(true)}
+          onPause={() => setPlaying(false)}
+          onWaiting={() => setWaiting(true)}
+          onPlaying={() => setWaiting(false)}
+          onCanPlay={() => setWaiting(false)}
+          onTimeUpdate={(e) => setElapsed(e.currentTarget.currentTime)}
+          onEnded={() => setPlaying(false)}
+          onError={() => {
+            if (!isTranscode) onNativeError?.();
+            else setError("Transcoding failed. ffmpeg may have stopped or the file is corrupt.");
+          }}
+        />
+        {waiting && <Loader2 className="absolute size-8 animate-spin text-white/80 pointer-events-none" />}
+      </div>
+
+      <VideoPlayerControls
+        playing={playing}
+        position={position}
+        duration={duration}
+        volume={volume}
+        muted={muted}
+        speed={speed}
+        transform={transform}
+        fullscreen={fullscreen}
+        onTogglePlay={actions.togglePlay}
+        onScrub={setScrub}
+        onSeek={seekTo}
+        onVolume={(v) => { setVolume(v); setMuted(v === 0); }}
+        onToggleMute={actions.toggleMute}
+        onSpeed={setSpeed}
+        onRotate={actions.rotate}
+        onFlipH={() => setTransform((t) => ({ ...t, flipH: !t.flipH }))}
+        onFlipV={() => setTransform((t) => ({ ...t, flipV: !t.flipV }))}
+        onResetTransform={() => setTransform(IDENTITY_TRANSFORM)}
+        onToggleFullscreen={actions.toggleFullscreen}
+      />
+    </div>
+  );
+}

package/src/web/components/editor/video-player/video-settings-menu.tsx

@@ -0,0 +1,92 @@
+import { FlipHorizontal2, FlipVertical2, RotateCcw, RotateCw, Settings, Undo2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { isIdentity, type VideoTransform } from "./video-transform";
+import { VIDEO_SHORTCUTS } from "./use-video-keyboard-shortcuts";
+
+export const SPEED_STEPS = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 2, 3] as const;
+
+interface Props {
+  speed: number;
+  onSpeed: (rate: number) => void;
+  transform: VideoTransform;
+  onRotate: (direction: 1 | -1) => void;
+  onFlipH: () => void;
+  onFlipV: () => void;
+  onResetTransform: () => void;
+}
+
+/** Gear menu: playback speed, orientation fixes, and the shortcut cheat-sheet. */
+export function VideoSettingsMenu({ speed, onSpeed, transform, onRotate, onFlipH, onFlipV, onResetTransform }: Props) {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" size="icon" className="size-11 shrink-0 relative" aria-label="Playback settings">
+          <Settings className="size-5" />
+          {speed !== 1 && (
+            <span className="absolute -top-0.5 -right-0.5 text-[10px] leading-none px-1 rounded bg-primary text-primary-foreground tabular-nums">
+              {speed}x
+            </span>
+          )}
+        </Button>
+      </DropdownMenuTrigger>
+      {/* Flat list on purpose: sub-menus are awkward on touch screens. */}
+      <DropdownMenuContent align="end" className="w-60 max-h-[70vh] overflow-y-auto">
+        <DropdownMenuLabel>Speed</DropdownMenuLabel>
+        <DropdownMenuRadioGroup value={String(speed)} onValueChange={(v) => onSpeed(Number(v))}>
+          <div className="grid grid-cols-4 gap-1 px-1 pb-1">
+            {SPEED_STEPS.map((s) => (
+              <DropdownMenuRadioItem
+                key={s}
+                value={String(s)}
+                className="justify-center pl-2 min-h-11 text-xs tabular-nums data-[state=checked]:bg-accent [&>span:first-child]:hidden"
+              >
+                {s}x
+              </DropdownMenuRadioItem>
+            ))}
+          </div>
+        </DropdownMenuRadioGroup>
+
+        <DropdownMenuSeparator />
+        <DropdownMenuLabel>Orientation</DropdownMenuLabel>
+        <DropdownMenuItem className="min-h-11" onSelect={(e) => { e.preventDefault(); onRotate(1); }}>
+          <RotateCw className="size-4" /> Rotate right <span className="ml-auto text-xs text-text-subtle">R</span>
+        </DropdownMenuItem>
+        <DropdownMenuItem className="min-h-11" onSelect={(e) => { e.preventDefault(); onRotate(-1); }}>
+          <RotateCcw className="size-4" /> Rotate left <span className="ml-auto text-xs text-text-subtle">⇧R</span>
+        </DropdownMenuItem>
+        <DropdownMenuItem className="min-h-11" onSelect={(e) => { e.preventDefault(); onFlipH(); }}>
+          <FlipHorizontal2 className="size-4" /> Flip horizontal {transform.flipH && <span className="ml-auto text-xs">✓</span>}
+        </DropdownMenuItem>
+        <DropdownMenuItem className="min-h-11" onSelect={(e) => { e.preventDefault(); onFlipV(); }}>
+          <FlipVertical2 className="size-4" /> Flip vertical {transform.flipV && <span className="ml-auto text-xs">✓</span>}
+        </DropdownMenuItem>
+        {!isIdentity(transform) && (
+          <DropdownMenuItem className="min-h-11" onSelect={onResetTransform}>
+            <Undo2 className="size-4" /> Reset orientation
+          </DropdownMenuItem>
+        )}
+
+        <DropdownMenuSeparator />
+        <DropdownMenuLabel>Keyboard</DropdownMenuLabel>
+        <div className="px-2 pb-2 grid grid-cols-[auto_1fr] gap-x-3 gap-y-1 text-xs text-text-secondary">
+          {VIDEO_SHORTCUTS.map(([keys, action]) => (
+            <div key={keys} className="contents">
+              <kbd className="font-mono text-text-subtle whitespace-nowrap">{keys}</kbd>
+              <span>{action}</span>
+            </div>
+          ))}
+        </div>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

package/src/web/components/editor/video-player/video-transform.ts

@@ -0,0 +1,49 @@
+/**
+ * Rotation/flip state for the video player, applied as a CSS transform.
+ *
+ * Camera files are often recorded sideways (dashcams, phones) and carry no rotation
+ * metadata, so the viewer needs a manual fix. Kept as pure functions so the layout
+ * math is testable without a DOM.
+ */
+
+export interface VideoTransform {
+  /** Clockwise degrees, one of 0 / 90 / 180 / 270. */
+  rotation: 0 | 90 | 180 | 270;
+  flipH: boolean;
+  flipV: boolean;
+}
+
+export const IDENTITY_TRANSFORM: VideoTransform = { rotation: 0, flipH: false, flipV: false };
+
+export function rotateClockwise(t: VideoTransform): VideoTransform {
+  return { ...t, rotation: ((t.rotation + 90) % 360) as VideoTransform["rotation"] };
+}
+
+export function rotateCounterClockwise(t: VideoTransform): VideoTransform {
+  return { ...t, rotation: ((t.rotation + 270) % 360) as VideoTransform["rotation"] };
+}
+
+export function isIdentity(t: VideoTransform): boolean {
+  return t.rotation === 0 && !t.flipH && !t.flipV;
+}
+
+/** CSS `transform` value. Flip is applied in the video's own axes, before rotation. */
+export function toCssTransform(t: VideoTransform): string {
+  const parts: string[] = [];
+  if (t.rotation) parts.push(`rotate(${t.rotation}deg)`);
+  if (t.flipH) parts.push("scaleX(-1)");
+  if (t.flipV) parts.push("scaleY(-1)");
+  return parts.length ? parts.join(" ") : "none";
+}
+
+/**
+ * Size the element must be laid out at so that, once rotated, it fits `box`.
+ * A 90°/270° rotation swaps the visual axes, so the element's width is limited by
+ * the box's height and vice versa. Returns max-width/max-height in CSS pixels.
+ */
+export function fittedMaxSize(t: VideoTransform, box: { width: number; height: number }): { maxWidth: number; maxHeight: number } {
+  const swapped = t.rotation === 90 || t.rotation === 270;
+  return swapped
+    ? { maxWidth: box.height, maxHeight: box.width }
+    : { maxWidth: box.width, maxHeight: box.height };
+}

package/src/web/components/editor/video-preview.tsx

@@ -1,23 +1,84 @@
-import { Loader2, FileWarning } from "lucide-react";
-import { useBlobUrl } from "@/hooks/use-blob-url";
+import { useEffect, useState } from "react";
+import { Download, FileWarning, Loader2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { extensionOf } from "@/components/os-explorer/can-open-in-ppm";
+import { probeMedia, rawMediaUrl, type MediaProbeInfo } from "@/lib/media-url";
+import { VideoPlayer } from "./video-player/video-player";
 
+/** Containers every browser demuxes natively; anything else goes through ffmpeg. */
+const NATIVE_CONTAINERS = new Set(["mp4", "m4v", "webm", "ogg", "ogv", "mov"]);
+
+type Mode =
+  | { kind: "native" }
+  | { kind: "probing" }
+  | { kind: "transcode"; probe: MediaProbeInfo }
+  | { kind: "unsupported"; probe: MediaProbeInfo | null };
+
+/**
+ * Streams the file straight from its URL so the browser fetches it in byte ranges
+ * (instant start, cheap seeking, no whole-file blob in memory). Files the browser
+ * cannot decode — AVI, MKV, or an mp4 with HEVC inside — fall back to server-side
+ * transcoding when ffmpeg is installed.
+ */
 export function VideoPreview({ filePath, projectName }: { filePath: string; projectName: string }) {
-  const { blobUrl, error } = useBlobUrl(filePath, projectName);
+  const ext = extensionOf(filePath);
+  const [mode, setMode] = useState<Mode>(() => (NATIVE_CONTAINERS.has(ext) ? { kind: "native" } : { kind: "probing" }));
 
-  if (error) {
-    return (
-      <div className="flex flex-col items-center justify-center h-full gap-3 text-text-secondary">
-        <FileWarning className="size-10 text-text-subtle" />
-        <p className="text-sm">Failed to load video.</p>
-      </div>
-    );
-  }
-  if (!blobUrl) {
+  // Reset when a different file is shown in the same tab.
+  useEffect(() => {
+    setMode(NATIVE_CONTAINERS.has(extensionOf(filePath)) ? { kind: "native" } : { kind: "probing" });
+  }, [filePath]);
+
+  useEffect(() => {
+    if (mode.kind !== "probing") return;
+    let cancelled = false;
+    probeMedia(filePath, projectName)
+      .then((probe) => {
+        if (cancelled) return;
+        setMode(probe.transcodable ? { kind: "transcode", probe } : { kind: "unsupported", probe });
+      })
+      .catch(() => { if (!cancelled) setMode({ kind: "unsupported", probe: null }); });
+    return () => { cancelled = true; };
+  }, [mode.kind, filePath, projectName]);
+
+  if (mode.kind === "probing") {
     return <div className="flex items-center justify-center h-full"><Loader2 className="size-5 animate-spin text-text-subtle" /></div>;
   }
+  if (mode.kind === "transcode") {
+    return <VideoPlayer filePath={filePath} projectName={projectName} mode="transcode" probeDuration={mode.probe.duration} />;
+  }
+  if (mode.kind === "unsupported") {
+    return <UnsupportedVideo filePath={filePath} projectName={projectName} probe={mode.probe} />;
+  }
+  return (
+    <VideoPlayer
+      filePath={filePath}
+      projectName={projectName}
+      mode="native"
+      // A native container can still hide a codec the browser lacks (HEVC in .mov);
+      // let ffmpeg have a go before giving up.
+      onNativeError={() => setMode({ kind: "probing" })}
+    />
+  );
+}
+
+function UnsupportedVideo({ filePath, projectName, probe }: { filePath: string; projectName: string; probe: MediaProbeInfo | null }) {
+  const codecs = [probe?.video?.codec, probe?.audio?.codec].filter(Boolean).join(" + ");
   return (
-    <div className="flex items-center justify-center h-full p-4 bg-surface overflow-auto">
-      <video src={blobUrl} controls className="max-w-full max-h-full" />
+    <div className="flex flex-col items-center justify-center h-full gap-3 text-text-secondary p-6 text-center">
+      <FileWarning className="size-10 text-text-subtle" />
+      <p className="text-sm">
+        This video cannot be played in the browser{codecs ? ` (${codecs})` : ""}.
+      </p>
+      <p className="text-xs text-text-subtle max-w-sm">
+        Install <code>ffmpeg</code> on the PPM server (e.g. <code>winget install ffmpeg</code>, <code>brew install ffmpeg</code>,{" "}
+        <code>apt install ffmpeg</code>) and restart PPM to transcode it on the fly.
+      </p>
+      <Button asChild variant="outline" size="sm" className="h-11 px-4">
+        <a href={`${rawMediaUrl(filePath, projectName)}&download=true`} download>
+          <Download className="size-4 mr-2" /> Download file
+        </a>
+      </Button>
     </div>
   );
 }

package/src/web/components/explorer/file-tree.tsx

@@ -41,6 +41,7 @@ import { flattenVisibleTree, type InputRow } from "./flatten-visible-tree";
 import { downloadFile, downloadFolder } from "@/lib/file-download";
 import { api, projectUrl } from "@/lib/api-client";
 import { openExplorer } from "@/components/os-explorer/open-explorer";
+import { openTerminalAt } from "@/lib/open-terminal-at";
 import { fsChanged, onFsChanged } from "@/components/os-explorer/explorer-store";
 import { dirnameOf } from "@/components/os-explorer/format-file-meta";
 import { useDragAutoScroll } from "@/components/os-explorer/dnd/use-drag-auto-scroll";
@@ -378,6 +379,11 @@ export function FileTree({ onFileOpen }: FileTreeProps = {}) {
       void openExplorer(absoluteProjectPath(activeProject!.path, target));
       return;
     }
+    if (action === "open-in-terminal") {
+      const target = node.type === "directory" ? node.path : parentDirOfRelative(node.path);
+      openTerminalAt(absoluteProjectPath(activeProject!.path, target), activeProject!.name);
+      return;
+    }
     if (action === "paste" && node.type === "directory") {
       pasteFiles(node.path);
       return;

package/src/web/components/explorer/tree-node-context-menu.tsx

@@ -1,7 +1,7 @@
 /**
  * Context menu items for a tree node (file or folder).
  */
-import { Download, FolderOpen } from "lucide-react";
+import { Download, FolderOpen, TerminalSquare } from "lucide-react";
 import type { FileNode, ClipboardState } from "@/stores/file-store";
 import {
   ContextMenuContent,
@@ -43,6 +43,10 @@ export function TreeNodeContextMenu({
             <FolderOpen className="size-3.5 mr-2" />
             Open in File Explorer
           </ContextMenuItem>
+          <ContextMenuItem onClick={() => onAction("open-in-terminal", node)}>
+            <TerminalSquare className="size-3.5 mr-2" />
+            Open in Terminal
+          </ContextMenuItem>
           <ContextMenuSeparator />
         </>
       )}

package/src/web/components/floating-window/window-content-registry.ts

@@ -21,6 +21,7 @@ export interface WindowContentProps {
 
 export const WINDOW_CONTENT: Record<WindowKind, LazyExoticComponent<ComponentType<WindowContentProps>>> = {
   explorer: lazy(() => import("@/components/os-explorer/explorer-window-content")),
+  "team-member": lazy(() => import("@/components/chat/team-member-window-content")),
 };
 
 /**
@@ -41,6 +42,10 @@ export function chromeFor(kind: WindowKind): WindowChrome | undefined {
 export function windowTitle(kind: WindowKind, payload?: Record<string, unknown>): string {
   const explicit = payload?.title;
   if (typeof explicit === "string" && explicit.trim()) return explicit;
+  if (kind === "team-member") {
+    const member = payload?.memberName;
+    return typeof member === "string" && member ? `Session — ${member}` : "Team member";
+  }
   const path = payload?.path;
   if (kind === "explorer" && typeof path === "string" && path) {
     const segments = path.split(/[\\/]/).filter(Boolean);

package/src/web/components/floating-window/window-store-types.ts

@@ -3,7 +3,7 @@
 import type { Rect } from "./window-geometry";
 
 /** Content families the layer can host. The registry maps each kind to its body component. */
-export type WindowKind = "explorer";
+export type WindowKind = "explorer" | "team-member";
 
 export type WindowVisualState = "normal" | "maximized" | "minimized";