@titaui/pc 1.10.5 → 1.10.8

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

@@ -0,0 +1,17 @@
+<?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>
+    <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>
+        </g>
+    </g>
+</svg>

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

@@ -0,0 +1,16 @@
+<?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>
+            </g>
+        </g>
+    </g>
+</svg>

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

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<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>缩小屏幕</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="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="点击查看视频" transform="translate(-504.000000, -87.000000)">
+            <g id="缩小屏幕" transform="translate(504.000000, 87.000000)">
+                <rect id="矩形备份-8" x="0" y="0" width="16" height="16"></rect>
+                <g id="缩小屏幕" filter="url(#filter-1)">
+                    <g>
+                        <path d="M2.66666667,8.84191565 C3.02861599,8.84191565 3.32319545,9.13036037 3.33307721,9.489922 L3.33333333,11.8095238 C3.33333333,12.2760501 3.70604651,12.6555245 4.16995152,12.6664257 L6.47311169,12.6666667 C6.84130152,12.6666667 7.13977836,12.9651435 7.13977836,13.3333333 C7.13977836,13.6952827 6.85133364,13.9898621 6.49177201,13.9997439 L4.19047619,14 C2.99280726,14 2.0196371,13.0388065 2.00029346,11.8457473 L2,9.50858232 C2,9.14039249 2.29847683,8.84191565 2.66666667,8.84191565 Z M13.3333333,8.8699914 C13.7015232,8.8699914 14,9.16846824 14,9.53665807 C14,9.8986074 13.7115553,10.1931869 13.3519937,10.2030686 L11.0486616,10.2033247 C10.5821354,10.2033247 10.202661,10.5760379 10.1917597,11.0399429 L10.1915188,13.3333333 C10.1915188,13.7015232 9.89304196,14 9.52485212,14 C9.1629028,14 8.86832334,13.7115553 8.85844158,13.3519937 L8.85818546,11.0604676 C8.85818546,9.86279866 9.81937893,8.8896285 11.0124381,8.87028486 L11.0486616,8.8699914 L13.3333333,8.8699914 Z M6.47638719,2 C6.83833652,2 7.13291597,2.28844472 7.14279774,2.64800634 L7.14305386,2.66666667 L7.14305386,4.95231104 C7.14305386,6.14997997 6.18186038,7.12315013 4.9888012,7.14249377 L2.66666667,7.14278723 C2.29847683,7.14278723 2,6.8443104 2,6.47612057 C2,6.11417124 2.28844472,5.81959178 2.64800634,5.80971002 L4.95257767,5.8094539 C5.41910392,5.8094539 5.79857834,5.43674073 5.80947961,4.97283571 L5.80972053,2.66666667 C5.80972053,2.29847683 6.10819736,2 6.47638719,2 Z M11.8095238,2 C13.0071927,2 13.9803629,2.96119347 13.9997065,4.15425266 L14,6.46713633 C14,6.83532616 13.7015232,7.13380299 13.3333333,7.13380299 C12.971384,7.13380299 12.6768046,6.84535827 12.6669228,6.48579665 L12.6666667,4.19047619 C12.6666667,3.72394994 12.2939535,3.34447552 11.8300485,3.33357425 L9.56078908,3.33333333 C9.19259925,3.33333333 8.89412242,3.0348565 8.89412242,2.66666667 C8.89412242,2.30471734 9.18256714,2.01013789 9.54212876,2.00025612 L11.8095238,2 Z" id="形状结合" fill="#444444" fill-rule="nonzero"></path>
+                        <path d="M11.265279,10.3224699 L13.8108634,12.8680544 C14.0712129,13.1284039 14.0712129,13.5505139 13.8108634,13.8108634 C13.5505139,14.0712129 13.1284039,14.0712129 12.8680544,13.8108634 L10.3224699,11.265279 C10.0621204,11.0049295 10.0621204,10.5828195 10.3224699,10.3224699 C10.5828195,10.0621204 11.0049295,10.0621204 11.265279,10.3224699 Z M3.13194565,2.18913661 L5.67753006,4.73472102 C5.93787959,4.99507055 5.93787959,5.41718053 5.67753006,5.67753006 C5.41718053,5.93787959 4.99507055,5.93787959 4.73472102,5.67753006 L2.18913661,3.13194565 C1.92878708,2.87159612 1.92878708,2.44948613 2.18913661,2.18913661 C2.44948613,1.92878708 2.87159612,1.92878708 3.13194565,2.18913661 Z" id="形状" fill="#444444"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

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

@@ -0,0 +1,213 @@
+.titaui-pc-video-modal__box {
+  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 {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.titaui-pc-video-modal__controls-button {
+  width: 24px;
+  height: 24px;
+  border-radius: 12px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.titaui-pc-video-modal__controls-button: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 {
+  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 {
+  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;
+}
+
+.titaui-pc-video-modal__controls-right {
+  display: inline-flex;
+  align-items: center;
+}
+
+.titaui-pc-video-modal__controls-right-shrink {
+  margin-left: 6px;
+  width: 24px;
+  height: 24px;
+  border-radius: 12px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.titaui-pc-video-modal__controls-right-shrink:hover {
+  background: rgba(20, 28, 40, 0.6);
+}
+
+.titaui-pc-video-modal__controls-right-shrink > 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;
+  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__progress-current {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  background: #77be16;
+  height: 100%;
+  z-index: 3;
+}
+
+.titaui-pc-video-modal__progress-current-dot {
+  position: absolute;
+  right: 0;
+  bottom: -2px;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #77be16;
+}

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

@@ -0,0 +1,322 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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 _pause = _interopRequireDefault(require("./img/pause.svg"));
+
+var _muted = _interopRequireDefault(require("./img/muted.svg"));
+
+var _notMuted = _interopRequireDefault(require("./img/not-muted.svg"));
+
+var _small = _interopRequireDefault(require("./img/small.svg"));
+
+var _bigFaqi = _interopRequireDefault(require("./img/bigFaqi.png"));
+
+require("./index.css");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+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."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+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,
+      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),
+      _useState2 = _slicedToArray(_useState, 2),
+      isOverModal = _useState2[0],
+      setIsOverModal = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(true),
+      _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();
+    }
+  }; // 音量
+
+
+  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 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 handleClickTotalProgress = function handleClickTotalProgress(e) {
+    getCurrentProgressWidth(e);
+  }; // 拖动进度条
+
+
+  var handleMouseDownProgress = function handleMouseDownProgress() {
+    setIsMouseDown(true);
+  };
+
+  var handleMouseMoveProgress = function handleMouseMoveProgress(e) {
+    if (isMouseDown) {
+      getCurrentProgressWidth(e);
+    }
+  };
+
+  var handleMouseUpProgress = function handleMouseUpProgress() {
+    setIsMouseDown(false);
+  }; // 点击音量进度条
+
+
+  var handleMouseClickVolume = function handleMouseClickVolume(e) {
+    getCurrentVolumeWidth(e);
+  }; // 鼠标移入移出视频区域
+
+
+  var handleMouseOverVideoModal = function handleMouseOverVideoModal() {
+    setIsOverModal(true);
+  };
+
+  var handleMouseLeaveVideoModal = function handleMouseLeaveVideoModal() {
+    setIsOverModal(false);
+  };
+
+  var handleCloseAndOpenSmallVideo = function handleCloseAndOpenSmallVideo() {
+    onCancel();
+    videoRef.current.pause();
+    showSmallVideo();
+  }; // 初始获得总时间
+
+
+  (0, _react.useEffect)(function () {
+    videoRef.current.onloadedmetadata = function () {
+      setTotalTime(videoRef.current.duration.toString());
+    };
+  }, [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);
+    }
+  }, [visible]);
+  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__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);
+    },
+    style: {
+      width: "840px",
+      borderRadius: "24px"
+    },
+    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")
+  }, /*#__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")
+  }, /*#__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))
+  }))));
+};
+
+var _default = VideoModal;
+exports["default"] = _default;

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

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var formatSecToDate = function formatSecToDate(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);
+  var res = "";
+
+  if (m !== "00") {
+    res += "".concat(m, ":");
+  } else {
+    res += "00:";
+  }
+
+  res += "".concat(s);
+  return res;
+};
+
+var _default = formatSecToDate;
+exports["default"] = _default;

package/lib/index.js

@@ -141,6 +141,12 @@ Object.defineProperty(exports, "FileList", {
     return _fileList["default"];
   }
 });
+Object.defineProperty(exports, "FloatFixedVideoModal", {
+  enumerable: true,
+  get: function get() {
+    return _floatFixedVideoModal["default"];
+  }
+});
 Object.defineProperty(exports, "FollowerVisitor", {
   enumerable: true,
   get: function get() {
@@ -501,6 +507,12 @@ Object.defineProperty(exports, "VersionChangeModal", {
     return _versionChangeModal["default"];
   }
 });
+Object.defineProperty(exports, "VideoModal", {
+  enumerable: true,
+  get: function get() {
+    return _videoModal["default"];
+  }
+});
 Object.defineProperty(exports, "WeeklyReport", {
   enumerable: true,
   get: function get() {
@@ -726,4 +738,8 @@ var _uploadPhotoModal = _interopRequireDefault(require("./components/upload-phot
 
 var _bookDemo = _interopRequireDefault(require("./components/book-demo"));
 
+var _videoModal = _interopRequireDefault(require("./components/video-modal"));
+
+var _floatFixedVideoModal = _interopRequireDefault(require("./components/float-fixed-video-modal"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

package/lib/utils/tools.js

@@ -10,7 +10,7 @@ exports.htmlDecodeByHtmlRegExp = htmlDecodeByHtmlRegExp;
 exports.htmlDecodeByRegExp = htmlDecodeByRegExp;
 exports.htmlEncodeByRegExp = htmlEncodeByRegExp;
 exports.htmlEncodeToHtmlByRegExp = htmlEncodeToHtmlByRegExp;
-exports.unHighLight = exports.openPage = void 0;
+exports.unHighLight = exports.openPage = exports.htmlToText = void 0;
 
 var _platform = require("./platform");
 
@@ -274,4 +274,13 @@ function htmlDecodeByHtmlRegExp(str) {
   temp = temp.replace(/"/g, "\"");
   temp = temp.replace(/<br\/>/g, "\n");
   return temp;
-}
+}
+
+var htmlToText = function htmlToText(text) {
+  var div = document.createElement("div");
+  div.innerHTML = text;
+  var newtext = div.innerText || div.textContent;
+  return newtext;
+};
+
+exports.htmlToText = htmlToText;