pixuireactcomponents 1.3.82 → 1.3.84

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.
Files changed (5) hide show
  1. package/package.json +1 -1
  2. package/src/components/react/app/slider/Slider.d.ts +3 -0
  3. package/src/components/react/app/slider/Slider.js +3 -3
  4. package/src/components/react/app/videoPlayer/VideoPlayer.d.ts +6 -4
  5. package/src/components/react/app/videoPlayer/VideoPlayer.js +57 -41
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pixuireactcomponents",
3
- "version": "1.3.82",
3
+ "version": "1.3.84",
4
4
  "description": "pixui react components",
5
5
  "main": "index.js",
6
6
  "scripts": {
package/src/components/react/app/slider/Slider.d.ts CHANGED
@@ -14,6 +14,9 @@ export interface SliderProps {
14
14
  outerBg: string;
15
15
  innerBg: string;
16
16
  dotBg: string;
17
+ outerCss?: CSSProperties;
18
+ innerCss?: CSSProperties;
19
+ dotCss?: CSSProperties;
17
20
  onDragStart: Function | null;
18
21
  onDrag: Function | null;
19
22
  onDragEnd: Function | null;
package/src/components/react/app/slider/Slider.js CHANGED
@@ -366,9 +366,9 @@ var Slider = /** @class */ (function (_super) {
366
366
  return (h("div", { style: this.props.hasIncDecButton ? this.state.withButtonStyle : {}, id: this.props.id, className: this.props.className },
367
367
  this.props.hasIncDecButton && h("img", { src: this.props.decButtonBg, style: this.state.decButtonStyle, onClick: this.onDecClick }),
368
368
  h("div", { ref: this.refWrapper, style: this.state.wrapperStyle },
369
- h("div", { style: this.state.outerStyle, draggable: true, onDragStart: this.onDragStart, onDrag: this.onDrag, onDragEnd: this.onDragEnd },
370
- h("div", { style: __assign(__assign({}, this.state.innerStyle), { width: innerWidth }) },
371
- h("div", { style: __assign(__assign({}, this.state.dotWrapperStyle), { marginLeft: dotWrapperMarginLeft }) }, hasDot && h("img", { src: this.props.dotBg, style: this.state.dotStyle }))))),
369
+ h("div", { style: __assign(__assign({}, this.state.outerStyle), this.props.outerCss), draggable: true, onDragStart: this.onDragStart, onDrag: this.onDrag, onDragEnd: this.onDragEnd },
370
+ h("div", { style: __assign(__assign(__assign({}, this.state.innerStyle), { width: innerWidth }), this.props.innerCss) },
371
+ h("div", { style: __assign(__assign({}, this.state.dotWrapperStyle), { marginLeft: dotWrapperMarginLeft }) }, hasDot && h("img", { src: this.props.dotBg, style: __assign(__assign({}, this.state.dotStyle), this.props.dotCss) }))))),
372
372
  this.props.hasIncDecButton && h("img", { src: this.props.incButtonBg, style: this.state.incButtonStyle, onClick: this.onIncClick })));
373
373
  };
374
374
  Slider.defaultProps = {
package/src/components/react/app/videoPlayer/VideoPlayer.d.ts CHANGED
@@ -2,24 +2,26 @@ import { h } from 'preact';
2
2
  export interface VideoPlayerProps {
3
3
  playUrl: string;
4
4
  autoPlay?: boolean;
5
- playEvent: {
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;
package/src/components/react/app/videoPlayer/VideoPlayer.js CHANGED
@@ -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
- var hideSliderDuration = 1000;
46
- var _c = useState(VideoStatus.Loading), videoStatus = _c[0], setVideoStatus = _c[1];
47
- var _d = useState(0), currentTime = _d[0], setCurrentTime = _d[1];
48
- var _e = useState(0), totalTime = _e[0], setTotalTime = _e[1];
49
- var _f = useState(false), showSlider = _f[0], setShowSlider = _f[1];
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
- console.log('updatePlayTime-----------------pp1', videoStatus);
54
- console.log('updatePlayTime-----------------pp2', refVideo.current.currentTime);
55
- console.log('updatePlayTime-----------------pp3', refVideo.current.duration);
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
- console.log('updatePlayTime-----------------', 'currentSeconds:', currentSeconds, 'totalSeconds:', totalSeconds, Math.floor((currentTime / totalTime) * 100 + 0.5));
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 updatePlayTimeRef = useRef(updatePlayTime);
87
+ var updatePlayTimeFunRef = useRef(updatePlayTime);
68
88
  useEffect(function () {
69
- updatePlayTimeRef.current = updatePlayTime;
89
+ updatePlayTimeFunRef.current = updatePlayTime;
70
90
  });
71
91
  useEffect(function () {
72
- updatePlayTimeRef.current = updatePlayTime;
73
- updateInfoTimmer.current = setInterval(function () {
74
- updatePlayTimeRef.current();
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
- console.log('onDragStart-----------------');
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
- console.warn('onDragEnd-----------------');
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
- console.warn('-----------onplaying');
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
- console.warn('-----------onpause');
133
+ videoLog('-----------onpause');
117
134
  setVideoStatus(VideoStatus.Pause);
118
135
  };
119
136
  var onended = function () {
120
137
  // 视频播放结束
121
- console.warn('-----------onended');
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
- console.log('switchPlayState ', videoStatus);
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
- console.log('currentTime', currentTime, 'totalTime', totalTime);
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
- console.log('screenClickerStyle click');
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 = {