@titaui/pc 1.10.22 → 1.10.23

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;
+}

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

@@ -0,0 +1,182 @@
+"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 _dialog = _interopRequireDefault(require("../dialog"));
+
+var _videoBox = _interopRequireDefault(require("./components/video-box"));
+
+var _conditionRender = _interopRequireDefault(require("../condition-render"));
+
+var _bsGlobal = require("../../utils/bs-global");
+
+var _full = _interopRequireDefault(require("./img/full.svg"));
+
+var _small = _interopRequireDefault(require("./img/small.svg"));
+
+var _close = _interopRequireDefault(require("./img/close.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 _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 userId = (0, _bsGlobal.getBSGlobal)("loginUserInfo").Id;
+var VideoModal = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var videoSrc = props.videoSrc,
+      title = props.title,
+      videoPoster = props.videoPoster,
+      visible = props.visible,
+      onClose = props.onClose,
+      onOpen = props.onOpen,
+      _props$hasextraButton = props.hasextraButton,
+      hasextraButton = _props$hasextraButton === void 0 ? true : _props$hasextraButton;
+
+  var _useState = (0, _react.useState)(true),
+      _useState2 = _slicedToArray(_useState, 2),
+      smallVideoVisible = _useState2[0],
+      setSmallVideoVisible = _useState2[1];
+
+  var _useState3 = (0, _react.useState)("0"),
+      _useState4 = _slicedToArray(_useState3, 2),
+      time = _useState4[0],
+      setTime = _useState4[1];
+
+  var modalVideoRef = (0, _react.useRef)(document.createElement("div"));
+  var smallVideoRef = (0, _react.useRef)(document.createElement("div")); // 关闭小窗口视频
+
+  var handleClickCloseSmallVideo = function handleClickCloseSmallVideo() {
+    setSmallVideoVisible(false); // @ts-ignore
+
+    smallVideoRef.current.closeVideo();
+    localStorage.setItem("hide_performance_small_video_".concat(userId), "true");
+  }; // 打开dialog弹层 关闭小窗口
+
+
+  var handleClickToFull = function handleClickToFull() {
+    // @ts-ignore
+    setTime(smallVideoRef.current.getCurrentTime());
+    onOpen(); // @ts-ignore
+
+    smallVideoRef.current.closeVideo();
+    setSmallVideoVisible(false);
+  }; // 关闭dialog弹层 打开小窗口
+
+
+  var handleClickToSmall = function handleClickToSmall() {
+    onClose(); // @ts-ignore
+
+    setTime(modalVideoRef.current.getCurrentTime());
+    setSmallVideoVisible(true);
+  }; // 关闭过一次自动播放小窗口 之后不再出现
+
+
+  (0, _react.useEffect)(function () {
+    if (localStorage.getItem("hide_performance_small_video_".concat(userId)) === "true") {
+      setSmallVideoVisible(false); // @ts-ignore
+
+      smallVideoRef.current.closeVideo();
+    }
+  }, []);
+  (0, _react.useEffect)(function () {
+    if (visible) {
+      setSmallVideoVisible(false);
+    }
+  }, [visible]); // *---提供给父组件调用(因为有时间的联动，视频默认从0开始需要手动调用此方法)---*
+
+  var handleSetDefaultTime = function handleSetDefaultTime() {
+    setTime("0");
+  };
+
+  (0, _react.useImperativeHandle)(ref, function () {
+    return {
+      setDefaultTime: handleSetDefaultTime
+    };
+  });
+  (0, _react.useEffect)(function () {
+    if (!hasextraButton) {
+      setSmallVideoVisible(false);
+    }
+  }, []);
+  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_conditionRender["default"], {
+    condition: !smallVideoVisible
+  }, /*#__PURE__*/_react["default"].createElement(_dialog["default"], {
+    visible: visible,
+    title: title,
+    onClose: onClose,
+    style: {
+      width: "840px",
+      borderRadius: "24px"
+    },
+    noHeadLine: true,
+    noFooterLine: true,
+    noFooter: true,
+    destroyOnClose: true
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "".concat(preCls, "__full")
+  }, /*#__PURE__*/_react["default"].createElement(_videoBox["default"], {
+    videoSrc: videoSrc,
+    containerWidth: 840,
+    ref: modalVideoRef,
+    extraButton: hasextraButton ? /*#__PURE__*/_react["default"].createElement("div", {
+      className: "".concat(preCls, "__full-control"),
+      onClick: handleClickToSmall
+    }, /*#__PURE__*/_react["default"].createElement("img", {
+      src: _small["default"],
+      alt: "\u7F29\u5C0F"
+    })) : "",
+    videoPoster: videoPoster,
+    time: time
+  })))), /*#__PURE__*/_react["default"].createElement(_conditionRender["default"], {
+    condition: smallVideoVisible
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "".concat(preCls, "__small")
+  }, /*#__PURE__*/_react["default"].createElement(_videoBox["default"], {
+    videoSrc: videoSrc,
+    containerWidth: 360,
+    hasHead: true,
+    title: title,
+    extraButton: /*#__PURE__*/_react["default"].createElement("div", {
+      className: "".concat(preCls, "__small-enlarge"),
+      onClick: handleClickToFull
+    }, /*#__PURE__*/_react["default"].createElement("img", {
+      src: _full["default"],
+      alt: "\u5168\u5C4F"
+    })),
+    videoPoster: videoPoster,
+    headButton: /*#__PURE__*/_react["default"].createElement("div", {
+      className: "".concat(preCls, "__small-close"),
+      onClick: handleClickCloseSmallVideo
+    }, /*#__PURE__*/_react["default"].createElement("img", {
+      src: _close["default"],
+      alt: "\u5173\u95ED"
+    })),
+    ref: smallVideoRef,
+    time: time
+  }))));
+});
+var _default = VideoModal;
+exports["default"] = _default;

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

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var formatSecToTime = function formatSecToTime(value) {
+  var result = parseInt(value, 10);
+  var m = Math.floor(result / 60 % 60) < 10 ? "0".concat(Math.floor(result / 60 % 60)) : Math.floor(result / 60 % 60);
+  var s = Math.floor(result % 60) < 10 ? "0".concat(Math.floor(result % 60)) : Math.floor(result % 60);
+  var res = "";
+
+  if (m !== "00") {
+    res += "".concat(m, ":");
+  } else {
+    res += "00:";
+  }
+
+  res += "".concat(s);
+  return res;
+};
+
+var _default = formatSecToTime;
+exports["default"] = _default;

package/lib/index.js

@@ -507,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() {
@@ -732,6 +738,8 @@ var _uploadPhotoModal = _interopRequireDefault(require("./components/upload-phot
 
 var _bookDemo = _interopRequireDefault(require("./components/book-demo"));
 
+var _videoModal = _interopRequireDefault(require("./components/video-modal"));
+
 var _supersetCharts = _interopRequireDefault(require("./components/superset-charts"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@titaui/pc",
-  "version": "1.10.22",
+  "version": "1.10.23",
   "nameCN": "",
   "description": "",
   "main": "lib/index.js",