@vtx/player 1.2.13 → 1.3.0

package/lib/webrtc/PlayerManager.js

@@ -0,0 +1,163 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+
+var SrsRtcPlayerConstructor = SrsRtcPlayerAsync;
+/**
+ * WSPlayer是核心组件
+ * API 封装了接口
+ */
+
+var WebrtcPlayerManager = /*#__PURE__*/function () {
+  function WebrtcPlayerManager(opt) {
+    _classCallCheck(this, WebrtcPlayerManager);
+
+    // 播放器所在的容器ID
+    this.el = opt.el; // 实时预览播放器
+
+    this.realPlayer = null; // 录像回放播放器
+
+    this.recordPlayer = null;
+    this.player = null;
+    this.url = opt.url; // 实时预览还是录像回放播放器
+
+    this.type = opt.type; // 窗口的数量
+
+    this.playNum = 1; // 当前选中的窗口的索引
+
+    this.playIndex = 0; // 当前选中窗口正在播放视频的通道
+
+    this.currentChannelId = ''; // 索引对应窗口，保存当日录像信息
+
+    this.recordList = [];
+    this.init(opt);
+  }
+
+  _createClass(WebrtcPlayerManager, [{
+    key: "init",
+    value: function init(opt) {
+      this.initPlayer(opt);
+    }
+    /**
+     * 初始化实时预览播放器
+     */
+
+  }, {
+    key: "initPlayer",
+    value: function initPlayer(opt) {
+      this.playNum = opt.num;
+      this.realPlayer = new SrsRtcPlayerConstructor();
+
+      if (this.type) {
+        $("#".concat(this.el)).prop('srcObject', this.realPlayer.stream);
+      } else {
+        $("#".concat(this.el)).prop('src', this.realPlayer.stream);
+      }
+
+      this.realPlayer.play(this.url)["catch"](function (reason) {
+        this.realPlayer.close();
+        console.error(reason);
+      });
+      this.player = this.realPlayer;
+    }
+    /**
+     * 录像暂停
+     * 只有正在播放的录像调用才有效
+     */
+
+  }, {
+    key: "pause",
+    value: function pause() {
+      this.recordPlayer && this.recordPlayer.pause();
+    }
+    /**
+     * 录像暂停后播放
+     * 只有暂停后的录像调用才有效
+     */
+
+  }, {
+    key: "play",
+    value: function play() {
+      this.realPlayer && this.realPlayer.play(this.url);
+    }
+    /**
+     * 倍速播放
+     * @param {number} speed 速率 0.125 0.25 0.5 1 2 4 8 共7种速率
+     */
+
+  }, {
+    key: "playSpeed",
+    value: function playSpeed(speed) {
+      this.recordPlayer && this.recordPlayer.playSpeed(speed);
+    }
+    /**
+     * 关闭播放器
+     * @param {number} index 可选，关闭指定索引的窗口的播放器，不传则表示关闭所有播放器
+     */
+
+  }, {
+    key: "close",
+    value: function close(index) {
+      this.player && this.player.close(index);
+    }
+    /**
+     * 设置全屏
+     */
+
+  }, {
+    key: "setFullScreen",
+    value: function setFullScreen() {// this.player.setFullScreen();
+    }
+    /**
+     * 设置窗口自适应还是拉伸
+     * @param {string} playerAdapter selfAdaption 自适应 | stretching 拉伸
+     */
+
+  }, {
+    key: "setPlayerAdapter",
+    value: function setPlayerAdapter(playerAdapter) {// this.player.setPlayerAdapter(playerAdapter);
+    }
+    /**
+     * 控制视频播放器显示的路数: 1 4 9 16 25，不会超过最大显示路数
+     * @param {number} number
+     */
+
+  }, {
+    key: "setPlayerNum",
+    value: function setPlayerNum(number) {// this.player.setPlayerNum(number);
+    }
+    /**
+     * 设置选中的播放器的索引
+     * @param {number} index
+     */
+
+  }, {
+    key: "setSelectIndex",
+    value: function setSelectIndex(index) {// this.player.setSelectIndex(index);
+    }
+    /**
+     * 录像跳转播放
+     * @param {string} time HH:mm:ss格式
+     */
+
+  }, {
+    key: "jumpPlayByTime",
+    value: function jumpPlayByTime(time) {// this.player.jumpPlayByTime(time);
+    }
+  }]);
+
+  return WebrtcPlayerManager;
+}();
+
+var _default = WebrtcPlayerManager;
+exports["default"] = _default;
+//# sourceMappingURL=PlayerManager.js.map

package/lib/webrtc/PlayerManager.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlayerManager.js","names":["SrsRtcPlayerConstructor","SrsRtcPlayerAsync","WebrtcPlayerManager","opt","el","realPlayer","recordPlayer","player","url","type","playNum","playIndex","currentChannelId","recordList","init","initPlayer","num","$","prop","stream","play","reason","close","console","error","pause","speed","playSpeed","index","playerAdapter","number","time"],"sources":["webrtc/PlayerManager.js"],"sourcesContent":["let SrsRtcPlayerConstructor = SrsRtcPlayerAsync;\n/**\n * WSPlayer是核心组件\n * API 封装了接口\n */\nclass WebrtcPlayerManager {\n    constructor(opt) {\n        // 播放器所在的容器ID\n        this.el = opt.el;\n        // 实时预览播放器\n        this.realPlayer = null;\n        // 录像回放播放器\n        this.recordPlayer = null;\n        this.player = null;\n        this.url = opt.url;\n        // 实时预览还是录像回放播放器\n        this.type = opt.type;\n        // 窗口的数量\n        this.playNum = 1;\n        // 当前选中的窗口的索引\n        this.playIndex = 0;\n        // 当前选中窗口正在播放视频的通道\n        this.currentChannelId = '';\n        // 索引对应窗口，保存当日录像信息\n        this.recordList = [];\n        this.init(opt);\n    }\n    init(opt) {\n        this.initPlayer(opt);\n    }\n    /**\n     * 初始化实时预览播放器\n     */\n    initPlayer(opt) {\n        this.playNum = opt.num;\n        this.realPlayer = new SrsRtcPlayerConstructor();\n        if (this.type) {\n            $(`#${this.el}`).prop('srcObject', this.realPlayer.stream);\n        }\n        else {\n            $(`#${this.el}`).prop('src', this.realPlayer.stream);\n        }\n        this.realPlayer.play(this.url).catch(function (reason) {\n            this.realPlayer.close();\n            console.error(reason);\n        });\n        this.player = this.realPlayer;\n    }\n    /**\n     * 录像暂停\n     * 只有正在播放的录像调用才有效\n     */\n    pause() {\n        this.recordPlayer && this.recordPlayer.pause();\n    }\n    /**\n     * 录像暂停后播放\n     * 只有暂停后的录像调用才有效\n     */\n    play() {\n        this.realPlayer && this.realPlayer.play(this.url);\n    }\n    /**\n     * 倍速播放\n     * @param {number} speed 速率 0.125 0.25 0.5 1 2 4 8 共7种速率\n     */\n    playSpeed(speed) {\n        this.recordPlayer && this.recordPlayer.playSpeed(speed);\n    }\n    /**\n     * 关闭播放器\n     * @param {number} index 可选，关闭指定索引的窗口的播放器，不传则表示关闭所有播放器\n     */\n    close(index) {\n        this.player && this.player.close(index);\n    }\n    /**\n     * 设置全屏\n     */\n    setFullScreen() {\n        // this.player.setFullScreen();\n    }\n    /**\n     * 设置窗口自适应还是拉伸\n     * @param {string} playerAdapter selfAdaption 自适应 | stretching 拉伸\n     */\n    setPlayerAdapter(playerAdapter) {\n        // this.player.setPlayerAdapter(playerAdapter);\n    }\n    /**\n     * 控制视频播放器显示的路数: 1 4 9 16 25，不会超过最大显示路数\n     * @param {number} number\n     */\n    setPlayerNum(number) {\n        // this.player.setPlayerNum(number);\n    }\n    /**\n     * 设置选中的播放器的索引\n     * @param {number} index\n     */\n    setSelectIndex(index) {\n        // this.player.setSelectIndex(index);\n    }\n    /**\n     * 录像跳转播放\n     * @param {string} time HH:mm:ss格式\n     */\n    jumpPlayByTime(time) {\n        // this.player.jumpPlayByTime(time);\n    }\n}\nexport default WebrtcPlayerManager;\n"],"mappings":";;;;;;;;;;;;;AAAA,IAAIA,uBAAuB,GAAGC,iBAA9B;AACA;AACA;AACA;AACA;;IACMC,mB;EACF,6BAAYC,GAAZ,EAAiB;IAAA;;IACb;IACA,KAAKC,EAAL,GAAUD,GAAG,CAACC,EAAd,CAFa,CAGb;;IACA,KAAKC,UAAL,GAAkB,IAAlB,CAJa,CAKb;;IACA,KAAKC,YAAL,GAAoB,IAApB;IACA,KAAKC,MAAL,GAAc,IAAd;IACA,KAAKC,GAAL,GAAWL,GAAG,CAACK,GAAf,CARa,CASb;;IACA,KAAKC,IAAL,GAAYN,GAAG,CAACM,IAAhB,CAVa,CAWb;;IACA,KAAKC,OAAL,GAAe,CAAf,CAZa,CAab;;IACA,KAAKC,SAAL,GAAiB,CAAjB,CAda,CAeb;;IACA,KAAKC,gBAAL,GAAwB,EAAxB,CAhBa,CAiBb;;IACA,KAAKC,UAAL,GAAkB,EAAlB;IACA,KAAKC,IAAL,CAAUX,GAAV;EACH;;;;WACD,cAAKA,GAAL,EAAU;MACN,KAAKY,UAAL,CAAgBZ,GAAhB;IACH;IACD;AACJ;AACA;;;;WACI,oBAAWA,GAAX,EAAgB;MACZ,KAAKO,OAAL,GAAeP,GAAG,CAACa,GAAnB;MACA,KAAKX,UAAL,GAAkB,IAAIL,uBAAJ,EAAlB;;MACA,IAAI,KAAKS,IAAT,EAAe;QACXQ,CAAC,YAAK,KAAKb,EAAV,EAAD,CAAiBc,IAAjB,CAAsB,WAAtB,EAAmC,KAAKb,UAAL,CAAgBc,MAAnD;MACH,CAFD,MAGK;QACDF,CAAC,YAAK,KAAKb,EAAV,EAAD,CAAiBc,IAAjB,CAAsB,KAAtB,EAA6B,KAAKb,UAAL,CAAgBc,MAA7C;MACH;;MACD,KAAKd,UAAL,CAAgBe,IAAhB,CAAqB,KAAKZ,GAA1B,WAAqC,UAAUa,MAAV,EAAkB;QACnD,KAAKhB,UAAL,CAAgBiB,KAAhB;QACAC,OAAO,CAACC,KAAR,CAAcH,MAAd;MACH,CAHD;MAIA,KAAKd,MAAL,GAAc,KAAKF,UAAnB;IACH;IACD;AACJ;AACA;AACA;;;;WACI,iBAAQ;MACJ,KAAKC,YAAL,IAAqB,KAAKA,YAAL,CAAkBmB,KAAlB,EAArB;IACH;IACD;AACJ;AACA;AACA;;;;WACI,gBAAO;MACH,KAAKpB,UAAL,IAAmB,KAAKA,UAAL,CAAgBe,IAAhB,CAAqB,KAAKZ,GAA1B,CAAnB;IACH;IACD;AACJ;AACA;AACA;;;;WACI,mBAAUkB,KAAV,EAAiB;MACb,KAAKpB,YAAL,IAAqB,KAAKA,YAAL,CAAkBqB,SAAlB,CAA4BD,KAA5B,CAArB;IACH;IACD;AACJ;AACA;AACA;;;;WACI,eAAME,KAAN,EAAa;MACT,KAAKrB,MAAL,IAAe,KAAKA,MAAL,CAAYe,KAAZ,CAAkBM,KAAlB,CAAf;IACH;IACD;AACJ;AACA;;;;WACI,yBAAgB,CACZ;IACH;IACD;AACJ;AACA;AACA;;;;WACI,0BAAiBC,aAAjB,EAAgC,CAC5B;IACH;IACD;AACJ;AACA;AACA;;;;WACI,sBAAaC,MAAb,EAAqB,CACjB;IACH;IACD;AACJ;AACA;AACA;;;;WACI,wBAAeF,KAAf,EAAsB,CAClB;IACH;IACD;AACJ;AACA;AACA;;;;WACI,wBAAeG,IAAf,EAAqB,CACjB;IACH;;;;;;eAEU7B,mB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vtx/player",
-  "version": "1.2.13",
+  "version": "1.3.0",
   "private": false,
   "description": "视频业务组件",
   "main": "./lib/index.js",

package/lib/live-player-image/index.d.ts

@@ -1,36 +0,0 @@
-import React from 'react';
-import { CloudControlPanelProps } from '../controls';
-import { VideoType } from '../player';
-interface VtxPlayerProps {
-    /** 视频流地址 */
-    url: string;
-    /** 是否使用代理播放 */
-    enableAgent?: boolean;
-    /** 宽度 */
-    width?: number;
-    /** 高度 */
-    height?: number;
-    /** 视频流格式，如果为空则根据url自行判断 */
-    type?: VideoType;
-    /** 截图文件名 */
-    captureName?: string;
-    /** 通道号 */
-    channelNum?: string;
-    /** 设备id */
-    deviceId?: string;
-    /** 云台控制 */
-    cloudParams?: CloudControlPanelProps;
-    /** 是否展示信息 */
-    showInfo?: boolean | 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom';
-    /** 信息 */
-    info?: Array<Array<string>>;
-    /** 截图回调 */
-    screenshot?: (dataURL: string) => void;
-    /** 重置视频大小 */
-    resize?: () => void;
-    /** 加载结束回调 */
-    loaded?: () => void;
-}
-export declare const LivePlayerImage: (props: VtxPlayerProps, selfRef: any) => JSX.Element;
-declare const _default: React.ForwardRefExoticComponent<VtxPlayerProps & React.RefAttributes<unknown>>;
-export default _default;

package/lib/live-player-image/index.js

@@ -1,238 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = exports.LivePlayerImage = void 0;
-
-var _jsxRuntime = require("react/jsx-runtime");
-
-var _react = require("react");
-
-var _controls = require("../controls");
-
-var _icons = require("../icons");
-
-var _player = _interopRequireDefault(require("../player"));
-
-var _utils = require("../utils");
-
-var _ahooks = require("ahooks");
-
-var _space = _interopRequireDefault(require("antd/lib/space"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": 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 LivePlayerImage = function LivePlayerImage(props, selfRef) {
-  var url = props.url,
-      enableAgent = props.enableAgent,
-      _props$width = props.width,
-      width = _props$width === void 0 ? '100%' : _props$width,
-      _props$height = props.height,
-      height = _props$height === void 0 ? '100%' : _props$height,
-      captureName = props.captureName,
-      type = props.type,
-      channelNum = props.channelNum,
-      deviceId = props.deviceId,
-      cloudParams = props.cloudParams,
-      _props$showInfo = props.showInfo,
-      showInfo = _props$showInfo === void 0 ? false : _props$showInfo,
-      _props$info = props.info,
-      info = _props$info === void 0 ? [] : _props$info,
-      screenshot = props.screenshot,
-      loaded = props.loaded;
-  var ref = (0, _react.useRef)(null);
-  var wrapRef = (0, _react.useRef)(null);
-  var controlsRef = (0, _react.useRef)(null);
-  var playerRef = (0, _react.useRef)();
-
-  var _useFullscreen = (0, _ahooks.useFullscreen)(wrapRef),
-      _useFullscreen2 = _slicedToArray(_useFullscreen, 2),
-      isFullscreen = _useFullscreen2[0],
-      toggleFullscreen = _useFullscreen2[1].toggleFullscreen;
-
-  var _useSetState = (0, _ahooks.useSetState)({
-    play: false,
-    error: false,
-    loading: false,
-    id: 'vtx_hk_player_' + (0, _utils.guidGenerator)(),
-    volume: 0,
-    showCloudPanel: false
-  }),
-      _useSetState2 = _slicedToArray(_useSetState, 2),
-      state = _useSetState2[0],
-      setState = _useSetState2[1];
-
-  (0, _react.useImperativeHandle)(selfRef, function () {
-    return {
-      resize: function resize() {
-        var player = playerRef.current;
-        player && url && player.resize();
-      }
-    };
-  });
-  (0, _react.useEffect)(function () {
-    var container = ref.current;
-
-    if (!url || !container) {
-      playerRef.current && playerRef.current.destroy();
-      return;
-    }
-
-    var player = new _player["default"]({
-      url: url,
-      channelNum: channelNum,
-      enableAgent: enableAgent,
-      container: container,
-      type: type
-    });
-    playerRef.current = player;
-    setState({
-      loading: true,
-      error: false
-    });
-    player.play().then(function () {
-      return setState({
-        play: true,
-        error: false
-      });
-    })["catch"](function () {
-      return setState({
-        error: true
-      });
-    })["finally"](function () {
-      setState({
-        loading: false
-      }), loaded && loaded();
-    });
-    return function () {
-      player.destroy();
-      setState({
-        error: false,
-        loading: false,
-        play: false
-      });
-    };
-  }, [url]);
-  (0, _react.useEffect)(function () {
-    var canvas = document.getElementById('canvas');
-    var ctx = canvas.getContext('2d');
-    var i = 0;
-    var timer = setInterval(function () {
-      ctx.beginPath();
-      var x = Math.random() * 300;
-      var x2 = Math.random() * 150;
-      var y = Math.random() * 300;
-      var y2 = Math.random() * 150;
-      ctx.strokeStyle = 'red';
-      ctx.lineWidth = 3;
-      ctx.rect(x, y, x2 > 20 ? x2 : 20, y2 > 20 ? y2 : 20);
-      i++;
-      ctx.stroke(); // ctx.closePath();
-
-      if (i > 5) {
-        timer && clearTimeout(timer);
-      }
-    }, 2000);
-    return function () {
-      timer && clearTimeout(timer);
-    };
-  }, []);
-
-  var handleCapture = function handleCapture(e) {
-    var player = playerRef.current;
-    player && player.capture(captureName, screenshot);
-    e.stopPropagation();
-  };
-
-  var handleFullScreen = function handleFullScreen(e) {
-    toggleFullscreen();
-    var player = playerRef.current;
-    player && player.resize();
-    e.stopPropagation();
-  };
-
-  return (0, _jsxRuntime.jsxs)("div", Object.assign({
-    className: "vtx-live-player",
-    ref: wrapRef,
-    style: {
-      width: width,
-      height: height,
-      position: 'relative'
-    }
-  }, {
-    children: [(0, _jsxRuntime.jsx)("div", {
-      ref: ref,
-      style: {
-        height: '100%',
-        width: '100%'
-      },
-      id: state.id
-    }), (0, _jsxRuntime.jsx)("canvas", {
-      id: "canvas",
-      width: width,
-      height: height,
-      style: {
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0
-      }
-    }), state.error && (0, _jsxRuntime.jsx)(_controls.ErrorState, {}), state.loading && (0, _jsxRuntime.jsx)(_controls.LoadingState, {}), state.showCloudPanel && cloudParams && (0, _jsxRuntime.jsx)(_controls.CloudControlPanel, Object.assign({}, cloudParams)), (0, _jsxRuntime.jsx)(_controls.InfoPanel, {
-      showInfo: showInfo,
-      info: info
-    }), (0, _jsxRuntime.jsx)("div", Object.assign({
-      className: "controls",
-      ref: controlsRef
-    }, {
-      children: (0, _jsxRuntime.jsxs)(_space["default"], Object.assign({
-        className: "right",
-        size: 12,
-        align: "center"
-      }, {
-        children: [(0, _jsxRuntime.jsx)(_controls.VolumeControl, {
-          player: playerRef.current,
-          container: controlsRef.current
-        }), !!screenshot && (0, _jsxRuntime.jsx)(_icons.CaptureIcon, {
-          onClick: handleCapture
-        }), channelNum && deviceId && (0, _jsxRuntime.jsx)(_controls.TalkControl, {
-          player: playerRef.current,
-          channelNum: channelNum,
-          deviceId: deviceId
-        }), (cloudParams === null || cloudParams === void 0 ? void 0 : cloudParams.type) !== 'none' && (0, _jsxRuntime.jsx)(_icons.CloudControlIcon, {
-          active: state.showCloudPanel,
-          onClick: function onClick() {
-            return setState({
-              showCloudPanel: !state.showCloudPanel
-            });
-          }
-        }), isFullscreen ? (0, _jsxRuntime.jsx)(_icons.ExitFullScreenIcon, {
-          onClick: handleFullScreen
-        }) : (0, _jsxRuntime.jsx)(_icons.FullScreenIcon, {
-          onClick: handleFullScreen
-        })]
-      }))
-    }))]
-  }));
-}; // LivePlayerImage.displayName = 'live-player';
-
-
-exports.LivePlayerImage = LivePlayerImage;
-
-var _default = /*#__PURE__*/(0, _react.forwardRef)(LivePlayerImage);
-
-exports["default"] = _default;
-//# sourceMappingURL=index.js.map

package/lib/live-player-image/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","names":["LivePlayerImage","props","selfRef","url","enableAgent","width","height","captureName","type","channelNum","deviceId","cloudParams","showInfo","info","screenshot","loaded","ref","useRef","wrapRef","controlsRef","playerRef","useFullscreen","isFullscreen","toggleFullscreen","useSetState","play","error","loading","id","guidGenerator","volume","showCloudPanel","state","setState","useImperativeHandle","resize","player","current","useEffect","container","destroy","Player","then","canvas","document","getElementById","ctx","getContext","i","timer","setInterval","beginPath","x","Math","random","x2","y","y2","strokeStyle","lineWidth","rect","stroke","clearTimeout","handleCapture","e","capture","stopPropagation","handleFullScreen","_jsxs","Object","assign","className","style","position","children","_jsx","top","left","right","bottom","ErrorState","LoadingState","CloudControlPanel","InfoPanel","Space","size","align","VolumeControl","CaptureIcon","onClick","TalkControl","CloudControlIcon","active","ExitFullScreenIcon","FullScreenIcon","forwardRef"],"sources":["live-player-image/index.js"],"sourcesContent":["import { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';\nimport { CloudControlPanel, ErrorState, InfoPanel, LoadingState, TalkControl, VolumeControl, } from '../controls';\nimport { CaptureIcon, CloudControlIcon, ExitFullScreenIcon, FullScreenIcon } from '../icons';\nimport Player from '../player';\nimport { guidGenerator } from '../utils';\nimport { useFullscreen, useSetState } from 'ahooks';\n// import { Space } from 'antd';\nimport Space from 'antd/lib/space';\nexport const LivePlayerImage = (props, selfRef) => {\n    const { url, enableAgent, width = '100%', height = '100%', captureName, type, channelNum, deviceId, cloudParams, showInfo = false, info = [], screenshot, loaded, } = props;\n    const ref = useRef(null);\n    const wrapRef = useRef(null);\n    const controlsRef = useRef(null);\n    const playerRef = useRef();\n    const [isFullscreen, { toggleFullscreen }] = useFullscreen(wrapRef);\n    const [state, setState] = useSetState({\n        play: false,\n        error: false,\n        loading: false,\n        id: 'vtx_hk_player_' + guidGenerator(),\n        volume: 0,\n        showCloudPanel: false,\n    });\n    useImperativeHandle(selfRef, () => {\n        return {\n            resize: () => {\n                const player = playerRef.current;\n                player && url && player.resize();\n            },\n        };\n    });\n    useEffect(() => {\n        const container = ref.current;\n        if (!url || !container) {\n            playerRef.current && playerRef.current.destroy();\n            return;\n        }\n        const player = new Player({ url, channelNum, enableAgent, container, type });\n        playerRef.current = player;\n        setState({ loading: true, error: false });\n        player\n            .play()\n            .then(() => setState({ play: true, error: false }))\n            .catch(() => setState({ error: true }))\n            .finally(() => {\n            setState({ loading: false }), loaded && loaded();\n        });\n        return () => {\n            player.destroy();\n            setState({ error: false, loading: false, play: false });\n        };\n    }, [url]);\n    useEffect(() => {\n        const canvas = document.getElementById('canvas');\n        const ctx = canvas.getContext('2d');\n        let i = 0;\n        const timer = setInterval(() => {\n            ctx.beginPath();\n            const x = Math.random() * 300;\n            const x2 = Math.random() * 150;\n            const y = Math.random() * 300;\n            const y2 = Math.random() * 150;\n            ctx.strokeStyle = 'red';\n            ctx.lineWidth = 3;\n            ctx.rect(x, y, x2 > 20 ? x2 : 20, y2 > 20 ? y2 : 20);\n            i++;\n            ctx.stroke();\n            // ctx.closePath();\n            if (i > 5) {\n                timer && clearTimeout(timer);\n            }\n        }, 2000);\n        return () => {\n            timer && clearTimeout(timer);\n        };\n    }, []);\n    const handleCapture = (e) => {\n        const player = playerRef.current;\n        player && player.capture(captureName, screenshot);\n        e.stopPropagation();\n    };\n    const handleFullScreen = (e) => {\n        toggleFullscreen();\n        const player = playerRef.current;\n        player && player.resize();\n        e.stopPropagation();\n    };\n    return (_jsxs(\"div\", Object.assign({ className: \"vtx-live-player\", ref: wrapRef, style: { width, height, position: 'relative' } }, { children: [_jsx(\"div\", { ref: ref, style: { height: '100%', width: '100%' }, id: state.id }), _jsx(\"canvas\", { id: \"canvas\", width: width, height: height, style: {\n                    position: 'absolute',\n                    top: 0,\n                    left: 0,\n                    right: 0,\n                    bottom: 0,\n                } }), state.error && _jsx(ErrorState, {}), state.loading && _jsx(LoadingState, {}), state.showCloudPanel && cloudParams && _jsx(CloudControlPanel, Object.assign({}, cloudParams)), _jsx(InfoPanel, { showInfo: showInfo, info: info }), _jsx(\"div\", Object.assign({ className: \"controls\", ref: controlsRef }, { children: _jsxs(Space, Object.assign({ className: \"right\", size: 12, align: \"center\" }, { children: [_jsx(VolumeControl, { player: playerRef.current, container: controlsRef.current }), !!screenshot && _jsx(CaptureIcon, { onClick: handleCapture }), channelNum && deviceId && (_jsx(TalkControl, { player: playerRef.current, channelNum: channelNum, deviceId: deviceId })), (cloudParams === null || cloudParams === void 0 ? void 0 : cloudParams.type) !== 'none' && (_jsx(CloudControlIcon, { active: state.showCloudPanel, onClick: () => setState({ showCloudPanel: !state.showCloudPanel }) })), isFullscreen ? (_jsx(ExitFullScreenIcon, { onClick: handleFullScreen })) : (_jsx(FullScreenIcon, { onClick: handleFullScreen }))] })) }))] })));\n};\n// LivePlayerImage.displayName = 'live-player';\nexport default forwardRef(LivePlayerImage);\n"],"mappings":"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"}

package/lib/live-player-image/style/css.js

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

package/lib/live-player-image/style/css.js.map

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

package/lib/live-player-image/style/index.css

@@ -1,74 +0,0 @@
-.vtx-live-player {
-  position: relative;
-  background-color: #2b3d51;
-  border: 1px solid transparent;
-}
-.vtx-live-player .controls {
-  position: absolute;
-  bottom: 0;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  width: 100%;
-  height: 30px;
-  padding: 0 12px;
-  background-color: #131d27;
-  opacity: 0;
-  -webkit-transition: opacity 0.5s;
-  transition: opacity 0.5s;
-}
-.vtx-live-player .controls .right {
-  margin-left: auto;
-}
-.vtx-live-player .controls .right > div {
-  height: 24px;
-}
-.vtx-live-player:hover .controls {
-  opacity: 1;
-}
-.vtx-live-player video {
-  width: 100%;
-  height: 100%;
-  -o-object-fit: fill;
-     object-fit: fill;
-}
-.vtx-live-player .sub-wnd {
-  width: 100% !important;
-  height: 100% !important;
-  background-color: #2b3d51 !important;
-  border: 1px solid transparent !important;
-}
-.vtx-live-player .error-container {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -webkit-transform: translate(-50%, -50%);
-      -ms-transform: translate(-50%, -50%);
-          transform: translate(-50%, -50%);
-}
-.vtx-live-player .error-container .text {
-  margin: 20px 0;
-  font-size: 14px;
-  color: rgba(255, 255, 255, 0.65);
-}
-.vtx-live-player .loading-container {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  -webkit-transform: translate(-50%, -50%);
-      -ms-transform: translate(-50%, -50%);
-          transform: translate(-50%, -50%);
-}

package/lib/live-player-image/style/index.d.ts

@@ -1,3 +0,0 @@
-import "antd/lib/space/style";
-import '../../controls/style';
-import './index.less';

package/lib/live-player-image/style/index.js

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

package/lib/live-player-image/style/index.js.map

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

package/lib/live-player-image/style/index.less

@@ -1,70 +0,0 @@
-.vtx-live-player {
-    position: relative;
-    // display: flex;
-    // align-items: center;
-    // justify-content: center;
-    background-color: #2b3d51;
-    border: 1px solid transparent;
-    .controls {
-        position: absolute;
-        bottom: 0;
-        display: flex;
-        align-items: center;
-        width: 100%;
-        height: 30px;
-        padding: 0 12px;
-        background-color: #131d27;
-        opacity: 0;
-        transition: opacity 0.5s;
-
-        .right {
-            margin-left: auto;
-
-            > div {
-                height: 24px;
-            }
-        }
-    }
-
-    &:hover {
-        .controls {
-            opacity: 1;
-        }
-    }
-
-    video {
-        width: 100%;
-        height: 100%;
-        object-fit: fill;
-    }
-
-    .sub-wnd {
-        width: 100% !important;
-        height: 100% !important;
-        background-color: #2b3d51 !important;
-        border: 1px solid transparent !important;
-    }
-
-    .error-container {
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        transform: translate(-50%, -50%);
-
-        .text {
-            margin: 20px 0;
-            font-size: 14px;
-            color: rgba(255, 255 ,255 , .65);
-        }
-    }
-
-    .loading-container {
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-    }
-}