import { __decorate } from "tslib";
import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
import { BsModalService } from 'ngx-bootstrap/modal';
import { ItemService } from '../../../../item-types/components/item-service/item-service.service';
import { DomSanitizer } from '@angular/platform-browser';
import { QuizService } from '../../../../shared/service/quiz.service';
var CarouselComponent = /** @class */ (function () {
    function CarouselComponent(modalService, itemService, _DomSanitizationService, quizService) {
        this.modalService = modalService;
        this.itemService = itemService;
        this._DomSanitizationService = _DomSanitizationService;
        this.quizService = quizService;
        this.imagePath = [];
        this.myInterval = 0;
    }
    CarouselComponent.prototype.ngOnChanges = function (changes) { };
    /* Init */
    CarouselComponent.prototype.ngOnInit = function () {
        this.isOnlineEngine = this.quizService.isOnline;
    };
    /* Click image */
    CarouselComponent.prototype.clickImage = function (template, slide) {
        this.fileName = slide && slide.fileName ? slide.fileName : '';
        if (this.quizService.isOnline) {
            this.imageUrl = slide.assetPath;
        }
        else {
            this.imageUrl =
                this.splitStringForType('image', slide.assetName) + slide.assetsContent;
        }
        if (this.imageUrl !== undefined) {
            this.modalRef = this.modalService.show(template);
        }
    };
    CarouselComponent.prototype.goFullscreen = function () {
        var videoPlayer = document.getElementById('videoId');
        videoPlayer.webkitEnterFullScreen();
    };
    CarouselComponent.prototype.splitStringForType = function (type, value) {
        var name = value.split('.')[1];
        switch (type) {
            case 'image':
                return "data:image/" + name + ";base64,";
            case 'audio':
                return "data:audio/" + name + ";base64,";
            case 'video':
                return "data:video/" + name + ";base64,";
            default:
                break;
        }
    };
    CarouselComponent.prototype.loadImagePath = function (assetType, slide) {
        if (this.quizService.isOnline) {
            return slide.assetPath;
        }
        return (this.splitStringForType(assetType, slide.assetName) + slide.assetsContent);
    };
    CarouselComponent.prototype.loadImagePathinsideModal = function (imageUrl) {
        if (this.quizService.isOnline) {
            return imageUrl;
        }
        else {
            return imageUrl;
        }
    };
    CarouselComponent.ctorParameters = function () { return [
        { type: BsModalService },
        { type: ItemService },
        { type: DomSanitizer },
        { type: QuizService }
    ]; };
    __decorate([
        Input('assetData')
    ], CarouselComponent.prototype, "assetData", void 0);
    __decorate([
        Input('imagePath')
    ], CarouselComponent.prototype, "imagePath", void 0);
    __decorate([
        Input('assetsPosition')
    ], CarouselComponent.prototype, "assetsPosition", void 0);
    __decorate([
        Input('inline')
    ], CarouselComponent.prototype, "inline", void 0);
    CarouselComponent = __decorate([
        Component({
            selector: 'media-carousel',
            template: "<div\n  class=\"video-preview\"\n  [ngClass]=\"{\n    'right-assets-position-media wkqp-fullwidth mr0': assetsPosition == 'Right',\n    'left-assets-position-media wkqp-fullwidth': assetsPosition == 'Left',\n    'top-assets-position-media': assetsPosition == 'Top',\n    'bottom-assets-position-media': assetsPosition == 'Bottom',\n    'wk-col-6 video-preview-width-small':\n      assetsPosition == 'graphic' || inline == 'inline',\n    'wk-col-4': assetsPosition != 'graphic' && inline != 'inline'\n  }\"\n>\n  <carousel [interval]=\"myInterval\">\n    <slide *ngFor=\"let slide of assetData; let index = index\">\n      <div class=\"que-prev-title-head\">{{ slide.fileName }}</div>\n      <wkqp-image-scaling\n        [slideData]=\"slide\"\n        [ImageSource]=\"loadImagePath('image', slide)\"\n      ></wkqp-image-scaling>\n\n      <video\n        *ngIf=\"slide.assetTypeId == 3\"\n        class=\"item-prev-video55\"\n        id=\"videoId\"\n      >\n        <source [src]=\"loadImagePath('video', slide)\" />\n        <source\n          [src]=\"loadImagePath('video', slide)\"\n          type='video/mp4; codecs=\"avc1.42E01E, mp4a.40.2\"'\n        />\n        <source\n          [src]=\"loadImagePath('video', slide)\"\n          type='video/ogg; codecs=\"theora, vorbis\"'\n        />\n      </video>\n      <app-media-controls\n        *ngIf=\"slide.assetTypeId == 3\"\n        [assetId]=\"slide.assetId\"\n        [assetType]=\"'video'\"\n      ></app-media-controls>\n      <!-- <i class=\"fas fa-arrows-alt\" (click)=\"goFullscreen()\"></i> -->\n      <audio *ngIf=\"slide.assetTypeId == 2\" class=\"item-prev-audio55\">\n        <source [src]=\"loadImagePath('audio', slide)\" />\n      </audio>\n      <app-media-controls\n        *ngIf=\"slide.assetTypeId == 2\"\n        [assetId]=\"slide.assetId\"\n        [assetType]=\"'audio'\"\n      ></app-media-controls>\n      <div class=\"carousel-caption\">\n        <p>{{ slide.text }}</p>\n      </div>\n      <div\n        class=\"img-enlarge img-enlarge-text\"\n        style=\"text-align:center;\"\n        *ngIf=\"slide.assetTypeId == 1\"\n      >\n        <span>Click on image to enlarge.</span>\n      </div>\n      <wkqp-download-transcript\n        *ngIf=\"isOnlineEngine && slide.transcript\"\n        [slideData]=\"slide\"\n      >\n      </wkqp-download-transcript>\n    </slide>\n  </carousel>\n</div>\n<ng-template #template>\n  <div>\n    <div class=\"modal-title-main\">\n      {{ fileName }}\n    </div>\n    <button\n      type=\"button\"\n      class=\"wk-icon-close-empty\"\n      aria-label=\"Close\"\n      (click)=\"modalRef.hide()\"\n    ></button>\n  </div>\n  <div class=\"modal-body\">\n    <div>\n      <img\n        class=\"enlarge-img-border\"\n        [src]=\"loadImagePathinsideModal(imageUrl)\"\n        alt=\"No Image\"\n      />\n    </div>\n  </div>\n</ng-template>\n",
            changeDetection: ChangeDetectionStrategy.OnPush,
            styles: [".close{color:#fff!important}video::-internal-media-controls-download-button{display:none}video::-webkit-media-controls-enclosure{overflow:hidden}video::-webkit-media-controls-panel{width:calc(100% + 30px)}audio::-internal-media-controls-download-button{display:none}audio::-webkit-media-controls-enclosure{overflow:hidden}audio::-webkit-media-controls-panel{width:calc(100% + 30px)}.video-preview-width-small{width:382px}.modal-header{min-height:inherit!important;float:left;width:100%;padding:10px!important;color:#fff;background-color:var(--primary-color)!important;border-radius:0!important;border:0!important;position:relative!important;height:45px!important}.modal-header button.close:focus,.modal-header button.close:hover{background-color:transparent!important;color:#fff!important;outline:0!important;border:0!important;box-shadow:0 0 0!important}.mr0{margin-right:0!important}"]
        })
    ], CarouselComponent);
    return CarouselComponent;
}());
export { CarouselComponent };
//# sourceMappingURL=data:application/json;base64, 