@getontime/cli/client/assets/Backstage-DLlxOQcm.js

Time keeping for live events

(function(){try{var e=typeof window<`u`?window:typeof global<`u`?global:typeof globalThis<`u`?globalThis:typeof self<`u`?self:{};e.SENTRY_RELEASE={id:`f14ad0099eab1969fdd065b56af5fdd3cf530de6`};var t=new e.Error().stack;t&&(e._sentryDebugIds=e._sentryDebugIds||{},e._sentryDebugIds[t]=`c0d963eb-d1b2-42fa-9e91-1407caf926dc`,e._sentryDebugIdIdentifier=`sentry-dbid-c0d963eb-d1b2-42fa-9e91-1407caf926dc`)}catch{}})();import{a as e,n as t,t as n}from"./jsx-runtime-BNC90REB.js";import{$ as r,Kt as i,Pt as a,Rt as o,Ut as s,_t as c,et as l,p as u,tt as d,u as f,vt as p}from"./useSocket-B9-0Z7zf.js";import"./Button-CsttsbOH.js";import{g as m,y as h}from"./useIsSmallScreen-Db4lRgi0.js";import"./Select-CujoWFOD.js";import{K as g,Y as ee}from"./constants-8b9Q9Bj6.js";import"./SwatchPicker-C0WK8dMM.js";import"./viewParamsEditor.store-BcLRa99Z.js";import{t as _}from"./useSettings-CeUw01Bu.js";import{i as v,n as y}from"./useRundown-BubT2Cyp.js";import"./Input-D-3bhaHU.js";import{t as b}from"./PresetContext-DZh_OrO5.js";import{t as x}from"./viewOptions-z3iLoQCB.js";import"./assets-DU19UGw8.js";import{s as S,t as C}from"./index-qU8RbaVt.js";import"./Info-QUjDr4I8.js";import{t as w}from"./Empty-CSL3pipV.js";import{a as T,i as E,n as D,o as O,t as k}from"./ViewParamsEditor-ZtF4EeBG.js";import{i as A,n as j}from"./viewUtils-CulstVIy.js";import{t as M}from"./useWindowTitle-Dvj2xEXy.js";import{t as N}from"./useAutoTickingClock-CjJeDQz8.js";import{t as P}from"./SuperscriptPeriod-maMkyH91.js";import{n as F,t as I}from"./common.options-DXL-8UPx.js";import{t as L}from"./useAnimatedProgress-DJlteBY2.js";import{t as R}from"./offset-69iljPHz.js";import{t as z}from"./useCustomFields-BMD3tm-0.js";import{t as B}from"./viewLoader.utils-BLkafrJE.js";import{t as te}from"./QrCode-BsFmnkyr.js";import{t as V}from"./TitleCard-8FH8UfR9.js";import{t as ne}from"./ViewLogo-BuLAMmbq.js";import{t as H}from"./SuperscriptTime-Byp3JLgw.js";import{t as U}from"./useProjectData-DHesqFeW.js";var W=e(t(),1),G=n();function re({current:e,duration:t,eventId:n,className:r}){let i=L(e,t,n);return(0,G.jsx)(`div`,{className:`progress-bar__bg ${r}`,children:(0,G.jsx)(`div`,{className:`progress-bar__indicator`,style:{width:`${i}%`}})})}var K=e=>({title:D.Schedule,collapsible:!0,options:[{id:`filter`,title:`Filter`,description:`Hide events without data in the selected custom field`,type:`option`,values:e,defaultValue:`none`},{id:`stopCycle`,title:`Stop cycling through event pages`,description:`Schedule will not auto-cycle through events`,type:`boolean`,defaultValue:!1},{id:`cycleInterval`,title:`Cycle interval`,description:`How long (in seconds) should each schedule page be shown.`,type:`number`,defaultValue:10},{id:`showExpected`,title:`Show expected time`,description:`Whether the times shown should account for the runtime offset.`,type:`boolean`,defaultValue:!1}]});function q(e){return{filter:e.get(`filter`),cycleInterval:Number(e.get(`cycleInterval`))||10,stopCycle:A(e.get(`stopCycle`)),showExpected:A(e.get(`showExpected`))}}function J(){let[e]=h();return(0,W.useMemo)(()=>q(e),[e])}var Y=(0,W.createContext)(void 0),X=({children:e,selectedEventId:t})=>{let{cycleInterval:n,stopCycle:r,filter:i}=J(),{data:o}=v((0,W.useCallback)(e=>{if(i){let t=i.startsWith(`custom-`)?i.slice(7):i;return a(e)&&!!e.custom[t]}return a(e)},[i])),[s,c]=(0,W.useState)(-1),[l,u]=(0,W.useState)(0),[d,f]=(0,W.useState)(0),p=(0,W.useRef)(-1),m=(0,W.useRef)(void 0),h=(0,W.useRef)(null);(0,W.useLayoutEffect)(()=>{if(!h.current)return;let e=Array.from(h.current.children);if(e.length===0)return;let t=h.current.clientHeight,n=0,r=1,i=1,a=-1,o=!1;for(let u=0;u<e.length;u++){let d=e[u].clientHeight,f=n+d>t;f&&(n=0,i+=1),u<s?l(e[u]):a===-1?(o=!0,r=i):f&&(o=!1),o?(a=u,c(e[u],n)):l(e[u]),n+=d}f(r),u(i),p.current=a;function c(e,t){e.style.top=`${t}px`}function l(e){e.style.top=`-1000px`}},[s,o]),(0,W.useEffect)(()=>{if(r){f(1),c(0);return}return m.current&&clearInterval(m.current),m.current=setInterval(()=>{c(d===l?0:p.current+1)},n*1e3),()=>clearInterval(m.current)},[n,l,r,d]);let g=(0,W.useMemo)(()=>{let e=o.findIndex(e=>e.id===t);return o.slice(e+1)},[o,t]);return(0,G.jsx)(Y,{value:(0,W.useMemo)(()=>({events:g,selectedEventId:t,numPages:l,visiblePage:d,containerRef:h}),[g,t,l,d,h]),children:e})},Z=()=>{let e=(0,W.use)(Y);if(!e)throw Error(`useSchedule() can only be used inside a ScheduleContext`);return e},Q={format12:`h:mm a`,format24:`HH:mm`};function ie({timeStart:e,dayOffset:t,delay:n,totalGap:r,isLinkedToLoaded:i,countToEnd:a,colour:o,duration:s,skip:c,title:l,timeEnd:u,cue:d}){let{showExpected:f}=J();return(0,G.jsxs)(`li`,{className:g([`entry`,c&&`entry--skip`]),"data-testid":d,children:[(0,G.jsx)(`div`,{className:`entry-times`,children:f?(0,G.jsx)(se,{timeStart:e,dayOffset:t,delay:n,totalGap:r,isLinkedToLoaded:i,countToEnd:a,duration:s,colour:o}):n>0?(0,G.jsx)(oe,{timeStart:e,delay:n,colour:o,timeEnd:u}):(0,G.jsx)(ae,{timeStart:e,timeEnd:u,colour:o})}),(0,G.jsx)(`div`,{className:`entry-title`,children:l})]})}function ae({timeStart:e,timeEnd:t,colour:n}){let i=r(e,Q),a=r(t,Q);return(0,G.jsxs)(G.Fragment,{children:[(0,G.jsx)(`span`,{className:`entry-colour`,style:{backgroundColor:n}}),(0,G.jsx)(P,{time:i}),`→`,(0,G.jsx)(P,{time:a})]})}function oe({timeStart:e,timeEnd:t,colour:n,delay:i}){let a=r(e,Q),o=r(t,Q),s=r(e+i,Q),c=r(t+i,Q);return(0,G.jsxs)(G.Fragment,{children:[(0,G.jsxs)(`span`,{className:`entry-times--delayed`,children:[(0,G.jsx)(`span`,{className:`entry-colour`,style:{backgroundColor:n}}),(0,G.jsx)(P,{time:a}),`→`,(0,G.jsx)(P,{time:o})]}),(0,G.jsxs)(`span`,{className:`entry-times--delay`,children:[(0,G.jsx)(P,{time:s}),`→`,(0,G.jsx)(P,{time:c})]})]})}function se({timeStart:e,dayOffset:t,delay:n,totalGap:r,isLinkedToLoaded:i,countToEnd:a,colour:o,duration:s}){let c=u(),{expectedStart:l,expectedEnd:f,plannedEnd:p}=d({timeStart:e,dayOffset:t,delay:n,totalGap:r,isLinkedToLoaded:i,countToEnd:a,duration:s},c);return(0,G.jsxs)(G.Fragment,{children:[(0,G.jsx)(`span`,{className:`entry-colour`,style:{backgroundColor:o}}),(0,G.jsx)($,{expectedTime:l,plannedTime:e}),`→`,(0,G.jsx)($,{expectedTime:f,plannedTime:p})]})}function $({expectedTime:e,plannedTime:t}){let n=r(e);return(0,G.jsx)(P,{className:`entry-times--${R(e-t)}`,time:n})}function ce({className:e}){let{events:t,containerRef:n}=Z();return t?.length<1?null:(0,G.jsx)(`ul`,{className:g([`schedule`,e]),ref:n,children:t.map(e=>(0,G.jsx)(ie,{timeStart:e.timeStart,dayOffset:e.dayOffset,delay:e.delay,totalGap:e.totalGap,isLinkedToLoaded:e.isLinkedToLoaded,countToEnd:e.countToEnd,duration:e.duration,colour:e.colour,skip:e.skip,title:e.title,timeEnd:e.timeEnd,cue:e.cue},e.id))})}function le({className:e}){let{numPages:t,visiblePage:n}=Z();return t>10?(0,G.jsxs)(`div`,{className:g([`schedule-nav`,e]),children:[(0,G.jsx)(`div`,{className:g([`schedule-nav__item`,n===1&&`schedule-nav__item--selected`])}),(0,G.jsx)(`div`,{className:g([`schedule-nav__item`,n===2&&`schedule-nav__item--selected`])}),(0,G.jsx)(`div`,{className:g([`schedule-nav__item`,n===3&&`schedule-nav__item--selected`])}),(0,G.jsx)(`div`,{className:g([`schedule-nav__item`,n===4&&`schedule-nav__item--selected`])}),(0,G.jsx)(`div`,{className:g([`schedule-nav__item`,n===5&&`schedule-nav__item--selected`])}),(0,G.jsx)(`div`,{className:g([`schedule-nav__item`,`schedule-nav__item--indeterminate`,n>5&&n<t-4&&`schedule-nav__item--selected`])}),(0,G.jsx)(`div`,{className:g([`schedule-nav__item`,n===t-4&&`schedule-nav__item--selected`])}),(0,G.jsx)(`div`,{className:g([`schedule-nav__item`,n===t-3&&`schedule-nav__item--selected`])}),(0,G.jsx)(`div`,{className:g([`schedule-nav__item`,n===t-2&&`schedule-nav__item--selected`])}),(0,G.jsx)(`div`,{className:g([`schedule-nav__item`,n===t-1&&`schedule-nav__item--selected`])}),(0,G.jsx)(`div`,{className:g([`schedule-nav__item`,n===t&&`schedule-nav__item--selected`])})]}):(0,G.jsx)(`div`,{className:g([`schedule-nav`,e]),children:t>1&&[...Array(t).keys()].map(e=>(0,G.jsx)(`div`,{className:g([`schedule-nav__item`,e+1===n&&`schedule-nav__item--selected`])},e))})}var ue=(0,W.memo)(de);function de(e){let{selectedId:t}=e;return(0,G.jsxs)(X,{selectedEventId:t,children:[(0,G.jsx)(le,{className:`schedule-nav-container`}),(0,G.jsx)(ce,{className:`schedule-container`})]})}var fe=(e,t,n)=>{let r=E(t,[{value:`none`,label:`None`}]),i=E(t,[{value:`none`,label:`None`},{value:`note`,label:`Note`}]),a=T(n,[{value:`none`,label:`None`}]),o=E(t,[{value:`title`,label:`Title`}]);return[{title:D.ClockOptions,collapsible:!0,options:[I(e)]},{title:D.DataSources,collapsible:!0,options:[{id:`main`,title:`Main text`,description:`Select the data source for the main text`,type:`option`,values:o,defaultValue:`title`},{id:`secondary-src`,title:`Event secondary text`,description:`Select the data source for auxiliary text shown in now and next cards`,type:`option`,values:i,defaultValue:`none`}]},K(r),{title:D.ElementVisibility,collapsible:!0,options:[{id:`extra-info`,title:`Extra info`,description:`Select a project data source to show in the view`,type:`option`,values:a,defaultValue:`none`}]}]};function pe(e,t){let n=n=>t?.get(n)??e.get(n);return{mainSource:n(`main`),secondarySource:n(`secondary-src`),extraInfo:n(`extra-info`),timeformat:F(e,t)}}function me(){let[e]=h(),t=(0,W.use)(b);return(0,W.useMemo)(()=>pe(e,t?new URLSearchParams(t.search):void 0),[t,e])}function he(e){return(e??0)<0}function ge(e){return e!==s.Stop}function _e(e,t){return e===s.Roll&&t===o.Pending}function ve(e,t,n,r,i){if(i===s.Stop)return{showNow:!1,nowMain:void 0,nowSecondary:void 0,showNext:!1,nextMain:void 0,nextSecondary:void 0};let a=j(e,n??`title`)||`–`,o=j(e,r),c=j(t,n??`title`)||`–`,l=j(t,r);return{showNow:e!==null,nowMain:a,nowSecondary:o,showNext:t!==null,nextMain:c,nextSecondary:l}}function ye(){let e=x(e=>e.mirror),{data:t,status:n}=y(),{data:r,status:i}=U(),{data:a,status:o}=_(),{data:s,status:c}=z();return{data:{events:t,customFields:s,projectData:r,isMirrored:e,settings:a},status:B([n,i,o,c])}}function be(){let{data:e,status:t}=ye();return M(`Backstage`),t===`pending`?(0,G.jsx)(S,{}):t===`error`?(0,G.jsx)(O,{variant:`error`,text:`There was an error fetching data, please refresh the page.`}):(0,G.jsx)(xe,{...e})}function xe({events:e,customFields:t,projectData:n,isMirrored:a,settings:o}){let{getLocalizedString:s}=C(),{mainSource:u,secondarySource:d,extraInfo:h,timeformat:_}=me(),{eventNext:v,eventNow:y,rundown:b,selectedEventId:x,time:S}=f(),[T,E]=(0,W.useState)(!1),{height:D}=m();(0,W.useEffect)(()=>{E(!1);let e=setTimeout(()=>{E(!0)},10);return()=>clearTimeout(e)},[x]);let O=e.length>0,{showNow:A,nowMain:j,nowSecondary:M,showNext:N,nextMain:P,nextSecondary:F}=ve(y,v,u,d,S.playback),I=_e(S.playback,S.phase),L=r(I?S.secondaryTimer:S.startedAt,{override:_}),R=(()=>{if(!A&&O)return r(b.plannedStart,{format12:`h:mm a`,format24:`HH:mm`,override:_})})(),z=(()=>{if(!A&&O)return r(b.plannedEnd,{format12:`h:mm a`,format24:`HH:mm`,override:_})})(),B=c(S.current,{fallback:ee});B=p(B);let U=Math.max(window.innerWidth/15,72),K=ge(S.playback),q=O&&D>420,J=R&&z,Y=l(o?.timeFormat),X=(0,W.useMemo)(()=>fe(Y,t,n),[Y,t,n]);return(0,G.jsxs)(`div`,{className:`backstage ${a?`mirror`:``}`,"data-testid":`backstage-view`,children:[(0,G.jsx)(k,{target:i.Backstage,viewOptions:X}),(0,G.jsxs)(`div`,{className:`project-header`,children:[(0,G.jsxs)(`div`,{className:g([`project-header__brand`,!n?.logo&&`project-header__brand--without-logo`]),children:[n?.logo&&(0,G.jsx)(ne,{name:n.logo,className:`logo`}),(0,G.jsx)(`div`,{className:`title`,children:n.title})]}),(0,G.jsx)(Ce,{timeformat:_})]}),K&&(0,G.jsx)(re,{className:`progress-container`,current:S.current,duration:S.duration,eventId:x}),!O&&(0,G.jsx)(w,{text:s(`common.no_data`),className:`empty-container`}),(0,G.jsxs)(`div`,{className:`card-container`,children:[A&&(0,G.jsxs)(`div`,{className:g([`event`,`now`,T&&`blink`]),children:[(0,G.jsx)(V,{title:j,secondary:M}),(0,G.jsxs)(`div`,{className:`timer-group`,children:[(0,G.jsxs)(`div`,{className:`time-entry`,children:[(0,G.jsx)(`div`,{className:g([`time-entry__label`,I&&`time-entry--pending`]),children:s(I?`countdown.waiting`:`common.started_at`)}),(0,G.jsx)(H,{time:L,className:`time-entry__value`})]}),(0,G.jsx)(`div`,{className:`timer-gap`}),(0,G.jsxs)(`div`,{className:`time-entry`,children:[(0,G.jsx)(`div`,{className:`time-entry__label`,children:s(`common.expected_finish`)}),he(S.current)?(0,G.jsx)(`div`,{className:`time-entry__value`,children:s(`countdown.overtime`)}):(0,G.jsx)(H,{time:r(S.expectedFinish,{override:_}),className:`time-entry__value`})]}),(0,G.jsx)(`div`,{className:`timer-gap`}),(0,G.jsxs)(`div`,{className:`time-entry`,children:[(0,G.jsx)(`div`,{className:`time-entry__label`,children:s(`common.stage_timer`)}),(0,G.jsx)(`div`,{className:`time-entry__value`,children:B})]})]})]}),J&&(0,G.jsxs)(`div`,{className:`event`,children:[(0,G.jsx)(`div`,{className:`title-card__placeholder`,children:s(`countdown.waiting`)}),(0,G.jsxs)(`div`,{className:`timer-group`,children:[(0,G.jsxs)(`div`,{className:`time-entry`,children:[(0,G.jsx)(`div`,{className:g([`time-entry__label`,I&&`time-entry--pending`]),children:s(`common.scheduled_start`)}),(0,G.jsx)(H,{time:R,className:`time-entry__value`})]}),(0,G.jsx)(`div`,{className:`timer-gap`}),(0,G.jsxs)(`div`,{className:`time-entry`,children:[(0,G.jsx)(`div`,{className:`time-entry__label`,children:s(`common.scheduled_end`)}),(0,G.jsx)(H,{time:z,className:`time-entry__value`})]})]})]}),N&&O&&(0,G.jsx)(V,{className:`event`,label:`next`,title:P,secondary:F})]}),q&&(0,G.jsx)(ue,{selectedId:x}),(0,G.jsxs)(`div`,{className:g([`info`,!q&&`info--stretch`]),children:[h&&(0,G.jsx)(Se,{projectData:n,size:U,source:h}),(0,G.jsxs)(`div`,{className:`info-card`,children:[n.url&&(0,G.jsx)(te,{value:n.url,size:U}),n.info&&(0,G.jsx)(`div`,{className:`info-card__message`,children:n.info})]})]})]})}function Se({projectData:e,size:t,source:n}){let r=e.custom.find((e,t)=>`${t}-${e.title}`===n);return r?(0,G.jsxs)(`div`,{className:`info-card`,children:[r.url&&(0,G.jsx)(`img`,{className:`info-card__img`,width:t,src:r.url,onError:e=>e.currentTarget.style.display=`none`}),(0,G.jsxs)(`div`,{className:`info__column`,children:[r.title&&(0,G.jsx)(`div`,{className:`info-card__label`,children:r.title}),r.value&&(0,G.jsx)(`div`,{className:`info-card__message`,children:r.value})]})]}):null}function Ce({timeformat:e}){let{getLocalizedString:t}=C(),n=r(N(),{override:e});return(0,G.jsxs)(`div`,{className:`clock-container`,children:[(0,G.jsx)(`div`,{className:`label`,children:t(`common.time_now`)}),(0,G.jsx)(H,{time:n,className:`time`})]})}export{be as default};
//# sourceMappingURL=Backstage-DLlxOQcm.js.map