https://harbor-os.com/assets/WalkthroughVideo-B01f23WV.js

1import{j as e,r as o,G as W,c6 as S,X as L,bu as V}from"./vendor-BeA4siBz.js";import{s as _}from"./index-C2NQ_9nj.js";function A(r){var d;const s=r.brandSlug||((d=_())==null?void 0:d.slug)||"harbor_shoppers";return e.jsx(M,{...r,brandSlug:s},`${r.videoId}:${r.slotKey}:${s}:${r.preview}`)}function B(r){if(r.provider==="upload")return r.videoUrl.startsWith("/api/walkthrough-videos/");try{const s=new URL(r.videoUrl);return s.protocol==="https:"&&(r.provider==="youtube"&&s.hostname==="www.youtube-nocookie.com"&&/^\/embed\/[\w-]{11}$/.test(s.pathname)||r.provider==="vimeo"&&s.hostname==="player.vimeo.com"&&/^\/video\/\d+$/.test(s.pathname))}catch{return!1}}function M({videoId:r,slotKey:s,preview:d=!1,brandSlug:R,className:T="",fallbackTitle:F="Walkthrough video"}){const v=o.useRef(null),i=o.useRef(!0),[t,N]=o.useState(null),[k,p]=o.useState(!1),[m,U]=o.useState(!1),[u,b]=o.useState(null),[I,P]=o.useState(!1),[j,O]=o.useState(!1);async function E(a){var $,C;const c=r||s;if(!c)throw new Error("No video has been assigned.");const x=d&&r?`/api/admin/walkthrough-videos/library/${encodeURIComponent(c)}`:r?`/api/walkthrough-videos/library/${encodeURIComponent(c)}`:`/api/walkthrough-videos/${encodeURIComponent(c)}`,n=new URLSearchParams({brand:R||"harbor_shoppers"}),l=await fetch(`${x}?${n}`,{credentials:"include",cache:"no-store",signal:a});if(!l.ok)throw new Error(l.status===404?"This walkthrough is not available yet.":"The video could not be loaded.");const h=await l.json(),w=d?(($=h.entry)==null?void 0:$.draft)??((C=h.entry)==null?void 0:C.published):h.video??h.slot;if(!w||!d&&!w.enabled||!B(w))throw new Error("This walkthrough is currently unavailable.");return w}o.useEffect(()=>{i.current=!0;const a=new AbortController;let c=!1;const x=()=>{c||(c=!0,E(a.signal).then(l=>{i.current&&N(l)}).catch(l=>{!a.signal.aborted&&i.current&&b(l.message)}))},n=typeof IntersectionObserver>"u"?null:new IntersectionObserver(l=>{l.some(h=>h.isIntersecting)&&(x(),n==null||n.disconnect())},{rootMargin:"200px"});return n&&v.current?n.observe(v.current):x(),()=>{i.current=!1,a.abort(),n==null||n.disconnect()}},[]);async function y(){U(!0),b(null);try{const a=await E();if(!i.current)return;N(a),p(!0)}catch(a){i.current&&(p(!1),b(a instanceof Error?a.message:"The video could not be loaded."))}finally{i.current&&U(!1)}}const f=(t==null?void 0:t.title)||F,g=()=>{p(!1),b("Playback failed in this browser.")};return e.jsxs("div",{ref:v,className:`overflow-hidden rounded-xl border border-slate-700 bg-slate-900 ${T}`,children:[k?t&&e.jsxs(e.Fragment,{children:[e.jsx("div",{className:"aspect-video bg-black",children:t.provider==="upload"?e.jsxs("video",{controls:!0,playsInline:!0,preload:"metadata","aria-label":f,className:"h-full w-full",poster:t.posterUrl||void 0,onError:g,children:[e.jsx("source",{src:t.videoUrl,onError:g}),t.captionUrl&&e.jsx("track",{kind:"captions",src:t.captionUrl,srcLang:"en",label:"English",default:!0}),"Your browser does not support this video."]},t.videoUrl):e.jsx("iframe",{title:f,src:t.videoUrl,onError:g,className:"h-full w-full border-0",allow:"fullscreen; picture-in-picture",allowFullScreen:!0})}),e.jsxs("div",{className:"flex items-center justify-between gap-3 p-3 text-white",children:[e.jsx("p",{className:"text-sm font-semibold",children:f}),e.jsx("button",{type:"button",onClick:()=>p(!1),"aria-label":"Close video",children:e.jsx(L,{className:"h-5 w-5"})})]})]}):e.jsxs("div",{className:"relative flex aspect-video items-center justify-center text-center",children:[(t==null?void 0:t.posterUrl)&&!I&&!u&&e.jsx("img",{src:t.posterUrl,alt:"",loading:"lazy",onError:()=>P(!0),className:"absolute inset-0 h-full w-full object-cover"}),e.jsx("div",{className:"absolute inset-0 bg-slate-950/45"}),e.jsxs("div",{className:"relative px-6 py-4 text-white",children:[t&&!u?e.jsx("button",{type:"button",disabled:m,onClick:y,"aria-label":`Watch ${f}`,className:"mx-auto mb-3 flex h-16 w-16 items-center justify-center rounded-full bg-white/20 hover:bg-white/30 focus-visible:outline focus-visible:outline-2 focus-visible:outline-white",children:m?e.jsx(W,{className:"h-7 w-7 animate-spin"}):e.jsx(S,{className:"h-9 w-9"})}):e.jsx(S,{className:"mx-auto mb-3 h-10 w-10 text-white/60","aria-hidden":"true"}),e.jsx("p",{className:"text-sm font-semibold",children:f}),(!t||u)&&e.jsx("p",{className:"mt-1 text-xs text-white/60",children:"Coming soon"}),u&&e.jsx("p",{role:"status",className:"mt-2 text-xs text-white/70",children:u}),u&&e.jsx("button",{type:"button",disabled:m,onClick:y,className:"mt-2 text-xs underline",children:"Retry video"})]})]}),t&&e.jsxs("div",{className:"flex flex-wrap items-center gap-3 border-t border-slate-700 px-4 py-3 text-xs text-white/80",children:[t.description&&e.jsx("p",{className:"w-full",children:t.description}),t.transcriptUrl&&e.jsx("a",{href:t.transcriptUrl,target:"_blank",rel:"noopener noreferrer",className:"underline",children:"Open transcript"}),t.transcriptText&&e.jsxs("button",{type:"button","aria-expanded":j,onClick:()=>O(!j),className:"inline-flex items-center gap-1 underline",children:[e.jsx(V,{className:"h-3 w-3"}),"Read transcript"]}),k&&t.provider!=="upload"&&e.jsxs(e.Fragment,{children:[e.jsx("button",{type:"button",disabled:m,onClick:()=>{p(!1),y()},className:"underline",children:"Retry video"}),t.sourceUrl&&e.jsxs("a",{href:t.sourceUrl,target:"_blank",rel:"noopener noreferrer",className:"underline",children:["Open on ",t.provider==="youtube"?"YouTube":"Vimeo"]})]}),j&&e.jsx("p",{className:"w-full whitespace-pre-wrap leading-relaxed",children:t.transcriptText})]})]})}export{A as W};