1"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["22370"],{46544(e,t,n){n.r(t),n.d(t,{metadata:()=>r,default:()=>g,frontMatter:()=>p,contentTitle:()=>m,toc:()=>f,assets:()=>h});var r=JSON.parse('{"id":"freeze","title":"<Freeze>","description":"Recommendation: <Sequence freeze>","source":"@site/docs/freeze.mdx","sourceDirName":".","slug":"/freeze","permalink":"/docs/freeze","draft":false,"unlisted":false,"editUrl":"https://github.com/remotion-dev/remotion/edit/main/packages/docs/docs/freeze.mdx","tags":[],"version":"current","lastUpdatedAt":1790262572000,"frontMatter":{"image":"/generated/articles-docs-freeze.png","id":"freeze","title":"<Freeze>","crumb":"API"},"sidebar":"apiSidebar","previous":{"title":"<Folder>","permalink":"/docs/folder"},"next":{"title":"getInputProps()","permalink":"/docs/get-input-props"}}'),s=n(57825),o=n(29721),i=n(11682),a=n(67781),l=n(39372);let u=()=>{let e=(0,l.UC)(),t=(0,l.oz)({fps:30,frame:e,config:{damping:400}});return(0,s.jsx)(l.H1,{style:{justifyContent:"center",alignItems:"center"},children:(0,s.jsx)("div",{style:{height:200,width:200,backgroundColor:"#3498db",borderRadius:20,transform:`translateY(${(0,l.GW)(t,[0,1],[600,0])}px)`,justifyContent:"center",alignItems:"center",display:"flex",color:"rgba(255, 255, 255, 0.7)",fontSize:50},children:e})})},d=({frozen:e})=>null!==e?(0,s.jsx)(l.Kl,{frame:e,children:(0,s.jsx)(u,{})}):(0,s.jsx)(u,{}),c=()=>{let[e,t]=(0,a.useState)(!1),[n,r]=(0,a.useState)(30);return(0,s.jsxs)("div",{children:[(0,s.jsx)(i.ai,{acknowledgeRemotionLicense:!0,component:d,compositionWidth:1280,compositionHeight:720,controls:!0,durationInFrames:150,fps:30,style:{width:"100%"},inputProps:{frozen:e?n:null},loop:!0}),(0,s.jsx)("div",{children:(0,s.jsxs)("label",{children:[(0,s.jsx)("input",{type:"checkbox",checked:e,onChange:()=>t(!e)}),"Use Freeze component"]})}),e?(0,s.jsx)("div",{children:(0,s.jsxs)("label",{children:[(0,s.jsx)("input",{type:"number",value:n,style:{width:50,marginRight:8,padding:8},onChange:e=>r(Number(e.target.value))}),"Frame of the Freeze"]})}):null]})},p={image:"/generated/articles-docs-freeze.png",id:"freeze",title:"<Freeze>",crumb:"API"},m="<Freeze>",h={},f=[{value:"Recommendation: <Sequence freeze>",id:"recommendation-sequence-freeze",level:2},{value:"Example",id:"example",level:2},{value:"API",id:"api",level:2},{value:"<code>frame</code>",id:"frame",level:3},{value:"<code>active</code><AvailableFrom></AvailableFrom>",id:"active",level:3},{value:"Demo",id:"demo",level:2},{value:"Compatibility",id:"compatibility",level:2},{value:"See also",id:"see-also",level:2}];function y(e){let t={a:"a",br:"br",code:"code",div:"div",h1:"h1",h2:"h2",h3:"h3",header:"header",hr:"hr",li:"li",p:"p",ul:"ul",...(0,o.R)(),...e.components}
1,{AvailableFrom:n,CompatibilityTable:r,RawMarkdownCarrier:i}=t;return n||b("AvailableFrom",!0),r||b("CompatibilityTable",!0),i||b("RawMarkdownCarrier",!0),(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(i,{raw:'---\nimage: /generated/articles-docs-freeze.png\nid: freeze\ntitle: <Freeze>\ncrumb: \'API\'\n---\n\nimport {FreezeExample} from \'../components/FreezeExample/FreezeExample\';\n\n# <Freeze><AvailableFrom v="2.2.0" />\n\n```twoslash include example\nconst BlueSquare: React.FC = () => <div></div>\n// - BlueSquare\n```\n\n## Recommendation: <Sequence freeze>\n\nFor new code, prefer [`<Sequence freeze>`](/docs/sequence#freeze) if you want to freeze a timeline item.\nThe `freeze` prop is supported by Studio [interactivity](/docs/interactive), so it can be edited visually.\n\n```tsx twoslash title="MyComp.tsx"\n// @include: example-BlueSquare\n// ---cut---\nimport {Sequence} from \'remotion\';\n\nconst MyVideo = () => {\n return (\n <Sequence freeze={30}>\n <BlueSquare />\n </Sequence>\n );\n};\n```\n\n---\n\nWhen using the `<Freeze/>` component, all of its children will freeze to the frame that you specify as a prop.\n\nIf a component is a child of `<Freeze/>`, calling the [`useCurrentFrame()`](/docs/use-current-frame) hook will always return the frame number you specify, irrespective of any [`<Sequence>`](/docs/sequence).\n\n[`<Video>`](/docs/media/video), [`<OffthreadVideo />`](/docs/offthreadvideo) and [`<Html5Video />`](/docs/html5-video) elements will be paused and [`<Audio>`](/docs/media/audio) and [`<Html5Audio />`](/docs/html5-audio) elements will render muted.\n\n## Example\n\n```tsx twoslash title="MyComp.tsx"\n// @include: example-BlueSquare\n// ---cut---\nimport {Freeze} from \'remotion\';\n\nconst MyVideo = () => {\n return (\n <Freeze frame={30}>\n <BlueSquare />\n </Freeze>\n );\n};\n```\n\n## API\n\nThe Freeze component is a high order component and accepts, besides it\'s children, the following props:\n\n### `frame`\n\nAt which frame it\'s children should freeze.\n\n### `active`<AvailableFrom v="4.0.127"/>\n\nDeactivate freezing component by passing `false`. \nYou may also pass a callback function and accept the current frame and return a boolean.\n\n```tsx twoslash title="From frame 30 on"\n// @include: example-BlueSquare\n// ---cut---\nimport {Freeze} from \'remotion\';\n\nconst MyVideo = () => {\n return (\n <Freeze frame={30} active={(f) => f < 30}>\n <BlueSquare />\n </Freeze>\n );\n};\n```\n\n## Demo\n\n<FreezeExample />\n\n## Compatibility\n\n<CompatibilityTable chrome firefox safari nodejs="" bun="" serverlessFunctions="" clientSideRendering serverSideRendering player studio hideServers />\n\n## See also\n\n- [Source code for this component](https://github.com/remotion-dev/remotion/blob/main/packages/core/src/freeze.tsx)\n- [`useCurrentFrame()`](/docs/use-current-frame)\n'}),"\n","\n",(0,s.jsx)(t.header,{children:(0,s.jsxs)(t.h1,{id:"freeze",children:["<Freeze>",(0,s.jsx)(n,{v:"2.2.0"})]})}),"\n",(0,s.jsx)(t.div,{dangerouslySetInnerHTML:{__html:'<div class="shiki-twoslash-fragment"></div>'}}),"\n",(0,s.jsx)(t.h2,{id:"recommendation-sequence-freeze",children:"Recommendation: <Sequence freeze>"}),"\n",(0,s.jsxs)(t.p,{children:["For new code, prefer ",(0,s.jsx)(t.a,{href:"/docs/sequence#freeze",children:(0,s.jsx)(t.code,{children:"<Sequence freeze>"})})," if you want to freeze a timeline item.\nThe ",(0,s.jsx)(t.code,{children:"freeze"})," prop is supported by Studio ",(0,s.jsx)(t.a,{href:"/docs/interactive",children:"interactivity"}),", so it can be edited visually."]}),"\n",(0,s.jsx)(t.div,{dangerouslySetInnerHTML:{__html:'<pre class="shiki with-title github-dark twoslash lsp" style="background-color:#24292e;color:#e1e4e8" tabindex="0"><div class="code-title">MyComp.tsx</div><code><span class="line"><span style="color:#F97583">import</span><span style="color:#E1E4E8"> {</span><span style="color:#E1E4E8"><data-lsp lsp="(alias) const Sequence: React.ComponentType<SequenceProps & React.RefAttributes<HTMLDivElement>>\nimport Sequence">Sequence</data-lsp></span><span style="color:#E1E4E8">}
1 </span><span style="color:#F97583">from</span><span style="color:#9ECBFF"> \'remotion\'</span><span style="color:#E1E4E8">;</span></span>\n<span class="line"></span>\n<span class="line"><span style="color:#F97583">const</span><span style="color:#B392F0"> </span><span style="color:#B392F0"><data-lsp lsp="const MyVideo: () => JSX.Element">MyVideo</data-lsp></span><span style="color:#F97583"> =</span><span style="color:#E1E4E8"> () </span><span style="color:#F97583">=></span><span style="color:#E1E4E8"> {</span></span>\n<span class="line"><span style="color:#F97583"> return</span><span style="color:#E1E4E8"> (</span></span>\n<span class="line"><span style="color:#E1E4E8"> <</span><span style="color:#79B8FF"><data-lsp lsp="(alias) const Sequence: React.ComponentType<SequenceProps & React.RefAttributes<HTMLDivElement>>\nimport Sequence">Sequence</data-lsp></span><span style="color:#B392F0"> </span><span style="color:#B392F0"><data-lsp lsp="(property) freeze?: number | null | undefined">freeze</data-lsp></span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#79B8FF">30</span><span style="color:#E1E4E8">}></span></span>\n<span class="line"><span style="color:#E1E4E8"> <</span><span style="color:#79B8FF"><data-lsp lsp="const BlueSquare: React.FC<{}>">BlueSquare</data-lsp></span><span style="color:#E1E4E8"> /></span></span>\n<span class="line"><span style="color:#E1E4E8"> </</span><span style="color:#79B8FF"><data-lsp lsp="(alias) const Sequence: React.ComponentType<SequenceProps & React.RefAttributes<HTMLDivElement>>\nimport Sequence">Sequence</data-lsp></span><span style="color:#E1E4E8">></span></span>\n<span class="line"><span style="color:#E1E4E8"> );</span></span>\n<span class="line"><span style="color:#E1E4E8">};</span></span></code><button class="copy-button" aria-label="Copy code to clipboard">Copy</button></pre>'}}),"\n",(0,s.jsx)(t.hr,{}),"\n",(0,s.jsxs)(t.p,{children:["When using the ",(0,s.jsx)(t.code,{children:"<Freeze/>"})," component, all of its children will freeze to the frame that you specify as a prop."]}),"\n",(0,s.jsxs)(t.p,{children:["If a component is a child of ",(0,s.jsx)(t.code,{children:"<Freeze/>"}),", calling the ",(0,s.jsx)(t.a,{href:"/docs/use-current-frame",children:(0,s.jsx)(t.code,{children:"useCurrentFrame()"})})," hook will always return the frame number you specify, irrespective of any ",(0,s.jsx)(t.a,{href:"/docs/sequence",children:(0,s.jsx)(t.code,{children:"<Sequence>"})}),"."]}),"\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.a,{href:"/docs/media/video",children:(0,s.jsx)(t.code,{children:"<Video>"})}),", ",(0,s.jsx)(t.a,{href:"/docs/offthreadvideo",children:(0,s.jsx)(t.code,{children:"<OffthreadVideo />"})})," and ",(0,s.jsx)(t.a,{href:"/docs/html5-video",children:(0,s.jsx)(t.code,{children:"<Html5Video />"})})," elements will be paused and ",(0,s.jsx)(t.a,{href:"/docs/media/audio",children:(0,s.jsx)(t.code,{children:"<Audio>"})})," and ",(0,s.jsx)(t.a,{href:"/docs/html5-audio",children:(0,s.jsx)(t.code,{children:"<Html5Audio />"})})," elements will render muted."]}),"\n",(0,s.jsx)(t.h2,{id:"example",children:"Example"}),"\n",(0,s.jsx)(t.div,{dangerouslySetInnerHTML:{__html:'<pre class="shiki with-title github-dark twoslash lsp" style="background-color:#24292e;color:#e1e4e8" tabindex="0"><div class="code-title">MyComp.tsx</div><code><span class="line"><span style="color:#F97583">import</span><span style="color:#E1E4E8"> {</span><span style="color:#E1E4E8"><data-lsp lsp="(alias) const Freeze: React.FC<FreezeProps>\nimport Freeze">Freeze</data-lsp></span><span style="color:#E1E4E8">} </span><span style="color:#F97583">from</span><span style="color:#9ECBFF"> \'remotion\'</span><span style="color:#E1E4E8">;</span></span>\n<span class="line"></span>\n<span class="line"><span style="color:#F97583">const</span><span style="color:#B392F0"> </span><span style="color:#B392F0"><data-lsp lsp="const MyVideo: () => JSX.Element">MyVideo</data-lsp></span><span style="color:#F97583"> =</span><span style="color:#E1E4E8"> () </span><span style="color:#F97583">=></span><span style="color:#E1E4E8"> {</span></span>\n<span class="line"><span style="color:#F97583"> return</span><span style="color:#E1E4E8"> (</span></span>\n<span class="line"><span style="color:#E1E4E8"> <</span><span style="color:#79B8FF"><data-lsp lsp="(alias) const Freeze: React.FC<FreezeProps>\nimport Freeze">Freeze</data-lsp></span><span style="color:#B392F0"> </span><span style="color:#B392F0"><data-lsp lsp="(property) frame: number">frame</data-lsp></span><span style="color:#F97583">=</span><span style="color:#E1E4E8">
1{</span><span style="color:#79B8FF">30</span><span style="color:#E1E4E8">}></span></span>\n<span class="line"><span style="color:#E1E4E8"> <</span><span style="color:#79B8FF"><data-lsp lsp="const BlueSquare: React.FC<{}>">BlueSquare</data-lsp></span><span style="color:#E1E4E8"> /></span></span>\n<span class="line"><span style="color:#E1E4E8"> </</span><span style="color:#79B8FF"><data-lsp lsp="(alias) const Freeze: React.FC<FreezeProps>\nimport Freeze">Freeze</data-lsp></span><span style="color:#E1E4E8">></span></span>\n<span class="line"><span style="color:#E1E4E8"> );</span></span>\n<span class="line"><span style="color:#E1E4E8">};</span></span></code><button class="copy-button" aria-label="Copy code to clipboard">Copy</button></pre>'}}),"\n",(0,s.jsx)(t.h2,{id:"api",children:"API"}),"\n",(0,s.jsx)(t.p,{children:"The Freeze component is a high order component and accepts, besides it's children, the following props:"}),"\n",(0,s.jsx)(t.h3,{id:"frame",children:(0,s.jsx)(t.code,{children:"frame"})}),"\n",(0,s.jsx)(t.p,{children:"At which frame it's children should freeze."}),"\n",(0,s.jsxs)(t.h3,{id:"active",children:[(0,s.jsx)(t.code,{children:"active"}),(0,s.jsx)(n,{v:"4.0.127"})]}),"\n",(0,s.jsxs)(t.p,{children:["Deactivate freezing component by passing ",(0,s.jsx)(t.code,{children:"false"}),".",(0,s.jsx)(t.br,{}),"\n","You may also pass a callback function and accept the current frame and return a boolean."]}),"\n",(0,s.jsx)(t.div,{dangerouslySetInnerHTML:{__html:'<pre class="shiki with-title github-dark twoslash lsp" style="background-color:#24292e;color:#e1e4e8" tabindex="0"><div class="code-title">From frame 30 on</div><code><span class="line"><span style="color:#F97583">import</span><span style="color:#E1E4E8"> {</span><span style="color:#E1E4E8"><data-lsp lsp="(alias) const Freeze: React.FC<FreezeProps>\nimport Freeze">Freeze</data-lsp></span><span style="color:#E1E4E8">} </span><span style="color:#F97583">from</span><span style="color:#9ECBFF"> \'remotion\'</span><span style="color:#E1E4E8">;</span></span>\n<span class="line"></span>\n<span class="line"><span style="color:#F97583">const</span><span style="color:#B392F0"> </span><span style="color:#B392F0"><data-lsp lsp="const MyVideo: () => JSX.Element">MyVideo</data-lsp></span><span style="color:#F97583"> =</span><span style="color:#E1E4E8"> () </span><span style="color:#F97583">=></span><span style="color:#E1E4E8"> {</span></span>\n<span class="line"><span style="color:#F97583"> return</span><span style="color:#E1E4E8"> (</span></span>\n<span class="line"><span style="color:#E1E4E8"> <</span><span style="color:#79B8FF"><data-lsp lsp="(alias) const Freeze: React.FC<FreezeProps>\nimport Freeze">Freeze</data-lsp></span><span style="color:#B392F0"> </span><span style="color:#B392F0"><data-lsp lsp="(property) frame: number">frame</data-lsp></span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#79B8FF">30</span><span style="color:#E1E4E8">} </span><span style="color:#B392F0"><data-lsp lsp="(property) active?: boolean | ((f: number) => boolean) | undefined">active</data-lsp></span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{(</span><span style="color:#FFAB70"><data-lsp lsp="(parameter) f: number">f</data-lsp></span><span style="color:#E1E4E8">) </span><span style="color:#F97583">=></span><span style="color:#E1E4E8"> </span><span style="color:#E1E4E8"><data-lsp lsp="(parameter) f: number">f</data-lsp></span><span style="color:#E1E4E8"> </span><span style="color:#F97583"><</span><span style="color:#79B8FF"> 30</span><span style="color:#E1E4E8">}></span></span>\n<span class="line"><span style="color:#E1E4E8"> <</span><span style="color:#79B8FF"><data-lsp lsp="const BlueSquare: React.FC<{}>">BlueSquare</data-lsp></span><span style="color:#E1E4E8"> /></span></span>\n<span class="line"><span style="color:#E1E4E8"> </</span><span style="color:#79B8FF"><data-lsp lsp="(alias) const Freeze: React.FC<FreezeProps>\nimport Freeze">Freeze</data-lsp></span><span style="color:#E1E4E8">></span></span>\n<span class="line"><span style="color:#E1E4E8"> );</span></span>\n<span class="line"><span style="color:#E1E4E8">};
1</span></span></code><button class="copy-button" aria-label="Copy code to clipboard">Copy</button></pre>'}}),"\n",(0,s.jsx)(t.h2,{id:"demo",children:"Demo"}),"\n",(0,s.jsx)(c,{}),"\n",(0,s.jsx)(t.h2,{id:"compatibility",children:"Compatibility"}),"\n",(0,s.jsx)(r,{chrome:!0,firefox:!0,safari:!0,nodejs:"",bun:"",serverlessFunctions:"",clientSideRendering:!0,serverSideRendering:!0,player:!0,studio:!0,hideServers:!0}),"\n",(0,s.jsx)(t.h2,{id:"see-also",children:"See also"}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsx)(t.li,{children:(0,s.jsx)(t.a,{href:"https://github.com/remotion-dev/remotion/blob/main/packages/core/src/freeze.tsx",children:"Source code for this component"})}),"\n",(0,s.jsx)(t.li,{children:(0,s.jsx)(t.a,{href:"/docs/use-current-frame",children:(0,s.jsx)(t.code,{children:"useCurrentFrame()"})})}),"\n"]})]})}function g(e={}){let{wrapper:t}={...(0,o.R)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(y,{...e})}):y(e)}function b(e,t){throw Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}},11682(e,t,n){n.d(t,{Cb:()=>eX,Vz:()=>e$,ai:()=>eL});var r=n(67781),s=n(57825),o=n(39372),i=n(64831);if("function"!=typeof r.createContext)throw Error(['Remotion requires React.createContext, but it is "undefined".','If you are in a React Server Component, turn it into a client component by adding "use client" at the top of the file.',"","Before:",' import {Player} from "@remotion/player";',"","After:",' "use client";',' import {Player} from "@remotion/player";'].join(` 2`));var a=()=>(0,s.jsx)("svg",{width:25,height:25,viewBox:"0 0 25 25",fill:"none",children:(0,s.jsx)("path",{d:"M8 6.375C7.40904 8.17576 7.06921 10.2486 7.01438 12.3871C6.95955 14.5255 7.19163 16.6547 7.6875 18.5625C9.95364 18.2995 12.116 17.6164 14.009 16.5655C15.902 15.5147 17.4755 14.124 18.6088 12.5C17.5158 10.8949 15.9949 9.51103 14.1585 8.45082C12.3222 7.3906 10.2174 6.68116 8 6.375Z",fill:"white",stroke:"white",strokeWidth:"6.25",strokeLinejoin:"round"})}),l=()=>(0,s.jsxs)("svg",{viewBox:"0 0 100 100",width:25,height:25,children:[(0,s.jsx)("rect",{x:"25",y:"20",width:"20",height:"60",fill:"#fff",ry:"5",rx:"5"}),(0,s.jsx)("rect",{x:"55",y:"20",width:"20",height:"60",fill:"#fff",ry:"5",rx:"5"})]}),u=({isFullscreen:e})=>{let t=3*!e,n=e?9.600000000000001:3,r=e?9.600000000000001:12;return(0,s.jsxs)("svg",{viewBox:"0 0 32 32",height:16,width:16,children:[(0,s.jsx)("path",{d:` 3 M ${t} ${r} 4 L ${n} ${n} 5 L ${r} ${t} 6 `,stroke:"#fff",strokeWidth:6,fill:"none"}),(0,s.jsx)("path",{d:` 7 M ${32-t} ${r} 8 L ${32-n} ${n} 9 L ${32-r} ${t} 10 `,stroke:"#fff",strokeWidth:6,fill:"none"}),(0,s.jsx)("path",{d:` 11 M ${t} ${32-r} 12 L ${n} ${32-n} 13 L ${r} ${32-t} 14 `,stroke:"#fff",strokeWidth:6,fill:"none"}),(0,s.jsx)("path",{d:` 15 M ${32-t} ${32-r} 16 L ${32-n} ${32-n} 17 L ${32-r} ${32-t} 18 `,stroke:"#fff",strokeWidth:6,fill:"none"})]})},d=()=>(0,s.jsx)("svg",{width:25,height:25,viewBox:"0 0 24 24",children:(0,s.jsx)("path",{d:"M3.63 3.63a.996.996 0 000 1.41L7.29 8.7 7 9H4c-.55 0-1 .45-1 1v4c0 .55.45 1 1 1h3l3.29 3.29c.63.63 1.71.18 1.71-.71v-4.17l4.18 4.18c-.49.37-1.02.68-1.6.91-.36.15-.58.53-.58.92 0 .72.73 1.18 1.39.91.8-.33 1.55-.77 2.22-1.31l1.34 1.34a.996.996 0 101.41-1.41L5.05 3.63c-.39-.39-1.02-.39-1.42 0zM19 12c0 .82-.15 1.61-.41 2.34l1.53 1.53c.56-1.17.88-2.48.88-3.87 0-3.83-2.4-7.11-5.78-8.4
18-.59-.23-1.22.23-1.22.86v.19c0 .38.25.71.61.85C17.18 6.54 19 9.06 19 12zm-8.71-6.29l-.17.17L12 7.76V6.41c0-.89-1.08-1.33-1.71-.7zM16.5 12A4.5 4.5 0 0014 7.97v1.79l2.48 2.48c.01-.08.02-.16.02-.24z",fill:"#fff"})}),c=()=>(0,s.jsx)("svg",{width:25,height:25,viewBox:"0 0 24 24",children:(0,s.jsx)("path",{d:"M3 10v4c0 .55.45 1 1 1h3l3.29 3.29c.63.63 1.71.18 1.71-.71V6.41c0-.89-1.08-1.34-1.71-.71L7 9H4c-.55 0-1 .45-1 1zm13.5 2A4.5 4.5 0 0014 7.97v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 4.45v.2c0 .38.25.71.6.85C17.18 6.53 19 9.06 19 12s-1.82 5.47-4.4 6.5c-.36.14-.6.47-.6.85v.2c0 .63.63 1.07 1.21.85C18.6 19.11 21 15.84 21 12s-2.4-7.11-5.79-8.4c-.58-.23-1.21.22-1.21.85z",fill:"#fff"})}),p="__remotion_buffering_indicator",m="__remotion_buffering_animation",h={width:25,height:25,overflow:"hidden",lineHeight:"normal",fontSize:"inherit"},f={width:14,height:14,overflow:"hidden",lineHeight:"normal",fontSize:"inherit"},y=({type:e,color:t="white"})=>{let n="player"===e?h:f;return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)("style",{type:"text/css",children:` 19 @keyframes ${m} { 20 0% { 21 rotate: 0deg; 22 } 23 100% { 24 rotate: 360deg; 25 } 26 } 27 28 .${p} { 29 animation: ${m} 1s linear infinite; 30 } 31 `}),(0,s.jsx)("div",{style:n,children:(0,s.jsx)("svg",{viewBox:"player"===e?"0 0 22 22":"0 0 18 18",style:n,className:p,children:(0,s.jsx)("path",{d:"player"===e?"M 11 4 A 7 7 0 0 1 15.1145 16.66312":"M 9 2 A 7 7 0 0 1 13.1145 14.66312",stroke:t,strokeLinecap:"round",fill:"none",strokeWidth:3})})})]})},g=({previewSize:e,compositionWidth:t,compositionHeight:n,canvasSize:r})=>{let s=o.Xp.calculateScale({canvasSize:r,compositionHeight:n,compositionWidth:t,previewSize:e}),i=0-(1-s)/2,a=i*t,l=i*n,u=t*s,d=n*s;return{centerX:r.width/2-u/2,centerY:r.height/2-d/2,xCorrection:a,yCorrection:l,scale:s}},b=({config:e,style:t,canvasSize:n,overflowVisible:r,layout:s})=>e?{position:"relative",overflow:r?"visible":"hidden",...(({currentSize:e,width:t,height:n,compositionWidth:r,compositionHeight:s})=>void 0!==t&&void 0===n||void 0!==n&&void 0===t?{aspectRatio:[r,s].join("/")}:{width:r,height:s})({compositionHeight:e.height,compositionWidth:e.width,currentSize:n,height:t?.height,width:t?.width}),opacity:+!!s,...t}:{},v=({config:e,layout:t,scale:n,overflowVisible:r})=>e?t?{position:"absolute",width:e.width,height:e.height,display:"flex",transform:`scale(${n})`,marginLeft:t.xCorrection,marginTop:t.yCorrection,overflow:r?"visible":"hidden"}:{position:"absolute",width:e.width,height:e.height,display:"flex",transform:`scale(${n})`,overflow:r?"visible":"hidden"}:{},x=({layout:e,scale:t,config:n,overflowVisible:r})=>{if(!n)return{};if(!e)return{width:n.width*t,height:n.height*t,display:"flex",flexDirection:"column",position:"absolute",overflow:r?"visible":"hidden"};let{centerX:s,centerY:o}=e;return{width:n.width*t,height:n.height*t,display:"flex",flexDirection:"column",position:"absolute",left:s,top:o,overflow:r?"visible":"hidden"}},w=(0,r.createContext)(null),E=r.createContext(void 0),C=r.createContext(void 0);class F{listeners={ended:[],error:[],pause:[],play:[],ratechange:[],scalechange:[],seeked:[],timeupdate:[],frameupdate:[],fullscreenchange:[],volumechange:[],mutechange:[],waiting:[],resume:[]};addEventListener(e,t){this.listeners[e].push(t)}removeEventListener(e,t){this.listeners[e]=this.listeners[e].filter(e=>e!==t)}dispatchEvent(e,t){this.listeners[e].forEach(e=>{e({detail:t})})}dispatchSeek=e=>{this.dispatchEvent("seeked",{frame:e})};dispatchVolumeChange=e=>{this.dispatchEvent("volumechange",{volume:e})};dispatchPause=()=>{this.dispatchEvent("pause",void 0)};dispatchPlay=()=>{this.dispatchEvent("play",void 0)};dispatchEnded=()=>{this.dispatchEvent("ended",void 0)};dispatchRateChange=e=>{this.dispatchEvent("ratechange",{playbackRate:e})};dispatchScaleChange=e=>{this.dispatchEvent("scalechange",{scale:e})};dispatchError=e=>{this.dispatchEvent("error",{error:e})};dispatchTimeUpdate=e=>{this.dispatchEvent("timeupdate",e)};dispatchFrameUpdate=e=>{this.dispatchEvent("frameupdate",e)};dispatchFullscreenChange=e=>{this.dispatchEvent("fullscreenchange",e)};dispatchMuteChange=e=>{this.dispatchEvent("mutechange",e)};dispatchWaiting=e=>{this.dispatchEvent("waiting",e)};dispatchResume=e=>{this.dispatchEvent("resume",e)}}class S{listeners={error:[],waiting:[],resume:[]};addEventListener(e,t){this.listeners[e].push(t)}removeEventListener(e,t){this.listeners[e]=this.listeners[e].filter(e=>e!==t)}
31dispatchEvent(e,t){this.listeners[e].forEach(e=>{e({detail:t})})}dispatchError=e=>{this.dispatchEvent("error",{error:e})};dispatchWaiting=e=>{this.dispatchEvent("waiting",e)};dispatchResume=e=>{this.dispatchEvent("resume",e)}}var j=e=>{let{subscribeBuffering:t}=(0,r.useContext)(o.Xp.SetTimelineContext);(0,r.useLayoutEffect)(()=>t(t=>{t.buffering?e.dispatchWaiting({}):e.dispatchResume({})}),[e,t])},k=({children:e,currentPlaybackRate:t})=>{let[n]=(0,r.useState)(()=>new F);return(0,r.useEffect)(()=>{t&&n.dispatchRateChange(t)},[n,t]),j(n),(0,s.jsx)(E.Provider,{value:n,children:e})},P=r.createContext(null),R=(e,t)=>{let[n,s]=(0,r.useState)(!1);return(0,r.useEffect)(()=>{let n,{current:r}=e;if(!r)return;let o=()=>{t&&(clearTimeout(n),n=setTimeout(()=>{s(!1)},!0===t?3e3:t))},i=()=>{s(!0),o()},a=()=>{s(!1),clearTimeout(n)},l=()=>{s(!0),o()};return r.addEventListener("mouseenter",i),r.addEventListener("mouseleave",a),r.addEventListener("mousemove",l),()=>{r.removeEventListener("mouseenter",i),r.removeEventListener("mouseleave",a),r.removeEventListener("mousemove",l),clearTimeout(n)}},[t,e]),n},z=()=>{let e=o.Xp.Timeline.useTimelineSeekFrame(),{setPlaying:t,frameRef:n,audioAndVideoTags:s,isPlaying:i,isBuffering:a}=(0,r.useContext)(o.Xp.SetTimelineContext),l=(0,r.useContext)(o.Xp.SharedAudioContext),u=(0,r.useContext)(o.Xp.SharedAudioTagsContext),d=(0,o.OK)(),c=o.Xp.useVideo(),p=o.Xp.useUnsafeVideoConfig(),m=(0,r.useContext)(E),h=(0,r.useRef)(0),f=(0,r.useRef)(null),y=(0,r.useRef)(!1);if(!m)throw TypeError("Expected Player event emitter context");let g=(0,r.useCallback)(()=>{if(!c)return f.current??("u"<typeof window?0:window.remotion_initialFrame??0
31);let e=n.current[c.id]??(d.isPlayer?0:o.Xp.Timeline.getFrameForComposition(c.id));return o.Xp.Timeline.clampFrameToCompositionRange(e,c.durationInFrames)},[d.isPlayer,n,c]),b=(0,r.useCallback)(t=>{let r=p?o.Xp.TimelinePosition.clampFrameToCompositionRange(t,p.durationInFrames):Math.max(0,t);f.current=r,c?.id&&(e(e=>e[c.id]===r?e:{...e,[c.id]:r}),n.current[c.id]!==r&&(n.current={...n.current,[c.id]:r})),m.dispatchSeek(r)},[p,m,n,e,c?.id]),v=(0,r.useCallback)(e=>{let n=y.current;if(y.current=!1,i())return;let r=(p?.durationInFrames??1)-1;g()===r&&b(0),n?l?.resumeAsAutoPlay():l?.resume(),u&&u.numberOfAudioTags>0&&e&&u.playAllAudios(),s.current.forEach(e=>e.play("player play() was called and playing audio from a click")),t(!0),h.current=g(),m.dispatchPlay()},[s,l,u,p?.durationInFrames,m,g,i,b,t]),x=(0,r.useCallback)(()=>{y.current=!0,v()},[v]),w=(0,r.useCallback)(()=>{i()&&(t(!1),m.dispatchPause(),l?.suspend())},[l,m,i,t]),C=(0,r.useCallback)(()=>{i()&&(t(!1),f.current=h.current,p&&(e(e=>({...e,[p.id]:h.current})),n.current={...n.current,[p.id]:h.current},m.dispatchPause()))},[p,m,n,i,t,e]),F=c?.id,S=(p?.durationInFrames??1)-1,j=(0,r.useCallback)(t=>{if(!F)return null;if(i())return;let r=n.current[F]??window.remotion_initialFrame??0,s=Math.max(0,r-t);r!==s&&(e(e=>e[F]===s?e:{...e,[F]:s}),n.current={...n.current,[F]:s})},[n,i,e,F]),k=(0,r.useCallback)(t=>{if(!F)return null;if(i())return;let r=n.current[F]??window.remotion_initialFrame??0,s=Math.min(S,r+t);r!==s&&(e(e=>e[F]===s?e:{...e,[F]:s}),n.current={...n.current,[F]:s})},[n,S,i,e,F]),P=(0,r.useCallback)(e=>{i()?w():v(e)},[w,v,i]);return(0,r.useMemo)(()=>({frameBack:j,frameForward:k,emitter:m,play:v,playAsAutoPlay:x,pause:w,seek:b,getCurrentFrame:g,isPlaying:i,isBuffering:a,pauseAndReturnToPlayStart:C,toggle:P}),[m,j,k,g,i,w,C,v,x,a,b,P])},M=()=>!("u"<typeof document)&&"hidden"===document.visibilityState,T=({audioContext:e,audioSyncAnchor:t,absoluteTimeInSeconds:n,globalPlaybackRate:r,logLevel:s,force:i})=>{let a=e.currentTime-n/r,l=a-t.value,{outputLatency:u}=e;return!(Math.abs(l)<.1+(e.baseLatency+(0===u?.3:u))&&!i||Math.abs(l)<Number.EPSILON)&&(o.Xp.Log.verbose({logLevel:s,tag:"audio-scheduling"},"Anchor "+(i?"forcibly ":"")+"changed from %s to %s with shift %s",t.value,a,l),t.value=a,!0)},A=({loop:e,playbackRate:t,moveToBeginningWhenEnded:n,inFrame:s,outFrame:i,browserMediaControlsBehavior:a,getCurrentFrame:l,muted:u})=>{let d,c=o.Xp.useUnsafeVideoConfig(),p=o.Xp.Timeline.useTimelinePosition(),m=o.Xp.usePlaying(),{pause:h,emitter:f,isPlaying:y}=z(),g=o.Xp.Timeline.useTimelineSetFrame(),b=(0,r.useContext)(o.Xp.SharedAudioContext),{setPlayerMuted:v}=(0,r.useContext)(o.Xp.SetMediaVolumeContext),{isBuffering:x,subscribeBuffering:w}=(0,r.useContext)(o.Xp.SetTimelineContext),E=o.Xp.useLogLevel(),C=(d=(0,r.useRef)(M()),(0,r.useEffect)(()=>{let e=()=>{d.current=M()};return document.addEventListener("visibilitychange",e),()=>{document.removeEventListener("visibilitychange",e)}},[]),d),F=(0,r.useRef)(0);(({browserMediaControlsBehavior:e,videoConfig:t,playbackRate:n})=>{let s=o.Xp.usePlaying(),{pause:i,play:a,emitter:l,getCurrentFrame:u,seek:d}=z(),c=(0,r.useRef)(!1);(0,r.useEffect)(()=>{s&&(c.current=!0),!navigator.mediaSession||"do-nothing"!==e.mode&&(s?navigator.mediaSession.playbackState="playing":c.current&&(navigator.mediaSession.playbackState="paused"))},[e.mode,s]),(0,r.useEffect)(()=>{if(!navigator.mediaSession||"do-nothing"===e.mode)return;let r=()=>{t&&navigator.mediaSession&&navigator.mediaSession.setPositionState({duration:t.durationInFrames/t.fps,playbackRate:n,position:u()/t.fps})};return l.addEventListener("timeupdate",r),()=>{l.removeEventListener("timeupdate",r)}},[e.mode,l,u,n,t]),(0,r.useEffect)(()=>{if(navigator.mediaSession&&"do-nothing"!==e.mode)return navigator.mediaSession.setActionHandler("play",()=>{"register-media-session"===e.mode&&a()}),navigator.mediaSession.setActionHandler("pause",()=>{"register-media-session"===e.mode&&i()}),navigator.mediaSession.setActionHandler("seekto",n=>{"register-media-session"===e.mode&&void 0!==n.seekTime&&t&&d(Math.round(n.seekTime*t.fps))}),navigator.mediaSession.setActionHandler("seekbackward",()=>{"register-media-session"===e.mode&&t&&d(Math.max(0,Math.round((u()-10)*t.fps)))}),navigator.mediaSession.setActionHandler("seekforward",()=>{"register-media-session"===e.mode&&t&&d(Math.max(t.durationInFrames-1,Math.round((u()+10)*t.fps)))}),navigator.mediaSession.setActionHandler("previoustrack",()=>{"register-media-session"===e.mode&&d(0)}),()=>{navigator.mediaSession.metadata=null,navigator.mediaSession.setActionHandler("play",null),navigator.mediaSession.setActionHandler("pause",null),navigator.mediaSession.setActionHandler("seekto",null),navigator.mediaSession.setActionHandler("seekbackward",null),navigator.mediaSession.setActionHandler("seekforward",null),navigator.mediaSession.setActionHandler("previoustrack",null)}},[e.mode,u,i,a,d,t])}
31)({browserMediaControlsBehavior:a,playbackRate:t,videoConfig:c}),(0,r.useLayoutEffect)(()=>{b&&b.audioContext&&c&&!u&&T({audioContext:b.audioContext,audioSyncAnchor:b.audioSyncAnchor,absoluteTimeInSeconds:p/c.fps,globalPlaybackRate:t,logLevel:E,force:!1})&&b.audioSyncAnchorEmitter.dispatch("changed")},[c,p,E,t,b,u]),(0,r.useLayoutEffect)(()=>{let e=b?.audioContext;if(!e||!c||u)return;let n=()=>{let n=b?.getAudioContextState();n&&(e=>{if("suspended"===e||"running-to-suspended"===e)return!0;if("closed"===e||"interrupted"===e||"running"===e||"suspended-to-running"===e)return!1;throw Error(`Unexpected audio context state: ${e}`)})(n)&&T({audioContext:e,audioSyncAnchor:b.audioSyncAnchor,absoluteTimeInSeconds:l()/c.fps,globalPlaybackRate:t,logLevel:E,force:!0})&&b.audioSyncAnchorEmitter.dispatch("changed")};return e?.addEventListener("statechange",n),()=>{e?.removeEventListener("statechange",n)}},[c,l,E,u,t,b]),(0,r.useEffect)(()=>{if(!c)return;if(!m)return void b?.suspend?.();b?._experimentalKeepAudioContextAlive&&b.audioContext&&!u&&T({audioContext:b.audioContext,audioSyncAnchor:b.audioSyncAnchor,absoluteTimeInSeconds:l()/c.fps,globalPlaybackRate:t,logLevel:E,force:!0})&&b.audioSyncAnchorEmitter.dispatch("changed");let r=!1,o=!1,a=null,d=performance.now(),p=0,F=()=>{null!==a&&("raf"===a.type?cancelAnimationFrame(a.id):clearTimeout(a.id))},S=()=>{r=!0,F()},j=()=>
31{if(r)return;if(!y())return void b?.suspend?.();u||o||x()||b?.resume?.();let a=performance.now()-d,m=i??c.durationInFrames-1,{nextFrame:v,framesToAdvance:w,hasEnded:E}=(({time:e,currentFrame:t,playbackSpeed:n,fps:r,actualLastFrame:s,actualFirstFrame:o,framesAdvanced:i,shouldLoop:a})=>{let l=(n<0?Math.ceil:Math.floor)(e*n/(1e3/r))-i,u=l+t,d=u>s||u<o,c=!a&&d&&!(t>s||t<o);return n>0?d?{nextFrame:o,framesToAdvance:l,hasEnded:c}:{nextFrame:u,framesToAdvance:l,hasEnded:c}:d?{nextFrame:s,framesToAdvance:l,hasEnded:c}:{nextFrame:u,framesToAdvance:l,hasEnded:c}})({time:a,currentFrame:l(),playbackSpeed:t,fps:c.fps,actualFirstFrame:s??0,actualLastFrame:m,framesAdvanced:p,shouldLoop:e});if(p+=w,v===l()||E&&!n||x()||g(e=>({...e,[c.id]:v})),E){S(),h(),f.dispatchEnded();return}k()},k=()=>{if(r)return;let e=o?null:b?.getIsResumingAudioContext?.()??null;if(null!==e&&!u)return void e.then(e=>{r||("failed"===e&&(o=!0,b?.suspend(),v(!0)),d=performance.now(),p=0,k())});if(x()){u||o||b?.suspend?.();let e=w(t=>{t.buffering||(e(),!u&&!o&&b?._experimentalKeepAudioContextAlive&&b.resume(),d=performance.now(),p=0,k())});return}if(C.current){a={type:"timeout",id:setTimeout(j,1e3/c.fps)};return}a={type:"raf",id:requestAnimationFrame(j)}};k();let P=()=>{"visible"!==document.visibilityState&&(F(),j())};return window.addEventListener("visibilitychange",P),()=>{window.removeEventListener("visibilitychange",P),S()}},[c,e,h,m,g,f,t,s,i,n,C,l,x,y,b,v,w,E,u]),(0,r.useEffect)(()=>{let e=performance.now(),t=e-F.current;if(t>=250){f.dispatchTimeUpdate({frame:p}),F.current=e;return}let n=setTimeout(()=>{f.dispatchTimeUpdate({frame:p}),F.current=performance.now()},250-t);return()=>clearTimeout(n)},[f,p]),(0,r.useEffect)(()=>{f.dispatchFrameUpdate({frame:p})},[f,p])},L=[],B=e=>e?"current"in e?e.current:e:null,I=(e,t)=>{let[n,s]=(0,r.useState)(()=>{let t=B(e);if(!t)return null;let n=t.getClientRects();return n[0]?{width:n[0].width,height:n[0].height,left:n[0].x,top:n[0].y,windowSize:{height:window.innerHeight,width:window.innerWidth}}:null}),o=(0,r.useMemo)(()=>"u"<typeof ResizeObserver?null:new ResizeObserver(e=>{let{contentRect:n,target:r}=e[0],o=r.getClientRects();if(!o?.[0])return void s(null);let i=0===n.width?1:o[0].width/n.width,a=0===n.height?1:o[0].height/n.height,l=t.shouldApplyCssTransforms||0===i?o[0].width:o[0].width*(1/i),u=t.shouldApplyCssTransforms||0===a?o[0].height:o[0].height*(1/a);s(e=>e&&e.width===l&&e.height===u&&e.left===o[0].x&&e.top===o[0].y&&e.windowSize.height===window.innerHeight&&e.windowSize.width===window.innerWidth?e:{width:l,height:u,left:o[0].x,top:o[0].y,windowSize:{height:window.innerHeight,width:window.innerWidth}})}),[t.shouldApplyCssTransforms]),i=(0,r.useCallback)(()=>{let t=B(e);if(!t)return;let n=t.getClientRects();n[0]?s(e=>e&&e.width===n[0].width&&e.height===n[0].height&&e.left===n[0].x&&e.top===n[0].y&&e.windowSize.height===window.innerHeight&&e.windowSize.width===window.innerWidth?e:{width:n[0].width,height:n[0].height,left:n[0].x,top:n[0].y,windowSize:{height:window.innerHeight,width:window.innerWidth}}):s(null)},[e]);return(0,r.useEffect)(()=>{i()},[i]),(0,r.useEffect)(()=>{if(!o)return;let t=B(e);return t&&o.observe(t),()=>{t&&o.unobserve(t)}},[o,e]),(0,r.useEffect)(()=>{if(t.triggerOnWindowResize)return window.addEventListener("resize",i),()=>{window.removeEventListener("resize",i)}},[t.triggerOnWindowResize,i]),(0,r.useEffect)(()=>(L.push(i),()=>{L=L.filter(e=>e!==i)}),[i]),(0,r.useMemo)(()=>n?{...n,refresh:i}:null,[n,i])},N={display:"flex",justifyContent:"center",alignItems:"center",flex:1,height:"100%",width:"100%"};class $ extends r.Component{state={hasError:null};static getDerivedStateFromError(e){return{hasError:e}}componentDidCatch(e){this.props.onError(e)}render(){return this.state.hasError?(0,s.jsx)("div",{style:N,children:this.props.errorFallback({error:this.state.hasError})}):this.props.children}}var X=async()=>{if("u"<typeof window||void 0===window.crypto||void 0===window.crypto.subtle)return null;try{let e=await crypto.subtle.digest("SHA-256",new TextEncoder().encode(window.location.hostname));return Array.from(new Uint8Array(e)).map(e=>e.toString(16).padStart(2,"0")).join("")}catch{return null}},q={backgroundColor:"red",position:"absolute",padding:12,fontFamily:"Arial"}
31,V=["28d262b44cc61fa750f1686b16ad0604dabfe193fbc263eec05c89b7ad4c2cd6","4db1b0a94be33165dfefcb3ba03d04c7a2666dd27c496d3dc9fa41858e94925e","fbc48530bbf245da790f63675e84e06bab38c3b114fab07eb350025119922bdc","7baf10a8932757b1b3a22b3fce10a048747ac2f8eaf638603487e3705b07eb83","8a6c21a598d8c667272b5207c051b85997bf5b45d5fb712378be3f27cd72c6a6","a2f7aaac9c50a9255e7fc376110c4e0bfe153722dc66ed3c5d3bf2a135f65518"],H=!1,W=()=>{let[e,t]=r.useState(!1);return((0,r.useEffect)(()=>{H||(H=!0,X().then(e=>{e&&V.includes(e)&&t(!0)}).catch(()=>{}))},[]),(0,r.useEffect)(()=>{if(!e)return;let t=new MutationObserver(()=>(()=>{if(!document.querySelector(".warning-banner")){let e=document.createElement("div");e.className="warning-banner",Object.assign(e.style,q,{zIndex:"9999",cssText:`${q.cssText} !important;`}),e.innerHTML=` 32 <a href="https://github.com/remotion-dev/remotion/pull/4589" style="color: white;"> 33 Remotion Unlicensed \u{2013} Contact [email protected] 34 </a> 35 `,document.body.appendChild(e)}})());return t.observe(document.body,{childList:!0,subtree:!0}),()=>{t.disconnect()}},[e]),e)?(0,s.jsx)("div",{style:q,className:"warning-banner",children:(0,s.jsx)("a",{style:{color:"white"},href:"https://github.com/remotion-dev/remotion/pull/4589",children:"Remotion Unlicensed \u2013 Contact [email protected]"})}):null},D=({playing:e,buffering:t})=>e&&t?(0,s.jsx)(y,{type:"player"}):e?(0,s.jsx)(l,{}):(0,s.jsx)(a,{}),_=({volume:e,isVertical:t,onBlur:n,inputRef:i,setVolume:a})=>{let l=(0,r.useMemo)(()=>{let e={paddingLeft:5,height:25,width:O,display:"inline-flex",alignItems:"center"};return t?{...e,position:"absolute",transform:`rotate(-90deg) translateX(${O/2+12.5}px)`}:{...e}},[t]),u=void 0===r.useId?"volume-slider":r.useId(),[d]=(0,r.useState)(()=>`__remotion-volume-slider-${(0,o.yT)(u)}`.replace(".","")),c=(0,r.useCallback)(e=>{a(parseFloat(e.target.value))},[a]),p=(0,r.useMemo)(()=>{let n={WebkitAppearance:"none",backgroundColor:"rgba(255, 255, 255, 0.5)",borderRadius:2.5,cursor:"pointer",height:5,width:O,backgroundImage:`linear-gradient( 36 to right, 37 white ${100*e}%, rgba(255, 255, 255, 0) ${100*e}% 38 )`};return t?{...n,bottom:25+O/2}:n},[t,e]),m=` 39 .${d}::-webkit-slider-thumb { 40 -webkit-appearance: none; 41 background-color: white; 42 border-radius: 6px; 43 box-shadow: 0 0 2px black; 44 height: 12px; 45 width: 12px; 46 } 47 48 .${d}::-moz-range-thumb { 49 -webkit-appearance: none; 50 background-color: white; 51 border-radius: 6px; 52 box-shadow: 0 0 2px black; 53 height: 12px; 54 width: 12px; 55 } 56`;return(0,s.jsxs)("div",{style:l,children:[(0,s.jsx)("style",{dangerouslySetInnerHTML:{__html:m}}),(0,s.jsx)("input",{ref:i,"aria-label":"Change volume",className:d,max:1,min:0,onBlur:n,onChange:c,step:.01,type:"range",value:e,style:p})]})},O=100,U=({displayVerticalVolumeSlider:e,renderMuteButton:t,renderVolumeSlider:n})=>{let[i,a]=o.Xp.usePlayerMutedState(),[l,u]=o.Xp.useMediaVolumeState(),[p,m]=(0,r.useState)(!1),h=(0,r.useRef)(null),f=(0,r.useRef)(null),y=R(h,!1),g=(0,r.useCallback)(()=>{setTimeout(()=>{f.current&&document.activeElement!==f.current&&m(!1)},10)},[]),b=0===l,v=(0,r.useCallback)(()=>{if(b){u(1),a(!1);return}a(e=>!e)},[b,a,u]),x=(0,r.useMemo)(()=>({display:"inline-flex",background:"none",border:"none",justifyContent:"center",alignItems:"center",touchAction:"none",...e&&{position:"relative"}}),[e]),w=(0,r.useMemo)(()=>({display:"inline",width:25,height:25,cursor:"pointer",appearance:"none",background:"none",border:"none",padding:0}),[]),E=(0,r.useCallback)(({muted:e,volume:t})=>{let n=e||0===t;return(0,s.jsx)("button",{"aria-label":n?"Unmute sound":"Mute sound",title:n?"Unmute sound":"Mute sound",onClick:v,onBlur:g,onFocus:()=>m(!0),style:w,type:"button",children:n?(0,s.jsx)(d,{}):(0,s.jsx)(c,{})})},[g,v,w]),C=(0,r.useMemo)(()=>t?t({muted:i,volume:l}):E({muted:i,volume:l}),[i,l,E,t]),F=(0,r.useMemo)(()=>(p||y)&&!i&&!o.Xp.isIosSafari()?(n??(e=>(0,s.jsx)(_,{...e})))({isVertical:e,volume:l,onBlur:()=>m(!1),inputRef:f,setVolume:u}):null,[e,p,y,i,l,n,u]);return(0,s.jsxs)("div",{ref:h,style:x,children:[C,F]})},J={height:30,paddingRight:15,paddingLeft:12,display:"flex",flexDirection:"row",alignItems:"center"},K={width:22,display:"flex",alignItems:"center"},Y={width:14,height:14,color:"black"},G=()=>(0,s.jsx)("svg",{viewBox:"0 0 512 512",style:Y,children:(0,s.jsx)("path",{fill:"currentColor",d:"M435.848 83.466L172.804 346.51l-96.652-96.652c-4.686-4.686-12.284-4.686-16.971 0l-28.284 28.284c-4.686 4.686-4.686 12.284 0 16.971l133.421 133.421c4.686 4.686 12.284 4.686 16.971 0l299.813-299.813c4.686-4.686 4.686-12.284 0-16.971l-28.284-28.284c-4.686-4.686-12.284-4.686-16.97 0z"})}),Z=({rate:e,onSelect:t,selectedRate:n,keyboardSelectedRate:o})=>{let i,a=(0,r.useCallback)(n=>{n.stopPropagation(),n.preventDefault(),t(e)},[t,e]),[l,u]=(0,r.useState)(!1),d=(0,r.useCallback)(()=>{u(!0)},[]),c=(0,r.useCallback)(()=>{u(!1)},[]),p=o===e,m=(0,r.useMemo)(()=>({...J,backgroundColor:l||p?"#eee":"transparent"}),[l,p]);return(0,s.jsxs)("div",{onPointerEnter:d,onPointerLeave:c,tabIndex:0,style:m,onClick:a,children:[(0,s.jsx)("div",{style:K,children:e===n?(0,s.jsx)(G,{}):null}),(i=e.toString()).includes(".")?i:i+".0","x"]},e)},Q=({setIsComponentVisible:e,playbackRates:t,canvasSize:n})=>{let{setPlaybackRate:i,playbackRate:a}=o.Xp.usePlaybackRate(),[l,u]=(0,r.useState)(a);(0,r.useEffect)(()=>{let n=n=>{if(n.preventDefault(),"ArrowUp"===n.key){let e=t.findIndex(e=>e===l);0!==e&&(-1===e?u(t[0]):u(t[e-1]))}else if("ArrowDown"===n.key){let e=t.findIndex(e=>e===l);if(e===t.length-1)return;-1===e?u(t[t.length-1]):u(t[e+1])}else"Enter"===n.key&&(i(l),e(!1))};return window.addEventListener("keydown",n),()=>{window.removeEventListener("keydown",n)}},[t,l,i,e]);let d=(0,r.useCallback)(t=>{i(t),e(!1)},[e,i]),c=(0,r.useMemo)(()=>({position:"absolute",right:0,width:125,maxHeight:n.height-70-35,bottom:35,background:"#fff",borderRadius:4,overflow:"auto",color:"black",textAlign:"left"}),[n.height]);return(0,s.jsx)("div",{style:c,children:t.map(e=>(0,s.jsx)(Z,{selectedRate:a,onSelect:d,rate:e,keyboardSelectedRate:l},e))})}
56,ee={fontSize:13,fontWeight:"bold",color:"white",border:"2px solid white",borderRadius:20,paddingLeft:8,paddingRight:8,paddingTop:2,paddingBottom:2},et={appearance:"none",backgroundColor:"transparent",border:"none",cursor:"pointer",paddingLeft:0,paddingRight:0,paddingTop:6,paddingBottom:6,height:37,display:"inline-flex",marginBottom:0,marginTop:0,alignItems:"center"},en={...et,position:"relative"},er=({playbackRates:e,canvasSize:t})=>{let{ref:n,isComponentVisible:i,setIsComponentVisible:a}=function(e){let[t,n]=(0,r.useState)(e),s=(0,r.useRef)(null);return(0,r.useEffect)(()=>{let e=e=>{s.current&&!s.current.contains(e.target)&&n(!1)};return document.addEventListener("pointerup",e,!0),()=>{document.removeEventListener("pointerup",e,!0)}},[]),{ref:s,isComponentVisible:t,setIsComponentVisible:n}}(!1),{playbackRate:l}=o.Xp.usePlaybackRate(),u=(0,r.useCallback)(e=>{e.stopPropagation(),e.preventDefault(),a(e=>!e)},[a]);return(0,s.jsx)("div",{ref:n,children:(0,s.jsxs)("button",{type:"button","aria-label":"Change playback rate",style:en,onClick:u,children:[(0,s.jsxs)("div",{style:ee,children:[l,"x"]}),i&&(0,s.jsx)(Q,{canvasSize:t,playbackRates:e,setIsComponentVisible:a})]})})},es=(e,t,n)=>Math.round((0,o.GW)(e,[0,n],[0,t-1],{extrapolateLeft:"clamp",extrapolateRight:"clamp"})),eo={userSelect:"none",WebkitUserSelect:"none",paddingTop:4,paddingBottom:4,boxSizing:"border-box",cursor:"pointer",position:"relative",touchAction:"none"},ei={height:5,backgroundColor:"rgba(255, 255, 255, 0.25)",width:"100%",borderRadius:2.5},ea=({durationInFrames:e,onSeekEnd:t,onSeekStart:n,inFrame:i,outFrame:a})=>{let l=(0,r.useRef)(null),u=R(l,!1),d=I(l,{triggerOnWindowResize:!0,shouldApplyCssTransforms:!0}),{seek:c,play:p,pause:m,isPlaying:h}=z(),f=o.Xp.Timeline.useTimelinePosition(),[y,g]=(0,r.useState)({dragging:!1}),b=d?.width??0,v=(0,r.useCallback)(t=>{if(0!==t.button)return;let r=l.current?.getBoundingClientRect().left,s=es(t.clientX-r,e,b),o=h();m(),c(s),g({dragging:!0,wasPlaying:o}),n()},[e,b,h,m,c,n]),x=(0,r.useCallback)(t=>{if(!d)throw Error("Player has no size");if(!y.dragging)return;let n=l.current?.getBoundingClientRect().left;c(es(t.clientX-n,e,d.width))},[y.dragging,e,c,d]),w=(0,r.useCallback)(()=>{g({dragging:!1}),y.dragging&&(y.wasPlaying?p():m(),t())},[y,t,m,p]);(0,r.useEffect)(()=>{if(!y.dragging)return;let e=(e=>{let t=e;for(;t.parentElement;)t=t.parentElement;return t})(l.current);return e.addEventListener("pointermove",x),e.addEventListener("pointerup",w),()=>{e.removeEventListener("pointermove",x),e.removeEventListener("pointerup",w)}},[y.dragging,x,w]);let E=(0,r.useMemo)(()=>({height:12,width:12,borderRadius:6,position:"absolute",top:.5,backgroundColor:"white",left:Math.max(0,f/Math.max(1,e-1)*b-6),boxShadow:"0 0 2px black",opacity:Number(u||y.dragging)}),[u,y.dragging,e,f,b]),C=(0,r.useMemo)(()=>({height:5,backgroundColor:"rgba(255, 255, 255, 1)",width:(f-(i??0))/(e-1)*b,marginLeft:(i??0)/(e-1)*b,borderRadius:2.5}),[e,f,i,b]),F=(0,r.useMemo)(()=>({height:5,backgroundColor:"rgba(255, 255, 255, 0.25)",width:((a??e-1)-(i??0))/(e-1)*100+"%",marginLeft:(i??0)/(e-1)*100+"%",borderRadius:2.5,position:"absolute"}),[e,i,a]);return(0,s.jsxs)("div",{ref:l,onPointerDown:v,style:eo,children:[(0,s.jsxs)("div",{style:ei,children:[(0,s.jsx)("div",{style:F}),(0,s.jsx)("div",{style:C})]}),(0,s.jsx)("div",{style:E})]})},el=e=>{let t=Math.floor(e/60),n=Math.floor(e-60*t);return`${String(t)}:${String(n).padStart(2,"0")}`},eu=({durationInFrames:e,maxTimeLabelWidth:t,fps:n})=>{let i=o.Xp.Timeline.useTimelinePosition(),a=(0,r.useMemo)(()=>({color:"white",fontFamily:"sans-serif",fontSize:14,maxWidth:null===t?void 0:t,overflow:"hidden",textOverflow:"ellipsis"}),[t]);return(0,s.jsxs)("div",{style:a,children:[el((i===e-1?i+1:i)/n)," / ",el(e/n)]})},ed=[0,8.1,15.5,22.5,29,35.3,41.2,47.1,52.9,58.8,64.7,71,77.5,84.5,91.9],ec=1/.7,ep={boxSizing:"border-box",position:"absolute",bottom:0,width:"100%",paddingTop:40,paddingBottom:10,backgroundImage:`linear-gradient(to bottom,${[0,.013,.049,.104,.175,.259,.352,.45,.55,.648,.741,.825,.896,.951,.987].map((e,t)=>`hsla(0, 0%, 0%, ${e}) ${ed[t]*ec}%`).join(", ")}, hsl(0, 0%, 0%) 100%)`,backgroundSize:"auto 145px",display:"flex",paddingRight:12,paddingLeft:12,flexDirection:"column",transition:"opacity 0.3s"},em={display:"flex",flexDirection:"row",width:"100%",alignItems:"center",justifyContent:"center",userSelect:"none",WebkitUserSelect:"none"},eh={display:"flex",flexDirection:"row",userSelect:"none",WebkitUserSelect:"none",alignItems:"center"},ef={width:12},ey={height:8},eg={flex:1},eb={},ev=({durationInFrames:e,isFullscreen:t,fps:n,showVolumeControls:o,onFullscreenButtonClick:i,allowFullscreen:a,onExitFullscreenButtonClick:l,spaceKeyToPlayOrPause:d,onSeekEnd:c,onSeekStart:p,inFrame:m,outFrame:h,initiallyShowControls:f,canvasSize:y,renderPlayPauseButton:g,renderFullscreenButton:b,alwaysShowControls:v,showPlaybackRateControl:x,containerRef:w,buffering:E,hideControlsWhenPointerDoesntMove:C,onPointerDown:F,onDoubleClick:S,renderMuteButton:j,renderVolumeSlider:k,playing:P,toggle:z,renderCustomControls:M})=>{let T=(0,r.useRef)(null),[A,L]=(0,r.useState)(!1),B=R(w,C),{maxTimeLabelWidth:I,displayVerticalVolumeSlider:N}=(({allowFullscreen:e,playerWidth:t})=>(0,r.useMemo)(()=>{let n=50+16*!!e+24+20,r=Math.max(t-n,0),s=r-O,o=t<(s<O?r:s)+n+O;return{maxTimeLabelWidth:0===r?null:r,displayVerticalVolumeSlider:o}},[e,t]))({allowFullscreen:a,playerWidth:y?.width??0}),[$,X]=(0,r.useState)(()=>
56{if("boolean"==typeof f)return f;if("number"==typeof f){if(f%1!=0)throw Error("initiallyShowControls must be an integer or a boolean");if(Number.isNaN(f))throw Error("initiallyShowControls must not be NaN");if(!Number.isFinite(f))throw Error("initiallyShowControls must be finite");if(f<=0)throw Error("initiallyShowControls must be a positive integer");return f}throw TypeError("initiallyShowControls must be a number or a boolean")}),q=(0,r.useMemo)(()=>{let e=B||!P||$||v;return{...ep,opacity:Number(e)}},[B,$,P,v]);(0,r.useEffect)(()=>{T.current&&d&&T.current.focus({preventScroll:!0})},[P,d]),(0,r.useEffect)(()=>{L(("u">typeof document&&(document.fullscreenEnabled||document.webkitFullscreenEnabled))??!1)},[]),(0,r.useEffect)(()=>{if(!1===$)return;let e=setTimeout(()=>{X(!1)},!0===$?2e3:$);return()=>{clearInterval(e)}},[$]);let V=(0,r.useMemo)(()=>{if(!0===x)return[.5,.8,1,1.2,1.5,1.8,2,2.5,3];if(Array.isArray(x)){for(let e of x){if("number"!=typeof e)throw Error("Every item in showPlaybackRateControl must be a number");if(e<=0)throw Error("Every item in showPlaybackRateControl must be positive")}return x}return null},[x]),H=M?M():null,W=(0,r.useRef)(null),_=(0,r.useRef)(null),J=(0,r.useCallback)(e=>{(e.target===W.current||e.target===_.current)&&F?.(e)},[F]),K=(0,r.useCallback)(e=>{(e.target===W.current||e.target===_.current)&&S?.(e)},[S]);return(0,s.jsxs)("div",{ref:W,style:q,onPointerDown:J,onDoubleClick:K,children:[(0,s.jsxs)("div",{ref:_,style:em,children:[(0,s.jsxs)("div",{style:eh,children:[(0,s.jsx)("button",{ref:T,type:"button",style:et,onClick:z,"aria-label":P?"Pause video":"Play video",title:P?"Pause video":"Play video",children:null===g?(0,s.jsx)(D,{buffering:E,playing:P}):g({playing:P,isBuffering:E})??(0,s.jsx)(D,{buffering:E,playing:P})}),o?(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)("div",{style:ef}),(0,s.jsx)(U,{renderMuteButton:j,renderVolumeSlider:k,displayVerticalVolumeSlider:N})]}):null,(0,s.jsx)("div",{style:ef}),(0,s.jsx)(eu,{durationInFrames:e,fps:n,maxTimeLabelWidth:I}),(0,s.jsx)("div",{style:ef})]}),(0,s.jsx)("div",{style:eg}),H,H&&V&&y?(0,s.jsx)("div",{style:ef}):null,V&&y&&(0,s.jsx)(er,{canvasSize:y,playbackRates:V}),V&&A&&a?(0,s.jsx)("div",{style:ef}):null,(0,s.jsx)("div",{style:eb,children:A&&a?(0,s.jsx)("button",{type:"button","aria-label":t?"Exit fullscreen":"Enter Fullscreen",title:t?"Exit fullscreen":"Enter Fullscreen",style:et,onClick:t?l:i,children:null===b?(0,s.jsx)(u,{isFullscreen:t}):b({isFullscreen:t})}):null})]}),(0,s.jsx)("div",{style:ey}),(0,s.jsx)(ea,{onSeekEnd:c,onSeekStart:p,durationInFrames:e,inFrame:m,outFrame:h})]})},ex="u"<typeof document,ew=r.version.split(".")[0];if("0"===ew)throw Error(`Version ${ew} of "react" is not supported by Remotion`);var eE=parseInt(ew,10)>=18,eC=(0,r.forwardRef)(({controls:e,style:t,loop:n,autoPlay:i,allowFullscreen:a,inputProps:l,clickToPlay:u,showVolumeControls:d,doubleClickToFullscreen:c,spaceKeyToPlayOrPause:p,errorFallback:m,playbackRate:h,renderLoading:f,renderPoster:y,className:E,moveToBeginningWhenEnded:C,showPosterWhenUnplayed:F,showPosterWhenEnded:S,showPosterWhenPaused:j,showPosterWhenBuffering:k,showPosterWhenBufferingAndPaused:P,inFrame:R,outFrame:M,initiallyShowControls:T,renderFullscreen:L,renderPlayPauseButton:B,renderMuteButton:N,renderVolumeSlider:X,renderCustomControls:q,alwaysShowControls:V,showPlaybackRateControl:H,posterFillMode:D,bufferStateDelayInMilliseconds:_,hideControlsWhenPointerDoesntMove:O,overflowVisible:U,browserMediaControlsBehavior:J,overrideInternalClassName:K,noSuspense:Y},G)=>{var Z;let Q,ee,et,en,er,es,eo,ei,ea=o.Xp.useUnsafeVideoConfig(),el=o.Xp.useVideo(),eu=(0,r.useRef)(null),ed=I(eu,{triggerOnWindowResize:!1,shouldApplyCssTransforms:!1}),[ec,ep]=(0,r.useState)(!1),[em,eh]=(0,r.useState)(i),[ef,ey]=(0,r.useState)(()=>!1),[eg,eb]=(0,r.useState)(!1),[ew,eC]=(0,r.useState)(!1),eF=(0,r.useMemo)(()=>!("u"<typeof document)&&!!(document.fullscreenEnabled||document.webkitFullscreenEnabled),[]),eS=z(),ej=o.Xp.usePlaying(),ek=o.Xp.Timeline.useTimelinePosition(),eP=(0,r.useCallback)(e=>{eS.isPlaying()||(eC(!0),eS.play(e))},[eS]),{playerMuted:eR,mediaVolume:ez}=(0,r.useContext)(o.Xp.MediaVolumeContext),eM=(0,r.useContext)(w);(0,r.useEffect)(()=>{eS.emitter.dispatchVolumeChange(ez)},[eS.emitter,ez]);let eT=eR||0===ez;(0,r.useEffect)(()=>{eS.emitter.dispatchMuteChange({isMuted:eT})},[eS.emitter,eT]),A({loop:n,playbackRate:h,moveToBeginningWhenEnded:C,inFrame:R,outFrame:M,getCurrentFrame:eS.getCurrentFrame,browserMediaControl
56sBehavior:J,muted:eT}),(0,r.useEffect)(()=>{ec&&!ej&&(ep(!1),eP())},[ec,eP,ej]),(0,r.useEffect)(()=>{let{current:e}=eu;if(!e)return;let t=()=>{ey(document.fullscreenElement===e||document.webkitFullscreenElement===e)};return document.addEventListener("fullscreenchange",t),document.addEventListener("webkitfullscreenchange",t),()=>{document.removeEventListener("fullscreenchange",t),document.removeEventListener("webkitfullscreenchange",t)}},[]);let eA=(0,r.useCallback)(e=>{eS.isPlaying()?eS.pause():eP(e)},[eP,eS]),eL=(0,r.useCallback)(()=>{if(!a)throw Error("allowFullscreen is false");if(!eF)throw Error("Browser doesnt support fullscreen");if(!eu.current)throw Error("No player ref found");eu.current.webkitRequestFullScreen?eu.current.webkitRequestFullScreen():eu.current.requestFullscreen()},[a,eF]),eB=(0,r.useCallback)(()=>{document.webkitExitFullscreen?document.webkitExitFullscreen():document.exitFullscreen()},[]);(0,r.useEffect)(()=>{let{current:e}=eu;if(!e)return;let t=()=>{let e=document.webkitFullscreenElement??document.fullscreenElement;e&&e===eu.current?eS.emitter.dispatchFullscreenChange({isFullscreen:!0}):eS.emitter.dispatchFullscreenChange({isFullscreen:!1})};return e.addEventListener("webkitfullscreenchange",t),e.addEventListener("fullscreenchange",t),()=>{e.removeEventListener("webkitfullscreenchange",t),e.removeEventListener("fullscreenchange",t)}},[eS.emitter]);let eI=ea?.durationInFrames??1,eN=(0,r.useMemo)(()=>ea&&ed?g({canvasSize:ed,compositionHeight:ea.height,compositionWidth:ea.width,previewSize:"auto"}):null,[ed,ea]),e$=eN?.scale??1,eX=(0,r.useRef)(!1);(0,r.useEffect)(()=>{if(!eX.current){eX.current=!0;return}eS.emitter.dispatchScaleChange(e$)},[eS.emitter,e$]);let{setMediaVolume:eq,setPlayerMuted:eV}=(0,r.useContext)(o.Xp.SetMediaVolumeContext),[eH,eW]=(0,r.useState)(!1);(0,r.useEffect)(()=>{let e=null,t=!1,n=()=>{t=!1,requestAnimationFrame(()=>{0===_?eW(!0):e=setTimeout(()=>{t||eW(!0)},_)})},r=()=>{requestAnimationFrame(()=>{t=!0,eW(!1),e&&clearTimeout(e)})};return eS.emitter.addEventListener("waiting",n),eS.emitter.addEventListener("resume",r),()=>{eS.emitter.removeEventListener("waiting",n),eS.emitter.removeEventListener("resume",r),eW(!1),e&&clearTimeout(e),t=!0}},[_,eS.emitter]),(0,r.useImperativeHandle)(G,()=>{let e={play:eP,pause:()=>{ep(!1),eS.pause()},toggle:eA,getContainerNode:()=>eu.current,getCurrentFrame:eS.getCurrentFrame,isPlaying:eS.isPlaying,seekTo:e=>{let t=eI-1,r=Math.max(0,Math.min(t,e));eS.isPlaying()&&(ep(r!==t||n),eS.pause()),r!==t||n||eS.emitter.dispatchEnded(),eS.seek(r)},isFullscreen:()=>{let{current:e}=eu;return!!e&&(document.fullscreenElement===e||document.webkitFullscreenElement===e)},requestFullscreen:eL,exitFullscreen:eB,getVolume:()=>eR?0:ez,setVolume:e=>{if("number"!=typeof e)throw TypeError(`setVolume() takes a number, got value of type ${typeof e}`);if(isNaN(e))throw TypeError("setVolume() got a number that is NaN. Volume must be between 0 and 1.");if(e<0||e>1)throw TypeError(`setVolume() got a number that is out of range. Must be between 0 and 1, got ${e}`);eq(e)},isMuted:()=>eT,mute:()=>{eV(!0)},unmute:()=>{eV(!1)},getScale:()=>e$,pauseAndReturnToPlayStart:()=>{eS.pauseAndReturnToPlayStart()}};return Object.assign(eS.emitter,e)},[eI,eB,n,eR,eT,ez,eS,eP,eL,eV,eq,eA,e$]);let eD=el?el.component:null,e_=(0,r.useMemo)(()=>b({canvasSize:ed,config:ea,style:t,overflowVisible:U,layout:eN}),[ed,ea,eN,U,t]),eO=(0,r.useMemo)(()=>x({config:ea,layout:eN,scale:e$,overflowVisible:U}),[ea,eN,U,e$]),eU=(0,r.useMemo)(()=>v({config:ea,layout:eN,scale:e$,overflowVisible:U}),[ea,eN,U,e$]),eJ=eS.pause,eK=eS.emitter.dispatchError,eY=(0,r.useCallback)(e=>{eJ(),eK(e)},[eK,eJ]),eG=(0,r.useCallback)(e=>{e.stopPropagation(),eL()},[eL]),eZ=(0,r.useCallback)(e=>{e.stopPropagation(),eB()},[eB]),eQ=(0,r.useCallback)(e=>{(e instanceof MouseEvent?2===e.button:e.nativeEvent.button)||eA(e)},[eA]),e0=(0,r.useCallback)(()=>{eb(!0)},[]),e1=(0,r.useCallback)(()=>{eb(!1)},[]),e2=(0,r.useCallback)(()=>{ef?eB():eL()},[eB,ef,eL]),{handlePointerDown:e5,handleDoubleClick:e8}=(Z=c&&a&&eF,Q=(0,r.useRef)([]),ee=(0,r.useCallback)(e=>{Q.current=[...Q.current,e]},[]),et=(0,r.useCallback)(e=>{Q.current=Q.current.filter(t=>t!==e)},[]),en=(0,r.useCallback)(()=>Q.current.map(e=>e.cancel()),[]),er=(0,r.useMemo)(()=>({appendPendingPromise:ee,removePendingPromise:et,clearPendingPromises:en}),[ee,en,et]),es=(0,r.useCallback)(async e=>{var t;let n;if(e instanceof PointerEvent?"touch"===e.pointerType:"touch"===e.nativeEvent.pointerType)return void eQ(e);er.clearPendingPromises();let r=(t=new Promise(e=>setTimeout(e,200)),n=!1,{promise:new Promise((e,r)=>{t.then(t=>{n?r({isCanceled:n,value:t}):e(t)}).catch(e=>{r({isCanceled:n,error:e})})}),cancel:()=>{n=!0}});er.appendPendingPromise(r);try{await r.promise,er.removePendingPromise(r),eQ(e)}catch(e){if(er.removePendingPromise(r),!e.isCanceled)throw e.error}},[er,eQ]),eo=(0,r.useCallback)(()=>{document.addEventListener("pointerup",e=>{es(e)},{once:!0})},[es]),ei=(0,r.useCallback)(()=>{er.clearPendingPromises(),e2()},[er,e2]),(0,r.useMemo)(()=>Z?{handlePointerDown:eo,handleDoubleClick:ei}:{handlePointerDown:eQ,handleDoubleClick:()=>{}},[Z,ei,eo,eQ]));(0,r.useEffect)(()=>{em&&(eC(!0),eS.playAsAutoPlay(),eh(!1))},[eS,em]);let e4=(0,r.useMemo)(()=>f?f({height:e_.height,width:e_.width,isBuffering:eH}):null,[e_.height,e_.width,f,eH]),e3=(0,r.useMemo)(()=>({type:"scale",scale:e$}),[e$]);if(!ea)return null;let e6=y?y({height:"player-size"===D?e_.height:ea.height,width:"player-size"===D?e_.width:ea.width,isBuffering:eH}):null;if(void 0===e6)throw TypeError("renderPoster() must return a React element, but undefined was returned");let e7=e6&&[j&&!ej&&!eg,S&&ek===eI-1&&!ej,F&&!ew&&!ej,k&&eH&&ej,P&&eH&&!ej].some(Boolean),{left:e9,top:te,width:tt,height:tn,...tr}=eO,ts=(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)("div",{style:eO,onPointerDown:u?e5:void 0,onDoubleClick:c?e8:void 0,children:[(0,s.jsxs)("div",{style:eU,className:K??"__remotion-player",children:[eD?(0,s.jsx)($,{onError:eY,errorFallback:m,children:(0,s.jsx)(o.Xp.CurrentScaleContext.Provider,{value:e3,children:(0,s.jsx)(w.Provider,{value:null,children:(0,s.jsx)(eD,{...el?.props??{},...l??{}})})})}):null,e7&&"composition-size"===D?(0,s.jsx)("div",{style:{...tr,width:ea.width,height:ea.height},onPointerDown:u?e5:void 0,onDoubleClick:c?e8:void 0,children:e6}):null]}),(0,s.jsx)(W,{}),eM]}),e7&&"player-size"===D?(0,s.jsx)("div",{style:eO,onPointerDown:u?e5:void 0,onDoubleClick:c?e8:void 0,children:e6}):null,e?(0,s.jsx)(ev,{fps:ea.fps,playing:ej,toggle:eA,durationInFrames:ea.durationInFrames,containerRef:eu,onFullscreenButtonClick:eG,isFullscreen:ef,allowFullscreen:a,showVolumeControls:d,onExitFullscreenButtonClick:eZ,spaceKeyToPlayOrPause:p,onSeekEnd:e1,onSeekStart:e0,inFrame:R,outFrame:M,initiallyShowControls:T,canvasSize:ed,renderFullscreenButton:L,renderPlayPauseButton:B,alwaysShowControls:V,showPlaybackRateControl:H,buffering:eH,hideControlsWhenPointerDoesntMove:O,onDoubleClick:c?e8:void 0,onPointerDown:u?e5:void 0,renderMuteButton:N,renderVolumeSlider:X,renderCustomControls:q}):null]});
56return Y||ex&&!eE?(0,s.jsx)("div",{ref:eu,style:e_,className:E,children:ts}):(0,s.jsx)("div",{ref:eu,style:e_,className:E,children:(0,s.jsx)(r.Suspense,{fallback:e4,children:ts})})}),eF="remotion.volumePreference",eS="player-comp",ej=({children:e,timelineContext:t,playbackRateContext:n,fps:i,compositionHeight:a,compositionWidth:l,durationInFrames:u,component:d,numberOfSharedAudioTags:c,initiallyMuted:p,logLevel:m,audioLatencyHint:h,sampleRate:f,volumePersistenceKey:y,initialVolume:g,inputProps:b,audioEnabled:v,_experimentalKeepAudioContextAlive:x})=>{let w=void 0===g,E=(0,r.useMemo)(()=>({compositions:[{component:d,durationInFrames:u,height:a,width:l,fps:i,id:eS,order:null,folderName:null,parentFolderName:null,schema:null,calculateMetadata:null,stack:null}],folders:[],currentAssetMetadata:null,currentCompositionMetadata:{defaultCodec:null,defaultOutName:null,defaultPixelFormat:null,defaultProResProfile:null,defaultSampleRate:null,defaultVideoImageFormat:null,durationInFrames:u,fps:i,height:a,width:l,props:b},canvasContent:{type:"composition",compositionId:"player-comp"}}),[d,u,a,l,i,b]),[C,F]=(0,r.useState)(()=>p),[S,j]=(0,r.useState)(()=>w?(e=>{if("u"<typeof window)return 1;try{let t=window.localStorage.getItem(e??eF);return t?Number(t):1}catch{return 1}})(y??null):g),k=(0,r.useMemo)(()=>({playerMuted:C,mediaVolume:S}),[C,S]),P=(0,r.useRef)(!1),R=P.current||v&&!C&&S>0;P.current=R;let z=(0,r.useCallback)(e=>{j(e),w&&((e,t,n)=>{if("u">typeof window)try{window.localStorage.setItem(n??eF,String(e))}catch(e){o.Xp.Log.error({logLevel:t,tag:null},"Could not persist volume",e)}})(e,m,y??null)},[w,m,y]),M=(0,r.useMemo)(()=>({setPlayerMuted:F,setMediaVolume:z}),[z]),T=(0,r.useMemo)(()=>({logLevel:m,mountTime:Date.now()}),[m]),A=(0,r.useMemo)(()=>({isPlayer:!0,isRendering:!1,isStudio:!1,isClientSideRendering:!1,isReadOnlyStudio:!1}),[]);return(0,s.jsx)(o.Xp.RemotionEnvironmentContext.Provider,{value:A,children:(0,s.jsx)(o.Xp.LogLevelContext.Provider,{value:T,children:(0,s.jsx)(o.Xp.CanUseRemotionHooksProvider,{children:(0,s.jsx)(o.Xp.AbsoluteTimeContext.Provider,{value:t,children:(0,s.jsx)(o.Xp.PlaybackRateContext.Provider,{value:n,children:(0,s.jsx)(o.Xp.TimelineContext.Provider,{value:t,children:(0,s.jsx)(o.Xp.CompositionManager.Provider,{value:E,children:(0,s.jsx)(o.Xp.PrefetchProvider,{children:(0,s.jsx)(o.Xp.DurationsContextProvider,{children:(0,s.jsx)(o.Xp.MediaVolumeContext.Provider,{value:k,children:(0,s.jsx)(o.Xp.SetMediaVolumeContext.Provider,{value:M,children:(0,s.jsx)(o.Xp.BufferingProvider,{children:(0,s.jsx)(o.Xp.SharedAudioContextProvider,{audioLatencyHint:h,audioEnabled:R,previewSampleRate:f,_experimentalKeepAudioContextAlive:x,children:(0,s.jsx)(o.Xp.SharedAudioTagsContextProvider,{numberOfAudioTags:c,children:e})})})})})})})})})})})})})})},ek=!1,eP=(e,t)=>{if(null==e)return e??null;if("number"!=typeof e)throw TypeError(`"${t}" must be a number, but is ${JSON.stringify(e)}`);if(Number.isNaN(e))throw TypeError(`"${t}" must not be NaN, but is ${JSON.stringify(e)}`);if(!Number.isFinite(e))throw TypeError(`"${t}" must be finite, but is ${JSON.stringify(e)}`);if(e%1!=0)throw TypeError(`"${t}" must be an integer, but is ${JSON.stringify(e)}`);return e},eR=i.NoReactInternals.validateFps,ez=i.NoReactInternals.validateDimension,eM=i.NoReactInternals.validateDurationInFrames,eT=i.NoReactInternals.validateDefaultAndInputProps,eA=({onTimelineSequenceChange:e})=>{let{sequences:t}=r.useContext(o.Xp.SequenceManager);return(0,r.useEffect)(()=>{e(t)},[e,t]),null},eL=(0,r.forwardRef)(({durationInFrames:e,compositionHeight:t,compositionWidth:n,fps:a,inputProps:l,style:u,controls:d=!1,loop:c=!1,autoPlay:p=!1,showVolumeControls:m=!0,allowFullscreen:h=!0,clickToPlay:f,doubleClickToFullscreen:y=!1,spaceKeyToPlayOrPause:g=!0,moveToBeginningWhenEnded:b=!0,numberOfSharedAudioTags:v=5*!i.NoReactInternals.ENABLE_V5_BREAKING_CHANGES,errorFallback:x=()=>"\u26A0\uFE0F",playbackRate:w=1,renderLoading:E,className:C,showPosterWhenUnplayed:F,showPosterWhenEnded:S,showPosterWhenPaused:j,showPosterWhenBuffering:R,showPosterWhenBufferingAndPaused:z,initialFrame:M,renderPoster:T,inFrame:A,outFrame:L,initiallyShowControls:B,renderFullscreenButton:I,renderPlayPauseButton:N,renderVolumeSlider:$,renderCustomControls:X,alwaysShowControls:q=!1,initiallyMuted:V=!1,showPlaybackRateControl:H=!1,posterFillMode:W="player-size",bufferStateDelayInMilliseconds:D,hideControlsWhenPointerDoesntMove:_=!0,overflowVisible:O=!1,renderMuteButton:U,browserMediaControl
56sBehavior:J,overrideInternalClassName:K,logLevel:Y="info",noSuspense:G,acknowledgeRemotionLicense:Z,audioLatencyHint:Q="playback",sampleRate:ee=48e3,volumePersistenceKey:et,initialVolume:en,_experimentalKeepAudioContextAlive:er=!1,...es},eo)=>{"u">typeof window&&(window.remotion_isPlayer=!0);let ei=r.useContext(P);if(void 0!==es.defaultProps)throw Error("The <Player /> component does not accept `defaultProps`, but some were passed. Use `inputProps` instead.");let ea="component"in es?es.component:null;if(ea?.type===o.BO)throw TypeError("'component' should not be an instance of <Composition/>. Pass the React component directly, and set the duration, fps and dimensions as separate props. See https://www.remotion.dev/docs/player/examples for an example.");if(ea===o.BO)throw TypeError("'component' must not be the 'Composition' component. Pass your own React component directly, and set the duration, fps and dimensions as separate props. See https://www.remotion.dev/docs/player/examples for an example.");(0,r.useState)(()=>{Z||!ek&&(ek=!0,o.Xp.Log.warn({logLevel:Y,tag:null},"Note: Some companies are required to obtain a license to use Remotion. See: https://remotion.dev/license\nPass the `acknowledgeRemotionLicense` prop to `<Player />` function to make this message disappear."))});let el=o.Xp.useLazyComponent({compProps:es,componentName:"Player",noSuspense:!!G});(({initialFrame:e,durationInFrames:t})=>{if("number"!=typeof t)throw Error(`\`durationInFrames\` must be a number, but is ${JSON.stringify(t)}`);if(void 0!==e){if("number"!=typeof e)throw Error(`\`initialFrame\` must be a number, but is ${JSON.stringify(e)}`);if(Number.isNaN(e))throw Error("`initialFrame` must be a number, but is NaN");if(!Number.isFinite(e))throw Error("`initialFrame` must be a number, but is Infinity");if(e%1!=0)throw Error(`\`initialFrame\` must be an integer, but is ${JSON.stringify(e)}`);if(e>t-1)throw Error(`\`initialFrame\` must be less or equal than \`durationInFrames - 1\`, but is ${JSON.stringify(e)}`)}})({initialFrame:M,durationInFrames:e});let[eu,ed]=(0,r.useState)(()=>({[eS]:M??0})),ec=o.Xp.useTimelineSeek(ed),ep=(0,r.useRef)(eu);ep.current=eu;let em=(0,r.useRef)(null),eh=(0,r.useRef)([]),ef=(0,r.useMemo)(()=>
56o.Xp.createRuntimeValueStore({playing:!1}),[]),ey=(0,r.useMemo)(()=>o.Xp.createRuntimeValueStore({buffering:!1}),[]),eg=(0,r.useCallback)(()=>ef.store.getSnapshot().playing,[ef]),eb=(0,r.useCallback)(()=>ey.store.getSnapshot().buffering,[ey]),[ev,ex]=(0,r.useState)(w);if("number"!=typeof t)throw TypeError(`'compositionHeight' must be a number but got '${typeof t}' instead`);if("number"!=typeof n)throw TypeError(`'compositionWidth' must be a number but got '${typeof n}' instead`);if(ez(t,"compositionHeight","of the <Player /> component"),ez(n,"compositionWidth","of the <Player /> component"),eM(e,{component:"of the <Player/> component",allowFloats:!1}),eR(a,"as a prop of the <Player/> component",!1),eT(l,"inputProps",null),(({inFrame:e,durationInFrames:t,outFrame:n})=>{let r=eP(e,"inFrame"),s=eP(n,"outFrame");if(null!==r||null!==s){if(null!==r&&r>t-1)throw Error("inFrame must be less than (durationInFrames - 1), but is "+r);if(null!==s&&s>t-1)throw Error("outFrame must be less than (durationInFrames - 1), but is "+s);if(null!==r&&r<0)throw Error("inFrame must be greater than 0, but is "+r);if(null!==s&&s<=0)throw Error(`outFrame must be greater than 0, but is ${s}. If you want to render a single frame, use <Thumbnail /> instead.`);if(null!==s&&null!==r&&s<=r)throw Error("outFrame must be greater than inFrame, but is "+s+" <= "+r)}})({durationInFrames:e,inFrame:A,outFrame:L}),"boolean"!=typeof d&&void 0!==d)throw TypeError(`'controls' must be a boolean or undefined but got '${typeof d}' instead`);if("boolean"!=typeof p&&void 0!==p)throw TypeError(`'autoPlay' must be a boolean or undefined but got '${typeof p}' instead`);if("boolean"!=typeof c&&void 0!==c)throw TypeError(`'loop' must be a boolean or undefined but got '${typeof c}' instead`);if("boolean"!=typeof y&&void 0!==y)throw TypeError(`'doubleClickToFullscreen' must be a boolean or undefined but got '${typeof y}' instead`);if("boolean"!=typeof m&&void 0!==m)throw TypeError(`'showVolumeControls' must be a boolean or undefined but got '${typeof m}' instead`);if("boolean"!=typeof h&&void 0!==h)throw TypeError(`'allowFullscreen' must be a boolean or undefined but got '${typeof h}' instead`);if("boolean"!=typeof f&&void 0!==f)throw TypeError(`'clickToPlay' must be a boolean or undefined but got '${typeof f}' instead`);if("boolean"!=typeof g&&void 0!==g)throw TypeError(`'spaceKeyToPlayOrPause' must be a boolean or undefined but got '${typeof g}' instead`);if("number"!=typeof ee||!Number.isFinite(ee)||Number.isNaN(ee)||ee<=0||ee%1!=0)throw TypeError(`'sampleRate' must be a positive integer but got '${ee}' instead`);if(void 0!==en&&"number"!=typeof en)throw TypeError(`'initialVolume' must be a number or undefined but got '${typeof en}' instead`);if("number"==typeof en&&(!Number.isFinite(en)||Number.isNaN(en)||en<0||en>1))throw TypeError(`'initialVolume' must be between 0 and 1 but got '${en}' instead`);if("number"!=typeof v||v%1!=0||!Number.isFinite(v)||Number.isNaN(v)||v<0)throw TypeError(`'numberOfSharedAudioTags' must be an integer but got '${v}' instead`);if(void 0!==ev){if(ev>10)throw Error(`The highest possible playback rate is 10. You passed: ${ev}`);if(ev<-10)throw Error(`The lowest possible playback rate is -10. You passed: ${ev}`);if(0===ev)throw Error("A playback rate of 0 is not supported.")}(0,r.useEffect)(()=>{ex(w)},[w]),(0,r.useImperativeHandle)(eo,()=>em.current,[]),(0,r.useState)(()=>{o.Xp.playbackLogging({logLevel:Y,message:`[player] Mounting <Player>. User agent = ${"u"<typeof navigator?"server":navigator.userAgent}`,tag:"player",mountTime:Date.now()})});let ew=(0,r.useMemo)(()=>({frame:eu,isPlaying:eg,isInsideFreeze:!1,audioAndVideoTags:eh}),[eu,eg]),eE=(0,r.useMemo)(()=>({playbackRate:ev,setPlaybackRate:ex}),[ev]),eF=(0,r.useMemo)(()=>({setFrame:ed,seek:ec,setPlaying:e=>{let t=ef.store.getSnapshot().playing,n="function"==typeof e?e(t):e;t!==n&&ef.setSnapshot({playing:n})},setBuffering:e=>{eb()!==e&&ey.setSnapshot({buffering:e})},subscribePlaying:ef.store.subscribe,subscribeBuffering:ey.store.subscribe,isPlaying:eg,isBuffering:eb,frameRef:ep,audioAndVideoTags:eh}),[ey,ec,ed,ep,ef,eb,eg]);"u">typeof window&&(0,r.useLayoutEffect)(()=>{o.Xp.CSSUtils.injectCSS(o.Xp.CSSUtils.makeDefaultPreviewCSS(`.${K??"__remotion-player"}`,"#fff"))}
56,[K]);let eL=(0,r.useMemo)(()=>l??{},[l]),eB=(0,r.useMemo)(()=>J??{mode:"prevent-media-session"},[J]),eI=(0,s.jsx)(o.Xp.IsPlayerContextProvider,{children:(0,s.jsx)(o.Xp.SetTimelineContext.Provider,{value:eF,children:(0,s.jsx)(ej,{timelineContext:ew,playbackRateContext:eE,component:el,compositionHeight:t,compositionWidth:n,durationInFrames:e,fps:a,numberOfSharedAudioTags:v,initiallyMuted:V,logLevel:Y,audioLatencyHint:Q,sampleRate:ee,_experimentalKeepAudioContextAlive:er,volumePersistenceKey:et,initialVolume:en,inputProps:eL,audioEnabled:!0,children:(0,s.jsx)(k,{currentPlaybackRate:ev,children:(0,s.jsx)(eC,{ref:em,posterFillMode:W,renderLoading:E,autoPlay:!!p,loop:!!c,controls:!!d,errorFallback:x,style:u,inputProps:eL,allowFullscreen:!!h,moveToBeginningWhenEnded:!!b,clickToPlay:"boolean"==typeof f?f:!!d,showVolumeControls:!!m,doubleClickToFullscreen:!!y,spaceKeyToPlayOrPause:!!g,playbackRate:ev,className:C??void 0,showPosterWhenUnplayed:!!F,showPosterWhenEnded:!!S,showPosterWhenPaused:!!j,showPosterWhenBuffering:!!R,showPosterWhenBufferingAndPaused:!!z,renderPoster:T,inFrame:A??null,outFrame:L??null,initiallyShowControls:B??!0,renderFullscreen:I??null,renderPlayPauseButton:N??null,renderMuteButton:U??null,renderVolumeSlider:$??null,renderCustomControls:X??null,alwaysShowControls:q,showPlaybackRateControl:H,bufferStateDelayInMilliseconds:D??300,hideControlsWhenPointerDoesntMove:_,overflowVisible:O,browserMediaControlsBehavior:eB,overrideInternalClassName:K??void 0,noSuspense:!!G})})})})});return ei?(0,s.jsx)(o.Xp.SequenceRegistrationContext.Provider,{value:!0,children:(0,s.jsxs)(o.Xp.SequenceManagerProvider,{children:[(0,s.jsx)(eA,{onTimelineSequenceChange:ei}),eI]})}):eI}),eB=r.version.split(".")[0];if("0"===eB)throw Error(`Version ${eB} of "react" is not supported by Remotion`);var eI=parseInt(eB,10)>=18,eN=(0,r.forwardRef)(({style:e,inputProps:t,errorFallback:n,renderLoading:i,className:a,overflowVisible:l,noSuspense:u,overrideInternalClassName:d},c)=>{let p=o.Xp.useUnsafeVideoConfig(),m=o.Xp.useVideo(),h=(0,r.useRef)(null),f=I(h,{triggerOnWindowResize:!1,shouldApplyCssTransforms:!1}),y=(0,r.useMemo)(()=>p&&f?g({canvasSize:f,compositionHeight:p.height,compositionWidth:p.width,previewSize:"auto"}):null,[f,p]),w=y?.scale??1,E=(()=>{let e=(0,r.useContext)(C);if(!e)throw TypeError("Expected Player event emitter context");return(0,r.useMemo)(()=>({emitter:e}),[e])})();j(E.emitter),(0,r.useImperativeHandle)(c,()=>Object.assign(E.emitter,{getContainerNode:()=>h.current,getScale:()=>w}),[w,E.emitter]);let F=m?m.component:null,S=(0,r.useMemo)(()=>b({config:p,style:e,canvasSize:f,overflowVisible:l,layout:y}),[f,p,y,l,e]),k=(0,r.useMemo)(()=>x({config:p,layout:y,scale:w,overflowVisible:l}),[p,y,l,w]),P=(0,r.useMemo)(()=>v({config:p,layout:y,scale:w,overflowVisible:l}),[p,y,l,w]),R=(0,r.useCallback)(e=>{E.emitter.dispatchError(e)},[E.emitter]),z=(0,r.useMemo)(()=>i?i({height:S.height,width:S.width,isBuffering:!1}):null,[S.height,S.width,i]),M=(0,r.useMemo)(()=>({type:"scale",scale:w}),[w]);if(!p)return null;let T=(0,s.jsx)("div",{style:k,children:(0,s.jsx)("div",{style:P,className:d??"__remotion-player",children:F?(0,s.jsx)($,{onError:R,errorFallback:n,children:(0,s.jsx)(o.Xp.CurrentScaleContext.Provider,{value:M,children:(0,s.jsx)(F,{...m?.props??{},...t??{}})})}):null})});return u||ex&&!eI?(0,s.jsx)("div",{ref:h,style:S,className:a,children:T}):(0,s.jsx)("div",{ref:h,style:S,className:a,children:(0,s.jsx)(r.Suspense,{fallback:z,children:T})})}),e$=(0,r.forwardRef)(({frameToDisplay:e,style:t,inputProps:n,compositionHeight:i,compositionWidth:a,durationInFrames:l,fps:u,className:d,errorFallback:c=()=>"\u26A0\uFE0F",renderLoading:p,overflowVisible:m=!1,overrideInternalClassName:h,logLevel:f="info",noSuspense:y,...g},b)=>{"u">typeof window&&(0,r.useLayoutEffect)(()=>{window.remotion_isPlayer=!0},[]);let v=(0,r.useRef)(null),x=(0,r.useRef)([]),w=(0,r.useMemo)(()=>
56o.Xp.createRuntimeValueStore({buffering:!1}),[]),E=(0,r.useMemo)(()=>({isPlaying:()=>!1,isInsideFreeze:!1,frame:{[eS]:e},audioAndVideoTags:x}),[e]),F=(0,r.useMemo)(()=>({playbackRate:1,setPlaybackRate:()=>{throw Error("thumbnail")}}),[]),j=(0,r.useRef)(E.frame);j.current=E.frame;let k=(0,r.useMemo)(()=>({setFrame:()=>{},seek:null,setPlaying:()=>{},setBuffering:e=>{w.store.getSnapshot().buffering!==e&&w.setSnapshot({buffering:e})},subscribePlaying:()=>()=>{},subscribeBuffering:w.store.subscribe,isPlaying:()=>!1,isBuffering:()=>w.store.getSnapshot().buffering,frameRef:j,audioAndVideoTags:x}),[w]);(0,r.useImperativeHandle)(b,()=>v.current,[]);let P=o.Xp.useLazyComponent({compProps:g,componentName:"Thumbnail",noSuspense:!!y}),[R]=(0,r.useState)(()=>new S),z=(0,r.useMemo)(()=>n??{},[n]);return(0,s.jsx)(o.Xp.IsPlayerContextProvider,{children:(0,s.jsx)(o.Xp.SetTimelineContext.Provider,{value:k,children:(0,s.jsx)(ej,{timelineContext:E,playbackRateContext:F,component:P,compositionHeight:i,compositionWidth:a,durationInFrames:l,fps:u,numberOfSharedAudioTags:0,initiallyMuted:!0,logLevel:f,audioLatencyHint:"playback",sampleRate:48e3,inputProps:z,audioEnabled:!1,_experimentalKeepAudioContextAlive:!1,children:(0,s.jsx)(C.Provider,{value:R,children:(0,s.jsx)(eN,{ref:v,className:d,errorFallback:c,inputProps:z,renderLoading:p,style:t,overflowVisible:m,overrideInternalClassName:h,noSuspense:!!y})})})})})}),eX={PlayerEventEmitterContext:E,PlayerEmitter:F,usePlayerMethods:z,usePlayback:A,useElementSize:I,calculateCanvasTransformation:g,useHoverState:R,updateAllElementsSizes:()=>{for(let e of L)e()},PlayerEmitterProvider:k,BufferingIndicator:y,TimelineSequenceObserverContext:P,CanvasOverlayContext:w}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.