@vtx/player 0.0.12 → 0.0.13

package/lib/live-control/index.js

@@ -0,0 +1,381 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _react = require("react");
+
+var _api = require("../api");
+
+var _controls = require("../controls");
+
+var _icons = require("../icons");
+
+var _livePlayer = _interopRequireDefault(require("../live-player"));
+
+var _ahooks = require("ahooks");
+
+var _space = _interopRequireDefault(require("antd/lib/space"));
+
+var _tooltip = _interopRequireDefault(require("antd/lib/tooltip"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
+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 DEFAULT_GRID = 2;
+var DEFAULT_ACTIVE = 0;
+var DEFAULT_CHANNELS = Array(9).fill({
+  channelNum: ''
+});
+/**
+ * 实时分屏组件
+ */
+
+var LiveControl = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var _props$height = props.height,
+      height = _props$height === void 0 ? '100%' : _props$height,
+      _props$width = props.width,
+      width = _props$width === void 0 ? '100%' : _props$width,
+      onExpandChange = props.onExpandChange,
+      onChannelChange = props.onChannelChange,
+      polling = props.polling;
+
+  var _useSetState = (0, _ahooks.useSetState)({
+    expand: true,
+    grid: DEFAULT_GRID,
+    activeIndex: DEFAULT_ACTIVE,
+    channels: DEFAULT_CHANNELS
+  }),
+      _useSetState2 = _slicedToArray(_useSetState, 2),
+      state = _useSetState2[0],
+      setState = _useSetState2[1];
+
+  var wrapRef = (0, _react.useRef)(null);
+
+  var _useFullscreen = (0, _ahooks.useFullscreen)(wrapRef),
+      _useFullscreen2 = _slicedToArray(_useFullscreen, 2),
+      isFullscreen = _useFullscreen2[0],
+      toggleFullscreen = _useFullscreen2[1].toggleFullscreen;
+
+  var channelRef = (0, _react.useRef)(DEFAULT_CHANNELS); // 实时视频轮询
+
+  (0, _ahooks.useInterval)(function () {
+    // 是否有视频正在播放
+    var hasVideo = state.channels.some(function (item) {
+      return item.channelNum;
+    });
+
+    if (polling && hasVideo) {
+      setState({
+        channels: DEFAULT_CHANNELS
+      });
+      var timer = setTimeout(function () {
+        setState({
+          channels: channelRef.current
+        });
+        clearTimeout(timer);
+      }, 0);
+    }
+  }, polling);
+  (0, _react.useImperativeHandle)(ref, function () {
+    return {
+      load: function load(channel) {
+        var index = state.channels.findIndex(function (c) {
+          return c.channelNum === channel.channelNum;
+        });
+
+        if (~index) {
+          setState({
+            activeIndex: index
+          }); // 如果通道号已经存在，则设置激活索引为该通道
+        } else {
+          // 播放该通道
+          var newChannels = _toConsumableArray(state.channels);
+
+          newChannels[state.activeIndex] = channel;
+          var activeIndex = getActiveIndex(newChannels, state.grid, state.activeIndex);
+          setState({
+            channels: newChannels,
+            activeIndex: activeIndex
+          });
+        }
+      },
+      multiLoad: function multiLoad(channels) {
+        var grid = 1;
+        if (channels.length > 1) grid = 2;
+        if (channels.length > 4) grid = 3;
+        var newChannels = [];
+
+        for (var i = 0; i < 9; i++) {
+          newChannels.push(channels[i] ? channels[i] : {
+            channelNum: ''
+          });
+        }
+
+        setState({
+          grid: grid,
+          channels: newChannels
+        });
+      },
+      unLoad: function unLoad(channelNum) {
+        var index = state.channels.findIndex(function (c) {
+          return c.channelNum === channelNum;
+        });
+
+        if (~index) {
+          // 卸载通道
+          var newChannels = _toConsumableArray(state.channels);
+
+          newChannels[index] = {
+            channelNum: ''
+          };
+          setState({
+            channels: newChannels
+          });
+        }
+      }
+    };
+  });
+  (0, _react.useEffect)(function () {
+    channelRef.current = state.channels;
+
+    if (onChannelChange) {
+      onChannelChange(state.channels.filter(function (c) {
+        return !!c.channelNum;
+      }).map(function (c) {
+        return c.channelNum;
+      }));
+    }
+  }, [state.channels]);
+
+  var handleCloseAll = function handleCloseAll() {
+    setState({
+      channels: DEFAULT_CHANNELS
+    });
+  };
+
+  var handleExpand = function handleExpand() {
+    onExpandChange && onExpandChange(!state.expand);
+    setState({
+      expand: !state.expand
+    });
+  };
+
+  var getGridItems = function getGridItems() {
+    var items = [];
+
+    var _loop = function _loop(i) {
+      var element = (0, _jsxRuntime.jsx)(GridItem, {
+        active: state.activeIndex === i,
+        onClick: function onClick() {
+          return setState({
+            activeIndex: i
+          });
+        },
+        channel: state.channels[i],
+        onClose: function onClose() {
+          var newChannels = _toConsumableArray(state.channels);
+
+          newChannels[i] = {
+            channelNum: ''
+          };
+          setState({
+            channels: newChannels
+          });
+        }
+      }, i);
+      items.push(element);
+    };
+
+    for (var i = 0; i < state.grid * state.grid; i++) {
+      _loop(i);
+    }
+
+    return items;
+  };
+
+  return (0, _jsxRuntime.jsxs)("div", Object.assign({
+    className: "vtx-live-control",
+    ref: wrapRef,
+    style: {
+      height: height,
+      width: width
+    }
+  }, {
+    children: [(0, _jsxRuntime.jsx)("div", Object.assign({
+      className: "player-grid-container _".concat(state.grid)
+    }, {
+      children: getGridItems()
+    })), (0, _jsxRuntime.jsxs)("div", Object.assign({
+      className: "controls"
+    }, {
+      children: [(0, _jsxRuntime.jsx)(_space["default"], Object.assign({
+        className: "left",
+        size: 12,
+        align: "center"
+      }, {
+        children: onExpandChange && (0, _jsxRuntime.jsx)(_tooltip["default"], Object.assign({
+          title: state.expand ? '收起' : '展开'
+        }, {
+          children: (0, _jsxRuntime.jsx)("div", Object.assign({
+            onClick: handleExpand
+          }, {
+            children: state.expand ? (0, _jsxRuntime.jsx)(_icons.FoldIcon, {}) : (0, _jsxRuntime.jsx)(_icons.ExpandIcon, {})
+          }))
+        }))
+      })), (0, _jsxRuntime.jsxs)(_space["default"], Object.assign({
+        className: "right",
+        size: 12,
+        align: "center"
+      }, {
+        children: [(0, _jsxRuntime.jsx)(_tooltip["default"], Object.assign({
+          title: "\u5168\u90E8\u5173\u95ED"
+        }, {
+          children: (0, _jsxRuntime.jsx)("div", {
+            children: (0, _jsxRuntime.jsx)(_icons.CloseAllIcon, {
+              onClick: handleCloseAll
+            })
+          })
+        })), (0, _jsxRuntime.jsx)(_tooltip["default"], Object.assign({
+          title: "1\u5206\u5C4F"
+        }, {
+          children: (0, _jsxRuntime.jsx)("div", {
+            children: (0, _jsxRuntime.jsx)(_icons.Grid1x1Icon, {
+              active: state.grid === 1,
+              onClick: function onClick() {
+                return setState({
+                  grid: 1
+                });
+              }
+            })
+          })
+        })), (0, _jsxRuntime.jsx)(_tooltip["default"], Object.assign({
+          title: "4\u5206\u5C4F"
+        }, {
+          children: (0, _jsxRuntime.jsx)("div", {
+            children: (0, _jsxRuntime.jsx)(_icons.Grid2x2Icon, {
+              active: state.grid === 2,
+              onClick: function onClick() {
+                return setState({
+                  grid: 2
+                });
+              }
+            })
+          })
+        })), (0, _jsxRuntime.jsx)(_tooltip["default"], Object.assign({
+          title: "9\u5206\u5C4F"
+        }, {
+          children: (0, _jsxRuntime.jsx)("div", {
+            children: (0, _jsxRuntime.jsx)(_icons.Grid3x3Icon, {
+              active: state.grid === 3,
+              onClick: function onClick() {
+                return setState({
+                  grid: 3
+                });
+              }
+            })
+          })
+        })), (0, _jsxRuntime.jsx)(_tooltip["default"], Object.assign({
+          title: "\u5168\u5C4F"
+        }, {
+          children: (0, _jsxRuntime.jsx)("div", {
+            children: isFullscreen ? (0, _jsxRuntime.jsx)(_icons.ExitFullScreenIcon, {
+              onClick: toggleFullscreen
+            }) : (0, _jsxRuntime.jsx)(_icons.FullScreenIcon, {
+              onClick: toggleFullscreen
+            })
+          })
+        }))]
+      }))]
+    }))]
+  }));
+});
+LiveControl.displayName = 'LiveControl';
+
+var GridItem = function GridItem(props) {
+  var active = props.active,
+      onClick = props.onClick,
+      channel = props.channel,
+      onClose = props.onClose;
+  var empty = !channel.channelNum;
+
+  var _useRequest = (0, _ahooks.useRequest)(function () {
+    return (0, _api.getPreviewUrl)(channel);
+  }, {
+    ready: !!channel.channelNum,
+    refreshDeps: [channel.channelNum]
+  }),
+      data = _useRequest.data;
+
+  var name = "".concat(data === null || data === void 0 ? void 0 : data.deviceName, "-").concat(data === null || data === void 0 ? void 0 : data.channelName);
+  return (0, _jsxRuntime.jsx)("div", Object.assign({
+    className: "grid-item-container ".concat(active ? 'active' : ''),
+    onClick: onClick
+  }, {
+    children: data && !empty && (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [(0, _jsxRuntime.jsx)(_controls.PlayerHeader, {
+        name: name,
+        onClose: onClose
+      }), (0, _jsxRuntime.jsx)("div", Object.assign({
+        className: "content"
+      }, {
+        children: (0, _jsxRuntime.jsx)(_livePlayer["default"], {
+          url: data.url,
+          captureName: name,
+          talkUrl: data.apiUrl,
+          showInfo: channel.showInfo,
+          info: channel.info
+        })
+      }))]
+    })
+  }));
+};
+/**
+ * 获取当前激活的网格
+ * @param channels 现有通道数组
+ * @param grid 当前网格状态
+ * @param currentIndex 当前索引
+ * @returns
+ */
+
+
+var getActiveIndex = function getActiveIndex(channels, grid, currentIndex) {
+  var currentChannels = channels.slice(0, grid * grid);
+
+  for (var i = currentIndex + 1; i < currentChannels.length; i++) {
+    if (!currentChannels[i].channelNum) return i;
+  }
+
+  for (var _i2 = 0; _i2 < currentIndex; _i2++) {
+    if (!currentChannels[_i2].channelNum) return _i2;
+  }
+
+  return currentIndex;
+};
+
+var _default = LiveControl;
+exports["default"] = _default;
+//# sourceMappingURL=index.js.map

package/lib/live-control/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["DEFAULT_GRID","DEFAULT_ACTIVE","DEFAULT_CHANNELS","Array","fill","channelNum","LiveControl","forwardRef","props","ref","height","width","onExpandChange","onChannelChange","polling","useSetState","expand","grid","activeIndex","channels","state","setState","wrapRef","useRef","useFullscreen","isFullscreen","toggleFullscreen","channelRef","useInterval","hasVideo","some","item","timer","setTimeout","current","clearTimeout","useImperativeHandle","load","channel","index","findIndex","c","newChannels","getActiveIndex","multiLoad","length","i","push","unLoad","useEffect","filter","map","handleCloseAll","handleExpand","getGridItems","items","element","_jsx","GridItem","active","onClick","onClose","_jsxs","Object","assign","className","style","children","Space","size","align","Tooltip","title","FoldIcon","ExpandIcon","CloseAllIcon","Grid1x1Icon","Grid2x2Icon","Grid3x3Icon","ExitFullScreenIcon","FullScreenIcon","displayName","empty","useRequest","getPreviewUrl","ready","refreshDeps","data","name","deviceName","channelName","_Fragment","PlayerHeader","VtxLivePlayer","url","captureName","talkUrl","apiUrl","showInfo","info","currentIndex","currentChannels","slice"],"sources":["live-control/index.js"],"sourcesContent":["import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from \"react/jsx-runtime\";\nimport { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';\nimport { getPreviewUrl } from '../api';\nimport { PlayerHeader } from '../controls';\nimport { CloseAllIcon, ExitFullScreenIcon, ExpandIcon, FoldIcon, FullScreenIcon, Grid1x1Icon, Grid2x2Icon, Grid3x3Icon, } from '../icons';\nimport VtxLivePlayer from '../live-player';\nimport { useFullscreen, useInterval, useRequest, useSetState } from 'ahooks';\nimport Space from 'antd/lib/space';\n// import { Space, Tooltip } from 'antd';\nimport Tooltip from 'antd/lib/tooltip';\nconst DEFAULT_GRID = 2;\nconst DEFAULT_ACTIVE = 0;\nconst DEFAULT_CHANNELS = Array(9).fill({ channelNum: '' });\n/**\n * 实时分屏组件\n */\nconst LiveControl = forwardRef((props, ref) => {\n    const { height = '100%', width = '100%', onExpandChange, onChannelChange, polling } = props;\n    const [state, setState] = useSetState({\n        expand: true,\n        grid: DEFAULT_GRID,\n        activeIndex: DEFAULT_ACTIVE,\n        channels: DEFAULT_CHANNELS,\n    });\n    const wrapRef = useRef(null);\n    const [isFullscreen, { toggleFullscreen }] = useFullscreen(wrapRef);\n    const channelRef = useRef(DEFAULT_CHANNELS);\n    // 实时视频轮询\n    useInterval(() => {\n        // 是否有视频正在播放\n        const hasVideo = state.channels.some((item) => item.channelNum);\n        if (polling && hasVideo) {\n            setState({\n                channels: DEFAULT_CHANNELS,\n            });\n            const timer = setTimeout(() => {\n                setState({\n                    channels: channelRef.current,\n                });\n                clearTimeout(timer);\n            }, 0);\n        }\n    }, polling);\n    useImperativeHandle(ref, () => {\n        return {\n            load: (channel) => {\n                const index = state.channels.findIndex((c) => c.channelNum === channel.channelNum);\n                if (~index) {\n                    setState({ activeIndex: index }); // 如果通道号已经存在，则设置激活索引为该通道\n                }\n                else {\n                    // 播放该通道\n                    const newChannels = [...state.channels];\n                    newChannels[state.activeIndex] = channel;\n                    const activeIndex = getActiveIndex(newChannels, state.grid, state.activeIndex);\n                    setState({ channels: newChannels, activeIndex });\n                }\n            },\n            multiLoad: (channels) => {\n                let grid = 1;\n                if (channels.length > 1)\n                    grid = 2;\n                if (channels.length > 4)\n                    grid = 3;\n                const newChannels = [];\n                for (let i = 0; i < 9; i++) {\n                    newChannels.push(channels[i] ? channels[i] : { channelNum: '' });\n                }\n                setState({ grid, channels: newChannels });\n            },\n            unLoad: (channelNum) => {\n                const index = state.channels.findIndex((c) => c.channelNum === channelNum);\n                if (~index) {\n                    // 卸载通道\n                    const newChannels = [...state.channels];\n                    newChannels[index] = { channelNum: '' };\n                    setState({ channels: newChannels });\n                }\n            },\n        };\n    });\n    useEffect(() => {\n        channelRef.current = state.channels;\n        if (onChannelChange) {\n            onChannelChange(state.channels.filter((c) => !!c.channelNum).map((c) => c.channelNum));\n        }\n    }, [state.channels]);\n    const handleCloseAll = () => {\n        setState({ channels: DEFAULT_CHANNELS });\n    };\n    const handleExpand = () => {\n        onExpandChange && onExpandChange(!state.expand);\n        setState({ expand: !state.expand });\n    };\n    const getGridItems = () => {\n        const items = [];\n        for (let i = 0; i < state.grid * state.grid; i++) {\n            const element = (_jsx(GridItem, { active: state.activeIndex === i, onClick: () => setState({ activeIndex: i }), channel: state.channels[i], onClose: () => {\n                    const newChannels = [...state.channels];\n                    newChannels[i] = { channelNum: '' };\n                    setState({ channels: newChannels });\n                } }, i));\n            items.push(element);\n        }\n        return items;\n    };\n    return (_jsxs(\"div\", Object.assign({ className: \"vtx-live-control\", ref: wrapRef, style: { height, width } }, { children: [_jsx(\"div\", Object.assign({ className: `player-grid-container _${state.grid}` }, { children: getGridItems() })), _jsxs(\"div\", Object.assign({ className: \"controls\" }, { children: [_jsx(Space, Object.assign({ className: \"left\", size: 12, align: \"center\" }, { children: onExpandChange && (_jsx(Tooltip, Object.assign({ title: state.expand ? '收起' : '展开' }, { children: _jsx(\"div\", Object.assign({ onClick: handleExpand }, { children: state.expand ? _jsx(FoldIcon, {}) : _jsx(ExpandIcon, {}) })) }))) })), _jsxs(Space, Object.assign({ className: \"right\", size: 12, align: \"center\" }, { children: [_jsx(Tooltip, Object.assign({ title: \"\\u5168\\u90E8\\u5173\\u95ED\" }, { children: _jsx(\"div\", { children: _jsx(CloseAllIcon, { onClick: handleCloseAll }) }) })), _jsx(Tooltip, Object.assign({ title: \"1\\u5206\\u5C4F\" }, { children: _jsx(\"div\", { children: _jsx(Grid1x1Icon, { active: state.grid === 1, onClick: () => setState({ grid: 1 }) }) }) })), _jsx(Tooltip, Object.assign({ title: \"4\\u5206\\u5C4F\" }, { children: _jsx(\"div\", { children: _jsx(Grid2x2Icon, { active: state.grid === 2, onClick: () => setState({ grid: 2 }) }) }) })), _jsx(Tooltip, Object.assign({ title: \"9\\u5206\\u5C4F\" }, { children: _jsx(\"div\", { children: _jsx(Grid3x3Icon, { active: state.grid === 3, onClick: () => setState({ grid: 3 }) }) }) })), _jsx(Tooltip, Object.assign({ title: \"\\u5168\\u5C4F\" }, { children: _jsx(\"div\", { children: isFullscreen ? (_jsx(ExitFullScreenIcon, { onClick: toggleFullscreen })) : (_jsx(FullScreenIcon, { onClick: toggleFullscreen })) }) }))] }))] }))] })));\n});\nLiveControl.displayName = 'LiveControl';\nconst GridItem = (props) => {\n    const { active, onClick, channel, onClose } = props;\n    const empty = !channel.channelNum;\n    const { data } = useRequest(() => getPreviewUrl(channel), {\n        ready: !!channel.channelNum,\n        refreshDeps: [channel.channelNum],\n    });\n    const name = `${data === null || data === void 0 ? void 0 : data.deviceName}-${data === null || data === void 0 ? void 0 : data.channelName}`;\n    return (_jsx(\"div\", Object.assign({ className: `grid-item-container ${active ? 'active' : ''}`, onClick: onClick }, { children: data && !empty && (_jsxs(_Fragment, { children: [_jsx(PlayerHeader, { name: name, onClose: onClose }), _jsx(\"div\", Object.assign({ className: \"content\" }, { children: _jsx(VtxLivePlayer, { url: data.url, captureName: name, talkUrl: data.apiUrl, showInfo: channel.showInfo, info: channel.info }) }))] })) })));\n};\n/**\n * 获取当前激活的网格\n * @param channels 现有通道数组\n * @param grid 当前网格状态\n * @param currentIndex 当前索引\n * @returns\n */\nconst getActiveIndex = (channels, grid, currentIndex) => {\n    const currentChannels = channels.slice(0, grid * grid);\n    for (let i = currentIndex + 1; i < currentChannels.length; i++) {\n        if (!currentChannels[i].channelNum)\n            return i;\n    }\n    for (let i = 0; i < currentIndex; i++) {\n        if (!currentChannels[i].channelNum)\n            return i;\n    }\n    return currentIndex;\n};\nexport default LiveControl;\n"],"mappings":"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"}

package/lib/live-control/style/css.js

@@ -0,0 +1,6 @@
+"use strict";
+
+require("../../controls/style/css");
+
+require("./index.css");
+//# sourceMappingURL=css.js.map

package/lib/live-control/style/css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"css.js","names":[],"sources":["live-control/style/index.js"],"sourcesContent":["import '../../controls/style';\nimport './index.less';\n"],"mappings":";;AAAA;;AACA"}

package/lib/live-control/style/index.css

@@ -0,0 +1,73 @@
+.vtx-live-control {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+}
+.vtx-live-control .player-grid-container {
+  display: grid;
+  -webkit-box-flex: 1;
+      -ms-flex-positive: 1;
+          flex-grow: 1;
+  grid-gap: 1px;
+  height: 0;
+  background-color: rgba(0, 0, 0, 0.8);
+}
+.vtx-live-control .player-grid-container._1 {
+  grid-template-rows: 1fr;
+  grid-template-columns: 1fr;
+}
+.vtx-live-control .player-grid-container._2 {
+  grid-template-rows: 1fr 1fr;
+  grid-template-columns: 1fr 1fr;
+}
+.vtx-live-control .player-grid-container._3 {
+  grid-template-rows: 1fr 1fr 1fr;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+.vtx-live-control .player-grid-container .grid-item-container {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+  background-color: #2b3d51;
+  background-image: url('../images/empty.png');
+  background-repeat: no-repeat;
+  background-position: center;
+}
+.vtx-live-control .player-grid-container .grid-item-container.active {
+  -webkit-box-shadow: 0 0 0 1px #52c41a;
+          box-shadow: 0 0 0 1px #52c41a;
+}
+.vtx-live-control .player-grid-container .grid-item-container > .content {
+  -webkit-box-flex: 1;
+      -ms-flex-positive: 1;
+          flex-grow: 1;
+  height: 0;
+}
+.vtx-live-control .controls {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  width: 100%;
+  height: 32px;
+  padding: 0 12px;
+  background-color: #243241;
+}
+.vtx-live-control .controls .right {
+  margin-left: auto;
+}
+.vtx-live-control .controls .right > div {
+  height: 24px;
+}

package/lib/live-control/style/index.d.ts

@@ -0,0 +1,2 @@
+import '../../controls/style';
+import './index.less';

package/lib/live-control/style/index.js

@@ -0,0 +1,6 @@
+"use strict";
+
+require("../../controls/style");
+
+require("./index.less");
+//# sourceMappingURL=index.js.map

package/lib/live-control/style/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["live-control/style/index.js"],"sourcesContent":["import '../../controls/style';\nimport './index.less';\n"],"mappings":";;AAAA;;AACA"}

package/lib/live-control/style/index.less

@@ -0,0 +1,65 @@
+.vtx-live-control {
+    display: flex;
+    flex-direction: column;
+
+    .player-grid-container {
+        display: grid;
+        flex-grow: 1;
+        grid-gap: 1px;
+        height: 0;
+        background-color: rgba(0 ,0 ,0 , .8);
+
+        &._1 {
+            grid-template-rows: 1fr;
+            grid-template-columns: 1fr;
+        }
+
+        &._2 {
+            grid-template-rows: 1fr 1fr;
+            grid-template-columns: 1fr 1fr;
+        }
+
+        &._3 {
+            grid-template-rows: 1fr 1fr 1fr;
+            grid-template-columns: 1fr 1fr 1fr;
+        }
+
+        .grid-item-container {
+            display: flex;
+            flex-direction: column;
+            min-width: 0;
+            min-height: 0;
+            background-color: #2b3d51;
+            background-image: url('../images/empty.png');
+            background-repeat: no-repeat;
+            background-position: center;
+
+            &.active {
+                box-shadow: 0 0 0 1px #52c41a;
+            }
+
+            > .content {
+                flex-grow: 1;
+                height: 0;
+            }
+        }
+    }
+
+    .controls {
+        display: flex;
+        align-items: center;
+        width: 100%;
+        height: 32px;
+        padding: 0 12px;
+        background-color: #243241;
+    
+        .right {
+            margin-left: auto;
+    
+            > div {
+                height: 24px;
+            }
+        }
+    }
+}
+

package/{dist/types/components → lib}/live-player/index.d.ts

@@ -1,7 +1,5 @@
-/// <reference types="react" />
-import './index.less';
-import { CloudControlPanelProps } from '@/components/controls';
-import { VideoType } from '@/components/player';
+import { CloudControlPanelProps } from '../controls';
+import { VideoType } from '../player';
 interface VtxPlayerProps {
     /** 视频流地址 */
     url: string;
@@ -17,6 +15,10 @@ interface VtxPlayerProps {
     talkUrl?: string;
     /** 云台控制 */
     cloudParams?: CloudControlPanelProps;
+    /** 是否展示信息 */
+    showInfo?: boolean | 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom';
+    /** 信息 */
+    info?: Array<Array<string>>;
 }
 export declare const LivePlayer: (props: VtxPlayerProps) => JSX.Element;
 export default LivePlayer;