@nulib/react-media-player/dist/index.cjs.js

Viewer for audio, video and image file types driven by a IIIF manifest

var Jt=Object.create;var K=Object.defineProperty,er=Object.defineProperties,tr=Object.getOwnPropertyDescriptor,rr=Object.getOwnPropertyDescriptors,or=Object.getOwnPropertyNames,Ie=Object.getOwnPropertySymbols,nr=Object.getPrototypeOf,ke=Object.prototype.hasOwnProperty,ir=Object.prototype.propertyIsEnumerable;var Se=(e,t,r)=>t in e?K(e,t,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[t]=r,C=(e,t)=>{for(var r in t||(t={}))ke.call(t,r)&&Se(e,r,t[r]);if(Ie)for(var r of Ie(t))ir.call(t,r)&&Se(e,r,t[r]);return e},R=(e,t)=>er(e,rr(t)),Te=e=>K(e,"__esModule",{value:!0});var ar=(e,t)=>{Te(e);for(var r in t)K(e,r,{get:t[r],enumerable:!0})},sr=(e,t,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of or(t))!ke.call(e,o)&&o!=="default"&&K(e,o,{get:()=>t[o],enumerable:!(r=tr(t,o))||r.enumerable});return e},d=e=>sr(Te(K(e!=null?Jt(nr(e)):{},"default",e&&e.__esModule&&"default"in e?{get:()=>e.default,enumerable:!0}:{value:e,enumerable:!0})),e);ar(exports,{default:()=>Or});var I=d(require("react"));var L=d(require("react")),Fe=d(require("@hyperion-framework/vault")),Ee={showTitle:!0,showIIIFBadge:!0,ignoreCaptionLabels:[]},pe={activeCanvas:"",configOptions:Ee,isLoaded:!1,vault:new Fe.Vault},Ve=L.default.createContext(pe),Pe=L.default.createContext(pe);function lr(e,t){switch(t.type){case"updateActiveCanvas":return t.canvasId||(t.canvasId=""),R(C({},e),{activeCanvas:t.canvasId});case"updateConfigOptions":return R(C({},e),{configOptions:C(C({},Ee),t.configOptions)});case"updateIsLoaded":return R(C({},e),{isLoaded:t.isLoaded});default:throw new Error(`Unhandled action type: ${t.type}`)}}var Ae=({initialState:e=pe,children:t})=>{let[r,o]=L.default.useReducer(lr,e);return L.default.createElement(Ve.Provider,{value:r},L.default.createElement(Pe.Provider,{value:o},t))};function M(){let e=L.default.useContext(Ve);if(e===void 0)throw new Error("useViewerState must be used within a ViewerProvider");return e}function Y(){let e=L.default.useContext(Pe);if(e===void 0)throw new Error("useViewerDispatch must be used within a ViewerProvider");return e}var v=d(require("react"));var Z=(e,t,r,o)=>{let n={canvas:void 0,annotationPage:void 0,annotations:[]},a=i=>{if(i){if(!i.body||!i.motivation){console.error("Invalid annotation after Hyperion parsing: missing either 'body' or 'motivation'",i);return}let l=e.allFromRef(i.body);switch(r){case"painting":return i.target===t.id&&i.motivation&&i.motivation[0]==="painting"&&o.includes(l[0].type)&&(i.body=l),i;case"supplementing":return;default:throw new Error("Invalid annotation motivation.")}}};return n.canvas=e.fromRef(t),n.canvas&&(n.annotationPage=e.fromRef(n.canvas.items[0])),n.annotationPage&&(n.annotations=e.allFromRef(n.annotationPage.items).filter(a)),n};var ce=(e,t)=>{let r=Z(e,{id:t,type:"Canvas"},"painting",["Image","Sound","Video"]);if(r.annotations.length!==0&&r.annotations[0])return e.allFromRef(r.annotations[0].body)[0]};var me=(e,t,r)=>{let o=e.fromRef({id:t,type:"Canvas"});if(!(o==null?void 0:o.annotations)||!o.annotations[0])return[];let n=e.fromRef(o.annotations[0]),a=e.allFromRef(n.items);return Array.isArray(a)?a.filter(i=>{if(i.motivation==="supplementing"){let l=e.fromRef(i.body);if(l.format===r)return i.body=l,i}}).map(i=>i.body):[]};var k=(e,t="en")=>{if(!e)return"";if(!e[t]){let r=Object.getOwnPropertyNames(e);if(r.length>0)return e[r[0]]}return e[t]};var ue=(e,t,r,o)=>{let n=[];if(t.canvas&&t.canvas.thumbnail.length>0){let l=e.fromRef(t.canvas.thumbnail[0]);n.push(l)}if(t.annotations[0]){if(t.annotations[0].thumbnail&&t.annotations[0].thumbnail.length>0){let g=e.fromRef(t.annotations[0].thumbnail[0]);n.push(g)}let l=e.allFromRef(t.annotations[0].body);l[0].type==="Image"&&n.push(l[0])}return n.length===0?void 0:{id:n[0].id,format:n[0].format,type:n[0].type,width:r,height:o}};var Me=d(require("@stitches/react")),dr={colors:{primary:"#342F2E",primaryMuted:"#716C6B",primaryAlt:"#000000",accent:"#4E2A84",accentMuted:"#B6ACD1",accentAlt:"#401F68",secondary:"#FFFFFF",secondaryMuted:"#F0F0F0",secondaryAlt:"#CCCCCC"},fonts:{sans:"'Akkurat Pro Regular', Arial, sans-serif",sansBold:"Akkurat Pro Bold, Arial, sans-serif",display:"Campton, 'Akkurat Pro Regular', Arial, sans-serif"},transitions:{all:"all 500ms cubic-bezier(0.16, 1, 0.3, 1)"}},fe={xxs:"(max-width: 349px)",xs:"(max-width: 575px)",sm:"(max-width: 767px)",md:"(max-width: 991px)",xl:"(max-width: 1199px)",lg:"(min-width: 1200px)"},{styled:s,css:ro,keyframes:$e,createTheme:oo}=(0,Me.createStitches)({theme:dr,media:fe});var J=d(require("@radix-ui/react-collapsible")),ge=s("div",{position:"relative",zIndex:"0"}),he=s("div",{display:"flex",flexDirection:"row",overflow:"hidden","@sm":{flexDirection:"column"}}),ye=s("div",{display:"flex",flexDirection:"column",flexGrow:"1",flexShrink:"1",width:"61.8%","@sm":{width:"100%"}}),We=s(J.Trigger,{display:"none",background:"transparent",border:"none",margin:"0",padding:"0",transition:"$all",opacity:"1",marginTop:"0","&[data-navigator='false']":{opacity:"0",marginTop:"-59px"},"@sm":{display:"flex","> span":{display:"flex",flexGrow:"1",margin:"1rem 1rem 0"}}}),xe=s(J.Content,{width:"100%",display:"flex"}),Le=s("aside",{display:"flex",flexGrow:"1",flexShrink:"0",width:"38.2%","@sm":{width:"100%"}}),ze=s("section",{display:"flex",flexDirection:"column",padding:"1.618rem",fontFamily:"$sans",backgroundColor:"$secondary",fontSmooth:"auto",webkitFontSmoothing:"antialiased","> div":{display:"flex",flexDirection:"column",flexGrow:"1",justifyContent:"flex-start","@sm":{[`& ${he}`]:{flexGrow:"1"},[`& ${ye}`]:{flexGrow:"0"}}},"@sm":{padding:"0"},"&[data-navigator-open='true']":{"@sm":{position:"fixed",height:"100%",width:"100%",top:"0",left:"0",zIndex:"2500000000",[`& ${ge}`]:{display:"none"},[`& ${xe}`]:{height:"100%"}}}});var ee=d(require("react")),Ne=e=>{let t=()=>window.matchMedia?window.matchMedia(e).matches:!1,[r,o]=(0,ee.useState)(t);return(0,ee.useEffect)(()=>{let n=()=>o(t);return window.addEventListener("resize",n),()=>window.removeEventListener("resize",n)}),r};var D=d(require("react")),Be=(e=!1)=>{let[t,r]=(0,D.useState)(e);return(0,D.useLayoutEffect)(()=>{if(!t)return;let o=document.documentElement.style.overflow;return document.documentElement.style.overflow="hidden",()=>{document.documentElement.style.overflow=o}},[t]),(0,D.useEffect)(()=>{t!==e&&r(e)},[e]),[t,r]};var qt=d(require("@radix-ui/react-collapsible"));var W=d(require("react"));var be=d(require("@nulib/design-system")),Re=s(be.Popover.Trigger,{width:"30px",padding:"5px"}),De=s(be.Popover.Content,{display:"flex",flexDirection:"column",fontSize:"0.8333rem",button:{display:"flex",textDecoration:"none",fontFamily:"$sans",marginBottom:"0.5em",color:"$accentAlt",cursor:"pointer",background:"$secondary",border:"none",["&:last-child"]:{marginBottom:"0"}}}),Oe=s("header",{display:"flex",backgroundColor:"transparent !important",justifyContent:"space-between",padding:"0 0 0.5rem",span:{fontSize:"1.25rem",fontWeight:"700",fontFamily:"$display","@sm":{padding:"1rem",fontSize:"1rem"}}});var Ke=d(require("@nulib/design-system"));var E=d(require("react")),pr=()=>{let e="#ed1d33",t="#2873ab";return E.default.createElement("svg",{viewBox:"0 0 493.35999 441.33334",id:"iiif-logo",version:"1.1"},E.default.createElement("title",null,"IIIF Manifest Options"),E.default.createElement("g",{transform:"matrix(1.3333333,0,0,-1.3333333,0,441.33333)"},E.default.createElement("g",{transform:"scale(0.1)"},E.default.createElement("path",{style:{fill:t},d:"M 65.2422,2178.75 775.242,1915 773.992,15 65.2422,276.25 v 1902.5"}),E.default.createElement("path",{style:{fill:t},d:"m 804.145,2640.09 c 81.441,-240.91 -26.473,-436.2 -241.04,-436.2 -214.558,0 -454.511,195.29 -535.9527,436.2 -81.4335,240.89 26.4805,436.18 241.0387,436.18 214.567,0 454.512,-195.29 535.954,-436.18"}),E.default.createElement("path",{style:{fill:e},d:"M 1678.58,2178.75 968.578,1915 969.828,15 1678.58,276.25 v 1902.5"}),E.default.createElement("path",{style:{fill:e},d:"m 935.082,2640.09 c -81.437,-240.91 26.477,-436.2 241.038,-436.2 214.56,0 454.51,195.29 535.96,436.2 81.43,240.89 -26.48,436.18 -241.04,436.18 -214.57,0 -454.52,-195.29 -535.958,-436.18"}),E.default.createElement("path",{style:{fill:t},d:"m 1860.24,2178.75 710,-263.75 -1.25,-1900 -708.75,261.25 v 1902.5"}),E.default.createElement("path",{style:{fill:t},d:"m 2603.74,2640.09 c 81.45,-240.91 -26.47,-436.2 -241.03,-436.2 -214.58,0 -454.52,195.29 -535.96,436.2 -81.44,240.89 26.48,436.18 241.03,436.18 214.57,0 454.51,-195.29 535.96,-436.18"}),E.default.createElement("path",{style:{fill:e},d:"m 3700.24,3310 v -652.5 c 0,0 -230,90 -257.5,-142.5 -2.5,-247.5 0,-336.25 0,-336.25 l 257.5,83.75 V 1690 l -258.61,-92.5 V 262.5 L 2735.24,0 v 2360 c 0,0 -15,850 965,950"}))))},He=pr;var te=d(require("react"));var O=d(require("react")),Ge=(e,t=2500)=>{let[r,o]=(0,O.useState)(),n=(0,O.useCallback)(()=>{navigator.clipboard.writeText(e).then(()=>o("copied"),()=>o("failed"))},[e]);return(0,O.useEffect)(()=>{if(!r)return;let a=setTimeout(()=>o(void 0),t);return()=>clearTimeout(a)},[r]),[r,n]};var cr=s("span",{display:"flex",alignContent:"center",alignItems:"center",padding:"0.125rem 0.25rem 0",marginTop:"-0.125rem",marginLeft:"0.5rem",backgroundColor:"$accent",color:"$secondary",borderRadius:"3px",fontSize:"0.6111rem",textTransform:"uppercase",lineHeight:"1em"}),mr=({status:e})=>e?te.default.createElement(cr,{"data-copy-status":e},e):null,ur=({textPrompt:e,textToCopy:t})=>{let[r,o]=Ge(t);return te.default.createElement("button",{onClick:o},e," ",te.default.createElement(mr,{status:r}))},je=ur;var fr=({manifestId:e,manifestLabel:t})=>{let r=M(),{configOptions:o}=r;return W.default.createElement(Oe,null,o.showTitle&&W.default.createElement("span",null,k(t,"en")),o.showIIIFBadge&&W.default.createElement(Ke.Popover,null,W.default.createElement(Re,null,W.default.createElement(He,null)),W.default.createElement(De,null,W.default.createElement("button",{onClick:n=>{n.preventDefault(),window.open(e,"_blank")}},"View Manifest"),W.default.createElement(je,{textPrompt:"Copy Manifest URL",textToCopy:e}))))},Ze=fr;var F=d(require("react"));var w=d(require("react"));var _e=d(require("@radix-ui/react-radio-group"));var Ue=s(_e.Root,{display:"flex",flexDirection:"row",flexGrow:"1",padding:"1.618rem 0.618rem 1.618rem 0 ",overflowX:"scroll",position:"relative",zIndex:"0","@sm":{padding:"1rem"}});var b=d(require("react"));var gr=e=>{var t=e.toString().split(":"),r=Math.ceil(parseInt(t[0])),o=Math.ceil(parseInt(t[1])),n=hr(Math.ceil(parseInt(t[2])),2);let a=`${o}:${n}`;return r!==0&&(a=`${r}:${a}`),a},re=e=>{let t=new Date(e*1e3).toISOString().substr(11,8);return gr(t)};var hr=(e,t)=>String(e).padStart(t,"0");var z=d(require("@nulib/design-system"));var qe=d(require("@radix-ui/react-radio-group"));var ve=d(require("@nulib/design-system")),oe=s("span",{display:"flex"}),Qe=s("span",{display:"flex",width:"1.2111rem",height:"0.7222rem"}),Xe=s("span",{display:"inline-flex",marginLeft:"5px",marginBottom:"-1px"}),Ye=s(qe.Item,{display:"flex",flexShrink:"0",margin:"0 1.618rem 0 0",padding:"0",cursor:"pointer",background:"none",border:"none",fontFamily:"inherit",lineHeight:"1.25em",fontSize:"1rem",textAlign:"left","&:last-child":{marginRight:"1rem"},"@sm":{margin:"0 1rem 0 0","&:last-child":{marginRight:"0"}},figure:{margin:"0",width:"161.8px","@sm":{width:"123px"},"> div":{position:"relative",display:"flex",backgroundColor:"$secondaryAlt",width:"inherit",height:"100px",overflow:"hidden",borderRadius:"3px",transition:"$all","@sm":{height:"76px"},img:{width:"100%",height:"100%",objectFit:"cover",filter:"blur(0)",transform:"scale3d(1, 1, 1)",transition:"$all",color:"transparent"},[`& ${oe}`]:{position:"absolute",right:"0.5rem",bottom:"0.5rem","@sm":{right:"0",bottom:"0"},[`& ${ve.Tag}`]:{margin:"0",paddingLeft:"0",fontSize:"0.7222rem",backgroundColor:"#000d",color:"$secondary",fill:"$secondary","@sm":{borderBottomLeftRadius:"0",borderTopRightRadius:"0"}}}},figcaption:{marginTop:"0.5rem",color:"$primaryMuted",fontWeight:"400",fontSize:"0.8333rem",display:"-webkit-box",overflow:"hidden",MozBoxOrient:"vertical",WebkitLineClamp:"5","@sm":{fontSize:"0.8333rem"}}},"&[aria-checked='true']":{figure:{"> div":{backgroundColor:"$primaryAlt","&::before":{position:"absolute",zIndex:"1",color:"$secondaryMuted",content:"Active Item",textTransform:"uppercase",fontWeight:"700",fontSize:"0.6111rem",letterSpacing:"0.03rem",display:"flex",width:"100%",height:"100%",flexDirection:"column",justifyContent:"center",textAlign:"center",textShadow:"5px 5px 5px #0003"},img:{opacity:"0.3",transform:"scale3d(1.1, 1.1, 1.1)",filter:"blur(2px)"},[`& ${oe}`]:{[`& ${ve.Tag}`]:{backgroundColor:"$accent"}}}},figcaption:{fontWeight:"700",color:"$primary"}}});var yr=({type:e})=>{switch(e){case"Sound":return b.default.createElement(z.Icon.Audio,null);case"Image":return b.default.createElement(z.Icon.Image,null);case"Video":return b.default.createElement(z.Icon.Video,null);default:return b.default.createElement(z.Icon.Image,null)}},xr=({canvas:e,canvasIndex:t,isActive:r,thumbnail:o,type:n,handleChange:a})=>{let i=k(e.label,"en");return b.default.createElement(Ye,{"aria-checked":r,"data-testid":"media-thumbnail","data-canvas":t,onClick:()=>a(e.id),value:e.id},b.default.createElement("figure",null,b.default.createElement("div",null,(o==null?void 0:o.id)&&b.default.createElement("img",{src:o.id,alt:i}),b.default.createElement(oe,null,b.default.createElement(z.Tag,{isIcon:!0},b.default.createElement(Qe,null),b.default.createElement(z.Icon,{"aria-label":n},b.default.createElement(yr,{type:n})),["Video","Sound"].includes(n)&&b.default.createElement(Xe,null,re(e.duration))))),b.default.createElement("figcaption",null,i)))},Je=xr;var et=e=>e.body?e.body[0].type:"Image";var u=d(require("react"));var Ce=s("div",{position:"absolute",right:"1rem",top:"1rem",display:"flex",justifyContent:"flex-end",zIndex:"1"}),tt=s("input",{flexGrow:"1",border:"none",backgroundColor:"$secondaryMuted",color:"$primary",marginRight:"1rem",height:"2rem",padding:"0 1rem",borderRadius:"2rem",fontFamily:"$sans",fontSize:"1rem",lineHeight:"1rem",boxShadow:"inset 1px 1px 2px #0003","&::placeholder":{color:"$primaryMuted"}}),_=s("button",{display:"flex",background:"none",border:"none",width:"2rem !important",height:"2rem !important",padding:"0",margin:"0",fontWeight:"700",borderRadius:"2rem",backgroundColor:"$accent",color:"$secondary",cursor:"pointer",boxSizing:"content-box !important",transition:"$all",svg:{height:"60%",width:"60%",padding:"20%",fill:"$secondary",stroke:"$secondary",opacity:"1",filter:"drop-shadow(5px 5px 5px #000D)",boxSizing:"inherit",transition:"$all"},"&:disabled":{backgroundColor:"transparent",boxShadow:"none",svg:{opacity:"0.25"}}}),rt=s("div",{display:"flex",marginRight:"0.618rem",backgroundColor:"$accentAlt",borderRadius:"2rem",boxShadow:"5px 5px 5px #0003",color:"$secondary",alignItems:"center","> span":{display:"flex",margin:"0 0.5rem",fontSize:"0.7222rem"},[`& ${_}`]:{}}),ot=s("div",{display:"flex",position:"relative",zIndex:"1",width:"100%",padding:"0",transition:"$all",variants:{isToggle:{true:{paddingTop:"2.618rem",[`& ${Ce}`]:{width:"calc(100% - 2rem)","@sm":{width:"calc(100% - 2rem)"}}}}}});var nt=d(require("react")),br=(e,t)=>{(0,nt.useEffect)(()=>{function r(o){o.key===e&&t()}return window.addEventListener("keyup",r),()=>window.removeEventListener("keyup",r)},[])},it=br;var vr=()=>u.default.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 512 512"},u.default.createElement("title",null,"Arrow Back"),u.default.createElement("path",{fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeMiterlimit:"10",strokeWidth:"45",d:"M244 400L100 256l144-144M120 256h292"})),Cr=()=>u.default.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 512 512"},u.default.createElement("title",null,"Arrow Forward"),u.default.createElement("path",{fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeMiterlimit:"10",strokeWidth:"45",d:"M268 112l144 144-144 144M392 256H100"})),wr=()=>u.default.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 512 512"},u.default.createElement("title",null,"Close"),u.default.createElement("path",{d:"M289.94 256l95-95A24 24 0 00351 127l-95 95-95-95a24 24 0 00-34 34l95 95-95 95a24 24 0 1034 34l95-95 95 95a24 24 0 0034-34z"})),Ir=()=>u.default.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 512 512"},u.default.createElement("title",null,"Search"),u.default.createElement("path",{d:"M456.69 421.39L362.6 327.3a173.81 173.81 0 0034.84-104.58C397.44 126.38 319.06 48 222.72 48S48 126.38 48 222.72s78.38 174.72 174.72 174.72A173.81 173.81 0 00327.3 362.6l94.09 94.09a25 25 0 0035.3-35.3zM97.92 222.72a124.8 124.8 0 11124.8 124.8 124.95 124.95 0 01-124.8-124.8z"})),kr=({handleCanvasToggle:e,handleFilter:t,activeIndex:r,canvasLength:o})=>{let[n,a]=(0,u.useState)(!1),[i,l]=(0,u.useState)(!1),[g,m]=(0,u.useState)(!1);(0,u.useEffect)(()=>{m(r===0),r===o-1?l(!0):l(!1)},[r]),it("Escape",()=>{a(!1),t("")});let p=()=>{a(h=>!h),t("")};return u.default.createElement(ot,{isToggle:n},u.default.createElement(Ce,null,n&&u.default.createElement(tt,{autoFocus:!0,onChange:h=>t(h.target.value),placeholder:"Search"}),!n&&u.default.createElement(rt,null,u.default.createElement(_,{onClick:()=>e(-1),disabled:g,type:"button"},u.default.createElement(vr,null)),u.default.createElement("span",null,r+1," of ",o),u.default.createElement(_,{onClick:()=>e(1),disabled:i,type:"button"},u.default.createElement(Cr,null))),u.default.createElement(_,{onClick:p,type:"button"},n?u.default.createElement(wr,null):u.default.createElement(Ir,null))))},at=kr;var Sr=({items:e})=>{let t=Y(),r=M(),{activeCanvas:o,vault:n}=r,[a,i]=(0,w.useState)(""),[l,g]=(0,w.useState)([]),[m,p]=(0,w.useState)(0),f=w.default.useRef(null),h="painting",P=["Image","Sound","Video"],x=c=>{o!==c&&t({type:"updateActiveCanvas",canvasId:c})};return(0,w.useEffect)(()=>{for(let c of e){let y=Z(n,c,h,P);y.annotations.length>0&&g(A=>[...A,y])}},[]),(0,w.useEffect)(()=>{l.forEach((c,y)=>{(c==null?void 0:c.canvas)&&c.canvas.id===o&&p(y)})},[o]),(0,w.useEffect)(()=>{let c=document.querySelector(`[data-canvas="${m}"]`);if(c instanceof HTMLElement&&f.current){let y=c.offsetLeft-f.current.offsetWidth/2+c.offsetWidth/2;f.current.scrollTo({left:y,behavior:"smooth"})}},[m]),w.default.createElement(w.default.Fragment,null,w.default.createElement(at,{handleFilter:c=>i(c),handleCanvasToggle:c=>{let y=l[m+c];(y==null?void 0:y.canvas)&&x(y.canvas.id)},activeIndex:m,canvasLength:l.length}),w.default.createElement(Ue,{"aria-label":"select item","data-testid":"media",ref:f},l.filter(c=>{var y;if((y=c.canvas)==null?void 0:y.label){let A=k(c.canvas.label);if(Array.isArray(A))return A[0].toLowerCase().includes(a.toLowerCase())}}).map((c,y)=>{var A,we;return w.default.createElement(Je,{canvas:c.canvas,canvasIndex:y,handleChange:x,isActive:o===((A=c==null?void 0:c.canvas)==null?void 0:A.id),key:(we=c==null?void 0:c.canvas)==null?void 0:we.id,thumbnail:ue(n,c,200,200),type:et(c.annotations[0])})})))},st=Sr;var T=d(require("react"));var N=d(require("@radix-ui/react-tabs"));var lt=s(N.Root,{display:"flex",flexDirection:"column",width:"100%",height:"100%",flexGrow:"1",flexShrink:"0",position:"relative",zIndex:"1",boxShadow:"-5px -5px 5px #00000011","@sm":{marginTop:"0.5rem",boxShadow:"none"},"&:after":{position:"absolute",bottom:0,content:"",width:"100%",height:"1rem",backgroundImage:"linear-gradient(0deg, #FFFFFF 0%, #FFFFFF00 100%)",zIndex:1,"@sm":{backgroundImage:"none"}}}),dt=s(N.List,{display:"flex",flexGrow:"0",margin:"0 1.618rem",borderBottom:"4px solid $secondaryAlt",backgroundColor:"$secondary","@sm":{margin:"0 1rem"}}),pt=s(N.Trigger,{display:"flex",position:"relative",padding:"0.5rem 1rem",background:"none",backgroundColor:"transparent",color:"$primaryMuted",border:"none",fontFamily:"inherit",fontSize:"1rem",marginRight:"1rem",lineHeight:"1rem",whiteSpace:"nowrap",cursor:"pointer",fontWeight:700,transition:"$all","&::after":{width:"0",height:"4px",content:"",backgroundColor:"$primaryMuted",position:"absolute",bottom:"-4px",left:"0",transition:"$all"},"&:hover":{color:"$primary"},"&[data-state='active']":{color:"$accent","&::after":{width:"100%",backgroundColor:"$accent"}}}),ct=s(N.Content,{display:"flex",flexGrow:"1",flexShrink:"0",position:"absolute",top:"0",left:"0","&[data-state='active']":{width:"100%",height:"calc(100% - 2rem)",padding:"1rem 0"}}),mt=s("div",{position:"relative",height:"100%",width:"100%",overflowY:"scroll"});var H=d(require("react"));var ne=d(require("@radix-ui/react-radio-group"));var ut=$e({from:{transform:"rotate(360deg)"},to:{transform:"rotate(0deg)"}}),ft=s(ne.Root,{display:"flex",flexDirection:"column",width:"100%"}),ie=s(ne.Item,{position:"relative",cursor:"pointer",display:"flex",width:"100%",justifyContent:"space-between",textAlign:"left",margin:"0",padding:"0.5rem 1.618rem",fontFamily:"inherit",lineHeight:"1.25em",fontSize:"1rem",color:"$primaryMuted",border:"none",background:"none","@sm":{padding:"0.5rem 1rem",fontSize:"0.8333rem"},"&::before":{content:"",width:"12px",height:"12px",borderRadius:"12px",position:"absolute",backgroundColor:"$primaryMuted",opacity:"0",left:"8px",marginTop:"3px",boxSizing:"content-box","@sm":{content:"unset"}},"&::after":{content:"",width:"4px",height:"6px",position:"absolute",backgroundColor:"$secondary",opacity:"0",clipPath:"polygon(100% 50%, 0 100%, 0 0)",left:"13px",marginTop:"6px",boxSizing:"content-box","@sm":{content:"unset"}},strong:{marginLeft:"1rem"},"&:hover":{color:"$accent","&::before":{backgroundColor:"$accent",opacity:"1"},"&::after":{content:"",width:"4px",height:"6px",position:"absolute",backgroundColor:"$secondary",clipPath:"polygon(100% 50%, 0 100%, 0 0)",opacity:"1"}},"&[aria-checked='true']":{color:"$primary",backgroundColor:"$secondaryMuted",fontFamily:"$sansBold","&::before":{content:"",width:"6px",height:"6px",position:"absolute",backgroundColor:"transparent",border:"3px solid $accentMuted",borderRadius:"12px",left:"8px",marginTop:"4px",opacity:"1",animation:"1s linear infinite",animationName:ut,boxSizing:"content-box","@sm":{content:"unset"}},"&::after":{content:"",width:"6px",height:"6px",position:"absolute",backgroundColor:"transparent",border:"3px solid $accent",clipPath:"polygon(100% 0, 100% 100%, 0 0)",borderRadius:"12px",left:"8px",marginTop:"4px",opacity:"1",animation:"1.5s linear infinite",animationName:ut,boxSizing:"content-box","@sm":{content:"unset"}}}});var gt=d(require("uuid")),Tr=()=>{function e(n){return n.map(i=>{let l=i.identifier||(0,gt.v4)();return R(C({},i),{identifier:l})})}function t(n){let a=e(n);function i(g,m){let p=[];return g.forEach(f=>{let P=g.filter(x=>f.start>=x.start&&f.end<=x.end&&f.identifier!==x.identifier).sort((x,j)=>{let B=x.end-x.start,c=j.end-j.start;return B===c?0:B<c?-1:1})[0];if(!P&&!m||(P==null?void 0:P.identifier)===m){let x=i(g,f.identifier);x.length&&(f.children=x),p.push(f)}}),p}return i(a,null)}function r(n,a=[]){return a.some(i=>n.start>=i.start&&n.end<=i.end)}function o(n=[]){return n.sort((a,i)=>a.start-i.start)}return{addIdentifiersToParsedCues:e,createNestedCues:t,isChild:r,orderCuesByTime:o}},ht=Tr;var Q=d(require("react"));var ae=d(require("react"));var U=d(require("react")),yt={currentTime:0,startTime:0,updateStartTime:()=>{},updateCurrentTime:()=>{}},q=U.default.createContext(yt),xt=({children:e})=>{let[t,r]=U.default.useState(yt.currentTime),[o,n]=U.default.useState(0),a=l=>n(l),i=l=>r(l);return U.default.createElement(q.Provider,{value:{currentTime:t,startTime:o,updateStartTime:a,updateCurrentTime:i}},e)};var Fr=({label:e,start:t,end:r})=>{let{currentTime:o,updateStartTime:n}=ae.default.useContext(q),a=t<=o&&o<r;return ae.default.createElement(ie,{"aria-checked":a,"data-testid":"navigator-cue",onClick:()=>{n(t)},value:e},e,ae.default.createElement("strong",null,re(t)))},bt=Fr;var vt=s("ul",{listStyle:"none",paddingLeft:"1rem",position:"relative","&&:first-child":{paddingLeft:"0"},"& li ul":{[`& ${ie}`]:{backgroundColor:"unset","&::before":{content:"none"},"&::after":{content:"none"}}},"&:first-child":{margin:"0 0 1.618rem"}});var Ct=({items:e})=>Q.default.createElement(vt,null,e.map(({text:t,start:r,end:o,children:n,identifier:a})=>Q.default.createElement("li",{key:a},Q.default.createElement(bt,{label:t,start:r,end:o}),n&&Q.default.createElement(Ct,{items:n})))),wt=Ct;var It=d(require("node-webvtt")),Er=({resource:e})=>{let[t,r]=H.default.useState([]),{id:o,label:n}=e,{createNestedCues:a,orderCuesByTime:i}=ht();return(0,H.useEffect)(()=>{fetch(o,{headers:{"Content-Type":"text/plain",Accept:"application/json"}}).then(l=>l.text()).then(l=>{let g=(0,It.parse)(l).cues,m=i(g),p=a(m);r(p)}).catch(l=>console.error(o,l.toString()))},[o]),H.default.createElement(ft,{"aria-label":`navigate ${k(n,"en")}`},H.default.createElement(wt,{items:t}))},kt=Er;var Vr=({activeCanvas:e,defaultResource:t,resources:r})=>{let[o,n]=(0,T.useState)(t);(0,T.useEffect)(()=>{n(t)},[e,r]);let a=i=>{n(i)};return r?T.default.createElement(lt,{"data-testid":"navigator",defaultValue:t,onValueChange:a,orientation:"horizontal",value:o},T.default.createElement(dt,{"aria-label":"select chapter","data-testid":"navigator-list"},r.map(({id:i,label:l})=>T.default.createElement(pt,{key:i,value:i},k(l,"en")))),T.default.createElement(mt,null,r.map(i=>T.default.createElement(ct,{key:i.id,value:i.id},T.default.createElement(kt,{resource:i}))))):T.default.createElement(T.default.Fragment,null)},St=Vr;var $=d(require("react")),G=d(require("hls.js"));var Tt=s("div",{position:"relative",backgroundColor:"$primaryAlt",display:"flex",flexGrow:"0",flexShrink:"1",maxHeight:"450px",zIndex:"1",video:{backgroundColor:"transparent",display:"flex",position:"relative",objectFit:"contain",width:"100%",height:"100%",zIndex:"1"}});var X=d(require("react"));var Ft=s("canvas",{position:"absolute",width:"100%",height:"100%"});var Pr=X.default.forwardRef((e,t)=>{let r=X.default.useRef(null);X.default.useEffect(()=>{!t||(t.current.onplay=o)},[t]);function o(){let a=t.current,i=new AudioContext,l=i.createMediaElementSource(a),g=i.createAnalyser(),m=r.current;if(!m)return;m.width=a.offsetWidth,m.height=a.offsetHeight;let p=m.getContext("2d");l.connect(g),g.connect(i.destination),g.fftSize=256;let f=g.frequencyBinCount,h=new Uint8Array(f);setInterval(function(){n(g,p,f,h,m.width,m.height)},20)}function n(a,i,l,g,m,p){let f=m/l*2.6,h,P=0;a.getByteFrequencyData(g),i.fillStyle="#000000",i.fillRect(0,0,m,p);for(let x=0;x<l;x++)h=g[x]*2,i.fillStyle=`rgba(${78}, 42, 132, 1)`,i.fillRect(P,p-h,f,h),P+=f+6}return X.default.createElement(Ft,{ref:r})}),Et=Pr;var Vt=d(require("react"));var Ar=({resource:e,ignoreCaptionLabels:t})=>k(e.label,"en").some(n=>t.includes(n))?null:Vt.default.createElement("track",{key:e.id,src:e.id,label:k(e.label,"en"),srcLang:"en","data-testid":"player-track"}),Pt=Ar;var Mr=({painting:e,resources:t})=>{var m;let r=M(),{configOptions:o}=r,n=$.default.useRef(null),a=(m=e==null?void 0:e.format)==null?void 0:m.includes("audio/"),{startTime:i,updateCurrentTime:l}=$.default.useContext(q);$.default.useEffect(()=>{if(!e.id||!n.current||e.id.split(".").pop()!=="m3u8")return;let p=new G.default;return p.attachMedia(n.current),p.on(G.default.Events.MEDIA_ATTACHED,function(){p.loadSource(e.id)}),p.on(G.default.Events.ERROR,function(f,h){if(h.fatal)switch(h.type){case G.default.ErrorTypes.NETWORK_ERROR:console.error(`fatal ${f} network error encountered, try to recover`),p.startLoad();break;case G.default.ErrorTypes.MEDIA_ERROR:console.error(`fatal ${f} media error encountered, try to recover`),p.recoverMediaError();break;default:p.destroy();break}}),()=>{p&&(p.detachMedia(),p.destroy(),l(0))}},[e.id]),$.default.useEffect(()=>{let p=n.current;p&&(p.currentTime=i),i!==0&&p.play()},[i]);let g=()=>{let p=n.current;p&&(p.ontimeupdate=f=>{l(f.target.currentTime)})};return $.default.createElement(Tt,null,$.default.createElement("video",{id:"react-media-player",key:e.id,ref:n,controls:!0,height:e.height,width:e.width,onPlay:g,crossOrigin:"anonymous"},$.default.createElement("source",{src:e.id,type:e.format}),t.length>0&&t.map(p=>$.default.createElement(Pt,{resource:p,ignoreCaptionLabels:o.ignoreCaptionLabels,key:p.id})),"Sorry, your browser doesn't support embedded videos."),a&&$.default.createElement(Et,{ref:n}))},At=Mr;var V=d(require("react")),Ot=d(require("openseadragon"));var Mt=s("div",{position:"absolute !important",zIndex:"1",top:"1rem",left:"1rem",width:"161.8px",height:"100px",backgroundColor:"#000D",boxShadow:"5px 5px 5px #0002",borderRadius:"3px","#openseadragon-navigator-displayregion":{border:" 3px solid $accent !important",boxShadow:"0 0 3px #0006"},"@sm":{width:"123px",height:"76px"}}),$t=s("div",{position:"relative",width:"100%",height:"100%",zIndex:"0"}),Wt=s("div",{width:"100%",height:"450px",background:"black",backgroundSize:"contain",color:"white",position:"relative",zIndex:"1",overflow:"hidden"});var S=d(require("react"));var se=d(require("react"));var Lt=d(require("@stitches/react")),zt=(0,Lt.styled)("button",{display:"flex",height:"2rem",width:"2rem",borderRadius:"2rem",padding:"0",margin:"0",fontFamily:"inherit",background:"none",border:"none",color:"white",cursor:"pointer",marginLeft:"0.618rem",backgroundColor:"#000D",filter:"drop-shadow(5px 5px 5px #0006)",transition:"$all",boxSizing:"content-box !important",svg:{height:"60%",width:"60%",padding:"20%",fill:"$secondary",stroke:"$secondary",filter:"drop-shadow(5px 5px 5px #000D)",transition:"$all",boxSizing:"inherit"},"&:hover, &:focus":{backgroundColor:"$accent"},"&#zoomReset":{"&:hover, &:focus":{svg:{rotate:"45deg"}}}});var $r=({id:e,label:t,children:r})=>se.default.createElement(zt,{id:e,"data-testid":"openseadragon-button"},se.default.createElement("svg",{xmlns:"http://www.w3.org/2000/svg","aria-labelledby":`${e}-svg-title`,"data-testid":"openseadragon-button-svg",focusable:"false",viewBox:"0 0 512 512",role:"img"},se.default.createElement("title",{id:`${e}-svg-title`},t),r)),le=$r;var Nt=d(require("@stitches/react")),Bt=(0,Nt.styled)("div",{position:"absolute",zIndex:"1",top:"1rem",right:"1rem"});var Wr=()=>S.default.createElement(Bt,{"data-testid":"openseadragon-controls",id:"openseadragon-controls"},S.default.createElement(le,{id:"zoomIn",label:"zoom in"},S.default.createElement(()=>S.default.createElement("path",{strokeLinecap:"round",strokeMiterlimit:"10",strokeWidth:"45",d:"M256 112v288M400 256H112"}),null)),S.default.createElement(le,{id:"zoomOut",label:"zoom in"},S.default.createElement(()=>S.default.createElement("path",{strokeLinecap:"round",strokeMiterlimit:"10",strokeWidth:"45",d:"M400 256H112"}),null)),S.default.createElement(le,{id:"zoomReset",label:"reset zoom"},S.default.createElement(()=>S.default.createElement(S.default.Fragment,null,S.default.createElement("path",{fill:"none",strokeLinecap:"round",strokeMiterlimit:"10",strokeWidth:"45",d:"M400 148l-21.12-24.57A191.43 191.43 0 00240 64C134 64 48 150 48 256s86 192 192 192a192.09 192.09 0 00181.07-128"}),S.default.createElement("path",{d:"M464 97.42V208a16 16 0 01-16 16H337.42c-14.26 0-21.4-17.23-11.32-27.31L436.69 86.1C446.77 76 464 83.16 464 97.42z"})),null))),Rt=Wr;var Dt=e=>fetch(`${e.replace(/\/$/,"")}/info.json`).then(t=>t.json()).then(t=>t).catch(t=>{console.error(`The IIIF tilesource ${e.replace(/\/$/,"")}/info.json failed to load: ${t}`)});var Lr=({service:e})=>{let[t,r]=(0,V.useState)(),[o,n]=(0,V.useState)();(0,V.useEffect)(()=>(a(),()=>{t==null||t.destroy()}),[]),(0,V.useEffect)(()=>{Array.isArray(e)&&n(e[0])},[e]),(0,V.useEffect)(()=>{o&&Dt(o.id).then(i=>t==null?void 0:t.open(i))},[t,o]);function a(){let i={homeButton:"zoomReset",showFullPageControl:!1,zoomInButton:"zoomIn",zoomOutButton:"zoomOut"},l={showNavigator:!0,navigatorBorderColor:"transparent",navigatorId:"openseadragon-navigator"};r((0,Ot.default)(C(C({id:"openseadragon-viewport",loadTilesWithAjax:!0},i),l)))}return V.default.createElement(Wt,{"data-testid":"image-viewer"},V.default.createElement(Rt,null),V.default.createElement(Mt,{id:"openseadragon-navigator"}),V.default.createElement($t,{id:"openseadragon-viewport"}))},Ht=Lr;var Gt=d(require("@nulib/design-system"));var zr=({activeCanvas:e,painting:t,resources:r,items:o,isMedia:n,isNavigator:a,isNavigatorOpen:i})=>F.default.createElement(he,null,F.default.createElement(xt,null,F.default.createElement(ye,null,n?F.default.createElement(At,{painting:t,resources:r}):F.default.createElement(Ht,C({},t)),F.default.createElement(We,{"data-navigator":a},F.default.createElement(Gt.Button,{as:"span"},i?"View Media Items":"View Navigator")),o.length>1&&F.default.createElement(ge,null,F.default.createElement(st,{items:o,activeItem:0}))),a&&F.default.createElement(Le,null,F.default.createElement(xe,null,F.default.createElement(St,{activeCanvas:e,defaultResource:r[0].id,resources:r}))))),jt=zr;var de=d(require("react"));var Kt=s("div",{display:"flex",flexDirection:"column",alignItems:"center"}),Zt=s("p",{fontFamily:"$display",fontWeight:"bold",fontSize:"x-large"}),_t=s("span",{fontSize:"medium"});var Nr=({error:e})=>{let{message:t}=e;return de.default.createElement(Kt,{role:"alert"},de.default.createElement(Zt,{"data-testid":"headline"},"Something went wrong"),t&&de.default.createElement(_t,null,`Error message: ${t}`," "))},Ut=Nr;var Qt=d(require("react-error-boundary")),Br=({manifest:e,theme:t})=>{let r=M(),{activeCanvas:o,vault:n}=r,[a,i]=(0,v.useState)(!1),[l,g]=(0,v.useState)(!1),[m,p]=(0,v.useState)(!0),[f,h]=(0,v.useState)(void 0),[P,x]=(0,v.useState)([]),[j,B]=Be(!1),c=Ne(fe.sm);return(0,v.useEffect)(()=>{if(!c){p(!0);return}p(!1)},[c]),(0,v.useEffect)(()=>{if(!c){B(!1);return}B(m)},[m]),(0,v.useEffect)(()=>{let y=ce(n,o),A=me(n,o,"text/vtt");y&&(i(["Sound","Video"].indexOf(y.type)>-1),h(C({},y))),x(A),g(A.length!==0)},[o]),v.default.createElement(Qt.ErrorBoundary,{FallbackComponent:Ut},v.default.createElement(ze,{className:t,"data-body-locked":j,"data-navigator":l,"data-navigator-open":m},v.default.createElement(qt.Root,{open:m,onOpenChange:p},v.default.createElement(Ze,{manifestLabel:e.label,manifestId:e.id}),v.default.createElement(jt,{activeCanvas:o,painting:f,resources:P,items:e.items,isMedia:a,isNavigator:l,isNavigatorOpen:m}))))},Xt=Br;var Yt=d(require("@stitches/react")),Rr=({manifestId:e,canvasIdCallback:t=()=>{},customTheme:r,options:o})=>I.default.createElement(Ae,null,I.default.createElement(Dr,{manifestId:e,canvasIdCallback:t,customTheme:r,options:o})),Dr=({manifestId:e,canvasIdCallback:t,customTheme:r,options:o})=>{let n=Y(),a=M(),{activeCanvas:i,isLoaded:l,vault:g}=a,[m,p]=(0,I.useState)(),f={};return r&&(f=(0,Yt.createTheme)("custom",r)),(0,I.useEffect)(()=>{t&&t(i)},[i]),(0,I.useEffect)(()=>{n({type:"updateConfigOptions",configOptions:o}),g.loadManifest(e).then(h=>{p(h),n({type:"updateActiveCanvas",canvasId:h.items[0]&&h.items[0].id})}).catch(h=>{console.error(`Manifest failed to load: ${h}`)}).finally(()=>{n({type:"updateIsLoaded",isLoaded:!0})})},[]),l?!m||!m.items?(console.log(`The IIIF manifest ${e} failed to load.`),I.default.createElement(I.default.Fragment,null)):m.items.length===0?(console.log(`The IIIF manifest ${e} does not contain canvases.`),I.default.createElement(I.default.Fragment,null)):I.default.createElement(Xt,{manifest:m,theme:f}):I.default.createElement(I.default.Fragment,null,"Loading")},Or=Rr;
//# sourceMappingURL=index.cjs.js.map