https://511in.org/modal-media-sign-photo-8c20624bce017f7473a2.js

1"use strict";(self.webpackChunkone_web=self.webpackChunkone_web||[]).push([[4606],{326:(e,t,i)=>{i.r(t),i.d(t,{MEDIA_ERROR:()=>u,SHOW_OTHERS:()=>w,default:()=>y});var a=i(71413),o=i(52706),s=i(30555),r=i(85512),l=i(35135),n=i(52850),d=i(24634),m=i(5124),h=i(32701),c=i(56188),g=(i(82890),Object.defineProperty),v=Object.getOwnPropertyDescriptor,p=(e,t,i,a)=>{for(var o,s=a>1?void 0:a?v(t,i):t,r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a?o(t,i,s):o(s))||s);return a&&s&&g(t,i,s),s};const u="crc:media:error",w="crc:media:show";let y=class extends a.WF{constructor(){super(...arguments),this.mediaState=n.zg1.WAITING,this.showLoader=!1,this.cover=!1}static get styles(){return[h.A,d.A,m.A,a.AH`
2				.modal-img,
3				.modal-img-link,
4				.modal-img-unavailable {
5					width: 100%;
6					height: 100%;
7				}
8
9				.modal-img {
10					object-fit: contain;
11				}
12
13				.cover {
14					object-fit: cover;
15				}
16
17				.modal-img-link {
18					object-fit: contain;
19					cursor: pointer;
20				}
21
22				.modal-img-unavailable {
23					object-fit: contain;
24				}
25				spinning-loader {
26					position: absolute;
27					left: 50%;
28					top: 50%;
29					margin: 0;
30					transform: translate(-50%, -50%);
31					z-index: 1;
32				}
33			`]}render(){return a.qy`
34			<!--	waiting for content, or waiting for content to load	-->
35			${this.showLoader?a.qy`<spinning-loader></spinning-loader>`:void 0}
36			${this.view&&this.mediaState!==n.zg1.ERROR?a.qy`
37						<!--	content present, ready to be shown once loaded	-->
38						${this.view.category===n.NaE.LINK?a.qy`
39									<a
40										href=${this.view?.url??"#"}
41										rel="noopener noreferrer"
42										title=${this.view.title}
43										aria-label="camera"
44									>
45										<img
46											class="modal-img-link"
47											src="${"/images/icon-external-link-fill-solid.svg"}"
48											alt=""
49											role="presentation"
50										/>
51									</a>
52							  `:(0,r.D)(this.view.uri,a.qy`
53										<img
54											class=${(0,s.H)({"modal-img":!0,cover:this.cover})}
55											alt=${this.view.title}
56											@load=${this.onImgLoad}
57											@error=${this.onImgError}
58											src=${(0,l.J)(this.view.url??"/images/icon-camera-closed-fill-solid-padded-modal.svg")}
59										/>
60									`)}
61				  `:a.qy``}
62			<!--	content missing or encountered an error while loading	-->
63			${this.mediaState===n.zg1.ERROR?a.qy`
64						<img
65							src=${"/images/icon-camera-closed-fill-solid-padded-modal.svg"}
66							alt="Camera Unavailable"
67							class="modal-img-unavailable"
68						/>
69				  `:void 0}
70		`}onImgError(e){const t=e.currentTarget;if(this.view?.url===t.src){this.mediaState=n.zg1.ERROR;const e=(0,c.h)(u,{detail:{contentUri:null}});this.dispatchEvent(e),setTimeout((()=>{this.dispatchEvent(new CustomEvent("show-others"))}),2e3)}}onImgLoad(e){const t=e.currentTarget;this.showLoader=!1,clearInterval(this._loaderTimeout),clearTimeout(this._imageTimeout),(this.view?.url===t.src||t.src.includes("/images/icon-camera-closed-fill-solid-padded-modal.svg"))&&(this.mediaState=n.zg1.READY)}willUpdate(e){if(clearTimeout(this._imageTimeout),this._imageTimeout=setTimeout((()=>{this.showLoader&&this.dispatchEvent(new CustomEvent("show-others"))}),3e3),e.has("view")&&this.view&&(this.view.category===n.NaE.LINK?this.mediaState=n.zg1.READY:this.mediaState=n.zg1.WAITING),e.has("mediaState")&&this.mediaState===n.zg1.WAITING&&(clearInterval(this._loaderTimeout),this._loaderTimeout=setInterval((()=>{this.showLoader=!0}),1e3)),this.view&&this.mediaState!==n.zg1.WAITING&&(clearInterval(this._loaderTimeout),this.showLoader=!1),e.has("view")&&!this.view){this.mediaState=n.zg1.ERROR;const e=(0,c.h)(u,{detail:{contentUri:null}});this.dispatchEvent(e)}}};p([(0,o.MZ)({type:Object,hasChanged:(e,t)=>!(!t&&!e||t&&e&&t.url===e.url&&t.uri===e.uri)})],y.prototype,"view",2),p([(0,o.MZ)({type:String})],y.prototype,"mediaState",2),p([(0,o.MZ)({type:Boolean})],y.prototype,"showLoader",2),p([(0,o.MZ)({type:Boolean})],y.prototype,"cover",2),y=p([(0,o.EM)("modal-media-photo")],y)},79608:(e,t,i)=>{i.r(t),i.d(t,{default:()=>u});var a=i(71413),o=i(52706),s=i(80480),r=i(52850),l=i(24634),n=i(5124),d=i(32701),m=i(5127),h=i(56188),c=i(326),g=Object.defineProperty,v=Object.getOwnPropertyDescriptor,p=(e,t,i,a)=>{for(var o,s=a>1?void 0:a?v(t,i):t,r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a?o(t,i,s):o(s))||s);return a&&s&&g(t,i,s),s};let u=class extends a.WF{constructor(){super(...arguments),this.mediaState=r.zg1.WAITING,this.showLoader=!1}static get styles(){return[d.A,l.A,n.A,m.A,a.AH`
71				.sign-message-div {
72					object-fit: contain;
73				}
74			`]}render(){return a.qy`
75			<!--	waiting for content, or waiting for content to load	-->
76			${this.showLoader?a.qy`
77						<div
78							class="modal-img-container"
79							style=${(0,s.W)({display:this.imageUrl&&this.mediaState!==r.zg1.WAITING?"none":"block"})}
80						>
81							<img
82								src="${"/images/loading.svg"}"
83								alt="Sign loading"
84								class="modal-img-placeholder"
85							/>
86						</div>
87				  `:void 0}
88			${this.imageUrl?a.qy`
89						<!--	content present, ready to be shown once loaded	-->
90						<div
91							class="modal-img-container"
92							style=${(0,s.W)({display:this.imageUrl&&this.mediaState===r.zg1.READY?"block":"none"})}
93						>
94							<img
95								class="sign-message-div"
96								src="${this.imageUrl}"
97								alt=${this.imageAlt??"Sign"}
98								role="presentation"
99							/>
100						</div>
101				  `:a.qy``}
102			<!--	content missing or encountered an error while loading	-->
103			<div
104				class="modal-img-container"
105				style=${(0,s.W)({display:this.mediaState===r.zg1.ERROR?"block":"none"})}
106			>
107				<img
108					src=${"/images/icon-sign-broken-fill-solid.svg"}
109					alt="Sign Unavailable"
110					class="modal-img-placeholder"
111				/>
112			</div>
113		`}updated(e){if(e.has("imageUrl")&&this.imageUrl){this.mediaState=r.zg1.WAITING;const e=document.createElement("img");e.onerror=()=>{this.mediaState=r.zg1.ERROR;const e=(0,h.h)(c.MEDIA_ERROR,{detail:{contentUri:null}});this.dispatchEvent(e)},e.onload=()=>{this.mediaState=r.zg1.READY},e.src=this.imageUrl}(e.has("imageUrl")&&!this.imageUrl||e.has("mediaState")&&this.mediaState===r.zg1.WAITING)&&(clearInterval(this._loaderTimeout),this._loaderTimeout=setInterval((()=>{this.showLoader=!0}),1e3)),this.imageUrl&&this.mediaState!==r.zg1.WAITING&&(clearInterval(this._loaderTimeout),this.showLoader=!1),e.has("imageUrl")&&!this.imageUrl&&(this.mediaState=r.zg1.ERROR)}};p([(0,o.MZ)({type:String})],u.prototype,"imageAlt",2),p([(0,o.MZ)({type:String})],u.prototype,"imageUrl",2),p([(0,o.MZ)({type:String})],u.prototype,"mediaState",2),p([(0,o.MZ)({type:Boolean})],u.prototype,"showLoader",2),u=p([(0,o.EM)("modal-media-sign-photo")],u)}}]);