@titaui/pc 1.10.4 → 1.10.7

package/lib/components/float-fixed-video-modal/img/pause.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(-468.000000, -87.000000)">
+            <g id="暂停" transform="translate(468.000000, 87.000000)">
+                <rect id="矩形备份-5" opacity="0.666846866" x="0" y="0" width="16" height="16"></rect>
+                <g id="暂停" filter="url(#filter-1)">
+                    <g>
+                        <path d="M10.023464,4.30420899 L14.4700011,11.4186684 C14.9383376,12.1680068 14.7105405,13.1551274 13.9612021,13.623464 C13.7069115,13.7823956 13.4130753,13.8666667 13.1132038,13.8666667 L4.22012956,13.8666667 C3.33647396,13.8666667 2.62012956,13.1503223 2.62012956,12.2666667 C2.62012956,11.9667951 2.70440067,11.6729589 2.86333227,11.4186684 L7.30986938,4.30420899 C7.77820591,3.55487054 8.76532652,3.32707348 9.51466497,3.79541001 C9.72069558,3.92417914 9.89469482,4.09817838 10.023464,4.30420899 Z" id="三角形" fill="#444444" transform="translate(8.666667, 8.000000) rotate(90.000000) translate(-8.666667, -8.000000) "></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/lib/components/float-fixed-video-modal/img/play.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(-414.000000, -87.000000)">
+            <g id="播放" transform="translate(414.000000, 87.000000)">
+                <rect id="矩形" x="0" y="0" width="16" height="16"></rect>
+                <g id="播放" filter="url(#filter-1)">
+                    <g>
+                        <rect id="矩形" fill="#444444" x="3.66666667" y="1.66666667" width="2.66666667" height="12.6666667" rx="1.33333333"></rect>
+                        <rect id="矩形备份" fill="#444444" x="9.66666667" y="1.66666667" width="2.66666667" height="12.6666667" rx="1.33333333"></rect>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/lib/components/float-fixed-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/float-fixed-video-modal/img/volume.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(-450.000000, -87.000000)">
+            <g id="声音" transform="translate(450.000000, 87.000000)">
+                <rect id="矩形" x="0" y="0" width="16" height="16"></rect>
+                <g id="声音" filter="url(#filter-1)">
+                    <g>
+                        <path d="M7.43747973,2.38934893 C8.43638105,1.54323122 9.93143682,1.66906408 10.7752429,2.66990496 C11.135693,3.09743596 11.3333333,3.63877514 11.3333333,4.19804751 L11.3333333,4.19804751 L11.3333333,11.8593368 C11.3333333,13.1671926 10.2743236,14.228681 8.96640827,14.228681 C8.40648254,14.228681 7.8647838,14.0299826 7.43747973,13.6680354 L7.43747973,13.6680354 L7.38734907,13.6255723 L5.84463197,12.0331692 C5.79440129,11.9813208 5.72529575,11.9520527 5.65310585,11.9520527 L5.65310585,11.9520527 L4.9870801,11.9520527 C3.33666263,11.9520527 2,10.6122616 2,8.96110195 L2,8.96110195 L2,7.09628233 C2,5.44512271 3.33666263,4.10533156 4.9870801,4.10533156 L4.9870801,4.10533156 L5.65310585,4.10533156 C5.72529575,4.10533156 5.79440129,4.07606349 5.84463197,4.02421504 L5.84463197,4.02421504 L7.38734907,2.43181202 Z M9.75585962,3.52934405 C9.38740727,3.09232163 8.73526822,3.03743369 8.29926628,3.40674842 L8.29926628,3.40674842 L6.80226255,4.95196579 C6.5008785,5.26305644 6.08624526,5.4386649 5.65310585,5.4386649 L5.65310585,5.4386649 L4.9870801,5.4386649 C4.07374098,5.4386649 3.33333333,6.1808055 3.33333333,7.09628233 L3.33333333,7.09628233 L3.33333333,8.96110195 C3.33333333,9.87657878 4.07374098,10.6187194 4.9870801,10.6187194 L4.9870801,10.6187194 L5.65310585,10.6187194 C6.08624526,10.6187194 6.5008785,10.7943278 6.80226255,11.1054185 L6.80226255,11.1054185 L8.29926628,12.6506359 C8.48581643,12.8086529 8.72216689,12.8953477 8.96640827,12.8953477 C9.53724522,12.8953477 10,12.4315098 10,11.8593368 L10,11.8593368 L10,4.19804751 C10,3.95323447 9.91350763,3.71633083 9.75585962,3.52934405 Z M12.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 C12.3515194,4.02278948 12.7635817,4.11433971 12.9612676,4.42495852 Z" id="形状结合" fill="#444444" fill-rule="nonzero"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

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

@@ -0,0 +1,243 @@
+.titaui-pc-float-fixed-video {
+  display: none;
+  position: fixed;
+  bottom: 20px;
+  right: 72px;
+  width: 360px;
+  height: 200px;
+  border-radius: 12px;
+  overflow: hidden;
+  z-index: 11;
+  box-shadow: 0px 2px 12px 0px rgba(127, 145, 180, 0.2);
+  cursor: pointer;
+}
+
+.titaui-pc-float-fixed-video--show {
+  display: block;
+}
+
+.titaui-pc-float-fixed-video__video {
+  width: 360px;
+  height: 200px;
+}
+
+.titaui-pc-float-fixed-video__mask1 {
+  opacity: 0;
+  transition: 0.5s;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 16px;
+  box-sizing: border-box;
+  position: absolute;
+  top: 0;
+  width: 360px;
+  height: 42px;
+  background: linear-gradient(180deg, #5a6068 0%, rgba(45, 60, 81, 0) 100%);
+}
+
+.titaui-pc-float-fixed-video__mask1--show {
+  opacity: 1;
+  transition: 0.5s;
+}
+
+.titaui-pc-float-fixed-video__mask1-title {
+  font-size: 12px;
+  font-weight: normal;
+  color: #ffffff;
+  line-height: 18px;
+}
+
+.titaui-pc-float-fixed-video__mask1-close {
+  width: 14px;
+  height: 14px;
+  cursor: pointer;
+}
+
+.titaui-pc-float-fixed-video__mask2 {
+  opacity: 0;
+  transition: 0.5;
+  position: absolute;
+  bottom: 0;
+  width: 360px;
+  height: 42px;
+  background: linear-gradient(180deg, rgba(20, 28, 40, 0) 0%, #5a6068 100%);
+}
+
+.titaui-pc-float-fixed-video__mask2--show {
+  opacity: 1;
+  transition: 0.5s;
+}
+
+.titaui-pc-float-fixed-video__controls {
+  opacity: 0;
+  transition: 0.5s;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 12px;
+  box-sizing: border-box;
+  position: absolute;
+  bottom: 0;
+  z-index: 2;
+}
+
+.titaui-pc-float-fixed-video__controls--show {
+  opacity: 1;
+  transition: 0.5s;
+}
+
+.titaui-pc-float-fixed-video__controls-left {
+  display: flex;
+  align-items: center;
+}
+
+.titaui-pc-float-fixed-video__controls-right {
+  display: inline-flex;
+}
+
+.titaui-pc-float-fixed-video__controls-play {
+  display: inline-flex;
+  align-items: center;
+  width: 16px;
+  height: 16px;
+  cursor: pointer;
+}
+
+.titaui-pc-float-fixed-video__controls-time {
+  font-size: 12px;
+  color: #ffffff;
+  line-height: 18px;
+}
+
+.titaui-pc-float-fixed-video__controls-time:nth-of-type(1) {
+  margin-left: 6px;
+}
+
+.titaui-pc-float-fixed-video__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-float-fixed-video__controls-volume-progress {
+  position: relative;
+  width: 34px;
+  height: 2px;
+  background: rgba(255, 255, 255, 0.4);
+  border-radius: 1px;
+  cursor: pointer;
+}
+
+.titaui-pc-float-fixed-video__controls-volume-progress--hidden {
+  display: none;
+}
+
+.titaui-pc-float-fixed-video__controls-volume-current {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  height: 2px;
+  background: rgba(255, 255, 255, 0.6);
+  border-radius: 1px;
+}
+
+.titaui-pc-float-fixed-video__controls-volume-current::after {
+  content: '';
+  position: absolute;
+  right: 0;
+  bottom: -1px;
+  width: 4px;
+  height: 4px;
+  border-radius: 50%;
+  background: #ffffff;
+}
+
+.titaui-pc-float-fixed-video__controls-volume-current--hidden {
+  display: none;
+}
+
+.titaui-pc-float-fixed-video__controls-full {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 12px;
+  margin-left: 6px;
+  cursor: pointer;
+}
+
+.titaui-pc-float-fixed-video__controls-full:hover {
+  background: rgba(20, 28, 40, 0.6);
+}
+
+.titaui-pc-float-fixed-video__controls-full > img {
+  width: 16px;
+  height: 16px;
+}
+
+.titaui-pc-float-fixed-video__controls-button {
+  width: 24px;
+  height: 24px;
+  border-radius: 12px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.titaui-pc-float-fixed-video__controls-button:hover {
+  background: rgba(20, 28, 40, 0.6);
+}
+
+.titaui-pc-float-fixed-video__progress {
+  opacity: 0;
+  transition: 0.5s;
+  position: absolute;
+  bottom: 38px;
+  width: 100%;
+  height: 2px;
+  background: #ffffff;
+  z-index: 3;
+  cursor: pointer;
+}
+
+.titaui-pc-float-fixed-video__progress--show {
+  opacity: 1;
+  transition: 0.5s;
+}
+
+.titaui-pc-float-fixed-video__progress:hover {
+  height: 4px;
+}
+
+.titaui-pc-float-fixed-video__progress--show {
+  opacity: 1;
+  transition: 0.5s;
+}
+
+.titaui-pc-float-fixed-video__progress-current {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  background: #77be16;
+  height: 100%;
+  z-index: 3;
+}
+
+.titaui-pc-float-fixed-video__progress-current-dot {
+  position: absolute;
+  right: 0;
+  bottom: -2px;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #77be16;
+}

package/lib/components/float-fixed-video-modal/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 _bsGlobal = require("../../utils/bs-global");
+
+var _videoModal = _interopRequireDefault(require("../video-modal"));
+
+var _close = _interopRequireDefault(require("./img/close.png"));
+
+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"));
+
+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-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),
+      _useState2 = _slicedToArray(_useState, 2),
+      isHover = _useState2[0],
+      setIsHover = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      videoModalVisible = _useState4[0],
+      setVideoModalVisible = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(true),
+      _useState6 = _slicedToArray(_useState5, 2),
+      isPlay = _useState6[0],
+      setIsPlay = _useState6[1];
+
+  var _useState7 = (0, _react.useState)(true),
+      _useState8 = _slicedToArray(_useState7, 2),
+      isMuted = _useState8[0],
+      setIsMuted = _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),
+      showDot = _useState14[0],
+      setShowDot = _useState14[1];
+
+  var _useState15 = (0, _react.useState)(false),
+      _useState16 = _slicedToArray(_useState15, 2),
+      isMouseDown = _useState16[0],
+      setIsMouseDown = _useState16[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 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 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);
+  }; // 获得点击进度条 进度条的宽度
+
+
+  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 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 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 handleCloseBigVideo = function handleCloseBigVideo() {
+    setVideoModalVisible(false);
+  };
+
+  var showSmallVideo = function showSmallVideo() {
+    videoRef.current.play();
+    setIsPlay(true);
+    videoRef.current.muted = true;
+    setIsMuted(true);
+    boxRef.current.style.display = "block";
+  };
+
+  var handleMouseOverVideo = function handleMouseOverVideo() {
+    setIsHover(true);
+  };
+
+  var handleMouseLeaveVideo = function handleMouseLeaveVideo() {
+    setIsHover(false);
+  };
+
+  (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(360 * 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();
+      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";
+    }
+  }, [visible]);
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: preCls,
+    ref: boxRef,
+    onMouseOver: handleMouseOverVideo,
+    onMouseLeave: handleMouseLeaveVideo,
+    onFocus: handleMouseOverVideo
+  }, /*#__PURE__*/_react["default"].createElement("video", {
+    ref: videoRef,
+    src: videoSrc,
+    loop: true,
+    autoPlay: true,
+    muted: true,
+    poster: _smallFaQi["default"],
+    className: "".concat(preCls, "__video")
+  }), /*#__PURE__*/_react["default"].createElement("div", {
+    className: (0, _classnames["default"])("".concat(preCls, "__progress"), _defineProperty({}, "".concat(preCls, "__progress--show"), isHover)),
+    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"), isHover))
+  }, /*#__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"))
+  }, /*#__PURE__*/_react["default"].createElement("img", {
+    src: isPlay ? _play["default"] : _pause["default"],
+    alt: "play"
+  })), /*#__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"] : _volume["default"],
+    className: "".concat(preCls, "__controls-play"),
+    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;
+exports["default"] = _default;