@cloud-app-dev/vidc 2.2.0-alpha.1 → 2.2.0-alpha.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.umirc.ts +2 -3
- package/es/Api/index.js +1 -1
- package/es/DeviceSelect/index.js +1 -1
- package/es/Drawer/Demo.js +24 -3
- package/es/Drawer/index.d.ts +29 -4
- package/es/Drawer/index.js +155 -4
- package/es/FrontendPlayer/index.d.ts +2 -0
- package/es/FrontendPlayer/index.js +2 -0
- package/es/FullScreen/index.d.ts +3 -3
- package/es/FullScreen/index.js +18 -42
- package/es/HightLevel/index.js +1 -1
- package/es/List/GridList/index.js +0 -1
- package/es/Modal/index.d.ts +27 -1
- package/es/Modal/index.js +155 -1
- package/es/Picture/component/MoveContent/index.js +18 -14
- package/es/Picture/component/Tools/index.js +0 -5
- package/es/Picture/demo.d.ts +2 -0
- package/es/Picture/demo.js +16 -0
- package/es/Picture/index.js +2 -2
- package/es/Picture/utils.js +1 -1
- package/es/Player/api/index.js +1 -1
- package/es/Player/contraller_bar/contraller_event.js +1 -0
- package/es/Player/frontend_player.d.ts +1 -7
- package/es/Player/frontend_timeline.js +11 -14
- package/es/Player/index.d.ts +1 -3
- package/es/Player/index.js +1 -3
- package/es/Player/player.d.ts +15 -0
- package/es/Player/segment_player.d.ts +1 -5
- package/es/Player/single_player.js +4 -3
- package/es/PlayerExt/demo.d.ts +2 -0
- package/es/PlayerExt/demo.js +165 -0
- package/es/PlayerExt/index.css +13 -0
- package/es/PlayerExt/index.d.ts +42 -0
- package/es/PlayerExt/index.js +145 -0
- package/es/SegmentPlayer/index.d.ts +2 -0
- package/es/SegmentPlayer/index.js +2 -0
- package/es/Service/fetch-adapter.d.ts +12 -0
- package/es/Service/fetch-adapter.js +184 -0
- package/es/Service/http.d.ts +1 -1
- package/es/Service/http.js +4 -2
- package/es/Service/interface.d.ts +2 -1
- package/es/Tree/BaseTree/demo.js +3 -1
- package/es/UserSelect/index.js +1 -1
- package/es/WorkerFlow/Form/Condition.js +2 -1
- package/es/WorkerFlow/Form/EmptyUserSet.js +3 -2
- package/es/WorkerFlow/Form/FormAuth.js +1 -1
- package/es/WorkerFlow/Form/GroupSelect.js +3 -2
- package/es/WorkerFlow/Form/GroupSelectModalContent.js +1 -1
- package/es/WorkerFlow/Form/LevelGroupSelect.js +3 -2
- package/es/WorkerFlow/Form/UserAndGroupSelect.js +3 -2
- package/es/WorkerFlow/Form/UserSelect.js +3 -2
- package/es/WorkerFlow/Form/UserSelectModalContent.js +1 -1
- package/es/WorkerFlow/Form/UserSet.js +1 -1
- package/es/WorkerFlow/Nodes/TitleElement.js +6 -2
- package/es/WorkerFlow/index.js +3 -2
- package/es/WorkerFlow/utils.js +1 -1
- package/es/index.d.ts +3 -5
- package/es/index.js +4 -6
- package/es/typings.d.ts +1 -0
- package/package.json +11 -10
- package/tsconfig.json +4 -3
- package/typings/global.d.ts +4 -0
- package/es/AppRedirect/index.css +0 -0
- package/es/AppRedirect/index.d.ts +0 -17
- package/es/AppRedirect/index.js +0 -33
- package/es/RefDrawer/index.d.ts +0 -15
- package/es/RefDrawer/index.js +0 -71
- package/es/RefModal/index.d.ts +0 -15
- package/es/RefModal/index.js +0 -73
- package/es/useDrawer/index.d.ts +0 -14
- package/es/useDrawer/index.js +0 -91
- package/es/useModal/index.d.ts +0 -14
- package/es/useModal/index.js +0 -93
- package/typings.d.ts +0 -2
|
@@ -8,7 +8,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
|
|
|
8
8
|
|
|
9
9
|
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
|
|
10
10
|
|
|
11
|
-
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf
|
|
11
|
+
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
|
|
12
12
|
|
|
13
13
|
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
14
14
|
|
|
@@ -18,7 +18,7 @@ function _assertThisInitialized(self) { if (self === void 0) { throw new Referen
|
|
|
18
18
|
|
|
19
19
|
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
20
20
|
|
|
21
|
-
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
|
|
21
|
+
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
|
|
22
22
|
|
|
23
23
|
import React from 'react';
|
|
24
24
|
import addEventListener from 'add-dom-event-listener';
|
|
@@ -36,7 +36,23 @@ var MoveContentView = /*#__PURE__*/function (_React$Component) {
|
|
|
36
36
|
_classCallCheck(this, MoveContentView);
|
|
37
37
|
|
|
38
38
|
_this = _super.call(this, props);
|
|
39
|
+
_this.position = {
|
|
40
|
+
x: 0,
|
|
41
|
+
y: 0
|
|
42
|
+
};
|
|
43
|
+
_this.DA = {
|
|
44
|
+
x: 0,
|
|
45
|
+
y: 0
|
|
46
|
+
};
|
|
47
|
+
_this.moveEvents = [];
|
|
48
|
+
_this.isDrag = false;
|
|
39
49
|
_this.dragRef = /*#__PURE__*/React.createRef();
|
|
50
|
+
_this.deviation = {
|
|
51
|
+
offsetX: 0,
|
|
52
|
+
offsetY: 0,
|
|
53
|
+
width: 0,
|
|
54
|
+
height: 0
|
|
55
|
+
};
|
|
40
56
|
|
|
41
57
|
_this.onMouseMove = function (event) {
|
|
42
58
|
if (_this.isDrag) {
|
|
@@ -104,18 +120,6 @@ var MoveContentView = /*#__PURE__*/function (_React$Component) {
|
|
|
104
120
|
}
|
|
105
121
|
};
|
|
106
122
|
|
|
107
|
-
_this.isDrag = false;
|
|
108
|
-
_this.DA = {
|
|
109
|
-
x: 0,
|
|
110
|
-
y: 0
|
|
111
|
-
};
|
|
112
|
-
_this.moveEvents = [];
|
|
113
|
-
_this.deviation = {
|
|
114
|
-
offsetX: 0,
|
|
115
|
-
offsetY: 0,
|
|
116
|
-
width: 0,
|
|
117
|
-
height: 0
|
|
118
|
-
};
|
|
119
123
|
return _this;
|
|
120
124
|
}
|
|
121
125
|
|
|
@@ -72,11 +72,6 @@ function Tools(_ref) {
|
|
|
72
72
|
return containerEle;
|
|
73
73
|
},
|
|
74
74
|
fullScreenChange: fullScreenChange
|
|
75
|
-
}, function (isFullscreen) {
|
|
76
|
-
return /*#__PURE__*/React.createElement(IconFont, {
|
|
77
|
-
title: !isFullscreen ? '全屏' : '退出全屏',
|
|
78
|
-
type: !isFullscreen ? 'icon-S_View_ScreenViewFull' : 'icon-S_View_ScreenViewExit'
|
|
79
|
-
});
|
|
80
75
|
}))));
|
|
81
76
|
}
|
|
82
77
|
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import "antd/lib/config-provider/style";
|
|
2
|
+
import _ConfigProvider from "antd/lib/config-provider";
|
|
3
|
+
import React from 'react';
|
|
4
|
+
import Picture from '.';
|
|
5
|
+
export default function App() {
|
|
6
|
+
return /*#__PURE__*/React.createElement(_ConfigProvider, {
|
|
7
|
+
prefixCls: "cloudapp"
|
|
8
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
9
|
+
style: {
|
|
10
|
+
width: 800,
|
|
11
|
+
height: 400
|
|
12
|
+
}
|
|
13
|
+
}, /*#__PURE__*/React.createElement(Picture, {
|
|
14
|
+
imagePath: "https://x0.ifengimg.com/cmpp/fck/2020_30/65cca65a549d6c2_w1024_h578.jpg"
|
|
15
|
+
})));
|
|
16
|
+
}
|
package/es/Picture/index.js
CHANGED
|
@@ -23,7 +23,7 @@ import Tools from './component/Tools';
|
|
|
23
23
|
import DrawRect from './component/DrawRect';
|
|
24
24
|
import WheelScale from './component/WheelScale';
|
|
25
25
|
import DefaultRects from './component/DefaultRects';
|
|
26
|
-
import { isFunction } from 'lodash';
|
|
26
|
+
import { isFunction } from 'lodash-es';
|
|
27
27
|
import "./index.css";
|
|
28
28
|
|
|
29
29
|
function Picture(_a) {
|
|
@@ -187,7 +187,7 @@ function Picture(_a) {
|
|
|
187
187
|
rotate = state.rotate;
|
|
188
188
|
|
|
189
189
|
if (!layoutRef.current) {
|
|
190
|
-
return;
|
|
190
|
+
return undefined;
|
|
191
191
|
}
|
|
192
192
|
|
|
193
193
|
var position = computedBound(layoutRef.current, currrentPosition, scale, rotate);
|
package/es/Picture/utils.js
CHANGED
package/es/Player/api/index.js
CHANGED
|
@@ -256,7 +256,7 @@ export function useTypeAndPlay(url, type, isLive, container, segments, flvConfig
|
|
|
256
256
|
video.removeAttribute('src');
|
|
257
257
|
setState({});
|
|
258
258
|
};
|
|
259
|
-
}, [url, container, segments]);
|
|
259
|
+
}, [url, container, segments, type]);
|
|
260
260
|
return [state.type, state.flv, state.hls];
|
|
261
261
|
} //创建Api
|
|
262
262
|
|
|
@@ -1,11 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import type {
|
|
3
|
-
declare type OmitPlayerProps = 'customTimeLine' | 'onCanPlayerInit' | 'isLive' | 'reload' | 'type';
|
|
4
|
-
interface IFrontendPlayerProps extends Omit<ISinglePlayerProps, OmitPlayerProps> {
|
|
5
|
-
begin?: number;
|
|
6
|
-
end?: number;
|
|
7
|
-
onSeek(time: number): void;
|
|
8
|
-
}
|
|
2
|
+
import type { IFrontendPlayerProps } from './player';
|
|
9
3
|
/**
|
|
10
4
|
* @desc 主组件,负责片段整体逻辑控制
|
|
11
5
|
* @param param0
|
|
@@ -40,6 +40,9 @@ function FrontendTimeLine(_ref) {
|
|
|
40
40
|
_useTimes2 = _slicedToArray(_useTimes, 1),
|
|
41
41
|
currentTime = _useTimes2[0];
|
|
42
42
|
|
|
43
|
+
var rTime = useMemo(function () {
|
|
44
|
+
return state.time + currentTime;
|
|
45
|
+
}, [state.time, currentTime]);
|
|
43
46
|
useEffect(function () {
|
|
44
47
|
return setState(function (old) {
|
|
45
48
|
return Object.assign(Object.assign({}, old), {
|
|
@@ -47,30 +50,24 @@ function FrontendTimeLine(_ref) {
|
|
|
47
50
|
});
|
|
48
51
|
});
|
|
49
52
|
}, [begin]);
|
|
50
|
-
useEffect(function () {
|
|
51
|
-
return setState(function (old) {
|
|
52
|
-
return Object.assign(Object.assign({}, old), {
|
|
53
|
-
time: currentTime
|
|
54
|
-
});
|
|
55
|
-
});
|
|
56
|
-
}, [currentTime]);
|
|
57
53
|
var playPercent = useMemo(function () {
|
|
58
|
-
return
|
|
59
|
-
}, [
|
|
54
|
+
return rTime / duration * 100;
|
|
55
|
+
}, [rTime]);
|
|
60
56
|
var cTime = useMemo(function () {
|
|
61
|
-
return begin +
|
|
62
|
-
}, [begin,
|
|
57
|
+
return begin + rTime * 1000;
|
|
58
|
+
}, [begin, rTime]);
|
|
63
59
|
var seekWithLine = useCallback(function (e) {
|
|
64
60
|
var rect = e.currentTarget.getBoundingClientRect();
|
|
65
61
|
var current = e.pageX - rect.left;
|
|
66
62
|
var cTime = current / rect.width * duration;
|
|
67
|
-
onSeek && onSeek(begin + cTime * 1000);
|
|
63
|
+
onSeek && onSeek(begin + cTime * 1000); //时间轴进度条rTime是要加上currentTime,这里要减去一下,包装交互一致性
|
|
64
|
+
|
|
68
65
|
setState(function (old) {
|
|
69
66
|
return Object.assign(Object.assign({}, old), {
|
|
70
|
-
time: cTime
|
|
67
|
+
time: cTime - currentTime
|
|
71
68
|
});
|
|
72
69
|
});
|
|
73
|
-
}, [api, duration, begin, onSeek]);
|
|
70
|
+
}, [api, duration, begin, onSeek, currentTime]);
|
|
74
71
|
var onLineMouseOver = useCallback(function (e) {
|
|
75
72
|
var rect = e.currentTarget.getBoundingClientRect();
|
|
76
73
|
var left = e.pageX - rect.left;
|
package/es/Player/index.d.ts
CHANGED
package/es/Player/index.js
CHANGED
package/es/Player/player.d.ts
CHANGED
|
@@ -37,7 +37,22 @@ export interface ISinglePlayerProps {
|
|
|
37
37
|
playerEvents?: CustomEvent[];
|
|
38
38
|
}
|
|
39
39
|
|
|
40
|
+
type OmitPlayerProps = 'customTimeLine' | 'onCanPlayerInit' | 'isLive' | 'reload' | 'type';
|
|
41
|
+
|
|
42
|
+
export interface IFrontendPlayerProps extends Omit<ISinglePlayerProps, OmitPlayerProps> {
|
|
43
|
+
begin?: number;
|
|
44
|
+
end?: number;
|
|
45
|
+
onSeek(time: number): void;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
export interface ISegmentPlayerProps extends Omit<ISinglePlayerProps, 'url' | 'customTimeLine' | 'onCanPlayerInit'> {
|
|
49
|
+
segments?: ISegmentType[];
|
|
50
|
+
begin?: number;
|
|
51
|
+
}
|
|
52
|
+
|
|
40
53
|
export const SinglePlayer: React.FunctionComponent<ISinglePlayerProps>;
|
|
54
|
+
export const FrontendPlayer: React.FunctionComponent<IFrontendPlayerProps>;
|
|
55
|
+
export const SegmentPlayer: React.FunctionComponent<ISegmentPlayerProps>;
|
|
41
56
|
|
|
42
57
|
export interface EventName {
|
|
43
58
|
RELOAD: 'reload'; //手动视频重载
|
|
@@ -1,9 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import type {
|
|
3
|
-
interface ISegmentPlayerProps extends Omit<ISinglePlayerProps, 'url' | 'customTimeLine' | 'onCanPlayerInit'> {
|
|
4
|
-
segments?: ISegmentType[];
|
|
5
|
-
begin?: number;
|
|
6
|
-
}
|
|
2
|
+
import type { ISegmentPlayerProps } from './player';
|
|
7
3
|
/**
|
|
8
4
|
* @desc 主组件,负责片段整体逻辑控制
|
|
9
5
|
* @param param0
|
|
@@ -55,11 +55,12 @@ var SinglePlayer = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
55
55
|
}),
|
|
56
56
|
_useState2 = _slicedToArray(_useState, 2),
|
|
57
57
|
state = _useState2[0],
|
|
58
|
-
setState = _useState2[1];
|
|
58
|
+
setState = _useState2[1]; // 视频格式判断,外部可以强制指定,也可以通过url自动判断
|
|
59
|
+
|
|
59
60
|
|
|
60
61
|
var vType = useMemo(function () {
|
|
61
62
|
return type || getVideoType(url);
|
|
62
|
-
}, [url]);
|
|
63
|
+
}, [url, type]);
|
|
63
64
|
var domRef = useRef(null);
|
|
64
65
|
var video = useMemo(function () {
|
|
65
66
|
return state.container ? state.container.querySelector('video') : undefined;
|
|
@@ -81,7 +82,7 @@ var SinglePlayer = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
81
82
|
|
|
82
83
|
var hasLink = useMemo(function () {
|
|
83
84
|
return !!url || !!flvConfig.mediaDataSource.segments && vType === 'flv';
|
|
84
|
-
}, [url, flvConfig.mediaDataSource.segments]); // 存储容器
|
|
85
|
+
}, [url, flvConfig.mediaDataSource.segments, vType]); // 存储容器
|
|
85
86
|
|
|
86
87
|
useEffect(function () {
|
|
87
88
|
setState(function (old) {
|
|
@@ -0,0 +1,165 @@
|
|
|
1
|
+
import "antd/lib/config-provider/style";
|
|
2
|
+
import _ConfigProvider from "antd/lib/config-provider";
|
|
3
|
+
import "antd/lib/button/style";
|
|
4
|
+
import _Button from "antd/lib/button";
|
|
5
|
+
import "antd/lib/input/style";
|
|
6
|
+
import _Input from "antd/lib/input";
|
|
7
|
+
import "antd/lib/select/style";
|
|
8
|
+
import _Select from "antd/lib/select";
|
|
9
|
+
|
|
10
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
11
|
+
|
|
12
|
+
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."); }
|
|
13
|
+
|
|
14
|
+
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); }
|
|
15
|
+
|
|
16
|
+
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; }
|
|
17
|
+
|
|
18
|
+
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; }
|
|
19
|
+
|
|
20
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
21
|
+
|
|
22
|
+
import React, { useState } from 'react';
|
|
23
|
+
import Player from '../Player/single_player';
|
|
24
|
+
import ExtModel from './index';
|
|
25
|
+
var options = [{
|
|
26
|
+
value: '',
|
|
27
|
+
label: '自动'
|
|
28
|
+
}, {
|
|
29
|
+
value: 'flv',
|
|
30
|
+
label: 'FLV'
|
|
31
|
+
}, {
|
|
32
|
+
value: 'hls',
|
|
33
|
+
label: 'HLS'
|
|
34
|
+
}];
|
|
35
|
+
var options2 = [{
|
|
36
|
+
value: 1,
|
|
37
|
+
label: '直播'
|
|
38
|
+
}, {
|
|
39
|
+
value: 0,
|
|
40
|
+
label: '录像'
|
|
41
|
+
}]; //http://192.168.101.162:14088/flv/live/1853e2a5c3308bd62/2.flv?device_id=&channel_id=1853e2a5c3308bd62&stream_index=2&ip=0
|
|
42
|
+
|
|
43
|
+
function Demo() {
|
|
44
|
+
var _useState = useState({
|
|
45
|
+
type: undefined,
|
|
46
|
+
isLive: 1,
|
|
47
|
+
url: '',
|
|
48
|
+
tempUrl: '',
|
|
49
|
+
mode: 1
|
|
50
|
+
}),
|
|
51
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
52
|
+
state = _useState2[0],
|
|
53
|
+
setState = _useState2[1];
|
|
54
|
+
|
|
55
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
56
|
+
style: {
|
|
57
|
+
width: '100%',
|
|
58
|
+
height: 800
|
|
59
|
+
}
|
|
60
|
+
}, /*#__PURE__*/React.createElement("h3", null, "\u63D2\u4EF6\u89C6\u9891\u64AD\u653E"), /*#__PURE__*/React.createElement("div", {
|
|
61
|
+
style: {
|
|
62
|
+
marginBottom: 10,
|
|
63
|
+
display: 'flex'
|
|
64
|
+
}
|
|
65
|
+
}, /*#__PURE__*/React.createElement(_Select, {
|
|
66
|
+
value: state.type || '',
|
|
67
|
+
onChange: function onChange(val) {
|
|
68
|
+
return setState(function (old) {
|
|
69
|
+
return Object.assign(Object.assign({}, old), {
|
|
70
|
+
type: val
|
|
71
|
+
});
|
|
72
|
+
});
|
|
73
|
+
}
|
|
74
|
+
}, options.map(function (v) {
|
|
75
|
+
return /*#__PURE__*/React.createElement(_Select.Option, {
|
|
76
|
+
key: v.label,
|
|
77
|
+
value: v.value
|
|
78
|
+
}, v.label);
|
|
79
|
+
})), /*#__PURE__*/React.createElement(_Input, {
|
|
80
|
+
style: {
|
|
81
|
+
flex: 1,
|
|
82
|
+
height: 32
|
|
83
|
+
},
|
|
84
|
+
type: "text",
|
|
85
|
+
placeholder: "\u8BF7\u8F93\u5165\u89C6\u9891\u5730\u5740",
|
|
86
|
+
onChange: function onChange(e) {
|
|
87
|
+
return setState(function (old) {
|
|
88
|
+
return Object.assign(Object.assign({}, old), {
|
|
89
|
+
tempUrl: e.target.value
|
|
90
|
+
});
|
|
91
|
+
});
|
|
92
|
+
}
|
|
93
|
+
}), /*#__PURE__*/React.createElement(_Select, {
|
|
94
|
+
value: state.isLive,
|
|
95
|
+
onChange: function onChange(val) {
|
|
96
|
+
return setState(function (old) {
|
|
97
|
+
return Object.assign(Object.assign({}, old), {
|
|
98
|
+
isLive: val
|
|
99
|
+
});
|
|
100
|
+
});
|
|
101
|
+
}
|
|
102
|
+
}, options2.map(function (v) {
|
|
103
|
+
return /*#__PURE__*/React.createElement(_Select.Option, {
|
|
104
|
+
key: v.label,
|
|
105
|
+
value: v.value
|
|
106
|
+
}, v.label);
|
|
107
|
+
})), /*#__PURE__*/React.createElement(_Select, {
|
|
108
|
+
value: state.mode,
|
|
109
|
+
onChange: function onChange(val) {
|
|
110
|
+
return setState(function (old) {
|
|
111
|
+
return Object.assign(Object.assign({}, old), {
|
|
112
|
+
mode: val
|
|
113
|
+
});
|
|
114
|
+
});
|
|
115
|
+
}
|
|
116
|
+
}, /*#__PURE__*/React.createElement(_Select.Option, {
|
|
117
|
+
value: 1
|
|
118
|
+
}, "\u6D4F\u89C8\u5668\u6A21\u5F0F"), /*#__PURE__*/React.createElement(_Select.Option, {
|
|
119
|
+
value: 2
|
|
120
|
+
}, "\u63D2\u4EF6\u6A21\u5F0F")), /*#__PURE__*/React.createElement(_Button, {
|
|
121
|
+
style: {
|
|
122
|
+
width: 60,
|
|
123
|
+
height: 32
|
|
124
|
+
},
|
|
125
|
+
onClick: function onClick(e) {
|
|
126
|
+
return setState(function (old) {
|
|
127
|
+
return Object.assign(Object.assign({}, old), {
|
|
128
|
+
url: ''
|
|
129
|
+
});
|
|
130
|
+
});
|
|
131
|
+
}
|
|
132
|
+
}, "\u5173\u95ED"), /*#__PURE__*/React.createElement(_Button, {
|
|
133
|
+
style: {
|
|
134
|
+
width: 60,
|
|
135
|
+
height: 32
|
|
136
|
+
},
|
|
137
|
+
onClick: function onClick(e) {
|
|
138
|
+
return setState(function (old) {
|
|
139
|
+
return Object.assign(Object.assign({}, old), {
|
|
140
|
+
url: state.tempUrl
|
|
141
|
+
});
|
|
142
|
+
});
|
|
143
|
+
}
|
|
144
|
+
}, "\u64AD\u653E")), /*#__PURE__*/React.createElement("div", {
|
|
145
|
+
style: {
|
|
146
|
+
height: 600
|
|
147
|
+
}
|
|
148
|
+
}, /*#__PURE__*/React.createElement(ExtModel, {
|
|
149
|
+
url: state.url,
|
|
150
|
+
mode: state.mode,
|
|
151
|
+
pluginDownloadUrl: "http://192.168.101.162:19999/plugins/ZVPlayer.exe"
|
|
152
|
+
}, /*#__PURE__*/React.createElement(Player, {
|
|
153
|
+
type: state.type,
|
|
154
|
+
url: state.url,
|
|
155
|
+
isLive: !!state.isLive
|
|
156
|
+
}))));
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
var App = function App() {
|
|
160
|
+
return /*#__PURE__*/React.createElement(_ConfigProvider, {
|
|
161
|
+
prefixCls: "cloudapp"
|
|
162
|
+
}, /*#__PURE__*/React.createElement(Demo, null));
|
|
163
|
+
};
|
|
164
|
+
|
|
165
|
+
export default App;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
.lm-player-ext-layput {
|
|
2
|
+
background-color: #000;
|
|
3
|
+
width: 100%;
|
|
4
|
+
height: 100%;
|
|
5
|
+
color: #fff;
|
|
6
|
+
display: flex;
|
|
7
|
+
flex-direction: column;
|
|
8
|
+
align-items: center;
|
|
9
|
+
justify-content: center;
|
|
10
|
+
}
|
|
11
|
+
.lm-player-ext-layput .lm-player-PlaySource {
|
|
12
|
+
font-size: 66px;
|
|
13
|
+
}
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import './index.less';
|
|
3
|
+
export declare type PlayModeType = 1 | 2;
|
|
4
|
+
export interface IPluginProps {
|
|
5
|
+
url?: string;
|
|
6
|
+
children: JSX.Element;
|
|
7
|
+
/**
|
|
8
|
+
* @description 模式1浏览器模式,2插件模式
|
|
9
|
+
* @default 1
|
|
10
|
+
*/
|
|
11
|
+
mode?: PlayModeType;
|
|
12
|
+
/**
|
|
13
|
+
* @description 插件下载地址
|
|
14
|
+
*/
|
|
15
|
+
pluginDownloadUrl?: string;
|
|
16
|
+
/**
|
|
17
|
+
* @description 插件模式下传递的参数 ’&’开头
|
|
18
|
+
* @default ''
|
|
19
|
+
*/
|
|
20
|
+
pluginParams?: string;
|
|
21
|
+
}
|
|
22
|
+
/**
|
|
23
|
+
* 客户端插件模式,随机端口
|
|
24
|
+
*/
|
|
25
|
+
export declare const LOCAL_PORT: string[];
|
|
26
|
+
/**
|
|
27
|
+
* 随机获取端口号
|
|
28
|
+
* @returns
|
|
29
|
+
*/
|
|
30
|
+
export declare function getLocalPort(): string;
|
|
31
|
+
/**
|
|
32
|
+
* @desc 转码插件模式下的url
|
|
33
|
+
* @param url
|
|
34
|
+
* @param params
|
|
35
|
+
* @returns
|
|
36
|
+
*/
|
|
37
|
+
export declare function getLocalPlayPath(url: string, params?: string): string;
|
|
38
|
+
export declare function usePlugin(mode: PlayModeType, key: any): {
|
|
39
|
+
needInstall: boolean;
|
|
40
|
+
};
|
|
41
|
+
export declare function ExtModel({ url, children, mode, pluginDownloadUrl, pluginParams }: IPluginProps): JSX.Element;
|
|
42
|
+
export { ExtModel as default };
|
|
@@ -0,0 +1,145 @@
|
|
|
1
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
2
|
+
|
|
3
|
+
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."); }
|
|
4
|
+
|
|
5
|
+
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); }
|
|
6
|
+
|
|
7
|
+
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; }
|
|
8
|
+
|
|
9
|
+
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; }
|
|
10
|
+
|
|
11
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
12
|
+
|
|
13
|
+
import React, { useEffect, useMemo, useState } from 'react';
|
|
14
|
+
import IconFont from '../Player/iconfont';
|
|
15
|
+
import "./index.css";
|
|
16
|
+
/**
|
|
17
|
+
* 客户端插件模式,随机端口
|
|
18
|
+
*/
|
|
19
|
+
|
|
20
|
+
export var LOCAL_PORT = ['15080', '15081', '15082', '15083', '15084', '15085', '15086', '15087', '15088', '15089'];
|
|
21
|
+
/**
|
|
22
|
+
* 随机获取端口号
|
|
23
|
+
* @returns
|
|
24
|
+
*/
|
|
25
|
+
|
|
26
|
+
export function getLocalPort() {
|
|
27
|
+
return LOCAL_PORT[Math.floor(Math.random() * LOCAL_PORT.length)];
|
|
28
|
+
}
|
|
29
|
+
/**
|
|
30
|
+
* @desc 转码插件模式下的url
|
|
31
|
+
* @param url
|
|
32
|
+
* @param params
|
|
33
|
+
* @returns
|
|
34
|
+
*/
|
|
35
|
+
|
|
36
|
+
export function getLocalPlayPath(url) {
|
|
37
|
+
var params = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
|
|
38
|
+
var URL_TEMPLATE = "http://127.0.0.1:<port>/video/v1/transcoding?uri=<pull_uri>";
|
|
39
|
+
var port = getLocalPort();
|
|
40
|
+
var pull_uri = window.btoa(url).replaceAll('=', '').replaceAll('/', '_').replaceAll('+', '-');
|
|
41
|
+
return URL_TEMPLATE.replace('<port>', port).replace('<pull_uri>', pull_uri) + params;
|
|
42
|
+
}
|
|
43
|
+
export function usePlugin(mode, key) {
|
|
44
|
+
var _useState = useState({
|
|
45
|
+
installed: false
|
|
46
|
+
}),
|
|
47
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
48
|
+
state = _useState2[0],
|
|
49
|
+
setState = _useState2[1];
|
|
50
|
+
|
|
51
|
+
useEffect(function () {
|
|
52
|
+
if (mode !== 2) {
|
|
53
|
+
return undefined;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
var port = getLocalPort();
|
|
57
|
+
var url = "http://127.0.0.1:".concat(port, "/video/v1/state");
|
|
58
|
+
|
|
59
|
+
var thenFn = function thenFn(res) {
|
|
60
|
+
return res.status === 200 ? setState({
|
|
61
|
+
installed: true
|
|
62
|
+
}) : undefined;
|
|
63
|
+
};
|
|
64
|
+
|
|
65
|
+
fetch(url).then(thenFn).catch(function (e) {
|
|
66
|
+
return console.error('插件未安装', e);
|
|
67
|
+
});
|
|
68
|
+
}, [mode, key]);
|
|
69
|
+
return {
|
|
70
|
+
needInstall: useMemo(function () {
|
|
71
|
+
return mode === 2 && !state.installed;
|
|
72
|
+
}, [state.installed, mode])
|
|
73
|
+
};
|
|
74
|
+
}
|
|
75
|
+
export function ExtModel(_ref) {
|
|
76
|
+
var url = _ref.url,
|
|
77
|
+
children = _ref.children,
|
|
78
|
+
mode = _ref.mode,
|
|
79
|
+
pluginDownloadUrl = _ref.pluginDownloadUrl,
|
|
80
|
+
pluginParams = _ref.pluginParams;
|
|
81
|
+
|
|
82
|
+
var _useState3 = useState({
|
|
83
|
+
forceKey: Date.now()
|
|
84
|
+
}),
|
|
85
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
86
|
+
state = _useState4[0],
|
|
87
|
+
setState = _useState4[1];
|
|
88
|
+
|
|
89
|
+
var hasUrl = useMemo(function () {
|
|
90
|
+
return !!url;
|
|
91
|
+
}, [url]);
|
|
92
|
+
|
|
93
|
+
var _usePlugin = usePlugin(mode, state.forceKey),
|
|
94
|
+
needInstall = _usePlugin.needInstall;
|
|
95
|
+
|
|
96
|
+
var playUrl = useMemo(function () {
|
|
97
|
+
return mode === 2 && url ? getLocalPlayPath(url, pluginParams) : url;
|
|
98
|
+
}, [url, mode]);
|
|
99
|
+
|
|
100
|
+
if (needInstall) {
|
|
101
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
102
|
+
className: "lm-player-ext-layput"
|
|
103
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
104
|
+
style: {
|
|
105
|
+
marginTop: -60,
|
|
106
|
+
textAlign: 'center'
|
|
107
|
+
}
|
|
108
|
+
}, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(IconFont, {
|
|
109
|
+
type: "lm-player-PlaySource"
|
|
110
|
+
})), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", null, "\u8BF7", /*#__PURE__*/React.createElement("a", {
|
|
111
|
+
target: "_blank",
|
|
112
|
+
href: pluginDownloadUrl,
|
|
113
|
+
style: {
|
|
114
|
+
textDecoration: 'none',
|
|
115
|
+
padding: '0 4px'
|
|
116
|
+
},
|
|
117
|
+
download: "PlayerPlugin.exe",
|
|
118
|
+
rel: "noopener noreferrer"
|
|
119
|
+
}, "\u4E0B\u8F7D"), "\u64AD\u653E\u63D2\u4EF6\uFF0C"), /*#__PURE__*/React.createElement("span", null, "\u82E5\u5DF2\u5B89\u88C5\u8BF7\u70B9\u51FB", /*#__PURE__*/React.createElement("a", {
|
|
120
|
+
style: {
|
|
121
|
+
padding: '0 4px'
|
|
122
|
+
},
|
|
123
|
+
onClick: function onClick() {
|
|
124
|
+
return setState(function (old) {
|
|
125
|
+
return Object.assign(Object.assign({}, old), {
|
|
126
|
+
forceKey: Date.now()
|
|
127
|
+
});
|
|
128
|
+
});
|
|
129
|
+
}
|
|
130
|
+
}, "\u91CD\u8BD5")))));
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
if (!hasUrl) {
|
|
134
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
135
|
+
className: "lm-player-ext-layput"
|
|
136
|
+
}, /*#__PURE__*/React.createElement(IconFont, {
|
|
137
|
+
type: "lm-player-PlaySource"
|
|
138
|
+
}));
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.cloneElement(children, {
|
|
142
|
+
url: playUrl
|
|
143
|
+
}));
|
|
144
|
+
}
|
|
145
|
+
export { ExtModel as default };
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
/// <reference types="typings/global" />
|
|
2
|
+
import { AxiosRequestConfig, AxiosPromise } from 'axios';
|
|
3
|
+
export interface AxiosFetchRequestConfig extends AxiosRequestConfig<BodyInit> {
|
|
4
|
+
mode?: RequestMode;
|
|
5
|
+
body?: BodyInit;
|
|
6
|
+
cache?: RequestCache;
|
|
7
|
+
integrity?: string;
|
|
8
|
+
redirect?: RequestRedirect;
|
|
9
|
+
referrer?: string;
|
|
10
|
+
credentials?: RequestCredentials;
|
|
11
|
+
}
|
|
12
|
+
export default function fetchAdapter(config: AxiosFetchRequestConfig): AxiosPromise;
|