@sprig-technologies/sprig-browser
Version:
npm package for the sprig web sdk
670 lines (574 loc) • 48.8 kB
JavaScript
;const i=require("./view-BxTV1_m-.cjs"),W=require("./core-DSREyRo8.cjs"),De=require("./debounce-DsC7462b.cjs"),Re=require("./metricsReporter-CIbUupJP.cjs"),le=e=>i.u("button",{...e,className:i.cc("ul-card-text__button",e.className),id:"ul-card-text__button"}),ye=({html:e,...n})=>{const{enableCspTrustedTypes:o}=i.useConfig(s=>({enableCspTrustedTypes:s.enableCspTrustedTypes})),t=i.F(()=>W.getHtml(e,o),[o,e]);return i.u("div",{...n,dangerouslySetInnerHTML:{__html:t}})},ae=()=>{const{viewDocument:e}=i.useConfig(t=>({viewDocument:t.viewDocument})),[n,o]=i.h(!1);return i.p(()=>{const t=e.querySelector(".sprig-question-body"),s=new ResizeObserver(()=>{window.requestAnimationFrame(()=>{o(!!(t&&W.isHTMLElement(t)&&t.scrollHeight>t.offsetHeight))})});return t&&s.observe(t),()=>{t&&s.disconnect()}},[e]),n},de=({plainText:e,richText:n,id:o,className:t,isHeader:s,showAsterisk:l})=>n?i.u(ye,{className:t,html:n,id:o}):e?s?i.u("h1",{className:t,id:o,children:[e,l&&"*"]}):i.u("p",{className:t,id:o,children:e}):null,Te=()=>i.u("svg",{fill:"none",height:"10",viewBox:"0 0 13 10",width:"13",xmlns:"http://www.w3.org/2000/svg",children:i.u("path",{d:"M11.5 1.5L4.5 8.5L1 5",stroke:"#FFFFFF",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"1.5"})}),ce=({buttonText:e="View Prototype",handleClick:n})=>i.u("button",{className:"prototype-button",onClick:n,children:e},"prototype-btn"),Ee=({isSelected:e,id:n,divId:o,themeColor:t,disabled:s=!1})=>i.u("div",{"aria-checked":e,"aria-disabled":s,"aria-labelledby":`label-${n}`,className:"select-checkbox",id:o,role:"checkbox",style:{...e?{backgroundColor:t,borderColor:t,boxShadow:"none"}:{},...s?{opacity:.5}:{}},tabIndex:s?-1:0,children:e&&i.u(i.SvgCheckmark,{})}),Le=({promptText:e,textValue:n,onTextChange:o,useMobileStyling:t})=>{const s=i._(null);return i.p(()=>{s.current&&s.current.focus()},[]),i.u("textarea",{"aria-label":e,"aria-multiline":"true","aria-placeholder":e,className:i.cc(i.getClasses("choice-text-input",t)),"data-gramm":"false",maxLength:5e3,name:"text",onChange:l=>{l.stopPropagation(),o(l.currentTarget.value)},onClick:l=>{l.stopPropagation()},onKeyPress:l=>{l.stopPropagation()},placeholder:e,ref:s,role:"textbox",rows:1,value:n})},ue="ul-select-style-element",K="ul-select-active-dynamic-style",xe="ul-select-error-dynamic-style",_e=(e,n,o)=>{let t=e.getElementById(ue),s=!1;t||(t=e.createElement("style"),s=!0),t.tagName.toLowerCase()==="style"&&(t.id=ue,o&&(t.nonce=o),t.textContent=Pe(n),s&&e.head.appendChild(t))},Pe=e=>`
.${K} {
border-color: ${e};
}
.${K} .select-radio, .${K}.select-radio {
border: 6px solid ${e};
box-shadow: none;
}
.${xe} {
border-color: ${W.ERROR_BORDER_COLOR};
}
`,Oe=({options:e,selectItem:n,selectedOptions:o,showCheckbox:t,disabledOptions:s,dropdownFooter:l,panelRef:a})=>{const{themeColor:v}=i.useConfig(r=>({doc:r.viewDocument,themeColor:r.border}));return i.u("div",{className:"select-list",ref:a,children:[e.map(r=>{return i.u("div",{"aria-disabled":s==null?void 0:s.includes(r),className:i.cc("select-option",s!=null&&s.includes(r)?"ul-choice-disabled":""),onClick:h=>{s!=null&&s.includes(r)||(n(r),h.stopPropagation())},role:"option",style:{...s!=null&&s.includes(r)?{opacity:.5,cursor:"not-allowed"}:{}},children:[t&&i.u(Ee,{divId:(u=r.id,`checkbox-div-${u}`),id:r.id,isSelected:o.includes(r),themeColor:v}),r.label]},r.id);var u}),l]})},Me={"{{user_id}}":"externalUserId","{{email}}":"email"},q="https://cdn.sprig.com",d={document:void 0,videojs:void 0},ie=e=>e+"-loading-spiner",D="hidden",pe=".m3u8",ee="questionId",ne="ul-video-recorder-camera-off-button",oe="ul-recording-in-session",Be=[{type:"link",content:`${q}/dependencies/videojs-record-4.5.0.min.css`},{type:"script",content:`${q}/dependencies/RecordRTC-5.6.2.js`},{type:"script",content:`${q}/dependencies/adapter.8.0.0.min.js`},{type:"script",content:`${q}/dependencies/videojs-record-4.5.0.min.js`},{type:"script",content:`${q}/userleap-web-upchunk-v2.2.2.js`}],ve=[{type:"link",content:`${q}/dependencies/video-js-7.18.0.min.css`},{type:"script",content:`${q}/dependencies/video-js-7.18.0.min.js`},{type:"style",content:`/* progress control styles */
.video-js .vjs-control {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
}
.video-js .vjs-progress-control .vjs-progress-holder {
margin: 0 0px;
}
.video-js .vjs-progress-control {
position: absolute;
height: 3px;
width: 100%;
}
/* position and align the buttons and button texts */
.ul-control-panel {
bottom: 0;
width: 100%;
flex-direction: column;
background-color: white;
height: fit-content;
z-index: 2;
}
.ul-buttons-panel {
color: black;
display: flex;
gap: 20px;
height: 50px;
justify-content: center;
margin: 10px;
padding: 2px 14px 0;
}
.video-js .vjs-volume-panel {
height: 30px;
width: 40px;
}
.ul-inactive {
opacity: 0.3;
cursor: default;
pointer-events: none;
}
/* buttons */
.ul-buttons-panel > .vjs-button {
background-color: rgba(0, 0, 0, 0.05);
border-radius: 50%;
display: flex;
height: 3em;
justify-content: center;
width: 3em;
}
.vjs-button>.vjs-icon-placeholder:before {
align-items: center;
display: flex;
font-size: unset;
line-height: 0.5;
justify-content: center;
}
span.ul-button-text {
align-self: flex-end;
position: relative;
top: 14px;
}
#ul-camera-button {
white-space: nowrap;
}
.video-js .vjs-volume-control.vjs-volume-horizontal {
background-color: #fff;
z-index: 1;
}
.vjs-volume-bar.vjs-slider-horizontal .vjs-volume-level {
background-color: black;
}
.video-js .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-hover,
.video-js .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active,
.video-js .vjs-volume-panel.vjs-volume-panel-horizontal:active {
width: 40px;
}
.video-js .vjs-volume-panel .vjs-volume-control.vjs-slider-active,
.video-js .vjs-volume-panel .vjs-volume-control:active,
.video-js .vjs-volume-panel.vjs-hover .vjs-mute-control ~ .vjs-volume-control,
.video-js .vjs-volume-panel.vjs-hover .vjs-volume-control,
.video-js .vjs-volume-panel:active .vjs-volume-control,
.video-js .vjs-volume-panel:focus .vjs-volume-control {
visibility: visible;
left: 40px;
position: absolute;
transition: visibility 0.1s, opacity 0.1s, height 0.1s, width 0.1s, left 0s, top 0s;
}
/* play button customization */
.video-js .vjs-play-control {
color: black;
}
.video-js .vjs-play-control .vjs-icon-placeholder:before {
content: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.5363 6.40226L1.93958 10.7006C1.64037 10.8502 1.28833 10.6326 1.28833 10.2981V1.7014C1.28833 1.36688 1.64037 1.14931 1.93958 1.29891L10.5363 5.59727C10.868 5.76311 10.868 6.23642 10.5363 6.40226Z' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
}
/* position and style the current timer */
.ul-time-panel {
position: absolute;
bottom: 80px;
left: 10px;
height: 22px;
color: black;
border: 1px solid #e0e0eb;
border-radius: 23px;
background-color: white;
width: fit-content;
}
.video-js .vjs-current-time,
.vjs-no-flex .vjs-current-time {
display: flex;
align-items: center;
text-align: center;
}
/* remove the dot progress indicator */
.video-js .vjs-play-progress:before,
.video-js .vjs-volume-level:before,
.vjs-icon-circle:before,
.vjs-seek-to-live-control .vjs-icon-placeholder:before {
content: none;
}
.video-js .vjs-mute-control .vjs-icon-placeholder:before {
content: url("data:image/svg+xml,%3Csvg width='19' height='14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8.825.324A.75.75 0 019.25 1v11.667a.75.75 0 01-1.219.585l-3.96-3.169H1a.75.75 0 01-.75-.75v-5a.75.75 0 01.75-.75h3.07L8.031.414a.75.75 0 01.794-.09zM7.75 2.56L4.802 4.92a.75.75 0 01-.469.164H1.75v3.5h2.583a.75.75 0 01.469.165l2.948 2.358V2.56zM14.911.47a.75.75 0 011.061 0 9.084 9.084 0 010 12.844.75.75 0 01-1.06-1.06 7.584 7.584 0 000-10.724.75.75 0 010-1.06zM11.97 3.41a.75.75 0 011.06 0 4.917 4.917 0 010 6.953.75.75 0 11-1.06-1.06 3.417 3.417 0 000-4.832.75.75 0 010-1.06z' fill='%23262136'/%3E%3C/svg%3E");
}
.video-js .vjs-mute-control.vjs-vol-0 .vjs-icon-placeholder:before {
content: url("data:image/svg+xml,%3Csvg width='19' height='14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.5 1.167L4.333 4.5H1v5h3.333L8.5 12.833V1.167zM17.17 4.5l-5 5M12.17 4.5l5 5' stroke='%23262136' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.video-js .vjs-mute-control.vjs-vol-1 .vjs-icon-placeholder:before {
content: url("data:image/svg+xml,%3Csvg width='19' height='14' viewBox='0 0 19 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8.82489 0.32403C9.08474 0.44892 9.25 0.711703 9.25 1.00001V12.6667C9.25 12.955 9.08474 13.2178 8.82489 13.3427C8.56504 13.4675 8.25661 13.4324 8.03148 13.2523L4.07025 10.0833H1C0.585786 10.0833 0.25 9.74755 0.25 9.33334V4.33334C0.25 3.91913 0.585786 3.58334 1 3.58334H4.07025L8.03148 0.414355C8.25661 0.234253 8.56504 0.19914 8.82489 0.32403ZM7.75 2.56048L4.80185 4.91899C4.66887 5.02538 4.50364 5.08334 4.33333 5.08334H1.75V8.58334H4.33333C4.50364 8.58334 4.66887 8.6413 4.80185 8.74769L7.75 11.1062V2.56048Z' fill='%23262136'/%3E%3C/svg%3E%0A");
}
.video-js .vjs-mute-control.vjs-vol-2 .vjs-icon-placeholder:before {
content: url("data:image/svg+xml,%3Csvg width='19' height='14' viewBox='0 0 19 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8.82489 0.32403C9.08474 0.44892 9.25 0.711703 9.25 1.00001V12.6667C9.25 12.955 9.08474 13.2178 8.82489 13.3427C8.56504 13.4675 8.25661 13.4324 8.03148 13.2523L4.07025 10.0833H1C0.585786 10.0833 0.25 9.74755 0.25 9.33334V4.33334C0.25 3.91913 0.585786 3.58334 1 3.58334H4.07025L8.03148 0.414355C8.25661 0.234253 8.56504 0.19914 8.82489 0.32403ZM7.75 2.56048L4.80185 4.91899C4.66887 5.02538 4.50364 5.08334 4.33333 5.08334H1.75V8.58334H4.33333C4.50364 8.58334 4.66887 8.6413 4.80185 8.74769L7.75 11.1062V2.56048Z' fill='%23262136'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.9698 3.41124C12.2627 3.11839 12.7376 3.11846 13.0304 3.4114C13.9521 4.33341 14.4699 5.58376 14.4699 6.88748C14.4699 8.19121 13.9521 9.44156 13.0304 10.3636C12.7376 10.6565 12.2627 10.6566 11.9698 10.3637C11.6768 10.0709 11.6767 9.596 11.9696 9.30307C12.6101 8.66235 12.9699 7.79346 12.9699 6.88748C12.9699 5.98151 12.6101 5.11262 11.9696 4.4719C11.6767 4.17896 11.6768 3.70409 11.9698 3.41124Z' fill='%23262136'/%3E%3C/svg%3E%0A");
}
.video-js .vjs-volume-control:hover .vjs-mouse-display {
display: none !important;
}
.video-js .vjs-play-progress {
background-color: black;
}
/* position video player inside the container */
.video-js .vjs-tech {
position: static;
}
.video-js .vjs-time-tooltip {
padding: 0.25em 0.75em;
align-items: center;
color: #333;
background: #FCFCFD;
border-radius: 99px;
text-align: center;
border: 1px solid #E0E0EB;
display: flex;
align-items: center;
justify-content: center;
top: -25px;
font-size: 12px !important;
width: 50px !important;
}
.video-js .vjs-play-progress.vjs-slider-bar .vjs-time-tooltip {
visibility: hidden !important;
}
.video-js .vjs-progress-control .vjs-mouse-display {
z-index: 2;
}
.ul-video-player {
width: 100%;
display: flex;
flex-direction: column;
height: auto;
border: 1px solid #E6E6E6;
background-color: white;
box-sizing: border-box;
border-radius: 4px;
background-clip: border-box;
overflow: hidden;
}
.video-js.vjs-fullscreen:not(.vjs-ios-native-fs) {
border: none;
}
#video-response-player-secondary-video-player {
max-width: 200px;
margin-right: 20px;
background-color: transparent;
}
#ul-card-video__player_recorder-video-recorder.vjs-fullscreen {
display: table;
}
.video-js div.vjs-progress-control {
margin-top: -3px;
}
.video-js .vjs-progress-control .vjs-slider {
background-color: #B2BBBD;
}
.vjs-record.video-js .vjs-control.vjs-button.vjs-fullscreen-control {
position:relative;
}
.video-js .vjs-fullscreen-control .vjs-icon-placeholder:before {
content: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.82143 2.54004L12.2614 2.54004C12.9242 2.54004 13.4614 3.0773 13.4614 3.74004L13.4614 6.18004' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M6.17955 13.46L3.73955 13.46C3.07681 13.46 2.53955 12.9227 2.53955 12.26L2.53955 9.81996' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12.7772 3.22266L9.36475 6.63516' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M6.29434 9.70605L2.88184 13.1186' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.video-js.vjs-fullscreen .vjs-fullscreen-control .vjs-icon-placeholder:before {
content: url("data:image/svg+xml,%3Csvg width='16' height='16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.583 9.813H5.25a1 1 0 011 1v3.666M5.375 10.688L1 15.061M14.917 5.813H11.25a1 1 0 01-1-1V1.146M15.063 1l-4.376 4.375' stroke='%23262136' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.video-js .vjs-play-control.vjs-ended .vjs-icon-placeholder:before, .video-js .vjs-icon-replay:before {
content: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.5363 6.40226L1.93958 10.7006C1.64037 10.8502 1.28833 10.6326 1.28833 10.2981V1.7014C1.28833 1.36688 1.64037 1.14931 1.93958 1.29891L10.5363 5.59727C10.868 5.76311 10.868 6.23642 10.5363 6.40226Z' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
}
.video-js .vjs-play-control.vjs-playing .vjs-icon-placeholder:before, .vjs-icon-pause:before {
content: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3.61885' y='2.06074' width='3.16185' height='11.88' rx='0.9' fill='black' stroke='%23EDEDED' stroke-width='0.6' stroke-linecap='round'/%3E%3Crect x='9.21797' y='2.06074' width='3.16185' height='11.88' rx='0.9' fill='black' stroke='%23EDEDED' stroke-width='0.6' stroke-linecap='round'/%3E%3C/svg%3E%0A");
padding: 2px;
}
.vjs-error-display {
display: none;
}
.ul-video-player-video {
position: relative;
top: 0;
left: 0;
width: 100%;
}
.ul-video-container {
width: 100%;
height: auto;
left: 0px;
top: 0px;
background-color: transparent;
border-radius: 4px;
align-items: start;
display: flex;
flex-direction: column;
/* Inside Auto Layout */
flex: none;
order: 0;
flex-grow: 0;
margin: 10px 0px;
position: relative;
}
.vjs-record button.vjs-device-button.vjs-control {
background: rgba(255, 255, 255, 96);
width: 100%;
height: 100%;
left: 0;
top: 0;
margin: 0;
border-radius: 0;
line-height: 0.6;
padding: 10px;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
z-index: 3;
}
.vjs-record .vjs-device-button.vjs-control:before {
font-size: 14px !important;
color: #333;
content: "Your browser needs to access your camera and microphone for video recording";
line-height: 135%;
}
.vjs-record .vjs-device-button.vjs-control.permission-denied:before {
font-size: 16px !important;
color: #262136;
content: "Unable to access your camera and microphone";
}
.vjs-record .vjs-device-button.vjs-control:after {
display: inline-block;
background: #F0F0F5;
font-size: 13px;
border-radius: 4px;
content: "Request Permissions";
padding: 1em 2em;
color: #333;
margin-top: 20px;
}
.vjs-record .vjs-device-button.vjs-control.permission-denied:after {
display: inline-block;
background: white;
font-size: 13px;
content: "Please go to your browser settings and update permissions to enable recording";
padding: 1em;
color: #4B575D;
margin: 5px;
line-height: 135%;
text-align: center;
}
.vjs-control.vjs-button.ul-video-recorder-delete-button, .vjs-control.vjs-button.ul-video-recorder-toggle-button, .vjs-control.vjs-button.ul-video-recorder-camera-off-button-audio-only, .vjs-control.vjs-button.ul-video-recorder-camera-off-button {
cursor: pointer;
}
.ul-video-recorder-delete-button .vjs-icon-placeholder:before {
content: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.21234 7.37549V11.1193M2.53931 4.25595H13.4593H2.53931ZM5.57234 4.25595V3.00833C5.57222 2.84433 5.60354 2.68192 5.6645 2.53038C5.72546 2.37884 5.81488 2.24115 5.92762 2.12519C6.04037 2.00922 6.17424 1.91726 6.32158 1.85456C6.46892 1.79185 6.62683 1.75964 6.78628 1.75977H9.21234C9.37179 1.75964 9.5297 1.79185 9.67703 1.85456C9.82437 1.91726 9.95824 2.00922 10.071 2.12519C10.1837 2.24115 10.2732 2.37884 10.3341 2.53038C10.3951 2.68192 10.4264 2.84433 10.4263 3.00833V4.25595H5.57234ZM12.2463 4.25595V12.9912C12.2463 13.3223 12.1184 13.6399 11.8907 13.8741C11.6631 14.1082 11.3543 14.2398 11.0323 14.2398H4.96628C4.64432 14.2398 4.33555 14.1082 4.10789 13.8741C3.88023 13.6399 3.75234 13.3223 3.75234 12.9912V4.25595H12.2463ZM6.78628 7.37549V11.1193V7.37549Z' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}
.ul-video-recorder-toggle-button .vjs-icon-placeholder:before {
content: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 0C12.4183 0 16 3.58172 16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0Z' fill='%23D15153'/%3E%3C/svg%3E");
}
.ul-video-recorder-toggle-button.ul-recording-in-session .vjs-icon-placeholder:before {
content: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 10L12 2C12 0.89543 11.1046 -4.85396e-07 10 -4.37114e-07L2 -8.74228e-08C0.89543 -3.91405e-08 -4.85396e-07 0.895431 -4.37114e-07 2L-8.74228e-08 10C-3.91405e-08 11.1046 0.895431 12 2 12L10 12C11.1046 12 12 11.1046 12 10Z' fill='%23D15153'/%3E%3C/svg%3E%0A");
}
.ul-video-recorder-camera-off-button .vjs-icon-placeholder:before {
content: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_2645_4654)'%3E%3Cpath d='M15.1491 4.75L10.5991 8L15.1491 11.25V4.75Z' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9.29912 3.4502H2.14912C1.43115 3.4502 0.849121 4.03223 0.849121 4.7502V11.2502C0.849121 11.9682 1.43115 12.5502 2.14912 12.5502H9.29912C10.0171 12.5502 10.5991 11.9682 10.5991 11.2502V4.7502C10.5991 4.03223 10.0171 3.4502 9.29912 3.4502Z' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_2645_4654'%3E%3Crect width='15.6' height='15.6' fill='white' transform='translate(0.199951 0.200195)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
}
.ul-video-recorder-camera-off-button-audio-only .vjs-icon-placeholder:before {
content: url("data:image/svg+xml,%3Csvg width='22' height='15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M.75 3A2.75 2.75 0 013.5.25h9.081A2.75 2.75 0 0115.331 3v9a2.75 2.75 0 01-2.75 2.75H3.5A2.75 2.75 0 01.75 12V3zM3.5 1.75c-.69 0-1.25.56-1.25 1.25v9c0 .69.56 1.25 1.25 1.25h9.081c.69 0 1.25-.56 1.25-1.25V3c0-.69-.56-1.25-1.25-1.25H3.5z' fill='%23262136'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M14.53 2.03l-12 12-1.06-1.06 12-12 1.06 1.06zM20.87 1.525a.75.75 0 01.38.652v10.588a.75.75 0 01-1.134.644l-5.92-3.53a.75.75 0 01-.365-.643v-3.53a.75.75 0 01.366-.644l5.919-3.53a.75.75 0 01.754-.007zm-5.539 4.607V8.81l4.419 2.635V3.497l-4.419 2.635z' fill='%23262136'/%3E%3C/svg%3E");
transform: scale(0.75);
}
.ul-upload-progress-label {
padding: 0.15em 0.75em;
align-items: center;
font-size: 12px;
color: #333;
background: #FCFCFD;
border-radius: 99px;
text-align: center;
border: 1px solid #E0E0EB;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
bottom: 75px;
left: calc(50% - 65px);
width: 130px;
z-index: 5;
}
.ul-upload-progress-label__time {
display: inline-flex;
margin-left: 0.8em;
align-items: center;
}
.ul-upload-progress-label__time:before {
content: "";
display: inline-flex;
width: 1px;
height: 12px;
background-color: #E0E0EB;
margin-right: 0.8em;
}
@keyframes grow {
0% {
transform: scale(1);
background-color: #EEECFC;
}
50% {
transform: scale(1.2);
background-color: #E1DFF4;
}
100% {
transform: scale(1);
background-color: #EEECFC;
}
}
.ul-audio-recorder-placeholder:before {
width: 80px;
height: 80px;
border-radius: 120px;
background-color: #EEECFC;
content: "";
position: absolute;
left: calc(50% - 40px);
top: calc(50% - 40px);
animation: 6s infinite grow;
transform-origin: 50% 60%;
}
.ul-audio-recorder-placeholder:after {
content: url("data:image/svg+xml,%3Csvg width='98' height='98' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='a' maskUnits='userSpaceOnUse' x='0' y='0' width='98' height='98'%3E%3Ccircle cx='49' cy='49' r='49' fill='%23EDECF8'/%3E%3C/mask%3E%3Cg mask='url(%23a)'%3E%3Ccircle cx='49' cy='49' r='50' fill='%23645CC2'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.422 81.812c5.405-15.547 20.187-26.706 37.576-26.706 17.39 0 32.172 11.159 37.577 26.707-9.164 10.43-22.601 17.013-37.576 17.013-14.976 0-28.414-6.583-37.577-17.014z' fill='%23fff' fill-opacity='.6'/%3E%3Ccircle cx='49' cy='29' r='17' fill='%23fff' fill-opacity='.7'/%3E%3C/g%3E%3C/svg%3E");
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
transform: translate(-50%, -50%) scale(0.6);
}
.ul-audio-recorder-placeholder {
min-height: 150px;
width: 100%;
background-color: #fcfcfd;
display: block;
position: relative;
}
.vjs-fullscreen .ul-audio-recorder-placeholder {
vertical-align: middle;
display: table-cell;
}
.vjs-fullscreen .ul-control-panel {
height: 80px;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
max-width: 100%;
background-color: #F8F8F8;
}
.vjs-playback-rate .vjs-playback-rate-value {
align-items: center;
display: flex;
font-size: 12px;
justify-content: center;
}
.vjs-playback-rate .vjs-menu {
left: -5px;
bottom: 3px;
}
.vjs-menu-button-popup .vjs-menu .vjs-menu-content {
background-color: white;
border: 1px solid rgba(0, 0, 0, 0.1);
box-sizing: border-box;
border-radius: 4px;
}
.vjs-menu li {
font-size: 12px;
padding: 5px 0;
}
.vjs-menu li.vjs-selected {
color: lightgray;
}
.vjs-menu li.vjs-menu-item:hover {
background-color: rgba(0, 0, 0, 0.05);
}
.vjs-fullscreen .ul-buttons-panel {
top: calc(50% - 30px);
position: relative;
}
.vjs-fullscreen .vjs-record-indicator.vjs-control {
bottom: 90px !important;
}
.vjs-record.video-js div.vjs-control.vjs-record-indicator {
padding: 0.3em 0.75em 0.15em 15px;
align-items: center;
font-size: 12px;
color: #333;
background: #FCFCFD;
border-radius: 99px;
text-align: center;
border: 1px solid #E0E0EB;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
bottom: 75px;
top: auto;
left: calc(50% - 21px);
width: 43px;
height: 16px;
z-index: 4;
}
.vjs-record.video-js div.vjs-control.vjs-record-indicator:after {
content: "";
background-color: #EB5757;
width: 6px;
height: 6px;
border-radius: 8px;
animation: none;
top: 4px;
left: 5px;
}
.vjs-record.video-js div.vjs-control.vjs-record-indicator:before {
position: relative;
font-size: 9px;
animation: none;
opacity: 1;
color: #333;
top: auto;
left: auto;
}
.ul-video-player-loading {
display: inline-block;
position: relative;
width: 6rem;
height: 6rem;
}
.ul-video-player-loading div {
box-sizing: border-box;
position: absolute;
display: block;
width: 80%;
height: 80%;
margin: 5px;
border: 5px solid #666;
border-radius: 50%;
animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
border-color: #666 transparent transparent transparent;
}
.first {
animation-delay: -0.45s;
}
.second {
animation-delay: -0.3s;
}
.third {
animation-delay: -0.15s;
}
@keyframes lds-ring {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.ul-video-btn {
width: 100%;
border: 1px solid #E6E6E6;
border-radius: 4px;
background-color: rgba(0, 0, 0, 0.02);
padding: 8px;
font-weight: 500;
font-size: 15px;
}
.ul-record-response-btn:before, .ul-record-response-btn:after, .ul-back-question-btn:before, .ul-back-question-btn:after {
margin: 0 5px;
vertical-align: middle;
}
.ul-record-response-btn:before {
content: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_2645_4654)'%3E%3Cpath d='M15.1491 4.75L10.5991 8L15.1491 11.25V4.75Z' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9.29912 3.4502H2.14912C1.43115 3.4502 0.849121 4.03223 0.849121 4.7502V11.2502C0.849121 11.9682 1.43115 12.5502 2.14912 12.5502H9.29912C10.0171 12.5502 10.5991 11.9682 10.5991 11.2502V4.7502C10.5991 4.03223 10.0171 3.4502 9.29912 3.4502Z' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_2645_4654'%3E%3Crect width='15.6' height='15.6' fill='white' transform='translate(0.199951 0.200195)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
display: inline-block;
transform: translate(0px, 2px);
}
.ul-record-response-btn:after {
content: 'Record your Response';
}
.ul-back-question-btn:before {
content: url("data:image/svg+xml,%3Csvg width='15' height='16' viewBox='0 0 15 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.8757 8.22361L1.1118 14.6056C0.945578 14.6887 0.75 14.5678 0.75 14.382V1.61803C0.75 1.43219 0.945579 1.31131 1.1118 1.39443L13.8757 7.77639C14.06 7.86852 14.06 8.13148 13.8757 8.22361Z' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
display: inline-block;
transform: scale(0.85) translate(0, 1px);
-moz-transform: scale(0.85) translate(0, 2px);
}
.ul-back-question-btn:after {
content: 'Back to Question';
}
.hidden {
display: none !important;
opacity: 0;
visibility: hidden;
}
.visible {
visibility: visible;
opacity: 1;
animation: fade 0.3s;
}
@keyframes fade {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#ul-recording-countdown-screen {
width: 100%;
height: 100%;
color: black;
background-color: rgba(255, 255, 255, 0.8);
position: absolute;
text-align: center;
font-size: 15px;
z-index: 1;
display: table;
}
.ul-countdown-text {
vertical-align: middle;
display: table-cell;
transform: translate(0, -25px);
}
.vjs-fullscreen > #ul-recording-countdown-screen {
font-size: 25px;
transform: unset;
}
.vjs-poster {
background-size: cover;
}
`}],he="-video-player",me="-secondary-video-player",ge="-video-recorder";let S,be;const N=async({event:e,apiBase:n,headers:o,visitorId:t,envId:s,metadata:l})=>{const a=d.document.documentElement;if(!t||!s)return;const v={event:`SDK - ${e}`,visitorId:t,environmentId:s,metadata:{...l||{},screenWidth:window.screen.width,screenHeight:window.screen.height,clientWidth:a.clientWidth,clientHeight:a.clientHeight,location:window.location.href,language:navigator.language}};(await fetch(`${n}/sdk/1/visitors/${t}/analytics`,{method:"POST",cache:"no-cache",headers:o,body:JSON.stringify(v)})).ok||console.warn("[Sprig] (ERR-444) Failed to track analytics",e)},F=async(e,n,o,t,s,l)=>{N({event:`Video Error ${n}`,apiBase:o,headers:t,visitorId:s,envId:l,metadata:{errorMessage:e.message}});const a=d.document.documentElement,v={screenWidth:window.screen.width,screenHeight:window.screen.height,clientWidth:a.clientWidth,clientHeight:a.clientHeight,location:window.location.href,language:navigator.language},r={action:n,err:{message:e.message,stack:e.stack},meta:v,vid:s,envId:l};(await fetch(`${o}/sdk/1/errors`,{method:"POST",cache:"no-cache",headers:{...t,"userleap-platform":"video_recorder","x-ul-error":window.btoa(`userleap-${Date.now()}-error`)},body:JSON.stringify(r)})).ok||console.warn("[Sprig] (ERR-444) Failed to report error to API",e)},fe=(e,n)=>{if(e.length===0)return n&&n();Promise.all(e.reduce((o,t)=>(o.push(((s,{type:l,content:a})=>new Promise(function(v,r){let u;l==="script"?(u=d.document.createElement("script"),u.src=a):l==="link"?(u=d.document.createElement("link"),u.rel="stylesheet",u.href=a,u.type="text/css"):(u=d.document.createElement("style"),u.innerHTML=a),u.onload=function(){v(a)},u.onerror=function(){r(a)},u.async=!1,u.id=btoa(a),s.appendChild(u)}))(d.document.head,t)),o),[])).then(()=>{d.videojs=d.document.defaultView.videojs,n&&n()}).catch(function(o){console.log(o+" failed to load")})},Ce=(e,n,o)=>{if(n==="start"&&(e.style.visibility="visible"),n==="none")e.style.visibility=D;else if(n==="success")e.style.visibility=D,e.innerHTML="Upload succeeded!";else{const t=Math.round(parseFloat(o));e.innerHTML=`Uploading <span class="ul-upload-progress-label__time">${t}%</span>`,e.style.background=`linear-gradient(to right, #E0E0EB 0%, #E0E0EB ${t}%, #FCFCFD ${t}%, #FCFCFD 100%)`}},te=(e,n)=>{const o=d.videojs(e.id());return o==null?void 0:o.payload[n]},je=(e,n)=>{const o=new(d.videojs.getComponent("Component"))(e);return o.addClass("ul-buttons-panel"),n.map(t=>{o.addChild(t)}),He(o),o},He=e=>{e.children().forEach(n=>{if(_[n.name_]){const o=Q(_[n.name_],`ul-${_[n.name_]}`);n.el_.appendChild(o)}})},Q=(e,n="")=>{const o=d.document.createElement("span");return o.className="ul-button-text",o.innerHTML=e,o.id=n,o},ke=(e,n,o,t,s=!1,l)=>{e.addClass("ul-video-player");const a=new(d.videojs.getComponent("Component"))(e);a.addClass("ul-control-panel"),e.progressBar=a.addChild("ProgressControl"),o&&e.src(o),e.audioPlayerPlaceholder=new(d.videojs.getComponent("Component"))(e),e.audioPlayerPlaceholder.addClass("ul-audio-recorder-placeholder");const v=o&&o.src?Ue(o.src):null;!o||!s&&v?(e.audioPlayerPlaceholder.hide(),d.document.getElementById(`${e.id()}_html5_api`).style.height="100%",v&&e.poster(v)):(e.children()[0].classList.add("vjs-hidden"),d.document.getElementById(`${e.id()}_html5_api`).style.height="0px"),e.on("play",()=>{s||!o||v||Ve(e),l==null||l.play()}),e.on("pause",()=>{l==null||l.pause()}),e.on("seeked",()=>{l==null||l.currentTime(e.currentTime())}),e.on("ratechange",()=>{l==null||l.playbackRate(e.playbackRate())}),e.addChild(e.audioPlayerPlaceholder,{},1),a.addChild(n),e.addChild(a),t&&t(e)},Se=(e,n,o,t,s,l,a,v=!1)=>{be=Date.now();const r=X(n,{controls:!1,bigPlayButton:!1,fluid:!1,width:1280,height:720,playsinline:!0,plugins:{record:{audio:!0,video:{mandatory:{minWidth:1280,minHeight:720}},frameWidth:1280,frameHeight:720,maxLength:600,autoMuteDevice:!0}}});if(!r)return;r.payload=o;const{surveyId:u,questionId:h,responseGroupUid:I,visitorId:g,envId:R}=o;let C;const T=p=>{const y=ne,m=ne+"-audio-only";Ce(r.uploadProgressLabel,"none"),S&&S.startTime>=be&&S.abort();const j=d.document.getElementById("ul-camera-button");p?(r.children()[0].classList.add("vjs-hidden"),b.removeClass(y),b.addClass(m),j.innerHTML=_.TurnOnCamera,r.audioPlayerPlaceholder.removeClass("vjs-hidden"),C==null||C.getTracks().forEach(E=>{E.stop()}),window.navigator.mediaDevices.getUserMedia({video:!0,audio:!0}).then(E=>{C=E,E.getVideoTracks().forEach(V=>{V.enabled=!1}),r.record().onDeviceReady(E)}).catch(r.record().onDeviceError.bind(r.record()))):(C==null||C.getVideoTracks().forEach(E=>{E.enabled=!0}),r.children()[0].classList.remove("vjs-hidden"),r.record().getDevice(),b.removeClass(m),b.addClass(y),j.innerHTML=_.TurnOffCamera,r.audioPlayerPlaceholder.addClass("vjs-hidden"))},c=new(d.videojs.getComponent("Button"))(r,{clickHandler:()=>{c.hasClass(D)||(N({event:"Video Delete Button Clicked",apiBase:t,headers:a,visitorId:g,envId:R,metadata:{questionId:h,responseGroupUid:I,surveyId:u}}),T(r.cameraOff),s(f.DELETE,{}),b.removeClass(D),c.addClass(D))}});c.addClass("ul-video-recorder-delete-button"),c.el_.appendChild(Q(_.DeleteButton,"ul-delete-button"));const w=d.document.getElementById(n),x=()=>{w.classList.contains("vjs-fullscreen")&&r.cameraOff?w.style.display="table":w.style.display="flex"};x();const b=new(d.videojs.getComponent("Button"))(r,{clickHandler:()=>{r.record().isRecording()||(r.cameraOff=!r.cameraOff,N({event:"Video Camera Button Clicked",apiBase:t,headers:a,visitorId:o.visitorId,envId:o.envId,metadata:{questionId:h,responseGroupUid:I,surveyId:u,cameraOff:r.cameraOff}}),T(r.cameraOff),!c.hasClass(D)&&c.addClass(D),s(f.DELETE,{}),x())}});b.addClass(ne),b.el_.appendChild(Q(_.TurnOffCamera,"ul-camera-button"));const k=new(d.videojs.getComponent("Button"))(r,{clickHandler:()=>{const p=d.document.getElementById("ul-recorder-toggle");if(r.record().isRecording())r.record().stop(),p&&(p.innerHTML=_.RecordButton),k.removeClass(oe),c.removeClass(D);else{const y=d.document.getElementById("ul-recording-countdown-screen");if(y)y.remove(),p&&(p.innerHTML=_.RecordButton),T(r.cameraOff),s(f.DELETE,{}),b.removeClass(D),c.addClass(D),k.removeClass(oe),O.show();else{k.addClass(oe),O.hide(),b.addClass(D),c.addClass(D),p&&(p.innerHTML=_.StopButton);const m=d.document.createElement("div");m.id="ul-recording-countdown-screen",w.insertBefore(m,w.children[1]),m.style.height=`${w.offsetHeight}px`,Ie(r,3)}}}});k.addClass("ul-video-recorder-toggle-button"),k.el_.appendChild(Q(_.RecordButton,"ul-recorder-toggle"));const P=d.document.createElement("p");P.style.visibility="hidden",P.className="ul-upload-progress-label",e.appendChild(P),r.uploadProgressLabel=P;const G=je(r,[c,b,"PlayToggle",k,"FullscreenToggle"]),O=G.children().find(p=>p.name_==="FullscreenToggle");O.hasClass("vjs-disabled")&&O.hide();const M=G.children().find(p=>p.name_==="PlayToggle");M.hide(),c.addClass(D),ke(r,G,l,!1,v),r.on("stopRecord",()=>{k.hide(),M.show(),O.show(),c.removeClass(D)}),r.on("deviceReady",()=>{k.show(),M.hide(),c.addClass(D)}),((p,y,m,j,E)=>{const{surveyId:V,responseGroupUid:$,visitorId:L,envId:B}=p.payload;p.on("deviceError",function(){console.warn("device error: ",p.deviceErrorCode),p.deviceErrorCode.message==="Permission denied"?(p.deviceButton.addClass("permission-denied"),m&&m(f.ERROR,{type:f.PERMISSION_DENIED}),N({event:"Video Permission Denied",apiBase:y,headers:E,visitorId:L,envId:B,metadata:{questionId:te(p,ee),responseGroupUid:$,surveyId:V}})):(m&&m(f.ERROR,{type:f.OTHER}),F(new Error(p.deviceErrorCode.message),"recorderDeviceError",y,E,L,B))}),p.on("error",function(z,U){F(U||p.error(),"recorderError",y,E,L,B)}),p.on("startRecord",function(z,U){j(p.uploadProgressLabel,"none"),N({event:"Video Record Start",apiBase:y,headers:E,visitorId:L,envId:B,metadata:{questionId:te(p,ee),responseGroupUid:$,surveyId:V}})}),p.on("finishRecord",async function(){j(p.uploadProgressLabel,"start",0);const z=te(p,ee);if(!V){const H="internal error: missing fields in payload";return m&&m(f.ERROR,{type:f.OTHER}),F(new Error(H),"finishRecord",y,E,L,B),null}p.record().stopDevice();const U=p.cameraOff?f.MEDIA_TYPE_AUDIO:f.MEDIA_TYPE_VIDEO,A=Re.v4();N({event:"Video Record Finish",apiBase:y,headers:E,visitorId:L,envId:B,metadata:{mediaRecordingUid:A,questionId:z,responseGroupUid:$,surveyId:V,mediaType:U}});const Y={surveyId:V,updatedAt:new Date().toISOString(),mediaType:U,mediaRecordingUid:A};z&&(Y.questionId=z),$&&(Y.responseGroupUid=$),L&&(Y.visitorId=L);const J=await(async()=>{const H=await fetch(`${y}/2/environments/integrations/upload`,{method:"POST",cache:"no-cache",headers:{"Content-Type":"application/json"},body:JSON.stringify(Y)});if(H.ok){const se=await H.json();return m&&m(f.UPLOAD_STARTED,{[f.UPLOAD_ID]:se.upload.id,[f.MEDIA_TYPE]:U,[f.MEDIA_RECORDING_UID]:A}),se.upload.url}return m&&m(f.ERROR,{type:f.OTHER,response:H}),F(new Error("failed to get upload response with url"),"finishRecord",y,E,L,B),null})();J&&(S=d.document.defaultView.UpChunk.createUpload({endpoint:J,file:new d.document.defaultView.File([p.recordedData],`recording ${U} ${Date.now()}`),chunkSize:5120}),S.startTime=Date.now(),N({event:"Video Upload Start",apiBase:y,headers:E,visitorId:L,envId:B,metadata:{mediaRecordingUid:A,questionId:z,responseGroupUid:$,surveyId:V,mediaType:U,url:J}}),S.on("error",H=>{j(p.uploadProgressLabel,"none"),m&&m(f.UPLOAD_FINISHED,{[f.MEDIA_RECORDING_UID]:A}),F(H,"finishRecord",y,E,L,B)}),S.on("progress",H=>{m&&m(f.UPLOAD_PROGRESS,{[f.MEDIA_RECORDING_UID]:A,[f.UPLOAD_PROGRESS_PCT]:H.detail}),j(p.uploadProgressLabel,"progress",H.detail)}),S.on("success",()=>{j(p.uploadProgressLabel,"success"),m&&m(f.UPLOAD_FINISHED,{[f.MEDIA_RECORDING_UID]:A}),N({event:"Video Upload Success",apiBase:y,headers:E,visitorId:L,envId:B,metadata:{mediaRecordingUid:A,questionId:z,responseGroupUid:$,surveyId:V,mediaType:U,url:J,elapsedMs:S.startTime&&Date.now()-S.startTime}})}))})})(r,t,s,Ce,a);const Z=[{name:"microphone"}];!r.cameraOff&&Z.push({name:"camera"}),Promise.all(Z.map(p=>{var y;return(y=navigator==null?void 0:navigator.permissions)==null?void 0:y.query(p)})).then(p=>{p.reduce((y,m)=>y&m.state==="granted",!0)&&r&&(r.deviceButton&&r.deviceButton.hide(),r.record().getDevice())}).catch(p=>{})},Ie=(e,n=3)=>{const o=d.document.getElementById("ul-recording-countdown-screen");o&&n===0?(o.remove(),e.record().start()):o&&(o.innerHTML=`<span class='ul-countdown-text'>Recording in... ${n}</span>`,setTimeout(()=>{Ie(e,n-1)},1e3))},we=e=>{const n=d.document.createElement("div");return n.className="ul-video-container",n.appendChild((o=>{const t=d.document.createElement("div");return t.className="ul-video-player-loading",t.id=ie(o),["first","second","third","fourth"].map(s=>{const l=d.document.createElement("div");l.className=s,t.appendChild(l)}),t})(e)),n},re=(e,n)=>{const o=d.document.createElement("video");o.id=e,o.className="video-js vjs-default-skin ul-video-player-video";const t=d.document.createElement("p");t.className="vjs-no-js",t.innerHTML="To view this video please enable JavaScript, and consider upgrading to a web browser that";const s=d.document.createElement("a");return s.href="https://videojs.com/html5-video-support/",s.target="_blank",s.innerHTML="supports HTML5 video",t.appendChild(s),o.appendChild(t),n.appendChild(o),n},Ve=(e,n)=>{e.children()[0].classList.remove("vjs-hidden"),e.audioPlayerPlaceholder.hide(),d.document.getElementById(`${e.id()}_html5_api`).style.height="100%"},X=(e,n)=>d.document.getElementById(e)?n?d.videojs(e,n):d.videojs(e):(console.error(`Error in finding player element with ID, ${e}`),null),Ue=e=>{if(!e)return null;const n=e.match(/https:\/\/stream.mux.com\/(.*)/);let o=n?n[1]:null;return o.includes(pe)&&(o=o.replace(pe,"")),o?`https://image.mux.com/${o}/thumbnail.jpg?time=0`:null},f={UPLOAD_STARTED:"upload.started",UPLOAD_PROGRESS:"upload.progress",UPLOAD_FINISHED:"upload.finished",DELETE:"delete",ERROR:"error",MEDIA_TYPE:"media.type",PERMISSION_DENIED:"permission_denied",OTHER:"other",UPLOAD_ID:"upload.id",UPLOAD_PROGRESS_PCT:"upload.progress.pct",MEDIA_RECORDING_UID:"media.recording.uid",MEDIA_TYPE_VIDEO:"video",MEDIA_TYPE_AUDIO:"audio"},_={PlaybackRateMenuButton:"Speed",PlayToggle:"Play",FullscreenToggle:"Expand",TurnOnCamera:"Turn on",TurnOffCamera:"Turn off",DeleteButton:"Delete",RecordButton:"Record",StopButton:"Stop",PauseButton:"Pause"};exports.Button=le,exports.Header=({message:e,properties:n,isRequired:o})=>{const t=i._(null),s=n==null?void 0:n.captionText,l=ae();return i.u("div",{className:i.cc("question-header-container","sprig-header-container",l?"sprig-border-bottom":null),ref:t,children:[i.u("div",{className:"question-header-button-container",children:i.u(de,{className:"ul-question",id:"ul-question",isHeader:!0,plainText:e,richText:n==null?void 0:n.questionHtml,showAsterisk:o})}),i.u(de,{className:"ul-caption",id:"ul-caption",plainText:s,richText:n==null?void 0:n.captionHtml})]})},exports.Html=ye,exports.LongformSubmitButton=({isSubmitDisabled:e,handleSubmit:n})=>i.u("div",{className:"ul-card-longform__submit-button-container",children:i.u(le,{className:"ul-card-longform__submit-button",disabled:e,onClick:n,children:["OK ",i.u(Te,{})]})}),exports.MobileEmbedView=({embeddedType:e="prototype",properties:n,children:o})=>{var I;const{handleClickEmbedButton:t,hasViewedEmbed:s,headers:l,useDesktopPrototype:a}=i.useConfig(g=>({handleClickEmbedButton:g.handleClickEmbedButton,hasViewedEmbed:g.hasViewedEmbed,headers:g.headers,useDesktopPrototype:g.useDesktopPrototype})),v=(n==null?void 0:n.conceptUrl)||((I=n==null?void 0:n.consentDocument)==null?void 0:I.url),r=window.innerWidth<W.EMBED_MOBILE_MAX_WIDTH,u=l["userleap-platform"],h=(g,R)=>{g.preventDefault(),t(R)};if((()=>{const{update:g,index:R,isConversationalUI:C,viewDocument:T}=i.useConfig(({update:w,index:x,isConversationalUI:b,viewDocument:k})=>({update:w,index:x,isConversationalUI:b,viewDocument:k})),c=De.debounce(g,100);i.p(()=>{if(C)return;const w=new ResizeObserver(c),x=T.querySelector(".ul-card__container");return x&&w.observe(x,{box:"border-box"}),()=>{w.disconnect()}},[c,g,R,C,T])})(),!a&&r&&!s&&v&&["email","link"].includes(u)){if(e==="prototype")return i.u(ce,{handleClick:g=>{h(g,"question.prototype.click")}});if(e==="pdf")return i.u(ce,{buttonText:(n==null?void 0:n.viewDocumentText)||"View Document",handleClick:g=>{h(g,"question.agreement.click")}})}return i.u(i.g,{children:o})},exports.Option=({ariaLabel:e,border:n,choiceStyle:o={},label:t,isSelected:s,value:l,text:a,id:v,isRadio:r,useMobileStyling:u,error:h,allowTextEntry:I,noneOfTheAbove:g,promptText:R,disabled:C=!1,onUserInputChanged:T})=>{const{styleNonce:c,viewDocument:w}=i.useConfig(j=>({styleNonce:j.styleNonce,viewDocument:j.viewDocument})),[x,b]=i.h(!1);_e(w,n,c);const k=({isSelected:j,userText:E})=>{T&&T({id:v,selected:j,value:l,userText:E,noneOfTheAbove:g})},P=j=>{C||(j.stopPropagation(),k({isSelected:r||!s,userText:a}),b(!1))},G=()=>{x||b(!0)},O=()=>{x&&b(!1)},M={onClick:j=>P(j),onKeyPress:j=>(E=>{C||E.key!=="Enter"&&E.key!==" "||P(E)})(j)};"ontouchstart"in w.documentElement?(M.onTouchStart=O,M.onTouchCancel=O,M.onTouchEnd=O):(M.onMouseDown=G,M.onMouseLeave=O);const Z=r?`radio-${v}`:`checkbox-${v}`,p=s||x?[K]:[],y=[...h?[xe]:[],...p,...C?["ul-choice-disabled"]:[]],m=t?{"aria-labelledby":`label-${v}`}:{"aria-label":e};return i.u("div",{className:i.cc(i.getClasses("choice",u),...y),id:`choice-div-${v}`,style:{...o,...h?{borderColor:W.ERROR_BORDER_COLOR}:{},...C?{opacity:.5,cursor:"not-allowed"}:{}},...C?{}:M,"aria-disabled":C,children:[i.u("div",{className:i.cc("choice-label-container"),children:[r?i.u("div",{...m,className:i.cc("select-radio",...p),id:Z,role:"radio",tabIndex:0}):i.u(Ee,{disabled:C,divId:Z,id:v,isSelected:s,themeColor:n}),t&&i.u("label",{className:i.cc(i.getClasses("select-label",u)),htmlFor:Z,id:`label-${v}`,children:t})]}),I&&s&&i.u("div",{className:i.cc("choice-text-entry-container",...p),children:i.u(Le,{onTextChange:j=>k({isSelected:s,userText:j}),promptText:R||"Please specify",textValue:a,useMobileStyling:u})})]})},exports.QuestionBodyFooterContainer=({children:e})=>{const n=ae(),{isConversationalUI:o}=i.useConfig(t=>({isConversationalUI:t.isConversationalUI}));return i.u("div",{className:i.cc("sprig-question-footer-container",n&&!o?"sprig-border-top":null),children:e})},exports.QuestionBodyWrapper=({children:e})=>i.u("div",{className:"sprig-question-body",children:e}),exports.RECORDER=f,exports.Select=({isMultiSelect:e=!1,multiselectText:n="choices selected",onChange:o,options:t,placeholderText:s,value:l,disabledOptions:a=[],dropdownFooter:v})=>{const[r,u]=i.h(!1),h=i._(null),{viewDocument:I,update:g,isConversationalUI:R}=i.useConfig(c=>({viewDocument:c.viewDocument,update:c.update,isConversationalUI:c.isConversationalUI})),C=()=>{u(!r)};i.y(()=>{R||g()},[r,R,g]),i.y(()=>{r&&h.current&&h.current.scrollIntoView({behavior:"smooth",block:"nearest"})},[r]),i.p(()=>{var w;const c=x=>{const b=x.target;(b==null?void 0:b.closest(".select-option.ul-choice-disabled"))||u(!1)};I.addEventListener("click",c);try{(w=window.parent)==null||w.addEventListener("click",c)}catch{window.addEventListener("click",c)}return()=>{var x;I.removeEventListener("click",c);try{(x=window.parent)==null||x.removeEventListener("click",c)}catch{window.removeEventListener("click",c)}}},[I]);const T=l.length===0?["select-button-placeholder"]:[];return i.u(i.g,{children:[i.u("button",{"aria-label":"choice dropdown button",className:i.cc("select-button",...T),onClick:c=>{c.stopPropagation(),C()},type:"button",children:[i.u("span",{children:l.length===0?s:l.length===1?l[0].label:`${l.length} ${n}`}),i.u(i.SvgCaret,{})]}),r&&i.u(Oe,{disabledOptions:a,dropdownFooter:v,options:t,panelRef:h,selectedOptions:l,selectItem:c=>{var b;const w=l.some(k=>k.id===c.id),x=l.some(k=>{var P;return(P=k.optionProperties)==null?void 0:P.noneOfTheAbove});(b=c.optionProperties)!=null&&b.noneOfTheAbove&&!w?o([c]):e?o(w?l.filter(k=>k.id!==c.id):x?[c]:[...l,c]):w||o([c]),e||C()},showCheckbox:e})]})},exports.getAttributedUrl=(e=void 0,n={})=>{if(!e)return e;const o=["http:","https:","itms-apps:","market:"],t=(a=>/^[a-zA-Z][a-zA-Z0-9+\-.]*:\/\//.test(a)?a:`http://${a}`)(e);if(!t)return;try{const a=new URL(t);if(!a.protocol||!o.includes(a.protocol))return}catch{return}const s=[],l=((a,v,r)=>{let u=a;for(const[h,I]of Object.entries(Me))if(u.toLowerCase().includes(h))if(v[I]){const g=new RegExp(h,"gi");u=u.replace(g,v[I])}else r.push(h);return u})(t,n,s);return s.length===0?l:((a,v)=>{if(!a.includes("?"))return a;const r=a.slice(0,a.indexOf("?")),u=a.slice(a.indexOf("?")+1).split("&").map(h=>h.split("=")).filter(h=>!v.includes(h[1]));return u.length===0?r:`${r}?${u.map(h=>h.join("=")).join("&")}`})(l,s)},exports.pauseQuestionPlayer=e=>{const n=X(e+he);n==null||n.pause()},exports.stopRecording=e=>{const n=e+ge;if(d.document.getElementById(n)&&d.videojs){try{if(!d.videojs(n).record().stream)return}catch{return}d.videojs(n).record().stop(),d.videojs(n).record().stopDevice()}},exports.useAutoSize=(e,n)=>{const o=i._(0);return()=>{if(e.current){const t=e.current;t.style.height="1px";const s=t.scrollHeight+(t.offsetHeight-t.clientHeight),l=parseInt(window.getComputedStyle(t).getPropertyValue("max-height")),a=s<=l?s:l;o.current!==a&&requestAnimationFrame(()=>{n()}),o.current=a,t.style.height=`${a}px`}}},exports.useSetAllResponsesRaw=e=>{const n=i._(),{setAllResponsesRaw:o}=i.useConfig(t=>({setAllResponsesRaw:t.setAllResponsesRaw}));i.p(()=>{const t=n.current;(!t||Object.keys(e).length!==Object.keys(t).length||Object.keys(e).some(s=>e[s]!==t[s]))&&(o(e),n.current=e)},[e,o])},exports.videoPlayer=(e,n,o,t=!1,s="https://api.sprig.com",l=document,a=null,v=null)=>{d.document=l;const r=e+he,u=we(r);return d.document.addEventListener("securitypolicyviolation",h=>{F(new Error(`Voice & Video feature violates ${h.violatedDirective} web page CSP policies for the question player.`),"playerDeviceError",s,{})}),fe(ve,()=>{d.document.getElementById(ie(r)).remove(),re(r,u);const h={playsinline:!0,playbackRates:[.5,1,1.5,2],fill:!0};try{const I=e+me;re(I,u);const g=X(r,h),R=X(I,{muted:!0,...h});if(!g||!R)return;((c,w,x)=>{c.addClass(`ul${me}`);const b=new(d.videojs.getComponent("Component"))(c);w&&c.src(w),c.addChild(b),x&&x(c)})(R,a,v),a||R.addClass(D);const C=je(g,["PlaybackRateMenuButton","PlayToggle","FullscreenToggle"]),T=C.children().find(c=>c.name_==="FullscreenToggle");T.hasClass("vjs-disabled")&&T.hide(),ke(g,C,n,o,t,R)}catch(I){return void F(new Error(`Error when creating video player object ${I}`),"playerDeviceError",s,{})}}),u},exports.videoRecorderPlayer=(e,n={},o="https://api.userleap.com",t,s,l,a=!1,v=document)=>{d.document=v;const r=e+ge,u=we(r);return d.document.addEventListener("securitypolicyviolation",h=>{F(new Error(`Voice & Video feature violates ${h.violatedDirective} web page CSP policies for the recorder player.`),"recorderDeviceError",o,l,n.visitorId,n.envId)}),fe(ve.concat(Be),()=>{re(r,u),d.document.getElementById(ie(r)).remove();try{Se(u,r,n,o,t,s,l,a)}catch(h){return void F(new Error(`Error when creating video recorder player object ${h}`),"recorderDeviceError",o,l,n.visitorId,n.envId)}}),u};