import{a as k,b as g}from"./chunk-SSSZHUIR.js";import{Qb as w}from"./chunk-YSQLW2JA.js";import{Fc as v}from"./chunk-NVJ2ZZFT.js";import{Aa as s,Ba as p,Cb as x,Rd as u,_a as f,bb as b,dd as h,ha as m,wa as l,ya as d}from"./chunk-SKPDQO4E.js";var y=`<div class="camera-preview" *ngIf="visibleComponent">
    <div class="stream-container">
        <!-- <img class="stream-image" #streamImage *ngIf="!(visibleStreamFailed || visiblePlay)" [src]="streamUrl | secure:userName:password | async" (load)="streamLoaded()"
            (error)="streamLoadFailed()"/> -->
        <ng-container *ngIf="streamUrl">
            <img class="stream-image" #streamImage *ngIf="!(visibleStreamFailed || visibleRefresh)" [src]="streamUrl"
                (load)="streamLoaded()" (error)="streamLoadFailed()" />
        </ng-container>
        <canvas #streamImageCanvas [hidden]="!visibleRefresh"></canvas>
        <div class="stream-play" *ngIf="visibleRefresh" (click)="playStream($event)">
            <cds-icon shape="refresh" solid size="md"></cds-icon>
            <span class="name">{{camera.name}}</span>
        </div>
        <div class="stream-spinner" *ngIf="visibleSpinner">
            <span class="spinner-border spinner-border-sm text-white"></span>
        </div>
        <div class="stream-failed d-flex flex-column align-items-center justify-content-center" *ngIf="visibleStreamFailed">
            <cds-icon shape="warning-standard" solid class="color-error" size="md"></cds-icon>
            <span class="text-xs color-gray text-align-center mt-2">{{streamFailedText|translate}}</span>
        </div>
    </div>
    <div class="button-container">
        <div class="camera-icon-button" (click)="canRefresh?playStream($event):null" *ngIf="visibleRefresh || visibleStreamFailed"
            [ngClass]="{'color-gray-darkest': !canRefresh}">
            <cds-icon shape="refresh"></cds-icon>
        </div>
        <div class="camera-icon-button" (click)="onceLoaded?openCameraStream($event):null"
            [ngClass]="{'color-gray-darkest': !onceLoaded}">
            <cds-icon shape="resize"></cds-icon>
        </div>
    </div>
</div>`;var S=`.justify-content-center{-webkit-box-pack:center;-moz-box-pack:center;-webkit-flex-pack:center;-ms-flex-pack:center;-moz-justify-content:center;-webkit-justify-content:center;justify-content:center}.justify-content-flex-end{-webkit-box-pack:end;-moz-box-pack:end;-webkit-flex-pack:end;-ms-flex-pack:end;-moz-justify-content:flex-end;-webkit-justify-content:flex-end;justify-content:flex-end}.card-footer{padding:.28rem .7rem}.alert{font-size:.756rem}@media screen and (min-width: 992px){.modal-xxl{max-width:1640px}}@media screen and (min-width: 1200px){.modal-xxxl{max-width:1860px}}.modal-fs{max-width:none;position:absolute;margin:auto;inset:16px;height:100vh;display:flex}.btn-link{text-decoration:none}.btn-link:hover{text-decoration:underline}.invalid-feedback{margin-top:0!important;font-size:.672rem!important}:host .camera-preview{min-width:150px;min-height:150px;width:0px;height:0px;padding:5px;background-color:#000;-webkit-border-radius:.375rem;-moz-border-radius:.375rem;border-radius:.375rem;display:-webkit-box;display:-moz-box;display:-webkit-flexbox;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-orient:vertical;-moz-box-orient:vertical;-webkit-flex-direction:column;-moz-flex-direction:column;-ms-flex-direction:column;flex-direction:column}:host .camera-preview .stream-container{cursor:pointer;-webkit-flex-grow:1;-moz-flex-grow:1;-ms-flex-positive:1;flex-grow:1;-webkit-flex-shrink:1;-webkit-box-flex:1;-moz-flex-shrink:1;-ms-flex-negative:1;flex-shrink:1;-webkit-flex-basis:auto;-moz-flex-basis:auto;-ms-flex-preferred-size:auto;flex-basis:auto;-webkit-flex-basis:100%;-moz-flex-basis:100%;-ms-flex-preferred-size:100%;flex-basis:100%;display:-webkit-box;display:-moz-box;display:-webkit-flexbox;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-orient:vertical;-moz-box-orient:vertical;-webkit-flex-direction:column;-moz-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-moz-box-pack:center;-webkit-flex-pack:center;-ms-flex-pack:center;-moz-justify-content:center;-webkit-justify-content:center;justify-content:center;position:relative}:host .camera-preview .stream-container .stream-image{position:relative;display:block;max-height:100px;max-width:100%}:host .camera-preview .stream-container .base-overlay,:host .camera-preview .stream-container .stream-failed,:host .camera-preview .stream-container .stream-spinner,:host .camera-preview .stream-container .stream-play,:host .camera-preview .stream-container .stream-pause-canvas{background-color:#0006;position:absolute;margin:auto;inset:0}:host .camera-preview .stream-container .stream-play{display:-webkit-box;display:-moz-box;display:-webkit-flexbox;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-pack:center;-moz-box-pack:center;-webkit-flex-pack:center;-ms-flex-pack:center;-moz-justify-content:center;-webkit-justify-content:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;-webkit-align-items:center;-moz-align-items:center;align-items:center;-webkit-box-orient:vertical;-moz-box-orient:vertical;-webkit-flex-direction:column;-moz-flex-direction:column;-ms-flex-direction:column;flex-direction:column;background-color:#00000080;color:#d1cfcf;text-align:center}:host .camera-preview .stream-container .stream-play .name{margin-top:12px;font-size:.588rem}:host .camera-preview .stream-container .stream-spinner{display:-webkit-box;display:-moz-box;display:-webkit-flexbox;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-pack:center;-moz-box-pack:center;-webkit-flex-pack:center;-ms-flex-pack:center;-moz-justify-content:center;-webkit-justify-content:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;-webkit-align-items:center;-moz-align-items:center;align-items:center}:host .camera-preview .stream-container .stream-failed span{width:100%!important}:host .camera-preview .button-container{padding:3px;display:-webkit-box;display:-moz-box;display:-webkit-flexbox;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-orient:horizontal;-moz-box-orient:horizontal;-webkit-flex-direction:row;-moz-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:end;-moz-box-pack:end;-webkit-flex-pack:end;-ms-flex-pack:end;-moz-justify-content:flex-end;-webkit-justify-content:flex-end;justify-content:flex-end;border-top:1px solid #333;color:#d1cfcf}:host .camera-preview .button-container .camera-icon-button{cursor:pointer;padding:2px 6px 3px}:host .camera-preview .button-container .camera-icon-button:hover{color:#eb8d00}
`;var I=function(n,t,e,i){var r=arguments.length,a=r<3?t:i===null?i=Object.getOwnPropertyDescriptor(t,e):i,o;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")a=Reflect.decorate(n,t,e,i);else for(var c=n.length-1;c>=0;c--)(o=n[c])&&(a=(r<3?o(a):r>3?o(t,e,a):o(t,e))||a);return r>3&&a&&Object.defineProperty(t,e,a),a},z=class{socketService;sanitizer;modalService;webRtcCameraService;camera;remoteAccessPoint=null;pauseAfter=5;nextPauseAfter=null;streamOpened=new m;streamUrl;secureStreamUrl=null;visibleComponent=!1;visibleSpinner=!1;visibleRefresh=!1;canRefresh=!1;visibleStreamFailed=!1;streamFailedText=null;onceLoaded=!1;timeout;imageSubscription;serverConnectionSubscription;streamImage;streamImageCanvas;constructor(t,e,i,r){this.socketService=t,this.sanitizer=e,this.modalService=i,this.webRtcCameraService=r}ngOnInit(){this.serverConnectionSubscription=this.socketService.onServerConnectionStateChanged.subscribe(t=>{this.socketService.isSocketConnected&&this.init()}),this.init()}ngOnDestroy(){this.serverConnectionSubscription&&this.serverConnectionSubscription.unsubscribe()}init(){this.socketService.isSocketConnected&&(this.nextPauseAfter||(this.nextPauseAfter=this.pauseAfter),this.visibleComponent=!0,this.loadStream())}loadStream(){this.visibleSpinner=!0,this.visibleRefresh=!1,this.imageSubscription=this.webRtcCameraService.getImage(this.camera.proxyTerminalId,this.camera.id).subscribe(t=>{this.onceLoaded=!0,this.canRefresh=!0,this.streamUrl=this.sanitizer.bypassSecurityTrustResourceUrl(t),this.imageSubscription&&this.imageSubscription.unsubscribe()},t=>{switch(t){case"noWebRTCSupport":this.canRefresh=!1,this.streamFailedText="CAMERA.WEBRTC_NOT_SUPPORTED";break;default:this.canRefresh=!0,this.streamFailedText="CAMERA.ERROR_STREAM_FAILED";break}this.streamLoadFailed(null)})}setSnapToCanvas(){let t=this.streamImageCanvas.nativeElement,e=this.streamImage.nativeElement;t.width=e.width,t.height=e.height;var i=this.streamImageCanvas.nativeElement.getContext("2d");i.imageSmoothingEnabled=!1,i.drawImage(e,0,0,e.naturalWidth,e.naturalHeight,0,0,e.width,e.height),e.src=""}hideStream(){!this.visibleStreamFailed&&!this.visibleRefresh&&this.setSnapToCanvas(),this.visibleStreamFailed||(this.visibleRefresh=!0),this.streamUrl="",this.timeout&&clearTimeout(this.timeout)}showStream(){this.visibleRefresh=!1,this.timeout=setTimeout(()=>{this.pauseAfter=null,this.hideStream()},this.pauseAfter?this.pauseAfter*1e3:this.nextPauseAfter*1e3)}streamLoaded(){this.visibleSpinner=!1,this.visibleStreamFailed=!1,this.showStream()}tryAuthentication=!1;streamLoadFailed(t){this.visibleSpinner=!1,this.visibleRefresh==!1&&(this.visibleStreamFailed=!0)}playStream(t){this.canRefresh&&this.loadStream()}openCameraStream(t){this.visibleSpinner&&(this.visibleSpinner=!1),this.hideStream();let e=new v;e.camera=this.camera,this.remoteAccessPoint&&(e.remoteAccessPoint=this.remoteAccessPoint),setTimeout(()=>{this.modalService.open(g,{settings:{size:"lg"},props:{cameraData:e}}).result.then(i=>{}).catch(i=>{})},200)}static ctorParameters=()=>[{type:w},{type:x},{type:u},{type:k}];static propDecorators={camera:[{type:s}],remoteAccessPoint:[{type:s}],pauseAfter:[{type:s}],nextPauseAfter:[{type:s}],streamOpened:[{type:p}],streamImage:[{type:l,args:["streamImage"]}],streamImageCanvas:[{type:l,args:["streamImageCanvas"]}]}};z=I([d({selector:"armon-camera-preview",template:y,standalone:!0,imports:[b,f,h],styles:[S]})],z);export{z as a};
