-
Notifications
You must be signed in to change notification settings - Fork 1
/
65aa8c5f.js
1 lines (1 loc) · 15.1 KB
/
65aa8c5f.js
1
System.register(["./be7cca87.js"],(function(e){"use strict";var t,a,n,r,o,i,s,l,c;return{setters:[function(e){t=e._,a=e.a,n=e.K,r=e.n,o=e.c,i=e.d,s=e.e,l=e.j,c=e.l}],execute:function(){var d=function(e){function r(){var e,t=arguments.length>0&&void 0!==arguments[0]&&arguments[0];return o(this,r),(e=i(this,r)).tag=r.tag,e.template=globalThis.document.createElement("template"),e.attachShadow({mode:"open"}),t||e.render(),e}return t(r,e),a(r,[{key:"connectedCallback",value:function(){globalThis.ShadyCSS&&globalThis.ShadyCSS.styleElement(this)}},{key:"_copyAttribute",value:function(e,t){var a,r=this.shadowRoot.querySelectorAll(t),o=this.getAttribute(e),i=null==o?"removeAttribute":"setAttribute",s=n(r);try{for(s.s();!(a=s.n()).done;){a.value[i](e,o)}}catch(e){s.e(e)}finally{s.f()}}},{key:"render",value:function(){this.shadowRoot.innerHTML=null,this.template.innerHTML=this.html,globalThis.ShadyCSS&&globalThis.ShadyCSS.prepareTemplate(this.template,this.tag),this.shadowRoot.appendChild(this.template.content.cloneNode(!0))}},{key:"html",get:function(){return'\n <style>\n :host {\n margin: 0;\n display: block;\n max-width: 100%; \n }\n :host([hidden]){\n display: none;\n }\n #svg {\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n right: 0;\n fill: var(--simple-login-avatar-background, white);\n }\n .avatar {\n position:relative;\n margin: 0 auto;\n display: block;\n overflow: hidden;\n text-decoration: none;\n line-height: 240%;\n color: var(--simple-login-avatar-background, white);\n background: var(--simple-login-avatar-color, #36bed4);\n border-radius: var(--simple-login-avatar-border-radius, 100%);\n }\n </style>\n <div class="avatar">\n <svg id="svg" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false" style="pointer-events: none; display: block;"><g><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"></path></g></svg>\n <slot></slot>\n </div>'}}],[{key:"tag",get:function(){return"simple-login-avatar"}}])}(r(HTMLElement));customElements.define(d.tag,d);var u={url:new URL("./elements/simple-login/lib/simple-login-camera.js",document.baseURI).href},p=function(e){function n(){var e;o(this,n),(e=i(this,n)).windowControllers=new AbortController,globalThis.WCGlobalBasePath?e.basePath=globalThis.WCGlobalBasePath:e.basePath=new URL("./simple-login-camera.js",u.url).href+"/../../../../",e.t={record:"Record",pause:"Pause record",stopSave:"Stop & Save",clickToTakePhoto:"Click to take photo"},globalThis.dispatchEvent(new CustomEvent("i18n-manager-register-element",{detail:{context:e,namespace:"simple-login",localesPath:new URL("../locales/simple-login.es.json",u.url).href+"/../",updateCallback:"render",locales:["es"]}}));var t="".concat(e.basePath,"msr/MediaStreamRecorder.min.js");return globalThis.ESGlobalBridge.requestAvailability().load("msr",t),globalThis.addEventListener("es-bridge-msr-loaded",e._msrLoaded.bind(e),{signal:e.windowControllers.signal}),e.template=globalThis.document.createElement("template"),e._shadow=e.attachShadow({mode:"closed"}),e.render(),e._video=e._shadow.querySelector("video"),e._error=e._shadow.querySelector("p"),e._record=e._shadow.querySelector("button.record"),e._pauseRecord=e._shadow.querySelector("button.pause-record"),globalThis.document.addEventListener("DOMContentLoaded",e.documentLoaded.bind(e),{signal:e.windowControllers.signal}),e.hasAttribute("record")?(e._record.addEventListener("click",(function(){return e._record.hasAttribute("recording")?(e._record.innerText=e.t.record,e._record.removeAttribute("recording"),e._stopRecording()):(e._record.innerText=e.t.stopSave,e._record.setAttribute("recording",""),e._startRecording())})),e._pauseRecord.addEventListener("click",(function(){return e._pauseRecord.hasAttribute("resume")?(e._pauseRecord.innerText="Pause record",e._pauseRecord.removeAttribute("resume"),e._resumeRecording()):(e._pauseRecord.innerText="Resume record",e._pauseRecord.setAttribute("resume",""),e._pauseRecording())}))):(e._record.remove(),e._pauseRecord.remove()),e}return t(n,e),a(n,[{key:"render",value:function(){this._shadow.innerHTML=null,this.template.innerHTML=this.html,globalThis.ShadyCSS&&globalThis.ShadyCSS.prepareTemplate(this.template,this.tag),this._shadow.appendChild(this.template.content.cloneNode(!0))}},{key:"_startRecording",value:function(){this._pauseRecord.removeAttribute("hidden"),this.MediaStreamRecorder.start(100)}},{key:"_stopRecording",value:function(){this._pauseRecord.setAttribute("hidden",""),this._pauseRecord.removeAttribute("resume"),this.MediaStreamRecorder.stop()}},{key:"_pauseRecording",value:function(){this._record.setAttribute("disabled",""),this.MediaStreamRecorder.pause()}},{key:"_resumeRecording",value:function(){this._record.removeAttribute("disabled"),this.MediaStreamRecorder.resume()}},{key:"_saveVideo",value:function(e){var t=e.type.split("/").pop();this.MediaStreamRecorder.save(e,"my-camera-".concat((new Date).toISOString().replace(/:|\./g,"-"),".").concat(t))}},{key:"_cameraStream",value:function(){return navigator.mediaDevices.getUserMedia?globalThis.navigator.mediaDevices.getUserMedia({video:{width:{min:320,ideal:1280,max:1920},height:{min:240,ideal:720,max:1080},facingMode:"user"},audio:this.hasAttribute("audio")}):Promise.reject(new Error("getUserMedia is not implemented in this browser"))}},{key:"takeASnap",value:(d=l(c().mark((function e(){var t,a;return c().wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return t=globalThis.document.createElement("canvas"),a=t.getContext("2d"),t.width=this._video.videoWidth,t.height=this._video.videoHeight,a.drawImage(this._video,0,0),e.next=7,new Promise((function(e,a){t.toBlob(e,"image/jpeg")}));case 7:return e.abrupt("return",e.sent);case 8:case"end":return e.stop()}}),e,this)}))),function(){return d.apply(this,arguments)})},{key:"renderImage",value:function(e){var t=globalThis.document.createElement("img");return t.src=URL.createObjectURL(e),t}},{key:"imageBlob",value:function(e){return e}},{key:"download",value:function(e){var t=globalThis.document.createElement("a");t.href=URL.createObjectURL(e),t.download="screenshot.jpg",globalThis.document.body.appendChild(t),t.click()}},{key:"_addVideoAtributes",value:function(){this._video.autoplay=this.hasAttribute("autoplay"),this._video.controls=this.hasAttribute("controls")}},{key:"_msrLoaded",value:function(e){var t=this;this._applyMSR(),this._shadow.querySelector("#wrapper").addEventListener("click",(function(){t.dispatchEvent(new CustomEvent("site-listing-video-activate",{detail:t,bubbles:!0,composed:!0}))}))}},{key:"_applyMSR",value:(r=l(c().mark((function e(){var t=this;return c().wrap((function(e){for(;;)switch(e.prev=e.next){case 0:globalThis.addEventListener("site-listing-video-activate",l(c().mark((function e(){return c().wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return e.prev=0,e.next=3,t._cameraStream();case 3:t._video.srcObject=e.sent,globalThis.stream=t._video.srcObject,t._addVideoAtributes(),t.hasAttribute("record")&&(t.MediaStreamRecorder=new MediaStreamRecorder(t._video.srcObject),t.MediaStreamRecorder.ondataavailable=t._saveVideo.bind(t)),setTimeout((function(){t.dispatchEvent(new CustomEvent("simple-login-camera-icon-click",{detail:t,bubbles:!0,composed:!0}))}),100),t._error.remove(),e.next=26;break;case 11:if(e.prev=11,e.t0=e.catch(0),t._video.remove(),t._record.remove(),t._pauseRecord.remove(),"ConstraintNotSatisfiedError"!==e.t0.name){e.next=20;break}t._error.innerText="The resolution is not supported by your device.",e.next=26;break;case 20:if("NotAllowedError"!==e.t0.name){e.next=24;break}t._error.innerText="Permissions have not been granted to use your camera and microphone, you need to allow the page access to your devices in order for the demo to work.",e.next=26;break;case 24:throw t._error.innerText=e.t0.message,Error(e.t0);case 26:case"end":return e.stop()}}),e,null,[[0,11]])}))),{signal:this.windowControllers.signal});case 1:case"end":return e.stop()}}),e,this)}))),function(){return r.apply(this,arguments)})},{key:"connectedCallback",value:function(){!0===globalThis.ESGlobalBridge.requestAvailability().imports.msr&&this._applyMSR(),this._t=s({},this.t)}},{key:"documentLoaded",value:function(e){!0===globalThis.ESGlobalBridge.requestAvailability().imports.msr&&this._applyMSR()}},{key:"disconnectedCallback",value:function(){this.windowControllers.abort()}},{key:"attributeChangedCallback",value:function(e,t,a){}},{key:"html",get:function(){return'\n <style>\n :host {\n display: flex;\n }\n #wrapper {\n overflow: hidden;\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n flex-wrap: wrap;\n position: relative;\n background-color: var(--simple-login-camera-background, var(--background-color, #ccc));\n }\n video {\n margin-left: calc(100% * var(--simple-login-camera-aspect, 1) / 2 - 177.77777777777% / 2); \n width: calc(177.77777777777% / var(--simple-login-camera-aspect, 1));\n background-color: rgba(0, 0, 0, 0);\n }\n .error {\n color: black;\n background-color: white;\n font-size: 26px;\n text-align: center;\n padding: 10px;\n position: absolute;\n }\n .custom-controls {\n top: 8px;\n right: 8px;\n position: absolute;\n }\n .custom-controls button {\n padding: 8px 10px;\n }\n [hidden] {\n display: none;\n }\n </style>\n <div id="wrapper" part="wrapper">\n <video part="video"></video>\n <p class="error" part="error">'.concat(this.t.clickToTakePhoto,'</p>\n <div class="custom-controls" part="controls">\n <button class="record" part="record">').concat(this.t.record,'</button>\n <button class="pause-record" hidden part="pause">').concat(this.t.pause,"</button>\n </div>\n </div>\n ")}}],[{key:"tag",get:function(){return"simple-login-camera"}},{key:"observedAttributes",get:function(){return["autoplay","controls","audio"]}}]);var r,d}(r(HTMLElement));navigator.mediaDevices&&customElements.define(p.tag,p);var m={url:new URL("./elements/simple-login/lib/simple-camera-snap.js",document.baseURI).href},h=e("SimpleCameraSnap",function(e){function n(){var e,t=arguments.length>0&&void 0!==arguments[0]&&arguments[0];return o(this,n),(e=i(this,n)).tag=n.tag,e.t={takePhoto:"Take Photo"},globalThis.dispatchEvent(new CustomEvent("i18n-manager-register-element",{detail:{context:e,namespace:"simple-login",localesPath:new URL("../locales/simple-login.es.json",m.url).href+"/../",updateCallback:"render",locales:["es"]}})),e.template=globalThis.document.createElement("template"),e.attachShadow({mode:"open"}),t||e.render(),e}return t(n,e),a(n,[{key:"render",value:function(){this.shadowRoot.innerHTML=null,this.template.innerHTML=this.html,globalThis.ShadyCSS&&globalThis.ShadyCSS.prepareTemplate(this.template,this.tag),this.shadowRoot.appendChild(this.template.content.cloneNode(!0))}},{key:"html",get:function(){return'\n <style>\n :host {\n display: flex;\n align-items: center;\n justify-content: space-between;\n flex-direction: column;\n /* style simple-login-camera according to simple-login-snap styles */\n --simple-login-camera-background: var(--simple-camera-snap-color, #36bed4);\n --simple-login-camera-error: var(--simple-camera-snap-error, red);\n --simple-login-avatar-color: var(--simple-camera-snap-color, #36bed4);\n --simple-login-camera-size: var(--simple-camera-snap-height, calc(var(--simple-camera-snap-width, unset) * 16/9));\n\n /* style simple-login-avatar according to simple-login-snap styles */\n --simple-login-avatar-background: var(--simple-camera-snap-background, white);\n --simple-login-avatar-border-radius: var(--simple-camera-snap-border-radius,100%);\n }\n :host([hidden]) {\n display: none !important;\n }\n #selfie {\n position: absolute;\n margin: 0;\n display: flex;\n justify-content: center;\n width: 100%;\n overflow: hidden;\n }\n #snap {\n color: var(--simple-camera-snap-color, #36bed4);\n background-color: var(--simple-camera-snap-background, white);\n border-radius: var(--simple-camera-snap-button-border-radius);\n opacity: var(--simple-camera-snap-button-opacity);\n }\n .has-snap {\n z-index: 3;\n }\n #selfie img {\n z-index: 2; \n width: calc(177.77777777777% / var(--simple-login-camera-aspect, 1));\n background-color: rgba(0, 0, 0, 0);\n }\n .buttons {\n display: flex;\n width: 100%;\n justify-content: space-around;\n position: var(--simple-camera-snap-button-container-position);\n bottom: var(--simple-camera-snap-button-container-bottom);\n z-index: var(--simple-camera-snap-button-container-z-index);\n }\n </style>\n <simple-login-avatar part="avatar">\n <div id="selfie" part="selfie"></div>\n <simple-login-camera id="camera" autoplay part="camera"></simple-login-camera>\n </simple-login-avatar>\n <div class="buttons">\n <simple-icon-button-lite id="snap" icon="image:camera-alt" part="snap-button"></simple-icon-button-lite>\n <simple-tooltip for="snap" part="snap-tooltip">'.concat(this.t.takePhoto,"</simple-tooltip>\n <slot></slot>\n </div>\n ")}},{key:"connectedCallback",value:function(){navigator.mediaDevices||(this.shadowRoot.querySelector("#snap").style.display="none"),this.shadowRoot.querySelector("#snap").addEventListener("click",this.snapPhoto.bind(this)),this._t=s({},this.t)}},{key:"disconnectedCallback",value:function(){this.shadowRoot.querySelector("#snap").removeEventListener("click",this.snapPhoto.bind(this))}},{key:"snapPhoto",value:(r=l(c().mark((function e(t){var a,n,r,o;return c().wrap((function(e){for(;;)switch(e.prev=e.next){case 0:if(!(a=this.shadowRoot.querySelector("#camera")).hasAttribute("autoplay")){e.next=23;break}return n="",e.next=5,a.takeASnap();case 5:return r=e.sent,e.prev=6,e.next=9,a.takeASnap().then((function(e){return a.renderImage(e)}));case 9:n=e.sent,e.next=15;break;case 12:e.prev=12,e.t0=e.catch(6),console.log(e.t0);case 15:a.removeAttribute("autoplay"),(o=this.shadowRoot.querySelector("#selfie")).innerHTML="",o.appendChild(n),this.dispatchEvent(new CustomEvent("simple-camera-snap-image",{bubbles:!0,composed:!0,cancelable:!0,detail:{img:n,raw:r}})),o.classList.add("has-snap"),e.next=24;break;case 23:this.clearPhoto(t);case 24:case"end":return e.stop()}}),e,this,[[6,12]])}))),function(e){return r.apply(this,arguments)})},{key:"clearPhoto",value:function(e){this.shadowRoot.querySelector("#camera").setAttribute("autoplay","autoplay");var t=this.shadowRoot.querySelector("#selfie");t.innerHTML="",t.classList.remove("has-snap")}}],[{key:"tag",get:function(){return"simple-camera-snap"}}]);var r}(r(HTMLElement)));customElements.define(h.tag,h)}}}));