/*
 * Copyright 2015-2024 Ritense BV, the Netherlands.
 *
 * Licensed under EUPL, Version 1.2 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" basis,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
import { Component, EventEmitter, Output } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
import { take } from 'rxjs/operators';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@ngx-translate/core";
export class WebcamComponent {
    constructor() {
        this.imageSaved = new EventEmitter();
        this.showing$ = new BehaviorSubject(false);
        this.stream$ = new BehaviorSubject(undefined);
        this.picture$ = new BehaviorSubject(undefined);
    }
    ngAfterViewInit() {
        const video = this.getVideoElement();
        setTimeout(() => {
            this.toggleFade();
        });
        if (navigator.mediaDevices.getUserMedia) {
            navigator.mediaDevices.getUserMedia({ video: true }).then(stream => {
                video.srcObject = stream;
                this.stream$.next(stream);
            });
        }
    }
    captureImage() {
        const video = this.getVideoElement();
        const canvas = document.querySelector('#canvas');
        canvas.width = 640;
        canvas.height = 480;
        const ctx = canvas.getContext('2d');
        ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
        const dataURI = canvas.toDataURL('image/jpeg');
        this.picture$.next({ file: this.dataURItoFile(dataURI), uri: dataURI });
        return false;
    }
    clearImage() {
        this.picture$.next(undefined);
        return false;
    }
    close(emitImage = true) {
        if (!emitImage) {
            this.clearImage();
        }
        this.toggleFade();
        this.emitOnTimeOut();
        return false;
    }
    stopStream() {
        this.stream$.pipe(take(1)).subscribe(mediaStream => {
            if (mediaStream) {
                mediaStream.getTracks().forEach(stream => stream.stop());
            }
        });
    }
    getVideoElement() {
        return document.querySelector('#videoElement');
    }
    emitOnTimeOut() {
        setTimeout(() => {
            this.stopStream();
            this.imageSaved.emit(this.picture$.getValue()?.file);
        }, 250);
    }
    toggleFade() {
        this.showing$.next(!this.showing$.getValue());
    }
    dataURItoFile(dataURI) {
        const binary = atob(dataURI.split(',')[1]);
        const array = [];
        for (let i = 0; i < binary.length; i++) {
            array.push(binary.charCodeAt(i));
        }
        const blob = new Blob([new Uint8Array(array)], { type: 'image/jpeg' });
        const imgFileName = `IMG_${new Date().toISOString().replace(/[-:.]/g, '')}.jpg`;
        return new File([blob], imgFileName);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: WebcamComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: WebcamComponent, selector: "valtimo-webcam", outputs: { imageSaved: "imageSaved" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\n  (click)=\"close(false)\"\n  *ngIf=\"{picture: picture$ | async, stream: stream$ | async} as obs\"\n  [ngClass]=\"{showing: showing$ | async}\"\n  class=\"webcam-overlay\"\n>\n  <div (click)=\"(false); $event.stopPropagation()\" class=\"inner-container\">\n    <div class=\"webcam-container modal-content\">\n      <div class=\"video-container\">\n        <video autoplay=\"true\" id=\"videoElement\"></video>\n        <canvas id=\"canvas\"></canvas>\n        <img *ngIf=\"obs.picture?.uri\" [src]=\"obs.picture?.uri\" />\n      </div>\n      <div class=\"button-container\">\n        <div class=\"picture-btn\">\n          <button\n            (click)=\"captureImage()\"\n            [disabled]=\"obs.picture?.file || !obs.stream\"\n            class=\"btn btn-primary btn-lg\"\n          >\n            <i class=\"icon mdi mdi-camera mr-1\"></i>{{ 'webcam.takePicture' | translate }}\n          </button>\n        </div>\n        <div class=\"new-btn\">\n          <button (click)=\"clearImage()\" [disabled]=\"!obs.picture?.file\" class=\"btn btn-primary\">\n            <i class=\"icon mdi mdi-redo mr-1\"></i>{{ 'webcam.redo' | translate }}\n          </button>\n        </div>\n        <div class=\"save-btn\">\n          <button (click)=\"close()\" [disabled]=\"!obs.picture?.file\" class=\"btn btn-primary\">\n            <i class=\"icon mdi mdi-save mr-1\"></i>{{ 'webcam.save' | translate }}\n          </button>\n        </div>\n      </div>\n    </div>\n    <div class=\"modal-header\">\n      <button (click)=\"close(false)\" aria-label=\"Close\" class=\"close\"><span>\u00D7</span></button>\n    </div>\n  </div>\n</div>\n", styles: [".webcam-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#000000a6;display:flex;align-items:center;justify-content:center;transition:opacity .15s linear;opacity:0;z-index:9999}.showing{opacity:1}.webcam-container{padding:20px}.button-container{align-items:center;display:flex;justify-content:space-evenly;margin-top:20px;margin-bottom:10px;height:30px}.button-container i{margin-right:5px}.picture-btn,.new-btn,.save-btn{position:absolute;display:flex;justify-content:center}.picture-btn .icon,.new-btn .icon,.save-btn .icon{background-color:unset;border-radius:unset;display:inline-block;height:unset;width:unset;margin-bottom:0;padding:0}.new-btn,.save-btn{width:calc(50% - 65px)}.picture-btn{width:100%;left:0}.new-btn{left:0}.save-btn{right:0}.modal-header{position:absolute;top:0;right:-18px;margin-top:35px;padding:0;color:gray}.close{color:gray}.inner-container{position:relative}.video-container{height:495px;overflow:hidden}.video-container video,.video-container img{width:660px;height:495px;position:absolute}.video-container img{object-fit:cover}#canvas{display:none}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: WebcamComponent, decorators: [{
            type: Component,
            args: [{ selector: 'valtimo-webcam', template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\n  (click)=\"close(false)\"\n  *ngIf=\"{picture: picture$ | async, stream: stream$ | async} as obs\"\n  [ngClass]=\"{showing: showing$ | async}\"\n  class=\"webcam-overlay\"\n>\n  <div (click)=\"(false); $event.stopPropagation()\" class=\"inner-container\">\n    <div class=\"webcam-container modal-content\">\n      <div class=\"video-container\">\n        <video autoplay=\"true\" id=\"videoElement\"></video>\n        <canvas id=\"canvas\"></canvas>\n        <img *ngIf=\"obs.picture?.uri\" [src]=\"obs.picture?.uri\" />\n      </div>\n      <div class=\"button-container\">\n        <div class=\"picture-btn\">\n          <button\n            (click)=\"captureImage()\"\n            [disabled]=\"obs.picture?.file || !obs.stream\"\n            class=\"btn btn-primary btn-lg\"\n          >\n            <i class=\"icon mdi mdi-camera mr-1\"></i>{{ 'webcam.takePicture' | translate }}\n          </button>\n        </div>\n        <div class=\"new-btn\">\n          <button (click)=\"clearImage()\" [disabled]=\"!obs.picture?.file\" class=\"btn btn-primary\">\n            <i class=\"icon mdi mdi-redo mr-1\"></i>{{ 'webcam.redo' | translate }}\n          </button>\n        </div>\n        <div class=\"save-btn\">\n          <button (click)=\"close()\" [disabled]=\"!obs.picture?.file\" class=\"btn btn-primary\">\n            <i class=\"icon mdi mdi-save mr-1\"></i>{{ 'webcam.save' | translate }}\n          </button>\n        </div>\n      </div>\n    </div>\n    <div class=\"modal-header\">\n      <button (click)=\"close(false)\" aria-label=\"Close\" class=\"close\"><span>\u00D7</span></button>\n    </div>\n  </div>\n</div>\n", styles: [".webcam-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#000000a6;display:flex;align-items:center;justify-content:center;transition:opacity .15s linear;opacity:0;z-index:9999}.showing{opacity:1}.webcam-container{padding:20px}.button-container{align-items:center;display:flex;justify-content:space-evenly;margin-top:20px;margin-bottom:10px;height:30px}.button-container i{margin-right:5px}.picture-btn,.new-btn,.save-btn{position:absolute;display:flex;justify-content:center}.picture-btn .icon,.new-btn .icon,.save-btn .icon{background-color:unset;border-radius:unset;display:inline-block;height:unset;width:unset;margin-bottom:0;padding:0}.new-btn,.save-btn{width:calc(50% - 65px)}.picture-btn{width:100%;left:0}.new-btn{left:0}.save-btn{right:0}.modal-header{position:absolute;top:0;right:-18px;margin-top:35px;padding:0;color:gray}.close{color:gray}.inner-container{position:relative}.video-container{height:495px;overflow:hidden}.video-container video,.video-container img{width:660px;height:495px;position:absolute}.video-container img{object-fit:cover}#canvas{display:none}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
        }], propDecorators: { imageSaved: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 