stormcloud-video-player 0.3.61 → 0.3.62
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/dist/stormcloud-vp.min.js +1 -1
- package/lib/index.cjs +203 -148
- package/lib/index.cjs.map +1 -1
- package/lib/index.d.cts +1 -0
- package/lib/index.d.ts +1 -0
- package/lib/index.js +203 -148
- package/lib/index.js.map +1 -1
- package/lib/player/StormcloudVideoPlayer.cjs +23 -13
- package/lib/player/StormcloudVideoPlayer.cjs.map +1 -1
- package/lib/player/StormcloudVideoPlayer.d.cts +1 -1
- package/lib/players/HlsPlayer.cjs +23 -13
- package/lib/players/HlsPlayer.cjs.map +1 -1
- package/lib/players/HlsPlayer.d.cts +1 -1
- package/lib/players/index.cjs +23 -13
- package/lib/players/index.cjs.map +1 -1
- package/lib/sdk/hlsAdPlayer.d.cts +1 -1
- package/lib/sdk/ima.d.cts +1 -1
- package/lib/{types-XKUJJhlG.d.cts → types-BJPNhfLV.d.cts} +1 -0
- package/lib/ui/StormcloudVideoPlayer.cjs +203 -148
- package/lib/ui/StormcloudVideoPlayer.cjs.map +1 -1
- package/lib/ui/StormcloudVideoPlayer.d.cts +1 -1
- package/lib/utils/tracking.d.cts +1 -1
- package/package.json +1 -1
package/lib/index.d.cts
CHANGED
package/lib/index.d.ts
CHANGED
package/lib/index.js
CHANGED
|
@@ -3391,7 +3391,7 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
|
|
|
3391
3391
|
key: "load",
|
|
3392
3392
|
value: function load() {
|
|
3393
3393
|
return _async_to_generator(function() {
|
|
3394
|
-
var _this, error, _this_config_lowLatencyMode, _this_video_play;
|
|
3394
|
+
var _this, error, _this_config_isLiveStream, _this_config_lowLatencyMode, _this_video_play;
|
|
3395
3395
|
return _ts_generator(this, function(_state) {
|
|
3396
3396
|
switch(_state.label){
|
|
3397
3397
|
case 0:
|
|
@@ -3435,7 +3435,7 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
|
|
|
3435
3435
|
this.nativeHlsMode = true;
|
|
3436
3436
|
this.videoSrcProtection = this.config.src;
|
|
3437
3437
|
this.video.src = this.config.src;
|
|
3438
|
-
this.isLiveStream = (_this_config_lowLatencyMode = this.config.lowLatencyMode) !== null && _this_config_lowLatencyMode !== void 0 ? _this_config_lowLatencyMode : false;
|
|
3438
|
+
this.isLiveStream = (_this_config_isLiveStream = this.config.isLiveStream) !== null && _this_config_isLiveStream !== void 0 ? _this_config_isLiveStream : (_this_config_lowLatencyMode = this.config.lowLatencyMode) !== null && _this_config_lowLatencyMode !== void 0 ? _this_config_lowLatencyMode : false;
|
|
3439
3439
|
if (this.config.debugAdTiming) {
|
|
3440
3440
|
console.log("[StormcloudVideoPlayer] Using native HLS playback - VOD mode:", {
|
|
3441
3441
|
isLive: this.isLiveStream,
|
|
@@ -3486,19 +3486,28 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
|
|
|
3486
3486
|
});
|
|
3487
3487
|
this.hls.on(Hls2.Events.MANIFEST_PARSED, function(_, data) {
|
|
3488
3488
|
return _async_to_generator(function() {
|
|
3489
|
-
var
|
|
3489
|
+
var _this_config_isLiveStream, _ref, _this_config_minSegmentsBeforePlay, _this_hls_levels, _this_hls, prerollKey, adBehavior, minSegments, _this_video_play;
|
|
3490
3490
|
return _ts_generator(this, function(_state) {
|
|
3491
3491
|
switch(_state.label){
|
|
3492
3492
|
case 0:
|
|
3493
|
-
|
|
3494
|
-
|
|
3495
|
-
|
|
3496
|
-
|
|
3497
|
-
|
|
3498
|
-
|
|
3499
|
-
|
|
3500
|
-
|
|
3501
|
-
|
|
3493
|
+
this.isLiveStream = (_this_config_isLiveStream = this.config.isLiveStream) !== null && _this_config_isLiveStream !== void 0 ? _this_config_isLiveStream : (_ref = (_this_hls = this.hls) === null || _this_hls === void 0 ? void 0 : (_this_hls_levels = _this_hls.levels) === null || _this_hls_levels === void 0 ? void 0 : _this_hls_levels.some(function(level) {
|
|
3494
|
+
var _level_details, _level_details1;
|
|
3495
|
+
return (level === null || level === void 0 ? void 0 : (_level_details = level.details) === null || _level_details === void 0 ? void 0 : _level_details.live) === true || (level === null || level === void 0 ? void 0 : (_level_details1 = level.details) === null || _level_details1 === void 0 ? void 0 : _level_details1.type) === "LIVE";
|
|
3496
|
+
})) !== null && _ref !== void 0 ? _ref : false;
|
|
3497
|
+
if (!this.isLiveStream && this.vmapBreaks.length === 0 && this.apiVastTagUrl) {
|
|
3498
|
+
prerollKey = "synthetic-vod-preroll";
|
|
3499
|
+
if (!this.consumedVmapBreakIds.has(prerollKey)) {
|
|
3500
|
+
this.vmapBreaks = [
|
|
3501
|
+
{
|
|
3502
|
+
id: prerollKey,
|
|
3503
|
+
startTimeMs: 0,
|
|
3504
|
+
vastTagUrl: this.apiVastTagUrl
|
|
3505
|
+
}
|
|
3506
|
+
];
|
|
3507
|
+
if (this.config.debugAdTiming) {
|
|
3508
|
+
console.log("[StormcloudVideoPlayer] Injected synthetic VOD preroll from apiVastTagUrl");
|
|
3509
|
+
}
|
|
3510
|
+
}
|
|
3502
3511
|
}
|
|
3503
3512
|
if (this.config.debugAdTiming) {
|
|
3504
3513
|
adBehavior = this.shouldContinueLiveStreamDuringAds() ? "live (main video continues muted during ads)" : "vod (main video pauses during ads)";
|
|
@@ -7936,7 +7945,8 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
|
|
|
7936
7945
|
continue;
|
|
7937
7946
|
}
|
|
7938
7947
|
var end = breakStartMs + (b.durationMs || 0);
|
|
7939
|
-
|
|
7948
|
+
var effectiveTol = breakStartMs === 0 ? Math.max(tol, 3e4) : tol;
|
|
7949
|
+
if (nowMs >= breakStartMs && (b.durationMs ? nowMs < end : nowMs <= breakStartMs + effectiveTol)) {
|
|
7940
7950
|
return b;
|
|
7941
7951
|
}
|
|
7942
7952
|
}
|
|
@@ -8167,6 +8177,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
|
8167
8177
|
var CRITICAL_PROPS = [
|
|
8168
8178
|
"src",
|
|
8169
8179
|
"allowNativeHls",
|
|
8180
|
+
"isLiveStream",
|
|
8170
8181
|
"licenseKey",
|
|
8171
8182
|
"vmapUrl",
|
|
8172
8183
|
"lowLatencyMode",
|
|
@@ -8176,12 +8187,13 @@ var CRITICAL_PROPS = [
|
|
|
8176
8187
|
var CONTROLS_HIDE_DELAY = 3e3;
|
|
8177
8188
|
var DEFAULT_PLAYER_ASPECT_RATIO = 16 / 9;
|
|
8178
8189
|
var StormcloudVideoPlayerComponent = React.memo(function(props) {
|
|
8179
|
-
var src = props.src, autoplay = props.autoplay, muted = props.muted, lowLatencyMode = props.lowLatencyMode, allowNativeHls = props.allowNativeHls, driftToleranceMs = props.driftToleranceMs, immediateManifestAds = props.immediateManifestAds, debugAdTiming = props.debugAdTiming, showCustomControls = props.showCustomControls, hideLoadingIndicator = props.hideLoadingIndicator, onVolumeToggle = props.onVolumeToggle, onFullscreenToggle = props.onFullscreenToggle, onControlClick = props.onControlClick, onReady = props.onReady, wrapperClassName = props.wrapperClassName, wrapperStyle = props.wrapperStyle, className = props.className, style = props.style, controls = props.controls, playsInline = props.playsInline, preload = props.preload, poster = props.poster, children = props.children, licenseKey = props.licenseKey, vastMode = props.vastMode, vastTagUrl = props.vastTagUrl, vmapUrl = props.vmapUrl, adPlayerType = props.adPlayerType, minSegmentsBeforePlay = props.minSegmentsBeforePlay, restVideoAttrs = _object_without_properties(props, [
|
|
8190
|
+
var src = props.src, autoplay = props.autoplay, muted = props.muted, lowLatencyMode = props.lowLatencyMode, allowNativeHls = props.allowNativeHls, isLiveStream = props.isLiveStream, driftToleranceMs = props.driftToleranceMs, immediateManifestAds = props.immediateManifestAds, debugAdTiming = props.debugAdTiming, showCustomControls = props.showCustomControls, hideLoadingIndicator = props.hideLoadingIndicator, onVolumeToggle = props.onVolumeToggle, onFullscreenToggle = props.onFullscreenToggle, onControlClick = props.onControlClick, onReady = props.onReady, wrapperClassName = props.wrapperClassName, wrapperStyle = props.wrapperStyle, className = props.className, style = props.style, controls = props.controls, playsInline = props.playsInline, preload = props.preload, poster = props.poster, children = props.children, licenseKey = props.licenseKey, vastMode = props.vastMode, vastTagUrl = props.vastTagUrl, vmapUrl = props.vmapUrl, adPlayerType = props.adPlayerType, minSegmentsBeforePlay = props.minSegmentsBeforePlay, restVideoAttrs = _object_without_properties(props, [
|
|
8180
8191
|
"src",
|
|
8181
8192
|
"autoplay",
|
|
8182
8193
|
"muted",
|
|
8183
8194
|
"lowLatencyMode",
|
|
8184
8195
|
"allowNativeHls",
|
|
8196
|
+
"isLiveStream",
|
|
8185
8197
|
"driftToleranceMs",
|
|
8186
8198
|
"immediateManifestAds",
|
|
8187
8199
|
"debugAdTiming",
|
|
@@ -8336,7 +8348,7 @@ var StormcloudVideoPlayerComponent = React.memo(function(props) {
|
|
|
8336
8348
|
setShowSpeedMenu(false);
|
|
8337
8349
|
};
|
|
8338
8350
|
var isHlsStream = (src === null || src === void 0 ? void 0 : src.toLowerCase().includes(".m3u8")) || (src === null || src === void 0 ? void 0 : src.toLowerCase().includes("/hls/"));
|
|
8339
|
-
var shouldShowEnhancedControls = showCustomControls && (isHlsStream ? allowNativeHls : true);
|
|
8351
|
+
var shouldShowEnhancedControls = showCustomControls && (isHlsStream ? allowNativeHls || isLiveStream === false : true);
|
|
8340
8352
|
var criticalPropsKey = useMemo(function() {
|
|
8341
8353
|
return CRITICAL_PROPS.map(function(prop) {
|
|
8342
8354
|
return "".concat(prop, ":").concat(props[prop]);
|
|
@@ -8344,6 +8356,7 @@ var StormcloudVideoPlayerComponent = React.memo(function(props) {
|
|
|
8344
8356
|
}, [
|
|
8345
8357
|
src,
|
|
8346
8358
|
allowNativeHls,
|
|
8359
|
+
isLiveStream,
|
|
8347
8360
|
licenseKey,
|
|
8348
8361
|
vmapUrl,
|
|
8349
8362
|
lowLatencyMode,
|
|
@@ -8378,6 +8391,7 @@ var StormcloudVideoPlayerComponent = React.memo(function(props) {
|
|
|
8378
8391
|
if (muted !== void 0) cfg.muted = muted;
|
|
8379
8392
|
if (lowLatencyMode !== void 0) cfg.lowLatencyMode = lowLatencyMode;
|
|
8380
8393
|
if (allowNativeHls !== void 0) cfg.allowNativeHls = allowNativeHls;
|
|
8394
|
+
if (isLiveStream !== void 0) cfg.isLiveStream = isLiveStream;
|
|
8381
8395
|
if (driftToleranceMs !== void 0) cfg.driftToleranceMs = driftToleranceMs;
|
|
8382
8396
|
if (immediateManifestAds !== void 0) cfg.immediateManifestAds = immediateManifestAds;
|
|
8383
8397
|
if (debugAdTiming !== void 0) cfg.debugAdTiming = debugAdTiming;
|
|
@@ -9217,161 +9231,202 @@ var StormcloudVideoPlayerComponent = React.memo(function(props) {
|
|
|
9217
9231
|
]
|
|
9218
9232
|
})
|
|
9219
9233
|
]
|
|
9220
|
-
}) : showCustomControls && !showLicenseWarning && /* @__PURE__ */ jsxs(
|
|
9221
|
-
className: "sc-controls-bar",
|
|
9222
|
-
style: {
|
|
9223
|
-
position: "absolute",
|
|
9224
|
-
bottom: "".concat(10 * responsiveScale, "px"),
|
|
9225
|
-
right: "".concat(10 * responsiveScale, "px"),
|
|
9226
|
-
display: "flex",
|
|
9227
|
-
flexDirection: isPortrait ? "column" : "row",
|
|
9228
|
-
gap: "".concat(8 * responsiveScale, "px"),
|
|
9229
|
-
zIndex: 10,
|
|
9230
|
-
opacity: controlsVisible ? 1 : 0,
|
|
9231
|
-
transform: controlsVisible ? "translateY(0)" : "translateY(4px)",
|
|
9232
|
-
pointerEvents: controlsVisible ? "auto" : "none"
|
|
9233
|
-
},
|
|
9234
|
+
}) : showCustomControls && !showLicenseWarning && /* @__PURE__ */ jsxs(Fragment, {
|
|
9234
9235
|
children: [
|
|
9235
9236
|
/* @__PURE__ */ jsxs("div", {
|
|
9236
9237
|
style: {
|
|
9238
|
+
position: "absolute",
|
|
9239
|
+
top: "".concat(10 * responsiveScale, "px"),
|
|
9240
|
+
left: "".concat(10 * responsiveScale, "px"),
|
|
9237
9241
|
display: "flex",
|
|
9238
9242
|
alignItems: "center",
|
|
9239
|
-
|
|
9240
|
-
|
|
9241
|
-
|
|
9242
|
-
|
|
9243
|
-
},
|
|
9244
|
-
onMouseEnter: function onMouseEnter() {
|
|
9245
|
-
return setShowVolumeSlider(true);
|
|
9243
|
+
gap: "6px",
|
|
9244
|
+
zIndex: 10,
|
|
9245
|
+
opacity: controlsVisible ? 1 : 0,
|
|
9246
|
+
transition: "opacity 0.35s ease"
|
|
9246
9247
|
},
|
|
9247
|
-
|
|
9248
|
-
|
|
9248
|
+
children: [
|
|
9249
|
+
/* @__PURE__ */ jsx("div", {
|
|
9250
|
+
style: {
|
|
9251
|
+
width: "8px",
|
|
9252
|
+
height: "8px",
|
|
9253
|
+
borderRadius: "50%",
|
|
9254
|
+
background: "#ff3b30",
|
|
9255
|
+
animation: "sc-pulse 1.5s ease-in-out infinite",
|
|
9256
|
+
flexShrink: 0
|
|
9257
|
+
}
|
|
9258
|
+
}),
|
|
9259
|
+
/* @__PURE__ */ jsx("span", {
|
|
9260
|
+
style: {
|
|
9261
|
+
fontSize: "".concat(12 * responsiveScale, "px"),
|
|
9262
|
+
fontFamily: "'SF Pro Display', 'Segoe UI', Arial, sans-serif",
|
|
9263
|
+
fontWeight: 700,
|
|
9264
|
+
letterSpacing: "0.08em",
|
|
9265
|
+
color: "#fff",
|
|
9266
|
+
textShadow: "0 1px 3px rgba(0,0,0,0.6)",
|
|
9267
|
+
userSelect: "none"
|
|
9268
|
+
},
|
|
9269
|
+
children: "LIVE"
|
|
9270
|
+
})
|
|
9271
|
+
]
|
|
9272
|
+
}),
|
|
9273
|
+
/* @__PURE__ */ jsxs("div", {
|
|
9274
|
+
className: "sc-controls-bar",
|
|
9275
|
+
style: {
|
|
9276
|
+
position: "absolute",
|
|
9277
|
+
bottom: "".concat(10 * responsiveScale, "px"),
|
|
9278
|
+
right: "".concat(10 * responsiveScale, "px"),
|
|
9279
|
+
display: "flex",
|
|
9280
|
+
flexDirection: isPortrait ? "column" : "row",
|
|
9281
|
+
gap: "".concat(8 * responsiveScale, "px"),
|
|
9282
|
+
zIndex: 10,
|
|
9283
|
+
opacity: controlsVisible ? 1 : 0,
|
|
9284
|
+
transform: controlsVisible ? "translateY(0)" : "translateY(4px)",
|
|
9285
|
+
pointerEvents: controlsVisible ? "auto" : "none"
|
|
9249
9286
|
},
|
|
9250
9287
|
children: [
|
|
9288
|
+
/* @__PURE__ */ jsxs("div", {
|
|
9289
|
+
style: {
|
|
9290
|
+
display: "flex",
|
|
9291
|
+
alignItems: "center",
|
|
9292
|
+
background: "rgba(0, 0, 0, 0.6)",
|
|
9293
|
+
borderRadius: "".concat(18 * responsiveScale, "px"),
|
|
9294
|
+
padding: "2px",
|
|
9295
|
+
paddingRight: "".concat(8 * responsiveScale, "px")
|
|
9296
|
+
},
|
|
9297
|
+
onMouseEnter: function onMouseEnter() {
|
|
9298
|
+
return setShowVolumeSlider(true);
|
|
9299
|
+
},
|
|
9300
|
+
onMouseLeave: function onMouseLeave() {
|
|
9301
|
+
return setShowVolumeSlider(false);
|
|
9302
|
+
},
|
|
9303
|
+
children: [
|
|
9304
|
+
/* @__PURE__ */ jsx("button", {
|
|
9305
|
+
className: "sc-ctrl-btn",
|
|
9306
|
+
onClick: function onClick() {
|
|
9307
|
+
if (playerRef.current) playerRef.current.toggleMute();
|
|
9308
|
+
onVolumeToggle === null || onVolumeToggle === void 0 ? void 0 : onVolumeToggle();
|
|
9309
|
+
resetControlsTimer();
|
|
9310
|
+
},
|
|
9311
|
+
style: {
|
|
9312
|
+
padding: "".concat(8 * responsiveScale, "px"),
|
|
9313
|
+
borderRadius: "50%",
|
|
9314
|
+
minWidth: "".concat(36 * responsiveScale, "px"),
|
|
9315
|
+
minHeight: "".concat(36 * responsiveScale, "px")
|
|
9316
|
+
},
|
|
9317
|
+
title: isMuted ? "Unmute" : "Mute",
|
|
9318
|
+
children: /* @__PURE__ */ jsx(VolumeIcon, {
|
|
9319
|
+
size: Math.max(14, 18 * responsiveScale)
|
|
9320
|
+
})
|
|
9321
|
+
}),
|
|
9322
|
+
/* @__PURE__ */ jsx("div", {
|
|
9323
|
+
style: {
|
|
9324
|
+
width: showVolumeSlider ? "".concat(68 * responsiveScale, "px") : "0px",
|
|
9325
|
+
overflow: "hidden",
|
|
9326
|
+
transition: "width 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
|
|
9327
|
+
display: "flex",
|
|
9328
|
+
alignItems: "center",
|
|
9329
|
+
paddingLeft: showVolumeSlider ? "".concat(3 * responsiveScale, "px") : "0",
|
|
9330
|
+
paddingRight: showVolumeSlider ? "".concat(10 * responsiveScale, "px") : "0"
|
|
9331
|
+
},
|
|
9332
|
+
children: /* @__PURE__ */ jsxs("div", {
|
|
9333
|
+
style: {
|
|
9334
|
+
position: "relative",
|
|
9335
|
+
width: "".concat(56 * responsiveScale, "px"),
|
|
9336
|
+
height: "3px",
|
|
9337
|
+
cursor: "pointer",
|
|
9338
|
+
borderRadius: "1.5px"
|
|
9339
|
+
},
|
|
9340
|
+
onMouseDown: function onMouseDown(e) {
|
|
9341
|
+
e.preventDefault();
|
|
9342
|
+
var el = e.currentTarget;
|
|
9343
|
+
var move = function move(ev) {
|
|
9344
|
+
var r2 = el.getBoundingClientRect();
|
|
9345
|
+
handleVolumeChange(Math.max(0, Math.min(1, (ev.clientX - r2.left) / r2.width)));
|
|
9346
|
+
};
|
|
9347
|
+
var up = function up1() {
|
|
9348
|
+
document.removeEventListener("mousemove", move);
|
|
9349
|
+
document.removeEventListener("mouseup", up);
|
|
9350
|
+
};
|
|
9351
|
+
document.addEventListener("mousemove", move);
|
|
9352
|
+
document.addEventListener("mouseup", up);
|
|
9353
|
+
var r = el.getBoundingClientRect();
|
|
9354
|
+
handleVolumeChange(Math.max(0, Math.min(1, (e.clientX - r.left) / r.width)));
|
|
9355
|
+
},
|
|
9356
|
+
onClick: function onClick(e) {
|
|
9357
|
+
e.stopPropagation();
|
|
9358
|
+
var r = e.currentTarget.getBoundingClientRect();
|
|
9359
|
+
handleVolumeChange(Math.max(0, Math.min(1, (e.clientX - r.left) / r.width)));
|
|
9360
|
+
},
|
|
9361
|
+
children: [
|
|
9362
|
+
/* @__PURE__ */ jsx("div", {
|
|
9363
|
+
style: {
|
|
9364
|
+
position: "absolute",
|
|
9365
|
+
inset: 0,
|
|
9366
|
+
background: "rgba(255, 255, 255, 0.2)",
|
|
9367
|
+
borderRadius: "1.5px"
|
|
9368
|
+
}
|
|
9369
|
+
}),
|
|
9370
|
+
/* @__PURE__ */ jsx("div", {
|
|
9371
|
+
style: {
|
|
9372
|
+
position: "absolute",
|
|
9373
|
+
top: 0,
|
|
9374
|
+
left: 0,
|
|
9375
|
+
bottom: 0,
|
|
9376
|
+
width: "".concat((isMuted ? 0 : volume) * 100, "%"),
|
|
9377
|
+
background: "#fff",
|
|
9378
|
+
borderRadius: "1.5px",
|
|
9379
|
+
transition: "width 0.1s ease-out"
|
|
9380
|
+
}
|
|
9381
|
+
}),
|
|
9382
|
+
/* @__PURE__ */ jsx("div", {
|
|
9383
|
+
style: {
|
|
9384
|
+
position: "absolute",
|
|
9385
|
+
top: "50%",
|
|
9386
|
+
left: "".concat((isMuted ? 0 : volume) * 100, "%"),
|
|
9387
|
+
transform: "translate(-50%, -50%)",
|
|
9388
|
+
width: "12px",
|
|
9389
|
+
height: "12px",
|
|
9390
|
+
background: "#fff",
|
|
9391
|
+
borderRadius: "50%",
|
|
9392
|
+
boxShadow: "0 0 3px rgba(0, 0, 0, 0.3)",
|
|
9393
|
+
transition: "left 0.1s ease-out"
|
|
9394
|
+
}
|
|
9395
|
+
})
|
|
9396
|
+
]
|
|
9397
|
+
})
|
|
9398
|
+
})
|
|
9399
|
+
]
|
|
9400
|
+
}),
|
|
9251
9401
|
/* @__PURE__ */ jsx("button", {
|
|
9252
9402
|
className: "sc-ctrl-btn",
|
|
9253
9403
|
onClick: function onClick() {
|
|
9254
|
-
if (
|
|
9255
|
-
|
|
9404
|
+
if (onFullscreenToggle) {
|
|
9405
|
+
onFullscreenToggle();
|
|
9406
|
+
} else if (wrapperRef.current) {
|
|
9407
|
+
if (!document.fullscreenElement) {
|
|
9408
|
+
wrapperRef.current.requestFullscreen().catch(function() {});
|
|
9409
|
+
} else {
|
|
9410
|
+
document.exitFullscreen().catch(function() {});
|
|
9411
|
+
}
|
|
9412
|
+
}
|
|
9256
9413
|
resetControlsTimer();
|
|
9257
9414
|
},
|
|
9258
9415
|
style: {
|
|
9259
9416
|
padding: "".concat(8 * responsiveScale, "px"),
|
|
9260
9417
|
borderRadius: "50%",
|
|
9261
9418
|
minWidth: "".concat(36 * responsiveScale, "px"),
|
|
9262
|
-
minHeight: "".concat(36 * responsiveScale, "px")
|
|
9419
|
+
minHeight: "".concat(36 * responsiveScale, "px"),
|
|
9420
|
+
background: "rgba(0, 0, 0, 0.6)"
|
|
9263
9421
|
},
|
|
9264
|
-
title:
|
|
9265
|
-
children: /* @__PURE__ */ jsx(
|
|
9422
|
+
title: isFullscreen ? "Exit Fullscreen" : "Enter Fullscreen",
|
|
9423
|
+
children: isFullscreen ? /* @__PURE__ */ jsx(FaCompress, {
|
|
9424
|
+
size: Math.max(14, 18 * responsiveScale)
|
|
9425
|
+
}) : /* @__PURE__ */ jsx(FaExpand, {
|
|
9266
9426
|
size: Math.max(14, 18 * responsiveScale)
|
|
9267
|
-
})
|
|
9268
|
-
}),
|
|
9269
|
-
/* @__PURE__ */ jsx("div", {
|
|
9270
|
-
style: {
|
|
9271
|
-
width: showVolumeSlider ? "".concat(68 * responsiveScale, "px") : "0px",
|
|
9272
|
-
overflow: "hidden",
|
|
9273
|
-
transition: "width 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
|
|
9274
|
-
display: "flex",
|
|
9275
|
-
alignItems: "center",
|
|
9276
|
-
paddingLeft: showVolumeSlider ? "".concat(3 * responsiveScale, "px") : "0",
|
|
9277
|
-
paddingRight: showVolumeSlider ? "".concat(10 * responsiveScale, "px") : "0"
|
|
9278
|
-
},
|
|
9279
|
-
children: /* @__PURE__ */ jsxs("div", {
|
|
9280
|
-
style: {
|
|
9281
|
-
position: "relative",
|
|
9282
|
-
width: "".concat(56 * responsiveScale, "px"),
|
|
9283
|
-
height: "3px",
|
|
9284
|
-
cursor: "pointer",
|
|
9285
|
-
borderRadius: "1.5px"
|
|
9286
|
-
},
|
|
9287
|
-
onMouseDown: function onMouseDown(e) {
|
|
9288
|
-
e.preventDefault();
|
|
9289
|
-
var el = e.currentTarget;
|
|
9290
|
-
var move = function move(ev) {
|
|
9291
|
-
var r2 = el.getBoundingClientRect();
|
|
9292
|
-
handleVolumeChange(Math.max(0, Math.min(1, (ev.clientX - r2.left) / r2.width)));
|
|
9293
|
-
};
|
|
9294
|
-
var up = function up1() {
|
|
9295
|
-
document.removeEventListener("mousemove", move);
|
|
9296
|
-
document.removeEventListener("mouseup", up);
|
|
9297
|
-
};
|
|
9298
|
-
document.addEventListener("mousemove", move);
|
|
9299
|
-
document.addEventListener("mouseup", up);
|
|
9300
|
-
var r = el.getBoundingClientRect();
|
|
9301
|
-
handleVolumeChange(Math.max(0, Math.min(1, (e.clientX - r.left) / r.width)));
|
|
9302
|
-
},
|
|
9303
|
-
onClick: function onClick(e) {
|
|
9304
|
-
e.stopPropagation();
|
|
9305
|
-
var r = e.currentTarget.getBoundingClientRect();
|
|
9306
|
-
handleVolumeChange(Math.max(0, Math.min(1, (e.clientX - r.left) / r.width)));
|
|
9307
|
-
},
|
|
9308
|
-
children: [
|
|
9309
|
-
/* @__PURE__ */ jsx("div", {
|
|
9310
|
-
style: {
|
|
9311
|
-
position: "absolute",
|
|
9312
|
-
inset: 0,
|
|
9313
|
-
background: "rgba(255, 255, 255, 0.2)",
|
|
9314
|
-
borderRadius: "1.5px"
|
|
9315
|
-
}
|
|
9316
|
-
}),
|
|
9317
|
-
/* @__PURE__ */ jsx("div", {
|
|
9318
|
-
style: {
|
|
9319
|
-
position: "absolute",
|
|
9320
|
-
top: 0,
|
|
9321
|
-
left: 0,
|
|
9322
|
-
bottom: 0,
|
|
9323
|
-
width: "".concat((isMuted ? 0 : volume) * 100, "%"),
|
|
9324
|
-
background: "#fff",
|
|
9325
|
-
borderRadius: "1.5px",
|
|
9326
|
-
transition: "width 0.1s ease-out"
|
|
9327
|
-
}
|
|
9328
|
-
}),
|
|
9329
|
-
/* @__PURE__ */ jsx("div", {
|
|
9330
|
-
style: {
|
|
9331
|
-
position: "absolute",
|
|
9332
|
-
top: "50%",
|
|
9333
|
-
left: "".concat((isMuted ? 0 : volume) * 100, "%"),
|
|
9334
|
-
transform: "translate(-50%, -50%)",
|
|
9335
|
-
width: "12px",
|
|
9336
|
-
height: "12px",
|
|
9337
|
-
background: "#fff",
|
|
9338
|
-
borderRadius: "50%",
|
|
9339
|
-
boxShadow: "0 0 3px rgba(0, 0, 0, 0.3)",
|
|
9340
|
-
transition: "left 0.1s ease-out"
|
|
9341
|
-
}
|
|
9342
|
-
})
|
|
9343
|
-
]
|
|
9344
9427
|
})
|
|
9345
9428
|
})
|
|
9346
9429
|
]
|
|
9347
|
-
}),
|
|
9348
|
-
/* @__PURE__ */ jsx("button", {
|
|
9349
|
-
className: "sc-ctrl-btn",
|
|
9350
|
-
onClick: function onClick() {
|
|
9351
|
-
if (onFullscreenToggle) {
|
|
9352
|
-
onFullscreenToggle();
|
|
9353
|
-
} else if (wrapperRef.current) {
|
|
9354
|
-
if (!document.fullscreenElement) {
|
|
9355
|
-
wrapperRef.current.requestFullscreen().catch(function() {});
|
|
9356
|
-
} else {
|
|
9357
|
-
document.exitFullscreen().catch(function() {});
|
|
9358
|
-
}
|
|
9359
|
-
}
|
|
9360
|
-
resetControlsTimer();
|
|
9361
|
-
},
|
|
9362
|
-
style: {
|
|
9363
|
-
padding: "".concat(8 * responsiveScale, "px"),
|
|
9364
|
-
borderRadius: "50%",
|
|
9365
|
-
minWidth: "".concat(36 * responsiveScale, "px"),
|
|
9366
|
-
minHeight: "".concat(36 * responsiveScale, "px"),
|
|
9367
|
-
background: "rgba(0, 0, 0, 0.6)"
|
|
9368
|
-
},
|
|
9369
|
-
title: isFullscreen ? "Exit Fullscreen" : "Enter Fullscreen",
|
|
9370
|
-
children: isFullscreen ? /* @__PURE__ */ jsx(FaCompress, {
|
|
9371
|
-
size: Math.max(14, 18 * responsiveScale)
|
|
9372
|
-
}) : /* @__PURE__ */ jsx(FaExpand, {
|
|
9373
|
-
size: Math.max(14, 18 * responsiveScale)
|
|
9374
|
-
})
|
|
9375
9430
|
})
|
|
9376
9431
|
]
|
|
9377
9432
|
}),
|