1(self.webpackChunkone_web=self.webpackChunkone_web||[]).push([[1311],{11891:(t,e,i)=>{"use strict";i.d(e,{ez:()=>v});var a=i(71413),s=i(52706),r=i(30555),o=i(63822),l=i(24634),n=i(5124),d=i(32701),h=i(56188),c=i(48444),p=Object.defineProperty,y=Object.getOwnPropertyDescriptor,u=(t,e,i,a)=>{for(var s,r=a>1?void 0:a?y(e,i):e,o=t.length-1;o>=0;o--)(s=t[o])&&(r=(a?s(e,i,r):s(r))||r);return a&&r&&p(e,i,r),r},v=(t=>(t.PLAY="play",t.REFRESH="refresh",t.PAUSE="pause",t.RETRY="retry",t))(v||{});let m=class extends a.WF{constructor(){super(...arguments),this.viewTitle="",this.videoState=c.Xt.NONE,this.textColor="dark",this.smallScreenHideText=!1,this.firstLoad=!1}static get styles(){return[d.A,l.A,n.A,a.AH` 2 .video-control { 3 display: flex; 4 font-size: 1rem; 5 padding: 0; 6 } 7 8 .video-control > svg { 9 width: 2rem; 10 height: 2rem; 11 fill: rgb(var(--dark-blue)); 12 } 13 14 .video-control > span { 15 /* display: none; */ 16 margin-left: 0.5rem; 17 } 18 19 .hide-text-small > span { 20 display: none; 21 } 22 23 @media (min-width: 768px) { 24 .hide-text-small > span { 25 display: block; 26 } 27 } 28 29 .text-dark { 30 color: rgb(var(--darker)); 31 } 32 .text-light { 33 color: rgb(var(--clouds)); 34 } 35 `]}handleButtonClick(t){return()=>{const e=(0,h.h)("crc:video:action",{detail:{action:t}});this.dispatchEvent(e)}}render(){return a.qy` 36 ${this.videoState===c.Xt.LOADING?a.qy` 37 <button 38 type="button" 39 id="loading-message" 40 disabled 41 class=${(0,r.H)({btn:!0,"video-control":!0,"hide-text-small":this.smallScreenHideText,"text-dark":"dark"===this.textColor,"text-light":"light"===this.textColor})} 42 part="button" 43 aria-label="Loading Video - Click to Stop" 44 > 45 <svg role="presentation" part="icon" aria-hidden="true"> 46 <use href="${"/images/sprites.svg#refresh"}"></use> 47 </svg> 48 <span>${(0,o.t)("Loading Video...")}</span> 49 </button> 50 `:a.qy``} 51 ${this.videoState===c.Xt.PAUSED||this.videoState===c.Xt.NONE?a.qy` 52 <button 53 type="button" 54 id="play-button" 55 class=${(0,r.H)({btn:!0,"video-control":!0,"hide-text-small":this.smallScreenHideText,"text-dark":"dark"===this.textColor,"text-light":"light"===this.textColor})} 56 @click=${this.handleButtonClick("play")} 57 title="Play video of camera ${this.viewTitle}" 58 part="button" 59 > 60 <svg role="presentation" part="icon" aria-hidden="true"> 61 <use href="${"/images/sprites.svg#play"}"></use> 62 </svg> 63 <span>${(0,o.t)("Play Video")}</span> 64 </button> 65 `:a.qy``} 66 ${this.videoState===c.Xt.PLAYING?a.qy` 67 <button 68 type="button" 69 id="pause-button" 70 class=${(0,r.H)({btn:!0,"video-control":!0,"hide-text-small":this.smallScreenHideText,"text-dark":"dark"===this.textColor,"text-light":"light"===this.textColor})} 71 @click=${this.handleButtonClick("pause")} 72 title="Pause video of camera ${this.viewTitle}" 73 part="button" 74 > 75 <svg role="presentation" part="icon" aria-hidden="true"> 76 <use href="${"/images/sprites.svg#pause"}"></use> 77 </svg> 78 <span>${(0,o.t)("Pause Video")}</span> 79 </button> 80 `:a.qy``} 81 ${this.videoState===c.Xt.COMPLETE?a.qy` 82 <button 83 tabindex="-1" 84 type="button" 85 id="refresh-button" 86 class=${(0,r.H)({btn:!0,"video-control":!0,"hide-text-small":this.smallScreenHideText,"text-dark":"dark"===this.textColor,"text-light":"light"===this.textColor})} 87 @click=${this.handleButtonClick("refresh")} 88 title="Refresh video of camera ${this.viewTitle}" 89 part="button" 90 > 91 <svg role="presentation" part="icon" aria-hidden="true"> 92 <use href="${"/images/sprites.svg#refresh"}"></use> 93 </svg> 94 <span>${(0,o.t)("Refresh Video")}</span> 95 </button> 96 `:a.qy``} 97 ${this.videoState===c.Xt.ERRORING?a.qy` 98 <button 99 type="button" 100 id="retry-button" 101 class=${(0,r.H)({btn:!0,"video-control":!0,"hide-text-small":this.smallScreenHideText,"text-dark":"dark"===this.textColor,"text-light":"light"===this.textColor})} 102 @click=${this.handleButtonClick("retry")} 103 title="Reload video of camera ${this.viewTitle}" 104 part="button" 105 > 106 <svg role="presentation" part="icon" aria-hidden="true"> 107 <use href="${"/images/sprites.svg#refresh"}"></use> 108 </svg> 109 <span>${(0,o.t)("Retry Video")}</span> 110 </button> 111 `:a.qy``} 112 `}connectedCallback(){super.connectedCallback(),this.handleSpaceBar=t=>{if("Space"!==t.code)return;const e=function t(e){return e instanceof Element&&e.shadowRoot?.activeElement?t(e.shadowRoot.activeElement):e?.tagName}(document.activeElement);e&&["A","BUTTON"].includes(e)||(this.videoState===c.Xt.PAUSED?this.handleButtonClick("play")():this.videoState===c.Xt.PLAYING?this.handleButtonClick("pause")():this.videoState===c.Xt.COMPLETE?this.handleButtonClick("refresh")():this.videoState===c.Xt.ERRORING&&this.handleButtonClick("retry")())},document.addEventListener("keyup",this.handleSpaceBar)}disconnectedCallback(){super.disconnectedCallback(),this.handleSpaceBar&&document.removeEventListener("keyup",this.handleSpaceBar)}willUpdate(t){if(super.willUpdate(t),t.has("videoState")){if(!this.firstLoad)return void(this.firstLoad=!0);const e=t.get("videoState");e===c.Xt.NONE||e!==c.Xt.PAUSED&&e!==c.Xt.PLAYING||setTimeout((()=>{this.shadowRoot?.querySelector("button")?.focus()}),100)}}};u([(0,s.MZ)({type:String})],m.prototype,"viewTitle",2),u([(0,s.MZ)({type:String})],m.prototype,"videoState",2),u([(0,s.MZ)({type:String})],m.prototype,"textColor",2),u([(0,s.MZ)({type:Boolean})],m.prototype,"smallScreenHideText",2),u([(0,s.MZ)({type:Boolean}
112)],m.prototype,"firstLoad",2),m=u([(0,s.EM)("video-player-controls")],m)},48444:(t,e,i)=>{"use strict";i.d(e,{JI:()=>L,Xt:()=>C,hN:()=>x});var a,s,r=i(19472),o=i(71413),l=i(52706),n=i(59358),d=i(13446),h=i(38155),c=i(85512),p=i(10388),y=i(10514),u=i(80027),v=i(52850),m=i(24634),g=i(5124),P=i(32701),b=i(56188),f=i(11891),S=(i(82890),Object.defineProperty),w=Object.getOwnPropertyDescriptor,E=(t,e,i,a)=>{for(var s,r=a>1?void 0:a?w(e,i):e,o=t.length-1;o>=0;o--)(s=t[o])&&(r=(a?s(e,i,r):s(r))||r);return a&&r&&S(e,i,r),r},T=(t,e,i)=>{if(!e.has(t))throw TypeError("Cannot "+i)},k=(t,e,i)=>(T(t,e,"read from private field"),i?i.call(t):e.get(t)),$=(t,e,i)=>{if(e.has(t))throw TypeError("Cannot add the same private member more than once");e instanceof WeakSet?e.add(t):e.set(t,i)},C=(t=>(t.LOADING="loading",t.PAUSED="paused",t.PLAYING="playing",t.COMPLETE="complete",t.ERRORING="erroring",t.NONE="none",t))(C||{});const x="crc:video:stateChange",A="crc:video:paused";if(!u.mc)throw new Error("Cameras disabled");const I=u.mc;function L(t,e){e!==f.ez.PLAY&&e!==f.ez.REFRESH&&e!==f.ez.RETRY||t.start(),e===f.ez.PAUSE&&t.pause()}let R=class extends o.WF{constructor(){super(...arguments),this.autoplay=!1,this.mediaState=v.a$t.INIT,this.name="",this.autoplayed=!1,this.playbackTimeout=0,this.retryPlayTimeout=0,this.retryPlayDelay=500,this.retryPlayMax=3,this.retryPlayCount=0,this.cameraUnavailableTimeoutId=0,this.posterElementRef=(0,h._)(),$(this,a,(0,h._)()),this.showPoster=!0,this.showLoader=!1,this.showPlayOverlay=!1,$(this,s,void 0),this.andPlayCallback=async()=>{const t=await this.initPlayer();if(t.error())if(this.retryPlayCount>0){this.retryPlayCount-=1;try{t.src(this.sources||[]),await t.play()}catch(t){this._error(t)}}else this._error(`video stream timed out trying to play: "${t.currentSrc()??""}"`)},this.onPlayPause=t=>{if("play"===t.type||"playing"===t.type)this.mediaState=v.a$t.PLAYING,this.retryPlayCount=this.retryPlayMax,clearInterval(this.retryPlayTimeout),clearTimeout(this.playbackTimeout),this.playbackTimeout=window.setTimeout((()=>{this.onComplete(),window.location.pathname.startsWith("/list")?y.A.dispatch({type:r.w.GTAG_VIDEO_TIMEOUT,component:this.component??"null"}):p.Ay.dispatch({type:v.SPd,component:this.component??"null"})}),I.playbackTimeLimit);else if("pause"===t.type&&this.mediaState===v.a$t.PLAYING){this.mediaState=v.a$t.PAUSED;const t=(0,b.h)(A,{detail:"user"});this.dispatchEvent(t)}else{const t=(0,b.h)(A,{detail:"system"});this.dispatchEvent(t)}},this.onComplete=()=>{this.videoPlayer?.pause(),this.mediaState=v.a$t.COMPLETED},this.onError=()=>{this.pause(),this.retryPlayCount>0||this._error(`error attempting to play "${this.videoPlayer?.currentSrc()??""}": ${JSON.stringify(this.videoPlayer?.error())}`)}}static get styles(){return[P.A,m.A,g.A,o.AH` 113 :host { 114 width: 100%; 115 display: flex; 116 cursor: pointer; 117 position: relative; 118 } 119 :host(:focus) { 120 outline: 0.25rem solid rgba(var(--peter-river), 0.4); /* --peter river */ 121 } 122 123 .d-none { 124 display: none; 125 } 126 127 video,
128 .modal-content { 129 display: flex; 130 width: 100%; 131 max-height: 100%; 132 object-fit: contain; 133 vertical-align: middle; 134 z-index: 1; 135 pointer-events: none; 136 } 137 spinning-loader, 138 .play-overlay, 139 .modal-img { 140 position: absolute; 141 left: 50%; 142 top: 50%; 143 margin: 0; 144 transform: translate(-50%, -50%); 145 } 146 /* .vjs-tech { 147 visibility: hidden; 148 } 149 .vjs-has-started:not(.vjs-waiting) .vjs-poster { 150 visibility: hidden; 151 } 152 .vjs-has-started:not(.vjs-waiting) .vjs-tech { 153 visibility: visible; 154 } */ 155 156 /* hide most of video-js default stuff */ 157 158 .video-js .vjs-text-track-display, 159 .video-js .vjs-big-play-button, 160 .video-js .vjs-control-bar, 161 .video-js .vjs-modal-dialog, 162 .video-js .vjs-control-text { 163 display: none; 164 } 165 166 .video-js iframe, 167 .video-js .vjs-resize-manager { 168 visibility: hidden; 169 } 170 171 .play-overlay { 172 fill: rgba(255, 255, 255, 0.3); 173 } 174 175 .play-overlay, 176 spinning-loader { 177 z-index: 2; 178 } 179 180 .modal-img { 181 width: 100%; 182 height: 100%; 183 object-fit: contain; 184 } 185 `]}determinePublicVideoState(){let t;return this.mediaState===v.a$t.PLAYING?this.showPoster=!1:this.showPoster=!0,this.mediaState===v.a$t.WAITING?(this.loaderTimeout=setTimeout((()=>{this.showLoader=!0}),1e3),t="loading"):(clearTimeout(this.loaderTimeout),this.showLoader=!1),this.mediaState===v.a$t.INIT||this.mediaState===v.a$t.READY||this.mediaState===v.a$t.PAUSED||this.mediaState===v.a$t.WAS_PLAYING?(this.showPlayOverlay=!0,t="paused"):this.showPlayOverlay=!1,this.mediaState===v.a$t.PLAYING&&(t="playing"),this.mediaState===v.a$t.COMPLETED&&(t="complete"),this.mediaState===v.a$t.ERROR&&(t="erroring"),t||(t="none"),t}connectedCallback(){super.connectedCallback(),this.setAttribute("tabindex","0"),this.addEventListener("click",this.playPauseRetryVideo)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",this.playPauseRetryVideo),this.videoPlayer?.dispose(),this.videoPlayer=null}render(){return o.qy` 186 ${this.poster?(0,c.D)(this.sources,o.qy` 187 <img 188 ${(0,h.K)(this.posterElementRef)} 189 src=${this.poster} 190 alt="Video poster" 191 class="modal-img${this.showPoster?"":" d-none"}" 192 role="presentation" 193 @load=${this.loadedPoster} 194 /> 195 `):void 0} 196 <video 197 ${(0,h.K)(k(this,a))} 198 class="modal-content video-js vjs-controls-disabled" 199 aria-label="${this.name} Traffic Video" 200 ></video> 201 ${this.showLoader?o.qy`<spinning-loader></spinning-loader>`:void 0} 202 ${this.showPlayOverlay&&!this.showLoader&&u.mc?.showPlayIconOverVideoPosters?o.qy` 203 <svg part="icon" class="play-overlay" role="presentation" aria-hidden="true"> 204 <use href="${"/images/sprites.svg#play"}"></use> 205 </svg> 206 `:void 0} 207 `}initPlayer(){var t,e,i;return k(this,s)||(t=this,e=s,i=new Promise((t=>{this.videoPlayer=(0,n.A)(k(this,a).value,{autoplay:!1,muted:!0,controls:!1,preload:"metadata"},(()=>{if(!this.videoPlayer)throw new Error("video player failed to load");return this.videoPlayer.load(),this.videoPlayer.on(["playing","pause"],this.onPlayPause),this.videoPlayer.on("error",this.onError),this.determinePublicVideoState(),t(this.videoPlayer)}))})),T(t,e,"write to private field"),e.set(t,i)),k(this,s)}firstUpdated(){this.initPlayer()}updated(t){if(t.has("mediaState")&&null!=t.get("mediaState")&&t.get("mediaState")!==this.mediaState){const t=(0,b.h)(x,{detail:{state:this.determinePublicVideoState()}});this.dispatchEvent(t)}if(t.has("poster")&&null!=this.poster&&null!=this.posterElementRef.value){const t=this.posterElementRef.value;null!=u.mc?.unavailableCameraTimeoutMilliseconds&&(clearTimeout(this.cameraUnavailableTimeoutId),this.cameraUnavailableTimeoutId=window.setTimeout((()=>{t.src="/images/icon-camera-closed-fill-solid-padded.svg"}),u.mc.unavailableCameraTimeoutMilliseconds))}if(t.has("sources")&&this.sources?.length&&null!=this.videoPlayer){let t=!1;this.videoPlayer.paused()||(this.videoPlayer.pause(),this.mediaState=v.a$t.WAS_PLAYING,t=!0),(t||this.autoplay)&&(this.autoplayed||(this.autoplayed=!0,this.start()))}}loadedPoster(){clearTimeout(this.cameraUnavailableTimeoutId)}stop(){window.clearInterval(this.retryPlayTimeout),window.clearTimeout(this.playbackTimeout),this.retryPlayCount=0,this.videoPlayer&&(this.videoPlayer.paused()||this.videoPlayer.pause(),this.videoPlayer.error(void 0),this.videoPlayer.el(
207)?.classList.remove("vjs-waiting"),this.videoPlayer?.reset())}playPauseRetryVideo(){this.mediaState===v.a$t.PLAYING?this.pause():this.start()}async start(){if(this.poster!==u.QW["camera-video-unavailable"]&&(this.autoplay||this.mediaState!==v.a$t.WAITING))try{const t=await this.initPlayer(),e=this.mediaState===v.a$t.WAS_PLAYING||this.mediaState===v.a$t.PAUSED;if(this.mediaState=v.a$t.WAITING,!t||!this.sources?.length)throw new Error("invalid player or sources");this.retryPlayTimeout=window.setInterval(this.andPlayCallback,this.retryPlayDelay),!e||u.mc?.refetchStreamOnResume?(t.paused()&&this.stop(),t.src(this.sources||[]),t.load(),this.retryPlayCount=this.retryPlayMax):(window.clearInterval(this.retryPlayTimeout),window.clearTimeout(this.playbackTimeout),this.retryPlayCount=this.retryPlayMax),await(t?.play())}catch(t){this._error(t)}}pause(){this.videoPlayer&&!this.videoPlayer.paused()&&this.videoPlayer.pause()}_error(t){if((!function(t){return!!t&&"object"==typeof t&&"name"in t}(t)||"AbortError"!==t.name)&&0===this.retryPlayCount){clearInterval(this.retryPlayTimeout),this.mediaState=v.a$t.ERROR,console.error(t);const e=(0,b.h)("crc:video:error",{detail:{contentUri:this.videoPlayer?.currentSrc()??null}});this.dispatchEvent(e)}}};a=new WeakMap,s=new WeakMap,E([(0,l.MZ)({type:Array,hasChanged:(t,e)=>!(0,d.A)(e,t)})],R.prototype,"sources",2),E([(0,l.MZ)({type:String})],R.prototype,"component",2),E([(0,l.MZ)({type:String})],R.prototype,"poster",2),E([(0,l.MZ)({type:Boolean})],R.prototype,"autoplay",2),E([(0,l.MZ)({type:String,reflect:!0})],R.prototype,"mediaState",2),E([(0,l.MZ)({type:String})],R.prototype,"name",2),E([(0,l.wk)()],R.prototype,"showPoster",2),E([(0,l.wk)()],R.prototype,"showLoader",2),E([(0,l.wk)()],R.prototype,"showPlayOverlay",2),R=E([(0,l.EM)("video-player")],R)},82890:(t,e,i)=>{"use strict";var a=i(71413),s=i(52706);Object.defineProperty,Object.getOwnPropertyDescriptor;let r=class extends a.WF{static get styles(){return[a.AH` 208 :host { 209 display: block; 210 margin: var(--spinner-margin, 1rem auto); 211 width: var(--spinner-size, 5rem); 212 height: var(--spinner-size, 5rem); 213 } 214 .spinner, 215 .spinner:after { 216 border-radius: 50%; 217 width: calc(100% - 1rem); 218 height: calc(100% - 1rem); 219 } 220 221 .spinner { 222 border: 0.5rem solid rgba(var(--asbestos), 0.3); 223 border-left: 0.5rem solid rgba(var(--asbestos), 1); 224 animation: spinner 1s infinite linear; 225 } 226 227 .spinner-light { 228 border: 0.5rem solid rgba(var(--clouds), 0.3); 229 border-left: 0.5rem solid rgba(var(--clouds), 1); 230 } 231 232 @keyframes spinner { 233 0% { 234 transform: rotate(0deg); 235 } 236 237 100% { 238 transform: rotate(360deg); 239 } 240 } 241 `]}render(){return a.qy` <div class="spinner" aria-label="Loading..."></div> `}};r=((t,e,i,a)=>{for(var s,r=e,o=t.length-1;o>=0;o--)(s=t[o])&&(r=s(r)||r);return r})([(0,s.EM)("spinning-loader")],r)},80542:()=>{}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.