media-trimmer/dist/trim-DO2ilh10.js

A simple WebM and MP4 video trimmer using the WebCodecs API

import{provide as e,effect as t,toValue as i,ref as r,watch as o,onScopeDispose as a,toRef as n,computed as s,inject as l,render as d,h as m,isRef as c}from"fine-jsx";import{jsxs as u,jsx as _,Fragment as h}from"fine-jsx/jsx-runtime";import*as p from"mediabunny";import"throttle-debounce";const g="undefined"==typeof window?globalThis:window,f=g.HTMLElement??Object,{userAgent:b=""}=g.navigator??{},v=/Version\/(?:\d+)/u.exec(b)?.[1],w=b.includes("Chrome/")||b.includes("Chromium/"),x=b.includes("Mac OS"),y=b.includes("AppleWebKit/")&&b.includes("Safari/")&&!w,k=y&&"16"===v,z=y&&"17"===v;b.includes("Gecko/"),b.includes("Android");const T=(e,r,o,a)=>t(t=>{const n=i(e);null!=n&&(n.addEventListener(r,o,a),t(()=>n.removeEventListener(r,o,a)))}),S=r(!1);if("matchMedia"in g){const e=g.matchMedia("(hover: hover)");S.value=e.matches,e.addEventListener("change",()=>{S.value=e.matches})}const C=t=>{const r=(e=>{const t=n(()=>i(e.languages)??navigator.languages),r=s(()=>{const r=i(e.messages);return t.value.find(e=>e in r)??t.value.map(e=>new Intl.Locale(e).language).find(e=>e in r)??i(e.fallbackLanguage)??"en"}),o=s(()=>i(e.messages)[r.value]),a=e=>o.value?.[e]??e;return{t:a,tr:e=>n(()=>a(e)),languages:t,language:r}})(t);return e("i18n",r),r};class A{_onDispose=new Set;isDisposed=!1;add(e){this._onDispose.add(e)}dispose(){this._onDispose.forEach(e=>e()),this._onDispose.clear(),this.isDisposed=!0}}const D=0,M=()=>{if("function"!=typeof VideoDecoder)throw new Error("Missing VideoDecoder and requestVideoFrameCallback APIs.")},L=(e,t=!0)=>{const{minutes:i,hours:r,seconds:o,subSeconds:a}=(e=>{const t=String(Math.trunc(e/60)%60).padStart(2,"0"),i=Math.trunc(e/3600);return{minutes:t,hours:String(i).padStart(2,"0"),seconds:String(Math.trunc(e)%60).padStart(2,"0"),subSeconds:String(Math.trunc(e%1*100)).padStart(2,"0")}})(e);return`${"00"===r?"":`${r}:`}${i}:${o}${t?`.${a}`:""}`},{DurationFormat:P}=Intl,B=(e,t="narrow",i=navigator.languages)=>{const r=new Intl.NumberFormat(i,{style:"unit",unit:"second",unitDisplay:t});if(!e)return r.format(0);const o=Math.trunc(e%60),a=Math.trunc(e/60);if(P)return new P(i,{style:t}).format({minutes:a,seconds:o});const n=new Intl.NumberFormat(i,{style:"unit",unit:"minute",unitDisplay:t});return o?`${a?`${n.format(a)} `:""}${r.format(o)}`:n.format(a)},j=(e,t,i)=>e<t?t:e>i?i:e;class O{value;rate;constructor(e,t){this.value=e,this.rate=t}add(e){return this.rate===e.rate?new O(this.value+e.value,this.rate):O.simplified(this.value*e.rate+e.value*this.rate,this.rate*e.rate)}subtract(e){return this.rate===e.rate?new O(this.value-e.value,this.rate):O.simplified(this.value*e.rate-e.value*this.rate,this.rate*e.rate)}toRate(e){return new O(Math.round(this.value/this.rate*e),e)}compare(e){return this.value*e.rate-e.value*this.rate}isLessThan(e){return this.compare(e)<0}isGreaterThan(e){return this.compare(e)>0}isEqualTo(e){return 0===this.compare(e)}isLte(e){return this.compare(e)<=0}isGte(e){return this.compare(e)>=0}clamp(e,t){return this.isLessThan(e)?O.from(e):this.isGreaterThan(t)?O.from(t):this}valueOf(){return this.value/this.rate}toJSON(){return{rate:this.rate,value:this.value}}toOTIO(){return{OTIO_SCHEMA:"RationalTime.1",rate:this.rate,value:this.value}}static simplified=(e,t)=>{const i=((e,t)=>{const i=Math.abs(e),r=Math.abs(t),o=i<r;let a=o?i:r,n=o?r:i;for(;a;){const e=a;a=n%a,n=e}return n})(e,t);return new O(e/i,t/i)};static from=e=>e instanceof O?e:new O(e.value,e.rate);static fromDecimal=(e,t)=>new O(Math.round(e*t),t);static min=(e,t)=>e.isLte(t)?e:t;static max=(e,t)=>e.isGte(t)?e:t;static clamp=(e,t,i)=>O.from(e.isLessThan(t)?t:e.isGreaterThan(i)?i:e);static ZERO=new O(0,1);static INFINITY=new O(1/0,1);static MINUS_INFINITY=new O(-1/0,1)}const E=(e,t,i)=>import.meta.env.SSR?()=>{}:d(m(e,t),i);var R={Play:"Play",Pause:"Pause",close:"Schließen",confirm:"Bestätigen",cancel:"Abbrechen",clear:"Clear",remove_audio:"Audio entfernen",include_audio:"Audio verwenden",undo:"Rückgängig",redo:"Wiederherstellen",timeline_zoom:"Zoom der Zeitleiste",settings:"Einstellungen",name:"Name",resolution:"Auflösung",frame_rate:"Bildrate",click_add_clip:"Einen Clip hinzuzufügen",click_add_audio:"Einen Videoclip hinzuzufügen",click_add_video:"Einen Audioclip hinzuzufügen",split:"Schneiden",export:"Exportieren",download:"Herunterladen",clip:"Clip",transition:"Übergang",create_project:"Neues Projekt erstellen",create_empty_project:"Neues leeres Projekt erstellen",create_example_project:"Mit Beispielinhalt beginnen",import_project:"Projekt importieren",close_project:"Projekt schließen",add_clip:"Clip hinzufügen",audio:"Audio",add_audio:"Audio hinzufügen",delete:"Löschen",filter:"Filter",transform:"Transformation",scale:"Skalierung",position:"Position",rotation:"Drehung",zoom_in:"Vergrößern",zoom_out:"Verkleinern",fullscreen:"Vollbildmodus",cursor:"Cursor",project_title:"Projekttitel",audio_properties:"Audio properties",volume:"Volume",change_audio:"Audio ändern",change_video:"Video ändern",help:"Hilfe",info:"Info",untitled:"Unbenannt",media:"Medien",asset_bin_media_empty:"Hier ist nichts zu sehen, versuch mal, ein Video hochzuladen!",asset_bin_media_search_empty:"Keine Suchergebnisse :(",asset_bin_media_search_placeholder:"Nach Medien suchen",asset_bin_media_create_clip:"Verwenden Sie dieses Medium",asset_bin_media_upload:"Medien hochladen",asset_bin_delete_video:"Löschen",asset_bin_delete_video_disabled:"Kann nicht gelöscht werden, solange das Video verwendet wird",music:"Musik",asset_bin_music_empty:"Hier ist nichts, versuch doch mal, etwas Musik hochzuladen!",asset_bin_music_search_empty:"Keine Suchergebnisse :(",asset_bin_music_search_placeholder:"Musik suchen",asset_bin_music_create_clip:"Verwende diese Musik",asset_bin_music_upload:"Musik hochladen",asset_bin_delete_music:"Löschen",asset_bin_delete_music_disabled:"Kann nicht gelöscht werden, solange die Musik abgespielt wird",fonts:"Text",asset_bin_fonts_add:"Text hinzufügen",asset_bin_fonts_content:"Gib hier einen Text ein",asset_bin_fonts_select_family:"Wähle eine Schriftfamilie aus",asset_bin_fonts_size:"Schriftgröße",asset_bin_fonts_bold:"Fettdruck",asset_bin_fonts_italic:"Kursive Schriftart",asset_bin_fonts_align_left:"Text linksbündig ausrichten",asset_bin_fonts_align_center:"Text zentrieren",asset_bin_fonts_align_right:"Text rechtsbündig ausrichten",asset_bin_fonts_text_settings:"Texteinstellungen",asset_bin_fonts_color_settings:"Farbe",filters:"Filters",error_cannot_set_content:"Der Filminhalt konnte nicht gespeichert werden",error_no_webcodecs:"Deinem Browser fehlen die nötigen APIs, um Videos zu exportieren!",error_cannot_export:"Dein Browser kann keine Videos exportieren, in den Codecs die wir benuzten!",error_cannot_play_type:"Dein Browser kann diesen Dateityp nicht wiedergeben.",error_cannot_create_clip:"Der Clip konnte nicht erstellt werden",error_cannot_delete_video:"Das Video konnte nicht gelöscht werden",error_cannot_delete_music:"konnte die Audiodatei nicht löschen",confirm_delete_project:"Bist du sicher, dass du dieses Project löschen willst?"},V={Play:"Play",Pause:"Pause",close:"Close",confirm:"Confirm",cancel:"Cancel",clear:"Löschen",remove_audio:"Remove audio",include_audio:"Include audio",undo:"Undo",redo:"Redo",timeline_zoom:"Timeline zoom",settings:"Settings",name:"Name",resolution:"Resolution",frame_rate:"Frame rate",click_add_clip:"Click to add a clip",click_add_audio:"Click to add audio",click_add_video:"Click to add video",split:"Split",export:"Export",download:"Download",clip:"Clip",transition:"Transition",create_project:"Create a new project",create_empty_project:"Create an empty project",create_example_project:"Start with example content",import_project:"Import a project",close_project:"Close project",add_clip:"Add a clip",audio:"Audio",add_audio:"Add audio",delete:"Delete",filter:"Filter",transform:"Transform",scale:"Scale",position:"Position",rotation:"Rotate",zoom_in:"Zoom in",zoom_out:"Zoom out",fullscreen:"Fullscreen",cursor:"Cursor",project_title:"Project title",audio_properties:"Audio properties",volume:"Volume",change_audio:"Change audio",change_video:"Change video",help:"Help",info:"Info",untitled:"Untitled",media:"Media",asset_bin_media_empty:"It's empty here, trying uploading some video!",asset_bin_media_search_empty:"No search results :(",asset_bin_media_search_placeholder:"Search for media",asset_bin_media_create_clip:"Use this media",asset_bin_media_upload:"Upload media",asset_bin_delete_video:"Delete",asset_bin_delete_video_disabled:"Cannot delete while video is in use",music:"Music",asset_bin_music_empty:"It's empty here, trying uploading some music!",asset_bin_music_search_empty:"No search results :(",asset_bin_music_search_placeholder:"Search for music",asset_bin_music_create_clip:"Use this music",asset_bin_music_upload:"Upload music",asset_bin_delete_music:"Delete",asset_bin_delete_music_disabled:"Cannot delete while music is in use",fonts:"Text",asset_bin_fonts_add:"Add text",asset_bin_fonts_content:"Type some text here",asset_bin_fonts_select_family:"Choose a font family",asset_bin_fonts_size:"Font size",asset_bin_fonts_bold:"Bold",asset_bin_fonts_italic:"Italic",asset_bin_fonts_align_left:"Align text left",asset_bin_fonts_align_center:"Align text center",asset_bin_fonts_align_right:"Align text right",asset_bin_fonts_text_settings:"Text Settings",asset_bin_fonts_color_settings:"Color",filters:"Filters",error_cannot_set_content:"Couldn't set document content",error_no_webcodecs:"Your browser doesn't have the WebCodec APIs needed to export videos!",error_cannot_export:"Your browser can't export videos in the formats that we use.",error_cannot_play_type:"Your browser can't play this file type",error_cannot_create_clip:"Couldn't create clip",error_cannot_delete_video:"Couldn't delete video",error_cannot_delete_music:"Couldn't delete audio",confirm_delete_project:"Are you sure you want to delete this project?"};const I=(e,t)=>{const{t:r}=l("i18n");return T(t,"keydown",t=>{switch(t.key){case"ArrowLeft":case"ArrowRight":case"ArrowUp":case"ArrowDown":{const r=.25*("ArrowLeft"===t.code||"ArrowUp"===t.code?-1:1);e.seekTo(i(e.currentTime)+r),t.preventDefault(),t.stopPropagation();break}}}),{tabindex:0,role:"slider","aria-label":r("cursor"),"aria-valuetext":()=>B(i(e.currentTime),"long"),"aria-valuenow":c(e.currentTime)?e.currentTime:()=>i(e.currentTime),"aria-valuemin":"0","aria-valuemax":c(e.mediaDuration)?e.mediaDuration:()=>i(e.mediaDuration)}};function N(e,t){void 0===t&&(t={});var i=t.insertAt;if(e&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===i&&r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}var F={numeric:"media-trimmer-module_numeric__p4mbX",host:"media-trimmer-module_host__3eT1q",viewport:"media-trimmer-module_viewport__usnkU",viewportCanvas:"media-trimmer-module_viewportCanvas__PoxDx",clip:"media-trimmer-module_clip__HSkE1",isSelected:"media-trimmer-module_isSelected__4DaOt",clipBox:"media-trimmer-module_clipBox__S6C4T media-trimmer-module_clipBoxBase__LTsdh",clipControls:"media-trimmer-module_clipControls__2nRD1 media-trimmer-module_clipBoxBase__LTsdh",clipResizeLeft:"media-trimmer-module_clipResizeLeft__6onMV",clipResizeRight:"media-trimmer-module_clipResizeRight__eF-AM",videoTrimmer:"media-trimmer-module_videoTrimmer__7lB0O",isEmpty:"media-trimmer-module_isEmpty__66Xx7",error:"media-trimmer-module_error__8WH2M",controls:"media-trimmer-module_controls__AF-bn",controlsCenter:"media-trimmer-module_controlsCenter__9v6Jv",controlsLeft:"media-trimmer-module_controlsLeft__CXdZc",controlsRight:"media-trimmer-module_controlsRight__cUwXX",timeline:"media-trimmer-module_timeline__9BhO2",clipWarning:"media-trimmer-module_clipWarning__ZNrQ3",cursor:"media-trimmer-module_cursor__04YNI"};N('.shared-module_button__KZ-bh{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;padding:.5rem;cursor:pointer;border-style:none;border-radius:.5rem;&:hover{background-color:var(--white-1)}&:active{background-color:var(--white-2)}&[aria-disabled],&[disabled]{cursor:default;background-color:transparent;opacity:.625}}.shared-module_loadingOverlay__gD1us{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:0;transition:opacity .25s;&.shared-module_loading__F-k5T{opacity:1;transition-delay:.25s;.miru-icon{animation:shared-module_loading-spinner__X6Mf7 2s linear infinite}}.miru-icon{font-size:2rem;background-color:var(--black-2);border-radius:50%}}@keyframes shared-module_loading-spinner__X6Mf7{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}:where(.media-trimmer-module_sanitize__4Obv5){padding:0;margin:0;font-size:inherit;line-height:normal;color:inherit;outline:none;background:transparent;border:none}:where(.media-trimmer-module_sanitize__4Obv5) [hidden],[hidden]:where(.media-trimmer-module_sanitize__4Obv5){display:none!important}:where(.media-trimmer-module_sanitize__4Obv5){box-sizing:border-box}:where(.media-trimmer-module_sanitize__4Obv5) *{box-sizing:border-box}:where(.media-trimmer-module_sanitize__4Obv5):before{box-sizing:border-box}:where(.media-trimmer-module_sanitize__4Obv5) :before{box-sizing:border-box}:where(.media-trimmer-module_sanitize__4Obv5):after{box-sizing:border-box}:where(.media-trimmer-module_sanitize__4Obv5) :after{box-sizing:border-box}.media-trimmer-module_focusWithin__yC0zK:has(:focus-visible),.media-trimmer-module_sanitize__4Obv5:focus-visible{outline:4px solid #fff}.media-trimmer-module_textSmall__rNrSd{font-size:9px;font-weight:600;line-height:12px}.media-trimmer-module_textBodySmall__7ZbZt{font-size:12px;font-weight:500;line-height:15px}.media-trimmer-module_textBody__KUuMh{font-size:14px;font-weight:500;line-height:17px}.media-trimmer-module_textBodyBold__anq3d{font-size:14px;font-weight:700;line-height:17px}.media-trimmer-module_textBodyBig__n7ZQS{font-size:16px;font-weight:500;line-height:20px}.media-trimmer-module_textBodyBigBold__aKjdj{font-size:16px;font-weight:700;line-height:20px}.media-trimmer-module_textGreat__FuL1v{font-size:20px;font-weight:700;line-height:24px}.media-trimmer-module_textSuperGreat__nZjgd{font-size:30px;font-weight:700;line-height:36px}.media-trimmer-module_textSecondary__9WqaJ{color:#aaacc2}.media-trimmer-module_numeric__p4mbX{font-family:sans-serif;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.media-trimmer-module_srOnly__-bhP-{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;white-space:nowrap;border-width:0;clip:rect(0,0,0,0)}.media-trimmer-module_safePaddingX__uWlhz{padding-right:max(env(safe-area-inset-right,1.25rem),1.25rem);padding-left:max(env(safe-area-inset-left,1.25rem),1.25rem)}.media-trimmer-module_safePaddingY__lg08N{padding-top:max(env(safe-area-inset-top,1.25rem),1.25rem);padding-bottom:max(env(safe-area-inset-bottom,1.25rem),1.25rem)}.media-trimmer-module_safeMarginX__XpZwj{margin-right:max(env(safe-area-inset-right,1.25rem),1.25rem);margin-left:max(env(safe-area-inset-left,1.25rem),1.25rem)}.media-trimmer-module_safeMarginY__YAdTW{margin-top:max(env(safe-area-inset-top,1.25rem),1.25rem);margin-bottom:max(env(safe-area-inset-bottom,1.25rem),1.25rem)}.media-trimmer-module_triColumn__UldqM{display:grid;grid-template-columns:1fr auto 1fr}.media-trimmer-module_triColumn__UldqM>:first-child{justify-self:start}.media-trimmer-module_triColumn__UldqM>:last-child{justify-self:end}.media-trimmer-module_host__3eT1q{--black:#000;--white:#fff;--gray:#252525;--red-dark:#e83757;--red:#ff5372;--red-light:#ff7a92;--purple-dark:#8f54f9;--purple:#a06efb;--purple-light:#ac7dff;--blue:#1d6be4;--yellow-dark:#ead627;--yellow:#fffb24;--yellow-light:#fff38b;--green-dark:#03b072;--green:#03ad70;--green-light:#1ed291;--black-1:rgba(0,0,0,.1);--black-2:rgba(0,0,0,.3);--black-3:rgba(0,0,0,.6);--white-1:hsla(0,0%,100%,.1);--white-2:hsla(0,0%,100%,.3);--white-3:hsla(0,0%,100%,.6);--ruler-height:0.75rem;--ruler-spacing-top:0.25rem;--ruler-spacing-bottom:0.25rem;--primary-bg:#17191a;--primary-bg-05:rgba(23,25,26,.533);--secondary-bg:#1c2023;--focus-outline:0.25rem solid #fff;--clip-radius:0.875rem;--clip-border-width:0.0625rem;--clip-border-width-primary:0.125rem;--workspace-gap:1.25rem;--workspace-properties-width:20.625rem;--panel-toolbar-width:4.75rem;--panel-width:17.75rem}.media-trimmer-module_host__3eT1q .media-trimmer-module_mobile__VTqiw{--primary-bg:#000;--secondary-bg:#17191a;--ruler-spacing-bottom:2.25rem}.media-trimmer-module_host__3eT1q:before{box-sizing:border-box}.media-trimmer-module_host__3eT1q :before{box-sizing:border-box}.media-trimmer-module_host__3eT1q:after{box-sizing:border-box}.media-trimmer-module_host__3eT1q :after{box-sizing:border-box}.media-trimmer-module_host__3eT1q,.media-trimmer-module_host__3eT1q *{box-sizing:border-box}.media-trimmer-module_slot__c-o-N{display:contents}.media-trimmer-module_viewport__usnkU{position:relative;display:flex;place-content:center;width:100%;min-height:0}.media-trimmer-module_viewportCanvas__PoxDx{max-width:100%;height:100%;background-color:#000;border-radius:.625rem}.media-trimmer-module_viewport__usnkU:-webkit-full-screen .media-trimmer-module_viewportCanvas__PoxDx{border-radius:0}.media-trimmer-module_viewport__usnkU:-moz-full-screen .media-trimmer-module_viewportCanvas__PoxDx{border-radius:0}.media-trimmer-module_viewport__usnkU:fullscreen .media-trimmer-module_viewportCanvas__PoxDx{border-radius:0}.media-trimmer-module_host__3eT1q .miru-icon{flex-shrink:0}.media-trimmer-module_round__byDFS{border-radius:9999px}@scope (.media-trimmer-module_host__3eT1q){:scope{--clip-height-primary:3.75rem;--clip-height:2.125rem;--clip-resize-handle-width:0.75rem;--clip-selected-color-accent:var(--yellow);--clip-selected-color-text:var(--black)}:scope :where(.media-trimmer-module_mobile__VTqiw){--clip-height-primary:3.125rem}}.media-trimmer-module_clip__HSkE1{height:var(--clip-height)}.media-trimmer-module_clip__HSkE1:focus-visible{outline:none}.media-trimmer-module_clip__HSkE1.media-trimmer-module_isLoading__mARuX{filter:saturate(20%);--clip-color:#444}.media-trimmer-module_clip__HSkE1.media-trimmer-module_isSelected__4DaOt{z-index:1;touch-action:none}.media-trimmer-module_clip__HSkE1.media-trimmer-module_isDragging__1Fi9v{z-index:20;translate:0 var(--clip-drag-offset-y)}.media-trimmer-module_clipBoxBase__LTsdh{position:absolute;left:var(--clip-box-left);width:calc(var(--clip-box-right) - var(--clip-box-left));height:var(--clip-height);border:solid var(--clip-border-width) var(--clip-color-light);border-radius:var(--clip-radius)}.media-trimmer-module_clip__HSkE1.media-trimmer-module_isSelected__4DaOt .media-trimmer-module_clipBoxBase__LTsdh{border-color:var(--clip-selected-color-accent)}.media-trimmer-module_clipBoxBase__LTsdh{--clip-color-light:oklch(from var(--clip-color) calc(l + 0.1) c h);--clip-color-dark:oklch(from var(--clip-color) calc(l - 0.15) calc(c * 0.8) h)}.media-trimmer-module_clipBox__S6C4T{display:flex;gap:.5rem;align-items:center;overflow:hidden;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;background-color:var(--clip-color);transition:background-color .25s}.media-trimmer-module_clip__HSkE1.media-trimmer-module_isVideoMedia__Q7r6N .media-trimmer-module_clipBox__S6C4T{background-image:var(--clip-thumbnail);background-size:auto 100%;border-color:var(--clip-color)}.media-trimmer-module_clipBox__S6C4T>:first-child{margin-left:.5rem}.media-trimmer-module_clipBoxFlowContent__fDclz{transition:transform .25s}.media-trimmer-module_clipIcon__4ZMgz{flex-shrink:0;padding:.1875rem;font-size:1.25rem;background-color:var(--clip-color-light);border-radius:.375rem}.media-trimmer-module_clipName__O6N7x{display:inline-block;padding:.25rem .5rem;overflow:hidden;text-overflow:ellipsis;line-height:1;color:var(--white);text-wrap:nowrap;background-color:var(--clip-color-dark);border-radius:calc(var(--clip-radius)/2)}.media-trimmer-module_clipTransition__cuG9Z{position:absolute;top:50%;left:var(--clip-box-right);z-index:10;display:flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;color:var(--white);background:var(--black);border-radius:.5rem;opacity:.7;transform:translate(-50%,-50%);transition:transform .2s}.media-trimmer-module_clip__HSkE1.media-trimmer-module_isSelected__4DaOt .media-trimmer-module_clipTransition__cuG9Z{transform:translateY(-50%)}.media-trimmer-module_clip__HSkE1.media-trimmer-module_nextIsSelected__8wGAL .media-trimmer-module_clipTransition__cuG9Z{transform:translate(-100%,-50%)}.media-trimmer-module_clip__HSkE1.media-trimmer-module_isSelected__4DaOt .media-trimmer-module_clipControls__2nRD1{border-width:.125rem}.media-trimmer-module_clipResizeLeft__6onMV,.media-trimmer-module_clipResizeRight__eF-AM{position:absolute;top:calc(50% - .75rem);display:flex;align-items:center;justify-content:center;width:var(--clip-resize-handle-width);height:1.5rem;color:var(--clip-selected-color-text);touch-action:none;cursor:ew-resize;background:#fff;border:inherit;border-width:.25rem;border-radius:.6225rem}.media-trimmer-module_clip__HSkE1.media-trimmer-module_isSelected__4DaOt .media-trimmer-module_clipResizeLeft__6onMV,.media-trimmer-module_clip__HSkE1.media-trimmer-module_isSelected__4DaOt .media-trimmer-module_clipResizeRight__eF-AM{background:#000}.media-trimmer-module_clipResizeLeft__6onMV{left:calc(-1px - var(--clip-resize-handle-width)/2)}.media-trimmer-module_clipResizeRight__eF-AM{right:calc(-1px - var(--clip-resize-handle-width)/2)}@media (-moz-touch-enabled:0),(-ms-high-contrast:active),(-ms-high-contrast:none),(hover:hover){.media-trimmer-module_clipGap__I-ooL:hover{background-color:var(--primary-bg)}.media-trimmer-module_mobile__VTqiw .media-trimmer-module_clipGap__I-ooL:hover{background-color:var(--secondary-bg)}}.media-trimmer-module_clipGap__I-ooL.media-trimmer-module_isSelected__4DaOt{background-color:var(--primary-bg)}.media-trimmer-module_mobile__VTqiw .media-trimmer-module_clipGap__I-ooL.media-trimmer-module_isSelected__4DaOt{background-color:var(--secondary-bg)}.media-trimmer-module_clipGap__I-ooL.media-trimmer-module_isSelected__4DaOt{border:.125rem dashed var(--clip-selected-color-accent)}.media-trimmer-module_videoTrimmer__7lB0O{display:flex;flex-direction:column;width:inherit;height:inherit;overflow:hidden}.media-trimmer-module_videoTrimmer__7lB0O .media-trimmer-module_viewport__usnkU{flex-shrink:1;max-height:min(60vh,calc(100vh - 19rem))}.media-trimmer-module_videoTrimmer__7lB0O .media-trimmer-module_viewport__usnkU.media-trimmer-module_isEmpty__66Xx7{min-height:16rem}.media-trimmer-module_error__8WH2M{position:absolute;top:50%;left:50%;padding:2rem;font-size:1.5rem;color:var(--white);background-color:var(--black-3);translate:-50% -50%}.media-trimmer-module_controls__AF-bn{display:grid;grid-template-columns:1fr max-content 1fr;place-items:center;padding:.25rem 0}.media-trimmer-module_controls__AF-bn .media-trimmer-module_iconButton__D5BxP{font-size:2rem}.media-trimmer-module_controlsCenter__9v6Jv{flex-grow:1;text-align:center}.media-trimmer-module_controlsLeft__CXdZc{justify-self:start}.media-trimmer-module_controlsRight__cUwXX{display:flex;gap:1rem;align-items:center;justify-self:end}.media-trimmer-module_timeline__9BhO2{position:relative;margin:0 calc(var(--clip-resize-handle-width)/2);touch-action:none}.media-trimmer-module_timeline__9BhO2 .media-trimmer-module_clip__HSkE1{position:relative;border-radius:0}.media-trimmer-module_clipWarning__ZNrQ3{position:relative;top:0;right:0;bottom:0;left:0;display:flex;place-content:center;place-items:center;height:inherit;pointer-events:none}.media-trimmer-module_clipWarning__ZNrQ3:before{position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;content:"";background-color:currentcolor;border-radius:.25rem;opacity:.15}.media-trimmer-module_scrubber__DqF6n{position:absolute;top:0;right:0;bottom:0;left:0;touch-action:none}.media-trimmer-module_cursor__04YNI{position:absolute;top:-.25rem;bottom:-.25rem;left:0;width:.125rem;pointer-events:none;background-color:currentcolor;translate:calc(var(--current-time-offset) - 50%)}');const U=()=>{try{return H(),!0}catch{return!1}},H=()=>{if((k||z)&&x)throw new Error("VideoEncoder doesn't work on Safari <= 17.");if(M(),"function"!=typeof VideoEncoder)throw new Error("Missing VideoEncoder support.")};class K{isPaused=r(!0);hasAudio=r(!1);state;currentTime=r(0);errorMessage=r("");unableToDecode=r(!U());mediaDuration=r(0);readyState;pixelsPerSecond;onChange;media;constructor(e,l,d){this.state=n(e);const m=this.media=document.createElement("video");this.readyState=(e=>{const o=r(0),a=()=>o.value=i(e)?.readyState??D;return t(a),["abort","canplay","canplaythrough","durationchange","emptied","ended","error","loadeddata","loadedmetadata","loadstart","pause","play","playing","seeked","seeking","stalled","suspend","timeupdate","waiting"].forEach(t=>{T(e,t,a)}),o})(m),m.playsInline=!0,m.preload="auto";const c=(e=>{const t=r({width:0,height:0}),n=new ResizeObserver(([e])=>{const i=t.value;let r,o;if("borderBoxSize"in e){const{borderBoxSize:t}=e,i=Array.isArray(t)?t[0]:t;r=i.inlineSize,o=i.blockSize}else({width:r,height:o}={width:e.contentRect.width,height:e.contentRect.height});i.width===r&&i.height===o||(t.value={width:r,height:o})});return o([()=>i(e)],([e],t,i)=>{null!=e&&(n.observe(e),i(()=>n.unobserve(e)))}),a(n.disconnect.bind(n)),t})(l);this.onChange=d,this.pixelsPerSecond=s(()=>c.value.width/this.mediaDuration.value||0),["timeupdate","seeking"].forEach(e=>{T(m,e,()=>this.currentTime.value=this.media.currentTime)}),["play","pause"].forEach(e=>{T(m,e,()=>this.isPaused.value=this.media.paused)})}togglePlayback(){const{media:e}=this;if(this.isPaused.value){const{start:t,end:i}=this.state.value;(this.currentTime.value+.01>=i||e.ended)&&this.seekTo(t),e.play().catch(()=>{})}else e.pause()}seekTo(e){const{start:t,end:i}=this.state.value;this.media.currentTime=this.currentTime.value=j(e,t,i)}}const q=({context:e})=>{const{state:t}=e,i=r(),o=r(),a=s(()=>{const{start:i,end:r}=t.value,o=e.pixelsPerSecond.value,a=i*o;return{left:a,right:Math.max(r*o,a+1)}}),n=r(),l={x:0,y:0},d={start:0,duration:0},m=e=>{if(n.value||0!==e.button)return;const r=e.currentTarget;l.x=e.pageX,l.y=e.pageY;const{start:o,end:a}=t.value;d.start=o,d.duration=a-o,r.setPointerCapture(e.pointerId),n.value=r===i.value?"left":"right",e.stopPropagation(),e.preventDefault()},c=t=>{if(!n.value)return;const i=(t.pageX-l.x)/e.pixelsPerSecond.value;p(n.value,i),t.stopPropagation()},h=e=>{n.value=void 0,e.stopPropagation()},p=(i,r)=>{let o,a;const{start:n,end:s}=t.value;"left"===i?(o=j(d.start+r,0,d.start+d.duration-.25),a=s-n+(n-o)):(o=n,a=j(d.duration+r,.25,e.mediaDuration.value-d.start));const l=o+a;e.onChange({start:o,end:l,mute:t.value.mute}),"left"===i?e.seekTo(o):e.seekTo(l)};return[i,o].forEach(e=>{T(e,"pointerdown",m),T(e,"pointermove",c),T(e,"lostpointercapture",h),T(e,"keydown",r=>{if(!r.ctrlKey&&!r.altKey)switch(r.code){case"ArrowLeft":case"ArrowRight":case"ArrowUp":case"ArrowDown":{const o=.25*("ArrowLeft"===r.code||"ArrowUp"===r.code?-1:1),{start:a,end:n}=t.value;d.start=a,d.duration=n-a,p(e===i?"left":"right",o),r.stopPropagation(),r.preventDefault();break}}})}),u("div",{class:[F.clip,F.isSelected,F.canResizeLeft],style:()=>`--clip-box-left:${a.value.left}px;--clip-box-right:${a.value.right}px;--clip-color:transparent`,children:[_("div",{class:F.clipBox}),u("div",{class:F.clipControls,children:[_("div",{ref:i,class:F.clipResizeLeft,ariaValueText:()=>B(t.value.start,"long"),ariaValueNow:()=>t.value.start,ariaValueMin:0,ariaValueMax:()=>t.value.end,tabindex:"0"}),_("div",{ref:o,class:F.clipResizeRight,ariaValueText:()=>B(t.value.end,"long"),ariaValueNow:()=>t.value.end,ariaValueMin:()=>t.value.start,ariaValueMax:()=>e.mediaDuration.value,tabindex:"0"})]})]})};var X="shared-module_button__gKg6A";N(".shared-module_button__gKg6A{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;padding:.5rem;cursor:pointer;border-style:none;border-radius:.5rem}@media (-moz-touch-enabled:0),(-ms-high-contrast:active),(-ms-high-contrast:none),(hover:hover){.shared-module_button__gKg6A:hover{background-color:var(--white-1)}}.shared-module_button__gKg6A:active{background-color:var(--white-2)}.shared-module_button__gKg6A[aria-disabled],.shared-module_button__gKg6A[disabled]{cursor:default;background-color:transparent;opacity:.625}.shared-module_loadingOverlay__zp3NY{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:0;transition:opacity .25s}.shared-module_loadingOverlay__zp3NY.shared-module_loading__-gDZ6{opacity:1;transition-delay:.25s}.shared-module_loadingOverlay__zp3NY.shared-module_loading__-gDZ6 .miru-icon{animation:shared-module_loading-spinner__946f- 2s linear infinite}.shared-module_loadingOverlay__zp3NY .miru-icon{font-size:2rem;background-color:var(--black-2);border-radius:50%}@keyframes shared-module_loading-spinner__946f-{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}");const Z=({onClick:e,label:t,tag:i="button",class:r,...o})=>{const a={class:()=>[r,X],onClick:e,..."button"===i?{type:"button"}:{role:"button"},title:t??"","aria-label":t,...o};return m(i,a)},W=e=>_("svg",{className:"icon",viewBox:"0 0 24 24",width:"1.2em",height:"1.2em",...e,children:_("path",{fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M7 4v16l13-8z"})}),G=e=>_("svg",{className:"icon",viewBox:"0 0 24 24",width:"1.2em",height:"1.2em",...e,children:_("path",{fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M6 6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1zm8 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1z"})}),Y=e=>_("svg",{className:"icon",viewBox:"0 0 24 24",width:"1.2em",height:"1.2em",...e,children:_("path",{fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M15 8a5 5 0 0 1 1.912 4.934m-1.377 2.602A5 5 0 0 1 15 16m2.7-11a9 9 0 0 1 2.362 11.086m-1.676 2.299A9 9 0 0 1 17.7 19M9.069 5.054L9.5 4.5A.8.8 0 0 1 11 5v2m0 4v8a.8.8 0 0 1-1.5.5L6 15H4a1 1 0 0 1-1-1v-4a1 1 0 0 1 1-1h2l1.294-1.664M3 3l18 18"})}),$=e=>_("svg",{className:"icon",viewBox:"0 0 24 24",width:"1.2em",height:"1.2em",...e,children:_("path",{fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M15 8a5 5 0 0 1 0 8m2.7-11a9 9 0 0 1 0 14M6 15H4a1 1 0 0 1-1-1v-4a1 1 0 0 1 1-1h2l3.5-4.5A.8.8 0 0 1 11 5v14a.8.8 0 0 1-1.5.5z"})}),Q=e=>_("svg",{className:"icon",viewBox:"0 0 24 24",width:"1.2em",height:"1.2em",...e,children:_("path",{fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M6 15H4a1 1 0 0 1-1-1v-4a1 1 0 0 1 1-1h2l3.5-4.5A.8.8 0 0 1 11 5v14a.8.8 0 0 1-1.5.5zm10-5l4 4m0-4l-4 4"})}),J=({context:e})=>{const t=()=>{const{start:t,end:i,mute:r}=e.state.value;e.onChange({start:t,end:i,mute:!r})};return u("div",{class:[F.controls,F.numeric],children:[_("div",{class:[F.controlsLeft,F.playPause],children:_(Z,{disabled:()=>0===e.mediaDuration.value,onClick:e.togglePlayback.bind(e),label:()=>e.isPaused.value?"Play":"Pause",children:()=>e.isPaused.value?_(W,{}):_(G,{})})}),_("div",{class:F.controlsCenter,children:()=>L(e.currentTime.value,!1)}),u("div",{class:F.controlsRight,children:[_("div",{children:()=>{const{start:t,end:i}=e.state.value;B(Math.round(i-t))}}),()=>e.unableToDecode.value?_("div",{}):e.hasAudio.value?_(Z,{label:()=>e.state.value.mute?"Include audio":"Remove audio",onClick:t,children:()=>e.state.value.mute?_(Y,{}):_($,{})}):_(Z,{disabled:!0,onClick:()=>{},label:"No audio track",children:_(Q,{})})]})]})},ee=e=>{let o="";const a=r(),s=r(),l=new K(n(e.state),a,e.onChange),d=r();C({messages:{en:V,de:R}}),((e,t,o,a=e=>!0)=>{const n=r(!1),s=({offsetX:t})=>{if(!n.value)return;const r=(t-(i(e.offsetX)??0))/i(e.pixelsPerSecond);e.seekTo(r)};T(t,"pointerdown",e=>{if(n.value||!a(e)||0!==e.button||e.ctrlKey||e.shiftKey||e.altKey)return;const t=e.currentTarget;t.setPointerCapture(e.pointerId),n.value=!0,s({offsetX:e.clientX-t.getBoundingClientRect().left})}),T(t,"pointermove",s),T(t,"lostpointercapture",()=>{n.value=!1,i(o)?.focus()})})(l,a,s);const c=I(l,s);return T(d,"keydown",e=>{"Space"!==e.code||e.ctrlKey||e.altKey||e.shiftKey||e.metaKey||(l.togglePlayback(),e.preventDefault(),e.stopPropagation())}),t(()=>{const{media:e}=l,{end:t,mute:i}=l.state.value;e.muted=i,l.currentTime.value>=t&&(e.pause(),l.seekTo(t))}),t(async t=>{const r=i(e.source),{media:a}=l;if(a.pause(),l.errorMessage.value="",null==r||""===r)return void(l.mediaDuration.value=0);const n="string"==typeof r;o=n?r:URL.createObjectURL(r);const s=new AbortController;t(()=>{s.abort(),n||URL.revokeObjectURL(o)});const d=new p.Input({formats:p.ALL_FORMATS,source:n?new p.UrlSource(r):new p.BlobSource(r)});s.signal.addEventListener("abort",d.dispose.bind(d));const m=await d.getPrimaryVideoTrack(),c=await d.getPrimaryAudioTrack(),{hasAudio:u,unableToDecode:_,mediaDuration:h}=l;u.value=!!c,_.value=(await Promise.all([m?.canDecode(),c?.canDecode()])).some(e=>!1===e);const g=await d.computeDuration();if(s.signal.aborted)return;a.src=o,a.load(),h.value=g;const f=l.state.value;let b,v;l.unableToDecode.value?(b=0,v=g):(b=Math.min(f.start,g),v=0===f.end?g:j(f.end,f.start,g)),l.currentTime.value<b&&l.seekTo(b),e.onLoad({duration:g,hasAudio:l.hasAudio.value}),e.onChange({start:b,end:v,mute:f.mute})}),u("div",{ref:d,class:F.videoTrimmer,style:()=>`--current-time-offset:${l.currentTime.value*l.pixelsPerSecond.value}px`,tabindex:"0",children:[u("div",{class:()=>[F.viewport,0===l.readyState.value&&F.isEmpty],children:[m(l.media,{tabIndex:-1,class:F.viewportCanvas}),()=>l.errorMessage.value&&_("div",{class:F.error,onClick:()=>l.errorMessage.value="",children:l.errorMessage})]}),u("div",{children:[_(J,{context:l}),_("div",{ref:a,class:F.timeline,children:()=>l.unableToDecode.value?u(h,{children:[_("div",{class:F.clip,children:_("div",{class:F.clipWarning,children:"Editing this video format isn't supported"})}),_("div",{class:F.cursor})]}):l.mediaDuration.value?u(h,{children:[_(q,{context:l}),_("div",{ref:s,...c,class:F.cursor})]}):_("div",{class:F.clip})})]}),e.children]})};class te{source;options;rotation;janitor;videoOutCodec;constructor(e,t){this.source=e,this.options=t}async trim(){const{onProgress:e}=this.options;e?.(0),this.janitor?.dispose();const t=await this._trim().finally(this.dispose.bind(this));return e?.(1),t}async _trim(){H();const{options:e,source:t}=this,i=this.janitor=new A,r=new AbortController;let o=!1;i.add(()=>{o||r.signal.aborted||r.abort()});const a=new p.Input({formats:p.ALL_FORMATS,source:"string"==typeof t?new p.UrlSource(t):new p.BlobSource(t)});r.signal.addEventListener("abort",a.dispose.bind(a));const n=new p.Output({format:new p.Mp4OutputFormat,target:new p.BufferTarget}),s=await p.Conversion.init({input:a,output:n,audio:{discard:!!e.mute},trim:{start:e.start,end:e.end}});if(!s.isValid)throw new Error("[media-trimmer]: Invalid conversion.");return s.onProgress=this.options.onProgress,await s.execute(),o=!0,new Blob([n.target.buffer])}dispose(){this.janitor?.dispose()}}const ie=async(e,t)=>{const{onProgress:i}=t,r={...t,onProgress:e=>a=e},o=new te(e,r);if(!i)return await o.trim().finally(()=>o.dispose());let a=0,n=-1,s=0;const l=()=>{a!==n&&i(a),n=a,s=requestAnimationFrame(l)};return l(),await o.trim().finally(()=>{o.dispose(),i(a),cancelAnimationFrame(s)})};export{f as H,ee as V,H as a,U as h,E as r,F as s,ie as t};
//# sourceMappingURL=trim-DO2ilh10.js.map