@cloud-app-dev/vidc 3.2.2 → 3.2.3
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/es/ScreenPlayer/Live.d.ts +1 -1
- package/es/ScreenPlayer/Live.js +48 -24
- package/es/ScreenPlayer/LiveTools.d.ts +2 -1
- package/es/ScreenPlayer/LiveTools.js +23 -25
- package/es/ScreenPlayer/PlayerWithExt.d.ts +2 -2
- package/es/ScreenPlayer/PlayerWithExt.js +22 -26
- package/es/ScreenPlayer/Record.d.ts +1 -1
- package/es/ScreenPlayer/Record.js +58 -33
- package/es/ScreenPlayer/RecordTools.d.ts +2 -1
- package/es/ScreenPlayer/RecordTools.js +32 -37
- package/package.json +1 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import type { ILivePlayerProps } from './interface';
|
|
3
3
|
import './index.less';
|
|
4
|
-
declare function LivePlayer({ list, children,
|
|
4
|
+
declare function LivePlayer({ list, children, oneWinExtTools, allWinExtTools, ...props }: ILivePlayerProps): JSX.Element;
|
|
5
5
|
declare namespace LivePlayer {
|
|
6
6
|
var defaultProps: {
|
|
7
7
|
list: any[];
|
package/es/ScreenPlayer/Live.js
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import _useMemoizedFn from "ahooks/es/useMemoizedFn";
|
|
1
2
|
import _useUpdateEffect from "ahooks/es/useUpdateEffect";
|
|
2
3
|
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
3
4
|
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."); }
|
|
@@ -14,22 +15,15 @@ import useVideoFit from './useVideoFit';
|
|
|
14
15
|
import DisableMark from '../DisableMark';
|
|
15
16
|
import "./index.css";
|
|
16
17
|
function LivePlayer(_a) {
|
|
18
|
+
var _b, _c;
|
|
17
19
|
var list = _a.list,
|
|
18
20
|
children = _a.children,
|
|
19
|
-
onIndexChange = _a.onIndexChange,
|
|
20
|
-
onClose = _a.onClose,
|
|
21
|
-
onCloseAll = _a.onCloseAll,
|
|
22
|
-
snapshot = _a.snapshot,
|
|
23
|
-
defaultScreen = _a.defaultScreen,
|
|
24
|
-
screenChange = _a.screenChange,
|
|
25
|
-
defaultSelectIndex = _a.defaultSelectIndex,
|
|
26
21
|
oneWinExtTools = _a.oneWinExtTools,
|
|
27
22
|
allWinExtTools = _a.allWinExtTools,
|
|
28
|
-
|
|
29
|
-
options = __rest(_a, ["list", "children", "onIndexChange", "onClose", "onCloseAll", "snapshot", "defaultScreen", "screenChange", "defaultSelectIndex", "oneWinExtTools", "allWinExtTools", "pluginDownloadUrl"]);
|
|
23
|
+
props = __rest(_a, ["list", "children", "oneWinExtTools", "allWinExtTools"]);
|
|
30
24
|
var _useState = useState({
|
|
31
|
-
screenNum: defaultScreen !== null &&
|
|
32
|
-
selectIndex: defaultSelectIndex !== null &&
|
|
25
|
+
screenNum: (_b = props.defaultScreen) !== null && _b !== void 0 ? _b : 4,
|
|
26
|
+
selectIndex: (_c = props.defaultSelectIndex) !== null && _c !== void 0 ? _c : 0,
|
|
33
27
|
modes: {}
|
|
34
28
|
}),
|
|
35
29
|
_useState2 = _slicedToArray(_useState, 2),
|
|
@@ -42,8 +36,8 @@ function LivePlayer(_a) {
|
|
|
42
36
|
// 若外部来控制screenNum 则由外部完全控制
|
|
43
37
|
var screenNum = useMemo(function () {
|
|
44
38
|
var _a;
|
|
45
|
-
return (_a =
|
|
46
|
-
}, [
|
|
39
|
+
return (_a = props.screenNum) !== null && _a !== void 0 ? _a : state.screenNum;
|
|
40
|
+
}, [props.screenNum, state.screenNum]);
|
|
47
41
|
// 缓存所有player对象
|
|
48
42
|
var playerRef = useRef({});
|
|
49
43
|
var screenType = useMemo(function () {
|
|
@@ -62,11 +56,12 @@ function LivePlayer(_a) {
|
|
|
62
56
|
};
|
|
63
57
|
// 更新状态
|
|
64
58
|
var updateState = function updateState(newState) {
|
|
59
|
+
var _a;
|
|
65
60
|
var obj = {};
|
|
66
61
|
if (newState.hasOwnProperty('screenNum')) {
|
|
67
|
-
if (
|
|
62
|
+
if (props.screenNum) {
|
|
68
63
|
// 若外部控制,不需要update state
|
|
69
|
-
screenChange === null ||
|
|
64
|
+
(_a = props.screenChange) === null || _a === void 0 ? void 0 : _a.call(props, newState.screenNum);
|
|
70
65
|
} else {
|
|
71
66
|
obj.screenNum = newState.screenNum;
|
|
72
67
|
}
|
|
@@ -93,29 +88,57 @@ function LivePlayer(_a) {
|
|
|
93
88
|
* 同步外部的selectIndex变化
|
|
94
89
|
*/
|
|
95
90
|
useEffect(function () {
|
|
96
|
-
if (typeof defaultSelectIndex !== 'number') {
|
|
91
|
+
if (typeof props.defaultSelectIndex !== 'number') {
|
|
97
92
|
return;
|
|
98
93
|
}
|
|
99
94
|
setState(function (old) {
|
|
100
|
-
if (old.selectIndex !== defaultSelectIndex) {
|
|
95
|
+
if (old.selectIndex !== props.defaultSelectIndex) {
|
|
101
96
|
return Object.assign(Object.assign({}, old), {
|
|
102
|
-
selectIndex: defaultSelectIndex
|
|
97
|
+
selectIndex: props.defaultSelectIndex
|
|
103
98
|
});
|
|
104
99
|
}
|
|
105
100
|
return old;
|
|
106
101
|
});
|
|
107
|
-
}, [defaultSelectIndex]);
|
|
102
|
+
}, [props.defaultSelectIndex]);
|
|
108
103
|
// index变化同步到父组件
|
|
109
104
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
110
105
|
_useUpdateEffect(function () {
|
|
111
|
-
|
|
106
|
+
var _a;
|
|
107
|
+
return (_a = props.onIndexChange) === null || _a === void 0 ? void 0 : _a.call(props, state.selectIndex);
|
|
112
108
|
}, [state.selectIndex]);
|
|
113
109
|
/**
|
|
114
110
|
* 通知screenNum变化
|
|
115
111
|
*/
|
|
116
112
|
_useUpdateEffect(function () {
|
|
117
|
-
|
|
113
|
+
var _a;
|
|
114
|
+
return (_a = props.screenChange) === null || _a === void 0 ? void 0 : _a.call(props, state.screenNum);
|
|
118
115
|
}, [state.screenNum]);
|
|
116
|
+
var onClose = _useMemoizedFn(function () {
|
|
117
|
+
var _a;
|
|
118
|
+
setState(function (old) {
|
|
119
|
+
var item = screenList[old.selectIndex];
|
|
120
|
+
if (item && item.cid) {
|
|
121
|
+
var modes = Object.assign({}, old.modes);
|
|
122
|
+
delete modes["".concat(item.cid)];
|
|
123
|
+
return Object.assign(Object.assign({}, old), {
|
|
124
|
+
modes: modes
|
|
125
|
+
});
|
|
126
|
+
} else {
|
|
127
|
+
return old;
|
|
128
|
+
}
|
|
129
|
+
});
|
|
130
|
+
(_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
|
|
131
|
+
});
|
|
132
|
+
var onCloseAll = _useMemoizedFn(function () {
|
|
133
|
+
var _a;
|
|
134
|
+
setState(function (old) {
|
|
135
|
+
return Object.assign(Object.assign({}, old), {
|
|
136
|
+
modes: {},
|
|
137
|
+
currentTimes: {}
|
|
138
|
+
});
|
|
139
|
+
});
|
|
140
|
+
(_a = props.onCloseAll) === null || _a === void 0 ? void 0 : _a.call(props);
|
|
141
|
+
});
|
|
119
142
|
return /*#__PURE__*/React.createElement("div", {
|
|
120
143
|
className: "split-screen-player-wrapper split-screen-player-live-wrapper"
|
|
121
144
|
}, /*#__PURE__*/React.createElement("div", {
|
|
@@ -141,7 +164,7 @@ function LivePlayer(_a) {
|
|
|
141
164
|
width: screenType.width,
|
|
142
165
|
height: screenType.height
|
|
143
166
|
},
|
|
144
|
-
pluginDownloadUrl: pluginDownloadUrl
|
|
167
|
+
pluginDownloadUrl: props.pluginDownloadUrl
|
|
145
168
|
}));
|
|
146
169
|
})), /*#__PURE__*/React.createElement(DisableMark, {
|
|
147
170
|
disabled: !segmentItem.url,
|
|
@@ -156,9 +179,10 @@ function LivePlayer(_a) {
|
|
|
156
179
|
mode: state.modes[state.selectIndex],
|
|
157
180
|
containerRef: domRef,
|
|
158
181
|
updateState: updateState,
|
|
159
|
-
snapshot: snapshot,
|
|
182
|
+
snapshot: props.snapshot,
|
|
160
183
|
oneWinExtTools: oneWinExtTools,
|
|
161
|
-
allWinExtTools: allWinExtTools
|
|
184
|
+
allWinExtTools: allWinExtTools,
|
|
185
|
+
hasPlugin: !!props.pluginDownloadUrl
|
|
162
186
|
}), children && /*#__PURE__*/React.cloneElement(children, {
|
|
163
187
|
selectIndex: state.selectIndex
|
|
164
188
|
})));
|
|
@@ -23,6 +23,7 @@ interface IToolsProps {
|
|
|
23
23
|
* 全局窗口工具条,右侧
|
|
24
24
|
*/
|
|
25
25
|
allWinExtTools?: JSX.Element;
|
|
26
|
+
hasPlugin?: boolean;
|
|
26
27
|
}
|
|
27
|
-
declare function LiveTools({ containerRef, oneWinExtTools, allWinExtTools,
|
|
28
|
+
declare function LiveTools({ containerRef, oneWinExtTools, allWinExtTools, screenNum, mode, fit, hasPlugin, ...props }: IToolsProps): JSX.Element;
|
|
28
29
|
export default LiveTools;
|
|
@@ -6,25 +6,22 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
|
|
|
6
6
|
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; }
|
|
7
7
|
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; }
|
|
8
8
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
9
|
+
import { __rest } from "tslib";
|
|
9
10
|
import React from 'react';
|
|
10
11
|
import IconFont from '../Player/iconfont';
|
|
11
12
|
import ScreenSelect from './ScreenSelect';
|
|
12
13
|
import useFullscreen from '../useFullscreen';
|
|
13
14
|
import Volume from '../Player/contraller_bar/volume';
|
|
14
|
-
function LiveTools(
|
|
15
|
-
var containerRef =
|
|
16
|
-
oneWinExtTools =
|
|
17
|
-
allWinExtTools =
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
fit = _ref.fit,
|
|
25
|
-
onClose = _ref.onClose,
|
|
26
|
-
onCloseAll = _ref.onCloseAll,
|
|
27
|
-
snapshot = _ref.snapshot;
|
|
15
|
+
function LiveTools(_a) {
|
|
16
|
+
var containerRef = _a.containerRef,
|
|
17
|
+
oneWinExtTools = _a.oneWinExtTools,
|
|
18
|
+
allWinExtTools = _a.allWinExtTools,
|
|
19
|
+
screenNum = _a.screenNum,
|
|
20
|
+
_a$mode = _a.mode,
|
|
21
|
+
mode = _a$mode === void 0 ? 1 : _a$mode,
|
|
22
|
+
fit = _a.fit,
|
|
23
|
+
hasPlugin = _a.hasPlugin,
|
|
24
|
+
props = __rest(_a, ["containerRef", "oneWinExtTools", "allWinExtTools", "screenNum", "mode", "fit", "hasPlugin"]);
|
|
28
25
|
var _useFullscreen = useFullscreen(containerRef),
|
|
29
26
|
_useFullscreen2 = _slicedToArray(_useFullscreen, 2),
|
|
30
27
|
isFullscreen = _useFullscreen2[0],
|
|
@@ -32,22 +29,23 @@ function LiveTools(_ref) {
|
|
|
32
29
|
var update = _useUpdate();
|
|
33
30
|
// 播放状态控制
|
|
34
31
|
var playToggle = function playToggle() {
|
|
35
|
-
var player = getPlayerItem();
|
|
32
|
+
var player = props.getPlayerItem();
|
|
36
33
|
// eslint-disable-next-line @typescript-eslint/no-unused-expressions
|
|
37
34
|
player ? player.video.paused ? player.api.play() : player.api.pause() : undefined;
|
|
38
35
|
update();
|
|
39
36
|
};
|
|
40
37
|
// 重连
|
|
41
38
|
var reload = function reload() {
|
|
42
|
-
var player = getPlayerItem();
|
|
39
|
+
var player = props.getPlayerItem();
|
|
43
40
|
player === null || player === void 0 ? void 0 : player.api.reload();
|
|
44
41
|
};
|
|
45
42
|
var snapshotaction = function snapshotaction() {
|
|
46
|
-
var
|
|
43
|
+
var _a;
|
|
44
|
+
var player = props.getPlayerItem();
|
|
47
45
|
var base64 = player === null || player === void 0 ? void 0 : player.api.snapshot();
|
|
48
|
-
snapshot === null ||
|
|
46
|
+
(_a = props.snapshot) === null || _a === void 0 ? void 0 : _a.call(props, base64);
|
|
49
47
|
};
|
|
50
|
-
var player = getPlayerItem();
|
|
48
|
+
var player = props.getPlayerItem();
|
|
51
49
|
/**
|
|
52
50
|
* 定时获取play状态
|
|
53
51
|
*/
|
|
@@ -74,10 +72,10 @@ function LiveTools(_ref) {
|
|
|
74
72
|
}, /*#__PURE__*/React.createElement(IconFont, {
|
|
75
73
|
type: "lm-player-Refresh_Main",
|
|
76
74
|
title: "\u91CD\u8F7D"
|
|
77
|
-
})), /*#__PURE__*/React.createElement("span", {
|
|
75
|
+
})), hasPlugin && /*#__PURE__*/React.createElement("span", {
|
|
78
76
|
className: "player-tools-item",
|
|
79
77
|
onClick: function onClick() {
|
|
80
|
-
return updateState({
|
|
78
|
+
return props.updateState({
|
|
81
79
|
mode: mode !== 2 ? 2 : 1
|
|
82
80
|
});
|
|
83
81
|
}
|
|
@@ -90,7 +88,7 @@ function LiveTools(_ref) {
|
|
|
90
88
|
title: "\u5207\u6362".concat(mode === 1 ? '插件' : '浏览器', "\u6A21\u5F0F")
|
|
91
89
|
})), /*#__PURE__*/React.createElement("div", {
|
|
92
90
|
className: "player-tools-item",
|
|
93
|
-
onClick: onClose,
|
|
91
|
+
onClick: props.onClose,
|
|
94
92
|
style: {
|
|
95
93
|
marginRight: 6
|
|
96
94
|
}
|
|
@@ -115,16 +113,16 @@ function LiveTools(_ref) {
|
|
|
115
113
|
className: "player-tools-right"
|
|
116
114
|
}, allWinExtTools, /*#__PURE__*/React.createElement("span", {
|
|
117
115
|
className: "player-tools-item",
|
|
118
|
-
onClick: onCloseAll
|
|
116
|
+
onClick: props.onCloseAll
|
|
119
117
|
}, /*#__PURE__*/React.createElement(IconFont, {
|
|
120
118
|
type: "lm-player-quanbuguanbi",
|
|
121
119
|
title: "\u5173\u95ED\u6240\u6709"
|
|
122
120
|
})), /*#__PURE__*/React.createElement(ScreenSelect, {
|
|
123
121
|
screenNum: screenNum,
|
|
124
|
-
updateState: updateState
|
|
122
|
+
updateState: props.updateState
|
|
125
123
|
}), /*#__PURE__*/React.createElement("span", {
|
|
126
124
|
className: "player-tools-item",
|
|
127
|
-
onClick: toggleFit
|
|
125
|
+
onClick: props.toggleFit
|
|
128
126
|
}, fit === 'fill' ? /*#__PURE__*/React.createElement(IconFont, {
|
|
129
127
|
type: "lm-player-huamianshiying",
|
|
130
128
|
title: "\u81EA\u9002\u5E94"
|
|
@@ -16,7 +16,7 @@ interface ISegmentPlayerWithExtProps extends Omit<ILivePlayerWithExtProps, 'url'
|
|
|
16
16
|
fps?: number;
|
|
17
17
|
httpLoading: boolean;
|
|
18
18
|
}
|
|
19
|
-
export declare function SegmentPlayerWithExt({ begin, style, className, segments,
|
|
19
|
+
export declare function SegmentPlayerWithExt({ begin, style, className, segments, mode, fpsDelay, fps, httpLoading, ...props }: ISegmentPlayerWithExtProps): JSX.Element;
|
|
20
20
|
interface IFrontendPlayerWithExtProps extends Omit<ILivePlayerWithExtProps, 'url'> {
|
|
21
21
|
segments?: ISegmentType[];
|
|
22
22
|
begin?: number;
|
|
@@ -27,5 +27,5 @@ interface IFrontendPlayerWithExtProps extends Omit<ILivePlayerWithExtProps, 'url
|
|
|
27
27
|
end: number;
|
|
28
28
|
}) => Promise<string>;
|
|
29
29
|
}
|
|
30
|
-
export declare function FrontendPlayerWithExt({ mode, style, className, segments,
|
|
30
|
+
export declare function FrontendPlayerWithExt({ mode, style, className, segments, pluginDownloadUrl, httpLoading, ...props }: IFrontendPlayerWithExtProps): JSX.Element;
|
|
31
31
|
export {};
|
|
@@ -59,17 +59,15 @@ export function SegmentPlayerWithExt(_a) {
|
|
|
59
59
|
style = _a.style,
|
|
60
60
|
className = _a.className,
|
|
61
61
|
segments = _a.segments,
|
|
62
|
-
updatePlayer = _a.updatePlayer,
|
|
63
|
-
onClick = _a.onClick,
|
|
64
62
|
mode = _a.mode,
|
|
65
63
|
fpsDelay = _a.fpsDelay,
|
|
66
64
|
fps = _a.fps,
|
|
67
65
|
httpLoading = _a.httpLoading,
|
|
68
|
-
props = __rest(_a, ["begin", "style", "className", "segments", "
|
|
66
|
+
props = __rest(_a, ["begin", "style", "className", "segments", "mode", "fpsDelay", "fps", "httpLoading"]);
|
|
69
67
|
var forceUpdate = _useUpdate();
|
|
70
68
|
var ref = useRef();
|
|
71
69
|
var update = function update() {
|
|
72
|
-
updatePlayer(ref);
|
|
70
|
+
props.updatePlayer(ref);
|
|
73
71
|
forceUpdate();
|
|
74
72
|
};
|
|
75
73
|
var _useFullscreen3 = useFullscreen((_b = ref.current) === null || _b === void 0 ? void 0 : _b.container),
|
|
@@ -78,7 +76,7 @@ export function SegmentPlayerWithExt(_a) {
|
|
|
78
76
|
return /*#__PURE__*/React.createElement("div", {
|
|
79
77
|
className: "player-with-ext-layout ".concat(className),
|
|
80
78
|
style: style,
|
|
81
|
-
onClick: onClick,
|
|
79
|
+
onClick: props.onClick,
|
|
82
80
|
onDoubleClick: toggleFullscreen
|
|
83
81
|
}, /*#__PURE__*/React.createElement(ExtModel, {
|
|
84
82
|
mode: 1,
|
|
@@ -96,17 +94,15 @@ export function SegmentPlayerWithExt(_a) {
|
|
|
96
94
|
customTimeLine: /*#__PURE__*/React.createElement(React.Fragment, null)
|
|
97
95
|
}))));
|
|
98
96
|
}
|
|
99
|
-
export function FrontendPlayerWithExt(
|
|
100
|
-
var
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
getLocalRecordUrl = _ref.getLocalRecordUrl;
|
|
109
|
-
var _a;
|
|
97
|
+
export function FrontendPlayerWithExt(_a) {
|
|
98
|
+
var _b;
|
|
99
|
+
var mode = _a.mode,
|
|
100
|
+
style = _a.style,
|
|
101
|
+
className = _a.className,
|
|
102
|
+
segments = _a.segments,
|
|
103
|
+
pluginDownloadUrl = _a.pluginDownloadUrl,
|
|
104
|
+
httpLoading = _a.httpLoading,
|
|
105
|
+
props = __rest(_a, ["mode", "style", "className", "segments", "pluginDownloadUrl", "httpLoading"]);
|
|
110
106
|
var _useState = useState({
|
|
111
107
|
begin: 0,
|
|
112
108
|
end: 0,
|
|
@@ -126,13 +122,13 @@ export function FrontendPlayerWithExt(_ref) {
|
|
|
126
122
|
if (index === -1) {
|
|
127
123
|
return undefined;
|
|
128
124
|
}
|
|
129
|
-
var
|
|
130
|
-
begin =
|
|
131
|
-
end =
|
|
125
|
+
var _ref = [segments[0].beginTime, segments[segments.length - 1].endTime],
|
|
126
|
+
begin = _ref[0],
|
|
127
|
+
end = _ref[1];
|
|
132
128
|
var videoUrl = new URL(segments[index].url);
|
|
133
129
|
var url;
|
|
134
|
-
if (getLocalRecordUrl) {
|
|
135
|
-
getLocalRecordUrl({
|
|
130
|
+
if (props.getLocalRecordUrl) {
|
|
131
|
+
props.getLocalRecordUrl({
|
|
136
132
|
url: videoUrl,
|
|
137
133
|
begin: moment(begin).unix(),
|
|
138
134
|
end: moment(end).unix()
|
|
@@ -162,8 +158,8 @@ export function FrontendPlayerWithExt(_ref) {
|
|
|
162
158
|
var end = moment().unix();
|
|
163
159
|
var begin = moment(time).unix();
|
|
164
160
|
var videoUrl = new URL(latestUrl.current);
|
|
165
|
-
if (getLocalRecordUrl) {
|
|
166
|
-
getLocalRecordUrl({
|
|
161
|
+
if (props.getLocalRecordUrl) {
|
|
162
|
+
props.getLocalRecordUrl({
|
|
167
163
|
url: videoUrl,
|
|
168
164
|
begin: begin,
|
|
169
165
|
end: end
|
|
@@ -188,16 +184,16 @@ export function FrontendPlayerWithExt(_ref) {
|
|
|
188
184
|
var forceUpdate = _useUpdate();
|
|
189
185
|
var ref = useRef();
|
|
190
186
|
var update = _useMemoizedFn(function () {
|
|
191
|
-
updatePlayer(ref);
|
|
187
|
+
props.updatePlayer(ref);
|
|
192
188
|
forceUpdate();
|
|
193
189
|
});
|
|
194
|
-
var _useFullscreen5 = useFullscreen((
|
|
190
|
+
var _useFullscreen5 = useFullscreen((_b = ref.current) === null || _b === void 0 ? void 0 : _b.container),
|
|
195
191
|
_useFullscreen6 = _slicedToArray(_useFullscreen5, 2),
|
|
196
192
|
toggleFullscreen = _useFullscreen6[1].toggleFullscreen;
|
|
197
193
|
return /*#__PURE__*/React.createElement("div", {
|
|
198
194
|
className: "player-with-ext-layout ".concat(className),
|
|
199
195
|
style: style,
|
|
200
|
-
onClick: onClick,
|
|
196
|
+
onClick: props.onClick,
|
|
201
197
|
onDoubleClick: toggleFullscreen
|
|
202
198
|
}, /*#__PURE__*/React.createElement(ExtModel, {
|
|
203
199
|
url: state.url,
|
|
@@ -6,5 +6,5 @@ import './index.less';
|
|
|
6
6
|
* @param param0
|
|
7
7
|
* @returns
|
|
8
8
|
*/
|
|
9
|
-
declare function RecordPlayer({ list, children,
|
|
9
|
+
declare function RecordPlayer({ list, children, oneWinExtTools, allWinExtTools, fpsDelay, fps, seekLoading, ...props }: IRecordPlayerProps): JSX.Element;
|
|
10
10
|
export default RecordPlayer;
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
|
|
2
|
+
import _useMemoizedFn from "ahooks/es/useMemoizedFn";
|
|
2
3
|
import _useUpdateEffect from "ahooks/es/useUpdateEffect";
|
|
3
4
|
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
4
5
|
function _regeneratorRuntime() { "use strict"; /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return exports; }; var exports = {}, Op = Object.prototype, hasOwn = Op.hasOwnProperty, $Symbol = "function" == typeof Symbol ? Symbol : {}, iteratorSymbol = $Symbol.iterator || "@@iterator", asyncIteratorSymbol = $Symbol.asyncIterator || "@@asyncIterator", toStringTagSymbol = $Symbol.toStringTag || "@@toStringTag"; function define(obj, key, value) { return Object.defineProperty(obj, key, { value: value, enumerable: !0, configurable: !0, writable: !0 }), obj[key]; } try { define({}, ""); } catch (err) { define = function define(obj, key, value) { return obj[key] = value; }; } function wrap(innerFn, outerFn, self, tryLocsList) { var protoGenerator = outerFn && outerFn.prototype instanceof Generator ? outerFn : Generator, generator = Object.create(protoGenerator.prototype), context = new Context(tryLocsList || []); return generator._invoke = function (innerFn, self, context) { var state = "suspendedStart"; return function (method, arg) { if ("executing" === state) throw new Error("Generator is already running"); if ("completed" === state) { if ("throw" === method) throw arg; return doneResult(); } for (context.method = method, context.arg = arg;;) { var delegate = context.delegate; if (delegate) { var delegateResult = maybeInvokeDelegate(delegate, context); if (delegateResult) { if (delegateResult === ContinueSentinel) continue; return delegateResult; } } if ("next" === context.method) context.sent = context._sent = context.arg;else if ("throw" === context.method) { if ("suspendedStart" === state) throw state = "completed", context.arg; context.dispatchException(context.arg); } else "return" === context.method && context.abrupt("return", context.arg); state = "executing"; var record = tryCatch(innerFn, self, context); if ("normal" === record.type) { if (state = context.done ? "completed" : "suspendedYield", record.arg === ContinueSentinel) continue; return { value: record.arg, done: context.done }; } "throw" === record.type && (state = "completed", context.method = "throw", context.arg = record.arg); } }; }(innerFn, self, context), generator; } function tryCatch(fn, obj, arg) { try { return { type: "normal", arg: fn.call(obj, arg) }; } catch (err) { return { type: "throw", arg: err }; } } exports.wrap = wrap; var ContinueSentinel = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var IteratorPrototype = {}; define(IteratorPrototype, iteratorSymbol, function () { return this; }); var getProto = Object.getPrototypeOf, NativeIteratorPrototype = getProto && getProto(getProto(values([]))); NativeIteratorPrototype && NativeIteratorPrototype !== Op && hasOwn.call(NativeIteratorPrototype, iteratorSymbol) && (IteratorPrototype = NativeIteratorPrototype); var Gp = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(IteratorPrototype); function defineIteratorMethods(prototype) { ["next", "throw", "return"].forEach(function (method) { define(prototype, method, function (arg) { return this._invoke(method, arg); }); }); } function AsyncIterator(generator, PromiseImpl) { function invoke(method, arg, resolve, reject) { var record = tryCatch(generator[method], generator, arg); if ("throw" !== record.type) { var result = record.arg, value = result.value; return value && "object" == _typeof(value) && hasOwn.call(value, "__await") ? PromiseImpl.resolve(value.__await).then(function (value) { invoke("next", value, resolve, reject); }, function (err) { invoke("throw", err, resolve, reject); }) : PromiseImpl.resolve(value).then(function (unwrapped) { result.value = unwrapped, resolve(result); }, function (error) { return invoke("throw", error, resolve, reject); }); } reject(record.arg); } var previousPromise; this._invoke = function (method, arg) { function callInvokeWithMethodAndArg() { return new PromiseImpl(function (resolve, reject) { invoke(method, arg, resolve, reject); }); } return previousPromise = previousPromise ? previousPromise.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); }; } function maybeInvokeDelegate(delegate, context) { var method = delegate.iterator[context.method]; if (undefined === method) { if (context.delegate = null, "throw" === context.method) { if (delegate.iterator.return && (context.method = "return", context.arg = undefined, maybeInvokeDelegate(delegate, context), "throw" === context.method)) return ContinueSentinel; context.method = "throw", context.arg = new TypeError("The iterator does not provide a 'throw' method"); } return ContinueSentinel; } var record = tryCatch(method, delegate.iterator, context.arg); if ("throw" === record.type) return context.method = "throw", context.arg = record.arg, context.delegate = null, ContinueSentinel; var info = record.arg; return info ? info.done ? (context[delegate.resultName] = info.value, context.next = delegate.nextLoc, "return" !== context.method && (context.method = "next", context.arg = undefined), context.delegate = null, ContinueSentinel) : info : (context.method = "throw", context.arg = new TypeError("iterator result is not an object"), context.delegate = null, ContinueSentinel); } function pushTryEntry(locs) { var entry = { tryLoc: locs[0] }; 1 in locs && (entry.catchLoc = locs[1]), 2 in locs && (entry.finallyLoc = locs[2], entry.afterLoc = locs[3]), this.tryEntries.push(entry); } function resetTryEntry(entry) { var record = entry.completion || {}; record.type = "normal", delete record.arg, entry.completion = record; } function Context(tryLocsList) { this.tryEntries = [{ tryLoc: "root" }], tryLocsList.forEach(pushTryEntry, this), this.reset(!0); } function values(iterable) { if (iterable) { var iteratorMethod = iterable[iteratorSymbol]; if (iteratorMethod) return iteratorMethod.call(iterable); if ("function" == typeof iterable.next) return iterable; if (!isNaN(iterable.length)) { var i = -1, next = function next() { for (; ++i < iterable.length;) { if (hasOwn.call(iterable, i)) return next.value = iterable[i], next.done = !1, next; } return next.value = undefined, next.done = !0, next; }; return next.next = next; } } return { next: doneResult }; } function doneResult() { return { value: undefined, done: !0 }; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, define(Gp, "constructor", GeneratorFunctionPrototype), define(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, toStringTagSymbol, "GeneratorFunction"), exports.isGeneratorFunction = function (genFun) { var ctor = "function" == typeof genFun && genFun.constructor; return !!ctor && (ctor === GeneratorFunction || "GeneratorFunction" === (ctor.displayName || ctor.name)); }, exports.mark = function (genFun) { return Object.setPrototypeOf ? Object.setPrototypeOf(genFun, GeneratorFunctionPrototype) : (genFun.__proto__ = GeneratorFunctionPrototype, define(genFun, toStringTagSymbol, "GeneratorFunction")), genFun.prototype = Object.create(Gp), genFun; }, exports.awrap = function (arg) { return { __await: arg }; }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, asyncIteratorSymbol, function () { return this; }), exports.AsyncIterator = AsyncIterator, exports.async = function (innerFn, outerFn, self, tryLocsList, PromiseImpl) { void 0 === PromiseImpl && (PromiseImpl = Promise); var iter = new AsyncIterator(wrap(innerFn, outerFn, self, tryLocsList), PromiseImpl); return exports.isGeneratorFunction(outerFn) ? iter : iter.next().then(function (result) { return result.done ? result.value : iter.next(); }); }, defineIteratorMethods(Gp), define(Gp, toStringTagSymbol, "Generator"), define(Gp, iteratorSymbol, function () { return this; }), define(Gp, "toString", function () { return "[object Generator]"; }), exports.keys = function (object) { var keys = []; for (var key in object) { keys.push(key); } return keys.reverse(), function next() { for (; keys.length;) { var key = keys.pop(); if (key in object) return next.value = key, next.done = !1, next; } return next.done = !0, next; }; }, exports.values = values, Context.prototype = { constructor: Context, reset: function reset(skipTempReset) { if (this.prev = 0, this.next = 0, this.sent = this._sent = undefined, this.done = !1, this.delegate = null, this.method = "next", this.arg = undefined, this.tryEntries.forEach(resetTryEntry), !skipTempReset) for (var name in this) { "t" === name.charAt(0) && hasOwn.call(this, name) && !isNaN(+name.slice(1)) && (this[name] = undefined); } }, stop: function stop() { this.done = !0; var rootRecord = this.tryEntries[0].completion; if ("throw" === rootRecord.type) throw rootRecord.arg; return this.rval; }, dispatchException: function dispatchException(exception) { if (this.done) throw exception; var context = this; function handle(loc, caught) { return record.type = "throw", record.arg = exception, context.next = loc, caught && (context.method = "next", context.arg = undefined), !!caught; } for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i], record = entry.completion; if ("root" === entry.tryLoc) return handle("end"); if (entry.tryLoc <= this.prev) { var hasCatch = hasOwn.call(entry, "catchLoc"), hasFinally = hasOwn.call(entry, "finallyLoc"); if (hasCatch && hasFinally) { if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0); if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc); } else if (hasCatch) { if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0); } else { if (!hasFinally) throw new Error("try statement without catch or finally"); if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc); } } } }, abrupt: function abrupt(type, arg) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.tryLoc <= this.prev && hasOwn.call(entry, "finallyLoc") && this.prev < entry.finallyLoc) { var finallyEntry = entry; break; } } finallyEntry && ("break" === type || "continue" === type) && finallyEntry.tryLoc <= arg && arg <= finallyEntry.finallyLoc && (finallyEntry = null); var record = finallyEntry ? finallyEntry.completion : {}; return record.type = type, record.arg = arg, finallyEntry ? (this.method = "next", this.next = finallyEntry.finallyLoc, ContinueSentinel) : this.complete(record); }, complete: function complete(record, afterLoc) { if ("throw" === record.type) throw record.arg; return "break" === record.type || "continue" === record.type ? this.next = record.arg : "return" === record.type ? (this.rval = this.arg = record.arg, this.method = "return", this.next = "end") : "normal" === record.type && afterLoc && (this.next = afterLoc), ContinueSentinel; }, finish: function finish(finallyLoc) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.finallyLoc === finallyLoc) return this.complete(entry.completion, entry.afterLoc), resetTryEntry(entry), ContinueSentinel; } }, catch: function _catch(tryLoc) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.tryLoc === tryLoc) { var record = entry.completion; if ("throw" === record.type) { var thrown = record.arg; resetTryEntry(entry); } return thrown; } } throw new Error("illegal catch attempt"); }, delegateYield: function delegateYield(iterable, resultName, nextLoc) { return this.delegate = { iterator: values(iterable), resultName: resultName, nextLoc: nextLoc }, "next" === this.method && (this.arg = undefined), ContinueSentinel; } }, exports; }
|
|
@@ -33,27 +34,17 @@ var defaultState = {
|
|
|
33
34
|
*/
|
|
34
35
|
function RecordPlayer(_a) {
|
|
35
36
|
var _this = this;
|
|
37
|
+
var _b;
|
|
36
38
|
var list = _a.list,
|
|
37
39
|
children = _a.children,
|
|
38
|
-
onIndexChange = _a.onIndexChange,
|
|
39
|
-
onClose = _a.onClose,
|
|
40
|
-
onCloseAll = _a.onCloseAll,
|
|
41
|
-
download = _a.download,
|
|
42
|
-
snapshot = _a.snapshot,
|
|
43
|
-
defaultScreen = _a.defaultScreen,
|
|
44
|
-
screenChange = _a.screenChange,
|
|
45
|
-
defaultSelectIndex = _a.defaultSelectIndex,
|
|
46
40
|
oneWinExtTools = _a.oneWinExtTools,
|
|
47
41
|
allWinExtTools = _a.allWinExtTools,
|
|
48
42
|
fpsDelay = _a.fpsDelay,
|
|
49
43
|
fps = _a.fps,
|
|
50
|
-
getLocalRecordUrl = _a.getLocalRecordUrl,
|
|
51
|
-
pluginDownloadUrl = _a.pluginDownloadUrl,
|
|
52
|
-
onTimeLineChange = _a.onTimeLineChange,
|
|
53
44
|
seekLoading = _a.seekLoading,
|
|
54
|
-
|
|
45
|
+
props = __rest(_a, ["list", "children", "oneWinExtTools", "allWinExtTools", "fpsDelay", "fps", "seekLoading"]);
|
|
55
46
|
var _useState = useState(Object.assign(Object.assign({}, cloneDeep(defaultState)), {
|
|
56
|
-
screenNum: defaultScreen !== null &&
|
|
47
|
+
screenNum: (_b = props.defaultScreen) !== null && _b !== void 0 ? _b : defaultState.screenNum
|
|
57
48
|
})),
|
|
58
49
|
_useState2 = _slicedToArray(_useState, 2),
|
|
59
50
|
state = _useState2[0],
|
|
@@ -61,8 +52,8 @@ function RecordPlayer(_a) {
|
|
|
61
52
|
// 若外部来控制screenNum 则由外部完全控制
|
|
62
53
|
var screenNum = useMemo(function () {
|
|
63
54
|
var _a;
|
|
64
|
-
return (_a =
|
|
65
|
-
}, [
|
|
55
|
+
return (_a = props.screenNum) !== null && _a !== void 0 ? _a : state.screenNum;
|
|
56
|
+
}, [props.screenNum, state.screenNum]);
|
|
66
57
|
var domRef = useRef(null);
|
|
67
58
|
var screenType = useMemo(function () {
|
|
68
59
|
return ScreenType.find(function (v) {
|
|
@@ -123,7 +114,7 @@ function RecordPlayer(_a) {
|
|
|
123
114
|
if (index === -1) {
|
|
124
115
|
return;
|
|
125
116
|
}
|
|
126
|
-
// list变化导致ref被销毁,这里设计了一个处理机制,1s内重试5次,尝试获取新的ref
|
|
117
|
+
// list变化导致ref被销毁,这里设计了一个处理机制,1s内重试5次,尝试获取新的ref,播放器初始化很快正常情况下都会获取到,还未获取到那么丢弃
|
|
127
118
|
var timer = 0;
|
|
128
119
|
function getPlay(mapkey) {
|
|
129
120
|
var _a;
|
|
@@ -152,7 +143,7 @@ function RecordPlayer(_a) {
|
|
|
152
143
|
return getPlay(mapkey);
|
|
153
144
|
}));
|
|
154
145
|
case 10:
|
|
155
|
-
return _context.abrupt("return",
|
|
146
|
+
return _context.abrupt("return", Promise.reject('seek执行失败!'));
|
|
156
147
|
case 11:
|
|
157
148
|
case "end":
|
|
158
149
|
return _context.stop();
|
|
@@ -173,11 +164,12 @@ function RecordPlayer(_a) {
|
|
|
173
164
|
}, [state.seekTo, list]);
|
|
174
165
|
// 更新状态
|
|
175
166
|
var updateState = function updateState(newState) {
|
|
167
|
+
var _a;
|
|
176
168
|
var obj = {};
|
|
177
169
|
if (newState.hasOwnProperty('screenNum')) {
|
|
178
|
-
if (
|
|
170
|
+
if (props.screenNum) {
|
|
179
171
|
// 若外部控制,不需要update state
|
|
180
|
-
screenChange === null ||
|
|
172
|
+
(_a = props.screenChange) === null || _a === void 0 ? void 0 : _a.call(props, newState.screenNum);
|
|
181
173
|
} else {
|
|
182
174
|
obj.screenNum = newState.screenNum;
|
|
183
175
|
}
|
|
@@ -206,7 +198,7 @@ function RecordPlayer(_a) {
|
|
|
206
198
|
*/
|
|
207
199
|
var onTimeChange = useCallback(function (time, outTimeline) {
|
|
208
200
|
return __awaiter(_this, void 0, void 0, /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
|
|
209
|
-
var index;
|
|
201
|
+
var _c, index;
|
|
210
202
|
return _regeneratorRuntime().wrap(function _callee2$(_context2) {
|
|
211
203
|
while (1) {
|
|
212
204
|
switch (_context2.prev = _context2.next) {
|
|
@@ -237,7 +229,7 @@ function RecordPlayer(_a) {
|
|
|
237
229
|
});
|
|
238
230
|
if (index === -1) {
|
|
239
231
|
// 触发回调
|
|
240
|
-
onTimeLineChange === null ||
|
|
232
|
+
(_c = props.onTimeLineChange) === null || _c === void 0 ? void 0 : _c.call(props, time);
|
|
241
233
|
}
|
|
242
234
|
//更新time
|
|
243
235
|
setState(function (old) {
|
|
@@ -270,29 +262,61 @@ function RecordPlayer(_a) {
|
|
|
270
262
|
* 同步外部的selectIndex变化
|
|
271
263
|
*/
|
|
272
264
|
useEffect(function () {
|
|
273
|
-
if (typeof defaultSelectIndex !== 'number') {
|
|
265
|
+
if (typeof props.defaultSelectIndex !== 'number') {
|
|
274
266
|
return;
|
|
275
267
|
}
|
|
276
268
|
setState(function (old) {
|
|
277
|
-
if (old.selectIndex !== defaultSelectIndex) {
|
|
269
|
+
if (old.selectIndex !== props.defaultSelectIndex) {
|
|
278
270
|
return Object.assign(Object.assign({}, old), {
|
|
279
|
-
selectIndex: defaultSelectIndex
|
|
271
|
+
selectIndex: props.defaultSelectIndex
|
|
280
272
|
});
|
|
281
273
|
}
|
|
282
274
|
return old;
|
|
283
275
|
});
|
|
284
|
-
}, [defaultSelectIndex]);
|
|
276
|
+
}, [props.defaultSelectIndex]);
|
|
285
277
|
// index变化同步到父组件
|
|
286
278
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
287
279
|
_useUpdateEffect(function () {
|
|
288
|
-
|
|
280
|
+
var _a;
|
|
281
|
+
return (_a = props.onIndexChange) === null || _a === void 0 ? void 0 : _a.call(props, state.selectIndex);
|
|
289
282
|
}, [state.selectIndex]);
|
|
290
283
|
/**
|
|
291
284
|
* 通知screenNum变化
|
|
292
285
|
*/
|
|
293
286
|
_useUpdateEffect(function () {
|
|
294
|
-
|
|
287
|
+
var _a;
|
|
288
|
+
return (_a = props.screenChange) === null || _a === void 0 ? void 0 : _a.call(props, state.screenNum);
|
|
295
289
|
}, [state.screenNum]);
|
|
290
|
+
var onClose = _useMemoizedFn(function () {
|
|
291
|
+
var _a;
|
|
292
|
+
setState(function (old) {
|
|
293
|
+
var item = screenList[old.selectIndex];
|
|
294
|
+
if (item && item.cid && item.date) {
|
|
295
|
+
var key = "".concat(item.cid, "-").concat(item.date);
|
|
296
|
+
var currentTimes = Object.assign({}, old.currentTimes);
|
|
297
|
+
var modes = Object.assign({}, old.modes);
|
|
298
|
+
delete currentTimes[key];
|
|
299
|
+
delete modes[key];
|
|
300
|
+
return Object.assign(Object.assign({}, old), {
|
|
301
|
+
currentTimes: currentTimes,
|
|
302
|
+
modes: modes
|
|
303
|
+
});
|
|
304
|
+
} else {
|
|
305
|
+
return old;
|
|
306
|
+
}
|
|
307
|
+
});
|
|
308
|
+
(_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
|
|
309
|
+
});
|
|
310
|
+
var onCloseAll = _useMemoizedFn(function () {
|
|
311
|
+
var _a;
|
|
312
|
+
setState(function (old) {
|
|
313
|
+
return Object.assign(Object.assign({}, old), {
|
|
314
|
+
modes: {},
|
|
315
|
+
currentTimes: {}
|
|
316
|
+
});
|
|
317
|
+
});
|
|
318
|
+
(_a = props.onCloseAll) === null || _a === void 0 ? void 0 : _a.call(props);
|
|
319
|
+
});
|
|
296
320
|
return /*#__PURE__*/React.createElement("div", {
|
|
297
321
|
className: "split-screen-player-wrapper split-screen-player-wrapper-record"
|
|
298
322
|
}, /*#__PURE__*/React.createElement("div", {
|
|
@@ -342,8 +366,8 @@ function RecordPlayer(_a) {
|
|
|
342
366
|
height: screenType.height
|
|
343
367
|
},
|
|
344
368
|
httpLoading: item.loading,
|
|
345
|
-
getLocalRecordUrl: getLocalRecordUrl,
|
|
346
|
-
pluginDownloadUrl: pluginDownloadUrl
|
|
369
|
+
getLocalRecordUrl: props.getLocalRecordUrl,
|
|
370
|
+
pluginDownloadUrl: props.pluginDownloadUrl
|
|
347
371
|
}));
|
|
348
372
|
})), /*#__PURE__*/React.createElement("div", {
|
|
349
373
|
className: "player-tools-group"
|
|
@@ -363,13 +387,14 @@ function RecordPlayer(_a) {
|
|
|
363
387
|
onClose: onClose,
|
|
364
388
|
onCloseAll: onCloseAll,
|
|
365
389
|
timeMode: state.timeMode,
|
|
366
|
-
download: download ? function () {
|
|
390
|
+
download: props.download ? function () {
|
|
367
391
|
var _a;
|
|
368
|
-
return download((_a = segmentItem.segments) !== null && _a !== void 0 ? _a : []);
|
|
392
|
+
return props.download((_a = segmentItem.segments) !== null && _a !== void 0 ? _a : []);
|
|
369
393
|
} : undefined,
|
|
370
|
-
snapshot: snapshot,
|
|
394
|
+
snapshot: props.snapshot,
|
|
371
395
|
oneWinExtTools: oneWinExtTools,
|
|
372
|
-
allWinExtTools: allWinExtTools
|
|
396
|
+
allWinExtTools: allWinExtTools,
|
|
397
|
+
hasPlugin: !!props.pluginDownloadUrl
|
|
373
398
|
})), /*#__PURE__*/React.createElement(DisableMark, {
|
|
374
399
|
disabled: !segmentItem.cid
|
|
375
400
|
}, /*#__PURE__*/React.createElement(SegmentTimeLine, {
|
|
@@ -28,6 +28,7 @@ interface IToolsProps {
|
|
|
28
28
|
* 全局窗口工具条,右侧
|
|
29
29
|
*/
|
|
30
30
|
allWinExtTools?: JSX.Element;
|
|
31
|
+
hasPlugin?: boolean;
|
|
31
32
|
}
|
|
32
|
-
declare function RecordTools({ containerRef,
|
|
33
|
+
declare function RecordTools({ containerRef, screenNum, timeMode, mode, fit, time, oneWinExtTools, allWinExtTools, hasPlugin, ...props }: IToolsProps): JSX.Element;
|
|
33
34
|
export default RecordTools;
|
|
@@ -8,33 +8,27 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
|
|
|
8
8
|
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; }
|
|
9
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
10
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
11
|
+
import { __rest } from "tslib";
|
|
11
12
|
import React from 'react';
|
|
12
13
|
import IconFont from '../Player/iconfont';
|
|
13
14
|
import ScreenSelect from './ScreenSelect';
|
|
14
15
|
import TimeSelect from './TimeSelect';
|
|
15
|
-
// import TimeMode from './TimeMode';
|
|
16
16
|
import useFullscreen from '../useFullscreen';
|
|
17
17
|
import Volume from '../Player/contraller_bar/volume';
|
|
18
18
|
import RatePick from './RatePick';
|
|
19
|
-
function RecordTools(
|
|
20
|
-
var
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
onClose = _ref.onClose,
|
|
33
|
-
onCloseAll = _ref.onCloseAll,
|
|
34
|
-
snapshot = _ref.snapshot,
|
|
35
|
-
oneWinExtTools = _ref.oneWinExtTools,
|
|
36
|
-
allWinExtTools = _ref.allWinExtTools;
|
|
37
|
-
var _a, _b, _c;
|
|
19
|
+
function RecordTools(_a) {
|
|
20
|
+
var _b, _c, _d;
|
|
21
|
+
var containerRef = _a.containerRef,
|
|
22
|
+
screenNum = _a.screenNum,
|
|
23
|
+
timeMode = _a.timeMode,
|
|
24
|
+
_a$mode = _a.mode,
|
|
25
|
+
mode = _a$mode === void 0 ? 1 : _a$mode,
|
|
26
|
+
fit = _a.fit,
|
|
27
|
+
time = _a.time,
|
|
28
|
+
oneWinExtTools = _a.oneWinExtTools,
|
|
29
|
+
allWinExtTools = _a.allWinExtTools,
|
|
30
|
+
hasPlugin = _a.hasPlugin,
|
|
31
|
+
props = __rest(_a, ["containerRef", "screenNum", "timeMode", "mode", "fit", "time", "oneWinExtTools", "allWinExtTools", "hasPlugin"]);
|
|
38
32
|
var _useFullscreen = useFullscreen(containerRef),
|
|
39
33
|
_useFullscreen2 = _slicedToArray(_useFullscreen, 2),
|
|
40
34
|
isFullscreen = _useFullscreen2[0],
|
|
@@ -46,29 +40,30 @@ function RecordTools(_ref) {
|
|
|
46
40
|
var update = _useUpdate();
|
|
47
41
|
// 播放状态控制
|
|
48
42
|
var playToggle = function playToggle() {
|
|
49
|
-
var player = getPlayerItem();
|
|
43
|
+
var player = props.getPlayerItem();
|
|
50
44
|
// eslint-disable-next-line @typescript-eslint/no-unused-expressions
|
|
51
45
|
player ? player.video.paused ? player.api.play() : player.api.pause() : undefined;
|
|
52
46
|
update();
|
|
53
47
|
};
|
|
54
48
|
// 重连
|
|
55
49
|
var reload = function reload() {
|
|
56
|
-
var player = getPlayerItem();
|
|
50
|
+
var player = props.getPlayerItem();
|
|
57
51
|
// eslint-disable-next-line @typescript-eslint/no-unused-expressions
|
|
58
52
|
player ? player.reload ? player.reload() : player.api.reload() : undefined;
|
|
59
53
|
};
|
|
60
54
|
var snapshotaction = function snapshotaction() {
|
|
61
|
-
var
|
|
62
|
-
|
|
55
|
+
var _a;
|
|
56
|
+
var player = props.getPlayerItem();
|
|
57
|
+
(_a = props.snapshot) === null || _a === void 0 ? void 0 : _a.call(props, player === null || player === void 0 ? void 0 : player.api.snapshot());
|
|
63
58
|
};
|
|
64
59
|
var ratechange = function ratechange(value) {
|
|
65
|
-
var player = getPlayerItem();
|
|
60
|
+
var player = props.getPlayerItem();
|
|
66
61
|
player === null || player === void 0 ? void 0 : player.api.setPlaybackRate(value);
|
|
67
62
|
update();
|
|
68
63
|
};
|
|
69
|
-
var player = getPlayerItem();
|
|
64
|
+
var player = props.getPlayerItem();
|
|
70
65
|
_useUpdateEffect(function () {
|
|
71
|
-
var player = getPlayerItem();
|
|
66
|
+
var player = props.getPlayerItem();
|
|
72
67
|
isFpsPlay ? player.api.openFpsPlay() : player.api.closeFpsPlay();
|
|
73
68
|
}, [isFpsPlay]);
|
|
74
69
|
/**
|
|
@@ -99,14 +94,14 @@ function RecordTools(_ref) {
|
|
|
99
94
|
title: "\u91CD\u8F7D"
|
|
100
95
|
})), /*#__PURE__*/React.createElement("span", {
|
|
101
96
|
className: "player-tools-item",
|
|
102
|
-
onClick: download
|
|
97
|
+
onClick: props.download
|
|
103
98
|
}, /*#__PURE__*/React.createElement(IconFont, {
|
|
104
99
|
type: "lm-player-xiazai",
|
|
105
100
|
title: "\u4E0B\u8F7D\u5F53\u524D\u5F55\u50CF"
|
|
106
|
-
})), /*#__PURE__*/React.createElement("span", {
|
|
101
|
+
})), hasPlugin && /*#__PURE__*/React.createElement("span", {
|
|
107
102
|
className: "player-tools-item",
|
|
108
103
|
onClick: function onClick() {
|
|
109
|
-
return updateState({
|
|
104
|
+
return props.updateState({
|
|
110
105
|
mode: mode !== 2 ? 2 : 1
|
|
111
106
|
});
|
|
112
107
|
}
|
|
@@ -128,12 +123,12 @@ function RecordTools(_ref) {
|
|
|
128
123
|
title: "\u9010\u5E27\u64AD\u653E"
|
|
129
124
|
})), /*#__PURE__*/React.createElement(RatePick, {
|
|
130
125
|
onChange: ratechange,
|
|
131
|
-
value: (
|
|
126
|
+
value: (_c = (_b = player === null || player === void 0 ? void 0 : player.video) === null || _b === void 0 ? void 0 : _b.playbackRate) !== null && _c !== void 0 ? _c : 1
|
|
132
127
|
}), oneWinExtTools), /*#__PURE__*/React.createElement("div", {
|
|
133
128
|
className: "player-tools-mid"
|
|
134
129
|
}, /*#__PURE__*/React.createElement("div", {
|
|
135
130
|
className: "player-tools-item",
|
|
136
|
-
onClick: onClose
|
|
131
|
+
onClick: props.onClose
|
|
137
132
|
}, /*#__PURE__*/React.createElement(IconFont, {
|
|
138
133
|
type: "lm-player-tingzhi",
|
|
139
134
|
title: "\u505C\u6B62",
|
|
@@ -142,11 +137,11 @@ function RecordTools(_ref) {
|
|
|
142
137
|
}
|
|
143
138
|
})), /*#__PURE__*/React.createElement(TimeSelect, {
|
|
144
139
|
time: time,
|
|
145
|
-
onChange: onTimeChange
|
|
140
|
+
onChange: props.onTimeChange
|
|
146
141
|
}), /*#__PURE__*/React.createElement("div", {
|
|
147
142
|
className: "player-tools-item",
|
|
148
143
|
onClick: playToggle
|
|
149
|
-
}, player && !((
|
|
144
|
+
}, player && !((_d = player.video) === null || _d === void 0 ? void 0 : _d.paused) ? /*#__PURE__*/React.createElement(IconFont, {
|
|
150
145
|
type: "lm-player-Pause_Main",
|
|
151
146
|
title: "\u6682\u505C",
|
|
152
147
|
style: {
|
|
@@ -159,13 +154,13 @@ function RecordTools(_ref) {
|
|
|
159
154
|
className: "player-tools-right"
|
|
160
155
|
}, allWinExtTools, /*#__PURE__*/React.createElement("span", {
|
|
161
156
|
className: "player-tools-item",
|
|
162
|
-
onClick: onCloseAll
|
|
157
|
+
onClick: props.onCloseAll
|
|
163
158
|
}, /*#__PURE__*/React.createElement(IconFont, {
|
|
164
159
|
type: "lm-player-quanbuguanbi",
|
|
165
160
|
title: "\u5173\u95ED\u6240\u6709"
|
|
166
161
|
})), /*#__PURE__*/React.createElement("span", {
|
|
167
162
|
className: "player-tools-item",
|
|
168
|
-
onClick: toggleFit
|
|
163
|
+
onClick: props.toggleFit
|
|
169
164
|
}, fit === 'fill' ? /*#__PURE__*/React.createElement(IconFont, {
|
|
170
165
|
type: "lm-player-huamianshiying",
|
|
171
166
|
title: "\u81EA\u9002\u5E94"
|
|
@@ -174,7 +169,7 @@ function RecordTools(_ref) {
|
|
|
174
169
|
title: "\u586B\u5145"
|
|
175
170
|
})), /*#__PURE__*/React.createElement(ScreenSelect, {
|
|
176
171
|
screenNum: screenNum,
|
|
177
|
-
updateState: updateState
|
|
172
|
+
updateState: props.updateState
|
|
178
173
|
}), /*#__PURE__*/React.createElement("span", {
|
|
179
174
|
className: "player-tools-item",
|
|
180
175
|
onClick: toggleFullscreen
|