@vtx/player 1.1.6 → 1.2.1

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

@@ -0,0 +1,36 @@
+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

@@ -0,0 +1,237 @@
+"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,
+      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

@@ -0,0 +1 @@
+{"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, 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

@@ -0,0 +1,8 @@
+"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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,74 @@
+.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

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

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

@@ -0,0 +1,8 @@
+"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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,70 @@
+.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%);
+    }
+}

package/package.json

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