@hienlh/ppm 0.22.9 → 0.22.10

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

@@ -1 +0,0 @@
-import{o as e}from"./rolldown-runtime-FhOqtrmT.js";import{C as t,S as n}from"./vendor-markdown-CuWCHIVb.js";import"./vendor-ui-DmZ-Mb-H.js";import{$n as r,Ct as i,Dr as a,Fr as o,Gn as s,Ir as c,Pr as l,Tt as u,er as d,ln as f,mn as p,or as m,st as h,xn as g,yt as _,zn as v}from"./icons-DQjqk0lJ.js";import"./api-client-Jn3njtNw.js";import"./portal-container-context-BarKmT4S.js";import{t as y}from"./button-B9CTrsEf.js";import{Gt as b,Jt as x,Kt as S,Ut as C,Xt as w,Yt as T,en as E,qt as D}from"./index-CoTvom0K.js";import{o as O}from"./can-open-in-ppm-CUW3vVJg.js";import{a as k,i as ee,n as A,r as j,t as M}from"./media-url-CVO4m4zr.js";var N=e(t(),1),P={rotation:0,flipH:!1,flipV:!1};function F(e){return{...e,rotation:(e.rotation+90)%360}}function I(e){return{...e,rotation:(e.rotation+270)%360}}function L(e){return e.rotation===0&&!e.flipH&&!e.flipV}function te(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 ne(e,t){return e.rotation===90||e.rotation===270?{maxWidth:t.height,maxHeight:t.width}:{maxWidth:t.width,maxHeight:t.height}}var R=[[`Space / K`,`Play / pause`],[`← / →`,`Seek 5s`],[`J / L or Shift+← / →`,`Seek 10s`],[`↑ / ↓`,`Volume`],[`M`,`Mute`],[`F`,`Fullscreen`],[`< / >`,`Speed`],[`R / Shift+R`,`Rotate`]];function re(e){return(0,N.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 z=n(),B=[.25,.5,.75,1,1.25,1.5,2,3];function V({speed:e,onSpeed:t,transform:n,onRotate:o,onFlipH:s,onFlipV:c,onResetTransform:l}){return(0,z.jsxs)(C,{children:[(0,z.jsx)(E,{asChild:!0,children:(0,z.jsxs)(y,{variant:`ghost`,size:`icon`,className:`size-11 shrink-0 relative`,"aria-label":`Playback settings`,children:[(0,z.jsx)(m,{className:`size-5`}),e!==1&&(0,z.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,z.jsxs)(b,{align:`end`,className:`w-60 max-h-[70vh] overflow-y-auto`,children:[(0,z.jsx)(D,{children:`Speed`}),(0,z.jsx)(x,{value:String(e),onValueChange:e=>t(Number(e)),children:(0,z.jsx)(`div`,{className:`grid grid-cols-4 gap-1 px-1 pb-1`,children:B.map(e=>(0,z.jsxs)(T,{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,z.jsx)(w,{}),(0,z.jsx)(D,{children:`Orientation`}),(0,z.jsxs)(S,{className:`min-h-11`,onSelect:e=>{e.preventDefault(),o(1)},children:[(0,z.jsx)(d,{className:`size-4`}),` Rotate right `,(0,z.jsx)(`span`,{className:`ml-auto text-xs text-text-subtle`,children:`R`})]}),(0,z.jsxs)(S,{className:`min-h-11`,onSelect:e=>{e.preventDefault(),o(-1)},children:[(0,z.jsx)(r,{className:`size-4`}),` Rotate left `,(0,z.jsx)(`span`,{className:`ml-auto text-xs text-text-subtle`,children:`⇧R`})]}),(0,z.jsxs)(S,{className:`min-h-11`,onSelect:e=>{e.preventDefault(),s()},children:[(0,z.jsx)(i,{className:`size-4`}),` Flip horizontal `,n.flipH&&(0,z.jsx)(`span`,{className:`ml-auto text-xs`,children:`✓`})]}),(0,z.jsxs)(S,{className:`min-h-11`,onSelect:e=>{e.preventDefault(),c()},children:[(0,z.jsx)(u,{className:`size-4`}),` Flip vertical `,n.flipV&&(0,z.jsx)(`span`,{className:`ml-auto text-xs`,children:`✓`})]}),!L(n)&&(0,z.jsxs)(S,{className:`min-h-11`,onSelect:l,children:[(0,z.jsx)(a,{className:`size-4`}),` Reset orientation`]}),(0,z.jsx)(w,{}),(0,z.jsx)(D,{children:`Keyboard`}),(0,z.jsx)(`div`,{className:`px-2 pb-2 grid grid-cols-[auto_1fr] gap-x-3 gap-y-1 text-xs text-text-secondary`,children:R.map(([e,t])=>(0,z.jsxs)(`div`,{className:`contents`,children:[(0,z.jsx)(`kbd`,{className:`font-mono text-text-subtle whitespace-nowrap`,children:e}),(0,z.jsx)(`span`,{children:t})]},e))})]})]})}function H(e){let t=e.muted||e.volume===0?c:e.volume<.5?l:o,n=t=>e.onSeek(Number(t.target.value));return(0,z.jsxs)(`div`,{className:`flex items-center gap-1 px-2 py-1 bg-surface border-t border-border`,children:[(0,z.jsx)(y,{variant:`ghost`,size:`icon`,className:`size-11 shrink-0`,onClick:e.onTogglePlay,"aria-label":e.playing?`Pause`:`Play`,children:e.playing?(0,z.jsx)(v,{className:`size-5`}):(0,z.jsx)(s,{className:`size-5`})}),(0,z.jsxs)(`span`,{className:`text-xs tabular-nums text-text-secondary shrink-0 min-w-[4.5rem] text-center`,children:[U(e.position),e.duration?` / ${U(e.duration)}`:``]}),e.duration?(0,z.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,z.jsx)(`div`,{className:`flex-1`}),(0,z.jsxs)(`div`,{className:`flex items-center shrink-0`,children:[(0,z.jsx)(y,{variant:`ghost`,size:`icon`,className:`size-11`,onClick:e.onToggleMute,"aria-label":e.muted?`Unmute`:`Mute`,children:(0,z.jsx)(t,{className:`size-5`})}),(0,z.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,z.jsx)(V,{speed:e.speed,onSpeed:e.onSpeed,transform:e.transform,onRotate:e.onRotate,onFlipH:e.onFlipH,onFlipV:e.onFlipV,onResetTransform:e.onResetTransform}),(0,z.jsx)(y,{variant:`ghost`,size:`icon`,className:`size-11 shrink-0`,onClick:e.onToggleFullscreen,"aria-label":e.fullscreen?`Exit fullscreen`:`Fullscreen`,children:e.fullscreen?(0,z.jsx)(g,{className:`size-5`}):(0,z.jsx)(p,{className:`size-5`})})]})}function U(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 W({filePath:e,projectName:t,mode:n,probeDuration:r=null,onNativeError:i}){let a=(0,N.useRef)(null),o=(0,N.useRef)(null),s=(0,N.useRef)(null),c=(0,N.useRef)(!0),[l]=(0,N.useState)(M),[u,d]=(0,N.useState)(0),[p,m]=(0,N.useState)(0),[h,g]=(0,N.useState)(null),[_,v]=(0,N.useState)(!1),[b,x]=(0,N.useState)(!0),[S,C]=(0,N.useState)(null),[w,T]=(0,N.useState)(1),[E,D]=(0,N.useState)(!1),[O,A]=(0,N.useState)(1),[L,R]=(0,N.useState)(P),[V,U]=(0,N.useState)(!1),[W,G]=(0,N.useState)({width:0,height:0}),[K,q]=(0,N.useState)(null),J=n===`transcode`,Y=J?k(e,t,u,l):j(e,t),X=J?r:h,ie=S??(J?u+p:p);(0,N.useEffect)(()=>{m(0),x(!0),q(null)},[Y]),(0,N.useEffect)(()=>{d(0),g(null),R(P)},[e,n]),(0,N.useEffect)(()=>{let e=s.current;e&&(e.volume=w,e.muted=E)},[w,E]),(0,N.useEffect)(()=>{let e=s.current;e&&(e.playbackRate=O)},[O,Y]),(0,N.useEffect)(()=>{let n=s.current,r=()=>{J&&ee(e,t,l)};return window.addEventListener(`pagehide`,r),()=>{window.removeEventListener(`pagehide`,r),n&&!n.isConnected&&(n.pause(),n.removeAttribute(`src`),n.load(),r())}},[e,t,J,l]),(0,N.useEffect)(()=>{let e=()=>U(document.fullscreenElement===a.current);return document.addEventListener(`fullscreenchange`,e),()=>document.removeEventListener(`fullscreenchange`,e)},[]),(0,N.useEffect)(()=>{let e=o.current;if(!e)return;let t=new ResizeObserver(()=>G({width:e.clientWidth,height:e.clientHeight}));return t.observe(e),()=>t.disconnect()},[]);let Z=(0,N.useCallback)(e=>{let t=s.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||d(n)},[X,J,u]),Q=(0,N.useMemo)(()=>({togglePlay:()=>{let e=s.current;e&&(c.current=e.paused,e.paused?e.play().catch(()=>{}):e.pause())},seekBy:e=>Z((J?u:0)+(s.current?.currentTime??0)+e),toggleFullscreen:()=>{document.fullscreenElement?document.exitFullscreen():a.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=>A(t=>{let n=B.indexOf(t);return B[Math.min(B.length-1,Math.max(0,(n===-1?3:n)+e))]??1}),rotate:e=>R(t=>e===1?F(t):I(t))}),[Z,J,u]),ae=re(Q),$=ne(L,W),oe=()=>{q(null),d(e=>e+.001)};return(0,z.jsxs)(`div`,{ref:a,"data-testid":`video-player`,tabIndex:0,onKeyDown:ae,className:`flex flex-col h-full bg-black outline-none focus-visible:ring-1 focus-visible:ring-primary/60`,children:[(0,z.jsxs)(`div`,{ref:o,className:`relative flex-1 min-h-0 flex items-center justify-center overflow-hidden`,onClick:e=>{a.current?.focus(),e.detail===1&&Q.togglePlay()},onDoubleClick:Q.toggleFullscreen,children:[(0,z.jsx)(`video`,{ref:s,src:Y,autoPlay:!0,playsInline:!0,preload:J?`auto`:`metadata`,style:{transform:te(L),maxWidth:$.maxWidth||void 0,maxHeight:$.maxHeight||void 0},onLoadedMetadata:e=>{let t=e.currentTarget;t.playbackRate=O,t.volume=w,t.muted=E,!J&&Number.isFinite(t.duration)&&g(t.duration),J&&!c.current&&t.pause()},onPlay:()=>v(!0),onPause:()=>v(!1),onWaiting:()=>x(!0),onPlaying:()=>x(!1),onCanPlay:()=>x(!1),onTimeUpdate:e=>m(e.currentTarget.currentTime),onEnded:()=>{v(!1),c.current=!1},onError:()=>{J?q(`Transcoding failed. ffmpeg may have stopped or the file is corrupt.`):i?.()}}),b&&!K&&(0,z.jsx)(f,{className:`absolute size-8 animate-spin text-white/80 pointer-events-none`}),K&&(0,z.jsxs)(`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(),children:[(0,z.jsx)(`p`,{className:`text-sm`,children:K}),(0,z.jsx)(y,{variant:`outline`,size:`sm`,className:`h-11 px-4`,onClick:oe,children:`Retry`})]})]}),(0,z.jsx)(H,{playing:_,position:ie,duration:X,volume:w,muted:E,speed:O,transform:L,fullscreen:V,onTogglePlay:Q.togglePlay,onScrub:C,onSeek:Z,onVolume:e=>{T(e),D(e===0)},onToggleMute:Q.toggleMute,onSpeed:A,onRotate:Q.rotate,onFlipH:()=>R(e=>({...e,flipH:!e.flipH})),onFlipV:()=>R(e=>({...e,flipV:!e.flipV})),onResetTransform:()=>R(P),onToggleFullscreen:Q.toggleFullscreen})]})}var G=new Set([`mp4`,`m4v`,`webm`,`ogg`,`ogv`,`mov`]);function K({filePath:e,projectName:t}){let n=O(e),[r,i]=(0,N.useState)(()=>G.has(n)?{kind:`native`}:{kind:`probing`});return(0,N.useEffect)(()=>{i(G.has(O(e))?{kind:`native`}:{kind:`probing`})},[e]),(0,N.useEffect)(()=>{if(r.kind!==`probing`)return;let n=!1;return A(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,z.jsx)(`div`,{className:`flex items-center justify-center h-full`,children:(0,z.jsx)(f,{className:`size-5 animate-spin text-text-subtle`})}):r.kind===`transcode`?(0,z.jsx)(W,{filePath:e,projectName:t,mode:`transcode`,probeDuration:r.probe.duration}):r.kind===`unsupported`?(0,z.jsx)(q,{filePath:e,projectName:t,probe:r.probe}):(0,z.jsx)(W,{filePath:e,projectName:t,mode:`native`,onNativeError:()=>i({kind:`probing`})})}function q({filePath:e,projectName:t,probe:n}){let r=[n?.video?.codec,n?.audio?.codec].filter(Boolean).join(` + `);return(0,z.jsxs)(`div`,{className:`flex flex-col items-center justify-center h-full gap-3 text-text-secondary p-6 text-center`,children:[(0,z.jsx)(_,{className:`size-10 text-text-subtle`}),(0,z.jsxs)(`p`,{className:`text-sm`,children:[`This video cannot be played in the browser`,r?` (${r})`:``,`.`]}),(0,z.jsxs)(`p`,{className:`text-xs text-text-subtle max-w-sm`,children:[`Install `,(0,z.jsx)(`code`,{children:`ffmpeg`}),` on the PPM server (e.g. `,(0,z.jsx)(`code`,{children:`winget install ffmpeg`}),`, `,(0,z.jsx)(`code`,{children:`brew install ffmpeg`}),`,`,` `,(0,z.jsx)(`code`,{children:`apt install ffmpeg`}),`) and restart PPM to transcode it on the fly.`]}),(0,z.jsx)(y,{asChild:!0,variant:`outline`,size:`sm`,className:`h-11 px-4`,children:(0,z.jsxs)(`a`,{href:`${j(e,t)}&download=true`,download:!0,children:[(0,z.jsx)(h,{className:`size-4 mr-2`}),` Download file`]})})]})}export{K as VideoPreview};