@uni-sw/u-design 2.0.4

package/es/components/UVideo/VideoComponent/PlayPanel.js

@@ -0,0 +1,1471 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _excluded = ["clickType", "videoIndex"],
+  _excluded2 = ["index"],
+  _excluded3 = ["index"],
+  _excluded4 = ["interfaceName", "index", "paramType"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _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 _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+function _regenerator() { /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */ var e, t, r = "function" == typeof Symbol ? Symbol : {}, n = r.iterator || "@@iterator", o = r.toStringTag || "@@toStringTag"; function i(r, n, o, i) { var c = n && n.prototype instanceof Generator ? n : Generator, u = Object.create(c.prototype); return _regeneratorDefine2(u, "_invoke", function (r, n, o) { var i, c, u, f = 0, p = o || [], y = !1, G = { p: 0, n: 0, v: e, a: d, f: d.bind(e, 4), d: function d(t, r) { return i = t, c = 0, u = e, G.n = r, a; } }; function d(r, n) { for (c = r, u = n, t = 0; !y && f && !o && t < p.length; t++) { var o, i = p[t], d = G.p, l = i[2]; r > 3 ? (o = l === n) && (u = i[(c = i[4]) ? 5 : (c = 3, 3)], i[4] = i[5] = e) : i[0] <= d && ((o = r < 2 && d < i[1]) ? (c = 0, G.v = n, G.n = i[1]) : d < l && (o = r < 3 || i[0] > n || n > l) && (i[4] = r, i[5] = n, G.n = l, c = 0)); } if (o || r > 1) return a; throw y = !0, n; } return function (o, p, l) { if (f > 1) throw TypeError("Generator is already running"); for (y && 1 === p && d(p, l), c = p, u = l; (t = c < 2 ? e : u) || !y;) { i || (c ? c < 3 ? (c > 1 && (G.n = -1), d(c, u)) : G.n = u : G.v = u); try { if (f = 2, i) { if (c || (o = "next"), t = i[o]) { if (!(t = t.call(i, u))) throw TypeError("iterator result is not an object"); if (!t.done) return t; u = t.value, c < 2 && (c = 0); } else 1 === c && (t = i.return) && t.call(i), c < 2 && (u = TypeError("The iterator does not provide a '" + o + "' method"), c = 1); i = e; } else if ((t = (y = G.n < 0) ? u : r.call(n, G)) !== a) break; } catch (t) { i = e, c = 1, u = t; } finally { f = 1; } } return { value: t, done: y }; }; }(r, o, i), !0), u; } var a = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} t = Object.getPrototypeOf; var c = [][n] ? t(t([][n]())) : (_regeneratorDefine2(t = {}, n, function () { return this; }), t), u = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(c); function f(e) { return Object.setPrototypeOf ? Object.setPrototypeOf(e, GeneratorFunctionPrototype) : (e.__proto__ = GeneratorFunctionPrototype, _regeneratorDefine2(e, o, "GeneratorFunction")), e.prototype = Object.create(u), e; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, _regeneratorDefine2(u, "constructor", GeneratorFunctionPrototype), _regeneratorDefine2(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = "GeneratorFunction", _regeneratorDefine2(GeneratorFunctionPrototype, o, "GeneratorFunction"), _regeneratorDefine2(u), _regeneratorDefine2(u, o, "Generator"), _regeneratorDefine2(u, n, function () { return this; }), _regeneratorDefine2(u, "toString", function () { return "[object Generator]"; }), (_regenerator = function _regenerator() { return { w: i, m: f }; })(); }
+function _regeneratorDefine2(e, r, n, t) { var i = Object.defineProperty; try { i({}, "", {}); } catch (e) { i = 0; } _regeneratorDefine2 = function _regeneratorDefine(e, r, n, t) { function o(r, n) { _regeneratorDefine2(e, r, function (e) { return this._invoke(r, n, e); }); } r ? i ? i(e, r, { value: n, enumerable: !t, configurable: !t, writable: !t }) : e[r] = n : (o("next", 0), o("throw", 1), o("return", 2)); }, _regeneratorDefine2(e, r, n, t); }
+function asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); }
+function _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, "next", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, "throw", n); } _next(void 0); }); }; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
+function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
+function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _possibleConstructorReturn(t, e) { if (e && ("object" == _typeof(e) || "function" == typeof e)) return e; if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined"); return _assertThisInitialized(t); }
+function _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return e; }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
+function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
+function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
+import React, { Component } from 'react';
+import { _getGuid } from "../../../globalFunc";
+import classnames from 'classnames';
+import { PlayWindow } from "./PlayWindow";
+import PtzControlPanel from "./PtzControl/PtzControlPanel";
+import { getRealScreen, isValidSplitType, getScrrenRowAndColClass } from "../toolsFunc/ToolsFunc";
+import { CONSTANT_IMOS_PLAYER_CAST_VIDEO_CLASSNAME } from "../HideDiv";
+import { CUSTOM_PREFIX } from "../../../globalVarious";
+import "./PlayPanel.less";
+import classNames from 'classnames';
+var PlayPanel = /*#__PURE__*/function (_Component) {
+  function PlayPanel(props) {
+    var _this;
+    _classCallCheck(this, PlayPanel);
+    _this = _callSuper(this, PlayPanel, [props]);
+    //根据新的分屏更新窗格和工具栏集合
+    _this._updateVideoScreenArr = function () {
+      var isAutoScreenSplit = _this.props.isAutoScreenSplit;
+      var videoIndexList = [];
+      var newOperaterItems = [];
+      //自适应分屏直接实例16个窗格，便于自适应分屏情况下自动切换分屏追加播放，否则按照分屏数实例窗格
+      for (var i = 0; i < (isAutoScreenSplit ? 16 : getRealScreen(_this.screenSplitType)); i++) {
+        var newGuid = _getGuid();
+        if (_this.videoIndexList[i]) {
+          newGuid = _this.videoIndexList[i];
+        }
+        videoIndexList.push(newGuid);
+        var operaterItem = {
+          videoIndex: i,
+          replayState: false,
+          //播放状态
+          jumpTime: 30,
+          //跳转时间
+          replayRate: 1,
+          //倍速
+          RecordList: [] //录像段
+        };
+        if (_this.operaterItems[i]) {
+          operaterItem = _objectSpread(_objectSpread({}, _this.operaterItems[i]), {}, {
+            videoIndex: i
+          });
+        }
+        newOperaterItems.push(operaterItem);
+      }
+      _this.videoIndexList = [].concat(videoIndexList);
+      _this.operaterItems = [].concat(newOperaterItems);
+    };
+    _this._registerLiveMsg = function (VMSdkType, videoType) {
+      var _this$props = _this.props,
+        switchReplayState = _this$props.switchReplayState,
+        registerLiveMsg = _this$props.registerLiveMsg;
+      window[VMSdkType].registerLiveMsg(function (result) {
+        var _ref = _this._getVideoById(result.iframeId) || {},
+          indexNo = _ref.indexNo,
+          video = _ref.video;
+        if (!video) {
+          return;
+        }
+        if (result.Type === 'ptz') {
+          var pos = video.getVideoDom().getBoundingClientRect();
+          _this._onPtzClick(pos, result.iframeId);
+        } else if (result.Type === 'close') {
+          if (videoType === 'reply' || videoType === 'replyGrid') {
+            _this._onCloseVideo(undefined, undefined, indexNo, video); // 回放关闭，清除进度条
+          } else {
+            _this._onCloseVideo(); // 实况关闭
+          }
+          _this._windowEventCallback(undefined, {
+            clickType: 'close',
+            videoIndex: _this.state.activeVideo,
+            videoDom: video
+          });
+        } else if (result.Type === 'end') {
+          // 回放播放到最后一帧，进度条暂停
+          if (videoType === 'reply' || videoType === 'replyGrid') {
+            typeof switchReplayState === 'function' && switchReplayState(false);
+          }
+        } else if (result.Type === 'zoom') {
+          // 点击全屏后刷新
+          video === null || video === void 0 ? void 0 : video.useImosInterface({
+            interfaceName: 'forceRefreshView'
+          });
+        }
+        if (registerLiveMsg && typeof registerLiveMsg === 'function') {
+          registerLiveMsg(result);
+        }
+      });
+    };
+    _this._getVideoById = function (iframeId) {
+      for (var i = 0; i < _this.videoIndexList.length; i++) {
+        var video = _this._refs(i);
+        if (video && video.getVideoCtrlId() && iframeId && video.getVideoCtrlId() === iframeId) {
+          return {
+            indexNo: i,
+            video: video
+          };
+        }
+      }
+      return;
+    };
+    _this._onPtzClick = function (posi, xpCode) {
+      var enbale = _this.state.isShowPtzPnl === true ? false : true;
+      if (xpCode !== undefined) {
+        if (xpCode === _this.state.curPtzCode) {
+          //是当前窗格，不能用activeVideo判断，直接点击工具栏的时候activeVideo并没有发生变化
+          if (enbale) {
+            _this._setPtzPnlPosi(posi);
+          }
+          _this.setState({
+            isShowPtzPnl: enbale
+          });
+        } else {
+          //更新窗格
+          _this.setState({
+            curPtzCode: xpCode,
+            isShowPtzPnl: false
+          }, function () {
+            _this._setPtzPnlPosi(posi);
+            _this.setState({
+              isShowPtzPnl: true
+            });
+          });
+        }
+      }
+    };
+    /**
+     * 设置云台面板位置
+     */
+    _this._setPtzPnlPosi = function (posi) {
+      var posX = 0;
+      var posY = 0;
+      var ptzPos = {
+        posX: posX,
+        posY: posY
+      };
+      var videosPos = _this.videos.getBoundingClientRect();
+      if (_this.screenSplitType === 1) {
+        posX = (posi.left - 356.5) / _this.videos.clientWidth * 100 + '%';
+        posY = (posi.bottom - 172) / _this.videos.clientHeight * 100 + '%';
+      } else {
+        if (posi.bottom - videosPos.top + 148 < _this.videos.clientHeight) {
+          //video底部显示
+          posY = (posi.bottom - videosPos.top) / _this.videos.clientHeight * 100 + '%';
+        } else {
+          //video顶部显示
+          posY = (posi.bottom - videosPos.top - 148) / _this.videos.clientHeight * 100 + '%';
+        }
+        if (posi.right - videosPos.left + 432 < _this.videos.clientWidth) {
+          posX = 0;
+          ptzPos = {
+            posX: posX,
+            posY: posY
+          };
+        } else {
+          posX = (posi.left - videosPos.left) / _this.videos.clientWidth * 100 + '%';
+          ptzPos = {
+            posX: posX,
+            posY: posY
+          };
+        }
+      }
+      _this.setState({
+        ptzPosition: ptzPos
+      });
+    };
+    _this._onCloseVideo = function (code, xpCode, videoIndex, video) {
+      var _this$props2 = _this.props,
+        videoType = _this$props2.videoType,
+        closeOne = _this$props2.closeOne;
+      if (videoType === 'reply' || videoType === 'replyGrid') {
+        closeOne(function () {
+          video && video.closeVideo && video.closeVideo();
+          _this.initOperaterItems(true, videoIndex);
+        });
+        return;
+      }
+      if (_this.state.isShowPtzPnl && _this.ptzRef && _this.ptzRef.curVideoCam && code === _this.ptzRef.curVideoCam.CameraCode && xpCode === _this.state.curPtzCode) {
+        _this.setState({
+          isShowPtzPnl: false
+        });
+      }
+    };
+    /**
+     * @description: 隐藏视频窗口中的进度条
+     * @param {type}
+     * @return {type}
+     */
+    _this._setVideoControl = function () {
+      window.imosSdk.setVideoControl({
+        needReplayControls: false
+      }, function (result) {
+        if (result.ErrCode === 0) {
+          console.log('执行成功');
+        } else {
+          console.log('执行失败：' + result.ErrMsg);
+        }
+      });
+    };
+    /**
+     * @description: 选中窗口
+     * @param {type}
+     * @return {type}
+     */
+    _this._onLeftClickVideo = function (index) {
+      var video = _this._refs(index);
+      _this._activeVideo(index);
+      _this._windowEventCallback(undefined, {
+        clickType: 'click',
+        videoIndex: index,
+        videoDom: video
+      });
+    };
+    _this.setActiveVideo = function (index) {
+      var videoIndex = index != null ? index : _this.state.activeVideo;
+      _this._activeVideo(videoIndex);
+    };
+    _this._activeVideo = function (index) {
+      _this.setState({
+        activeVideo: index
+      }, function () {
+        var operaterItem = _this.operaterItems[index];
+        var video = _this._refs(index);
+        if (_this.props.onselectWindow) {
+          _this.props.onselectWindow(operaterItem, video);
+        }
+      });
+    };
+    /**
+     * @description: 双击或最大化某一个单窗口
+     * @param {type}
+     * @return {type}
+     */
+    _this.doubleClickVideo = function (i, isInnerDoubleClick) {
+      var _this$state = _this.state,
+        maxVideoIndex = _this$state.maxVideoIndex,
+        activeVideo = _this$state.activeVideo;
+      var onMaxScreen = _this.props.onMaxScreen;
+      if (i === 999) {
+        //防止传入i过大
+        i = activeVideo;
+      }
+      if (maxVideoIndex === -1) {
+        //-1 最大化窗口默认值
+        maxVideoIndex = i;
+      } else {
+        maxVideoIndex = -1;
+      }
+      _this.setState({
+        maxVideoIndex: maxVideoIndex
+      });
+      if (isInnerDoubleClick) {
+        onMaxScreen && onMaxScreen(maxVideoIndex);
+      }
+    };
+    _this._closeActiveVideo = function () {
+      var activeVideo = _this.state.activeVideo;
+      var video = _this._refs(activeVideo);
+      video && (video === null || video === void 0 ? void 0 : video.closeVideo());
+    };
+    /**
+     * 最大化
+     */
+    _this.masVideo = function () {
+      _this.doubleClickVideo(_this.state.activeVideo);
+    };
+    _this._closeAllVideo = function () {
+      _this.closeAllLive();
+    };
+    /**
+     * @description: 单相机播放
+     * @param {type}
+     * @return:
+     */
+    _this.playOne = /*#__PURE__*/function () {
+      var _ref2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(playType, cameraInfo) {
+        var timeValue,
+          index,
+          _this$props3,
+          changeBigScreen,
+          isAutoScreenSplit,
+          video,
+          videoInfo,
+          result,
+          _args = arguments;
+        return _regenerator().w(function (_context) {
+          while (1) switch (_context.n) {
+            case 0:
+              timeValue = _args.length > 2 && _args[2] !== undefined ? _args[2] : null;
+              index = _args.length > 3 && _args[3] !== undefined ? _args[3] : undefined;
+              _this$props3 = _this.props, changeBigScreen = _this$props3.changeBigScreen, isAutoScreenSplit = _this$props3.isAutoScreenSplit; //先找传入的index序号窗格实例
+              video = _this._refs(index);
+              if (video) {
+                _context.n = 2;
+                break;
+              }
+              _context.n = 1;
+              return _this.findVideo();
+            case 1:
+              videoInfo = _context.v;
+              if (!videoInfo) {
+                //当前分屏下未找到空闲窗格，说明播放满了，需要切换更高分屏后，继续追加播放
+                if (isAutoScreenSplit && _this.screenSplitType < 16) {
+                  //自适应分屏时分屏数小于16时切换更高分屏
+                  changeBigScreen && changeBigScreen();
+                  videoInfo = {
+                    indexNo: _this.screenSplitType,
+                    video: _this._refs(_this.screenSplitType)
+                  };
+                } else {
+                  // 如果没有更高分屏了，返回当前分屏下选中的video
+                  videoInfo = {
+                    indexNo: _this.state.activeVideo,
+                    video: _this._refs(_this.state.activeVideo)
+                  };
+                }
+              }
+              video = videoInfo.video;
+              index = videoInfo.indexNo;
+            case 2:
+              if (!video) {
+                _context.n = 4;
+                break;
+              }
+              _this.initOperaterItems(true, index);
+              _context.n = 3;
+              return video.closeVideo();
+            case 3:
+              result = _context.v;
+              if (result) {
+                if (playType === 1) {
+                  video.playLive(cameraInfo);
+                } else if (playType === 2) {
+                  video.replay(cameraInfo, timeValue);
+                }
+              }
+            case 4:
+              return _context.a(2);
+          }
+        }, _callee);
+      }));
+      return function (_x, _x2) {
+        return _ref2.apply(this, arguments);
+      };
+    }();
+    /**
+     * @description: 多相机播放
+     * @param {type}
+     * @return:
+     */
+    _this.playMul = /*#__PURE__*/function () {
+      var _ref3 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2(playType, cameraList) {
+        var timeValue,
+          result,
+          i,
+          video,
+          _args2 = arguments;
+        return _regenerator().w(function (_context2) {
+          while (1) switch (_context2.n) {
+            case 0:
+              timeValue = _args2.length > 2 && _args2[2] !== undefined ? _args2[2] : null;
+              if (!(!cameraList && cameraList.length <= 0)) {
+                _context2.n = 1;
+                break;
+              }
+              return _context2.a(2);
+            case 1:
+              _context2.n = 2;
+              return _this.closeAllLive();
+            case 2:
+              result = _context2.v;
+              if (result) {
+                for (i = 0; i < cameraList.length; i++) {
+                  video = _this._refs(i);
+                  if (video && !video.isRunning) {
+                    if (playType === 1) {
+                      video.playLive(cameraList[i]); //实况
+                    } else if (playType === 2) {
+                      video.replay(cameraList[i], timeValue); //回放
+                    }
+                  }
+                }
+              }
+            case 3:
+              return _context2.a(2);
+          }
+        }, _callee2);
+      }));
+      return function (_x3, _x4) {
+        return _ref3.apply(this, arguments);
+      };
+    }();
+    /**
+     * @description: 切换分屏播放处理
+     * @param {type}
+     * @return:
+     */
+    _this.changeScreenPlay = /*#__PURE__*/function () {
+      var _ref4 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3(oldScreen, newScreen) {
+        var i, video;
+        return _regenerator().w(function (_context3) {
+          while (1) switch (_context3.n) {
+            case 0:
+              if (!(!oldScreen || !newScreen || oldScreen === newScreen)) {
+                _context3.n = 1;
+                break;
+              }
+              return _context3.a(2);
+            case 1:
+              if (!(newScreen < oldScreen)) {
+                _context3.n = 4;
+                break;
+              }
+              i = newScreen;
+            case 2:
+              if (!(i < oldScreen)) {
+                _context3.n = 4;
+                break;
+              }
+              video = _this._refs(i);
+              if (!(video && video.isRunning)) {
+                _context3.n = 3;
+                break;
+              }
+              _context3.n = 3;
+              return video.closeVideo();
+            case 3:
+              i++;
+              _context3.n = 2;
+              break;
+            case 4:
+              return _context3.a(2);
+          }
+        }, _callee3);
+      }));
+      return function (_x5, _x6) {
+        return _ref4.apply(this, arguments);
+      };
+    }();
+    /**
+     * @description: 初始化回放操作栏，主要用于关闭窗格时，重置回放操作栏
+     * @param {initOne：true初始化选择窗口；false初始化所有窗口}
+     * @param {videoIndex：初始化选择窗口}
+     * @return {type}
+     */
+    _this.initOperaterItems = function () {
+      var initOne = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+      var videoIndex = arguments.length > 1 ? arguments[1] : undefined;
+      if (videoIndex === 0 || videoIndex) {
+        //初始化单个窗口
+        if (_this.operaterItems.length > videoIndex && _this.operaterItems[videoIndex]) {
+          _this.operaterItems[videoIndex].replayState = false;
+          _this.operaterItems[videoIndex].RecordList = null;
+          _this.operaterItems[videoIndex].jumpTime = 30;
+          _this.operaterItems[videoIndex].replayRate = 1;
+        }
+        return;
+      }
+      if (initOne) {
+        for (var i = 0; i < _this.operaterItems.length; i++) {
+          if (_this.operaterItems[i].videoIndex === _this.state.activeVideo) {
+            _this.operaterItems[i].replayState = false;
+            _this.operaterItems[i].RecordList = null;
+            _this.operaterItems[i].jumpTime = 30;
+            _this.operaterItems[i].replayRate = 1;
+            break;
+          }
+        }
+      } else {
+        for (var _i = 0; _i < _this.operaterItems.length; _i++) {
+          _this.operaterItems[_i].replayState = false;
+          _this.operaterItems[_i].RecordList = null;
+          _this.operaterItems[_i].jumpTime = 30;
+          _this.operaterItems[_i].replayRate = 1;
+        }
+      }
+    };
+    /**
+     * @description: 回放成功回调
+     * @param {type}
+     * @return {type}
+     */
+    _this.onReplaySuccess = function (index, result) {
+      for (var i = 0; i < _this.operaterItems.length; i++) {
+        if (_this.operaterItems[i].videoIndex === index) {
+          _this.operaterItems[i].replayState = true;
+          _this.operaterItems[i].RecordList = result.RecordList;
+          break;
+        }
+      }
+      var activeVideo = _this.state.activeVideo;
+      if (index === activeVideo) {
+        var operaterItem = _this.operaterItems[index];
+        var video = _this._refs(index);
+        if (_this.props.onselectWindow) {
+          _this.props.onselectWindow(operaterItem, video);
+        }
+      }
+    };
+    /**
+     * @description: 播放状态切换成功回调
+     * @param {type}
+     * @return {type}
+     */
+    _this.onSwitchSuccess = function (index, flag) {
+      for (var i = 0; i < _this.operaterItems.length; i++) {
+        if (_this.operaterItems[i].videoIndex === index) {
+          _this.operaterItems[i].replayState = flag;
+          break;
+        }
+      }
+      var activeVideo = _this.state.activeVideo;
+      if (index === activeVideo) {
+        var operaterItem = _this.operaterItems[index];
+        var video = _this._refs(index);
+        if (_this.props.onselectWindow) {
+          _this.props.onselectWindow(operaterItem, video);
+        }
+      }
+    };
+    /**
+     * @description: 设置倍速成功回调
+     * @param {type}
+     * @return {type}
+     */
+    _this.onSpeedSuccess = function (index, rate) {
+      for (var i = 0; i < _this.operaterItems.length; i++) {
+        if (_this.operaterItems[i].videoIndex === index) {
+          _this.operaterItems[i].replayState = true;
+          _this.operaterItems[i].replayRate = rate;
+          break;
+        }
+      }
+      var activeVideo = _this.state.activeVideo;
+      if (index === activeVideo) {
+        var operaterItem = _this.operaterItems[index];
+        var video = _this._refs(index);
+        if (_this.props.onselectWindow) {
+          _this.props.onselectWindow(operaterItem, video);
+        }
+      }
+    };
+    /**
+     * @description: 关闭所有窗口播放
+     * @param {type}
+     * @return {type}
+     */
+    _this.closeAllLive = /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee4() {
+      var index,
+        result,
+        promiseArr,
+        video,
+        i,
+        _video,
+        _result,
+        _args4 = arguments;
+      return _regenerator().w(function (_context4) {
+        while (1) switch (_context4.n) {
+          case 0:
+            index = _args4.length > 0 && _args4[0] !== undefined ? _args4[0] : undefined;
+            result = undefined;
+            promiseArr = [];
+            if (!(index || index === 0)) {
+              _context4.n = 3;
+              break;
+            }
+            video = _this._refs(index);
+            if (index === 999) {
+              video = _this._refs(_this.state.activeVideo);
+              index = _this.state.activeVideo;
+            }
+            if (!video) {
+              _context4.n = 2;
+              break;
+            }
+            _this.initOperaterItems(true, index);
+            _context4.n = 1;
+            return video.closeVideo();
+          case 1:
+            result = _context4.v;
+          case 2:
+            return _context4.a(2, result);
+          case 3:
+            for (i = 0; i < _this.videoIndexList.length; i++) {
+              _video = _this._refs(i);
+              if (_video) {
+                promiseArr.push(_video.closeVideo());
+              }
+            }
+            _this.initOperaterItems();
+            _context4.n = 4;
+            return Promise.all(promiseArr);
+          case 4:
+            _result = _context4.v;
+            console.log('U-----------关闭视频的Promise.all结果result', _result);
+            if (!_result.some(function (item) {
+              return !item;
+            })) {
+              _context4.n = 5;
+              break;
+            }
+            return _context4.a(2, false);
+          case 5:
+            return _context4.a(2, true);
+          case 6:
+            return _context4.a(2);
+        }
+      }, _callee4);
+    }));
+    /**
+     * @description: 窗口双击网格追踪
+     * @param {type}
+     * @return {type}
+     */
+    _this._doubleClickVideo = function (index) {
+      var videoType = _this.props.videoType;
+      var video = _this._refs(index);
+      if (video && video.isRunning && (videoType === 'liveGrid' || videoType === 'replyGrid')) {
+        _this.props.gridTraceByCamera(index, true);
+      } else {
+        _this.doubleClickVideo(index, true);
+      }
+      _this._windowEventCallback(undefined, {
+        clickType: 'doubleClick',
+        videoIndex: index,
+        videoDom: video
+      });
+    };
+    _this.windowEnter = function (event, index) {
+      _this.setState({
+        activeVideo: index
+      });
+    };
+    /**
+     * 云台面板位置移动(偏移量：dx、dy)
+     */
+    _this.movePtzPnl = function (dx, dy) {
+      var ptzPosi = _this._getDomPosi(_this.livePtzPnl);
+      var videoPosi = _this._getDomPosi(_this.videos);
+      //向上
+      if (ptzPosi.top + dy < 0) {
+        return;
+      }
+      //向右
+      if (ptzPosi.left + dx + 432 > videoPosi.right) {
+        return;
+      }
+      //向下
+      if (_this.ptzRef.state.isShowPtzMore) {
+        //扩展面板展开
+        if (ptzPosi.top + dy + 240 > videoPosi.bottom) {
+          return;
+        }
+      } else {
+        if (ptzPosi.top + dy + 149 > videoPosi.bottom) {
+          return;
+        }
+      }
+      //向上
+      if (ptzPosi.left + dx < 0) {
+        return;
+      }
+      var position = {
+        posX: ptzPosi.left + dx - 355,
+        posY: ptzPosi.top + dy
+      };
+      _this.setState({
+        ptzPosition: position
+      });
+    };
+    //获取节点的位置信息，left、top、width、height
+    _this._getDomPosi = function (dom, type) {
+      if (dom instanceof Element) {
+        var rect = dom.getBoundingClientRect();
+        if (type === undefined) {
+          return rect;
+        } else {
+          return rect[type];
+        }
+      }
+    };
+    _this._ptzSpeedChange = function (speed) {
+      var videoRef = _this._refs(_this.state.activeVideo);
+      if (videoRef === undefined) {
+        console.error('窗格实例不存在');
+        return;
+      }
+      videoRef.changePlaySpeed(speed);
+    };
+    /**
+     * 关闭云台面板
+     */
+    _this._ptzPnlCloseClick = function () {
+      _this.setState({
+        isShowPtzPnl: false
+      });
+    };
+    /**
+     * 抓拍
+     */
+    _this.playCatch = function (cameraName) {
+      var activeVideo = _this.state.activeVideo;
+      var video = _this._refs(activeVideo);
+      video.playCatch(cameraName);
+    };
+    /**
+     * 悬浮控件播放器窗格事件
+     * @param {*} obj {Event：具体事件类型，Button：鼠标按键，Value：鼠标变化值，X：相对于窗格左上角x像素坐标，Y：相对于窗格左上角Y像素坐标}
+     * @param obj.Event 0：鼠标移入移出；1：鼠标单击；2：鼠标双击；3：鼠标滚轮发生滚动；4：鼠标按下；5：鼠标抬起；6：有数据被拖入；
+     * @param obj.Button 0：无；1048576：鼠标左键；2097152：鼠标右键；4194304：鼠标中建；8388608：鼠标自定义按钮1；16777216：鼠标自定义按钮2；
+     * @param obj.Value 0：移出；1：移入；
+     */
+    _this._pluginVideoEvent = function (obj, guid) {
+      var videoIndex = _this._getVideoIndex(guid);
+      var Event = obj.Event,
+        Button = obj.Button,
+        Value = obj.Value,
+        X = obj.X,
+        Y = obj.Y;
+      var _this$props4 = _this.props,
+        timeValue = _this$props4.timeValue,
+        videoDraggable = _this$props4.videoDraggable;
+      var video = _this._refs(videoIndex);
+      var windowEventType = '';
+      if (Event === 0 && Value === 1) {
+        // 鼠标移入悬浮控件画面
+        video.onMouseEnter();
+
+        //处理拖拽组织树相机到窗格进行播放
+        if (window._selfDropVideo && typeof window._selfDropVideo.timeout === 'number') {
+          if (new Date().getTime() - window._selfDropVideo.timeout < 100) {
+            var _window$_selfDropVide = window._selfDropVideo,
+              typeliveplay = _window$_selfDropVide.typeliveplay,
+              resourceInfo = _window$_selfDropVide.resourceInfo;
+            var cameraInfo = JSON.parse(resourceInfo);
+            if (typeliveplay === 'playLive') {
+              // 播放实况
+              _this.playOne(1, cameraInfo, null, videoIndex);
+            } else if (typeliveplay === 'playReply') {
+              // 播放回放
+              _this.playOne(2, cameraInfo, timeValue, videoIndex);
+            }
+            window._selfDropVideo = undefined;
+            _this._activeVideo(videoIndex);
+          }
+        }
+        windowEventType = 'mouseEnter';
+      }
+      if (Event === 0 && Value === 0) {
+        // 鼠标移出悬浮控件画面
+        video.onMouseLeave();
+        windowEventType = 'mouseLeave';
+      }
+      if (Event === 1 || Event === 2) {
+        _this._activeVideo(videoIndex);
+        if (Event === 1) {
+          // 鼠标单击
+          if (Button === 1048576) {
+            // 左键单击
+            windowEventType = 'videoClick';
+          } else if (Button === 2097152) {
+            // 右键单击
+            if (!!_this.hasFullScreenElement()) {
+              return;
+            }
+            var dom = document.getElementsByClassName("uvideo-live-play-video-".concat(videoIndex));
+            if (dom && dom.length > 0) {
+              var react = dom[0].getBoundingClientRect();
+              _this._rightClickVideo({
+                clientX: X + react.x,
+                clientY: Y + react.y
+              }, videoIndex);
+            }
+          }
+        } else if (Event === 2) {
+          // 鼠标双击
+          _this._doubleClickVideo(videoIndex);
+        }
+      }
+      // 鼠标滚轮事件
+      if (Event === 3) {
+        windowEventType = 'mouseup';
+      }
+      if (Event === 6) {
+        windowEventType = 'drop';
+        //窗格中drop
+        if (_this.videoDrag && videoDraggable) {
+          _this._onVideoDrop(videoIndex);
+          return;
+        }
+      }
+      if (Event === 10) {
+        windowEventType = 'dragStart';
+        if (videoDraggable) {
+          //窗格拖拽drag
+          _this.videoDrag = true;
+          _this.startIndex = videoIndex;
+        }
+      }
+      _this._windowEventCallback(undefined, {
+        clickType: windowEventType,
+        videoIndex: videoIndex,
+        videoDom: video,
+        pluginObj: obj
+      });
+    };
+    /**
+     * 悬浮窗格中拖拽drop事件，这里主要用于窗格拖拽交换位置
+     * @param {*} i 窗格序号
+     * @returns 
+     */
+    _this._onVideoDrop = function (i) {
+      //如果起始位置和结束位置一样，不操作,拖拽为画中画窗格时不操作
+      if (_this.startIndex === i) {
+        _this.videoDrag = false;
+        return;
+      }
+
+      //改变窗格序号和回放信息
+      _this.changeArr(_this.videoIndexList, _this.startIndex, i);
+      _this.changeOperaterArr(_this.operaterItems, _this.startIndex, i);
+      _this._activeVideo(i);
+      //强制更新窗格
+      _this.forceUpdate();
+      _this.videoDrag = false;
+    };
+    /**
+     * 根据窗格的guid获取窗格的序号
+     */
+    _this._getVideoIndex = function (guid) {
+      if (typeof guid === 'number') {
+        return guid;
+      }
+      return _this.videoIndexList.findIndex(function (item) {
+        return item === guid;
+      });
+    };
+    /**
+     * 拼接模式拖拽video
+     */
+    _this.dragVideo = /*#__PURE__*/function () {
+      var _ref6 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee5(event, targetVideoIndex) {
+        var _this$props5, VMSdkType, videoDraggable, video, _t;
+        return _regenerator().w(function (_context5) {
+          while (1) switch (_context5.n) {
+            case 0:
+              _this$props5 = _this.props, VMSdkType = _this$props5.VMSdkType, videoDraggable = _this$props5.videoDraggable;
+              if (!(VMSdkType !== 'imosSdk' || !videoDraggable)) {
+                _context5.n = 1;
+                break;
+              }
+              return _context5.a(2);
+            case 1:
+              video = _this._refs(targetVideoIndex);
+              _t = video;
+              if (!_t) {
+                _context5.n = 3;
+                break;
+              }
+              _context5.n = 2;
+              return video.getPlayStatusInfo();
+            case 2:
+              _t = !_context5.v.Model;
+            case 3:
+              if (!_t) {
+                _context5.n = 4;
+                break;
+              }
+              // 窗格没有播放,不允许拖拽
+              event.preventDefault();
+              return _context5.a(2, false);
+            case 4:
+              event.dataTransfer.setData('text/plain', encodeURI(JSON.stringify({
+                type: 'video',
+                videoIndex: targetVideoIndex
+              })));
+            case 5:
+              return _context5.a(2);
+          }
+        }, _callee5);
+      }));
+      return function (_x7, _x8) {
+        return _ref6.apply(this, arguments);
+      };
+    }();
+    /**
+     * 拖拽结束,包含左侧组织树的拖拽，悬浮控件互相拖拽，拼接互相拖拽都会触发
+     * @param {Event} e
+     */
+    _this.drop = function (e, targetVideoIndex) {
+      if (_this.videoDrag) {
+        //悬浮控件互相拖拽触发return，因为悬浮控件注册回调事件中处理了窗格的拖拽逻辑
+        return;
+      }
+      e.preventDefault();
+      var dragStartIndex = -1;
+      var playType = null;
+      var data = e.dataTransfer.getData('text/plain');
+
+      // antdesign 3.20.3 版本 tree组件的拖拽方法不支持在dataTransfer中存text/plain类型的数据，单独保存取出
+      if (data === '' && e.dataTransfer) {
+        playType = e.dataTransfer.getData('type');
+        dragStartIndex = e.dataTransfer.getData('videoIndex');
+      } else {
+        var parseData = JSON.parse(decodeURI(data));
+        playType = parseData.type;
+        dragStartIndex = parseData.videoIndex;
+      }
+
+      // 如果拖动源是一个video
+      if (playType === 'video') {
+        // 获取起始和结束的video index
+        var startIndex = parseInt(dragStartIndex, 10);
+        var endIndex = targetVideoIndex;
+
+        // 如果拖动起始和结束不一样，则交换，都一样，则不做操作
+        if (startIndex !== endIndex) {
+          // 交换video的位置，再更新
+          _this.changeArr(_this.videoIndexList, startIndex, endIndex);
+          _this.changeOperaterArr(_this.operaterItems, startIndex, endIndex);
+          _this._activeVideo(endIndex);
+          _this.forceUpdate();
+          return;
+        }
+      }
+      _this.props.onDrop && _this.props.onDrop(e);
+    };
+    /**
+     * 更换arr的顺序
+     * @param {Array} arr 源数组
+     * @param {Number} start 替换1
+     * @param {Number} end 替换2
+     */
+    _this.changeArr = function (arr, start, end) {
+      var tempVal = arr[start];
+      arr[start] = arr[end];
+      arr[end] = tempVal;
+      tempVal = null;
+    };
+    /**
+     * 更换operarr的顺序
+     * @param {Array} arr 源数组
+     * @param {Number} start 替换1
+     * @param {Number} end 替换2
+     */
+    _this.changeOperaterArr = function (arr, start, end) {
+      var tempVal = arr[start];
+      arr[start] = _objectSpread(_objectSpread({}, arr[end]), {}, {
+        videoIndex: start
+      });
+      arr[end] = _objectSpread(_objectSpread({}, tempVal), {}, {
+        videoIndex: end
+      });
+      tempVal = null;
+    };
+    // 悬浮控件手动添加的云台按钮的点击事件
+    _this._ptzBtnClick = function (guid) {
+      var index = _this._getVideoIndex(guid);
+      var video = _this._refs(index);
+      var pos = video.getVideoDom().getBoundingClientRect();
+      _this._onPtzClick(pos, video.videoCtrl.id);
+    };
+    // 右键点击事件
+    _this._rightClickVideo = function (event, index) {
+      event.preventDefault(); // 阻止默认右键菜单出现
+      event.stopPropagation(); // 阻止事件冒泡
+
+      var video = _this._refs(index);
+      _this._activeVideo(index);
+      _this._windowEventCallback(event, {
+        clickType: 'rightClick',
+        videoIndex: index,
+        videoDom: video
+      });
+    };
+    /**
+     * 窗格事件透传
+     * @param {*} event 事件e
+     * @param {*} clickType 事件类型
+     * @param {*} videoIndex 序号
+     * @param {*} videoDom video
+     */
+    _this._windowEventCallback = function (event, params) {
+      var _this$props6 = _this.props,
+        eventCallback = _this$props6.eventCallback,
+        videoType = _this$props6.videoType,
+        VMSdkType = _this$props6.VMSdkType;
+      var clickType = params.clickType,
+        videoIndex = params.videoIndex,
+        resParam = _objectWithoutProperties(params, _excluded);
+      eventCallback && eventCallback(videoIndex, clickType, _objectSpread({
+        videoType: videoType,
+        VMSdkType: VMSdkType,
+        clickType: clickType,
+        videoIndex: videoIndex
+      }, resParam), event);
+    };
+    _this.getVideoStatus = /*#__PURE__*/function () {
+      var _ref8 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee6(_ref7) {
+        var _ref7$forceQuery, forceQuery, index, _this$_refs, statusInfo, statusArr, i, _this$_refs2, _statusInfo;
+        return _regenerator().w(function (_context6) {
+          while (1) switch (_context6.n) {
+            case 0:
+              _ref7$forceQuery = _ref7.forceQuery, forceQuery = _ref7$forceQuery === void 0 ? false : _ref7$forceQuery, index = _ref7.index;
+              if (!(typeof index === 'number' && index >= 0 && index < getRealScreen(_this.screenSplitType))) {
+                _context6.n = 2;
+                break;
+              }
+              _context6.n = 1;
+              return (_this$_refs = _this._refs(index)) === null || _this$_refs === void 0 ? void 0 : _this$_refs.getPlayStatusInfo(forceQuery);
+            case 1:
+              statusInfo = _context6.v;
+              return _context6.a(2, statusInfo ? [_defineProperty({}, index, statusInfo)] : undefined);
+            case 2:
+              statusArr = [];
+              i = 0;
+            case 3:
+              if (!(i < getRealScreen(_this.screenSplitType))) {
+                _context6.n = 6;
+                break;
+              }
+              _context6.n = 4;
+              return (_this$_refs2 = _this._refs(i)) === null || _this$_refs2 === void 0 ? void 0 : _this$_refs2.getPlayStatusInfo(forceQuery);
+            case 4:
+              _statusInfo = _context6.v;
+              statusArr.push(_defineProperty({}, i, _statusInfo));
+            case 5:
+              i++;
+              _context6.n = 3;
+              break;
+            case 6:
+              return _context6.a(2, statusArr);
+          }
+        }, _callee6);
+      }));
+      return function (_x9) {
+        return _ref8.apply(this, arguments);
+      };
+    }();
+    _this.playLocalFile = function (param) {
+      var _this$_refs3;
+      var _ref0 = param || {},
+        _ref0$index = _ref0.index,
+        index = _ref0$index === void 0 ? -1 : _ref0$index,
+        title = _ref0.title;
+      return (_this$_refs3 = _this._refs(typeof index === 'number' && index >= 0 && index < getRealScreen(_this.screenSplitType) ? index : _this.state.activeVideo)) === null || _this$_refs3 === void 0 ? void 0 : _this$_refs3.playLocalFile(title);
+    };
+    _this.playURLFile = function (param) {
+      var _this$_refs4;
+      var _ref1 = param || {},
+        _ref1$index = _ref1.index,
+        index = _ref1$index === void 0 ? -1 : _ref1$index,
+        resParam = _objectWithoutProperties(_ref1, _excluded2);
+      return (_this$_refs4 = _this._refs(typeof index === 'number' && index >= 0 && index < getRealScreen(_this.screenSplitType) ? index : _this.state.activeVideo)) === null || _this$_refs4 === void 0 ? void 0 : _this$_refs4.playURLFile(_objectSpread({}, resParam));
+    };
+    _this._getPlayStatusInfo = /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee7() {
+      var video, _t2;
+      return _regenerator().w(function (_context7) {
+        while (1) switch (_context7.n) {
+          case 0:
+            video = _this._refs(_this.state.activeVideo);
+            if (!video) {
+              _context7.n = 2;
+              break;
+            }
+            _context7.n = 1;
+            return video.getPlayStatusInfo();
+          case 1:
+            _t2 = _context7.v;
+            _context7.n = 3;
+            break;
+          case 2:
+            _t2 = null;
+          case 3:
+            _this.PlayStatusInfo = _t2;
+          case 4:
+            return _context7.a(2);
+        }
+      }, _callee7);
+    }));
+    _this.windowBtnConfig = function (param) {
+      var _this$_refs5;
+      var _ref11 = param || {},
+        _ref11$index = _ref11.index,
+        index = _ref11$index === void 0 ? -1 : _ref11$index,
+        resParam = _objectWithoutProperties(_ref11, _excluded3);
+      return (_this$_refs5 = _this._refs(typeof index === 'number' && index >= 0 && index < getRealScreen(_this.screenSplitType) ? index : _this.state.activeVideo)) === null || _this$_refs5 === void 0 ? void 0 : _this$_refs5.windowBtnConfig(resParam);
+    };
+    /**
+     * 通用业务层直接调用imos接口
+     */
+    _this.useImosInterface = function (param) {
+      var _ref12 = param || {},
+        interfaceName = _ref12.interfaceName,
+        _ref12$index = _ref12.index,
+        index = _ref12$index === void 0 ? -1 : _ref12$index,
+        paramType = _ref12.paramType,
+        resParam = _objectWithoutProperties(_ref12, _excluded4);
+      var windowIndex = typeof index === 'number' && index >= 0 && index < getRealScreen(_this.screenSplitType) ? index : _this.state.activeVideo;
+      var videoRef = _this._refs(windowIndex);
+      if (videoRef[interfaceName]) {
+        if (paramType === 'arg') {
+          return videoRef[interfaceName].apply(videoRef, _toConsumableArray(Object.values(resParam)));
+        }
+        return videoRef[interfaceName](resParam);
+      }
+      return videoRef === null || videoRef === void 0 ? void 0 : videoRef.useImosInterface(_objectSpread(_objectSpread({}, resParam), {}, {
+        interfaceName: interfaceName
+      }));
+    };
+    _this.state = {
+      activeVideo: 0,
+      // 当前选中video
+      maxVideoIndex: -1,
+      // 最大化的video
+      isSplitScreen: false,
+      //是否显示分屏菜单
+      isFullScreen: false,
+      uid: _getGuid(),
+      isShowPtzPnl: false,
+      // 是否显示云台面板
+      curPtzCode: 0,
+      ptzPosition: null //云台面板位置
+    };
+    _this.videoIndexList = []; //  video顺序
+    _this.screenSplitType = isValidSplitType(_this.props.screenSplitType) ? _this.props.screenSplitType : 4; //当前分屏数
+    _this.operaterItems = []; //录像回放操作栏
+    _this._updateVideoScreenArr();
+    _this.PlayStatusInfo = {}; // 当前正在播放的相机信息
+    _this.videosMain = null;
+    return _this;
+  }
+  _inherits(PlayPanel, _Component);
+  return _createClass(PlayPanel, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var _this$props7 = this.props,
+        sdkLoaded = _this$props7.sdkLoaded,
+        VMSdkType = _this$props7.VMSdkType,
+        videoType = _this$props7.videoType;
+      sdkLoaded && this._registerLiveMsg(VMSdkType, videoType);
+    }
+  }, {
+    key: "componentWillReceiveProps",
+    value: function componentWillReceiveProps(nextProps) {
+      var _this2 = this;
+      if (nextProps.screenSplitType && nextProps.screenSplitType !== this.screenSplitType && isValidSplitType(nextProps.screenSplitType)) {
+        this.screenSplitType = nextProps.screenSplitType;
+        this._updateVideoScreenArr();
+        this.setState({
+          activeVideo: 0
+        }, function () {
+          var operaterItem = _this2.operaterItems[0];
+          var video = _this2._refs(0);
+          if (_this2.props.onselectWindow) {
+            _this2.props.onselectWindow(operaterItem, video);
+          }
+        });
+      }
+      if (nextProps.sdkLoaded !== this.sdkLoaded && nextProps.sdkLoaded && window[nextProps.VMSdkType]) {
+        this._registerLiveMsg(nextProps.VMSdkType, nextProps.videoType);
+      }
+    }
+  }, {
+    key: "judgeIsLiving",
+    value: (
+    /**
+     * 判断是否正在播放
+     * @param {Number} index video序号
+     */
+    function () {
+      var _judgeIsLiving = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee8(index) {
+        var _this$_refs6, _statusInfo$Status;
+        var statusInfo;
+        return _regenerator().w(function (_context8) {
+          while (1) switch (_context8.n) {
+            case 0:
+              _context8.n = 1;
+              return (_this$_refs6 = this._refs(index)) === null || _this$_refs6 === void 0 ? void 0 : _this$_refs6.getPlayStatusInfo(true);
+            case 1:
+              statusInfo = _context8.v;
+              return _context8.a(2, (statusInfo === null || statusInfo === void 0 ? void 0 : (_statusInfo$Status = statusInfo.Status) === null || _statusInfo$Status === void 0 ? void 0 : _statusInfo$Status.Model) !== 0);
+          }
+        }, _callee8, this);
+      }));
+      function judgeIsLiving(_x0) {
+        return _judgeIsLiving.apply(this, arguments);
+      }
+      return judgeIsLiving;
+    }()
+    /**
+         * 返回符合要求的video
+         */
+    )
+  }, {
+    key: "findVideo",
+    value: (function () {
+      var _findVideo = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee9() {
+        var _this$state2, activeVideo, maxVideoIndex, flag, i;
+        return _regenerator().w(function (_context9) {
+          while (1) switch (_context9.n) {
+            case 0:
+              _this$state2 = this.state, activeVideo = _this$state2.activeVideo, maxVideoIndex = _this$state2.maxVideoIndex; //如果当前存在某个为全屏显示 则使用全屏显示的作为切换目标
+              if (!(maxVideoIndex > -1)) {
+                _context9.n = 1;
+                break;
+              }
+              return _context9.a(2, {
+                indexNo: maxVideoIndex,
+                video: this._refs(maxVideoIndex)
+              });
+            case 1:
+              _context9.n = 2;
+              return this.judgeIsLiving(activeVideo);
+            case 2:
+              flag = _context9.v;
+              if (flag) {
+                _context9.n = 3;
+                break;
+              }
+              return _context9.a(2, {
+                indexNo: activeVideo,
+                video: this._refs(activeVideo)
+              });
+            case 3:
+              i = 0;
+            case 4:
+              if (!(i < this.screenSplitType)) {
+                _context9.n = 7;
+                break;
+              }
+              _context9.n = 5;
+              return this.judgeIsLiving(i);
+            case 5:
+              if (_context9.v) {
+                _context9.n = 6;
+                break;
+              }
+              this.setState({
+                activeVideo: i
+              });
+              return _context9.a(2, {
+                indexNo: i,
+                video: this._refs(i)
+              });
+            case 6:
+              i++;
+              _context9.n = 4;
+              break;
+            case 7:
+              return _context9.a(2);
+            case 8:
+              return _context9.a(2);
+          }
+        }, _callee9, this);
+      }));
+      function findVideo() {
+        return _findVideo.apply(this, arguments);
+      }
+      return findVideo;
+    }())
+  }, {
+    key: "_refs",
+    value: function _refs(i) {
+      var refname = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'live-play-video';
+      var dom = this.refs[refname + i];
+      if (typeof dom !== 'undefined') {
+        return dom;
+      } else {
+        return null;
+      }
+    }
+  }, {
+    key: "hasFullScreenElement",
+    value:
+    // 判断是否存在全屏元素
+    function hasFullScreenElement() {
+      return document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement;
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this3 = this;
+      var _this$state3 = this.state,
+        activeVideo = _this$state3.activeVideo,
+        maxVideoIndex = _this$state3.maxVideoIndex,
+        uid = _this$state3.uid,
+        isShowPtzPnl = _this$state3.isShowPtzPnl,
+        ptzPosition = _this$state3.ptzPosition;
+      var _this$props8 = this.props,
+        isShowReplayProgress = _this$props8.isShowReplayProgress,
+        sdkLoaded = _this$props8.sdkLoaded,
+        VMSdkType = _this$props8.VMSdkType,
+        voidClassName = _this$props8.voidClassName,
+        videoBtnConfig = _this$props8.videoBtnConfig,
+        playCallback = _this$props8.playCallback,
+        _this$props8$layoutDi = _this$props8.layoutDirection,
+        layoutDirection = _this$props8$layoutDi === void 0 ? 'row' : _this$props8$layoutDi,
+        videoDraggable = _this$props8.videoDraggable,
+        _this$props8$toolsCon = _this$props8.toolsConfig,
+        toolsConfig = _this$props8$toolsCon === void 0 ? {} : _this$props8$toolsCon;
+      this._getPlayStatusInfo();
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+        className: classNames("".concat(CUSTOM_PREFIX, "-livePlay-playVideos-pane"), _defineProperty({}, "".concat(CUSTOM_PREFIX, "-livePlay-playVideos-pane-column"), layoutDirection === 'column')),
+        ref: function ref(el) {
+          return _this3.videos = el;
+        }
+      }, this.videoIndexList.map(function (val, index) {
+        var sixClass = "six-layout-".concat(index);
+        var thirteenClass = "thirteen-layout-".concat(index);
+        return /*#__PURE__*/React.createElement("div", {
+          className: classnames('videoDrag', 'live-play-video', "udvideo-live-play-video-".concat(index), {
+            'active-video': activeVideo === index
+          }, {
+            'max-video': maxVideoIndex === index
+          }, "".concat(getScrrenRowAndColClass(_this3.screenSplitType)), {
+            'visible-video': maxVideoIndex === -1 && index < getRealScreen(_this3.screenSplitType) || maxVideoIndex !== -1 && index === maxVideoIndex
+          }, {
+            'uVisible-video': maxVideoIndex === -1 && index >= getRealScreen(_this3.screenSplitType) || maxVideoIndex !== -1 && index !== maxVideoIndex
+          }, _defineProperty({}, sixClass, _this3.screenSplitType === 6), _defineProperty({}, thirteenClass, _this3.screenSplitType === 13)),
+          key: "play_video_".concat(val),
+          "data-index": index,
+          draggable: VMSdkType === 'imosSdk' && videoDraggable,
+          onClick: function onClick() {
+            return _this3._onLeftClickVideo(index);
+          },
+          onDoubleClick: function onDoubleClick() {
+            return _this3._doubleClickVideo(index);
+          },
+          onContextMenu: function onContextMenu(e) {
+            return _this3._rightClickVideo(e, index);
+          },
+          onDragEnter: function onDragEnter(e) {
+            return _this3.windowEnter(e, index);
+          },
+          onDragOver: function onDragOver(e) {
+            return e.preventDefault();
+          },
+          onDragStart: function onDragStart(e) {
+            return _this3.dragVideo(e, index);
+          },
+          onDrop: function onDrop(e) {
+            return _this3.drop(e, index);
+          },
+          ref: 'live-play-video-box' + index
+        }, sdkLoaded && /*#__PURE__*/React.createElement(PlayWindow, _extends({
+          voidClassName: voidClassName,
+          ref: 'live-play-video' + index,
+          videoIndex: index,
+          VMSdkType: VMSdkType,
+          isDisplayPtzBtn: _this3.props.isShowPtz,
+          isDisplayBottomPtzIcon: _this3.props.isShowBottomPtzIcon,
+          className: "PlayWindow",
+          splitscreen: _this3.screenSplitType,
+          windowID: "play_window_".concat(val),
+          onReplaySuccess: _this3.onReplaySuccess,
+          onSwitchSuccess: _this3.onSwitchSuccess,
+          onSpeedSuccess: _this3.onSpeedSuccess,
+          isShowReplayProgress: isShowReplayProgress,
+          showVideoNumber: _this3.props.showVideoNumber
+          //_pluginVideoEvent这里回调需要给val，给index会导致窗格混乱
+          ,
+          pluginVideoEvent: function pluginVideoEvent(obj) {
+            return _this3._pluginVideoEvent(obj, val);
+          },
+          ptzBtnClick: function ptzBtnClick() {
+            return _this3._ptzBtnClick(val);
+          },
+          videoBtnConfig: videoBtnConfig,
+          textLocale: _this3.props.textLocale,
+          playCallback: playCallback,
+          canDragVideo: videoDraggable
+        }, toolsConfig)));
+      }), isShowPtzPnl && /*#__PURE__*/React.createElement("div", {
+        className: "live-ptzctr-panel ".concat(CONSTANT_IMOS_PLAYER_CAST_VIDEO_CLASSNAME),
+        ref: function ref(el) {
+          return _this3.livePtzPnl = el;
+        },
+        style: {
+          position: 'absolute',
+          top: ptzPosition !== null ? ptzPosition.posY : 0,
+          left: ptzPosition !== null ? ptzPosition.posX : 0
+        }
+      }, /*#__PURE__*/React.createElement(PtzControlPanel, {
+        videoCamInfo: /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee0() {
+          var video, data, _t3;
+          return _regenerator().w(function (_context0) {
+            while (1) switch (_context0.n) {
+              case 0:
+                video = _this3._refs(activeVideo);
+                if (!video) {
+                  _context0.n = 2;
+                  break;
+                }
+                _context0.n = 1;
+                return video.getPlayStatusInfo();
+              case 1:
+                _t3 = _context0.v;
+                _context0.n = 3;
+                break;
+              case 2:
+                _t3 = null;
+              case 3:
+                data = _t3;
+                return _context0.a(2, {
+                  CameraCode: data === null || data === void 0 ? void 0 : data.cameraCode,
+                  CameraName: data === null || data === void 0 ? void 0 : data.TitleName
+                });
+            }
+          }, _callee0);
+        })) //相机信息
+        ,
+        initialPtzSpeed: /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee1() {
+          var data;
+          return _regenerator().w(function (_context1) {
+            while (1) switch (_context1.n) {
+              case 0:
+                _context1.n = 1;
+                return _this3._refs(activeVideo).getFuncInfo();
+              case 1:
+                data = _context1.v;
+                return _context1.a(2, data.iPTZSpeed);
+            }
+          }, _callee1);
+        })),
+        ref: function ref(el) {
+          return _this3.ptzRef = el;
+        },
+        movePtzPnl: this.movePtzPnl.bind(this),
+        onPtzSpeedChange: this._ptzSpeedChange,
+        onPtzPnlCloseClick: this._ptzPnlCloseClick,
+        textLocale: this.props.textLocale,
+        theme: this.props.theme,
+        VMSdkType: VMSdkType
+      }))));
+    }
+  }]);
+}(Component);
+export default PlayPanel;