pixuireactcomponents 1.5.49 → 1.5.50
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 +1 -1
- package/src/components/react/app/imageViewer/imageViewer.d.ts +50 -1
- package/src/components/react/app/imageViewer/imageViewer.js +437 -65
- package/src/components/react/app/slider/Slider.js +22 -6
- package/src/components/react/app/videoPlayer/VideoPlayer.d.ts +1 -0
- package/src/components/react/app/videoPlayer/VideoPlayer.js +35 -10
package/package.json
CHANGED
|
@@ -2,24 +2,73 @@ import { Component, CSSProperties, h } from 'preact';
|
|
|
2
2
|
interface ImageViewerProps {
|
|
3
3
|
rootId?: string;
|
|
4
4
|
rootClassName?: string;
|
|
5
|
-
|
|
5
|
+
srcs: string[];
|
|
6
|
+
currentIndex?: number;
|
|
6
7
|
onClose: Function;
|
|
8
|
+
onIndexChange?: (index: number) => void;
|
|
7
9
|
backgroundStyle?: CSSProperties;
|
|
8
10
|
imageBoxStyle?: CSSProperties;
|
|
9
11
|
imageAreaStyle?: CSSProperties;
|
|
10
12
|
imageStyle?: CSSProperties;
|
|
11
13
|
closeOnClickOutside?: boolean;
|
|
14
|
+
showZoomControls?: boolean;
|
|
15
|
+
showSwipeButtons?: boolean;
|
|
16
|
+
scaleFactor?: number;
|
|
17
|
+
compRef?: any;
|
|
12
18
|
}
|
|
13
19
|
interface ImageViewerStates {
|
|
14
20
|
imageHeight: number;
|
|
15
21
|
imageWidth: number;
|
|
16
22
|
reCalSize: boolean;
|
|
23
|
+
scale: number;
|
|
24
|
+
offset: {
|
|
25
|
+
x: number;
|
|
26
|
+
y: number;
|
|
27
|
+
};
|
|
28
|
+
isDragging: boolean;
|
|
29
|
+
isSwipping: boolean;
|
|
30
|
+
startX: number;
|
|
31
|
+
startY: number;
|
|
32
|
+
startOffset: {
|
|
33
|
+
x: number;
|
|
34
|
+
y: number;
|
|
35
|
+
};
|
|
36
|
+
touchStartDistance?: number;
|
|
37
|
+
touchStartScale?: number;
|
|
38
|
+
currentIndex: number;
|
|
39
|
+
touchStartX: number;
|
|
40
|
+
touchStartY: number;
|
|
41
|
+
swipingDirection: 'left' | 'right' | null;
|
|
42
|
+
swipeOffset: number;
|
|
43
|
+
isAtDefaultScale: boolean;
|
|
17
44
|
}
|
|
18
45
|
export declare class ImageViewer extends Component<ImageViewerProps, ImageViewerStates> {
|
|
46
|
+
private imageRef;
|
|
47
|
+
private isScaling;
|
|
48
|
+
private imageAreaPxWidth;
|
|
49
|
+
private imageAreaPxHeight;
|
|
50
|
+
private swipeThreshold;
|
|
51
|
+
private opreateEnd;
|
|
19
52
|
constructor(props: ImageViewerProps);
|
|
53
|
+
componentWillReceiveProps(nextProps: ImageViewerProps): void;
|
|
54
|
+
componentDidMount(): void;
|
|
20
55
|
onClose: () => void;
|
|
21
56
|
onBlock: (event: any) => void;
|
|
22
57
|
handleImageLoad: (event: any) => void;
|
|
58
|
+
goToIndex: (index: number) => void;
|
|
59
|
+
goPrevious: () => void;
|
|
60
|
+
goNext: () => void;
|
|
61
|
+
imageAutoDock: () => void;
|
|
62
|
+
handleMouseDown: (e: any) => void;
|
|
63
|
+
handleMouseMove: (e: any) => void;
|
|
64
|
+
handleMouseUp: () => void;
|
|
65
|
+
handleTouchStart: (e: any) => void;
|
|
66
|
+
handleTouchMove: (e: any) => void;
|
|
67
|
+
handleTouchEnd: (e: any) => void;
|
|
68
|
+
zoomOut: () => void;
|
|
69
|
+
zoomIn: () => void;
|
|
70
|
+
resetZoom: (e: any) => void;
|
|
71
|
+
getImageList: () => h.JSX.Element[];
|
|
23
72
|
render(): h.JSX.Element;
|
|
24
73
|
}
|
|
25
74
|
export {};
|
|
@@ -13,94 +13,464 @@ var __extends = (this && this.__extends) || (function () {
|
|
|
13
13
|
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
|
14
14
|
};
|
|
15
15
|
})();
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
<
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
)} */
|
|
29
|
-
}
|
|
16
|
+
var __assign = (this && this.__assign) || function () {
|
|
17
|
+
__assign = Object.assign || function(t) {
|
|
18
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
19
|
+
s = arguments[i];
|
|
20
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
21
|
+
t[p] = s[p];
|
|
22
|
+
}
|
|
23
|
+
return t;
|
|
24
|
+
};
|
|
25
|
+
return __assign.apply(this, arguments);
|
|
26
|
+
};
|
|
27
|
+
import { Component, createRef, h } from 'preact';
|
|
30
28
|
var ImageViewer = /** @class */ (function (_super) {
|
|
31
29
|
__extends(ImageViewer, _super);
|
|
30
|
+
// 在构造函数中初始化新状态
|
|
32
31
|
function ImageViewer(props) {
|
|
33
32
|
var _this = _super.call(this, props) || this;
|
|
33
|
+
_this.imageRef = createRef();
|
|
34
|
+
_this.isScaling = false;
|
|
35
|
+
_this.imageAreaPxWidth = 0;
|
|
36
|
+
_this.imageAreaPxHeight = 0;
|
|
37
|
+
_this.swipeThreshold = 400; // 滑动阈值
|
|
38
|
+
_this.opreateEnd = false;
|
|
34
39
|
_this.onClose = function () {
|
|
35
40
|
_this.props.onClose();
|
|
36
41
|
};
|
|
37
42
|
_this.onBlock = function (event) {
|
|
38
43
|
event.stopPropagation();
|
|
39
44
|
};
|
|
40
|
-
/* 这种方式无法获取到div宽高，获取到的值都是0 */
|
|
41
|
-
// componentDidMount(){
|
|
42
|
-
// let imageArea = document.getElementById("imageArea");
|
|
43
|
-
// let y = imageArea?.clientHeight;
|
|
44
|
-
// let x = imageArea?.clientWidth;
|
|
45
|
-
// console.log(x,y);
|
|
46
|
-
// }
|
|
47
45
|
_this.handleImageLoad = function (event) {
|
|
48
|
-
// console.log(`img`, event.target.width, event.target.height);
|
|
49
46
|
var imageX = event.target.width;
|
|
50
47
|
var imageY = event.target.height;
|
|
51
|
-
var imageArea = document.getElementById(
|
|
48
|
+
var imageArea = document.getElementById('imageArea');
|
|
52
49
|
var imageAreaY = imageArea === null || imageArea === void 0 ? void 0 : imageArea.clientHeight;
|
|
53
50
|
var imageAreaX = imageArea === null || imageArea === void 0 ? void 0 : imageArea.clientWidth;
|
|
54
|
-
if (
|
|
51
|
+
if (imageAreaX && imageAreaY) {
|
|
55
52
|
if (imageAreaX < imageX || imageAreaY < imageY) {
|
|
56
53
|
var scaleFactorX = imageAreaX / imageX;
|
|
57
54
|
var scaleFactorY = imageAreaY / imageY;
|
|
58
|
-
var scaleFactor =
|
|
59
|
-
if (scaleFactorX > scaleFactorY)
|
|
60
|
-
scaleFactor = scaleFactorY;
|
|
61
|
-
else
|
|
62
|
-
scaleFactor = scaleFactorX;
|
|
63
|
-
// console.log(`需要缩放，缩放系数为${scaleFactor}`);
|
|
55
|
+
var scaleFactor = Math.min(scaleFactorX, scaleFactorY);
|
|
64
56
|
_this.setState({
|
|
65
57
|
imageHeight: imageY * scaleFactor,
|
|
66
58
|
imageWidth: imageX * scaleFactor,
|
|
67
59
|
reCalSize: true,
|
|
68
|
-
}, function () {
|
|
69
|
-
// console.log(`状态改变后${this.state.imageHeight},${this.state.imageWidth},${this.state.reCalSize}`)
|
|
70
60
|
});
|
|
71
61
|
}
|
|
62
|
+
else {
|
|
63
|
+
_this.setState({
|
|
64
|
+
imageHeight: imageY,
|
|
65
|
+
imageWidth: imageX,
|
|
66
|
+
reCalSize: true,
|
|
67
|
+
});
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
};
|
|
71
|
+
// 新增：切换图片
|
|
72
|
+
_this.goToIndex = function (index) {
|
|
73
|
+
console.log("goToIndex swipOffset0:", _this.state.swipeOffset, index);
|
|
74
|
+
var validIndex = Math.max(0, Math.min(index, _this.props.srcs.length - 1));
|
|
75
|
+
_this.setState({
|
|
76
|
+
currentIndex: validIndex,
|
|
77
|
+
swipeOffset: -validIndex * _this.imageAreaPxWidth,
|
|
78
|
+
swipingDirection: null
|
|
79
|
+
}, function () {
|
|
80
|
+
console.log("goToIndex swipOffset:", _this.state.swipeOffset);
|
|
81
|
+
// 移动端测试时发现ue通过按钮切换图片会有无法切换的异常（pxIDE模拟器无）
|
|
82
|
+
// 故重复刷新一次swipeOffset状态，解决异常
|
|
83
|
+
_this.setState({
|
|
84
|
+
scale: 1,
|
|
85
|
+
offset: { x: 0, y: 0 },
|
|
86
|
+
isAtDefaultScale: true,
|
|
87
|
+
swipeOffset: -validIndex * _this.imageAreaPxWidth,
|
|
88
|
+
});
|
|
89
|
+
});
|
|
90
|
+
// 调用回调函数
|
|
91
|
+
if (_this.props.onIndexChange) {
|
|
92
|
+
_this.props.onIndexChange(index);
|
|
93
|
+
}
|
|
94
|
+
};
|
|
95
|
+
// 切换到上一张
|
|
96
|
+
_this.goPrevious = function () {
|
|
97
|
+
_this.goToIndex(_this.state.currentIndex - 1);
|
|
98
|
+
};
|
|
99
|
+
// 切换到下一张
|
|
100
|
+
_this.goNext = function () {
|
|
101
|
+
_this.goToIndex(_this.state.currentIndex + 1);
|
|
102
|
+
};
|
|
103
|
+
_this.imageAutoDock = function () {
|
|
104
|
+
// 计算图片的顶点位置判断是否不贴边
|
|
105
|
+
//获取image宽高
|
|
106
|
+
var element = document.getElementById("imageView_".concat(_this.state.currentIndex));
|
|
107
|
+
var imageWidth = 0, imageHeight = 0;
|
|
108
|
+
if (element) {
|
|
109
|
+
var rect = element.getBoundingClientRect();
|
|
110
|
+
imageWidth = rect.width;
|
|
111
|
+
imageHeight = rect.height;
|
|
112
|
+
}
|
|
113
|
+
// 只需要计算图片中心点到边界的距离即可判断是否越界
|
|
114
|
+
var centerX = 0.5 * _this.imageAreaPxWidth + _this.state.offset.x;
|
|
115
|
+
var centerY = 0.5 * _this.imageAreaPxHeight + _this.state.offset.y;
|
|
116
|
+
var halfWidth = 0.5 * imageWidth;
|
|
117
|
+
var halfHeight = 0.5 * imageHeight;
|
|
118
|
+
var targetX = _this.state.offset.x;
|
|
119
|
+
var targetY = _this.state.offset.y;
|
|
120
|
+
var isWidthLarger = imageWidth > _this.imageAreaPxWidth;
|
|
121
|
+
var isHeightLarger = imageHeight > _this.imageAreaPxHeight;
|
|
122
|
+
// 判断左右边界
|
|
123
|
+
if (centerX - halfWidth > 0 && isWidthLarger) {
|
|
124
|
+
targetX = (imageWidth - _this.imageAreaPxWidth) / 2;
|
|
125
|
+
}
|
|
126
|
+
else if (centerX + halfWidth < _this.imageAreaPxWidth && isWidthLarger) {
|
|
127
|
+
targetX = -(imageWidth - _this.imageAreaPxWidth) / 2;
|
|
128
|
+
}
|
|
129
|
+
// 判断上下边界
|
|
130
|
+
if (centerY - halfHeight > 0 && isHeightLarger) {
|
|
131
|
+
targetY = (imageHeight - _this.imageAreaPxHeight) / 2;
|
|
132
|
+
}
|
|
133
|
+
else if (centerY + halfHeight < _this.imageAreaPxHeight && isHeightLarger) {
|
|
134
|
+
targetY = -(imageHeight - _this.imageAreaPxHeight) / 2;
|
|
135
|
+
}
|
|
136
|
+
//
|
|
137
|
+
if (!isWidthLarger || !isHeightLarger) {
|
|
138
|
+
targetX = 0;
|
|
139
|
+
targetY = 0;
|
|
140
|
+
}
|
|
141
|
+
if ((targetX != _this.state.offset.x || targetY != _this.state.offset.y) && _this.state.scale > 1) {
|
|
142
|
+
_this.setState({
|
|
143
|
+
offset: {
|
|
144
|
+
x: targetX,
|
|
145
|
+
y: targetY,
|
|
146
|
+
},
|
|
147
|
+
});
|
|
148
|
+
}
|
|
149
|
+
};
|
|
150
|
+
// 修改handleMouseDown：仅当放大时允许拖动
|
|
151
|
+
_this.handleMouseDown = function (e) {
|
|
152
|
+
console.log('handleMouseDown', _this.state.scale);
|
|
153
|
+
e.preventDefault();
|
|
154
|
+
// 防止开始拖动时，因时序问题误触发位移
|
|
155
|
+
setTimeout(function () {
|
|
156
|
+
_this.setState({
|
|
157
|
+
isDragging: _this.state.scale > 1 ? true : false,
|
|
158
|
+
isSwipping: _this.state.scale === 1 ? true : false,
|
|
159
|
+
startX: e.clientX,
|
|
160
|
+
startY: e.clientY,
|
|
161
|
+
startOffset: __assign({}, _this.state.offset),
|
|
162
|
+
});
|
|
163
|
+
}, 50);
|
|
164
|
+
};
|
|
165
|
+
_this.handleMouseMove = function (e) {
|
|
166
|
+
if ((!_this.state.isDragging &&
|
|
167
|
+
!_this.state.isSwipping) ||
|
|
168
|
+
_this.isScaling)
|
|
169
|
+
return;
|
|
170
|
+
// console.log('handleMouseMove', this.isScaling);
|
|
171
|
+
var dx = e.clientX - _this.state.startX;
|
|
172
|
+
var dy = e.clientY - _this.state.startY;
|
|
173
|
+
// 如果主要水平移动，则视为滑动操作
|
|
174
|
+
if (Math.abs(dx) > Math.abs(dy) && Math.abs(dx) > 10 && _this.state.isSwipping) {
|
|
175
|
+
e.preventDefault();
|
|
176
|
+
_this.setState({
|
|
177
|
+
swipingDirection: dx > 0 ? 'right' : 'left',
|
|
178
|
+
swipeOffset: -_this.state.currentIndex * _this.imageAreaPxWidth + dx
|
|
179
|
+
});
|
|
180
|
+
}
|
|
181
|
+
else if (_this.state.isDragging) {
|
|
182
|
+
// 否则视为拖动操作
|
|
183
|
+
_this.setState({
|
|
184
|
+
offset: {
|
|
185
|
+
x: _this.state.startOffset.x + dx,
|
|
186
|
+
y: _this.state.startOffset.y + dy,
|
|
187
|
+
},
|
|
188
|
+
});
|
|
189
|
+
}
|
|
190
|
+
};
|
|
191
|
+
_this.handleMouseUp = function () {
|
|
192
|
+
console.log('handleMouseUp');
|
|
193
|
+
// 防止拖动结束后，因时序问题误触发位移
|
|
194
|
+
setTimeout(function () {
|
|
195
|
+
_this.isScaling = false;
|
|
196
|
+
}, 10);
|
|
197
|
+
_this.setState({
|
|
198
|
+
isDragging: false,
|
|
199
|
+
isSwipping: false,
|
|
200
|
+
});
|
|
201
|
+
// 如果正在进行滑动操作
|
|
202
|
+
if (_this.state.swipingDirection) {
|
|
203
|
+
// 如果滑动距离超过阈值，则切换到下一张/上一张
|
|
204
|
+
// 计算滑动距离：
|
|
205
|
+
var swipeDistance = _this.state.swipeOffset - (-_this.state.currentIndex * _this.imageAreaPxWidth);
|
|
206
|
+
console.log("handleMouseUp:swipeDistance", swipeDistance);
|
|
207
|
+
if (Math.abs(swipeDistance) > _this.swipeThreshold) {
|
|
208
|
+
console.log("handleMouseUp:", _this.state.swipeOffset, _this.state.swipingDirection);
|
|
209
|
+
if (_this.state.swipingDirection === 'left') {
|
|
210
|
+
_this.goToIndex(_this.state.currentIndex + 1);
|
|
211
|
+
}
|
|
212
|
+
else {
|
|
213
|
+
_this.goToIndex(_this.state.currentIndex - 1);
|
|
214
|
+
}
|
|
215
|
+
_this.opreateEnd = true;
|
|
216
|
+
setTimeout(function () {
|
|
217
|
+
_this.opreateEnd = false;
|
|
218
|
+
}, 100);
|
|
219
|
+
return;
|
|
220
|
+
}
|
|
221
|
+
}
|
|
222
|
+
_this.setState({
|
|
223
|
+
swipeOffset: -_this.state.currentIndex * _this.imageAreaPxWidth,
|
|
224
|
+
swipingDirection: null,
|
|
225
|
+
});
|
|
226
|
+
// 结束拖动后图片要自动返回边界位置
|
|
227
|
+
_this.imageAutoDock();
|
|
228
|
+
};
|
|
229
|
+
// 修改：处理触摸开始事件，支持滑动检测
|
|
230
|
+
_this.handleTouchStart = function (e) {
|
|
231
|
+
if (e.touches.length === 1) {
|
|
232
|
+
// e.preventDefault();
|
|
233
|
+
_this.handleMouseDown(e.touches[0]);
|
|
234
|
+
}
|
|
235
|
+
else if (e.touches.length === 2) {
|
|
236
|
+
_this.isScaling = true;
|
|
237
|
+
var touch1 = e.touches[0];
|
|
238
|
+
var touch2 = e.touches[1];
|
|
239
|
+
var distance = Math.sqrt(Math.pow(touch2.clientX - touch1.clientX, 2) + Math.pow(touch2.clientY - touch1.clientY, 2));
|
|
240
|
+
_this.setState({
|
|
241
|
+
touchStartDistance: distance,
|
|
242
|
+
touchStartScale: _this.state.scale,
|
|
243
|
+
});
|
|
244
|
+
}
|
|
245
|
+
};
|
|
246
|
+
// 修改handleTouchMove：添加滑动检测逻辑
|
|
247
|
+
_this.handleTouchMove = function (e) {
|
|
248
|
+
if (e.touches.length === 1) {
|
|
249
|
+
_this.handleMouseMove(e.touches[0]);
|
|
250
|
+
}
|
|
251
|
+
else if (e.touches.length === 2) {
|
|
252
|
+
var touch1 = e.touches[0];
|
|
253
|
+
var touch2 = e.touches[1];
|
|
254
|
+
var distance = Math.sqrt(Math.pow(touch2.clientX - touch1.clientX, 2) + Math.pow(touch2.clientY - touch1.clientY, 2));
|
|
255
|
+
if (_this.state.touchStartDistance && _this.state.touchStartScale && _this.isScaling && !_this.state.swipingDirection) {
|
|
256
|
+
var scaleChange = distance / _this.state.touchStartDistance;
|
|
257
|
+
var newScale = Math.max(0.1, Math.min(_this.state.touchStartScale * scaleChange, 5));
|
|
258
|
+
_this.setState({ scale: newScale });
|
|
259
|
+
}
|
|
260
|
+
}
|
|
261
|
+
};
|
|
262
|
+
// 修改handleTouchEnd：添加自动回弹和滑动检测
|
|
263
|
+
_this.handleTouchEnd = function (e) {
|
|
264
|
+
if (e.touches.length === 0) {
|
|
265
|
+
_this.handleMouseUp();
|
|
266
|
+
// 自动回弹逻辑：当缩放小于0.9时自动回到默认尺寸
|
|
267
|
+
setTimeout(function () {
|
|
268
|
+
if (_this.state.scale < 0.9) {
|
|
269
|
+
_this.setState({
|
|
270
|
+
scale: 1,
|
|
271
|
+
offset: { x: 0, y: 0 },
|
|
272
|
+
isAtDefaultScale: true
|
|
273
|
+
});
|
|
274
|
+
}
|
|
275
|
+
}, 10);
|
|
276
|
+
}
|
|
277
|
+
};
|
|
278
|
+
// 修改zoomOut：添加缩放限制
|
|
279
|
+
_this.zoomOut = function () {
|
|
280
|
+
// 默认尺寸时禁用缩小
|
|
281
|
+
if (_this.state.isAtDefaultScale)
|
|
282
|
+
return;
|
|
283
|
+
var isDefaultSize = true;
|
|
284
|
+
_this.setState(function (prevState) {
|
|
285
|
+
var newScale = Math.max(prevState.scale - _this.props.scaleFactor, 0.1);
|
|
286
|
+
// 检测是否回到默认尺寸
|
|
287
|
+
var isNowDefault = Math.abs(newScale - 1) < 0.05;
|
|
288
|
+
isDefaultSize = isNowDefault;
|
|
289
|
+
var nextState;
|
|
290
|
+
if (isNowDefault) {
|
|
291
|
+
nextState = {
|
|
292
|
+
scale: 1,
|
|
293
|
+
offset: { x: 0, y: 0 },
|
|
294
|
+
isAtDefaultScale: true
|
|
295
|
+
};
|
|
296
|
+
}
|
|
297
|
+
else {
|
|
298
|
+
nextState = {
|
|
299
|
+
scale: newScale,
|
|
300
|
+
isAtDefaultScale: isNowDefault
|
|
301
|
+
};
|
|
302
|
+
}
|
|
303
|
+
return nextState;
|
|
304
|
+
}, function () {
|
|
305
|
+
if (!isDefaultSize) {
|
|
306
|
+
_this.imageAutoDock();
|
|
307
|
+
}
|
|
308
|
+
});
|
|
309
|
+
};
|
|
310
|
+
// 修改zoomIn：更新状态标记
|
|
311
|
+
_this.zoomIn = function () {
|
|
312
|
+
_this.setState(function (prevState) { return ({
|
|
313
|
+
scale: Math.min(prevState.scale + _this.props.scaleFactor, 5),
|
|
314
|
+
isAtDefaultScale: false // 放大后不再是默认尺寸
|
|
315
|
+
}); });
|
|
316
|
+
};
|
|
317
|
+
// 修改resetZoom：更新状态标记
|
|
318
|
+
_this.resetZoom = function (e) {
|
|
319
|
+
e.stopPropagation();
|
|
320
|
+
_this.setState({
|
|
321
|
+
scale: 1,
|
|
322
|
+
offset: { x: 0, y: 0 },
|
|
323
|
+
isAtDefaultScale: true
|
|
324
|
+
}, function () {
|
|
325
|
+
// 重复设置一次状态，解决偶现重置后图片位置漂移
|
|
326
|
+
_this.setState({
|
|
327
|
+
scale: 1,
|
|
328
|
+
offset: { x: 0, y: 0 },
|
|
329
|
+
isAtDefaultScale: true
|
|
330
|
+
});
|
|
331
|
+
});
|
|
332
|
+
};
|
|
333
|
+
_this.getImageList = function () {
|
|
334
|
+
// 滑动动画
|
|
335
|
+
var swipeStyle = {
|
|
336
|
+
transform: "translateX(".concat(_this.state.swipeOffset, "px)"),
|
|
337
|
+
transition: (_this.state.isSwipping) ? 'none' : 'transform 0.3s ease',
|
|
338
|
+
};
|
|
339
|
+
return _this.props.srcs.map(function (src, index) {
|
|
340
|
+
var currentSrc = _this.props.srcs[index];
|
|
341
|
+
return (h("div", { id: "imageArea", style: __assign(__assign({ overflow: 'hidden' }, _this.props.imageAreaStyle), swipeStyle) },
|
|
342
|
+
_this.state.reCalSize && (h("img", { ref: _this.imageRef, id: "imageView_".concat(_this.state.currentIndex), style: __assign({ transform: "translate(".concat(_this.state.offset.x, "px, ").concat(_this.state.offset.y, "px) scale(").concat(_this.state.scale, ")"), transition: (_this.state.isDragging) ? 'none' : 'transform 0.3s ease' }, _this.props.imageStyle), src: currentSrc, width: _this.state.imageWidth, height: _this.state.imageHeight, onClick: _this.onBlock, onDragStart: function (e) { return e.preventDefault(); } })),
|
|
343
|
+
!_this.state.reCalSize && (h("img", { onLoad: _this.handleImageLoad, style: { display: 'none' }, src: currentSrc }))));
|
|
344
|
+
});
|
|
72
345
|
};
|
|
73
346
|
_this.state = {
|
|
74
347
|
imageHeight: 0,
|
|
75
348
|
imageWidth: 0,
|
|
76
349
|
reCalSize: false,
|
|
350
|
+
scale: 1,
|
|
351
|
+
offset: { x: 0, y: 0 },
|
|
352
|
+
isDragging: false,
|
|
353
|
+
isSwipping: false,
|
|
354
|
+
startX: 0,
|
|
355
|
+
startY: 0,
|
|
356
|
+
startOffset: { x: 0, y: 0 },
|
|
357
|
+
currentIndex: props.currentIndex || 0, // 初始化为传入的索引或0
|
|
358
|
+
touchStartX: 0,
|
|
359
|
+
touchStartY: 0,
|
|
360
|
+
swipingDirection: null,
|
|
361
|
+
swipeOffset: 0,
|
|
362
|
+
isAtDefaultScale: true, // 初始为默认尺寸
|
|
77
363
|
};
|
|
78
364
|
return _this;
|
|
79
365
|
}
|
|
366
|
+
ImageViewer.prototype.componentWillReceiveProps = function (nextProps) {
|
|
367
|
+
// 如果传入的索引变化，更新当前索引
|
|
368
|
+
if (typeof nextProps.currentIndex !== 'undefined' &&
|
|
369
|
+
nextProps.currentIndex !== this.state.currentIndex) {
|
|
370
|
+
this.setState({
|
|
371
|
+
currentIndex: nextProps.currentIndex,
|
|
372
|
+
reCalSize: false, // 触发重新计算尺寸
|
|
373
|
+
scale: 1, // 重置缩放
|
|
374
|
+
offset: { x: 0, y: 0 } // 重置偏移
|
|
375
|
+
});
|
|
376
|
+
}
|
|
377
|
+
};
|
|
378
|
+
ImageViewer.prototype.componentDidMount = function () {
|
|
379
|
+
var _this = this;
|
|
380
|
+
//获取imageArea宽度
|
|
381
|
+
var element = document.getElementById('imageArea');
|
|
382
|
+
if (element) {
|
|
383
|
+
var rect = element.getBoundingClientRect();
|
|
384
|
+
console.log('宽度:', rect.width);
|
|
385
|
+
this.imageAreaPxWidth = rect.width;
|
|
386
|
+
this.imageAreaPxHeight = rect.height;
|
|
387
|
+
this.swipeThreshold = this.imageAreaPxWidth * 0.4;
|
|
388
|
+
}
|
|
389
|
+
if (this.props.compRef) {
|
|
390
|
+
this.props.compRef.current = {
|
|
391
|
+
zoomIn: function () { _this.zoomIn(); },
|
|
392
|
+
zoomOut: function () { _this.zoomOut(); },
|
|
393
|
+
goNext: function () { _this.goNext(); },
|
|
394
|
+
goPrevious: function () { _this.goPrevious(); },
|
|
395
|
+
};
|
|
396
|
+
}
|
|
397
|
+
};
|
|
398
|
+
// 在render方法中，根据状态禁用缩小按钮
|
|
80
399
|
ImageViewer.prototype.render = function () {
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
//
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
h("div", { style: this.
|
|
95
|
-
h("div", { id: "imageArea", style: this.props.imageAreaStyle },
|
|
96
|
-
this.state.reCalSize &&
|
|
97
|
-
h("img", { style: this.props.imageStyle, src: this.props.src, width: this.state.imageWidth, height: this.state.imageHeight, onClick: this.onBlock }), /* 用于获取原图片大小 */
|
|
98
|
-
!this.state.reCalSize &&
|
|
99
|
-
h("img", { onLoad: this.handleImageLoad, style: { display: 'hidden' }, src: this.props.src })))));
|
|
400
|
+
var _a = this.props, _b = _a.showZoomControls, showZoomControls = _b === void 0 ? true : _b, _c = _a.showSwipeButtons, showSwipeButtons = _c === void 0 ? true : _c, srcs = _a.srcs;
|
|
401
|
+
var _d = this.state, currentIndex = _d.currentIndex, swipeOffset = _d.swipeOffset;
|
|
402
|
+
var showLeftButton = showSwipeButtons && currentIndex > 0;
|
|
403
|
+
var showRightButton = showSwipeButtons && currentIndex < srcs.length - 1;
|
|
404
|
+
// 根据是否默认尺寸禁用缩小按钮
|
|
405
|
+
var disableZoomOut = this.state.isAtDefaultScale;
|
|
406
|
+
return (h("div", { style: __assign({ overflow: 'hidden' }, this.props.backgroundStyle), onClick: this.props.closeOnClickOutside ? this.onClose : undefined, id: this.props.rootId, className: this.props.rootClassName, onTouchStart: this.handleTouchStart, onTouchMove: this.handleTouchMove, onTouchEnd: this.handleTouchEnd, onMouseDown: this.handleMouseDown, onMouseMove: this.handleMouseMove, onMouseUp: this.handleMouseUp, onMouseLeave: this.handleMouseUp },
|
|
407
|
+
h("div", { style: __assign({ overflow: 'hidden' }, this.props.imageBoxStyle) }, this.getImageList()),
|
|
408
|
+
showZoomControls && (h("div", { style: zoomControlsStyle },
|
|
409
|
+
h("div", { style: zoomButtonStyle, onClick: this.zoomIn }, "+"),
|
|
410
|
+
h("div", { style: __assign(__assign({}, zoomButtonStyle), { opacity: disableZoomOut ? 0.5 : 1 }), onClick: disableZoomOut ? undefined : this.zoomOut }, "-"),
|
|
411
|
+
h("div", { style: zoomButtonStyle, onClick: this.resetZoom }, "\u21BA"))),
|
|
412
|
+
showLeftButton && (h("div", { style: leftSwipeButtonStyle, onClick: this.goPrevious }, "<")),
|
|
413
|
+
showRightButton && (h("div", { style: rightSwipeButtonStyle, onClick: this.goNext }, ">"))));
|
|
100
414
|
};
|
|
101
415
|
return ImageViewer;
|
|
102
416
|
}(Component));
|
|
103
417
|
export { ImageViewer };
|
|
418
|
+
// 左右滑动按钮样式
|
|
419
|
+
var swipeButtonStyle = {
|
|
420
|
+
position: 'absolute',
|
|
421
|
+
top: '50%',
|
|
422
|
+
transform: 'translateY(-50%)',
|
|
423
|
+
width: '50px',
|
|
424
|
+
height: '50px',
|
|
425
|
+
borderRadius: '50%',
|
|
426
|
+
background: 'rgba(0,0,0,0.5)',
|
|
427
|
+
color: 'white',
|
|
428
|
+
border: 'none',
|
|
429
|
+
fontSize: '24px',
|
|
430
|
+
cursor: 'pointer',
|
|
431
|
+
display: 'flex',
|
|
432
|
+
justifyContent: 'center',
|
|
433
|
+
alignItems: 'center',
|
|
434
|
+
zIndex: 100,
|
|
435
|
+
};
|
|
436
|
+
var leftSwipeButtonStyle = __assign(__assign({}, swipeButtonStyle), { left: '20px' });
|
|
437
|
+
var rightSwipeButtonStyle = __assign(__assign({}, swipeButtonStyle), { right: '20px' });
|
|
438
|
+
// 图片计数器样式
|
|
439
|
+
var counterStyle = {
|
|
440
|
+
position: 'absolute',
|
|
441
|
+
top: '20px',
|
|
442
|
+
left: '50%',
|
|
443
|
+
transform: 'translateX(-50%)',
|
|
444
|
+
background: 'rgba(0,0,0,0.5)',
|
|
445
|
+
color: 'white',
|
|
446
|
+
padding: '5px 15px',
|
|
447
|
+
borderRadius: '20px',
|
|
448
|
+
fontSize: '16px',
|
|
449
|
+
zIndex: 100,
|
|
450
|
+
};
|
|
451
|
+
// 缩放控制按钮样式
|
|
452
|
+
var zoomControlsStyle = {
|
|
453
|
+
position: 'absolute',
|
|
454
|
+
bottom: '20px',
|
|
455
|
+
left: '50%',
|
|
456
|
+
transform: 'translateX(-50%)',
|
|
457
|
+
display: 'flex',
|
|
458
|
+
gap: '10px',
|
|
459
|
+
zIndex: 100,
|
|
460
|
+
};
|
|
461
|
+
var zoomButtonStyle = {
|
|
462
|
+
width: '40px',
|
|
463
|
+
height: '40px',
|
|
464
|
+
borderRadius: '50%',
|
|
465
|
+
background: 'rgba(0,0,0,0.5)',
|
|
466
|
+
color: 'white',
|
|
467
|
+
border: 'none',
|
|
468
|
+
fontSize: '20px',
|
|
469
|
+
cursor: 'pointer',
|
|
470
|
+
display: 'flex',
|
|
471
|
+
justifyContent: 'center',
|
|
472
|
+
alignItems: 'center',
|
|
473
|
+
};
|
|
104
474
|
var backgroundStyleDefault = {
|
|
105
475
|
position: 'absolute',
|
|
106
476
|
width: '100%',
|
|
@@ -110,40 +480,42 @@ var backgroundStyleDefault = {
|
|
|
110
480
|
flexDirection: 'row',
|
|
111
481
|
justifyContent: 'center',
|
|
112
482
|
alignItems: 'center',
|
|
113
|
-
zIndex:
|
|
114
|
-
// top: 0,
|
|
115
|
-
// right: 0,
|
|
116
|
-
// bottom: 0,
|
|
117
|
-
// left: 0,
|
|
483
|
+
zIndex: 50,
|
|
118
484
|
};
|
|
119
485
|
var imageBoxStyleDefault = {
|
|
120
|
-
width: '
|
|
121
|
-
height: '
|
|
486
|
+
width: '80%',
|
|
487
|
+
height: '80%',
|
|
122
488
|
display: 'flex',
|
|
123
489
|
flexDirection: 'row',
|
|
124
|
-
justifyContent: '
|
|
490
|
+
justifyContent: 'start',
|
|
125
491
|
alignItems: 'center',
|
|
492
|
+
backgroundColor: 'rgba(0,0,255,0.5)'
|
|
126
493
|
};
|
|
127
494
|
var imageAreaStyleDefault = {
|
|
128
|
-
|
|
495
|
+
// 使用max-min夹逼，防止父级flex布局压缩宽度
|
|
496
|
+
minWidth: '100%',
|
|
497
|
+
maxWidth: '100%',
|
|
129
498
|
height: '80%',
|
|
130
499
|
display: 'flex',
|
|
131
500
|
flexDirection: 'row',
|
|
132
501
|
justifyContent: 'center',
|
|
133
502
|
alignItems: 'center',
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
// backgroundPosition:'center'
|
|
503
|
+
backgroundColor: 'rgba(255,0,0,0.5)',
|
|
504
|
+
border: '1px solid black',
|
|
137
505
|
};
|
|
138
506
|
var imageStyleDefault = {
|
|
139
507
|
maxWidth: '100%',
|
|
140
508
|
maxHeight: '100%',
|
|
141
|
-
|
|
509
|
+
transition: 'transform 0.1s ease',
|
|
142
510
|
};
|
|
143
511
|
ImageViewer.defaultProps = {
|
|
144
512
|
backgroundStyle: backgroundStyleDefault,
|
|
145
513
|
imageBoxStyle: imageBoxStyleDefault,
|
|
146
514
|
imageAreaStyle: imageAreaStyleDefault,
|
|
147
515
|
imageStyle: imageStyleDefault,
|
|
148
|
-
closeOnClickOutside:
|
|
516
|
+
closeOnClickOutside: false,
|
|
517
|
+
showZoomControls: false,
|
|
518
|
+
showSwipeButtons: false, // 默认显示滑动按钮
|
|
519
|
+
srcs: [], // 默认空数组
|
|
520
|
+
scaleFactor: 0.5,
|
|
149
521
|
};
|
|
@@ -39,21 +39,21 @@ var defaultVerticalRail = {
|
|
|
39
39
|
height: '400',
|
|
40
40
|
border: '0px solid #000',
|
|
41
41
|
borderRadius: '5',
|
|
42
|
-
top: 200
|
|
42
|
+
top: 200,
|
|
43
43
|
};
|
|
44
44
|
var defaultTrack = {
|
|
45
45
|
backgroundColor: '#91caff',
|
|
46
46
|
width: '400',
|
|
47
47
|
height: '10',
|
|
48
48
|
border: '0px solid #000',
|
|
49
|
-
borderRadius: '5'
|
|
49
|
+
borderRadius: '5',
|
|
50
50
|
};
|
|
51
51
|
var defaultVerticalTrack = {
|
|
52
52
|
backgroundColor: '#91caff',
|
|
53
53
|
width: '10',
|
|
54
54
|
height: '400',
|
|
55
55
|
border: '0px solid #000',
|
|
56
|
-
borderRadius: '5'
|
|
56
|
+
borderRadius: '5',
|
|
57
57
|
};
|
|
58
58
|
var defaultHandle = {
|
|
59
59
|
backgroundColor: '#1677ff',
|
|
@@ -68,7 +68,7 @@ export var Slider = function (props) {
|
|
|
68
68
|
return {
|
|
69
69
|
rail: vertical ? defaultVerticalRail : defaultRail,
|
|
70
70
|
track: vertical ? defaultVerticalTrack : defaultTrack,
|
|
71
|
-
handle: defaultHandle
|
|
71
|
+
handle: defaultHandle,
|
|
72
72
|
};
|
|
73
73
|
}
|
|
74
74
|
else {
|
|
@@ -126,7 +126,9 @@ export var Slider = function (props) {
|
|
|
126
126
|
var setValueByPos = function (x, y, status) {
|
|
127
127
|
if (refRail.current) {
|
|
128
128
|
var rect = refRail.current.getBoundingClientRect();
|
|
129
|
-
var newPercent = vertical
|
|
129
|
+
var newPercent = vertical
|
|
130
|
+
? (rect.y + refRail.current.clientHeight - y) / refRail.current.clientHeight
|
|
131
|
+
: (x - rect.x) / refRail.current.clientWidth;
|
|
130
132
|
var newValue = trimValue(newPercent * (max - min));
|
|
131
133
|
if (newPercent != percent) {
|
|
132
134
|
setPercent(newValue / (max - min));
|
|
@@ -146,6 +148,20 @@ export var Slider = function (props) {
|
|
|
146
148
|
}
|
|
147
149
|
}
|
|
148
150
|
};
|
|
151
|
+
var handleRailClick = function (event) {
|
|
152
|
+
if (!draging.current && refRail.current) {
|
|
153
|
+
var rect = refRail.current.getBoundingClientRect();
|
|
154
|
+
var newPercent = vertical
|
|
155
|
+
? (rect.y + refRail.current.clientHeight - event.clientY) / refRail.current.clientHeight
|
|
156
|
+
: (event.clientX - rect.x) / refRail.current.clientWidth;
|
|
157
|
+
var newValue = trimValue(newPercent * (max - min));
|
|
158
|
+
// 触发事件
|
|
159
|
+
onChangeStart && onChangeStart(newValue);
|
|
160
|
+
setPercent(newValue / (max - min));
|
|
161
|
+
onChange && onChange(newValue);
|
|
162
|
+
onChangeComplete && onChangeComplete(newValue);
|
|
163
|
+
}
|
|
164
|
+
};
|
|
149
165
|
var trimValue = function (value) {
|
|
150
166
|
var newValue = Math.max(min, Math.min(value, max));
|
|
151
167
|
if (range !== null && typeof range !== 'boolean') {
|
|
@@ -153,7 +169,7 @@ export var Slider = function (props) {
|
|
|
153
169
|
newValue = Math.max(minCount, Math.min(newValue, maxCount));
|
|
154
170
|
}
|
|
155
171
|
if (step !== undefined) {
|
|
156
|
-
var beforeCalcuValue =
|
|
172
|
+
var beforeCalcuValue = Math.round((newValue - min) / step) * step + min;
|
|
157
173
|
newValue = parseFloat(beforeCalcuValue.toFixed(decimalPlaces));
|
|
158
174
|
}
|
|
159
175
|
return newValue;
|
|
@@ -26,6 +26,7 @@ export interface VideoPlayerProps {
|
|
|
26
26
|
videoDuration?: number;
|
|
27
27
|
compRef?: any;
|
|
28
28
|
maskComponent?: preact.ComponentChild | (() => preact.ComponentChild);
|
|
29
|
+
onClick?: (showUI: boolean) => void;
|
|
29
30
|
openLog?: boolean;
|
|
30
31
|
}
|
|
31
32
|
export declare const VideoPlayer: (props: VideoPlayerProps) => h.JSX.Element;
|
|
@@ -39,17 +39,35 @@ var VideoStatus;
|
|
|
39
39
|
})(VideoStatus || (VideoStatus = {}));
|
|
40
40
|
var defaultIconStyle = [
|
|
41
41
|
{
|
|
42
|
-
position: 'relative',
|
|
42
|
+
position: 'relative',
|
|
43
|
+
left: '-45%',
|
|
44
|
+
top: '42%',
|
|
45
|
+
width: '5%',
|
|
46
|
+
paddingTop: '5%',
|
|
47
|
+
backgroundImage: 'url(https://game.gtimg.cn/images/gamelet/cp/pixui-components/new_video_play.png)',
|
|
48
|
+
backgroundSize: '100% 100%',
|
|
43
49
|
},
|
|
44
50
|
{
|
|
45
|
-
position: 'relative',
|
|
51
|
+
position: 'relative',
|
|
52
|
+
left: '-45%',
|
|
53
|
+
top: '42%',
|
|
54
|
+
width: '5%',
|
|
55
|
+
paddingTop: '5%',
|
|
56
|
+
backgroundImage: 'url(https://game.gtimg.cn/images/gamelet/cp/pixui-components/new_video_pause.png)',
|
|
57
|
+
backgroundSize: '100% 100%',
|
|
46
58
|
},
|
|
47
59
|
{
|
|
48
60
|
position: 'relative', left: '-45%', top: '42%', width: '5%', paddingTop: '5%', backgroundImage: 'url(https://game.gtimg.cn/images/gamelet/cp/pixui-components/new_video_loading.png)', backgroundSize: '100% 100%'
|
|
49
61
|
},
|
|
50
62
|
{
|
|
51
|
-
position: 'relative',
|
|
52
|
-
|
|
63
|
+
position: 'relative',
|
|
64
|
+
left: '-45%',
|
|
65
|
+
top: '42%',
|
|
66
|
+
width: '5%',
|
|
67
|
+
paddingTop: '5%',
|
|
68
|
+
backgroundImage: 'url(https://game.gtimg.cn/images/gamelet/cp/pixui-components/new_video_reload.png)',
|
|
69
|
+
backgroundSize: '100% 100%',
|
|
70
|
+
},
|
|
53
71
|
];
|
|
54
72
|
var defaultSliderStyle = {
|
|
55
73
|
rail: {
|
|
@@ -58,7 +76,7 @@ var defaultSliderStyle = {
|
|
|
58
76
|
height: '30%',
|
|
59
77
|
border: '0px solid #000',
|
|
60
78
|
borderRadius: '10',
|
|
61
|
-
left: '0%'
|
|
79
|
+
left: '0%',
|
|
62
80
|
},
|
|
63
81
|
track: {
|
|
64
82
|
position: 'relative',
|
|
@@ -66,7 +84,7 @@ var defaultSliderStyle = {
|
|
|
66
84
|
width: '100%',
|
|
67
85
|
height: '100%',
|
|
68
86
|
border: '0px solid #000',
|
|
69
|
-
borderRadius: '10'
|
|
87
|
+
borderRadius: '10',
|
|
70
88
|
},
|
|
71
89
|
handle: {
|
|
72
90
|
position: 'absolute',
|
|
@@ -77,7 +95,7 @@ var defaultSliderStyle = {
|
|
|
77
95
|
},
|
|
78
96
|
};
|
|
79
97
|
export var VideoPlayer = function (props) {
|
|
80
|
-
var rootId = props.rootId, rootClassName = props.rootClassName, _a = props.playUrl, playUrl = _a === void 0 ? '' : _a, _b = props.autoPlay, autoPlay = _b === void 0 ? true : _b, playEvent = props.playEvent, iconElement = props.iconElement, _c = props.hideSliderDuration, hideSliderDuration = _c === void 0 ? 3000 : _c, sliderElement = props.sliderElement, videoDuration = props.videoDuration, compRef = props.compRef, _d = props.openLog, openLog = _d === void 0 ? false : _d;
|
|
98
|
+
var rootId = props.rootId, rootClassName = props.rootClassName, _a = props.playUrl, playUrl = _a === void 0 ? '' : _a, _b = props.autoPlay, autoPlay = _b === void 0 ? true : _b, playEvent = props.playEvent, iconElement = props.iconElement, _c = props.hideSliderDuration, hideSliderDuration = _c === void 0 ? 3000 : _c, sliderElement = props.sliderElement, videoDuration = props.videoDuration, compRef = props.compRef, onClick = props.onClick, _d = props.openLog, openLog = _d === void 0 ? false : _d;
|
|
81
99
|
var isStreaming = !playUrl.split('?')[0].endsWith('.mp4');
|
|
82
100
|
var refVideo = useRef(null);
|
|
83
101
|
var _e = useState(VideoStatus.Loading), videoStatus = _e[0], setVideoStatus = _e[1];
|
|
@@ -134,6 +152,8 @@ export var VideoPlayer = function (props) {
|
|
|
134
152
|
updatePlayTimeFunRef.current = updatePlayTime;
|
|
135
153
|
});
|
|
136
154
|
useEffect(function () {
|
|
155
|
+
// refVideo.current.muted = true;
|
|
156
|
+
// refVideo.current.volume = 0.0;
|
|
137
157
|
// 如果是直播流则不需要处理进度条
|
|
138
158
|
if (!isStreaming) {
|
|
139
159
|
updatePlayTimeFunRef.current = updatePlayTime;
|
|
@@ -225,6 +245,7 @@ export var VideoPlayer = function (props) {
|
|
|
225
245
|
};
|
|
226
246
|
var onpause = function () {
|
|
227
247
|
videoLog('-----------onpause');
|
|
248
|
+
console.log('-----------onPause');
|
|
228
249
|
setVideoStatus(VideoStatus.Pause);
|
|
229
250
|
(playEvent === null || playEvent === void 0 ? void 0 : playEvent.onPause) && playEvent.onPause();
|
|
230
251
|
};
|
|
@@ -258,6 +279,9 @@ export var VideoPlayer = function (props) {
|
|
|
258
279
|
setShowUI(true, true);
|
|
259
280
|
}
|
|
260
281
|
updateSliderHideTimmer();
|
|
282
|
+
if (props.onClick) {
|
|
283
|
+
props.onClick(showSlider);
|
|
284
|
+
}
|
|
261
285
|
};
|
|
262
286
|
var onFirstFrame = function () {
|
|
263
287
|
videoLog('onFirstFrame');
|
|
@@ -321,7 +345,7 @@ export var VideoPlayer = function (props) {
|
|
|
321
345
|
totalTime: totalTime,
|
|
322
346
|
isUIShow: showSlider,
|
|
323
347
|
currentVolume: currentVolume,
|
|
324
|
-
isMuted: isMuted
|
|
348
|
+
isMuted: isMuted,
|
|
325
349
|
};
|
|
326
350
|
}
|
|
327
351
|
// videoLog('currentTime', currentTime, 'totalTime', totalTime);
|
|
@@ -356,6 +380,7 @@ export var VideoPlayer = function (props) {
|
|
|
356
380
|
}
|
|
357
381
|
};
|
|
358
382
|
var iconStyleOrClass = getIconStyleOrClass(videoStatus);
|
|
383
|
+
console.log('refresh iconStyleOrClass ' + videoStatus);
|
|
359
384
|
return (h("div", { id: rootId, className: rootClassName, ref: rootRef },
|
|
360
385
|
h("video", { ref: refVideo, src: playUrl, "object-fit": "no", autoPlay: autoPlay, style: { width: '100%', height: '100%' }, onPlaying: onplaying, onPlay: onplaying, onError: onerror, onEnded: onended, onPause: onpause, onWaiting: onwaiting, onLoadStart: function () {
|
|
361
386
|
videoLog('onloadstart');
|
|
@@ -364,12 +389,12 @@ export var VideoPlayer = function (props) {
|
|
|
364
389
|
}, onCanPlay: onplaying,
|
|
365
390
|
//@ts-ignore
|
|
366
391
|
onfirstframe: onFirstFrame, controls: true }),
|
|
367
|
-
props.maskComponent && (typeof props.maskComponent === 'function' ? props.maskComponent() : props.maskComponent),
|
|
368
392
|
h("div", { style: screenClickerStyle, onClick: function (e) {
|
|
369
393
|
videoLog('screenClickerStyle click');
|
|
370
394
|
e.stopPropagation();
|
|
371
395
|
onScreenClick();
|
|
372
396
|
} },
|
|
397
|
+
props.maskComponent && (typeof props.maskComponent === 'function' ? props.maskComponent() : props.maskComponent),
|
|
373
398
|
h("div", { className: typeof iconStyleOrClass === 'string' ? iconStyleOrClass : '', style: __assign(__assign({}, (typeof iconStyleOrClass === 'object' ? iconStyleOrClass : undefined)), { visibility: showSlider ? 'visible' : 'hidden' }), onClick: function (e) {
|
|
374
399
|
e.stopPropagation();
|
|
375
400
|
switchPlayState();
|
|
@@ -385,7 +410,7 @@ export var VideoPlayer = function (props) {
|
|
|
385
410
|
position: 'absolute',
|
|
386
411
|
bottom: '3%',
|
|
387
412
|
right: '2%',
|
|
388
|
-
visibility: showSlider ? 'visible' : 'hidden'
|
|
413
|
+
visibility: showSlider ? 'visible' : 'hidden',
|
|
389
414
|
} },
|
|
390
415
|
h(Slider, { element: sliderElement != undefined ? sliderElement : defaultSliderStyle, min: 0, max: 1, step: 0.001, value: totalTime > 0 ? currentTime / totalTime : 0, onChangeStart: onSliderDragStart, onChange: onSliderDrag, onChangeComplete: onSliderDragEnd }),
|
|
391
416
|
h("div", { className: typeof (sliderElement === null || sliderElement === void 0 ? void 0 : sliderElement.time) === 'string' ? sliderElement.time : '', style: __assign(__assign({}, (typeof (sliderElement === null || sliderElement === void 0 ? void 0 : sliderElement.time) === 'object' ? sliderElement.time : null)), { flexShrink: 0, right: '1%' }) },
|