@titaui/pc 1.10.7 → 1.10.8-2.beta-1

package/lib/components/video-modal/index.css

@@ -1,213 +1,83 @@
-.titaui-pc-video-modal__box {
+.titaui-pc-video-modal__full {
   position: relative;
-  height: 471px;
-  border-bottom-left-radius: 24px;
-  border-bottom-right-radius: 24px;
-  overflow: hidden;
-  cursor: pointer;
-}
-
-.titaui-pc-video-modal__mask1 {
-  opacity: 0;
-  transition: 0.5s;
-  position: absolute;
-  top: 0;
-  width: 840px;
-  height: 62px;
-  background: linear-gradient(0deg, rgba(20, 28, 40, 0) 0%, #5a6068 100%);
-}
-
-.titaui-pc-video-modal__mask1--show {
-  opacity: 1;
-  transition: 0.5s;
-}
-
-.titaui-pc-video-modal__mask2 {
-  opacity: 0;
-  transition: 0.5s;
-  position: absolute;
-  bottom: 0;
-  width: 840px;
-  height: 62px;
-  background: linear-gradient(180deg, rgba(20, 28, 40, 0) 0%, #5a6068 100%);
-}
-
-.titaui-pc-video-modal__mask2--show {
-  opacity: 1;
-  transition: 0.5s;
-}
-
-.titaui-pc-video-modal__video {
-  width: 840px;
-  height: 471px;
-}
-
-.titaui-pc-video-modal__controls {
-  opacity: 0;
-  transition: 0.5s;
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 16px 32px 16px 32px;
-  box-sizing: border-box;
-  position: absolute;
-  bottom: 0;
-  z-index: 2;
-}
-
-.titaui-pc-video-modal__controls--show {
-  opacity: 1;
-  transition: 0.5s;
 }
 
-.titaui-pc-video-modal__controls-left {
+.titaui-pc-video-modal__full-control {
   display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.titaui-pc-video-modal__controls-button {
+  cursor: pointer;
+  margin-left: 6px;
   width: 24px;
   height: 24px;
   border-radius: 12px;
-  display: inline-flex;
   align-items: center;
   justify-content: center;
+  z-index: 2;
 }
 
-.titaui-pc-video-modal__controls-button:hover {
+.titaui-pc-video-modal__full-control:hover {
   background: rgba(20, 28, 40, 0.6);
 }
 
-.titaui-pc-video-modal__controls-play {
-  width: 16px;
-  height: 16px;
-  cursor: pointer;
-}
-
-.titaui-pc-video-modal__controls-time {
-  font-size: 12px;
-  color: #ffffff;
-  line-height: 18px;
-}
-
-.titaui-pc-video-modal__controls-time:nth-of-type(1) {
-  margin-left: 6px;
-}
-
-.titaui-pc-video-modal__controls-muted {
+.titaui-pc-video-modal__full-control > img {
   width: 16px;
   height: 16px;
 }
 
-.titaui-pc-video-modal__controls-volume {
-  display: inline-flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 8px;
-  box-sizing: border-box;
-  width: 72px;
-  height: 22px;
-  background: rgba(20, 28, 40, 0.6);
-  border-radius: 12px;
-}
-
-.titaui-pc-video-modal__controls-volume-progress {
+.titaui-pc-video-modal__small {
+  width: 360px;
+  height: 200px;
   position: relative;
-  width: 34px;
-  height: 2px;
-  background: rgba(255, 255, 255, 0.4);
-  border-radius: 1px;
-}
-
-.titaui-pc-video-modal__controls-volume-progress--hidden {
-  display: none;
-}
-
-.titaui-pc-video-modal__controls-volume-current {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  height: 2px;
-  background: rgba(255, 255, 255, 0.6);
-  border-radius: 1px;
-}
-
-.titaui-pc-video-modal__controls-volume-current::after {
-  content: '';
-  position: absolute;
-  right: 0;
-  bottom: -1px;
-  width: 4px;
-  height: 4px;
-  border-radius: 50%;
-  background: #ffffff;
-}
-
-.titaui-pc-video-modal__controls-volume-current--hidden {
-  display: none;
+  position: fixed;
+  bottom: 20px;
+  right: 72px;
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0px 2px 12px 0px rgba(127, 145, 180, 0.2);
+  z-index: 12;
 }
 
-.titaui-pc-video-modal__controls-right {
+.titaui-pc-video-modal__small-enlarge {
   display: inline-flex;
-  align-items: center;
-}
-
-.titaui-pc-video-modal__controls-right-shrink {
+  cursor: pointer;
   margin-left: 6px;
   width: 24px;
   height: 24px;
   border-radius: 12px;
-  display: inline-flex;
   align-items: center;
   justify-content: center;
+  z-index: 2;
 }
 
-.titaui-pc-video-modal__controls-right-shrink:hover {
+.titaui-pc-video-modal__small-enlarge:hover {
   background: rgba(20, 28, 40, 0.6);
 }
 
-.titaui-pc-video-modal__controls-right-shrink > img {
+.titaui-pc-video-modal__small-enlarge > img {
   width: 16px;
   height: 16px;
 }
 
-.titaui-pc-video-modal__progress {
-  opacity: 0;
-  transition: 0.5s;
-  position: absolute;
-  bottom: 56px;
-  width: 100%;
-  height: 2px;
-  background: #ffffff;
+.titaui-pc-video-modal__small-close {
+  display: inline-flex;
+  cursor: pointer;
+  margin-left: 6px;
+  width: 24px;
+  height: 24px;
+  border-radius: 12px;
+  align-items: center;
+  justify-content: center;
   z-index: 2;
 }
 
-.titaui-pc-video-modal__progress:hover {
-  height: 4px;
-}
-
-.titaui-pc-video-modal__progress--show {
-  opacity: 1;
-  transition: 0.5s;
+.titaui-pc-video-modal__small-close:hover {
+  background: rgba(20, 28, 40, 0.6);
 }
 
-.titaui-pc-video-modal__progress-current {
-  position: absolute;
-  left: 0;
-  bottom: 0;
-  background: #77be16;
-  height: 100%;
-  z-index: 3;
+.titaui-pc-video-modal__small-close > img {
+  width: 16px;
+  height: 16px;
 }
 
-.titaui-pc-video-modal__progress-current-dot {
-  position: absolute;
-  right: 0;
-  bottom: -2px;
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background: #77be16;
+.titaui-pc-video-modal__small .titaui-pc-video-box__box {
+  border-radius: 0 !important;
 }

package/lib/components/video-modal/index.js

@@ -9,23 +9,19 @@ exports["default"] = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
-
 var _dialog = _interopRequireDefault(require("../dialog"));
 
-var _utils = _interopRequireDefault(require("./utils"));
-
-var _play = _interopRequireDefault(require("./img/play.svg"));
+var _videoBox = _interopRequireDefault(require("./components/video-box"));
 
-var _pause = _interopRequireDefault(require("./img/pause.svg"));
+var _conditionRender = _interopRequireDefault(require("../condition-render"));
 
-var _muted = _interopRequireDefault(require("./img/muted.svg"));
+var _bsGlobal = require("../../utils/bs-global");
 
-var _notMuted = _interopRequireDefault(require("./img/not-muted.svg"));
+var _full = _interopRequireDefault(require("./img/full.svg"));
 
 var _small = _interopRequireDefault(require("./img/small.svg"));
 
-var _bigFaqi = _interopRequireDefault(require("./img/bigFaqi.png"));
+var _close = _interopRequireDefault(require("./img/close.png"));
 
 require("./index.css");
 
@@ -35,8 +31,6 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-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; }
-
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -50,195 +44,89 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 var preCls = "titaui-pc-video-modal";
-
-var VideoModal = function VideoModal(props) {
-  var visible = props.visible,
-      _onClose = props.onClose,
+var userId = (0, _bsGlobal.getBSGlobal)("loginUserInfo").Id;
+var VideoModal = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var videoSrc = props.videoSrc,
       title = props.title,
-      videoSrc = props.videoSrc,
-      _props$canMini = props.canMini,
-      canMini = _props$canMini === void 0 ? false : _props$canMini,
-      _props$showSmallVideo = props.showSmallVideo,
-      showSmallVideo = _props$showSmallVideo === void 0 ? function () {} : _props$showSmallVideo,
-      _props$onCancel = props.onCancel,
-      onCancel = _props$onCancel === void 0 ? function () {} : _props$onCancel;
-
-  var _useState = (0, _react.useState)(false),
+      videoPoster = props.videoPoster,
+      visible = props.visible,
+      onClose = props.onClose,
+      onOpen = props.onOpen,
+      _props$hasextraButton = props.hasextraButton,
+      hasextraButton = _props$hasextraButton === void 0 ? true : _props$hasextraButton;
+
+  var _useState = (0, _react.useState)(true),
       _useState2 = _slicedToArray(_useState, 2),
-      isOverModal = _useState2[0],
-      setIsOverModal = _useState2[1];
+      smallVideoVisible = _useState2[0],
+      setSmallVideoVisible = _useState2[1];
 
-  var _useState3 = (0, _react.useState)(true),
+  var _useState3 = (0, _react.useState)("0"),
       _useState4 = _slicedToArray(_useState3, 2),
-      isPlay = _useState4[0],
-      setIsPlay = _useState4[1];
-
-  var _useState5 = (0, _react.useState)(true),
-      _useState6 = _slicedToArray(_useState5, 2),
-      isMuted = _useState6[0],
-      setIsMuted = _useState6[1];
-
-  var _useState7 = (0, _react.useState)(false),
-      _useState8 = _slicedToArray(_useState7, 2),
-      isMouseDown = _useState8[0],
-      setIsMouseDown = _useState8[1];
-
-  var _useState9 = (0, _react.useState)(false),
-      _useState10 = _slicedToArray(_useState9, 2),
-      showDot = _useState10[0],
-      setShowDot = _useState10[1];
-
-  var _useState11 = (0, _react.useState)("00:00"),
-      _useState12 = _slicedToArray(_useState11, 2),
-      totalTime = _useState12[0],
-      setTotalTime = _useState12[1];
-
-  var _useState13 = (0, _react.useState)("00:00"),
-      _useState14 = _slicedToArray(_useState13, 2),
-      currentTime = _useState14[0],
-      setCurrentTime = _useState14[1];
-
-  var videoRef = (0, _react.useRef)(document.createElement("video"));
-  var totalProgressRef = (0, _react.useRef)(document.createElement("div"));
-  var progressRef = (0, _react.useRef)(document.createElement("div"));
-  var boxRef = (0, _react.useRef)(document.createElement("div"));
-  var volumeRef = (0, _react.useRef)(document.createElement("div")); // 播放/暂停
-
-  var handlePlayVideo = function handlePlayVideo() {
-    setIsPlay(!isPlay);
-
-    if (isPlay) {
-      videoRef.current.pause();
-    } else {
-      videoRef.current.play();
-    }
-  }; // 音量
+      time = _useState4[0],
+      setTime = _useState4[1];
 
+  var modalVideoRef = (0, _react.useRef)(document.createElement("div"));
+  var smallVideoRef = (0, _react.useRef)(document.createElement("div")); // 关闭小窗口视频
 
-  var handleChangeVolumeMuted = function handleChangeVolumeMuted() {
-    setIsMuted(!isMuted);
-    videoRef.current.muted = !videoRef.current.muted;
-  }; // 鼠标移入移出进度条区域
+  var handleClickCloseSmallVideo = function handleClickCloseSmallVideo() {
+    setSmallVideoVisible(false); // @ts-ignore
 
+    smallVideoRef.current.closeVideo();
+    localStorage.setItem("hide_performance_small_video_".concat(userId), "true");
+  }; // 打开dialog弹层 关闭小窗口
 
-  var handleMouseEnterProgress = function handleMouseEnterProgress() {
-    setShowDot(true);
-  };
 
-  var handleMouseLeaveProgress = function handleMouseLeaveProgress() {
-    setShowDot(false);
-  }; // 获得点击进度条 进度条的宽度
+  var handleClickToFull = function handleClickToFull() {
+    // @ts-ignore
+    setTime(smallVideoRef.current.getCurrentTime());
+    onOpen(); // @ts-ignore
 
+    smallVideoRef.current.closeVideo();
+    setSmallVideoVisible(false);
+  }; // 关闭dialog弹层 打开小窗口
 
-  var getCurrentProgressWidth = function getCurrentProgressWidth(e) {
-    var currentWidth = e.clientX - (document.documentElement.offsetWidth - 840) / 2;
-    progressRef.current.style.width = "".concat(currentWidth, "px");
-    videoRef.current.currentTime = videoRef.current.duration * currentWidth / 840;
-  }; // 点击音量 音量进度条宽度
-
-
-  var getCurrentVolumeWidth = function getCurrentVolumeWidth(e) {
-    var currentWidth;
-
-    if (canMini) {
-      currentWidth = e.clientX - (document.documentElement.offsetWidth - 840) / 2 - 712;
-    } else {
-      currentWidth = e.clientX - (document.documentElement.offsetWidth - 840) / 2 - 742;
-    }
-
-    if (currentWidth <= 0) {
-      setIsMuted(true);
-      videoRef.current.muted = true;
-    } else if (currentWidth >= 34) {
-      volumeRef.current.style.width = "34px";
-      videoRef.current.volume = 1;
-    } else {
-      volumeRef.current.style.width = "".concat(currentWidth, "px");
-      videoRef.current.volume = currentWidth / 34;
-    }
-  }; // 点击进度条
 
+  var handleClickToSmall = function handleClickToSmall() {
+    onClose(); // @ts-ignore
 
-  var handleClickTotalProgress = function handleClickTotalProgress(e) {
-    getCurrentProgressWidth(e);
-  }; // 拖动进度条
+    setTime(modalVideoRef.current.getCurrentTime());
+    setSmallVideoVisible(true);
+  }; // 关闭过一次自动播放小窗口 之后不再出现
 
 
-  var handleMouseDownProgress = function handleMouseDownProgress() {
-    setIsMouseDown(true);
-  };
+  (0, _react.useEffect)(function () {
+    if (localStorage.getItem("hide_performance_small_video_".concat(userId)) === "true") {
+      setSmallVideoVisible(false); // @ts-ignore
 
-  var handleMouseMoveProgress = function handleMouseMoveProgress(e) {
-    if (isMouseDown) {
-      getCurrentProgressWidth(e);
+      smallVideoRef.current.closeVideo();
     }
-  };
-
-  var handleMouseUpProgress = function handleMouseUpProgress() {
-    setIsMouseDown(false);
-  }; // 点击音量进度条
-
-
-  var handleMouseClickVolume = function handleMouseClickVolume(e) {
-    getCurrentVolumeWidth(e);
-  }; // 鼠标移入移出视频区域
-
-
-  var handleMouseOverVideoModal = function handleMouseOverVideoModal() {
-    setIsOverModal(true);
-  };
+  }, []);
+  (0, _react.useEffect)(function () {
+    if (visible) {
+      setSmallVideoVisible(false);
+    }
+  }, [visible]); // *---提供给父组件调用(因为有时间的联动，视频默认从0开始需要手动调用此方法)---*
 
-  var handleMouseLeaveVideoModal = function handleMouseLeaveVideoModal() {
-    setIsOverModal(false);
+  var handleSetDefaultTime = function handleSetDefaultTime() {
+    setTime("0");
   };
 
-  var handleCloseAndOpenSmallVideo = function handleCloseAndOpenSmallVideo() {
-    onCancel();
-    videoRef.current.pause();
-    showSmallVideo();
-  }; // 初始获得总时间
-
-
-  (0, _react.useEffect)(function () {
-    videoRef.current.onloadedmetadata = function () {
-      setTotalTime(videoRef.current.duration.toString());
+  (0, _react.useImperativeHandle)(ref, function () {
+    return {
+      setDefaultTime: handleSetDefaultTime
     };
-  }, [videoRef.current.onloadedmetadata]); // 实时播放时间
-
+  });
   (0, _react.useEffect)(function () {
-    videoRef.current.ontimeupdate = function () {
-      setCurrentTime(videoRef.current.currentTime.toString());
-      progressRef.current.style.width = "".concat(840 * videoRef.current.currentTime / videoRef.current.duration, "px");
-    };
-  }, [videoRef.current.ontimeupdate]); // 初始获得音量宽度
-
-  (0, _react.useEffect)(function () {
-    volumeRef.current.style.width = "".concat(34 * videoRef.current.volume, "px");
-  }, [videoRef.current.onloadedmetadata]);
-  (0, _react.useEffect)(function () {
-    if (visible) {
-      videoRef.current.play();
-      videoRef.current.muted = true;
-      setIsMuted(true);
-      setIsPlay(true);
-    } else {
-      videoRef.current.pause();
-      videoRef.current.muted = true;
-      setIsMuted(true);
-      setIsPlay(false);
+    if (!hasextraButton) {
+      setSmallVideoVisible(false);
     }
-  }, [visible]);
-  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_dialog["default"], {
+  }, []);
+  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_conditionRender["default"], {
+    condition: !smallVideoVisible
+  }, /*#__PURE__*/_react["default"].createElement(_dialog["default"], {
     visible: visible,
     title: title,
-    onClose: function onClose() {
-      _onClose();
-
-      videoRef.current.pause();
-      videoRef.current.muted = true;
-      setIsMuted(true);
-      setIsPlay(false);
-    },
+    onClose: onClose,
     style: {
       width: "840px",
       borderRadius: "24px"
@@ -246,77 +134,49 @@ var VideoModal = function VideoModal(props) {
     noHeadLine: true,
     noFooterLine: true,
     noFooter: true,
-    ref: boxRef
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "".concat(preCls, "__box"),
-    onMouseOver: handleMouseOverVideoModal,
-    onMouseLeave: handleMouseLeaveVideoModal,
-    onFocus: handleMouseOverVideoModal
-  }, /*#__PURE__*/_react["default"].createElement("video", {
-    ref: videoRef,
-    src: videoSrc,
-    loop: true,
-    autoPlay: true,
-    muted: true,
-    poster: _bigFaqi["default"],
-    className: "".concat(preCls, "__video")
-  }), /*#__PURE__*/_react["default"].createElement("div", {
-    className: (0, _classnames["default"])("".concat(preCls, "__progress"), _defineProperty({}, "".concat(preCls, "__progress--show"), isOverModal)),
-    onMouseEnter: handleMouseEnterProgress,
-    onMouseLeave: handleMouseLeaveProgress,
-    ref: totalProgressRef,
-    onClick: handleClickTotalProgress,
-    onMouseDown: handleMouseDownProgress,
-    onMouseMove: handleMouseMoveProgress,
-    onMouseUp: handleMouseUpProgress
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "".concat(preCls, "__progress-current"),
-    ref: progressRef
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: (0, _classnames["default"])(_defineProperty({}, "".concat(preCls, "__progress-current-dot"), showDot))
-  }))), /*#__PURE__*/_react["default"].createElement("div", {
-    className: (0, _classnames["default"])("".concat(preCls, "__controls"), _defineProperty({}, "".concat(preCls, "__controls--show"), isOverModal))
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "".concat(preCls, "__controls-left")
+    destroyOnClose: true
   }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "".concat(preCls, "__controls-button"),
-    onClick: handlePlayVideo
-  }, /*#__PURE__*/_react["default"].createElement("img", {
-    src: isPlay ? _pause["default"] : _play["default"],
-    className: "".concat(preCls, "__controls-play"),
-    alt: "\u64AD\u653E/\u6682\u505C"
-  })), /*#__PURE__*/_react["default"].createElement("span", {
-    className: "".concat(preCls, "__controls-time")
-  }, (0, _utils["default"])(currentTime)), /*#__PURE__*/_react["default"].createElement("span", {
-    className: "".concat(preCls, "__controls-time")
-  }, " / ".concat((0, _utils["default"])(totalTime)))), /*#__PURE__*/_react["default"].createElement("div", {
-    className: "".concat(preCls, "__controls-right")
+    className: "".concat(preCls, "__full")
+  }, /*#__PURE__*/_react["default"].createElement(_videoBox["default"], {
+    videoSrc: videoSrc,
+    containerWidth: 840,
+    ref: modalVideoRef,
+    extraButton: hasextraButton ? /*#__PURE__*/_react["default"].createElement("div", {
+      className: "".concat(preCls, "__full-control"),
+      onClick: handleClickToSmall
+    }, /*#__PURE__*/_react["default"].createElement("img", {
+      src: _small["default"],
+      alt: "\u7F29\u5C0F"
+    })) : "",
+    videoPoster: videoPoster,
+    time: time
+  })))), /*#__PURE__*/_react["default"].createElement(_conditionRender["default"], {
+    condition: smallVideoVisible
   }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: (0, _classnames["default"])(_defineProperty({}, "".concat(preCls, "__controls-button"), isMuted), _defineProperty({}, "".concat(preCls, "__controls-volume"), !isMuted))
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: (0, _classnames["default"])(_defineProperty({}, "".concat(preCls, "__controls-volume-progress--hidden"), isMuted), "".concat(preCls, "__controls-volume-progress")),
-    onClick: handleMouseClickVolume
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: (0, _classnames["default"])(_defineProperty({}, "".concat(preCls, "__controls-volume-current--hidden"), isMuted), "".concat(preCls, "__controls-volume-current")),
-    ref: volumeRef
-  })), /*#__PURE__*/_react["default"].createElement("div", {
-    onClick: handleChangeVolumeMuted
-  }, /*#__PURE__*/_react["default"].createElement("img", {
-    src: isMuted ? _muted["default"] : _notMuted["default"],
-    className: "".concat(preCls, "__controls-play"),
-    alt: "\u97F3\u91CF"
-  }))), canMini && /*#__PURE__*/_react["default"].createElement("div", {
-    className: "".concat(preCls, "__controls-right-shrink"),
-    onClick: handleCloseAndOpenSmallVideo
-  }, /*#__PURE__*/_react["default"].createElement("img", {
-    src: _small["default"],
-    alt: "small"
-  })))), /*#__PURE__*/_react["default"].createElement("div", {
-    className: (0, _classnames["default"])("".concat(preCls, "__mask1"), _defineProperty({}, "".concat(preCls, "__mask1--show"), isOverModal))
-  }), /*#__PURE__*/_react["default"].createElement("div", {
-    className: (0, _classnames["default"])("".concat(preCls, "__mask2"), _defineProperty({}, "".concat(preCls, "__mask2--show"), isOverModal))
+    className: "".concat(preCls, "__small")
+  }, /*#__PURE__*/_react["default"].createElement(_videoBox["default"], {
+    videoSrc: videoSrc,
+    containerWidth: 360,
+    hasHead: true,
+    title: title,
+    extraButton: /*#__PURE__*/_react["default"].createElement("div", {
+      className: "".concat(preCls, "__small-enlarge"),
+      onClick: handleClickToFull
+    }, /*#__PURE__*/_react["default"].createElement("img", {
+      src: _full["default"],
+      alt: "\u5168\u5C4F"
+    })),
+    videoPoster: videoPoster,
+    headButton: /*#__PURE__*/_react["default"].createElement("div", {
+      className: "".concat(preCls, "__small-close"),
+      onClick: handleClickCloseSmallVideo
+    }, /*#__PURE__*/_react["default"].createElement("img", {
+      src: _close["default"],
+      alt: "\u5173\u95ED"
+    })),
+    ref: smallVideoRef,
+    time: time
   }))));
-};
-
+});
 var _default = VideoModal;
 exports["default"] = _default;

package/lib/components/video-modal/utils.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var formatSecToDate = function formatSecToDate(value) {
+var formatSecToTime = function formatSecToTime(value) {
   var result = parseInt(value, 10);
   var m = Math.floor(result / 60 % 60) < 10 ? "0".concat(Math.floor(result / 60 % 60)) : Math.floor(result / 60 % 60);
   var s = Math.floor(result % 60) < 10 ? "0".concat(Math.floor(result % 60)) : Math.floor(result % 60);
@@ -21,5 +21,5 @@ var formatSecToDate = function formatSecToDate(value) {
   return res;
 };
 
-var _default = formatSecToDate;
+var _default = formatSecToTime;
 exports["default"] = _default;