@fonixtree/magic-design 0.0.110 → 0.0.111

package/es/common/Video/index.js

@@ -0,0 +1,398 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _commonUtil = require("src/components/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
+    };
+  }
+};
+
+var createVideo = function createVideo(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: '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), _window$Aliplayer), function (player) {
+      if (!opts.videoSound) {
+        player.setVolume(0);
+      }
+
+      if (opts.speed) {
+        player.setSpeed(opts.speed);
+      }
+
+      if (opts.startAt) {
+        player.seek(opts.startAt);
+      }
+
+      resolve(player);
+    });
+  });
+};
+
+var AComponent =
+/** @class */
+function (_super) {
+  __extends(AComponent, _super);
+
+  function AComponent() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.state = {};
+    _this.player = 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);
+      modelWrap.appendChild(shadowWrap);
+      modelWrap.appendChild(contentWrap);
+      document.body.appendChild(modelWrap);
+      createVideo('-modal-' + videoId, __assign(__assign({}, _this.props.opts), {
+        autoplay: true
+      }));
+    };
+
+    _this.getInit = function () {
+      return __awaiter(_this, void 0, void 0, function () {
+        var _a;
+
+        return __generator(this, function (_b) {
+          switch (_b.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:
+              _b.sent();
+
+              _b.label = 2;
+
+            case 2:
+              _a = this;
+              return [4
+              /*yield*/
+              , createVideo(this.props.videoId, this.props.opts)];
+
+            case 3:
+              _a.player = _b.sent();
+              return [2
+              /*return*/
+              ];
+          }
+        });
+      });
+    };
+
+    _this.fullPlay = function (type) {
+      if (type == 'h5') {
+        _this.player.fullscreenService.requestFullScreen();
+      }
+
+      if (type == 'pc') {
+        _this.createVideoModal(_this.props.videoId);
+      }
+    };
+
+    return _this;
+  }
+
+  AComponent.prototype.componentDidMount = function () {
+    this.getInit();
+  };
+
+  AComponent.prototype.render = function () {
+    var videoId = this.props.videoId;
+    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "video-container"
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      id: 'video' + videoId
+    })));
+  };
+
+  AComponent.defaultProps = {
+    title: 'title'
+  };
+  return AComponent;
+}(_react["default"].Component);
+
+var _default = AComponent;
+exports["default"] = _default;

package/es/common/Video/index.less

@@ -0,0 +1,46 @@
+.video-container {
+  position: relative;
+  height: 100%;
+  background: url(./background.png);
+  background-size: cover;
+  // .prism-player .prism-liveshift-progress,
+  // .prism-player .prism-progress {
+  //   bottom: 10px !important;
+  // }
+
+  .prism-player .prism-cover {
+    z-index: 0;
+  }
+}
+
+.pc-video-modal-wrap {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .video-shadow-wrap {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 1000;
+    opacity: .4;
+    background-color: #000;
+  }
+
+  .content-wrap {
+    width: 900px;
+    height: 600px;
+    padding: 10px;
+    background: rgb(255 255 255);
+    border-radius: 5px;
+    z-index: 1001;
+    position: fixed;
+  }
+}

package/es/common/VideoUpload/index.js

@@ -0,0 +1,157 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _videoUploadIcon = _interopRequireDefault(require("./video-upload-icon.png"));
+
+var _ImageModal = _interopRequireDefault(require("../ImageModal"));
+
+var _const = require("../ImageModal/const");
+
+var _Iconfont = _interopRequireDefault(require("../Iconfont"));
+
+var _locale = require("../../locale");
+
+require("./index.less");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": 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 debug = require('debug')('worker:VideoUpload');
+
+var VideoUpload =
+/** @class */
+function (_super) {
+  __extends(VideoUpload, _super);
+
+  function VideoUpload() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.state = {
+      visible: false
+    };
+
+    _this.onModalOk = function (data) {
+      _this.setState({
+        visible: false
+      });
+
+      if ((data === null || data === void 0 ? void 0 : data.length) > 0) {
+        _this.props.onChange(data[0].url);
+      }
+    };
+
+    return _this;
+  }
+
+  VideoUpload.prototype.render = function () {
+    var _this = this;
+
+    var _a = this.props.value,
+        value = _a === void 0 ? '/get/resource/20220615/video/haha1536909657474453504.mp4' : _a;
+    var visible = this.state.visible;
+    return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "video-upload-container",
+      onClick: function onClick() {
+        _this.setState({
+          visible: true
+        });
+      }
+    }, value ? /*#__PURE__*/_react["default"].createElement("div", {
+      className: "video-selected-wrap",
+      onClick: function onClick() {
+        _this.setState({
+          visible: true
+        });
+      }
+    }, /*#__PURE__*/_react["default"].createElement("video", {
+      src: value
+    }), /*#__PURE__*/_react["default"].createElement("div", {
+      className: "btn-icons-modal",
+      onClick: function onClick(e) {
+        return e.stopPropagation();
+      }
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "btn-edit",
+      onClick: function onClick() {
+        _this.setState({
+          visible: true
+        });
+      }
+    }, /*#__PURE__*/_react["default"].createElement(_Iconfont["default"], {
+      color: "#fff",
+      onClick: function onClick() {},
+      size: 25,
+      type: "icon-setting"
+    }), (0, _locale.i18n)('EDIT')), /*#__PURE__*/_react["default"].createElement("span", {
+      className: "line"
+    }), /*#__PURE__*/_react["default"].createElement("div", {
+      className: "btn-del",
+      onClick: function onClick() {
+        _this.props.onChange('');
+      }
+    }, /*#__PURE__*/_react["default"].createElement(_Iconfont["default"], {
+      color: "#fff",
+      onClick: function onClick() {},
+      size: 25,
+      type: "icon-delete1"
+    }), (0, _locale.i18n)('DELETE')))) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("img", {
+      alt: "",
+      src: _videoUploadIcon["default"]
+    }), /*#__PURE__*/_react["default"].createElement("div", {
+      className: "title"
+    }, "Click or drag file to this area to upload"), /*#__PURE__*/_react["default"].createElement("div", {
+      className: "subtitle"
+    }, "Support for a single or bulk upload. Strictly prohibit from uploading company data or other band files"))), visible && /*#__PURE__*/_react["default"].createElement(_ImageModal["default"], {
+      onCancel: function onCancel() {
+        _this.setState({
+          visible: false
+        });
+      },
+      onOk: this.onModalOk,
+      type: _const.contentCatgTypeMap.VIDEO,
+      visible: true
+    }));
+  };
+
+  VideoUpload.defaultProps = {
+    value: '/get/resource/20220615/video/haha1536909657474453504.mp4',
+    onChange: function onChange(v) {
+      console.log(v);
+    }
+  };
+  return VideoUpload;
+}(_react["default"].Component);
+
+var _default = VideoUpload;
+exports["default"] = _default;

package/es/common/VideoUpload/index.less

@@ -0,0 +1,113 @@
+.video-upload-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: #F5F6F7;
+  border: 1px dashed #C1C9D7;
+  border-radius: 8px;
+  margin-bottom: 20px;
+  cursor: pointer;
+  overflow: hidden;
+
+
+
+  .video-selected-wrap {
+    width: 100%;
+    height: 100%;
+    position: relative;
+
+    video {
+      width: 100%;
+      height: 100%;
+    }
+
+    &:hover {
+      .btn-icons-modal {
+        display: flex;
+        transition: all .25s;
+      }
+    }
+
+    .btn-icons-modal {
+      display: none;
+      position: absolute;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      font-family: 'Open Sans';
+      font-style: normal;
+      font-weight: 400;
+      font-size: 16px;
+      line-height: 24px;
+      color: #FFFFFF;
+      background: rgba(35, 47, 70, 0.6);
+      align-items: center;
+      justify-content: center;
+
+      .btn-edit {
+        display: flex;
+        align-items: center;
+        margin-right: 20px;
+        cursor: pointer;
+
+        >span {
+          margin-right: 5px;
+        }
+      }
+
+      .btn-del {
+        display: flex;
+        align-items: center;
+        margin-left: 20px;
+        cursor: pointer;
+
+        >span {
+          margin-right: 5px;
+        }
+      }
+
+      .line {
+        display: inline-block;
+        width: 1px;
+        height: 16px;
+        background: rgba(255, 255, 255, 0.5);
+      }
+    }
+
+    &>img {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+    }
+  }
+
+  img {
+    width: 60px;
+    height: 60px;
+    margin-top: 20px;
+  }
+
+  .title {
+    font-family: 'Open Sans';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 22px;
+    text-align: center;
+    color: #232F46;
+    margin: 10px 0;
+    margin-bottom: 10px;
+  }
+
+  .subtitle {
+    font-family: 'Open Sans';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 20px;
+    text-align: center;
+    color: #8493AF;
+    margin-bottom: 20px;
+  }
+}