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 = 'form';
          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");
    /* harmony import */


    var _common_upload_dragon_bone_upload_dragon_bone_component__WEBPACK_IMPORTED_MODULE_24__ = __webpack_require__(
    /*! ./common/upload-dragon-bone/upload-dragon-bone.component */
    "./src/app/common/upload-dragon-bone/upload-dragon-bone.component.ts");
    /* harmony import */


    var _common_custom_action_custom_action_component__WEBPACK_IMPORTED_MODULE_25__ = __webpack_require__(
    /*! ./common/custom-action/custom-action.component */
    "./src/app/common/custom-action/custom-action.component.ts");

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

        var fs = _fortawesome_free_solid_svg_icons__WEBPACK_IMPORTED_MODULE_22__["fas"];
        var fr = _fortawesome_free_regular_svg_icons__WEBPACK_IMPORTED_MODULE_23__["far"];
        library.addIconPacks(fs, fr);
      };

      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_action_custom_action_component__WEBPACK_IMPORTED_MODULE_25__["CustomActionComponent"], _common_custom_hot_zone_custom_hot_zone_component__WEBPACK_IMPORTED_MODULE_16__["CustomHotZoneComponent"], _common_upload_dragon_bone_upload_dragon_bone_component__WEBPACK_IMPORTED_MODULE_24__["UploadDragonBoneComponent"], _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_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_progress__WEBPACK_IMPORTED_MODULE_6__ = __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 _r106 = _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"](_r106);

          var ctx_r105 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵnextContext"]();

          return ctx_r105.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 _r108 = _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"](_r108);

          var ctx_r107 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵnextContext"]();

          return ctx_r107.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_r96 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵnextContext"]();

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵclassProp"]("p-recording", ctx_r96.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_r97 = _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_r97.withRmBtn && (ctx_r97.audioUrl || ctx_r97.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_r98 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵnextContext"]();

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](1);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵstyleProp"]("width", ctx_r98.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 _r110 = _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"](_r110);

          var ctx_r109 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵnextContext"]();

          return ctx_r109.onBtnDeleteAudio();
        });

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelement"](1, "i", 22);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
      }
    }

    function AudioRecorderComponent_ng_template_10_Template(rf, ctx) {
      if (rf & 1) {
        var _r112 = _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"](_r112);

          var ctx_r111 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵnextContext"]();

          return ctx_r111.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 _r114 = _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"](_r114);

          var ctx_r113 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵnextContext"]();

          return ctx_r113.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_r104 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵnextContext"]();

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](1);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("nzPercent", ctx_r104.percent)("nzWidth", 30)("nzFormat", ctx_r104.progressText);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](1);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵstyleProp"]("left", ctx_r104.isPlaying ? "8px" : "");

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](1);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("icon", ctx_r104.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 = true;
          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;
          };

          this.setUploadUrl();
        }

        _createClass(AudioRecorderComponent, [{
          key: "setUploadUrl",
          value: function setUploadUrl() {
            var _this2 = this;

            if (!this.uploadUrl) {
              this.uploadUrl = window.courseware.uploadUrl();
              this.uploadData = window.courseware.uploadData();
              setTimeout(function () {
                _this2.setUploadUrl();
              }, 500);
            }
          }
        }, {
          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 _this3 = this;

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

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

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

            this.audio.onended = function (event) {
              _this3.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.audioUploaded.emit({});
            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"], ["nz-icon", "", "nzType", "close", "nzTheme", "outline"], [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 _r100 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵreference"](9);

            var _r102 = _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", _r100)("ngIfElse", _r102);

            _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_icon__WEBPACK_IMPORTED_MODULE_5__["NzIconDirective"], ng_zorro_antd_progress__WEBPACK_IMPORTED_MODULE_6__["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-action/custom-action.component.ts":
  /*!*****************************************************************!*\
    !*** ./src/app/common/custom-action/custom-action.component.ts ***!
    \*****************************************************************/

  /*! exports provided: CustomActionComponent */

  /***/
  function srcAppCommonCustomActionCustomActionComponentTs(module, __webpack_exports__, __webpack_require__) {
    "use strict";

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


    __webpack_require__.d(__webpack_exports__, "CustomActionComponent", function () {
      return CustomActionComponent;
    });
    /* 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_button__WEBPACK_IMPORTED_MODULE_2__ = __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_3__ = __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_modal__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(
    /*! ng-zorro-antd/modal */
    "./node_modules/ng-zorro-antd/__ivy_ngcc__/fesm2015/ng-zorro-antd-modal.js");
    /* harmony import */


    var _angular_common__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(
    /*! @angular/common */
    "./node_modules/@angular/common/__ivy_ngcc__/fesm2015/common.js");
    /* harmony import */


    var ng_zorro_antd_divider__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(
    /*! ng-zorro-antd/divider */
    "./node_modules/ng-zorro-antd/__ivy_ngcc__/fesm2015/ng-zorro-antd-divider.js");
    /* harmony import */


    var _angular_forms__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(
    /*! @angular/forms */
    "./node_modules/@angular/forms/__ivy_ngcc__/fesm2015/forms.js");
    /* 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");
    /* harmony import */


    var _upload_image_with_preview_upload_image_with_preview_component__WEBPACK_IMPORTED_MODULE_9__ = __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 _upload_dragon_bone_upload_dragon_bone_component__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(
    /*! ../upload-dragon-bone/upload-dragon-bone.component */
    "./src/app/common/upload-dragon-bone/upload-dragon-bone.component.ts");
    /* harmony import */


    var _audio_recorder_audio_recorder_component__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(
    /*! ../audio-recorder/audio-recorder.component */
    "./src/app/common/audio-recorder/audio-recorder.component.ts");

    function CustomActionComponent_div_9_Template(rf, ctx) {
      if (rf & 1) {
        var _r129 = _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", 18);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵlistener"]("imageUploaded", function CustomActionComponent_div_9_Template_app_upload_image_with_preview_imageUploaded_1_listener($event) {
          _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵrestoreView"](_r129);

          var ctx_r128 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵnextContext"]();

          return ctx_r128.onItemImgUploadSuccess($event, ctx_r128.item);
        });

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
      }

      if (rf & 2) {
        var ctx_r122 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵnextContext"]();

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](1);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("picUrl", ctx_r122.item == null ? null : ctx_r122.item.pic_url);
      }
    }

    function CustomActionComponent_div_10_Template(rf, ctx) {
      if (rf & 1) {
        var _r131 = _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", 19);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵlistener"]("ngModelChange", function CustomActionComponent_div_10_Template_input_ngModelChange_1_listener($event) {
          _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵrestoreView"](_r131);

          var ctx_r130 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵnextContext"]();

          return ctx_r130.item.text = $event;
        })("blur", function CustomActionComponent_div_10_Template_input_blur_1_listener() {
          _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵrestoreView"](_r131);

          var ctx_r132 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵnextContext"]();

          return ctx_r132.saveText(ctx_r132.item);
        });

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
      }

      if (rf & 2) {
        var ctx_r123 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵnextContext"]();

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](1);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("ngModel", ctx_r123.item.text);
      }
    }

    function CustomActionComponent_div_11_Template(rf, ctx) {
      if (rf & 1) {
        var _r134 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵgetCurrentView"]();

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](0, "div", 20);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](1, "app-upload-dragon-bone", 21);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵlistener"]("save", function CustomActionComponent_div_11_Template_app_upload_dragon_bone_save_1_listener($event) {
          _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵrestoreView"](_r134);

          var ctx_r133 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵnextContext"]();

          return ctx_r133.saveAnima($event);
        });

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
      }

      if (rf & 2) {
        var ctx_r124 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵnextContext"]();

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](1);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("skeJsonData", ctx_r124.item.skeJsonData)("texJsonData", ctx_r124.item.texJsonData)("texPngData", ctx_r124.item.texPngData);
      }
    }

    function CustomActionComponent_div_19_Template(rf, ctx) {
      if (rf & 1) {
        var _r138 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵgetCurrentView"]();

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](0, "div", 22);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](1, "div", 23);

        _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__["ɵɵelementStart"](4, "input", 24);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵlistener"]("ngModelChange", function CustomActionComponent_div_19_Template_input_ngModelChange_4_listener($event) {
          _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵrestoreView"](_r138);

          var op_r135 = ctx.$implicit;
          return op_r135[1] = $event;
        })("blur", function CustomActionComponent_div_19_Template_input_blur_4_listener() {
          _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵrestoreView"](_r138);

          var op_r135 = ctx.$implicit;

          var ctx_r139 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵnextContext"]();

          return ctx_r139.saveText(op_r135);
        });

        _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 op_r135 = ctx.$implicit;

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](3);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtextInterpolate1"]("", op_r135[0], ": ");

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](1);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("ngModel", op_r135[1]);
      }
    }

    function CustomActionComponent_div_30_Template(rf, ctx) {
      if (rf & 1) {
        var _r143 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵgetCurrentView"]();

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](0, "div", 22);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](1, "div", 23);

        _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__["ɵɵelementStart"](4, "input", 25);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵlistener"]("ngModelChange", function CustomActionComponent_div_30_Template_input_ngModelChange_4_listener($event) {
          _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵrestoreView"](_r143);

          var op_r140 = ctx.$implicit;
          return op_r140[2] = $event;
        })("blur", function CustomActionComponent_div_30_Template_input_blur_4_listener() {
          _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵrestoreView"](_r143);

          var op_r140 = ctx.$implicit;

          var ctx_r144 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵnextContext"]();

          return ctx_r144.saveText(op_r140);
        });

        _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 op_r140 = ctx.$implicit;

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](3);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtextInterpolate1"]("", op_r140[0], ": ");

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](1);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("disabled", op_r140[2] == null)("ngModel", op_r140[2]);
      }
    }

    function CustomActionComponent_div_40_Template(rf, ctx) {
      if (rf & 1) {
        var _r146 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵgetCurrentView"]();

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](0, "div");

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelement"](1, "nz-divider", 7);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](2, "h4");

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtext"](3, " \u97F3\u9891\u8BBE\u7F6E ");

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](4, "app-audio-recorder", 26);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵlistener"]("audioUploaded", function CustomActionComponent_div_40_Template_app_audio_recorder_audioUploaded_4_listener($event) {
          _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵrestoreView"](_r146);

          var ctx_r145 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵnextContext"]();

          return ctx_r145.onItemAudioUploadSuccess($event, ctx_r145.item);
        });

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
      }

      if (rf & 2) {
        var ctx_r127 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵnextContext"]();

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](4);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("audioUrl", ctx_r127.item == null ? null : ctx_r127.item.audio_url);
      }
    }

    var CustomActionComponent =
    /*@__PURE__*/
    function () {
      var CustomActionComponent =
      /*#__PURE__*/
      function () {
        function CustomActionComponent(appRef, nzMessageService) {
          var _this4 = this;

          _classCallCheck(this, CustomActionComponent);

          this.appRef = appRef;
          this.nzMessageService = nzMessageService;
          this.uploading = false;
          this.progress = 0;
          this.btnName = '配置变化状态';
          this.option = [];
          this.hasAudio = false;
          this.type = 'text';
          this.save = new _angular_core__WEBPACK_IMPORTED_MODULE_0__["EventEmitter"]();
          this.refreshEmitter = new _angular_core__WEBPACK_IMPORTED_MODULE_0__["EventEmitter"]();
          this.panelVisible = false;
          this.pasteData = '';

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

          var tmpId = setInterval(function () {
            console.log(' in setInterval');
            _this4.uploadUrl = window.courseware.uploadUrl();
            _this4.uploadData = window.courseware.uploadData();

            if (_this4.uploadUrl) {
              clearInterval(tmpId);
            }
          }, 500);
        }

        _createClass(CustomActionComponent, [{
          key: "ngOnInit",
          value: function ngOnInit() {
            this.initItem();
          }
        }, {
          key: "ngOnChanges",
          value: function ngOnChanges() {}
        }, {
          key: "initItem",
          value: function initItem() {
            console.log('```this.item: ', this.item);

            if (!this.item) {
              this.item = {
                type: this.type,
                skeJsonData: {},
                texJsonData: {},
                texPngData: {},
                changeStart: [],
                changeEnd: [],
                changeTime: 0.3
              };

              if (this.option) {
                this.item.changeOption = JSON.parse(JSON.stringify(this.option));
              }
            }

            console.log('initItem', this.item);
          }
        }, {
          key: "setAnimaBtnClick",
          value: function setAnimaBtnClick() {
            this.panelVisible = true;
            this.refresh();
          }
        }, {
          key: "panelCancel",
          value: function panelCancel() {
            this.panelVisible = false;
            this.refresh();
          }
        }, {
          key: "panelOk",
          value: function panelOk() {
            // this.sendItemDragonBoneData();
            this.panelVisible = false;
            this.refresh();
            this.save.emit(this.item);
          }
        }, {
          key: "saveText",
          value: function saveText(t) {}
        }, {
          key: "radioChange",
          value: function radioChange(e) {
            this.item.type = e;
            console.log('e: ', e);
          }
        }, {
          key: "onItemImgUploadSuccess",
          value: function onItemImgUploadSuccess(e, item) {
            item.pic_url = e.url;
            this.refresh();
          }
        }, {
          key: "onItemAudioUploadSuccess",
          value: function onItemAudioUploadSuccess(e, item) {
            item.audio_url = e.url;
            this.refresh();
          }
        }, {
          key: "saveAnima",
          value: function saveAnima(e) {
            console.log("~ e: ", e);
          }
        }, {
          key: "copyChangeData",
          value: function copyChangeData() {
            console.log('this.item: ', this.item);
            var jsonData = {
              changeOption: this.item.changeOption,
              changeTime: this.item.changeTime // bgItem,
              // hotZoneItemArr,
              // isHasRect: this.isHasRect,
              // isHasPic: this.isHasPic,
              // isHasText: this.isHasText,
              // isHasAudio: this.isHasAudio,
              // isHasAnima: this.isHasAnima,
              // hotZoneFontObj: this.hotZoneFontObj,
              // defaultItemType: this.defaultItemType,
              // hotZoneImgSize: this.hotZoneImgSize,

            };
            var oInput = document.createElement('input');
            oInput.value = JSON.stringify(jsonData);
            document.body.appendChild(oInput);
            oInput.select(); // 选择对象

            document.execCommand('Copy'); // 执行浏览器复制命令

            document.body.removeChild(oInput);
            this.nzMessageService.success('复制成功');
          }
        }, {
          key: "importData",
          value: function importData() {
            if (!this.pasteData) {
              return;
            }

            try {
              var data = JSON.parse(this.pasteData);
              console.log('data:', data);
              var changeOption = data.changeOption,
                  changeTime = data.changeTime;
              this.item.changeOption = changeOption;
              this.item.changeTime = changeTime;
              this.pasteData = '';
            } catch (e) {
              console.log('err: ', e);
              this.nzMessageService.error('导入失败');
            }
          }
          /**
           * 刷新 渲染页面
           */

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

            // this.refreshEmitter.emit();
            setTimeout(function () {
              _this5.appRef.tick();
            }, 1);
          }
        }, {
          key: "closePanel",
          value: function closePanel() {
            console.log(' in closePanel ');
            this.refresh();
          }
        }, {
          key: "ngOnDestroy",
          value: function ngOnDestroy() {}
        }]);

        return CustomActionComponent;
      }();

      CustomActionComponent.ɵfac = function CustomActionComponent_Factory(t) {
        return new (t || CustomActionComponent)(_angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵdirectiveInject"](_angular_core__WEBPACK_IMPORTED_MODULE_0__["ApplicationRef"]), _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵdirectiveInject"](ng_zorro_antd__WEBPACK_IMPORTED_MODULE_1__["NzMessageService"]));
      };

      CustomActionComponent.ɵcmp = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵdefineComponent"]({
        type: CustomActionComponent,
        selectors: [["app-custom-action"]],
        inputs: {
          btnName: "btnName",
          option: "option",
          item: "item",
          hasAudio: "hasAudio",
          type: "type"
        },
        outputs: {
          save: "save",
          refreshEmitter: "refreshEmitter"
        },
        features: [_angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵNgOnChangesFeature"]],
        decls: 41,
        vars: 12,
        consts: [[1, "position-relative"], ["nz-button", "", 2, "border-radius", "0.5rem", "border", "1px solid #ddd", 3, "click"], ["nz-icon", "", "nzType", "tool", "nzTheme", "outline"], ["nzOkText", "\u4FDD\u5B58", 3, "nzVisible", "nzTitle", "nzVisibleChange", "nzAfterClose", "nzOnCancel", "nzOnOk"], [2, "margin-bottom", "10px", "width", "80%", "margin", "auto"], [4, "ngIf"], ["style", "margin-left: 100px;", 4, "ngIf"], [2, "margin-top", "10px"], [2, "display", "flex", "justify-content", "space-around"], [2, "width", "30%", "display", "flex", "align-items", "center", "flex-direction", "column"], ["style", "margin-bottom: 5px; ", 4, "ngFor", "ngForOf"], [2, "display", "flex", "width", "100%", "align-items", "center", "justify-content", "center"], ["type", "text", "nz-input", "", 2, "width", "80px", "margin-left", "5px", 3, "ngModel", "ngModelChange", "blur"], [2, "display", "flex", "align-items", "center", "justify-content", "center", "margin-top", "10px"], ["nz-button", "", 2, "margin-left", "20px", "margin-top", "-5px", 3, "click"], [2, "margin-left", "20px", "margin-top", "-5px"], ["type", "text", "nz-input", "", 2, "width", "100px", 3, "ngModel", "ngModelChange"], ["nz-button", "", "nzType", "primary", 2, "margin-left", "5px", 3, "disabled", "click"], [3, "picUrl", "imageUploaded"], ["type", "text", "nz-input", "", 3, "ngModel", "ngModelChange", "blur"], [2, "margin-left", "100px"], [3, "skeJsonData", "texJsonData", "texPngData", "save"], [2, "margin-bottom", "5px"], [2, "display", "flex", "align-items", "center", "justify-content", "center"], ["type", "text", "nz-input", "", 2, "margin-left", "5px", 3, "ngModel", "ngModelChange", "blur"], ["type", "text", "nz-input", "", 2, "margin-left", "5px", 3, "disabled", "ngModel", "ngModelChange", "blur"], [2, "margin", "auto", 3, "audioUrl", "audioUploaded"]],
        template: function CustomActionComponent_Template(rf, ctx) {
          if (rf & 1) {
            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](0, "div", 0);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](1, "button", 1);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵlistener"]("click", function CustomActionComponent_Template_button_click_1_listener() {
              return ctx.setAnimaBtnClick();
            });

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelement"](2, "i", 2);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtext"](3);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](4, "nz-modal", 3);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵlistener"]("nzVisibleChange", function CustomActionComponent_Template_nz_modal_nzVisibleChange_4_listener($event) {
              return ctx.panelVisible = $event;
            })("nzAfterClose", function CustomActionComponent_Template_nz_modal_nzAfterClose_4_listener() {
              return ctx.closePanel();
            })("nzOnCancel", function CustomActionComponent_Template_nz_modal_nzOnCancel_4_listener() {
              return ctx.panelCancel();
            })("nzOnOk", function CustomActionComponent_Template_nz_modal_nzOnOk_4_listener() {
              return ctx.panelOk();
            });

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](5, "div");

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](6, "h4");

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtext"](7, "\u57FA\u7840\u5185\u5BB9\uFF1A");

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](8, "div", 4);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtemplate"](9, CustomActionComponent_div_9_Template, 2, 1, "div", 5);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtemplate"](10, CustomActionComponent_div_10_Template, 2, 1, "div", 5);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtemplate"](11, CustomActionComponent_div_11_Template, 2, 3, "div", 6);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelement"](12, "nz-divider", 7);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](13, "h4");

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtext"](14, "\u72B6\u6001\u8BBE\u7F6E\uFF1A");

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](15, "div", 8);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](16, "div", 9);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](17, "h5");

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtext"](18, " \u5F00\u59CB\u72B6\u6001 ");

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtemplate"](19, CustomActionComponent_div_19_Template, 5, 2, "div", 10);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](20, "div", 9);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](21, "h5");

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtext"](22, " \u5207\u6362\u65F6\u95F4 ");

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](23, "div", 11);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](24, "span");

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtext"](25, "time: ");

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](26, "input", 12);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵlistener"]("ngModelChange", function CustomActionComponent_Template_input_ngModelChange_26_listener($event) {
              return ctx.item.changeTime = $event;
            })("blur", function CustomActionComponent_Template_input_blur_26_listener() {
              return ctx.saveText(ctx.item.changeTime);
            });

            _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"](27, "div", 9);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](28, "h5");

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtext"](29, " \u7ED3\u675F\u72B6\u6001 ");

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtemplate"](30, CustomActionComponent_div_30_Template, 5, 3, "div", 10);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](31, "div", 13);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](32, "button", 14);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵlistener"]("click", function CustomActionComponent_Template_button_click_32_listener() {
              return ctx.copyChangeData();
            });

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtext"](33, " \u590D\u5236\u6570\u636E ");

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](34, "div", 15);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](35, "span");

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtext"](36, "\u7C98\u8D34\u6570\u636E: ");

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](37, "input", 16);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵlistener"]("ngModelChange", function CustomActionComponent_Template_input_ngModelChange_37_listener($event) {
              return ctx.pasteData = $event;
            });

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](38, "button", 17);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵlistener"]("click", function CustomActionComponent_Template_button_click_38_listener() {
              return ctx.importData();
            });

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtext"](39, "\u5BFC\u5165");

            _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"](40, CustomActionComponent_div_40_Template, 5, 1, "div", 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__["ɵɵtextInterpolate1"](" ", ctx.btnName, " ");

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](1);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("nzVisible", ctx.panelVisible)("nzTitle", ctx.btnName);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](5);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("ngIf", ctx.item.type == "pic");

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](1);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("ngIf", ctx.item.type == "text");

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](1);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("ngIf", ctx.item.type == "anima");

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](8);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("ngForOf", ctx.item.changeOption);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](7);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("ngModel", ctx.item.changeTime);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](4);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("ngForOf", ctx.item.changeOption);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](7);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("ngModel", ctx.pasteData);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](1);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("disabled", ctx.pasteData == "");

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](2);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("ngIf", ctx.hasAudio);
          }
        },
        directives: [ng_zorro_antd_button__WEBPACK_IMPORTED_MODULE_2__["NzButtonComponent"], ng_zorro_antd_icon__WEBPACK_IMPORTED_MODULE_3__["NzIconDirective"], ng_zorro_antd_modal__WEBPACK_IMPORTED_MODULE_4__["NzModalComponent"], _angular_common__WEBPACK_IMPORTED_MODULE_5__["NgIf"], ng_zorro_antd_divider__WEBPACK_IMPORTED_MODULE_6__["NzDividerComponent"], _angular_common__WEBPACK_IMPORTED_MODULE_5__["NgForOf"], _angular_forms__WEBPACK_IMPORTED_MODULE_7__["DefaultValueAccessor"], ng_zorro_antd_input__WEBPACK_IMPORTED_MODULE_8__["NzInputDirective"], _angular_forms__WEBPACK_IMPORTED_MODULE_7__["NgControlStatus"], _angular_forms__WEBPACK_IMPORTED_MODULE_7__["NgModel"], _upload_image_with_preview_upload_image_with_preview_component__WEBPACK_IMPORTED_MODULE_9__["UploadImageWithPreviewComponent"], _upload_dragon_bone_upload_dragon_bone_component__WEBPACK_IMPORTED_MODULE_10__["UploadDragonBoneComponent"], _audio_recorder_audio_recorder_component__WEBPACK_IMPORTED_MODULE_11__["AudioRecorderComponent"]],
        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.anima-upload-btn[_ngcontent-%COMP%] {\n  padding: 10px;\n}\n[_nghost-%COMP%]     .ant-upload {\n  display: block;\n}\n/*# sourceMappingURL=data:application/json;base64,  */"]
      });
      return CustomActionComponent;
    }();
    /***/

  },

  /***/
  "./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, HotZoneAction, DragItem, 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__, "HotZoneAction", function () {
      return HotZoneAction;
    });
    /* harmony export (binding) */


    __webpack_require__.d(__webpack_exports__, "DragItem", function () {
      return DragItem;
    });
    /* 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 _this6;

        _classCallCheck(this, MySprite);

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

      _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 _this7 = 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) {
            _this7.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 _this8;

        _classCallCheck(this, ColorSpr);

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

      _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 _this9;

        _classCallCheck(this, GrayscaleSpr);

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

      _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 _this10;

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

        _classCallCheck(this, Label);

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

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

        _this10._outlineFlag = false;

        _this10.init();

        return _this10;
      }

      _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 _this11;

        _classCallCheck(this, RichTextOld);

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

      _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 _this12;

        _classCallCheck(this, RichText);

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

        return _this12;
      }

      _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 _this13;

        _classCallCheck(this, LineRect);

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

      _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 _this14;

        _classCallCheck(this, ShapeRect);

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

      _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 _this15;

        _classCallCheck(this, Line);

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

      _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 _this16;

        _classCallCheck(this, ShapeCircle);

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

      _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 _this17;

        _classCallCheck(this, ShapeRectNew);

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

      _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 _this18;

        _classCallCheck(this, MyAnimation);

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

      _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 _this19 = this;

          var spr = new MySprite(this.ctx);
          spr.load(url).then(function (img) {
            _this19._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 _this20;

        _classCallCheck(this, HotZoneItem);

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

      _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: "setAnimaStyle",
        value: function setAnimaStyle(isAnimaStyle) {
          this.isAnimaStyle = isAnimaStyle;
          console.log('in  setAnimaStyle ');
        }
      }, {
        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();

          if (!this.isAnimaStyle) {
            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();
        }
      }, {
        key: "getLabelRect",
        value: function getLabelRect() {
          var rect = this.getBoundingBox();
          var width = rect.width / this.scaleX;
          var height = this.height * this.scaleY;
          var x = this.x - width / 2;
          var y = this.y - height / 2;
          return {
            width: width,
            height: height,
            x: x,
            y: y
          };
        }
      }]);

      return HotZoneLabel;
    }(Label);

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

      var _super18 = _createSuper(HotZoneAction);

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

        return _super18.apply(this, arguments);
      }

      return HotZoneAction;
    }(MySprite);

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

      var _super19 = _createSuper(DragItem);

      function DragItem() {
        var _this21;

        _classCallCheck(this, DragItem);

        _this21 = _super19.apply(this, arguments);
        _this21.lineDashFlag = true;
        return _this21;
      }

      _createClass(DragItem, [{
        key: "init",
        value: function init() {
          this.anchorX = 0.5;
          this.anchorY = 0.5;
          this.initCenterCircle();
        }
      }, {
        key: "setSize",
        value: function setSize(w, h) {
          this.anchorX = 0.5;
          this.anchorY = 0.5;
          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 = '#000000';
          // rect.alpha = 0.1;
          // this.addChild(rect);
        }
      }, {
        key: "initCenterCircle",
        value: function initCenterCircle() {
          var circle = new ShapeCircle(this.ctx);
          circle.setRadius(10);
          circle.fillColor = '#ffa568';
          this.addChild(circle);
          this.width = circle.width;
          this.height = circle.height;
        }
      }, {
        key: "getPosition",
        value: function getPosition() {
          return {
            x: this.x,
            y: this.y
          };
        }
      }, {
        key: "drawLine",
        value: function drawLine() {
          if (!this.item) {
            return;
          }

          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([4, 4]);
          this.ctx.lineWidth = 1;
          this.ctx.strokeStyle = '#ffa568';
          this.ctx.beginPath();
          this.ctx.moveTo(x + w / 2, y + h / 2);
          this.ctx.lineTo(this.item.x, this.item.y); // this.ctx.fill();

          this.ctx.stroke();
          this.ctx.restore();
        }
      }, {
        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([4, 4]);
          this.ctx.lineWidth = 2;
          this.ctx.strokeStyle = '#ffa568'; // 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(DragItem.prototype), "draw", this).call(this);

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

      return DragItem;
    }(MySprite);

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

      var _super20 = _createSuper(EditorItem);

      function EditorItem() {
        var _this22;

        _classCallCheck(this, EditorItem);

        _this22 = _super20.apply(this, arguments);
        _this22.lineDashFlag = false;
        return _this22;
      }

      _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.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: "refreshLabelScale",
        value: function refreshLabelScale() {}
      }, {
        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(EditorItem.prototype), "draw", this).call(this);

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

      return EditorItem;
    }(MySprite);
    /***/

  },

  /***/
  "./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__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(
    /*! ng-zorro-antd */
    "./node_modules/ng-zorro-antd/__ivy_ngcc__/fesm2015/ng-zorro-antd.js");
    /* harmony import */


    var ng_zorro_antd_grid__WEBPACK_IMPORTED_MODULE_7__ = __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_8__ = __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_9__ = __webpack_require__(
    /*! @angular/common */
    "./node_modules/@angular/common/__ivy_ngcc__/fesm2015/common.js");
    /* harmony import */


    var ng_zorro_antd_button__WEBPACK_IMPORTED_MODULE_10__ = __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_11__ = __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_12__ = __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_modal__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(
    /*! ng-zorro-antd/modal */
    "./node_modules/ng-zorro-antd/__ivy_ngcc__/fesm2015/ng-zorro-antd-modal.js");
    /* harmony import */


    var ng_zorro_antd_upload__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(
    /*! ng-zorro-antd/upload */
    "./node_modules/ng-zorro-antd/__ivy_ngcc__/fesm2015/ng-zorro-antd-upload.js");
    /* harmony import */


    var ng_zorro_antd_radio__WEBPACK_IMPORTED_MODULE_15__ = __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_16__ = __webpack_require__(
    /*! @angular/forms */
    "./node_modules/@angular/forms/__ivy_ngcc__/fesm2015/forms.js");
    /* harmony import */


    var ng_zorro_antd_input__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(
    /*! ng-zorro-antd/input */
    "./node_modules/ng-zorro-antd/__ivy_ngcc__/fesm2015/ng-zorro-antd-input.js");
    /* harmony import */


    var _audio_recorder_audio_recorder_component__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(
    /*! ../audio-recorder/audio-recorder.component */
    "./src/app/common/audio-recorder/audio-recorder.component.ts");
    /* harmony import */


    var _custom_action_custom_action_component__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(
    /*! ../custom-action/custom-action.component */
    "./src/app/common/custom-action/custom-action.component.ts");
    /* harmony import */


    var ng_zorro_antd_checkbox__WEBPACK_IMPORTED_MODULE_20__ = __webpack_require__(
    /*! ng-zorro-antd/checkbox */
    "./node_modules/ng-zorro-antd/__ivy_ngcc__/fesm2015/ng-zorro-antd-checkbox.js");

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

    function CustomHotZoneComponent_div_13_div_8_div_2_Template(rf, ctx) {
      if (rf & 1) {
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](0, "div", 37);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](1, "label", 38);

        _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 group_r41 = ctx.$implicit;
        var gIdx_r42 = ctx.index;

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](1);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵpropertyInterpolate"]("nzValue", gIdx_r42);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](1);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtextInterpolate"](group_r41.name);
      }
    }

    function CustomHotZoneComponent_div_13_div_8_Template(rf, ctx) {
      if (rf & 1) {
        var _r44 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵgetCurrentView"]();

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](0, "div");

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](1, "nz-radio-group", 35);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵlistener"]("ngModelChange", function CustomHotZoneComponent_div_13_div_8_Template_nz_radio_group_ngModelChange_1_listener($event) {
          _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵrestoreView"](_r44);

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

          var ctx_r43 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵnextContext"]();

          return ctx_r43.customRadioChange($event, it_r36);
        });

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtemplate"](2, CustomHotZoneComponent_div_13_div_8_div_2_Template, 3, 2, "div", 36);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
      }

      if (rf & 2) {
        var it_r36 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵnextContext"]().$implicit;

        var ctx_r38 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵnextContext"]();

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](1);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("ngModel", it_r36.gIdx);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](1);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("ngForOf", ctx_r38.customTypeGroupArr);
      }
    }

    function CustomHotZoneComponent_div_13_div_9_div_1_Template(rf, ctx) {
      if (rf & 1) {
        var _r54 = _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_9_div_1_Template_app_upload_image_with_preview_imageUploaded_1_listener($event) {
          _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵrestoreView"](_r54);

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

          var ctx_r53 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵnextContext"]();

          return ctx_r53.onItemImgUploadSuccess($event, it_r36);
        });

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
      }

      if (rf & 2) {
        var it_r36 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵnextContext"](2).$implicit;

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](1);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("picUrl", it_r36 == null ? null : it_r36.pic_url);
      }
    }

    function CustomHotZoneComponent_div_13_div_9_div_2_Template(rf, ctx) {
      if (rf & 1) {
        var _r59 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵgetCurrentView"]();

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](0, "div", 42);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](1, "input", 43);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵlistener"]("ngModelChange", function CustomHotZoneComponent_div_13_div_9_div_2_Template_input_ngModelChange_1_listener($event) {
          _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵrestoreView"](_r59);

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

          return it_r36.text = $event;
        })("blur", function CustomHotZoneComponent_div_13_div_9_div_2_Template_input_blur_1_listener() {
          _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵrestoreView"](_r59);

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

          var ctx_r60 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵnextContext"]();

          return ctx_r60.saveText(it_r36);
        });

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
      }

      if (rf & 2) {
        var it_r36 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵnextContext"](2).$implicit;

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](1);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("ngModel", it_r36.text);
      }
    }

    function CustomHotZoneComponent_div_13_div_9_div_3_Template(rf, ctx) {
      if (rf & 1) {
        var _r65 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵgetCurrentView"]();

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](0, "div", 44);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](1, "button", 45);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵlistener"]("click", function CustomHotZoneComponent_div_13_div_9_div_3_Template_button_click_1_listener() {
          _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵrestoreView"](_r65);

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

          var ctx_r63 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵnextContext"]();

          return ctx_r63.setAnimaBtnClick(i_r37);
        });

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelement"](2, "i", 46);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtext"](3, " \u914D\u7F6E\u9F99\u9AA8\u52A8\u753B ");

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
      }
    }

    function CustomHotZoneComponent_div_13_div_9_div_4_Template(rf, ctx) {
      if (rf & 1) {
        var _r68 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵgetCurrentView"]();

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](0, "div", 44);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](1, "button", 45);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵlistener"]("click", function CustomHotZoneComponent_div_13_div_9_div_4_Template_button_click_1_listener() {
          _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵrestoreView"](_r68);

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

          var ctx_r66 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵnextContext"]();

          return ctx_r66.setAnimaSmallBtnClick(i_r37);
        });

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelement"](2, "i", 46);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtext"](3, " \u914D\u7F6E\u9F99\u9AA8\u52A8\u753B(\u5C0F) ");

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
      }
    }

    function CustomHotZoneComponent_div_13_div_9_div_5_Template(rf, ctx) {
      if (rf & 1) {
        var _r70 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵgetCurrentView"]();

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](0, "div", 47);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](1, "app-audio-recorder", 48);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵlistener"]("audioUploaded", function CustomHotZoneComponent_div_13_div_9_div_5_Template_app_audio_recorder_audioUploaded_1_listener($event) {
          _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵrestoreView"](_r70);

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

          var ctx_r69 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵnextContext"]();

          return ctx_r69.onItemAudioUploadSuccess($event, it_r36);
        });

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
      }

      if (rf & 2) {
        var it_r36 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵnextContext"](2).$implicit;

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](1);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("audioUrl", it_r36.audio_url);
      }
    }

    var _c2 = function _c2() {
      return {};
    };

    function CustomHotZoneComponent_div_13_div_9_div_6_Template(rf, ctx) {
      if (rf & 1) {
        var _r74 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵgetCurrentView"]();

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](0, "div", 47);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](1, "app-custom-action", 49);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵlistener"]("save", function CustomHotZoneComponent_div_13_div_9_div_6_Template_app_custom_action_save_1_listener($event) {
          _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵrestoreView"](_r74);

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

          var ctx_r73 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵnextContext"]();

          return ctx_r73.onSaveCustomAction($event, it_r36);
        });

        _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 it_r36 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵnextContext"](2).$implicit;

        var ctx_r52 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵnextContext"]();

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](1);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("item", it_r36 ? it_r36["actionData_" + it_r36.gIdx] : _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵpureFunction0"](3, _c2))("type", ctx_r52.customTypeGroupArr[it_r36.gIdx].action.type)("option", ctx_r52.customTypeGroupArr[it_r36.gIdx].action.option);
      }
    }

    function CustomHotZoneComponent_div_13_div_9_Template(rf, ctx) {
      if (rf & 1) {
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](0, "div");

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtemplate"](1, CustomHotZoneComponent_div_13_div_9_div_1_Template, 2, 1, "div", 34);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtemplate"](2, CustomHotZoneComponent_div_13_div_9_div_2_Template, 2, 1, "div", 39);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtemplate"](3, CustomHotZoneComponent_div_13_div_9_div_3_Template, 4, 0, "div", 40);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtemplate"](4, CustomHotZoneComponent_div_13_div_9_div_4_Template, 4, 0, "div", 40);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtemplate"](5, CustomHotZoneComponent_div_13_div_9_div_5_Template, 2, 1, "div", 41);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtemplate"](6, CustomHotZoneComponent_div_13_div_9_div_6_Template, 3, 4, "div", 41);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
      }

      if (rf & 2) {
        var it_r36 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵnextContext"]().$implicit;

        var ctx_r39 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵnextContext"]();

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](1);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("ngIf", ctx_r39.customTypeGroupArr[it_r36.gIdx].pic);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](1);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("ngIf", ctx_r39.customTypeGroupArr[it_r36.gIdx].text);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](1);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("ngIf", ctx_r39.customTypeGroupArr[it_r36.gIdx].anima);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](1);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("ngIf", ctx_r39.customTypeGroupArr[it_r36.gIdx].animaSmall);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](1);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("ngIf", ctx_r39.customTypeGroupArr[it_r36.gIdx].audio);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](1);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("ngIf", ctx_r39.customTypeGroupArr[it_r36.gIdx] == null ? null : ctx_r39.customTypeGroupArr[it_r36.gIdx].action);
      }
    }

    function CustomHotZoneComponent_div_13_Template(rf, ctx) {
      if (rf & 1) {
        var _r79 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵgetCurrentView"]();

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](0, "div", 28);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](1, "div", 29);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](2, "span", 30);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtext"](3);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](4, "button", 31);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵlistener"]("click", function CustomHotZoneComponent_div_13_Template_button_click_4_listener() {
          _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵrestoreView"](_r79);

          var i_r37 = ctx.index;

          var ctx_r78 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵnextContext"]();

          return ctx_r78.deleteBtnClick(i_r37);
        });

        _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", 32);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](7, "div", 33);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtemplate"](8, CustomHotZoneComponent_div_13_div_8_Template, 3, 2, "div", 34);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtemplate"](9, CustomHotZoneComponent_div_13_div_9_Template, 7, 6, "div", 34);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
      }

      if (rf & 2) {
        var it_r36 = ctx.$implicit;
        var i_r37 = ctx.index;

        var ctx_r27 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵnextContext"]();

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](3);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtextInterpolate1"](" item-", i_r37 + 1, " ");

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](5);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("ngIf", ctx_r27.customTypeGroupArr);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](1);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("ngIf", ctx_r27.customTypeGroupArr && ctx_r27.customTypeGroupArr[it_r36.gIdx]);
      }
    }

    function CustomHotZoneComponent_div_24_Template(rf, ctx) {
      if (rf & 1) {
        var _r81 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵgetCurrentView"]();

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](0, "div", 50);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](1, "label", 51);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵlistener"]("ngModelChange", function CustomHotZoneComponent_div_24_Template_label_ngModelChange_1_listener($event) {
          _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵrestoreView"](_r81);

          var ctx_r80 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵnextContext"]();

          return ctx_r80.bgItem.isShowDebugLine = $event;
        });

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtext"](2, "\u663E\u793A\u8F85\u52A9\u6846");

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](3, "button", 52);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵlistener"]("click", function CustomHotZoneComponent_div_24_Template_button_click_3_listener() {
          _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵrestoreView"](_r81);

          var ctx_r82 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵnextContext"]();

          return ctx_r82.copyHotZoneData();
        });

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtext"](4, " \u590D\u5236\u57FA\u7840\u6570\u636E ");

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](5, "div", 53);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](6, "span");

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtext"](7, "\u7C98\u8D34\u6570\u636E: ");

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](8, "input", 54);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵlistener"]("ngModelChange", function CustomHotZoneComponent_div_24_Template_input_ngModelChange_8_listener($event) {
          _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵrestoreView"](_r81);

          var ctx_r83 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵnextContext"]();

          return ctx_r83.pasteData = $event;
        });

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](9, "button", 55);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵlistener"]("click", function CustomHotZoneComponent_div_24_Template_button_click_9_listener() {
          _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵrestoreView"](_r81);

          var ctx_r84 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵnextContext"]();

          return ctx_r84.importData();
        });

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtext"](10, "\u5BFC\u5165");

        _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 ctx_r28 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵnextContext"]();

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](1);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("ngModel", ctx_r28.bgItem.isShowDebugLine);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](7);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("ngModel", ctx_r28.pasteData);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](1);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("disabled", ctx_r28.pasteData == "");
      }
    }

    function CustomHotZoneComponent_i_36_Template(rf, ctx) {
      if (rf & 1) {
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelement"](0, "i", 56);
      }

      if (rf & 2) {
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("nzType", "loading");
      }
    }

    function CustomHotZoneComponent_span_37_Template(rf, ctx) {
      if (rf & 1) {
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](0, "span", 57);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](1, "u");

        _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 ctx_r30 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵnextContext"]();

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](2);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtextInterpolate1"](" ", ctx_r30.skeJsonData["name"], " ");
      }
    }

    function CustomHotZoneComponent_i_46_Template(rf, ctx) {
      if (rf & 1) {
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelement"](0, "i", 56);
      }

      if (rf & 2) {
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("nzType", "loading");
      }
    }

    function CustomHotZoneComponent_span_47_Template(rf, ctx) {
      if (rf & 1) {
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](0, "span", 57);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](1, "u");

        _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 ctx_r32 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵnextContext"]();

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](2);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtextInterpolate1"](" ", ctx_r32.texJsonData["name"], " ");
      }
    }

    function CustomHotZoneComponent_i_56_Template(rf, ctx) {
      if (rf & 1) {
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelement"](0, "i", 56);
      }

      if (rf & 2) {
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("nzType", "loading");
      }
    }

    function CustomHotZoneComponent_span_57_Template(rf, ctx) {
      if (rf & 1) {
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](0, "span", 57);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](1, "u");

        _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 ctx_r34 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵnextContext"]();

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](2);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtextInterpolate1"](" ", ctx_r34.texPngData["name"], " ");
      }
    }

    function CustomHotZoneComponent_div_58_Template(rf, ctx) {
      if (rf & 1) {
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](0, "div", 19);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtext"](1);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
      }

      if (rf & 2) {
        var ctx_r35 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵnextContext"]();

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](1);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtextInterpolate1"](" \u63D0\u793A\uFF1A\u9700\u5305\u542B\u4EE5\u4E0B\u52A8\u753B: ", ctx_r35.customTypeGroupArr[ctx_r35.curDragonBoneGIdx].animaNames.toString(), " ");
      }
    }

    var CustomHotZoneComponent =
    /*@__PURE__*/
    function () {
      var CustomHotZoneComponent =
      /*#__PURE__*/
      function () {
        function CustomHotZoneComponent(nzMessageService, appRef, changeDetectorRef) {
          var _this23 = this;

          _classCallCheck(this, CustomHotZoneComponent);

          this.nzMessageService = nzMessageService;
          this.appRef = appRef;
          this.changeDetectorRef = changeDetectorRef;
          this.hotZoneItemArr = null;
          this.hotZoneArr = null;
          this.isHasRect = true;
          this.isHasPic = true;
          this.isHasText = true;
          this.isHasAudio = true;
          this.isHasAnima = false;
          this.isCopyData = false;
          this.hotZoneFontObj = {
            size: 50,
            name: 'ahronbd-1',
            color: '#8f3758'
          };
          this.defaultItemType = 'text';
          this.hotZoneImgSize = 0;
          this.save = new _angular_core__WEBPACK_IMPORTED_MODULE_0__["EventEmitter"]();
          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.animaPanelVisible = false;
          this.skeJsonData = {};
          this.texJsonData = {};
          this.texPngData = {};
          this.animaName = '';
          this.pasteData = '';
          this.isSkeJsonLoading = false;
          this.isTexJsonLoading = false;
          this.isTexPngLoading = false;
          this.isAnimaSmall = false;
          this._bgItem = null;
          this.uploadUrl = window.courseware.uploadUrl();
          this.uploadData = window.courseware.uploadData();

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

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

            this.update();
            this.refresh();
          }
        }, {
          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);
            this.refresh();
          }
        }, {
          key: "onItemAudioUploadSuccess",
          value: function onItemAudioUploadSuccess(e, item) {
            item.audio_url = e.url;
            this.refresh();
          }
        }, {
          key: "refreshBackground",
          value: function refreshBackground() {
            var _this24 = 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);
            }

            if (!this.bgItem.url) {
              this.bgItem.url = 'http://teach.cdn.ireadabc.com/8ebb1858564340ea0936b83e3280ad7d.jpg';
            }

            var bg = this.bg; // if (this.bgItem.url) {

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

              if (callBack) {
                callBack();
              }

              _this24.refresh();
            }); // }
          }
        }, {
          key: "addBtnClick",
          value: function addBtnClick() {
            // this.imgArr.push({});
            // this.hotZoneArr.push({});
            var item = this.getHotZoneItem();
            this.hotZoneArr.push(item);

            if (this.customTypeGroupArr) {
              this.refreshCustomItem(item);
            } else {
              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);
            Object(_Unit__WEBPACK_IMPORTED_MODULE_3__["removeItemFromArr"])(this.renderArr, item.drag);
            this.refreshHotZoneId();
          }
        }, {
          key: "onImgUploadSuccessByImg",
          value: function onImgUploadSuccessByImg(e, img) {
            img.pic_url = e.url;
            this.refreshImage(img);
            this.refresh();
          }
        }, {
          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);
              }
            }

            this.refresh();
          }
        }, {
          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.getDefaultItemType();
            item.gIdx = '0';
            item['id'] = new Date().getTime().toString();
            item['data'] = saveData;
            console.log('item.x: ', item.x);

            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.gIdx = saveData.gIdx;
              item['id'] = saveData.id;
              item['skeJsonData'] = saveData.skeJsonData;
              item['texJsonData'] = saveData.texJsonData;
              item['texPngData'] = saveData.texPngData;
              item['actionData_' + item.gIdx] = saveData['actionData_' + item.gIdx];
            }

            console.log('item.x:~~ ', item.x);
            item.showLineDash(); // const pic = new HotZoneImg(this.ctx);

            this.setItemPic(item, saveData);
            this.setItemLabel(item, saveData);
            this.setItemAnima(item, saveData);
            this.setItemDrag(item, saveData);
            return item;
          }
        }, {
          key: "setItemPic",
          value: function setItemPic(item, saveData) {
            console.log('in setItemPic ', saveData);
            var pic = new _Unit__WEBPACK_IMPORTED_MODULE_3__["EditorItem"](this.ctx);
            pic.visible = false;
            item['pic'] = pic;

            if (saveData) {
              var picUrl = saveData.pic_url;
              var actionData = saveData['actionData_' + item.gIdx];

              if (actionData && actionData.type == 'pic') {
                picUrl = actionData.pic_url;
              }

              console.log('saveData: ', saveData);
              console.log('picUrl: ', picUrl);

              if (picUrl) {
                this.loadHotZonePic(pic, picUrl, saveData.imgScale);
              }
            }

            pic.x = item.x;
            pic.y = item.y;
            this.renderArr.push(pic);
          }
        }, {
          key: "setItemDrag",
          value: function setItemDrag(item, saveData) {
            console.log('in setItemDrag ', saveData);
            var dragItem = new _Unit__WEBPACK_IMPORTED_MODULE_3__["DragItem"](this.ctx);
            dragItem.init();
            dragItem.item = item;
            item['drag'] = dragItem;
            dragItem.visible = false;
            dragItem.x = item.x;
            dragItem.y = item.y;
            this.renderArr.push(dragItem);

            if (saveData) {
              if (saveData.dragDot) {
                dragItem.x = saveData.dragDot.x / saveData.mapScale * this.mapScale;
                dragItem.y = saveData.dragDot.y / saveData.mapScale * this.mapScale;
              }
            } // console.log('item.itemType: ', item.itemType);
            // let w = item.width;
            // let h = item.height;
            // if (saveData) {
            //   switch (saveData.itemType) {
            //     case 'rect':
            //       w = saveData.rect.width;
            //       h = saveData.rect.height;
            //       break;
            //     case 'pic':
            //       w = saveData.imgSizeW * saveData.imgScale;
            //       h = saveData.imgSizeH * saveData.imgScale;;
            //       break;
            //     case 'text':
            //       w = saveData.rect.width;
            //       h = saveData.rect.height;
            //       break;
            //   }
            // }
            // dragItem.setSize(w, h);

          }
        }, {
          key: "setItemAnima",
          value: function setItemAnima(item, saveData) {
            console.log('in setItemAnima ', saveData); // const pic = new EditorItem(this.ctx);
            // pic.visible = false;
            // item['pic'] = pic;
            // if (saveData) {
            //   let picUrl = saveData.pic_url;
            //   const actionData = saveData['actionData_' + item.gIdx];
            //   if (actionData && actionData.type == 'pic') {
            //     picUrl = actionData.pic_url;
            //   }
            //   console.log('saveData: ', saveData);
            //   console.log('picUrl: ', picUrl);
            //   if (picUrl) {
            //     this.loadHotZonePic(pic, picUrl, saveData.imgScale);
            //   }
            // }
            // pic.x = item.x;
            // pic.y = item.y;
            // this.renderArr.push(pic);
          }
        }, {
          key: "setItemLabel",
          value: function setItemLabel(item, saveData) {
            var textLabel = new _Unit__WEBPACK_IMPORTED_MODULE_3__["HotZoneLabel"](this.ctx);

            if (this.hotZoneFontObj) {
              textLabel.fontSize = this.hotZoneFontObj.size;
              textLabel.fontName = this.hotZoneFontObj.name;
              textLabel.fontColor = this.hotZoneFontObj.color;
            }

            textLabel.textAlign = 'center'; // textLabel.setOutline();

            item['textLabel'] = textLabel;
            textLabel.setScaleXY(this.mapScale);

            if (saveData) {
              if (saveData.text && this.hotZoneFontObj) {
                textLabel.text = saveData.text;
              }

              this.setActionFont(textLabel, saveData['actionData_' + item.gIdx]);
              textLabel.refreshSize();
            }

            textLabel.x = item.x;
            textLabel.y = item.y;
            this.renderArr.push(textLabel);
          }
        }, {
          key: "setActionFont",
          value: function setActionFont(textLabel, actionData) {
            if (actionData && actionData.type == 'text') {
              textLabel.text = actionData.text;

              for (var i = 0; i < actionData.changeOption.length; i++) {
                var op = actionData.changeOption[i];
                textLabel[op[0]] = op[1];
              }
            }
          }
        }, {
          key: "getDefaultItemType",
          value: function getDefaultItemType() {
            if (this.customTypeGroupArr) {
              var group = this.customTypeGroupArr[0];

              if (group.rect) {
                return 'rect';
              }

              if (group.pic) {
                return 'pic';
              }

              if (group.text) {
                return 'text';
              }
            } else {
              return this.defaultItemType;
            }
          }
        }, {
          key: "getPicItem",
          value: function getPicItem(img) {
            var _this25 = 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 (_this25.bg) {
                maxW = _this25.bg.width * _this25.bg.scaleX;
                maxH = _this25.bg.height * _this25.bg.scaleY;
              } else {
                maxW = _this25.canvasWidth;
                maxH = _this25.canvasHeight;
              }

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

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

              item.x = _this25.canvasWidth / 2;
              item.y = _this25.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();
              }

              item.showLineDash();
              console.log('aaa');
            });
            return item;
          }
        }, {
          key: "onAudioUploadSuccessByImg",
          value: function onAudioUploadSuccessByImg(e, img) {
            img.audio_url = e.url;
            this.refresh();
          }
        }, {
          key: "deleteItem",
          value: function deleteItem(e, i) {
            // this.imgArr.splice(i , 1);
            // this.refreshImageId();
            this.hotZoneArr.splice(i, 1);
            this.refreshHotZoneId();
            this.refresh();
          } // radioChange(e, item) {
          //   item.itemType = e;
          //   this.refreshItem(item);
          //   this.refresh();
          //   // console.log(' in radioChange e: ', e);
          // }

        }, {
          key: "customRadioChange",
          value: function customRadioChange(e, item) {
            var _this26 = this;

            console.log('in customRadioChange', e);
            item.gIdx = -1;
            setTimeout(function () {
              item.gIdx = e;

              _this26.refreshCustomItem(item);

              _this26.refresh();
            }, 1); // const curGroup = this.customTypeGroupArr[e];
          }
        }, {
          key: "refreshCustomItem",
          value: function refreshCustomItem(item) {
            this.hideHotZoneItem(item);
            var group = this.customTypeGroupArr[item.gIdx];

            if (!group) {
              return;
            }

            if (group.text) {
              this.showItemLabel(item);
            }

            if (group.rect) {
              this.showItemRect(item, true);
            }

            if (group.pic && !group.anima) {
              this.showItemPic(item);
            }

            if (group.action) {
              if (group.action.type == 'pic') {
                this.showItemPic(item);
              }

              if (group.action.type == 'text') {
                this.showItemLabel(item);
              }

              if (group.action.type == 'anima') {
                this.showItemRect(item);
              }
            }

            item.drag.visible = group.drag;
            item.setAnimaStyle(group.animaSmall);
          }
        }, {
          key: "showItemDrag",
          value: function showItemDrag(item) {
            item.drag.visible = true; // item.dragBody.visible = true;
            // item.itemType = 'pic';
            // this.showArrowTop(item)
          }
        }, {
          key: "showItemPic",
          value: function showItemPic(item) {
            item.pic.visible = true;
            item.itemType = 'pic';
            this.showArrowTop(item);
          }
        }, {
          key: "showItemLabel",
          value: function showItemLabel(item) {
            item.textLabel.visible = true;
            item.itemType = 'text';
            this.showArrowTop(item);
          }
        }, {
          key: "showItemRect",
          value: function showItemRect(item) {
            var isShowArrowTop = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
            item.visible = true;
            item.itemType = 'rect';
            this.showArrowTop(item, isShowArrowTop);
          }
        }, {
          key: "showArrowTop",
          value: function showArrowTop(item) {
            var isShowArrowTop = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;

            if (isShowArrowTop) {
              item.arrowTop.visible = true;
              item.arrowRight.visible = true;
            } else {
              item.arrowTop.visible = false;
              item.arrowRight.visible = false;
            }
          }
        }, {
          key: "hideHotZoneItem",
          value: function hideHotZoneItem(item) {
            item.visible = false;
            item.pic.visible = false;
            item.textLabel.visible = false;
          }
        }, {
          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:
                this.setNoneState(item);
            }
          }
        }, {
          key: "init",
          value: function init() {
            console.log('init');
            this.initData();
            this.initCtx();
            this.initItem();
          }
        }, {
          key: "initItem",
          value: function initItem() {
            var _this27 = this;

            this.changeDetectorRef.markForCheck();
            this.changeDetectorRef.detectChanges();

            if (!this.bgItem) {
              this.bgItem = {};
            } else {
              this.refreshBackground(function () {
                if (!_this27.hotZoneItemArr) {
                  _this27.hotZoneItemArr = [];
                } else {
                  _this27.initHotZoneArr();
                }
              });
            }

            this.refresh();
          }
        }, {
          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();
            console.log('this.hotZoneItemArr: ', this.hotZoneItemArr);

            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;

              if (this.customTypeGroupArr) {
                this.refreshCustomItem(item);
              } else {
                this.refreshItem(item);
              }

              console.log('1 item: ', item);
              this.hotZoneArr.push(item);
            }

            this.refreshHotZoneId(); // 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 = this.hotZoneArr.length - 1; i >= 0; i--) {
              var item = this.hotZoneArr[i];

              if (item && item.drag && item.drag.visible) {
                if (this.checkClickTarget(item.drag)) {
                  this.clickedDragPoint(item.drag);
                  return;
                }
              }
            }

            for (var _i2 = this.hotZoneArr.length - 1; _i2 >= 0; _i2--) {
              var _item = this.hotZoneArr[_i2];
              console.log('mapDown item: ', _item);
              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 (target && 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 = false;
          }
        }, {
          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 _this28 = this;

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

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

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

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

                _this28.mapUp(event);
              });

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

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

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

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

                _this28.mapUp(event);
              });

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

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

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

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

                _this28.canvasLeft = rect.left;
                _this28.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) {
            if (!target || !target.visible) {
              return;
            }

            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 sendData = this.getSendData();
            this.save.emit(sendData);
          }
        }, {
          key: "getSendData",
          value: function getSendData() {
            var bgItem = this.bgItem;

            if (this.bg) {
              var rect = this.bg.getBoundingBox();
              bgItem['rect'] = rect;
              rect.x = Math.round(rect.x * 100) / 100;
              rect.y = Math.round(rect.y * 100) / 100;
              rect.width = Math.round(rect.width * 100) / 100;
              rect.height = Math.round(rect.height * 100) / 100;
            } 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 = {
                id: hotZoneArr[i].id,
                index: hotZoneArr[i].index,
                pic_url: hotZoneArr[i].pic_url,
                text: hotZoneArr[i].text,
                audio_url: hotZoneArr[i].audio_url,
                itemType: hotZoneArr[i].itemType,
                fontScale: hotZoneArr[i].textLabel ? hotZoneArr[i].textLabel.scaleX : 1,
                imgScale: hotZoneArr[i].pic ? hotZoneArr[i].pic.scaleX : 1,
                imgSizeW: hotZoneArr[i].pic ? hotZoneArr[i].pic.width : 0,
                imgSizeH: hotZoneArr[i].pic ? hotZoneArr[i].pic.height : 0,
                mapScale: this.mapScale,
                skeJsonData: hotZoneArr[i].skeJsonData,
                texJsonData: hotZoneArr[i].texJsonData,
                texPngData: hotZoneArr[i].texPngData,
                dragDot: hotZoneArr[i].drag.getPosition(),
                gIdx: hotZoneArr[i].gIdx
              };
              hotZoneItem['actionData_' + hotZoneItem.gIdx] = hotZoneArr[i]['actionData_' + hotZoneArr[i].gIdx];

              if (this.hotZoneFontObj) {
                hotZoneItem['fontSize'] = this.hotZoneFontObj.size;
                hotZoneItem['fontName'] = this.hotZoneFontObj.name;
                hotZoneItem['ontColor'] = this.hotZoneFontObj.color;
              }

              if (hotZoneArr[i].itemType == 'pic') {
                hotZoneItem['rect'] = hotZoneArr[i].pic.getBoundingBox();
              } else if (hotZoneArr[i].itemType == 'text') {
                hotZoneArr[i].textLabel.refreshSize();
                hotZoneItem['rect'] = hotZoneArr[i].textLabel.getLabelRect(); // hotZoneItem['rect'].width =  hotZoneItem['rect'].width / hotZoneArr[i].textLabel.scaleX;
                // hotZoneItem['rect'].height = hotZoneArr[i].textLabel.height * hotZoneArr[i].textLabel.scaleY;
              } else {
                hotZoneItem['rect'] = hotZoneArr[i].getBoundingBox();
              } // 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);
            return {
              bgItem: bgItem,
              hotZoneItemArr: hotZoneItemArr
            };
          }
        }, {
          key: "saveText",
          value: function saveText(item) {
            if (item.itemType == 'text') {
              item.textLabel.text = item.text;
            }
          }
        }, {
          key: "onSaveCustomAction",
          value: function onSaveCustomAction(e, item) {
            var data = e;
            item['actionData_' + item.gIdx] = data;

            if (data.type == 'pic') {
              var picUrl = data.pic_url;

              if (picUrl) {
                this.loadHotZonePic(item.pic, picUrl);
              }
            }

            if (data.type == 'text') {
              this.setActionFont(item.textLabel, data);
              item.textLabel.refreshSize();
            } // if (data.type == 'anima') {
            //   this.setActionAnima(item.anima, data);
            // }
            // this.loadHotZonePic(item.pic, e.url);


            this.refresh();
          }
        }, {
          key: "setActionAnima",
          value: function setActionAnima() {}
        }, {
          key: "setAnimaBtnClick",
          value: function setAnimaBtnClick(index) {
            console.log('aaaa');
            this.isAnimaSmall = false;
            this.setCurDragonBone(index); // this.curDragonBoneIndex = index;
            // this.curDragonBoneGIdx = Number(this.hotZoneArr[index].gIdx);
            // const {skeJsonData, texJsonData, texPngData} = this.hotZoneArr[index];
            // this.skeJsonData = skeJsonData || {};
            // this.texJsonData = texJsonData || {};
            // this.texPngData = texPngData || {};
            // this.animaPanelVisible = true;
            // this.refresh();
          }
        }, {
          key: "setAnimaSmallBtnClick",
          value: function setAnimaSmallBtnClick(index) {
            console.log('bbb');
            this.isAnimaSmall = true;
            this.setCurDragonBone(index);
          }
        }, {
          key: "setCurDragonBone",
          value: function setCurDragonBone(index) {
            this.curDragonBoneIndex = index;
            this.curDragonBoneGIdx = Number(this.hotZoneArr[index].gIdx);
            var _this$hotZoneArr$inde = this.hotZoneArr[index],
                skeJsonData = _this$hotZoneArr$inde.skeJsonData,
                texJsonData = _this$hotZoneArr$inde.texJsonData,
                texPngData = _this$hotZoneArr$inde.texPngData;
            this.skeJsonData = skeJsonData || {};
            this.texJsonData = texJsonData || {};
            this.texPngData = texPngData || {};
            this.animaPanelVisible = true;
            this.refresh();
          }
        }, {
          key: "setItemSizeByAnima",
          value: function setItemSizeByAnima(jsonData, item) {
            console.log('json: ', jsonData);
            var request = new XMLHttpRequest(); //通过url获取文件，第二个选项是文件所在的具体地址

            request.open('GET', jsonData.url, true);
            request.send(null);

            request.onreadystatechange = function () {
              if (request.readyState === 4 && request.status === 200) {
                var type = request.getResponseHeader('Content-Type');

                if (type.indexOf("text") !== 1) {
                  //返回一个文件内容的对象
                  var data = JSON.parse(request.responseText);
                  console.log('request.responseText;', data);
                  var animaSize = data.armature[0].canvas;
                  item.width = animaSize.width;
                  item.height = animaSize.height; // return request.responseText;
                }
              }
            };
          }
        }, {
          key: "animaPanelCancel",
          value: function animaPanelCancel() {
            this.animaPanelVisible = false;
            this.refresh();
          }
        }, {
          key: "animaPanelOk",
          value: function animaPanelOk() {
            this.setItemDragonBoneData(this.hotZoneArr[this.curDragonBoneIndex]);
            console.log('this.hotZoneArr: ', this.hotZoneArr);
            this.animaPanelVisible = false;

            if (this.isAnimaSmall) {
              this.setItemSizeByAnima(this.skeJsonData, this.hotZoneArr[this.curDragonBoneIndex]);
            }

            this.refresh();
          }
        }, {
          key: "setItemDragonBoneData",
          value: function setItemDragonBoneData(item) {
            item['skeJsonData'] = this.skeJsonData;
            item['texJsonData'] = this.texJsonData;
            item['texPngData'] = this.texPngData;
          }
        }, {
          key: "skeJsonHandleChange",
          value: function skeJsonHandleChange(e) {
            console.log('e: ', e);

            switch (e.type) {
              case 'start':
                this.isSkeJsonLoading = true;
                break;

              case 'success':
                this.skeJsonData['url'] = e.file.response.url;
                this.skeJsonData['name'] = e.file.name;
                this.nzMessageService.success('上传成功');
                this.isSkeJsonLoading = false;
                break;

              case 'progress':
                break;
            }
          }
        }, {
          key: "texJsonHandleChange",
          value: function texJsonHandleChange(e) {
            console.log('e: ', e);

            switch (e.type) {
              case 'start':
                this.isTexJsonLoading = true;
                break;

              case 'success':
                this.texJsonData['url'] = e.file.response.url;
                this.texJsonData['name'] = e.file.name;
                this.nzMessageService.success('上传成功');
                this.isTexJsonLoading = false;
                break;

              case 'progress':
                break;
            }
          }
        }, {
          key: "texPngHandleChange",
          value: function texPngHandleChange(e) {
            console.log('e: ', e);

            switch (e.type) {
              case 'start':
                this.isTexPngLoading = true;
                break;

              case 'success':
                this.texPngData['url'] = e.file.response.url;
                this.texPngData['name'] = e.file.name;
                this.nzMessageService.success('上传成功');
                this.isTexPngLoading = false;
                break;

              case 'progress':
                break;
            }
          }
        }, {
          key: "copyHotZoneData",
          value: function copyHotZoneData() {
            var _this$getSendData = this.getSendData(),
                bgItem = _this$getSendData.bgItem,
                hotZoneItemArr = _this$getSendData.hotZoneItemArr; // const hotZoneItemArrNew = [];
            // const tmpArr = JSON.parse(JSON.stringify(hotZoneItemArr));
            // tmpArr.forEach((item) => {
            //   if (item.gIdx === '0') {
            //     hotZoneItemArr.push(item);
            //   }
            // })


            var jsonData = {
              bgItem: bgItem,
              hotZoneItemArr: hotZoneItemArr,
              isHasRect: this.isHasRect,
              isHasPic: this.isHasPic,
              isHasText: this.isHasText,
              isHasAudio: this.isHasAudio,
              isHasAnima: this.isHasAnima,
              hotZoneFontObj: this.hotZoneFontObj,
              defaultItemType: this.defaultItemType,
              hotZoneImgSize: this.hotZoneImgSize
            };
            var oInput = document.createElement('input');
            oInput.value = JSON.stringify(jsonData);
            document.body.appendChild(oInput);
            oInput.select(); // 选择对象

            document.execCommand('Copy'); // 执行浏览器复制命令

            document.body.removeChild(oInput);
            this.nzMessageService.success('复制成功'); // alert('复制成功');
          }
        }, {
          key: "importData",
          value: function importData() {
            if (!this.pasteData) {
              return;
            }

            try {
              var data = JSON.parse(this.pasteData);
              console.log('data:', data);
              var bgItem = data.bgItem,
                  hotZoneItemArr = data.hotZoneItemArr,
                  isHasRect = data.isHasRect,
                  isHasPic = data.isHasPic,
                  isHasText = data.isHasText,
                  isHasAudio = data.isHasAudio,
                  isHasAnima = data.isHasAnima,
                  hotZoneFontObj = data.hotZoneFontObj,
                  defaultItemType = data.defaultItemType,
                  hotZoneImgSize = data.hotZoneImgSize;
              this.hotZoneItemArr = hotZoneItemArr;
              this.isHasRect = isHasRect;
              this.isHasPic = isHasPic;
              this.isHasText = isHasText;
              this.isHasAudio = isHasAudio;
              this.isHasAnima = isHasAnima;
              this.hotZoneFontObj = hotZoneFontObj;
              this.defaultItemType = defaultItemType;
              this.hotZoneImgSize = hotZoneImgSize;
              this.bgItem = bgItem;
              this.pasteData = '';
            } catch (e) {
              console.log('err: ', e);
              this.nzMessageService.error('导入失败');
            }
          }
        }, {
          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;
              }

              if (x != undefined && y != undefined) {
                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: "setNoneState",
          value: function setNoneState(item) {
            item.visible = false;
            item.pic.visible = false;
            item.textLabel.visible = false;
          }
        }, {
          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)) {
              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);
              }

              this.curItem = item;
            }
          }
        }, {
          key: "clickedHotZoneText",
          value: function clickedHotZoneText(item) {
            if (this.checkClickTarget(item)) {
              this.curItem = item;
            }
          }
        }, {
          key: "clickedDragPoint",
          value: function clickedDragPoint(item) {
            this.curItem = item;
          }
        }, {
          key: "loadHotZonePic",
          value: function loadHotZonePic(pic, url) {
            var _this29 = this;

            var scale = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
            var baseLen;

            if (this.hotZoneImgSize) {
              baseLen = this.hotZoneImgSize * this.mapScale;
            }

            pic.load(url).then(function () {
              if (!scale) {
                if (baseLen) {
                  scale = Object(_play_Unit__WEBPACK_IMPORTED_MODULE_5__["getMinScale"])(pic, baseLen);
                } else {
                  scale = _this29.bg.scaleX;
                }
              }

              pic.setScaleXY(scale);
            });
          }
        }, {
          key: "closeAfterPanel",
          value: function closeAfterPanel() {
            this.refresh();
          }
          /**
           * 刷新 渲染页面
           */

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

            setTimeout(function () {
              _this30.appRef.tick();
            }, 1);
          }
        }, {
          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)(_angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵdirectiveInject"](ng_zorro_antd__WEBPACK_IMPORTED_MODULE_6__["NzMessageService"]), _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"]));
      };

      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: {
          hotZoneItemArr: "hotZoneItemArr",
          hotZoneArr: "hotZoneArr",
          isHasRect: "isHasRect",
          isHasPic: "isHasPic",
          isHasText: "isHasText",
          isHasAudio: "isHasAudio",
          isHasAnima: "isHasAnima",
          customTypeGroupArr: "customTypeGroupArr",
          isCopyData: "isCopyData",
          defaultItemType: "defaultItemType",
          hotZoneImgSize: "hotZoneImgSize",
          bgItem: "bgItem"
        },
        outputs: {
          save: "save"
        },
        features: [_angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵNgOnChangesFeature"]],
        decls: 59,
        vars: 21,
        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", 2, "margin-left", "200px", 3, "nzSize", "click"], ["nz-icon", "", "nzType", "save"], ["style", "height: 40px; display: flex; justify-items: center;", 4, "ngIf"], [2, "opacity", "0", "position", "absolute", "top", "0px", "font-family", "BRLNSR_1"], ["nzTitle", "\u914D\u7F6E\u8D44\u6E90\u6587\u4EF6", "nzOkText", "\u4FDD\u5B58", 3, "nzVisible", "nzVisibleChange", "nzAfterClose", "nzOnCancel", "nzOnOk"], [1, "anima-upload-btn"], [2, "margin-right", "10px"], ["nzAccept", "application/json", 3, "nzShowUploadList", "nzAction", "nzData", "nzChange"], ["nz-button", ""], ["nz-icon", "", "nzType", "upload"], ["style", "margin-left: 10px;", "nz-icon", "", 3, "nzType", 4, "ngIf"], ["style", "margin-left: 10px", 4, "ngIf"], ["nzAccept", "image/*", 3, "nzShowUploadList", "nzAction", "nzData", "nzChange"], ["class", "anima-upload-btn", 4, "ngIf"], ["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", "width", "100%"], [4, "ngIf"], [2, "display", "flex", "align-items", "center", "justify-content", "center", "flex-wrap", "wrap", 3, "ngModel", "ngModelChange"], ["style", "display: flex; ", 4, "ngFor", "ngForOf"], [2, "display", "flex"], ["nz-radio", "", 3, "nzValue"], ["style", "margin-top: 5px", 4, "ngIf"], ["align", "center", "style", "margin-top: 5px", 4, "ngIf"], ["style", "display: flex;align-items: center; margin-top: 5px", 4, "ngIf"], [2, "margin-top", "5px"], ["type", "text", "nz-input", "", 3, "ngModel", "ngModelChange", "blur"], ["align", "center", 2, "margin-top", "5px"], ["nz-button", "", 3, "click"], ["nz-icon", "", "nzType", "tool", "nzTheme", "outline"], [2, "display", "flex", "align-items", "center", "margin-top", "5px"], [2, "margin", "auto", 3, "audioUrl", "audioUploaded"], [2, "margin", "auto", 3, "item", "type", "option", "save"], [2, "height", "40px", "display", "flex", "justify-items", "center"], ["nz-checkbox", "", 2, "margin-left", "40px", 3, "ngModel", "ngModelChange"], ["nz-button", "", 2, "margin-left", "20px", "margin-top", "-5px", 3, "click"], [2, "margin-left", "10px", "margin-top", "-5px"], ["type", "text", "nz-input", "", 2, "width", "100px", 3, "ngModel", "ngModelChange"], ["nz-button", "", "nzType", "primary", 2, "margin-left", "5px", 3, "disabled", "click"], ["nz-icon", "", 2, "margin-left", "10px", 3, "nzType"], [2, "margin-left", "10px"]],
        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, 10, 3, "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__["ɵɵtemplate"](24, CustomHotZoneComponent_div_24_Template, 11, 3, "div", 16);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](25, "label", 17);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtext"](26, "1");

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](27, "nz-modal", 18);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵlistener"]("nzVisibleChange", function CustomHotZoneComponent_Template_nz_modal_nzVisibleChange_27_listener($event) {
              return ctx.animaPanelVisible = $event;
            })("nzAfterClose", function CustomHotZoneComponent_Template_nz_modal_nzAfterClose_27_listener() {
              return ctx.closeAfterPanel();
            })("nzOnCancel", function CustomHotZoneComponent_Template_nz_modal_nzOnCancel_27_listener() {
              return ctx.animaPanelCancel();
            })("nzOnOk", function CustomHotZoneComponent_Template_nz_modal_nzOnOk_27_listener() {
              return ctx.animaPanelOk();
            });

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](28, "div", 19);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](29, "span", 20);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtext"](30, "\u4E0A\u4F20 ske_json \u6587\u4EF6: ");

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](31, "nz-upload", 21);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵlistener"]("nzChange", function CustomHotZoneComponent_Template_nz_upload_nzChange_31_listener($event) {
              return ctx.skeJsonHandleChange($event);
            });

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](32, "button", 22);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelement"](33, "i", 23);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](34, "span");

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtext"](35, "Upload");

            _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"](36, CustomHotZoneComponent_i_36_Template, 1, 1, "i", 24);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtemplate"](37, CustomHotZoneComponent_span_37_Template, 3, 1, "span", 25);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](38, "div", 19);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](39, "span", 20);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtext"](40, "\u4E0A\u4F20 tex_json \u6587\u4EF6: ");

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](41, "nz-upload", 21);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵlistener"]("nzChange", function CustomHotZoneComponent_Template_nz_upload_nzChange_41_listener($event) {
              return ctx.texJsonHandleChange($event);
            });

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](42, "button", 22);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelement"](43, "i", 23);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](44, "span");

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtext"](45, "Upload");

            _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"](46, CustomHotZoneComponent_i_46_Template, 1, 1, "i", 24);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtemplate"](47, CustomHotZoneComponent_span_47_Template, 3, 1, "span", 25);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](48, "div", 19);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](49, "span", 20);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtext"](50, "\u4E0A\u4F20 tex_png \u6587\u4EF6: ");

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](51, "nz-upload", 26);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵlistener"]("nzChange", function CustomHotZoneComponent_Template_nz_upload_nzChange_51_listener($event) {
              return ctx.texPngHandleChange($event);
            });

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](52, "button", 22);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelement"](53, "i", 23);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](54, "span");

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtext"](55, "Upload");

            _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"](56, CustomHotZoneComponent_i_56_Template, 1, 1, "i", 24);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtemplate"](57, CustomHotZoneComponent_span_57_Template, 3, 1, "span", 25);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtemplate"](58, CustomHotZoneComponent_div_58_Template, 2, 1, "div", 27);

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

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](3);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("ngIf", ctx.isCopyData);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](3);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("nzVisible", ctx.animaPanelVisible);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](4);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("nzShowUploadList", false)("nzAction", ctx.uploadUrl)("nzData", ctx.uploadData);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](5);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("ngIf", ctx.isSkeJsonLoading);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](1);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("ngIf", ctx.skeJsonData["name"]);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](4);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("nzShowUploadList", false)("nzAction", ctx.uploadUrl)("nzData", ctx.uploadData);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](5);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("ngIf", ctx.isTexJsonLoading);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](1);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("ngIf", ctx.texJsonData["name"]);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](4);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("nzShowUploadList", false)("nzAction", ctx.uploadUrl)("nzData", ctx.uploadData);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](5);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("ngIf", ctx.isTexPngLoading);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](1);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("ngIf", ctx.texPngData["name"]);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](1);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("ngIf", ctx.customTypeGroupArr && ctx.customTypeGroupArr[ctx.curDragonBoneGIdx] && ctx.customTypeGroupArr[ctx.curDragonBoneGIdx].animaNames);
          }
        },
        directives: [ng_zorro_antd_grid__WEBPACK_IMPORTED_MODULE_7__["NzRowDirective"], ng_zorro_antd_grid__WEBPACK_IMPORTED_MODULE_7__["NzColDirective"], _upload_image_with_preview_upload_image_with_preview_component__WEBPACK_IMPORTED_MODULE_8__["UploadImageWithPreviewComponent"], _angular_common__WEBPACK_IMPORTED_MODULE_9__["NgForOf"], ng_zorro_antd_button__WEBPACK_IMPORTED_MODULE_10__["NzButtonComponent"], ng_zorro_antd_icon__WEBPACK_IMPORTED_MODULE_11__["NzIconDirective"], ng_zorro_antd_divider__WEBPACK_IMPORTED_MODULE_12__["NzDividerComponent"], _angular_common__WEBPACK_IMPORTED_MODULE_9__["NgIf"], ng_zorro_antd_modal__WEBPACK_IMPORTED_MODULE_13__["NzModalComponent"], ng_zorro_antd_upload__WEBPACK_IMPORTED_MODULE_14__["NzUploadComponent"], ng_zorro_antd_radio__WEBPACK_IMPORTED_MODULE_15__["NzRadioGroupComponent"], _angular_forms__WEBPACK_IMPORTED_MODULE_16__["NgControlStatus"], _angular_forms__WEBPACK_IMPORTED_MODULE_16__["NgModel"], ng_zorro_antd_radio__WEBPACK_IMPORTED_MODULE_15__["NzRadioComponent"], _angular_forms__WEBPACK_IMPORTED_MODULE_16__["DefaultValueAccessor"], ng_zorro_antd_input__WEBPACK_IMPORTED_MODULE_17__["NzInputDirective"], _audio_recorder_audio_recorder_component__WEBPACK_IMPORTED_MODULE_18__["AudioRecorderComponent"], _custom_action_custom_action_component__WEBPACK_IMPORTED_MODULE_19__["CustomActionComponent"], ng_zorro_antd_checkbox__WEBPACK_IMPORTED_MODULE_20__["NzCheckboxComponent"]],
        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}\n.anima-upload-btn[_ngcontent-%COMP%] {\n  padding: 10px;\n}\nh5[_ngcontent-%COMP%] {\n  margin-top: 1rem;\n}\n@font-face {\n  font-family: \"ahronbd-1\";\n  src: url(\"/assets/font/ahronbd-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_r9 = ctx.$implicit;

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("nzValue", font_r9)("nzLabel", font_r9);

        _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_r9));

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](1);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtextInterpolate"](font_r9);
      }
    }

    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_r10 = ctx.$implicit;

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("nzValue", i_r10)("nzLabel", "Size - " + i_r10);
      }
    }

    function LessonTitleConfigComponent_ng_template_36_div_1_Template(rf, ctx) {
      if (rf & 1) {
        var _r14 = _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"](_r14);

          var color_r12 = ctx.$implicit;

          var ctx_r13 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵnextContext"](2);

          return ctx_r13.onSelectColor(color_r12);
        });

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
      }

      if (rf & 2) {
        var color_r12 = ctx.$implicit;

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵstyleProp"]("background-color", color_r12);
      }
    }

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

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](1);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("ngForOf", ctx_r8.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 _this31 = 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', _this31.titleObj);
            _this31.titleObj.content = _this31.titleEW.document.body.innerHTML.trim();

            _this31.titleUpdated.emit(_this31.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 _this32 = 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 (_this32.titleObj.content === _this32.titleEW.document.body.innerHTML.trim()) {
                return;
              }

              _this32.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 _this33 = 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 () {
                  _this33.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 _r7 = _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", _r7);

            _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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNyYy9hcHAvc3R5bGUvY29tbW9uX21peGluLmNzcyIsIi9Vc2Vycy9saXdlaS9Db2RlL0NvdXJzZXdhcmUvZHBlX3ZpZGVvX2VkaXRvci9mb3JtX2FuZ3VsYXIvc3JjL2FwcC9jb21tb24vcGxheWVyLWNvbnRlbnQtd3JhcHBlci9wbGF5ZXItY29udGVudC13cmFwcGVyLmNvbXBvbmVudC5zY3NzIiwic3JjL2FwcC9jb21tb24vcGxheWVyLWNvbnRlbnQtd3JhcHBlci9wbGF5ZXItY29udGVudC13cmFwcGVyLmNvbXBvbmVudC5zY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOztDQUVDO0FDQUQ7RUFDRSxnQkFBQTtFQUNBLGNBQUE7RUFDQSxrQkFBQTtFQUNBLFlBQUE7QUNBRjtBRENFO0VBQ0UscUJBQUE7RUFDQSxlQUFBO0VBQ0EsZ0JBQUE7RUFDQSxXQUFBO0VBQ0EsWUFBQTtFQUNBLGtCQUFBO0FDQ0o7QURBSTtFQUNFLFlBQUE7RUFDQSxXQUFBO0FDRU47QURFRTtFQUNFLGtCQUFBO0VBQ0EsTUFBQTtFQUNBLFFBQUE7RUFDQSxTQUFBO0VBQ0EsT0FBQTtFQUNBLGFBQUE7RUFDQSxzQkFBQTtBQ0FKO0FES0E7RUFDRSxXQUFBO0FDRkY7QURJQTtFQUNFLFlBQUE7QUNERjtBREdBO0VBQ0U7SUFDRSxrQkFBQTtFQ0FGOztFREVBO0lBQ0UsV0FBQTtJQUNBLGNBQUE7SUFDQSxrREFBQTtFQ0NGOztFRENBO0lBQ0Usa0JBQUE7SUFDQSxNQUFBO0lBQ0EsT0FBQTtJQUNBLFlBQUE7RUNFRjtBQUNGIiwiZmlsZSI6InNyYy9hcHAvY29tbW9uL3BsYXllci1jb250ZW50LXdyYXBwZXIvcGxheWVyLWNvbnRlbnQtd3JhcHBlci5jb21wb25lbnQuc2NzcyIsInNvdXJjZXNDb250ZW50IjpbIi8qXG5nbG9iYWwgY3NzIHRvIG1peGluXG4qL1xuXG5cblxuIiwiQGltcG9ydCAnLi4vLi4vc3R5bGUvY29tbW9uX21peGluLmNzcyc7XG5cbi5jbXAtcGxheWVyLWNvbnRlbnQtd3JhcHBlcntcbiAgbWF4LWhlaWdodDogMTAwJTtcbiAgZGlzcGxheTogYmxvY2s7XG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgaGVpZ2h0OiAxMDAlO1xuICAuY21wLWNudC1ib3h7XG4gICAgZGlzcGxheTogaW5saW5lLWJsb2NrO1xuICAgIG1heC13aWR0aDogMTAwJTtcbiAgICBtYXgtaGVpZ2h0OiAxMDAlO1xuICAgIHdpZHRoOiBhdXRvO1xuICAgIGhlaWdodDogMTAwJTtcbiAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gICAgaW1ne1xuICAgICAgaGVpZ2h0OiAxMDAlO1xuICAgICAgd2lkdGg6IGF1dG87XG4gICAgfVxuXG4gIH1cbiAgLmNtcC1jbnQtbWFpbntcbiAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgdG9wOiAwO1xuICAgIHJpZ2h0OiAwO1xuICAgIGJvdHRvbTogMDtcbiAgICBsZWZ0OiAwO1xuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgfVxufVxuXG5cbltzdHlsZSo9XCItLWFzcGVjdC1yYXRpb1wiXSA+IDpmaXJzdC1jaGlsZCB7XG4gIHdpZHRoOiAxMDAlO1xufVxuW3N0eWxlKj1cIi0tYXNwZWN0LXJhdGlvXCJdID4gaW1nIHtcbiAgaGVpZ2h0OiBhdXRvO1xufVxuQHN1cHBvcnRzICgtLWN1c3RvbTpwcm9wZXJ0eSkge1xuICBbc3R5bGUqPVwiLS1hc3BlY3QtcmF0aW9cIl0ge1xuICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgfVxuICBbc3R5bGUqPVwiLS1hc3BlY3QtcmF0aW9cIl06OmJlZm9yZSB7XG4gICAgY29udGVudDogXCJcIjtcbiAgICBkaXNwbGF5OiBibG9jaztcbiAgICBwYWRkaW5nLWJvdHRvbTogY2FsYygxMDAlIC8gKHZhcigtLWFzcGVjdC1yYXRpbykpKTtcbiAgfVxuICBbc3R5bGUqPVwiLS1hc3BlY3QtcmF0aW9cIl0gPiA6Zmlyc3QtY2hpbGQge1xuICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICB0b3A6IDA7XG4gICAgbGVmdDogMDtcbiAgICBoZWlnaHQ6IDEwMCU7XG4gIH1cbn1cbiIsIkBpbXBvcnQgJy4uLy4uL3N0eWxlL2NvbW1vbl9taXhpbi5jc3MnO1xuLmNtcC1wbGF5ZXItY29udGVudC13cmFwcGVyIHtcbiAgbWF4LWhlaWdodDogMTAwJTtcbiAgZGlzcGxheTogYmxvY2s7XG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgaGVpZ2h0OiAxMDAlO1xufVxuLmNtcC1wbGF5ZXItY29udGVudC13cmFwcGVyIC5jbXAtY250LWJveCB7XG4gIGRpc3BsYXk6IGlubGluZS1ibG9jaztcbiAgbWF4LXdpZHRoOiAxMDAlO1xuICBtYXgtaGVpZ2h0OiAxMDAlO1xuICB3aWR0aDogYXV0bztcbiAgaGVpZ2h0OiAxMDAlO1xuICBwb3NpdGlvbjogcmVsYXRpdmU7XG59XG4uY21wLXBsYXllci1jb250ZW50LXdyYXBwZXIgLmNtcC1jbnQtYm94IGltZyB7XG4gIGhlaWdodDogMTAwJTtcbiAgd2lkdGg6IGF1dG87XG59XG4uY21wLXBsYXllci1jb250ZW50LXdyYXBwZXIgLmNtcC1jbnQtbWFpbiB7XG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgdG9wOiAwO1xuICByaWdodDogMDtcbiAgYm90dG9tOiAwO1xuICBsZWZ0OiAwO1xuICBkaXNwbGF5OiBmbGV4O1xuICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xufVxuXG5bc3R5bGUqPVwiLS1hc3BlY3QtcmF0aW9cIl0gPiA6Zmlyc3QtY2hpbGQge1xuICB3aWR0aDogMTAwJTtcbn1cblxuW3N0eWxlKj1cIi0tYXNwZWN0LXJhdGlvXCJdID4gaW1nIHtcbiAgaGVpZ2h0OiBhdXRvO1xufVxuXG5Ac3VwcG9ydHMgKC0tY3VzdG9tOiBwcm9wZXJ0eSkge1xuICBbc3R5bGUqPVwiLS1hc3BlY3QtcmF0aW9cIl0ge1xuICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgfVxuXG4gIFtzdHlsZSo9XCItLWFzcGVjdC1yYXRpb1wiXTo6YmVmb3JlIHtcbiAgICBjb250ZW50OiBcIlwiO1xuICAgIGRpc3BsYXk6IGJsb2NrO1xuICAgIHBhZGRpbmctYm90dG9tOiBjYWxjKDEwMCUgLyAodmFyKC0tYXNwZWN0LXJhdGlvKSkpO1xuICB9XG5cbiAgW3N0eWxlKj1cIi0tYXNwZWN0LXJhdGlvXCJdID4gOmZpcnN0LWNoaWxkIHtcbiAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgdG9wOiAwO1xuICAgIGxlZnQ6IDA7XG4gICAgaGVpZ2h0OiAxMDAlO1xuICB9XG59Il19 */"]
      });
      return PlayerContentWrapperComponent;
    }();
    /***/

  },

  /***/
  "./src/app/common/upload-dragon-bone/upload-dragon-bone.component.ts":
  /*!***************************************************************************!*\
    !*** ./src/app/common/upload-dragon-bone/upload-dragon-bone.component.ts ***!
    \***************************************************************************/

  /*! exports provided: UploadDragonBoneComponent */

  /***/
  function srcAppCommonUploadDragonBoneUploadDragonBoneComponentTs(module, __webpack_exports__, __webpack_require__) {
    "use strict";

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


    __webpack_require__.d(__webpack_exports__, "UploadDragonBoneComponent", function () {
      return UploadDragonBoneComponent;
    });
    /* 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_button__WEBPACK_IMPORTED_MODULE_2__ = __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_3__ = __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_modal__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(
    /*! ng-zorro-antd/modal */
    "./node_modules/ng-zorro-antd/__ivy_ngcc__/fesm2015/ng-zorro-antd-modal.js");
    /* harmony import */


    var ng_zorro_antd_upload__WEBPACK_IMPORTED_MODULE_5__ = __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_6__ = __webpack_require__(
    /*! @angular/common */
    "./node_modules/@angular/common/__ivy_ngcc__/fesm2015/common.js");

    function UploadDragonBoneComponent_i_13_Template(rf, ctx) {
      if (rf & 1) {
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelement"](0, "i", 13);
      }

      if (rf & 2) {
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("nzType", "loading");
      }
    }

    function UploadDragonBoneComponent_span_14_Template(rf, ctx) {
      if (rf & 1) {
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](0, "span", 14);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](1, "u");

        _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 ctx_r116 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵnextContext"]();

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](2);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtextInterpolate1"](" ", ctx_r116.skeJsonData["name"], " ");
      }
    }

    function UploadDragonBoneComponent_i_23_Template(rf, ctx) {
      if (rf & 1) {
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelement"](0, "i", 13);
      }

      if (rf & 2) {
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("nzType", "loading");
      }
    }

    function UploadDragonBoneComponent_span_24_Template(rf, ctx) {
      if (rf & 1) {
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](0, "span", 14);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](1, "u");

        _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 ctx_r118 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵnextContext"]();

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](2);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtextInterpolate1"](" ", ctx_r118.texJsonData["name"], " ");
      }
    }

    function UploadDragonBoneComponent_i_33_Template(rf, ctx) {
      if (rf & 1) {
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelement"](0, "i", 13);
      }

      if (rf & 2) {
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("nzType", "loading");
      }
    }

    function UploadDragonBoneComponent_span_34_Template(rf, ctx) {
      if (rf & 1) {
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](0, "span", 14);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](1, "u");

        _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 ctx_r120 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵnextContext"]();

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](2);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtextInterpolate1"](" ", ctx_r120.texPngData["name"], " ");
      }
    }

    function UploadDragonBoneComponent_div_35_Template(rf, ctx) {
      if (rf & 1) {
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](0, "div", 4);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtext"](1);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
      }

      if (rf & 2) {
        var ctx_r121 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵnextContext"]();

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](1);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtextInterpolate1"](" \u63D0\u793A\uFF1A\u9700\u5305\u542B\u52A8\u753B: ", ctx_r121.animaNames.toString(), ". ");
      }
    }

    var UploadDragonBoneComponent =
    /*@__PURE__*/
    function () {
      var UploadDragonBoneComponent =
      /*#__PURE__*/
      function () {
        function UploadDragonBoneComponent(appRef, nzMessageService) {
          var _this34 = this;

          _classCallCheck(this, UploadDragonBoneComponent);

          this.appRef = appRef;
          this.nzMessageService = nzMessageService;
          this.uploading = false;
          this.progress = 0;
          this.btnName = '配置龙骨动画';
          this.animaNames = [];
          this.skeJsonData = {};
          this.texJsonData = {};
          this.texPngData = {};
          this.save = new _angular_core__WEBPACK_IMPORTED_MODULE_0__["EventEmitter"]();
          this.refreshEmitter = new _angular_core__WEBPACK_IMPORTED_MODULE_0__["EventEmitter"]();
          this.animaPanelVisible = false;
          this.isSkeJsonLoading = false;
          this.isTexJsonLoading = false;
          this.isTexPngLoading = false;
          this.uploadUrl = window.courseware.uploadUrl();
          this.uploadData = window.courseware.uploadData();

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

        _createClass(UploadDragonBoneComponent, [{
          key: "ngOnChanges",
          value: function ngOnChanges() {}
        }, {
          key: "setAnimaBtnClick",
          value: function setAnimaBtnClick() {
            this.animaPanelVisible = true;
            this.refresh();
          }
        }, {
          key: "animaPanelCancel",
          value: function animaPanelCancel() {
            this.animaPanelVisible = false;
            this.refresh();
          }
        }, {
          key: "animaPanelOk",
          value: function animaPanelOk() {
            this.sendItemDragonBoneData();
            this.animaPanelVisible = false;
            this.refresh();
          }
        }, {
          key: "sendItemDragonBoneData",
          value: function sendItemDragonBoneData() {
            var data = {};
            data['skeJsonData'] = this.skeJsonData;
            data['texJsonData'] = this.texJsonData;
            data['texPngData'] = this.texPngData;
            this.save.emit(data);
          }
        }, {
          key: "skeJsonHandleChange",
          value: function skeJsonHandleChange(e) {
            console.log('e: ', e);

            switch (e.type) {
              case 'start':
                this.isSkeJsonLoading = true;
                break;

              case 'success':
                this.skeJsonData['url'] = e.file.response.url;
                this.skeJsonData['name'] = e.file.name;
                this.nzMessageService.success('上传成功');
                this.isSkeJsonLoading = false;
                break;

              case 'progress':
                break;
            }
          }
        }, {
          key: "texJsonHandleChange",
          value: function texJsonHandleChange(e) {
            console.log('e: ', e);

            switch (e.type) {
              case 'start':
                this.isTexJsonLoading = true;
                break;

              case 'success':
                this.texJsonData['url'] = e.file.response.url;
                this.texJsonData['name'] = e.file.name;
                this.nzMessageService.success('上传成功');
                this.isTexJsonLoading = false;
                break;

              case 'progress':
                break;
            }
          }
        }, {
          key: "texPngHandleChange",
          value: function texPngHandleChange(e) {
            console.log('e: ', e);

            switch (e.type) {
              case 'start':
                this.isTexPngLoading = true;
                break;

              case 'success':
                this.texPngData['url'] = e.file.response.url;
                this.texPngData['name'] = e.file.name;
                this.nzMessageService.success('上传成功');
                this.isTexPngLoading = false;
                break;

              case 'progress':
                break;
            }
          }
          /**
           * 刷新 渲染页面
           */

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

            // this.refreshEmitter.emit();
            setTimeout(function () {
              _this35.appRef.tick();
            }, 1);
          }
        }, {
          key: "closePanel",
          value: function closePanel() {
            console.log(' in closePanel ');
            this.refresh();
          }
        }, {
          key: "ngOnDestroy",
          value: function ngOnDestroy() {}
        }]);

        return UploadDragonBoneComponent;
      }();

      UploadDragonBoneComponent.ɵfac = function UploadDragonBoneComponent_Factory(t) {
        return new (t || UploadDragonBoneComponent)(_angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵdirectiveInject"](_angular_core__WEBPACK_IMPORTED_MODULE_0__["ApplicationRef"]), _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵdirectiveInject"](ng_zorro_antd__WEBPACK_IMPORTED_MODULE_1__["NzMessageService"]));
      };

      UploadDragonBoneComponent.ɵcmp = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵdefineComponent"]({
        type: UploadDragonBoneComponent,
        selectors: [["app-upload-dragon-bone"]],
        inputs: {
          btnName: "btnName",
          animaNames: "animaNames",
          skeJsonData: "skeJsonData",
          texJsonData: "texJsonData",
          texPngData: "texPngData"
        },
        outputs: {
          save: "save",
          refreshEmitter: "refreshEmitter"
        },
        features: [_angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵNgOnChangesFeature"]],
        decls: 36,
        vars: 18,
        consts: [[1, "position-relative"], ["nz-button", "", 2, "border-radius", "0.5rem", "border", "1px solid #ddd", 3, "click"], ["nz-icon", "", "nzType", "tool", "nzTheme", "outline"], ["nzTitle", "\u914D\u7F6E\u8D44\u6E90\u6587\u4EF6", "nzOkText", "\u4FDD\u5B58", 3, "nzVisible", "nzVisibleChange", "nzAfterClose", "nzOnCancel", "nzOnOk"], [1, "anima-upload-btn"], [2, "margin-right", "10px"], ["nzAccept", "application/json", 3, "nzShowUploadList", "nzAction", "nzData", "nzChange"], ["nz-button", ""], ["nz-icon", "", "nzType", "upload"], ["style", "margin-left: 10px;", "nz-icon", "", 3, "nzType", 4, "ngIf"], ["style", "margin-left: 10px", 4, "ngIf"], ["nzAccept", "image/*", 3, "nzShowUploadList", "nzAction", "nzData", "nzChange"], ["class", "anima-upload-btn", 4, "ngIf"], ["nz-icon", "", 2, "margin-left", "10px", 3, "nzType"], [2, "margin-left", "10px"]],
        template: function UploadDragonBoneComponent_Template(rf, ctx) {
          if (rf & 1) {
            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](0, "div", 0);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](1, "button", 1);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵlistener"]("click", function UploadDragonBoneComponent_Template_button_click_1_listener() {
              return ctx.setAnimaBtnClick();
            });

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelement"](2, "i", 2);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtext"](3);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](4, "nz-modal", 3);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵlistener"]("nzVisibleChange", function UploadDragonBoneComponent_Template_nz_modal_nzVisibleChange_4_listener($event) {
              return ctx.animaPanelVisible = $event;
            })("nzAfterClose", function UploadDragonBoneComponent_Template_nz_modal_nzAfterClose_4_listener() {
              return ctx.closePanel();
            })("nzOnCancel", function UploadDragonBoneComponent_Template_nz_modal_nzOnCancel_4_listener() {
              return ctx.animaPanelCancel();
            })("nzOnOk", function UploadDragonBoneComponent_Template_nz_modal_nzOnOk_4_listener() {
              return ctx.animaPanelOk();
            });

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](5, "div", 4);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](6, "span", 5);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtext"](7, "\u4E0A\u4F20 ske_json \u6587\u4EF6: ");

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](8, "nz-upload", 6);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵlistener"]("nzChange", function UploadDragonBoneComponent_Template_nz_upload_nzChange_8_listener($event) {
              return ctx.skeJsonHandleChange($event);
            });

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](9, "button", 7);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelement"](10, "i", 8);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](11, "span");

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtext"](12, "Upload");

            _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, UploadDragonBoneComponent_i_13_Template, 1, 1, "i", 9);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtemplate"](14, UploadDragonBoneComponent_span_14_Template, 3, 1, "span", 10);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](15, "div", 4);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](16, "span", 5);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtext"](17, "\u4E0A\u4F20 tex_json \u6587\u4EF6: ");

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](18, "nz-upload", 6);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵlistener"]("nzChange", function UploadDragonBoneComponent_Template_nz_upload_nzChange_18_listener($event) {
              return ctx.texJsonHandleChange($event);
            });

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](19, "button", 7);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelement"](20, "i", 8);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](21, "span");

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtext"](22, "Upload");

            _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"](23, UploadDragonBoneComponent_i_23_Template, 1, 1, "i", 9);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtemplate"](24, UploadDragonBoneComponent_span_24_Template, 3, 1, "span", 10);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](25, "div", 4);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](26, "span", 5);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtext"](27, "\u4E0A\u4F20 tex_png \u6587\u4EF6: ");

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](28, "nz-upload", 11);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵlistener"]("nzChange", function UploadDragonBoneComponent_Template_nz_upload_nzChange_28_listener($event) {
              return ctx.texPngHandleChange($event);
            });

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](29, "button", 7);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelement"](30, "i", 8);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](31, "span");

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtext"](32, "Upload");

            _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"](33, UploadDragonBoneComponent_i_33_Template, 1, 1, "i", 9);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtemplate"](34, UploadDragonBoneComponent_span_34_Template, 3, 1, "span", 10);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtemplate"](35, UploadDragonBoneComponent_div_35_Template, 2, 1, "div", 12);

            _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__["ɵɵtextInterpolate1"](" ", ctx.btnName, " ");

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](1);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("nzVisible", ctx.animaPanelVisible);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](4);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("nzShowUploadList", false)("nzAction", ctx.uploadUrl)("nzData", ctx.uploadData);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](5);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("ngIf", ctx.isSkeJsonLoading);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](1);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("ngIf", ctx.skeJsonData && ctx.skeJsonData["name"]);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](4);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("nzShowUploadList", false)("nzAction", ctx.uploadUrl)("nzData", ctx.uploadData);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](5);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("ngIf", ctx.isTexJsonLoading);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](1);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("ngIf", ctx.texJsonData && ctx.texJsonData["name"]);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](4);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("nzShowUploadList", false)("nzAction", ctx.uploadUrl)("nzData", ctx.uploadData);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](5);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("ngIf", ctx.isTexPngLoading);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](1);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("ngIf", ctx.texPngData && ctx.texPngData["name"]);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](1);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("ngIf", ctx.animaNames && ctx.animaNames.length > 0);
          }
        },
        directives: [ng_zorro_antd_button__WEBPACK_IMPORTED_MODULE_2__["NzButtonComponent"], ng_zorro_antd_icon__WEBPACK_IMPORTED_MODULE_3__["NzIconDirective"], ng_zorro_antd_modal__WEBPACK_IMPORTED_MODULE_4__["NzModalComponent"], ng_zorro_antd_upload__WEBPACK_IMPORTED_MODULE_5__["NzUploadComponent"], _angular_common__WEBPACK_IMPORTED_MODULE_6__["NgIf"]],
        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.anima-upload-btn[_ngcontent-%COMP%] {\n  padding: 10px;\n}\n[_nghost-%COMP%]     .ant-upload {\n  display: block;\n}\n/*# sourceMappingURL=data:application/json;base64,  */"]
      });
      return UploadDragonBoneComponent;
    }();
    /***/

  },

  /***/
  "./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", 8);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelement"](1, "i", 9);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelement"](2, "div", 10);

        _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_r15 = _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_r15.iconSize + "em");

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](3);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtextInterpolate"](ctx_r15.TIP);
      }
    }

    function UploadImageWithPreviewComponent_div_4_Template(rf, ctx) {
      if (rf & 1) {
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](0, "div", 11);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelement"](1, "div", 12);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](2, "div", 13);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelement"](3, "fa-icon", 14);

        _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_r16 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵnextContext"]();

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](1);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵstyleProp"]("width", ctx_r16.progress + "%");
      }
    }

    function UploadImageWithPreviewComponent_div_5_Template(rf, ctx) {
      if (rf & 1) {
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](0, "div", 15);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵpipe"](1, "backgroundImage");

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
      }

      if (rf & 2) {
        var ctx_r17 = _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_r17.picUrl), _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵdefaultStyleSanitizer"]);
      }
    }

    function UploadImageWithPreviewComponent_div_6_Template(rf, ctx) {
      if (rf & 1) {
        var _r21 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵgetCurrentView"]();

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](0, "div", 16);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵlistener"]("nzOnConfirm", function UploadImageWithPreviewComponent_div_6_Template_div_nzOnConfirm_0_listener() {
          _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵrestoreView"](_r21);

          var ctx_r20 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵnextContext"]();

          return ctx_r20.onDelete();
        });

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelement"](1, "i", 17);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
      }
    }

    function UploadImageWithPreviewComponent_div_7_Template(rf, ctx) {
      if (rf & 1) {
        var _r23 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵgetCurrentView"]();

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](0, "div", 18);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵlistener"]("click", function UploadImageWithPreviewComponent_div_7_Template_div_click_0_listener() {
          _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵrestoreView"](_r23);

          var ctx_r22 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵnextContext"]();

          return ctx_r22.onDownload();
        });

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelement"](1, "span", 19);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
      }
    }

    var UploadImageWithPreviewComponent =
    /*@__PURE__*/
    function () {
      var UploadImageWithPreviewComponent =
      /*#__PURE__*/
      function () {
        function UploadImageWithPreviewComponent(nzMessageService) {
          var _this36 = 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) {
            _this36.nzMessageService.info('Upload Success');

            _this36.uploading = false;
            _this36.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();

              _this36.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) {
            _this36.uploading = false;

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

            console.log(err);

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

            _this36.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) {
            _this36.uploadUrl = url;
            _this36.uploadData = data;
          };

          this.setUploadUrl();
        }

        _createClass(UploadImageWithPreviewComponent, [{
          key: "setUploadUrl",
          value: function setUploadUrl() {
            var _this37 = this;

            if (!this.uploadUrl) {
              this.uploadUrl = window.courseware.uploadUrl();
              this.uploadData = window.courseware.uploadData();
              setTimeout(function () {
                _this37.setUploadUrl();
              }, 500);
            }
          }
        }, {
          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: "onDownload",
          value: function onDownload() {
            console.log(this.picUrl);
            window.open(this.picUrl, "__blank"); // this.downloadFile(this.picUrl)
          }
        }, {
          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: "getBlob",
          value: function getBlob(url) {
            return new Promise(function (resolve, reject) {
              var xhr = new XMLHttpRequest();
              xhr.open('GET', url, true);
              xhr.responseType = 'blob';
              console.log(xhr);

              xhr.onload = function () {
                if (xhr.status === 200) {
                  resolve(xhr.response);
                } else {
                  reject(xhr.status);
                }
              };

              xhr.onabort = function () {
                reject("abort");
              };

              xhr.onerror = function () {
                reject("error");
              };

              xhr.send();
            });
          }
        }, {
          key: "saveAs",
          value: function saveAs(blob, filename) {
            var link = document.createElement('a');
            link.href = window.URL.createObjectURL(blob);
            link.download = filename;
            link.click();
          }
        }, {
          key: "downloadFile",
          value: function downloadFile(url) {
            var _this38 = this;

            this.getBlob(url).then(function (blob) {
              console.log(blob);
              var fileName = prompt("请输入保存的文件名");

              _this38.saveAs(blob, fileName);
            })["catch"](function (err) {
              console.error(err);
            });
          }
        }, {
          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: 8,
        vars: 9,
        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"], ["class", "p-btn-download", 3, "click", 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"], [1, "p-btn-download", 3, "click"], ["nz-icon", "", "nzType", "link", "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__["ɵɵtemplate"](7, UploadImageWithPreviewComponent_div_7_Template, 2, 0, "div", 7);

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

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](1);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("ngIf", ctx.picUrl);
          }
        },
        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-btn-download[_ngcontent-%COMP%] {\n  cursor: pointer;\n  width: 2rem;\n  height: 2rem;\n  border: 0.2rem solid white;\n  font-size: 1.2rem;\n  color: #1890ff;\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 _angular_common_http__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(
    /*! @angular/common/http */
    "./node_modules/@angular/common/__ivy_ngcc__/fesm2015/http.js");
    /* harmony import */


    var crypto_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(
    /*! crypto-js */
    "./node_modules/crypto-js/index.js");
    /* harmony import */


    var crypto_js__WEBPACK_IMPORTED_MODULE_2___default =
    /*#__PURE__*/
    __webpack_require__.n(crypto_js__WEBPACK_IMPORTED_MODULE_2__);
    /* harmony import */


    var uuid__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(
    /*! uuid */
    "./node_modules/uuid/dist/esm-browser/index.js");
    /* 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_platform_browser__WEBPACK_IMPORTED_MODULE_5__ = __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_6__ = __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_7__ = __webpack_require__(
    /*! @angular/common */
    "./node_modules/@angular/common/__ivy_ngcc__/fesm2015/common.js");
    /* harmony import */


    var ng_zorro_antd_icon__WEBPACK_IMPORTED_MODULE_8__ = __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_9__ = __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_10__ = __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", 11);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelement"](1, "i", 12);

        _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_r85 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵnextContext"]();

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("disabled", ctx_r85.uploading)("nzLoading", ctx_r85.uploading);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](3);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtextInterpolate"](ctx_r85.uploading ? "Uploading" : "Select Video");
      }
    }

    function UploadVideoComponent_button_4_Template(rf, ctx) {
      if (rf & 1) {
        var _r92 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵgetCurrentView"]();

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](0, "button", 13);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵlistener"]("click", function UploadVideoComponent_button_4_Template_button_click_0_listener() {
          _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵrestoreView"](_r92);

          var ctx_r91 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵnextContext"]();

          return ctx_r91.captureVideo();
        });

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelement"](1, "i", 14);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](2, "span");

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtext"](3, "\u622A\u56FE");

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
      }

      if (rf & 2) {
        var ctx_r86 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵnextContext"]();

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("disabled", ctx_r86.uploading)("nzLoading", ctx_r86.uploading);
      }
    }

    function UploadVideoComponent_div_6_div_5_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__["ɵɵtext"](3);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
      }

      if (rf & 2) {
        var ctx_r93 = _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_r93.progress * 0.2 + "rem");

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](2);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtextInterpolate1"]("", ctx_r93.progress, "%");
      }
    }

    function UploadVideoComponent_div_6_Template(rf, ctx) {
      if (rf & 1) {
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](0, "div", 15);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelement"](1, "i", 16);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelement"](2, "div", 17);

        _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_6_div_5_Template, 4, 3, "div", 18);

        _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"](5);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("ngIf", ctx_r87.uploading);
      }
    }

    var _c1 = function _c1(a0) {
      return {
        "smart-bar": a0
      };
    };

    function UploadVideoComponent_div_7_Template(rf, ctx) {
      if (rf & 1) {
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](0, "div", 22);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelement"](1, "div", 23);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](2, "div", 24);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelement"](3, "fa-icon", 25);

        _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_r88 = _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_r88.showUploadBtn));

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](1);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵstyleProp"]("width", ctx_r88.progress + "%");
      }
    }

    function UploadVideoComponent_div_8_Template(rf, ctx) {
      if (rf & 1) {
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](0, "div", 26);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelement"](1, "div", 23);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](2, "div", 24);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelement"](3, "fa-icon", 25);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelement"](4, "i", 10);

        _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_r89 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵnextContext"]();

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](1);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵstyleProp"]("width", ctx_r89.progress + "%");
      }
    }

    function UploadVideoComponent_div_9_Template(rf, ctx) {
      if (rf & 1) {
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](0, "div", 27);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelement"](1, "video", 28, 29);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
      }

      if (rf & 2) {
        var ctx_r90 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵnextContext"]();

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](1);

        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("src", ctx_r90.playVedioUrl, _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵsanitizeUrl"]);
      }
    }

    function httpHeadCall(requsetUrl, callback) {
      var xhr = new XMLHttpRequest();

      try {
        xhr.onreadystatechange = function () {
          try {
            if (xhr.readyState == 4) {
              if (xhr.status >= 200 && xhr.status < 400) {
                callback(true);
              } else {
                callback(false);
              }
            }
          } catch (e) {
            callback(false);
          }
        };

        xhr.open("HEAD", requsetUrl, true);
        xhr.send();
        xhr.timeout = 15000;

        xhr.onerror = function (e) {
          callback(false);
        };

        xhr.ontimeout = function (e) {
          callback(false);
        };
      } catch (e) {
        callback(false);
      }
    }

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

          _classCallCheck(this, UploadVideoComponent);

          this.nzMessageService = nzMessageService;
          this.sanitization = sanitization;
          this.http = http;
          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.onCapture = new _angular_core__WEBPACK_IMPORTED_MODULE_0__["EventEmitter"]();
          this.extractVideoCover = new _angular_core__WEBPACK_IMPORTED_MODULE_0__["EventEmitter"]();
          this.showUploadBtn = true;
          this.showCapture = true;
          this.playVedioUrl = '';

          this.checkHashFinish = function (hash) {
            _this39.checking = false;
            _this39.uploading = true;
          };

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


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

            _this39.videoUrl = file.response.url;

            _this39.videoUploaded.emit(file.response);

            setTimeout(function () {
              console.log("KK");

              _this39.safeVideoUrl();
            }, 2000);
          };

          this.uploadFailure = function (err, file) {
            _this39.uploading = false;

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

            console.log(err);

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

            _this39.videoUploadFailure.emit(file);
          };

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

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


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

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

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

        _createClass(UploadVideoComponent, [{
          key: "ngOnInit",
          value: function ngOnInit() {
            this.playVedioUrl = this.videoUrl.replace("_h.mp4", "_l.mp4");
            ;
          }
        }, {
          key: "md5Short",
          value: function md5Short(str, _salt) {
            return crypto_js__WEBPACK_IMPORTED_MODULE_2___default.a.MD5(str + _salt).toString();
          }
        }, {
          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() {
            var _this40 = this;

            var url = this.videoUrl.replace("_h.mp4", ".mp4").replace(".mp4", "_l.mp4");
            console.log("=============safeVideoUrl==============", url);
            httpHeadCall(url, function (flag) {
              if (flag) {
                _this40.playVedioUrl = url;
              } else {
                setTimeout(function () {
                  _this40.safeVideoUrl();
                }, 500);
              }
            });
            return this.playVedioUrl;
          }
        }, {
          key: "videoLoadedMetaData",
          value: function videoLoadedMetaData() {} // fileToBlob(file) {
          //   let reader = new FileReader();
          //   reader.addEventListener('load', (e) => {
          //       let base64 = e.target.result;
          //       let blob = new Blob([base64], { type: file.type });
          //       console.log("Blob对象", blob);
          //   })
          //   reader.readAsDataURL(file)
          // } 

        }, {
          key: "customReq",
          value: function customReq(item) {
            var _this41 = this;

            // md5值计算
            var protocolStr = document.location.protocol;
            var baseCDN = "".concat(protocolStr, "//teach.cdn.ireadabc.com");
            var baseAPI = "".concat(protocolStr, "//openapi.iteachabc.com");
            var fileName = Object(uuid__WEBPACK_IMPORTED_MODULE_3__["v4"])().replace(/-/g, "");
            httpHeadCall("".concat(baseCDN, "/").concat(fileName, "_h.mp4"), function (flag) {
              if (flag) {
                item.onSuccess({
                  url: "".concat(baseCDN, "/").concat(fileName, ".mp4")
                }, item.file, event);
              } else {
                _this41.http.get("".concat(baseAPI, "/oss/timestamp"), {}).subscribe(function (tmps) {
                  var sign = crypto_js__WEBPACK_IMPORTED_MODULE_2___default.a.MD5(tmps + "iplayABC2019").toString();
                  var params = new _angular_common_http__WEBPACK_IMPORTED_MODULE_1__["HttpParams"]().set('sign', sign).set('stmp', tmps);

                  _this41.http.get("".concat(baseAPI, "/oss/signature"), {
                    params: params
                  }).subscribe(function (res) {
                    var serve = res['data'];
                    var formData = new FormData();
                    formData.append('key', fileName + ".mp4");
                    formData.append('bucket', "iplayabc-worker-queue-videolmh");
                    formData.append('OSSAccessKeyId', serve.OSSAccessKeyId);
                    formData.append('policy', serve.policy);
                    formData.append('Signature', serve.signature);
                    formData.append('success_action_status', '200');
                    formData.append('file', item.file); //设置cors跨域请求

                    var headerstemp = new _angular_common_http__WEBPACK_IMPORTED_MODULE_1__["HttpHeaders"]({
                      'Access-Control-Allow-Origin': '*'
                    });
                    item.action = "".concat(protocolStr, "//iplayabc-worker-queue-videolmh.oss-cn-beijing.aliyuncs.com");
                    var req = new _angular_common_http__WEBPACK_IMPORTED_MODULE_1__["HttpRequest"]('POST', item.action, formData, {
                      headers: headerstemp,
                      reportProgress: true
                    }); // Always returns a `Subscription` object. nz-upload would automatically unsubscribe it at correct time.

                    return _this41.http.request(req).subscribe(function (event) {
                      if (event.type === _angular_common_http__WEBPACK_IMPORTED_MODULE_1__["HttpEventType"].UploadProgress) {
                        if (event.total > 0) {
                          // tslint:disable-next-line:no-any
                          event.percent = event.loaded / event.total * 100;
                        }

                        item.onProgress(event, item.file);
                      } else if (event instanceof _angular_common_http__WEBPACK_IMPORTED_MODULE_1__["HttpResponse"]) {
                        item.onSuccess({
                          url: "".concat(baseCDN, "/").concat(fileName, ".mp4")
                        }, item.file, event);
                      }
                    }, function (err) {
                      console.log(err);
                      item.onError(err, item.file);
                    });
                  });
                });
              }
            });
          }
        }, {
          key: "handleChange",
          value: function handleChange(info
          /* { type: string, file: UploadFile, event: any }*/
          ) {
            console.log(info);

            switch (info.type) {
              case 'start':
                if (!this.checkSelectFile(info.file)) {
                  return;
                }

                this.uploading = true;
                this.progress = 0;
                break;

              case 'success':
                this.uploadSuccess(info.file);
                break;

              case 'progress':
                this.progress = info.event.percent; // this.doProgress(this.progress);

                break;
            }
          }
        }, {
          key: "captureVideo",
          value: function captureVideo() {
            var _this42 = this;

            var video = this.videoNode.nativeElement;
            var cvs = document.createElement('canvas');
            var ctx = cvs.getContext("2d");
            cvs.width = video.videoWidth;
            cvs.height = video.videoHeight;
            ctx.drawImage(video, 0, 0, cvs.width, cvs.height);
            cvs.toBlob(function (blob) {
              _this42.onCapture.emit(blob);
            });
          }
        }, {
          key: "checkSelectFile",
          value: function checkSelectFile(file) {
            if (!file.lastModified) {
              return false;
            }

            var delta = 5000;
            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_4__["NzMessageService"]), _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵdirectiveInject"](_angular_platform_browser__WEBPACK_IMPORTED_MODULE_5__["DomSanitizer"]), _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵdirectiveInject"](_angular_common_http__WEBPACK_IMPORTED_MODULE_1__["HttpClient"]));
      };

      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__["ɵɵviewQuery"](_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",
          showCapture: "showCapture",
          item: "item"
        },
        outputs: {
          videoUploaded: "videoUploaded",
          videoUploadFailure: "videoUploadFailure",
          onCapture: "onCapture",
          extractVideoCover: "extractVideoCover"
        },
        features: [_angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵNgOnChangesFeature"]],
        decls: 14,
        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", "nzCustomRequest", "nzChange"], ["type", "button", "nz-button", "", "nzType", "default", 3, "disabled", "nzLoading", 4, "ngIf"], ["type", "button", "nz-button", "", "nzType", "default", 3, "disabled", "nzLoading", "click", 4, "ngIf"], [1, "p-box", "d-flex", "align-items-center", "p-video-uploader"], ["class", "p-upload-icon", 4, "ngIf"], ["class", "p-upload-progress-bg", 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"], ["type", "button", "nz-button", "", "nzType", "default", 3, "disabled", "nzLoading", "click"], ["nz-icon", "", "nzType", "camera", "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", 3, "ngClass"], [1, "i-bg"], [1, "i-text"], ["icon", "cloud-upload-alt"], [1, "p-upload-check-bg"], [1, "p-preview"], ["crossorigin", "anonymous", "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__["ɵɵtemplate"](4, UploadVideoComponent_button_4_Template, 4, 2, "button", 4);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](5, "div", 5);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtemplate"](6, UploadVideoComponent_div_6_Template, 6, 1, "div", 6);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtemplate"](7, UploadVideoComponent_div_7_Template, 5, 5, "div", 7);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtemplate"](8, UploadVideoComponent_div_8_Template, 6, 2, "div", 8);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtemplate"](9, UploadVideoComponent_div_9_Template, 3, 1, "div", 9);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](10, "div");

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](11, "span");

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelement"](12, "i", 10);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtext"](13, " 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)("nzCustomRequest", ctx.customReq);

            _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"](1);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("ngIf", ctx.showCapture && !ctx.uploading);

            _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.playVedioUrl);

            _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_6__["NzUploadComponent"], _angular_common__WEBPACK_IMPORTED_MODULE_7__["NgIf"], ng_zorro_antd_icon__WEBPACK_IMPORTED_MODULE_8__["NzIconDirective"], ng_zorro_antd_button__WEBPACK_IMPORTED_MODULE_9__["NzButtonComponent"], _angular_common__WEBPACK_IMPORTED_MODULE_7__["NgClass"], _fortawesome_angular_fontawesome__WEBPACK_IMPORTED_MODULE_10__["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/ComponentBase.ts":
  /*!***************************************!*\
    !*** ./src/app/form/ComponentBase.ts ***!
    \***************************************/

  /*! exports provided: ComponentBase */

  /***/
  function srcAppFormComponentBaseTs(module, __webpack_exports__, __webpack_require__) {
    "use strict";

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


    __webpack_require__.d(__webpack_exports__, "ComponentBase", function () {
      return ComponentBase;
    });
    /* harmony import */


    var _angular_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(
    /*! @angular/core */
    "./node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js");

    var _c0 = ["itemTextarea"];

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

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

          this.saveKey = ""; // 储存对象

          this.item = {};
          this.itemStr = "";
        }

        _createClass(ComponentBase, [{
          key: "ngOnChanges",
          value: function ngOnChanges() {}
        }, {
          key: "ngOnDestroy",
          value: function ngOnDestroy() {}
        }, {
          key: "ngOnInit",
          value: function ngOnInit() {
            var _this43 = this;

            // 获取存储的数据
            window.courseware.getData(function (data) {
              if (data) {
                _this43.item = data;
                _this43.itemStr = JSON.stringify(_this43.item, null, 4).trim();
              }

              _this43.init();

              _this43.changeDetectorRef.markForCheck();

              _this43.changeDetectorRef.detectChanges();

              _this43.refresh();
            }, this.saveKey);
          }
        }, {
          key: "copyData",
          value: function copyData() {
            this.itemTextarea.nativeElement.select();
            document.execCommand("copy");
          }
          /**
           * 储存图片数据
           * @param e
           */
          // onAssetUploadSuccess(e: any, ...key: Array<string>) {
          //   let item = this.item;
          //   for (let i = 0; i < key.length; i++) {
          //     if (i + 1 == key.length) {
          //       if (key[i] == "audio") {
          //         let sp = e.url.split(".mp3");
          //         let u = sp[0] + "_l.mp3";
          //         item[key[i]] = u;
          //         item["audioName"] = e.name || "";
          //       } else {
          //         item[key[i]] = e.url;
          //       }
          //       this.save();
          //       return;
          //     }
          //     item = item[key[i]];
          //   }
          // }

          /**
           * 储存图片数据
           * @param e
           */

        }, {
          key: "onImageUploadSuccess",
          value: function onImageUploadSuccess(e, key) {
            var it = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : this.item;
            it[key] = e.url;
            this.save();
          }
          /**
           * 储存音频数据
           * @param e
           */

        }, {
          key: "onAudioUploadSuccess",
          value: function onAudioUploadSuccess(e, key) {
            var it = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : this.item;
            var url = e.url;
            var sp = url.split(".mp3");
            var u = sp[0] + "_l.mp3";
            it[key] = u;
            it["audioName"] = e.name || "";
            this.save();
          }
        }, {
          key: "save",
          value: function save() {
            window.courseware.setData(this.item, null, this.saveKey);
            this.itemStr = JSON.stringify(this.item, null, 4).trim();
            this.refresh();
            console.log('this.item = ' + JSON.stringify(this.item));
          }
        }, {
          key: "load",
          value: function load() {
            this.itemStr = this.itemTextarea.nativeElement.value;

            if (this.isJSON(this.itemStr)) {
              this.item = JSON.parse(this.itemStr);
              this.init();
              this.changeDetectorRef.markForCheck();
              this.changeDetectorRef.detectChanges();
              this.refresh();
            }
          }
        }, {
          key: "isJSON",
          value: function isJSON(str) {
            if (typeof str == 'string') {
              try {
                var obj = JSON.parse(str);

                if (typeof obj == 'object' && obj) {
                  return true;
                }

                return false;
              } catch (e) {
                return false;
              }
            }

            return false;
          }
          /**
           * 刷新 渲染页面
           */

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

            setTimeout(function () {
              _this44.appRef.tick();
            }, 1);
          }
        }, {
          key: "init",
          value: function init() {}
        }]);

        return ComponentBase;
      }();

      ComponentBase.ɵfac = function ComponentBase_Factory(t) {
        return new (t || ComponentBase)(_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"]));
      };

      ComponentBase.ɵdir = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵdefineDirective"]({
        type: ComponentBase,
        viewQuery: function ComponentBase_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.itemTextarea = _t.first);
          }
        },
        features: [_angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵNgOnChangesFeature"]]
      });
      return ComponentBase;
    }();
    /***/

  },

  /***/
  "./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 _ComponentBase__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(
    /*! ./ComponentBase */
    "./src/app/form/ComponentBase.ts");
    /* harmony import */


    var ng_zorro_antd__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(
    /*! ng-zorro-antd */
    "./node_modules/ng-zorro-antd/__ivy_ngcc__/fesm2015/ng-zorro-antd.js");
    /* harmony import */


    var _common_upload_image_with_preview_upload_image_with_preview_component__WEBPACK_IMPORTED_MODULE_3__ = __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_upload_video_upload_video_component__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(
    /*! ../common/upload-video/upload-video.component */
    "./src/app/common/upload-video/upload-video.component.ts");

    var FormComponent =
    /*@__PURE__*/
    function () {
      var FormComponent =
      /*#__PURE__*/
      function (_ComponentBase__WEBPA) {
        _inherits(FormComponent, _ComponentBase__WEBPA);

        var _super21 = _createSuper(FormComponent);

        // testUrl = "http://staging-teach.cdn.ireadabc.com/0e64dfbfc54a7bd0bb121092f74b130b.mp4";
        function FormComponent(nzMessageService, appRef, changeDetectorRef) {
          var _this45;

          _classCallCheck(this, FormComponent);

          _this45 = _super21.call(this, appRef, changeDetectorRef);
          _this45.nzMessageService = nzMessageService;
          _this45.appRef = appRef;
          _this45.changeDetectorRef = changeDetectorRef; // 储存数据用

          _this45.saveKey = "dg_video";
          _this45.item = {
            "url": "",
            "duration": 0,
            "size": 0,
            "snapshotUrl": "",
            "muteVideoUrl": ""
          };
          return _this45;
        } // 截图


        _createClass(FormComponent, [{
          key: "handleOnCapture",
          value: function handleOnCapture(e) {
            console.log(e);
            var href = URL.createObjectURL(e);
            var box = document.createElement('a');
            box.download = new Date().getTime() + ".jpg";
            box.href = href;
            box.click();
          }
          /**
           * 储存图片数据
           * @param e
           */

        }, {
          key: "onImageUploadSuccess",
          value: function onImageUploadSuccess(e, item, key) {
            item[key] = e.url;
            this.save();
          }
        }, {
          key: "onVideoUploaded",
          value: function onVideoUploaded(e, item, key) {
            item[key] = e.url.replace(".mp4", "_h.mp4");
            this.save();
          }
        }]);

        return FormComponent;
      }(_ComponentBase__WEBPACK_IMPORTED_MODULE_1__["ComponentBase"]);

      FormComponent.ɵfac = function FormComponent_Factory(t) {
        return new (t || FormComponent)(_angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵdirectiveInject"](ng_zorro_antd__WEBPACK_IMPORTED_MODULE_2__["NzMessageService"]), _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__["ɵɵInheritDefinitionFeature"]],
        decls: 4,
        vars: 3,
        consts: [[1, "model-content"], [2, "width", "500px", "margin-top", "20px", "border", "2px dashed", "padding", "20px 10px 5px 10px"], [3, "picUrl", "imageUploaded"], [3, "videoUrl", "showUploadBtn", "videoUploaded", "onCapture"]],
        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__["ɵɵelementStart"](2, "app-upload-image-with-preview", 2);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵlistener"]("imageUploaded", function FormComponent_Template_app_upload_image_with_preview_imageUploaded_2_listener($event) {
              return ctx.onImageUploadSuccess($event, ctx.item, "snapshotUrl");
            });

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](3, "app-upload-video", 3);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵlistener"]("videoUploaded", function FormComponent_Template_app_upload_video_videoUploaded_3_listener($event) {
              return ctx.onVideoUploaded($event, ctx.item, "url");
            })("onCapture", function FormComponent_Template_app_upload_video_onCapture_3_listener($event) {
              return ctx.handleOnCapture($event);
            });

            _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"]("picUrl", ctx.item.snapshotUrl);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](1);

            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵproperty"]("videoUrl", ctx.item.url)("showUploadBtn", true);
          }
        },
        directives: [_common_upload_image_with_preview_upload_image_with_preview_component__WEBPACK_IMPORTED_MODULE_3__["UploadImageWithPreviewComponent"], _common_upload_video_upload_video_component__WEBPACK_IMPORTED_MODULE_4__["UploadVideoComponent"]],
        styles: [".model-content[_ngcontent-%COMP%] {\n  width: 100%;\n  height: 100%;\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\n\n.button-right[_ngcontent-%COMP%] {\n  border-style: dotted;\n  border-color: rgb(42, 142, 72);\n  width: 100px;\n  height: 50px;\n  color: rgb(42, 142, 72);\n  background-color: white;\n}\n\n\n.button-wrong[_ngcontent-%COMP%] {\n  border-style: dotted;\n  border-color: rgb(180, 0, 0);\n  width: 100px;\n  height: 50px;\n  color: rgb(180, 0, 0);\n  background-color: white;\n}\n\n\n.button-disable[_ngcontent-%COMP%] {\n  border-style: dotted;\n  border-color: black;\n  width: 100px;\n  height: 50px;\n  color: black;\n  background-color: white;\n}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNyYy9hcHAvc3R5bGUvY29tbW9uX21peGluLmNzcyIsInNyYy9hcHAvZm9ybS9mb3JtLmNvbXBvbmVudC5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0NBRUM7OztBQ0NEO0VBQ0UsV0FBVztFQUNYLFlBQVk7QUFDZDs7O0FBRUE7RUFDRSxXQUFXO0VBQ1gsV0FBVztFQUNYLG9CQUFvQjtFQUNwQixrQkFBa0I7RUFDbEIsaUJBQWlCO0FBQ25COzs7QUFFQTtFQUNFLG1CQUFtQjtFQUNuQixvQkFBb0I7RUFDcEIsYUFBYTtFQUNiLFlBQVk7RUFDWixpQkFBaUI7RUFDakIseUJBQXlCO0VBQ3pCLHVCQUF1QjtFQUN2QiwyQkFBMkI7QUFDN0I7OztBQUdBO0VBQ0UsdUJBQXVCO0VBQ3ZCLHFCQUFxQjtFQUNyQixhQUFhO0VBQ2IsWUFBWTtBQUNkOzs7QUFFQTtFQUNFLG9CQUFvQjtFQUNwQiw4QkFBOEI7RUFDOUIsWUFBWTtFQUNaLFlBQVk7RUFDWix1QkFBdUI7RUFDdkIsdUJBQXVCO0FBQ3pCOzs7QUFFQTtFQUNFLG9CQUFvQjtFQUNwQiw0QkFBNEI7RUFDNUIsWUFBWTtFQUNaLFlBQVk7RUFDWixxQkFBcUI7RUFDckIsdUJBQXVCO0FBQ3pCOzs7QUFFQTtFQUNFLG9CQUFvQjtFQUNwQixtQkFBbUI7RUFDbkIsWUFBWTtFQUNaLFlBQVk7RUFDWixZQUFZO0VBQ1osdUJBQXVCO0FBQ3pCIiwiZmlsZSI6InNyYy9hcHAvZm9ybS9mb3JtLmNvbXBvbmVudC5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyIvKlxuZ2xvYmFsIGNzcyB0byBtaXhpblxuKi9cblxuXG5cbiIsIkBpbXBvcnQgJy4uL3N0eWxlL2NvbW1vbl9taXhpbi5jc3MnO1xuXG5cbi5tb2RlbC1jb250ZW50IHtcbiAgd2lkdGg6IDEwMCU7XG4gIGhlaWdodDogMTAwJTtcbn1cblxuLnJhZGlvUGFpcmUge1xuICBmbG9hdDogbGVmdDtcbiAgbWFyZ2luOiAzcHg7XG4gIGJvcmRlci1zdHlsZTogZGFzaGVkO1xuICBib3JkZXItY29sb3I6ICMwMDA7XG4gIGJvcmRlci13aWR0aDogMXB4O1xufVxuXG4uYm9yZGVyIHtcbiAgYm9yZGVyLXJhZGl1czogMjBweDtcbiAgYm9yZGVyLXN0eWxlOiBkYXNoZWQ7XG4gIHBhZGRpbmc6IDIwcHg7XG4gIG1hcmdpbjogMjBweDtcbiAgLyp3aWR0aDogNTAwcHg7ICovXG4gIC8qLy9ib3JkZXItcmFkaXVzOiAyMHB4OyovXG4gIC8qLy9ib3JkZXItd2lkdGg6IDJweDsqL1xuICAvKi8vYm9yZGVyLWNvbG9yOiAjMDAwMDAwOyovXG59XG5cblxuLmJvcmRlci1saXRlIHtcbiAgYm9yZGVyOiAycHggZGFzaGVkICNkZGQ7XG4gIGJvcmRlci1yYWRpdXM6IDAuNXJlbTtcbiAgcGFkZGluZzogMTBweDtcbiAgbWFyZ2luOiAxMHB4O1xufVxuXG4uYnV0dG9uLXJpZ2h0IHtcbiAgYm9yZGVyLXN0eWxlOiBkb3R0ZWQ7XG4gIGJvcmRlci1jb2xvcjogcmdiKDQyLCAxNDIsIDcyKTtcbiAgd2lkdGg6IDEwMHB4O1xuICBoZWlnaHQ6IDUwcHg7XG4gIGNvbG9yOiByZ2IoNDIsIDE0MiwgNzIpO1xuICBiYWNrZ3JvdW5kLWNvbG9yOiB3aGl0ZTtcbn1cblxuLmJ1dHRvbi13cm9uZyB7XG4gIGJvcmRlci1zdHlsZTogZG90dGVkO1xuICBib3JkZXItY29sb3I6IHJnYigxODAsIDAsIDApO1xuICB3aWR0aDogMTAwcHg7XG4gIGhlaWdodDogNTBweDtcbiAgY29sb3I6IHJnYigxODAsIDAsIDApO1xuICBiYWNrZ3JvdW5kLWNvbG9yOiB3aGl0ZTtcbn1cblxuLmJ1dHRvbi1kaXNhYmxlIHtcbiAgYm9yZGVyLXN0eWxlOiBkb3R0ZWQ7XG4gIGJvcmRlci1jb2xvcjogYmxhY2s7XG4gIHdpZHRoOiAxMDBweDtcbiAgaGVpZ2h0OiA1MHB4O1xuICBjb2xvcjogYmxhY2s7XG4gIGJhY2tncm91bmQtY29sb3I6IHdoaXRlO1xufSJdfQ== */"]
      });
      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 _super22 = _createSuper(MySprite);

      function MySprite() {
        var _this46;

        _classCallCheck(this, MySprite);

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

      _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 _this47 = 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) {
            _this47.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 (_MySprite17) {
      _inherits(ColorSpr, _MySprite17);

      var _super23 = _createSuper(ColorSpr);

      function ColorSpr() {
        var _this48;

        _classCallCheck(this, ColorSpr);

        _this48 = _super23.apply(this, arguments);
        _this48.r = 0;
        _this48.g = 0;
        _this48.b = 0;
        return _this48;
      }

      _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 (_MySprite18) {
      _inherits(GrayscaleSpr, _MySprite18);

      var _super24 = _createSuper(GrayscaleSpr);

      function GrayscaleSpr() {
        var _this49;

        _classCallCheck(this, GrayscaleSpr);

        _this49 = _super24.apply(this, arguments);
        _this49.grayScale = 120;
        return _this49;
      }

      _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 (_MySprite19) {
      _inherits(BitMapLabel, _MySprite19);

      var _super25 = _createSuper(BitMapLabel);

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

        return _super25.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 _i3 = 0, _labelArr2 = labelArr; _i3 < _labelArr2.length; _i3++) {
            var label = _labelArr2[_i3];
            label.x = offX;
            offX += label.width;
          }

          this.labelArr = labelArr;
        }
      }]);

      return BitMapLabel;
    }(MySprite);

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

      var _super26 = _createSuper(Label);

      function Label() {
        var _this50;

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

        _classCallCheck(this, Label);

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

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

        _this50._outlineFlag = false;

        _this50.init();

        return _this50;
      }

      _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 _super27 = _createSuper(RichTextOld);

      function RichTextOld() {
        var _this51;

        _classCallCheck(this, RichTextOld);

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

      _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 _super28 = _createSuper(RichText);

      function RichText(ctx) {
        var _this52;

        _classCallCheck(this, RichText);

        _this52 = _super28.call(this, ctx);
        _this52.disH = 30; // this.dataArr = dataArr;

        return _this52;
      }

      _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 (_MySprite21) {
      _inherits(LineRect, _MySprite21);

      var _super29 = _createSuper(LineRect);

      function LineRect() {
        var _this53;

        _classCallCheck(this, LineRect);

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

      _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 (_MySprite22) {
      _inherits(ShapeRect, _MySprite22);

      var _super30 = _createSuper(ShapeRect);

      function ShapeRect() {
        var _this54;

        _classCallCheck(this, ShapeRect);

        _this54 = _super30.apply(this, arguments);
        _this54.fillColor = '#FF0000';
        return _this54;
      }

      _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 (_MySprite23) {
      _inherits(ShapeCircle, _MySprite23);

      var _super31 = _createSuper(ShapeCircle);

      function ShapeCircle() {
        var _this55;

        _classCallCheck(this, ShapeCircle);

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

      _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 (_MySprite24) {
      _inherits(ShapeRectNew, _MySprite24);

      var _super32 = _createSuper(ShapeRectNew);

      function ShapeRectNew() {
        var _this56;

        _classCallCheck(this, ShapeRectNew);

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

      _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 (_MySprite25) {
      _inherits(MyAnimation, _MySprite25);

      var _super33 = _createSuper(MyAnimation);

      function MyAnimation() {
        var _this57;

        _classCallCheck(this, MyAnimation);

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

      _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 _this58 = this;

          var spr = new MySprite(this.ctx);
          spr.load(url).then(function (img) {
            _this58._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 _this59 = this;

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

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


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


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


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


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


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

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

              _this60.init();

              _this60.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 _this61 = this;

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

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

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

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

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

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

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


            var firstTouch = true;

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

              setMxMyByTouch(e);

              _this61.mapDown(e);
            };

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

              _this61.mapMove(e);
            };

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

              _this61.mapUp(e);
            };

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

              setMxMyByMouse(e);

              _this61.mapDown(e);
            };

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

              _this61.mapMove(e);
            };

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

              _this61.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 _this62 = this;

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

              pr.push(p);
            });
            this.rawAudios.forEach(function (value, key) {
              var a = _this62.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 _this63 = 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 () {
              _this63.canTouch = true;
              _this63.curPic = _this63.pic1;
            });
          }
        }, {
          key: "nextPage",
          value: function nextPage() {
            var _this64 = 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 () {
              _this64.canTouch = true;
              _this64.curPic = _this64.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/dpe_video_editor/form_angular/src/main.ts */
    "./src/main.ts");
    /***/
  },

  /***/
  1:
  /*!************************!*\
    !*** crypto (ignored) ***!
    \************************/

  /*! no static exports found */

  /***/
  function _(module, exports) {
    /* (ignored) */

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