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

package/lib/components/{float-fixed-video-modal → video-modal/components/video-box}/index.js

@@ -11,25 +11,15 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _utils = _interopRequireDefault(require("./utils"));
+var _utils = _interopRequireDefault(require("../../utils"));
 
-var _bsGlobal = require("../../utils/bs-global");
+var _play = _interopRequireDefault(require("../../img/play.svg"));
 
-var _videoModal = _interopRequireDefault(require("../video-modal"));
+var _pause = _interopRequireDefault(require("../../img/pause.svg"));
 
-var _close = _interopRequireDefault(require("./img/close.png"));
+var _muted = _interopRequireDefault(require("../../img/muted.svg"));
 
-var _pause = _interopRequireDefault(require("./img/pause.svg"));
-
-var _play = _interopRequireDefault(require("./img/play.svg"));
-
-var _volume = _interopRequireDefault(require("./img/volume.svg"));
-
-var _full = _interopRequireDefault(require("./img/full.svg"));
-
-var _muted = _interopRequireDefault(require("./img/muted.svg"));
-
-var _smallFaQi = _interopRequireDefault(require("./img/smallFaQi.png"));
+var _notMuted = _interopRequireDefault(require("../../img/not-muted.svg"));
 
 require("./index.css");
 
@@ -53,35 +43,37 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-var preCls = "titaui-pc-float-fixed-video";
-
-var FloatVideo = function FloatVideo(props) {
-  var _props$visible = props.visible,
-      visible = _props$visible === void 0 ? true : _props$visible,
-      _props$title = props.title,
-      title = _props$title === void 0 ? "如何发起考核" : _props$title,
-      _props$videoSrc = props.videoSrc,
-      videoSrc = _props$videoSrc === void 0 ? "https://club.tita.com/wp-content/uploads/2022/03/1646114589-20220301140309117.mp4" : _props$videoSrc;
-
-  var _useState = (0, _react.useState)(false),
+var preCls = "titaui-pc-video-box";
+var VideoBox = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var videoSrc = props.videoSrc,
+      containerWidth = props.containerWidth,
+      hasHead = props.hasHead,
+      headButton = props.headButton,
+      title = props.title,
+      extraButton = props.extraButton,
+      videoPoster = props.videoPoster,
+      _props$time = props.time,
+      time = _props$time === void 0 ? "00:00" : _props$time;
+
+  var _useState = (0, _react.useState)(true),
       _useState2 = _slicedToArray(_useState, 2),
-      isHover = _useState2[0],
-      setIsHover = _useState2[1];
+      isPlay = _useState2[0],
+      setIsPlay = _useState2[1];
 
-  var _useState3 = (0, _react.useState)(false),
+  var _useState3 = (0, _react.useState)(true),
       _useState4 = _slicedToArray(_useState3, 2),
-      videoModalVisible = _useState4[0],
-      setVideoModalVisible = _useState4[1];
+      isMuted = _useState4[0],
+      setIsMuted = _useState4[1];
 
-  var _useState5 = (0, _react.useState)(true),
+  var _useState5 = (0, _react.useState)(false),
       _useState6 = _slicedToArray(_useState5, 2),
-      isPlay = _useState6[0],
-      setIsPlay = _useState6[1];
+      isMouseDown = _useState6[0],
+      setIsMouseDown = _useState6[1];
 
-  var _useState7 = (0, _react.useState)(true),
+  var _useState7 = (0, _react.useState)(false),
       _useState8 = _slicedToArray(_useState7, 2),
-      isMuted = _useState8[0],
-      setIsMuted = _useState8[1];
+      showDot = _useState8[0],
+      setShowDot = _useState8[1];
 
   var _useState9 = (0, _react.useState)("00:00"),
       _useState10 = _slicedToArray(_useState9, 2),
@@ -95,19 +87,22 @@ var FloatVideo = function FloatVideo(props) {
 
   var _useState13 = (0, _react.useState)(false),
       _useState14 = _slicedToArray(_useState13, 2),
-      showDot = _useState14[0],
-      setShowDot = _useState14[1];
+      isSmallVideo = _useState14[0],
+      setIsSmallVideo = _useState14[1];
 
-  var _useState15 = (0, _react.useState)(false),
+  var _useState15 = (0, _react.useState)("0px"),
       _useState16 = _slicedToArray(_useState15, 2),
-      isMouseDown = _useState16[0],
-      setIsMouseDown = _useState16[1];
+      progressWidth = _useState16[0],
+      setProgressWidth = _useState16[1];
+
+  var _useState17 = (0, _react.useState)("0px"),
+      _useState18 = _slicedToArray(_useState17, 2),
+      volumeWidth = _useState18[0],
+      setVolumeWidth = _useState18[1];
 
   var videoRef = (0, _react.useRef)(document.createElement("video"));
-  var volumeRef = (0, _react.useRef)(document.createElement("div"));
-  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 videoBoxRef = (0, _react.useRef)(document.createElement("div"));
+  var volumeBoxRef = (0, _react.useRef)(document.createElement("div")); // *---播放/暂停---*
 
   var handlePlayVideo = function handlePlayVideo() {
     setIsPlay(!isPlay);
@@ -117,47 +112,26 @@ var FloatVideo = function FloatVideo(props) {
     } else {
       videoRef.current.play();
     }
-  };
-
-  var handleChangeVolumeMuted = function handleChangeVolumeMuted() {
-    setIsMuted(!isMuted);
-    videoRef.current.muted = !videoRef.current.muted;
-  }; // 鼠标移入移出进度条区域
+  }; //* ---进度条---*
+  // 鼠标移入进度条区域
 
 
   var handleMouseEnterProgress = function handleMouseEnterProgress() {
     setShowDot(true);
-  };
+  }; // 鼠标移出进度条区域
+
 
   var handleMouseLeaveProgress = function handleMouseLeaveProgress() {
     setShowDot(false);
-  }; // 点击音量 音量进度条宽度
-
-
-  var getCurrentVolumeWidth = function getCurrentVolumeWidth(e) {
-    var currentWidth = e.clientX - (document.documentElement.offsetWidth - 178);
-
-    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 handleMouseClickVolume = function handleMouseClickVolume(e) {
-    getCurrentVolumeWidth(e);
-  }; // 获得点击进度条 进度条的宽度
+    setIsMouseDown(false);
+  }; // 获得点击进度条任意位置 计算实时进度条的宽度
 
 
   var getCurrentProgressWidth = function getCurrentProgressWidth(e) {
-    var currentWidth = e.clientX - (document.documentElement.offsetWidth - 432);
-    progressRef.current.style.width = "".concat(currentWidth, "px");
-    videoRef.current.currentTime = videoRef.current.duration * currentWidth / 360;
+    var videoContainerLeft = videoBoxRef.current.getBoundingClientRect().left;
+    var currentWidth = e.clientX - videoContainerLeft;
+    setProgressWidth("".concat(currentWidth, "px"));
+    videoRef.current.currentTime = videoRef.current.duration * currentWidth / containerWidth;
   }; // 点击进度条
 
 
@@ -178,109 +152,159 @@ var FloatVideo = function FloatVideo(props) {
 
   var handleMouseUpProgress = function handleMouseUpProgress() {
     setIsMouseDown(false);
-  };
+  }; // *---音量---*
+  // 静音/声音 切换
 
-  var handleCloseFloatVideo = function handleCloseFloatVideo() {
-    localStorage.setItem("hide_performance_small_video_".concat((0, _bsGlobal.getUserInfo)().Id), "true");
-    boxRef.current.style.display = "none";
-    videoRef.current.pause();
-    videoRef.current.currentTime = 0;
-  };
 
-  var handleShowBigVideo = function handleShowBigVideo() {
-    handleCloseFloatVideo();
-    setVideoModalVisible(true);
-    videoRef.current.pause();
-    setIsPlay(false);
-  };
+  var handleChangeVolumeMuted = function handleChangeVolumeMuted() {
+    setIsMuted(!isMuted);
+    videoRef.current.muted = !videoRef.current.muted;
+  }; // 点击音量进度条 计算音量进度条宽度
 
-  var handleCloseBigVideo = function handleCloseBigVideo() {
-    setVideoModalVisible(false);
-  };
 
-  var showSmallVideo = function showSmallVideo() {
-    videoRef.current.play();
-    setIsPlay(true);
+  var getCurrentVolumeWidth = function getCurrentVolumeWidth(e) {
+    var volumeBoxLeft = volumeBoxRef.current.getBoundingClientRect().left;
+    var currentWidth = e.clientX - volumeBoxLeft;
+    var VolumeTotalProgressWidth = 34;
+
+    if (currentWidth <= 0) {
+      setIsMuted(true);
+      videoRef.current.muted = true;
+    } else if (currentWidth >= VolumeTotalProgressWidth) {
+      setVolumeWidth("34px");
+      videoRef.current.volume = 1;
+    } else {
+      setVolumeWidth("".concat(currentWidth, "px"));
+      videoRef.current.volume = currentWidth / volumeBoxRef.current.clientWidth;
+    }
+  }; // 点击音量进度条
+
+
+  var handleMouseClickVolume = function handleMouseClickVolume(e) {
+    getCurrentVolumeWidth(e);
+  }; // *---提供父组件调用---*
+  // 暂停视频并静音
+
+
+  var handleCloseAndPauseVideo = function handleCloseAndPauseVideo() {
+    videoRef.current.pause();
+    videoRef.current.currentTime = 0;
     videoRef.current.muted = true;
-    setIsMuted(true);
-    boxRef.current.style.display = "block";
+    setIsPlay(false);
   };
 
-  var handleMouseOverVideo = function handleMouseOverVideo() {
-    setIsHover(true);
+  var handleGetCurrentTime = function handleGetCurrentTime() {
+    return currentTime;
   };
 
-  var handleMouseLeaveVideo = function handleMouseLeaveVideo() {
-    setIsHover(false);
-  };
+  (0, _react.useImperativeHandle)(ref, function () {
+    return {
+      closeVideo: handleCloseAndPauseVideo,
+      getCurrentTime: handleGetCurrentTime
+    };
+  }); // *---初始化---*
+  // 初始获得总时间
 
-  (0, _react.useEffect)(function () {
-    videoRef.current.onloadedmetadata = function () {
+  var getTotalTime = function getTotalTime() {
+    if (videoRef.current.duration) {
       setTotalTime(videoRef.current.duration.toString());
-    };
-  }, [videoRef.current.onloadedmetadata]);
-  (0, _react.useEffect)(function () {
-    videoRef.current.ontimeupdate = function () {
+      videoRef.current.currentTime = parseFloat(time);
+    }
+  }; // 获得实时播放时间
+
+
+  var handleTimeUpdate = function handleTimeUpdate() {
+    if (videoRef.current.currentTime) {
       setCurrentTime(videoRef.current.currentTime.toString());
-      progressRef.current.style.width = "".concat(360 * videoRef.current.currentTime / videoRef.current.duration, "px");
-    };
-  }, [videoRef.current.ontimeupdate]);
+      setProgressWidth("".concat(containerWidth * videoRef.current.currentTime / videoRef.current.duration, "px"));
+    }
+  }; // 初始获得音量宽度
+
+
   (0, _react.useEffect)(function () {
-    volumeRef.current.style.width = "".concat(34 * videoRef.current.volume, "px");
-  }, [videoRef.current.onloadedmetadata]);
+    var VolumeTotalProgressWidth = 34;
+    setVolumeWidth("".concat(VolumeTotalProgressWidth * videoRef.current.volume, "px"));
+  }, []); // 初始判断是否是小窗口
+
   (0, _react.useEffect)(function () {
-    if (visible) {
-      videoRef.current.play();
-      setIsPlay(true);
-      videoRef.current.muted = true;
-      setIsMuted(true);
-      boxRef.current.style.display = "block";
-    } else {
-      videoRef.current.pause();
-      setIsPlay(false);
-      videoRef.current.muted = true;
-      setIsMuted(true);
-      boxRef.current.style.display = "none";
+    var FullVideoWidth = 840;
+
+    if (containerWidth < FullVideoWidth) {
+      setIsSmallVideo(true);
+    }
+  }, []); // 按空格键 暂停/播放视频
+
+  var handleKeyDown = function handleKeyDown(e) {
+    if (e.keyCode === 32) {
+      if (videoRef.current.paused) {
+        videoRef.current.play();
+        setIsPlay(true);
+      } else {
+        videoRef.current.pause();
+        setIsPlay(false);
+      }
     }
-  }, [visible]);
+  };
+
+  (0, _react.useEffect)(function () {
+    document.addEventListener("keydown", handleKeyDown);
+    return function () {
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, []);
   return /*#__PURE__*/_react["default"].createElement("div", {
-    className: preCls,
-    ref: boxRef,
-    onMouseOver: handleMouseOverVideo,
-    onMouseLeave: handleMouseLeaveVideo,
-    onFocus: handleMouseOverVideo
+    className: "".concat(preCls, "__box"),
+    ref: videoBoxRef
   }, /*#__PURE__*/_react["default"].createElement("video", {
     ref: videoRef,
     src: videoSrc,
     loop: true,
     autoPlay: true,
     muted: true,
-    poster: _smallFaQi["default"],
-    className: "".concat(preCls, "__video")
+    poster: videoPoster,
+    style: {
+      width: "100%",
+      height: "100%"
+    },
+    onClick: handlePlayVideo,
+    onLoadedMetadata: getTotalTime,
+    onTimeUpdate: handleTimeUpdate
   }), /*#__PURE__*/_react["default"].createElement("div", {
-    className: (0, _classnames["default"])("".concat(preCls, "__progress"), _defineProperty({}, "".concat(preCls, "__progress--show"), isHover)),
+    className: (0, _classnames["default"])("".concat(preCls, "__mouseMove"), _defineProperty({}, "".concat(preCls, "__mouseMove--small"), isSmallVideo)),
+    onMouseMove: handleMouseMoveProgress,
+    onMouseUp: handleMouseUpProgress,
     onMouseEnter: handleMouseEnterProgress,
-    onMouseLeave: handleMouseLeaveProgress,
-    ref: totalProgressRef,
+    onMouseLeave: handleMouseLeaveProgress
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: (0, _classnames["default"])("".concat(preCls, "__progress"), _defineProperty({}, "".concat(preCls, "__progress--small"), isSmallVideo)),
     onClick: handleClickTotalProgress,
-    onMouseDown: handleMouseDownProgress,
-    onMouseMove: handleMouseMoveProgress,
-    onMouseUp: handleMouseUpProgress
+    onMouseDown: handleMouseDownProgress
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "".concat(preCls, "__progress-current"),
-    ref: progressRef
+    style: {
+      width: progressWidth
+    }
   }, /*#__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"), isHover))
+  })))), /*#__PURE__*/_react["default"].createElement("div", {
+    className: (0, _classnames["default"])("".concat(preCls, "__mask1"), _defineProperty({}, "".concat(preCls, "__mask1--small"), isSmallVideo))
+  }, hasHead && /*#__PURE__*/_react["default"].createElement("div", {
+    className: (0, _classnames["default"])("".concat(preCls, "__title"))
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "".concat(preCls, "__mask1-title")
+  }, title), headButton)), /*#__PURE__*/_react["default"].createElement("div", {
+    className: (0, _classnames["default"])("".concat(preCls, "__mask2"), _defineProperty({}, "".concat(preCls, "__mask2--small"), isSmallVideo))
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: (0, _classnames["default"])("".concat(preCls, "__controls"), _defineProperty({}, "".concat(preCls, "__controls--small"), isSmallVideo))
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "".concat(preCls, "__controls-left")
   }, /*#__PURE__*/_react["default"].createElement("div", {
-    onClick: handlePlayVideo,
-    className: (0, _classnames["default"])("".concat(preCls, "__controls-play"), "".concat(preCls, "__controls-button"))
+    className: "".concat(preCls, "__controls-button"),
+    onClick: handlePlayVideo
   }, /*#__PURE__*/_react["default"].createElement("img", {
-    src: isPlay ? _play["default"] : _pause["default"],
-    alt: "play"
+    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", {
@@ -291,44 +315,20 @@ var FloatVideo = function FloatVideo(props) {
     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
+    onClick: handleMouseClickVolume,
+    ref: volumeBoxRef
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: (0, _classnames["default"])(_defineProperty({}, "".concat(preCls, "__controls-volume-current--hidden"), isMuted), "".concat(preCls, "__controls-volume-current")),
-    ref: volumeRef
+    style: {
+      width: volumeWidth
+    }
   })), /*#__PURE__*/_react["default"].createElement("div", {
-    onClick: handleChangeVolumeMuted
+    onClick: handleChangeVolumeMuted,
+    className: "".concat(preCls, "__controls-play")
   }, /*#__PURE__*/_react["default"].createElement("img", {
-    src: isMuted ? _muted["default"] : _volume["default"],
-    className: "".concat(preCls, "__controls-play"),
+    src: isMuted ? _muted["default"] : _notMuted["default"],
     alt: "\u97F3\u91CF"
-  }))), /*#__PURE__*/_react["default"].createElement("div", {
-    className: "".concat(preCls, "__controls-full"),
-    onClick: handleShowBigVideo
-  }, /*#__PURE__*/_react["default"].createElement("img", {
-    src: _full["default"],
-    alt: "full"
-  })))), /*#__PURE__*/_react["default"].createElement("div", {
-    className: (0, _classnames["default"])("".concat(preCls, "__mask1"), _defineProperty({}, "".concat(preCls, "__mask1--show"), isHover))
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "".concat(preCls, "__mask1-title")
-  }, title), /*#__PURE__*/_react["default"].createElement("div", {
-    onClick: handleCloseFloatVideo
-  }, /*#__PURE__*/_react["default"].createElement("img", {
-    src: _close["default"],
-    alt: "\u5173\u95ED",
-    className: "".concat(preCls, "__mask1-close")
-  }))), /*#__PURE__*/_react["default"].createElement("div", {
-    className: (0, _classnames["default"])("".concat(preCls, "__mask2"), _defineProperty({}, "".concat(preCls, "__mask2--show"), isHover))
-  }), /*#__PURE__*/_react["default"].createElement(_videoModal["default"], {
-    title: title,
-    videoSrc: videoSrc,
-    visible: videoModalVisible,
-    onClose: handleCloseBigVideo,
-    onCancel: handleCloseBigVideo,
-    canMini: true,
-    showSmallVideo: showSmallVideo
-  }));
-};
-
-var _default = FloatVideo;
+  }))), extraButton))));
+});
+var _default = VideoBox;
 exports["default"] = _default;

package/lib/components/video-modal/img/muted.svg

@@ -1,15 +1,13 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="180px" height="186px" viewBox="0 0 180 186" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>静音</title>
-    <defs>
-        <filter color-interpolation-filters="auto" id="filter-1">
-            <feColorMatrix in="SourceGraphic" type="matrix" values="0 0 0 0 1.000000 0 0 0 0 1.000000 0 0 0 0 1.000000 0 0 0 1.000000 0"></feColorMatrix>
-        </filter>
-    </defs>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组 8</title>
     <g id="线性" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="静音" transform="translate(-30.000000, -27.000000)" filter="url(#filter-1)">
-            <g>
-                <path d="M49.3149643,69.1132143 L63.8847897,83.6834846 C55.7759466,87.6753931 50.1590828,95.9740232 50.0033233,105.6033 L50,106.014476 L50,133.986771 C50,147.581602 60.885103,158.62813 74.3959856,158.847701 L74.8062016,158.851032 L84.7965877,158.851032 C91.1425837,158.851032 97.2237483,161.364066 101.715798,165.829264 L102.033938,166.151519 L124.488994,189.329779 C127.287246,191.700034 130.832503,193.000457 134.496124,193.000457 C142.952968,193.000457 149.828362,186.21362 149.996836,177.777414 L150,177.460293 L150,169.799 L168.362354,188.160381 C163.827612,202.55479 150.386556,213.000457 134.496124,213.000457 C126.279823,213.000457 118.325168,210.148157 111.982629,204.941373 L111.562196,204.590772 L110.810236,203.953825 L87.6694795,180.06778 C86.9698379,179.345605 86.026075,178.915478 85.0278322,178.857715 L84.7965877,178.851032 L74.8062016,178.851032 C50.2975021,178.851032 30.4014694,159.154093 30.0059996,134.728376 L30,133.986771 L30,106.014476 C30,90.7240078 37.6417711,77.2136491 49.3149643,69.1132143 Z M49.2893219,35.1471863 L204.852814,190.710678 C208.758057,194.615921 208.758057,200.947571 204.852814,204.852814 C200.947571,208.758057 194.615921,208.758057 190.710678,204.852814 L35.1471863,49.2893219 C31.2419433,45.384079 31.2419433,39.0524292 35.1471863,35.1471863 C39.0524292,31.2419433 45.384079,31.2419433 49.2893219,35.1471863 Z M194.419014,65.9446193 C204.539925,81.8473491 210,100.317687 210,119.570241 C210,139.000016 204.438707,157.631418 194.142344,173.628138 C194.048842,173.773404 193.952211,173.915439 193.852595,174.054212 L179.325399,159.525666 C186.275802,147.498397 190,133.820674 190,119.570241 C190,104.150087 185.639603,89.3997416 177.546261,76.6828777 C174.580973,72.0235955 175.954226,65.84266 180.613508,62.8773718 C185.272791,59.9120836 191.453726,61.2853371 194.419014,65.9446193 Z M161.628643,39.6188159 C166.917857,45.8923685 169.86995,53.7996281 169.995802,61.994236 L170,62.5409541 L170,150.201 L150,130.201 L150,62.5409541 C150,58.8687585 148.702614,55.3152038 146.337894,52.5104022 C140.88787,46.0461122 131.299927,45.1557225 124.763352,50.4443266 L124.488994,50.6714677 L102.033938,73.8497282 C100.63289,75.2959 99.0686828,76.5468821 97.3836195,77.5847583 L80.949,61.15 L84.7965877,61.1502149 C85.8020899,61.1502149 86.7677,60.7716711 87.5037765,60.094902 L87.6694795,59.9334671 L110.810236,36.0474218 L111.562196,35.4104754 C126.545716,22.7187097 148.971552,24.6062026 161.628643,39.6188159 Z" id="形状结合" fill="#444444" fill-rule="nonzero"></path>
+        <g id="编组-8">
+            <rect id="矩形" x="0" y="0" width="16" height="16"></rect>
+            <g id="编组" fill="#FFFFFF" fill-rule="nonzero">
+                <g id="静音">
+                    <path d="M3.28766429,4.60754762 L4.25898598,5.57889897 C3.71839644,5.84502621 3.34393885,6.39826821 3.33355489,7.04022003 L3.33333333,8.93245138 C3.33333333,9.83877344 4.05900687,10.5752087 4.95973238,10.5898467 L4.9870801,10.5900688 L5.65310585,10.5900688 C6.07617225,10.5900688 6.48158322,10.7576044 6.7810532,11.0552843 L6.80226255,11.0767679 L8.29926628,12.6219853 C8.48581643,12.7800023 8.72216689,12.8666971 8.96640827,12.8666971 C9.53019785,12.8666971 9.98855748,12.4142413 9.99978907,11.8518276 L10,11.8306862 L10,11.3199333 L11.2241569,12.5440254 C10.9218408,13.5036526 10.0257704,14.2000304 8.96640827,14.2000304 C8.41865484,14.2000304 7.88834453,14.0098771 7.46550858,13.6627582 L7.43747973,13.6393848 L7.38734907,13.5969217 L5.84463197,12.0045187 C5.7979892,11.9563737 5.73507167,11.9276985 5.66852215,11.9238477 L4.9870801,11.9234022 C3.35316681,11.9234022 2.02676463,10.6102728 2.00039998,8.98189173 L2,7.06763176 C2,6.04826718 2.50945141,5.14757661 3.28766429,4.60754762 Z M3.28595479,2.34314575 L13.6568542,12.7140452 C13.9172038,12.9743947 13.9172038,13.3965047 13.6568542,13.6568542 C13.3965047,13.9172038 12.9743947,13.9172038 12.7140452,13.6568542 L2.34314575,3.28595479 C2.08279622,3.02560526 2.08279622,2.60349528 2.34314575,2.34314575 C2.60349528,2.08279622 3.02560526,2.08279622 3.28595479,2.34314575 Z M12.9612676,4.39630795 C13.635995,5.45648994 14,6.6878458 14,7.97134943 C14,9.26666772 13.6292471,10.5087612 12.9428229,11.5752092 C12.9365895,11.5848936 12.9301474,11.5943626 12.9235064,11.6036141 L11.9550266,10.6350444 C12.4183868,9.83322648 12.6666667,8.92137825 12.6666667,7.97134943 C12.6666667,6.94333913 12.3759736,5.95998277 11.8364174,5.11219185 C11.6387315,4.80157303 11.7302817,4.38951067 12.0409006,4.19182479 C12.3515194,3.99413891 12.7635817,4.08568914 12.9612676,4.39630795 Z M10.7752429,2.64125439 C11.1278572,3.05949124 11.3246633,3.58664187 11.3330535,4.13294907 L11.3333333,10.0134 L10,8.68006667 L10,4.16939694 C10,3.9245839 9.91350763,3.68768026 9.75585962,3.50069348 C9.39252467,3.06974081 8.75332847,3.0103815 8.31755677,3.36295511 L8.29926628,3.37809784 L6.80226255,4.92331521 C6.70885932,5.01972666 6.60457885,5.10312547 6.4922413,5.17231722 L5.3966,4.07666667 L5.65310585,4.07668099 C5.72013933,4.07668099 5.78451333,4.05144474 5.8335851,4.0063268 L5.84463197,3.99556447 L7.38734907,2.40316145 L7.43747973,2.36069836 C8.43638105,1.51458065 9.93143682,1.64041351 10.7752429,2.64125439 Z" id="形状结合"></path>
+                </g>
             </g>
         </g>
     </g>

package/lib/components/video-modal/img/not-muted.svg

@@ -1,15 +1,21 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="180px" height="187px" viewBox="0 0 180 187" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>声音</title>
-    <defs>
-        <filter color-interpolation-filters="auto" id="filter-1">
-            <feColorMatrix in="SourceGraphic" type="matrix" values="0 0 0 0 1.000000 0 0 0 0 1.000000 0 0 0 0 1.000000 0 0 0 1.000000 0"></feColorMatrix>
-        </filter>
-    </defs>
-    <g id="线性" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="声音" transform="translate(-30.000000, -27.000000)" filter="url(#filter-1)">
-            <g>
-                <path d="M111.562196,35.8402339 C126.545716,23.1484682 148.971552,25.0359612 161.628643,40.0485744 C167.035395,46.4615394 170,54.5816271 170,62.9707127 L170,62.9707127 L170,177.890052 C170,197.507889 154.114854,213.430215 134.496124,213.430215 C126.097238,213.430215 117.971757,210.449738 111.562196,205.02053 L111.562196,205.02053 L110.810236,204.383584 L87.6694795,180.497539 C86.9160193,179.719812 85.8794362,179.280791 84.7965877,179.280791 L84.7965877,179.280791 L74.8062016,179.280791 C50.0499395,179.280791 30,159.183924 30,134.416529 L30,134.416529 L30,106.444235 C30,81.6768407 50.0499395,61.5799734 74.8062016,61.5799734 L74.8062016,61.5799734 L84.7965877,61.5799734 C85.8794362,61.5799734 86.9160193,61.1409523 87.6694795,60.3632257 L87.6694795,60.3632257 L110.810236,36.4771804 Z M146.337894,52.9401607 C140.811109,46.3848244 131.029023,45.5615054 124.488994,51.1012262 L124.488994,51.1012262 L102.033938,74.2794868 C97.5131775,78.9458467 91.2936789,81.5799734 84.7965877,81.5799734 L84.7965877,81.5799734 L74.8062016,81.5799734 C61.1061147,81.5799734 50,92.7120825 50,106.444235 L50,106.444235 L50,134.416529 C50,148.148682 61.1061147,159.280791 74.8062016,159.280791 L74.8062016,159.280791 L84.7965877,159.280791 C91.2936789,159.280791 97.5131775,161.914918 102.033938,166.581278 L102.033938,166.581278 L124.488994,189.759538 C127.287246,192.129793 130.832503,193.430215 134.496124,193.430215 C143.058678,193.430215 150,186.472647 150,177.890052 L150,177.890052 L150,62.9707127 C150,59.2985171 148.702614,55.7449624 146.337894,52.9401607 Z M194.419014,66.3743778 C204.539925,82.2771076 210,100.747446 210,120 C210,139.429774 204.438707,158.061176 194.142344,174.057897 C191.153202,178.701912 184.965306,180.043452 180.321291,177.05431 C175.677276,174.065168 174.335736,167.877272 177.324877,163.233257 C185.558784,150.440827 190,135.561899 190,120 C190,104.579846 185.639603,89.8295002 177.546261,77.1126363 C174.580973,72.4533541 175.954226,66.2724186 180.613508,63.3071304 C185.272791,60.3418422 191.453726,61.7150957 194.419014,66.3743778 Z" id="形状结合" fill="#444444" fill-rule="nonzero"></path>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组 7</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="交互说明" transform="translate(-859.000000, -1543.000000)">
+            <g id="编组-2" transform="translate(87.000000, 1038.000000)">
+                <g id="编组-10" transform="translate(0.000000, 476.000000)">
+                    <g id="编组-3" transform="translate(33.000000, 29.000000)">
+                        <g id="编组-7" transform="translate(739.000000, 0.000000)">
+                            <rect id="矩形" x="0" y="0" width="16" height="16"></rect>
+                            <g id="编组" fill="#FFFFFF" fill-rule="nonzero">
+                                <g id="声音">
+                                    <path d="M7.43747973,2.38934893 L7.38734907,2.43181202 L5.84463197,4.02421504 C5.79440129,4.07606349 5.72529575,4.10533156 5.65310585,4.10533156 L4.9870801,4.10533156 C3.33666263,4.10533156 2,5.44512271 2,7.09628233 L2,8.96110195 C2,10.6122616 3.33666263,11.9520527 4.9870801,11.9520527 L5.65310585,11.9520527 C5.72529575,11.9520527 5.79440129,11.9813208 5.84463197,12.0331692 L7.38734907,13.6255723 L7.43747973,13.6680354 C7.8647838,14.0299826 8.40648254,14.228681 8.96640827,14.228681 C10.2743236,14.228681 11.3333333,13.1671926 11.3333333,11.8593368 L11.3333333,4.19804751 C11.3333333,3.63877514 11.135693,3.09743596 10.7752429,2.66990496 C9.93143682,1.66906408 8.43638105,1.54323122 7.43747973,2.38934893 Z M9.75585962,3.52934405 C9.91350763,3.71633083 10,3.95323447 10,4.19804751 L10,11.8593368 C10,12.4315098 9.53724522,12.8953477 8.96640827,12.8953477 C8.72216689,12.8953477 8.48581643,12.8086529 8.29926628,12.6506359 L6.80226255,11.1054185 C6.5008785,10.7943278 6.08624526,10.6187194 5.65310585,10.6187194 L4.9870801,10.6187194 C4.07374098,10.6187194 3.33333333,9.87657878 3.33333333,8.96110195 L3.33333333,7.09628233 C3.33333333,6.1808055 4.07374098,5.4386649 4.9870801,5.4386649 L5.65310585,5.4386649 C6.08624526,5.4386649 6.5008785,5.26305644 6.80226255,4.95196579 L8.29926628,3.40674842 C8.73526822,3.03743369 9.38740727,3.09232163 9.75585962,3.52934405 Z M12.0409006,4.22047536 C12.3515194,4.02278948 12.7635817,4.11433971 12.9612676,4.42495852 C13.635995,5.48514051 14,6.71649637 14,8 C14,9.2953183 13.6292471,10.5374117 12.9428229,11.6038598 C12.7435468,11.9134608 12.3310204,12.0028968 12.0214194,11.8036207 C11.7118184,11.6043445 11.6223824,11.1918181 11.8216585,10.8822171 C12.3705856,10.0293885 12.6666667,9.03745996 12.6666667,8 C12.6666667,6.97198971 12.3759736,5.98863335 11.8364174,5.14084242 C11.6387315,4.83022361 11.7302817,4.41816124 12.0409006,4.22047536 Z" id="形状结合"></path>
+                                </g>
+                            </g>
+                        </g>
+                    </g>
+                </g>
             </g>
         </g>
     </g>

package/lib/components/video-modal/img/pause.svg

@@ -1,16 +1,12 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="130px" height="190px" viewBox="0 0 130 190" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>播放</title>
-    <defs>
-        <filter color-interpolation-filters="auto" id="filter-1">
-            <feColorMatrix in="SourceGraphic" type="matrix" values="0 0 0 0 1.000000 0 0 0 0 1.000000 0 0 0 0 1.000000 0 0 0 1.000000 0"></feColorMatrix>
-        </filter>
-    </defs>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组 8</title>
     <g id="线性" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="播放" transform="translate(-55.000000, -25.000000)" filter="url(#filter-1)">
-            <g>
-                <rect id="矩形" fill="#444444" x="55" y="25" width="40" height="190" rx="20"></rect>
-                <rect id="矩形备份" fill="#444444" x="145" y="25" width="40" height="190" rx="20"></rect>
+        <g id="编组-8">
+            <rect id="矩形" x="0" y="0" width="16" height="16"></rect>
+            <g id="播放" fill="#FFFFFF">
+                <rect id="矩形" x="3.66666667" y="1.66666667" width="2.66666667" height="12.6666667" rx="1.33333333"></rect>
+                <rect id="矩形备份" x="9.66666667" y="1.66666667" width="2.66666667" height="12.6666667" rx="1.33333333"></rect>
             </g>
         </g>
     </g>

package/lib/components/video-modal/img/play.svg

@@ -1,15 +1,17 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="155px" height="182px" viewBox="0 0 155 182" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>暂停</title>
-    <defs>
-        <filter color-interpolation-filters="auto" id="filter-1">
-            <feColorMatrix in="SourceGraphic" type="matrix" values="0 0 0 0 1.000000 0 0 0 0 1.000000 0 0 0 0 1.000000 0 0 0 1.000000 0"></feColorMatrix>
-        </filter>
-    </defs>
-    <g id="线性" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="暂停" transform="translate(-42.000000, -29.000000)" filter="url(#filter-1)">
-            <g>
-                <path d="M150.351959,64.5631349 L217.050016,171.280025 C224.075064,182.520102 220.658108,197.326911 209.418031,204.351959 C205.603673,206.735933 201.19613,208 196.698057,208 L63.3019434,208 C50.0471094,208 39.3019434,197.254834 39.3019434,184 C39.3019434,179.501927 40.5660101,175.094384 42.9499841,171.280025 L109.648041,64.5631349 C116.673089,53.3230581 131.479898,49.9061022 142.719975,56.9311501 C145.810434,58.8626871 148.420422,61.4726757 150.351959,64.5631349 Z" id="三角形" fill="#444444" transform="translate(130.000000, 120.000000) rotate(90.000000) translate(-130.000000, -120.000000) "></path>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组 7</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="点击查看视频" transform="translate(-212.000000, -638.000000)">
+            <g id="编组-10" transform="translate(179.000000, 560.000000)">
+                <g id="编组-3" transform="translate(28.000000, 74.000000)">
+                    <g id="编组-7" transform="translate(5.000000, 4.000000)">
+                        <rect id="矩形" x="0" y="0" width="16" height="16"></rect>
+                        <g id="暂停" fill="#FFFFFF">
+                            <path d="M10.2948234,4.73838412 L14.1640013,10.9290687 C14.7260051,11.8282748 14.4526486,13.0128196 13.5534425,13.5748234 C13.2482938,13.7655413 12.8956904,13.8666667 12.5358445,13.8666667 L4.79748881,13.8666667 C3.73710209,13.8666667 2.87748881,13.0070534 2.87748881,11.9466667 C2.87748881,11.5868208 2.97861414,11.2342174 3.16933206,10.9290687 L7.03850992,4.73838412 C7.60051376,3.83917798 8.78505849,3.56582151 9.68426463,4.12782534 C9.93150136,4.2823483 10.1403005,4.49114739 10.2948234,4.73838412 Z" id="三角形" transform="translate(8.666667, 8.000000) rotate(90.000000) translate(-8.666667, -8.000000) "></path>
+                        </g>
+                    </g>
+                </g>
             </g>
         </g>
     </g>