@titaui/pc 1.10.21 → 1.10.24

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

@@ -0,0 +1,334 @@
+"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 _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"));
+
+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-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),
+      isPlay = _useState2[0],
+      setIsPlay = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(true),
+      _useState4 = _slicedToArray(_useState3, 2),
+      isMuted = _useState4[0],
+      setIsMuted = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      isMouseDown = _useState6[0],
+      setIsMouseDown = _useState6[1];
+
+  var _useState7 = (0, _react.useState)(false),
+      _useState8 = _slicedToArray(_useState7, 2),
+      showDot = _useState8[0],
+      setShowDot = _useState8[1];
+
+  var _useState9 = (0, _react.useState)("00:00"),
+      _useState10 = _slicedToArray(_useState9, 2),
+      totalTime = _useState10[0],
+      setTotalTime = _useState10[1];
+
+  var _useState11 = (0, _react.useState)("00:00"),
+      _useState12 = _slicedToArray(_useState11, 2),
+      currentTime = _useState12[0],
+      setCurrentTime = _useState12[1];
+
+  var _useState13 = (0, _react.useState)(false),
+      _useState14 = _slicedToArray(_useState13, 2),
+      isSmallVideo = _useState14[0],
+      setIsSmallVideo = _useState14[1];
+
+  var _useState15 = (0, _react.useState)("0px"),
+      _useState16 = _slicedToArray(_useState15, 2),
+      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 videoBoxRef = (0, _react.useRef)(document.createElement("div"));
+  var volumeBoxRef = (0, _react.useRef)(document.createElement("div")); // *---播放/暂停---*
+
+  var handlePlayVideo = function handlePlayVideo() {
+    setIsPlay(!isPlay);
+
+    if (isPlay) {
+      videoRef.current.pause();
+    } else {
+      videoRef.current.play();
+    }
+  }; //* ---进度条---*
+  // 鼠标移入进度条区域
+
+
+  var handleMouseEnterProgress = function handleMouseEnterProgress() {
+    setShowDot(true);
+  }; // 鼠标移出进度条区域
+
+
+  var handleMouseLeaveProgress = function handleMouseLeaveProgress() {
+    setShowDot(false);
+    setIsMouseDown(false);
+  }; // 获得点击进度条任意位置 计算实时进度条的宽度
+
+
+  var getCurrentProgressWidth = function getCurrentProgressWidth(e) {
+    var videoContainerLeft = videoBoxRef.current.getBoundingClientRect().left;
+    var currentWidth = e.clientX - videoContainerLeft;
+    setProgressWidth("".concat(currentWidth, "px"));
+    videoRef.current.currentTime = videoRef.current.duration * currentWidth / containerWidth;
+  }; // 点击进度条
+
+
+  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 handleChangeVolumeMuted = function handleChangeVolumeMuted() {
+    setIsMuted(!isMuted);
+    videoRef.current.muted = !videoRef.current.muted;
+  }; // 点击音量进度条 计算音量进度条宽度
+
+
+  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;
+    setIsPlay(false);
+  };
+
+  var handleGetCurrentTime = function handleGetCurrentTime() {
+    return currentTime;
+  };
+
+  (0, _react.useImperativeHandle)(ref, function () {
+    return {
+      closeVideo: handleCloseAndPauseVideo,
+      getCurrentTime: handleGetCurrentTime
+    };
+  }); // *---初始化---*
+  // 初始获得总时间
+
+  var getTotalTime = function getTotalTime() {
+    if (videoRef.current.duration) {
+      setTotalTime(videoRef.current.duration.toString());
+      videoRef.current.currentTime = parseFloat(time);
+    }
+  }; // 获得实时播放时间
+
+
+  var handleTimeUpdate = function handleTimeUpdate() {
+    if (videoRef.current.currentTime) {
+      setCurrentTime(videoRef.current.currentTime.toString());
+      setProgressWidth("".concat(containerWidth * videoRef.current.currentTime / videoRef.current.duration, "px"));
+    }
+  }; // 初始获得音量宽度
+
+
+  (0, _react.useEffect)(function () {
+    var VolumeTotalProgressWidth = 34;
+    setVolumeWidth("".concat(VolumeTotalProgressWidth * videoRef.current.volume, "px"));
+  }, []); // 初始判断是否是小窗口
+
+  (0, _react.useEffect)(function () {
+    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);
+      }
+    }
+  };
+
+  (0, _react.useEffect)(function () {
+    document.addEventListener("keydown", handleKeyDown);
+    return function () {
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, []);
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "".concat(preCls, "__box"),
+    ref: videoBoxRef
+  }, /*#__PURE__*/_react["default"].createElement("video", {
+    ref: videoRef,
+    src: videoSrc,
+    loop: true,
+    autoPlay: true,
+    muted: true,
+    poster: videoPoster,
+    style: {
+      width: "100%",
+      height: "100%"
+    },
+    onClick: handlePlayVideo,
+    onLoadedMetadata: getTotalTime,
+    onTimeUpdate: handleTimeUpdate
+  }), /*#__PURE__*/_react["default"].createElement("div", {
+    className: (0, _classnames["default"])("".concat(preCls, "__mouseMove"), _defineProperty({}, "".concat(preCls, "__mouseMove--small"), isSmallVideo)),
+    onMouseMove: handleMouseMoveProgress,
+    onMouseUp: handleMouseUpProgress,
+    onMouseEnter: handleMouseEnterProgress,
+    onMouseLeave: handleMouseLeaveProgress
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: (0, _classnames["default"])("".concat(preCls, "__progress"), _defineProperty({}, "".concat(preCls, "__progress--small"), isSmallVideo)),
+    onClick: handleClickTotalProgress,
+    onMouseDown: handleMouseDownProgress
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "".concat(preCls, "__progress-current"),
+    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, "__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", {
+    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,
+    ref: volumeBoxRef
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: (0, _classnames["default"])(_defineProperty({}, "".concat(preCls, "__controls-volume-current--hidden"), isMuted), "".concat(preCls, "__controls-volume-current")),
+    style: {
+      width: volumeWidth
+    }
+  })), /*#__PURE__*/_react["default"].createElement("div", {
+    onClick: handleChangeVolumeMuted,
+    className: "".concat(preCls, "__controls-play")
+  }, /*#__PURE__*/_react["default"].createElement("img", {
+    src: isMuted ? _muted["default"] : _notMuted["default"],
+    alt: "\u97F3\u91CF"
+  }))), extraButton))));
+});
+var _default = VideoBox;
+exports["default"] = _default;

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

@@ -0,0 +1,21 @@
+<?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(-486.000000, -87.000000)">
+            <g id="全屏" transform="translate(486.000000, 87.000000)">
+                <rect id="矩形备份-6" x="0" y="0" width="16" height="16"></rect>
+                <g id="全屏" filter="url(#filter-1)">
+                    <g>
+                        <path d="M13.3333333,8.8699914 C13.6952827,8.8699914 13.9898621,9.15843612 13.9997439,9.51799775 L14,9.53665807 L14,11.8095238 C14,13.0071927 13.0388065,13.9803629 11.8457473,13.9997065 L11.8095238,14 L9.52485212,14 C9.15666229,14 8.85818546,13.7015232 8.85818546,13.3333333 C8.85818546,12.971384 9.14663018,12.6768046 9.5061918,12.6669228 L9.52485212,12.6666667 L11.8095238,12.6666667 C12.2760501,12.6666667 12.6555245,12.2939535 12.6664257,11.8300485 L12.6666667,11.8095238 L12.6666667,9.53665807 C12.6666667,9.16846824 12.9651435,8.8699914 13.3333333,8.8699914 Z M2.66666667,8.84191565 C3.02861599,8.84191565 3.32319545,9.13036037 3.33307721,9.489922 L3.33333333,9.50858232 L3.33333333,11.8095238 C3.33333333,12.2760501 3.70604651,12.6555245 4.16995152,12.6664257 L4.19047619,12.6666667 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 L6.47311169,14 L4.19047619,14 C2.99280726,14 2.0196371,13.0388065 2.00029346,11.8457473 L2,11.8095238 L2,9.50858232 C2,9.14039249 2.29847683,8.84191565 2.66666667,8.84191565 Z M6.47638719,2 C6.84457703,2 7.14305386,2.29847683 7.14305386,2.66666667 C7.14305386,3.02861599 6.85460914,3.32319545 6.49504752,3.33307721 L6.47638719,3.33333333 L4.19047619,3.33333333 C3.72394994,3.33333333 3.34447552,3.70604651 3.33357425,4.16995152 L3.33333333,4.19047619 L3.33333333,6.47612057 C3.33333333,6.8443104 3.0348565,7.14278723 2.66666667,7.14278723 C2.30471734,7.14278723 2.01013789,6.85434251 2.00025612,6.49478089 L2,6.47612057 L2,4.19047619 C2,2.99280726 2.96119347,2.0196371 4.15425266,2.00029346 L4.19047619,2 L6.47638719,2 Z M11.8095238,2 C13.0071927,2 13.9803629,2.96119347 13.9997065,4.15425266 L14,4.19047619 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,6.46713633 L12.6666667,4.19047619 C12.6666667,3.72394994 12.2939535,3.34447552 11.8300485,3.33357425 L11.8095238,3.33333333 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 L9.56078908,2 L11.8095238,2 Z" id="形状" fill="#444444" fill-rule="nonzero"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

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

@@ -0,0 +1,14 @@
+<?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>编组 8</title>
+    <g id="线性" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <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>
+</svg>

package/lib/components/video-modal/img/not-muted.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>编组 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>
+</svg>

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

@@ -0,0 +1,13 @@
+<?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>编组 8</title>
+    <g id="线性" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <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>
+</svg>

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

@@ -0,0 +1,18 @@
+<?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>编组 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>
+</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,83 @@
+.titaui-pc-video-modal__full {
+  position: relative;
+}
+
+.titaui-pc-video-modal__full-control {
+  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__full-control:hover {
+  background: rgba(20, 28, 40, 0.6);
+}
+
+.titaui-pc-video-modal__full-control > img {
+  width: 16px;
+  height: 16px;
+}
+
+.titaui-pc-video-modal__small {
+  width: 360px;
+  height: 200px;
+  position: relative;
+  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__small-enlarge {
+  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__small-enlarge:hover {
+  background: rgba(20, 28, 40, 0.6);
+}
+
+.titaui-pc-video-modal__small-enlarge > img {
+  width: 16px;
+  height: 16px;
+}
+
+.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__small-close:hover {
+  background: rgba(20, 28, 40, 0.6);
+}
+
+.titaui-pc-video-modal__small-close > img {
+  width: 16px;
+  height: 16px;
+}
+
+.titaui-pc-video-modal__small .titaui-pc-video-box__box {
+  border-radius: 0 !important;
+}