@fonixtree/magic-design 2.0.162 → 2.0.163

package/lib/common/Video/index.js

@@ -0,0 +1,804 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.createVideoModal = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _index = _interopRequireDefault(require("./RateComponent/index"));
+
+var _index2 = _interopRequireDefault(require("./QualityComponent/index"));
+
+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) {
+    return __awaiter(void 0, void 0, void 0, function () {
+      var components, res, qualitySource, source, skinLayout, controlBar;
+      return __generator(this, function (_a) {
+        var _window$Aliplayer;
+
+        switch (_a.label) {
+          case 0:
+            components = [{
+              name: 'RateComponent',
+              type: _index["default"]
+            }];
+            return [4
+            /*yield*/
+            , (0, _commonUtil.commonFetch)('/designer/v1/content/' + opts.sourceId, {}, 'GET')];
+
+          case 1:
+            res = _a.sent();
+            qualitySource = {};
+            source = opts.source;
+
+            if (res.smallImgUrl) {
+              qualitySource['480P'] = res.smallImgUrl;
+            }
+
+            if (res.url) {
+              qualitySource['720P'] = res.url;
+            }
+
+            if (res.bigImgUrl) {
+              qualitySource['1080P'] = res.bigImgUrl;
+            }
+
+            if (Object.keys(qualitySource).length) {
+              source = JSON.stringify(qualitySource);
+              components.push({
+                name: 'QualityComponent',
+                type: _index2["default"]
+              });
+            }
+
+            skinLayout = [{
+              name: 'H5Loading',
+              align: 'cc'
+            }, {
+              name: 'errorDisplay',
+              align: 'tlabs',
+              x: 0,
+              y: 0
+            }, {
+              name: 'tooltip',
+              align: 'blabs',
+              x: 0,
+              y: 56
+            }, {
+              name: 'thumbnail'
+            }];
+            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
+              });
+            }
+
+            console.log('source: ', source);
+            new window.Aliplayer((_window$Aliplayer = {
+              id: 'video' + domId,
+              source: 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", components), _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);
+              }
+
+              if (Object.keys(qualitySource).length) {
+                var defaultKey = Object.keys(qualitySource)[0];
+
+                if (qualitySource['720P']) {
+                  defaultKey = '720P';
+                } else {
+                  defaultKey = '480P';
+                }
+
+                player.getComponent('QualityComponent').setCurrentQuality(defaultKey, defaultKey);
+              }
+
+              resolve(player);
+            });
+            return [2
+            /*return*/
+            ];
+        }
+      });
+    });
+  });
+};
+
+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;