@fonixtree/magic-design 2.0.54 → 2.0.60

package/lib/common/Video/index.js

@@ -1,748 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = exports.createVideoModal = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _components = _interopRequireDefault(require("./components"));
-
-var _closeImg = _interopRequireDefault(require("./closeImg.png"));
-
-var _commonUtil = require("../../utils/commonUtil");
-
-require("./index.less");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-var __extends = void 0 && (void 0).__extends || function () {
-  var _extendStatics = function extendStatics(d, b) {
-    _extendStatics = Object.setPrototypeOf || {
-      __proto__: []
-    } instanceof Array && function (d, b) {
-      d.__proto__ = b;
-    } || function (d, b) {
-      for (var p in b) {
-        if (b.hasOwnProperty(p)) d[p] = b[p];
-      }
-    };
-
-    return _extendStatics(d, b);
-  };
-
-  return function (d, b) {
-    _extendStatics(d, b);
-
-    function __() {
-      this.constructor = d;
-    }
-
-    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-  };
-}();
-
-var __assign = void 0 && (void 0).__assign || function () {
-  __assign = Object.assign || function (t) {
-    for (var s, i = 1, n = arguments.length; i < n; i++) {
-      s = arguments[i];
-
-      for (var p in s) {
-        if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-      }
-    }
-
-    return t;
-  };
-
-  return __assign.apply(this, arguments);
-};
-
-var __awaiter = void 0 && (void 0).__awaiter || function (thisArg, _arguments, P, generator) {
-  function adopt(value) {
-    return value instanceof P ? value : new P(function (resolve) {
-      resolve(value);
-    });
-  }
-
-  return new (P || (P = Promise))(function (resolve, reject) {
-    function fulfilled(value) {
-      try {
-        step(generator.next(value));
-      } catch (e) {
-        reject(e);
-      }
-    }
-
-    function rejected(value) {
-      try {
-        step(generator["throw"](value));
-      } catch (e) {
-        reject(e);
-      }
-    }
-
-    function step(result) {
-      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
-    }
-
-    step((generator = generator.apply(thisArg, _arguments || [])).next());
-  });
-};
-
-var __generator = void 0 && (void 0).__generator || function (thisArg, body) {
-  var _ = {
-    label: 0,
-    sent: function sent() {
-      if (t[0] & 1) throw t[1];
-      return t[1];
-    },
-    trys: [],
-    ops: []
-  },
-      f,
-      y,
-      t,
-      g;
-  return g = {
-    next: verb(0),
-    "throw": verb(1),
-    "return": verb(2)
-  }, typeof Symbol === "function" && (g[Symbol.iterator] = function () {
-    return this;
-  }), g;
-
-  function verb(n) {
-    return function (v) {
-      return step([n, v]);
-    };
-  }
-
-  function step(op) {
-    if (f) throw new TypeError("Generator is already executing.");
-
-    while (_) {
-      try {
-        if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-        if (y = 0, t) op = [op[0] & 2, t.value];
-
-        switch (op[0]) {
-          case 0:
-          case 1:
-            t = op;
-            break;
-
-          case 4:
-            _.label++;
-            return {
-              value: op[1],
-              done: false
-            };
-
-          case 5:
-            _.label++;
-            y = op[1];
-            op = [0];
-            continue;
-
-          case 7:
-            op = _.ops.pop();
-
-            _.trys.pop();
-
-            continue;
-
-          default:
-            if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
-              _ = 0;
-              continue;
-            }
-
-            if (op[0] === 3 && (!t || op[1] > t[0] && op[1] < t[3])) {
-              _.label = op[1];
-              break;
-            }
-
-            if (op[0] === 6 && _.label < t[1]) {
-              _.label = t[1];
-              t = op;
-              break;
-            }
-
-            if (t && _.label < t[2]) {
-              _.label = t[2];
-
-              _.ops.push(op);
-
-              break;
-            }
-
-            if (t[2]) _.ops.pop();
-
-            _.trys.pop();
-
-            continue;
-        }
-
-        op = body.call(thisArg, _);
-      } catch (e) {
-        op = [6, e];
-        y = 0;
-      } finally {
-        f = t = 0;
-      }
-    }
-
-    if (op[0] & 5) throw op[1];
-    return {
-      value: op[0] ? op[1] : void 0,
-      done: true
-    };
-  }
-};
-/* eslint-disable @typescript-eslint/no-unused-expressions */
-
-
-/** 检查youtube依赖包 */
-var checkYoutuVIdeo = function checkYoutuVIdeo() {
-  return __awaiter(void 0, void 0, void 0, function () {
-    return __generator(this, function (_a) {
-      switch (_a.label) {
-        case 0:
-          if (!!window.YT) return [3
-          /*break*/
-          , 2];
-          return [4
-          /*yield*/
-          , Promise.all([(0, _commonUtil.importAsync)('https://www.youtube.com/iframe_api', 'js')])];
-
-        case 1:
-          _a.sent();
-
-          _a.label = 2;
-
-        case 2:
-          return [2
-          /*return*/
-          ];
-      }
-    });
-  });
-};
-/** 检查Ali依赖包 */
-
-
-var checkAliVIdeo = function checkAliVIdeo() {
-  return __awaiter(void 0, void 0, void 0, function () {
-    return __generator(this, function (_a) {
-      switch (_a.label) {
-        case 0:
-          if (!!window.Aliplayer) return [3
-          /*break*/
-          , 2];
-          return [4
-          /*yield*/
-          , Promise.all([(0, _commonUtil.importAsync)('https://g.alicdn.com/de/prismplayer/2.13.2/aliplayer-min.js'), (0, _commonUtil.importAsync)('https://g.alicdn.com/de/prismplayer/2.13.2/skins/default/aliplayer-min.css')])];
-
-        case 1:
-          _a.sent();
-
-          _a.label = 2;
-
-        case 2:
-          return [2
-          /*return*/
-          ];
-      }
-    });
-  });
-};
-
-var createAliVideo = function createAliVideo(domId, opts) {
-  if (opts === void 0) {
-    opts = {};
-  }
-
-  return new Promise(function (resolve) {
-    var _window$Aliplayer;
-
-    var skinLayout = [{
-      name: 'H5Loading',
-      align: 'cc'
-    }, {
-      name: 'errorDisplay',
-      align: 'tlabs',
-      x: 0,
-      y: 0
-    }, {
-      name: 'tooltip',
-      align: 'blabs',
-      x: 0,
-      y: 56
-    }, {
-      name: 'thumbnail'
-    }];
-    var controlBar = {
-      name: 'controlBar',
-      align: 'blabs',
-      x: 0,
-      y: 0,
-      children: [{
-        name: 'playButton',
-        align: 'tl',
-        x: 15,
-        y: 12
-      }, {
-        name: 'timeDisplay',
-        align: 'tl',
-        x: 10,
-        y: 7
-      }, {
-        name: 'volume',
-        align: 'tr',
-        x: 5,
-        y: 10
-      }, {
-        name: 'fullScreenButton',
-        align: 'tr',
-        x: 10,
-        y: 12
-      }]
-    };
-    skinLayout.push(controlBar);
-
-    if (opts.progressBar) {
-      controlBar.children.push({
-        name: 'progress',
-        align: 'blabs',
-        x: 0,
-        y: 10
-      });
-    }
-
-    new window.Aliplayer((_window$Aliplayer = {
-      id: 'video' + domId,
-      source: opts.source,
-      cover: opts.cover,
-      width: '100%',
-      height: '100%',
-      autoplay: false,
-      isLive: false,
-      rePlay: false,
-      playsinline: true,
-      preload: true,
-      controlBarVisibility: 'hover',
-      useH5Prism: true,
-      skinLayout: skinLayout
-    }, _defineProperty(_window$Aliplayer, "autoplay", opts.autoplay), _defineProperty(_window$Aliplayer, "rePlay", opts.loop), _defineProperty(_window$Aliplayer, "components", [{
-      name: 'RateComponent',
-      type: _components["default"]
-    }]), _window$Aliplayer), function (player) {
-      if (!opts.videoSound) {
-        player.setVolume(0);
-      }
-
-      if (opts.speed) {
-        var speed = Number(opts.speed).toFixed(1);
-        player.setSpeed(speed);
-        player._speed = speed;
-      }
-
-      if (opts.startAt) {
-        player.seek(opts.startAt);
-      }
-
-      resolve(player);
-    });
-  });
-};
-
-var createYoutuVideo = function createYoutuVideo(domId, opts) {
-  if (opts === void 0) {
-    opts = {};
-  }
-
-  return __awaiter(void 0, void 0, void 0, function () {
-    var videoId;
-    return __generator(this, function (_a) {
-      switch (_a.label) {
-        case 0:
-          videoId = opts.source.split('youtu.be/')[1];
-          return [4
-          /*yield*/
-          , (0, _commonUtil.asyncNextTick)(function () {
-            return __awaiter(void 0, void 0, void 0, function () {
-              var player;
-              return __generator(this, function (_a) {
-                player = new YT.Player('video' + domId, {
-                  height: '100%',
-                  width: '100%',
-                  videoId: videoId,
-                  events: {
-                    onReady: function onReady() {
-                      if (!opts.videoSound) {
-                        player.mute();
-                      }
-
-                      if (opts.videoSound) {
-                        player.unMute();
-                      }
-
-                      if (opts.speed) {
-                        player.setPlaybackRate(opts.speed);
-                      }
-
-                      if (opts.startAt) {
-                        player.seekTo(opts.startAt);
-                        player.pauseVideo();
-                      }
-
-                      if (opts.loop) {
-                        player.setLoop(true);
-                      }
-
-                      if (opts.autoplay) {
-                        player.playVideo();
-                      }
-                    }
-                  }
-                });
-                return [2
-                /*return*/
-                , player];
-              });
-            });
-          }, 500, 10)];
-
-        case 1:
-          return [2
-          /*return*/
-          , _a.sent()];
-      }
-    });
-  });
-};
-
-var createVideo = function createVideo(type, domId, opts) {
-  if (opts === void 0) {
-    opts = {};
-  }
-
-  return __awaiter(void 0, void 0, void 0, function () {
-    return __generator(this, function (_a) {
-      switch (_a.label) {
-        case 0:
-          if (!(type == 'ali')) return [3
-          /*break*/
-          , 2];
-          return [4
-          /*yield*/
-          , createAliVideo(domId, opts)];
-
-        case 1:
-          return [2
-          /*return*/
-          , _a.sent()];
-
-        case 2:
-          if (!(type == 'youtu')) return [3
-          /*break*/
-          , 4];
-          return [4
-          /*yield*/
-          , createYoutuVideo(domId, opts)];
-
-        case 3:
-          return [2
-          /*return*/
-          , _a.sent()];
-
-        case 4:
-          return [2
-          /*return*/
-          ];
-      }
-    });
-  });
-};
-
-var getVideoType = function getVideoType(opts) {
-  if (/youtu/.test(opts.source)) {
-    return 'youtu';
-  }
-
-  return 'ali';
-};
-/** 创建视频弹框显示 */
-
-
-var createVideoModal = function createVideoModal(videoId, opts) {
-  return __awaiter(void 0, void 0, void 0, function () {
-    var modelWrap, shadowWrap, contentWrap, videoDom, closeImgDom, type;
-    return __generator(this, function (_a) {
-      switch (_a.label) {
-        case 0:
-          modelWrap = document.createElement('div');
-          modelWrap.className = 'pc-video-modal-wrap';
-          modelWrap.setAttribute('video-id', videoId);
-          shadowWrap = document.createElement('div');
-          shadowWrap.className = 'video-shadow-wrap';
-
-          shadowWrap.onclick = function () {
-            var _a;
-
-            (_a = document.querySelector("[video-id=\"" + videoId + "\"]")) === null || _a === void 0 ? void 0 : _a.remove();
-          };
-
-          contentWrap = document.createElement('div');
-          contentWrap.className = 'content-wrap';
-          videoDom = document.createElement('div');
-          videoDom.id = 'video-modal-' + videoId;
-          contentWrap.appendChild(videoDom);
-          closeImgDom = document.createElement('img');
-          closeImgDom.src = _closeImg["default"];
-          closeImgDom.className = 'close-img-wrap';
-
-          closeImgDom.onclick = function () {
-            var _a;
-
-            (_a = document.querySelector("[video-id=\"" + videoId + "\"]")) === null || _a === void 0 ? void 0 : _a.remove();
-          };
-
-          contentWrap.appendChild(closeImgDom);
-          modelWrap.appendChild(shadowWrap);
-          modelWrap.appendChild(contentWrap);
-          (document.querySelector('[magic_design]') || document.body).appendChild(modelWrap);
-          type = getVideoType(opts);
-          if (!(type == 'youtu')) return [3
-          /*break*/
-          , 2];
-          return [4
-          /*yield*/
-          , checkYoutuVIdeo()];
-
-        case 1:
-          _a.sent();
-
-          _a.label = 2;
-
-        case 2:
-          if (!(type == 'ali')) return [3
-          /*break*/
-          , 4];
-          return [4
-          /*yield*/
-          , checkAliVIdeo()];
-
-        case 3:
-          _a.sent();
-
-          _a.label = 4;
-
-        case 4:
-          createVideo(type, '-modal-' + videoId, opts);
-          return [2
-          /*return*/
-          ];
-      }
-    });
-  });
-};
-
-exports.createVideoModal = createVideoModal;
-
-var Video =
-/** @class */
-function (_super) {
-  __extends(Video, _super);
-
-  function Video() {
-    var _this = _super !== null && _super.apply(this, arguments) || this;
-
-    _this.state = {};
-    _this.player = {
-      play: function play() {
-        if (_this.aliPlayer) {
-          _this.aliPlayer.play();
-        }
-
-        if (_this.ytPlayer) {
-          _this.ytPlayer.playVideo();
-        }
-      },
-      pause: function pause() {
-        if (_this.aliPlayer) {
-          _this.aliPlayer.pause();
-        }
-
-        if (_this.ytPlayer) {
-          _this.ytPlayer.pauseVideo();
-        }
-      }
-    };
-    /** 阿里播放器 */
-
-    _this.aliPlayer = null;
-    /** YouTube播放器 */
-
-    _this.ytPlayer = null;
-    _this.timer = null;
-    /** 创建视频弹框显示 */
-
-    _this.createVideoModal = function (videoId) {
-      var modelWrap = document.createElement('div');
-      modelWrap.className = 'pc-video-modal-wrap';
-      modelWrap.setAttribute('video-id', videoId);
-      var shadowWrap = document.createElement('div');
-      shadowWrap.className = 'video-shadow-wrap';
-
-      shadowWrap.onclick = function () {
-        var _a;
-
-        (_a = document.querySelector("[video-id=\"" + videoId + "\"]")) === null || _a === void 0 ? void 0 : _a.remove();
-      };
-
-      var contentWrap = document.createElement('div');
-      contentWrap.className = 'content-wrap';
-      var videoDom = document.createElement('div');
-      videoDom.id = 'video-modal-' + videoId;
-      contentWrap.appendChild(videoDom);
-      var closeImgDom = document.createElement('img');
-      closeImgDom.src = _closeImg["default"];
-      closeImgDom.className = 'close-img-wrap';
-
-      closeImgDom.onclick = function () {
-        var _a;
-
-        (_a = document.querySelector("[video-id=\"" + videoId + "\"]")) === null || _a === void 0 ? void 0 : _a.remove();
-      };
-
-      contentWrap.appendChild(closeImgDom);
-      modelWrap.appendChild(shadowWrap);
-      modelWrap.appendChild(contentWrap);
-      (document.querySelector('[magic_design]') || document.body).appendChild(modelWrap);
-      var type = getVideoType(_this.props.opts);
-      createVideo(type, '-modal-' + videoId, __assign(__assign({}, _this.props.opts), {
-        autoplay: true
-      }));
-    };
-
-    _this.getInit = function () {
-      return __awaiter(_this, void 0, void 0, function () {
-        var videoType, _a, _b;
-
-        var _this = this;
-
-        return __generator(this, function (_c) {
-          switch (_c.label) {
-            case 0:
-              if (!this.props.opts.source) return [3
-              /*break*/
-              , 6];
-              videoType = getVideoType(this.props.opts);
-              if (!(videoType == 'youtu')) return [3
-              /*break*/
-              , 3];
-              return [4
-              /*yield*/
-              , checkYoutuVIdeo()];
-
-            case 1:
-              _c.sent();
-
-              _a = this;
-              return [4
-              /*yield*/
-              , createVideo('youtu', this.props.videoId, this.props.opts)];
-
-            case 2:
-              _a.ytPlayer = _c.sent();
-              this.ytPlayer.addEventListener('onStateChange', function (event) {
-                if (!_this.props.opts.loop) {
-                  if (event.data == YT.PlayerState.ENDED) {
-                    console.log('youtu end');
-
-                    _this.props.onEnd();
-                  }
-                }
-              });
-              _c.label = 3;
-
-            case 3:
-              if (!(videoType == 'ali')) return [3
-              /*break*/
-              , 6];
-              return [4
-              /*yield*/
-              , checkAliVIdeo()];
-
-            case 4:
-              _c.sent();
-
-              _b = this;
-              return [4
-              /*yield*/
-              , createVideo('ali', this.props.videoId, this.props.opts)];
-
-            case 5:
-              _b.aliPlayer = _c.sent();
-              this.aliPlayer.on('ended', function () {
-                if (!_this.props.opts.loop) {
-                  console.log('ali end');
-
-                  _this.props.onEnd();
-                }
-              });
-              _c.label = 6;
-
-            case 6:
-              return [2
-              /*return*/
-              ];
-          }
-        });
-      });
-    };
-
-    _this.fullPlay = function () {
-      createVideoModal(_this.props.videoId, __assign(__assign({}, _this.props.opts), {
-        autoplay: true
-      }));
-    };
-
-    return _this;
-  }
-
-  Video.prototype.componentDidMount = function () {
-    this.timer = setTimeout(this.getInit, 1000);
-  };
-
-  Video.prototype.componentWillUnmount = function () {
-    this.timer && clearTimeout(this.timer);
-  };
-
-  Video.prototype.render = function () {
-    var _a = this.props,
-        videoId = _a.videoId,
-        opts = _a.opts,
-        play = _a.play;
-    return /*#__PURE__*/_react["default"].createElement("div", {
-      className: "video-container"
-    }, opts.source ? /*#__PURE__*/_react["default"].createElement("div", {
-      className: "video-wrap",
-      id: 'video' + videoId
-    }) : null, !play && opts.cover && /*#__PURE__*/_react["default"].createElement("img", {
-      className: "video-cover-img",
-      src: opts.cover
-    }));
-  };
-
-  Video.defaultProps = {};
-  return Video;
-}(_react["default"].Component);
-
-var _default = Video;
-exports["default"] = _default;