pixuireactcomponents 1.3.82 → 1.3.83
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/package.json
CHANGED
|
@@ -2,24 +2,26 @@ import { h } from 'preact';
|
|
|
2
2
|
export interface VideoPlayerProps {
|
|
3
3
|
playUrl: string;
|
|
4
4
|
autoPlay?: boolean;
|
|
5
|
-
|
|
5
|
+
isStreaming?: boolean;
|
|
6
|
+
playEvent?: {
|
|
6
7
|
onPlay?: () => void;
|
|
7
8
|
onPause?: () => void;
|
|
8
9
|
onEnded?: () => void;
|
|
9
10
|
onFirstFrame?: () => void;
|
|
10
11
|
};
|
|
11
|
-
elementClass
|
|
12
|
+
elementClass?: {
|
|
12
13
|
playIcon?: string;
|
|
13
14
|
pauseIcon?: string;
|
|
14
15
|
reloadIcon?: string;
|
|
15
16
|
};
|
|
16
|
-
sliderBG
|
|
17
|
+
sliderBG?: {
|
|
17
18
|
outerBG?: string;
|
|
18
19
|
innerBG?: string;
|
|
19
20
|
dotBG?: string;
|
|
20
21
|
};
|
|
21
|
-
durations
|
|
22
|
+
durations?: {
|
|
22
23
|
hideSliderDuration?: number;
|
|
23
24
|
};
|
|
25
|
+
videoDuration?: number;
|
|
24
26
|
}
|
|
25
27
|
export declare const VideoPlayer: (props: VideoPlayerProps) => h.JSX.Element;
|
|
@@ -9,6 +9,15 @@ var __assign = (this && this.__assign) || function () {
|
|
|
9
9
|
};
|
|
10
10
|
return __assign.apply(this, arguments);
|
|
11
11
|
};
|
|
12
|
+
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
|
13
|
+
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
|
|
14
|
+
if (ar || !(i in from)) {
|
|
15
|
+
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
|
|
16
|
+
ar[i] = from[i];
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
return to.concat(ar || Array.prototype.slice.call(from));
|
|
20
|
+
};
|
|
12
21
|
import { createRef, h } from 'preact';
|
|
13
22
|
import { useEffect, useRef, useState } from 'preact/hooks';
|
|
14
23
|
import { Slider } from '../slider/Slider';
|
|
@@ -39,59 +48,71 @@ var VideoStatus;
|
|
|
39
48
|
VideoStatus[VideoStatus["Pause"] = 2] = "Pause";
|
|
40
49
|
VideoStatus[VideoStatus["End"] = 3] = "End";
|
|
41
50
|
})(VideoStatus || (VideoStatus = {}));
|
|
51
|
+
var openLog = false;
|
|
52
|
+
var videoLog = function () {
|
|
53
|
+
var msg = [];
|
|
54
|
+
for (var _i = 0; _i < arguments.length; _i++) {
|
|
55
|
+
msg[_i] = arguments[_i];
|
|
56
|
+
}
|
|
57
|
+
if (openLog) {
|
|
58
|
+
console.log.apply(console, __spreadArray(['VideoPlayer: '], msg, false));
|
|
59
|
+
}
|
|
60
|
+
};
|
|
42
61
|
export var VideoPlayer = function (props) {
|
|
43
|
-
var playUrl = props.playUrl, _a = props.autoPlay, autoPlay = _a === void 0 ? true : _a, playEvent = props.playEvent, elementClass = props.elementClass, _b = props.durations, durations = _b === void 0 ? { hideSliderDuration: 3000 } : _b, sliderBG = props.sliderBG;
|
|
62
|
+
var playUrl = props.playUrl, _a = props.autoPlay, autoPlay = _a === void 0 ? true : _a, playEvent = props.playEvent, elementClass = props.elementClass, _b = props.durations, durations = _b === void 0 ? { hideSliderDuration: 3000 } : _b, sliderBG = props.sliderBG, videoDuration = props.videoDuration, _c = props.isStreaming, isStreaming = _c === void 0 ? false : _c;
|
|
44
63
|
var refVideo = createRef();
|
|
45
|
-
|
|
46
|
-
var
|
|
47
|
-
var
|
|
48
|
-
var
|
|
49
|
-
var
|
|
64
|
+
// const hideSliderDuration = 1000;
|
|
65
|
+
var _d = useState(VideoStatus.Loading), videoStatus = _d[0], setVideoStatus = _d[1];
|
|
66
|
+
var _e = useState(0), currentTime = _e[0], setCurrentTime = _e[1];
|
|
67
|
+
var _f = useState(0), totalTime = _f[0], setTotalTime = _f[1];
|
|
68
|
+
var _g = useState(false), showSlider = _g[0], setShowSlider = _g[1];
|
|
50
69
|
var sliderTimmer = useRef(null);
|
|
51
|
-
var updateInfoTimmer = useRef(null);
|
|
52
70
|
var updatePlayTime = function () {
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
if (videoStatus != VideoStatus.Playing)
|
|
71
|
+
// videoLog('updatePlayTime----------------');
|
|
72
|
+
// videoLog('updatePlayTime-----------------pp3', refVideo.current.duration);
|
|
73
|
+
if (videoStatus != VideoStatus.Playing || isStreaming)
|
|
57
74
|
return;
|
|
58
75
|
var playTime = refVideo.current.currentTime;
|
|
59
76
|
var currentSeconds = Math.floor(playTime / 1000 + 0.5);
|
|
60
|
-
var duration = refVideo.current.duration;
|
|
77
|
+
var duration = videoDuration || refVideo.current.duration;
|
|
61
78
|
var totalSeconds = Math.floor(duration / 1000 + 0.5);
|
|
62
79
|
setCurrentTime(currentSeconds);
|
|
63
80
|
setTotalTime(totalSeconds);
|
|
64
|
-
|
|
81
|
+
videoLog('updatePlayTime-----------------', 'currentSeconds:', currentSeconds, 'totalSeconds:', totalSeconds, Math.floor((currentTime / totalTime) * 100 + 0.5));
|
|
65
82
|
};
|
|
83
|
+
useEffect(function () {
|
|
84
|
+
videoLog('Video Status changed: ', videoStatus);
|
|
85
|
+
}, [videoStatus]);
|
|
66
86
|
//用于更新函数环境
|
|
67
|
-
var
|
|
87
|
+
var updatePlayTimeFunRef = useRef(updatePlayTime);
|
|
68
88
|
useEffect(function () {
|
|
69
|
-
|
|
89
|
+
updatePlayTimeFunRef.current = updatePlayTime;
|
|
70
90
|
});
|
|
71
91
|
useEffect(function () {
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
92
|
+
updatePlayTimeFunRef.current = updatePlayTime;
|
|
93
|
+
var interval = setInterval(function () {
|
|
94
|
+
updatePlayTimeFunRef.current();
|
|
75
95
|
}, 1000);
|
|
76
96
|
return function () {
|
|
97
|
+
clearInterval(interval);
|
|
77
98
|
clearInterval(sliderTimmer.current);
|
|
78
99
|
};
|
|
79
100
|
}, []);
|
|
80
101
|
// 开始拖就长显Bar
|
|
81
102
|
var onSliderDragStart = function () {
|
|
82
|
-
|
|
103
|
+
videoLog('onDragStart-----------------');
|
|
83
104
|
clearTimeout(sliderTimmer.current);
|
|
84
105
|
refVideo.current.pause();
|
|
85
106
|
};
|
|
86
107
|
var onSliderDrag = function (value) {
|
|
87
108
|
console.warn('value: ========================', value);
|
|
88
|
-
var totlaTime = (value / 100) * refVideo.current.duration;
|
|
109
|
+
var totlaTime = (value / 100) * (videoDuration || refVideo.current.duration);
|
|
89
110
|
var playSeconds = Math.floor(totlaTime / 1000 + 0.5);
|
|
90
111
|
setCurrentTime(playSeconds);
|
|
91
112
|
};
|
|
92
113
|
// 结束拖就3秒隐藏Bar
|
|
93
114
|
var onSliderDragEnd = function () {
|
|
94
|
-
|
|
115
|
+
videoLog('onDragEnd-----------------');
|
|
95
116
|
clearTimeout(sliderTimmer.current);
|
|
96
117
|
sliderTimmer.current = setTimeout(function () {
|
|
97
118
|
setShowSlider(false);
|
|
@@ -100,31 +121,26 @@ export var VideoPlayer = function (props) {
|
|
|
100
121
|
};
|
|
101
122
|
var onplaying = function () {
|
|
102
123
|
// 加载第一帧画面
|
|
103
|
-
|
|
124
|
+
videoLog('-----------onplaying');
|
|
104
125
|
setVideoStatus(VideoStatus.Playing);
|
|
105
|
-
playEvent.onPlay && playEvent.onPlay();
|
|
106
|
-
clearInterval(updateInfoTimmer.current);
|
|
107
|
-
updateInfoTimmer.current = setInterval(function () {
|
|
108
|
-
updatePlayTimeRef.current();
|
|
109
|
-
}, 1000);
|
|
126
|
+
(playEvent === null || playEvent === void 0 ? void 0 : playEvent.onPlay) && playEvent.onPlay();
|
|
110
127
|
};
|
|
111
128
|
var onerror = function (error) {
|
|
112
129
|
console.error('----------onerror', JSON.stringify(error));
|
|
113
130
|
// 播放错误，比如给一个无法播放的url
|
|
114
131
|
};
|
|
115
132
|
var onpause = function () {
|
|
116
|
-
|
|
133
|
+
videoLog('-----------onpause');
|
|
117
134
|
setVideoStatus(VideoStatus.Pause);
|
|
118
135
|
};
|
|
119
136
|
var onended = function () {
|
|
120
137
|
// 视频播放结束
|
|
121
|
-
|
|
138
|
+
videoLog('-----------onended');
|
|
122
139
|
setVideoStatus(VideoStatus.End);
|
|
123
|
-
clearInterval(updateInfoTimmer.current);
|
|
124
140
|
setCurrentTime(0);
|
|
125
141
|
clearTimeout(sliderTimmer.current);
|
|
126
142
|
setShowSlider(true);
|
|
127
|
-
playEvent.onEnded && playEvent.onEnded();
|
|
143
|
+
(playEvent === null || playEvent === void 0 ? void 0 : playEvent.onEnded) && playEvent.onEnded();
|
|
128
144
|
};
|
|
129
145
|
var updateSliderHideTimmer = function () {
|
|
130
146
|
clearTimeout(sliderTimmer.current);
|
|
@@ -148,14 +164,14 @@ export var VideoPlayer = function (props) {
|
|
|
148
164
|
var onPause = function () {
|
|
149
165
|
console.warn('onPause');
|
|
150
166
|
setVideoStatus(VideoStatus.Pause);
|
|
151
|
-
playEvent.onPause && playEvent.onPause();
|
|
167
|
+
(playEvent === null || playEvent === void 0 ? void 0 : playEvent.onPause) && playEvent.onPause();
|
|
152
168
|
};
|
|
153
169
|
var onFirstFrame = function () {
|
|
154
170
|
console.warn('onFirstFrame');
|
|
155
|
-
playEvent.onFirstFrame && playEvent.onFirstFrame();
|
|
171
|
+
(playEvent === null || playEvent === void 0 ? void 0 : playEvent.onFirstFrame) && playEvent.onFirstFrame();
|
|
156
172
|
};
|
|
157
173
|
var switchPlayState = function () {
|
|
158
|
-
|
|
174
|
+
videoLog('switchPlayState ', videoStatus);
|
|
159
175
|
if (videoStatus == VideoStatus.Playing) {
|
|
160
176
|
refVideo.current.pause();
|
|
161
177
|
}
|
|
@@ -168,7 +184,7 @@ export var VideoPlayer = function (props) {
|
|
|
168
184
|
refVideo.current.load();
|
|
169
185
|
}
|
|
170
186
|
};
|
|
171
|
-
|
|
187
|
+
videoLog('currentTime', currentTime, 'totalTime', totalTime);
|
|
172
188
|
return (h("div", { style: {
|
|
173
189
|
width: '100%',
|
|
174
190
|
height: '100%',
|
|
@@ -183,18 +199,18 @@ export var VideoPlayer = function (props) {
|
|
|
183
199
|
//@ts-ignore
|
|
184
200
|
onfirstframe: onFirstFrame }),
|
|
185
201
|
h("div", { style: screenClickerStyle, onClick: function (e) {
|
|
186
|
-
|
|
202
|
+
videoLog('screenClickerStyle click');
|
|
187
203
|
e.stopPropagation();
|
|
188
204
|
onScreenClick();
|
|
189
205
|
} }, showSlider ? (h("div", { className: videoStatus == VideoStatus.Playing
|
|
190
|
-
? elementClass.pauseIcon
|
|
206
|
+
? elementClass === null || elementClass === void 0 ? void 0 : elementClass.pauseIcon
|
|
191
207
|
: videoStatus == VideoStatus.Pause
|
|
192
|
-
? elementClass.playIcon
|
|
193
|
-
: elementClass.reloadIcon, onClick: function (e) {
|
|
208
|
+
? elementClass === null || elementClass === void 0 ? void 0 : elementClass.playIcon
|
|
209
|
+
: elementClass === null || elementClass === void 0 ? void 0 : elementClass.reloadIcon, onClick: function (e) {
|
|
194
210
|
e.stopPropagation();
|
|
195
211
|
onIconClick();
|
|
196
212
|
} })) : null),
|
|
197
|
-
showSlider ? (h("div", { style: {
|
|
213
|
+
showSlider && !isStreaming ? (h("div", { style: {
|
|
198
214
|
width: '100%',
|
|
199
215
|
height: '15px',
|
|
200
216
|
fontSize: '18px',
|
|
@@ -209,7 +225,7 @@ export var VideoPlayer = function (props) {
|
|
|
209
225
|
} },
|
|
210
226
|
h("text", null, FormatSecondCountDownTime(currentTime)),
|
|
211
227
|
h("div", { style: { marginRight: '30px', marginLeft: '30px' } },
|
|
212
|
-
h(Slider, __assign({}, progressData, { outerBg: sliderBG.outerBG || '', innerBg: sliderBG.innerBG || '', dotBg: sliderBG.dotBG || '', onDrag: onSliderDrag, onDragEnd: onSliderDragEnd, onDragStart: onSliderDragStart, discrete: totalTime > 0 ? Math.floor((currentTime / totalTime) * 100 + 0.5) : 0 }))),
|
|
228
|
+
h(Slider, __assign({}, progressData, { outerBg: (sliderBG === null || sliderBG === void 0 ? void 0 : sliderBG.outerBG) || '', innerBg: (sliderBG === null || sliderBG === void 0 ? void 0 : sliderBG.innerBG) || '', dotBg: (sliderBG === null || sliderBG === void 0 ? void 0 : sliderBG.dotBG) || '', onDrag: onSliderDrag, onDragEnd: onSliderDragEnd, onDragStart: onSliderDragStart, discrete: totalTime > 0 ? Math.floor((currentTime / totalTime) * 100 + 0.5) : 0 }))),
|
|
213
229
|
h("text", null, FormatSecondCountDownTime(totalTime)))) : null));
|
|
214
230
|
};
|
|
215
231
|
var progressData = {
|