@cloud-app-dev/vidc 3.0.2 → 3.0.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 +12 -7
- package/es/Drawer/index.css +1 -0
- package/es/LoaderApp/utils.d.ts +1 -1
- package/es/Map/AMap.d.ts +6841 -1308
- package/es/Map/BasicMap/AMapInstance.d.ts +4 -3
- package/es/Map/BasicMap/AMapInstance.js +18 -3
- package/es/Map/BasicMap/LeafletInstance.d.ts +3 -3
- package/es/Map/ClusterLayer/hook.d.ts +4 -4
- package/es/Map/ClusterLayer/hook.js +20 -24
- package/es/Map/ClusterLayer/index.d.ts +1 -0
- package/es/Map/ClusterLayer/index.js +1 -0
- package/es/Map/Config/utils.js +2 -2
- package/es/Map/InfoWindow/MakerLikeWindow.d.ts +4 -0
- package/es/Map/InfoWindow/MakerLikeWindow.js +103 -0
- package/es/Map/InfoWindow/demo.js +48 -21
- package/es/Map/InfoWindow/index.d.ts +7 -5
- package/es/Map/InfoWindow/index.js +7 -6
- package/es/Map/interface.d.ts +1 -1
- package/es/Map/useMarker/index.d.ts +2 -2
- package/es/Map/useMarker/index.js +3 -19
- package/es/Player/demo.js +4 -3
- package/es/Player/event/errorEvent.js +3 -8
- package/es/Player/frontend_player.js +6 -12
- package/es/Player/iconfont.d.ts +1 -1
- package/es/Player/iconfont.js +1 -1
- package/es/Player/segment_player.js +46 -7
- package/es/Player/single_player.d.ts +2 -2
- package/es/Player/single_player.js +7 -2
- package/es/Player/style/iconfont.ttf +0 -0
- package/es/Player/style/iconfont.woff +0 -0
- package/es/Player/style/iconfont.woff2 +0 -0
- package/es/ScreenPlayer/Live.js +9 -1
- package/es/ScreenPlayer/LiveTools.d.ts +3 -1
- package/es/ScreenPlayer/LiveTools.js +83 -43
- package/es/ScreenPlayer/PlayerWithExt.js +37 -6
- package/es/ScreenPlayer/Record.d.ts +5 -0
- package/es/ScreenPlayer/Record.js +21 -19
- package/es/ScreenPlayer/RecordTools.d.ts +3 -1
- package/es/ScreenPlayer/RecordTools.js +99 -46
- package/es/ScreenPlayer/ScreenSelect.d.ts +7 -0
- package/es/ScreenPlayer/ScreenSelect.js +28 -0
- package/es/ScreenPlayer/SegmentTimeLine.js +8 -2
- package/es/ScreenPlayer/TimeSelect.d.ts +7 -0
- package/es/ScreenPlayer/TimeSelect.js +129 -0
- package/es/ScreenPlayer/TimeSlider.js +12 -10
- package/es/ScreenPlayer/demo.d.ts +1 -1
- package/es/ScreenPlayer/demo.js +7 -3
- package/es/ScreenPlayer/demo2.js +1 -1
- package/es/ScreenPlayer/index.css +58 -1
- package/es/ScreenPlayer/useVideoFit.d.ts +1 -1
- package/es/ScreenPlayer/useVideoFit.js +4 -2
- package/es/Timeout/index.d.ts +8 -9
- package/es/Timeout/index.js +17 -23
- package/package.json +1 -1
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import _useUpdate from "ahooks/es/useUpdate";
|
|
2
|
+
import _useLatest from "ahooks/es/useLatest";
|
|
2
3
|
|
|
3
4
|
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
|
|
4
5
|
|
|
@@ -138,6 +139,15 @@ function SegmentPlayer(_a) {
|
|
|
138
139
|
customTimeLine = _a.customTimeLine,
|
|
139
140
|
props = __rest(_a, ["segments", "begin", "forwordRef", "defaultIndex", "onCanPlayerInit", "customTimeLine"]);
|
|
140
141
|
|
|
142
|
+
var _useState3 = useState({
|
|
143
|
+
seekTime: 0
|
|
144
|
+
}),
|
|
145
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
146
|
+
state = _useState4[0],
|
|
147
|
+
setState = _useState4[1];
|
|
148
|
+
|
|
149
|
+
var latestSegmentsRef = _useLatest(segments);
|
|
150
|
+
|
|
141
151
|
var update = _useUpdate();
|
|
142
152
|
|
|
143
153
|
var ref = useRef(null);
|
|
@@ -160,22 +170,50 @@ function SegmentPlayer(_a) {
|
|
|
160
170
|
setIndex = _usePlayIndex.setIndex;
|
|
161
171
|
|
|
162
172
|
var url = useMemo(function () {
|
|
163
|
-
return segments
|
|
173
|
+
return segments[index] ? segments[index].url : undefined;
|
|
164
174
|
}, [segments, index]); // 重置reload
|
|
165
175
|
|
|
166
176
|
var reload = function reload() {
|
|
167
177
|
playRef.current.event.emit(Events.RELOAD);
|
|
168
178
|
setIndex(0);
|
|
169
179
|
playRef.current.api.reload();
|
|
170
|
-
}; //
|
|
180
|
+
}; // time 毫秒的时间戳
|
|
181
|
+
|
|
182
|
+
|
|
183
|
+
var seekTo = function seekTo(time) {
|
|
184
|
+
var index = latestSegmentsRef.current.findIndex(function (v) {
|
|
185
|
+
return time >= v.beginTime && time < v.endTime;
|
|
186
|
+
});
|
|
187
|
+
|
|
188
|
+
if (index === -1) {
|
|
189
|
+
return;
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
var currentTime = time - latestSegmentsRef.current[index].beginTime;
|
|
193
|
+
setIndex(index);
|
|
194
|
+
setState(function (old) {
|
|
195
|
+
return Object.assign(Object.assign({}, old), {
|
|
196
|
+
seekTime: currentTime / 1000
|
|
197
|
+
});
|
|
198
|
+
});
|
|
199
|
+
}; // 处理seek 后index变化后 cuurenttime变化的过程
|
|
171
200
|
|
|
172
201
|
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
202
|
+
useEffect(function () {
|
|
203
|
+
if (state.seekTime === 0) {
|
|
204
|
+
return;
|
|
205
|
+
}
|
|
206
|
+
|
|
207
|
+
setState(function (old) {
|
|
208
|
+
return Object.assign(Object.assign({}, old), {
|
|
209
|
+
seekTime: 0
|
|
210
|
+
});
|
|
211
|
+
});
|
|
212
|
+
playRef.current.video.currentTime = state.seekTime; // eslint-disable-next-line react-hooks/exhaustive-deps
|
|
213
|
+
}, [state.seekTime]);
|
|
176
214
|
var hasReady = api && event;
|
|
177
215
|
var timeline = customTimeLine !== null && customTimeLine !== void 0 ? customTimeLine : /*#__PURE__*/React.createElement(SegmentTimeLine, {
|
|
178
|
-
begin:
|
|
216
|
+
begin: begin,
|
|
179
217
|
api: api,
|
|
180
218
|
event: event,
|
|
181
219
|
index: index,
|
|
@@ -193,7 +231,8 @@ function SegmentPlayer(_a) {
|
|
|
193
231
|
onCanPlayerInit: onInit,
|
|
194
232
|
reload: reload,
|
|
195
233
|
extActions: {
|
|
196
|
-
setIndex: setIndex
|
|
234
|
+
setIndex: setIndex,
|
|
235
|
+
seekTo: seekTo
|
|
197
236
|
},
|
|
198
237
|
customTimeLine: hasReady ? timeline : /*#__PURE__*/React.createElement(React.Fragment, null)
|
|
199
238
|
}, props));
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { ISinglePlayerProps, ExportPlayerType } from './player';
|
|
3
3
|
import './style/index.less';
|
|
4
|
-
declare const
|
|
5
|
-
export default
|
|
4
|
+
declare const SinglePlayer: React.ForwardRefExoticComponent<ISinglePlayerProps & React.RefAttributes<ExportPlayerType>>;
|
|
5
|
+
export default SinglePlayer;
|
|
@@ -16,6 +16,7 @@ import { __rest } from "tslib";
|
|
|
16
16
|
import React, { useEffect, useMemo, useRef, useState, useImperativeHandle } from 'react';
|
|
17
17
|
import { usePlayerApi } from './api';
|
|
18
18
|
import { usePlayerEvent, useRegisterPlayerEvents, useVideoEvents } from './event';
|
|
19
|
+
import EventName from './event/eventName';
|
|
19
20
|
import ContrallerBar from './contraller_bar';
|
|
20
21
|
import ContrallerEvent from './contraller_bar/contraller_event';
|
|
21
22
|
import LiveHeart from './live_heart';
|
|
@@ -99,7 +100,11 @@ var SinglePlayer = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
99
100
|
container: domRef.current
|
|
100
101
|
});
|
|
101
102
|
});
|
|
102
|
-
}, []); //
|
|
103
|
+
}, []); // url 变化清理错误次数
|
|
104
|
+
|
|
105
|
+
useEffect(function () {
|
|
106
|
+
event && event.emit(EventName.CLEAR_ERROR_TIMER); // eslint-disable-next-line react-hooks/exhaustive-deps
|
|
107
|
+
}, [url]); // 特殊接口实现 reload是可能被重写的,但是API只暴露原生的方法
|
|
103
108
|
|
|
104
109
|
var reload = function reload() {
|
|
105
110
|
return playReload(video, event, flv, hls, url);
|
|
@@ -228,4 +233,4 @@ SinglePlayer.defaultProps = {
|
|
|
228
233
|
hlsConfig: {},
|
|
229
234
|
extActions: {}
|
|
230
235
|
};
|
|
231
|
-
export default
|
|
236
|
+
export default SinglePlayer;
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
package/es/ScreenPlayer/Live.js
CHANGED
|
@@ -14,6 +14,7 @@ import React, { useMemo, useRef, useState } from 'react';
|
|
|
14
14
|
import { ScreenType, mergeFill } from './utils';
|
|
15
15
|
import { LivePlayerWithExt } from './PlayerWithExt';
|
|
16
16
|
import Tools from './LiveTools';
|
|
17
|
+
import useVideoFit from './useVideoFit';
|
|
17
18
|
import "./index.css";
|
|
18
19
|
|
|
19
20
|
function LivePlayer(_ref) {
|
|
@@ -30,7 +31,12 @@ function LivePlayer(_ref) {
|
|
|
30
31
|
state = _useState2[0],
|
|
31
32
|
setState = _useState2[1];
|
|
32
33
|
|
|
33
|
-
var domRef = useRef(null);
|
|
34
|
+
var domRef = useRef(null);
|
|
35
|
+
|
|
36
|
+
var _useVideoFit = useVideoFit(domRef, []),
|
|
37
|
+
fit = _useVideoFit.fit,
|
|
38
|
+
toggleFit = _useVideoFit.toggleFit; // 缓存所有player对象
|
|
39
|
+
|
|
34
40
|
|
|
35
41
|
var playerRef = useRef([]);
|
|
36
42
|
var screenType = useMemo(function () {
|
|
@@ -96,6 +102,8 @@ function LivePlayer(_ref) {
|
|
|
96
102
|
}
|
|
97
103
|
}));
|
|
98
104
|
})), /*#__PURE__*/React.createElement(Tools, {
|
|
105
|
+
fit: fit,
|
|
106
|
+
toggleFit: toggleFit,
|
|
99
107
|
getPlayerItem: getPlayerItem,
|
|
100
108
|
screenNum: state.screenNum,
|
|
101
109
|
mode: state.mode,
|
|
@@ -10,6 +10,8 @@ interface IToolsProps {
|
|
|
10
10
|
screenNum: number;
|
|
11
11
|
mode: PlayModeType;
|
|
12
12
|
getPlayerItem: () => ExportPlayerType | undefined;
|
|
13
|
+
fit?: string;
|
|
14
|
+
toggleFit?: () => void;
|
|
13
15
|
}
|
|
14
|
-
declare function LiveTools({ containerRef, updateState, screenNum, getPlayerItem, mode }: IToolsProps): JSX.Element;
|
|
16
|
+
declare function LiveTools({ containerRef, updateState, screenNum, getPlayerItem, mode, toggleFit, fit }: IToolsProps): JSX.Element;
|
|
15
17
|
export default LiveTools;
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import _useUpdate from "ahooks/es/useUpdate";
|
|
1
2
|
import _useFullscreen3 from "ahooks/es/useFullscreen";
|
|
2
3
|
|
|
3
4
|
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
@@ -13,29 +14,37 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
|
|
|
13
14
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
14
15
|
|
|
15
16
|
import React from 'react';
|
|
16
|
-
import
|
|
17
|
+
import IconFont from '../Player/iconfont';
|
|
18
|
+
import ScreenSelect from './ScreenSelect';
|
|
17
19
|
|
|
18
20
|
function LiveTools(_ref) {
|
|
19
21
|
var containerRef = _ref.containerRef,
|
|
20
22
|
updateState = _ref.updateState,
|
|
21
23
|
screenNum = _ref.screenNum,
|
|
22
24
|
getPlayerItem = _ref.getPlayerItem,
|
|
23
|
-
mode = _ref.mode
|
|
25
|
+
mode = _ref.mode,
|
|
26
|
+
toggleFit = _ref.toggleFit,
|
|
27
|
+
fit = _ref.fit;
|
|
24
28
|
|
|
25
29
|
var _useFullscreen = _useFullscreen3(containerRef),
|
|
26
30
|
_useFullscreen2 = _slicedToArray(_useFullscreen, 2),
|
|
27
31
|
isFullscreen = _useFullscreen2[0],
|
|
28
|
-
toggleFullscreen = _useFullscreen2[1].toggleFullscreen;
|
|
32
|
+
toggleFullscreen = _useFullscreen2[1].toggleFullscreen;
|
|
33
|
+
|
|
34
|
+
var update = _useUpdate(); // 播放状态控制
|
|
29
35
|
|
|
30
36
|
|
|
31
37
|
var playToggle = function playToggle() {
|
|
32
|
-
var player = getPlayerItem();
|
|
38
|
+
var player = getPlayerItem(); // eslint-disable-next-line @typescript-eslint/no-unused-expressions
|
|
39
|
+
|
|
33
40
|
player ? player.video.paused ? player.api.play() : player.api.pause() : undefined;
|
|
41
|
+
update();
|
|
34
42
|
}; // 重连
|
|
35
43
|
|
|
36
44
|
|
|
37
45
|
var reload = function reload() {
|
|
38
|
-
var player = getPlayerItem();
|
|
46
|
+
var player = getPlayerItem(); // eslint-disable-next-line @typescript-eslint/no-unused-expressions
|
|
47
|
+
|
|
39
48
|
player ? player.reload ? player.reload() : player.api.reload() : undefined;
|
|
40
49
|
};
|
|
41
50
|
|
|
@@ -44,52 +53,83 @@ function LiveTools(_ref) {
|
|
|
44
53
|
return player ? player.api.snapshot() : undefined;
|
|
45
54
|
};
|
|
46
55
|
|
|
56
|
+
var player = getPlayerItem();
|
|
47
57
|
return /*#__PURE__*/React.createElement("div", {
|
|
48
58
|
className: "player-tools"
|
|
49
59
|
}, /*#__PURE__*/React.createElement("div", {
|
|
50
|
-
className: "
|
|
51
|
-
},
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
60
|
+
className: "player-tools-left"
|
|
61
|
+
}, /*#__PURE__*/React.createElement("span", {
|
|
62
|
+
className: "player-tools-item"
|
|
63
|
+
}, /*#__PURE__*/React.createElement(IconFont, {
|
|
64
|
+
type: "lm-player-volume-close",
|
|
65
|
+
title: "\u97F3\u91CF"
|
|
66
|
+
})), /*#__PURE__*/React.createElement("span", {
|
|
67
|
+
className: "player-tools-item"
|
|
68
|
+
}, /*#__PURE__*/React.createElement(IconFont, {
|
|
69
|
+
type: "lm-player-xiangji1fill",
|
|
70
|
+
title: "\u622A\u56FE",
|
|
71
|
+
onClick: snapshot
|
|
72
|
+
})), /*#__PURE__*/React.createElement("span", {
|
|
73
|
+
className: "player-tools-item",
|
|
74
|
+
onClick: reload
|
|
75
|
+
}, /*#__PURE__*/React.createElement(IconFont, {
|
|
76
|
+
type: "lm-player-Refresh_Main",
|
|
77
|
+
title: "\u91CD\u8F7D"
|
|
78
|
+
})), /*#__PURE__*/React.createElement("span", {
|
|
79
|
+
className: "player-tools-item"
|
|
80
|
+
}, /*#__PURE__*/React.createElement(IconFont, {
|
|
81
|
+
type: "lm-player-YesorNo_No_Dark",
|
|
82
|
+
title: "\u5173\u95ED\u5F53\u524D"
|
|
83
|
+
}))), /*#__PURE__*/React.createElement("div", {
|
|
84
|
+
className: "player-tools-mid"
|
|
85
|
+
}, /*#__PURE__*/React.createElement("span", {
|
|
86
|
+
className: "player-tools-item",
|
|
87
|
+
onClick: playToggle
|
|
88
|
+
}, player && !player.video.paused ? /*#__PURE__*/React.createElement(IconFont, {
|
|
89
|
+
type: "lm-player-Pause_Main",
|
|
90
|
+
title: "\u6682\u505C"
|
|
91
|
+
}) : /*#__PURE__*/React.createElement(IconFont, {
|
|
92
|
+
type: "lm-player-Play_Main",
|
|
93
|
+
title: "\u64AD\u653E"
|
|
94
|
+
}))), /*#__PURE__*/React.createElement("div", {
|
|
95
|
+
className: "player-tools-right"
|
|
96
|
+
}, /*#__PURE__*/React.createElement("span", {
|
|
97
|
+
className: "player-tools-item"
|
|
98
|
+
}, /*#__PURE__*/React.createElement(IconFont, {
|
|
99
|
+
type: "lm-player-YesorNo_No_Dark",
|
|
100
|
+
title: "\u5173\u95ED\u6240\u6709"
|
|
101
|
+
})), /*#__PURE__*/React.createElement("span", {
|
|
102
|
+
className: "player-tools-item",
|
|
72
103
|
onClick: function onClick() {
|
|
73
104
|
return updateState({
|
|
74
105
|
mode: mode === 1 ? 2 : 1
|
|
75
106
|
});
|
|
76
107
|
}
|
|
77
|
-
},
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
}, "
|
|
108
|
+
}, /*#__PURE__*/React.createElement(IconFont, {
|
|
109
|
+
type: "lm-player-YesorNo_No_Dark",
|
|
110
|
+
title: "\u5207\u6362".concat(mode === 1 ? '插件' : '浏览器', "\u6A21\u5F0F")
|
|
111
|
+
})), /*#__PURE__*/React.createElement("span", {
|
|
112
|
+
className: "player-tools-item",
|
|
113
|
+
onClick: toggleFit
|
|
114
|
+
}, fit === 'fill' ? /*#__PURE__*/React.createElement(IconFont, {
|
|
115
|
+
type: "lm-player-S_View_ScreenSizeFull",
|
|
116
|
+
title: "\u81EA\u9002\u5E94"
|
|
117
|
+
}) : /*#__PURE__*/React.createElement(IconFont, {
|
|
118
|
+
type: "lm-player-S_View_ScreenSizeFull",
|
|
119
|
+
title: "\u586B\u5145"
|
|
120
|
+
})), /*#__PURE__*/React.createElement(ScreenSelect, {
|
|
121
|
+
screenNum: screenNum,
|
|
122
|
+
updateState: updateState
|
|
123
|
+
}), /*#__PURE__*/React.createElement("span", {
|
|
124
|
+
className: "player-tools-item",
|
|
125
|
+
onClick: toggleFullscreen
|
|
126
|
+
}, isFullscreen ? /*#__PURE__*/React.createElement(IconFont, {
|
|
127
|
+
type: "lm-player-ExitFull_Main",
|
|
128
|
+
title: "\u5168\u5C4F"
|
|
129
|
+
}) : /*#__PURE__*/React.createElement(IconFont, {
|
|
130
|
+
type: "lm-player-Full_Main",
|
|
131
|
+
title: "\u5168\u5C4F"
|
|
132
|
+
}))));
|
|
93
133
|
}
|
|
94
134
|
|
|
95
135
|
export default LiveTools;
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
import _useFullscreen3 from "ahooks/es/useFullscreen";
|
|
2
|
+
|
|
1
3
|
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
2
4
|
|
|
3
5
|
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."); }
|
|
@@ -16,7 +18,10 @@ import LivePlayer from '../Player/single_player';
|
|
|
16
18
|
import SegmentPlayer from '../Player/segment_player';
|
|
17
19
|
import FrontendPlayer from '../Player/frontend_player';
|
|
18
20
|
import ExtModel from '../PlayerExt';
|
|
21
|
+
import moment from 'moment';
|
|
19
22
|
export function LivePlayerWithExt(_a) {
|
|
23
|
+
var _b;
|
|
24
|
+
|
|
20
25
|
var mode = _a.mode,
|
|
21
26
|
isLive = _a.isLive,
|
|
22
27
|
url = _a.url,
|
|
@@ -32,10 +37,16 @@ export function LivePlayerWithExt(_a) {
|
|
|
32
37
|
var update = useCallback(function () {
|
|
33
38
|
return updatePlayer(ref);
|
|
34
39
|
}, [updatePlayer]);
|
|
40
|
+
|
|
41
|
+
var _useFullscreen = _useFullscreen3((_b = ref.current) === null || _b === void 0 ? void 0 : _b.container),
|
|
42
|
+
_useFullscreen2 = _slicedToArray(_useFullscreen, 2),
|
|
43
|
+
toggleFullscreen = _useFullscreen2[1].toggleFullscreen;
|
|
44
|
+
|
|
35
45
|
return /*#__PURE__*/React.createElement("div", {
|
|
36
46
|
className: "player-with-ext-layout ".concat(className),
|
|
37
47
|
style: style,
|
|
38
|
-
onClick: onClick
|
|
48
|
+
onClick: onClick,
|
|
49
|
+
onDoubleClick: toggleFullscreen
|
|
39
50
|
}, /*#__PURE__*/React.createElement(ExtModel, {
|
|
40
51
|
url: url,
|
|
41
52
|
mode: mode,
|
|
@@ -50,6 +61,8 @@ export function LivePlayerWithExt(_a) {
|
|
|
50
61
|
}))));
|
|
51
62
|
}
|
|
52
63
|
export function SegmentPlayerWithExt(_a) {
|
|
64
|
+
var _b;
|
|
65
|
+
|
|
53
66
|
var begin = _a.begin,
|
|
54
67
|
style = _a.style,
|
|
55
68
|
className = _a.className,
|
|
@@ -62,10 +75,16 @@ export function SegmentPlayerWithExt(_a) {
|
|
|
62
75
|
var update = useCallback(function () {
|
|
63
76
|
return updatePlayer(ref);
|
|
64
77
|
}, [updatePlayer]);
|
|
78
|
+
|
|
79
|
+
var _useFullscreen4 = _useFullscreen3((_b = ref.current) === null || _b === void 0 ? void 0 : _b.container),
|
|
80
|
+
_useFullscreen5 = _slicedToArray(_useFullscreen4, 2),
|
|
81
|
+
toggleFullscreen = _useFullscreen5[1].toggleFullscreen;
|
|
82
|
+
|
|
65
83
|
return /*#__PURE__*/React.createElement("div", {
|
|
66
84
|
className: "player-with-ext-layout ".concat(className),
|
|
67
85
|
style: style,
|
|
68
|
-
onClick: onClick
|
|
86
|
+
onClick: onClick,
|
|
87
|
+
onDoubleClick: toggleFullscreen
|
|
69
88
|
}, /*#__PURE__*/React.createElement(ExtModel, {
|
|
70
89
|
segments: segments,
|
|
71
90
|
mode: 1
|
|
@@ -89,6 +108,8 @@ export function FrontendPlayerWithExt(_ref) {
|
|
|
89
108
|
onClick = _ref.onClick,
|
|
90
109
|
pluginDownloadUrl = _ref.pluginDownloadUrl;
|
|
91
110
|
|
|
111
|
+
var _a;
|
|
112
|
+
|
|
92
113
|
var _useState = useState({
|
|
93
114
|
begin: 0,
|
|
94
115
|
end: 0,
|
|
@@ -107,7 +128,8 @@ export function FrontendPlayerWithExt(_ref) {
|
|
|
107
128
|
begin = _ref2[0],
|
|
108
129
|
end = _ref2[1];
|
|
109
130
|
var videoUrl = new URL(segments[0].url);
|
|
110
|
-
videoUrl.searchParams.set('begin', "".concat(begin));
|
|
131
|
+
videoUrl.searchParams.set('begin', "".concat(moment(begin).unix()));
|
|
132
|
+
videoUrl.searchParams.set('end', "".concat(moment(end).unix()));
|
|
111
133
|
setState({
|
|
112
134
|
begin: begin,
|
|
113
135
|
end: end,
|
|
@@ -119,22 +141,31 @@ export function FrontendPlayerWithExt(_ref) {
|
|
|
119
141
|
return;
|
|
120
142
|
}
|
|
121
143
|
|
|
144
|
+
var endTime = moment(segments[segments.length - 1].endTime).unix();
|
|
145
|
+
var beginTime = moment(time).unix();
|
|
122
146
|
var videoUrl = new URL(state.url);
|
|
123
|
-
videoUrl.searchParams.set('begin', "".concat(
|
|
147
|
+
videoUrl.searchParams.set('begin', "".concat(beginTime));
|
|
148
|
+
videoUrl.searchParams.set('end', "".concat(endTime));
|
|
124
149
|
setState(function (old) {
|
|
125
150
|
return Object.assign(Object.assign({}, old), {
|
|
126
151
|
url: videoUrl.toString()
|
|
127
152
|
});
|
|
128
153
|
});
|
|
129
|
-
}, [state.url]);
|
|
154
|
+
}, [segments, state.url]);
|
|
130
155
|
var ref = useRef();
|
|
131
156
|
var update = useCallback(function () {
|
|
132
157
|
return updatePlayer(ref);
|
|
133
158
|
}, [updatePlayer]);
|
|
159
|
+
|
|
160
|
+
var _useFullscreen6 = _useFullscreen3((_a = ref.current) === null || _a === void 0 ? void 0 : _a.container),
|
|
161
|
+
_useFullscreen7 = _slicedToArray(_useFullscreen6, 2),
|
|
162
|
+
toggleFullscreen = _useFullscreen7[1].toggleFullscreen;
|
|
163
|
+
|
|
134
164
|
return /*#__PURE__*/React.createElement("div", {
|
|
135
165
|
className: "player-with-ext-layout ".concat(className),
|
|
136
166
|
style: style,
|
|
137
|
-
onClick: onClick
|
|
167
|
+
onClick: onClick,
|
|
168
|
+
onDoubleClick: toggleFullscreen
|
|
138
169
|
}, /*#__PURE__*/React.createElement(ExtModel, {
|
|
139
170
|
segments: segments,
|
|
140
171
|
mode: mode,
|
|
@@ -1,5 +1,10 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import type { IRecordPlayerProps } from './interface';
|
|
3
3
|
import './index.less';
|
|
4
|
+
/**
|
|
5
|
+
* @desc 录像设计的时间全部需要到毫秒
|
|
6
|
+
* @param param0
|
|
7
|
+
* @returns
|
|
8
|
+
*/
|
|
4
9
|
declare function RecordPlayer({ list, children, queryRecord, onIndexChange }: IRecordPlayerProps): JSX.Element;
|
|
5
10
|
export default RecordPlayer;
|
|
@@ -1,6 +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
2
|
|
|
3
|
-
import _nextTick from "@cloud-app-dev/utils/es/nextTick";
|
|
4
3
|
import _usePrevious from "ahooks/es/usePrevious";
|
|
5
4
|
|
|
6
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; }
|
|
@@ -34,6 +33,11 @@ import SegmentTimeLine from './SegmentTimeLine';
|
|
|
34
33
|
import useRecordList from './useRecordList';
|
|
35
34
|
import useVideoFit from './useVideoFit';
|
|
36
35
|
import "./index.css";
|
|
36
|
+
/**
|
|
37
|
+
* @desc 录像设计的时间全部需要到毫秒
|
|
38
|
+
* @param param0
|
|
39
|
+
* @returns
|
|
40
|
+
*/
|
|
37
41
|
|
|
38
42
|
function RecordPlayer(_ref) {
|
|
39
43
|
var _this = this;
|
|
@@ -176,20 +180,8 @@ function RecordPlayer(_ref) {
|
|
|
176
180
|
seekTo: 0
|
|
177
181
|
});
|
|
178
182
|
});
|
|
179
|
-
var play = getPlayerItem();
|
|
180
|
-
|
|
181
|
-
if (segmentItem.recordType === 2) {
|
|
182
|
-
play.api.seekTo(Math.round(state.seekTo / 1000));
|
|
183
|
-
} else {
|
|
184
|
-
// 云录像seek处理
|
|
185
|
-
var seekTime = state.seekTo - item.segments[index].beginTime;
|
|
186
|
-
play.api.setIndex(index);
|
|
187
|
-
|
|
188
|
-
_nextTick(function () {
|
|
189
|
-
return play.api.seekTo(seekTime / 1000);
|
|
190
|
-
});
|
|
191
|
-
} // eslint-disable-next-line react-hooks/exhaustive-deps
|
|
192
|
-
|
|
183
|
+
var play = getPlayerItem();
|
|
184
|
+
play.api.seekTo(state.seekTo); // eslint-disable-next-line react-hooks/exhaustive-deps
|
|
193
185
|
}, [state.seekTo, state.selectIndex, recordList, segmentItem.recordType]); // 更新状态
|
|
194
186
|
|
|
195
187
|
var updateState = function updateState(newState) {
|
|
@@ -286,9 +278,17 @@ function RecordPlayer(_ref) {
|
|
|
286
278
|
}, _callee);
|
|
287
279
|
}));
|
|
288
280
|
}, // eslint-disable-next-line react-hooks/exhaustive-deps
|
|
289
|
-
[segmentItem.cid, segmentItem.recordType, segmentItem.segments, state.loading]);
|
|
281
|
+
[segmentItem.cid, segmentItem.recordType, segmentItem.segments, state.loading]);
|
|
282
|
+
|
|
283
|
+
var _updatePlayer = function updatePlayer(player, index) {
|
|
284
|
+
playerRef.current[index] = player;
|
|
285
|
+
setState(function (old) {
|
|
286
|
+
return Object.assign({}, old);
|
|
287
|
+
});
|
|
288
|
+
}; // index变化同步到父组件
|
|
290
289
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
291
290
|
|
|
291
|
+
|
|
292
292
|
useEffect(function () {
|
|
293
293
|
return onIndexChange(state.selectIndex);
|
|
294
294
|
}, [state.selectIndex]);
|
|
@@ -305,7 +305,7 @@ function RecordPlayer(_ref) {
|
|
|
305
305
|
key: "".concat((_b = item === null || item === void 0 ? void 0 : item.date) !== null && _b !== void 0 ? _b : '', "-").concat((_c = item.cid) !== null && _c !== void 0 ? _c : '', "-").concat(index),
|
|
306
306
|
className: state.selectIndex === index ? 'player-current-index' : '',
|
|
307
307
|
updatePlayer: function updatePlayer(player) {
|
|
308
|
-
return
|
|
308
|
+
return _updatePlayer(player, index);
|
|
309
309
|
},
|
|
310
310
|
onClick: function onClick() {
|
|
311
311
|
return setState(function (old) {
|
|
@@ -322,7 +322,7 @@ function RecordPlayer(_ref) {
|
|
|
322
322
|
className: state.selectIndex === index ? 'player-current-index' : '',
|
|
323
323
|
segments: ((_d = recordList[index]) === null || _d === void 0 ? void 0 : _d.segments) || [],
|
|
324
324
|
updatePlayer: function updatePlayer(player) {
|
|
325
|
-
return
|
|
325
|
+
return _updatePlayer(player, index);
|
|
326
326
|
},
|
|
327
327
|
onClick: function onClick() {
|
|
328
328
|
return setState(function (old) {
|
|
@@ -339,13 +339,15 @@ function RecordPlayer(_ref) {
|
|
|
339
339
|
}
|
|
340
340
|
}));
|
|
341
341
|
})), /*#__PURE__*/React.createElement(RecordTools, {
|
|
342
|
+
time: state.currentTimes[state.selectIndex],
|
|
342
343
|
fit: fit,
|
|
343
344
|
toggleFit: toggleFit,
|
|
344
345
|
getPlayerItem: getPlayerItem,
|
|
345
346
|
screenNum: state.screenNum,
|
|
346
347
|
mode: state.mode,
|
|
347
348
|
containerRef: domRef,
|
|
348
|
-
updateState: updateState
|
|
349
|
+
updateState: updateState,
|
|
350
|
+
onTimeChange: onTimeChange
|
|
349
351
|
}), /*#__PURE__*/React.createElement(SegmentTimeLine, {
|
|
350
352
|
disabled: !!segmentItem.cid,
|
|
351
353
|
begin: timeBegin,
|
|
@@ -12,6 +12,8 @@ interface IToolsProps {
|
|
|
12
12
|
getPlayerItem: () => ExportPlayerType | undefined;
|
|
13
13
|
fit?: string;
|
|
14
14
|
toggleFit?: () => void;
|
|
15
|
+
time?: number;
|
|
16
|
+
onTimeChange?: (time: number) => void;
|
|
15
17
|
}
|
|
16
|
-
declare function RecordTools({ containerRef, updateState, screenNum, getPlayerItem, mode, fit,
|
|
18
|
+
declare function RecordTools({ containerRef, updateState, screenNum, getPlayerItem, mode, toggleFit, fit, time, onTimeChange }: IToolsProps): JSX.Element;
|
|
17
19
|
export default RecordTools;
|