@vtx/player 0.0.11 → 0.0.14

package/lib/live-player/index.js

@@ -0,0 +1,178 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.LivePlayer = void 0;
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _react = require("react");
+
+var _ahooks = require("ahooks");
+
+var _space = _interopRequireDefault(require("antd/lib/space"));
+
+var _icons = require("../icons");
+
+var _utils = require("../utils");
+
+var _controls = require("../controls");
+
+var _player = _interopRequireDefault(require("../player"));
+
+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 LivePlayer = function LivePlayer(props) {
+  var url = props.url,
+      _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,
+      talkUrl = props.talkUrl,
+      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;
+  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.useEffect)(function () {
+    var container = ref.current;
+    if (!url || !container) return;
+    var player = new _player["default"]({
+      url: url,
+      container: container,
+      type: type
+    });
+    playerRef.current = player;
+    setState({
+      loading: true
+    });
+    player.play().then(function () {
+      return setState({
+        play: true,
+        error: false
+      });
+    })["catch"](function () {
+      return setState({
+        error: true
+      });
+    })["finally"](function () {
+      return setState({
+        loading: false
+      });
+    });
+    return function () {
+      player.destroy();
+      setState({
+        error: false,
+        loading: false,
+        play: false
+      });
+    };
+  }, [url]);
+
+  var handleCapture = function handleCapture(e) {
+    var player = playerRef.current;
+    player && player.capture(captureName);
+    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
+    }
+  }, {
+    children: [(0, _jsxRuntime.jsx)("div", {
+      ref: ref,
+      style: {
+        height: '100%',
+        width: '100%'
+      },
+      id: state.id
+    }), 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
+        }), (0, _jsxRuntime.jsx)(_icons.CaptureIcon, {
+          onClick: handleCapture
+        }), talkUrl && (0, _jsxRuntime.jsx)(_controls.TalkControl, {
+          player: playerRef.current,
+          url: talkUrl
+        }), cloudParams && (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
+        })]
+      }))
+    }))]
+  }));
+};
+
+exports.LivePlayer = LivePlayer;
+var _default = LivePlayer;
+exports["default"] = _default;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["LivePlayer","props","url","width","height","captureName","type","talkUrl","cloudParams","showInfo","info","ref","useRef","wrapRef","controlsRef","playerRef","useFullscreen","isFullscreen","toggleFullscreen","useSetState","play","error","loading","id","guidGenerator","volume","showCloudPanel","state","setState","useEffect","container","current","player","Player","then","destroy","handleCapture","e","capture","stopPropagation","handleFullScreen","resize","_jsxs","Object","assign","className","style","children","_jsx","LoadingState","CloudControlPanel","InfoPanel","Space","size","align","VolumeControl","CaptureIcon","onClick","TalkControl","CloudControlIcon","active","ExitFullScreenIcon","FullScreenIcon"],"sources":["live-player/index.js"],"sourcesContent":["import { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { useEffect, useRef } from 'react';\nimport { useFullscreen, useSetState } from 'ahooks';\n// import { Space } from 'antd';\nimport Space from 'antd/lib/space';\nimport { CaptureIcon, CloudControlIcon, ExitFullScreenIcon, FullScreenIcon } from '../icons';\nimport { guidGenerator } from '../utils';\nimport { CloudControlPanel, InfoPanel, LoadingState, TalkControl, VolumeControl, } from '../controls';\nimport Player from '../player';\nexport const LivePlayer = (props) => {\n    const { url, width = '100%', height = '100%', captureName, type, talkUrl, cloudParams, showInfo = false, info = [], } = 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    useEffect(() => {\n        const container = ref.current;\n        if (!url || !container)\n            return;\n        const player = new Player({ url, container, type });\n        playerRef.current = player;\n        setState({ loading: true });\n        player\n            .play()\n            .then(() => setState({ play: true, error: false }))\n            .catch(() => setState({ error: true }))\n            .finally(() => setState({ loading: false }));\n        return () => {\n            player.destroy();\n            setState({ error: false, loading: false, play: false });\n        };\n    }, [url]);\n    const handleCapture = (e) => {\n        const player = playerRef.current;\n        player && player.capture(captureName);\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 } }, { children: [_jsx(\"div\", { ref: ref, style: { height: '100%', width: '100%' }, id: state.id }), 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 }), _jsx(CaptureIcon, { onClick: handleCapture }), talkUrl && _jsx(TalkControl, { player: playerRef.current, url: talkUrl }), cloudParams && (_jsx(CloudControlIcon, { active: state.showCloudPanel, onClick: () => setState({ showCloudPanel: !state.showCloudPanel }) })), isFullscreen ? (_jsx(ExitFullScreenIcon, { onClick: handleFullScreen })) : (_jsx(FullScreenIcon, { onClick: handleFullScreen }))] })) }))] })));\n};\nexport default LivePlayer;\n"],"mappings":"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"}

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

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

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

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

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

@@ -0,0 +1,83 @@
+.vtx-live-player {
+  position: relative;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  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/style/index.d.ts

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

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

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

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

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

package/lib/live-player/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/{dist/types/components → lib}/player/index.d.ts

@@ -1,4 +1,9 @@
 import moment from 'moment';
+declare global {
+    interface Window {
+        JSPlugin: any;
+    }
+}
 /** 视频流格式 */
 export declare type VideoType = 'flv' | 'hls' | 'hk_ws';
 interface ConstructorParams {