@videts/vide 0.9.3 → 0.9.7

package/dist/react/index.mjs

@@ -1,2 +1,2 @@
-import {d as d$1}from'../chunk-2OVLZ27V.mjs';import {b as b$1,e,c,x}from'../chunk-LPSJOF2I.mjs';import {a}from'../chunk-6DWWYSH4.mjs';import {a as a$3}from'../chunk-3RDTWUHH.mjs';import {c as c$1}from'../chunk-WINCDUN5.mjs';import'../chunk-G74QBLVV.mjs';import'../chunk-UY5CGRNN.mjs';import {a as a$1}from'../chunk-NA4C7W64.mjs';import {a as a$2}from'../chunk-JRU2FKRB.mjs';import'../chunk-H3OXPFD3.mjs';import {e as e$1}from'../chunk-VPH4JIJV.mjs';import'../chunk-DWXOYV4E.mjs';import {createContext,forwardRef,useContext,useState,useEffect,useCallback,useRef,useMemo}from'react';import {jsx,jsxs,Fragment}from'react/jsx-runtime';function We(){let[r,t]=useState(null),e=useCallback(o=>{let i=a(o);t(i);},[]);return useEffect(()=>()=>{r?.destroy();},[r]),{current:r,_registerEl:e}}function Xe(r){return r===null?null:"_registerEl"in r?r.current:r}function f(r,t,e){let o=useRef(e);o.current=e;let i=Xe(r);useEffect(()=>{if(!i)return;let n=s=>o.current(s);return i.on(t,n),()=>i.off(t,n)},[i,t]);}function V(r,t,e){let o=useRef(e);o.current=e,useEffect(()=>{let i=r.current;if(!i)return;let s=t(o.current).setup(i);return ()=>{s?.();}},[r.current,t]);}function Je(r,t){V(r,a$1,t??{});}function Qe(r,t){V(r,a$2,t??{});}function Ze(r,t){V(r,e$1,t);}function et(r,t){V(r,a$3,t);}function tt(r,t){V(r,c$1,t);}function ot(r,t){V(r,d$1,t??{});}function rt(r,t){V(r,x,t);}var v=createContext(null);function d(){let r=useContext(v);if(r===null)throw new Error("useVideContext must be used within <Vide.Root>");return r.player}function Ce(){let r=useContext(v);if(r===null)throw new Error("Vide.Video must be used within <Vide.Root>");return r}function U({player:r,children:t}){let e=useMemo(()=>({player:r.current,registerEl:r._registerEl}),[r.current,r._registerEl]);return jsx(v.Provider,{value:e,children:t})}function z(r){let{registerEl:t}=Ce(),e=useCallback(o=>{o&&t(o);},[t]);return jsx("video",{ref:e,...r})}function Ee(...r){return r.filter(Boolean).join(" ")}var K=forwardRef(function({children:t,className:e,...o},i){let s=useContext(v)?.player??null,[a,l]=useState("");return useEffect(()=>{if(!s){l("");return}l(b$1(s.state));let m=({to:u})=>{l(b$1(u));};return s.on("statechange",m),()=>{s.off("statechange",m);}},[s]),jsx("section",{ref:i,className:Ee("vide-ui",a,e),"aria-label":"Video player",...o,children:t})});function W({children:r,className:t,...e}){return useContext(v)?.player?jsx("div",{className:Ee("vide-controls",t),...e,children:r}):null}function b(r,t){function e(o){let n=useContext(v)?.player??null,s=useRef(o);return s.current=o,useEffect(()=>{if(!n)return;let l=t(s.current).setup(n);return ()=>{l?.();}},[n,t]),null}return e.displayName=r,e}var q=b("HlsPlugin",a$1),G=b("DashPlugin",a$2),X=b("DrmPlugin",e$1),Y=b("VastPlugin",a$3),$=b("VmapPlugin",c$1),J=b("SsaiPlugin",d$1);var h={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",width:24,height:24,fill:"currentColor","aria-hidden":true};function H(){return jsx("svg",{...h,"aria-hidden":"true",children:jsx("path",{d:"M8 5v14l11-7z"})})}function Ne(){return jsx("svg",{...h,"aria-hidden":"true",children:jsx("path",{d:"M6 19h4V5H6v14zm8-14v14h4V5h-4z"})})}function w(){return jsx("svg",{...h,"aria-hidden":"true",children:jsx("path",{d:"M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"})})}function D(){return jsx("svg",{...h,"aria-hidden":"true",children:jsx("path",{d:"M18.5 12c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM5 9v6h4l5 5V4L9 9H5z"})})}function T(){return jsx("svg",{...h,"aria-hidden":"true",children:jsx("path",{d:"M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4l-1.88 1.88L12 7.76V4z"})})}function Me(){return jsx("svg",{...h,"aria-hidden":"true",children:jsx("path",{d:"M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"})})}function Re(){return jsx("svg",{...h,"aria-hidden":"true",children:jsx("path",{d:"M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z"})})}function Z({className:r,children:t}){let e=d(),[o,i]=useState(false);f(e,"statechange",({to:s})=>{s==="playing"||s==="ad:playing"?i(true):(s==="paused"||s==="ready"||s==="ended"||s==="ad:paused")&&i(false);});let n=useCallback(()=>{e&&(e.state==="playing"||e.state==="ad:playing"?e.pause():e.play().catch(()=>{}));},[e]);return jsx("button",{type:"button",className:["vide-play",r].filter(Boolean).join(" "),"aria-label":o?"Pause":"Play",onClick:n,"data-playing":o||void 0,children:t??(o?jsx(Ne,{}):jsx(H,{}))})}function ee({className:r,children:t}){let e=d(),[o,i]=useState(false),[n,s]=useState(1);useEffect(()=>{if(!e)return;let m=()=>{i(e.muted||e.volume===0),s(e.volume);};return e.el.addEventListener("volumechange",m),m(),()=>{e.el.removeEventListener("volumechange",m);}},[e]);let a=useCallback(()=>{e&&(e.muted=!e.muted);},[e]),l;return o?l=jsx(T,{}):n<.5?l=jsx(D,{}):l=jsx(w,{}),jsx("button",{type:"button",className:["vide-mute",r].filter(Boolean).join(" "),"aria-label":o?"Unmute":"Mute",onClick:a,"data-muted":o||void 0,children:t??l})}function re({className:r}){let t=d(),[e,o]=useState(0),[i,n]=useState(0),[s,a]=useState(false),l=useRef(false),m=useRef(null);f(t,"timeupdate",({currentTime:p,duration:c})=>{if(!l.current&&c>0&&o(p/c),t&&t.el.buffered.length>0&&c>0){let k=t.el.buffered.end(t.el.buffered.length-1);n(Math.min(1,k/c));}}),f(t,"statechange",({to:p})=>{a(p==="ad:loading"||p==="ad:playing"||p==="ad:paused");});let u=useCallback(p=>{if(!m.current)return 0;let c=m.current.getBoundingClientRect();return c.width===0?0:Math.max(0,Math.min(1,(p.clientX-c.left)/c.width))},[]),g=useCallback(p=>{!t||s||(l.current=true,m.current?.setPointerCapture(p.pointerId),o(u(p)));},[t,s,u]),O=useCallback(p=>{l.current&&o(u(p));},[u]),I=useCallback(p=>{if(!l.current||!t)return;l.current=false,m.current?.releasePointerCapture(p.pointerId);let c=u(p),k=t.el.duration;Number.isFinite(k)&&k>0&&(t.currentTime=c*k);},[t,u]);return jsxs("div",{ref:m,className:["vide-progress",r].filter(Boolean).join(" "),role:"slider",tabIndex:0,"aria-label":"Seek","aria-valuemin":0,"aria-valuemax":100,"aria-valuenow":Math.round(e*100),"data-disabled":s||void 0,style:{"--vide-progress":e,"--vide-progress-buffered":i},onPointerDown:g,onPointerMove:O,onPointerUp:I,children:[jsx("div",{className:"vide-progress__buffered"}),jsx("div",{className:"vide-progress__bar"}),jsx("div",{className:"vide-progress__handle"})]})}function ne({className:r,children:t}){let e=d(),[o,i]=useState(1),[n,s]=useState(false),a=useRef(false),l=useRef(null);useEffect(()=>{if(!e)return;let p=()=>{a.current||i(e.muted?0:e.volume),s(e.muted||e.volume===0);};return e.el.addEventListener("volumechange",p),p(),()=>{e.el.removeEventListener("volumechange",p);}},[e]);let m=useCallback(()=>{e&&(e.muted=!e.muted);},[e]),u=useCallback(p=>{if(!l.current)return 0;let c=l.current.getBoundingClientRect();return c.width===0?0:Math.max(0,Math.min(1,(p.clientX-c.left)/c.width))},[]),g=useCallback(p=>{if(!e)return;a.current=true,l.current?.setPointerCapture(p.pointerId);let c=u(p);e.volume=c,e.muted&&c>0&&(e.muted=false),i(c),s(c===0);},[e,u]),O=useCallback(p=>{if(!a.current||!e)return;let c=u(p);e.volume=c,e.muted&&c>0&&(e.muted=false),i(c),s(c===0);},[e,u]),I=useCallback(p=>{a.current&&(a.current=false,l.current?.releasePointerCapture(p.pointerId));},[]);return jsxs("div",{className:["vide-volume",r].filter(Boolean).join(" "),"data-muted":n||void 0,style:{"--vide-volume":o},children:[jsx("button",{type:"button",className:"vide-volume__button","aria-label":n?"Unmute":"Mute",onClick:m,children:t??(n?jsx(T,{}):o<.5?jsx(D,{}):jsx(w,{}))}),jsxs("div",{ref:l,className:"vide-volume__slider",role:"slider",tabIndex:0,"aria-label":"Volume","aria-valuemin":0,"aria-valuemax":100,"aria-valuenow":Math.round(o*100),onPointerDown:g,onPointerMove:O,onPointerUp:I,children:[jsx("div",{className:"vide-volume__track"}),jsx("div",{className:"vide-volume__filled"})]})]})}function se({className:r,target:t,children:e}){let o=d(),[i,n]=useState(false);useEffect(()=>{let a=()=>{n(document.fullscreenElement!=null||document.webkitFullscreenElement!=null);};return document.addEventListener("fullscreenchange",a),document.addEventListener("webkitfullscreenchange",a),()=>{document.removeEventListener("fullscreenchange",a),document.removeEventListener("webkitfullscreenchange",a);}},[]);let s=useCallback(()=>{let a=t??o?.el.closest(".vide-ui")??o?.el.parentElement;a&&(document.fullscreenElement?document.exitFullscreen().catch(()=>{}):a.requestFullscreen().catch(()=>{}));},[o,t]);return jsx("button",{type:"button",className:["vide-fullscreen",r].filter(Boolean).join(" "),"aria-label":i?"Exit fullscreen":"Fullscreen",onClick:s,"data-fullscreen":i||void 0,children:e??(i?jsx(Re,{}):jsx(Me,{}))})}function le({className:r,separator:t="/"}){let e$1=d(),[o,i]=useState(0),[n,s]=useState(0);return f(e$1,"timeupdate",a=>{i(a.currentTime),s(a.duration);}),jsxs("div",{className:["vide-time",r].filter(Boolean).join(" "),"aria-label":"Time",children:[jsx("span",{className:"vide-time__current",children:e(o)}),jsx("span",{className:"vide-time__separator",children:t}),jsx("span",{className:"vide-time__duration",children:e(n)})]})}function ue({className:r,...t}){return jsx("div",{className:["vide-loader",r].filter(Boolean).join(" "),...t,children:jsx("div",{className:"vide-loader__spinner"})})}function pe({src:r,alt:t="",className:e,...o}){return jsx("div",{className:["vide-poster",e].filter(Boolean).join(" "),...o,children:jsx("img",{className:"vide-poster__image",src:r,alt:t})})}function ce({className:r}){let t=useContext(v)?.player??null,[e,o]=useState("");return f(t,"error",({message:i})=>{o(i);}),jsx("div",{className:["vide-error",r].filter(Boolean).join(" "),children:jsx("span",{className:"vide-error__message",children:e})})}function me({className:r,children:t}){let e=useContext(v)?.player??null,o=useCallback(()=>{if(e){if(e.state==="ended"){let s=function({to:a}){a==="ready"&&(n.off("statechange",s),n.play().catch(()=>{}));};let n=e;n.on("statechange",s),n.el.currentTime=0,n.el.load();return}e.play().catch(()=>{});}},[e]);return jsx("button",{type:"button",className:["vide-bigplay",r].filter(Boolean).join(" "),"aria-label":"Play video",onClick:o,children:t??jsx(H,{})})}var At=200;function fe({className:r,enableFullscreen:t=true}){let e=useContext(v)?.player??null,o=useRef(null),i=useCallback(()=>{e&&(e.state==="playing"||e.state==="ad:playing"?e.pause():e.play().catch(()=>{}));},[e]),n=useCallback(()=>{if(!t)return;let a=e?.el.closest(".vide-ui")??e?.el.parentElement;a&&(document.fullscreenElement!=null?document.exitFullscreen().catch(()=>{}):a.requestFullscreen&&a.requestFullscreen().catch(()=>{}));},[e,t]),s=useCallback(()=>{if(e){if(c(e.state)){e.el.click(),i();return}if(o.current!==null){clearTimeout(o.current),o.current=null,n();return}o.current=setTimeout(()=>{o.current=null,i();},At);}},[e,i,n]);return jsx("div",{className:["vide-clickplay",r].filter(Boolean).join(" "),onClick:s,onKeyDown:a=>{(a.key==="Enter"||a.key===" ")&&(a.preventDefault(),s());}})}function P(r){let[t,e]=useState({active:false,meta:null});return f(r,"ad:start",o=>{e({active:true,meta:{adId:o.adId,clickThrough:o.clickThrough,skipOffset:o.skipOffset,duration:o.duration,adTitle:o.adTitle,adStartTime:Date.now()}});}),f(r,"ad:end",()=>{e({active:false,meta:null});}),f(r,"ad:skip",()=>{e({active:false,meta:null});}),t}function ve({className:r,children:t}){let e=d(),{active:o,meta:i}=P(e),n=useCallback(()=>{if(!e)return;e.el.click();let s=i?.clickThrough;s?(window.open(s,"_blank"),e.el.pause()):e.el.paused?Promise.resolve(e.el.play()).catch(()=>{}):e.el.pause();},[e,i]);return !e||!o?null:jsx("div",{className:["vide-ad-overlay",r].filter(Boolean).join(" "),onClick:n,children:t})}function ye({className:r,children:t}){let e=d(),{active:o,meta:i}=P(e),[n,s]=useState(false),[a,l]=useState(0);f(e,"timeupdate",({currentTime:u})=>{!o||!i||i.skipOffset===void 0||(u>=i.skipOffset?s(true):(s(false),l(Math.max(0,Math.ceil(i.skipOffset-u)))));});let m=useCallback(()=>{!e||!n||!i||e.emit("ad:skip",{adId:i.adId});},[e,n,i]);return !e||!o||!i||i.skipOffset===void 0?null:jsx("button",{type:"button",className:["vide-skip",!n&&"vide-skip--disabled",r].filter(Boolean).join(" "),"aria-label":"Skip ad",onClick:m,disabled:!n,children:n?t??"Skip Ad":`Skip in ${a}s`})}function Pe({className:r,format:t}){let e=d(),{active:o,meta:i}=P(e),[n,s]=useState(0);return f(e,"timeupdate",({currentTime:a})=>{if(!o||!i)return;let l=i.duration??(e&&Number.isFinite(e.duration)?e.duration:0);s(Math.max(0,Math.ceil(l-a)));}),!e||!o?null:jsx("div",{className:["vide-ad-countdown",r].filter(Boolean).join(" "),children:t?t(n):`Ad \xB7 ${n}s`})}function ge({className:r,children:t}){let e=d(),{active:o}=P(e);return !e||!o?null:jsx("div",{className:["vide-ad-label",r].filter(Boolean).join(" "),children:t??"Ad"})}function xe({className:r,children:t,showTitle:e}){let o=d(),{active:i,meta:n}=P(o),s=useCallback(()=>{!o||!n?.clickThrough||(o.el.click(),window.open(n.clickThrough,"_blank"),o.el.pause());},[o,n]);return !o||!i||!n?.clickThrough?null:jsx("button",{type:"button",className:["vide-ad-cta",r].filter(Boolean).join(" "),onClick:s,children:e&&n.adTitle?jsxs(Fragment,{children:[jsx("span",{className:"vide-ad-cta__title",children:n.adTitle}),t??"Learn More"]}):t??"Learn More"})}var qt=3e3;function Gt(r,t){let e=useRef(null);useEffect(()=>{let o=r.current;if(!o||!t)return;function i(){if(!t)return  true;let u=t.state;return u==="paused"||u==="ended"||u==="idle"||u==="ready"||c(u)}function n(){o?.classList.remove("vide-ui--autohide");}function s(){e.current!==null&&(clearTimeout(e.current),e.current=null);}function a(){s(),!i()&&(e.current=setTimeout(()=>{o?.classList.add("vide-ui--autohide");},qt));}function l(){n(),a();}function m({to:u}){u==="paused"||u==="ended"||u==="idle"||u==="ready"||c(u)?(s(),n()):a();}return o.addEventListener("mousemove",l),o.addEventListener("touchstart",l),o.addEventListener("keydown",l),t.on("statechange",m),a(),()=>{s(),o.removeEventListener("mousemove",l),o.removeEventListener("touchstart",l),o.removeEventListener("keydown",l),o.classList.remove("vide-ui--autohide"),t.off("statechange",m);}},[r,t]);}function Yt(r,t,e={}){useEffect(()=>{let o=r.current;if(!o||!t)return;o.setAttribute("tabindex","0");function i(n){if(!t)return;let s=!e.disableSeek,a=!e.disableVolume,l=!e.disableFullscreen,m=c(t.state);switch(n.key){case " ":case "k":case "K":n.preventDefault(),t.state==="playing"||t.state==="ad:playing"?t.pause():t.play().catch(()=>{});break;case "ArrowLeft":if(!s||m)return;n.preventDefault(),t.currentTime=Math.max(0,t.el.currentTime-5);break;case "ArrowRight":if(!s||m)return;n.preventDefault(),t.currentTime=Math.min(t.el.duration||0,t.el.currentTime+5);break;case "ArrowUp":if(!a)return;n.preventDefault(),t.volume=Math.min(1,t.volume+.1),t.muted&&(t.muted=false);break;case "ArrowDown":if(!a)return;n.preventDefault(),t.volume=Math.max(0,t.volume-.1);break;case "m":case "M":if(!a)return;n.preventDefault(),t.muted=!t.muted;break;case "f":case "F":if(!l)return;n.preventDefault(),document.fullscreenElement!=null?document.exitFullscreen().catch(()=>{}):(o?.closest(".vide-ui")??o)?.requestFullscreen().catch(()=>{});break;default:if(n.key.length===1&&n.key>="0"&&n.key<="9"&&s&&!m){n.preventDefault();let u=Number.parseInt(n.key,10)/10,g=t.el.duration;Number.isFinite(g)&&g>0&&(t.currentTime=u*g);}break}}return o.addEventListener("keydown",i),()=>{o.removeEventListener("keydown",i),o.removeAttribute("tabindex");}},[r,t,e.disableSeek,e.disableVolume,e.disableFullscreen]);}var Bn={Root:U,Video:z,UI:K,Controls:W,HlsPlugin:q,DashPlugin:G,DrmPlugin:X,VastPlugin:Y,VmapPlugin:$,SsaiPlugin:J,PlayButton:Z,MuteButton:ee,Progress:re,Volume:ne,FullscreenButton:se,TimeDisplay:le,Loader:ue,Poster:pe,ErrorDisplay:ce,BigPlayButton:me,ClickPlay:fe,AdOverlay:ve,AdSkip:ye,AdCountdown:Pe,AdLabel:ge,AdLearnMore:xe};
-export{Pe as AdCountdown,ge as AdLabel,xe as AdLearnMore,ve as AdOverlay,ye as AdSkip,me as BigPlayButton,fe as ClickPlay,G as DashPlugin,X as DrmPlugin,ce as ErrorDisplay,se as FullscreenButton,q as HlsPlugin,ue as Loader,ee as MuteButton,Z as PlayButton,pe as Poster,re as Progress,J as SsaiPlugin,le as TimeDisplay,Y as VastPlugin,Bn as Vide,v as VideContext,W as VideControls,U as VideRoot,K as VideUI,z as VideVideo,$ as VmapPlugin,ne as Volume,P as useAdState,Gt as useAutohide,Qe as useDash,Ze as useDrm,Je as useHls,Yt as useKeyboard,ot as useSsai,rt as useUi,et as useVast,d as useVideContext,f as useVideEvent,We as useVidePlayer,tt as useVmap};
+import {d}from'../chunk-7R6TO7ZE.mjs';import {b as b$1,e,c,x}from'../chunk-YBNODS5R.mjs';import {a}from'../chunk-AQLZYNP7.mjs';import {a as a$3}from'../chunk-YE6RITJU.mjs';import {c as c$1}from'../chunk-TNHV5PHM.mjs';import'../chunk-2UHU76KF.mjs';import'../chunk-UY5CGRNN.mjs';import {a as a$1}from'../chunk-ZUEPNVVV.mjs';import {a as a$2}from'../chunk-JRU2FKRB.mjs';import'../chunk-H3OXPFD3.mjs';import {e as e$1}from'../chunk-CD27DYME.mjs';import'../chunk-DWXOYV4E.mjs';import {createContext,forwardRef,useContext,useState,useEffect,useCallback,useRef,useMemo}from'react';import {jsx,jsxs,Fragment}from'react/jsx-runtime';function Ye(){let[o,t]=useState(null),e=useCallback(r=>{let n=a(r);t(n);},[]);return useEffect(()=>()=>{o?.destroy();},[o]),{current:o,_registerEl:e}}function Qe(o){return o===null?null:"_registerEl"in o?o.current:o}function f(o,t,e){let r=useRef(e);r.current=e;let n=Qe(o);useEffect(()=>{if(!n)return;let i=s=>r.current(s);return n.on(t,i),()=>n.off(t,i)},[n,t]);}function V(o,t,e){let r=useRef(e);r.current=e,useEffect(()=>{let n=o.current;if(!n)return;let s=t(r.current).setup(n);return ()=>{s?.();}},[o.current,t]);}function tt(o,t){V(o,a$1,t??{});}function ot(o,t){V(o,a$2,t??{});}function rt(o,t){V(o,e$1,t);}function nt(o,t){V(o,a$3,t);}function it(o,t){V(o,c$1,t);}function st(o,t){V(o,d,t??{});}function at(o,t){V(o,x,t);}var y=createContext(null);function m(){let o=useContext(y);if(o===null)throw new Error("useVideContext must be used within <Vide.Root>");return o.player}function Ee(){let o=useContext(y);if(o===null)throw new Error("Vide.Video must be used within <Vide.Root>");return o}function z({player:o,children:t}){let e=useMemo(()=>({player:o.current,registerEl:o._registerEl}),[o.current,o._registerEl]);return jsx(y.Provider,{value:e,children:t})}function K(o){let{registerEl:t}=Ee(),e=useCallback(r=>{r&&t(r);},[t]);return jsx("video",{ref:e,...o})}function Se(...o){return o.filter(Boolean).join(" ")}var W=forwardRef(function({children:t,className:e,...r},n){let s=useContext(y)?.player??null,[a,l]=useState("");return useEffect(()=>{if(!s){l("");return}l(b$1(s.state));let d=({to:u})=>{l(b$1(u));};return s.on("statechange",d),()=>{s.off("statechange",d);}},[s]),jsx("section",{ref:n,className:Se("vide-ui",a,e),"aria-label":"Video player",...r,children:t})});function q({children:o,className:t,...e}){return useContext(y)?.player?jsx("div",{className:Se("vide-controls",t),...e,children:o}):null}function b(o,t){function e(r){let i=useContext(y)?.player??null,s=useRef(r);return s.current=r,useEffect(()=>{if(!i)return;let l=t(s.current).setup(i);return ()=>{l?.();}},[i,t]),null}return e.displayName=o,e}var G=b("HlsPlugin",a$1),X=b("DashPlugin",a$2),Y=b("DrmPlugin",e$1),$=b("VastPlugin",a$3),J=b("VmapPlugin",c$1),Q=b("SsaiPlugin",d);var g={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",width:24,height:24,fill:"currentColor","aria-hidden":true};function H(){return jsx("svg",{...g,"aria-hidden":"true",children:jsx("path",{d:"M8 5v14l11-7z"})})}function Le(){return jsx("svg",{...g,"aria-hidden":"true",children:jsx("path",{d:"M6 19h4V5H6v14zm8-14v14h4V5h-4z"})})}function D(){return jsx("svg",{...g,"aria-hidden":"true",children:jsx("path",{d:"M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"})})}function T(){return jsx("svg",{...g,"aria-hidden":"true",children:jsx("path",{d:"M18.5 12c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM5 9v6h4l5 5V4L9 9H5z"})})}function B(){return jsx("svg",{...g,"aria-hidden":"true",children:jsx("path",{d:"M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4l-1.88 1.88L12 7.76V4z"})})}function Re(){return jsx("svg",{...g,"aria-hidden":"true",children:jsx("path",{d:"M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"})})}function Ae(){return jsx("svg",{...g,"aria-hidden":"true",children:jsx("path",{d:"M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z"})})}function we(){return jsxs("svg",{...g,"aria-hidden":"true",children:[jsx("path",{d:"M14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"}),jsx("path",{d:"M19 19H5V5h7V3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7h-2v7z"})]})}function He(){return jsx("svg",{...g,"aria-hidden":"true",children:jsx("path",{d:"M5 18l10-6L5 6v12zm12-12v12h2V6h-2z"})})}function ee({className:o,children:t}){let e=m(),[r,n]=useState(false);f(e,"statechange",({to:s})=>{s==="playing"||s==="ad:playing"?n(true):(s==="paused"||s==="ready"||s==="ended"||s==="ad:paused")&&n(false);});let i=useCallback(()=>{e&&(e.state==="playing"||e.state==="ad:playing"?e.pause():e.play().catch(()=>{}));},[e]);return jsx("button",{type:"button",className:["vide-play",o].filter(Boolean).join(" "),"aria-label":r?"Pause":"Play",onClick:i,"data-playing":r||void 0,children:t??(r?jsx(Le,{}):jsx(H,{}))})}function te({className:o,children:t}){let e=m(),[r,n]=useState(false),[i,s]=useState(1);useEffect(()=>{if(!e)return;let d=()=>{n(e.muted||e.volume===0),s(e.volume);};return e.el.addEventListener("volumechange",d),d(),()=>{e.el.removeEventListener("volumechange",d);}},[e]);let a=useCallback(()=>{e&&(e.muted=!e.muted);},[e]),l;return r?l=jsx(B,{}):i<.5?l=jsx(T,{}):l=jsx(D,{}),jsx("button",{type:"button",className:["vide-mute",o].filter(Boolean).join(" "),"aria-label":r?"Unmute":"Mute",onClick:a,"data-muted":r||void 0,children:t??l})}function ne({className:o}){let t=m(),[e,r]=useState(0),[n,i]=useState(0),[s,a]=useState(false),l=useRef(false),d=useRef(null);f(t,"timeupdate",({currentTime:p,duration:c})=>{if(!l.current&&c>0&&r(p/c),t&&t.el.buffered.length>0&&c>0){let k=t.el.buffered.end(t.el.buffered.length-1);i(Math.min(1,k/c));}}),f(t,"statechange",({to:p})=>{a(p==="ad:loading"||p==="ad:playing"||p==="ad:paused");});let u=useCallback(p=>{if(!d.current)return 0;let c=d.current.getBoundingClientRect();return c.width===0?0:Math.max(0,Math.min(1,(p.clientX-c.left)/c.width))},[]),h=useCallback(p=>{!t||s||(l.current=true,d.current?.setPointerCapture(p.pointerId),r(u(p)));},[t,s,u]),I=useCallback(p=>{l.current&&r(u(p));},[u]),_=useCallback(p=>{if(!l.current||!t)return;l.current=false,d.current?.releasePointerCapture(p.pointerId);let c=u(p),k=t.el.duration;Number.isFinite(k)&&k>0&&(t.currentTime=c*k);},[t,u]);return jsxs("div",{ref:d,className:["vide-progress",o].filter(Boolean).join(" "),role:"slider",tabIndex:0,"aria-label":"Seek","aria-valuemin":0,"aria-valuemax":100,"aria-valuenow":Math.round(e*100),"data-disabled":s||void 0,style:{"--vide-progress":e,"--vide-progress-buffered":n},onPointerDown:h,onPointerMove:I,onPointerUp:_,children:[jsx("div",{className:"vide-progress__buffered"}),jsx("div",{className:"vide-progress__bar"}),jsx("div",{className:"vide-progress__handle"})]})}function ie({className:o,children:t}){let e=m(),[r,n]=useState(1),[i,s]=useState(false),a=useRef(false),l=useRef(null);useEffect(()=>{if(!e)return;let p=()=>{a.current||n(e.muted?0:e.volume),s(e.muted||e.volume===0);};return e.el.addEventListener("volumechange",p),p(),()=>{e.el.removeEventListener("volumechange",p);}},[e]);let d=useCallback(()=>{e&&(e.muted=!e.muted);},[e]),u=useCallback(p=>{if(!l.current)return 0;let c=l.current.getBoundingClientRect();return c.width===0?0:Math.max(0,Math.min(1,(p.clientX-c.left)/c.width))},[]),h=useCallback(p=>{if(!e)return;a.current=true,l.current?.setPointerCapture(p.pointerId);let c=u(p);e.volume=c,e.muted&&c>0&&(e.muted=false),n(c),s(c===0);},[e,u]),I=useCallback(p=>{if(!a.current||!e)return;let c=u(p);e.volume=c,e.muted&&c>0&&(e.muted=false),n(c),s(c===0);},[e,u]),_=useCallback(p=>{a.current&&(a.current=false,l.current?.releasePointerCapture(p.pointerId));},[]);return jsxs("div",{className:["vide-volume",o].filter(Boolean).join(" "),"data-muted":i||void 0,style:{"--vide-volume":r},children:[jsx("button",{type:"button",className:"vide-volume__button","aria-label":i?"Unmute":"Mute",onClick:d,children:t??(i?jsx(B,{}):r<.5?jsx(T,{}):jsx(D,{}))}),jsxs("div",{ref:l,className:"vide-volume__slider",role:"slider",tabIndex:0,"aria-label":"Volume","aria-valuemin":0,"aria-valuemax":100,"aria-valuenow":Math.round(r*100),onPointerDown:h,onPointerMove:I,onPointerUp:_,children:[jsx("div",{className:"vide-volume__track"}),jsx("div",{className:"vide-volume__filled"})]})]})}function ae({className:o,target:t,children:e}){let r=m(),[n,i]=useState(false);useEffect(()=>{let a=()=>{i(document.fullscreenElement!=null||document.webkitFullscreenElement!=null);};return document.addEventListener("fullscreenchange",a),document.addEventListener("webkitfullscreenchange",a),()=>{document.removeEventListener("fullscreenchange",a),document.removeEventListener("webkitfullscreenchange",a);}},[]);let s=useCallback(()=>{let a=t??r?.el.closest(".vide-ui")??r?.el.parentElement;a&&(document.fullscreenElement?document.exitFullscreen().catch(()=>{}):a.requestFullscreen().catch(()=>{}));},[r,t]);return jsx("button",{type:"button",className:["vide-fullscreen",o].filter(Boolean).join(" "),"aria-label":n?"Exit fullscreen":"Fullscreen",onClick:s,"data-fullscreen":n||void 0,children:e??(n?jsx(Ae,{}):jsx(Re,{}))})}function ue({className:o,separator:t="/"}){let e$1=m(),[r,n]=useState(0),[i,s]=useState(0);return f(e$1,"timeupdate",a=>{n(a.currentTime),s(a.duration);}),jsxs("div",{className:["vide-time",o].filter(Boolean).join(" "),"aria-label":"Time",children:[jsx("span",{className:"vide-time__current",children:e(r)}),jsx("span",{className:"vide-time__separator",children:t}),jsx("span",{className:"vide-time__duration",children:e(i)})]})}function pe({className:o,...t}){return jsx("div",{role:"status","aria-label":"Loading",className:["vide-loader",o].filter(Boolean).join(" "),...t,children:jsx("div",{className:"vide-loader__spinner"})})}function ce({src:o,alt:t="",className:e,...r}){return jsx("div",{className:["vide-poster",e].filter(Boolean).join(" "),...r,children:jsx("img",{className:"vide-poster__image",src:o,alt:t})})}function de({className:o}){let t=useContext(y)?.player??null,[e,r]=useState("");return f(t,"error",({message:n})=>{r(n);}),jsx("div",{role:"alert",className:["vide-error",o].filter(Boolean).join(" "),children:jsx("span",{className:"vide-error__message",children:e})})}function me({className:o,children:t}){let e=useContext(y)?.player??null,r=useCallback(()=>{if(e){if(e.state==="ended"){let s=function({to:a}){a==="ready"&&(i.off("statechange",s),i.play().catch(()=>{}));};let i=e;i.on("statechange",s),i.el.currentTime=0,i.el.load();return}e.play().catch(()=>{});}},[e]);return jsx("button",{type:"button",className:["vide-bigplay",o].filter(Boolean).join(" "),"aria-label":"Play video",onClick:r,children:t??jsx(H,{})})}var Bt=200;function ve({className:o,enableFullscreen:t=true}){let e=useContext(y)?.player??null,r=useRef(null),n=useCallback(()=>{e&&(e.state==="playing"||e.state==="ad:playing"?e.pause():e.play().catch(()=>{}));},[e]),i=useCallback(()=>{if(!t)return;let a=e?.el.closest(".vide-ui")??e?.el.parentElement;a&&(document.fullscreenElement!=null?document.exitFullscreen().catch(()=>{}):a.requestFullscreen&&a.requestFullscreen().catch(()=>{}));},[e,t]),s=useCallback(()=>{if(e){if(c(e.state)){e.el.click(),n();return}if(r.current!==null){clearTimeout(r.current),r.current=null,i();return}r.current=setTimeout(()=>{r.current=null,n();},Bt);}},[e,n,i]);return jsx("div",{className:["vide-clickplay",o].filter(Boolean).join(" "),onClick:s,onKeyDown:a=>{(a.key==="Enter"||a.key===" ")&&(a.preventDefault(),s());}})}function P(o){let[t,e]=useState({active:false,meta:null});return f(o,"ad:start",r=>{e({active:true,meta:{adId:r.adId,clickThrough:r.clickThrough,skipOffset:r.skipOffset,duration:r.duration,adTitle:r.adTitle,adStartTime:Date.now()}});}),f(o,"ad:end",()=>{e({active:false,meta:null});}),f(o,"ad:skip",()=>{e({active:false,meta:null});}),t}function ye({className:o,children:t}){let e=m(),{active:r,meta:n}=P(e),i=useCallback(()=>{if(!e)return;e.el.click();let s=n?.clickThrough;s?(window.open(s,"_blank"),e.el.pause()):e.el.paused?Promise.resolve(e.el.play()).catch(()=>{}):e.el.pause();},[e,n]);return !e||!r?null:jsx("div",{className:["vide-ad-overlay",o].filter(Boolean).join(" "),onClick:i,children:t})}function ge({className:o,children:t}){let e=m(),{active:r,meta:n}=P(e),[i,s]=useState(false),[a,l]=useState(0);f(e,"timeupdate",({currentTime:u})=>{!r||!n||n.skipOffset===void 0||(u>=n.skipOffset?s(true):(s(false),l(Math.max(0,Math.ceil(n.skipOffset-u)))));});let d=useCallback(()=>{!e||!i||!n||e.emit("ad:skip",{adId:n.adId});},[e,i,n]);return !e||!r||!n||n.skipOffset===void 0?null:jsx("button",{type:"button",className:["vide-skip",!i&&"vide-skip--disabled",o].filter(Boolean).join(" "),"aria-label":"Skip ad",onClick:d,disabled:!i,children:t??jsxs(Fragment,{children:[jsx("span",{className:"vide-skip__label",children:i?"Skip Ad":`Skip in ${a}s`}),jsx(He,{})]})})}function he({className:o,format:t}){let e=m(),{active:r,meta:n}=P(e),[i,s]=useState(0);return f(e,"timeupdate",({currentTime:a})=>{if(!r||!n)return;let l=n.duration??(e&&Number.isFinite(e.duration)?e.duration:0);s(Math.max(0,Math.ceil(l-a)));}),!e||!r?null:jsx("div",{"aria-label":"Ad countdown","aria-live":"off",className:["vide-ad-countdown",o].filter(Boolean).join(" "),children:t?t(i):`Ad \xB7 ${i}s`})}function xe({className:o,children:t}){let e=m(),{active:r}=P(e);return !e||!r?null:jsx("div",{className:["vide-ad-label",o].filter(Boolean).join(" "),children:t??"Ad"})}function Yt(o){try{return new URL(o).hostname}catch{return o}}function Ve({className:o,children:t}){let e=m(),{active:r,meta:n}=P(e),i=useCallback(()=>{!e||!n?.clickThrough||(e.el.click(),window.open(n.clickThrough,"_blank"),e.el.pause());},[e,n]),s=useMemo(()=>n?.clickThrough?Yt(n.clickThrough):"",[n?.clickThrough]);return !e||!r||!n?.clickThrough?null:jsx("button",{type:"button",className:["vide-ad-cta",o].filter(Boolean).join(" "),onClick:i,children:t??jsxs(Fragment,{children:[jsx("span",{className:"vide-ad-cta__icon",children:jsx(we,{})}),jsxs("span",{className:"vide-ad-cta__body",children:[n.adTitle&&jsx("span",{className:"vide-ad-cta__title",children:n.adTitle}),jsx("span",{className:"vide-ad-cta__url",children:s})]})]})})}var Zt=3e3;function eo(o,t){let e=useRef(null);useEffect(()=>{let r=o.current;if(!r||!t)return;function n(){if(!t)return  true;let u=t.state;return u==="paused"||u==="ended"||u==="idle"||u==="ready"||c(u)}function i(){r?.classList.remove("vide-ui--autohide");}function s(){e.current!==null&&(clearTimeout(e.current),e.current=null);}function a(){s(),!n()&&(e.current=setTimeout(()=>{r?.classList.add("vide-ui--autohide");},Zt));}function l(){i(),a();}function d({to:u}){u==="paused"||u==="ended"||u==="idle"||u==="ready"||c(u)?(s(),i()):a();}return r.addEventListener("mousemove",l),r.addEventListener("touchstart",l),r.addEventListener("keydown",l),t.on("statechange",d),a(),()=>{s(),r.removeEventListener("mousemove",l),r.removeEventListener("touchstart",l),r.removeEventListener("keydown",l),r.classList.remove("vide-ui--autohide"),t.off("statechange",d);}},[o,t]);}function oo(o,t,e={}){useEffect(()=>{let r=o.current;if(!r||!t)return;r.setAttribute("tabindex","0");function n(i){if(!t)return;let s=!e.disableSeek,a=!e.disableVolume,l=!e.disableFullscreen,d=c(t.state);switch(i.key){case " ":case "k":case "K":i.preventDefault(),t.state==="playing"||t.state==="ad:playing"?t.pause():t.play().catch(()=>{});break;case "ArrowLeft":if(!s||d)return;i.preventDefault(),t.currentTime=Math.max(0,t.el.currentTime-5);break;case "ArrowRight":if(!s||d)return;i.preventDefault(),t.currentTime=Math.min(t.el.duration||0,t.el.currentTime+5);break;case "ArrowUp":if(!a)return;i.preventDefault(),t.volume=Math.min(1,t.volume+.1),t.muted&&(t.muted=false);break;case "ArrowDown":if(!a)return;i.preventDefault(),t.volume=Math.max(0,t.volume-.1);break;case "m":case "M":if(!a)return;i.preventDefault(),t.muted=!t.muted;break;case "f":case "F":if(!l)return;i.preventDefault(),document.fullscreenElement!=null?document.exitFullscreen().catch(()=>{}):(r?.closest(".vide-ui")??r)?.requestFullscreen().catch(()=>{});break;default:if(i.key.length===1&&i.key>="0"&&i.key<="9"&&s&&!d){i.preventDefault();let u=Number.parseInt(i.key,10)/10,h=t.el.duration;Number.isFinite(h)&&h>0&&(t.currentTime=u*h);}break}}return r.addEventListener("keydown",n),()=>{r.removeEventListener("keydown",n),r.removeAttribute("tabindex");}},[o,t,e.disableSeek,e.disableVolume,e.disableFullscreen]);}var Wn={Root:z,Video:K,UI:W,Controls:q,HlsPlugin:G,DashPlugin:X,DrmPlugin:Y,VastPlugin:$,VmapPlugin:J,SsaiPlugin:Q,PlayButton:ee,MuteButton:te,Progress:ne,Volume:ie,FullscreenButton:ae,TimeDisplay:ue,Loader:pe,Poster:ce,ErrorDisplay:de,BigPlayButton:me,ClickPlay:ve,AdOverlay:ye,AdSkip:ge,AdCountdown:he,AdLabel:xe,AdLearnMore:Ve};
+export{he as AdCountdown,xe as AdLabel,Ve as AdLearnMore,ye as AdOverlay,ge as AdSkip,me as BigPlayButton,ve as ClickPlay,X as DashPlugin,Y as DrmPlugin,de as ErrorDisplay,ae as FullscreenButton,G as HlsPlugin,pe as Loader,te as MuteButton,ee as PlayButton,ce as Poster,ne as Progress,Q as SsaiPlugin,ue as TimeDisplay,$ as VastPlugin,Wn as Vide,y as VideContext,q as VideControls,z as VideRoot,W as VideUI,K as VideVideo,J as VmapPlugin,ie as Volume,P as useAdState,eo as useAutohide,ot as useDash,rt as useDrm,tt as useHls,oo as useKeyboard,st as useSsai,at as useUi,nt as useVast,m as useVideContext,f as useVideEvent,Ye as useVidePlayer,it as useVmap};

package/dist/simid/index.d.ts

@@ -1,5 +1,5 @@
-import { A as AdPlugin } from '../types-COeag8fU.js';
-import '../types-BsEF8iWC.js';
+import { A as AdPlugin } from '../types-JlkZYMyA.js';
+import '../types-BD5ZFUAt.js';
 
 interface SimidPluginOptions {
     /** Container element to mount the SIMID iframe into. */

package/dist/ssai/index.d.ts

@@ -1,4 +1,4 @@
-import { f as Plugin } from '../types-BsEF8iWC.js';
+import { f as Plugin } from '../types-BD5ZFUAt.js';
 import { A as AdBreakMetadata, S as SsaiPluginOptions } from '../types-DsixuzNX.js';
 export { a as AdTrackingMap, M as MetadataParser, R as RawMetadata } from '../types-DsixuzNX.js';
 

package/dist/ssai/index.js

@@ -1 +1 @@
-export{b as parseDateRange,a as parseEventStream,c as parseId3Samples,d as ssai}from'../chunk-2OVLZ27V.mjs';import'../chunk-UY5CGRNN.mjs';
+export{b as parseDateRange,a as parseEventStream,c as parseId3Samples,d as ssai}from'../chunk-7R6TO7ZE.mjs';import'../chunk-UY5CGRNN.mjs';

package/dist/ssai/index.mjs

@@ -1 +1 @@
-export{b as parseDateRange,a as parseEventStream,c as parseId3Samples,d as ssai}from'../chunk-2OVLZ27V.mjs';import'../chunk-UY5CGRNN.mjs';
+export{b as parseDateRange,a as parseEventStream,c as parseId3Samples,d as ssai}from'../chunk-7R6TO7ZE.mjs';import'../chunk-UY5CGRNN.mjs';

package/dist/svelte/VideUI.svelte

@@ -13,7 +13,8 @@ interface Props {
 
 const { class: className, children, onmount }: Props = $props();
 
-const rootEl: HTMLDivElement | undefined = $state();
+// biome-ignore lint/style/useConst: bind:this requires let in Svelte 5
+let rootEl: HTMLDivElement | undefined = $state();
 
 $effect(() => {
 	if (rootEl && onmount) onmount(rootEl);

package/dist/svelte/Video.svelte

@@ -1,17 +1,15 @@
 <script lang="ts">
 import { getContext, onMount } from "svelte";
-import type { Snippet } from "svelte";
 import { type RegisterFn, VIDE_REGISTER_KEY } from "./context.js";
 import type { MediaElement } from "./helpers.js";
 
 interface Props {
 	src?: string;
 	class?: string;
-	children?: Snippet;
 	[key: string]: unknown;
 }
 
-const { class: className, children, ...videoAttrs }: Props = $props();
+const { ...videoAttrs }: Props = $props();
 let videoEl: HTMLVideoElement;
 
 const registerEl = getContext<RegisterFn>(VIDE_REGISTER_KEY);
@@ -23,9 +21,4 @@ onMount(() => {
 });
 </script>
 
-<div class={className}>
-	<video bind:this={videoEl} {...videoAttrs}></video>
-	{#if children}
-		{@render children()}
-	{/if}
-</div>
+<video bind:this={videoEl} {...videoAttrs}></video>

package/dist/svelte/Video.svelte.d.ts

@@ -1,8 +1,6 @@
-import type { Snippet } from "svelte";
 interface Props {
     src?: string;
     class?: string;
-    children?: Snippet;
     [key: string]: unknown;
 }
 declare const Video: import("svelte").Component<Props, {}, "">;

package/dist/svelte/components/AdCountdown.svelte

@@ -31,7 +31,7 @@ $effect(() => {
 </script>
 
 {#if adState.active}
-	<div class={["vide-ad-countdown", className].filter(Boolean).join(" ")}>
+	<div aria-label="Ad countdown" aria-live="off" class={["vide-ad-countdown", className].filter(Boolean).join(" ")}>
 		{format ? format(remaining) : `Ad \u00b7 ${remaining}s`}
 	</div>
 {/if}

package/dist/svelte/components/AdLearnMore.svelte

@@ -2,15 +2,23 @@
 import { getContext } from "svelte";
 import type { Snippet } from "svelte";
 import { type PlayerGetter, VIDE_PLAYER_KEY } from "../context.js";
+import IconExternalLink from "../icons/IconExternalLink.svelte";
 import { useAdState } from "../use-ad-state.svelte.js";
 
+function hostname(url: string): string {
+	try {
+		return new URL(url).hostname;
+	} catch {
+		return url;
+	}
+}
+
 interface Props {
 	class?: string;
 	children?: Snippet;
-	showTitle?: boolean;
 }
 
-const { class: className, children, showTitle = false }: Props = $props();
+const { class: className, children }: Props = $props();
 
 const getPlayer = getContext<PlayerGetter>(VIDE_PLAYER_KEY);
 const adState = useAdState(getPlayer);
@@ -30,13 +38,18 @@ function onClick() {
 		class={["vide-ad-cta", className].filter(Boolean).join(" ")}
 		onclick={onClick}
 	>
-		{#if showTitle && adState.meta.adTitle}
-			<span class="vide-ad-cta__title">{adState.meta.adTitle}</span>
-		{/if}
 		{#if children}
 			{@render children()}
 		{:else}
-			Learn More
+			<span class="vide-ad-cta__icon">
+				<IconExternalLink />
+			</span>
+			<span class="vide-ad-cta__body">
+				{#if adState.meta.adTitle}
+					<span class="vide-ad-cta__title">{adState.meta.adTitle}</span>
+				{/if}
+				<span class="vide-ad-cta__url">{hostname(adState.meta.clickThrough)}</span>
+			</span>
 		{/if}
 	</button>
 {/if}

package/dist/svelte/components/AdLearnMore.svelte.d.ts

@@ -2,7 +2,6 @@ import type { Snippet } from "svelte";
 interface Props {
     class?: string;
     children?: Snippet;
-    showTitle?: boolean;
 }
 declare const AdLearnMore: import("svelte").Component<Props, {}, "">;
 type AdLearnMore = ReturnType<typeof AdLearnMore>;

package/dist/svelte/components/AdSkip.svelte

@@ -2,6 +2,7 @@
 import { getContext } from "svelte";
 import type { Snippet } from "svelte";
 import { type PlayerGetter, VIDE_PLAYER_KEY } from "../context.js";
+import IconSkipForward from "../icons/IconSkipForward.svelte";
 import { useAdState } from "../use-ad-state.svelte.js";
 
 interface Props {
@@ -54,14 +55,13 @@ function onClick() {
 		onclick={onClick}
 		disabled={!canSkip}
 	>
-		{#if canSkip}
-			{#if children}
-				{@render children()}
-			{:else}
-				Skip Ad
-			{/if}
+		{#if children}
+			{@render children()}
 		{:else}
-			Skip in {countdown}s
+			<span class="vide-skip__label">
+				{canSkip ? "Skip Ad" : `Skip in ${countdown}s`}
+			</span>
+			<IconSkipForward />
 		{/if}
 	</button>
 {/if}

package/dist/svelte/components/ErrorDisplay.svelte

@@ -22,6 +22,6 @@ $effect(() => {
 });
 </script>
 
-<div class={["vide-error", className].filter(Boolean).join(" ")}>
+<div role="alert" class={["vide-error", className].filter(Boolean).join(" ")}>
 	<span class="vide-error__message">{message}</span>
 </div>

package/dist/svelte/components/Loader.svelte

@@ -6,6 +6,6 @@ interface Props {
 const { class: className }: Props = $props();
 </script>
 
-<div class={["vide-loader", className].filter(Boolean).join(" ")}>
+<div role="status" aria-label="Loading" class={["vide-loader", className].filter(Boolean).join(" ")}>
 	<div class="vide-loader__spinner"></div>
 </div>

package/dist/svelte/icons/IconExternalLink.svelte

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="currentColor" aria-hidden="true">
+	<path d="M14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z" />
+	<path d="M19 19H5V5h7V3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7h-2v7z" />
+</svg>

package/dist/svelte/icons/IconExternalLink.svelte.d.ts

@@ -0,0 +1,26 @@
+export default IconExternalLink;
+type IconExternalLink = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string;
+};
+declare const IconExternalLink: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/svelte/icons/IconSkipForward.svelte

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="currentColor" aria-hidden="true">
+	<path d="M5 18l10-6L5 6v12zm12-12v12h2V6h-2z" />
+</svg>

package/dist/svelte/icons/IconSkipForward.svelte.d.ts

@@ -0,0 +1,26 @@
+export default IconSkipForward;
+type IconSkipForward = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string;
+};
+declare const IconSkipForward: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/svelte/index.d.ts

@@ -30,6 +30,8 @@ export { default as IconVolumeLow } from "./icons/IconVolumeLow.svelte";
 export { default as IconVolumeMute } from "./icons/IconVolumeMute.svelte";
 export { default as IconFullscreenEnter } from "./icons/IconFullscreenEnter.svelte";
 export { default as IconFullscreenExit } from "./icons/IconFullscreenExit.svelte";
+export { default as IconExternalLink } from "./icons/IconExternalLink.svelte";
+export { default as IconSkipForward } from "./icons/IconSkipForward.svelte";
 export { useAdState } from "./use-ad-state.svelte.js";
 export type { AdState } from "./use-ad-state.svelte.js";
 export { default as AdOverlay } from "./components/AdOverlay.svelte";

package/dist/svelte/index.js

@@ -29,6 +29,8 @@ export { default as IconVolumeLow } from "./icons/IconVolumeLow.svelte";
 export { default as IconVolumeMute } from "./icons/IconVolumeMute.svelte";
 export { default as IconFullscreenEnter } from "./icons/IconFullscreenEnter.svelte";
 export { default as IconFullscreenExit } from "./icons/IconFullscreenExit.svelte";
+export { default as IconExternalLink } from "./icons/IconExternalLink.svelte";
+export { default as IconSkipForward } from "./icons/IconSkipForward.svelte";
 export { useAdState } from "./use-ad-state.svelte.js";
 export { default as AdOverlay } from "./components/AdOverlay.svelte";
 export { default as AdSkip } from "./components/AdSkip.svelte";

package/dist/{types-BsEF8iWC.d.ts → types-BD5ZFUAt.d.ts}

@@ -245,9 +245,13 @@ interface SourceHandler {
     /** Unload the source and clean up. */
     unload(mediaElement: MediaElement): void;
 }
+/** Extended player interface exposed to plugins, includes state control. */
+interface PluginPlayer extends Player {
+    setState(state: PlayerState): void;
+}
 interface Plugin {
     name: string;
-    setup(player: Player): (() => void) | undefined;
+    setup(player: PluginPlayer): (() => void) | undefined;
 }
 interface Player extends EventBus {
     readonly el: MediaElement;
@@ -313,4 +317,4 @@ interface Player extends EventBus {
     getPluginData(key: string): unknown;
 }
 
-export type { AdMeta as A, EventBus as E, MediaElement as M, Player as P, QualityLevel as Q, RecoveryConfig as R, SeekableRange as S, VideCue as V, AdQuartile as a, EventHandler as b, PlayerEvent as c, PlayerEventMap as d, PlayerState as e, Plugin as f, SourceHandler as g, VideTextTrack as h };
+export type { AdMeta as A, EventBus as E, MediaElement as M, Player as P, QualityLevel as Q, RecoveryConfig as R, SeekableRange as S, VideCue as V, AdQuartile as a, EventHandler as b, PlayerEvent as c, PlayerEventMap as d, PlayerState as e, Plugin as f, PluginPlayer as g, SourceHandler as h, VideTextTrack as i };

package/dist/{types-CwjR99DL.d.ts → types-CABQEV7R.d.ts}

@@ -1,4 +1,4 @@
-import { R as RecoveryConfig } from './types-BsEF8iWC.js';
+import { R as RecoveryConfig } from './types-BD5ZFUAt.js';
 
 interface HlsPluginOptions {
     /** Configuration passed directly to the hls.js constructor. */

package/dist/{types-SuT99_Z3.d.ts → types-CXi-EgbJ.d.ts}

@@ -1,4 +1,4 @@
-import { P as Player } from './types-BsEF8iWC.js';
+import { P as Player } from './types-BD5ZFUAt.js';
 
 /** A single UI component that can be independently mounted and connected. */
 interface UIComponent {

package/dist/{types-DzY1cmXC.d.ts → types-CaEBUCfi.d.ts}

@@ -1,4 +1,4 @@
-import { R as RecoveryConfig } from './types-BsEF8iWC.js';
+import { R as RecoveryConfig } from './types-BD5ZFUAt.js';
 
 interface DashPluginOptions {
     /** dash.js MediaPlayerSettingClass — passed to updateSettings(). */

package/dist/{types-C1_eVsFF.d.ts → types-DWH68b8d.d.ts}

@@ -1,4 +1,4 @@
-import { c as VastAd, A as AdPlugin } from './types-COeag8fU.js';
+import { c as VastAd, A as AdPlugin } from './types-JlkZYMyA.js';
 
 interface VmapResponse {
     version: string;

package/dist/{types-COeag8fU.d.ts → types-JlkZYMyA.d.ts}

@@ -1,4 +1,4 @@
-import { P as Player } from './types-BsEF8iWC.js';
+import { P as Player } from './types-BD5ZFUAt.js';
 
 interface VastResponse {
     version: string;

package/dist/ui/index.d.ts

@@ -1,7 +1,7 @@
-import { P as Player, e as PlayerState, f as Plugin } from '../types-BsEF8iWC.js';
-import { A as AdPlugin, c as VastAd } from '../types-COeag8fU.js';
-import { A as AdUIStateRef, U as UIComponent, a as UIComponentName, b as UiPluginOptions } from '../types-SuT99_Z3.js';
-export { c as AdUIState } from '../types-SuT99_Z3.js';
+import { P as Player, e as PlayerState, f as Plugin } from '../types-BD5ZFUAt.js';
+import { A as AdPlugin, c as VastAd } from '../types-JlkZYMyA.js';
+import { A as AdUIStateRef, U as UIComponent, a as UIComponentName, b as UiPluginOptions } from '../types-CXi-EgbJ.js';
+export { c as AdUIState } from '../types-CXi-EgbJ.js';
 
 declare function createAdCountdown(adState: AdUIStateRef): UIComponent;
 

package/dist/ui/index.js

@@ -1 +1 @@
-export{d as connectStateClasses,g as createAdCountdown,h as createAdLabel,i as createAdLearnMore,j as createAdOverlay,k as createAdSkip,f as createAdUIState,l as createAutohide,m as createBigPlay,n as createClickPlay,o as createErrorDisplay,p as createFullscreen,q as createKeyboard,r as createLoader,s as createPlayButton,t as createPoster,u as createProgress,v as createTimeDisplay,w as createVolume,e as formatTime,c as isAdState,b as stateToClass,x as ui,a as uiAdPlugin}from'../chunk-LPSJOF2I.mjs';
+export{d as connectStateClasses,g as createAdCountdown,h as createAdLabel,i as createAdLearnMore,j as createAdOverlay,k as createAdSkip,f as createAdUIState,l as createAutohide,m as createBigPlay,n as createClickPlay,o as createErrorDisplay,p as createFullscreen,q as createKeyboard,r as createLoader,s as createPlayButton,t as createPoster,u as createProgress,v as createTimeDisplay,w as createVolume,e as formatTime,c as isAdState,b as stateToClass,x as ui,a as uiAdPlugin}from'../chunk-YBNODS5R.mjs';

package/dist/ui/index.mjs

@@ -1 +1 @@
-export{d as connectStateClasses,g as createAdCountdown,h as createAdLabel,i as createAdLearnMore,j as createAdOverlay,k as createAdSkip,f as createAdUIState,l as createAutohide,m as createBigPlay,n as createClickPlay,o as createErrorDisplay,p as createFullscreen,q as createKeyboard,r as createLoader,s as createPlayButton,t as createPoster,u as createProgress,v as createTimeDisplay,w as createVolume,e as formatTime,c as isAdState,b as stateToClass,x as ui,a as uiAdPlugin}from'../chunk-LPSJOF2I.mjs';
+export{d as connectStateClasses,g as createAdCountdown,h as createAdLabel,i as createAdLearnMore,j as createAdOverlay,k as createAdSkip,f as createAdUIState,l as createAutohide,m as createBigPlay,n as createClickPlay,o as createErrorDisplay,p as createFullscreen,q as createKeyboard,r as createLoader,s as createPlayButton,t as createPoster,u as createProgress,v as createTimeDisplay,w as createVolume,e as formatTime,c as isAdState,b as stateToClass,x as ui,a as uiAdPlugin}from'../chunk-YBNODS5R.mjs';

package/dist/ui/theme.css

@@ -137,6 +137,23 @@
 	background: var(--vide-accent-ad);
 }
 
+/* ═══════════════════════════════════════════
+   FOCUS
+   ═══════════════════════════════════════════ */
+
+.vide-ui :focus-visible {
+	outline: 2px solid var(--vide-accent);
+	outline-offset: 2px;
+}
+
+.vide-bigplay:focus-visible {
+	outline-offset: 4px;
+}
+
+.vide-ui :focus:not(:focus-visible) {
+	outline: none;
+}
+
 /* ═══════════════════════════════════════════
    AUTOHIDE (mouse-idle during playback)
    ═══════════════════════════════════════════ */
@@ -663,7 +680,7 @@
 
 .vide-ad-label {
 	position: absolute;
-	bottom: calc(var(--vide-controls-height) + var(--vide-ad-overlay-gap) + 52px);
+	bottom: calc(var(--vide-controls-height) + var(--vide-ad-overlay-gap));
 	left: var(--vide-ad-overlay-gap);
 	z-index: 4;
 
@@ -677,8 +694,13 @@
 	letter-spacing: 0.03em;
 	line-height: var(--vide-line-height);
 	color: var(--vide-text-dim);
-	text-shadow: 0 0 3px rgba(0, 0, 0, 0.6);
-	transition: transform 0.25s var(--vide-ease);
+	text-shadow: 0 0 1px rgba(0, 0, 0, 0.6);
+	transition: transform 0.25s var(--vide-ease), bottom 0.25s var(--vide-ease);
+}
+
+/* Push label/countdown above CTA when it's visible */
+.vide-ui:has(.vide-ad-cta:not([hidden])) .vide-ad-label {
+	bottom: calc(var(--vide-controls-height) + var(--vide-ad-overlay-gap) + 52px);
 }
 
 /* ─────────────────────────────────────────
@@ -688,7 +710,7 @@
 
 .vide-ad-countdown {
 	position: absolute;
-	bottom: calc(var(--vide-controls-height) + var(--vide-ad-overlay-gap) + 52px);
+	bottom: calc(var(--vide-controls-height) + var(--vide-ad-overlay-gap));
 	left: calc(var(--vide-ad-overlay-gap) + 28px);
 	z-index: 4;
 
@@ -701,10 +723,14 @@
 	font-weight: 400;
 	line-height: var(--vide-line-height);
 	color: var(--vide-text-dim);
-	text-shadow: 0 0 3px rgba(0, 0, 0, 0.6);
+	text-shadow: 0 0 1px rgba(0, 0, 0, 0.6);
 	font-variant-numeric: tabular-nums;
 	white-space: nowrap;
-	transition: transform 0.25s var(--vide-ease);
+	transition: transform 0.25s var(--vide-ease), bottom 0.25s var(--vide-ease);
+}
+
+.vide-ui:has(.vide-ad-cta:not([hidden])) .vide-ad-countdown {
+	bottom: calc(var(--vide-controls-height) + var(--vide-ad-overlay-gap) + 52px);
 }
 
 .vide-ad-countdown::before {
@@ -918,12 +944,14 @@
 		max-width: 60%;
 	}
 
-	/* Label/countdown → bottom-left (above controls) */
-	.vide-ad-label {
+	/* Label/countdown → bottom-left (above controls, CTA moves to top) */
+	.vide-ad-label,
+	.vide-ui:has(.vide-ad-cta:not([hidden])) .vide-ad-label {
 		bottom: calc(var(--vide-controls-height) + var(--vide-ad-overlay-gap));
 	}
 
-	.vide-ad-countdown {
+	.vide-ad-countdown,
+	.vide-ui:has(.vide-ad-cta:not([hidden])) .vide-ad-countdown {
 		bottom: calc(var(--vide-controls-height) + var(--vide-ad-overlay-gap));
 	}
 
@@ -954,3 +982,58 @@
 		font-size: 13px;
 	}
 }
+
+/* ═══════════════════════════════════════════
+   SCREEN READER ONLY
+   ═══════════════════════════════════════════ */
+
+.vide-sr-only {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	padding: 0;
+	margin: -1px;
+	overflow: hidden;
+	clip: rect(0, 0, 0, 0);
+	white-space: nowrap;
+	border: 0;
+}
+
+/* ═══════════════════════════════════════════
+   REDUCED MOTION
+   ═══════════════════════════════════════════ */
+
+@media (prefers-reduced-motion: reduce) {
+	.vide-loader__spinner {
+		animation-duration: 4s;
+	}
+
+	.vide-controls,
+	.vide-bigplay,
+	.vide-progress__bar,
+	.vide-progress__handle,
+	.vide-progress__buffered,
+	.vide-volume__slider,
+	.vide-skip,
+	.vide-ad-label,
+	.vide-ad-countdown,
+	.vide-ad-cta {
+		transition-duration: 0.01ms !important;
+	}
+}
+
+/* ═══════════════════════════════════════════
+   HIGH CONTRAST
+   ═══════════════════════════════════════════ */
+
+@media (prefers-contrast: more) {
+	:root {
+		--vide-text-mid: rgba(255, 255, 255, 0.9);
+		--vide-text-dim: rgba(255, 255, 255, 0.7);
+		--vide-skip-border: rgba(255, 255, 255, 0.5);
+	}
+
+	.vide-ui :focus-visible {
+		outline-width: 3px;
+	}
+}