function _get(target, property, receiver) { if (typeof Reflect !== "undefined" && Reflect.get) { _get = Reflect.get; } else { _get = function _get(target, property, receiver) { var base = _superPropBase(target, property); if (!base) return; var desc = Object.getOwnPropertyDescriptor(base, property); if (desc.get) { return desc.get.call(receiver); } return desc.value; }; } return _get(target, property, receiver || target); }

function _superPropBase(object, property) { while (!Object.prototype.hasOwnProperty.call(object, property)) { object = _getPrototypeOf(object); if (object === null) break; } return object; }

function _createForOfIteratorHelper(o, allowArrayLike) { var it; if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = o[Symbol.iterator](); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }

function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }

function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }

function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }

function _possibleConstructorReturn(self, call) { if (call && (typeof call === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }

function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }

(window["webpackJsonp"] = window["webpackJsonp"] || []).push([["main"], {
  /***/
  "./$$_lazy_route_resource lazy recursive":
  /*!******************************************************!*\
    !*** ./$$_lazy_route_resource lazy namespace object ***!
    \******************************************************/

  /*! no static exports found */

  /***/
  function $$_lazy_route_resourceLazyRecursive(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 srcAppMyErrorTs(module, __webpack_exports__, __webpack_require__) {
    "use strict";

    __webpack_require__.r(__webpack_exports__);
    /* harmony export (binding) */


    __webpack_require__.d(__webpack_exports__, "MyErrorHandler", function () {
      return MyErrorHandler;
    });

    var MyErrorHandler =
    /*#__PURE__*/
    function () {
      function MyErrorHandler() {
        _classCallCheck(this, MyErrorHandler);
      }

      _createClass(MyErrorHandler, [{
        key: "handleError",
        value: function handleError(error) {
          console.log(error.stack);
          window.courseware.sendErrorLog(error);
        }
      }]);

      return MyErrorHandler;
    }();
    /***/

  },

  /***/
  "./src/app/app.component.ts":
  /*!**********************************!*\
    !*** ./src/app/app.component.ts ***!
    \**********************************/

  /*! exports provided: AppComponent */

  /***/
  function srcAppAppComponentTs(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");
      }
    }

    var AppComponent =
    /*@__PURE__*/
    function () {
      var AppComponent =
      /*#__PURE__*/
      function () {
        function AppComponent() {
          _classCallCheck(this, AppComponent);

          this.type = 'play';
          var tp = this.getQueryString('type');

          if (tp) {
            this.type = tp;
          }
        }

        _createClass(AppComponent, [{
          key: "ngOnInit",
          value: function ngOnInit() {}
        }, {
          key: "getQueryString",
          value: function getQueryString(name) {
            var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
            var r = window.location.search.substr(1).match(reg);

            if (r != null) {
              return unescape(r[2]);
            }

            return null;
          }
        }]);

        return AppComponent;
      }();

      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 srcAppAppModuleTs(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);

    var AppModule =
    /*@__PURE__*/
    function () {
      var AppModule = function AppModule(library) {
        _classCallCheck(this, AppModule);

        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 srcAppCommonAudioRecorderAudioRecorderComponentTs(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) {
        var _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);

          var 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) {
        var _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);

          var 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) {
        var ctx_r79 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵnextContext"]();

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵclassProp"]("p-recording", ctx_r79.isRecording);
      }
    }

    var _c0 = function _c0(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) {
        var 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) {
        var 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) {
        var _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);

          var 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) {
        var _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);

          var 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) {
        var _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);

          var 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) {
        var 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);
      }
    }

    var AudioRecorderComponent =
    /*@__PURE__*/
    function () {
      var AudioRecorderComponent =
      /*#__PURE__*/
      function () {
        function AudioRecorderComponent(nzMessageService) {
          var _this = this;

          _classCallCheck(this, AudioRecorderComponent);

          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 = function () {};

          this.beforeUpload = function (file) {
            _this.audioUrl = null;

            if (!_this.checkSelectFile(file)) {
              return false;
            }

            _this.isUploading = true;
            _this.progress = 0;
          };

          this.uploadSuccess = function (url) {
            _this.nzMessageService.info('Upload Success');

            _this.isUploading = false;
            _this.audioUrl = url;
          };

          this.uploadFailure = function (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 = 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 = function (url, data) {
            _this.uploadUrl = url;
            _this.uploadData = data;
          };
        }

        _createClass(AudioRecorderComponent, [{
          key: "init",
          value: function init() {
            this.playIcon = 'play';
            this.isPlaying = false;
            this.isRecording = false;
            this.isUploading = false;
            this.percent = 0;
            this.progress = 0;
            this.audioBlob = null;
          }
        }, {
          key: "ngOnChanges",
          value: function ngOnChanges() {// if (!this.audioItem || !this.audioItem.type) {
            //   return;
            // }
            // this.beforeUpload(this.audioItem);
          }
        }, {
          key: "ngOnInit",
          value: function ngOnInit() {
            var _this2 = this;

            this.audio.onplay = function () {
              _this2.onPlay();
            };

            this.audio.onpause = function () {
              _this2.onPause();
            };

            this.audio.ontimeupdate = function (event) {
              _this2.onTimeUpdate(event);
            };

            this.audio.onended = function (event) {
              _this2.onEnded();
            };
          }
        }, {
          key: "ngOnDestroy",
          value: function ngOnDestroy() {
            this.audio.pause();
            this.isPlaying = false;
            this.audio.remove(); // if (this.recorder.worker) {
            //   this.recorder.worker.terminate();
            // }
          }
        }, {
          key: "progressText",
          value: function progressText(percent) {
            return "";
          }
        }, {
          key: "onPlay",
          value: function onPlay() {
            console.log('play');
            this.playIcon = 'pause';
            this.isPlaying = true;
          }
        }, {
          key: "onPause",
          value: function onPause() {
            console.log('pause');
            this.playIcon = 'play';
            this.isPlaying = false;
          }
        }, {
          key: "onEnded",
          value: function onEnded() {
            console.log('on end');
            this.playIcon = 'play';
            this.percent = 0;
            this.isPlaying = false;
          }
        }, {
          key: "onTimeUpdate",
          value: function onTimeUpdate(event) {
            this.percent = Math.floor(this.audio.currentTime / this.audio.duration * 100);
          }
        }, {
          key: "onBtnPlay",
          value: function onBtnPlay() {
            if (this.isRecording) {
              this.nzMessageService.warning('In Recording');
              return;
            }

            if (this.isPlaying) {
              this.audio.pause();
            } else {
              this.audio.play();
            }
          } // 切换模式

        }, {
          key: "onBtnSwitchType",
          value: function onBtnSwitchType() {}
        }, {
          key: "onBtnClearAudio",
          value: function onBtnClearAudio() {
            this.audioUrl = null;
            this.audioRemoved.emit();
          }
        }, {
          key: "onBtnDeleteAudio",
          value: function onBtnDeleteAudio() {
            this.audioUrl = null;
            this.audioRemoved.emit();
          }
        }, {
          key: "handleChange",
          value: function 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;
            }
          }
        }, {
          key: "checkSelectFile",
          value: function checkSelectFile(file) {
            if (!file) {
              return;
            }

            var 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;
            }

            var delta = 25;
            var isOverSize = file.size / 1024 / 1024 < delta;

            if (!isOverSize) {
              this.nzMessageService.error("audio file  must smaller than ".concat(delta, "MB!"));
              return false;
            }

            return true;
          }
        }, {
          key: "audioUrl",
          set: function set(url) {
            this._audioUrl = url;

            if (url) {
              this.audio.src = this._audioUrl;
              this.audio.load();
            }

            this.init();
          },
          get: function get() {
            return this._audioUrl;
          }
        }]);

        return AudioRecorderComponent;
      }();

      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) {
            var _r83 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵreference"](9);

            var _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 srcAppCommonCustomHotZoneUnitTs(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");

    var Sprite =
    /*#__PURE__*/
    function () {
      function Sprite() {
        var ctx = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;

        _classCallCheck(this, Sprite);

        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;
        }
      }

      _createClass(Sprite, [{
        key: "update",
        value: function update($event) {
          this.draw();
        }
      }, {
        key: "draw",
        value: function draw() {}
      }]);

      return Sprite;
    }();

    var MySprite =
    /*#__PURE__*/
    function (_Sprite) {
      _inherits(MySprite, _Sprite);

      var _super = _createSuper(MySprite);

      function MySprite() {
        var _this3;

        _classCallCheck(this, MySprite);

        _this3 = _super.apply(this, arguments);
        _this3._width = 0;
        _this3._height = 0;
        _this3._anchorX = 0;
        _this3._anchorY = 0;
        _this3._offX = 0;
        _this3._offY = 0;
        _this3.scaleX = 1;
        _this3.scaleY = 1;
        _this3._alpha = 1;
        _this3.rotation = 0;
        _this3.visible = true;
        _this3.skewX = 0;
        _this3.skewY = 0;
        _this3._shadowFlag = false;
        _this3._shadowOffsetX = 0;
        _this3._shadowOffsetY = 0;
        _this3._shadowBlur = 5;
        _this3._radius = 0;
        _this3.children = [_assertThisInitialized(_this3)];
        _this3.childDepandVisible = true;
        _this3.childDepandAlpha = false;
        _this3._z = 0;
        _this3._bitmapFlag = false;
        return _this3;
      }

      _createClass(MySprite, [{
        key: "init",
        value: function init() {
          var imgObj = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
          var anchorX = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0.5;
          var anchorY = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0.5;

          if (imgObj) {
            this.img = imgObj;
            this.width = this.img.width;
            this.height = this.img.height;
          }

          this.anchorX = anchorX;
          this.anchorY = anchorY;
        }
      }, {
        key: "setShowRect",
        value: function setShowRect(rect) {
          this._showRect = rect;
        }
      }, {
        key: "setShadow",
        value: function setShadow(offX, offY, blur) {
          var color = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'rgba(0, 0, 0, 0.3)';
          this._shadowFlag = true;
          this._shadowColor = color;
          this._shadowOffsetX = offX;
          this._shadowOffsetY = offY;
          this._shadowBlur = blur;
        }
      }, {
        key: "setRadius",
        value: function setRadius(r) {
          this._radius = r;
        }
      }, {
        key: "update",
        value: function update() {
          var $event = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;

          if (!this.visible && this.childDepandVisible) {
            return;
          }

          this.draw();
        }
      }, {
        key: "draw",
        value: function draw() {
          this.ctx.save();
          this.drawInit();
          this.updateChildren();
          this.ctx.restore();
        }
      }, {
        key: "drawInit",
        value: function 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();
          // }
        }
      }, {
        key: "drawSelf",
        value: function 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) {
              var 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);
            }
          }
        }
      }, {
        key: "updateChildren",
        value: function updateChildren() {
          if (this.children.length <= 0) {
            return;
          }

          var _iterator = _createForOfIteratorHelper(this.children),
              _step;

          try {
            for (_iterator.s(); !(_step = _iterator.n()).done;) {
              var child = _step.value;

              if (child === this) {
                if (this.visible) {
                  this.drawSelf();
                }
              } else {
                child.update();
              }
            }
          } catch (err) {
            _iterator.e(err);
          } finally {
            _iterator.f();
          }
        }
      }, {
        key: "load",
        value: function load(url) {
          var _this4 = this;

          var anchorX = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0.5;
          var anchorY = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0.5;
          return new Promise(function (resolve, reject) {
            var img = new Image();

            img.onload = function () {
              return resolve(img);
            };

            img.onerror = reject;
            img.src = url;
          }).then(function (img) {
            _this4.init(img, anchorX, anchorY);

            return img;
          });
        }
      }, {
        key: "addChild",
        value: function addChild(child) {
          var z = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;

          if (this.children.indexOf(child) === -1) {
            this.children.push(child);
            child._z = z;
            child.parent = this;
          }

          this.children.sort(function (a, b) {
            return a._z - b._z;
          });

          if (this.childDepandAlpha) {
            child.alpha = this.alpha;
          }
        }
      }, {
        key: "removeChild",
        value: function removeChild(child) {
          var index = this.children.indexOf(child);

          if (index !== -1) {
            this.children.splice(index, 1);
          }
        }
      }, {
        key: "removeChildren",
        value: function removeChildren() {
          for (var i = 0; i < this.children.length; i++) {
            if (this.children[i]) {
              if (this.children[i] !== this) {
                this.children.splice(i, 1);
                i--;
              }
            }
          }
        }
      }, {
        key: "_changeChildAlpha",
        value: function _changeChildAlpha(alpha) {
          var _iterator2 = _createForOfIteratorHelper(this.children),
              _step2;

          try {
            for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
              var child = _step2.value;

              if (child !== this) {
                child.alpha = alpha;
              }
            }
          } catch (err) {
            _iterator2.e(err);
          } finally {
            _iterator2.f();
          }
        }
      }, {
        key: "refreshAnchorOff",
        value: function refreshAnchorOff() {
          this._offX = -this._width * this.anchorX;
          this._offY = -this._height * this.anchorY;
        }
      }, {
        key: "setScaleXY",
        value: function setScaleXY(value) {
          this.scaleX = this.scaleY = value;
        }
      }, {
        key: "getBoundingBox",
        value: function getBoundingBox() {
          var getParentData = function getParentData(item) {
            var px = item.x;
            var py = item.y;
            var sx = item.scaleX;
            var sy = item.scaleY;
            var parent = item.parent;

            if (parent) {
              var obj = getParentData(parent);
              var _x = obj.px;
              var _y = obj.py;
              var _sx = obj.sx;
              var _sy = obj.sy;
              px = _x + item.x * _sx;
              py = _y + item.y * _sy;
              sx *= _sx;
              sy *= _sy;
            }

            return {
              px: px,
              py: py,
              sx: sx,
              sy: sy
            };
          };

          var data = getParentData(this);
          var x = data.px + this._offX * Math.abs(data.sx);
          var y = data.py + this._offY * Math.abs(data.sy);
          var width = this.width * Math.abs(data.sx);
          var height = this.height * Math.abs(data.sy);
          return {
            x: x,
            y: y,
            width: width,
            height: height
          };
        }
      }, {
        key: "btimapFlag",
        set: function set(v) {
          this._bitmapFlag = v;
        },
        get: function get() {
          return this._bitmapFlag;
        }
      }, {
        key: "alpha",
        set: function set(v) {
          this._alpha = v;

          if (this.childDepandAlpha) {
            this._changeChildAlpha(v);
          }
        },
        get: function get() {
          return this._alpha;
        }
      }, {
        key: "width",
        set: function set(v) {
          this._width = v;
          this.refreshAnchorOff();
        },
        get: function get() {
          return this._width;
        }
      }, {
        key: "height",
        set: function set(v) {
          this._height = v;
          this.refreshAnchorOff();
        },
        get: function get() {
          return this._height;
        }
      }, {
        key: "anchorX",
        set: function set(value) {
          this._anchorX = value;
          this.refreshAnchorOff();
        },
        get: function get() {
          return this._anchorX;
        }
      }, {
        key: "anchorY",
        set: function set(value) {
          this._anchorY = value;
          this.refreshAnchorOff();
        },
        get: function get() {
          return this._anchorY;
        }
      }]);

      return MySprite;
    }(Sprite);

    var RoundSprite =
    /*#__PURE__*/
    function (_MySprite) {
      _inherits(RoundSprite, _MySprite);

      var _super2 = _createSuper(RoundSprite);

      function RoundSprite() {
        _classCallCheck(this, RoundSprite);

        return _super2.apply(this, arguments);
      }

      _createClass(RoundSprite, [{
        key: "init",
        value: function init() {
          var imgObj = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
          var anchorX = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0.5;
          var anchorY = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0.5;

          if (imgObj) {
            this.img = imgObj;
            this.width = this.img.width;
            this.height = this.img.height;
          }

          this.anchorX = anchorX;
          this.anchorY = anchorY;
          var canvas = window['curCanvas'];
          var w = canvas.nativeElement.width;
          var 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;
        }
      }, {
        key: "drawSelf",
        value: function 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) {
            var r = this._radius;
            var w = this.width;
            var h = this.height;
            var x = -this._offX;
            var 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);
          }
        }
      }]);

      return RoundSprite;
    }(MySprite);

    var ColorSpr =
    /*#__PURE__*/
    function (_MySprite2) {
      _inherits(ColorSpr, _MySprite2);

      var _super3 = _createSuper(ColorSpr);

      function ColorSpr() {
        var _this5;

        _classCallCheck(this, ColorSpr);

        _this5 = _super3.apply(this, arguments);
        _this5.r = 0;
        _this5.g = 0;
        _this5.b = 0;
        return _this5;
      }

      _createClass(ColorSpr, [{
        key: "createGSCanvas",
        value: function createGSCanvas() {
          if (!this.img) {
            return;
          }

          var rect = this.getBoundingBox();

          if (rect.width <= 1 || rect.height <= 1) {
            return;
          }

          var c = this.ctx.getImageData(rect.x, rect.y, rect.width, rect.height);

          for (var i = 0; i < c.height; i++) {
            for (var j = 0; j < c.width; j++) {
              var x = i * 4 * c.width + j * 4;
              var r = c.data[x];
              var g = c.data[x + 1];
              var 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);
        }
      }, {
        key: "drawSelf",
        value: function drawSelf() {
          _get(_getPrototypeOf(ColorSpr.prototype), "drawSelf", this).call(this);

          this.createGSCanvas();
        }
      }]);

      return ColorSpr;
    }(MySprite);

    var GrayscaleSpr =
    /*#__PURE__*/
    function (_MySprite3) {
      _inherits(GrayscaleSpr, _MySprite3);

      var _super4 = _createSuper(GrayscaleSpr);

      function GrayscaleSpr() {
        var _this6;

        _classCallCheck(this, GrayscaleSpr);

        _this6 = _super4.apply(this, arguments);
        _this6.grayScale = 120;
        return _this6;
      }

      _createClass(GrayscaleSpr, [{
        key: "createGSCanvas",
        value: function createGSCanvas() {
          if (!this.img) {
            return;
          }

          var rect = this.getBoundingBox();
          var c = this.ctx.getImageData(rect.x, rect.y, rect.width, rect.height);

          for (var i = 0; i < c.height; i++) {
            for (var j = 0; j < c.width; j++) {
              var x = i * 4 * c.width + j * 4;
              var r = c.data[x];
              var g = c.data[x + 1];
              var 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);
        }
      }, {
        key: "drawSelf",
        value: function drawSelf() {
          _get(_getPrototypeOf(GrayscaleSpr.prototype), "drawSelf", this).call(this);

          this.createGSCanvas();
        }
      }]);

      return GrayscaleSpr;
    }(MySprite);

    var BitMapLabel =
    /*#__PURE__*/
    function (_MySprite4) {
      _inherits(BitMapLabel, _MySprite4);

      var _super5 = _createSuper(BitMapLabel);

      function BitMapLabel() {
        _classCallCheck(this, BitMapLabel);

        return _super5.apply(this, arguments);
      }

      _createClass(BitMapLabel, [{
        key: "setText",
        value: function setText(data, text) {
          this.labelArr = [];
          var labelArr = [];
          var tmpArr = text.split('');
          var totalW = 0;
          var h = 0;

          var _iterator3 = _createForOfIteratorHelper(tmpArr),
              _step3;

          try {
            for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
              var tmp = _step3.value;

              var _label = new MySprite(this.ctx);

              _label.init(data[tmp], 0);

              this.addChild(_label);
              labelArr.push(_label);
              totalW += _label.width;
              h = _label.height;
            }
          } catch (err) {
            _iterator3.e(err);
          } finally {
            _iterator3.f();
          }

          this.width = totalW;
          this.height = h;
          var offX = -totalW / 2;

          for (var _i = 0, _labelArr = labelArr; _i < _labelArr.length; _i++) {
            var label = _labelArr[_i];
            label.x = offX;
            offX += label.width;
          }

          this.labelArr = labelArr;
        }
      }]);

      return BitMapLabel;
    }(MySprite);

    var Label =
    /*#__PURE__*/
    function (_MySprite5) {
      _inherits(Label, _MySprite5);

      var _super6 = _createSuper(Label);

      function Label() {
        var _this7;

        var ctx = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;

        _classCallCheck(this, Label);

        _this7 = _super6.call(this, ctx); // fontSize:String = '40px';

        _this7.fontName = 'Verdana';
        _this7.textAlign = 'left';
        _this7.fontSize = 40;
        _this7.fontColor = '#000000';
        _this7.fontWeight = 900;
        _this7.outline = 0;
        _this7.outlineColor = '#ffffff'; // _shadowFlag = false;
        // _shadowColor;
        // _shadowOffsetX;
        // _shadowOffsetY;
        // _shadowBlur;

        _this7._outlineFlag = false;

        _this7.init();

        return _this7;
      }

      _createClass(Label, [{
        key: "refreshSize",
        value: function refreshSize() {
          this.ctx.save();
          this.ctx.font = "".concat(this.fontSize * this.scaleX, "px ").concat(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();
        }
      }, {
        key: "setMaxSize",
        value: function setMaxSize(w) {
          this._maxWidth = w;
          this.refreshSize();

          if (this.width >= w) {
            this.scaleX *= w / this.width;
            this.scaleY *= w / this.width;
          }
        }
      }, {
        key: "show",
        value: function show() {
          var callBack = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
          this.visible = true;

          if (this.alpha >= 1) {
            return;
          }

          var 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(function () {
            if (callBack) {
              callBack();
            }
          }).start(); // Start the tween immediately.
        }
      }, {
        key: "setOutline",
        value: function setOutline() {
          var width = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 5;
          var color = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '#ffffff';
          this._outlineFlag = true;
          this._outLineWidth = width;
          this._outLineColor = color;
        }
      }, {
        key: "drawText",
        value: function drawText() {
          if (!this.text) {
            return;
          }

          this.ctx.font = "".concat(this.fontSize, "px ").concat(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);
        }
      }, {
        key: "drawSelf",
        value: function drawSelf() {
          _get(_getPrototypeOf(Label.prototype), "drawSelf", this).call(this);

          this.drawText();
        }
      }, {
        key: "text",
        get: function get() {
          return this._text;
        },
        set: function set(value) {
          this._text = value;
          this.refreshSize();
        }
      }]);

      return Label;
    }(MySprite);

    var RichTextOld =
    /*#__PURE__*/
    function (_Label) {
      _inherits(RichTextOld, _Label);

      var _super7 = _createSuper(RichTextOld);

      function RichTextOld() {
        var _this8;

        _classCallCheck(this, RichTextOld);

        _this8 = _super7.apply(this, arguments);
        _this8.textArr = [];
        _this8.fontSize = 40;
        return _this8;
      }

      _createClass(RichTextOld, [{
        key: "setText",
        value: function setText(text, words) {
          var newText = text;

          var _iterator4 = _createForOfIteratorHelper(words),
              _step4;

          try {
            for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
              var word = _step4.value;
              var re = new RegExp(word, 'g');
              newText = newText.replace(re, "#".concat(word, "#")); // newText = newText.replace(word, `#${word}#`);
            }
          } catch (err) {
            _iterator4.e(err);
          } finally {
            _iterator4.f();
          }

          this.textArr = newText.split('#');
          this.text = newText; // this.setSize();
        }
      }, {
        key: "refreshSize",
        value: function refreshSize() {
          this.ctx.save();
          this.ctx.font = "".concat(this.fontSize, "px ").concat(this.fontName);
          this.ctx.textAlign = this.textAlign;
          this.ctx.textBaseline = 'middle';
          this.ctx.fontWeight = this.fontWeight;
          var curX = 0;

          var _iterator5 = _createForOfIteratorHelper(this.textArr),
              _step5;

          try {
            for (_iterator5.s(); !(_step5 = _iterator5.n()).done;) {
              var text = _step5.value;
              var w = this.ctx.measureText(text).width;
              curX += w;
            }
          } catch (err) {
            _iterator5.e(err);
          } finally {
            _iterator5.f();
          }

          this.width = curX;
          this.height = this.fontSize;
          this.refreshAnchorOff();
          this.ctx.restore();
        }
      }, {
        key: "show",
        value: function show() {
          var callBack = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
          // console.log(' in show ');
          this.visible = true; // this.alpha = 0;

          var 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(function () {
            if (callBack) {
              callBack();
            }
          }).start(); // Start the tween immediately.
        }
      }, {
        key: "drawText",
        value: function drawText() {
          // console.log('in drawText', this.text);
          if (!this.text) {
            return;
          }

          this.ctx.font = "".concat(this.fontSize, "px ").concat(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);

          var curX = 0;

          for (var i = 0; i < this.textArr.length; i++) {
            var 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;
          }
        }
      }]);

      return RichTextOld;
    }(Label);

    var RichText =
    /*#__PURE__*/
    function (_Label2) {
      _inherits(RichText, _Label2);

      var _super8 = _createSuper(RichText);

      function RichText(ctx) {
        var _this9;

        _classCallCheck(this, RichText);

        _this9 = _super8.call(this, ctx);
        _this9.disH = 30; // this.dataArr = dataArr;

        return _this9;
      }

      _createClass(RichText, [{
        key: "drawText",
        value: function drawText() {
          if (!this.text) {
            return;
          }

          this.ctx.font = "".concat(this.fontSize, "px ").concat(this.fontName);
          this.ctx.textAlign = this.textAlign;
          this.ctx.textBaseline = 'middle';
          this.ctx.fontWeight = this.fontWeight;
          this.ctx.fillStyle = this.fontColor;
          var selfW = this.width * this.scaleX;
          var chr = this.text.split(' ');
          var temp = '';
          var row = [];
          var w = selfW - 80;
          var disH = (this.fontSize + this.disH) * this.scaleY;

          var _iterator6 = _createForOfIteratorHelper(chr),
              _step6;

          try {
            for (_iterator6.s(); !(_step6 = _iterator6.n()).done;) {
              var c = _step6.value;

              if (this.ctx.measureText(temp).width < w && this.ctx.measureText(temp + c).width <= w) {
                temp += ' ' + c;
              } else {
                row.push(temp);
                temp = ' ' + c;
              }
            }
          } catch (err) {
            _iterator6.e(err);
          } finally {
            _iterator6.f();
          }

          row.push(temp);
          var x = 0;
          var 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 (var 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 (var _b = 0; _b < row.length; _b++) {
            this.ctx.fillText(row[_b], x, y + (_b + 1) * disH); // 每行字体y坐标间隔20
          }
        }
      }, {
        key: "drawSelf",
        value: function drawSelf() {
          _get(_getPrototypeOf(RichText.prototype), "drawSelf", this).call(this);

          this.drawText();
        }
      }]);

      return RichText;
    }(Label);

    var LineRect =
    /*#__PURE__*/
    function (_MySprite6) {
      _inherits(LineRect, _MySprite6);

      var _super9 = _createSuper(LineRect);

      function LineRect() {
        var _this10;

        _classCallCheck(this, LineRect);

        _this10 = _super9.apply(this, arguments);
        _this10.lineColor = '#ffffff';
        _this10.lineWidth = 10;
        return _this10;
      }

      _createClass(LineRect, [{
        key: "setSize",
        value: function setSize(w, h) {
          this.width = w;
          this.height = h;
        }
      }, {
        key: "drawLine",
        value: function 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();
        }
      }, {
        key: "drawSelf",
        value: function drawSelf() {
          _get(_getPrototypeOf(LineRect.prototype), "drawSelf", this).call(this);

          this.drawLine();
        }
      }]);

      return LineRect;
    }(MySprite);

    var ShapeRect =
    /*#__PURE__*/
    function (_MySprite7) {
      _inherits(ShapeRect, _MySprite7);

      var _super10 = _createSuper(ShapeRect);

      function ShapeRect() {
        var _this11;

        _classCallCheck(this, ShapeRect);

        _this11 = _super10.apply(this, arguments);
        _this11.fillColor = '#FF0000';
        return _this11;
      }

      _createClass(ShapeRect, [{
        key: "setSize",
        value: function setSize(w, h) {
          this.width = w;
          this.height = h; // console.log('w:', w);
          // console.log('h:', h);
        }
      }, {
        key: "drawShape",
        value: function drawShape() {
          this.ctx.fillStyle = this.fillColor;
          this.ctx.fillRect(this._offX, this._offY, this.width, this.height);
        }
      }, {
        key: "drawSelf",
        value: function drawSelf() {
          _get(_getPrototypeOf(ShapeRect.prototype), "drawSelf", this).call(this);

          this.drawShape();
        }
      }]);

      return ShapeRect;
    }(MySprite);

    var Line =
    /*#__PURE__*/
    function (_MySprite8) {
      _inherits(Line, _MySprite8);

      var _super11 = _createSuper(Line);

      function Line() {
        var _this12;

        _classCallCheck(this, Line);

        _this12 = _super11.apply(this, arguments);
        _this12.lineWidth = 5;
        _this12.lineColor = '#000000';
        _this12._pointArr = [];
        _this12.roundFlag = true;
        _this12._pointS = 1;
        _this12.lastPointIndex = 0;
        return _this12;
      }

      _createClass(Line, [{
        key: "init",
        value: function init() {
          var canvas = window['curCanvas'];
          var w = canvas.nativeElement.width;
          var 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');
        }
      }, {
        key: "addPoint",
        value: function 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);

        }
      }, {
        key: "setPointArr",
        value: function setPointArr(arr, imgObj) {
          this.removeChildren();

          if (arr.length < 2) {
            return;
          }

          var p1 = arr[0];
          var p2;

          for (var i = 1; i < arr.length; i++) {
            p2 = arr[i];
            var tmpLine = new MySprite();
            tmpLine.init(imgObj);
            tmpLine.anchorY = 1;
            tmpLine.anchorX = 0.5;
            tmpLine.x = p1[0];
            tmpLine.y = p1[1];
            var disH = getPosDistance(p1[0], p1[1], p2[0], p2[1]);
            tmpLine.scaleX = this.lineWidth / tmpLine.width;
            tmpLine.scaleY = disH / tmpLine.height * 1.1;
            var angle = getAngleByPos(p1[0], p1[1], p2[0], p2[1]);
            tmpLine.rotation = angle;
            this.addChild(tmpLine);
            p1 = p2;
          }
        }
      }, {
        key: "drawLine",
        value: function drawLine() {
          if (this._pointArr.length < 2) {
            return;
          }

          var curMaxPointIndex = this._pointArr.length - 1;

          if (curMaxPointIndex > this.lastPointIndex) {
            var arr = this._pointArr;
            var context = this._offCtx;
            context.moveTo(arr[this.lastPointIndex][0] * this._pointS, arr[this.lastPointIndex][1] * this._pointS); // 设置起点状态

            for (var 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);
        }
      }, {
        key: "drawSelf",
        value: function drawSelf() {
          _get(_getPrototypeOf(Line.prototype), "drawSelf", this).call(this);

          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);
          // }
        }
      }]);

      return Line;
    }(MySprite);

    var ShapeCircle =
    /*#__PURE__*/
    function (_MySprite9) {
      _inherits(ShapeCircle, _MySprite9);

      var _super12 = _createSuper(ShapeCircle);

      function ShapeCircle() {
        var _this13;

        _classCallCheck(this, ShapeCircle);

        _this13 = _super12.apply(this, arguments);
        _this13.fillColor = '#FF0000';
        _this13.radius = 0;
        return _this13;
      }

      _createClass(ShapeCircle, [{
        key: "setRadius",
        value: function setRadius(r) {
          this.anchorX = this.anchorY = 0.5;
          this.radius = r;
          this.width = r * 2;
          this.height = r * 2;
        }
      }, {
        key: "drawShape",
        value: function drawShape() {
          this.ctx.beginPath();
          this.ctx.fillStyle = this.fillColor;
          this.ctx.arc(0, 0, this.radius, 0, angleToRadian(360));
          this.ctx.fill();
        }
      }, {
        key: "drawSelf",
        value: function drawSelf() {
          _get(_getPrototypeOf(ShapeCircle.prototype), "drawSelf", this).call(this);

          this.drawShape();
        }
      }]);

      return ShapeCircle;
    }(MySprite);

    var ShapeRectNew =
    /*#__PURE__*/
    function (_MySprite10) {
      _inherits(ShapeRectNew, _MySprite10);

      var _super13 = _createSuper(ShapeRectNew);

      function ShapeRectNew() {
        var _this14;

        _classCallCheck(this, ShapeRectNew);

        _this14 = _super13.apply(this, arguments);
        _this14.radius = 0;
        _this14.fillColor = '#ffffff';
        _this14.strokeColor = '#000000';
        _this14.fill = true;
        _this14.stroke = false;
        _this14.lineWidth = 1;
        return _this14;
      }

      _createClass(ShapeRectNew, [{
        key: "setSize",
        value: function setSize(w, h, r) {
          this.width = w;
          this.height = h;
          this.radius = r;
        }
      }, {
        key: "setOutLine",
        value: function setOutLine(color, lineWidth) {
          this.stroke = true;
          this.strokeColor = color;
          this.lineWidth = lineWidth;
        }
      }, {
        key: "drawShape",
        value: function drawShape() {
          var ctx = this.ctx;
          var width = this.width;
          var height = this.height;
          var 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();
        }
      }, {
        key: "drawSelf",
        value: function drawSelf() {
          _get(_getPrototypeOf(ShapeRectNew.prototype), "drawSelf", this).call(this);

          this.drawShape();
        }
      }]);

      return ShapeRectNew;
    }(MySprite);

    var MyAnimation =
    /*#__PURE__*/
    function (_MySprite11) {
      _inherits(MyAnimation, _MySprite11);

      var _super14 = _createSuper(MyAnimation);

      function MyAnimation() {
        var _this15;

        _classCallCheck(this, MyAnimation);

        _this15 = _super14.apply(this, arguments);
        _this15.frameArr = [];
        _this15.frameIndex = 0;
        _this15.playFlag = false;
        _this15.curDelay = 0;
        _this15.loop = false;
        _this15.delayPerUnit = 1;
        _this15.restartFlag = false;
        _this15.reverseFlag = false;
        return _this15;
      }

      _createClass(MyAnimation, [{
        key: "addFrameByImg",
        value: function addFrameByImg(img) {
          var 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;
        }
      }, {
        key: "addFrameByUrl",
        value: function addFrameByUrl(url) {
          var _this16 = this;

          var spr = new MySprite(this.ctx);
          spr.load(url).then(function (img) {
            _this16._refreshSize(img);
          });
          spr.visible = false;
          this.addChild(spr);
          this.frameArr.push(spr);
          this.frameArr[this.frameIndex].visible = true;
        }
      }, {
        key: "_refreshSize",
        value: function _refreshSize(img) {
          if (this.width < img.width) {
            this.width = img.width;
          }

          if (this.height < img.height) {
            this.height = img.height;
          }
        }
      }, {
        key: "play",
        value: function play() {
          this.playFlag = true;
          this.lastDateTime = new Date().getTime();
        }
      }, {
        key: "stop",
        value: function stop() {
          this.playFlag = false;
        }
      }, {
        key: "replay",
        value: function replay() {
          this.restartFlag = true;
          this.play();
        }
      }, {
        key: "reverse",
        value: function reverse() {
          this.reverseFlag = !this.reverseFlag;
          this.frameArr.reverse();
          this.frameIndex = 0;
        }
      }, {
        key: "showAllFrame",
        value: function showAllFrame() {
          var _iterator7 = _createForOfIteratorHelper(this.frameArr),
              _step7;

          try {
            for (_iterator7.s(); !(_step7 = _iterator7.n()).done;) {
              var frame = _step7.value;
              frame.alpha = 1;
            }
          } catch (err) {
            _iterator7.e(err);
          } finally {
            _iterator7.f();
          }
        }
      }, {
        key: "hideAllFrame",
        value: function hideAllFrame() {
          var _iterator8 = _createForOfIteratorHelper(this.frameArr),
              _step8;

          try {
            for (_iterator8.s(); !(_step8 = _iterator8.n()).done;) {
              var frame = _step8.value;
              frame.alpha = 0;
            }
          } catch (err) {
            _iterator8.e(err);
          } finally {
            _iterator8.f();
          }
        }
      }, {
        key: "playEnd",
        value: function playEnd() {
          this.playFlag = false;
          this.curDelay = 0;
          this.frameArr[this.frameIndex].visible = true;

          if (this.playEndFunc) {
            this.playEndFunc();
            this.playEndFunc = null;
          }
        }
      }, {
        key: "updateFrame",
        value: function 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;
        }
      }, {
        key: "_updateDelay",
        value: function _updateDelay(delay) {
          this.curDelay += delay;

          if (this.curDelay < this.delayPerUnit) {
            return;
          }

          this.curDelay -= this.delayPerUnit;
          this.updateFrame();
        }
      }, {
        key: "_updateLastDate",
        value: function _updateLastDate() {
          if (!this.playFlag) {
            return;
          }

          var delay = 0;

          if (this.lastDateTime) {
            delay = (new Date().getTime() - this.lastDateTime) / 1000;
          }

          this.lastDateTime = new Date().getTime();

          this._updateDelay(delay);
        }
      }, {
        key: "update",
        value: function update() {
          var $event = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;

          _get(_getPrototypeOf(MyAnimation.prototype), "update", this).call(this, $event);

          this._updateLastDate();
        }
      }]);

      return MyAnimation;
    }(MySprite); // --------===========  util func  =============-------------


    function tweenChange(item, obj) {
      var time = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0.8;
      var callBack = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
      var easing = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : null;
      var update = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : null;
      var tween = new _tweenjs_tween_js__WEBPACK_IMPORTED_MODULE_0__["default"].Tween(item).to(obj, time * 1000);

      if (callBack) {
        tween.onComplete(function () {
          callBack();
        });
      }

      if (easing) {
        tween.easing(easing);
      }

      if (update) {
        tween.onUpdate(function (a, b) {
          update(a, b);
        });
      }

      tween.start();
      return tween;
    }

    function rotateItem(item, rotation) {
      var time = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0.8;
      var callBack = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
      var easing = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : null;
      var tween = new _tweenjs_tween_js__WEBPACK_IMPORTED_MODULE_0__["default"].Tween(item).to({
        rotation: rotation
      }, time * 1000);

      if (callBack) {
        tween.onComplete(function () {
          callBack();
        });
      }

      if (easing) {
        tween.easing(easing);
      }

      tween.start();
    }

    function scaleItem(item, scale) {
      var time = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0.8;
      var callBack = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
      var easing = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : null;
      var tween = new _tweenjs_tween_js__WEBPACK_IMPORTED_MODULE_0__["default"].Tween(item).to({
        scaleX: scale,
        scaleY: scale
      }, time * 1000);

      if (callBack) {
        tween.onComplete(function () {
          callBack();
        });
      }

      if (easing) {
        tween.easing(easing);
      }

      tween.start();
      return tween;
    }

    function moveItem(item, x, y) {
      var time = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0.8;
      var callBack = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : null;
      var easing = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : null;
      var tween = new _tweenjs_tween_js__WEBPACK_IMPORTED_MODULE_0__["default"].Tween(item).to({
        x: x,
        y: y
      }, time * 1000);

      if (callBack) {
        tween.onComplete(function () {
          callBack();
        });
      }

      if (easing) {
        tween.easing(easing);
      }

      tween.start();
      return tween;
    }

    function endShow(item) {
      var s = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
      item.scaleX = item.scaleY = 0;
      item.alpha = 0;
      var 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(function () {}).start();
    }

    function hideItem(item) {
      var time = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0.8;
      var callBack = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
      var easing = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;

      if (item.alpha === 0) {
        return;
      }

      var 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(function () {
        if (callBack) {
          callBack();
        }
      });

      if (easing) {
        tween.easing(easing);
      }

      tween.start();
    }

    function showItem(item) {
      var time = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0.8;
      var callBack = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
      var easing = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;

      if (item.alpha === 1) {
        if (callBack) {
          callBack();
        }

        return;
      }

      item.visible = true;
      var 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(function () {
        if (callBack) {
          callBack();
        }
      });

      if (easing) {
        tween.easing(easing);
      }

      tween.start();
    }

    function alphaItem(item, alpha) {
      var time = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0.8;
      var callBack = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
      var easing = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : null;
      var tween = new _tweenjs_tween_js__WEBPACK_IMPORTED_MODULE_0__["default"].Tween(item).to({
        alpha: alpha
      }, time * 1000) // .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth.
      .onComplete(function () {
        if (callBack) {
          callBack();
        }
      });

      if (easing) {
        tween.easing(easing);
      }

      tween.start();
    }

    function showStar(item) {
      var time = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0.8;
      var callBack = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
      var easing = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
      var 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(function () {
        if (callBack) {
          callBack();
        }
      });

      if (easing) {
        tween.easing(easing);
      }

      tween.start();
    }

    function randomSortByArr(arr) {
      if (!arr) {
        return;
      }

      var newArr = [];
      var tmpArr = arr.concat();

      while (tmpArr.length > 0) {
        var 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) {
      var radian = angle * Math.PI / 180;
      var x = Math.sin(radian) * len;
      var y = Math.cos(radian) * len;
      return {
        x: x,
        y: y
      };
    }

    function getAngleByPos(px, py, mx, my) {
      var x = Math.abs(px - mx);
      var y = Math.abs(py - my);
      var z = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));
      var cos = y / z;
      var radina = Math.acos(cos); // 用反三角函数求弧度

      var 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) {
      var index = arr.indexOf(item);

      if (index !== -1) {
        arr.splice(index, 1);
      }
    }

    function circleMove(item, x0, y0) {
      var time = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 2;
      var addR = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 360;
      var xPer = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : 1;
      var yPer = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : 1;
      var callBack = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : null;
      var easing = arguments.length > 8 && arguments[8] !== undefined ? arguments[8] : null;
      var r = getPosDistance(item.x, item.y, x0, y0);
      var a = getAngleByPos(item.x, item.y, x0, y0);
      a += 90;
      var obj = {
        r: r,
        a: a
      };
      item._circleAngle = a;
      var targetA = a + addR;
      var tween = new _tweenjs_tween_js__WEBPACK_IMPORTED_MODULE_0__["default"].Tween(item).to({
        _circleAngle: targetA
      }, time * 1000);

      if (callBack) {
        tween.onComplete(function () {
          callBack();
        });
      }

      if (easing) {
        tween.easing(easing);
      }

      tween.onUpdate(function (item, progress) {
        // console.log(item._circleAngle);
        var r = obj.r;
        var a = item._circleAngle;
        var x = x0 + r * xPer * Math.cos(a * Math.PI / 180);
        var 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) {
      var _x = ex - sx;

      var _y = ey - sy;

      var len = Math.sqrt(Math.pow(_x, 2) + Math.pow(_y, 2));
      return len;
    }

    function delayCall(callback, second) {
      var tween = new _tweenjs_tween_js__WEBPACK_IMPORTED_MODULE_0__["default"].Tween(this).delay(second * 1000).onComplete(function () {
        if (callback) {
          callback();
        }
      }).start();
    }

    function formatTime(fmt, date) {
      // "yyyy-MM-dd HH:mm:ss";
      var 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 (var 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) {
      var sx = maxLen / item.width;
      var sy = maxLen / item.height;
      var minS = Math.min(sx, sy);
      return minS;
    }

    function jelly(item) {
      var time = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0.7;

      if (item.jellyTween) {
        _tweenjs_tween_js__WEBPACK_IMPORTED_MODULE_0__["default"].remove(item.jellyTween);
      }

      var t = time / 9;
      var baseSX = item.scaleX;
      var baseSY = item.scaleY;
      var index = 0;

      var run = function run() {
        if (index >= arr.length) {
          item.jellyTween = null;
          return;
        }

        var data = arr[index];
        var t = tweenChange(item, {
          scaleX: data[0],
          scaleY: data[1]
        }, data[2], function () {
          index++;
          run();
        }, _tweenjs_tween_js__WEBPACK_IMPORTED_MODULE_0__["default"].Easing.Sinusoidal.InOut);
        item.jellyTween = t;
      };

      var 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) {
      var num = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 20;
      var minLen = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 40;
      var maxLen = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : 80;
      var showTime = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : 0.4;

      var _loop = function _loop(i) {
        var particle = new MySprite();
        particle.init(img);
        particle.x = pos.x;
        particle.y = pos.y;
        parent.addChild(particle);
        var randomR = 360 * Math.random();
        particle.rotation = randomR;
        var randomS = 0.3 + Math.random() * 0.7;
        particle.setScaleXY(randomS * 0.3);
        var randomX = Math.random() * 20 - 10;
        particle.x += randomX;
        var randomY = Math.random() * 20 - 10;
        particle.y += randomY;
        var randomL = minLen + Math.random() * (maxLen - minLen);
        var randomA = 360 * Math.random();
        var randomT = getPosByAngle(randomA, randomL);
        moveItem(particle, particle.x + randomT.x, particle.y + randomT.y, showTime, function () {}, _tweenjs_tween_js__WEBPACK_IMPORTED_MODULE_0__["default"].Easing.Exponential.Out); // scaleItem(particle, 0, 0.6, () => {
        //
        // });

        scaleItem(particle, randomS, 0.6, function () {}, _tweenjs_tween_js__WEBPACK_IMPORTED_MODULE_0__["default"].Easing.Exponential.Out);
        setTimeout(function () {
          hideItem(particle, 0.4, function () {}, _tweenjs_tween_js__WEBPACK_IMPORTED_MODULE_0__["default"].Easing.Cubic.In);
        }, showTime * 0.5 * 1000);
      };

      for (var i = 0; i < num; i++) {
        _loop(i);
      }
    }

    function shake(item) {
      var time = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0.5;
      var callback = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
      var rate = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1;

      if (item.shakeTween) {
        return;
      }

      item.shakeTween = true;
      var offX = 15 * item.scaleX * rate;
      var offY = 15 * item.scaleX * rate;
      var baseX = item.x;
      var baseY = item.y;
      var easing = _tweenjs_tween_js__WEBPACK_IMPORTED_MODULE_0__["default"].Easing.Sinusoidal.InOut;

      var move4 = function move4() {
        moveItem(item, baseX, baseY, time / 4, function () {
          item.shakeTween = false;

          if (callback) {
            callback();
          }
        }, easing);
      };

      var move3 = function move3() {
        moveItem(item, baseX + offX / 4, baseY + offY / 4, time / 4, function () {
          move4();
        }, easing);
      };

      var move2 = function move2() {
        moveItem(item, baseX - offX / 4 * 3, baseY - offY / 4 * 3, time / 4, function () {
          move3();
        }, easing);
      };

      var move1 = function move1() {
        moveItem(item, baseX + offX, baseY + offY, time / 7.5, function () {
          move2();
        }, easing);
      };

      move1();
    } // --------------- custom class --------------------


    var HotZoneItem =
    /*#__PURE__*/
    function (_MySprite12) {
      _inherits(HotZoneItem, _MySprite12);

      var _super15 = _createSuper(HotZoneItem);

      function HotZoneItem() {
        var _this17;

        _classCallCheck(this, HotZoneItem);

        _this17 = _super15.apply(this, arguments);
        _this17.lineDashFlag = false;
        return _this17;
      }

      _createClass(HotZoneItem, [{
        key: "setSize",
        value: function setSize(w, h) {
          this.width = w;
          this.height = h;
          var 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);
        }
      }, {
        key: "showLabel",
        value: function showLabel() {
          var text = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 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;
        }
      }, {
        key: "hideLabel",
        value: function hideLabel() {
          if (!this.label) {
            return;
          }

          this.label.visible = false;
        }
      }, {
        key: "refreshLabelScale",
        value: function 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;
          }
        }
      }, {
        key: "showLineDash",
        value: function 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();
        }
      }, {
        key: "hideLineDash",
        value: function hideLineDash() {
          this.lineDashFlag = false;

          if (this.arrow) {
            this.arrow.visible = false;
          }

          this.hideLabel();
        }
      }, {
        key: "drawArrow",
        value: function drawArrow() {
          if (!this.arrow) {
            return;
          }

          var 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();
        }
      }, {
        key: "drawFrame",
        value: function drawFrame() {
          this.ctx.save();
          var rect = this.getBoundingBox();
          var w = rect.width;
          var h = rect.height;
          var x = rect.x + w / 2;
          var 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();
        }
      }, {
        key: "draw",
        value: function draw() {
          _get(_getPrototypeOf(HotZoneItem.prototype), "draw", this).call(this);

          if (this.lineDashFlag) {
            this.drawFrame();
            this.drawArrow();
          }
        }
      }, {
        key: "itemType",
        get: function get() {
          return this._itemType;
        },
        set: function set(value) {
          this._itemType = value;
        }
      }]);

      return HotZoneItem;
    }(MySprite);

    var HotZoneImg =
    /*#__PURE__*/
    function (_MySprite13) {
      _inherits(HotZoneImg, _MySprite13);

      var _super16 = _createSuper(HotZoneImg);

      function HotZoneImg() {
        _classCallCheck(this, HotZoneImg);

        return _super16.apply(this, arguments);
      }

      _createClass(HotZoneImg, [{
        key: "drawFrame",
        value: function drawFrame() {
          this.ctx.save();
          var rect = this.getBoundingBox();
          var w = rect.width;
          var h = rect.height;
          var x = rect.x + w / 2;
          var 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();
        }
      }, {
        key: "draw",
        value: function draw() {
          _get(_getPrototypeOf(HotZoneImg.prototype), "draw", this).call(this);

          this.drawFrame();
        }
      }]);

      return HotZoneImg;
    }(MySprite);

    var HotZoneLabel =
    /*#__PURE__*/
    function (_Label3) {
      _inherits(HotZoneLabel, _Label3);

      var _super17 = _createSuper(HotZoneLabel);

      function HotZoneLabel() {
        _classCallCheck(this, HotZoneLabel);

        return _super17.apply(this, arguments);
      }

      _createClass(HotZoneLabel, [{
        key: "drawFrame",
        value: function drawFrame() {
          this.ctx.save();
          var rect = this.getBoundingBox();
          var w = rect.width / this.scaleX;
          var h = this.height * this.scaleY;
          var x = this.x;
          var 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();
        }
      }, {
        key: "draw",
        value: function draw() {
          _get(_getPrototypeOf(HotZoneLabel.prototype), "draw", this).call(this);

          this.drawFrame();
        }
      }]);

      return HotZoneLabel;
    }(Label);

    var EditorItem =
    /*#__PURE__*/
    function (_MySprite14) {
      _inherits(EditorItem, _MySprite14);

      var _super18 = _createSuper(EditorItem);

      function EditorItem() {
        var _this18;

        _classCallCheck(this, EditorItem);

        _this18 = _super18.apply(this, arguments);
        _this18.lineDashFlag = false;
        return _this18;
      }

      _createClass(EditorItem, [{
        key: "showLabel",
        value: function showLabel() {
          var text = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 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;
        }
      }, {
        key: "hideLabel",
        value: function hideLabel() {
          if (!this.label) {
            return;
          }

          this.label.visible = false;
        }
      }, {
        key: "showLineDash",
        value: function 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();
        }
      }, {
        key: "hideLineDash",
        value: function hideLineDash() {
          this.lineDashFlag = false;

          if (this.arrow) {
            this.arrow.visible = false;
          }

          this.hideLabel();
        }
      }, {
        key: "drawArrow",
        value: function drawArrow() {
          if (!this.arrow) {
            return;
          }

          var rect = this.getBoundingBox();
          this.arrow.x = rect.x + rect.width;
          this.arrow.y = rect.y;
          this.arrow.update();
        }
      }, {
        key: "drawFrame",
        value: function drawFrame() {
          this.ctx.save();
          var rect = this.getBoundingBox();
          var w = rect.width;
          var h = rect.height;
          var x = rect.x + w / 2;
          var 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();
        }
      }, {
        key: "draw",
        value: function draw() {
          _get(_getPrototypeOf(EditorItem.prototype), "draw", this).call(this);

          if (this.lineDashFlag) {
            this.drawFrame();
            this.drawArrow();
          }
        }
      }]);

      return EditorItem;
    }(MySprite); //
    //
    // 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 srcAppCommonCustomHotZoneCustomHotZoneComponentTs(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");

    var _c0 = ["canvas"];
    var _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) {
        var _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);

          var it_r50 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵnextContext"]().$implicit;

          var 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) {
        var 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) {
        var _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);

          var 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);

          var it_r50 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵnextContext"]().$implicit;

          var 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) {
        var 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) {
        var _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);

          var i_r51 = ctx.index;

          var 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);

          var it_r50 = ctx.$implicit;

          var 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);

          var it_r50 = ctx.$implicit;

          var 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) {
        var it_r50 = ctx.$implicit;
        var i_r51 = ctx.index;

        var 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);
      }
    }

    var CustomHotZoneComponent =
    /*@__PURE__*/
    function () {
      var CustomHotZoneComponent =
      /*#__PURE__*/
      function () {
        function CustomHotZoneComponent() {
          _classCallCheck(this, CustomHotZoneComponent);

          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;
        }

        _createClass(CustomHotZoneComponent, [{
          key: "onResize",
          value: function onResize(event) {
            this.winResizeEventStream.next();
          }
        }, {
          key: "ngOnInit",
          value: function ngOnInit() {
            this.initListener(); // this.init();

            this.update();
          }
        }, {
          key: "ngOnDestroy",
          value: function ngOnDestroy() {
            window.cancelAnimationFrame(this.animationId);
          }
        }, {
          key: "ngOnChanges",
          value: function ngOnChanges() {}
        }, {
          key: "onBackgroundUploadSuccess",
          value: function onBackgroundUploadSuccess(e) {
            console.log('e: ', e);
            this.bgItem.url = e.url;
            this.refreshBackground();
          }
        }, {
          key: "onItemImgUploadSuccess",
          value: function onItemImgUploadSuccess(e, item) {
            item.pic_url = e.url;
            this.loadHotZonePic(item.pic, e.url);
          }
        }, {
          key: "onItemAudioUploadSuccess",
          value: function onItemAudioUploadSuccess(e, item) {
            item.audio_url = e.url;
          }
        }, {
          key: "refreshBackground",
          value: function refreshBackground() {
            var _this19 = this;

            var callBack = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;

            if (!this.bg) {
              this.bg = new _Unit__WEBPACK_IMPORTED_MODULE_3__["MySprite"](this.ctx);
              this.renderArr.push(this.bg);
            }

            var bg = this.bg;

            if (this.bgItem.url) {
              bg.load(this.bgItem.url).then(function () {
                var rate1 = _this19.canvasWidth / bg.width;
                var rate2 = _this19.canvasHeight / bg.height;
                var rate = Math.min(rate1, rate2);
                bg.setScaleXY(rate);
                bg.x = _this19.canvasWidth / 2;
                bg.y = _this19.canvasHeight / 2;

                if (callBack) {
                  callBack();
                }
              });
            }
          }
        }, {
          key: "addBtnClick",
          value: function addBtnClick() {
            // this.imgArr.push({});
            // this.hotZoneArr.push({});
            var item = this.getHotZoneItem();
            this.hotZoneArr.push(item);
            this.refreshItem(item);
            this.refreshHotZoneId();
          }
        }, {
          key: "deleteBtnClick",
          value: function deleteBtnClick(index) {
            var 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();
          }
        }, {
          key: "onImgUploadSuccessByImg",
          value: function onImgUploadSuccessByImg(e, img) {
            img.pic_url = e.url;
            this.refreshImage(img);
          }
        }, {
          key: "refreshImage",
          value: function refreshImage(img) {
            this.hideAllLineDash();
            img.picItem = this.getPicItem(img);
            this.refreshImageId();
          }
        }, {
          key: "refreshHotZoneId",
          value: function refreshHotZoneId() {
            for (var i = 0; i < this.hotZoneArr.length; i++) {
              this.hotZoneArr[i].index = i;

              if (this.hotZoneArr[i]) {
                this.hotZoneArr[i].title = 'item-' + (i + 1);
              }
            }
          }
        }, {
          key: "refreshImageId",
          value: function refreshImageId() {
            for (var 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);
              }
            }
          }
        }, {
          key: "getHotZoneItem",
          value: function getHotZoneItem() {
            var saveData = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
            var itemW = 200;
            var itemH = 200;
            var 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) {
              var 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();
            var 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);
            var 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;
          }
        }, {
          key: "getPicItem",
          value: function getPicItem(img) {
            var _this20 = this;

            var saveData = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
            var item = new _Unit__WEBPACK_IMPORTED_MODULE_3__["EditorItem"](this.ctx);
            item.load(img.pic_url).then(function (img) {
              var maxW, maxH;

              if (_this20.bg) {
                maxW = _this20.bg.width * _this20.bg.scaleX;
                maxH = _this20.bg.height * _this20.bg.scaleY;
              } else {
                maxW = _this20.canvasWidth;
                maxH = _this20.canvasHeight;
              }

              var scaleX = maxW / 3 / item.width;
              var scaleY = maxH / 3 / item.height;

              if (item.height * scaleX < _this20.canvasHeight) {
                item.setScaleXY(scaleX);
              } else {
                item.setScaleXY(scaleY);
              }

              item.x = _this20.canvasWidth / 2;
              item.y = _this20.canvasHeight / 2;

              if (saveData) {
                var 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;
          }
        }, {
          key: "onAudioUploadSuccessByImg",
          value: function onAudioUploadSuccessByImg(e, img) {
            img.audio_url = e.url;
          }
        }, {
          key: "deleteItem",
          value: function deleteItem(e, i) {
            // this.imgArr.splice(i , 1);
            // this.refreshImageId();
            this.hotZoneArr.splice(i, 1);
            this.refreshHotZoneId();
          }
        }, {
          key: "radioChange",
          value: function radioChange(e, item) {
            item.itemType = e;
            this.refreshItem(item); // console.log(' in radioChange e: ', e);
          }
        }, {
          key: "refreshItem",
          value: function refreshItem(item) {
            switch (item.itemType) {
              case 'rect':
                this.setRectState(item);
                break;

              case 'pic':
                this.setPicState(item);
                break;

              case 'text':
                this.setTextState(item);
                break;

              default:
            }
          }
        }, {
          key: "init",
          value: function init() {
            this.initData();
            this.initCtx();
            this.initItem();
          }
        }, {
          key: "initItem",
          value: function initItem() {
            var _this21 = this;

            if (!this.bgItem) {
              this.bgItem = {};
            } else {
              this.refreshBackground(function () {
                // if (!this.imgItemArr) {
                //   this.imgItemArr = [];
                // } else {
                //   this.initImgArr();
                // }
                // console.log('aaaaa');
                if (!_this21.hotZoneItemArr) {
                  _this21.hotZoneItemArr = [];
                } else {
                  _this21.initHotZoneArr();
                }
              });
            }
          }
        }, {
          key: "initHotZoneArr",
          value: function initHotZoneArr() {
            // console.log('this.hotZoneArr: ', this.hotZoneArr);
            var curBgRect;

            if (this.bg) {
              curBgRect = this.bg.getBoundingBox();
            } else {
              curBgRect = {
                x: 0,
                y: 0,
                width: this.canvasWidth,
                height: this.canvasHeight
              };
            }

            var oldBgRect = this.bgItem.rect;

            if (!oldBgRect) {
              oldBgRect = curBgRect;
            }

            var rate = curBgRect.width / oldBgRect.width;
            console.log('rate: ', rate);
            this.hotZoneArr = [];
            var arr = this.hotZoneItemArr.concat();

            for (var i = 0; i < arr.length; i++) {
              var 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);

              var 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();
          }
        }, {
          key: "initImgArr",
          value: function initImgArr() {
            console.log('this.imgItemArr: ', this.imgItemArr);
            var curBgRect;

            if (this.bg) {
              curBgRect = this.bg.getBoundingBox();
            } else {
              curBgRect = {
                x: 0,
                y: 0,
                width: this.canvasWidth,
                height: this.canvasHeight
              };
            }

            var oldBgRect = this.bgItem.rect;

            if (!oldBgRect) {
              oldBgRect = curBgRect;
            }

            var rate = curBgRect.width / oldBgRect.width;
            console.log('rate: ', rate);
            this.imgArr = [];
            var arr = this.imgItemArr.concat();

            for (var i = 0; i < arr.length; i++) {
              var data = JSON.parse(JSON.stringify(arr[i]));
              var 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();
          }
        }, {
          key: "initData",
          value: function 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 = [];
          }
        }, {
          key: "initCtx",
          value: function initCtx() {
            this.ctx = this.canvas.nativeElement.getContext('2d');
            this.canvas.nativeElement.width = this.canvasWidth;
            this.canvas.nativeElement.height = this.canvasHeight;
          }
        }, {
          key: "mapDown",
          value: function mapDown(event) {
            this.oldPos = {
              x: this.mx,
              y: this.my
            };

            for (var i = 0; i < this.hotZoneArr.length; i++) {
              var item = this.hotZoneArr[i];
              var callback = void 0;
              var target = void 0;

              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;
              }
            }
          }
        }, {
          key: "mapMove",
          value: function mapMove(event) {
            if (!this.curItem) {
              return;
            }

            if (this.changeSizeFlag) {
              this.changeSize();
            } else if (this.changeTopSizeFlag) {
              this.changeTopSize();
            } else if (this.changeRightSizeFlag) {
              this.changeRightSize();
            } else {
              var addX = this.mx - this.oldPos.x;
              var 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;
          }
        }, {
          key: "mapUp",
          value: function mapUp(event) {
            this.curItem = null;
            this.changeSizeFlag = false;
            this.changeTopSizeFlag = false;
            this.changeRightSizeFlag = false;
          }
        }, {
          key: "changeSize",
          value: function changeSize() {
            var rect = this.curItem.getBoundingBox();
            var lenW = (this.mx - (rect.x + rect.width / 2)) * 2;
            var lenH = (rect.y + rect.height / 2 - this.my) * 2;
            var minLen = 20;
            var 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();
          }
        }, {
          key: "changeTopSize",
          value: function changeTopSize() {
            var rect = this.curItem.getBoundingBox(); // let lenW = ( this.mx - (rect.x + rect.width / 2) ) * 2;

            var lenH = (rect.y + rect.height / 2 - this.my) * 2;
            var minLen = 20;
            var 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();
          }
        }, {
          key: "changeRightSize",
          value: function changeRightSize() {
            var rect = this.curItem.getBoundingBox();
            var lenW = (this.mx - (rect.x + rect.width / 2)) * 2; // let lenH = ( (rect.y + rect.height / 2) - this.my ) * 2;

            var minLen = 20;
            var s;

            if (lenW < minLen) {
              lenW = minLen;
            }

            s = lenW / this.curItem.width;
            this.curItem.scaleX = s;
            this.curItem.refreshLabelScale();
          }
        }, {
          key: "changeItemSize",
          value: function changeItemSize(item) {
            this.curItem = item;
            this.changeSizeFlag = true;
          }
        }, {
          key: "changeItemTopSize",
          value: function changeItemTopSize(item) {
            this.curItem = item;
            this.changeTopSizeFlag = true;
          }
        }, {
          key: "changeItemRightSize",
          value: function changeItemRightSize(item) {
            this.curItem = item;
            this.changeRightSizeFlag = true;
          }
        }, {
          key: "changeCurItem",
          value: function changeCurItem(item) {
            this.hideAllLineDash();
            this.curItem = item;
            this.curItem.showLineDash();
          }
        }, {
          key: "hideAllLineDash",
          value: function hideAllLineDash() {
            for (var i = 0; i < this.imgArr.length; i++) {
              if (this.imgArr[i].picItem) {
                this.imgArr[i].picItem.hideLineDash();
              }
            }
          }
        }, {
          key: "update",
          value: function update() {
            if (!this.ctx) {
              return;
            }

            this.animationId = window.requestAnimationFrame(this.update.bind(this)); // 清除画布内容

            this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);

            for (var 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();
          }
        }, {
          key: "updateArr",
          value: function updateArr(arr) {
            if (arr) {
              for (var i = 0; i < arr.length; i++) {
                arr[i].update();
              }
            }
          }
        }, {
          key: "renderAfterResize",
          value: function renderAfterResize() {
            this.canvasWidth = this.wrap.nativeElement.clientWidth;
            this.canvasHeight = this.wrap.nativeElement.clientHeight;
            this.init();
          }
        }, {
          key: "initListener",
          value: function initListener() {
            var _this22 = this;

            this.winResizeEventStream.pipe(Object(rxjs_operators__WEBPACK_IMPORTED_MODULE_2__["debounceTime"])(500)).subscribe(function (data) {
              _this22.renderAfterResize();
            });

            if (this.IsPC()) {
              this.canvas.nativeElement.addEventListener('mousedown', function (event) {
                setMxMyByMouse(event);

                _this22.mapDown(event);
              });
              this.canvas.nativeElement.addEventListener('mousemove', function (event) {
                setMxMyByMouse(event);

                _this22.mapMove(event);
              });
              this.canvas.nativeElement.addEventListener('mouseup', function (event) {
                setMxMyByMouse(event);

                _this22.mapUp(event);
              });

              var setMxMyByMouse = function setMxMyByMouse(event) {
                _this22.mx = event.offsetX;
                _this22.my = event.offsetY;
              };
            } else {
              this.canvas.nativeElement.addEventListener('touchstart', function (event) {
                setMxMyByTouch(event);

                _this22.mapDown(event);
              });
              this.canvas.nativeElement.addEventListener('touchmove', function (event) {
                setMxMyByTouch(event);

                _this22.mapMove(event);
              });
              this.canvas.nativeElement.addEventListener('touchend', function (event) {
                setMxMyByTouch(event);

                _this22.mapUp(event);
              });
              this.canvas.nativeElement.addEventListener('touchcancel', function (event) {
                setMxMyByTouch(event);

                _this22.mapUp(event);
              });

              var setMxMyByTouch = function setMxMyByTouch(event) {
                if (event.touches.length <= 0) {
                  return;
                }

                if (_this22.canvasLeft == null) {
                  setParentOffset();
                }

                _this22.mx = event.touches[0].pageX - _this22.canvasLeft;
                _this22.my = event.touches[0].pageY - _this22.canvasTop;
              };

              var setParentOffset = function setParentOffset() {
                var rect = _this22.canvas.nativeElement.getBoundingClientRect();

                _this22.canvasLeft = rect.left;
                _this22.canvasTop = rect.top;
              };
            }
          }
        }, {
          key: "IsPC",
          value: function IsPC() {
            if (window['ELECTRON']) {
              return false; // 封装客户端标记
            }

            if (document.body.ontouchstart !== undefined) {
              return false;
            } else {
              return true;
            }
          }
        }, {
          key: "checkClickTarget",
          value: function checkClickTarget(target) {
            var rect = target.getBoundingBox();

            if (this.checkPointInRect(this.mx, this.my, rect)) {
              return true;
            }

            return false;
          }
        }, {
          key: "checkPointInRect",
          value: function 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;
          }
        }, {
          key: "saveClick",
          value: function saveClick() {
            var 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
              };
            }

            var hotZoneItemArr = [];
            var hotZoneArr = this.hotZoneArr;

            for (var i = 0; i < hotZoneArr.length; i++) {
              var 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: bgItem,
              hotZoneItemArr: hotZoneItemArr
            });
          }
        }, {
          key: "updatePos",
          value: function updatePos() {
            this.hotZoneArr.forEach(function (item) {
              var 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;
            });
          }
        }, {
          key: "setPicState",
          value: function setPicState(item) {
            item.visible = false;
            item.textLabel.visible = false;
            item.pic.visible = true;
          }
        }, {
          key: "setRectState",
          value: function setRectState(item) {
            item.visible = true;
            item.textLabel.visible = false;
            item.pic.visible = false;
          }
        }, {
          key: "setTextState",
          value: function setTextState(item) {
            item.visible = false;
            item.pic.visible = false;
            item.textLabel.visible = true;
          }
        }, {
          key: "clickedHotZoneRect",
          value: function 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;
            }
          }
        }, {
          key: "clickedHotZonePic",
          value: function clickedHotZonePic(item) {
            if (this.checkClickTarget(item)) {
              this.curItem = item;
            }
          }
        }, {
          key: "clickedHotZoneText",
          value: function clickedHotZoneText(item) {
            if (this.checkClickTarget(item)) {
              this.curItem = item;
            }
          }
        }, {
          key: "saveText",
          value: function saveText(item) {
            item.textLabel.text = item.text;
          }
        }, {
          key: "loadHotZonePic",
          value: function loadHotZonePic(pic, url) {
            var baseLen = this.hotZoneImgSize * this.mapScale;
            pic.load(url).then(function () {
              var s = Object(_play_Unit__WEBPACK_IMPORTED_MODULE_5__["getMinScale"])(pic, baseLen);
              pic.setScaleXY(s);
            });
          }
        }, {
          key: "bgItem",
          get: function get() {
            return this._bgItem;
          },
          set: function set(v) {
            this._bgItem = v;
            this.init();
          }
        }]);

        return CustomHotZoneComponent;
      }();

      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 srcAppCommonLessonTitleConfigLessonTitleConfigComponentTs(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");

    var _c0 = ["titleEl"];

    var _c1 = function _c1(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) {
        var 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) {
        var 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) {
        var _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);

          var color_r37 = ctx.$implicit;

          var 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) {
        var 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) {
        var 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);
      }
    }

    var editorTpl = "<html lang=\"en\"><head><meta charset=\"utf-8\">\n  <meta name=\"viewport\"\n          content=\"width=device-width,initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no\"/>\n        <style>\n@font-face{\n  font-family: 'BRLNSDB';\n  src: url(\"../../../assets/font/BRLNSDB.TTF\") ;\n}\n\n@font-face{\n  font-family: 'BRLNSB';\n  src: url(\"../../../assets/font/BRLNSB.TTF\") ;\n}\n\n@font-face{\n  font-family: 'BRLNSR';\n  src: url(\"../../../assets/font/BRLNSR.TTF\") ;\n}\n\n@font-face{\n  font-family: 'GOTHIC';\n  src: url(\"../../../assets/font/GOTHIC.TTF\") ;\n}\n\n@font-face{\n  font-family: 'GOTHICB';\n  src: url(\"../../../assets/font/GOTHICB.TTF\") ;\n}\n\n@font-face{\n  font-family: 'GOTHICBI';\n  src: url(\"../../../assets/font/GOTHICBI.TTF\") ;\n}\n\n@font-face{\n  font-family: 'GOTHICI';\n  src: url(\"../../../assets/font/GOTHICI.TTF\") ;\n}\n\n@font-face{\n  font-family: 'MMTextBook';\n  src: url(\"../../../assets/font/MMTextBook.otf\") ;\n}\n\n@font-face{\n  font-family: 'MMTextBook-Bold';\n  src: url(\"../../../assets/font/MMTextBook-Bold.otf\") ;\n}\n\n@font-face{\n  font-family: 'MMTextBook-BoldItalic';\n  src: url(\"../../../assets/font/MMTextBook-BoldItalic.otf\") ;\n}\n\n@font-face{\n  font-family: 'MMTextBook-Italic';\n  src: url(\"../../../assets/font/MMTextBook-Italic.otf\") ;\n}\nhtml, body{\n/*font-size: 30px;*/\n}\nbody{\n    height:48px;\n\n  overflow: hidden;\n  margin: 0;\n  padding: 0 .5rem;\n  font-family: 'BRLNSB, BRLNSDB, BRLNSR, GOTHIC, GOTHICB, MMTextBook';\n  background: #FFF;\n  line-height: 48px;\n}\n</style>\n  </head>\n  <body>{{content}}</body>\n</html>";

    var LessonTitleConfigComponent =
    /*@__PURE__*/
    function () {
      var LessonTitleConfigComponent =
      /*#__PURE__*/
      function () {
        function LessonTitleConfigComponent() {
          var _this23 = this;

          _classCallCheck(this, LessonTitleConfigComponent);

          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 = function () {
            console.log('title shouldSave', _this23.titleObj);
            _this23.titleObj.content = _this23.titleEW.document.body.innerHTML.trim();

            _this23.titleUpdated.emit(_this23.titleObj);
          };

          this.fontSizeRange = [];

          for (var i = this.MIN_FONT_SIZE; i <= this.MAX_FONT_SIZE; ++i) {
            this.fontSizeRange.push(i);
          }

          this.__fontSize = 3;
          this.__fontColor = this.colorList[0];
        }

        _createClass(LessonTitleConfigComponent, [{
          key: "ngOnChanges",
          value: function ngOnChanges(vars) {
            if (!vars.titleObj.previousValue) {
              // 初始化，内容是空
              return;
            }

            var 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;
          }
        }, {
          key: "ngOnInit",
          value: function ngOnInit() {
            var _this24 = this;

            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);
            var 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', function () {
              if (_this24.titleObj.content === _this24.titleEW.document.body.innerHTML.trim()) {
                return;
              }

              _this24.shouldSave();
            }, true);
          }
        }, {
          key: "htmlEncode",
          value: function htmlEncode(text) {
            if (!text) {
              return '';
            }

            return text.replace(/\&/ig, '&amp;').replace(/\</ig, '&lt;').replace(/\>/ig, '&gt;').replace(/\"/ig, '&quot;');
          }
        }, {
          key: "htmlDecode",
          value: function htmlDecode(text) {
            if (!text) {
              return '';
            }

            return text.replace(/\&amp\;/ig, '&').replace(/\&lt\;/ig, '<').replace(/\&gt\;/ig, '>').replace(/\&quot\;/ig, '"');
          }
        }, {
          key: "ngOnDestroy",
          value: function ngOnDestroy() {}
        }, {
          key: "keyPress",
          value: function keyPress(evt) {
            try {
              if (evt.charCode === 13) {
                evt.preventDefault();
                evt.stopPropagation();
                return;
              }

              if (evt.ctrlKey) {
                var key = String.fromCharCode(evt.charCode).toLowerCase();
                var 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);
            }
          }
        }, {
          key: "execEditorCommand",
          value: function execEditorCommand(command, option) {
            var _this25 = this;

            console.log('sssss');

            try {
              this.titleEW.focus();
              var 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(function () {
                  _this25.execEditorCommand(command, option);
                }, 100);
                this.loopCnt += 1;
              } else {
                alert('Error executing command.');
              }
            }
          }
        }, {
          key: "onSelectColor",
          value: function onSelectColor(color) {
            this.execEditorCommand('forecolor', color);
            this.__fontColor = color;
          }
        }, {
          key: "onChangeFontColor",
          value: function onChangeFontColor(val) {
            this.execEditorCommand('forecolor', this.__fontColor);
          }
        }, {
          key: "onChangeFontFamily",
          value: function onChangeFontFamily(font) {
            this.execEditorCommand('fontName', font);
          }
        }, {
          key: "onChangeFontSize",
          value: function 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);
          }
        }, {
          key: "onChangeBold",
          value: function onChangeBold() {
            this.execEditorCommand('bold');
          }
        }, {
          key: "onChangeItalic",
          value: function onChangeItalic() {
            this.execEditorCommand('italic');
          }
        }, {
          key: "onChangeUnderline",
          value: function onChangeUnderline() {
            this.execEditorCommand('underline');
          }
        }, {
          key: "onChangeStrikethrough",
          value: function onChangeStrikethrough() {
            this.execEditorCommand('strikethrough');
          }
        }, {
          key: "titleAudioUploaded",
          value: function titleAudioUploaded(res) {
            this.titleObj.audio_url = res.url;
            this.titleUpdated.emit(this.titleObj);
          }
        }]);

        return LessonTitleConfigComponent;
      }();

      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) {
            var _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 srcAppCommonPlayerContentWrapperPlayerContentWrapperComponentTs(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");

    var _c0 = ["wrapperEl"];
    var _c1 = ["*"];

    var PlayerContentWrapperComponent =
    /*@__PURE__*/
    function () {
      var PlayerContentWrapperComponent =
      /*#__PURE__*/
      function () {
        function PlayerContentWrapperComponent() {
          _classCallCheck(this, PlayerContentWrapperComponent);

          if (window.innerHeight < window.innerWidth) {
            this._h = '100%';
            this._w = 'auto';
          } else {
            this._w = '100%';
            this._h = 'auto';
          }
        }

        _createClass(PlayerContentWrapperComponent, [{
          key: "ngOnInit",
          value: function ngOnInit() {
            if (!this.ratio) {
              this.ratio = '20-9';
            }
          }
        }, {
          key: "ngOnChanges",
          value: function ngOnChanges() {}
        }, {
          key: "ngOnDestroy",
          value: function ngOnDestroy() {}
        }, {
          key: "ngAfterViewInit",
          value: function ngAfterViewInit() {}
        }]);

        return PlayerContentWrapperComponent;
      }();

      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 srcAppCommonUploadImageWithPreviewUploadImageWithPreviewComponentTs(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) {
        var 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) {
        var 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) {
        var 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) {
        var _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);

          var 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"]();
      }
    }

    var UploadImageWithPreviewComponent =
    /*@__PURE__*/
    function () {
      var UploadImageWithPreviewComponent =
      /*#__PURE__*/
      function () {
        function UploadImageWithPreviewComponent(nzMessageService) {
          var _this26 = this;

          _classCallCheck(this, UploadImageWithPreviewComponent);

          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 = function (file) {
            _this26.nzMessageService.info('Upload Success');

            _this26.uploading = false;
            _this26.picUrl = file.response.url; // this.uploadFinished(url);
            // if (!inOSS) {

            var img = new Image();
            img.addEventListener('load', function () {
              var height = img.naturalHeight;
              var width = img.naturalWidth;
              file['height'] = height;
              file['width'] = width;
              img.remove();

              _this26.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 = function (err, file) {
            _this26.uploading = false;

            if (err.name && err.name === 'cancel') {
              return;
            }

            console.log(err);

            _this26.nzMessageService.error('Upload Error ' + err.message);

            _this26.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 = function (url, data) {
            _this26.uploadUrl = url;
            _this26.uploadData = data;
          };
        }

        _createClass(UploadImageWithPreviewComponent, [{
          key: "ngOnChanges",
          value: function ngOnChanges() {
            if (!this.picItem) {
              return;
            }
          }
        }, {
          key: "handleChange",
          value: function 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;
            }
          }
        }, {
          key: "onDelete",
          value: function onDelete() {
            this["delete"].emit();
          }
        }, {
          key: "checkSelectFile",
          value: function checkSelectFile(file) {
            var 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;
            }

            var isGif = !['image/jpeg', 'image/png', 'image/jpeg', 'image/bmp'].includes(file.type);
            var delta = isGif ? 20 : 5;
            var isOverSize = file.size / 1024 / 1024 < delta;

            if (!isOverSize) {
              this.nzMessageService.error("".concat(isGif ? 'Gif' : 'Image', " must smaller than ").concat(delta, "MB!"));
              return false;
            }

            return true;
          }
        }, {
          key: "ngOnDestroy",
          value: function ngOnDestroy() {}
        }]);

        return UploadImageWithPreviewComponent;
      }();

      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 srcAppCommonUploadVideoUploadVideoComponentTs(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");

    var _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) {
        var 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) {
        var 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) {
        var 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);
      }
    }

    var _c1 = function _c1(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) {
        var 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) {
        var 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) {
        var 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"]);
      }
    }

    var UploadVideoComponent =
    /*@__PURE__*/
    function () {
      var UploadVideoComponent =
      /*#__PURE__*/
      function () {
        function UploadVideoComponent(nzMessageService, sanitization // private cwService: _coursewareService,
        // private resService: ResourceService
        ) {
          var _this27 = this;

          _classCallCheck(this, UploadVideoComponent);

          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 = function (hash) {
            _this27.checking = false;
            _this27.uploading = true;
          };

          this.uploadSuccess = function (file) {
            _this27.nzMessageService.info('Upload Success'); // this.updateStatus(false);


            _this27.uploading = false;
            _this27.videoFile = null; // this.updateSource(url);

            _this27.videoUrl = file.response.url; // console.log(this.picUrl)
            // this.uploadFinished(url);
            // if (!inOSS) {

            var vid = document.createElement('video');
            vid.addEventListener('loadedmetadata', function () {
              var height = vid.videoHeight;
              var width = vid.videoWidth;
              var duration = vid.duration;

              if (duration) {
                duration = duration * 1000;
              }

              file.height = height;
              file.width = width;
              file.duration = duration;
              vid.preload = 'none';
              vid.src = '';
              vid.remove();

              _this27.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 = function (err, file) {
            _this27.uploading = false;

            if (err.name && err.name === 'cancel') {
              return;
            }

            console.log(err);

            _this27.nzMessageService.error('Upload Error ' + err.message);

            _this27.videoUploadFailure.emit(file);
          };

          this.doProgress = function (p) {
            if (p > 1) {
              p = 1;
            }

            if (p < 0) {
              p = 0;
            } // console.log(Math.floor(p * 100));


            _this27.progress = Math.floor(p * 100);
          };

          this.uploading = false;
          this.videoFile = null;
          this.uploadUrl = window.courseware.uploadUrl();
          this.uploadData = window.courseware.uploadData();

          window['air'].getUploadCallback = function (url, data) {
            _this27.uploadUrl = url;
            _this27.uploadData = data;
          };
        }

        _createClass(UploadVideoComponent, [{
          key: "ngOnChanges",
          value: function ngOnChanges() {// if (!this.videoFile || this.showUploadBtn) {
            //   return;
            // }
            // this.beforeUpload(this.videoFile);
            // this.handleUpload();
          }
        }, {
          key: "ngOnDestroy",
          value: function ngOnDestroy() {
            URL.revokeObjectURL(this.videoUrl);
          }
        }, {
          key: "safeVideoUrl",
          value: function safeVideoUrl(url) {
            console.log(url);
            return this.sanitization.bypassSecurityTrustResourceUrl(url); // `${url}`;
          }
        }, {
          key: "videoLoadedMetaData",
          value: function videoLoadedMetaData() {}
        }, {
          key: "handleChange",
          value: function 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;
            }
          }
        }, {
          key: "checkSelectFile",
          value: function checkSelectFile(file) {
            if (!file.lastModified) {
              return false;
            }

            var delta = 500;
            var isOverSize = file.size / 1024 / 1024 < delta;

            if (!isOverSize) {
              this.nzMessageService.error("video must smaller than ".concat(delta, "MB!"));
              return false;
            }

            return true;
          }
        }]);

        return UploadVideoComponent;
      }();

      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 srcAppFormFormComponentTs(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) {
        var _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);

          var 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);

          var 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);

          var j_r7 = ctx.index;

          var i_r4 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵnextContext"]().index;

          var 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);

          var 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);

          var 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);

          var j_r7 = ctx.index;

          var i_r4 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵnextContext"]().index;

          var 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);

          var 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);

          var 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);

          var j_r7 = ctx.index;

          var i_r4 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵnextContext"]().index;

          var 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);

          var j_r7 = ctx.index;

          var i_r4 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵnextContext"]().index;

          var 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) {
        var 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) {
        var _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);

          var i_r4 = ctx.index;

          var 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);

          var i_r4 = ctx.index;

          var 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);

          var i_r4 = ctx.index;

          var 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) {
        var 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);
      }
    }

    var FormComponent =
    /*@__PURE__*/
    function () {
      var FormComponent =
      /*#__PURE__*/
      function () {
        function FormComponent(appRef, changeDetectorRef) {
          _classCallCheck(this, FormComponent);

          this.appRef = appRef;
          this.changeDetectorRef = changeDetectorRef; // 储存数据用

          this.saveKey = "tyzdc_001";
        }

        _createClass(FormComponent, [{
          key: "addRound",
          value: function addRound() {
            this.item.roundList.push({
              audio: '',
              questionList: []
            });
            this.save();
          }
        }, {
          key: "removeRound",
          value: function removeRound(roundIdx) {
            this.item.roundList.splice(roundIdx, 1);
            this.save();
          }
        }, {
          key: "addQuestion",
          value: function addQuestion(roundIdx) {
            this.item.roundList[roundIdx].questionList.push({
              rightAudio: '',
              rightWord: '',
              wrongWordList: ['', ''],
              wrongAudioList: ['', '']
            });
            this.save();
          }
        }, {
          key: "removeQuestion",
          value: function removeQuestion(roundIdx, questionIdx) {
            this.item.roundList[roundIdx].questionList.splice(questionIdx, 1);
            this.save();
          }
        }, {
          key: "ngOnInit",
          value: function ngOnInit() {
            var _this28 = this;

            // this.item = {};
            this.item = {
              bgAudio: true,
              roundList: []
            }; // 获取存储的数据

            window.courseware.getData(function (data) {
              if (data) {
                _this28.item = data;
              }

              if (_this28.item.bgAudio === undefined) {
                _this28.item.bgAudio = true;
              }

              _this28.init();

              _this28.changeDetectorRef.markForCheck();

              _this28.changeDetectorRef.detectChanges();

              _this28.refresh();
            }, this.saveKey);
            console.log('this.item = ' + JSON.stringify(this.item));
          }
        }, {
          key: "ngOnChanges",
          value: function ngOnChanges() {}
        }, {
          key: "ngOnDestroy",
          value: function ngOnDestroy() {}
        }, {
          key: "init",
          value: function init() {}
          /**
           * 储存图片数据
           * @param e
           */

        }, {
          key: "onImageUploadSuccess",
          value: function onImageUploadSuccess(e, key) {
            this.item[key] = e.url;
            this.save();
          }
          /**
           * 储存音频数据
           * @param e
           */

        }, {
          key: "onAudioUploadSuccess",
          value: function onAudioUploadSuccess(e, key) {
            this.item[key] = e.url;
            this.save();
          }
        }, {
          key: "onRoundAudioUploadSuccess",
          value: function onRoundAudioUploadSuccess(e, idx) {
            this.item.roundList[idx].audio = e.url;
            this.save();
          }
        }, {
          key: "onQuestionAudioUploadSuccess",
          value: function onQuestionAudioUploadSuccess(e, roundIdx, questionIdx) {
            this.item.roundList[roundIdx].questionList[questionIdx].rightAudio = e.url;
            this.save();
          }
        }, {
          key: "onQuestionWrongAudioUploadSuccess",
          value: function onQuestionWrongAudioUploadSuccess(e, roundIdx, questionIdx, wrongIdx) {
            this.item.roundList[roundIdx].questionList[questionIdx].wrongAudioList[wrongIdx] = e.url;
            this.save();
          }
        }, {
          key: "onChange",
          value: function onChange() {
            this.save();
          }
          /**
           * 储存数据
           */

        }, {
          key: "save",
          value: function save() {
            console.log(this.item);
            window.courseware.setData(this.item, null, this.saveKey);
            this.refresh();
          }
          /**
           * 刷新 渲染页面
           */

        }, {
          key: "refresh",
          value: function refresh() {
            var _this29 = this;

            setTimeout(function () {
              _this29.appRef.tick();
            }, 1);
          }
        }]);

        return FormComponent;
      }();

      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 srcAppPipesBackgroundImagePipeTs(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');


    var BackgroundImagePipe =
    /*@__PURE__*/
    function () {
      var BackgroundImagePipe =
      /*#__PURE__*/
      function () {
        function BackgroundImagePipe() {
          _classCallCheck(this, BackgroundImagePipe);
        }

        _createClass(BackgroundImagePipe, [{
          key: "transform",
          value: function transform(value, coursewareSid) {
            // const ret = value ? `url(${value})` : '';
            var ret = value ? "url(".concat(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;
          }
        }]);

        return BackgroundImagePipe;
      }();

      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 srcAppPipesResourcePipeTs(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');


    var ResourcePipe =
    /*@__PURE__*/
    function () {
      var ResourcePipe =
      /*#__PURE__*/
      function () {
        function ResourcePipe() {
          _classCallCheck(this, ResourcePipe);
        }

        _createClass(ResourcePipe, [{
          key: "transform",
          value: function transform(pic_url, coursewareSid) {
            // return pic_url;
            if (pic_url && typeof pic_url === 'object') {
              return pic_url;
            } // console.log('resource', pic_url)


            return "".concat(pic_url, "?t=").concat(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;
          }
        }]);

        return ResourcePipe;
      }();

      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 srcAppPipesTimePipeTs(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__);

    var TimePipe =
    /*@__PURE__*/
    function () {
      var TimePipe =
      /*#__PURE__*/
      function () {
        function TimePipe() {
          _classCallCheck(this, TimePipe);
        }

        _createClass(TimePipe, [{
          key: "transform",
          value: function transform(value, args) {
            var ret = '00:00';

            if (lodash__WEBPACK_IMPORTED_MODULE_1__["isNumber"](value) && value > 0) {
              var minutes = Math.floor(value / 60);
              var 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;
          }
        }]);

        return TimePipe;
      }();

      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 srcAppPlayUnitTs(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");

    var Sprite =
    /*#__PURE__*/
    function () {
      function Sprite() {
        var ctx = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;

        _classCallCheck(this, Sprite);

        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;
        }
      }

      _createClass(Sprite, [{
        key: "update",
        value: function update($event) {
          this.draw();
        }
      }, {
        key: "draw",
        value: function draw() {}
      }]);

      return Sprite;
    }();

    var MySprite =
    /*#__PURE__*/
    function (_Sprite2) {
      _inherits(MySprite, _Sprite2);

      var _super19 = _createSuper(MySprite);

      function MySprite() {
        var _this30;

        _classCallCheck(this, MySprite);

        _this30 = _super19.apply(this, arguments);
        _this30._width = 0;
        _this30._height = 0;
        _this30._anchorX = 0;
        _this30._anchorY = 0;
        _this30._offX = 0;
        _this30._offY = 0;
        _this30.scaleX = 1;
        _this30.scaleY = 1;
        _this30._alpha = 1;
        _this30.rotation = 0;
        _this30.visible = true;
        _this30.skewX = 0;
        _this30.skewY = 0;
        _this30._shadowFlag = false;
        _this30._shadowOffsetX = 0;
        _this30._shadowOffsetY = 0;
        _this30._shadowBlur = 5;
        _this30._radius = 0;
        _this30.children = [_assertThisInitialized(_this30)];
        _this30.childDepandVisible = true;
        _this30.childDepandAlpha = false;
        _this30._z = 0;
        return _this30;
      }

      _createClass(MySprite, [{
        key: "init",
        value: function init() {
          var imgObj = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
          var anchorX = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0.5;
          var anchorY = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0.5;

          if (imgObj) {
            this.img = imgObj;
            this.width = this.img.width;
            this.height = this.img.height;
          }

          this.anchorX = anchorX;
          this.anchorY = anchorY;
        }
      }, {
        key: "setShadow",
        value: function setShadow(offX, offY, blur) {
          var color = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'rgba(0, 0, 0, 0.3)';
          this._shadowFlag = true;
          this._shadowColor = color;
          this._shadowOffsetX = offX;
          this._shadowOffsetY = offY;
          this._shadowBlur = blur;
        }
      }, {
        key: "setRadius",
        value: function setRadius(r) {
          this._radius = r;
        }
      }, {
        key: "update",
        value: function update() {
          var $event = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;

          if (!this.visible && this.childDepandVisible) {
            return;
          }

          this.draw();
        }
      }, {
        key: "draw",
        value: function draw() {
          this.ctx.save();
          this.drawInit();
          this.updateChildren();
          this.ctx.restore();
        }
      }, {
        key: "drawInit",
        value: function 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) {
            var r = this._radius;
            var w = this.width;
            var 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();
          }
        }
      }, {
        key: "drawSelf",
        value: function 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);
          }
        }
      }, {
        key: "updateChildren",
        value: function updateChildren() {
          if (this.children.length <= 0) {
            return;
          }

          var _iterator9 = _createForOfIteratorHelper(this.children),
              _step9;

          try {
            for (_iterator9.s(); !(_step9 = _iterator9.n()).done;) {
              var child = _step9.value;

              if (child === this) {
                if (this.visible) {
                  this.drawSelf();
                }
              } else {
                child.update();
              }
            }
          } catch (err) {
            _iterator9.e(err);
          } finally {
            _iterator9.f();
          }
        }
      }, {
        key: "load",
        value: function load(url) {
          var _this31 = this;

          var anchorX = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0.5;
          var anchorY = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0.5;
          return new Promise(function (resolve, reject) {
            var img = new Image();

            img.onload = function () {
              return resolve(img);
            };

            img.onerror = reject;
            img.src = url;
          }).then(function (img) {
            _this31.init(img, anchorX, anchorY);

            return img;
          });
        }
      }, {
        key: "addChild",
        value: function addChild(child) {
          var z = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;

          if (this.children.indexOf(child) === -1) {
            this.children.push(child);
            child._z = z;
            child.parent = this;
          }

          this.children.sort(function (a, b) {
            return a._z - b._z;
          });

          if (this.childDepandAlpha) {
            child.alpha = this.alpha;
          }
        }
      }, {
        key: "removeChild",
        value: function removeChild(child) {
          var index = this.children.indexOf(child);

          if (index !== -1) {
            this.children.splice(index, 1);
          }
        }
      }, {
        key: "removeChildren",
        value: function removeChildren() {
          for (var i = 0; i < this.children.length; i++) {
            if (this.children[i]) {
              if (this.children[i] !== this) {
                this.children.splice(i, 1);
                i--;
              }
            }
          }
        }
      }, {
        key: "_changeChildAlpha",
        value: function _changeChildAlpha(alpha) {
          var _iterator10 = _createForOfIteratorHelper(this.children),
              _step10;

          try {
            for (_iterator10.s(); !(_step10 = _iterator10.n()).done;) {
              var child = _step10.value;

              if (child !== this) {
                child.alpha = alpha;
              }
            }
          } catch (err) {
            _iterator10.e(err);
          } finally {
            _iterator10.f();
          }
        }
      }, {
        key: "refreshAnchorOff",
        value: function refreshAnchorOff() {
          this._offX = -this._width * this.anchorX;
          this._offY = -this._height * this.anchorY;
        }
      }, {
        key: "setScaleXY",
        value: function setScaleXY(value) {
          this.scaleX = this.scaleY = value;
        }
      }, {
        key: "getBoundingBox",
        value: function getBoundingBox() {
          var getParentData = function getParentData(item) {
            var px = item.x;
            var py = item.y;
            var sx = item.scaleX;
            var sy = item.scaleY;
            var parent = item.parent;

            if (parent) {
              var obj = getParentData(parent);
              var _x = obj.px;
              var _y = obj.py;
              var _sx = obj.sx;
              var _sy = obj.sy;
              px = _x + item.x * _sx;
              py = _y + item.y * _sy;
              sx *= _sx;
              sy *= _sy;
            }

            return {
              px: px,
              py: py,
              sx: sx,
              sy: sy
            };
          };

          var data = getParentData(this);
          var x = data.px + this._offX * Math.abs(data.sx);
          var y = data.py + this._offY * Math.abs(data.sy);
          var width = this.width * Math.abs(data.sx);
          var 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: x,
            y: y,
            width: width,
            height: height
          };
        }
      }, {
        key: "alpha",
        set: function set(v) {
          this._alpha = v;

          if (this.childDepandAlpha) {
            this._changeChildAlpha(v);
          }
        },
        get: function get() {
          return this._alpha;
        }
      }, {
        key: "width",
        set: function set(v) {
          this._width = v;
          this.refreshAnchorOff();
        },
        get: function get() {
          return this._width;
        }
      }, {
        key: "height",
        set: function set(v) {
          this._height = v;
          this.refreshAnchorOff();
        },
        get: function get() {
          return this._height;
        }
      }, {
        key: "anchorX",
        set: function set(value) {
          this._anchorX = value;
          this.refreshAnchorOff();
        },
        get: function get() {
          return this._anchorX;
        }
      }, {
        key: "anchorY",
        set: function set(value) {
          this._anchorY = value;
          this.refreshAnchorOff();
        },
        get: function get() {
          return this._anchorY;
        }
      }]);

      return MySprite;
    }(Sprite);

    var ColorSpr =
    /*#__PURE__*/
    function (_MySprite15) {
      _inherits(ColorSpr, _MySprite15);

      var _super20 = _createSuper(ColorSpr);

      function ColorSpr() {
        var _this32;

        _classCallCheck(this, ColorSpr);

        _this32 = _super20.apply(this, arguments);
        _this32.r = 0;
        _this32.g = 0;
        _this32.b = 0;
        return _this32;
      }

      _createClass(ColorSpr, [{
        key: "createGSCanvas",
        value: function createGSCanvas() {
          if (!this.img) {
            return;
          }

          var rect = this.getBoundingBox();

          if (rect.width <= 1 || rect.height <= 1) {
            return;
          }

          var c = this.ctx.getImageData(rect.x, rect.y, rect.width, rect.height);

          for (var i = 0; i < c.height; i++) {
            for (var j = 0; j < c.width; j++) {
              var x = i * 4 * c.width + j * 4;
              var r = c.data[x];
              var g = c.data[x + 1];
              var 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);
        }
      }, {
        key: "drawSelf",
        value: function drawSelf() {
          _get(_getPrototypeOf(ColorSpr.prototype), "drawSelf", this).call(this);

          this.createGSCanvas();
        }
      }]);

      return ColorSpr;
    }(MySprite);

    var GrayscaleSpr =
    /*#__PURE__*/
    function (_MySprite16) {
      _inherits(GrayscaleSpr, _MySprite16);

      var _super21 = _createSuper(GrayscaleSpr);

      function GrayscaleSpr() {
        var _this33;

        _classCallCheck(this, GrayscaleSpr);

        _this33 = _super21.apply(this, arguments);
        _this33.grayScale = 120;
        return _this33;
      }

      _createClass(GrayscaleSpr, [{
        key: "createGSCanvas",
        value: function createGSCanvas() {
          if (!this.img) {
            return;
          }

          var rect = this.getBoundingBox();
          var c = this.ctx.getImageData(rect.x, rect.y, rect.width, rect.height);

          for (var i = 0; i < c.height; i++) {
            for (var j = 0; j < c.width; j++) {
              var x = i * 4 * c.width + j * 4;
              var r = c.data[x];
              var g = c.data[x + 1];
              var 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);
        }
      }, {
        key: "drawSelf",
        value: function drawSelf() {
          _get(_getPrototypeOf(GrayscaleSpr.prototype), "drawSelf", this).call(this);

          this.createGSCanvas();
        }
      }]);

      return GrayscaleSpr;
    }(MySprite);

    var BitMapLabel =
    /*#__PURE__*/
    function (_MySprite17) {
      _inherits(BitMapLabel, _MySprite17);

      var _super22 = _createSuper(BitMapLabel);

      function BitMapLabel() {
        _classCallCheck(this, BitMapLabel);

        return _super22.apply(this, arguments);
      }

      _createClass(BitMapLabel, [{
        key: "setText",
        value: function setText(data, text) {
          this.labelArr = [];
          var labelArr = [];
          var tmpArr = text.split('');
          var totalW = 0;
          var h = 0;

          var _iterator11 = _createForOfIteratorHelper(tmpArr),
              _step11;

          try {
            for (_iterator11.s(); !(_step11 = _iterator11.n()).done;) {
              var tmp = _step11.value;

              var _label2 = new MySprite(this.ctx);

              _label2.init(data[tmp], 0);

              this.addChild(_label2);
              labelArr.push(_label2);
              totalW += _label2.width;
              h = _label2.height;
            }
          } catch (err) {
            _iterator11.e(err);
          } finally {
            _iterator11.f();
          }

          this.width = totalW;
          this.height = h;
          var offX = -totalW / 2;

          for (var _i2 = 0, _labelArr2 = labelArr; _i2 < _labelArr2.length; _i2++) {
            var label = _labelArr2[_i2];
            label.x = offX;
            offX += label.width;
          }

          this.labelArr = labelArr;
        }
      }]);

      return BitMapLabel;
    }(MySprite);

    var Label =
    /*#__PURE__*/
    function (_MySprite18) {
      _inherits(Label, _MySprite18);

      var _super23 = _createSuper(Label);

      function Label() {
        var _this34;

        var ctx = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;

        _classCallCheck(this, Label);

        _this34 = _super23.call(this, ctx); // fontSize:String = '40px';

        _this34.fontName = 'Verdana';
        _this34.textAlign = 'left';
        _this34.fontSize = 40;
        _this34.fontColor = '#000000';
        _this34.fontWeight = 900;
        _this34.outline = 0;
        _this34.outlineColor = '#ffffff'; // _shadowFlag = false;
        // _shadowColor;
        // _shadowOffsetX;
        // _shadowOffsetY;
        // _shadowBlur;

        _this34._outlineFlag = false;

        _this34.init();

        return _this34;
      }

      _createClass(Label, [{
        key: "refreshSize",
        value: function refreshSize() {
          this.ctx.save();
          this.ctx.font = "".concat(this.fontSize, "px ").concat(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();
        }
      }, {
        key: "setMaxSize",
        value: function setMaxSize(w) {
          this._maxWidth = w;
          this.refreshSize();

          if (this.width >= w) {
            this.scaleX *= w / this.width;
            this.scaleY *= w / this.width;
          }
        }
      }, {
        key: "show",
        value: function show() {
          var callBack = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
          this.visible = true;

          if (this.alpha >= 1) {
            return;
          }

          var 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(function () {
            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;
        // }

      }, {
        key: "setOutline",
        value: function setOutline() {
          var width = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 5;
          var color = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '#ffffff';
          this._outlineFlag = true;
          this._outLineWidth = width;
          this._outLineColor = color;
        }
      }, {
        key: "drawText",
        value: function 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 = "".concat(this.fontSize, "px ").concat(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);
        }
      }, {
        key: "drawSelf",
        value: function drawSelf() {
          _get(_getPrototypeOf(Label.prototype), "drawSelf", this).call(this);

          this.drawText();
        }
      }]);

      return Label;
    }(MySprite);

    var RichTextOld =
    /*#__PURE__*/
    function (_Label4) {
      _inherits(RichTextOld, _Label4);

      var _super24 = _createSuper(RichTextOld);

      function RichTextOld() {
        var _this35;

        _classCallCheck(this, RichTextOld);

        _this35 = _super24.apply(this, arguments);
        _this35.textArr = [];
        _this35.fontSize = 40;
        return _this35;
      }

      _createClass(RichTextOld, [{
        key: "setText",
        value: function setText(text, words) {
          var newText = text;

          var _iterator12 = _createForOfIteratorHelper(words),
              _step12;

          try {
            for (_iterator12.s(); !(_step12 = _iterator12.n()).done;) {
              var word = _step12.value;
              var re = new RegExp(word, 'g');
              newText = newText.replace(re, "#".concat(word, "#")); // newText = newText.replace(word, `#${word}#`);
            }
          } catch (err) {
            _iterator12.e(err);
          } finally {
            _iterator12.f();
          }

          this.textArr = newText.split('#');
          this.text = newText; // this.setSize();
        }
      }, {
        key: "refreshSize",
        value: function refreshSize() {
          this.ctx.save();
          this.ctx.font = "".concat(this.fontSize, "px ").concat(this.fontName);
          this.ctx.textAlign = this.textAlign;
          this.ctx.textBaseline = 'middle';
          this.ctx.fontWeight = this.fontWeight;
          var curX = 0;

          var _iterator13 = _createForOfIteratorHelper(this.textArr),
              _step13;

          try {
            for (_iterator13.s(); !(_step13 = _iterator13.n()).done;) {
              var text = _step13.value;
              var w = this.ctx.measureText(text).width;
              curX += w;
            }
          } catch (err) {
            _iterator13.e(err);
          } finally {
            _iterator13.f();
          }

          this.width = curX;
          this.height = this.fontSize;
          this.refreshAnchorOff();
          this.ctx.restore();
        }
      }, {
        key: "show",
        value: function show() {
          var callBack = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
          // console.log(' in show ');
          this.visible = true; // this.alpha = 0;

          var 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(function () {
            if (callBack) {
              callBack();
            }
          }).start(); // Start the tween immediately.
        }
      }, {
        key: "drawText",
        value: function drawText() {
          // console.log('in drawText', this.text);
          if (!this.text) {
            return;
          }

          this.ctx.font = "".concat(this.fontSize, "px ").concat(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);

          var curX = 0;

          for (var i = 0; i < this.textArr.length; i++) {
            var 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;
          }
        }
      }]);

      return RichTextOld;
    }(Label);

    var RichText =
    /*#__PURE__*/
    function (_Label5) {
      _inherits(RichText, _Label5);

      var _super25 = _createSuper(RichText);

      function RichText(ctx) {
        var _this36;

        _classCallCheck(this, RichText);

        _this36 = _super25.call(this, ctx);
        _this36.disH = 30; // this.dataArr = dataArr;

        return _this36;
      }

      _createClass(RichText, [{
        key: "drawText",
        value: function drawText() {
          if (!this.text) {
            return;
          }

          this.ctx.font = "".concat(this.fontSize, "px ").concat(this.fontName);
          this.ctx.textAlign = this.textAlign;
          this.ctx.textBaseline = 'middle';
          this.ctx.fontWeight = this.fontWeight;
          this.ctx.fillStyle = this.fontColor;
          var selfW = this.width * this.scaleX;
          var chr = this.text.split(' ');
          var temp = '';
          var row = [];
          var w = selfW - 80;
          var disH = (this.fontSize + this.disH) * this.scaleY;

          var _iterator14 = _createForOfIteratorHelper(chr),
              _step14;

          try {
            for (_iterator14.s(); !(_step14 = _iterator14.n()).done;) {
              var c = _step14.value;

              if (this.ctx.measureText(temp).width < w && this.ctx.measureText(temp + c).width <= w) {
                temp += ' ' + c;
              } else {
                row.push(temp);
                temp = ' ' + c;
              }
            }
          } catch (err) {
            _iterator14.e(err);
          } finally {
            _iterator14.f();
          }

          row.push(temp);
          var x = 0;
          var 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 (var 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 (var _b2 = 0; _b2 < row.length; _b2++) {
            this.ctx.fillText(row[_b2], x, y + (_b2 + 1) * disH); // 每行字体y坐标间隔20
          }
        }
      }, {
        key: "drawSelf",
        value: function drawSelf() {
          _get(_getPrototypeOf(RichText.prototype), "drawSelf", this).call(this);

          this.drawText();
        }
      }]);

      return RichText;
    }(Label);

    var LineRect =
    /*#__PURE__*/
    function (_MySprite19) {
      _inherits(LineRect, _MySprite19);

      var _super26 = _createSuper(LineRect);

      function LineRect() {
        var _this37;

        _classCallCheck(this, LineRect);

        _this37 = _super26.apply(this, arguments);
        _this37.lineColor = '#ffffff';
        _this37.lineWidth = 10;
        return _this37;
      }

      _createClass(LineRect, [{
        key: "setSize",
        value: function setSize(w, h) {
          this.width = w;
          this.height = h;
        }
      }, {
        key: "drawLine",
        value: function 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();
        }
      }, {
        key: "drawSelf",
        value: function drawSelf() {
          _get(_getPrototypeOf(LineRect.prototype), "drawSelf", this).call(this);

          this.drawLine();
        }
      }]);

      return LineRect;
    }(MySprite);

    var ShapeRect =
    /*#__PURE__*/
    function (_MySprite20) {
      _inherits(ShapeRect, _MySprite20);

      var _super27 = _createSuper(ShapeRect);

      function ShapeRect() {
        var _this38;

        _classCallCheck(this, ShapeRect);

        _this38 = _super27.apply(this, arguments);
        _this38.fillColor = '#FF0000';
        return _this38;
      }

      _createClass(ShapeRect, [{
        key: "setSize",
        value: function setSize(w, h) {
          this.width = w;
          this.height = h; // console.log('w:', w);
          // console.log('h:', h);
        }
      }, {
        key: "drawShape",
        value: function drawShape() {
          this.ctx.fillStyle = this.fillColor;
          this.ctx.fillRect(this._offX, this._offY, this.width, this.height);
        }
      }, {
        key: "drawSelf",
        value: function drawSelf() {
          _get(_getPrototypeOf(ShapeRect.prototype), "drawSelf", this).call(this);

          this.drawShape();
        }
      }]);

      return ShapeRect;
    }(MySprite);

    var ShapeCircle =
    /*#__PURE__*/
    function (_MySprite21) {
      _inherits(ShapeCircle, _MySprite21);

      var _super28 = _createSuper(ShapeCircle);

      function ShapeCircle() {
        var _this39;

        _classCallCheck(this, ShapeCircle);

        _this39 = _super28.apply(this, arguments);
        _this39.fillColor = '#FF0000';
        _this39.radius = 0;
        return _this39;
      }

      _createClass(ShapeCircle, [{
        key: "setRadius",
        value: function setRadius(r) {
          this.anchorX = this.anchorY = 0.5;
          this.radius = r;
          this.width = r * 2;
          this.height = r * 2;
        }
      }, {
        key: "drawShape",
        value: function drawShape() {
          this.ctx.beginPath();
          this.ctx.fillStyle = this.fillColor;
          this.ctx.arc(0, 0, this.radius, 0, angleToRadian(360));
          this.ctx.fill();
        }
      }, {
        key: "drawSelf",
        value: function drawSelf() {
          _get(_getPrototypeOf(ShapeCircle.prototype), "drawSelf", this).call(this);

          this.drawShape();
        }
      }]);

      return ShapeCircle;
    }(MySprite);

    var ShapeRectNew =
    /*#__PURE__*/
    function (_MySprite22) {
      _inherits(ShapeRectNew, _MySprite22);

      var _super29 = _createSuper(ShapeRectNew);

      function ShapeRectNew() {
        var _this40;

        _classCallCheck(this, ShapeRectNew);

        _this40 = _super29.apply(this, arguments);
        _this40.radius = 0;
        _this40.fillColor = '#ffffff';
        _this40.strokeColor = '#000000';
        _this40.fill = true;
        _this40.stroke = false;
        _this40.lineWidth = 1;
        return _this40;
      }

      _createClass(ShapeRectNew, [{
        key: "setSize",
        value: function setSize(w, h, r) {
          this.width = w;
          this.height = h;
          this.radius = r;
        }
      }, {
        key: "setOutLine",
        value: function setOutLine(color, lineWidth) {
          this.stroke = true;
          this.strokeColor = color;
          this.lineWidth = lineWidth;
        }
      }, {
        key: "drawShape",
        value: function drawShape() {
          var ctx = this.ctx;
          var width = this.width;
          var height = this.height;
          var 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();
        }
      }, {
        key: "drawSelf",
        value: function drawSelf() {
          _get(_getPrototypeOf(ShapeRectNew.prototype), "drawSelf", this).call(this);

          this.drawShape();
        }
      }]);

      return ShapeRectNew;
    }(MySprite);

    var MyAnimation =
    /*#__PURE__*/
    function (_MySprite23) {
      _inherits(MyAnimation, _MySprite23);

      var _super30 = _createSuper(MyAnimation);

      function MyAnimation() {
        var _this41;

        _classCallCheck(this, MyAnimation);

        _this41 = _super30.apply(this, arguments);
        _this41.frameArr = [];
        _this41.frameIndex = 0;
        _this41.playFlag = false;
        _this41.curDelay = 0;
        _this41.loop = false;
        _this41.delayPerUnit = 1;
        _this41.restartFlag = false;
        _this41.reverseFlag = false;
        return _this41;
      }

      _createClass(MyAnimation, [{
        key: "addFrameByImg",
        value: function addFrameByImg(img) {
          var 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;
        }
      }, {
        key: "addFrameByUrl",
        value: function addFrameByUrl(url) {
          var _this42 = this;

          var spr = new MySprite(this.ctx);
          spr.load(url).then(function (img) {
            _this42._refreshSize(img);
          });
          spr.visible = false;
          this.addChild(spr);
          this.frameArr.push(spr);
          this.frameArr[this.frameIndex].visible = true;
        }
      }, {
        key: "_refreshSize",
        value: function _refreshSize(img) {
          if (this.width < img.width) {
            this.width = img.width;
          }

          if (this.height < img.height) {
            this.height = img.height;
          }
        }
      }, {
        key: "play",
        value: function play() {
          this.playFlag = true;
          this.lastDateTime = new Date().getTime();
        }
      }, {
        key: "stop",
        value: function stop() {
          this.playFlag = false;
        }
      }, {
        key: "replay",
        value: function replay() {
          this.restartFlag = true;
          this.play();
        }
      }, {
        key: "reverse",
        value: function reverse() {
          this.reverseFlag = !this.reverseFlag;
          this.frameArr.reverse();
          this.frameIndex = 0;
        }
      }, {
        key: "showAllFrame",
        value: function showAllFrame() {
          var _iterator15 = _createForOfIteratorHelper(this.frameArr),
              _step15;

          try {
            for (_iterator15.s(); !(_step15 = _iterator15.n()).done;) {
              var frame = _step15.value;
              frame.alpha = 1;
            }
          } catch (err) {
            _iterator15.e(err);
          } finally {
            _iterator15.f();
          }
        }
      }, {
        key: "hideAllFrame",
        value: function hideAllFrame() {
          var _iterator16 = _createForOfIteratorHelper(this.frameArr),
              _step16;

          try {
            for (_iterator16.s(); !(_step16 = _iterator16.n()).done;) {
              var frame = _step16.value;
              frame.alpha = 0;
            }
          } catch (err) {
            _iterator16.e(err);
          } finally {
            _iterator16.f();
          }
        }
      }, {
        key: "playEnd",
        value: function playEnd() {
          this.playFlag = false;
          this.curDelay = 0;
          this.frameArr[this.frameIndex].visible = true;

          if (this.playEndFunc) {
            this.playEndFunc();
            this.playEndFunc = null;
          }
        }
      }, {
        key: "updateFrame",
        value: function 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;
        }
      }, {
        key: "_updateDelay",
        value: function _updateDelay(delay) {
          this.curDelay += delay;

          if (this.curDelay < this.delayPerUnit) {
            return;
          }

          this.curDelay -= this.delayPerUnit;
          this.updateFrame();
        }
      }, {
        key: "_updateLastDate",
        value: function _updateLastDate() {
          if (!this.playFlag) {
            return;
          }

          var delay = 0;

          if (this.lastDateTime) {
            delay = (new Date().getTime() - this.lastDateTime) / 1000;
          }

          this.lastDateTime = new Date().getTime();

          this._updateDelay(delay);
        }
      }, {
        key: "update",
        value: function update() {
          var $event = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;

          _get(_getPrototypeOf(MyAnimation.prototype), "update", this).call(this, $event);

          this._updateLastDate();
        }
      }]);

      return MyAnimation;
    }(MySprite); // --------===========  util func  =============-------------


    function tweenChange(item, obj) {
      var time = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0.8;
      var callBack = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
      var easing = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : null;
      var update = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : null;
      var tween = new _tweenjs_tween_js__WEBPACK_IMPORTED_MODULE_0__["default"].Tween(item).to(obj, time * 1000);

      if (callBack) {
        tween.onComplete(function () {
          callBack();
        });
      }

      if (easing) {
        tween.easing(easing);
      }

      if (update) {
        tween.onUpdate(function (a, b) {
          update(a, b);
        });
      }

      tween.start();
      return tween;
    }

    function rotateItem(item, rotation) {
      var time = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0.8;
      var callBack = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
      var easing = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : null;
      var tween = new _tweenjs_tween_js__WEBPACK_IMPORTED_MODULE_0__["default"].Tween(item).to({
        rotation: rotation
      }, time * 1000);

      if (callBack) {
        tween.onComplete(function () {
          callBack();
        });
      }

      if (easing) {
        tween.easing(easing);
      }

      tween.start();
    }

    function scaleItem(item, scale) {
      var time = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0.8;
      var callBack = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
      var easing = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : null;
      var tween = new _tweenjs_tween_js__WEBPACK_IMPORTED_MODULE_0__["default"].Tween(item).to({
        scaleX: scale,
        scaleY: scale
      }, time * 1000);

      if (callBack) {
        tween.onComplete(function () {
          callBack();
        });
      }

      if (easing) {
        tween.easing(easing);
      }

      tween.start();
      return tween;
    }

    function moveItem(item, x, y) {
      var time = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0.8;
      var callBack = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : null;
      var easing = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : null;
      var tween = new _tweenjs_tween_js__WEBPACK_IMPORTED_MODULE_0__["default"].Tween(item).to({
        x: x,
        y: y
      }, time * 1000);

      if (callBack) {
        tween.onComplete(function () {
          callBack();
        });
      }

      if (easing) {
        tween.easing(easing);
      }

      tween.start();
      return tween;
    }

    function endShow(item) {
      var s = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
      item.scaleX = item.scaleY = 0;
      item.alpha = 0;
      var 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(function () {}).start();
    }

    function hideItem(item) {
      var time = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0.8;
      var callBack = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
      var easing = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;

      if (item.alpha === 0) {
        return;
      }

      var 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(function () {
        if (callBack) {
          callBack();
        }
      });

      if (easing) {
        tween.easing(easing);
      }

      tween.start();
    }

    function showItem(item) {
      var time = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0.8;
      var callBack = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
      var easing = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;

      if (item.alpha === 1) {
        if (callBack) {
          callBack();
        }

        return;
      }

      item.visible = true;
      var 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(function () {
        if (callBack) {
          callBack();
        }
      });

      if (easing) {
        tween.easing(easing);
      }

      tween.start();
    }

    function alphaItem(item, alpha) {
      var time = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0.8;
      var callBack = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
      var easing = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : null;
      var tween = new _tweenjs_tween_js__WEBPACK_IMPORTED_MODULE_0__["default"].Tween(item).to({
        alpha: alpha
      }, time * 1000) // .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth.
      .onComplete(function () {
        if (callBack) {
          callBack();
        }
      });

      if (easing) {
        tween.easing(easing);
      }

      tween.start();
    }

    function showStar(item) {
      var time = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0.8;
      var callBack = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
      var easing = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
      var 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(function () {
        if (callBack) {
          callBack();
        }
      });

      if (easing) {
        tween.easing(easing);
      }

      tween.start();
    }

    function randomSortByArr(arr) {
      var newArr = [];
      var tmpArr = arr.concat();

      while (tmpArr.length > 0) {
        var 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) {
      var radian = angle * Math.PI / 180;
      var x = Math.sin(radian) * len;
      var y = Math.cos(radian) * len;
      return {
        x: x,
        y: y
      };
    }

    function getAngleByPos(px, py, mx, my) {
      var x = Math.abs(px - mx);
      var y = Math.abs(py - my);
      var z = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));
      var cos = y / z;
      var radina = Math.acos(cos); // 用反三角函数求弧度

      var 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) {
      var index = arr.indexOf(item);

      if (index !== -1) {
        arr.splice(index, 1);
      }
    }

    function circleMove(item, x0, y0) {
      var time = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 2;
      var addR = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 360;
      var xPer = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : 1;
      var yPer = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : 1;
      var callBack = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : null;
      var easing = arguments.length > 8 && arguments[8] !== undefined ? arguments[8] : null;
      var r = getPosDistance(item.x, item.y, x0, y0);
      var a = getAngleByPos(item.x, item.y, x0, y0);
      a += 90;
      var obj = {
        r: r,
        a: a
      };
      item._circleAngle = a;
      var targetA = a + addR;
      var tween = new _tweenjs_tween_js__WEBPACK_IMPORTED_MODULE_0__["default"].Tween(item).to({
        _circleAngle: targetA
      }, time * 1000);

      if (callBack) {
        tween.onComplete(function () {
          callBack();
        });
      }

      if (easing) {
        tween.easing(easing);
      }

      tween.onUpdate(function (item, progress) {
        // console.log(item._circleAngle);
        var r = obj.r;
        var a = item._circleAngle;
        var x = x0 + r * xPer * Math.cos(a * Math.PI / 180);
        var 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) {
      var _x = ex - sx;

      var _y = ey - sy;

      var len = Math.sqrt(Math.pow(_x, 2) + Math.pow(_y, 2));
      return len;
    }

    function delayCall(callback, second) {
      var tween = new _tweenjs_tween_js__WEBPACK_IMPORTED_MODULE_0__["default"].Tween(this).delay(second * 1000).onComplete(function () {
        if (callback) {
          callback();
        }
      }).start();
    }

    function formatTime(fmt, date) {
      // "yyyy-MM-dd HH:mm:ss";
      var 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 (var 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) {
      var sx = maxLen / item.width;
      var sy = maxLen / item.height;
      var minS = Math.min(sx, sy);
      return minS;
    }

    function jelly(item) {
      var time = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0.7;

      if (item.jellyTween) {
        _tweenjs_tween_js__WEBPACK_IMPORTED_MODULE_0__["default"].remove(item.jellyTween);
      }

      var t = time / 9;
      var baseSX = item.scaleX;
      var baseSY = item.scaleY;
      var index = 0;

      var run = function run() {
        if (index >= arr.length) {
          item.jellyTween = null;
          return;
        }

        var data = arr[index];
        var t = tweenChange(item, {
          scaleX: data[0],
          scaleY: data[1]
        }, data[2], function () {
          index++;
          run();
        }, _tweenjs_tween_js__WEBPACK_IMPORTED_MODULE_0__["default"].Easing.Sinusoidal.InOut);
        item.jellyTween = t;
      };

      var 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) {
      var num = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 20;
      var minLen = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 40;
      var maxLen = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : 80;
      var showTime = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : 0.4;

      var _loop2 = function _loop2(i) {
        var particle = new MySprite();
        particle.init(img);
        particle.x = pos.x;
        particle.y = pos.y;
        parent.addChild(particle);
        var randomR = 360 * Math.random();
        particle.rotation = randomR;
        var randomS = 0.3 + Math.random() * 0.7;
        particle.setScaleXY(randomS * 0.3);
        var randomX = Math.random() * 20 - 10;
        particle.x += randomX;
        var randomY = Math.random() * 20 - 10;
        particle.y += randomY;
        var randomL = minLen + Math.random() * (maxLen - minLen);
        var randomA = 360 * Math.random();
        var randomT = getPosByAngle(randomA, randomL);
        moveItem(particle, particle.x + randomT.x, particle.y + randomT.y, showTime, function () {}, _tweenjs_tween_js__WEBPACK_IMPORTED_MODULE_0__["default"].Easing.Exponential.Out); // scaleItem(particle, 0, 0.6, () => {
        //
        // });

        scaleItem(particle, randomS, 0.6, function () {}, _tweenjs_tween_js__WEBPACK_IMPORTED_MODULE_0__["default"].Easing.Exponential.Out);
        setTimeout(function () {
          hideItem(particle, 0.4, function () {}, _tweenjs_tween_js__WEBPACK_IMPORTED_MODULE_0__["default"].Easing.Cubic.In);
        }, showTime * 0.5 * 1000);
      };

      for (var i = 0; i < num; i++) {
        _loop2(i);
      }
    }

    function shake(item) {
      var time = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0.5;
      var callback = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
      var rate = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1;

      if (item.shakeTween) {
        return;
      }

      item.shakeTween = true;
      var offX = 15 * item.scaleX * rate;
      var offY = 15 * item.scaleX * rate;
      var baseX = item.x;
      var baseY = item.y;
      var easing = _tweenjs_tween_js__WEBPACK_IMPORTED_MODULE_0__["default"].Easing.Sinusoidal.InOut;

      var move4 = function move4() {
        moveItem(item, baseX, baseY, time / 4, function () {
          item.shakeTween = false;

          if (callback) {
            callback();
          }
        }, easing);
      };

      var move3 = function move3() {
        moveItem(item, baseX + offX / 4, baseY + offY / 4, time / 4, function () {
          move4();
        }, easing);
      };

      var move2 = function move2() {
        moveItem(item, baseX - offX / 4 * 3, baseY - offY / 4 * 3, time / 4, function () {
          move3();
        }, easing);
      };

      var move1 = function move1() {
        moveItem(item, baseX + offX, baseY + offY, time / 7.5, function () {
          move2();
        }, easing);
      };

      move1();
    } // --------------- custom class --------------------

    /***/

  },

  /***/
  "./src/app/play/play.component.ts":
  /*!****************************************!*\
    !*** ./src/app/play/play.component.ts ***!
    \****************************************/

  /*! exports provided: PlayComponent */

  /***/
  function srcAppPlayPlayComponentTs(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");

    var _c0 = ["canvas"];
    var _c1 = ["wrap"];

    var PlayComponent =
    /*@__PURE__*/
    function () {
      var PlayComponent =
      /*#__PURE__*/
      function () {
        function PlayComponent() {
          _classCallCheck(this, PlayComponent);

          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;
        }

        _createClass(PlayComponent, [{
          key: "onResize",
          value: function onResize(event) {
            this.winResizeEventStream.next();
          }
        }, {
          key: "ngOnInit",
          value: function ngOnInit() {
            var _this43 = this;

            this.data = {}; // 获取数据

            var getData = window.courseware.getData;
            getData(function (data) {
              if (data && typeof data == 'object') {
                _this43.data = data;
              } // console.log('data:' , data);
              // 初始化 各事件监听


              _this43.initListener(); // 若无数据 则为预览模式 需要填充一些默认数据用来显示


              _this43.initDefaultData(); // 初始化 音频资源


              _this43.initAudio(); // 初始化 图片资源


              _this43.initImg(); // 开始预加载资源


              _this43.load();
            }, this.saveKey);
          }
        }, {
          key: "ngOnDestroy",
          value: function ngOnDestroy() {
            window['curCtx'] = null;
            window.cancelAnimationFrame(this.animationId);
          }
        }, {
          key: "load",
          value: function load() {
            var _this44 = this;

            // 预加载资源
            this.loadResources().then(function () {
              window["air"].hideAirClassLoading(_this44.saveKey, _this44.data);

              _this44.init();

              _this44.update();
            });
          }
        }, {
          key: "init",
          value: function init() {
            this.initCtx();
            this.initData();
            this.initView();
          }
        }, {
          key: "initCtx",
          value: function 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;
          }
        }, {
          key: "updateItem",
          value: function updateItem(item) {
            if (item) {
              item.update();
            }
          }
        }, {
          key: "updateArr",
          value: function updateArr(arr) {
            if (!arr) {
              return;
            }

            for (var i = 0; i < arr.length; i++) {
              arr[i].update(this);
            }
          }
        }, {
          key: "initListener",
          value: function initListener() {
            var _this45 = this;

            this.winResizeEventStream.pipe(Object(rxjs_operators__WEBPACK_IMPORTED_MODULE_4__["debounceTime"])(500)).subscribe(function (data) {
              _this45.renderAfterResize();
            }); // ---------------------------------------------

            var setParentOffset = function setParentOffset() {
              var rect = _this45.canvas.nativeElement.getBoundingClientRect();

              _this45.canvasLeft = rect.left;
              _this45.canvasTop = rect.top;
            };

            var setMxMyByTouch = function setMxMyByTouch(event) {
              if (event.touches.length <= 0) {
                return;
              }

              if (_this45.canvasLeft == null) {
                setParentOffset();
              }

              _this45.mx = event.touches[0].pageX - _this45.canvasLeft;
              _this45.my = event.touches[0].pageY - _this45.canvasTop;
            };

            var setMxMyByMouse = function setMxMyByMouse(event) {
              _this45.mx = event.offsetX;
              _this45.my = event.offsetY;
            }; // ---------------------------------------------


            var firstTouch = true;

            var touchDownFunc = function touchDownFunc(e) {
              if (firstTouch) {
                firstTouch = false;
                removeMouseListener();
              }

              setMxMyByTouch(e);

              _this45.mapDown(e);
            };

            var touchMoveFunc = function touchMoveFunc(e) {
              setMxMyByTouch(e);

              _this45.mapMove(e);
            };

            var touchUpFunc = function touchUpFunc(e) {
              setMxMyByTouch(e);

              _this45.mapUp(e);
            };

            var mouseDownFunc = function mouseDownFunc(e) {
              if (firstTouch) {
                firstTouch = false;
                removeTouchListener();
              }

              setMxMyByMouse(e);

              _this45.mapDown(e);
            };

            var mouseMoveFunc = function mouseMoveFunc(e) {
              setMxMyByMouse(e);

              _this45.mapMove(e);
            };

            var mouseUpFunc = function mouseUpFunc(e) {
              setMxMyByMouse(e);

              _this45.mapUp(e);
            };

            var element = this.canvas.nativeElement;

            var addTouchListener = function addTouchListener() {
              element.addEventListener('touchstart', touchDownFunc);
              element.addEventListener('touchmove', touchMoveFunc);
              element.addEventListener('touchend', touchUpFunc);
              element.addEventListener('touchcancel', touchUpFunc);
            };

            var removeTouchListener = function removeTouchListener() {
              element.removeEventListener('touchstart', touchDownFunc);
              element.removeEventListener('touchmove', touchMoveFunc);
              element.removeEventListener('touchend', touchUpFunc);
              element.removeEventListener('touchcancel', touchUpFunc);
            };

            var addMouseListener = function addMouseListener() {
              element.addEventListener('mousedown', mouseDownFunc);
              element.addEventListener('mousemove', mouseMoveFunc);
              element.addEventListener('mouseup', mouseUpFunc);
            };

            var removeMouseListener = function removeMouseListener() {
              element.removeEventListener('mousedown', mouseDownFunc);
              element.removeEventListener('mousemove', mouseMoveFunc);
              element.removeEventListener('mouseup', mouseUpFunc);
            };

            addMouseListener();
            addTouchListener();
          }
        }, {
          key: "playAudio",
          value: function playAudio(key) {
            var now = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
            var callback = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
            var audio = this.audioObj[key];

            if (audio) {
              if (now) {
                audio.pause();
                audio.currentTime = 0;
              }

              if (callback) {
                audio.onended = function () {
                  callback();
                };
              }

              audio.play();
            }
          }
        }, {
          key: "loadResources",
          value: function loadResources() {
            var _this46 = this;

            var pr = [];
            this.rawImages.forEach(function (value, key) {
              var p = _this46.preload(value).then(function (img) {
                _this46.images.set(key, img);
              })["catch"](function (err) {
                return console.log(err);
              });

              pr.push(p);
            });
            this.rawAudios.forEach(function (value, key) {
              var a = _this46.preloadAudio(value).then(function () {// this.images.set(key, img);
              })["catch"](function (err) {
                return console.log(err);
              });

              pr.push(a);
            });
            return Promise.all(pr);
          }
        }, {
          key: "preload",
          value: function preload(url) {
            return new Promise(function (resolve, reject) {
              var img = new Image(); // img.crossOrigin = "anonymous";

              img.onload = function () {
                return resolve(img);
              };

              img.onerror = reject;
              img.src = url;
            });
          }
        }, {
          key: "preloadAudio",
          value: function preloadAudio(url) {
            return new Promise(function (resolve, reject) {
              var audio = new Audio();

              audio.oncanplay = function (a) {
                resolve();
              };

              audio.onerror = function () {
                reject();
              };

              audio.src = url;
              audio.load();
            });
          }
        }, {
          key: "renderAfterResize",
          value: function renderAfterResize() {
            this.canvasWidth = this.wrap.nativeElement.clientWidth;
            this.canvasHeight = this.wrap.nativeElement.clientHeight;
            this.init();
          }
        }, {
          key: "checkClickTarget",
          value: function checkClickTarget(target) {
            var rect = target.getBoundingBox();

            if (this.checkPointInRect(this.mx, this.my, rect)) {
              return true;
            }

            return false;
          }
        }, {
          key: "getWorlRect",
          value: function getWorlRect(target) {
            var rect = target.getBoundingBox();

            if (target.parent) {
              var pRect = this.getWorlRect(target.parent);
              rect.x += pRect.x;
              rect.y += pRect.y;
            }

            return rect;
          }
        }, {
          key: "checkPointInRect",
          value: function 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;
          }
        }, {
          key: "addUrlToAudioObj",
          value: function addUrlToAudioObj(key) {
            var url = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
            var vlomue = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
            var loop = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
            var callback = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : null;
            var audioObj = this.audioObj;

            if (url == null) {
              url = key;
            }

            this.rawAudios.set(key, url);
            var audio = new Audio();
            audio.src = url;
            audio.load();
            audio.loop = loop;
            audio.volume = vlomue;
            audioObj[key] = audio;

            if (callback) {
              audio.onended = function () {
                callback();
              };
            }
          }
        }, {
          key: "addUrlToImages",
          value: function addUrlToImages(url) {
            this.rawImages.set(url, url);
          } // ======================================================编写区域==========================================================================

          /**
           * 添加默认数据 便于无数据时的展示
           */

        }, {
          key: "initDefaultData",
          value: function 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';
            }
          }
          /**
           * 添加预加载图片
           */

        }, {
          key: "initImg",
          value: function initImg() {
            this.addUrlToImages(this.data.pic_url);
            this.addUrlToImages(this.data.pic_url_2);
          }
          /**
           * 添加预加载音频
           */

        }, {
          key: "initAudio",
          value: function initAudio() {
            // 音频资源
            this.addUrlToAudioObj(this.data.audio_url);
            this.addUrlToAudioObj(this.data.audio_url_2); // 音效

            this.addUrlToAudioObj('click', this.rawAudios.get('click'), 0.3);
          }
          /**
           * 初始化数据
           */

        }, {
          key: "initData",
          value: function initData() {
            var sx = this.canvasWidth / this.canvasBaseW;
            var sy = this.canvasHeight / this.canvasBaseH;
            var s = Math.min(sx, sy);
            this.mapScale = s; // this.mapScale = sx;
            // this.mapScale = sy;

            this.renderArr = [];
          }
          /**
           * 初始化试图
           */

        }, {
          key: "initView",
          value: function initView() {
            this.initPic();
            this.initBottomPart();
          }
        }, {
          key: "initBottomPart",
          value: function initBottomPart() {
            var 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;
            var 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;
          }
        }, {
          key: "initPic",
          value: function initPic() {
            var maxW = this.canvasWidth * 0.7;
            var 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;
            var 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);
            var 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;
          }
        }, {
          key: "btnLeftClicked",
          value: function btnLeftClicked() {
            this.lastPage();
          }
        }, {
          key: "btnRightClicked",
          value: function btnRightClicked() {
            this.nextPage();
          }
        }, {
          key: "lastPage",
          value: function lastPage() {
            var _this47 = this;

            if (this.curPic == this.pic1) {
              return;
            }

            this.canTouch = false;
            var 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, function () {
              _this47.canTouch = true;
              _this47.curPic = _this47.pic1;
            });
          }
        }, {
          key: "nextPage",
          value: function nextPage() {
            var _this48 = this;

            if (this.curPic == this.pic2) {
              return;
            }

            this.canTouch = false;
            var 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, function () {
              _this48.canTouch = true;
              _this48.curPic = _this48.pic2;
            });
          }
        }, {
          key: "pic1Clicked",
          value: function pic1Clicked() {
            this.playAudio(this.data.audio_url);
          }
        }, {
          key: "pic2Clicked",
          value: function pic2Clicked() {
            this.playAudio(this.data.audio_url_2);
          }
        }, {
          key: "mapDown",
          value: function 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;
            }
          }
        }, {
          key: "mapMove",
          value: function mapMove(event) {}
        }, {
          key: "mapUp",
          value: function mapUp(event) {}
        }, {
          key: "update",
          value: function 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);
          }
        }]);

        return PlayComponent;
      }();

      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 srcAppPlayResourcesJs(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;
    });

    var 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"],
    ];
    var resAudio = [['click', "assets/play/music/click.mp3"]];
    /***/
  },

  /***/
  "./src/environments/environment.ts":
  /*!*****************************************!*\
    !*** ./src/environments/environment.ts ***!
    \*****************************************/

  /*! exports provided: environment */

  /***/
  function srcEnvironmentsEnvironmentTs(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`.


    var 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 srcMainTs(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"](function (err) {
      return 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-es5.js.map