(window["webpackJsonp"] = window["webpackJsonp"] || []).push([["main"],{

/***/ "./$$_lazy_route_resource lazy recursive":
/*!******************************************************!*\
  !*** ./$$_lazy_route_resource lazy namespace object ***!
  \******************************************************/
/*! no static exports found */
/***/ (function(module, exports) {

function webpackEmptyAsyncContext(req) {
	// Here Promise.resolve().then() is used instead of new Promise() to prevent
	// uncaught exception popping up in devtools
	return Promise.resolve().then(function() {
		var e = new Error("Cannot find module '" + req + "'");
		e.code = 'MODULE_NOT_FOUND';
		throw e;
	});
}
webpackEmptyAsyncContext.keys = function() { return []; };
webpackEmptyAsyncContext.resolve = webpackEmptyAsyncContext;
module.exports = webpackEmptyAsyncContext;
webpackEmptyAsyncContext.id = "./$$_lazy_route_resource lazy recursive";

/***/ }),

/***/ "./src/app/MyError.ts":
/*!****************************!*\
  !*** ./src/app/MyError.ts ***!
  \****************************/
/*! exports provided: MyErrorHandler */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "MyErrorHandler", function() { return MyErrorHandler; });
class MyErrorHandler {
    handleError(error) {
        console.log(error.stack);
        window.courseware.sendErrorLog(error);
    }
}



/***/ }),

/***/ "./src/app/app.component.ts":
/*!**********************************!*\
  !*** ./src/app/app.component.ts ***!
  \**********************************/
/*! exports provided: AppComponent */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "AppComponent", function() { return AppComponent; });
/* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @angular/core */ "./node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js");
/* harmony import */ var _angular_common__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @angular/common */ "./node_modules/@angular/common/__ivy_ngcc__/fesm2015/common.js");
/* harmony import */ var _form_form_component__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./form/form.component */ "./src/app/form/form.component.ts");
/* harmony import */ var _play_play_component__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./play/play.component */ "./src/app/play/play.component.ts");





function AppComponent_app_form_0_Template(rf, ctx) {
    if (rf & 1) {
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelement"](0, "app-form");
    }
}
function AppComponent_app_play_1_Template(rf, ctx) {
    if (rf & 1) {
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelement"](0, "app-play");
    }
}
let AppComponent = /*@__PURE__*/ (() => {
    class AppComponent {
        constructor() {
            this.type = 'play';
            const tp = this.getQueryString('type');
            if (tp) {
                this.type = tp;
            }
        }
        ngOnInit() {
        }
        getQueryString(name) {
            const reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
            const r = window.location.search.substr(1).match(reg);
            if (r != null) {
                return unescape(r[2]);
            }
            return null;
        }
    }
    AppComponent.ɵfac = function AppComponent_Factory(t) { return new (t || AppComponent)(); };
    AppComponent.ɵcmp = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵdefineComponent"]({ type: AppComponent, selectors: [["app-root"]], decls: 2, vars: 2, consts: [[4, "ngIf"]], template: function AppComponent_Template(rf, ctx) {
            if (rf & 1) {
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtemplate"](0, AppComponent_app_form_0_Template, 1, 0, "app-form", 0);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtemplate"](1, AppComponent_app_play_1_Template, 1, 0, "app-play", 0);
            }
            if (rf & 2) {
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("ngIf", ctx.type === "form");
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](1);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("ngIf", ctx.type === "play");
            }
        }, directives: [_angular_common__WEBPACK_IMPORTED_MODULE_1__["NgIf"], _form_form_component__WEBPACK_IMPORTED_MODULE_2__["FormComponent"], _play_play_component__WEBPACK_IMPORTED_MODULE_3__["PlayComponent"]], styles: ["\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiIsImZpbGUiOiJzcmMvYXBwL2FwcC5jb21wb25lbnQuc2NzcyJ9 */"] });
    return AppComponent;
})();



/***/ }),

/***/ "./src/app/app.module.ts":
/*!*******************************!*\
  !*** ./src/app/app.module.ts ***!
  \*******************************/
/*! exports provided: AppModule */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "AppModule", function() { return AppModule; });
/* harmony import */ var _angular_platform_browser__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @angular/platform-browser */ "./node_modules/@angular/platform-browser/__ivy_ngcc__/fesm2015/platform-browser.js");
/* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @angular/core */ "./node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js");
/* harmony import */ var _MyError__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./MyError */ "./src/app/MyError.ts");
/* harmony import */ var _app_component__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./app.component */ "./src/app/app.component.ts");
/* harmony import */ var ng_zorro_antd__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ng-zorro-antd */ "./node_modules/ng-zorro-antd/__ivy_ngcc__/fesm2015/ng-zorro-antd.js");
/* harmony import */ var _angular_forms__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @angular/forms */ "./node_modules/@angular/forms/__ivy_ngcc__/fesm2015/forms.js");
/* harmony import */ var _angular_common_http__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @angular/common/http */ "./node_modules/@angular/common/__ivy_ngcc__/fesm2015/http.js");
/* harmony import */ var _angular_platform_browser_animations__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @angular/platform-browser/animations */ "./node_modules/@angular/platform-browser/__ivy_ngcc__/fesm2015/animations.js");
/* harmony import */ var _angular_common__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @angular/common */ "./node_modules/@angular/common/__ivy_ngcc__/fesm2015/common.js");
/* harmony import */ var _angular_common_locales_zh__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! @angular/common/locales/zh */ "./node_modules/@angular/common/locales/zh.js");
/* harmony import */ var _angular_common_locales_zh__WEBPACK_IMPORTED_MODULE_9___default = /*#__PURE__*/__webpack_require__.n(_angular_common_locales_zh__WEBPACK_IMPORTED_MODULE_9__);
/* harmony import */ var _form_form_component__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./form/form.component */ "./src/app/form/form.component.ts");
/* harmony import */ var _play_play_component__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./play/play.component */ "./src/app/play/play.component.ts");
/* harmony import */ var _common_lesson_title_config_lesson_title_config_component__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ./common/lesson-title-config/lesson-title-config.component */ "./src/app/common/lesson-title-config/lesson-title-config.component.ts");
/* harmony import */ var _pipes_background_image_pipe__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ./pipes/background-image.pipe */ "./src/app/pipes/background-image.pipe.ts");
/* harmony import */ var _common_upload_image_with_preview_upload_image_with_preview_component__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ./common/upload-image-with-preview/upload-image-with-preview.component */ "./src/app/common/upload-image-with-preview/upload-image-with-preview.component.ts");
/* harmony import */ var _common_player_content_wrapper_player_content_wrapper_component__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ./common/player-content-wrapper/player-content-wrapper.component */ "./src/app/common/player-content-wrapper/player-content-wrapper.component.ts");
/* harmony import */ var _common_custom_hot_zone_custom_hot_zone_component__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ./common/custom-hot-zone/custom-hot-zone.component */ "./src/app/common/custom-hot-zone/custom-hot-zone.component.ts");
/* harmony import */ var _common_upload_video_upload_video_component__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! ./common/upload-video/upload-video.component */ "./src/app/common/upload-video/upload-video.component.ts");
/* harmony import */ var _pipes_time_pipe__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! ./pipes/time.pipe */ "./src/app/pipes/time.pipe.ts");
/* harmony import */ var _pipes_resource_pipe__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(/*! ./pipes/resource.pipe */ "./src/app/pipes/resource.pipe.ts");
/* harmony import */ var _common_audio_recorder_audio_recorder_component__WEBPACK_IMPORTED_MODULE_20__ = __webpack_require__(/*! ./common/audio-recorder/audio-recorder.component */ "./src/app/common/audio-recorder/audio-recorder.component.ts");
/* harmony import */ var _fortawesome_angular_fontawesome__WEBPACK_IMPORTED_MODULE_21__ = __webpack_require__(/*! @fortawesome/angular-fontawesome */ "./node_modules/@fortawesome/angular-fontawesome/__ivy_ngcc__/fesm2015/angular-fontawesome.js");
/* harmony import */ var _fortawesome_free_solid_svg_icons__WEBPACK_IMPORTED_MODULE_22__ = __webpack_require__(/*! @fortawesome/free-solid-svg-icons */ "./node_modules/@fortawesome/free-solid-svg-icons/index.es.js");
/* harmony import */ var _fortawesome_free_regular_svg_icons__WEBPACK_IMPORTED_MODULE_23__ = __webpack_require__(/*! @fortawesome/free-regular-svg-icons */ "./node_modules/@fortawesome/free-regular-svg-icons/index.es.js");


























Object(_angular_common__WEBPACK_IMPORTED_MODULE_8__["registerLocaleData"])(_angular_common_locales_zh__WEBPACK_IMPORTED_MODULE_9___default.a);
let AppModule = /*@__PURE__*/ (() => {
    class AppModule {
        constructor(library) {
            library.addIconPacks(_fortawesome_free_solid_svg_icons__WEBPACK_IMPORTED_MODULE_22__["fas"], _fortawesome_free_regular_svg_icons__WEBPACK_IMPORTED_MODULE_23__["far"]);
        }
    }
    AppModule.ɵmod = _angular_core__WEBPACK_IMPORTED_MODULE_1__["ɵɵdefineNgModule"]({ type: AppModule, bootstrap: [_app_component__WEBPACK_IMPORTED_MODULE_3__["AppComponent"]] });
    AppModule.ɵinj = _angular_core__WEBPACK_IMPORTED_MODULE_1__["ɵɵdefineInjector"]({ factory: function AppModule_Factory(t) { return new (t || AppModule)(_angular_core__WEBPACK_IMPORTED_MODULE_1__["ɵɵinject"](_fortawesome_angular_fontawesome__WEBPACK_IMPORTED_MODULE_21__["FaIconLibrary"])); }, providers: [
            { provide: _angular_core__WEBPACK_IMPORTED_MODULE_1__["ErrorHandler"], useClass: _MyError__WEBPACK_IMPORTED_MODULE_2__["MyErrorHandler"] },
            { provide: ng_zorro_antd__WEBPACK_IMPORTED_MODULE_4__["NZ_I18N"], useValue: ng_zorro_antd__WEBPACK_IMPORTED_MODULE_4__["zh_CN"] }
        ], imports: [[
                _angular_platform_browser__WEBPACK_IMPORTED_MODULE_0__["BrowserModule"],
                ng_zorro_antd__WEBPACK_IMPORTED_MODULE_4__["NgZorroAntdModule"],
                _angular_forms__WEBPACK_IMPORTED_MODULE_5__["FormsModule"],
                _angular_common_http__WEBPACK_IMPORTED_MODULE_6__["HttpClientModule"],
                _angular_platform_browser_animations__WEBPACK_IMPORTED_MODULE_7__["BrowserAnimationsModule"],
                _fortawesome_angular_fontawesome__WEBPACK_IMPORTED_MODULE_21__["FontAwesomeModule"]
            ]] });
    return AppModule;
})();
(function () {
    (typeof ngJitMode === "undefined" || ngJitMode) && _angular_core__WEBPACK_IMPORTED_MODULE_1__["ɵɵsetNgModuleScope"](AppModule, { declarations: [_app_component__WEBPACK_IMPORTED_MODULE_3__["AppComponent"],
            _form_form_component__WEBPACK_IMPORTED_MODULE_10__["FormComponent"],
            _play_play_component__WEBPACK_IMPORTED_MODULE_11__["PlayComponent"],
            _common_lesson_title_config_lesson_title_config_component__WEBPACK_IMPORTED_MODULE_12__["LessonTitleConfigComponent"],
            _common_audio_recorder_audio_recorder_component__WEBPACK_IMPORTED_MODULE_20__["AudioRecorderComponent"],
            _common_upload_image_with_preview_upload_image_with_preview_component__WEBPACK_IMPORTED_MODULE_14__["UploadImageWithPreviewComponent"],
            _pipes_background_image_pipe__WEBPACK_IMPORTED_MODULE_13__["BackgroundImagePipe"],
            _pipes_resource_pipe__WEBPACK_IMPORTED_MODULE_19__["ResourcePipe"],
            _pipes_time_pipe__WEBPACK_IMPORTED_MODULE_18__["TimePipe"],
            _common_upload_video_upload_video_component__WEBPACK_IMPORTED_MODULE_17__["UploadVideoComponent"],
            _common_custom_hot_zone_custom_hot_zone_component__WEBPACK_IMPORTED_MODULE_16__["CustomHotZoneComponent"],
            _common_player_content_wrapper_player_content_wrapper_component__WEBPACK_IMPORTED_MODULE_15__["PlayerContentWrapperComponent"]], imports: [_angular_platform_browser__WEBPACK_IMPORTED_MODULE_0__["BrowserModule"],
            ng_zorro_antd__WEBPACK_IMPORTED_MODULE_4__["NgZorroAntdModule"],
            _angular_forms__WEBPACK_IMPORTED_MODULE_5__["FormsModule"],
            _angular_common_http__WEBPACK_IMPORTED_MODULE_6__["HttpClientModule"],
            _angular_platform_browser_animations__WEBPACK_IMPORTED_MODULE_7__["BrowserAnimationsModule"],
            _fortawesome_angular_fontawesome__WEBPACK_IMPORTED_MODULE_21__["FontAwesomeModule"]] });
})();



/***/ }),

/***/ "./src/app/common/audio-recorder/audio-recorder.component.ts":
/*!*******************************************************************!*\
  !*** ./src/app/common/audio-recorder/audio-recorder.component.ts ***!
  \*******************************************************************/
/*! exports provided: AudioRecorderComponent */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "AudioRecorderComponent", function() { return AudioRecorderComponent; });
/* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @angular/core */ "./node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js");
/* harmony import */ var ng_zorro_antd__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ng-zorro-antd */ "./node_modules/ng-zorro-antd/__ivy_ngcc__/fesm2015/ng-zorro-antd.js");
/* harmony import */ var _angular_common__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @angular/common */ "./node_modules/@angular/common/__ivy_ngcc__/fesm2015/common.js");
/* harmony import */ var ng_zorro_antd_upload__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ng-zorro-antd/upload */ "./node_modules/ng-zorro-antd/__ivy_ngcc__/fesm2015/ng-zorro-antd-upload.js");
/* harmony import */ var _fortawesome_angular_fontawesome__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @fortawesome/angular-fontawesome */ "./node_modules/@fortawesome/angular-fontawesome/__ivy_ngcc__/fesm2015/angular-fontawesome.js");
/* harmony import */ var ng_zorro_antd_progress__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ng-zorro-antd/progress */ "./node_modules/ng-zorro-antd/__ivy_ngcc__/fesm2015/ng-zorro-antd-progress.js");







function AudioRecorderComponent_div_2_Template(rf, ctx) {
    if (rf & 1) {
        const _r89 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵgetCurrentView"]();
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](0, "div", 11);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵlistener"]("click", function AudioRecorderComponent_div_2_Template_div_click_0_listener() { _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵrestoreView"](_r89); const ctx_r88 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵnextContext"](); return ctx_r88.onBtnClearAudio(); });
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelement"](1, "fa-icon", 12);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
    }
}
function AudioRecorderComponent_div_3_Template(rf, ctx) {
    if (rf & 1) {
        const _r91 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵgetCurrentView"]();
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](0, "div", 13);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵlistener"]("click", function AudioRecorderComponent_div_3_Template_div_click_0_listener() { _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵrestoreView"](_r91); const ctx_r90 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵnextContext"](); return ctx_r90.onBtnRecord(); });
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelement"](1, "fa-icon", 14);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtext"](2, " Record Audio ");
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
    }
    if (rf & 2) {
        const ctx_r79 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵnextContext"]();
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵclassProp"]("p-recording", ctx_r79.isRecording);
    }
}
const _c0 = function (a0) { return { "has-clear": a0 }; };
function AudioRecorderComponent_div_5_Template(rf, ctx) {
    if (rf & 1) {
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](0, "div", 15);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelement"](1, "fa-icon", 16);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtext"](2, " Upload Audio ");
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
    }
    if (rf & 2) {
        const ctx_r80 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵnextContext"]();
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("ngClass", _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵpureFunction1"](1, _c0, ctx_r80.withRmBtn && (ctx_r80.audioUrl || ctx_r80.audioBlob)));
    }
}
function AudioRecorderComponent_div_6_Template(rf, ctx) {
    if (rf & 1) {
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](0, "div", 17);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelement"](1, "div", 18);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](2, "div", 19);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelement"](3, "fa-icon", 20);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtext"](4, " Uploading... ");
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
    }
    if (rf & 2) {
        const ctx_r81 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵnextContext"]();
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](1);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵstyleProp"]("width", ctx_r81.progress + "%");
    }
}
function AudioRecorderComponent_div_7_Template(rf, ctx) {
    if (rf & 1) {
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelement"](0, "div");
    }
}
function AudioRecorderComponent_ng_template_8_Template(rf, ctx) {
    if (rf & 1) {
        const _r93 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵgetCurrentView"]();
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](0, "div", 21);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵlistener"]("click", function AudioRecorderComponent_ng_template_8_Template_div_click_0_listener() { _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵrestoreView"](_r93); const ctx_r92 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵnextContext"](); return ctx_r92.onBtnDeleteAudio(); });
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelement"](1, "fa-icon", 22);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
    }
}
function AudioRecorderComponent_ng_template_10_Template(rf, ctx) {
    if (rf & 1) {
        const _r95 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵgetCurrentView"]();
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](0, "div", 23);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵlistener"]("click", function AudioRecorderComponent_ng_template_10_Template_div_click_0_listener() { _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵrestoreView"](_r95); const ctx_r94 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵnextContext"](); return ctx_r94.onBtnSwitchType(); });
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelement"](1, "fa-icon", 24);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
    }
}
function AudioRecorderComponent_div_12_Template(rf, ctx) {
    if (rf & 1) {
        const _r97 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵgetCurrentView"]();
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](0, "div", 25);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵlistener"]("click", function AudioRecorderComponent_div_12_Template_div_click_0_listener() { _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵrestoreView"](_r97); const ctx_r96 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵnextContext"](); return ctx_r96.onBtnPlay(); });
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelement"](1, "nz-progress", 26);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](2, "div", 27);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelement"](3, "fa-icon", 28);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
    }
    if (rf & 2) {
        const ctx_r87 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵnextContext"]();
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](1);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("nzPercent", ctx_r87.percent)("nzWidth", 30)("nzFormat", ctx_r87.progressText);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](1);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵstyleProp"]("left", ctx_r87.isPlaying ? "8px" : "");
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](1);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("icon", ctx_r87.playIcon);
    }
}
let AudioRecorderComponent = /*@__PURE__*/ (() => {
    class AudioRecorderComponent {
        constructor(nzMessageService) {
            this.nzMessageService = nzMessageService;
            this.audio = new Audio();
            this.playIcon = 'play';
            this.isPlaying = false;
            this.isRecording = false;
            this.isUploading = false;
            this.type = Type.UPLOAD; // record | upload
            this.Type = Type;
            this.withRmBtn = false;
            this.needRemove = false;
            this.audioItem = null;
            this.audioUploaded = new _angular_core__WEBPACK_IMPORTED_MODULE_0__["EventEmitter"]();
            this.audioUploadFailure = new _angular_core__WEBPACK_IMPORTED_MODULE_0__["EventEmitter"]();
            this.audioRemoved = new _angular_core__WEBPACK_IMPORTED_MODULE_0__["EventEmitter"]();
            this.percent = 0;
            this.progress = 0;
            // 开始录音
            this.onBtnRecord = () => {
            };
            this.beforeUpload = (file) => {
                this.audioUrl = null;
                if (!this.checkSelectFile(file)) {
                    return false;
                }
                this.isUploading = true;
                this.progress = 0;
            };
            this.uploadSuccess = (url) => {
                this.nzMessageService.info('Upload Success');
                this.isUploading = false;
                this.audioUrl = url;
            };
            this.uploadFailure = (err, file) => {
                this.isUploading = false;
                if (err.name && err.name === 'cancel') {
                    return;
                }
                console.log(err);
                this.nzMessageService.error('Upload Error ' + err.message);
                this.audioUploadFailure.emit(file);
            };
            this.doProgress = (p) => {
                if (p > 1) {
                    p = 1;
                }
                if (p < 0) {
                    p = 0;
                }
                // console.log(Math.floor(p * 100));
                this.progress = Math.floor(p * 100);
            };
            this.uploadUrl = window.courseware.uploadUrl();
            this.uploadData = window.courseware.uploadData();
            window['air'].getUploadCallback = (url, data) => {
                this.uploadUrl = url;
                this.uploadData = data;
            };
        }
        set audioUrl(url) {
            this._audioUrl = url;
            if (url) {
                this.audio.src = this._audioUrl;
                this.audio.load();
            }
            this.init();
        }
        get audioUrl() {
            return this._audioUrl;
        }
        init() {
            this.playIcon = 'play';
            this.isPlaying = false;
            this.isRecording = false;
            this.isUploading = false;
            this.percent = 0;
            this.progress = 0;
            this.audioBlob = null;
        }
        ngOnChanges() {
            // if (!this.audioItem || !this.audioItem.type) {
            //   return;
            // }
            // this.beforeUpload(this.audioItem);
        }
        ngOnInit() {
            this.audio.onplay = () => {
                this.onPlay();
            };
            this.audio.onpause = () => {
                this.onPause();
            };
            this.audio.ontimeupdate = (event) => {
                this.onTimeUpdate(event);
            };
            this.audio.onended = (event) => {
                this.onEnded();
            };
        }
        ngOnDestroy() {
            this.audio.pause();
            this.isPlaying = false;
            this.audio.remove();
            // if (this.recorder.worker) {
            //   this.recorder.worker.terminate();
            // }
        }
        progressText(percent) {
            return ``;
        }
        onPlay() {
            console.log('play');
            this.playIcon = 'pause';
            this.isPlaying = true;
        }
        onPause() {
            console.log('pause');
            this.playIcon = 'play';
            this.isPlaying = false;
        }
        onEnded() {
            console.log('on end');
            this.playIcon = 'play';
            this.percent = 0;
            this.isPlaying = false;
        }
        onTimeUpdate(event) {
            this.percent = Math.floor((this.audio.currentTime / this.audio.duration) * 100);
        }
        onBtnPlay() {
            if (this.isRecording) {
                this.nzMessageService.warning('In Recording');
                return;
            }
            if (this.isPlaying) {
                this.audio.pause();
            }
            else {
                this.audio.play();
            }
        }
        // 切换模式
        onBtnSwitchType() {
        }
        onBtnClearAudio() {
            this.audioUrl = null;
            this.audioRemoved.emit();
        }
        onBtnDeleteAudio() {
            this.audioUrl = null;
            this.audioRemoved.emit();
        }
        handleChange(info) {
            switch (info.type) {
                case 'start':
                    this.isUploading = true;
                    this.progress = 0;
                    break;
                case 'success':
                    this.isUploading = false;
                    this.uploadSuccess(info.file.response);
                    this.audioUploaded.emit(info.file.response);
                    break;
                case 'progress':
                    this.progress = parseInt(info.event.percent, 10);
                    break;
            }
        }
        checkSelectFile(file) {
            if (!file) {
                return;
            }
            const isAudio = ['audio/mp3', 'audio/wav', 'audio/ogg'].includes(file.type);
            if (!isAudio) {
                this.nzMessageService.error('You can only upload Audio file ( mp3 | wav |ogg)');
                return;
            }
            const delta = 25;
            const isOverSize = (file.size / 1024 / 1024) < delta;
            if (!isOverSize) {
                this.nzMessageService.error(`audio file  must smaller than ${delta}MB!`);
                return false;
            }
            return true;
        }
    }
    AudioRecorderComponent.ɵfac = function AudioRecorderComponent_Factory(t) { return new (t || AudioRecorderComponent)(_angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵdirectiveInject"](ng_zorro_antd__WEBPACK_IMPORTED_MODULE_1__["NzMessageService"])); };
    AudioRecorderComponent.ɵcmp = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵdefineComponent"]({ type: AudioRecorderComponent, selectors: [["app-audio-recorder"]], inputs: { withRmBtn: "withRmBtn", needRemove: "needRemove", audioItem: "audioItem", audioUrl: "audioUrl" }, outputs: { audioUploaded: "audioUploaded", audioUploadFailure: "audioUploadFailure", audioRemoved: "audioRemoved" }, features: [_angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵNgOnChangesFeature"]], decls: 13, vars: 12, consts: [[1, "d-flex"], [1, "p-btn-record", "d-flex"], ["class", "btn-clear", "style", "cursor: pointer", 3, "click", 4, "ngIf"], ["class", "btn-record", 3, "p-recording", "click", 4, "ngIf"], [3, "nzAccept", "nzShowUploadList", "nzAction", "nzData", "nzChange"], ["class", "btn-upload", 3, "ngClass", 4, "ngIf"], ["class", "p-upload-progress-bg", 4, "ngIf"], [4, "ngIf", "ngIfThen", "ngIfElse"], ["truthyTemplate", ""], ["falsyTemplate", ""], ["class", "p-progress ml-2", 3, "click", 4, "ngIf"], [1, "btn-clear", 2, "cursor", "pointer", 3, "click"], ["icon", "times"], [1, "btn-record", 3, "click"], ["icon", "microphone"], [1, "btn-upload", 3, "ngClass"], ["icon", "upload"], [1, "p-upload-progress-bg"], [1, "i-bg"], [1, "i-text"], ["icon", "cloud-upload-alt"], [1, "btn-delete", 3, "click"], ["icon", "close"], [1, "btn-switch", 3, "click"], ["icon", "cog"], [1, "p-progress", "ml-2", 3, "click"], ["nzType", "circle", 3, "nzPercent", "nzWidth", "nzFormat"], [1, "p-btn-play"], [3, "icon"]], template: function AudioRecorderComponent_Template(rf, ctx) {
            if (rf & 1) {
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](0, "div", 0);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](1, "div", 1);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtemplate"](2, AudioRecorderComponent_div_2_Template, 2, 0, "div", 2);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtemplate"](3, AudioRecorderComponent_div_3_Template, 3, 2, "div", 3);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](4, "nz-upload", 4);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵlistener"]("nzChange", function AudioRecorderComponent_Template_nz_upload_nzChange_4_listener($event) { return ctx.handleChange($event); });
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtemplate"](5, AudioRecorderComponent_div_5_Template, 3, 3, "div", 5);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtemplate"](6, AudioRecorderComponent_div_6_Template, 5, 2, "div", 6);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtemplate"](7, AudioRecorderComponent_div_7_Template, 1, 0, "div", 7);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtemplate"](8, AudioRecorderComponent_ng_template_8_Template, 2, 0, "ng-template", null, 8, _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtemplateRefExtractor"]);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtemplate"](10, AudioRecorderComponent_ng_template_10_Template, 2, 0, "ng-template", null, 9, _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtemplateRefExtractor"]);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtemplate"](12, AudioRecorderComponent_div_12_Template, 4, 6, "div", 10);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
            }
            if (rf & 2) {
                const _r83 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵreference"](9);
                const _r85 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵreference"](11);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](2);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("ngIf", ctx.withRmBtn && (ctx.audioUrl || ctx.audioBlob));
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](1);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("ngIf", ctx.type === ctx.Type.RECORD && !ctx.isUploading);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](1);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("nzAccept", ".mp3")("nzShowUploadList", false)("nzAction", ctx.uploadUrl)("nzData", ctx.uploadData);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](1);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("ngIf", ctx.type === ctx.Type.UPLOAD && !ctx.isUploading);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](1);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("ngIf", ctx.isUploading);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](1);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("ngIf", ctx.audioUrl && ctx.needRemove)("ngIfThen", _r83)("ngIfElse", _r85);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](5);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("ngIf", ctx.audioUrl || ctx.audioBlob);
            }
        }, directives: [_angular_common__WEBPACK_IMPORTED_MODULE_2__["NgIf"], ng_zorro_antd_upload__WEBPACK_IMPORTED_MODULE_3__["NzUploadComponent"], _fortawesome_angular_fontawesome__WEBPACK_IMPORTED_MODULE_4__["FaIconComponent"], _angular_common__WEBPACK_IMPORTED_MODULE_2__["NgClass"], ng_zorro_antd_progress__WEBPACK_IMPORTED_MODULE_5__["NzProgressComponent"]], styles: [".d-flex[_ngcontent-%COMP%] {\n  display: flex;\n}\n\n.p-btn-record[_ngcontent-%COMP%] {\n  font-size: 0.9rem;\n  color: #555;\n  font-family: \"Monospaced Number\", \"Chinese Quote\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"PingFang SC\", \"Hiragino Sans GB\", \"Microsoft YaHei\", \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n}\n\n.p-btn-record[_ngcontent-%COMP%]   .btn-record[_ngcontent-%COMP%], .p-btn-record[_ngcontent-%COMP%]   .btn-upload[_ngcontent-%COMP%] {\n  cursor: pointer;\n  text-align: center;\n  width: 130px;\n  height: 33px;\n  line-height: 33px;\n  border-radius: 0.5rem 0 0 0.5rem;\n  border: 1px solid #ddd;\n  border-right: 0.5px;\n}\n\n.p-btn-record[_ngcontent-%COMP%]   .btn-record[_ngcontent-%COMP%]:hover, .p-btn-record[_ngcontent-%COMP%]   .btn-upload[_ngcontent-%COMP%]:hover {\n  color: #40a9ff;\n}\n\n.p-btn-record[_ngcontent-%COMP%]   .btn-record.has-clear[_ngcontent-%COMP%], .p-btn-record[_ngcontent-%COMP%]   .btn-upload.has-clear[_ngcontent-%COMP%] {\n  border-radius: 0;\n  border-left: 0;\n}\n\n.p-btn-record[_ngcontent-%COMP%]   .btn-clear[_ngcontent-%COMP%] {\n  text-align: center;\n  color: #aaa;\n  padding: 0 0.5rem;\n  border: 1px solid #ddd;\n  border-radius: 0.5rem 0 0 0.5rem;\n  height: 33px;\n  line-height: 33px;\n}\n\n.p-btn-record[_ngcontent-%COMP%]   .btn-switch[_ngcontent-%COMP%] {\n  text-align: center;\n  color: #aaa;\n  padding: 0 0.5rem;\n  border: 1px solid #ddd;\n  border-radius: 0 0.5rem 0.5rem 0;\n  height: 33px;\n  line-height: 33px;\n}\n\n.p-btn-record[_ngcontent-%COMP%]   .btn-switch[_ngcontent-%COMP%]:hover {\n  color: #40a9ff;\n}\n\n.p-btn-record[_ngcontent-%COMP%]   .btn-delete[_ngcontent-%COMP%] {\n  text-align: center;\n  color: #aaa;\n  padding: 0 0.5rem;\n  border: 1px solid #ddd;\n  border-radius: 0 0.5rem 0.5rem 0;\n  height: 33px;\n  line-height: 33px;\n}\n\n.p-btn-record[_ngcontent-%COMP%]   .btn-delete[_ngcontent-%COMP%]:hover {\n  color: #ec5b56;\n}\n\n.p-recording[_ngcontent-%COMP%] {\n  background: orangered;\n  color: white !important;\n}\n\n.p-upload-progress-bg[_ngcontent-%COMP%] {\n  position: relative;\n  width: 130px;\n  height: 33px;\n  line-height: 33px;\n}\n\n.p-upload-progress-bg[_ngcontent-%COMP%]   .i-text[_ngcontent-%COMP%] {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  text-align: center;\n  border-radius: 0.5rem 0 0 0.5rem;\n  border: 1px solid #ddd;\n  border-right: 0.5px;\n  color: white;\n  text-shadow: 0 0 2px rgba(0, 0, 0, 0.85);\n}\n\n.p-upload-progress-bg[_ngcontent-%COMP%]   .i-bg[_ngcontent-%COMP%] {\n  position: absolute;\n  left: 0;\n  top: 0;\n  height: 100%;\n  background-color: #27b43f;\n  border-radius: 0.5rem 0 0 0.5rem;\n}\n\n.p-progress[_ngcontent-%COMP%] {\n  margin-top: 2px;\n  position: relative;\n  line-height: 26px;\n}\n\n.p-progress[_ngcontent-%COMP%]   .p-btn-play[_ngcontent-%COMP%] {\n  position: absolute;\n  left: 10px;\n  top: 3px;\n  color: #555;\n}\n\n[_nghost-%COMP%]     nz-upload {\n  line-height: 33px;\n}\n/*# sourceMappingURL=data:application/json;base64,  */"] });
    return AudioRecorderComponent;
})();
var Type = /*@__PURE__*/ (function (Type) {
    Type[Type["RECORD"] = 1] = "RECORD";
    Type[Type["UPLOAD"] = 2] = "UPLOAD";
    return Type;
})({});



/***/ }),

/***/ "./src/app/common/custom-hot-zone/Unit.ts":
/*!************************************************!*\
  !*** ./src/app/common/custom-hot-zone/Unit.ts ***!
  \************************************************/
/*! exports provided: MySprite, RoundSprite, ColorSpr, GrayscaleSpr, BitMapLabel, Label, RichTextOld, RichText, LineRect, ShapeRect, Line, ShapeCircle, ShapeRectNew, MyAnimation, tweenChange, rotateItem, scaleItem, moveItem, endShow, hideItem, showItem, alphaItem, showStar, randomSortByArr, radianToAngle, angleToRadian, getPosByAngle, getAngleByPos, removeItemFromArr, circleMove, getPosDistance, delayCall, formatTime, getMinScale, jelly, showPopParticle, shake, HotZoneItem, HotZoneImg, HotZoneLabel, EditorItem */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "MySprite", function() { return MySprite; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "RoundSprite", function() { return RoundSprite; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ColorSpr", function() { return ColorSpr; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "GrayscaleSpr", function() { return GrayscaleSpr; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "BitMapLabel", function() { return BitMapLabel; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Label", function() { return Label; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "RichTextOld", function() { return RichTextOld; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "RichText", function() { return RichText; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "LineRect", function() { return LineRect; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ShapeRect", function() { return ShapeRect; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Line", function() { return Line; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ShapeCircle", function() { return ShapeCircle; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ShapeRectNew", function() { return ShapeRectNew; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "MyAnimation", function() { return MyAnimation; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "tweenChange", function() { return tweenChange; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "rotateItem", function() { return rotateItem; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "scaleItem", function() { return scaleItem; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "moveItem", function() { return moveItem; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "endShow", function() { return endShow; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "hideItem", function() { return hideItem; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "showItem", function() { return showItem; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "alphaItem", function() { return alphaItem; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "showStar", function() { return showStar; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "randomSortByArr", function() { return randomSortByArr; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "radianToAngle", function() { return radianToAngle; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "angleToRadian", function() { return angleToRadian; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getPosByAngle", function() { return getPosByAngle; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getAngleByPos", function() { return getAngleByPos; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "removeItemFromArr", function() { return removeItemFromArr; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "circleMove", function() { return circleMove; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getPosDistance", function() { return getPosDistance; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "delayCall", function() { return delayCall; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "formatTime", function() { return formatTime; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getMinScale", function() { return getMinScale; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "jelly", function() { return jelly; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "showPopParticle", function() { return showPopParticle; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "shake", function() { return shake; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "HotZoneItem", function() { return HotZoneItem; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "HotZoneImg", function() { return HotZoneImg; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "HotZoneLabel", function() { return HotZoneLabel; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "EditorItem", function() { return EditorItem; });
/* harmony import */ var _tweenjs_tween_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tweenjs/tween.js */ "./node_modules/@tweenjs/tween.js/dist/tween.esm.js");

class Sprite {
    constructor(ctx = null) {
        this.x = 0;
        this.y = 0;
        this.color = '';
        this.radius = 0;
        this.alive = false;
        this.margin = 0;
        this.angle = 0;
        if (!ctx) {
            this.ctx = window.curCtx;
        }
        else {
            this.ctx = ctx;
        }
    }
    update($event) {
        this.draw();
    }
    draw() {
    }
}
class MySprite extends Sprite {
    constructor() {
        super(...arguments);
        this._width = 0;
        this._height = 0;
        this._anchorX = 0;
        this._anchorY = 0;
        this._offX = 0;
        this._offY = 0;
        this.scaleX = 1;
        this.scaleY = 1;
        this._alpha = 1;
        this.rotation = 0;
        this.visible = true;
        this.skewX = 0;
        this.skewY = 0;
        this._shadowFlag = false;
        this._shadowOffsetX = 0;
        this._shadowOffsetY = 0;
        this._shadowBlur = 5;
        this._radius = 0;
        this.children = [this];
        this.childDepandVisible = true;
        this.childDepandAlpha = false;
        this._z = 0;
        this._bitmapFlag = false;
    }
    init(imgObj = null, anchorX = 0.5, anchorY = 0.5) {
        if (imgObj) {
            this.img = imgObj;
            this.width = this.img.width;
            this.height = this.img.height;
        }
        this.anchorX = anchorX;
        this.anchorY = anchorY;
    }
    setShowRect(rect) {
        this._showRect = rect;
    }
    setShadow(offX, offY, blur, color = 'rgba(0, 0, 0, 0.3)') {
        this._shadowFlag = true;
        this._shadowColor = color;
        this._shadowOffsetX = offX;
        this._shadowOffsetY = offY;
        this._shadowBlur = blur;
    }
    setRadius(r) {
        this._radius = r;
    }
    update($event = null) {
        if (!this.visible && this.childDepandVisible) {
            return;
        }
        this.draw();
    }
    draw() {
        this.ctx.save();
        this.drawInit();
        this.updateChildren();
        this.ctx.restore();
    }
    drawInit() {
        this.ctx.translate(this.x, this.y);
        this.ctx.rotate(this.rotation * Math.PI / 180);
        this.ctx.scale(this.scaleX, this.scaleY);
        this.ctx.globalAlpha = this.alpha;
        this.ctx.transform(1, this.skewX, this.skewY, 1, 0, 0);
        //
        // if (this._radius) {
        //
        //   const r = this._radius;
        //   const w = this.width;
        //   const h = this.height;
        //
        //   this.ctx.lineTo(-w / 2, h / 2);          // 创建水平线
        //   this.ctx.arcTo(-w / 2, -h / 2, -w / 2 + r, -h / 2, r);
        //   this.ctx.arcTo(w / 2, -h / 2, w / 2, -h / 2 + r, r);
        //   this.ctx.arcTo(w / 2, h / 2, w / 2 - r, h / 2, r);
        //   this.ctx.arcTo(-w / 2, h / 2, -w / 2, h / 2 - r, r);
        //
        //   this.ctx.clip();
        // }
    }
    drawSelf() {
        if (this._shadowFlag) {
            this.ctx.shadowOffsetX = this._shadowOffsetX;
            this.ctx.shadowOffsetY = this._shadowOffsetY;
            this.ctx.shadowBlur = this._shadowBlur;
            this.ctx.shadowColor = this._shadowColor;
        }
        else {
            this.ctx.shadowOffsetX = 0;
            this.ctx.shadowOffsetY = 0;
            this.ctx.shadowBlur = null;
            this.ctx.shadowColor = null;
        }
        if (this.img) {
            if (this._showRect) {
                const rect = this._showRect;
                this.ctx.drawImage(this.img, rect.x, rect.y, rect.width, rect.height, this._offX, this._offY + rect.y, this.width, rect.height);
            }
            else {
                this.ctx.drawImage(this.img, this._offX, this._offY);
            }
        }
    }
    updateChildren() {
        if (this.children.length <= 0) {
            return;
        }
        for (const child of this.children) {
            if (child === this) {
                if (this.visible) {
                    this.drawSelf();
                }
            }
            else {
                child.update();
            }
        }
    }
    load(url, anchorX = 0.5, anchorY = 0.5) {
        return new Promise((resolve, reject) => {
            const img = new Image();
            img.onload = () => resolve(img);
            img.onerror = reject;
            img.src = url;
        }).then(img => {
            this.init(img, anchorX, anchorY);
            return img;
        });
    }
    addChild(child, z = 1) {
        if (this.children.indexOf(child) === -1) {
            this.children.push(child);
            child._z = z;
            child.parent = this;
        }
        this.children.sort((a, b) => {
            return a._z - b._z;
        });
        if (this.childDepandAlpha) {
            child.alpha = this.alpha;
        }
    }
    removeChild(child) {
        const index = this.children.indexOf(child);
        if (index !== -1) {
            this.children.splice(index, 1);
        }
    }
    removeChildren() {
        for (let i = 0; i < this.children.length; i++) {
            if (this.children[i]) {
                if (this.children[i] !== this) {
                    this.children.splice(i, 1);
                    i--;
                }
            }
        }
    }
    _changeChildAlpha(alpha) {
        for (const child of this.children) {
            if (child !== this) {
                child.alpha = alpha;
            }
        }
    }
    set btimapFlag(v) {
        this._bitmapFlag = v;
    }
    get btimapFlag() {
        return this._bitmapFlag;
    }
    set alpha(v) {
        this._alpha = v;
        if (this.childDepandAlpha) {
            this._changeChildAlpha(v);
        }
    }
    get alpha() {
        return this._alpha;
    }
    set width(v) {
        this._width = v;
        this.refreshAnchorOff();
    }
    get width() {
        return this._width;
    }
    set height(v) {
        this._height = v;
        this.refreshAnchorOff();
    }
    get height() {
        return this._height;
    }
    set anchorX(value) {
        this._anchorX = value;
        this.refreshAnchorOff();
    }
    get anchorX() {
        return this._anchorX;
    }
    set anchorY(value) {
        this._anchorY = value;
        this.refreshAnchorOff();
    }
    get anchorY() {
        return this._anchorY;
    }
    refreshAnchorOff() {
        this._offX = -this._width * this.anchorX;
        this._offY = -this._height * this.anchorY;
    }
    setScaleXY(value) {
        this.scaleX = this.scaleY = value;
    }
    getBoundingBox() {
        const getParentData = (item) => {
            let px = item.x;
            let py = item.y;
            let sx = item.scaleX;
            let sy = item.scaleY;
            const parent = item.parent;
            if (parent) {
                const obj = getParentData(parent);
                const _x = obj.px;
                const _y = obj.py;
                const _sx = obj.sx;
                const _sy = obj.sy;
                px = _x + item.x * _sx;
                py = _y + item.y * _sy;
                sx *= _sx;
                sy *= _sy;
            }
            return { px, py, sx, sy };
        };
        const data = getParentData(this);
        const x = data.px + this._offX * Math.abs(data.sx);
        const y = data.py + this._offY * Math.abs(data.sy);
        const width = this.width * Math.abs(data.sx);
        const height = this.height * Math.abs(data.sy);
        return { x, y, width, height };
    }
}
class RoundSprite extends MySprite {
    init(imgObj = null, anchorX = 0.5, anchorY = 0.5) {
        if (imgObj) {
            this.img = imgObj;
            this.width = this.img.width;
            this.height = this.img.height;
        }
        this.anchorX = anchorX;
        this.anchorY = anchorY;
        const canvas = window['curCanvas'];
        const w = canvas.nativeElement.width;
        const h = canvas.nativeElement.height;
        this._offCanvas = document.createElement('canvas');
        this._offCanvas.width = w;
        this._offCanvas.height = h;
        this._offCtx = this._offCanvas.getContext('2d');
        // this._newCtx = this.ctx;
        // this.ctx = this._offCtx;
    }
    drawSelf() {
        //
        // if (this._shadowFlag) {
        //
        //   this.ctx.shadowOffsetX = this._shadowOffsetX;
        //   this.ctx.shadowOffsetY = this._shadowOffsetY;
        //   this.ctx.shadowBlur = this._shadowBlur;
        //   this.ctx.shadowColor = this._shadowColor;
        // } else {
        //   this.ctx.shadowOffsetX = 0;
        //   this.ctx.shadowOffsetY = 0;
        //   this.ctx.shadowBlur = null;
        //   this.ctx.shadowColor = null;
        // }
        if (this._radius) {
            const r = this._radius;
            const w = this.width;
            const h = this.height;
            const x = -this._offX;
            const y = -this._offY;
            this._offCtx.lineTo(x - w / 2, y + h / 2); // 创建水平线
            this._offCtx.arcTo(x - w / 2, y - h / 2, x - w / 2 + r, y - h / 2, r);
            this._offCtx.arcTo(x + w / 2, y - h / 2, x + w / 2, y - h / 2 + r, r);
            this._offCtx.arcTo(x + w / 2, y + h / 2, x + w / 2 - r, y + h / 2, r);
            this._offCtx.arcTo(x - w / 2, y + h / 2, x - w / 2, y + h / 2 - r, r);
            this._offCtx.clip();
        }
        if (this.img) {
            this._offCtx.drawImage(this.img, 0, 0);
            this.ctx.drawImage(this._offCanvas, this._offX, this._offX);
        }
    }
}
class ColorSpr extends MySprite {
    constructor() {
        super(...arguments);
        this.r = 0;
        this.g = 0;
        this.b = 0;
    }
    createGSCanvas() {
        if (!this.img) {
            return;
        }
        const rect = this.getBoundingBox();
        if (rect.width <= 1 || rect.height <= 1) {
            return;
        }
        const c = this.ctx.getImageData(rect.x, rect.y, rect.width, rect.height);
        for (let i = 0; i < c.height; i++) {
            for (let j = 0; j < c.width; j++) {
                const x = (i * 4) * c.width + (j * 4);
                const r = c.data[x];
                const g = c.data[x + 1];
                const b = c.data[x + 2];
                c.data[x] = this.r;
                c.data[x + 1] = this.g;
                c.data[x + 2] = this.b;
                // c.data[x] = c.data[x + 1] = c.data[x + 2] = (r + g + b) / 3 ;
                // // c.data[x + 3] = 255;
            }
        }
        this.ctx.putImageData(c, rect.x, rect.y, 0, 0, rect.width, rect.height);
    }
    drawSelf() {
        super.drawSelf();
        this.createGSCanvas();
    }
}
class GrayscaleSpr extends MySprite {
    constructor() {
        super(...arguments);
        this.grayScale = 120;
    }
    createGSCanvas() {
        if (!this.img) {
            return;
        }
        const rect = this.getBoundingBox();
        const c = this.ctx.getImageData(rect.x, rect.y, rect.width, rect.height);
        for (let i = 0; i < c.height; i++) {
            for (let j = 0; j < c.width; j++) {
                const x = (i * 4) * c.width + (j * 4);
                const r = c.data[x];
                const g = c.data[x + 1];
                const b = c.data[x + 2];
                // const a = c.data[x + 3];
                c.data[x] = c.data[x + 1] = c.data[x + 2] = this.grayScale; // (r + g + b) / 3;
                // c.data[x + 3] = 255;
            }
        }
        this.ctx.putImageData(c, rect.x, rect.y, 0, 0, rect.width, rect.height);
    }
    drawSelf() {
        super.drawSelf();
        this.createGSCanvas();
    }
}
class BitMapLabel extends MySprite {
    setText(data, text) {
        this.labelArr = [];
        const labelArr = [];
        const tmpArr = text.split('');
        let totalW = 0;
        let h = 0;
        for (const tmp of tmpArr) {
            const label = new MySprite(this.ctx);
            label.init(data[tmp], 0);
            this.addChild(label);
            labelArr.push(label);
            totalW += label.width;
            h = label.height;
        }
        this.width = totalW;
        this.height = h;
        let offX = -totalW / 2;
        for (const label of labelArr) {
            label.x = offX;
            offX += label.width;
        }
        this.labelArr = labelArr;
    }
}
class Label extends MySprite {
    constructor(ctx = null) {
        super(ctx);
        // fontSize:String = '40px';
        this.fontName = 'Verdana';
        this.textAlign = 'left';
        this.fontSize = 40;
        this.fontColor = '#000000';
        this.fontWeight = 900;
        this.outline = 0;
        this.outlineColor = '#ffffff';
        // _shadowFlag = false;
        // _shadowColor;
        // _shadowOffsetX;
        // _shadowOffsetY;
        // _shadowBlur;
        this._outlineFlag = false;
        this.init();
    }
    get text() {
        return this._text;
    }
    set text(value) {
        this._text = value;
        this.refreshSize();
    }
    refreshSize() {
        this.ctx.save();
        this.ctx.font = `${this.fontSize * this.scaleX}px ${this.fontName}`;
        this.ctx.textAlign = this.textAlign;
        this.ctx.textBaseline = 'middle';
        this.ctx.fontWeight = this.fontWeight;
        this._width = this.ctx.measureText(this.text).width;
        this._height = this.fontSize;
        this.refreshAnchorOff();
        this.ctx.restore();
    }
    setMaxSize(w) {
        this._maxWidth = w;
        this.refreshSize();
        if (this.width >= w) {
            this.scaleX *= w / this.width;
            this.scaleY *= w / this.width;
        }
    }
    show(callBack = null) {
        this.visible = true;
        if (this.alpha >= 1) {
            return;
        }
        const tween = new _tweenjs_tween_js__WEBPACK_IMPORTED_MODULE_0__["default"].Tween(this)
            .to({ alpha: 1 }, 800)
            // .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth.
            .onComplete(() => {
            if (callBack) {
                callBack();
            }
        })
            .start(); // Start the tween immediately.
    }
    setOutline(width = 5, color = '#ffffff') {
        this._outlineFlag = true;
        this._outLineWidth = width;
        this._outLineColor = color;
    }
    drawText() {
        if (!this.text) {
            return;
        }
        this.ctx.font = `${this.fontSize}px ${this.fontName}`;
        this.ctx.textAlign = this.textAlign;
        this.ctx.textBaseline = 'middle';
        this.ctx.fontWeight = this.fontWeight;
        if (this._outlineFlag) {
            this.ctx.lineWidth = this._outLineWidth;
            this.ctx.strokeStyle = this._outLineColor;
            this.ctx.strokeText(this.text, 0, 0);
        }
        this.ctx.fillStyle = this.fontColor;
        if (this.outline > 0) {
            this.ctx.lineWidth = this.outline;
            this.ctx.strokeStyle = this.outlineColor;
            this.ctx.strokeText(this.text, 0, 0);
        }
        this.ctx.fillText(this.text, 0, 0);
    }
    drawSelf() {
        super.drawSelf();
        this.drawText();
    }
}
class RichTextOld extends Label {
    constructor() {
        super(...arguments);
        this.textArr = [];
        this.fontSize = 40;
    }
    setText(text, words) {
        let newText = text;
        for (const word of words) {
            const re = new RegExp(word, 'g');
            newText = newText.replace(re, `#${word}#`);
            // newText = newText.replace(word, `#${word}#`);
        }
        this.textArr = newText.split('#');
        this.text = newText;
        // this.setSize();
    }
    refreshSize() {
        this.ctx.save();
        this.ctx.font = `${this.fontSize}px ${this.fontName}`;
        this.ctx.textAlign = this.textAlign;
        this.ctx.textBaseline = 'middle';
        this.ctx.fontWeight = this.fontWeight;
        let curX = 0;
        for (const text of this.textArr) {
            const w = this.ctx.measureText(text).width;
            curX += w;
        }
        this.width = curX;
        this.height = this.fontSize;
        this.refreshAnchorOff();
        this.ctx.restore();
    }
    show(callBack = null) {
        // console.log(' in show ');
        this.visible = true;
        // this.alpha = 0;
        const tween = new _tweenjs_tween_js__WEBPACK_IMPORTED_MODULE_0__["default"].Tween(this)
            .to({ alpha: 1 }, 800)
            // .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth.
            .onComplete(() => {
            if (callBack) {
                callBack();
            }
        })
            .start(); // Start the tween immediately.
    }
    drawText() {
        // console.log('in drawText', this.text);
        if (!this.text) {
            return;
        }
        this.ctx.font = `${this.fontSize}px ${this.fontName}`;
        this.ctx.textAlign = this.textAlign;
        this.ctx.textBaseline = 'middle';
        this.ctx.fontWeight = 900;
        this.ctx.lineWidth = 5;
        this.ctx.strokeStyle = '#ffffff';
        // this.ctx.strokeText(this.text, 0, 0);
        this.ctx.fillStyle = '#000000';
        // this.ctx.fillText(this.text, 0, 0);
        let curX = 0;
        for (let i = 0; i < this.textArr.length; i++) {
            const w = this.ctx.measureText(this.textArr[i]).width;
            if ((i + 1) % 2 === 0) {
                this.ctx.fillStyle = '#c8171e';
            }
            else {
                this.ctx.fillStyle = '#000000';
            }
            this.ctx.fillText(this.textArr[i], curX, 0);
            curX += w;
        }
    }
}
class RichText extends Label {
    constructor(ctx) {
        super(ctx);
        this.disH = 30;
        // this.dataArr = dataArr;
    }
    drawText() {
        if (!this.text) {
            return;
        }
        this.ctx.font = `${this.fontSize}px ${this.fontName}`;
        this.ctx.textAlign = this.textAlign;
        this.ctx.textBaseline = 'middle';
        this.ctx.fontWeight = this.fontWeight;
        this.ctx.fillStyle = this.fontColor;
        const selfW = this.width * this.scaleX;
        const chr = this.text.split(' ');
        let temp = '';
        const row = [];
        const w = selfW - 80;
        const disH = (this.fontSize + this.disH) * this.scaleY;
        for (const c of chr) {
            if (this.ctx.measureText(temp).width < w && this.ctx.measureText(temp + (c)).width <= w) {
                temp += ' ' + c;
            }
            else {
                row.push(temp);
                temp = ' ' + c;
            }
        }
        row.push(temp);
        const x = 0;
        const y = -row.length * disH / 2;
        // for (let b = 0 ; b < row.length; b++) {
        //   this.ctx.strokeText(row[b], x, y + ( b + 1 ) * disH ); // 每行字体y坐标间隔20
        // }
        if (this._outlineFlag) {
            this.ctx.lineWidth = this._outLineWidth;
            this.ctx.strokeStyle = this._outLineColor;
            for (let b = 0; b < row.length; b++) {
                this.ctx.strokeText(row[b], x, y + (b + 1) * disH); // 每行字体y坐标间隔20
            }
            // this.ctx.strokeText(this.text, 0, 0);
        }
        // this.ctx.fillStyle = '#ff7600';
        for (let b = 0; b < row.length; b++) {
            this.ctx.fillText(row[b], x, y + (b + 1) * disH); // 每行字体y坐标间隔20
        }
    }
    drawSelf() {
        super.drawSelf();
        this.drawText();
    }
}
class LineRect extends MySprite {
    constructor() {
        super(...arguments);
        this.lineColor = '#ffffff';
        this.lineWidth = 10;
    }
    setSize(w, h) {
        this.width = w;
        this.height = h;
    }
    drawLine() {
        this.ctx.beginPath();
        this.ctx.moveTo(this._offX, this._offY);
        this.ctx.lineTo(this._offX + this.width, this._offY);
        this.ctx.lineTo(this._offX + this.width, this._offY + this.height);
        this.ctx.lineTo(this._offX, this._offY + this.height);
        this.ctx.closePath();
        this.ctx.lineWidth = this.lineWidth;
        // this.ctx.fillStyle = "rgb(2,33,42)";  //指定填充颜色
        // this.ctx.fill();   //对多边形进行填充
        this.ctx.strokeStyle = this.lineColor; // "#ffffff";
        this.ctx.stroke();
    }
    drawSelf() {
        super.drawSelf();
        this.drawLine();
    }
}
class ShapeRect extends MySprite {
    constructor() {
        super(...arguments);
        this.fillColor = '#FF0000';
    }
    setSize(w, h) {
        this.width = w;
        this.height = h;
        // console.log('w:', w);
        // console.log('h:', h);
    }
    drawShape() {
        this.ctx.fillStyle = this.fillColor;
        this.ctx.fillRect(this._offX, this._offY, this.width, this.height);
    }
    drawSelf() {
        super.drawSelf();
        this.drawShape();
    }
}
class Line extends MySprite {
    constructor() {
        super(...arguments);
        this.lineWidth = 5;
        this.lineColor = '#000000';
        this._pointArr = [];
        this.roundFlag = true;
        this._pointS = 1;
        this.lastPointIndex = 0;
    }
    init() {
        const canvas = window['curCanvas'];
        const w = canvas.nativeElement.width;
        const h = canvas.nativeElement.height;
        console.log('w: ', w);
        console.log('h: ', h);
        this._offCanvas = document.createElement('canvas');
        this._offCanvas.width = w;
        this._offCanvas.height = h;
        // this._offCanvas = _offCanvas;
        // this._offCtx = this._offCanvas.getContext('2d');
        // this._offCanvas = new OffscreenCanvas(w, h);
        this._offCtx = this._offCanvas.getContext('2d');
    }
    addPoint(x, y) {
        this._pointArr.push([x, y]);
        if (this._pointArr.length < 2) {
            return;
        }
        //
        // const lastP = this._pointArr[this._pointArr.length - 1];
        //
        //
        // const context = this._offCtx;
        // context.moveTo (lastP[0], lastP[1]);       // 设置起点状态
        // context.lineTo (x, y);       // 设置末端状态
        //
        // context.lineWidth = this.lineWidth;          //设置线宽状态
        // context.strokeStyle = this.lineColor;
        // context.stroke();
        //
        //
        // this.bitMap = this._offCanvas.transferToImageBitmap();
        // const tmpLine = new MySprite(this._offCtx);
        // tmpLine.init(this.imgObj);
        // tmpLine.anchorY = 1;
        // tmpLine.anchorX = 0.5;
        // tmpLine.x = lastP[0];
        // tmpLine.y = lastP[1];
        //
        // const disH = getPosDistance(lastP[0], lastP[1], x, y);
        // tmpLine.scaleX = this.lineWidth / tmpLine.width;
        // tmpLine.scaleY = disH / tmpLine.height * 1.1;
        //
        // const angle = getAngleByPos(lastP[0], lastP[1], x, y);
        // tmpLine.rotation = angle;
        //
        // this.addChild(tmpLine);
    }
    setPointArr(arr, imgObj) {
        this.removeChildren();
        if (arr.length < 2) {
            return;
        }
        let p1 = arr[0];
        let p2;
        for (let i = 1; i < arr.length; i++) {
            p2 = arr[i];
            const tmpLine = new MySprite();
            tmpLine.init(imgObj);
            tmpLine.anchorY = 1;
            tmpLine.anchorX = 0.5;
            tmpLine.x = p1[0];
            tmpLine.y = p1[1];
            const disH = getPosDistance(p1[0], p1[1], p2[0], p2[1]);
            tmpLine.scaleX = this.lineWidth / tmpLine.width;
            tmpLine.scaleY = disH / tmpLine.height * 1.1;
            const angle = getAngleByPos(p1[0], p1[1], p2[0], p2[1]);
            tmpLine.rotation = angle;
            this.addChild(tmpLine);
            p1 = p2;
        }
    }
    drawLine() {
        if (this._pointArr.length < 2) {
            return;
        }
        const curMaxPointIndex = this._pointArr.length - 1;
        if (curMaxPointIndex > this.lastPointIndex) {
            const arr = this._pointArr;
            const context = this._offCtx;
            context.moveTo(arr[this.lastPointIndex][0] * this._pointS, arr[this.lastPointIndex][1] * this._pointS); // 设置起点状态
            for (let i = this.lastPointIndex + 1; i < arr.length; i++) {
                context.lineTo(arr[i][0] * this._pointS, arr[i][1] * this._pointS); // 设置末端状态
            }
            if (this.roundFlag) {
                context.lineCap = "round";
            }
            context.lineWidth = this.lineWidth; //设置线宽状态
            context.strokeStyle = this.lineColor;
            context.stroke();
            this.lastPointIndex = curMaxPointIndex;
            // this.bitMap = this._offCanvas.transferToImageBitmap();
        }
        // this.ctx.drawImage(this.bitMap, this._offX, this._offY);
        this.ctx.drawImage(this._offCanvas, this._offX, this._offY);
    }
    drawSelf() {
        super.drawSelf();
        this.drawLine();
        // if (this.img) {
        //   this.ctx.drawImage(this._offCanvas, 0, 0, this.width, this.height);
        // }
        // if (this.bitMap) {
        //   this.bitMap = this._offCanvas.transferToImageBitmap();
        //   this.ctx.drawImage(this.bitMap, 0, 0, this.width, this.height);
        // }
    }
}
class ShapeCircle extends MySprite {
    constructor() {
        super(...arguments);
        this.fillColor = '#FF0000';
        this.radius = 0;
    }
    setRadius(r) {
        this.anchorX = this.anchorY = 0.5;
        this.radius = r;
        this.width = r * 2;
        this.height = r * 2;
    }
    drawShape() {
        this.ctx.beginPath();
        this.ctx.fillStyle = this.fillColor;
        this.ctx.arc(0, 0, this.radius, 0, angleToRadian(360));
        this.ctx.fill();
    }
    drawSelf() {
        super.drawSelf();
        this.drawShape();
    }
}
class ShapeRectNew extends MySprite {
    constructor() {
        super(...arguments);
        this.radius = 0;
        this.fillColor = '#ffffff';
        this.strokeColor = '#000000';
        this.fill = true;
        this.stroke = false;
        this.lineWidth = 1;
    }
    setSize(w, h, r) {
        this.width = w;
        this.height = h;
        this.radius = r;
    }
    setOutLine(color, lineWidth) {
        this.stroke = true;
        this.strokeColor = color;
        this.lineWidth = lineWidth;
    }
    drawShape() {
        const ctx = this.ctx;
        const width = this.width;
        const height = this.height;
        const radius = this.radius;
        ctx.save();
        ctx.beginPath(0);
        // 从右下角顺时针绘制，弧度从0到1/2PI
        ctx.arc(width - radius, height - radius, radius, 0, Math.PI / 2);
        // 矩形下边线
        ctx.lineTo(radius, height);
        // 左下角圆弧，弧度从1/2PI到PI
        ctx.arc(radius, height - radius, radius, Math.PI / 2, Math.PI);
        // 矩形左边线
        ctx.lineTo(0, radius);
        // 左上角圆弧，弧度从PI到3/2PI
        ctx.arc(radius, radius, radius, Math.PI, Math.PI * 3 / 2);
        // 上边线
        ctx.lineTo(width - radius, 0);
        // 右上角圆弧
        ctx.arc(width - radius, radius, radius, Math.PI * 3 / 2, Math.PI * 2);
        // 右边线
        ctx.lineTo(width, height - radius);
        ctx.closePath();
        if (this.fill) {
            ctx.fillStyle = this.fillColor;
            ctx.fill();
        }
        if (this.stroke) {
            ctx.lineWidth = this.lineWidth;
            ctx.strokeStyle = this.strokeColor;
            ctx.stroke();
        }
        ctx.restore();
    }
    drawSelf() {
        super.drawSelf();
        this.drawShape();
    }
}
class MyAnimation extends MySprite {
    constructor() {
        super(...arguments);
        this.frameArr = [];
        this.frameIndex = 0;
        this.playFlag = false;
        this.curDelay = 0;
        this.loop = false;
        this.delayPerUnit = 1;
        this.restartFlag = false;
        this.reverseFlag = false;
    }
    addFrameByImg(img) {
        const spr = new MySprite(this.ctx);
        spr.init(img);
        this._refreshSize(img);
        spr.visible = false;
        this.addChild(spr);
        this.frameArr.push(spr);
        this.frameArr[this.frameIndex].visible = true;
    }
    addFrameByUrl(url) {
        const spr = new MySprite(this.ctx);
        spr.load(url).then(img => {
            this._refreshSize(img);
        });
        spr.visible = false;
        this.addChild(spr);
        this.frameArr.push(spr);
        this.frameArr[this.frameIndex].visible = true;
    }
    _refreshSize(img) {
        if (this.width < img.width) {
            this.width = img.width;
        }
        if (this.height < img.height) {
            this.height = img.height;
        }
    }
    play() {
        this.playFlag = true;
        this.lastDateTime = new Date().getTime();
    }
    stop() {
        this.playFlag = false;
    }
    replay() {
        this.restartFlag = true;
        this.play();
    }
    reverse() {
        this.reverseFlag = !this.reverseFlag;
        this.frameArr.reverse();
        this.frameIndex = 0;
    }
    showAllFrame() {
        for (const frame of this.frameArr) {
            frame.alpha = 1;
        }
    }
    hideAllFrame() {
        for (const frame of this.frameArr) {
            frame.alpha = 0;
        }
    }
    playEnd() {
        this.playFlag = false;
        this.curDelay = 0;
        this.frameArr[this.frameIndex].visible = true;
        if (this.playEndFunc) {
            this.playEndFunc();
            this.playEndFunc = null;
        }
    }
    updateFrame() {
        if (this.frameArr[this.frameIndex]) {
            this.frameArr[this.frameIndex].visible = false;
        }
        this.frameIndex++;
        if (this.frameIndex >= this.frameArr.length) {
            if (this.loop) {
                this.frameIndex = 0;
            }
            else if (this.restartFlag) {
                this.restartFlag = false;
                this.frameIndex = 0;
            }
            else {
                this.frameIndex--;
                this.playEnd();
                return;
            }
        }
        this.frameArr[this.frameIndex].visible = true;
    }
    _updateDelay(delay) {
        this.curDelay += delay;
        if (this.curDelay < this.delayPerUnit) {
            return;
        }
        this.curDelay -= this.delayPerUnit;
        this.updateFrame();
    }
    _updateLastDate() {
        if (!this.playFlag) {
            return;
        }
        let delay = 0;
        if (this.lastDateTime) {
            delay = (new Date().getTime() - this.lastDateTime) / 1000;
        }
        this.lastDateTime = new Date().getTime();
        this._updateDelay(delay);
    }
    update($event = null) {
        super.update($event);
        this._updateLastDate();
    }
}
// --------===========  util func  =============-------------
function tweenChange(item, obj, time = 0.8, callBack = null, easing = null, update = null) {
    const tween = new _tweenjs_tween_js__WEBPACK_IMPORTED_MODULE_0__["default"].Tween(item).to(obj, time * 1000);
    if (callBack) {
        tween.onComplete(() => {
            callBack();
        });
    }
    if (easing) {
        tween.easing(easing);
    }
    if (update) {
        tween.onUpdate((a, b) => {
            update(a, b);
        });
    }
    tween.start();
    return tween;
}
function rotateItem(item, rotation, time = 0.8, callBack = null, easing = null) {
    const tween = new _tweenjs_tween_js__WEBPACK_IMPORTED_MODULE_0__["default"].Tween(item).to({ rotation }, time * 1000);
    if (callBack) {
        tween.onComplete(() => {
            callBack();
        });
    }
    if (easing) {
        tween.easing(easing);
    }
    tween.start();
}
function scaleItem(item, scale, time = 0.8, callBack = null, easing = null) {
    const tween = new _tweenjs_tween_js__WEBPACK_IMPORTED_MODULE_0__["default"].Tween(item).to({ scaleX: scale, scaleY: scale }, time * 1000);
    if (callBack) {
        tween.onComplete(() => {
            callBack();
        });
    }
    if (easing) {
        tween.easing(easing);
    }
    tween.start();
    return tween;
}
function moveItem(item, x, y, time = 0.8, callBack = null, easing = null) {
    const tween = new _tweenjs_tween_js__WEBPACK_IMPORTED_MODULE_0__["default"].Tween(item).to({ x, y }, time * 1000);
    if (callBack) {
        tween.onComplete(() => {
            callBack();
        });
    }
    if (easing) {
        tween.easing(easing);
    }
    tween.start();
    return tween;
}
function endShow(item, s = 1) {
    item.scaleX = item.scaleY = 0;
    item.alpha = 0;
    const tween = new _tweenjs_tween_js__WEBPACK_IMPORTED_MODULE_0__["default"].Tween(item)
        .to({ alpha: 1, scaleX: s, scaleY: s }, 800)
        .easing(_tweenjs_tween_js__WEBPACK_IMPORTED_MODULE_0__["default"].Easing.Elastic.Out) // Use an easing function to make the animation smooth.
        .onComplete(() => {
    })
        .start();
}
function hideItem(item, time = 0.8, callBack = null, easing = null) {
    if (item.alpha === 0) {
        return;
    }
    const tween = new _tweenjs_tween_js__WEBPACK_IMPORTED_MODULE_0__["default"].Tween(item)
        .to({ alpha: 0 }, time * 1000)
        // .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth.
        .onComplete(() => {
        if (callBack) {
            callBack();
        }
    });
    if (easing) {
        tween.easing(easing);
    }
    tween.start();
}
function showItem(item, time = 0.8, callBack = null, easing = null) {
    if (item.alpha === 1) {
        if (callBack) {
            callBack();
        }
        return;
    }
    item.visible = true;
    const tween = new _tweenjs_tween_js__WEBPACK_IMPORTED_MODULE_0__["default"].Tween(item)
        .to({ alpha: 1 }, time * 1000)
        // .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth.
        .onComplete(() => {
        if (callBack) {
            callBack();
        }
    });
    if (easing) {
        tween.easing(easing);
    }
    tween.start();
}
function alphaItem(item, alpha, time = 0.8, callBack = null, easing = null) {
    const tween = new _tweenjs_tween_js__WEBPACK_IMPORTED_MODULE_0__["default"].Tween(item)
        .to({ alpha }, time * 1000)
        // .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth.
        .onComplete(() => {
        if (callBack) {
            callBack();
        }
    });
    if (easing) {
        tween.easing(easing);
    }
    tween.start();
}
function showStar(item, time = 0.8, callBack = null, easing = null) {
    const tween = new _tweenjs_tween_js__WEBPACK_IMPORTED_MODULE_0__["default"].Tween(item)
        .to({ alpha: 1, scale: 1 }, time * 1000)
        // .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth.
        .onComplete(() => {
        if (callBack) {
            callBack();
        }
    });
    if (easing) {
        tween.easing(easing);
    }
    tween.start();
}
function randomSortByArr(arr) {
    if (!arr) {
        return;
    }
    const newArr = [];
    const tmpArr = arr.concat();
    while (tmpArr.length > 0) {
        const randomIndex = Math.floor(tmpArr.length * Math.random());
        newArr.push(tmpArr[randomIndex]);
        tmpArr.splice(randomIndex, 1);
    }
    return newArr;
}
function radianToAngle(radian) {
    return radian * 180 / Math.PI;
    // 角度 = 弧度 * 180 / Math.PI;
}
function angleToRadian(angle) {
    return angle * Math.PI / 180;
    // 弧度= 角度 * Math.PI / 180;
}
function getPosByAngle(angle, len) {
    const radian = angle * Math.PI / 180;
    const x = Math.sin(radian) * len;
    const y = Math.cos(radian) * len;
    return { x, y };
}
function getAngleByPos(px, py, mx, my) {
    const x = Math.abs(px - mx);
    const y = Math.abs(py - my);
    const z = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));
    const cos = y / z;
    const radina = Math.acos(cos); // 用反三角函数求弧度
    let angle = Math.floor(180 / (Math.PI / radina) * 100) / 100; // 将弧度转换成角度
    if (mx > px && my > py) { // 鼠标在第四象限
        angle = 180 - angle;
    }
    if (mx === px && my > py) { // 鼠标在y轴负方向上
        angle = 180;
    }
    if (mx > px && my === py) { // 鼠标在x轴正方向上
        angle = 90;
    }
    if (mx < px && my > py) { // 鼠标在第三象限
        angle = 180 + angle;
    }
    if (mx < px && my === py) { // 鼠标在x轴负方向
        angle = 270;
    }
    if (mx < px && my < py) { // 鼠标在第二象限
        angle = 360 - angle;
    }
    // console.log('angle: ', angle);
    return angle;
}
function removeItemFromArr(arr, item) {
    const index = arr.indexOf(item);
    if (index !== -1) {
        arr.splice(index, 1);
    }
}
function circleMove(item, x0, y0, time = 2, addR = 360, xPer = 1, yPer = 1, callBack = null, easing = null) {
    const r = getPosDistance(item.x, item.y, x0, y0);
    let a = getAngleByPos(item.x, item.y, x0, y0);
    a += 90;
    const obj = { r, a };
    item._circleAngle = a;
    const targetA = a + addR;
    const tween = new _tweenjs_tween_js__WEBPACK_IMPORTED_MODULE_0__["default"].Tween(item).to({ _circleAngle: targetA }, time * 1000);
    if (callBack) {
        tween.onComplete(() => {
            callBack();
        });
    }
    if (easing) {
        tween.easing(easing);
    }
    tween.onUpdate((item, progress) => {
        // console.log(item._circleAngle);
        const r = obj.r;
        const a = item._circleAngle;
        const x = x0 + r * xPer * Math.cos(a * Math.PI / 180);
        const y = y0 + r * yPer * Math.sin(a * Math.PI / 180);
        item.x = x;
        item.y = y;
        // obj.a ++;
    });
    tween.start();
}
function getPosDistance(sx, sy, ex, ey) {
    const _x = ex - sx;
    const _y = ey - sy;
    const len = Math.sqrt(Math.pow(_x, 2) + Math.pow(_y, 2));
    return len;
}
function delayCall(callback, second) {
    const tween = new _tweenjs_tween_js__WEBPACK_IMPORTED_MODULE_0__["default"].Tween(this)
        .delay(second * 1000)
        .onComplete(() => {
        if (callback) {
            callback();
        }
    })
        .start();
}
function formatTime(fmt, date) {
    // "yyyy-MM-dd HH:mm:ss";
    const o = {
        'M+': date.getMonth() + 1,
        'd+': date.getDate(),
        'h+': date.getHours(),
        'm+': date.getMinutes(),
        's+': date.getSeconds(),
        'q+': Math.floor((date.getMonth() + 3) / 3),
        S: date.getMilliseconds() // 毫秒
    };
    if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
    }
    for (const k in o) {
        if (new RegExp('(' + k + ')').test(fmt)) {
            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1)
                ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)));
        }
    }
    return fmt;
}
function getMinScale(item, maxLen) {
    const sx = maxLen / item.width;
    const sy = maxLen / item.height;
    const minS = Math.min(sx, sy);
    return minS;
}
function jelly(item, time = 0.7) {
    if (item.jellyTween) {
        _tweenjs_tween_js__WEBPACK_IMPORTED_MODULE_0__["default"].remove(item.jellyTween);
    }
    const t = time / 9;
    const baseSX = item.scaleX;
    const baseSY = item.scaleY;
    let index = 0;
    const run = () => {
        if (index >= arr.length) {
            item.jellyTween = null;
            return;
        }
        const data = arr[index];
        const t = tweenChange(item, { scaleX: data[0], scaleY: data[1] }, data[2], () => {
            index++;
            run();
        }, _tweenjs_tween_js__WEBPACK_IMPORTED_MODULE_0__["default"].Easing.Sinusoidal.InOut);
        item.jellyTween = t;
    };
    const arr = [
        [baseSX * 1.1, baseSY * 0.9, t],
        [baseSX * 0.98, baseSY * 1.02, t * 2],
        [baseSX * 1.02, baseSY * 0.98, t * 2],
        [baseSX * 0.99, baseSY * 1.01, t * 2],
        [baseSX * 1.0, baseSY * 1.0, t * 2],
    ];
    run();
}
function showPopParticle(img, pos, parent, num = 20, minLen = 40, maxLen = 80, showTime = 0.4) {
    for (let i = 0; i < num; i++) {
        const particle = new MySprite();
        particle.init(img);
        particle.x = pos.x;
        particle.y = pos.y;
        parent.addChild(particle);
        const randomR = 360 * Math.random();
        particle.rotation = randomR;
        const randomS = 0.3 + Math.random() * 0.7;
        particle.setScaleXY(randomS * 0.3);
        const randomX = Math.random() * 20 - 10;
        particle.x += randomX;
        const randomY = Math.random() * 20 - 10;
        particle.y += randomY;
        const randomL = minLen + Math.random() * (maxLen - minLen);
        const randomA = 360 * Math.random();
        const randomT = getPosByAngle(randomA, randomL);
        moveItem(particle, particle.x + randomT.x, particle.y + randomT.y, showTime, () => {
        }, _tweenjs_tween_js__WEBPACK_IMPORTED_MODULE_0__["default"].Easing.Exponential.Out);
        // scaleItem(particle, 0, 0.6, () => {
        //
        // });
        scaleItem(particle, randomS, 0.6, () => {
        }, _tweenjs_tween_js__WEBPACK_IMPORTED_MODULE_0__["default"].Easing.Exponential.Out);
        setTimeout(() => {
            hideItem(particle, 0.4, () => {
            }, _tweenjs_tween_js__WEBPACK_IMPORTED_MODULE_0__["default"].Easing.Cubic.In);
        }, showTime * 0.5 * 1000);
    }
}
function shake(item, time = 0.5, callback = null, rate = 1) {
    if (item.shakeTween) {
        return;
    }
    item.shakeTween = true;
    const offX = 15 * item.scaleX * rate;
    const offY = 15 * item.scaleX * rate;
    const baseX = item.x;
    const baseY = item.y;
    const easing = _tweenjs_tween_js__WEBPACK_IMPORTED_MODULE_0__["default"].Easing.Sinusoidal.InOut;
    const move4 = () => {
        moveItem(item, baseX, baseY, time / 4, () => {
            item.shakeTween = false;
            if (callback) {
                callback();
            }
        }, easing);
    };
    const move3 = () => {
        moveItem(item, baseX + offX / 4, baseY + offY / 4, time / 4, () => {
            move4();
        }, easing);
    };
    const move2 = () => {
        moveItem(item, baseX - offX / 4 * 3, baseY - offY / 4 * 3, time / 4, () => {
            move3();
        }, easing);
    };
    const move1 = () => {
        moveItem(item, baseX + offX, baseY + offY, time / 7.5, () => {
            move2();
        }, easing);
    };
    move1();
}
// --------------- custom class --------------------
class HotZoneItem extends MySprite {
    constructor() {
        super(...arguments);
        this.lineDashFlag = false;
    }
    get itemType() {
        return this._itemType;
    }
    set itemType(value) {
        this._itemType = value;
    }
    setSize(w, h) {
        this.width = w;
        this.height = h;
        const rect = new ShapeRect(this.ctx);
        rect.x = -w / 2;
        rect.y = -h / 2;
        rect.setSize(w, h);
        rect.fillColor = '#ffffff';
        rect.alpha = 0.2;
        this.addChild(rect);
    }
    showLabel(text = null) {
        if (!this.label) {
            this.label = new Label(this.ctx);
            this.label.anchorY = 0;
            this.label.fontSize = 40;
            this.label.textAlign = 'center';
            this.addChild(this.label);
            // this.label.scaleX = 1 / this.scaleX;
            // this.label.scaleY = 1 / this.scaleY;
            this.refreshLabelScale();
        }
        if (text) {
            this.label.text = text;
        }
        else if (this.title) {
            this.label.text = this.title;
        }
        this.label.visible = true;
    }
    hideLabel() {
        if (!this.label) {
            return;
        }
        this.label.visible = false;
    }
    refreshLabelScale() {
        if (this.scaleX == this.scaleY) {
            this.label.setScaleXY(1);
        }
        if (this.scaleX > this.scaleY) {
            this.label.scaleX = this.scaleY / this.scaleX;
        }
        else {
            this.label.scaleY = this.scaleX / this.scaleY;
        }
    }
    showLineDash() {
        this.lineDashFlag = true;
        if (this.arrow) {
            this.arrow.visible = true;
        }
        else {
            this.arrow = new MySprite(this.ctx);
            this.arrow.load('assets/common/arrow.png', 1, 0);
            this.arrow.setScaleXY(0.06);
            this.arrowTop = new MySprite(this.ctx);
            this.arrowTop.load('assets/common/arrow_top.png', 0.5, 0);
            this.arrowTop.setScaleXY(0.06);
            this.arrowRight = new MySprite(this.ctx);
            this.arrowRight.load('assets/common/arrow_right.png', 1, 0.5);
            this.arrowRight.setScaleXY(0.06);
        }
        this.showLabel();
    }
    hideLineDash() {
        this.lineDashFlag = false;
        if (this.arrow) {
            this.arrow.visible = false;
        }
        this.hideLabel();
    }
    drawArrow() {
        if (!this.arrow) {
            return;
        }
        const rect = this.getBoundingBox();
        this.arrow.x = rect.x + rect.width;
        this.arrow.y = rect.y;
        this.arrow.update();
        this.arrowTop.x = rect.x + rect.width / 2;
        this.arrowTop.y = rect.y;
        this.arrowTop.update();
        this.arrowRight.x = rect.x + rect.width;
        this.arrowRight.y = rect.y + rect.height / 2;
        this.arrowRight.update();
    }
    drawFrame() {
        this.ctx.save();
        const rect = this.getBoundingBox();
        const w = rect.width;
        const h = rect.height;
        const x = rect.x + w / 2;
        const y = rect.y + h / 2;
        this.ctx.setLineDash([5, 5]);
        this.ctx.lineWidth = 2;
        this.ctx.strokeStyle = '#1bfff7';
        // this.ctx.fillStyle = '#ffffff';
        this.ctx.beginPath();
        this.ctx.moveTo(x - w / 2, y - h / 2);
        this.ctx.lineTo(x + w / 2, y - h / 2);
        this.ctx.lineTo(x + w / 2, y + h / 2);
        this.ctx.lineTo(x - w / 2, y + h / 2);
        this.ctx.lineTo(x - w / 2, y - h / 2);
        // this.ctx.fill();
        this.ctx.stroke();
        this.ctx.restore();
    }
    draw() {
        super.draw();
        if (this.lineDashFlag) {
            this.drawFrame();
            this.drawArrow();
        }
    }
}
class HotZoneImg extends MySprite {
    drawFrame() {
        this.ctx.save();
        const rect = this.getBoundingBox();
        const w = rect.width;
        const h = rect.height;
        const x = rect.x + w / 2;
        const y = rect.y + h / 2;
        this.ctx.setLineDash([5, 5]);
        this.ctx.lineWidth = 2;
        this.ctx.strokeStyle = '#1bfff7';
        this.ctx.beginPath();
        this.ctx.moveTo(x - w / 2, y - h / 2);
        this.ctx.lineTo(x + w / 2, y - h / 2);
        this.ctx.lineTo(x + w / 2, y + h / 2);
        this.ctx.lineTo(x - w / 2, y + h / 2);
        this.ctx.lineTo(x - w / 2, y - h / 2);
        // this.ctx.fill();
        this.ctx.stroke();
        this.ctx.restore();
    }
    draw() {
        super.draw();
        this.drawFrame();
    }
}
class HotZoneLabel extends Label {
    drawFrame() {
        this.ctx.save();
        const rect = this.getBoundingBox();
        const w = rect.width / this.scaleX;
        const h = this.height * this.scaleY;
        const x = this.x;
        const y = this.y;
        this.ctx.setLineDash([5, 5]);
        this.ctx.lineWidth = 2;
        this.ctx.strokeStyle = '#1bfff7';
        this.ctx.beginPath();
        this.ctx.moveTo(x - w / 2, y - h / 2);
        this.ctx.lineTo(x + w / 2, y - h / 2);
        this.ctx.lineTo(x + w / 2, y + h / 2);
        this.ctx.lineTo(x - w / 2, y + h / 2);
        this.ctx.lineTo(x - w / 2, y - h / 2);
        // this.ctx.fill();
        this.ctx.stroke();
        this.ctx.restore();
    }
    draw() {
        super.draw();
        this.drawFrame();
    }
}
class EditorItem extends MySprite {
    constructor() {
        super(...arguments);
        this.lineDashFlag = false;
    }
    showLabel(text = null) {
        if (!this.label) {
            this.label = new Label(this.ctx);
            this.label.anchorY = 0;
            this.label.fontSize = 50;
            this.label.textAlign = 'center';
            this.addChild(this.label);
            this.label.setScaleXY(1 / this.scaleX);
        }
        if (text) {
            this.label.text = text;
        }
        else if (this.text) {
            this.label.text = this.text;
        }
        this.label.visible = true;
    }
    hideLabel() {
        if (!this.label) {
            return;
        }
        this.label.visible = false;
    }
    showLineDash() {
        this.lineDashFlag = true;
        if (this.arrow) {
            this.arrow.visible = true;
        }
        else {
            this.arrow = new MySprite(this.ctx);
            this.arrow.load('assets/common/arrow.png', 1, 0);
            this.arrow.setScaleXY(0.06);
        }
        this.showLabel();
    }
    hideLineDash() {
        this.lineDashFlag = false;
        if (this.arrow) {
            this.arrow.visible = false;
        }
        this.hideLabel();
    }
    drawArrow() {
        if (!this.arrow) {
            return;
        }
        const rect = this.getBoundingBox();
        this.arrow.x = rect.x + rect.width;
        this.arrow.y = rect.y;
        this.arrow.update();
    }
    drawFrame() {
        this.ctx.save();
        const rect = this.getBoundingBox();
        const w = rect.width;
        const h = rect.height;
        const x = rect.x + w / 2;
        const y = rect.y + h / 2;
        this.ctx.setLineDash([5, 5]);
        this.ctx.lineWidth = 2;
        this.ctx.strokeStyle = '#1bfff7';
        // this.ctx.fillStyle = '#ffffff';
        this.ctx.beginPath();
        this.ctx.moveTo(x - w / 2, y - h / 2);
        this.ctx.lineTo(x + w / 2, y - h / 2);
        this.ctx.lineTo(x + w / 2, y + h / 2);
        this.ctx.lineTo(x - w / 2, y + h / 2);
        this.ctx.lineTo(x - w / 2, y - h / 2);
        // this.ctx.fill();
        this.ctx.stroke();
        this.ctx.restore();
    }
    draw() {
        super.draw();
        if (this.lineDashFlag) {
            this.drawFrame();
            this.drawArrow();
        }
    }
}
//
//
// import TWEEN from '@tweenjs/tween.js';
//
//
// class Sprite {
//   x = 0;
//   y = 0;
//   color = '';
//   radius = 0;
//   alive = false;
//   margin = 0;
//   angle = 0;
//   ctx;
//
//   constructor(ctx) {
//     this.ctx = ctx;
//   }
//   update($event) {
//     this.draw();
//   }
//   draw() {
//
//   }
//
// }
//
//
//
//
//
// export class MySprite extends Sprite {
//
//   width = 0;
//   height = 0;
//   _anchorX = 0;
//   _anchorY = 0;
//   _offX = 0;
//   _offY = 0;
//   scaleX = 1;
//   scaleY = 1;
//   alpha = 1;
//   rotation = 0;
//   visible = true;
//
//   children = [this];
//
//   img;
//   _z = 0;
//
//
//   init(imgObj = null, anchorX:number = 0.5, anchorY:number = 0.5) {
//
//     if (imgObj) {
//
//       this.img = imgObj;
//
//       this.width = this.img.width;
//       this.height = this.img.height;
//     }
//
//     this.anchorX = anchorX;
//     this.anchorY = anchorY;
//   }
//
//
//
//   update($event = null) {
//     if (this.visible) {
//       this.draw();
//     }
//   }
//   draw() {
//
//     this.ctx.save();
//
//     this.drawInit();
//
//     this.updateChildren();
//
//     this.ctx.restore();
//   }
//
//   drawInit() {
//
//     this.ctx.translate(this.x, this.y);
//
//     this.ctx.rotate(this.rotation * Math.PI / 180);
//
//     this.ctx.scale(this.scaleX, this.scaleY);
//
//     this.ctx.globalAlpha = this.alpha;
//
//   }
//
//   drawSelf() {
//     if (this.img) {
//       this.ctx.drawImage(this.img, this._offX, this._offY);
//     }
//   }
//
//   updateChildren() {
//
//     if (this.children.length <= 0) { return; }
//
//     for (let i = 0; i < this.children.length; i++) {
//
//       if (this.children[i] === this) {
//
//         this.drawSelf();
//       } else {
//
//         this.children[i].update();
//       }
//     }
//   }
//
//
//   load(url, anchorX = 0.5, anchorY = 0.5) {
//
//     return new Promise((resolve, reject) => {
//       const img = new Image();
//       img.onload = () => resolve(img);
//       img.onerror = reject;
//       img.src = url;
//     }).then(img => {
//
//       this.init(img, anchorX, anchorY);
//       return img;
//     });
//   }
//
//   addChild(child, z = 1) {
//     if (this.children.indexOf(child) === -1) {
//       this.children.push(child);
//       child._z = z;
//       child.parent = this;
//     }
//
//     this.children.sort((a, b) => {
//       return a._z - b._z;
//     });
//
//   }
//   removeChild(child) {
//     const index = this.children.indexOf(child);
//     if (index !== -1) {
//       this.children.splice(index, 1);
//     }
//   }
//
//   set anchorX(value) {
//     this._anchorX = value;
//     this.refreshAnchorOff();
//   }
//   get anchorX() {
//     return this._anchorX;
//   }
//   set anchorY(value) {
//     this._anchorY = value;
//     this.refreshAnchorOff();
//   }
//   get anchorY() {
//     return this._anchorY;
//   }
//   refreshAnchorOff() {
//     this._offX = -this.width * this.anchorX;
//     this._offY = -this.height * this.anchorY;
//   }
//
//   setScaleXY(value) {
//     this.scaleX = this.scaleY = value;
//   }
//
//   getBoundingBox() {
//
//     const x = this.x + this._offX * this.scaleX;
//     const y = this.y + this._offY * this.scaleY;
//     const width = this.width * this.scaleX;
//     const height = this.height * this.scaleY;
//
//     return {x, y, width, height};
//   }
//
// }
//
//
//
//
//
// export class Item extends MySprite {
//
//   baseX;
//
//   move(targetY, callBack) {
//
//     const self = this;
//
//     const tween = new TWEEN.Tween(this)
//       .to({ y: targetY }, 2500)
//       .easing(TWEEN.Easing.Quintic.Out)
//       .onComplete(function() {
//
//         self.hide(callBack);
//         // if (callBack) {
//         //   callBack();
//         // }
//       })
//       .start();
//
//   }
//
//   show(callBack = null) {
//
//     const tween = new TWEEN.Tween(this)
//       .to({ alpha: 1 }, 800)
//       // .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth.
//       .onComplete(function() {
//         if (callBack) {
//           callBack();
//         }
//       })
//       .start(); // Start the tween immediately.
//
//   }
//
//   hide(callBack = null) {
//
//     const tween = new TWEEN.Tween(this)
//       .to({ alpha: 0 }, 800)
//       // .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth.
//       .onComplete(function() {
//         if (callBack) {
//           callBack();
//         }
//       })
//       .start(); // Start the tween immediately.
//   }
//
//
//   shake(id) {
//
//
//     if (!this.baseX) {
//       this.baseX = this.x;
//     }
//
//     const baseX = this.baseX;
//     const baseTime = 50;
//     const sequence = [
//       {target: {x: baseX + 40 * id}, time: baseTime - 25},
//       {target: {x: baseX - 20 * id}, time: baseTime},
//       {target: {x: baseX + 10 * id}, time: baseTime},
//       {target: {x: baseX - 5 * id}, time: baseTime},
//       {target: {x: baseX + 2 * id}, time: baseTime},
//       {target: {x: baseX - 1 * id}, time: baseTime},
//       {target: {x: baseX}, time: baseTime},
//
//     ];
//
//
//     const self = this;
//
//     function runSequence() {
//
//       if (self['shakeTween']) {
//         self['shakeTween'].stop();
//       }
//
//       const tween = new TWEEN.Tween(self);
//
//       if (sequence.length > 0) {
//         // console.log('sequence.length: ', sequence.length);
//         const action = sequence.shift();
//         tween.to(action['target'], action['time']);
//         tween.onComplete( () => {
//           runSequence();
//         });
//         tween.start();
//
//         self['shakeTween'] = tween;
//       }
//     }
//
//     runSequence();
//
//   }
//
//
//
//   drop(targetY, callBack = null) {
//
//     const self = this;
//
//     const time = Math.abs(targetY - this.y) * 2.4;
//
//     this.alpha = 1;
//
//     const tween = new TWEEN.Tween(this)
//       .to({ y: targetY }, time)
//       .easing(TWEEN.Easing.Cubic.In)
//       .onComplete(function() {
//
//         // self.hideItem(callBack);
//         if (callBack) {
//           callBack();
//         }
//       })
//       .start();
//
//
//   }
//
//
// }
//
//
// export class EndSpr extends MySprite {
//
//   show(s) {
//
//     this.scaleX = this.scaleY = 0;
//     this.alpha = 0;
//
//     const tween = new TWEEN.Tween(this)
//       .to({ alpha: 1, scaleX: s, scaleY: s }, 800)
//       .easing(TWEEN.Easing.Elastic.Out) // Use an easing function to make the animation smooth.
//       .onComplete(function() {
//
//       })
//       .start(); // Start the tween immediately.
//
//   }
// }
//
//
//
// export class ShapeRect extends MySprite {
//
//   fillColor = '#FF0000';
//
//   setSize(w, h) {
//     this.width = w;
//     this.height = h;
//
//     console.log('w:', w);
//     console.log('h:', h);
//   }
//
//   drawShape() {
//
//     this.ctx.fillStyle = this.fillColor;
//     this.ctx.fillRect(this._offX, this._offY, this.width, this.height);
//
//   }
//
//
//   drawSelf() {
//     super.drawSelf();
//     this.drawShape();
//   }
// }
//
//
// export class HotZoneItem extends MySprite {
//
//
//   lineDashFlag = false;
//   arrow: MySprite;
//   label: Label;
//   title;
//
//   arrowTop;
//   arrowRight;
//
//   audio_url;
//   pic_url;
//   text;
//   private _itemType;
//   private shapeRect: ShapeRect;
//
//   get itemType() {
//     return this._itemType;
//   }
//   set itemType(value) {
//     this._itemType = value;
//   }
//
//   setSize(w, h) {
//     this.width = w;
//     this.height = h;
//
//
//     const rect = new ShapeRect(this.ctx);
//     rect.x = -w / 2;
//     rect.y = -h / 2;
//     rect.setSize(w, h);
//     rect.fillColor = '#ffffff';
//     rect.alpha = 0.2;
//     this.addChild(rect);
//   }
//
//   showLabel(text = null) {
//
//
//     if (!this.label) {
//       this.label = new Label(this.ctx);
//       this.label.anchorY = 0;
//       this.label.fontSize = '40px';
//       this.label.textAlign = 'center';
//       this.addChild(this.label);
//       // this.label.scaleX = 1 / this.scaleX;
//       // this.label.scaleY = 1 / this.scaleY;
//
//       this.refreshLabelScale();
//
//     }
//
//     if (text) {
//       this.label.text = text;
//     } else if (this.title) {
//       this.label.text = this.title;
//     }
//     this.label.visible = true;
//
//   }
//
//   hideLabel() {
//     if (!this.label) { return; }
//
//     this.label.visible = false;
//   }
//
//   refreshLabelScale() {
//     if (this.scaleX == this.scaleY) {
//       this.label.setScaleXY(1);
//     }
//
//     if (this.scaleX > this.scaleY) {
//       this.label.scaleX = this.scaleY / this.scaleX;
//     } else {
//       this.label.scaleY = this.scaleX / this.scaleY;
//     }
//   }
//
//   showLineDash() {
//     this.lineDashFlag = true;
//
//     if (this.arrow) {
//       this.arrow.visible = true;
//     } else {
//       this.arrow = new MySprite(this.ctx);
//       this.arrow.load('assets/common/arrow.png', 1, 0);
//       this.arrow.setScaleXY(0.06);
//
//       this.arrowTop = new MySprite(this.ctx);
//       this.arrowTop.load('assets/common/arrow_top.png', 0.5, 0);
//       this.arrowTop.setScaleXY(0.06);
//
//       this.arrowRight = new MySprite(this.ctx);
//       this.arrowRight.load('assets/common/arrow_right.png', 1, 0.5);
//       this.arrowRight.setScaleXY(0.06);
//     }
//
//     this.showLabel();
//   }
//
//   hideLineDash() {
//
//     this.lineDashFlag = false;
//
//     if (this.arrow) {
//       this.arrow.visible = false;
//     }
//
//     this.hideLabel();
//   }
//
//
//
//   drawArrow() {
//     if (!this.arrow) { return; }
//
//     const rect = this.getBoundingBox();
//     this.arrow.x = rect.x + rect.width;
//     this.arrow.y = rect.y;
//
//     this.arrow.update();
//
//
//     this.arrowTop.x = rect.x + rect.width / 2;
//     this.arrowTop.y = rect.y;
//     this.arrowTop.update();
//
//     this.arrowRight.x = rect.x + rect.width;
//     this.arrowRight.y = rect.y + rect.height / 2;
//     this.arrowRight.update();
//   }
//
//   drawFrame() {
//
//
//     this.ctx.save();
//
//
//     const rect = this.getBoundingBox();
//
//     const w = rect.width;
//     const h = rect.height;
//     const x = rect.x + w / 2;
//     const y = rect.y + h / 2;
//
//     this.ctx.setLineDash([5, 5]);
//     this.ctx.lineWidth = 2;
//     this.ctx.strokeStyle = '#1bfff7';
//     // this.ctx.fillStyle = '#ffffff';
//
//     this.ctx.beginPath();
//
//     this.ctx.moveTo( x - w / 2, y - h / 2);
//
//     this.ctx.lineTo(x + w / 2, y - h / 2);
//
//     this.ctx.lineTo(x + w / 2, y + h / 2);
//
//     this.ctx.lineTo(x - w / 2, y + h / 2);
//
//     this.ctx.lineTo(x - w / 2, y - h / 2);
//
//     // this.ctx.fill();
//     this.ctx.stroke();
//
//
//
//
//     this.ctx.restore();
//
//   }
//
//   draw() {
//     super.draw();
//
//     if (this.lineDashFlag) {
//       this.drawFrame();
//       this.drawArrow();
//     }
//   }
// }
//
//
// export class EditorItem extends MySprite {
//
//   lineDashFlag = false;
//   arrow: MySprite;
//   label:Label;
//   text;
//
//   showLabel(text = null) {
//
//
//     if (!this.label) {
//       this.label = new Label(this.ctx);
//       this.label.anchorY = 0;
//       this.label.fontSize = '50px';
//       this.label.textAlign = 'center';
//       this.addChild(this.label);
//       this.label.setScaleXY(1 / this.scaleX);
//     }
//
//     if (text) {
//       this.label.text = text;
//     } else if (this.text) {
//       this.label.text = this.text;
//     }
//     this.label.visible = true;
//
//   }
//
//   hideLabel() {
//     if (!this.label) { return; }
//
//     this.label.visible = false;
//   }
//
//   showLineDash() {
//     this.lineDashFlag = true;
//
//     if (this.arrow) {
//       this.arrow.visible = true;
//     } else {
//       this.arrow = new MySprite(this.ctx);
//       this.arrow.load('assets/common/arrow.png', 1, 0);
//       this.arrow.setScaleXY(0.06);
//
//     }
//
//     this.showLabel();
//   }
//
//   hideLineDash() {
//
//     this.lineDashFlag = false;
//
//     if (this.arrow) {
//       this.arrow.visible = false;
//     }
//
//     this.hideLabel();
//   }
//
//
//
//   drawArrow() {
//     if (!this.arrow) { return; }
//
//     const rect = this.getBoundingBox();
//     this.arrow.x = rect.x + rect.width;
//     this.arrow.y = rect.y;
//
//     this.arrow.update();
//   }
//
//   drawFrame() {
//
//
//     this.ctx.save();
//
//
//     const rect = this.getBoundingBox();
//
//     const w = rect.width;
//     const h = rect.height;
//     const x = rect.x + w / 2;
//     const y = rect.y + h / 2;
//
//     this.ctx.setLineDash([5, 5]);
//     this.ctx.lineWidth = 2;
//     this.ctx.strokeStyle = '#1bfff7';
//     // this.ctx.fillStyle = '#ffffff';
//
//     this.ctx.beginPath();
//
//     this.ctx.moveTo( x - w / 2, y - h / 2);
//
//     this.ctx.lineTo(x + w / 2, y - h / 2);
//
//     this.ctx.lineTo(x + w / 2, y + h / 2);
//
//     this.ctx.lineTo(x - w / 2, y + h / 2);
//
//     this.ctx.lineTo(x - w / 2, y - h / 2);
//
//     // this.ctx.fill();
//     this.ctx.stroke();
//
//
//
//
//     this.ctx.restore();
//
//   }
//
//   draw() {
//     super.draw();
//
//     if (this.lineDashFlag) {
//       this.drawFrame();
//       this.drawArrow();
//     }
//   }
// }
//
//
//
// export class Label extends MySprite {
//
//   text:String;
//   fontSize:String = '40px';
//   fontName:String = 'Verdana';
//   textAlign:String = 'left';
//
//
//   constructor(ctx) {
//     super(ctx);
//     this.init();
//   }
//
//   drawText() {
//
//     // console.log('in drawText', this.text);
//
//     if (!this.text) { return; }
//
//     this.ctx.font = `${this.fontSize} ${this.fontName}`;
//     this.ctx.textAlign = this.textAlign;
//     this.ctx.textBaseline = 'middle';
//     this.ctx.fontWeight = 900;
//
//     this.ctx.lineWidth = 5;
//     this.ctx.strokeStyle = '#ffffff';
//     this.ctx.strokeText(this.text, 0, 0);
//
//     this.ctx.fillStyle = '#000000';
//     this.ctx.fillText(this.text, 0, 0);
//
//
//   }
//
//
//   drawSelf() {
//     super.drawSelf();
//     this.drawText();
//   }
//
// }
//
//
//
// export function getPosByAngle(angle, len) {
//
//   const radian = angle * Math.PI / 180;
//   const x = Math.sin(radian) * len;
//   const y = Math.cos(radian) * len;
//
//   return {x, y};
//
// }
//
// export function getAngleByPos(px, py, mx, my) {
//
//   // const _x = p2x - p1x;
//   // const _y = p2y - p1y;
//   // const tan = _y / _x;
//   //
//   // const radina = Math.atan(tan); // 用反三角函数求弧度
//   // const angle = Math.floor(180 / (Math.PI / radina)); //
//   //
//   // console.log('r: ' , angle);
//   // return angle;
//   //
//
//
//
//   const x = Math.abs(px - mx);
//   const y = Math.abs(py - my);
//   // const x = Math.abs(mx - px);
//   // const y = Math.abs(my - py);
//   const z = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));
//   const cos = y / z;
//   const radina = Math.acos(cos); // 用反三角函数求弧度
//   let angle = Math.floor(180 / (Math.PI / radina) * 100) / 100; // 将弧度转换成角度
//
//   if(mx > px && my > py) {// 鼠标在第四象限
//     angle = 180 - angle;
//   }
//
//   if(mx === px && my > py) {// 鼠标在y轴负方向上
//     angle = 180;
//   }
//
//   if(mx > px && my === py) {// 鼠标在x轴正方向上
//     angle = 90;
//   }
//
//   if(mx < px && my > py) {// 鼠标在第三象限
//     angle = 180 + angle;
//   }
//
//   if(mx < px && my === py) {// 鼠标在x轴负方向
//     angle = 270;
//   }
//
//   if(mx < px && my < py) {// 鼠标在第二象限
//     angle = 360 - angle;
//   }
//
//   // console.log('angle: ', angle);
//   return angle;
//
// }



/***/ }),

/***/ "./src/app/common/custom-hot-zone/custom-hot-zone.component.ts":
/*!*********************************************************************!*\
  !*** ./src/app/common/custom-hot-zone/custom-hot-zone.component.ts ***!
  \*********************************************************************/
/*! exports provided: CustomHotZoneComponent */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "CustomHotZoneComponent", function() { return CustomHotZoneComponent; });
/* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @angular/core */ "./node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js");
/* harmony import */ var rxjs__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! rxjs */ "./node_modules/rxjs/_esm2015/index.js");
/* harmony import */ var rxjs_operators__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! rxjs/operators */ "./node_modules/rxjs/_esm2015/operators/index.js");
/* harmony import */ var _Unit__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./Unit */ "./src/app/common/custom-hot-zone/Unit.ts");
/* harmony import */ var _tweenjs_tween_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @tweenjs/tween.js */ "./node_modules/@tweenjs/tween.js/dist/tween.esm.js");
/* harmony import */ var _play_Unit__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../play/Unit */ "./src/app/play/Unit.ts");
/* harmony import */ var ng_zorro_antd_grid__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ng-zorro-antd/grid */ "./node_modules/ng-zorro-antd/__ivy_ngcc__/fesm2015/ng-zorro-antd-grid.js");
/* harmony import */ var _upload_image_with_preview_upload_image_with_preview_component__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../upload-image-with-preview/upload-image-with-preview.component */ "./src/app/common/upload-image-with-preview/upload-image-with-preview.component.ts");
/* harmony import */ var _angular_common__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @angular/common */ "./node_modules/@angular/common/__ivy_ngcc__/fesm2015/common.js");
/* harmony import */ var ng_zorro_antd_button__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ng-zorro-antd/button */ "./node_modules/ng-zorro-antd/__ivy_ngcc__/fesm2015/ng-zorro-antd-button.js");
/* harmony import */ var ng_zorro_antd_icon__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ng-zorro-antd/icon */ "./node_modules/ng-zorro-antd/__ivy_ngcc__/fesm2015/ng-zorro-antd-icon.js");
/* harmony import */ var ng_zorro_antd_divider__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ng-zorro-antd/divider */ "./node_modules/ng-zorro-antd/__ivy_ngcc__/fesm2015/ng-zorro-antd-divider.js");
/* harmony import */ var ng_zorro_antd_radio__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ng-zorro-antd/radio */ "./node_modules/ng-zorro-antd/__ivy_ngcc__/fesm2015/ng-zorro-antd-radio.js");
/* harmony import */ var _angular_forms__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! @angular/forms */ "./node_modules/@angular/forms/__ivy_ngcc__/fesm2015/forms.js");
/* harmony import */ var _audio_recorder_audio_recorder_component__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ../audio-recorder/audio-recorder.component */ "./src/app/common/audio-recorder/audio-recorder.component.ts");
/* harmony import */ var ng_zorro_antd_input__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ng-zorro-antd/input */ "./node_modules/ng-zorro-antd/__ivy_ngcc__/fesm2015/ng-zorro-antd-input.js");

















const _c0 = ["canvas"];
const _c1 = ["wrap"];
function CustomHotZoneComponent_div_13_label_9_Template(rf, ctx) {
    if (rf & 1) {
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](0, "label", 30);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtext"](1, "\u77E9\u5F62");
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
    }
}
function CustomHotZoneComponent_div_13_label_10_Template(rf, ctx) {
    if (rf & 1) {
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](0, "label", 31);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtext"](1, "\u56FE\u7247");
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
    }
}
function CustomHotZoneComponent_div_13_label_11_Template(rf, ctx) {
    if (rf & 1) {
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](0, "label", 32);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtext"](1, "\u6587\u672C");
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
    }
}
function CustomHotZoneComponent_div_13_div_12_Template(rf, ctx) {
    if (rf & 1) {
        const _r58 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵgetCurrentView"]();
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](0, "div");
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](1, "app-upload-image-with-preview", 9);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵlistener"]("imageUploaded", function CustomHotZoneComponent_div_13_div_12_Template_app_upload_image_with_preview_imageUploaded_1_listener($event) { _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵrestoreView"](_r58); const it_r50 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵnextContext"]().$implicit; const ctx_r57 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵnextContext"](); return ctx_r57.onItemImgUploadSuccess($event, it_r50); });
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
    }
    if (rf & 2) {
        const it_r50 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵnextContext"]().$implicit;
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](1);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("picUrl", it_r50 == null ? null : it_r50.pic_url);
    }
}
function CustomHotZoneComponent_div_13_div_13_Template(rf, ctx) {
    if (rf & 1) {
        const _r63 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵgetCurrentView"]();
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](0, "div");
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](1, "input", 33);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵlistener"]("ngModelChange", function CustomHotZoneComponent_div_13_div_13_Template_input_ngModelChange_1_listener($event) { _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵrestoreView"](_r63); const it_r50 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵnextContext"]().$implicit; return it_r50.text = $event; })("blur", function CustomHotZoneComponent_div_13_div_13_Template_input_blur_1_listener() { _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵrestoreView"](_r63); const it_r50 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵnextContext"]().$implicit; const ctx_r64 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵnextContext"](); return ctx_r64.saveText(it_r50); });
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
    }
    if (rf & 2) {
        const it_r50 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵnextContext"]().$implicit;
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](1);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("ngModel", it_r50.text);
    }
}
function CustomHotZoneComponent_div_13_Template(rf, ctx) {
    if (rf & 1) {
        const _r68 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵgetCurrentView"]();
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](0, "div", 17);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](1, "div", 18);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](2, "span", 19);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtext"](3);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](4, "button", 20);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵlistener"]("click", function CustomHotZoneComponent_div_13_Template_button_click_4_listener() { _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵrestoreView"](_r68); const i_r51 = ctx.index; const ctx_r67 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵnextContext"](); return ctx_r67.deleteBtnClick(i_r51); });
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtext"](5, " X ");
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelement"](6, "nz-divider", 21);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](7, "div", 22);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](8, "nz-radio-group", 23);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵlistener"]("ngModelChange", function CustomHotZoneComponent_div_13_Template_nz_radio_group_ngModelChange_8_listener($event) { _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵrestoreView"](_r68); const it_r50 = ctx.$implicit; const ctx_r69 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵnextContext"](); return ctx_r69.radioChange($event, it_r50); });
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtemplate"](9, CustomHotZoneComponent_div_13_label_9_Template, 2, 0, "label", 24);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtemplate"](10, CustomHotZoneComponent_div_13_label_10_Template, 2, 0, "label", 25);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtemplate"](11, CustomHotZoneComponent_div_13_label_11_Template, 2, 0, "label", 26);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtemplate"](12, CustomHotZoneComponent_div_13_div_12_Template, 2, 1, "div", 27);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtemplate"](13, CustomHotZoneComponent_div_13_div_13_Template, 2, 1, "div", 27);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](14, "div", 28);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](15, "app-audio-recorder", 29);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵlistener"]("audioUploaded", function CustomHotZoneComponent_div_13_Template_app_audio_recorder_audioUploaded_15_listener($event) { _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵrestoreView"](_r68); const it_r50 = ctx.$implicit; const ctx_r70 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵnextContext"](); return ctx_r70.onItemAudioUploadSuccess($event, it_r50); });
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
    }
    if (rf & 2) {
        const it_r50 = ctx.$implicit;
        const i_r51 = ctx.index;
        const ctx_r49 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵnextContext"]();
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](3);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtextInterpolate1"](" item-", i_r51 + 1, " ");
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](5);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("ngModel", it_r50.itemType);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](1);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("ngIf", ctx_r49.isHasRect);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](1);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("ngIf", ctx_r49.isHasPic);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](1);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("ngIf", ctx_r49.isHasText);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](1);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("ngIf", it_r50.itemType == "pic");
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](1);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("ngIf", it_r50.itemType == "text");
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](2);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("audioUrl", it_r50.audio_url);
    }
}
let CustomHotZoneComponent = /*@__PURE__*/ (() => {
    class CustomHotZoneComponent {
        constructor() {
            this.imgItemArr = null;
            this.hotZoneItemArr = null;
            this.hotZoneArr = null;
            this.save = new _angular_core__WEBPACK_IMPORTED_MODULE_0__["EventEmitter"]();
            this.isHasRect = true;
            this.isHasPic = true;
            this.isHasText = true;
            this.hotZoneFontObj = {
                size: 50,
                name: 'BRLNSR_1',
                color: '#8f3758'
            };
            this.defaultItemType = 'text';
            this.hotZoneImgSize = 190;
            this.saveDisabled = true;
            this.canvasWidth = 1280;
            this.canvasHeight = 720;
            this.canvasBaseW = 1280;
            // @HostListener('window:resize', ['$event'])
            this.canvasBaseH = 720;
            this.mapScale = 1;
            // 声音
            this.bgAudio = new Audio();
            this.images = new Map();
            // 资源
            // rawImages = new Map(res);
            this.winResizeEventStream = new rxjs__WEBPACK_IMPORTED_MODULE_1__["Subject"]();
            this.imgArr = [];
            this.changeSizeFlag = false;
            this.changeTopSizeFlag = false;
            this.changeRightSizeFlag = false;
            this._bgItem = null;
        }
        get bgItem() {
            return this._bgItem;
        }
        set bgItem(v) {
            this._bgItem = v;
            this.init();
        }
        onResize(event) {
            this.winResizeEventStream.next();
        }
        ngOnInit() {
            this.initListener();
            // this.init();
            this.update();
        }
        ngOnDestroy() {
            window.cancelAnimationFrame(this.animationId);
        }
        ngOnChanges() {
        }
        onBackgroundUploadSuccess(e) {
            console.log('e: ', e);
            this.bgItem.url = e.url;
            this.refreshBackground();
        }
        onItemImgUploadSuccess(e, item) {
            item.pic_url = e.url;
            this.loadHotZonePic(item.pic, e.url);
        }
        onItemAudioUploadSuccess(e, item) {
            item.audio_url = e.url;
        }
        refreshBackground(callBack = null) {
            if (!this.bg) {
                this.bg = new _Unit__WEBPACK_IMPORTED_MODULE_3__["MySprite"](this.ctx);
                this.renderArr.push(this.bg);
            }
            const bg = this.bg;
            if (this.bgItem.url) {
                bg.load(this.bgItem.url).then(() => {
                    const rate1 = this.canvasWidth / bg.width;
                    const rate2 = this.canvasHeight / bg.height;
                    const rate = Math.min(rate1, rate2);
                    bg.setScaleXY(rate);
                    bg.x = this.canvasWidth / 2;
                    bg.y = this.canvasHeight / 2;
                    if (callBack) {
                        callBack();
                    }
                });
            }
        }
        addBtnClick() {
            // this.imgArr.push({});
            // this.hotZoneArr.push({});
            const item = this.getHotZoneItem();
            this.hotZoneArr.push(item);
            this.refreshItem(item);
            this.refreshHotZoneId();
        }
        deleteBtnClick(index) {
            const item = this.hotZoneArr.splice(index, 1)[0];
            Object(_Unit__WEBPACK_IMPORTED_MODULE_3__["removeItemFromArr"])(this.renderArr, item.pic);
            Object(_Unit__WEBPACK_IMPORTED_MODULE_3__["removeItemFromArr"])(this.renderArr, item.textLabel);
            this.refreshHotZoneId();
        }
        onImgUploadSuccessByImg(e, img) {
            img.pic_url = e.url;
            this.refreshImage(img);
        }
        refreshImage(img) {
            this.hideAllLineDash();
            img.picItem = this.getPicItem(img);
            this.refreshImageId();
        }
        refreshHotZoneId() {
            for (let i = 0; i < this.hotZoneArr.length; i++) {
                this.hotZoneArr[i].index = i;
                if (this.hotZoneArr[i]) {
                    this.hotZoneArr[i].title = 'item-' + (i + 1);
                }
            }
        }
        refreshImageId() {
            for (let i = 0; i < this.imgArr.length; i++) {
                this.imgArr[i].id = i;
                if (this.imgArr[i].picItem) {
                    this.imgArr[i].picItem.text = 'Image-' + (i + 1);
                }
            }
        }
        getHotZoneItem(saveData = null) {
            const itemW = 200;
            const itemH = 200;
            const item = new _Unit__WEBPACK_IMPORTED_MODULE_3__["HotZoneItem"](this.ctx);
            item.setSize(itemW, itemH);
            item.anchorX = 0.5;
            item.anchorY = 0.5;
            item.x = this.canvasWidth / 2;
            item.y = this.canvasHeight / 2;
            item.itemType = this.defaultItemType;
            if (saveData) {
                const saveRect = saveData.rect;
                item.scaleX = saveRect.width / item.width;
                item.scaleY = saveRect.height / item.height;
                item.x = saveRect.x + saveRect.width / 2;
                item.y = saveRect.y + saveRect.height / 2;
            }
            item.showLineDash();
            const pic = new _Unit__WEBPACK_IMPORTED_MODULE_3__["HotZoneImg"](this.ctx);
            pic.visible = false;
            item['pic'] = pic;
            if (saveData && saveData.pic_url) {
                this.loadHotZonePic(pic, saveData.pic_url);
            }
            pic.x = item.x;
            pic.y = item.y;
            this.renderArr.push(pic);
            const textLabel = new _Unit__WEBPACK_IMPORTED_MODULE_3__["HotZoneLabel"](this.ctx);
            textLabel.fontSize = this.hotZoneFontObj.size;
            textLabel.fontName = this.hotZoneFontObj.name;
            textLabel.fontColor = this.hotZoneFontObj.color;
            textLabel.textAlign = 'center';
            // textLabel.setOutline();
            // console.log('saveData:', saveData);
            item['textLabel'] = textLabel;
            textLabel.setScaleXY(this.mapScale);
            if (saveData && saveData.text) {
                textLabel.text = saveData.text;
                textLabel.refreshSize();
            }
            textLabel.x = item.x;
            textLabel.y = item.y;
            this.renderArr.push(textLabel);
            return item;
        }
        getPicItem(img, saveData = null) {
            const item = new _Unit__WEBPACK_IMPORTED_MODULE_3__["EditorItem"](this.ctx);
            item.load(img.pic_url).then(img => {
                let maxW, maxH;
                if (this.bg) {
                    maxW = this.bg.width * this.bg.scaleX;
                    maxH = this.bg.height * this.bg.scaleY;
                }
                else {
                    maxW = this.canvasWidth;
                    maxH = this.canvasHeight;
                }
                let scaleX = maxW / 3 / item.width;
                let scaleY = maxH / 3 / item.height;
                if (item.height * scaleX < this.canvasHeight) {
                    item.setScaleXY(scaleX);
                }
                else {
                    item.setScaleXY(scaleY);
                }
                item.x = this.canvasWidth / 2;
                item.y = this.canvasHeight / 2;
                if (saveData) {
                    const saveRect = saveData.rect;
                    item.setScaleXY(saveRect.width / item.width);
                    item.x = saveRect.x + saveRect.width / 2;
                    item.y = saveRect.y + saveRect.height / 2;
                }
                else {
                    item.showLineDash();
                }
            });
            return item;
        }
        onAudioUploadSuccessByImg(e, img) {
            img.audio_url = e.url;
        }
        deleteItem(e, i) {
            // this.imgArr.splice(i , 1);
            // this.refreshImageId();
            this.hotZoneArr.splice(i, 1);
            this.refreshHotZoneId();
        }
        radioChange(e, item) {
            item.itemType = e;
            this.refreshItem(item);
            // console.log(' in radioChange e: ', e);
        }
        refreshItem(item) {
            switch (item.itemType) {
                case 'rect':
                    this.setRectState(item);
                    break;
                case 'pic':
                    this.setPicState(item);
                    break;
                case 'text':
                    this.setTextState(item);
                    break;
                default:
            }
        }
        init() {
            this.initData();
            this.initCtx();
            this.initItem();
        }
        initItem() {
            if (!this.bgItem) {
                this.bgItem = {};
            }
            else {
                this.refreshBackground(() => {
                    // if (!this.imgItemArr) {
                    //   this.imgItemArr = [];
                    // } else {
                    //   this.initImgArr();
                    // }
                    // console.log('aaaaa');
                    if (!this.hotZoneItemArr) {
                        this.hotZoneItemArr = [];
                    }
                    else {
                        this.initHotZoneArr();
                    }
                });
            }
        }
        initHotZoneArr() {
            // console.log('this.hotZoneArr: ', this.hotZoneArr);
            let curBgRect;
            if (this.bg) {
                curBgRect = this.bg.getBoundingBox();
            }
            else {
                curBgRect = { x: 0, y: 0, width: this.canvasWidth, height: this.canvasHeight };
            }
            let oldBgRect = this.bgItem.rect;
            if (!oldBgRect) {
                oldBgRect = curBgRect;
            }
            const rate = curBgRect.width / oldBgRect.width;
            console.log('rate: ', rate);
            this.hotZoneArr = [];
            const arr = this.hotZoneItemArr.concat();
            for (let i = 0; i < arr.length; i++) {
                const data = JSON.parse(JSON.stringify(arr[i]));
                // const img = {pic_url: data.pic_url};
                data.rect.x *= rate;
                data.rect.y *= rate;
                data.rect.width *= rate;
                data.rect.height *= rate;
                data.rect.x += curBgRect.x;
                data.rect.y += curBgRect.y;
                // img['picItem'] = this.getPicItem(img, data);
                // img['audio_url'] = arr[i].audio_url;
                // this.imgArr.push(img);
                const item = this.getHotZoneItem(data);
                item.audio_url = data.audio_url;
                item.pic_url = data.pic_url;
                item.text = data.text;
                item.itemType = data.itemType;
                this.refreshItem(item);
                console.log('item: ', item);
                this.hotZoneArr.push(item);
            }
            this.refreshHotZoneId();
            // this.refreshImageId();
        }
        initImgArr() {
            console.log('this.imgItemArr: ', this.imgItemArr);
            let curBgRect;
            if (this.bg) {
                curBgRect = this.bg.getBoundingBox();
            }
            else {
                curBgRect = { x: 0, y: 0, width: this.canvasWidth, height: this.canvasHeight };
            }
            let oldBgRect = this.bgItem.rect;
            if (!oldBgRect) {
                oldBgRect = curBgRect;
            }
            const rate = curBgRect.width / oldBgRect.width;
            console.log('rate: ', rate);
            this.imgArr = [];
            const arr = this.imgItemArr.concat();
            for (let i = 0; i < arr.length; i++) {
                const data = JSON.parse(JSON.stringify(arr[i]));
                const img = { pic_url: data.pic_url };
                data.rect.x *= rate;
                data.rect.y *= rate;
                data.rect.width *= rate;
                data.rect.height *= rate;
                data.rect.x += curBgRect.x;
                data.rect.y += curBgRect.y;
                img['picItem'] = this.getPicItem(img, data);
                img['audio_url'] = arr[i].audio_url;
                this.imgArr.push(img);
            }
            this.refreshImageId();
        }
        initData() {
            this.canvasWidth = this.wrap.nativeElement.clientWidth;
            this.canvasHeight = this.wrap.nativeElement.clientHeight;
            this.mapScale = this.canvasWidth / this.canvasBaseW;
            this.renderArr = [];
            this.bg = null;
            this.imgArr = [];
            this.hotZoneArr = [];
        }
        initCtx() {
            this.ctx = this.canvas.nativeElement.getContext('2d');
            this.canvas.nativeElement.width = this.canvasWidth;
            this.canvas.nativeElement.height = this.canvasHeight;
        }
        mapDown(event) {
            this.oldPos = { x: this.mx, y: this.my };
            for (let i = 0; i < this.hotZoneArr.length; i++) {
                const item = this.hotZoneArr[i];
                let callback;
                let target;
                switch (item.itemType) {
                    case 'rect':
                        target = item;
                        callback = this.clickedHotZoneRect.bind(this);
                        break;
                    case 'pic':
                        target = item.pic;
                        callback = this.clickedHotZonePic.bind(this);
                        break;
                    case 'text':
                        target = item.textLabel;
                        callback = this.clickedHotZoneText.bind(this);
                        break;
                }
                if (this.checkClickTarget(target)) {
                    callback(target);
                    return;
                }
            }
        }
        mapMove(event) {
            if (!this.curItem) {
                return;
            }
            if (this.changeSizeFlag) {
                this.changeSize();
            }
            else if (this.changeTopSizeFlag) {
                this.changeTopSize();
            }
            else if (this.changeRightSizeFlag) {
                this.changeRightSize();
            }
            else {
                const addX = this.mx - this.oldPos.x;
                const addY = this.my - this.oldPos.y;
                this.curItem.x += addX;
                this.curItem.y += addY;
            }
            this.oldPos = { x: this.mx, y: this.my };
            this.saveDisabled = true;
        }
        mapUp(event) {
            this.curItem = null;
            this.changeSizeFlag = false;
            this.changeTopSizeFlag = false;
            this.changeRightSizeFlag = false;
        }
        changeSize() {
            const rect = this.curItem.getBoundingBox();
            let lenW = (this.mx - (rect.x + rect.width / 2)) * 2;
            let lenH = ((rect.y + rect.height / 2) - this.my) * 2;
            let minLen = 20;
            let s;
            if (lenW < lenH) {
                if (lenW < minLen) {
                    lenW = minLen;
                }
                s = lenW / this.curItem.width;
            }
            else {
                if (lenH < minLen) {
                    lenH = minLen;
                }
                s = lenH / this.curItem.height;
            }
            // console.log('s: ', s);
            this.curItem.setScaleXY(s);
            this.curItem.refreshLabelScale();
        }
        changeTopSize() {
            const rect = this.curItem.getBoundingBox();
            // let lenW = ( this.mx - (rect.x + rect.width / 2) ) * 2;
            let lenH = ((rect.y + rect.height / 2) - this.my) * 2;
            let minLen = 20;
            let s;
            // if (lenW < lenH) {
            //   if (lenW < minLen) {
            //     lenW = minLen;
            //   }
            //   s = lenW / this.curItem.width;
            //
            // } else {
            if (lenH < minLen) {
                lenH = minLen;
            }
            s = lenH / this.curItem.height;
            // }
            // console.log('s: ', s);
            this.curItem.scaleY = s;
            this.curItem.refreshLabelScale();
        }
        changeRightSize() {
            const rect = this.curItem.getBoundingBox();
            let lenW = (this.mx - (rect.x + rect.width / 2)) * 2;
            // let lenH = ( (rect.y + rect.height / 2) - this.my ) * 2;
            let minLen = 20;
            let s;
            if (lenW < minLen) {
                lenW = minLen;
            }
            s = lenW / this.curItem.width;
            this.curItem.scaleX = s;
            this.curItem.refreshLabelScale();
        }
        changeItemSize(item) {
            this.curItem = item;
            this.changeSizeFlag = true;
        }
        changeItemTopSize(item) {
            this.curItem = item;
            this.changeTopSizeFlag = true;
        }
        changeItemRightSize(item) {
            this.curItem = item;
            this.changeRightSizeFlag = true;
        }
        changeCurItem(item) {
            this.hideAllLineDash();
            this.curItem = item;
            this.curItem.showLineDash();
        }
        hideAllLineDash() {
            for (let i = 0; i < this.imgArr.length; i++) {
                if (this.imgArr[i].picItem) {
                    this.imgArr[i].picItem.hideLineDash();
                }
            }
        }
        update() {
            if (!this.ctx) {
                return;
            }
            this.animationId = window.requestAnimationFrame(this.update.bind(this));
            // 清除画布内容
            this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
            for (let i = 0; i < this.renderArr.length; i++) {
                this.renderArr[i].update(this);
            }
            // for (let i = 0; i < this.imgArr.length; i++) {
            //   const picItem = this.imgArr[i].picItem;
            //   if (picItem) {
            //     picItem.update(this);
            //   }
            // }
            this.updateArr(this.hotZoneArr);
            this.updatePos();
            _tweenjs_tween_js__WEBPACK_IMPORTED_MODULE_4__["default"].update();
        }
        updateArr(arr) {
            if (arr) {
                for (let i = 0; i < arr.length; i++) {
                    arr[i].update();
                }
            }
        }
        renderAfterResize() {
            this.canvasWidth = this.wrap.nativeElement.clientWidth;
            this.canvasHeight = this.wrap.nativeElement.clientHeight;
            this.init();
        }
        initListener() {
            this.winResizeEventStream
                .pipe(Object(rxjs_operators__WEBPACK_IMPORTED_MODULE_2__["debounceTime"])(500))
                .subscribe(data => {
                this.renderAfterResize();
            });
            if (this.IsPC()) {
                this.canvas.nativeElement.addEventListener('mousedown', (event) => {
                    setMxMyByMouse(event);
                    this.mapDown(event);
                });
                this.canvas.nativeElement.addEventListener('mousemove', (event) => {
                    setMxMyByMouse(event);
                    this.mapMove(event);
                });
                this.canvas.nativeElement.addEventListener('mouseup', (event) => {
                    setMxMyByMouse(event);
                    this.mapUp(event);
                });
                const setMxMyByMouse = (event) => {
                    this.mx = event.offsetX;
                    this.my = event.offsetY;
                };
            }
            else {
                this.canvas.nativeElement.addEventListener('touchstart', (event) => {
                    setMxMyByTouch(event);
                    this.mapDown(event);
                });
                this.canvas.nativeElement.addEventListener('touchmove', (event) => {
                    setMxMyByTouch(event);
                    this.mapMove(event);
                });
                this.canvas.nativeElement.addEventListener('touchend', (event) => {
                    setMxMyByTouch(event);
                    this.mapUp(event);
                });
                this.canvas.nativeElement.addEventListener('touchcancel', (event) => {
                    setMxMyByTouch(event);
                    this.mapUp(event);
                });
                const setMxMyByTouch = (event) => {
                    if (event.touches.length <= 0) {
                        return;
                    }
                    if (this.canvasLeft == null) {
                        setParentOffset();
                    }
                    this.mx = event.touches[0].pageX - this.canvasLeft;
                    this.my = event.touches[0].pageY - this.canvasTop;
                };
                const setParentOffset = () => {
                    const rect = this.canvas.nativeElement.getBoundingClientRect();
                    this.canvasLeft = rect.left;
                    this.canvasTop = rect.top;
                };
            }
        }
        IsPC() {
            if (window['ELECTRON']) {
                return false; // 封装客户端标记
            }
            if (document.body.ontouchstart !== undefined) {
                return false;
            }
            else {
                return true;
            }
        }
        checkClickTarget(target) {
            const rect = target.getBoundingBox();
            if (this.checkPointInRect(this.mx, this.my, rect)) {
                return true;
            }
            return false;
        }
        checkPointInRect(x, y, rect) {
            if (x >= rect.x && x <= rect.x + rect.width) {
                if (y >= rect.y && y <= rect.y + rect.height) {
                    return true;
                }
            }
            return false;
        }
        saveClick() {
            const bgItem = this.bgItem;
            if (this.bg) {
                bgItem['rect'] = this.bg.getBoundingBox();
            }
            else {
                bgItem['rect'] = {
                    x: 0,
                    y: 0,
                    width: Math.round(this.canvasWidth * 100) / 100,
                    height: Math.round(this.canvasHeight * 100) / 100
                };
            }
            const hotZoneItemArr = [];
            const hotZoneArr = this.hotZoneArr;
            for (let i = 0; i < hotZoneArr.length; i++) {
                const hotZoneItem = {
                    index: hotZoneArr[i].index,
                    pic_url: hotZoneArr[i].pic_url,
                    text: hotZoneArr[i].text,
                    audio_url: hotZoneArr[i].audio_url,
                    itemType: hotZoneArr[i].itemType,
                    fontSize: this.hotZoneFontObj.size,
                    fontName: this.hotZoneFontObj.name,
                    fontColor: this.hotZoneFontObj.color,
                    fontScale: hotZoneArr[i].textLabel ? hotZoneArr[i].textLabel.scaleX : 1,
                    imgScale: hotZoneArr[i].pic ? hotZoneArr[i].pic.scaleX : 1,
                    mapScale: this.mapScale
                };
                hotZoneItem['rect'] = hotZoneArr[i].getBoundingBox();
                hotZoneItem['rect'].x = Math.round((hotZoneItem['rect'].x - bgItem['rect'].x) * 100) / 100;
                hotZoneItem['rect'].y = Math.round((hotZoneItem['rect'].y - bgItem['rect'].y) * 100) / 100;
                hotZoneItem['rect'].width = Math.round((hotZoneItem['rect'].width) * 100) / 100;
                hotZoneItem['rect'].height = Math.round((hotZoneItem['rect'].height) * 100) / 100;
                hotZoneItemArr.push(hotZoneItem);
            }
            console.log('hotZoneItemArr: ', hotZoneItemArr);
            this.save.emit({ bgItem, hotZoneItemArr });
        }
        updatePos() {
            this.hotZoneArr.forEach((item) => {
                let x, y;
                switch (item.itemType) {
                    case 'rect':
                        x = item.x;
                        y = item.y;
                        break;
                    case 'pic':
                        x = item.pic.x;
                        y = item.pic.y;
                        break;
                    case 'text':
                        x = item.textLabel.x;
                        y = item.textLabel.y;
                        break;
                }
                item.x = x;
                item.y = y;
                item.pic.x = x;
                item.pic.y = y;
                item.textLabel.x = x;
                item.textLabel.y = y;
            });
        }
        setPicState(item) {
            item.visible = false;
            item.textLabel.visible = false;
            item.pic.visible = true;
        }
        setRectState(item) {
            item.visible = true;
            item.textLabel.visible = false;
            item.pic.visible = false;
        }
        setTextState(item) {
            item.visible = false;
            item.pic.visible = false;
            item.textLabel.visible = true;
        }
        clickedHotZoneRect(item) {
            if (this.checkClickTarget(item)) {
                if (item.lineDashFlag && this.checkClickTarget(item.arrow)) {
                    this.changeItemSize(item);
                }
                else if (item.lineDashFlag && this.checkClickTarget(item.arrowTop)) {
                    this.changeItemTopSize(item);
                }
                else if (item.lineDashFlag && this.checkClickTarget(item.arrowRight)) {
                    this.changeItemRightSize(item);
                }
                else {
                    this.changeCurItem(item);
                }
                return;
            }
        }
        clickedHotZonePic(item) {
            if (this.checkClickTarget(item)) {
                this.curItem = item;
            }
        }
        clickedHotZoneText(item) {
            if (this.checkClickTarget(item)) {
                this.curItem = item;
            }
        }
        saveText(item) {
            item.textLabel.text = item.text;
        }
        loadHotZonePic(pic, url) {
            const baseLen = this.hotZoneImgSize * this.mapScale;
            pic.load(url).then(() => {
                const s = Object(_play_Unit__WEBPACK_IMPORTED_MODULE_5__["getMinScale"])(pic, baseLen);
                pic.setScaleXY(s);
            });
        }
    }
    CustomHotZoneComponent.ɵfac = function CustomHotZoneComponent_Factory(t) { return new (t || CustomHotZoneComponent)(); };
    CustomHotZoneComponent.ɵcmp = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵdefineComponent"]({ type: CustomHotZoneComponent, selectors: [["app-custom-hot-zone"]], viewQuery: function CustomHotZoneComponent_Query(rf, ctx) {
            if (rf & 1) {
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵstaticViewQuery"](_c0, true);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵstaticViewQuery"](_c1, true);
            }
            if (rf & 2) {
                var _t;
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵqueryRefresh"](_t = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵloadQuery"]()) && (ctx.canvas = _t.first);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵqueryRefresh"](_t = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵloadQuery"]()) && (ctx.wrap = _t.first);
            }
        }, inputs: { imgItemArr: "imgItemArr", hotZoneItemArr: "hotZoneItemArr", hotZoneArr: "hotZoneArr", isHasRect: "isHasRect", isHasPic: "isHasPic", isHasText: "isHasText", hotZoneFontObj: "hotZoneFontObj", defaultItemType: "defaultItemType", hotZoneImgSize: "hotZoneImgSize", bgItem: "bgItem" }, outputs: { save: "save" }, features: [_angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵNgOnChangesFeature"]], decls: 26, vars: 3, consts: [[1, "p-image-children-editor"], [2, "margin-left", "2.5%"], [1, "preview-box"], ["wrap", ""], ["id", "canvas"], ["canvas", ""], ["nz-row", "", "nzType", "flex", "nzAlign", "middle"], ["nz-col", "", "nzSpan", "5", "nzOffset", "1"], [1, "bg-box"], [3, "picUrl", "imageUploaded"], ["nz-col", "", "nzSpan", "5", "nzOffset", "1", "class", "img-box", 4, "ngFor", "ngForOf"], ["nz-button", "", "nzType", "dashed", 1, "add-btn", 3, "click"], ["nz-icon", "", "nzType", "plus-circle", "nzTheme", "outline"], [1, "save-box"], ["nz-button", "", "nzType", "primary", "nzShape", "round", 1, "save-btn", 3, "nzSize", "click"], ["nz-icon", "", "nzType", "save"], [2, "opacity", "0", "position", "absolute", "top", "0px", "font-family", "BRLNSR_1"], ["nz-col", "", "nzSpan", "5", "nzOffset", "1", 1, "img-box"], [2, "margin", "auto", "padding", "5px", "margin-top", "30px", "width", "90%", "border", "2px dashed #ddd", "border-radius", "10px"], [2, "margin-left", "40%"], ["nz-button", "", "nzType", "danger", "nzSize", "small", 2, "float", "right", 3, "click"], [2, "margin-top", "10px"], [2, "margin-top", "-20px", "margin-bottom", "5px"], [3, "ngModel", "ngModelChange"], ["nz-radio", "", "nzValue", "rect", 4, "ngIf"], ["nz-radio", "", "nzValue", "pic", 4, "ngIf"], ["nz-radio", "", "nzValue", "text", 4, "ngIf"], [4, "ngIf"], [2, "width", "100%", "margin-top", "5px"], [3, "audioUrl", "audioUploaded"], ["nz-radio", "", "nzValue", "rect"], ["nz-radio", "", "nzValue", "pic"], ["nz-radio", "", "nzValue", "text"], ["type", "text", "nz-input", "", 3, "ngModel", "ngModelChange", "blur"]], template: function CustomHotZoneComponent_Template(rf, ctx) {
            if (rf & 1) {
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](0, "div", 0);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](1, "h5", 1);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtext"](2, " preview: ");
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](3, "div", 2, 3);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelement"](5, "canvas", 4, 5);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](7, "div", 6);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](8, "div", 7);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](9, "h5");
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtext"](10, " add background: ");
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](11, "div", 8);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](12, "app-upload-image-with-preview", 9);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵlistener"]("imageUploaded", function CustomHotZoneComponent_Template_app_upload_image_with_preview_imageUploaded_12_listener($event) { return ctx.onBackgroundUploadSuccess($event); });
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtemplate"](13, CustomHotZoneComponent_div_13_Template, 16, 8, "div", 10);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](14, "div", 7);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](15, "div", 8);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](16, "button", 11);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵlistener"]("click", function CustomHotZoneComponent_Template_button_click_16_listener() { return ctx.addBtnClick(); });
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelement"](17, "i", 12);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtext"](18, " Add hot zone ");
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelement"](19, "nz-divider");
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](20, "div", 13);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](21, "button", 14);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵlistener"]("click", function CustomHotZoneComponent_Template_button_click_21_listener() { return ctx.saveClick(); });
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelement"](22, "i", 15);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtext"](23, " Save ");
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](24, "label", 16);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtext"](25, "1");
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
            }
            if (rf & 2) {
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](12);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("picUrl", ctx.bgItem == null ? null : ctx.bgItem.url);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](1);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("ngForOf", ctx.hotZoneArr);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](8);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("nzSize", "large");
            }
        }, directives: [ng_zorro_antd_grid__WEBPACK_IMPORTED_MODULE_6__["NzRowDirective"], ng_zorro_antd_grid__WEBPACK_IMPORTED_MODULE_6__["NzColDirective"], _upload_image_with_preview_upload_image_with_preview_component__WEBPACK_IMPORTED_MODULE_7__["UploadImageWithPreviewComponent"], _angular_common__WEBPACK_IMPORTED_MODULE_8__["NgForOf"], ng_zorro_antd_button__WEBPACK_IMPORTED_MODULE_9__["NzButtonComponent"], ng_zorro_antd_icon__WEBPACK_IMPORTED_MODULE_10__["NzIconDirective"], ng_zorro_antd_divider__WEBPACK_IMPORTED_MODULE_11__["NzDividerComponent"], ng_zorro_antd_radio__WEBPACK_IMPORTED_MODULE_12__["NzRadioGroupComponent"], _angular_forms__WEBPACK_IMPORTED_MODULE_13__["NgControlStatus"], _angular_forms__WEBPACK_IMPORTED_MODULE_13__["NgModel"], _angular_common__WEBPACK_IMPORTED_MODULE_8__["NgIf"], _audio_recorder_audio_recorder_component__WEBPACK_IMPORTED_MODULE_14__["AudioRecorderComponent"], ng_zorro_antd_radio__WEBPACK_IMPORTED_MODULE_12__["NzRadioComponent"], _angular_forms__WEBPACK_IMPORTED_MODULE_13__["DefaultValueAccessor"], ng_zorro_antd_input__WEBPACK_IMPORTED_MODULE_15__["NzInputDirective"]], styles: [".p-image-children-editor[_ngcontent-%COMP%] {\n  width: 100%;\n  height: 100%;\n  border-radius: 0.5rem;\n  border: 2px solid #ddd;\n}\n.p-image-children-editor[_ngcontent-%COMP%]   .preview-box[_ngcontent-%COMP%] {\n  margin: auto;\n  width: 95%;\n  height: 35vw;\n  border: 2px dashed #ddd;\n  border-radius: 0.5rem;\n  background-color: #fafafa;\n  text-align: center;\n  color: #aaa;\n}\n.p-image-children-editor[_ngcontent-%COMP%]   .preview-box[_ngcontent-%COMP%]   .preview-img[_ngcontent-%COMP%] {\n  height: 100%;\n  width: auto;\n}\n.p-image-children-editor[_ngcontent-%COMP%]   .bg-box[_ngcontent-%COMP%] {\n  margin-bottom: 1rem;\n}\n.p-image-children-editor[_ngcontent-%COMP%]   .img-box[_ngcontent-%COMP%] {\n  margin-bottom: 1rem;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n}\n.p-image-children-editor[_ngcontent-%COMP%]   .img-box-upload[_ngcontent-%COMP%] {\n  width: 80%;\n}\n.p-image-children-editor[_ngcontent-%COMP%]   .add-btn[_ngcontent-%COMP%] {\n  margin-top: 1rem;\n  width: 200px;\n  height: 90px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.save-box[_ngcontent-%COMP%] {\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.save-box[_ngcontent-%COMP%]   .save-btn[_ngcontent-%COMP%] {\n  width: 160px;\n  height: 40px;\n  margin-bottom: 20px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\nh5[_ngcontent-%COMP%] {\n  margin-top: 1rem;\n}\n@font-face {\n  font-family: \"BRLNSR_1\";\n  src: url(\"/assets/font/BRLNSR_1.TTF\");\n}\n/*# sourceMappingURL=data:application/json;base64,  */"] });
    return CustomHotZoneComponent;
})();



/***/ }),

/***/ "./src/app/common/lesson-title-config/lesson-title-config.component.ts":
/*!*****************************************************************************!*\
  !*** ./src/app/common/lesson-title-config/lesson-title-config.component.ts ***!
  \*****************************************************************************/
/*! exports provided: LessonTitleConfigComponent */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "LessonTitleConfigComponent", function() { return LessonTitleConfigComponent; });
/* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @angular/core */ "./node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js");
/* harmony import */ var ng_zorro_antd_select__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ng-zorro-antd/select */ "./node_modules/ng-zorro-antd/__ivy_ngcc__/fesm2015/ng-zorro-antd-select.js");
/* harmony import */ var _angular_forms__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @angular/forms */ "./node_modules/@angular/forms/__ivy_ngcc__/fesm2015/forms.js");
/* harmony import */ var _angular_common__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @angular/common */ "./node_modules/@angular/common/__ivy_ngcc__/fesm2015/common.js");
/* harmony import */ var _fortawesome_angular_fontawesome__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @fortawesome/angular-fontawesome */ "./node_modules/@fortawesome/angular-fontawesome/__ivy_ngcc__/fesm2015/angular-fontawesome.js");
/* harmony import */ var ng_zorro_antd_popover__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ng-zorro-antd/popover */ "./node_modules/ng-zorro-antd/__ivy_ngcc__/fesm2015/ng-zorro-antd-popover.js");
/* harmony import */ var ng_zorro_antd_icon__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ng-zorro-antd/icon */ "./node_modules/ng-zorro-antd/__ivy_ngcc__/fesm2015/ng-zorro-antd-icon.js");
/* harmony import */ var _audio_recorder_audio_recorder_component__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../audio-recorder/audio-recorder.component */ "./src/app/common/audio-recorder/audio-recorder.component.ts");
/* harmony import */ var ng_zorro_antd_grid__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ng-zorro-antd/grid */ "./node_modules/ng-zorro-antd/__ivy_ngcc__/fesm2015/ng-zorro-antd-grid.js");










const _c0 = ["titleEl"];
const _c1 = function (a0) { return { "font-family": a0 }; };
function LessonTitleConfigComponent_nz_option_6_Template(rf, ctx) {
    if (rf & 1) {
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](0, "nz-option", 30);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](1, "span", 31);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtext"](2);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
    }
    if (rf & 2) {
        const font_r34 = ctx.$implicit;
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("nzValue", font_r34)("nzLabel", font_r34);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](1);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("ngStyle", _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵpureFunction1"](4, _c1, font_r34));
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](1);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtextInterpolate"](font_r34);
    }
}
function LessonTitleConfigComponent_nz_option_8_Template(rf, ctx) {
    if (rf & 1) {
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelement"](0, "nz-option", 32);
    }
    if (rf & 2) {
        const i_r35 = ctx.$implicit;
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("nzValue", i_r35)("nzLabel", "Size - " + i_r35);
    }
}
function LessonTitleConfigComponent_ng_template_36_div_1_Template(rf, ctx) {
    if (rf & 1) {
        const _r39 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵgetCurrentView"]();
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](0, "div", 35);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵlistener"]("click", function LessonTitleConfigComponent_ng_template_36_div_1_Template_div_click_0_listener() { _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵrestoreView"](_r39); const color_r37 = ctx.$implicit; const ctx_r38 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵnextContext"](2); return ctx_r38.onSelectColor(color_r37); });
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
    }
    if (rf & 2) {
        const color_r37 = ctx.$implicit;
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵstyleProp"]("background-color", color_r37);
    }
}
function LessonTitleConfigComponent_ng_template_36_Template(rf, ctx) {
    if (rf & 1) {
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](0, "div", 33);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtemplate"](1, LessonTitleConfigComponent_ng_template_36_div_1_Template, 1, 2, "div", 34);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
    }
    if (rf & 2) {
        const ctx_r33 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵnextContext"]();
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](1);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("ngForOf", ctx_r33.colorList);
    }
}
const editorTpl = `<html lang="en"><head><meta charset="utf-8">
  <meta name="viewport"
          content="width=device-width,initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"/>
        <style>
@font-face{
  font-family: 'BRLNSDB';
  src: url("../../../assets/font/BRLNSDB.TTF") ;
}

@font-face{
  font-family: 'BRLNSB';
  src: url("../../../assets/font/BRLNSB.TTF") ;
}

@font-face{
  font-family: 'BRLNSR';
  src: url("../../../assets/font/BRLNSR.TTF") ;
}

@font-face{
  font-family: 'GOTHIC';
  src: url("../../../assets/font/GOTHIC.TTF") ;
}

@font-face{
  font-family: 'GOTHICB';
  src: url("../../../assets/font/GOTHICB.TTF") ;
}

@font-face{
  font-family: 'GOTHICBI';
  src: url("../../../assets/font/GOTHICBI.TTF") ;
}

@font-face{
  font-family: 'GOTHICI';
  src: url("../../../assets/font/GOTHICI.TTF") ;
}

@font-face{
  font-family: 'MMTextBook';
  src: url("../../../assets/font/MMTextBook.otf") ;
}

@font-face{
  font-family: 'MMTextBook-Bold';
  src: url("../../../assets/font/MMTextBook-Bold.otf") ;
}

@font-face{
  font-family: 'MMTextBook-BoldItalic';
  src: url("../../../assets/font/MMTextBook-BoldItalic.otf") ;
}

@font-face{
  font-family: 'MMTextBook-Italic';
  src: url("../../../assets/font/MMTextBook-Italic.otf") ;
}
html, body{
/*font-size: 30px;*/
}
body{
    height:48px;

  overflow: hidden;
  margin: 0;
  padding: 0 .5rem;
  font-family: 'BRLNSB, BRLNSDB, BRLNSR, GOTHIC, GOTHICB, MMTextBook';
  background: #FFF;
  line-height: 48px;
}
</style>
  </head>
  <body>{{content}}</body>
</html>`;
let LessonTitleConfigComponent = /*@__PURE__*/ (() => {
    class LessonTitleConfigComponent {
        constructor() {
            this.fontFamilyList = [
                'Arial',
                'BRLNSB',
                'BRLNSDB',
                'BRLNSR',
                'GOTHIC',
                'GOTHICB',
                // "GOTHICBI",
                // "GOTHICI",
                'MMTextBook',
            ];
            this.colorList = [
                '#000000',
                '#ffffff',
                '#595959',
                '#0075c2',
                '#c61c1e',
                '#9cbc3a',
                '#008000',
                '#FF0000',
                '#D2691E',
            ];
            this.MIN_FONT_SIZE = 1;
            this.MAX_FONT_SIZE = 7;
            this.isShowFontColorPane = false;
            this.isShowBGColorPane = false;
            this.fontSizeRange = [
            // {name: '1号', value: 9},
            // {name: '2号', value: 13},
            // {name: '3号', value: 16},
            // {name: '4号', value: 18},
            // {name: '5号', value: 24},
            // {name: '6号', value: 32},
            ];
            this.editorContent = '';
            this.__fontFamily = 'Arial';
            this.__fontColor = '';
            this.__fontSize = 3;
            this.loopCnt = 0;
            this.maxLoops = 20;
            this.titleEW = null;
            this.titleObj = {
                content: '',
                audio_url: ''
            };
            this.titleUpdated = new _angular_core__WEBPACK_IMPORTED_MODULE_0__["EventEmitter"]();
            this.shouldSave = () => {
                console.log('title shouldSave', this.titleObj);
                this.titleObj.content = this.titleEW.document.body.innerHTML.trim();
                this.titleUpdated.emit(this.titleObj);
            };
            this.fontSizeRange = [];
            for (let i = this.MIN_FONT_SIZE; i <= this.MAX_FONT_SIZE; ++i) {
                this.fontSizeRange.push(i);
            }
            this.__fontSize = 3;
            this.__fontColor = this.colorList[0];
        }
        ngOnChanges(vars) {
            if (!vars.titleObj.previousValue) { // 初始化，内容是空
                return;
            }
            let defObj = this.titleObj;
            if (!vars.titleObj.currentValue) {
                defObj = {
                    content: '',
                    audio_url: ''
                };
            }
            else {
                defObj = vars.titleObj.currentValue;
            }
            this.titleObj.content = defObj.content || '';
            this.titleObj.audio_url = defObj.audio_url || '';
            this.titleEW.document.body.innerHTML = this.titleObj.content;
        }
        ngOnInit() {
            if (!this.titleObj) {
                this.titleObj = {
                    content: '',
                    audio_url: ''
                };
            }
            this.titleObj.content = this.titleObj.content || '';
            this.titleObj.audio_url = this.titleObj.audio_url || '';
            this.editorContent = editorTpl.replace('{{content}}', this.titleObj.content);
            this.titleEW = this.titleEl.nativeElement.contentWindow;
            console.log('this.titleEW', this.titleEW);
            const tdoc = this.titleEW.document;
            tdoc.designMode = 'on';
            tdoc.open('text/html', 'replace');
            tdoc.write(this.editorContent);
            tdoc.close();
            tdoc.addEventListener('keypress', this.keyPress, true);
            tdoc.addEventListener('blur', () => {
                if (this.titleObj.content === this.titleEW.document.body.innerHTML.trim()) {
                    return;
                }
                this.shouldSave();
            }, true);
        }
        htmlEncode(text) {
            if (!text) {
                return '';
            }
            return text.replace(/\&/ig, '&amp;')
                .replace(/\</ig, '&lt;')
                .replace(/\>/ig, '&gt;')
                .replace(/\"/ig, '&quot;');
        }
        htmlDecode(text) {
            if (!text) {
                return '';
            }
            return text.replace(/\&amp\;/ig, '&')
                .replace(/\&lt\;/ig, '<')
                .replace(/\&gt\;/ig, '>')
                .replace(/\&quot\;/ig, '"');
        }
        ngOnDestroy() {
        }
        keyPress(evt) {
            try {
                if (evt.charCode === 13) {
                    evt.preventDefault();
                    evt.stopPropagation();
                    return;
                }
                if (evt.ctrlKey) {
                    const key = String.fromCharCode(evt.charCode).toLowerCase();
                    let cmd = '';
                    switch (key) {
                        case 'b':
                            cmd = 'bold';
                            break;
                        case 'i':
                            cmd = 'italic';
                            break;
                        case 'u':
                            cmd = 'underline';
                            break;
                    }
                    if (cmd) {
                        this.execEditorCommand(cmd);
                        // stop the event bubble
                        evt.preventDefault();
                        evt.stopPropagation();
                    }
                }
            }
            catch (e) {
                console.log(1, e);
                alert(e);
            }
        }
        execEditorCommand(command, option) {
            console.log('sssss');
            try {
                this.titleEW.focus();
                const result = this.titleEW.document.execCommand(command, false, option);
                console.log(result);
                this.loopCnt = 0;
                return false;
            }
            catch (e) {
                alert(e);
                if (this.loopCnt < this.maxLoops) {
                    setTimeout(() => {
                        this.execEditorCommand(command, option);
                    }, 100);
                    this.loopCnt += 1;
                }
                else {
                    alert('Error executing command.');
                }
            }
        }
        onSelectColor(color) {
            this.execEditorCommand('forecolor', color);
            this.__fontColor = color;
        }
        onChangeFontColor(val) {
            this.execEditorCommand('forecolor', this.__fontColor);
        }
        onChangeFontFamily(font) {
            this.execEditorCommand('fontName', font);
        }
        onChangeFontSize(size) {
            if (size) {
                size += this.__fontSize;
            }
            else {
                size = this.__fontSize;
            }
            size = Math.max(this.MIN_FONT_SIZE, size);
            size = Math.min(this.MAX_FONT_SIZE, size);
            this.execEditorCommand('fontsize', size);
        }
        onChangeBold() {
            this.execEditorCommand('bold');
        }
        onChangeItalic() {
            this.execEditorCommand('italic');
        }
        onChangeUnderline() {
            this.execEditorCommand('underline');
        }
        onChangeStrikethrough() {
            this.execEditorCommand('strikethrough');
        }
        titleAudioUploaded(res) {
            this.titleObj.audio_url = res.url;
            this.titleUpdated.emit(this.titleObj);
        }
    }
    LessonTitleConfigComponent.ɵfac = function LessonTitleConfigComponent_Factory(t) { return new (t || LessonTitleConfigComponent)(); };
    LessonTitleConfigComponent.ɵcmp = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵdefineComponent"]({ type: LessonTitleConfigComponent, selectors: [["app-lesson-title-config"]], viewQuery: function LessonTitleConfigComponent_Query(rf, ctx) {
            if (rf & 1) {
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵstaticViewQuery"](_c0, true);
            }
            if (rf & 2) {
                var _t;
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵqueryRefresh"](_t = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵloadQuery"]()) && (ctx.titleEl = _t.first);
            }
        }, inputs: { titleObj: "titleObj" }, outputs: { titleUpdated: "titleUpdated" }, features: [_angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵNgOnChangesFeature"]], decls: 38, vars: 10, consts: [[1, "title-config"], [1, "title-wrap"], [1, "row", 2, "margin", "5px"], [1, "p-content", 2, "width", "100%"], [1, "p-tool-box", "d-flex", 2, "background", "#fff"], ["nzPlaceHolder", "Font Family", 1, "ml-1", 2, "width", "120px", 3, "ngModel", "nzDropdownMatchSelectWidth", "ngModelChange"], ["nzCustomContent", "", 3, "nzValue", "nzLabel", 4, "ngFor", "ngForOf"], ["nzPlaceHolder", "Font Size", 1, "ml-1", 2, "width", "110px", 3, "ngModel", "ngModelChange"], [3, "nzValue", "nzLabel", 4, "ngFor", "ngForOf"], [1, "p-divider"], [1, "i-tool-font-btn", "d-flex", "mr-2"], [1, "position-relative", "fa-icon", 3, "click"], ["icon", "bold"], ["icon", "italic"], ["icon", "underline"], [1, "i-tool-font-btn", "d-flex"], ["icon", "strikethrough"], [1, "i-tool-font-color", "d-flex"], [1, "position-relative", "i-left", "flex-fill", 3, "click"], ["icon", "palette"], [1, "i-color"], ["nzPlacement", "bottom", "nz-popover", "", "nzTrigger", "click", 1, "i-dropdown-menu", 3, "nzVisible", "nzContent", "nzVisibleChange"], ["nz-icon", "", "type", "down", "theme", "outline"], [2, "background", "#fff", "display", "block"], [1, "position-relative"], [3, "audioUrl", "audioUploaded"], [1, "width-100", "d-flex"], ["id", "titleContentEgret", "frameborder", "0", 2, "overflow", "hidden", "width", "100%", "height", "48px", "margin", "0", "padding", "0"], ["titleEl", ""], ["colorPane", ""], ["nzCustomContent", "", 3, "nzValue", "nzLabel"], [3, "ngStyle"], [3, "nzValue", "nzLabel"], ["nz-row", "", "nzGutter", "16", "nzType", "flex", 1, "p-color-pane"], ["nz-col", "", "class", "p-color-item", 3, "background-color", "click", 4, "ngFor", "ngForOf"], ["nz-col", "", 1, "p-color-item", 3, "click"]], template: function LessonTitleConfigComponent_Template(rf, ctx) {
            if (rf & 1) {
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](0, "div", 0);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](1, "div", 1);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](2, "div", 2);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](3, "div", 3);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](4, "div", 4);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](5, "nz-select", 5);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵlistener"]("ngModelChange", function LessonTitleConfigComponent_Template_nz_select_ngModelChange_5_listener($event) { return ctx.__fontFamily = $event; })("ngModelChange", function LessonTitleConfigComponent_Template_nz_select_ngModelChange_5_listener($event) { return ctx.onChangeFontFamily($event); });
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtemplate"](6, LessonTitleConfigComponent_nz_option_6_Template, 3, 6, "nz-option", 6);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](7, "nz-select", 7);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵlistener"]("ngModelChange", function LessonTitleConfigComponent_Template_nz_select_ngModelChange_7_listener($event) { return ctx.__fontSize = $event; })("ngModelChange", function LessonTitleConfigComponent_Template_nz_select_ngModelChange_7_listener() { return ctx.onChangeFontSize(); });
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtemplate"](8, LessonTitleConfigComponent_nz_option_8_Template, 1, 2, "nz-option", 8);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelement"](9, "div", 9);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](10, "div", 10);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](11, "div", 11);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵlistener"]("click", function LessonTitleConfigComponent_Template_div_click_11_listener() { return ctx.onChangeBold(); });
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelement"](12, "fa-icon", 12);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](13, "div", 10);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](14, "div", 11);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵlistener"]("click", function LessonTitleConfigComponent_Template_div_click_14_listener() { return ctx.onChangeItalic(); });
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelement"](15, "fa-icon", 13);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](16, "div", 10);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](17, "div", 11);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵlistener"]("click", function LessonTitleConfigComponent_Template_div_click_17_listener() { return ctx.onChangeUnderline(); });
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelement"](18, "fa-icon", 14);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](19, "div", 15);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](20, "div", 11);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵlistener"]("click", function LessonTitleConfigComponent_Template_div_click_20_listener() { return ctx.onChangeStrikethrough(); });
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelement"](21, "fa-icon", 16);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelement"](22, "div", 9);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](23, "div", 17);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](24, "div", 18);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵlistener"]("click", function LessonTitleConfigComponent_Template_div_click_24_listener($event) { return ctx.onChangeFontColor($event); });
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelement"](25, "fa-icon", 19);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelement"](26, "div", 20);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](27, "div", 21);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵlistener"]("nzVisibleChange", function LessonTitleConfigComponent_Template_div_nzVisibleChange_27_listener($event) { return ctx.isShowFontColorPane = $event; });
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelement"](28, "i", 22);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelement"](29, "div", 9);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](30, "div", 23);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](31, "div", 24);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](32, "app-audio-recorder", 25);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵlistener"]("audioUploaded", function LessonTitleConfigComponent_Template_app_audio_recorder_audioUploaded_32_listener($event) { return ctx.titleAudioUploaded($event); });
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](33, "div", 26);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelement"](34, "iframe", 27, 28);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtemplate"](36, LessonTitleConfigComponent_ng_template_36_Template, 2, 1, "ng-template", null, 29, _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtemplateRefExtractor"]);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
            }
            if (rf & 2) {
                const _r32 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵreference"](37);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](5);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("ngModel", ctx.__fontFamily)("nzDropdownMatchSelectWidth", false);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](1);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("ngForOf", ctx.fontFamilyList);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](1);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("ngModel", ctx.__fontSize);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](1);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("ngForOf", ctx.fontSizeRange);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](18);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵstyleProp"]("background-color", ctx.__fontColor);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](1);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("nzVisible", ctx.isShowFontColorPane)("nzContent", _r32);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](5);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("audioUrl", ctx.titleObj && ctx.titleObj.audio_url);
            }
        }, directives: [ng_zorro_antd_select__WEBPACK_IMPORTED_MODULE_1__["NzSelectComponent"], _angular_forms__WEBPACK_IMPORTED_MODULE_2__["NgControlStatus"], _angular_forms__WEBPACK_IMPORTED_MODULE_2__["NgModel"], _angular_common__WEBPACK_IMPORTED_MODULE_3__["NgForOf"], _fortawesome_angular_fontawesome__WEBPACK_IMPORTED_MODULE_4__["FaIconComponent"], ng_zorro_antd_popover__WEBPACK_IMPORTED_MODULE_5__["NzPopoverDirective"], ng_zorro_antd_icon__WEBPACK_IMPORTED_MODULE_6__["NzIconDirective"], _audio_recorder_audio_recorder_component__WEBPACK_IMPORTED_MODULE_7__["AudioRecorderComponent"], ng_zorro_antd_select__WEBPACK_IMPORTED_MODULE_1__["NzOptionComponent"], _angular_common__WEBPACK_IMPORTED_MODULE_3__["NgStyle"], ng_zorro_antd_grid__WEBPACK_IMPORTED_MODULE_8__["NzRowDirective"], ng_zorro_antd_grid__WEBPACK_IMPORTED_MODULE_8__["NzColDirective"]], styles: [".title-config[_ngcontent-%COMP%]   .letter-wrap[_ngcontent-%COMP%] {\n  width: 3rem;\n  flex: 0 0 3rem;\n}\n.title-config[_ngcontent-%COMP%]   .str-wrap[_ngcontent-%COMP%] {\n  margin-left: 1rem;\n  flex: 1 1;\n}\n.title-config[_ngcontent-%COMP%]   .type-row[_ngcontent-%COMP%] {\n  margin: 0;\n  padding-top: 1rem;\n}\n@font-face {\n  font-family: \"BRLNSDB\";\n  src: url('BRLNSDB.TTF');\n}\n@font-face {\n  font-family: \"BRLNSB\";\n  src: url('BRLNSB.TTF');\n}\n@font-face {\n  font-family: \"BRLNSR\";\n  src: url('BRLNSR.TTF');\n}\n@font-face {\n  font-family: \"GOTHIC\";\n  src: url('GOTHIC.TTF');\n}\n@font-face {\n  font-family: \"GOTHICB\";\n  src: url('GOTHICB.TTF');\n}\n@font-face {\n  font-family: \"GOTHICBI\";\n  src: url('GOTHICBI.TTF');\n}\n@font-face {\n  font-family: \"GOTHICI\";\n  src: url('GOTHICI.TTF');\n}\n@font-face {\n  font-family: \"MMTextBook\";\n  src: url('MMTextBook.otf');\n}\n@font-face {\n  font-family: \"MMTextBook-Bold\";\n  src: url('MMTextBook-Bold.otf');\n}\n@font-face {\n  font-family: \"MMTextBook-BoldItalic\";\n  src: url('MMTextBook-BoldItalic.otf');\n}\n@font-face {\n  font-family: \"MMTextBook-Italic\";\n  src: url('MMTextBook-Italic.otf');\n}\n.d-flex[_ngcontent-%COMP%] {\n  display: flex;\n}\n.position-relative[_ngcontent-%COMP%] {\n  position: relative;\n}\n.flex-fill[_ngcontent-%COMP%] {\n  flex: 1 1 auto;\n  justify-content: center;\n  display: flex;\n}\n.i-dropdown-menu[_ngcontent-%COMP%] {\n  width: 15px;\n  font-size: 10px;\n  border-left: 1px solid #ddd;\n  display: flex;\n  align-items: center;\n  flex: 0;\n}\n.p-title-box[_ngcontent-%COMP%]   .p-title[_ngcontent-%COMP%] {\n  font-size: 20px;\n}\n.p-title-box[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {\n  width: 300px;\n  margin-left: 10px;\n}\n.p-content[_ngcontent-%COMP%] {\n  border: 1px solid #ddd;\n  box-shadow: 0 0 8px #eee;\n  margin-top: 10px;\n}\n.p-divider[_ngcontent-%COMP%] {\n  border-left: 1px solid #ccc;\n  margin: 5px 8px;\n  height: 85%;\n}\n.p-tool-box[_ngcontent-%COMP%] {\n  background-color: #efefef;\n  padding: 2px;\n  height: 37px;\n  display: flex;\n  align-items: center;\n  border-bottom: 1px solid #ddd;\n}\n.i-tool-save[_ngcontent-%COMP%] {\n  color: white;\n}\n.i-tool-save[_ngcontent-%COMP%]:disabled {\n  color: #555;\n}\n.i-tool-font-size[_ngcontent-%COMP%] {\n  width: 37px;\n}\n.i-tool-font-size[_ngcontent-%COMP%]:hover {\n  color: black;\n  border-color: #bbb;\n}\n.i-tool-font-color[_ngcontent-%COMP%], .i-tool-font-btn[_ngcontent-%COMP%] {\n  border: 1px solid #ddd;\n  border-radius: 6px;\n  width: 45px;\n  height: 31px;\n  background-color: white;\n  color: #555;\n}\n.i-tool-font-color[_ngcontent-%COMP%]     > span, .i-tool-font-btn[_ngcontent-%COMP%]     > span {\n  display: flex;\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  padding: 3px 7px;\n}\n.i-tool-font-color[_ngcontent-%COMP%]   .i-left[_ngcontent-%COMP%]   .fa-font[_ngcontent-%COMP%], .i-tool-font-color[_ngcontent-%COMP%]   .i-left[_ngcontent-%COMP%]   .fa-bold[_ngcontent-%COMP%], .i-tool-font-color[_ngcontent-%COMP%]   .i-left[_ngcontent-%COMP%]   .fa-italic[_ngcontent-%COMP%], .i-tool-font-color[_ngcontent-%COMP%]   .i-left[_ngcontent-%COMP%]   .fa-strikethrough[_ngcontent-%COMP%], .i-tool-font-color[_ngcontent-%COMP%]   .i-left[_ngcontent-%COMP%]   .fa-underline[_ngcontent-%COMP%], .i-tool-font-btn[_ngcontent-%COMP%]   .i-left[_ngcontent-%COMP%]   .fa-font[_ngcontent-%COMP%], .i-tool-font-btn[_ngcontent-%COMP%]   .i-left[_ngcontent-%COMP%]   .fa-bold[_ngcontent-%COMP%], .i-tool-font-btn[_ngcontent-%COMP%]   .i-left[_ngcontent-%COMP%]   .fa-italic[_ngcontent-%COMP%], .i-tool-font-btn[_ngcontent-%COMP%]   .i-left[_ngcontent-%COMP%]   .fa-strikethrough[_ngcontent-%COMP%], .i-tool-font-btn[_ngcontent-%COMP%]   .i-left[_ngcontent-%COMP%]   .fa-underline[_ngcontent-%COMP%] {\n  font-size: 10px;\n  position: absolute;\n  color: #555;\n  left: 8px;\n  top: 7px;\n}\n.i-tool-font-color[_ngcontent-%COMP%]   .i-left[_ngcontent-%COMP%]   .i-color[_ngcontent-%COMP%], .i-tool-font-btn[_ngcontent-%COMP%]   .i-left[_ngcontent-%COMP%]   .i-color[_ngcontent-%COMP%] {\n  width: 68%;\n  height: 5px;\n  background-color: black;\n  position: absolute;\n  top: 21px;\n  left: 5px;\n}\n.i-tool-font-color[_ngcontent-%COMP%]   .i-dropdown-menu[_ngcontent-%COMP%], .i-tool-font-btn[_ngcontent-%COMP%]   .i-dropdown-menu[_ngcontent-%COMP%] {\n  width: 15px;\n  font-size: 10px;\n  border-left: 1px solid #ddd;\n  display: flex;\n  align-items: center;\n}\n.i-tool-font-color[_ngcontent-%COMP%]   .i-dropdown-menu[_ngcontent-%COMP%]   .anticon-down[_ngcontent-%COMP%], .i-tool-font-btn[_ngcontent-%COMP%]   .i-dropdown-menu[_ngcontent-%COMP%]   .anticon-down[_ngcontent-%COMP%] {\n  transform: scale(0.6);\n}\n.i-tool-font-btn[_ngcontent-%COMP%] {\n  width: 31px;\n}\n.fa-icon[_ngcontent-%COMP%] {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n}\n.i-tool-bg-color[_ngcontent-%COMP%] {\n  border: 1px solid #ddd;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 100%;\n  outline: none;\n  border-radius: 6px;\n  color: #555;\n  padding: 0 9px;\n}\n.i-tool-bg-color[_ngcontent-%COMP%]     > span {\n  display: flex;\n  align-items: center;\n}\n.i-tool-bg-color[_ngcontent-%COMP%]   .i-color[_ngcontent-%COMP%] {\n  display: block;\n  width: 16px;\n  height: 16px;\n  background-color: white;\n  margin-left: 10px;\n}\n.i-tool-horizontal-center[_ngcontent-%COMP%] {\n  border: 1px solid #ddd;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 100%;\n  outline: none;\n  border-radius: 6px;\n  color: #555;\n  width: 37px;\n}\n.p-box[_ngcontent-%COMP%] {\n  width: 1280px;\n  height: 720px;\n  left: 0;\n  top: 0;\n  transform-origin: top left;\n  overflow: hidden;\n}\n.p-animation-index-box[_ngcontent-%COMP%]   .i-animation-index[_ngcontent-%COMP%] {\n  position: absolute;\n  font-size: 34px;\n  font-family: Arial;\n  border: 1px solid #ddd;\n  border-radius: 4px;\n  min-width: 50px;\n  min-height: 50px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: darkorange;\n  color: white;\n}\n.p-edit[_ngcontent-%COMP%] {\n  background-color: white;\n  border: 1px solid black;\n  padding: 2px 15px;\n}\n.p-selected[_ngcontent-%COMP%] {\n  border: 1px solid darkorange;\n  box-shadow: 0 0 8px #ddd;\n}\n.p-tool-item-disable[_ngcontent-%COMP%] {\n  color: rgba(0, 0, 0, 0.25) !important;\n  background-color: transparent !important;\n  pointer-events: none;\n}\n.p-color-pane[_ngcontent-%COMP%] {\n  width: 80px;\n}\n.p-color-pane[_ngcontent-%COMP%]   .p-color-item[_ngcontent-%COMP%] {\n  width: 17px;\n  height: 17px;\n  cursor: pointer;\n  margin: 4px;\n  border: 1px solid #bbb;\n}\n.p-color-pane[_ngcontent-%COMP%]   .p-color-item-active[_ngcontent-%COMP%] {\n  border: 1px solid white;\n  transform: scale(1.1);\n}\n.p-user-guide[_ngcontent-%COMP%] {\n  font-size: 40px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.p-animation-box[_ngcontent-%COMP%] {\n  width: 400px;\n  background-color: #efefef;\n  border-left: 1px solid #ddd;\n  padding: 10px;\n  text-align: center;\n}\n.p-animation-box[_ngcontent-%COMP%]   .p-animation-label[_ngcontent-%COMP%] {\n  z-index: 1;\n  position: relative;\n}\n.p-animation-box[_ngcontent-%COMP%]     .ant-radio-button-wrapper {\n  padding: 0 10px;\n}\n.p-animation-box[_ngcontent-%COMP%]   .i-toolbox[_ngcontent-%COMP%]    > div[_ngcontent-%COMP%] {\n  font-size: 20px;\n  cursor: pointer;\n  color: #555;\n  padding: 0 3px;\n  margin: 0 5px;\n}\n.p-animation-box[_ngcontent-%COMP%]   .i-toolbox[_ngcontent-%COMP%]    > div[_ngcontent-%COMP%]:hover {\n  color: #1585ff;\n  transform: scale(1.1);\n}\n.p-animation-box[_ngcontent-%COMP%]   .p-animation-list[_ngcontent-%COMP%] {\n  background-color: white;\n  border-radius: 10px;\n  height: calc(100% - 86px);\n  overflow-y: auto;\n}\n.p-animation-box[_ngcontent-%COMP%]   .p-animation-list[_ngcontent-%COMP%]   .p-animation-item[_ngcontent-%COMP%] {\n  padding: 0 20px;\n  background-color: aliceblue;\n  margin-top: 6px;\n  border-top: 1px solid #ddd;\n  border-bottom: 1px solid #ddd;\n  cursor: pointer;\n  text-align: left;\n  display: flex;\n}\n.p-animation-box[_ngcontent-%COMP%]   .p-animation-list[_ngcontent-%COMP%]   .i-active[_ngcontent-%COMP%] {\n  background-color: antiquewhite;\n}\n/*# sourceMappingURL=data:application/json;base64,  */"] });
    return LessonTitleConfigComponent;
})();



/***/ }),

/***/ "./src/app/common/player-content-wrapper/player-content-wrapper.component.ts":
/*!***********************************************************************************!*\
  !*** ./src/app/common/player-content-wrapper/player-content-wrapper.component.ts ***!
  \***********************************************************************************/
/*! exports provided: PlayerContentWrapperComponent */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "PlayerContentWrapperComponent", function() { return PlayerContentWrapperComponent; });
/* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @angular/core */ "./node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js");


const _c0 = ["wrapperEl"];
const _c1 = ["*"];
let PlayerContentWrapperComponent = /*@__PURE__*/ (() => {
    class PlayerContentWrapperComponent {
        constructor() {
            if (window.innerHeight < window.innerWidth) {
                this._h = '100%';
                this._w = 'auto';
            }
            else {
                this._w = '100%';
                this._h = 'auto';
            }
        }
        ngOnInit() {
            if (!this.ratio) {
                this.ratio = '20-9';
            }
        }
        ngOnChanges() {
        }
        ngOnDestroy() {
        }
        ngAfterViewInit() {
        }
    }
    PlayerContentWrapperComponent.ɵfac = function PlayerContentWrapperComponent_Factory(t) { return new (t || PlayerContentWrapperComponent)(); };
    PlayerContentWrapperComponent.ɵcmp = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵdefineComponent"]({ type: PlayerContentWrapperComponent, selectors: [["app-player-content-wrapper"]], viewQuery: function PlayerContentWrapperComponent_Query(rf, ctx) {
            if (rf & 1) {
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵstaticViewQuery"](_c0, true);
            }
            if (rf & 2) {
                var _t;
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵqueryRefresh"](_t = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵloadQuery"]()) && (ctx.wrapperEl = _t.first);
            }
        }, inputs: { ratio: "ratio" }, features: [_angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵNgOnChangesFeature"]], ngContentSelectors: _c1, decls: 6, vars: 1, consts: [[1, "cmp-player-content-wrapper"], ["wrapperEl", ""], [1, "cmp-cnt-box"], ["alt", "", 3, "src"], [1, "cmp-cnt-main"]], template: function PlayerContentWrapperComponent_Template(rf, ctx) {
            if (rf & 1) {
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵprojectionDef"]();
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](0, "div", 0, 1);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](2, "div", 2);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelement"](3, "img", 3);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](4, "div", 4);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵprojection"](5);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
            }
            if (rf & 2) {
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](3);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("src", "assets/" + ctx.ratio + ".png", _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵsanitizeUrl"]);
            }
        }, styles: [".cmp-player-content-wrapper[_ngcontent-%COMP%] {\n  max-height: 100%;\n  display: block;\n  position: relative;\n  height: 100%;\n}\n.cmp-player-content-wrapper[_ngcontent-%COMP%]   .cmp-cnt-box[_ngcontent-%COMP%] {\n  display: inline-block;\n  max-width: 100%;\n  max-height: 100%;\n  width: auto;\n  height: 100%;\n  position: relative;\n}\n.cmp-player-content-wrapper[_ngcontent-%COMP%]   .cmp-cnt-box[_ngcontent-%COMP%]   img[_ngcontent-%COMP%] {\n  height: 100%;\n  width: auto;\n}\n.cmp-player-content-wrapper[_ngcontent-%COMP%]   .cmp-cnt-main[_ngcontent-%COMP%] {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  display: flex;\n  flex-direction: column;\n}\n[style*=\"--aspect-ratio\"][_ngcontent-%COMP%]    > [_ngcontent-%COMP%]:first-child {\n  width: 100%;\n}\n[style*=\"--aspect-ratio\"][_ngcontent-%COMP%]    > img[_ngcontent-%COMP%] {\n  height: auto;\n}\n@supports (--custom: property) {\n  [style*=\"--aspect-ratio\"][_ngcontent-%COMP%] {\n    position: relative;\n  }\n\n  [style*=\"--aspect-ratio\"][_ngcontent-%COMP%]::before {\n    content: \"\";\n    display: block;\n    padding-bottom: calc(100% / (var(--aspect-ratio)));\n  }\n\n  [style*=\"--aspect-ratio\"][_ngcontent-%COMP%]    > [_ngcontent-%COMP%]:first-child {\n    position: absolute;\n    top: 0;\n    left: 0;\n    height: 100%;\n  }\n}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNyYy9hcHAvc3R5bGUvY29tbW9uX21peGluLmNzcyIsIi9Vc2Vycy9saXdlaS9Db2RlL0NvdXJzZXdhcmUvc24xMV96bXh6L2Zvcm1fYW5ndWxhci9zcmMvYXBwL2NvbW1vbi9wbGF5ZXItY29udGVudC13cmFwcGVyL3BsYXllci1jb250ZW50LXdyYXBwZXIuY29tcG9uZW50LnNjc3MiLCJzcmMvYXBwL2NvbW1vbi9wbGF5ZXItY29udGVudC13cmFwcGVyL3BsYXllci1jb250ZW50LXdyYXBwZXIuY29tcG9uZW50LnNjc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0NBRUM7QUNBRDtFQUNFLGdCQUFBO0VBQ0EsY0FBQTtFQUNBLGtCQUFBO0VBQ0EsWUFBQTtBQ0FGO0FEQ0U7RUFDRSxxQkFBQTtFQUNBLGVBQUE7RUFDQSxnQkFBQTtFQUNBLFdBQUE7RUFDQSxZQUFBO0VBQ0Esa0JBQUE7QUNDSjtBREFJO0VBQ0UsWUFBQTtFQUNBLFdBQUE7QUNFTjtBREVFO0VBQ0Usa0JBQUE7RUFDQSxNQUFBO0VBQ0EsUUFBQTtFQUNBLFNBQUE7RUFDQSxPQUFBO0VBQ0EsYUFBQTtFQUNBLHNCQUFBO0FDQUo7QURLQTtFQUNFLFdBQUE7QUNGRjtBRElBO0VBQ0UsWUFBQTtBQ0RGO0FER0E7RUFDRTtJQUNFLGtCQUFBO0VDQUY7O0VERUE7SUFDRSxXQUFBO0lBQ0EsY0FBQTtJQUNBLGtEQUFBO0VDQ0Y7O0VEQ0E7SUFDRSxrQkFBQTtJQUNBLE1BQUE7SUFDQSxPQUFBO0lBQ0EsWUFBQTtFQ0VGO0FBQ0YiLCJmaWxlIjoic3JjL2FwcC9jb21tb24vcGxheWVyLWNvbnRlbnQtd3JhcHBlci9wbGF5ZXItY29udGVudC13cmFwcGVyLmNvbXBvbmVudC5zY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLypcbmdsb2JhbCBjc3MgdG8gbWl4aW5cbiovXG5cblxuXG4iLCJAaW1wb3J0ICcuLi8uLi9zdHlsZS9jb21tb25fbWl4aW4uY3NzJztcblxuLmNtcC1wbGF5ZXItY29udGVudC13cmFwcGVye1xuICBtYXgtaGVpZ2h0OiAxMDAlO1xuICBkaXNwbGF5OiBibG9jaztcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xuICBoZWlnaHQ6IDEwMCU7XG4gIC5jbXAtY250LWJveHtcbiAgICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7XG4gICAgbWF4LXdpZHRoOiAxMDAlO1xuICAgIG1heC1oZWlnaHQ6IDEwMCU7XG4gICAgd2lkdGg6IGF1dG87XG4gICAgaGVpZ2h0OiAxMDAlO1xuICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICBpbWd7XG4gICAgICBoZWlnaHQ6IDEwMCU7XG4gICAgICB3aWR0aDogYXV0bztcbiAgICB9XG5cbiAgfVxuICAuY21wLWNudC1tYWlue1xuICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICB0b3A6IDA7XG4gICAgcmlnaHQ6IDA7XG4gICAgYm90dG9tOiAwO1xuICAgIGxlZnQ6IDA7XG4gICAgZGlzcGxheTogZmxleDtcbiAgICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuICB9XG59XG5cblxuW3N0eWxlKj1cIi0tYXNwZWN0LXJhdGlvXCJdID4gOmZpcnN0LWNoaWxkIHtcbiAgd2lkdGg6IDEwMCU7XG59XG5bc3R5bGUqPVwiLS1hc3BlY3QtcmF0aW9cIl0gPiBpbWcge1xuICBoZWlnaHQ6IGF1dG87XG59XG5Ac3VwcG9ydHMgKC0tY3VzdG9tOnByb3BlcnR5KSB7XG4gIFtzdHlsZSo9XCItLWFzcGVjdC1yYXRpb1wiXSB7XG4gICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICB9XG4gIFtzdHlsZSo9XCItLWFzcGVjdC1yYXRpb1wiXTo6YmVmb3JlIHtcbiAgICBjb250ZW50OiBcIlwiO1xuICAgIGRpc3BsYXk6IGJsb2NrO1xuICAgIHBhZGRpbmctYm90dG9tOiBjYWxjKDEwMCUgLyAodmFyKC0tYXNwZWN0LXJhdGlvKSkpO1xuICB9XG4gIFtzdHlsZSo9XCItLWFzcGVjdC1yYXRpb1wiXSA+IDpmaXJzdC1jaGlsZCB7XG4gICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgIHRvcDogMDtcbiAgICBsZWZ0OiAwO1xuICAgIGhlaWdodDogMTAwJTtcbiAgfVxufVxuIiwiQGltcG9ydCAnLi4vLi4vc3R5bGUvY29tbW9uX21peGluLmNzcyc7XG4uY21wLXBsYXllci1jb250ZW50LXdyYXBwZXIge1xuICBtYXgtaGVpZ2h0OiAxMDAlO1xuICBkaXNwbGF5OiBibG9jaztcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xuICBoZWlnaHQ6IDEwMCU7XG59XG4uY21wLXBsYXllci1jb250ZW50LXdyYXBwZXIgLmNtcC1jbnQtYm94IHtcbiAgZGlzcGxheTogaW5saW5lLWJsb2NrO1xuICBtYXgtd2lkdGg6IDEwMCU7XG4gIG1heC1oZWlnaHQ6IDEwMCU7XG4gIHdpZHRoOiBhdXRvO1xuICBoZWlnaHQ6IDEwMCU7XG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbn1cbi5jbXAtcGxheWVyLWNvbnRlbnQtd3JhcHBlciAuY21wLWNudC1ib3ggaW1nIHtcbiAgaGVpZ2h0OiAxMDAlO1xuICB3aWR0aDogYXV0bztcbn1cbi5jbXAtcGxheWVyLWNvbnRlbnQtd3JhcHBlciAuY21wLWNudC1tYWluIHtcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICB0b3A6IDA7XG4gIHJpZ2h0OiAwO1xuICBib3R0b206IDA7XG4gIGxlZnQ6IDA7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG59XG5cbltzdHlsZSo9XCItLWFzcGVjdC1yYXRpb1wiXSA+IDpmaXJzdC1jaGlsZCB7XG4gIHdpZHRoOiAxMDAlO1xufVxuXG5bc3R5bGUqPVwiLS1hc3BlY3QtcmF0aW9cIl0gPiBpbWcge1xuICBoZWlnaHQ6IGF1dG87XG59XG5cbkBzdXBwb3J0cyAoLS1jdXN0b206IHByb3BlcnR5KSB7XG4gIFtzdHlsZSo9XCItLWFzcGVjdC1yYXRpb1wiXSB7XG4gICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICB9XG5cbiAgW3N0eWxlKj1cIi0tYXNwZWN0LXJhdGlvXCJdOjpiZWZvcmUge1xuICAgIGNvbnRlbnQ6IFwiXCI7XG4gICAgZGlzcGxheTogYmxvY2s7XG4gICAgcGFkZGluZy1ib3R0b206IGNhbGMoMTAwJSAvICh2YXIoLS1hc3BlY3QtcmF0aW8pKSk7XG4gIH1cblxuICBbc3R5bGUqPVwiLS1hc3BlY3QtcmF0aW9cIl0gPiA6Zmlyc3QtY2hpbGQge1xuICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICB0b3A6IDA7XG4gICAgbGVmdDogMDtcbiAgICBoZWlnaHQ6IDEwMCU7XG4gIH1cbn0iXX0= */"] });
    return PlayerContentWrapperComponent;
})();



/***/ }),

/***/ "./src/app/common/upload-image-with-preview/upload-image-with-preview.component.ts":
/*!*****************************************************************************************!*\
  !*** ./src/app/common/upload-image-with-preview/upload-image-with-preview.component.ts ***!
  \*****************************************************************************************/
/*! exports provided: UploadImageWithPreviewComponent */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "UploadImageWithPreviewComponent", function() { return UploadImageWithPreviewComponent; });
/* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @angular/core */ "./node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js");
/* harmony import */ var ng_zorro_antd__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ng-zorro-antd */ "./node_modules/ng-zorro-antd/__ivy_ngcc__/fesm2015/ng-zorro-antd.js");
/* harmony import */ var ng_zorro_antd_upload__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ng-zorro-antd/upload */ "./node_modules/ng-zorro-antd/__ivy_ngcc__/fesm2015/ng-zorro-antd-upload.js");
/* harmony import */ var _angular_common__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @angular/common */ "./node_modules/@angular/common/__ivy_ngcc__/fesm2015/common.js");
/* harmony import */ var ng_zorro_antd_icon__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ng-zorro-antd/icon */ "./node_modules/ng-zorro-antd/__ivy_ngcc__/fesm2015/ng-zorro-antd-icon.js");
/* harmony import */ var _fortawesome_angular_fontawesome__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @fortawesome/angular-fontawesome */ "./node_modules/@fortawesome/angular-fontawesome/__ivy_ngcc__/fesm2015/angular-fontawesome.js");
/* harmony import */ var ng_zorro_antd_popconfirm__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ng-zorro-antd/popconfirm */ "./node_modules/ng-zorro-antd/__ivy_ngcc__/fesm2015/ng-zorro-antd-popconfirm.js");
/* harmony import */ var _pipes_background_image_pipe__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../pipes/background-image.pipe */ "./src/app/pipes/background-image.pipe.ts");









function UploadImageWithPreviewComponent_div_3_Template(rf, ctx) {
    if (rf & 1) {
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](0, "div", 7);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelement"](1, "i", 8);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelement"](2, "div", 9);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](3, "span");
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtext"](4);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
    }
    if (rf & 2) {
        const ctx_r40 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵnextContext"]();
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](1);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵstyleProp"]("font-size", ctx_r40.iconSize + "em");
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](3);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtextInterpolate"](ctx_r40.TIP);
    }
}
function UploadImageWithPreviewComponent_div_4_Template(rf, ctx) {
    if (rf & 1) {
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](0, "div", 10);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelement"](1, "div", 11);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](2, "div", 12);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelement"](3, "fa-icon", 13);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtext"](4, " Uploading... ");
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
    }
    if (rf & 2) {
        const ctx_r41 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵnextContext"]();
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](1);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵstyleProp"]("width", ctx_r41.progress + "%");
    }
}
function UploadImageWithPreviewComponent_div_5_Template(rf, ctx) {
    if (rf & 1) {
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](0, "div", 14);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵpipe"](1, "backgroundImage");
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
    }
    if (rf & 2) {
        const ctx_r42 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵnextContext"]();
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵstyleProp"]("background-image", _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵpipeBind1"](1, 2, ctx_r42.picUrl), _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵdefaultStyleSanitizer"]);
    }
}
function UploadImageWithPreviewComponent_div_6_Template(rf, ctx) {
    if (rf & 1) {
        const _r45 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵgetCurrentView"]();
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](0, "div", 15);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵlistener"]("nzOnConfirm", function UploadImageWithPreviewComponent_div_6_Template_div_nzOnConfirm_0_listener() { _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵrestoreView"](_r45); const ctx_r44 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵnextContext"](); return ctx_r44.onDelete(); });
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelement"](1, "i", 16);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
    }
}
let UploadImageWithPreviewComponent = /*@__PURE__*/ (() => {
    class UploadImageWithPreviewComponent {
        constructor(nzMessageService) {
            this.nzMessageService = nzMessageService;
            this.uploading = false;
            this.progress = 0;
            this.canDelete = false;
            this.imageUploaded = new _angular_core__WEBPACK_IMPORTED_MODULE_0__["EventEmitter"]();
            this.imageUploadFailure = new _angular_core__WEBPACK_IMPORTED_MODULE_0__["EventEmitter"]();
            this.delete = new _angular_core__WEBPACK_IMPORTED_MODULE_0__["EventEmitter"]();
            this.picItem = null;
            this.iconSize = 2;
            this.TIP = 'Click here to upload image';
            this.disableUpload = false;
            this.uploadSuccess = (file) => {
                this.nzMessageService.info('Upload Success');
                this.uploading = false;
                this.picUrl = file.response.url;
                // this.uploadFinished(url);
                // if (!inOSS) {
                const img = new Image();
                img.addEventListener('load', () => {
                    const height = img.naturalHeight;
                    const width = img.naturalWidth;
                    file['height'] = height;
                    file['width'] = width;
                    img.remove();
                    this.imageUploaded.emit(file.response);
                    // this.resService.updateImage(id, {width, height}).then( () => {
                    //   this.imageUploaded.emit({res_id: id, id, name, hash, url});
                    // });
                });
                img.src = file.response.url;
                // } else {
                //   this.imageUploaded.emit({res_id: id, id, name, hash, url});
                // }
            };
            this.uploadFailure = (err, file) => {
                this.uploading = false;
                if (err.name && err.name === 'cancel') {
                    return;
                }
                console.log(err);
                this.nzMessageService.error('Upload Error ' + err.message);
                this.imageUploadFailure.emit(file);
            };
            this.doProgress = function (p) {
                if (p > 1) {
                    p = 1;
                }
                if (p < 0) {
                    p = 0;
                }
                // console.log(Math.floor(p * 100));
                this.progress = Math.floor(p * 100);
            };
            this.uploadUrl = window.courseware.uploadUrl();
            this.uploadData = window.courseware.uploadData();
            window['air'].getUploadCallback = (url, data) => {
                this.uploadUrl = url;
                this.uploadData = data;
            };
        }
        ngOnChanges() {
            if (!this.picItem) {
                return;
            }
        }
        handleChange(info) {
            console.log('info:', info);
            switch (info.type) {
                case 'start':
                    // this.isUploading = true;
                    // this.progress = 0;
                    this.picUrl = null;
                    // this.beforeUpload(item.file as any);
                    if (!this.checkSelectFile(info.file)) {
                        return;
                    }
                    this.uploading = true;
                    this.progress = 0;
                    break;
                case 'success':
                    // this.isUploading = false;
                    // this.uploadSuccess(info.file.response);
                    // this.audioUploaded.emit(info.file.response);
                    this.uploadSuccess(info.file);
                    break;
                case 'progress':
                    this.progress = parseInt(info.event.percent, 10);
                    this.doProgress(this.progress);
                    break;
            }
        }
        onDelete() {
            this.delete.emit();
        }
        checkSelectFile(file) {
            const isImg = ['image/jpeg', 'image/png', 'image/jpeg', 'image/gif', 'image/bmp'].includes(file.type);
            if (!isImg) {
                this.nzMessageService.error('You can only upload Image file (jpg|gif|png|bmp)');
                return false;
            }
            const isGif = !['image/jpeg', 'image/png', 'image/jpeg', 'image/bmp'].includes(file.type);
            const delta = isGif ? 20 : 5;
            const isOverSize = file.size / 1024 / 1024 < delta;
            if (!isOverSize) {
                this.nzMessageService.error(`${isGif ? 'Gif' : 'Image'} must smaller than ${delta}MB!`);
                return false;
            }
            return true;
        }
        ngOnDestroy() {
        }
    }
    UploadImageWithPreviewComponent.ɵfac = function UploadImageWithPreviewComponent_Factory(t) { return new (t || UploadImageWithPreviewComponent)(_angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵdirectiveInject"](ng_zorro_antd__WEBPACK_IMPORTED_MODULE_1__["NzMessageService"])); };
    UploadImageWithPreviewComponent.ɵcmp = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵdefineComponent"]({ type: UploadImageWithPreviewComponent, selectors: [["app-upload-image-with-preview"]], inputs: { picUrl: "picUrl", canDelete: "canDelete", picItem: "picItem", iconSize: "iconSize", TIP: "TIP", disableUpload: "disableUpload" }, outputs: { imageUploaded: "imageUploaded", imageUploadFailure: "imageUploadFailure", delete: "delete" }, features: [_angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵNgOnChangesFeature"]], decls: 7, vars: 8, consts: [[1, "position-relative"], ["nzAccept", "image/*", 1, "p-image-uploader", 3, "nzDisabled", "nzShowUploadList", "nzAction", "nzData", "nzChange"], [1, "p-box", "d-flex", "align-items-center"], ["class", "p-upload-icon", 4, "ngIf"], ["class", "p-upload-progress-bg", 4, "ngIf"], ["class", "p-preview", 3, "background-image", 4, "ngIf"], ["class", "p-btn-delete", "nz-popconfirm", "", "nzTitle", "Are you sure ?", 3, "nzOnConfirm", 4, "ngIf"], [1, "p-upload-icon"], ["nz-icon", "", "nzType", "cloud-upload", "nzTheme", "outline"], [1, "m-3"], [1, "p-upload-progress-bg"], [1, "i-bg"], [1, "i-text"], ["icon", "cloud-upload-alt"], [1, "p-preview"], ["nz-popconfirm", "", "nzTitle", "Are you sure ?", 1, "p-btn-delete", 3, "nzOnConfirm"], ["nz-icon", "", "nzType", "close", "nzTheme", "outline"]], template: function UploadImageWithPreviewComponent_Template(rf, ctx) {
            if (rf & 1) {
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](0, "div", 0);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](1, "nz-upload", 1);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵlistener"]("nzChange", function UploadImageWithPreviewComponent_Template_nz_upload_nzChange_1_listener($event) { return ctx.handleChange($event); });
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](2, "div", 2);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtemplate"](3, UploadImageWithPreviewComponent_div_3_Template, 5, 3, "div", 3);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtemplate"](4, UploadImageWithPreviewComponent_div_4_Template, 5, 2, "div", 4);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtemplate"](5, UploadImageWithPreviewComponent_div_5_Template, 2, 4, "div", 5);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtemplate"](6, UploadImageWithPreviewComponent_div_6_Template, 2, 0, "div", 6);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
            }
            if (rf & 2) {
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](1);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("nzDisabled", ctx.disableUpload)("nzShowUploadList", false)("nzAction", ctx.uploadUrl)("nzData", ctx.uploadData);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](2);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("ngIf", !ctx.picUrl && !ctx.uploading);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](1);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("ngIf", ctx.uploading);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](1);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("ngIf", !ctx.uploading && ctx.picUrl);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](1);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("ngIf", ctx.canDelete);
            }
        }, directives: [ng_zorro_antd_upload__WEBPACK_IMPORTED_MODULE_2__["NzUploadComponent"], _angular_common__WEBPACK_IMPORTED_MODULE_3__["NgIf"], ng_zorro_antd_icon__WEBPACK_IMPORTED_MODULE_4__["NzIconDirective"], _fortawesome_angular_fontawesome__WEBPACK_IMPORTED_MODULE_5__["FaIconComponent"], ng_zorro_antd_popconfirm__WEBPACK_IMPORTED_MODULE_6__["NzPopconfirmDirective"]], pipes: [_pipes_background_image_pipe__WEBPACK_IMPORTED_MODULE_7__["BackgroundImagePipe"]], styles: [".p-image-uploader[_ngcontent-%COMP%] {\n  position: relative;\n  display: block;\n  width: 100%;\n  height: 0;\n  padding-bottom: 56.25%;\n}\n.p-image-uploader[_ngcontent-%COMP%]   .p-box[_ngcontent-%COMP%] {\n  position: absolute;\n  left: 0;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  border: 2px dashed #ddd;\n  border-radius: 0.5rem;\n  background-color: #fafafa;\n  text-align: center;\n  color: #aaa;\n}\n.p-image-uploader[_ngcontent-%COMP%]   .p-box[_ngcontent-%COMP%]   .p-upload-icon[_ngcontent-%COMP%] {\n  text-align: center;\n  margin: auto;\n}\n.p-image-uploader[_ngcontent-%COMP%]   .p-box[_ngcontent-%COMP%]   .p-upload-icon[_ngcontent-%COMP%]   .anticon-upload[_ngcontent-%COMP%] {\n  color: #888;\n  font-size: 5rem;\n}\n.p-image-uploader[_ngcontent-%COMP%]   .p-box[_ngcontent-%COMP%]   .p-upload-icon[_ngcontent-%COMP%]   .p-progress-bar[_ngcontent-%COMP%] {\n  position: relative;\n  width: 20rem;\n  height: 1.5rem;\n  border: 1px solid #ccc;\n  border-radius: 1rem;\n}\n.p-image-uploader[_ngcontent-%COMP%]   .p-box[_ngcontent-%COMP%]   .p-upload-icon[_ngcontent-%COMP%]   .p-progress-bar[_ngcontent-%COMP%]   .p-progress-bg[_ngcontent-%COMP%] {\n  background-color: #1890ff;\n  border-radius: 1rem;\n  height: 100%;\n}\n.p-image-uploader[_ngcontent-%COMP%]   .p-box[_ngcontent-%COMP%]   .p-upload-icon[_ngcontent-%COMP%]   .p-progress-bar[_ngcontent-%COMP%]   .p-progress-value[_ngcontent-%COMP%] {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  text-shadow: 0 0 4px #000;\n  color: white;\n  text-align: center;\n  font-size: 0.9rem;\n  line-height: 1.5rem;\n}\n.p-image-uploader[_ngcontent-%COMP%]   .p-box[_ngcontent-%COMP%]   .p-preview[_ngcontent-%COMP%] {\n  width: 100%;\n  height: 100%;\n  background-size: contain;\n  background-repeat: no-repeat;\n  background-position: 50% 50%;\n}\n.p-image-uploader[_ngcontent-%COMP%]   .d-flex[_ngcontent-%COMP%] {\n  display: flex;\n}\n.p-btn-delete[_ngcontent-%COMP%] {\n  position: absolute;\n  right: -0.5rem;\n  top: -0.5rem;\n  width: 2rem;\n  height: 2rem;\n  border: 0.2rem solid white;\n  border-radius: 50%;\n  font-size: 1.2rem;\n  background-color: #fb781a;\n  color: white;\n  text-align: center;\n}\n.p-upload-progress-bg[_ngcontent-%COMP%] {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.p-upload-progress-bg[_ngcontent-%COMP%]   .i-text[_ngcontent-%COMP%] {\n  position: absolute;\n  text-align: center;\n  color: white;\n  text-shadow: 0 0 2px rgba(0, 0, 0, 0.85);\n}\n.p-upload-progress-bg[_ngcontent-%COMP%]   .i-bg[_ngcontent-%COMP%] {\n  position: absolute;\n  left: 0;\n  top: 0;\n  height: 100%;\n  background-color: #27b43f;\n  border-radius: 0.5rem;\n}\n[_nghost-%COMP%]     .ant-upload {\n  display: block;\n}\n/*# sourceMappingURL=data:application/json;base64,  */"] });
    return UploadImageWithPreviewComponent;
})();



/***/ }),

/***/ "./src/app/common/upload-video/upload-video.component.ts":
/*!***************************************************************!*\
  !*** ./src/app/common/upload-video/upload-video.component.ts ***!
  \***************************************************************/
/*! exports provided: UploadVideoComponent */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "UploadVideoComponent", function() { return UploadVideoComponent; });
/* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @angular/core */ "./node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js");
/* harmony import */ var ng_zorro_antd__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ng-zorro-antd */ "./node_modules/ng-zorro-antd/__ivy_ngcc__/fesm2015/ng-zorro-antd.js");
/* harmony import */ var _angular_platform_browser__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @angular/platform-browser */ "./node_modules/@angular/platform-browser/__ivy_ngcc__/fesm2015/platform-browser.js");
/* harmony import */ var ng_zorro_antd_upload__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ng-zorro-antd/upload */ "./node_modules/ng-zorro-antd/__ivy_ngcc__/fesm2015/ng-zorro-antd-upload.js");
/* harmony import */ var _angular_common__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @angular/common */ "./node_modules/@angular/common/__ivy_ngcc__/fesm2015/common.js");
/* harmony import */ var ng_zorro_antd_icon__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ng-zorro-antd/icon */ "./node_modules/ng-zorro-antd/__ivy_ngcc__/fesm2015/ng-zorro-antd-icon.js");
/* harmony import */ var ng_zorro_antd_button__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ng-zorro-antd/button */ "./node_modules/ng-zorro-antd/__ivy_ngcc__/fesm2015/ng-zorro-antd-button.js");
/* harmony import */ var _fortawesome_angular_fontawesome__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @fortawesome/angular-fontawesome */ "./node_modules/@fortawesome/angular-fontawesome/__ivy_ngcc__/fesm2015/angular-fontawesome.js");









const _c0 = ["videoNode"];
function UploadVideoComponent_button_3_Template(rf, ctx) {
    if (rf & 1) {
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](0, "button", 10);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelement"](1, "i", 11);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](2, "span");
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtext"](3);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
    }
    if (rf & 2) {
        const ctx_r71 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵnextContext"]();
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("disabled", ctx_r71.uploading)("nzLoading", ctx_r71.uploading);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](3);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtextInterpolate"](ctx_r71.uploading ? "Uploading" : "Select Video");
    }
}
function UploadVideoComponent_div_5_div_5_Template(rf, ctx) {
    if (rf & 1) {
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](0, "div", 16);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelement"](1, "div", 17);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](2, "div", 18);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtext"](3);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
    }
    if (rf & 2) {
        const ctx_r76 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵnextContext"](2);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](1);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵstyleProp"]("width", ctx_r76.progress * 0.2 + "rem");
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](2);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtextInterpolate1"]("", ctx_r76.progress, "%");
    }
}
function UploadVideoComponent_div_5_Template(rf, ctx) {
    if (rf & 1) {
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](0, "div", 12);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelement"](1, "i", 13);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelement"](2, "div", 14);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](3, "span");
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtext"](4, "Click here to upload video");
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtemplate"](5, UploadVideoComponent_div_5_div_5_Template, 4, 3, "div", 15);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
    }
    if (rf & 2) {
        const ctx_r72 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵnextContext"]();
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](5);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("ngIf", ctx_r72.uploading);
    }
}
const _c1 = function (a0) { return { "smart-bar": a0 }; };
function UploadVideoComponent_div_6_Template(rf, ctx) {
    if (rf & 1) {
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](0, "div", 19);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelement"](1, "div", 20);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](2, "div", 21);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelement"](3, "fa-icon", 22);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtext"](4, " Uploading... ");
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
    }
    if (rf & 2) {
        const ctx_r73 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵnextContext"]();
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("ngClass", _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵpureFunction1"](3, _c1, ctx_r73.showUploadBtn));
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](1);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵstyleProp"]("width", ctx_r73.progress + "%");
    }
}
function UploadVideoComponent_div_7_Template(rf, ctx) {
    if (rf & 1) {
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](0, "div", 23);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelement"](1, "div", 20);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](2, "div", 21);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelement"](3, "fa-icon", 22);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelement"](4, "i", 9);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtext"](5, "Checking... ");
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
    }
    if (rf & 2) {
        const ctx_r74 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵnextContext"]();
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](1);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵstyleProp"]("width", ctx_r74.progress + "%");
    }
}
function UploadVideoComponent_div_8_Template(rf, ctx) {
    if (rf & 1) {
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](0, "div", 24);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelement"](1, "video", 25, 26);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
    }
    if (rf & 2) {
        const ctx_r75 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵnextContext"]();
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](1);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("src", ctx_r75.safeVideoUrl(ctx_r75.videoUrl), _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵsanitizeUrl"]);
    }
}
let UploadVideoComponent = /*@__PURE__*/ (() => {
    class UploadVideoComponent {
        constructor(nzMessageService, sanitization
        // private cwService: _coursewareService,
        // private resService: ResourceService
        ) {
            this.nzMessageService = nzMessageService;
            this.sanitization = sanitization;
            this.uploading = false;
            this.checking = false;
            this.checkVideoExists = false;
            this.uploadClicked = false;
            this.videoFile = null;
            this.uploaderInst = null;
            this.progress = 0;
            // @Input()
            // setCovering = false;
            this.videoUrl = '';
            // @Input()
            // extractCoverFunc = null;
            this.videoUploaded = new _angular_core__WEBPACK_IMPORTED_MODULE_0__["EventEmitter"]();
            this.videoUploadFailure = new _angular_core__WEBPACK_IMPORTED_MODULE_0__["EventEmitter"]();
            this.extractVideoCover = new _angular_core__WEBPACK_IMPORTED_MODULE_0__["EventEmitter"]();
            this.showUploadBtn = true;
            this.checkHashFinish = (hash) => {
                this.checking = false;
                this.uploading = true;
            };
            this.uploadSuccess = (file) => {
                this.nzMessageService.info('Upload Success');
                // this.updateStatus(false);
                this.uploading = false;
                this.videoFile = null;
                // this.updateSource(url);
                this.videoUrl = file.response.url;
                // console.log(this.picUrl)
                // this.uploadFinished(url);
                // if (!inOSS) {
                const vid = document.createElement('video');
                vid.addEventListener('loadedmetadata', () => {
                    const height = vid.videoHeight;
                    const width = vid.videoWidth;
                    let duration = vid.duration;
                    if (duration) {
                        duration = duration * 1000;
                    }
                    file.height = height;
                    file.width = width;
                    file.duration = duration;
                    vid.preload = 'none';
                    vid.src = '';
                    vid.remove();
                    this.videoUploaded.emit(file.response);
                    // this.resService.updateVideo(id, {width, height, duration}).then( () => {
                    //   this.videoUploaded.emit({res_id: id, id, name, hash, url});
                    // });
                });
                vid.src = file.response.url;
                // } else {
                //   this.videoUploaded.emit(file.response);
                // }
            };
            this.uploadFailure = (err, file) => {
                this.uploading = false;
                if (err.name && err.name === 'cancel') {
                    return;
                }
                console.log(err);
                this.nzMessageService.error('Upload Error ' + err.message);
                this.videoUploadFailure.emit(file);
            };
            this.doProgress = (p) => {
                if (p > 1) {
                    p = 1;
                }
                if (p < 0) {
                    p = 0;
                }
                // console.log(Math.floor(p * 100));
                this.progress = Math.floor(p * 100);
            };
            this.uploading = false;
            this.videoFile = null;
            this.uploadUrl = window.courseware.uploadUrl();
            this.uploadData = window.courseware.uploadData();
            window['air'].getUploadCallback = (url, data) => {
                this.uploadUrl = url;
                this.uploadData = data;
            };
        }
        ngOnChanges() {
            // if (!this.videoFile || this.showUploadBtn) {
            //   return;
            // }
            // this.beforeUpload(this.videoFile);
            // this.handleUpload();
        }
        ngOnDestroy() {
            URL.revokeObjectURL(this.videoUrl);
        }
        safeVideoUrl(url) {
            console.log(url);
            return this.sanitization.bypassSecurityTrustResourceUrl(url); // `${url}`;
        }
        videoLoadedMetaData() {
        }
        handleChange(info /* { type: string, file: UploadFile, event: any }*/) {
            console.log('info:', info);
            switch (info.type) {
                case 'start':
                    // this.beforeUpload(info.file);
                    if (!this.checkSelectFile(info.file)) {
                        return;
                    }
                    this.uploading = true;
                    this.progress = 0;
                    break;
                case 'success':
                    this.uploadSuccess(info.file);
                    // this.beforeUpload(info.file);
                    // this.uploadSuccess(info.file);
                    break;
                case 'progress':
                    this.progress = info.event.percent;
                    this.doProgress(this.progress);
                    break;
            }
        }
        checkSelectFile(file) {
            if (!file.lastModified) {
                return false;
            }
            const delta = 500;
            const isOverSize = (file.size / 1024 / 1024) < delta;
            if (!isOverSize) {
                this.nzMessageService.error(`video must smaller than ${delta}MB!`);
                return false;
            }
            return true;
        }
    }
    UploadVideoComponent.ɵfac = function UploadVideoComponent_Factory(t) { return new (t || UploadVideoComponent)(_angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵdirectiveInject"](ng_zorro_antd__WEBPACK_IMPORTED_MODULE_1__["NzMessageService"]), _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵdirectiveInject"](_angular_platform_browser__WEBPACK_IMPORTED_MODULE_2__["DomSanitizer"])); };
    UploadVideoComponent.ɵcmp = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵdefineComponent"]({ type: UploadVideoComponent, selectors: [["app-upload-video"]], viewQuery: function UploadVideoComponent_Query(rf, ctx) {
            if (rf & 1) {
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵstaticViewQuery"](_c0, true);
            }
            if (rf & 2) {
                var _t;
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵqueryRefresh"](_t = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵloadQuery"]()) && (ctx.videoNode = _t.first);
            }
        }, inputs: { videoFile: "videoFile", videoUrl: "videoUrl", showUploadBtn: "showUploadBtn", item: "item" }, outputs: { videoUploaded: "videoUploaded", videoUploadFailure: "videoUploadFailure", extractVideoCover: "extractVideoCover" }, features: [_angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵNgOnChangesFeature"]], decls: 13, vars: 11, consts: [[1, "p-video-box"], [1, "up-video", 2, "display", "flex"], ["nzAccept", ".mp4", 1, "p-image-uploader", 2, "margin-right", "1rem", 3, "nzDisabled", "nzShowUploadList", "nzAction", "nzData", "nzChange"], ["type", "button", "nz-button", "", "nzType", "default", 3, "disabled", "nzLoading", 4, "ngIf"], [1, "p-box", "d-flex", "align-items-center", "p-video-uploader"], ["class", "p-upload-icon", 4, "ngIf"], ["class", "p-upload-progress-bg dddd ", 3, "ngClass", 4, "ngIf"], ["class", "p-upload-check-bg", 4, "ngIf"], ["class", "p-preview", 4, "ngIf"], ["nz-icon", "", "nzType", "loading", "nzTheme", "outline"], ["type", "button", "nz-button", "", "nzType", "default", 3, "disabled", "nzLoading"], ["nz-icon", "", "nzType", "plus", "nzTheme", "outline"], [1, "p-upload-icon"], ["nz-icon", "", "nzType", "upload", "nzTheme", "outline"], [1, "m-3"], ["class", "mt-5 p-progress-bar", 4, "ngIf"], [1, "mt-5", "p-progress-bar"], [1, "p-progress-bg"], [1, "p-progress-value"], [1, "p-upload-progress-bg", "dddd", 3, "ngClass"], [1, "i-bg"], [1, "i-text"], ["icon", "cloud-upload-alt"], [1, "p-upload-check-bg"], [1, "p-preview"], ["controls", "", 3, "src"], ["videoNode", ""]], template: function UploadVideoComponent_Template(rf, ctx) {
            if (rf & 1) {
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](0, "div", 0);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](1, "div", 1);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](2, "nz-upload", 2);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵlistener"]("nzChange", function UploadVideoComponent_Template_nz_upload_nzChange_2_listener($event) { return ctx.handleChange($event); });
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtemplate"](3, UploadVideoComponent_button_3_Template, 4, 3, "button", 3);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](4, "div", 4);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtemplate"](5, UploadVideoComponent_div_5_Template, 6, 1, "div", 5);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtemplate"](6, UploadVideoComponent_div_6_Template, 5, 5, "div", 6);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtemplate"](7, UploadVideoComponent_div_7_Template, 6, 2, "div", 7);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtemplate"](8, UploadVideoComponent_div_8_Template, 3, 1, "div", 8);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](9, "div");
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](10, "span");
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelement"](11, "i", 9);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtext"](12, " checking file to upload");
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
            }
            if (rf & 2) {
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](2);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("nzDisabled", ctx.uploading)("nzShowUploadList", false)("nzAction", ctx.uploadUrl)("nzData", ctx.uploadData);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](1);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("ngIf", ctx.showUploadBtn);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](2);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("ngIf", !ctx.showUploadBtn && !ctx.videoUrl && !ctx.uploading);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](1);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("ngIf", ctx.uploading);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](1);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("ngIf", ctx.checking);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](1);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("ngIf", !ctx.uploading && ctx.videoUrl);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](1);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵstyleProp"]("display", !ctx.checkVideoExists ? "none" : "");
            }
        }, directives: [ng_zorro_antd_upload__WEBPACK_IMPORTED_MODULE_3__["NzUploadComponent"], _angular_common__WEBPACK_IMPORTED_MODULE_4__["NgIf"], ng_zorro_antd_icon__WEBPACK_IMPORTED_MODULE_5__["NzIconDirective"], ng_zorro_antd_button__WEBPACK_IMPORTED_MODULE_6__["NzButtonComponent"], _angular_common__WEBPACK_IMPORTED_MODULE_4__["NgClass"], _fortawesome_angular_fontawesome__WEBPACK_IMPORTED_MODULE_7__["FaIconComponent"]], styles: [".p-video-uploader[_ngcontent-%COMP%] {\n  position: relative;\n  display: block;\n  width: 100%;\n  height: 0;\n  padding-bottom: 56.25%;\n}\n.p-video-uploader[_ngcontent-%COMP%]   .p-box[_ngcontent-%COMP%] {\n  position: absolute;\n  left: 0;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  border: 2px dashed #ddd;\n  background-color: #fafafa;\n  text-align: center;\n  color: #aaa;\n}\n.p-upload-icon[_ngcontent-%COMP%] {\n  text-align: center;\n  margin: auto;\n}\n.p-upload-icon[_ngcontent-%COMP%]   .anticon-upload[_ngcontent-%COMP%] {\n  color: #888;\n  font-size: 5rem;\n}\np-progress-bar[_ngcontent-%COMP%] {\n  position: relative;\n  width: 20rem;\n  height: 1.5rem;\n  border: 1px solid #ccc;\n  border-radius: 1rem;\n}\n.p-progress-bar[_ngcontent-%COMP%]   .p-progress-bg[_ngcontent-%COMP%] {\n  background-color: #1890ff;\n  border-radius: 1rem;\n  height: 100%;\n}\n.p-progress-bar[_ngcontent-%COMP%]   .p-progress-value[_ngcontent-%COMP%] {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  text-shadow: 0 0 4px #000;\n  color: white;\n  text-align: center;\n  font-size: 0.9rem;\n  line-height: 1.5rem;\n}\n.p-preview[_ngcontent-%COMP%] {\n  width: 100%;\n  height: 100%;\n}\n.p-preview[_ngcontent-%COMP%]   video[_ngcontent-%COMP%] {\n  max-height: 100%;\n  max-width: 100%;\n  position: absolute;\n  display: flex;\n}\n.p-btn-delete[_ngcontent-%COMP%] {\n  position: absolute;\n  right: -0.5rem;\n  top: -0.5rem;\n  width: 2rem;\n  height: 2rem;\n  border: 0.2rem solid white;\n  border-radius: 50%;\n  font-size: 1.2rem;\n  background-color: #fb781a;\n  color: white;\n  text-align: center;\n}\n.p-upload-progress-bg[_ngcontent-%COMP%], .p-upload-check-bg[_ngcontent-%COMP%] {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.p-upload-progress-bg[_ngcontent-%COMP%]   .i-text[_ngcontent-%COMP%], .p-upload-check-bg[_ngcontent-%COMP%]   .i-text[_ngcontent-%COMP%] {\n  position: absolute;\n  text-align: center;\n  color: white;\n  text-shadow: 0 0 2px rgba(0, 0, 0, 0.85);\n}\n.p-upload-progress-bg[_ngcontent-%COMP%]   .i-bg[_ngcontent-%COMP%], .p-upload-check-bg[_ngcontent-%COMP%]   .i-bg[_ngcontent-%COMP%] {\n  position: absolute;\n  left: 0;\n  top: 0;\n  height: 100%;\n  background-color: #1890ff;\n}\n.p-upload-progress-bg.smart-bar[_ngcontent-%COMP%] {\n  height: 50px !important;\n  margin-top: 20px !important;\n}\n.p-upload-check-bg[_ngcontent-%COMP%] {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.p-upload-check-bg[_ngcontent-%COMP%]   .i-text[_ngcontent-%COMP%] {\n  position: absolute;\n  text-align: center;\n  color: white;\n  text-shadow: 0 0 2px rgba(0, 0, 0, 0.85);\n}\n.p-upload-check-bg[_ngcontent-%COMP%]   .i-bg[_ngcontent-%COMP%] {\n  position: absolute;\n  left: 0;\n  top: 0;\n  height: 100%;\n  background-color: #17a2b8;\n}\n/*# sourceMappingURL=data:application/json;base64,  */"] });
    return UploadVideoComponent;
})();



/***/ }),

/***/ "./src/app/form/form.component.ts":
/*!****************************************!*\
  !*** ./src/app/form/form.component.ts ***!
  \****************************************/
/*! exports provided: FormComponent */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "FormComponent", function() { return FormComponent; });
/* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @angular/core */ "./node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js");
/* harmony import */ var ng_zorro_antd_switch__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ng-zorro-antd/switch */ "./node_modules/ng-zorro-antd/__ivy_ngcc__/fesm2015/ng-zorro-antd-switch.js");
/* harmony import */ var _angular_forms__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @angular/forms */ "./node_modules/@angular/forms/__ivy_ngcc__/fesm2015/forms.js");
/* harmony import */ var _angular_common__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @angular/common */ "./node_modules/@angular/common/__ivy_ngcc__/fesm2015/common.js");
/* harmony import */ var ng_zorro_antd_grid__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ng-zorro-antd/grid */ "./node_modules/ng-zorro-antd/__ivy_ngcc__/fesm2015/ng-zorro-antd-grid.js");
/* harmony import */ var ng_zorro_antd_button__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ng-zorro-antd/button */ "./node_modules/ng-zorro-antd/__ivy_ngcc__/fesm2015/ng-zorro-antd-button.js");
/* harmony import */ var ng_zorro_antd_icon__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ng-zorro-antd/icon */ "./node_modules/ng-zorro-antd/__ivy_ngcc__/fesm2015/ng-zorro-antd-icon.js");
/* harmony import */ var _common_audio_recorder_audio_recorder_component__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../common/audio-recorder/audio-recorder.component */ "./src/app/common/audio-recorder/audio-recorder.component.ts");
/* harmony import */ var ng_zorro_antd_input__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ng-zorro-antd/input */ "./node_modules/ng-zorro-antd/__ivy_ngcc__/fesm2015/ng-zorro-antd-input.js");










function FormComponent_div_4_div_7_Template(rf, ctx) {
    if (rf & 1) {
        const _r9 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵgetCurrentView"]();
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](0, "div");
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](1, "div", 15);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](2, "span", 8);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtext"](3, "\u6B63\u786E\u5B57\u6BCD\uFF1A");
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](4, "input", 16);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵlistener"]("ngModelChange", function FormComponent_div_4_div_7_Template_input_ngModelChange_4_listener($event) { _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵrestoreView"](_r9); const question_r6 = ctx.$implicit; return question_r6.rightWord = $event; })("blur", function FormComponent_div_4_div_7_Template_input_blur_4_listener() { _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵrestoreView"](_r9); const ctx_r10 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵnextContext"](2); return ctx_r10.save(); });
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelement"](5, "br");
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelement"](6, "br");
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](7, "span", 8);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtext"](8, "\u6B63\u786E\u5B57\u6BCD\u97F3\u9891\uFF1A");
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](9, "app-audio-recorder", 9);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵlistener"]("audioUploaded", function FormComponent_div_4_div_7_Template_app_audio_recorder_audioUploaded_9_listener($event) { _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵrestoreView"](_r9); const j_r7 = ctx.index; const i_r4 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵnextContext"]().index; const ctx_r11 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵnextContext"](); return ctx_r11.onQuestionAudioUploadSuccess($event, i_r4, j_r7); });
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelement"](10, "br");
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelement"](11, "br");
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](12, "span", 8);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtext"](13, "\u9519\u8BEF\u5B57\u6BCD\uFF1A");
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](14, "div", 17);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](15, "input", 18);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵlistener"]("ngModelChange", function FormComponent_div_4_div_7_Template_input_ngModelChange_15_listener($event) { _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵrestoreView"](_r9); const question_r6 = ctx.$implicit; return (question_r6.wrongWordList[0] = $event); })("blur", function FormComponent_div_4_div_7_Template_input_blur_15_listener() { _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵrestoreView"](_r9); const ctx_r14 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵnextContext"](2); return ctx_r14.save(); });
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](16, "app-audio-recorder", 9);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵlistener"]("audioUploaded", function FormComponent_div_4_div_7_Template_app_audio_recorder_audioUploaded_16_listener($event) { _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵrestoreView"](_r9); const j_r7 = ctx.index; const i_r4 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵnextContext"]().index; const ctx_r15 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵnextContext"](); return ctx_r15.onQuestionWrongAudioUploadSuccess($event, i_r4, j_r7, 0); });
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelement"](17, "br");
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelement"](18, "br");
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](19, "input", 18);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵlistener"]("ngModelChange", function FormComponent_div_4_div_7_Template_input_ngModelChange_19_listener($event) { _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵrestoreView"](_r9); const question_r6 = ctx.$implicit; return (question_r6.wrongWordList[1] = $event); })("blur", function FormComponent_div_4_div_7_Template_input_blur_19_listener() { _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵrestoreView"](_r9); const ctx_r18 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵnextContext"](2); return ctx_r18.save(); });
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](20, "app-audio-recorder", 9);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵlistener"]("audioUploaded", function FormComponent_div_4_div_7_Template_app_audio_recorder_audioUploaded_20_listener($event) { _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵrestoreView"](_r9); const j_r7 = ctx.index; const i_r4 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵnextContext"]().index; const ctx_r19 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵnextContext"](); return ctx_r19.onQuestionWrongAudioUploadSuccess($event, i_r4, j_r7, 1); });
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelement"](21, "br");
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelement"](22, "br");
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelement"](23, "br");
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelement"](24, "br");
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](25, "div", 19);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](26, "button", 13);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵlistener"]("click", function FormComponent_div_4_div_7_Template_button_click_26_listener() { _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵrestoreView"](_r9); const j_r7 = ctx.index; const i_r4 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵnextContext"]().index; const ctx_r21 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵnextContext"](); return ctx_r21.removeQuestion(i_r4, j_r7); });
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelement"](27, "i", 14);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtext"](28, " \u5220\u9664\u5B57\u6BCD ");
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
    }
    if (rf & 2) {
        const question_r6 = ctx.$implicit;
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](4);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("ngModel", question_r6.rightWord);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](5);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("audioUrl", question_r6.rightAudio);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](6);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("ngModel", question_r6.wrongWordList[0]);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](1);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("audioUrl", question_r6.wrongAudioList[0]);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](3);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("ngModel", question_r6.wrongWordList[1]);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](1);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("audioUrl", question_r6.wrongAudioList[1]);
    }
}
function FormComponent_div_4_Template(rf, ctx) {
    if (rf & 1) {
        const _r24 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵgetCurrentView"]();
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](0, "div");
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](1, "div", 4);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](2, "span", 8);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtext"](3, "\u5355\u8BCD\u97F3\u9891\uFF1A");
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](4, "app-audio-recorder", 9);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵlistener"]("audioUploaded", function FormComponent_div_4_Template_app_audio_recorder_audioUploaded_4_listener($event) { _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵrestoreView"](_r24); const i_r4 = ctx.index; const ctx_r23 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵnextContext"](); return ctx_r23.onRoundAudioUploadSuccess($event, i_r4); });
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelement"](5, "br");
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelement"](6, "br");
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtemplate"](7, FormComponent_div_4_div_7_Template, 29, 6, "div", 3);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](8, "div", 10);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](9, "div", 11);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](10, "button", 6);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵlistener"]("click", function FormComponent_div_4_Template_button_click_10_listener() { _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵrestoreView"](_r24); const i_r4 = ctx.index; const ctx_r25 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵnextContext"](); return ctx_r25.addQuestion(i_r4); });
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelement"](11, "i", 7);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtext"](12, " \u589E\u52A0\u5B57\u6BCD ");
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelement"](13, "br");
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelement"](14, "br");
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](15, "div", 12);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](16, "button", 13);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵlistener"]("click", function FormComponent_div_4_Template_button_click_16_listener() { _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵrestoreView"](_r24); const i_r4 = ctx.index; const ctx_r26 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵnextContext"](); return ctx_r26.removeRound(i_r4); });
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelement"](17, "i", 14);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtext"](18, " \u5220\u9664\u5355\u8BCD ");
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
    }
    if (rf & 2) {
        const round_r3 = ctx.$implicit;
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](4);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("audioUrl", round_r3.audio);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](3);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("ngForOf", round_r3.questionList);
    }
}
let FormComponent = /*@__PURE__*/ (() => {
    class FormComponent {
        constructor(appRef, changeDetectorRef) {
            this.appRef = appRef;
            this.changeDetectorRef = changeDetectorRef;
            // 储存数据用
            this.saveKey = "tyzdc_001";
        }
        addRound() {
            this.item.roundList.push({
                audio: '',
                questionList: []
            });
            this.save();
        }
        removeRound(roundIdx) {
            this.item.roundList.splice(roundIdx, 1);
            this.save();
        }
        addQuestion(roundIdx) {
            this.item.roundList[roundIdx].questionList.push({
                rightAudio: '',
                rightWord: '',
                wrongWordList: ['', ''],
                wrongAudioList: ['', '']
            });
            this.save();
        }
        removeQuestion(roundIdx, questionIdx) {
            this.item.roundList[roundIdx].questionList.splice(questionIdx, 1);
            this.save();
        }
        ngOnInit() {
            // this.item = {};
            this.item = {
                bgAudio: true,
                roundList: []
            };
            // 获取存储的数据
            window.courseware.getData((data) => {
                if (data) {
                    this.item = data;
                }
                if (this.item.bgAudio === undefined) {
                    this.item.bgAudio = true;
                }
                this.init();
                this.changeDetectorRef.markForCheck();
                this.changeDetectorRef.detectChanges();
                this.refresh();
            }, this.saveKey);
            console.log('this.item = ' + JSON.stringify(this.item));
        }
        ngOnChanges() {
        }
        ngOnDestroy() {
        }
        init() {
        }
        /**
         * 储存图片数据
         * @param e
         */
        onImageUploadSuccess(e, key) {
            this.item[key] = e.url;
            this.save();
        }
        /**
         * 储存音频数据
         * @param e
         */
        onAudioUploadSuccess(e, key) {
            this.item[key] = e.url;
            this.save();
        }
        onRoundAudioUploadSuccess(e, idx) {
            this.item.roundList[idx].audio = e.url;
            this.save();
        }
        onQuestionAudioUploadSuccess(e, roundIdx, questionIdx) {
            this.item.roundList[roundIdx].questionList[questionIdx].rightAudio = e.url;
            this.save();
        }
        onQuestionWrongAudioUploadSuccess(e, roundIdx, questionIdx, wrongIdx) {
            this.item.roundList[roundIdx].questionList[questionIdx].wrongAudioList[wrongIdx] = e.url;
            this.save();
        }
        onChange() {
            this.save();
        }
        /**
         * 储存数据
         */
        save() {
            console.log(this.item);
            window.courseware.setData(this.item, null, this.saveKey);
            this.refresh();
        }
        /**
         * 刷新 渲染页面
         */
        refresh() {
            setTimeout(() => {
                this.appRef.tick();
            }, 1);
        }
    }
    FormComponent.ɵfac = function FormComponent_Factory(t) { return new (t || FormComponent)(_angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵdirectiveInject"](_angular_core__WEBPACK_IMPORTED_MODULE_0__["ApplicationRef"]), _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵdirectiveInject"](_angular_core__WEBPACK_IMPORTED_MODULE_0__["ChangeDetectorRef"])); };
    FormComponent.ɵcmp = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵdefineComponent"]({ type: FormComponent, selectors: [["app-form"]], features: [_angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵNgOnChangesFeature"]], decls: 10, vars: 2, consts: [[1, "model-content"], [2, "padding", "10px"], ["nzCheckedChildren", "\u5F00", "nzUnCheckedChildren", "\u5173", 3, "ngModel", "ngModelChange", "click"], [4, "ngFor", "ngForOf"], [1, "border", 2, "float", "left"], ["nz-col", "", "nzSpan", "8", 1, "add-btn-box", 2, "float", "left", "width", "560px", "height", "100px", "padding", "20px"], ["nz-button", "", "nzType", "dashed", 1, "add-btn", 2, "margin", "auto", "width", "100%", "height", "100%", 3, "click"], ["nz-icon", "", "nzType", "plus-circle", "nzTheme", "outline"], [2, "float", "left", "height", "30px", "font-size", "18px"], [2, "float", "left", 3, "audioUrl", "audioUploaded"], [1, "border", 2, "float", "left", "width", "520px", "height", "90px"], ["nz-col", "", "nzSpan", "8", 1, "add-btn-box", 2, "float", "left", "width", "100%", "height", "100%"], ["nz-col", "", "nzSpan", "8", 1, "add-btn-box", 2, "float", "left", "width", "560px", "height", "50px"], ["nz-button", "", "nzType", "dashed", 1, "add-btn", 2, "margin", "auto", "width", "100%", "height", "100%", "color", "red", 3, "click"], ["nz-icon", "", "nzType", "minus-circle", "nzTheme", "outline"], [1, "border", 2, "float", "left", "width", "520px", "height", "270px"], ["type", "text", "nz-input", "", 2, "float", "left", "width", "150px", 3, "ngModel", "ngModelChange", "blur"], [2, "float", "left"], ["type", "text", "nz-input", "", 2, "float", "left", "width", "70px", 3, "ngModel", "ngModelChange", "blur"], ["nz-col", "", "nzSpan", "8", 1, "add-btn-box", 2, "float", "left", "width", "480px", "height", "40px"]], template: function FormComponent_Template(rf, ctx) {
            if (rf & 1) {
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](0, "div", 0);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](1, "div", 1);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtext"](2, " \u80CC\u666F\u97F3\u4E50 ");
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](3, "nz-switch", 2);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵlistener"]("ngModelChange", function FormComponent_Template_nz_switch_ngModelChange_3_listener($event) { return ctx.item.bgAudio = $event; })("click", function FormComponent_Template_nz_switch_click_3_listener() { return ctx.onChange(); });
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtemplate"](4, FormComponent_div_4_Template, 19, 2, "div", 3);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](5, "div", 4);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](6, "div", 5);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](7, "button", 6);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵlistener"]("click", function FormComponent_Template_button_click_7_listener() { return ctx.addRound(); });
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelement"](8, "i", 7);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtext"](9, " \u589E\u52A0\u5355\u8BCD ");
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
            }
            if (rf & 2) {
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](3);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("ngModel", ctx.item.bgAudio);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](1);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("ngForOf", ctx.item.roundList);
            }
        }, directives: [ng_zorro_antd_switch__WEBPACK_IMPORTED_MODULE_1__["NzSwitchComponent"], _angular_forms__WEBPACK_IMPORTED_MODULE_2__["NgControlStatus"], _angular_forms__WEBPACK_IMPORTED_MODULE_2__["NgModel"], _angular_common__WEBPACK_IMPORTED_MODULE_3__["NgForOf"], ng_zorro_antd_grid__WEBPACK_IMPORTED_MODULE_4__["NzColDirective"], ng_zorro_antd_button__WEBPACK_IMPORTED_MODULE_5__["NzButtonComponent"], ng_zorro_antd_icon__WEBPACK_IMPORTED_MODULE_6__["NzIconDirective"], _common_audio_recorder_audio_recorder_component__WEBPACK_IMPORTED_MODULE_7__["AudioRecorderComponent"], _angular_forms__WEBPACK_IMPORTED_MODULE_2__["DefaultValueAccessor"], ng_zorro_antd_input__WEBPACK_IMPORTED_MODULE_8__["NzInputDirective"]], styles: [".model-content[_ngcontent-%COMP%] {\n  width: 100%;\n  height: 100%;\n\n}\n\n\n.radioPaire[_ngcontent-%COMP%] {\n  float: left;\n  margin: 3px;\n  border-style: dashed;\n  border-color: #000;\n  border-width: 1px;\n}\n\n\n.border[_ngcontent-%COMP%] {\n  border-radius: 20px;\n  border-style: dashed;\n  padding: 20px;\n  margin: 20px;\n  \n  \n  \n  \n}\n\n\n.border-lite[_ngcontent-%COMP%] {\n  border: 2px dashed #ddd;\n  border-radius: 0.5rem;\n  padding: 10px;\n  margin: 10px;\n}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNyYy9hcHAvc3R5bGUvY29tbW9uX21peGluLmNzcyIsInNyYy9hcHAvZm9ybS9mb3JtLmNvbXBvbmVudC5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0NBRUM7OztBQ0NEO0VBQ0UsV0FBVztFQUNYLFlBQVk7O0FBRWQ7OztBQUVBO0VBQ0UsV0FBVztFQUNYLFdBQVc7RUFDWCxvQkFBb0I7RUFDcEIsa0JBQWtCO0VBQ2xCLGlCQUFpQjtBQUNuQjs7O0FBRUE7RUFDRSxtQkFBbUI7RUFDbkIsb0JBQW9CO0VBQ3BCLGFBQWE7RUFDYixZQUFZO0VBQ1osaUJBQWlCO0VBQ2pCLHlCQUF5QjtFQUN6Qix1QkFBdUI7RUFDdkIsMkJBQTJCO0FBQzdCOzs7QUFHQTtFQUNFLHVCQUF1QjtFQUN2QixxQkFBcUI7RUFDckIsYUFBYTtFQUNiLFlBQVk7QUFDZCIsImZpbGUiOiJzcmMvYXBwL2Zvcm0vZm9ybS5jb21wb25lbnQuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLypcbmdsb2JhbCBjc3MgdG8gbWl4aW5cbiovXG5cblxuXG4iLCJAaW1wb3J0ICcuLi9zdHlsZS9jb21tb25fbWl4aW4uY3NzJztcblxuXG4ubW9kZWwtY29udGVudCB7XG4gIHdpZHRoOiAxMDAlO1xuICBoZWlnaHQ6IDEwMCU7XG5cbn1cblxuLnJhZGlvUGFpcmUge1xuICBmbG9hdDogbGVmdDtcbiAgbWFyZ2luOiAzcHg7XG4gIGJvcmRlci1zdHlsZTogZGFzaGVkO1xuICBib3JkZXItY29sb3I6ICMwMDA7XG4gIGJvcmRlci13aWR0aDogMXB4O1xufVxuXG4uYm9yZGVyIHtcbiAgYm9yZGVyLXJhZGl1czogMjBweDtcbiAgYm9yZGVyLXN0eWxlOiBkYXNoZWQ7XG4gIHBhZGRpbmc6IDIwcHg7XG4gIG1hcmdpbjogMjBweDtcbiAgLyp3aWR0aDogNTAwcHg7ICovXG4gIC8qLy9ib3JkZXItcmFkaXVzOiAyMHB4OyovXG4gIC8qLy9ib3JkZXItd2lkdGg6IDJweDsqL1xuICAvKi8vYm9yZGVyLWNvbG9yOiAjMDAwMDAwOyovXG59XG5cblxuLmJvcmRlci1saXRlIHtcbiAgYm9yZGVyOiAycHggZGFzaGVkICNkZGQ7XG4gIGJvcmRlci1yYWRpdXM6IDAuNXJlbTtcbiAgcGFkZGluZzogMTBweDtcbiAgbWFyZ2luOiAxMHB4O1xufVxuIl19 */"] });
    return FormComponent;
})();



/***/ }),

/***/ "./src/app/pipes/background-image.pipe.ts":
/*!************************************************!*\
  !*** ./src/app/pipes/background-image.pipe.ts ***!
  \************************************************/
/*! exports provided: BackgroundImagePipe */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "BackgroundImagePipe", function() { return BackgroundImagePipe; });
/* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @angular/core */ "./node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js");


// const isInElectron = localStorage.getItem('electron');
let BackgroundImagePipe = /*@__PURE__*/ (() => {
    class BackgroundImagePipe {
        transform(value, coursewareSid) {
            // const ret = value ? `url(${value})` : '';
            const ret = value ? `url(${value})` : '';
            return ret;
            // let ret = value > 0 ? `url(/api/media-resource/${value}/file)` : '';
            // if (isInElectron && ElectronUtil.hasCached(coursewareSid, value)) {
            //   ret = `url(file://${APP_PATH}/courseware_cache/${coursewareSid}/${value})`;
            // }
            // return ret;
        }
    }
    BackgroundImagePipe.ɵfac = function BackgroundImagePipe_Factory(t) { return new (t || BackgroundImagePipe)(); };
    BackgroundImagePipe.ɵpipe = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵdefinePipe"]({ name: "backgroundImage", type: BackgroundImagePipe, pure: true });
    return BackgroundImagePipe;
})();



/***/ }),

/***/ "./src/app/pipes/resource.pipe.ts":
/*!****************************************!*\
  !*** ./src/app/pipes/resource.pipe.ts ***!
  \****************************************/
/*! exports provided: ResourcePipe */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ResourcePipe", function() { return ResourcePipe; });
/* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @angular/core */ "./node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js");


// const isInElectron = localStorage.getItem('electron');
let ResourcePipe = /*@__PURE__*/ (() => {
    class ResourcePipe {
        transform(pic_url, coursewareSid) {
            // return pic_url;
            if (pic_url && typeof pic_url === 'object') {
                return pic_url;
            }
            // console.log('resource', pic_url)
            return `${pic_url}?t=${Math.random()}`;
            // let ret = value ? `/api/resource/${value}/file` : '';
            // let ret = res_id ? `/resource/audio/${res_id}` : '';
            // if (isInElectron && ElectronUtil.hasCached(coursewareSid, res_id)) {
            //   ret = `file://${APP_PATH}/courseware_cache/${coursewareSid}/${res_id}`;
            // }
            // return ret;
        }
    }
    ResourcePipe.ɵfac = function ResourcePipe_Factory(t) { return new (t || ResourcePipe)(); };
    ResourcePipe.ɵpipe = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵdefinePipe"]({ name: "resource", type: ResourcePipe, pure: true });
    return ResourcePipe;
})();



/***/ }),

/***/ "./src/app/pipes/time.pipe.ts":
/*!************************************!*\
  !*** ./src/app/pipes/time.pipe.ts ***!
  \************************************/
/*! exports provided: TimePipe */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "TimePipe", function() { return TimePipe; });
/* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @angular/core */ "./node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js");
/* harmony import */ var lodash__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! lodash */ "./node_modules/lodash/lodash.js");
/* harmony import */ var lodash__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(lodash__WEBPACK_IMPORTED_MODULE_1__);



let TimePipe = /*@__PURE__*/ (() => {
    class TimePipe {
        transform(value, args) {
            let ret = '00:00';
            if (lodash__WEBPACK_IMPORTED_MODULE_1__["isNumber"](value) && value > 0) {
                const minutes = Math.floor(value / 60);
                const seconds = Math.floor(value % 60);
                ret = lodash__WEBPACK_IMPORTED_MODULE_1__["padStart"](minutes, 2, '0') + ':' + lodash__WEBPACK_IMPORTED_MODULE_1__["padStart"](seconds, 2, '0');
            }
            return ret;
        }
    }
    TimePipe.ɵfac = function TimePipe_Factory(t) { return new (t || TimePipe)(); };
    TimePipe.ɵpipe = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵdefinePipe"]({ name: "time", type: TimePipe, pure: true });
    return TimePipe;
})();



/***/ }),

/***/ "./src/app/play/Unit.ts":
/*!******************************!*\
  !*** ./src/app/play/Unit.ts ***!
  \******************************/
/*! exports provided: MySprite, ColorSpr, GrayscaleSpr, BitMapLabel, Label, RichTextOld, RichText, LineRect, ShapeRect, ShapeCircle, ShapeRectNew, MyAnimation, tweenChange, rotateItem, scaleItem, moveItem, endShow, hideItem, showItem, alphaItem, showStar, randomSortByArr, radianToAngle, angleToRadian, getPosByAngle, getAngleByPos, removeItemFromArr, circleMove, getPosDistance, delayCall, formatTime, getMinScale, jelly, showPopParticle, shake */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "MySprite", function() { return MySprite; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ColorSpr", function() { return ColorSpr; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "GrayscaleSpr", function() { return GrayscaleSpr; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "BitMapLabel", function() { return BitMapLabel; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Label", function() { return Label; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "RichTextOld", function() { return RichTextOld; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "RichText", function() { return RichText; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "LineRect", function() { return LineRect; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ShapeRect", function() { return ShapeRect; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ShapeCircle", function() { return ShapeCircle; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ShapeRectNew", function() { return ShapeRectNew; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "MyAnimation", function() { return MyAnimation; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "tweenChange", function() { return tweenChange; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "rotateItem", function() { return rotateItem; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "scaleItem", function() { return scaleItem; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "moveItem", function() { return moveItem; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "endShow", function() { return endShow; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "hideItem", function() { return hideItem; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "showItem", function() { return showItem; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "alphaItem", function() { return alphaItem; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "showStar", function() { return showStar; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "randomSortByArr", function() { return randomSortByArr; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "radianToAngle", function() { return radianToAngle; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "angleToRadian", function() { return angleToRadian; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getPosByAngle", function() { return getPosByAngle; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getAngleByPos", function() { return getAngleByPos; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "removeItemFromArr", function() { return removeItemFromArr; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "circleMove", function() { return circleMove; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getPosDistance", function() { return getPosDistance; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "delayCall", function() { return delayCall; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "formatTime", function() { return formatTime; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getMinScale", function() { return getMinScale; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "jelly", function() { return jelly; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "showPopParticle", function() { return showPopParticle; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "shake", function() { return shake; });
/* harmony import */ var _tweenjs_tween_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tweenjs/tween.js */ "./node_modules/@tweenjs/tween.js/dist/tween.esm.js");

class Sprite {
    constructor(ctx = null) {
        this.x = 0;
        this.y = 0;
        this.color = '';
        this.radius = 0;
        this.alive = false;
        this.margin = 0;
        this.angle = 0;
        if (!ctx) {
            this.ctx = window.curCtx;
        }
        else {
            this.ctx = ctx;
        }
    }
    update($event) {
        this.draw();
    }
    draw() {
    }
}
class MySprite extends Sprite {
    constructor() {
        super(...arguments);
        this._width = 0;
        this._height = 0;
        this._anchorX = 0;
        this._anchorY = 0;
        this._offX = 0;
        this._offY = 0;
        this.scaleX = 1;
        this.scaleY = 1;
        this._alpha = 1;
        this.rotation = 0;
        this.visible = true;
        this.skewX = 0;
        this.skewY = 0;
        this._shadowFlag = false;
        this._shadowOffsetX = 0;
        this._shadowOffsetY = 0;
        this._shadowBlur = 5;
        this._radius = 0;
        this.children = [this];
        this.childDepandVisible = true;
        this.childDepandAlpha = false;
        this._z = 0;
    }
    init(imgObj = null, anchorX = 0.5, anchorY = 0.5) {
        if (imgObj) {
            this.img = imgObj;
            this.width = this.img.width;
            this.height = this.img.height;
        }
        this.anchorX = anchorX;
        this.anchorY = anchorY;
    }
    setShadow(offX, offY, blur, color = 'rgba(0, 0, 0, 0.3)') {
        this._shadowFlag = true;
        this._shadowColor = color;
        this._shadowOffsetX = offX;
        this._shadowOffsetY = offY;
        this._shadowBlur = blur;
    }
    setRadius(r) {
        this._radius = r;
    }
    update($event = null) {
        if (!this.visible && this.childDepandVisible) {
            return;
        }
        this.draw();
    }
    draw() {
        this.ctx.save();
        this.drawInit();
        this.updateChildren();
        this.ctx.restore();
    }
    drawInit() {
        this.ctx.translate(this.x, this.y);
        this.ctx.rotate(this.rotation * Math.PI / 180);
        this.ctx.scale(this.scaleX, this.scaleY);
        this.ctx.globalAlpha = this.alpha;
        this.ctx.transform(1, this.skewX, this.skewY, 1, 0, 0);
        if (this._radius) {
            const r = this._radius;
            const w = this.width;
            const h = this.height;
            this.ctx.lineTo(-w / 2, h / 2); // 创建水平线
            this.ctx.arcTo(-w / 2, -h / 2, -w / 2 + r, -h / 2, r);
            this.ctx.arcTo(w / 2, -h / 2, w / 2, -h / 2 + r, r);
            this.ctx.arcTo(w / 2, h / 2, w / 2 - r, h / 2, r);
            this.ctx.arcTo(-w / 2, h / 2, -w / 2, h / 2 - r, r);
            this.ctx.clip();
        }
    }
    drawSelf() {
        if (this._shadowFlag) {
            this.ctx.shadowOffsetX = this._shadowOffsetX;
            this.ctx.shadowOffsetY = this._shadowOffsetY;
            this.ctx.shadowBlur = this._shadowBlur;
            this.ctx.shadowColor = this._shadowColor;
        }
        else {
            this.ctx.shadowOffsetX = 0;
            this.ctx.shadowOffsetY = 0;
            this.ctx.shadowBlur = null;
            this.ctx.shadowColor = null;
        }
        if (this.img) {
            this.ctx.drawImage(this.img, this._offX, this._offY);
        }
    }
    updateChildren() {
        if (this.children.length <= 0) {
            return;
        }
        for (const child of this.children) {
            if (child === this) {
                if (this.visible) {
                    this.drawSelf();
                }
            }
            else {
                child.update();
            }
        }
    }
    load(url, anchorX = 0.5, anchorY = 0.5) {
        return new Promise((resolve, reject) => {
            const img = new Image();
            img.onload = () => resolve(img);
            img.onerror = reject;
            img.src = url;
        }).then(img => {
            this.init(img, anchorX, anchorY);
            return img;
        });
    }
    addChild(child, z = 1) {
        if (this.children.indexOf(child) === -1) {
            this.children.push(child);
            child._z = z;
            child.parent = this;
        }
        this.children.sort((a, b) => {
            return a._z - b._z;
        });
        if (this.childDepandAlpha) {
            child.alpha = this.alpha;
        }
    }
    removeChild(child) {
        const index = this.children.indexOf(child);
        if (index !== -1) {
            this.children.splice(index, 1);
        }
    }
    removeChildren() {
        for (let i = 0; i < this.children.length; i++) {
            if (this.children[i]) {
                if (this.children[i] !== this) {
                    this.children.splice(i, 1);
                    i--;
                }
            }
        }
    }
    _changeChildAlpha(alpha) {
        for (const child of this.children) {
            if (child !== this) {
                child.alpha = alpha;
            }
        }
    }
    set alpha(v) {
        this._alpha = v;
        if (this.childDepandAlpha) {
            this._changeChildAlpha(v);
        }
    }
    get alpha() {
        return this._alpha;
    }
    set width(v) {
        this._width = v;
        this.refreshAnchorOff();
    }
    get width() {
        return this._width;
    }
    set height(v) {
        this._height = v;
        this.refreshAnchorOff();
    }
    get height() {
        return this._height;
    }
    set anchorX(value) {
        this._anchorX = value;
        this.refreshAnchorOff();
    }
    get anchorX() {
        return this._anchorX;
    }
    set anchorY(value) {
        this._anchorY = value;
        this.refreshAnchorOff();
    }
    get anchorY() {
        return this._anchorY;
    }
    refreshAnchorOff() {
        this._offX = -this._width * this.anchorX;
        this._offY = -this._height * this.anchorY;
    }
    setScaleXY(value) {
        this.scaleX = this.scaleY = value;
    }
    getBoundingBox() {
        const getParentData = (item) => {
            let px = item.x;
            let py = item.y;
            let sx = item.scaleX;
            let sy = item.scaleY;
            const parent = item.parent;
            if (parent) {
                const obj = getParentData(parent);
                const _x = obj.px;
                const _y = obj.py;
                const _sx = obj.sx;
                const _sy = obj.sy;
                px = _x + item.x * _sx;
                py = _y + item.y * _sy;
                sx *= _sx;
                sy *= _sy;
            }
            return { px, py, sx, sy };
        };
        const data = getParentData(this);
        const x = data.px + this._offX * Math.abs(data.sx);
        const y = data.py + this._offY * Math.abs(data.sy);
        const width = this.width * Math.abs(data.sx);
        const height = this.height * Math.abs(data.sy);
        // const x = this.x + this._offX * Math.abs(this.scaleX);
        // const y = this.y + this._offY * Math.abs(this.scaleY);
        // const width = this.width * Math.abs(this.scaleX);
        // const height = this.height * Math.abs(this.scaleY);
        return { x, y, width, height };
    }
}
class ColorSpr extends MySprite {
    constructor() {
        super(...arguments);
        this.r = 0;
        this.g = 0;
        this.b = 0;
    }
    createGSCanvas() {
        if (!this.img) {
            return;
        }
        const rect = this.getBoundingBox();
        if (rect.width <= 1 || rect.height <= 1) {
            return;
        }
        const c = this.ctx.getImageData(rect.x, rect.y, rect.width, rect.height);
        for (let i = 0; i < c.height; i++) {
            for (let j = 0; j < c.width; j++) {
                const x = (i * 4) * c.width + (j * 4);
                const r = c.data[x];
                const g = c.data[x + 1];
                const b = c.data[x + 2];
                c.data[x] = this.r;
                c.data[x + 1] = this.g;
                c.data[x + 2] = this.b;
                // c.data[x] = c.data[x + 1] = c.data[x + 2] = (r + g + b) / 3 ;
                // // c.data[x + 3] = 255;
            }
        }
        this.ctx.putImageData(c, rect.x, rect.y, 0, 0, rect.width, rect.height);
    }
    drawSelf() {
        super.drawSelf();
        this.createGSCanvas();
    }
}
class GrayscaleSpr extends MySprite {
    constructor() {
        super(...arguments);
        this.grayScale = 120;
    }
    createGSCanvas() {
        if (!this.img) {
            return;
        }
        const rect = this.getBoundingBox();
        const c = this.ctx.getImageData(rect.x, rect.y, rect.width, rect.height);
        for (let i = 0; i < c.height; i++) {
            for (let j = 0; j < c.width; j++) {
                const x = (i * 4) * c.width + (j * 4);
                const r = c.data[x];
                const g = c.data[x + 1];
                const b = c.data[x + 2];
                // const a = c.data[x + 3];
                c.data[x] = c.data[x + 1] = c.data[x + 2] = this.grayScale; // (r + g + b) / 3;
                // c.data[x + 3] = 255;
            }
        }
        this.ctx.putImageData(c, rect.x, rect.y, 0, 0, rect.width, rect.height);
    }
    drawSelf() {
        super.drawSelf();
        this.createGSCanvas();
    }
}
class BitMapLabel extends MySprite {
    setText(data, text) {
        this.labelArr = [];
        const labelArr = [];
        const tmpArr = text.split('');
        let totalW = 0;
        let h = 0;
        for (const tmp of tmpArr) {
            const label = new MySprite(this.ctx);
            label.init(data[tmp], 0);
            this.addChild(label);
            labelArr.push(label);
            totalW += label.width;
            h = label.height;
        }
        this.width = totalW;
        this.height = h;
        let offX = -totalW / 2;
        for (const label of labelArr) {
            label.x = offX;
            offX += label.width;
        }
        this.labelArr = labelArr;
    }
}
class Label extends MySprite {
    constructor(ctx = null) {
        super(ctx);
        // fontSize:String = '40px';
        this.fontName = 'Verdana';
        this.textAlign = 'left';
        this.fontSize = 40;
        this.fontColor = '#000000';
        this.fontWeight = 900;
        this.outline = 0;
        this.outlineColor = '#ffffff';
        // _shadowFlag = false;
        // _shadowColor;
        // _shadowOffsetX;
        // _shadowOffsetY;
        // _shadowBlur;
        this._outlineFlag = false;
        this.init();
    }
    refreshSize() {
        this.ctx.save();
        this.ctx.font = `${this.fontSize}px ${this.fontName}`;
        this.ctx.textAlign = this.textAlign;
        this.ctx.textBaseline = 'middle';
        this.ctx.fontWeight = this.fontWeight;
        this._width = this.ctx.measureText(this.text).width;
        this._height = this.fontSize;
        this.refreshAnchorOff();
        this.ctx.restore();
    }
    setMaxSize(w) {
        this._maxWidth = w;
        this.refreshSize();
        if (this.width >= w) {
            this.scaleX *= w / this.width;
            this.scaleY *= w / this.width;
        }
    }
    show(callBack = null) {
        this.visible = true;
        if (this.alpha >= 1) {
            return;
        }
        const tween = new _tweenjs_tween_js__WEBPACK_IMPORTED_MODULE_0__["default"].Tween(this)
            .to({ alpha: 1 }, 800)
            // .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth.
            .onComplete(() => {
            if (callBack) {
                callBack();
            }
        })
            .start(); // Start the tween immediately.
    }
    // setShadow(offX = 0, offY = 2, blur = 2, color = 'rgba(0, 0, 0, 0.2)') {
    //
    //   this._shadowFlag = true;
    //   this._shadowColor = color;
    //   // 将阴影向右移动15px，向上移动10px
    //   this._shadowOffsetX = 5;
    //   this._shadowOffsetY = 5;
    //   // 轻微模糊阴影
    //   this._shadowBlur = 5;
    // }
    setOutline(width = 5, color = '#ffffff') {
        this._outlineFlag = true;
        this._outLineWidth = width;
        this._outLineColor = color;
    }
    drawText() {
        // console.log('in drawText', this.text);
        if (!this.text) {
            return;
        }
        // if (this._shadowFlag) {
        //
        //   this.ctx.shadowColor = this._shadowColor;
        //   // 将阴影向右移动15px，向上移动10px
        //   this.ctx.shadowOffsetX = this._shadowOffsetX;
        //   this.ctx.shadowOffsetY = this._shadowOffsetY;
        //   // 轻微模糊阴影
        //   this.ctx.shadowBlur = this._shadowBlur;
        // }
        this.ctx.font = `${this.fontSize}px ${this.fontName}`;
        this.ctx.textAlign = this.textAlign;
        this.ctx.textBaseline = 'middle';
        this.ctx.fontWeight = this.fontWeight;
        if (this._outlineFlag) {
            this.ctx.lineWidth = this._outLineWidth;
            this.ctx.strokeStyle = this._outLineColor;
            this.ctx.strokeText(this.text, 0, 0);
        }
        this.ctx.fillStyle = this.fontColor;
        if (this.outline > 0) {
            this.ctx.lineWidth = this.outline;
            this.ctx.strokeStyle = this.outlineColor;
            this.ctx.strokeText(this.text, 0, 0);
        }
        this.ctx.fillText(this.text, 0, 0);
    }
    drawSelf() {
        super.drawSelf();
        this.drawText();
    }
}
class RichTextOld extends Label {
    constructor() {
        super(...arguments);
        this.textArr = [];
        this.fontSize = 40;
    }
    setText(text, words) {
        let newText = text;
        for (const word of words) {
            const re = new RegExp(word, 'g');
            newText = newText.replace(re, `#${word}#`);
            // newText = newText.replace(word, `#${word}#`);
        }
        this.textArr = newText.split('#');
        this.text = newText;
        // this.setSize();
    }
    refreshSize() {
        this.ctx.save();
        this.ctx.font = `${this.fontSize}px ${this.fontName}`;
        this.ctx.textAlign = this.textAlign;
        this.ctx.textBaseline = 'middle';
        this.ctx.fontWeight = this.fontWeight;
        let curX = 0;
        for (const text of this.textArr) {
            const w = this.ctx.measureText(text).width;
            curX += w;
        }
        this.width = curX;
        this.height = this.fontSize;
        this.refreshAnchorOff();
        this.ctx.restore();
    }
    show(callBack = null) {
        // console.log(' in show ');
        this.visible = true;
        // this.alpha = 0;
        const tween = new _tweenjs_tween_js__WEBPACK_IMPORTED_MODULE_0__["default"].Tween(this)
            .to({ alpha: 1 }, 800)
            // .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth.
            .onComplete(() => {
            if (callBack) {
                callBack();
            }
        })
            .start(); // Start the tween immediately.
    }
    drawText() {
        // console.log('in drawText', this.text);
        if (!this.text) {
            return;
        }
        this.ctx.font = `${this.fontSize}px ${this.fontName}`;
        this.ctx.textAlign = this.textAlign;
        this.ctx.textBaseline = 'middle';
        this.ctx.fontWeight = 900;
        this.ctx.lineWidth = 5;
        this.ctx.strokeStyle = '#ffffff';
        // this.ctx.strokeText(this.text, 0, 0);
        this.ctx.fillStyle = '#000000';
        // this.ctx.fillText(this.text, 0, 0);
        let curX = 0;
        for (let i = 0; i < this.textArr.length; i++) {
            const w = this.ctx.measureText(this.textArr[i]).width;
            if ((i + 1) % 2 === 0) {
                this.ctx.fillStyle = '#c8171e';
            }
            else {
                this.ctx.fillStyle = '#000000';
            }
            this.ctx.fillText(this.textArr[i], curX, 0);
            curX += w;
        }
    }
}
class RichText extends Label {
    constructor(ctx) {
        super(ctx);
        this.disH = 30;
        // this.dataArr = dataArr;
    }
    drawText() {
        if (!this.text) {
            return;
        }
        this.ctx.font = `${this.fontSize}px ${this.fontName}`;
        this.ctx.textAlign = this.textAlign;
        this.ctx.textBaseline = 'middle';
        this.ctx.fontWeight = this.fontWeight;
        this.ctx.fillStyle = this.fontColor;
        const selfW = this.width * this.scaleX;
        const chr = this.text.split(' ');
        let temp = '';
        const row = [];
        const w = selfW - 80;
        const disH = (this.fontSize + this.disH) * this.scaleY;
        for (const c of chr) {
            if (this.ctx.measureText(temp).width < w && this.ctx.measureText(temp + (c)).width <= w) {
                temp += ' ' + c;
            }
            else {
                row.push(temp);
                temp = ' ' + c;
            }
        }
        row.push(temp);
        const x = 0;
        const y = -row.length * disH / 2;
        // for (let b = 0 ; b < row.length; b++) {
        //   this.ctx.strokeText(row[b], x, y + ( b + 1 ) * disH ); // 每行字体y坐标间隔20
        // }
        if (this._outlineFlag) {
            this.ctx.lineWidth = this._outLineWidth;
            this.ctx.strokeStyle = this._outLineColor;
            for (let b = 0; b < row.length; b++) {
                this.ctx.strokeText(row[b], x, y + (b + 1) * disH); // 每行字体y坐标间隔20
            }
            // this.ctx.strokeText(this.text, 0, 0);
        }
        // this.ctx.fillStyle = '#ff7600';
        for (let b = 0; b < row.length; b++) {
            this.ctx.fillText(row[b], x, y + (b + 1) * disH); // 每行字体y坐标间隔20
        }
    }
    drawSelf() {
        super.drawSelf();
        this.drawText();
    }
}
class LineRect extends MySprite {
    constructor() {
        super(...arguments);
        this.lineColor = '#ffffff';
        this.lineWidth = 10;
    }
    setSize(w, h) {
        this.width = w;
        this.height = h;
    }
    drawLine() {
        this.ctx.beginPath();
        this.ctx.moveTo(this._offX, this._offY);
        this.ctx.lineTo(this._offX + this.width, this._offY);
        this.ctx.lineTo(this._offX + this.width, this._offY + this.height);
        this.ctx.lineTo(this._offX, this._offY + this.height);
        this.ctx.closePath();
        this.ctx.lineWidth = this.lineWidth;
        // this.ctx.fillStyle = "rgb(2,33,42)";  //指定填充颜色
        // this.ctx.fill();   //对多边形进行填充
        this.ctx.strokeStyle = this.lineColor; // "#ffffff";
        this.ctx.stroke();
    }
    drawSelf() {
        super.drawSelf();
        this.drawLine();
    }
}
class ShapeRect extends MySprite {
    constructor() {
        super(...arguments);
        this.fillColor = '#FF0000';
    }
    setSize(w, h) {
        this.width = w;
        this.height = h;
        // console.log('w:', w);
        // console.log('h:', h);
    }
    drawShape() {
        this.ctx.fillStyle = this.fillColor;
        this.ctx.fillRect(this._offX, this._offY, this.width, this.height);
    }
    drawSelf() {
        super.drawSelf();
        this.drawShape();
    }
}
class ShapeCircle extends MySprite {
    constructor() {
        super(...arguments);
        this.fillColor = '#FF0000';
        this.radius = 0;
    }
    setRadius(r) {
        this.anchorX = this.anchorY = 0.5;
        this.radius = r;
        this.width = r * 2;
        this.height = r * 2;
    }
    drawShape() {
        this.ctx.beginPath();
        this.ctx.fillStyle = this.fillColor;
        this.ctx.arc(0, 0, this.radius, 0, angleToRadian(360));
        this.ctx.fill();
    }
    drawSelf() {
        super.drawSelf();
        this.drawShape();
    }
}
class ShapeRectNew extends MySprite {
    constructor() {
        super(...arguments);
        this.radius = 0;
        this.fillColor = '#ffffff';
        this.strokeColor = '#000000';
        this.fill = true;
        this.stroke = false;
        this.lineWidth = 1;
    }
    setSize(w, h, r) {
        this.width = w;
        this.height = h;
        this.radius = r;
    }
    setOutLine(color, lineWidth) {
        this.stroke = true;
        this.strokeColor = color;
        this.lineWidth = lineWidth;
    }
    drawShape() {
        const ctx = this.ctx;
        const width = this.width;
        const height = this.height;
        const radius = this.radius;
        ctx.save();
        ctx.beginPath(0);
        // 从右下角顺时针绘制，弧度从0到1/2PI
        ctx.arc(width - radius, height - radius, radius, 0, Math.PI / 2);
        // 矩形下边线
        ctx.lineTo(radius, height);
        // 左下角圆弧，弧度从1/2PI到PI
        ctx.arc(radius, height - radius, radius, Math.PI / 2, Math.PI);
        // 矩形左边线
        ctx.lineTo(0, radius);
        // 左上角圆弧，弧度从PI到3/2PI
        ctx.arc(radius, radius, radius, Math.PI, Math.PI * 3 / 2);
        // 上边线
        ctx.lineTo(width - radius, 0);
        // 右上角圆弧
        ctx.arc(width - radius, radius, radius, Math.PI * 3 / 2, Math.PI * 2);
        // 右边线
        ctx.lineTo(width, height - radius);
        ctx.closePath();
        if (this.fill) {
            ctx.fillStyle = this.fillColor;
            ctx.fill();
        }
        if (this.stroke) {
            ctx.lineWidth = this.lineWidth;
            ctx.strokeStyle = this.strokeColor;
            ctx.stroke();
        }
        ctx.restore();
    }
    drawSelf() {
        super.drawSelf();
        this.drawShape();
    }
}
class MyAnimation extends MySprite {
    constructor() {
        super(...arguments);
        this.frameArr = [];
        this.frameIndex = 0;
        this.playFlag = false;
        this.curDelay = 0;
        this.loop = false;
        this.delayPerUnit = 1;
        this.restartFlag = false;
        this.reverseFlag = false;
    }
    addFrameByImg(img) {
        const spr = new MySprite(this.ctx);
        spr.init(img);
        this._refreshSize(img);
        spr.visible = false;
        this.addChild(spr);
        this.frameArr.push(spr);
        this.frameArr[this.frameIndex].visible = true;
    }
    addFrameByUrl(url) {
        const spr = new MySprite(this.ctx);
        spr.load(url).then(img => {
            this._refreshSize(img);
        });
        spr.visible = false;
        this.addChild(spr);
        this.frameArr.push(spr);
        this.frameArr[this.frameIndex].visible = true;
    }
    _refreshSize(img) {
        if (this.width < img.width) {
            this.width = img.width;
        }
        if (this.height < img.height) {
            this.height = img.height;
        }
    }
    play() {
        this.playFlag = true;
        this.lastDateTime = new Date().getTime();
    }
    stop() {
        this.playFlag = false;
    }
    replay() {
        this.restartFlag = true;
        this.play();
    }
    reverse() {
        this.reverseFlag = !this.reverseFlag;
        this.frameArr.reverse();
        this.frameIndex = 0;
    }
    showAllFrame() {
        for (const frame of this.frameArr) {
            frame.alpha = 1;
        }
    }
    hideAllFrame() {
        for (const frame of this.frameArr) {
            frame.alpha = 0;
        }
    }
    playEnd() {
        this.playFlag = false;
        this.curDelay = 0;
        this.frameArr[this.frameIndex].visible = true;
        if (this.playEndFunc) {
            this.playEndFunc();
            this.playEndFunc = null;
        }
    }
    updateFrame() {
        if (this.frameArr[this.frameIndex]) {
            this.frameArr[this.frameIndex].visible = false;
        }
        this.frameIndex++;
        if (this.frameIndex >= this.frameArr.length) {
            if (this.loop) {
                this.frameIndex = 0;
            }
            else if (this.restartFlag) {
                this.restartFlag = false;
                this.frameIndex = 0;
            }
            else {
                this.frameIndex--;
                this.playEnd();
                return;
            }
        }
        this.frameArr[this.frameIndex].visible = true;
    }
    _updateDelay(delay) {
        this.curDelay += delay;
        if (this.curDelay < this.delayPerUnit) {
            return;
        }
        this.curDelay -= this.delayPerUnit;
        this.updateFrame();
    }
    _updateLastDate() {
        if (!this.playFlag) {
            return;
        }
        let delay = 0;
        if (this.lastDateTime) {
            delay = (new Date().getTime() - this.lastDateTime) / 1000;
        }
        this.lastDateTime = new Date().getTime();
        this._updateDelay(delay);
    }
    update($event = null) {
        super.update($event);
        this._updateLastDate();
    }
}
// --------===========  util func  =============-------------
function tweenChange(item, obj, time = 0.8, callBack = null, easing = null, update = null) {
    const tween = new _tweenjs_tween_js__WEBPACK_IMPORTED_MODULE_0__["default"].Tween(item).to(obj, time * 1000);
    if (callBack) {
        tween.onComplete(() => {
            callBack();
        });
    }
    if (easing) {
        tween.easing(easing);
    }
    if (update) {
        tween.onUpdate((a, b) => {
            update(a, b);
        });
    }
    tween.start();
    return tween;
}
function rotateItem(item, rotation, time = 0.8, callBack = null, easing = null) {
    const tween = new _tweenjs_tween_js__WEBPACK_IMPORTED_MODULE_0__["default"].Tween(item).to({ rotation }, time * 1000);
    if (callBack) {
        tween.onComplete(() => {
            callBack();
        });
    }
    if (easing) {
        tween.easing(easing);
    }
    tween.start();
}
function scaleItem(item, scale, time = 0.8, callBack = null, easing = null) {
    const tween = new _tweenjs_tween_js__WEBPACK_IMPORTED_MODULE_0__["default"].Tween(item).to({ scaleX: scale, scaleY: scale }, time * 1000);
    if (callBack) {
        tween.onComplete(() => {
            callBack();
        });
    }
    if (easing) {
        tween.easing(easing);
    }
    tween.start();
    return tween;
}
function moveItem(item, x, y, time = 0.8, callBack = null, easing = null) {
    const tween = new _tweenjs_tween_js__WEBPACK_IMPORTED_MODULE_0__["default"].Tween(item).to({ x, y }, time * 1000);
    if (callBack) {
        tween.onComplete(() => {
            callBack();
        });
    }
    if (easing) {
        tween.easing(easing);
    }
    tween.start();
    return tween;
}
function endShow(item, s = 1) {
    item.scaleX = item.scaleY = 0;
    item.alpha = 0;
    const tween = new _tweenjs_tween_js__WEBPACK_IMPORTED_MODULE_0__["default"].Tween(item)
        .to({ alpha: 1, scaleX: s, scaleY: s }, 800)
        .easing(_tweenjs_tween_js__WEBPACK_IMPORTED_MODULE_0__["default"].Easing.Elastic.Out) // Use an easing function to make the animation smooth.
        .onComplete(() => {
    })
        .start();
}
function hideItem(item, time = 0.8, callBack = null, easing = null) {
    if (item.alpha === 0) {
        return;
    }
    const tween = new _tweenjs_tween_js__WEBPACK_IMPORTED_MODULE_0__["default"].Tween(item)
        .to({ alpha: 0 }, time * 1000)
        // .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth.
        .onComplete(() => {
        if (callBack) {
            callBack();
        }
    });
    if (easing) {
        tween.easing(easing);
    }
    tween.start();
}
function showItem(item, time = 0.8, callBack = null, easing = null) {
    if (item.alpha === 1) {
        if (callBack) {
            callBack();
        }
        return;
    }
    item.visible = true;
    const tween = new _tweenjs_tween_js__WEBPACK_IMPORTED_MODULE_0__["default"].Tween(item)
        .to({ alpha: 1 }, time * 1000)
        // .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth.
        .onComplete(() => {
        if (callBack) {
            callBack();
        }
    });
    if (easing) {
        tween.easing(easing);
    }
    tween.start();
}
function alphaItem(item, alpha, time = 0.8, callBack = null, easing = null) {
    const tween = new _tweenjs_tween_js__WEBPACK_IMPORTED_MODULE_0__["default"].Tween(item)
        .to({ alpha }, time * 1000)
        // .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth.
        .onComplete(() => {
        if (callBack) {
            callBack();
        }
    });
    if (easing) {
        tween.easing(easing);
    }
    tween.start();
}
function showStar(item, time = 0.8, callBack = null, easing = null) {
    const tween = new _tweenjs_tween_js__WEBPACK_IMPORTED_MODULE_0__["default"].Tween(item)
        .to({ alpha: 1, scale: 1 }, time * 1000)
        // .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth.
        .onComplete(() => {
        if (callBack) {
            callBack();
        }
    });
    if (easing) {
        tween.easing(easing);
    }
    tween.start();
}
function randomSortByArr(arr) {
    const newArr = [];
    const tmpArr = arr.concat();
    while (tmpArr.length > 0) {
        const randomIndex = Math.floor(tmpArr.length * Math.random());
        newArr.push(tmpArr[randomIndex]);
        tmpArr.splice(randomIndex, 1);
    }
    return newArr;
}
function radianToAngle(radian) {
    return radian * 180 / Math.PI;
    // 角度 = 弧度 * 180 / Math.PI;
}
function angleToRadian(angle) {
    return angle * Math.PI / 180;
    // 弧度= 角度 * Math.PI / 180;
}
function getPosByAngle(angle, len) {
    const radian = angle * Math.PI / 180;
    const x = Math.sin(radian) * len;
    const y = Math.cos(radian) * len;
    return { x, y };
}
function getAngleByPos(px, py, mx, my) {
    const x = Math.abs(px - mx);
    const y = Math.abs(py - my);
    const z = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));
    const cos = y / z;
    const radina = Math.acos(cos); // 用反三角函数求弧度
    let angle = Math.floor(180 / (Math.PI / radina) * 100) / 100; // 将弧度转换成角度
    if (mx > px && my > py) { // 鼠标在第四象限
        angle = 180 - angle;
    }
    if (mx === px && my > py) { // 鼠标在y轴负方向上
        angle = 180;
    }
    if (mx > px && my === py) { // 鼠标在x轴正方向上
        angle = 90;
    }
    if (mx < px && my > py) { // 鼠标在第三象限
        angle = 180 + angle;
    }
    if (mx < px && my === py) { // 鼠标在x轴负方向
        angle = 270;
    }
    if (mx < px && my < py) { // 鼠标在第二象限
        angle = 360 - angle;
    }
    // console.log('angle: ', angle);
    return angle;
}
function removeItemFromArr(arr, item) {
    const index = arr.indexOf(item);
    if (index !== -1) {
        arr.splice(index, 1);
    }
}
function circleMove(item, x0, y0, time = 2, addR = 360, xPer = 1, yPer = 1, callBack = null, easing = null) {
    const r = getPosDistance(item.x, item.y, x0, y0);
    let a = getAngleByPos(item.x, item.y, x0, y0);
    a += 90;
    const obj = { r, a };
    item._circleAngle = a;
    const targetA = a + addR;
    const tween = new _tweenjs_tween_js__WEBPACK_IMPORTED_MODULE_0__["default"].Tween(item).to({ _circleAngle: targetA }, time * 1000);
    if (callBack) {
        tween.onComplete(() => {
            callBack();
        });
    }
    if (easing) {
        tween.easing(easing);
    }
    tween.onUpdate((item, progress) => {
        // console.log(item._circleAngle);
        const r = obj.r;
        const a = item._circleAngle;
        const x = x0 + r * xPer * Math.cos(a * Math.PI / 180);
        const y = y0 + r * yPer * Math.sin(a * Math.PI / 180);
        item.x = x;
        item.y = y;
        // obj.a ++;
    });
    tween.start();
}
function getPosDistance(sx, sy, ex, ey) {
    const _x = ex - sx;
    const _y = ey - sy;
    const len = Math.sqrt(Math.pow(_x, 2) + Math.pow(_y, 2));
    return len;
}
function delayCall(callback, second) {
    const tween = new _tweenjs_tween_js__WEBPACK_IMPORTED_MODULE_0__["default"].Tween(this)
        .delay(second * 1000)
        .onComplete(() => {
        if (callback) {
            callback();
        }
    })
        .start();
}
function formatTime(fmt, date) {
    // "yyyy-MM-dd HH:mm:ss";
    const o = {
        'M+': date.getMonth() + 1,
        'd+': date.getDate(),
        'h+': date.getHours(),
        'm+': date.getMinutes(),
        's+': date.getSeconds(),
        'q+': Math.floor((date.getMonth() + 3) / 3),
        S: date.getMilliseconds() // 毫秒
    };
    if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
    }
    for (const k in o) {
        if (new RegExp('(' + k + ')').test(fmt)) {
            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1)
                ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)));
        }
    }
    return fmt;
}
function getMinScale(item, maxLen) {
    const sx = maxLen / item.width;
    const sy = maxLen / item.height;
    const minS = Math.min(sx, sy);
    return minS;
}
function jelly(item, time = 0.7) {
    if (item.jellyTween) {
        _tweenjs_tween_js__WEBPACK_IMPORTED_MODULE_0__["default"].remove(item.jellyTween);
    }
    const t = time / 9;
    const baseSX = item.scaleX;
    const baseSY = item.scaleY;
    let index = 0;
    const run = () => {
        if (index >= arr.length) {
            item.jellyTween = null;
            return;
        }
        const data = arr[index];
        const t = tweenChange(item, { scaleX: data[0], scaleY: data[1] }, data[2], () => {
            index++;
            run();
        }, _tweenjs_tween_js__WEBPACK_IMPORTED_MODULE_0__["default"].Easing.Sinusoidal.InOut);
        item.jellyTween = t;
    };
    const arr = [
        [baseSX * 1.1, baseSY * 0.9, t],
        [baseSX * 0.98, baseSY * 1.02, t * 2],
        [baseSX * 1.02, baseSY * 0.98, t * 2],
        [baseSX * 0.99, baseSY * 1.01, t * 2],
        [baseSX * 1.0, baseSY * 1.0, t * 2],
    ];
    run();
}
function showPopParticle(img, pos, parent, num = 20, minLen = 40, maxLen = 80, showTime = 0.4) {
    for (let i = 0; i < num; i++) {
        const particle = new MySprite();
        particle.init(img);
        particle.x = pos.x;
        particle.y = pos.y;
        parent.addChild(particle);
        const randomR = 360 * Math.random();
        particle.rotation = randomR;
        const randomS = 0.3 + Math.random() * 0.7;
        particle.setScaleXY(randomS * 0.3);
        const randomX = Math.random() * 20 - 10;
        particle.x += randomX;
        const randomY = Math.random() * 20 - 10;
        particle.y += randomY;
        const randomL = minLen + Math.random() * (maxLen - minLen);
        const randomA = 360 * Math.random();
        const randomT = getPosByAngle(randomA, randomL);
        moveItem(particle, particle.x + randomT.x, particle.y + randomT.y, showTime, () => {
        }, _tweenjs_tween_js__WEBPACK_IMPORTED_MODULE_0__["default"].Easing.Exponential.Out);
        // scaleItem(particle, 0, 0.6, () => {
        //
        // });
        scaleItem(particle, randomS, 0.6, () => {
        }, _tweenjs_tween_js__WEBPACK_IMPORTED_MODULE_0__["default"].Easing.Exponential.Out);
        setTimeout(() => {
            hideItem(particle, 0.4, () => {
            }, _tweenjs_tween_js__WEBPACK_IMPORTED_MODULE_0__["default"].Easing.Cubic.In);
        }, showTime * 0.5 * 1000);
    }
}
function shake(item, time = 0.5, callback = null, rate = 1) {
    if (item.shakeTween) {
        return;
    }
    item.shakeTween = true;
    const offX = 15 * item.scaleX * rate;
    const offY = 15 * item.scaleX * rate;
    const baseX = item.x;
    const baseY = item.y;
    const easing = _tweenjs_tween_js__WEBPACK_IMPORTED_MODULE_0__["default"].Easing.Sinusoidal.InOut;
    const move4 = () => {
        moveItem(item, baseX, baseY, time / 4, () => {
            item.shakeTween = false;
            if (callback) {
                callback();
            }
        }, easing);
    };
    const move3 = () => {
        moveItem(item, baseX + offX / 4, baseY + offY / 4, time / 4, () => {
            move4();
        }, easing);
    };
    const move2 = () => {
        moveItem(item, baseX - offX / 4 * 3, baseY - offY / 4 * 3, time / 4, () => {
            move3();
        }, easing);
    };
    const move1 = () => {
        moveItem(item, baseX + offX, baseY + offY, time / 7.5, () => {
            move2();
        }, easing);
    };
    move1();
}
// --------------- custom class --------------------



/***/ }),

/***/ "./src/app/play/play.component.ts":
/*!****************************************!*\
  !*** ./src/app/play/play.component.ts ***!
  \****************************************/
/*! exports provided: PlayComponent */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "PlayComponent", function() { return PlayComponent; });
/* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @angular/core */ "./node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js");
/* harmony import */ var _Unit__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Unit */ "./src/app/play/Unit.ts");
/* harmony import */ var _resources__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./resources */ "./src/app/play/resources.js");
/* harmony import */ var rxjs__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! rxjs */ "./node_modules/rxjs/_esm2015/index.js");
/* harmony import */ var rxjs_operators__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! rxjs/operators */ "./node_modules/rxjs/_esm2015/operators/index.js");
/* harmony import */ var _tweenjs_tween_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @tweenjs/tween.js */ "./node_modules/@tweenjs/tween.js/dist/tween.esm.js");







const _c0 = ["canvas"];
const _c1 = ["wrap"];
let PlayComponent = /*@__PURE__*/ (() => {
    class PlayComponent {
        constructor() {
            this.canvasWidth = 1280; // canvas实际宽度
            this.canvasHeight = 720; // canvas实际高度
            this.canvasBaseW = 1280; // canvas 资源预设宽度
            this.canvasBaseH = 720; // canvas 资源预设高度
            // 资源
            this.rawImages = new Map(_resources__WEBPACK_IMPORTED_MODULE_2__["res"]);
            this.rawAudios = new Map(_resources__WEBPACK_IMPORTED_MODULE_2__["resAudio"]);
            this.images = new Map();
            this.winResizeEventStream = new rxjs__WEBPACK_IMPORTED_MODULE_3__["Subject"]();
            this.audioObj = {};
            this.mapScale = 1;
            this.saveKey = 'test_0011';
            this.canTouch = true;
        }
        onResize(event) {
            this.winResizeEventStream.next();
        }
        ngOnInit() {
            this.data = {};
            // 获取数据
            const getData = window.courseware.getData;
            getData((data) => {
                if (data && typeof data == 'object') {
                    this.data = data;
                }
                // console.log('data:' , data);
                // 初始化 各事件监听
                this.initListener();
                // 若无数据 则为预览模式 需要填充一些默认数据用来显示
                this.initDefaultData();
                // 初始化 音频资源
                this.initAudio();
                // 初始化 图片资源
                this.initImg();
                // 开始预加载资源
                this.load();
            }, this.saveKey);
        }
        ngOnDestroy() {
            window['curCtx'] = null;
            window.cancelAnimationFrame(this.animationId);
        }
        load() {
            // 预加载资源
            this.loadResources().then(() => {
                window["air"].hideAirClassLoading(this.saveKey, this.data);
                this.init();
                this.update();
            });
        }
        init() {
            this.initCtx();
            this.initData();
            this.initView();
        }
        initCtx() {
            this.canvasWidth = this.wrap.nativeElement.clientWidth;
            this.canvasHeight = this.wrap.nativeElement.clientHeight;
            this.canvas.nativeElement.width = this.wrap.nativeElement.clientWidth;
            this.canvas.nativeElement.height = this.wrap.nativeElement.clientHeight;
            this.ctx = this.canvas.nativeElement.getContext('2d');
            this.canvas.nativeElement.width = this.canvasWidth;
            this.canvas.nativeElement.height = this.canvasHeight;
            window['curCtx'] = this.ctx;
        }
        updateItem(item) {
            if (item) {
                item.update();
            }
        }
        updateArr(arr) {
            if (!arr) {
                return;
            }
            for (let i = 0; i < arr.length; i++) {
                arr[i].update(this);
            }
        }
        initListener() {
            this.winResizeEventStream
                .pipe(Object(rxjs_operators__WEBPACK_IMPORTED_MODULE_4__["debounceTime"])(500))
                .subscribe(data => {
                this.renderAfterResize();
            });
            // ---------------------------------------------
            const setParentOffset = () => {
                const rect = this.canvas.nativeElement.getBoundingClientRect();
                this.canvasLeft = rect.left;
                this.canvasTop = rect.top;
            };
            const setMxMyByTouch = (event) => {
                if (event.touches.length <= 0) {
                    return;
                }
                if (this.canvasLeft == null) {
                    setParentOffset();
                }
                this.mx = event.touches[0].pageX - this.canvasLeft;
                this.my = event.touches[0].pageY - this.canvasTop;
            };
            const setMxMyByMouse = (event) => {
                this.mx = event.offsetX;
                this.my = event.offsetY;
            };
            // ---------------------------------------------
            let firstTouch = true;
            const touchDownFunc = (e) => {
                if (firstTouch) {
                    firstTouch = false;
                    removeMouseListener();
                }
                setMxMyByTouch(e);
                this.mapDown(e);
            };
            const touchMoveFunc = (e) => {
                setMxMyByTouch(e);
                this.mapMove(e);
            };
            const touchUpFunc = (e) => {
                setMxMyByTouch(e);
                this.mapUp(e);
            };
            const mouseDownFunc = (e) => {
                if (firstTouch) {
                    firstTouch = false;
                    removeTouchListener();
                }
                setMxMyByMouse(e);
                this.mapDown(e);
            };
            const mouseMoveFunc = (e) => {
                setMxMyByMouse(e);
                this.mapMove(e);
            };
            const mouseUpFunc = (e) => {
                setMxMyByMouse(e);
                this.mapUp(e);
            };
            const element = this.canvas.nativeElement;
            const addTouchListener = () => {
                element.addEventListener('touchstart', touchDownFunc);
                element.addEventListener('touchmove', touchMoveFunc);
                element.addEventListener('touchend', touchUpFunc);
                element.addEventListener('touchcancel', touchUpFunc);
            };
            const removeTouchListener = () => {
                element.removeEventListener('touchstart', touchDownFunc);
                element.removeEventListener('touchmove', touchMoveFunc);
                element.removeEventListener('touchend', touchUpFunc);
                element.removeEventListener('touchcancel', touchUpFunc);
            };
            const addMouseListener = () => {
                element.addEventListener('mousedown', mouseDownFunc);
                element.addEventListener('mousemove', mouseMoveFunc);
                element.addEventListener('mouseup', mouseUpFunc);
            };
            const removeMouseListener = () => {
                element.removeEventListener('mousedown', mouseDownFunc);
                element.removeEventListener('mousemove', mouseMoveFunc);
                element.removeEventListener('mouseup', mouseUpFunc);
            };
            addMouseListener();
            addTouchListener();
        }
        playAudio(key, now = false, callback = null) {
            const audio = this.audioObj[key];
            if (audio) {
                if (now) {
                    audio.pause();
                    audio.currentTime = 0;
                }
                if (callback) {
                    audio.onended = () => {
                        callback();
                    };
                }
                audio.play();
            }
        }
        loadResources() {
            const pr = [];
            this.rawImages.forEach((value, key) => {
                const p = this.preload(value)
                    .then(img => {
                    this.images.set(key, img);
                })
                    .catch(err => console.log(err));
                pr.push(p);
            });
            this.rawAudios.forEach((value, key) => {
                const a = this.preloadAudio(value)
                    .then(() => {
                    // this.images.set(key, img);
                })
                    .catch(err => console.log(err));
                pr.push(a);
            });
            return Promise.all(pr);
        }
        preload(url) {
            return new Promise((resolve, reject) => {
                const img = new Image();
                // img.crossOrigin = "anonymous";
                img.onload = () => resolve(img);
                img.onerror = reject;
                img.src = url;
            });
        }
        preloadAudio(url) {
            return new Promise((resolve, reject) => {
                const audio = new Audio();
                audio.oncanplay = (a) => {
                    resolve();
                };
                audio.onerror = () => {
                    reject();
                };
                audio.src = url;
                audio.load();
            });
        }
        renderAfterResize() {
            this.canvasWidth = this.wrap.nativeElement.clientWidth;
            this.canvasHeight = this.wrap.nativeElement.clientHeight;
            this.init();
        }
        checkClickTarget(target) {
            const rect = target.getBoundingBox();
            if (this.checkPointInRect(this.mx, this.my, rect)) {
                return true;
            }
            return false;
        }
        getWorlRect(target) {
            let rect = target.getBoundingBox();
            if (target.parent) {
                const pRect = this.getWorlRect(target.parent);
                rect.x += pRect.x;
                rect.y += pRect.y;
            }
            return rect;
        }
        checkPointInRect(x, y, rect) {
            if (x >= rect.x && x <= rect.x + rect.width) {
                if (y >= rect.y && y <= rect.y + rect.height) {
                    return true;
                }
            }
            return false;
        }
        addUrlToAudioObj(key, url = null, vlomue = 1, loop = false, callback = null) {
            const audioObj = this.audioObj;
            if (url == null) {
                url = key;
            }
            this.rawAudios.set(key, url);
            const audio = new Audio();
            audio.src = url;
            audio.load();
            audio.loop = loop;
            audio.volume = vlomue;
            audioObj[key] = audio;
            if (callback) {
                audio.onended = () => {
                    callback();
                };
            }
        }
        addUrlToImages(url) {
            this.rawImages.set(url, url);
        }
        // ======================================================编写区域==========================================================================
        /**
         * 添加默认数据 便于无数据时的展示
         */
        initDefaultData() {
            if (!this.data.pic_url) {
                this.data.pic_url = 'assets/play/default/pic.jpg';
                this.data.pic_url_2 = 'assets/play/default/pic.jpg';
            }
        }
        /**
         * 添加预加载图片
         */
        initImg() {
            this.addUrlToImages(this.data.pic_url);
            this.addUrlToImages(this.data.pic_url_2);
        }
        /**
         * 添加预加载音频
         */
        initAudio() {
            // 音频资源
            this.addUrlToAudioObj(this.data.audio_url);
            this.addUrlToAudioObj(this.data.audio_url_2);
            // 音效
            this.addUrlToAudioObj('click', this.rawAudios.get('click'), 0.3);
        }
        /**
         * 初始化数据
         */
        initData() {
            const sx = this.canvasWidth / this.canvasBaseW;
            const sy = this.canvasHeight / this.canvasBaseH;
            const s = Math.min(sx, sy);
            this.mapScale = s;
            // this.mapScale = sx;
            // this.mapScale = sy;
            this.renderArr = [];
        }
        /**
         * 初始化试图
         */
        initView() {
            this.initPic();
            this.initBottomPart();
        }
        initBottomPart() {
            const btnLeft = new _Unit__WEBPACK_IMPORTED_MODULE_1__["MySprite"]();
            btnLeft.init(this.images.get('btn_left'));
            btnLeft.x = this.canvasWidth - 150 * this.mapScale;
            btnLeft.y = this.canvasHeight - 100 * this.mapScale;
            btnLeft.setScaleXY(this.mapScale);
            this.renderArr.push(btnLeft);
            this.btnLeft = btnLeft;
            const btnRight = new _Unit__WEBPACK_IMPORTED_MODULE_1__["MySprite"]();
            btnRight.init(this.images.get('btn_right'));
            btnRight.x = this.canvasWidth - 50 * this.mapScale;
            btnRight.y = this.canvasHeight - 100 * this.mapScale;
            btnRight.setScaleXY(this.mapScale);
            this.renderArr.push(btnRight);
            this.btnRight = btnRight;
        }
        initPic() {
            const maxW = this.canvasWidth * 0.7;
            const pic1 = new _Unit__WEBPACK_IMPORTED_MODULE_1__["MySprite"]();
            pic1.init(this.images.get(this.data.pic_url));
            pic1.x = this.canvasWidth / 2;
            pic1.y = this.canvasHeight / 2;
            pic1.setScaleXY(maxW / pic1.width);
            this.renderArr.push(pic1);
            this.pic1 = pic1;
            const label1 = new _Unit__WEBPACK_IMPORTED_MODULE_1__["Label"]();
            label1.text = this.data.text;
            label1.textAlign = 'center';
            label1.fontSize = 50;
            label1.fontName = 'BRLNSDB';
            label1.fontColor = '#ffffff';
            pic1.addChild(label1);
            const pic2 = new _Unit__WEBPACK_IMPORTED_MODULE_1__["MySprite"]();
            pic2.init(this.images.get(this.data.pic_url_2));
            pic2.x = this.canvasWidth / 2 + this.canvasWidth;
            pic2.y = this.canvasHeight / 2;
            pic2.setScaleXY(maxW / pic2.width);
            this.renderArr.push(pic2);
            this.pic2 = pic2;
            this.curPic = pic1;
        }
        btnLeftClicked() {
            this.lastPage();
        }
        btnRightClicked() {
            this.nextPage();
        }
        lastPage() {
            if (this.curPic == this.pic1) {
                return;
            }
            this.canTouch = false;
            const moveLen = this.canvasWidth;
            Object(_Unit__WEBPACK_IMPORTED_MODULE_1__["tweenChange"])(this.pic1, { x: this.pic1.x + moveLen }, 1);
            Object(_Unit__WEBPACK_IMPORTED_MODULE_1__["tweenChange"])(this.pic2, { x: this.pic2.x + moveLen }, 1, () => {
                this.canTouch = true;
                this.curPic = this.pic1;
            });
        }
        nextPage() {
            if (this.curPic == this.pic2) {
                return;
            }
            this.canTouch = false;
            const moveLen = this.canvasWidth;
            Object(_Unit__WEBPACK_IMPORTED_MODULE_1__["tweenChange"])(this.pic1, { x: this.pic1.x - moveLen }, 1);
            Object(_Unit__WEBPACK_IMPORTED_MODULE_1__["tweenChange"])(this.pic2, { x: this.pic2.x - moveLen }, 1, () => {
                this.canTouch = true;
                this.curPic = this.pic2;
            });
        }
        pic1Clicked() {
            this.playAudio(this.data.audio_url);
        }
        pic2Clicked() {
            this.playAudio(this.data.audio_url_2);
        }
        mapDown(event) {
            if (!this.canTouch) {
                return;
            }
            if (this.checkClickTarget(this.btnLeft)) {
                this.btnLeftClicked();
                return;
            }
            if (this.checkClickTarget(this.btnRight)) {
                this.btnRightClicked();
                return;
            }
            if (this.checkClickTarget(this.pic1)) {
                this.pic1Clicked();
                return;
            }
            if (this.checkClickTarget(this.pic2)) {
                this.pic2Clicked();
                return;
            }
        }
        mapMove(event) {
        }
        mapUp(event) {
        }
        update() {
            // ----------------------------------------------------------
            this.animationId = window.requestAnimationFrame(this.update.bind(this));
            // 清除画布内容
            this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
            // tween 更新动画
            _tweenjs_tween_js__WEBPACK_IMPORTED_MODULE_5__["default"].update();
            // ----------------------------------------------------------
            this.updateArr(this.renderArr);
        }
    }
    PlayComponent.ɵfac = function PlayComponent_Factory(t) { return new (t || PlayComponent)(); };
    PlayComponent.ɵcmp = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵdefineComponent"]({ type: PlayComponent, selectors: [["app-play"]], viewQuery: function PlayComponent_Query(rf, ctx) {
            if (rf & 1) {
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵstaticViewQuery"](_c0, true);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵstaticViewQuery"](_c1, true);
            }
            if (rf & 2) {
                var _t;
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵqueryRefresh"](_t = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵloadQuery"]()) && (ctx.canvas = _t.first);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵqueryRefresh"](_t = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵloadQuery"]()) && (ctx.wrap = _t.first);
            }
        }, hostBindings: function PlayComponent_HostBindings(rf, ctx) {
            if (rf & 1) {
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵlistener"]("resize", function PlayComponent_resize_HostBindingHandler($event) { return ctx.onResize($event); }, false, _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵresolveWindow"]);
            }
        }, decls: 4, vars: 0, consts: [[1, "game-container"], ["wrap", ""], ["id", "canvas"], ["canvas", ""]], template: function PlayComponent_Template(rf, ctx) {
            if (rf & 1) {
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](0, "div", 0, 1);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelement"](2, "canvas", 2, 3);
                _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
            }
        }, styles: [".game-container[_ngcontent-%COMP%] {\n  width: 100%;\n  height: 100%;\n  background: #ffffff;\n  background-size: cover;\n}\n\n#canvas[_ngcontent-%COMP%] {\n\n}\n\n@font-face\n{\n  font-family: 'BRLNSDB';\n  src: url('BRLNSDB.TTF');\n}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNyYy9hcHAvcGxheS9wbGF5LmNvbXBvbmVudC5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7RUFDRSxXQUFXO0VBQ1gsWUFBWTtFQUNaLG1CQUFtQjtFQUNuQixzQkFBc0I7QUFDeEI7O0FBRUE7O0FBRUE7O0FBSUE7O0VBRUUsc0JBQXNCO0VBQ3RCLHVCQUEwQztBQUM1QyIsImZpbGUiOiJzcmMvYXBwL3BsYXkvcGxheS5jb21wb25lbnQuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLmdhbWUtY29udGFpbmVyIHtcbiAgd2lkdGg6IDEwMCU7XG4gIGhlaWdodDogMTAwJTtcbiAgYmFja2dyb3VuZDogI2ZmZmZmZjtcbiAgYmFja2dyb3VuZC1zaXplOiBjb3Zlcjtcbn1cblxuI2NhbnZhcyB7XG5cbn1cblxuXG5cbkBmb250LWZhY2VcbntcbiAgZm9udC1mYW1pbHk6ICdCUkxOU0RCJztcbiAgc3JjOiB1cmwoXCIuLi8uLi9hc3NldHMvZm9udC9CUkxOU0RCLlRURlwiKSA7XG59XG5cbiJdfQ== */"] });
    return PlayComponent;
})();



/***/ }),

/***/ "./src/app/play/resources.js":
/*!***********************************!*\
  !*** ./src/app/play/resources.js ***!
  \***********************************/
/*! exports provided: res, resAudio */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "res", function() { return res; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "resAudio", function() { return resAudio; });
const res = [

  // ['bg', "assets/play/bg.jpg"],
  ['btn_left', "assets/play/btn_left.png"],
  ['btn_right', "assets/play/btn_right.png"],
  // ['text_bg', "assets/play/text_bg.png"],

];



const resAudio = [

  ['click', "assets/play/music/click.mp3"],

];




/***/ }),

/***/ "./src/environments/environment.ts":
/*!*****************************************!*\
  !*** ./src/environments/environment.ts ***!
  \*****************************************/
/*! exports provided: environment */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "environment", function() { return environment; });
// This file can be replaced during build by using the `fileReplacements` array.
// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
// The list of file replacements can be found in `angular.json`.
const environment = {
    production: false
};
/*
 * For easier debugging in development mode, you can import the following file
 * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
 *
 * This import should be commented out in production mode because it will have a negative impact
 * on performance if an error is thrown.
 */
// import 'zone.js/dist/zone-error';  // Included with Angular CLI.



/***/ }),

/***/ "./src/main.ts":
/*!*********************!*\
  !*** ./src/main.ts ***!
  \*********************/
/*! no exports provided */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @angular/core */ "./node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js");
/* harmony import */ var _environments_environment__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./environments/environment */ "./src/environments/environment.ts");
/* harmony import */ var _app_app_module__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./app/app.module */ "./src/app/app.module.ts");
/* harmony import */ var _angular_platform_browser__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @angular/platform-browser */ "./node_modules/@angular/platform-browser/__ivy_ngcc__/fesm2015/platform-browser.js");




if (_environments_environment__WEBPACK_IMPORTED_MODULE_1__["environment"].production) {
    Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["enableProdMode"])();
}
_angular_platform_browser__WEBPACK_IMPORTED_MODULE_3__["platformBrowser"]().bootstrapModule(_app_app_module__WEBPACK_IMPORTED_MODULE_2__["AppModule"])
    .catch(err => console.error(err));



/***/ }),

/***/ 0:
/*!***************************!*\
  !*** multi ./src/main.ts ***!
  \***************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {

module.exports = __webpack_require__(/*! /Users/liwei/Code/Courseware/sn11_zmxz/form_angular/src/main.ts */"./src/main.ts");


/***/ })

},[[0,"runtime","vendor"]]]);
//# sourceMappingURL=main-es2015.js.map