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

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

var Lt=Object.defineProperty,zt=Object.defineProperties;var Nt=Object.getOwnPropertyDescriptors;var be=Object.getOwnPropertySymbols;var Bt=Object.prototype.hasOwnProperty,Rt=Object.prototype.propertyIsEnumerable;var ve=(e,t,r)=>t in e?Lt(e,t,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[t]=r,x=(e,t)=>{for(var r in t||(t={}))Bt.call(t,r)&&ve(e,r,t[r]);if(be)for(var r of be(t))Rt.call(t,r)&&ve(e,r,t[r]);return e},$=(e,t)=>zt(e,Nt(t));import E,{useEffect as Wt,useState as Jr}from"react";import A from"react";import{Vault as Dt}from"@hyperion-framework/vault";var Ce={showTitle:!0,showIIIFBadge:!0,ignoreCaptionLabels:[]},Y={activeCanvas:"",configOptions:Ce,isLoaded:!1,vault:new Dt},we=A.createContext(Y),Ie=A.createContext(Y);function Ot(e,t){switch(t.type){case"updateActiveCanvas":return t.canvasId||(t.canvasId=""),$(x({},e),{activeCanvas:t.canvasId});case"updateConfigOptions":return $(x({},e),{configOptions:x(x({},Ce),t.configOptions)});case"updateIsLoaded":return $(x({},e),{isLoaded:t.isLoaded});default:throw new Error(`Unhandled action type: ${t.type}`)}}var ke=({initialState:e=Y,children:t})=>{let[r,n]=A.useReducer(Ot,e);return A.createElement(we.Provider,{value:r},A.createElement(Ie.Provider,{value:n},t))};function T(){let e=A.useContext(we);if(e===void 0)throw new Error("useViewerState must be used within a ViewerProvider");return e}function G(){let e=A.useContext(Ie);if(e===void 0)throw new Error("useViewerDispatch must be used within a ViewerProvider");return e}import O,{useEffect as ye,useState as H}from"react";var z=(e,t,r,n)=>{let o={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"&&n.includes(l[0].type)&&(i.body=l),i;case"supplementing":return;default:throw new Error("Invalid annotation motivation.")}}};return o.canvas=e.fromRef(t),o.canvas&&(o.annotationPage=e.fromRef(o.canvas.items[0])),o.annotationPage&&(o.annotations=e.allFromRef(o.annotationPage.items).filter(a)),o};var J=(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 ee=(e,t,r)=>{let n=e.fromRef({id:t,type:"Canvas"});if(!(n==null?void 0:n.annotations)||!n.annotations[0])return[];let o=e.fromRef(n.annotations[0]),a=e.allFromRef(o.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 v=(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 te=(e,t,r,n)=>{let o=[];if(t.canvas&&t.canvas.thumbnail.length>0){let l=e.fromRef(t.canvas.thumbnail[0]);o.push(l)}if(t.annotations[0]){if(t.annotations[0].thumbnail&&t.annotations[0].thumbnail.length>0){let u=e.fromRef(t.annotations[0].thumbnail[0]);o.push(u)}let l=e.allFromRef(t.annotations[0].body);l[0].type==="Image"&&o.push(l[0])}return o.length===0?void 0:{id:o[0].id,format:o[0].format,type:o[0].type,width:r,height:n}};import{createStitches as Ht}from"@stitches/react";var Gt={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)"}},re={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:Co,keyframes:Se,createTheme:wo}=Ht({theme:Gt,media:re});import{Content as Kt,Trigger as jt}from"@radix-ui/react-collapsible";var oe=s("div",{position:"relative",zIndex:"0"}),ne=s("div",{display:"flex",flexDirection:"row",overflow:"hidden","@sm":{flexDirection:"column"}}),ie=s("div",{display:"flex",flexDirection:"column",flexGrow:"1",flexShrink:"1",width:"61.8%","@sm":{width:"100%"}}),Te=s(jt,{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"}}}),ae=s(Kt,{width:"100%",display:"flex"}),Fe=s("aside",{display:"flex",flexGrow:"1",flexShrink:"0",width:"38.2%","@sm":{width:"100%"}}),Ee=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":{[`& ${ne}`]:{flexGrow:"1"},[`& ${ie}`]:{flexGrow:"0"}}},"@sm":{padding:"0"},"&[data-navigator-open='true']":{"@sm":{position:"fixed",height:"100%",width:"100%",top:"0",left:"0",zIndex:"2500000000",[`& ${oe}`]:{display:"none"},[`& ${ae}`]:{height:"100%"}}}});import{useEffect as Zt,useState as _t}from"react";var Ve=e=>{let t=()=>window.matchMedia?window.matchMedia(e).matches:!1,[r,n]=_t(t);return Zt(()=>{let o=()=>n(t);return window.addEventListener("resize",o),()=>window.removeEventListener("resize",o)}),r};import{useEffect as Ut,useLayoutEffect as qt,useState as Qt}from"react";var Pe=(e=!1)=>{let[t,r]=Qt(e);return qt(()=>{if(!t)return;let n=document.documentElement.style.overflow;return document.documentElement.style.overflow="hidden",()=>{document.documentElement.style.overflow=n}},[t]),Ut(()=>{t!==e&&r(e)},[e]),[t,r]};import{Root as Yr}from"@radix-ui/react-collapsible";import V from"react";import{Popover as Ae}from"@nulib/design-system";var Me=s(Ae.Trigger,{width:"30px",padding:"5px"}),$e=s(Ae.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"}}}),We=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"}}});import{Popover as nr}from"@nulib/design-system";import k from"react";var Xt=()=>{let e="#ed1d33",t="#2873ab";return k.createElement("svg",{viewBox:"0 0 493.35999 441.33334",id:"iiif-logo",version:"1.1"},k.createElement("title",null,"IIIF Manifest Options"),k.createElement("g",{transform:"matrix(1.3333333,0,0,-1.3333333,0,441.33333)"},k.createElement("g",{transform:"scale(0.1)"},k.createElement("path",{style:{fill:t},d:"M 65.2422,2178.75 775.242,1915 773.992,15 65.2422,276.25 v 1902.5"}),k.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"}),k.createElement("path",{style:{fill:e},d:"M 1678.58,2178.75 968.578,1915 969.828,15 1678.58,276.25 v 1902.5"}),k.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"}),k.createElement("path",{style:{fill:t},d:"m 1860.24,2178.75 710,-263.75 -1.25,-1900 -708.75,261.25 v 1902.5"}),k.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"}),k.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"}))))},Le=Xt;import se from"react";import{useCallback as Yt,useEffect as Jt,useState as er}from"react";var ze=(e,t=2500)=>{let[r,n]=er(),o=Yt(()=>{navigator.clipboard.writeText(e).then(()=>n("copied"),()=>n("failed"))},[e]);return Jt(()=>{if(!r)return;let a=setTimeout(()=>n(void 0),t);return()=>clearTimeout(a)},[r]),[r,o]};var tr=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"}),rr=({status:e})=>e?se.createElement(tr,{"data-copy-status":e},e):null,or=({textPrompt:e,textToCopy:t})=>{let[r,n]=ze(t);return se.createElement("button",{onClick:n},e," ",se.createElement(rr,{status:r}))},Ne=or;var ir=({manifestId:e,manifestLabel:t})=>{let r=T(),{configOptions:n}=r;return V.createElement(We,null,n.showTitle&&V.createElement("span",null,v(t,"en")),n.showIIIFBadge&&V.createElement(nr,null,V.createElement(Me,null,V.createElement(Le,null)),V.createElement($e,null,V.createElement("button",{onClick:o=>{o.preventDefault(),window.open(e,"_blank")}},"View Manifest"),V.createElement(Ne,{textPrompt:"Copy Manifest URL",textToCopy:e}))))},Be=ir;import w from"react";import W,{useEffect as pe,useState as ce}from"react";import{Root as ar}from"@radix-ui/react-radio-group";var Re=s(ar,{display:"flex",flexDirection:"row",flexGrow:"1",padding:"1.618rem 0.618rem 1.618rem 0 ",overflowX:"scroll",position:"relative",zIndex:"0","@sm":{padding:"1rem"}});import b from"react";var sr=e=>{var t=e.toString().split(":"),r=Math.ceil(parseInt(t[0])),n=Math.ceil(parseInt(t[1])),o=lr(Math.ceil(parseInt(t[2])),2);let a=`${n}:${o}`;return r!==0&&(a=`${r}:${a}`),a},j=e=>{let t=new Date(e*1e3).toISOString().substr(11,8);return sr(t)};var lr=(e,t)=>String(e).padStart(t,"0");import{Icon as N,Tag as pr}from"@nulib/design-system";import{Item as dr}from"@radix-ui/react-radio-group";import{Tag as De}from"@nulib/design-system";var K=s("span",{display:"flex"}),Oe=s("span",{display:"flex",width:"1.2111rem",height:"0.7222rem"}),He=s("span",{display:"inline-flex",marginLeft:"5px",marginBottom:"-1px"}),Ge=s(dr,{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"},[`& ${K}`]:{position:"absolute",right:"0.5rem",bottom:"0.5rem","@sm":{right:"0",bottom:"0"},[`& ${De}`]:{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)"},[`& ${K}`]:{[`& ${De}`]:{backgroundColor:"$accent"}}}},figcaption:{fontWeight:"700",color:"$primary"}}});var cr=({type:e})=>{switch(e){case"Sound":return b.createElement(N.Audio,null);case"Image":return b.createElement(N.Image,null);case"Video":return b.createElement(N.Video,null);default:return b.createElement(N.Image,null)}},mr=({canvas:e,canvasIndex:t,isActive:r,thumbnail:n,type:o,handleChange:a})=>{let i=v(e.label,"en");return b.createElement(Ge,{"aria-checked":r,"data-testid":"media-thumbnail","data-canvas":t,onClick:()=>a(e.id),value:e.id},b.createElement("figure",null,b.createElement("div",null,(n==null?void 0:n.id)&&b.createElement("img",{src:n.id,alt:i}),b.createElement(K,null,b.createElement(pr,{isIcon:!0},b.createElement(Oe,null),b.createElement(N,{"aria-label":o},b.createElement(cr,{type:o})),["Video","Sound"].includes(o)&&b.createElement(He,null,j(e.duration))))),b.createElement("figcaption",null,i)))},je=mr;var Ke=e=>e.body?e.body[0].type:"Image";import f,{useEffect as gr,useState as de}from"react";var le=s("div",{position:"absolute",right:"1rem",top:"1rem",display:"flex",justifyContent:"flex-end",zIndex:"1"}),Ze=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"}}),B=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"}}}),_e=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"},[`& ${B}`]:{}}),Ue=s("div",{display:"flex",position:"relative",zIndex:"1",width:"100%",padding:"0",transition:"$all",variants:{isToggle:{true:{paddingTop:"2.618rem",[`& ${le}`]:{width:"calc(100% - 2rem)","@sm":{width:"calc(100% - 2rem)"}}}}}});import{useEffect as ur}from"react";var fr=(e,t)=>{ur(()=>{function r(n){n.key===e&&t()}return window.addEventListener("keyup",r),()=>window.removeEventListener("keyup",r)},[])},qe=fr;var hr=()=>f.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 512 512"},f.createElement("title",null,"Arrow Back"),f.createElement("path",{fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeMiterlimit:"10",strokeWidth:"45",d:"M244 400L100 256l144-144M120 256h292"})),yr=()=>f.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 512 512"},f.createElement("title",null,"Arrow Forward"),f.createElement("path",{fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeMiterlimit:"10",strokeWidth:"45",d:"M268 112l144 144-144 144M392 256H100"})),xr=()=>f.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 512 512"},f.createElement("title",null,"Close"),f.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"})),br=()=>f.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 512 512"},f.createElement("title",null,"Search"),f.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"})),vr=({handleCanvasToggle:e,handleFilter:t,activeIndex:r,canvasLength:n})=>{let[o,a]=de(!1),[i,l]=de(!1),[u,c]=de(!1);gr(()=>{c(r===0),r===n-1?l(!0):l(!1)},[r]),qe("Escape",()=>{a(!1),t("")});let d=()=>{a(g=>!g),t("")};return f.createElement(Ue,{isToggle:o},f.createElement(le,null,o&&f.createElement(Ze,{autoFocus:!0,onChange:g=>t(g.target.value),placeholder:"Search"}),!o&&f.createElement(_e,null,f.createElement(B,{onClick:()=>e(-1),disabled:u,type:"button"},f.createElement(hr,null)),f.createElement("span",null,r+1," of ",n),f.createElement(B,{onClick:()=>e(1),disabled:i,type:"button"},f.createElement(yr,null))),f.createElement(B,{onClick:d,type:"button"},o?f.createElement(xr,null):f.createElement(br,null))))},Qe=vr;var Cr=({items:e})=>{let t=G(),r=T(),{activeCanvas:n,vault:o}=r,[a,i]=ce(""),[l,u]=ce([]),[c,d]=ce(0),m=W.useRef(null),g="painting",I=["Image","Sound","Video"],y=p=>{n!==p&&t({type:"updateActiveCanvas",canvasId:p})};return pe(()=>{for(let p of e){let h=z(o,p,g,I);h.annotations.length>0&&u(S=>[...S,h])}},[]),pe(()=>{l.forEach((p,h)=>{(p==null?void 0:p.canvas)&&p.canvas.id===n&&d(h)})},[n]),pe(()=>{let p=document.querySelector(`[data-canvas="${c}"]`);if(p instanceof HTMLElement&&m.current){let h=p.offsetLeft-m.current.offsetWidth/2+p.offsetWidth/2;m.current.scrollTo({left:h,behavior:"smooth"})}},[c]),W.createElement(W.Fragment,null,W.createElement(Qe,{handleFilter:p=>i(p),handleCanvasToggle:p=>{let h=l[c+p];(h==null?void 0:h.canvas)&&y(h.canvas.id)},activeIndex:c,canvasLength:l.length}),W.createElement(Re,{"aria-label":"select item","data-testid":"media",ref:m},l.filter(p=>{var h;if((h=p.canvas)==null?void 0:h.label){let S=v(p.canvas.label);if(Array.isArray(S))return S[0].toLowerCase().includes(a.toLowerCase())}}).map((p,h)=>{var S,xe;return W.createElement(je,{canvas:p.canvas,canvasIndex:h,handleChange:y,isActive:n===((S=p==null?void 0:p.canvas)==null?void 0:S.id),key:(xe=p==null?void 0:p.canvas)==null?void 0:xe.id,thumbnail:te(o,p,200,200),type:Ke(p.annotations[0])})})))},Xe=Cr;import P,{useEffect as Wr,useState as Lr}from"react";import{Content as Sr,List as Ir,Root as wr,Trigger as kr}from"@radix-ui/react-tabs";var Ye=s(wr,{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"}}}),Je=s(Ir,{display:"flex",flexGrow:"0",margin:"0 1.618rem",borderBottom:"4px solid $secondaryAlt",backgroundColor:"$secondary","@sm":{margin:"0 1rem"}}),et=s(kr,{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"}}}),tt=s(Sr,{display:"flex",flexGrow:"1",flexShrink:"0",position:"absolute",top:"0",left:"0","&[data-state='active']":{width:"100%",height:"calc(100% - 2rem)",padding:"1rem 0"}}),rt=s("div",{position:"relative",height:"100%",width:"100%",overflowY:"scroll"});import ue,{useEffect as Ar}from"react";import{Item as Fr,Root as Tr}from"@radix-ui/react-radio-group";var ot=Se({from:{transform:"rotate(360deg)"},to:{transform:"rotate(0deg)"}}),nt=s(Tr,{display:"flex",flexDirection:"column",width:"100%"}),Z=s(Fr,{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:ot,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:ot,boxSizing:"content-box","@sm":{content:"unset"}}}});import{v4 as Er}from"uuid";var Vr=()=>{function e(o){return o.map(i=>{let l=i.identifier||Er();return $(x({},i),{identifier:l})})}function t(o){let a=e(o);function i(u,c){let d=[];return u.forEach(m=>{let I=u.filter(y=>m.start>=y.start&&m.end<=y.end&&m.identifier!==y.identifier).sort((y,L)=>{let M=y.end-y.start,p=L.end-L.start;return M===p?0:M<p?-1:1})[0];if(!I&&!c||(I==null?void 0:I.identifier)===c){let y=i(u,m.identifier);y.length&&(m.children=y),d.push(m)}}),d}return i(a,null)}function r(o,a=[]){return a.some(i=>o.start>=i.start&&o.end<=i.end)}function n(o=[]){return o.sort((a,i)=>a.start-i.start)}return{addIdentifiersToParsedCues:e,createNestedCues:t,isChild:r,orderCuesByTime:n}},it=Vr;import U from"react";import me from"react";import _ from"react";var at={currentTime:0,startTime:0,updateStartTime:()=>{},updateCurrentTime:()=>{}},R=_.createContext(at),st=({children:e})=>{let[t,r]=_.useState(at.currentTime),[n,o]=_.useState(0),a=l=>o(l),i=l=>r(l);return _.createElement(R.Provider,{value:{currentTime:t,startTime:n,updateStartTime:a,updateCurrentTime:i}},e)};var Pr=({label:e,start:t,end:r})=>{let{currentTime:n,updateStartTime:o}=me.useContext(R),a=t<=n&&n<r;return me.createElement(Z,{"aria-checked":a,"data-testid":"navigator-cue",onClick:()=>{o(t)},value:e},e,me.createElement("strong",null,j(t)))},lt=Pr;var dt=s("ul",{listStyle:"none",paddingLeft:"1rem",position:"relative","&&:first-child":{paddingLeft:"0"},"& li ul":{[`& ${Z}`]:{backgroundColor:"unset","&::before":{content:"none"},"&::after":{content:"none"}}},"&:first-child":{margin:"0 0 1.618rem"}});var pt=({items:e})=>U.createElement(dt,null,e.map(({text:t,start:r,end:n,children:o,identifier:a})=>U.createElement("li",{key:a},U.createElement(lt,{label:t,start:r,end:n}),o&&U.createElement(pt,{items:o})))),ct=pt;import{parse as Mr}from"node-webvtt";var $r=({resource:e})=>{let[t,r]=ue.useState([]),{id:n,label:o}=e,{createNestedCues:a,orderCuesByTime:i}=it();return Ar(()=>{fetch(n,{headers:{"Content-Type":"text/plain",Accept:"application/json"}}).then(l=>l.text()).then(l=>{let u=Mr(l).cues,c=i(u),d=a(c);r(d)}).catch(l=>console.error(n,l.toString()))},[n]),ue.createElement(nt,{"aria-label":`navigate ${v(o,"en")}`},ue.createElement(ct,{items:t}))},mt=$r;var zr=({activeCanvas:e,defaultResource:t,resources:r})=>{let[n,o]=Lr(t);Wr(()=>{o(t)},[e,r]);let a=i=>{o(i)};return r?P.createElement(Ye,{"data-testid":"navigator",defaultValue:t,onValueChange:a,orientation:"horizontal",value:n},P.createElement(Je,{"aria-label":"select chapter","data-testid":"navigator-list"},r.map(({id:i,label:l})=>P.createElement(et,{key:i,value:i},v(l,"en")))),P.createElement(rt,null,r.map(i=>P.createElement(tt,{key:i.id,value:i.id},P.createElement(mt,{resource:i}))))):P.createElement(P.Fragment,null)},ut=zr;import F from"react";import D from"hls.js";var ft=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"}});import q from"react";var gt=s("canvas",{position:"absolute",width:"100%",height:"100%"});var Nr=q.forwardRef((e,t)=>{let r=q.useRef(null);q.useEffect(()=>{!t||(t.current.onplay=n)},[t]);function n(){let a=t.current,i=new AudioContext,l=i.createMediaElementSource(a),u=i.createAnalyser(),c=r.current;if(!c)return;c.width=a.offsetWidth,c.height=a.offsetHeight;let d=c.getContext("2d");l.connect(u),u.connect(i.destination),u.fftSize=256;let m=u.frequencyBinCount,g=new Uint8Array(m);setInterval(function(){o(u,d,m,g,c.width,c.height)},20)}function o(a,i,l,u,c,d){let m=c/l*2.6,g,I=0;a.getByteFrequencyData(u),i.fillStyle="#000000",i.fillRect(0,0,c,d);for(let y=0;y<l;y++)g=u[y]*2,i.fillStyle=`rgba(${78}, 42, 132, 1)`,i.fillRect(I,d-g,m,g),I+=m+6}return q.createElement(gt,{ref:r})}),ht=Nr;import Br from"react";var Rr=({resource:e,ignoreCaptionLabels:t})=>v(e.label,"en").some(o=>t.includes(o))?null:Br.createElement("track",{key:e.id,src:e.id,label:v(e.label,"en"),srcLang:"en","data-testid":"player-track"}),yt=Rr;var Dr=({painting:e,resources:t})=>{var c;let r=T(),{configOptions:n}=r,o=F.useRef(null),a=(c=e==null?void 0:e.format)==null?void 0:c.includes("audio/"),{startTime:i,updateCurrentTime:l}=F.useContext(R);F.useEffect(()=>{if(!e.id||!o.current||e.id.split(".").pop()!=="m3u8")return;let d=new D;return d.attachMedia(o.current),d.on(D.Events.MEDIA_ATTACHED,function(){d.loadSource(e.id)}),d.on(D.Events.ERROR,function(m,g){if(g.fatal)switch(g.type){case D.ErrorTypes.NETWORK_ERROR:console.error(`fatal ${m} network error encountered, try to recover`),d.startLoad();break;case D.ErrorTypes.MEDIA_ERROR:console.error(`fatal ${m} media error encountered, try to recover`),d.recoverMediaError();break;default:d.destroy();break}}),()=>{d&&(d.detachMedia(),d.destroy(),l(0))}},[e.id]),F.useEffect(()=>{let d=o.current;d&&(d.currentTime=i),i!==0&&d.play()},[i]);let u=()=>{let d=o.current;d&&(d.ontimeupdate=m=>{l(m.target.currentTime)})};return F.createElement(ft,null,F.createElement("video",{id:"react-media-player",key:e.id,ref:o,controls:!0,height:e.height,width:e.width,onPlay:u,crossOrigin:"anonymous"},F.createElement("source",{src:e.id,type:e.format}),t.length>0&&t.map(d=>F.createElement(yt,{resource:d,ignoreCaptionLabels:n.ignoreCaptionLabels,key:d.id})),"Sorry, your browser doesn't support embedded videos."),a&&F.createElement(ht,{ref:o}))},xt=Dr;import X,{useEffect as ge,useState as Tt}from"react";import Kr from"openseadragon";var bt=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"}}),vt=s("div",{position:"relative",width:"100%",height:"100%",zIndex:"0"}),Ct=s("div",{width:"100%",height:"450px",background:"black",backgroundSize:"contain",color:"white",position:"relative",zIndex:"1",overflow:"hidden"});import C from"react";import fe from"react";import{styled as Or}from"@stitches/react";var wt=Or("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 Hr=({id:e,label:t,children:r})=>fe.createElement(wt,{id:e,"data-testid":"openseadragon-button"},fe.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"},fe.createElement("title",{id:`${e}-svg-title`},t),r)),Q=Hr;import{styled as Gr}from"@stitches/react";var It=Gr("div",{position:"absolute",zIndex:"1",top:"1rem",right:"1rem"});var jr=()=>C.createElement(It,{"data-testid":"openseadragon-controls",id:"openseadragon-controls"},C.createElement(Q,{id:"zoomIn",label:"zoom in"},C.createElement(()=>C.createElement("path",{strokeLinecap:"round",strokeMiterlimit:"10",strokeWidth:"45",d:"M256 112v288M400 256H112"}),null)),C.createElement(Q,{id:"zoomOut",label:"zoom in"},C.createElement(()=>C.createElement("path",{strokeLinecap:"round",strokeMiterlimit:"10",strokeWidth:"45",d:"M400 256H112"}),null)),C.createElement(Q,{id:"zoomReset",label:"reset zoom"},C.createElement(()=>C.createElement(C.Fragment,null,C.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"}),C.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))),kt=jr;var St=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 Zr=({service:e})=>{let[t,r]=Tt(),[n,o]=Tt();ge(()=>(a(),()=>{t==null||t.destroy()}),[]),ge(()=>{Array.isArray(e)&&o(e[0])},[e]),ge(()=>{n&&St(n.id).then(i=>t==null?void 0:t.open(i))},[t,n]);function a(){let i={homeButton:"zoomReset",showFullPageControl:!1,zoomInButton:"zoomIn",zoomOutButton:"zoomOut"},l={showNavigator:!0,navigatorBorderColor:"transparent",navigatorId:"openseadragon-navigator"};r(Kr(x(x({id:"openseadragon-viewport",loadTilesWithAjax:!0},i),l)))}return X.createElement(Ct,{"data-testid":"image-viewer"},X.createElement(kt,null),X.createElement(bt,{id:"openseadragon-navigator"}),X.createElement(vt,{id:"openseadragon-viewport"}))},Ft=Zr;import{Button as _r}from"@nulib/design-system";var Ur=({activeCanvas:e,painting:t,resources:r,items:n,isMedia:o,isNavigator:a,isNavigatorOpen:i})=>w.createElement(ne,null,w.createElement(st,null,w.createElement(ie,null,o?w.createElement(xt,{painting:t,resources:r}):w.createElement(Ft,x({},t)),w.createElement(Te,{"data-navigator":a},w.createElement(_r,{as:"span"},i?"View Media Items":"View Navigator")),n.length>1&&w.createElement(oe,null,w.createElement(Xe,{items:n,activeItem:0}))),a&&w.createElement(Fe,null,w.createElement(ae,null,w.createElement(ut,{activeCanvas:e,defaultResource:r[0].id,resources:r}))))),Et=Ur;import he from"react";var Vt=s("div",{display:"flex",flexDirection:"column",alignItems:"center"}),Pt=s("p",{fontFamily:"$display",fontWeight:"bold",fontSize:"x-large"}),At=s("span",{fontSize:"medium"});var qr=({error:e})=>{let{message:t}=e;return he.createElement(Vt,{role:"alert"},he.createElement(Pt,{"data-testid":"headline"},"Something went wrong"),t&&he.createElement(At,null,`Error message: ${t}`," "))},Mt=qr;import{ErrorBoundary as Qr}from"react-error-boundary";var Xr=({manifest:e,theme:t})=>{let r=T(),{activeCanvas:n,vault:o}=r,[a,i]=H(!1),[l,u]=H(!1),[c,d]=H(!0),[m,g]=H(void 0),[I,y]=H([]),[L,M]=Pe(!1),p=Ve(re.sm);return ye(()=>{if(!p){d(!0);return}d(!1)},[p]),ye(()=>{if(!p){M(!1);return}M(c)},[c]),ye(()=>{let h=J(o,n),S=ee(o,n,"text/vtt");h&&(i(["Sound","Video"].indexOf(h.type)>-1),g(x({},h))),y(S),u(S.length!==0)},[n]),O.createElement(Qr,{FallbackComponent:Mt},O.createElement(Ee,{className:t,"data-body-locked":L,"data-navigator":l,"data-navigator-open":c},O.createElement(Yr,{open:c,onOpenChange:d},O.createElement(Be,{manifestLabel:e.label,manifestId:e.id}),O.createElement(Et,{activeCanvas:n,painting:m,resources:I,items:e.items,isMedia:a,isNavigator:l,isNavigatorOpen:c}))))},$t=Xr;import{createTheme as eo}from"@stitches/react";var to=({manifestId:e,canvasIdCallback:t=()=>{},customTheme:r,options:n})=>E.createElement(ke,null,E.createElement(ro,{manifestId:e,canvasIdCallback:t,customTheme:r,options:n})),ro=({manifestId:e,canvasIdCallback:t,customTheme:r,options:n})=>{let o=G(),a=T(),{activeCanvas:i,isLoaded:l,vault:u}=a,[c,d]=Jr(),m={};return r&&(m=eo("custom",r)),Wt(()=>{t&&t(i)},[i]),Wt(()=>{o({type:"updateConfigOptions",configOptions:n}),u.loadManifest(e).then(g=>{d(g),o({type:"updateActiveCanvas",canvasId:g.items[0]&&g.items[0].id})}).catch(g=>{console.error(`Manifest failed to load: ${g}`)}).finally(()=>{o({type:"updateIsLoaded",isLoaded:!0})})},[]),l?!c||!c.items?(console.log(`The IIIF manifest ${e} failed to load.`),E.createElement(E.Fragment,null)):c.items.length===0?(console.log(`The IIIF manifest ${e} does not contain canvases.`),E.createElement(E.Fragment,null)):E.createElement($t,{manifest:c,theme:m}):E.createElement(E.Fragment,null,"Loading")},Ea=to;export{Ea as default};
//# sourceMappingURL=index.esm.js.map