@hienlh/ppm 0.18.7 → 0.18.8

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

@@ -1,7 +1,7 @@
 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 { newMediaSessionId, rawMediaUrl, stopTranscode, 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";
@@ -30,7 +30,13 @@ export function VideoPlayer({ filePath, projectName, mode, probeDuration = null,
   const rootRef = useRef<HTMLDivElement>(null);
   const stageRef = useRef<HTMLDivElement>(null);
   const videoRef = useRef<HTMLVideoElement>(null);
-  const resumeRef = useRef(true);
+  // Whether the user wants playback. Read after a transcode restart to decide between
+  // resuming and staying paused; derived from user actions, not `video.paused`, because
+  // the element reports paused while a fresh stream is still loading.
+  const wantPlayRef = useRef(true);
+  // One id per mounted player: the server replaces (kills) this player's previous
+  // ffmpeg job on every seek and stops it when told the player is gone.
+  const [sessionId] = useState(newMediaSessionId);
 
   const [start, setStart] = useState(0);
   const [elapsed, setElapsed] = useState(0);
@@ -47,7 +53,7 @@ export function VideoPlayer({ filePath, projectName, mode, probeDuration = null,
   const [error, setError] = useState<string | null>(null);
 
   const isTranscode = mode === "transcode";
-  const src = isTranscode ? transcodeMediaUrl(filePath, projectName, start) : rawMediaUrl(filePath, projectName);
+  const src = isTranscode ? transcodeMediaUrl(filePath, projectName, start, sessionId) : rawMediaUrl(filePath, projectName);
   const duration = isTranscode ? probeDuration : nativeDuration;
   const position = scrub ?? (isTranscode ? start + elapsed : elapsed);
 
@@ -59,14 +65,26 @@ export function VideoPlayer({ filePath, projectName, mode, probeDuration = null,
   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.
+  // Leaving the player must stop its ffmpeg job explicitly: a detached <video> keeps its
+  // fetch alive until garbage-collected, and a proxy such as Cloudflare Tunnel keeps the
+  // origin request open even after the browser has dropped it. Emptying the source aborts
+  // the local load; the DELETE tells the server. `isConnected` guards StrictMode's
+  // simulated unmount, where the element stays in the DOM and React would not re-apply
+  // the src attribute afterwards. `pagehide` covers reload/close, where cleanups never run.
   useEffect(() => {
     const v = videoRef.current;
-    return () => { if (v && !v.isConnected) { v.pause(); v.removeAttribute("src"); v.load(); } };
-  }, []);
+    const stop = () => { if (isTranscode) stopTranscode(filePath, projectName, sessionId); };
+    window.addEventListener("pagehide", stop);
+    return () => {
+      window.removeEventListener("pagehide", stop);
+      if (v && !v.isConnected) {
+        v.pause();
+        v.removeAttribute("src");
+        v.load();
+        stop();
+      }
+    };
+  }, [filePath, projectName, isTranscode, sessionId]);
 
   useEffect(() => {
     const onFs = () => setFullscreen(document.fullscreenElement === rootRef.current);
@@ -90,12 +108,17 @@ export function VideoPlayer({ filePath, projectName, mode, probeDuration = 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(); },
+    togglePlay: () => {
+      const v = videoRef.current;
+      if (!v) return;
+      wantPlayRef.current = v.paused;
+      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();
@@ -113,14 +136,8 @@ export function VideoPlayer({ filePath, projectName, mode, probeDuration = null,
   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>
-    );
-  }
+  // Retry re-requests the same position; the nudge makes the URL differ so the element reloads.
+  const retry = () => { setError(null); setStart((s) => s + 0.001); };
 
   return (
     <div
@@ -144,10 +161,13 @@ export function VideoPlayer({ filePath, projectName, mode, probeDuration = null,
           preload={isTranscode ? "auto" : "metadata"}
           style={{ transform: toCssTransform(transform), maxWidth: fitted.maxWidth || undefined, maxHeight: fitted.maxHeight || undefined }}
           onLoadedMetadata={(e) => {
+            // Re-apply user settings: a fresh load (seek restart, retry) resets the element.
             const v = e.currentTarget;
             v.playbackRate = speed;
+            v.volume = volume;
+            v.muted = muted;
             if (!isTranscode && Number.isFinite(v.duration)) setNativeDuration(v.duration);
-            if (isTranscode && !resumeRef.current) v.pause();
+            if (isTranscode && !wantPlayRef.current) v.pause();
           }}
           onPlay={() => setPlaying(true)}
           onPause={() => setPlaying(false)}
@@ -155,13 +175,25 @@ export function VideoPlayer({ filePath, projectName, mode, probeDuration = null,
           onPlaying={() => setWaiting(false)}
           onCanPlay={() => setWaiting(false)}
           onTimeUpdate={(e) => setElapsed(e.currentTarget.currentTime)}
-          onEnded={() => setPlaying(false)}
+          onEnded={() => { setPlaying(false); wantPlayRef.current = 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" />}
+        {waiting && !error && <Loader2 className="absolute size-8 animate-spin text-white/80 pointer-events-none" />}
+        {/* Overlay rather than a replacement tree: the <video> stays mounted so volume,
+            mute and speed survive a retry. */}
+        {error && (
+          <div
+            className="absolute inset-0 flex flex-col items-center justify-center gap-3 bg-black/85 text-text-secondary p-4 text-center"
+            onClick={(e) => e.stopPropagation()}
+            onDoubleClick={(e) => e.stopPropagation()}
+          >
+            <p className="text-sm">{error}</p>
+            <Button variant="outline" size="sm" className="h-11 px-4" onClick={retry}>Retry</Button>
+          </div>
+        )}
       </div>
 
       <VideoPlayerControls

package/src/web/lib/media-url.ts

@@ -30,10 +30,36 @@ export function rawMediaUrl(filePath: string, projectName: string): string {
   return withToken(mediaBase("raw", filePath, projectName));
 }
 
-/** Live ffmpeg → fragmented-MP4 stream starting at `start` seconds. */
-export function transcodeMediaUrl(filePath: string, projectName: string, start = 0): string {
-  const base = mediaBase("transcode", filePath, projectName);
-  return withToken(start > 0 ? `${base}&start=${start.toFixed(3)}` : base);
+/**
+ * Live ffmpeg → fragmented-MP4 stream starting at `start` seconds.
+ * `sessionId` identifies the player instance: the server kills that player's previous
+ * job before starting this one, so a seek never leaves an orphaned ffmpeg behind —
+ * even through proxies (Cloudflare Tunnel) that do not propagate client disconnects.
+ */
+export function transcodeMediaUrl(filePath: string, projectName: string, start = 0, sessionId?: string): string {
+  let url = mediaBase("transcode", filePath, projectName);
+  if (start > 0) url += `&start=${start.toFixed(3)}`;
+  if (sessionId) url += `&sid=${encodeURIComponent(sessionId)}`;
+  return withToken(url);
+}
+
+/**
+ * Tell the server the player is gone so its ffmpeg job stops now. `keepalive` lets the
+ * request complete even when fired from a page that is unloading.
+ */
+export function stopTranscode(filePath: string, projectName: string, sessionId: string): void {
+  const prefix = isExternalPath(filePath) ? "/api/fs" : `${projectUrl(projectName)}/files`;
+  const token = getAuthToken();
+  void fetch(`${prefix}/transcode?sid=${encodeURIComponent(sessionId)}`, {
+    method: "DELETE",
+    keepalive: true,
+    headers: token ? { Authorization: `Bearer ${token}` } : {},
+  }).catch(() => {});
+}
+
+/** Short random id for one mounted player. */
+export function newMediaSessionId(): string {
+  return Math.random().toString(36).slice(2, 10) + Date.now().toString(36);
 }
 
 export interface MediaProbeInfo {

package/.release-run.sh

@@ -1,5 +0,0 @@
-#!/usr/bin/env bash
-# Temporary runner: invokes the release script with bun on PATH. Deleted after use.
-export PATH="$HOME/.bun/bin:$PATH"
-cd /c/Users/PC/ppm || exit 1
-exec bash scripts/release.sh 0.18.7

package/dist/web/assets/media-url-CUpN5vI1.js

@@ -1 +0,0 @@
-import{i as e,n as t,r as n}from"./api-client-BSB14J4w.js";function r(e){return/^(\/|[A-Za-z]:[/\\])/.test(e)}function i(t,n,i){return`${r(n)?`/api/fs`:`${e(i)}/files`}/${t}?path=${encodeURIComponent(n)}`}function a(e){let t=n();return t?`${e}&token=${encodeURIComponent(t)}`:e}function o(e,t){return a(i(`raw`,e,t))}function s(e,t,n=0){let r=i(`transcode`,e,t);return a(n>0?`${r}&start=${n.toFixed(3)}`:r)}function c(e,n){return t.get(i(`probe`,e,n))}export{o as n,s as r,c as t};

package/dist/web/assets/video-preview-CwtLPELG.js

@@ -1 +0,0 @@
-import{o as e}from"./rolldown-runtime-FhOqtrmT.js";import{S as t,x as n}from"./vendor-markdown-Ls5AcU91.js";import"./vendor-ui-CaeeFO0B.js";import{t as r}from"./createLucideIcon-D8pyde1A.js";import{t as i}from"./button-B4MWPjWj.js";import{t as a}from"./download-D9UYwY0-.js";import{t as o}from"./file-exclamation-point-a8f3_w7a.js";import"./api-client-BSB14J4w.js";import{Bt as s,Hn as c,Ht as l,Ln as u,Lt as d,On as f,Rt as p,Ut as m,Vn as h,Vt as g,Wn as _,er as v,qt as y,zt as b}from"./index-DgbOF3xa.js";import{n as x,r as ee,t as S}from"./media-url-CUpN5vI1.js";import{o as C}from"./can-open-in-ppm-DXGOSUQc.js";var w=r(`flip-horizontal-2`,[[`path`,{d:`m3 7 5 5-5 5V7`,key:`couhi7`}],[`path`,{d:`m21 7-5 5 5 5V7`,key:`6ouia7`}],[`path`,{d:`M12 20v2`,key:`1lh1kg`}],[`path`,{d:`M12 14v2`,key:`8jcxud`}],[`path`,{d:`M12 8v2`,key:`1woqiv`}],[`path`,{d:`M12 2v2`,key:`tus03m`}]]),T=r(`flip-vertical-2`,[[`path`,{d:`m17 3-5 5-5-5h10`,key:`1ftt6x`}],[`path`,{d:`m17 21-5-5-5 5h10`,key:`1m0wmu`}],[`path`,{d:`M4 12H2`,key:`rhcxmi`}],[`path`,{d:`M10 12H8`,key:`s88cx1`}],[`path`,{d:`M16 12h-2`,key:`10asgb`}],[`path`,{d:`M22 12h-2`,key:`14jgyd`}]]),E=r(`maximize`,[[`path`,{d:`M8 3H5a2 2 0 0 0-2 2v3`,key:`1dcmit`}],[`path`,{d:`M21 8V5a2 2 0 0 0-2-2h-3`,key:`1e4gt3`}],[`path`,{d:`M3 16v3a2 2 0 0 0 2 2h3`,key:`wsl5sc`}],[`path`,{d:`M16 21h3a2 2 0 0 0 2-2v-3`,key:`18trek`}]]),D=r(`minimize`,[[`path`,{d:`M8 3v3a2 2 0 0 1-2 2H3`,key:`hohbtr`}],[`path`,{d:`M21 8h-3a2 2 0 0 1-2-2V3`,key:`5jw1f3`}],[`path`,{d:`M3 16h3a2 2 0 0 1 2 2v3`,key:`198tvr`}],[`path`,{d:`M16 21v-3a2 2 0 0 1 2-2h3`,key:`ph8mxp`}]]),O=r(`pause`,[[`rect`,{x:`14`,y:`3`,width:`5`,height:`18`,rx:`1`,key:`kaeet6`}],[`rect`,{x:`5`,y:`3`,width:`5`,height:`18`,rx:`1`,key:`1wsw3u`}]]),k=r(`volume-2`,[[`path`,{d:`M11 4.702a.705.705 0 0 0-1.203-.498L6.413 7.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298z`,key:`uqj9uw`}],[`path`,{d:`M16 9a5 5 0 0 1 0 6`,key:`1q6k2b`}],[`path`,{d:`M19.364 18.364a9 9 0 0 0 0-12.728`,key:`ijwkga`}]]),A=r(`volume-1`,[[`path`,{d:`M11 4.702a.705.705 0 0 0-1.203-.498L6.413 7.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298z`,key:`uqj9uw`}],[`path`,{d:`M16 9a5 5 0 0 1 0 6`,key:`1q6k2b`}]]),j=r(`volume-x`,[[`path`,{d:`M11 4.702a.705.705 0 0 0-1.203-.498L6.413 7.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298z`,key:`uqj9uw`}],[`line`,{x1:`22`,x2:`16`,y1:`9`,y2:`15`,key:`1ewh16`}],[`line`,{x1:`16`,x2:`22`,y1:`9`,y2:`15`,key:`5ykzw1`}]]),M=e(t(),1),N={rotation:0,flipH:!1,flipV:!1};function P(e){return{...e,rotation:(e.rotation+90)%360}}function F(e){return{...e,rotation:(e.rotation+270)%360}}function I(e){return e.rotation===0&&!e.flipH&&!e.flipV}function L(e){let t=[];return e.rotation&&t.push(`rotate(${e.rotation}deg)`),e.flipH&&t.push(`scaleX(-1)`),e.flipV&&t.push(`scaleY(-1)`),t.length?t.join(` `):`none`}function R(e,t){return e.rotation===90||e.rotation===270?{maxWidth:t.height,maxHeight:t.width}:{maxWidth:t.width,maxHeight:t.height}}var z=[[`Space / K`,`Play / pause`],[`← / →`,`Seek 5s`],[`J / L or Shift+← / →`,`Seek 10s`],[`↑ / ↓`,`Volume`],[`M`,`Mute`],[`F`,`Fullscreen`],[`< / >`,`Speed`],[`R / Shift+R`,`Rotate`]];function B(e){return(0,M.useCallback)(t=>{let n=t.target;if(n.tagName===`INPUT`||n.tagName===`TEXTAREA`||n.isContentEditable||t.ctrlKey||t.metaKey||t.altKey)return;let r=!0;switch(t.key){case` `:case`k`:case`K`:e.togglePlay();break;case`ArrowLeft`:e.seekBy(t.shiftKey?-10:-5);break;case`ArrowRight`:e.seekBy(t.shiftKey?10:5);break;case`j`:case`J`:e.seekBy(-10);break;case`l`:case`L`:e.seekBy(10);break;case`ArrowUp`:e.volumeBy(.1);break;case`ArrowDown`:e.volumeBy(-.1);break;case`m`:case`M`:e.toggleMute();break;case`f`:case`F`:e.toggleFullscreen();break;case`<`:case`,`:e.speedStep(-1);break;case`>`:case`.`:e.speedStep(1);break;case`r`:e.rotate(1);break;case`R`:e.rotate(-1);break;default:r=!1}r&&t.preventDefault()},[e])}var V=n(),H=[.25,.5,.75,1,1.25,1.5,2,3];function U({speed:e,onSpeed:t,transform:n,onRotate:r,onFlipH:a,onFlipV:o,onResetTransform:_}){return(0,V.jsxs)(d,{children:[(0,V.jsx)(y,{asChild:!0,children:(0,V.jsxs)(i,{variant:`ghost`,size:`icon`,className:`size-11 shrink-0 relative`,"aria-label":`Playback settings`,children:[(0,V.jsx)(u,{className:`size-5`}),e!==1&&(0,V.jsxs)(`span`,{className:`absolute -top-0.5 -right-0.5 text-[10px] leading-none px-1 rounded bg-primary text-primary-foreground tabular-nums`,children:[e,`x`]})]})}),(0,V.jsxs)(p,{align:`end`,className:`w-60 max-h-[70vh] overflow-y-auto`,children:[(0,V.jsx)(s,{children:`Speed`}),(0,V.jsx)(g,{value:String(e),onValueChange:e=>t(Number(e)),children:(0,V.jsx)(`div`,{className:`grid grid-cols-4 gap-1 px-1 pb-1`,children:H.map(e=>(0,V.jsxs)(l,{value:String(e),className:`justify-center pl-2 min-h-11 text-xs tabular-nums data-[state=checked]:bg-accent [&>span:first-child]:hidden`,children:[e,`x`]},e))})}),(0,V.jsx)(m,{}),(0,V.jsx)(s,{children:`Orientation`}),(0,V.jsxs)(b,{className:`min-h-11`,onSelect:e=>{e.preventDefault(),r(1)},children:[(0,V.jsx)(h,{className:`size-4`}),` Rotate right `,(0,V.jsx)(`span`,{className:`ml-auto text-xs text-text-subtle`,children:`R`})]}),(0,V.jsxs)(b,{className:`min-h-11`,onSelect:e=>{e.preventDefault(),r(-1)},children:[(0,V.jsx)(c,{className:`size-4`}),` Rotate left `,(0,V.jsx)(`span`,{className:`ml-auto text-xs text-text-subtle`,children:`⇧R`})]}),(0,V.jsxs)(b,{className:`min-h-11`,onSelect:e=>{e.preventDefault(),a()},children:[(0,V.jsx)(w,{className:`size-4`}),` Flip horizontal `,n.flipH&&(0,V.jsx)(`span`,{className:`ml-auto text-xs`,children:`✓`})]}),(0,V.jsxs)(b,{className:`min-h-11`,onSelect:e=>{e.preventDefault(),o()},children:[(0,V.jsx)(T,{className:`size-4`}),` Flip vertical `,n.flipV&&(0,V.jsx)(`span`,{className:`ml-auto text-xs`,children:`✓`})]}),!I(n)&&(0,V.jsxs)(b,{className:`min-h-11`,onSelect:_,children:[(0,V.jsx)(f,{className:`size-4`}),` Reset orientation`]}),(0,V.jsx)(m,{}),(0,V.jsx)(s,{children:`Keyboard`}),(0,V.jsx)(`div`,{className:`px-2 pb-2 grid grid-cols-[auto_1fr] gap-x-3 gap-y-1 text-xs text-text-secondary`,children:z.map(([e,t])=>(0,V.jsxs)(`div`,{className:`contents`,children:[(0,V.jsx)(`kbd`,{className:`font-mono text-text-subtle whitespace-nowrap`,children:e}),(0,V.jsx)(`span`,{children:t})]},e))})]})]})}function W(e){let t=e.muted||e.volume===0?j:e.volume<.5?A:k,n=t=>e.onSeek(Number(t.target.value));return(0,V.jsxs)(`div`,{className:`flex items-center gap-1 px-2 py-1 bg-surface border-t border-border`,children:[(0,V.jsx)(i,{variant:`ghost`,size:`icon`,className:`size-11 shrink-0`,onClick:e.onTogglePlay,"aria-label":e.playing?`Pause`:`Play`,children:e.playing?(0,V.jsx)(O,{className:`size-5`}):(0,V.jsx)(_,{className:`size-5`})}),(0,V.jsxs)(`span`,{className:`text-xs tabular-nums text-text-secondary shrink-0 min-w-[4.5rem] text-center`,children:[G(e.position),e.duration?` / ${G(e.duration)}`:``]}),e.duration?(0,V.jsx)(`input`,{type:`range`,min:0,max:e.duration,step:.1,value:Math.min(e.position,e.duration),"aria-label":`Seek`,className:`flex-1 h-11 accent-primary cursor-pointer min-w-0`,onChange:t=>e.onScrub(Number(t.target.value)),onPointerUp:n,onKeyUp:n,onTouchEnd:n}):(0,V.jsx)(`div`,{className:`flex-1`}),(0,V.jsxs)(`div`,{className:`flex items-center shrink-0`,children:[(0,V.jsx)(i,{variant:`ghost`,size:`icon`,className:`size-11`,onClick:e.onToggleMute,"aria-label":e.muted?`Unmute`:`Mute`,children:(0,V.jsx)(t,{className:`size-5`})}),(0,V.jsx)(`input`,{type:`range`,min:0,max:1,step:.05,value:e.muted?0:e.volume,"aria-label":`Volume`,className:`hidden sm:block w-20 h-11 accent-primary cursor-pointer`,onChange:t=>e.onVolume(Number(t.target.value))})]}),(0,V.jsx)(U,{speed:e.speed,onSpeed:e.onSpeed,transform:e.transform,onRotate:e.onRotate,onFlipH:e.onFlipH,onFlipV:e.onFlipV,onResetTransform:e.onResetTransform}),(0,V.jsx)(i,{variant:`ghost`,size:`icon`,className:`size-11 shrink-0`,onClick:e.onToggleFullscreen,"aria-label":e.fullscreen?`Exit fullscreen`:`Fullscreen`,children:e.fullscreen?(0,V.jsx)(D,{className:`size-5`}):(0,V.jsx)(E,{className:`size-5`})})]})}function G(e){let t=Math.max(0,Math.floor(Number.isFinite(e)?e:0)),n=Math.floor(t/3600),r=Math.floor(t%3600/60),i=t%60,a=n?String(r).padStart(2,`0`):String(r);return`${n?`${n}:`:``}${a}:${String(i).padStart(2,`0`)}`}function K({filePath:e,projectName:t,mode:n,probeDuration:r=null,onNativeError:a}){let o=(0,M.useRef)(null),s=(0,M.useRef)(null),c=(0,M.useRef)(null),l=(0,M.useRef)(!0),[u,d]=(0,M.useState)(0),[f,p]=(0,M.useState)(0),[m,h]=(0,M.useState)(null),[g,_]=(0,M.useState)(!1),[y,b]=(0,M.useState)(!0),[S,C]=(0,M.useState)(null),[w,T]=(0,M.useState)(1),[E,D]=(0,M.useState)(!1),[O,k]=(0,M.useState)(1),[A,j]=(0,M.useState)(N),[I,z]=(0,M.useState)(!1),[U,G]=(0,M.useState)({width:0,height:0}),[K,q]=(0,M.useState)(null),J=n===`transcode`,Y=J?ee(e,t,u):x(e,t),X=J?r:m,te=S??(J?u+f:f);(0,M.useEffect)(()=>{p(0),b(!0),q(null)},[Y]),(0,M.useEffect)(()=>{d(0),h(null),j(N)},[e,n]),(0,M.useEffect)(()=>{let e=c.current;e&&(e.volume=w,e.muted=E)},[w,E]),(0,M.useEffect)(()=>{let e=c.current;e&&(e.playbackRate=O)},[O,Y]),(0,M.useEffect)(()=>{let e=c.current;return()=>{e&&!e.isConnected&&(e.pause(),e.removeAttribute(`src`),e.load())}},[]),(0,M.useEffect)(()=>{let e=()=>z(document.fullscreenElement===o.current);return document.addEventListener(`fullscreenchange`,e),()=>document.removeEventListener(`fullscreenchange`,e)},[]),(0,M.useEffect)(()=>{let e=s.current;if(!e)return;let t=new ResizeObserver(()=>G({width:e.clientWidth,height:e.clientHeight}));return t.observe(e),()=>t.disconnect()},[]);let Z=(0,M.useCallback)(e=>{let t=c.current,n=Math.max(0,X?Math.min(e,X-.5):e);if(C(null),!J){t&&(t.currentTime=n);return}Math.abs(n-(u+(t?.currentTime??0)))<.5||(l.current=!(t?.paused??!1),d(n))},[X,J,u]),Q=(0,M.useMemo)(()=>({togglePlay:()=>{let e=c.current;e&&(e.paused?e.play().catch(()=>{}):e.pause())},seekBy:e=>Z((J?u:0)+(c.current?.currentTime??0)+e),toggleFullscreen:()=>{document.fullscreenElement?document.exitFullscreen():o.current?.requestFullscreen?.()},toggleMute:()=>D(e=>!e),volumeBy:e=>{D(!1),T(t=>Math.min(1,Math.max(0,Math.round((t+e)*100)/100)))},speedStep:e=>k(t=>{let n=H.indexOf(t);return H[Math.min(H.length-1,Math.max(0,(n===-1?3:n)+e))]??1}),rotate:e=>j(t=>e===1?P(t):F(t))}),[Z,J,u]),ne=B(Q),$=R(A,U);return K?(0,V.jsxs)(`div`,{className:`flex flex-col items-center justify-center h-full gap-3 text-text-secondary p-4 text-center`,children:[(0,V.jsx)(`p`,{className:`text-sm`,children:K}),(0,V.jsx)(i,{variant:`outline`,size:`sm`,onClick:()=>{q(null),d(e=>e+.001)},children:`Retry`})]}):(0,V.jsxs)(`div`,{ref:o,"data-testid":`video-player`,tabIndex:0,onKeyDown:ne,className:`flex flex-col h-full bg-black outline-none focus-visible:ring-1 focus-visible:ring-primary/60`,children:[(0,V.jsxs)(`div`,{ref:s,className:`relative flex-1 min-h-0 flex items-center justify-center overflow-hidden`,onClick:e=>{o.current?.focus(),e.detail===1&&Q.togglePlay()},onDoubleClick:Q.toggleFullscreen,children:[(0,V.jsx)(`video`,{ref:c,src:Y,autoPlay:!0,playsInline:!0,preload:J?`auto`:`metadata`,style:{transform:L(A),maxWidth:$.maxWidth||void 0,maxHeight:$.maxHeight||void 0},onLoadedMetadata:e=>{let t=e.currentTarget;t.playbackRate=O,!J&&Number.isFinite(t.duration)&&h(t.duration),J&&!l.current&&t.pause()},onPlay:()=>_(!0),onPause:()=>_(!1),onWaiting:()=>b(!0),onPlaying:()=>b(!1),onCanPlay:()=>b(!1),onTimeUpdate:e=>p(e.currentTarget.currentTime),onEnded:()=>_(!1),onError:()=>{J?q(`Transcoding failed. ffmpeg may have stopped or the file is corrupt.`):a?.()}}),y&&(0,V.jsx)(v,{className:`absolute size-8 animate-spin text-white/80 pointer-events-none`})]}),(0,V.jsx)(W,{playing:g,position:te,duration:X,volume:w,muted:E,speed:O,transform:A,fullscreen:I,onTogglePlay:Q.togglePlay,onScrub:C,onSeek:Z,onVolume:e=>{T(e),D(e===0)},onToggleMute:Q.toggleMute,onSpeed:k,onRotate:Q.rotate,onFlipH:()=>j(e=>({...e,flipH:!e.flipH})),onFlipV:()=>j(e=>({...e,flipV:!e.flipV})),onResetTransform:()=>j(N),onToggleFullscreen:Q.toggleFullscreen})]})}var q=new Set([`mp4`,`m4v`,`webm`,`ogg`,`ogv`,`mov`]);function J({filePath:e,projectName:t}){let n=C(e),[r,i]=(0,M.useState)(()=>q.has(n)?{kind:`native`}:{kind:`probing`});return(0,M.useEffect)(()=>{i(q.has(C(e))?{kind:`native`}:{kind:`probing`})},[e]),(0,M.useEffect)(()=>{if(r.kind!==`probing`)return;let n=!1;return S(e,t).then(e=>{n||i(e.transcodable?{kind:`transcode`,probe:e}:{kind:`unsupported`,probe:e})}).catch(()=>{n||i({kind:`unsupported`,probe:null})}),()=>{n=!0}},[r.kind,e,t]),r.kind===`probing`?(0,V.jsx)(`div`,{className:`flex items-center justify-center h-full`,children:(0,V.jsx)(v,{className:`size-5 animate-spin text-text-subtle`})}):r.kind===`transcode`?(0,V.jsx)(K,{filePath:e,projectName:t,mode:`transcode`,probeDuration:r.probe.duration}):r.kind===`unsupported`?(0,V.jsx)(Y,{filePath:e,projectName:t,probe:r.probe}):(0,V.jsx)(K,{filePath:e,projectName:t,mode:`native`,onNativeError:()=>i({kind:`probing`})})}function Y({filePath:e,projectName:t,probe:n}){let r=[n?.video?.codec,n?.audio?.codec].filter(Boolean).join(` + `);return(0,V.jsxs)(`div`,{className:`flex flex-col items-center justify-center h-full gap-3 text-text-secondary p-6 text-center`,children:[(0,V.jsx)(o,{className:`size-10 text-text-subtle`}),(0,V.jsxs)(`p`,{className:`text-sm`,children:[`This video cannot be played in the browser`,r?` (${r})`:``,`.`]}),(0,V.jsxs)(`p`,{className:`text-xs text-text-subtle max-w-sm`,children:[`Install `,(0,V.jsx)(`code`,{children:`ffmpeg`}),` on the PPM server (e.g. `,(0,V.jsx)(`code`,{children:`winget install ffmpeg`}),`, `,(0,V.jsx)(`code`,{children:`brew install ffmpeg`}),`,`,` `,(0,V.jsx)(`code`,{children:`apt install ffmpeg`}),`) and restart PPM to transcode it on the fly.`]}),(0,V.jsx)(i,{asChild:!0,variant:`outline`,size:`sm`,className:`h-11 px-4`,children:(0,V.jsxs)(`a`,{href:`${x(e,t)}&download=true`,download:!0,children:[(0,V.jsx)(a,{className:`size-4 mr-2`}),` Download file`]})})]})}export{J as VideoPreview};