stormcloud-video-player 0.8.1 → 0.8.3
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/{types-DDwAfBLt.d.cts → types-DWVgdqF-.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
|
@@ -2491,7 +2491,7 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
|
|
|
2491
2491
|
key: "load",
|
|
2492
2492
|
value: function load() {
|
|
2493
2493
|
return _async_to_generator(function() {
|
|
2494
|
-
var _this, _this_config_lowLatencyMode, error, _this_config_lowLatencyMode1, _this_video_play;
|
|
2494
|
+
var _this, _this_config_lowLatencyMode, error, _this_config_isLiveStream, _this_config_lowLatencyMode1, _this_video_play;
|
|
2495
2495
|
return _ts_generator(this, function(_state) {
|
|
2496
2496
|
switch(_state.label){
|
|
2497
2497
|
case 0:
|
|
@@ -2542,7 +2542,7 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
|
|
|
2542
2542
|
this.nativeHlsMode = true;
|
|
2543
2543
|
this.videoSrcProtection = this.config.src;
|
|
2544
2544
|
this.video.src = this.config.src;
|
|
2545
|
-
this.isLiveStream = (_this_config_lowLatencyMode1 = this.config.lowLatencyMode) !== null && _this_config_lowLatencyMode1 !== void 0 ? _this_config_lowLatencyMode1 : false;
|
|
2545
|
+
this.isLiveStream = (_this_config_isLiveStream = this.config.isLiveStream) !== null && _this_config_isLiveStream !== void 0 ? _this_config_isLiveStream : (_this_config_lowLatencyMode1 = this.config.lowLatencyMode) !== null && _this_config_lowLatencyMode1 !== void 0 ? _this_config_lowLatencyMode1 : false;
|
|
2546
2546
|
if (this.config.debugAdTiming) {
|
|
2547
2547
|
console.log("[StormcloudVideoPlayer] Using native HLS playback - VOD mode:", {
|
|
2548
2548
|
isLive: this.isLiveStream,
|
|
@@ -2593,19 +2593,28 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
|
|
|
2593
2593
|
});
|
|
2594
2594
|
this.hls.on(Hls2.Events.MANIFEST_PARSED, function(_, data) {
|
|
2595
2595
|
return _async_to_generator(function() {
|
|
2596
|
-
var
|
|
2596
|
+
var _this_config_isLiveStream, _ref, _this_config_minSegmentsBeforePlay, _this_hls_levels, _this_hls, prerollKey, adBehavior, minSegments, _this_video_play;
|
|
2597
2597
|
return _ts_generator(this, function(_state) {
|
|
2598
2598
|
switch(_state.label){
|
|
2599
2599
|
case 0:
|
|
2600
|
-
|
|
2601
|
-
|
|
2602
|
-
|
|
2603
|
-
|
|
2604
|
-
|
|
2605
|
-
|
|
2606
|
-
|
|
2607
|
-
|
|
2608
|
-
|
|
2600
|
+
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) {
|
|
2601
|
+
var _level_details, _level_details1;
|
|
2602
|
+
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";
|
|
2603
|
+
})) !== null && _ref !== void 0 ? _ref : false;
|
|
2604
|
+
if (!this.isLiveStream && this.vmapBreaks.length === 0 && this.apiVastTagUrl) {
|
|
2605
|
+
prerollKey = "synthetic-vod-preroll";
|
|
2606
|
+
if (!this.consumedVmapBreakIds.has(prerollKey)) {
|
|
2607
|
+
this.vmapBreaks = [
|
|
2608
|
+
{
|
|
2609
|
+
id: prerollKey,
|
|
2610
|
+
startTimeMs: 0,
|
|
2611
|
+
vastTagUrl: this.apiVastTagUrl
|
|
2612
|
+
}
|
|
2613
|
+
];
|
|
2614
|
+
if (this.config.debugAdTiming) {
|
|
2615
|
+
console.log("[StormcloudVideoPlayer] Injected synthetic VOD preroll from apiVastTagUrl");
|
|
2616
|
+
}
|
|
2617
|
+
}
|
|
2609
2618
|
}
|
|
2610
2619
|
if (this.config.debugAdTiming) {
|
|
2611
2620
|
adBehavior = this.shouldContinueLiveStreamDuringAds() ? "live (main video continues muted during ads)" : "vod (main video pauses during ads)";
|
|
@@ -7061,7 +7070,8 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
|
|
|
7061
7070
|
continue;
|
|
7062
7071
|
}
|
|
7063
7072
|
var end = breakStartMs + (b.durationMs || 0);
|
|
7064
|
-
|
|
7073
|
+
var effectiveTol = breakStartMs === 0 ? Math.max(tol, 3e4) : tol;
|
|
7074
|
+
if (nowMs >= breakStartMs && (b.durationMs ? nowMs < end : nowMs <= breakStartMs + effectiveTol)) {
|
|
7065
7075
|
return b;
|
|
7066
7076
|
}
|
|
7067
7077
|
}
|
|
@@ -7297,6 +7307,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
|
7297
7307
|
var CRITICAL_PROPS = [
|
|
7298
7308
|
"src",
|
|
7299
7309
|
"allowNativeHls",
|
|
7310
|
+
"isLiveStream",
|
|
7300
7311
|
"licenseKey",
|
|
7301
7312
|
"vmapUrl",
|
|
7302
7313
|
"lowLatencyMode",
|
|
@@ -7306,12 +7317,13 @@ var CRITICAL_PROPS = [
|
|
|
7306
7317
|
var CONTROLS_HIDE_DELAY = 3e3;
|
|
7307
7318
|
var DEFAULT_PLAYER_ASPECT_RATIO = 16 / 9;
|
|
7308
7319
|
var StormcloudVideoPlayerComponent = React.memo(function(props) {
|
|
7309
|
-
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, minSegmentsBeforePlay = props.minSegmentsBeforePlay, restVideoAttrs = _object_without_properties(props, [
|
|
7320
|
+
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, minSegmentsBeforePlay = props.minSegmentsBeforePlay, restVideoAttrs = _object_without_properties(props, [
|
|
7310
7321
|
"src",
|
|
7311
7322
|
"autoplay",
|
|
7312
7323
|
"muted",
|
|
7313
7324
|
"lowLatencyMode",
|
|
7314
7325
|
"allowNativeHls",
|
|
7326
|
+
"isLiveStream",
|
|
7315
7327
|
"driftToleranceMs",
|
|
7316
7328
|
"immediateManifestAds",
|
|
7317
7329
|
"debugAdTiming",
|
|
@@ -7465,7 +7477,7 @@ var StormcloudVideoPlayerComponent = React.memo(function(props) {
|
|
|
7465
7477
|
setShowSpeedMenu(false);
|
|
7466
7478
|
};
|
|
7467
7479
|
var isHlsStream = (src === null || src === void 0 ? void 0 : src.toLowerCase().includes(".m3u8")) || (src === null || src === void 0 ? void 0 : src.toLowerCase().includes("/hls/"));
|
|
7468
|
-
var shouldShowEnhancedControls = showCustomControls && (isHlsStream ? allowNativeHls : true);
|
|
7480
|
+
var shouldShowEnhancedControls = showCustomControls && (isHlsStream ? allowNativeHls || isLiveStream === false : true);
|
|
7469
7481
|
var criticalPropsKey = useMemo(function() {
|
|
7470
7482
|
return CRITICAL_PROPS.map(function(prop) {
|
|
7471
7483
|
return "".concat(prop, ":").concat(props[prop]);
|
|
@@ -7473,6 +7485,7 @@ var StormcloudVideoPlayerComponent = React.memo(function(props) {
|
|
|
7473
7485
|
}, [
|
|
7474
7486
|
src,
|
|
7475
7487
|
allowNativeHls,
|
|
7488
|
+
isLiveStream,
|
|
7476
7489
|
licenseKey,
|
|
7477
7490
|
vmapUrl,
|
|
7478
7491
|
lowLatencyMode,
|
|
@@ -7507,6 +7520,7 @@ var StormcloudVideoPlayerComponent = React.memo(function(props) {
|
|
|
7507
7520
|
if (muted !== void 0) cfg.muted = muted;
|
|
7508
7521
|
if (lowLatencyMode !== void 0) cfg.lowLatencyMode = lowLatencyMode;
|
|
7509
7522
|
if (allowNativeHls !== void 0) cfg.allowNativeHls = allowNativeHls;
|
|
7523
|
+
if (isLiveStream !== void 0) cfg.isLiveStream = isLiveStream;
|
|
7510
7524
|
if (driftToleranceMs !== void 0) cfg.driftToleranceMs = driftToleranceMs;
|
|
7511
7525
|
if (immediateManifestAds !== void 0) cfg.immediateManifestAds = immediateManifestAds;
|
|
7512
7526
|
if (debugAdTiming !== void 0) cfg.debugAdTiming = debugAdTiming;
|
|
@@ -8345,161 +8359,202 @@ var StormcloudVideoPlayerComponent = React.memo(function(props) {
|
|
|
8345
8359
|
]
|
|
8346
8360
|
})
|
|
8347
8361
|
]
|
|
8348
|
-
}) : showCustomControls && !showLicenseWarning && /* @__PURE__ */ jsxs(
|
|
8349
|
-
className: "sc-controls-bar",
|
|
8350
|
-
style: {
|
|
8351
|
-
position: "absolute",
|
|
8352
|
-
bottom: "".concat(10 * responsiveScale, "px"),
|
|
8353
|
-
right: "".concat(10 * responsiveScale, "px"),
|
|
8354
|
-
display: "flex",
|
|
8355
|
-
flexDirection: isPortrait ? "column" : "row",
|
|
8356
|
-
gap: "".concat(8 * responsiveScale, "px"),
|
|
8357
|
-
zIndex: 10,
|
|
8358
|
-
opacity: controlsVisible ? 1 : 0,
|
|
8359
|
-
transform: controlsVisible ? "translateY(0)" : "translateY(4px)",
|
|
8360
|
-
pointerEvents: controlsVisible ? "auto" : "none"
|
|
8361
|
-
},
|
|
8362
|
+
}) : showCustomControls && !showLicenseWarning && /* @__PURE__ */ jsxs(Fragment, {
|
|
8362
8363
|
children: [
|
|
8363
8364
|
/* @__PURE__ */ jsxs("div", {
|
|
8364
8365
|
style: {
|
|
8366
|
+
position: "absolute",
|
|
8367
|
+
top: "".concat(10 * responsiveScale, "px"),
|
|
8368
|
+
left: "".concat(10 * responsiveScale, "px"),
|
|
8365
8369
|
display: "flex",
|
|
8366
8370
|
alignItems: "center",
|
|
8367
|
-
|
|
8368
|
-
|
|
8369
|
-
|
|
8370
|
-
|
|
8371
|
-
},
|
|
8372
|
-
onMouseEnter: function onMouseEnter() {
|
|
8373
|
-
return setShowVolumeSlider(true);
|
|
8371
|
+
gap: "6px",
|
|
8372
|
+
zIndex: 10,
|
|
8373
|
+
opacity: controlsVisible ? 1 : 0,
|
|
8374
|
+
transition: "opacity 0.35s ease"
|
|
8374
8375
|
},
|
|
8375
|
-
|
|
8376
|
-
|
|
8376
|
+
children: [
|
|
8377
|
+
/* @__PURE__ */ jsx("div", {
|
|
8378
|
+
style: {
|
|
8379
|
+
width: "8px",
|
|
8380
|
+
height: "8px",
|
|
8381
|
+
borderRadius: "50%",
|
|
8382
|
+
background: "#ff3b30",
|
|
8383
|
+
animation: "sc-pulse 1.5s ease-in-out infinite",
|
|
8384
|
+
flexShrink: 0
|
|
8385
|
+
}
|
|
8386
|
+
}),
|
|
8387
|
+
/* @__PURE__ */ jsx("span", {
|
|
8388
|
+
style: {
|
|
8389
|
+
fontSize: "".concat(12 * responsiveScale, "px"),
|
|
8390
|
+
fontFamily: "'SF Pro Display', 'Segoe UI', Arial, sans-serif",
|
|
8391
|
+
fontWeight: 700,
|
|
8392
|
+
letterSpacing: "0.08em",
|
|
8393
|
+
color: "#fff",
|
|
8394
|
+
textShadow: "0 1px 3px rgba(0,0,0,0.6)",
|
|
8395
|
+
userSelect: "none"
|
|
8396
|
+
},
|
|
8397
|
+
children: "LIVE"
|
|
8398
|
+
})
|
|
8399
|
+
]
|
|
8400
|
+
}),
|
|
8401
|
+
/* @__PURE__ */ jsxs("div", {
|
|
8402
|
+
className: "sc-controls-bar",
|
|
8403
|
+
style: {
|
|
8404
|
+
position: "absolute",
|
|
8405
|
+
bottom: "".concat(10 * responsiveScale, "px"),
|
|
8406
|
+
right: "".concat(10 * responsiveScale, "px"),
|
|
8407
|
+
display: "flex",
|
|
8408
|
+
flexDirection: isPortrait ? "column" : "row",
|
|
8409
|
+
gap: "".concat(8 * responsiveScale, "px"),
|
|
8410
|
+
zIndex: 10,
|
|
8411
|
+
opacity: controlsVisible ? 1 : 0,
|
|
8412
|
+
transform: controlsVisible ? "translateY(0)" : "translateY(4px)",
|
|
8413
|
+
pointerEvents: controlsVisible ? "auto" : "none"
|
|
8377
8414
|
},
|
|
8378
8415
|
children: [
|
|
8416
|
+
/* @__PURE__ */ jsxs("div", {
|
|
8417
|
+
style: {
|
|
8418
|
+
display: "flex",
|
|
8419
|
+
alignItems: "center",
|
|
8420
|
+
background: "rgba(0, 0, 0, 0.6)",
|
|
8421
|
+
borderRadius: "".concat(18 * responsiveScale, "px"),
|
|
8422
|
+
padding: "2px",
|
|
8423
|
+
paddingRight: "".concat(8 * responsiveScale, "px")
|
|
8424
|
+
},
|
|
8425
|
+
onMouseEnter: function onMouseEnter() {
|
|
8426
|
+
return setShowVolumeSlider(true);
|
|
8427
|
+
},
|
|
8428
|
+
onMouseLeave: function onMouseLeave() {
|
|
8429
|
+
return setShowVolumeSlider(false);
|
|
8430
|
+
},
|
|
8431
|
+
children: [
|
|
8432
|
+
/* @__PURE__ */ jsx("button", {
|
|
8433
|
+
className: "sc-ctrl-btn",
|
|
8434
|
+
onClick: function onClick() {
|
|
8435
|
+
if (playerRef.current) playerRef.current.toggleMute();
|
|
8436
|
+
onVolumeToggle === null || onVolumeToggle === void 0 ? void 0 : onVolumeToggle();
|
|
8437
|
+
resetControlsTimer();
|
|
8438
|
+
},
|
|
8439
|
+
style: {
|
|
8440
|
+
padding: "".concat(8 * responsiveScale, "px"),
|
|
8441
|
+
borderRadius: "50%",
|
|
8442
|
+
minWidth: "".concat(36 * responsiveScale, "px"),
|
|
8443
|
+
minHeight: "".concat(36 * responsiveScale, "px")
|
|
8444
|
+
},
|
|
8445
|
+
title: isMuted ? "Unmute" : "Mute",
|
|
8446
|
+
children: /* @__PURE__ */ jsx(VolumeIcon, {
|
|
8447
|
+
size: Math.max(14, 18 * responsiveScale)
|
|
8448
|
+
})
|
|
8449
|
+
}),
|
|
8450
|
+
/* @__PURE__ */ jsx("div", {
|
|
8451
|
+
style: {
|
|
8452
|
+
width: showVolumeSlider ? "".concat(68 * responsiveScale, "px") : "0px",
|
|
8453
|
+
overflow: "hidden",
|
|
8454
|
+
transition: "width 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
|
|
8455
|
+
display: "flex",
|
|
8456
|
+
alignItems: "center",
|
|
8457
|
+
paddingLeft: showVolumeSlider ? "".concat(3 * responsiveScale, "px") : "0",
|
|
8458
|
+
paddingRight: showVolumeSlider ? "".concat(10 * responsiveScale, "px") : "0"
|
|
8459
|
+
},
|
|
8460
|
+
children: /* @__PURE__ */ jsxs("div", {
|
|
8461
|
+
style: {
|
|
8462
|
+
position: "relative",
|
|
8463
|
+
width: "".concat(56 * responsiveScale, "px"),
|
|
8464
|
+
height: "3px",
|
|
8465
|
+
cursor: "pointer",
|
|
8466
|
+
borderRadius: "1.5px"
|
|
8467
|
+
},
|
|
8468
|
+
onMouseDown: function onMouseDown(e) {
|
|
8469
|
+
e.preventDefault();
|
|
8470
|
+
var el = e.currentTarget;
|
|
8471
|
+
var move = function move(ev) {
|
|
8472
|
+
var r2 = el.getBoundingClientRect();
|
|
8473
|
+
handleVolumeChange(Math.max(0, Math.min(1, (ev.clientX - r2.left) / r2.width)));
|
|
8474
|
+
};
|
|
8475
|
+
var up = function up1() {
|
|
8476
|
+
document.removeEventListener("mousemove", move);
|
|
8477
|
+
document.removeEventListener("mouseup", up);
|
|
8478
|
+
};
|
|
8479
|
+
document.addEventListener("mousemove", move);
|
|
8480
|
+
document.addEventListener("mouseup", up);
|
|
8481
|
+
var r = el.getBoundingClientRect();
|
|
8482
|
+
handleVolumeChange(Math.max(0, Math.min(1, (e.clientX - r.left) / r.width)));
|
|
8483
|
+
},
|
|
8484
|
+
onClick: function onClick(e) {
|
|
8485
|
+
e.stopPropagation();
|
|
8486
|
+
var r = e.currentTarget.getBoundingClientRect();
|
|
8487
|
+
handleVolumeChange(Math.max(0, Math.min(1, (e.clientX - r.left) / r.width)));
|
|
8488
|
+
},
|
|
8489
|
+
children: [
|
|
8490
|
+
/* @__PURE__ */ jsx("div", {
|
|
8491
|
+
style: {
|
|
8492
|
+
position: "absolute",
|
|
8493
|
+
inset: 0,
|
|
8494
|
+
background: "rgba(255, 255, 255, 0.2)",
|
|
8495
|
+
borderRadius: "1.5px"
|
|
8496
|
+
}
|
|
8497
|
+
}),
|
|
8498
|
+
/* @__PURE__ */ jsx("div", {
|
|
8499
|
+
style: {
|
|
8500
|
+
position: "absolute",
|
|
8501
|
+
top: 0,
|
|
8502
|
+
left: 0,
|
|
8503
|
+
bottom: 0,
|
|
8504
|
+
width: "".concat((isMuted ? 0 : volume) * 100, "%"),
|
|
8505
|
+
background: "#fff",
|
|
8506
|
+
borderRadius: "1.5px",
|
|
8507
|
+
transition: "width 0.1s ease-out"
|
|
8508
|
+
}
|
|
8509
|
+
}),
|
|
8510
|
+
/* @__PURE__ */ jsx("div", {
|
|
8511
|
+
style: {
|
|
8512
|
+
position: "absolute",
|
|
8513
|
+
top: "50%",
|
|
8514
|
+
left: "".concat((isMuted ? 0 : volume) * 100, "%"),
|
|
8515
|
+
transform: "translate(-50%, -50%)",
|
|
8516
|
+
width: "12px",
|
|
8517
|
+
height: "12px",
|
|
8518
|
+
background: "#fff",
|
|
8519
|
+
borderRadius: "50%",
|
|
8520
|
+
boxShadow: "0 0 3px rgba(0, 0, 0, 0.3)",
|
|
8521
|
+
transition: "left 0.1s ease-out"
|
|
8522
|
+
}
|
|
8523
|
+
})
|
|
8524
|
+
]
|
|
8525
|
+
})
|
|
8526
|
+
})
|
|
8527
|
+
]
|
|
8528
|
+
}),
|
|
8379
8529
|
/* @__PURE__ */ jsx("button", {
|
|
8380
8530
|
className: "sc-ctrl-btn",
|
|
8381
8531
|
onClick: function onClick() {
|
|
8382
|
-
if (
|
|
8383
|
-
|
|
8532
|
+
if (onFullscreenToggle) {
|
|
8533
|
+
onFullscreenToggle();
|
|
8534
|
+
} else if (wrapperRef.current) {
|
|
8535
|
+
if (!document.fullscreenElement) {
|
|
8536
|
+
wrapperRef.current.requestFullscreen().catch(function() {});
|
|
8537
|
+
} else {
|
|
8538
|
+
document.exitFullscreen().catch(function() {});
|
|
8539
|
+
}
|
|
8540
|
+
}
|
|
8384
8541
|
resetControlsTimer();
|
|
8385
8542
|
},
|
|
8386
8543
|
style: {
|
|
8387
8544
|
padding: "".concat(8 * responsiveScale, "px"),
|
|
8388
8545
|
borderRadius: "50%",
|
|
8389
8546
|
minWidth: "".concat(36 * responsiveScale, "px"),
|
|
8390
|
-
minHeight: "".concat(36 * responsiveScale, "px")
|
|
8547
|
+
minHeight: "".concat(36 * responsiveScale, "px"),
|
|
8548
|
+
background: "rgba(0, 0, 0, 0.6)"
|
|
8391
8549
|
},
|
|
8392
|
-
title:
|
|
8393
|
-
children: /* @__PURE__ */ jsx(
|
|
8550
|
+
title: isFullscreen ? "Exit Fullscreen" : "Enter Fullscreen",
|
|
8551
|
+
children: isFullscreen ? /* @__PURE__ */ jsx(FaCompress, {
|
|
8552
|
+
size: Math.max(14, 18 * responsiveScale)
|
|
8553
|
+
}) : /* @__PURE__ */ jsx(FaExpand, {
|
|
8394
8554
|
size: Math.max(14, 18 * responsiveScale)
|
|
8395
|
-
})
|
|
8396
|
-
}),
|
|
8397
|
-
/* @__PURE__ */ jsx("div", {
|
|
8398
|
-
style: {
|
|
8399
|
-
width: showVolumeSlider ? "".concat(68 * responsiveScale, "px") : "0px",
|
|
8400
|
-
overflow: "hidden",
|
|
8401
|
-
transition: "width 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
|
|
8402
|
-
display: "flex",
|
|
8403
|
-
alignItems: "center",
|
|
8404
|
-
paddingLeft: showVolumeSlider ? "".concat(3 * responsiveScale, "px") : "0",
|
|
8405
|
-
paddingRight: showVolumeSlider ? "".concat(10 * responsiveScale, "px") : "0"
|
|
8406
|
-
},
|
|
8407
|
-
children: /* @__PURE__ */ jsxs("div", {
|
|
8408
|
-
style: {
|
|
8409
|
-
position: "relative",
|
|
8410
|
-
width: "".concat(56 * responsiveScale, "px"),
|
|
8411
|
-
height: "3px",
|
|
8412
|
-
cursor: "pointer",
|
|
8413
|
-
borderRadius: "1.5px"
|
|
8414
|
-
},
|
|
8415
|
-
onMouseDown: function onMouseDown(e) {
|
|
8416
|
-
e.preventDefault();
|
|
8417
|
-
var el = e.currentTarget;
|
|
8418
|
-
var move = function move(ev) {
|
|
8419
|
-
var r2 = el.getBoundingClientRect();
|
|
8420
|
-
handleVolumeChange(Math.max(0, Math.min(1, (ev.clientX - r2.left) / r2.width)));
|
|
8421
|
-
};
|
|
8422
|
-
var up = function up1() {
|
|
8423
|
-
document.removeEventListener("mousemove", move);
|
|
8424
|
-
document.removeEventListener("mouseup", up);
|
|
8425
|
-
};
|
|
8426
|
-
document.addEventListener("mousemove", move);
|
|
8427
|
-
document.addEventListener("mouseup", up);
|
|
8428
|
-
var r = el.getBoundingClientRect();
|
|
8429
|
-
handleVolumeChange(Math.max(0, Math.min(1, (e.clientX - r.left) / r.width)));
|
|
8430
|
-
},
|
|
8431
|
-
onClick: function onClick(e) {
|
|
8432
|
-
e.stopPropagation();
|
|
8433
|
-
var r = e.currentTarget.getBoundingClientRect();
|
|
8434
|
-
handleVolumeChange(Math.max(0, Math.min(1, (e.clientX - r.left) / r.width)));
|
|
8435
|
-
},
|
|
8436
|
-
children: [
|
|
8437
|
-
/* @__PURE__ */ jsx("div", {
|
|
8438
|
-
style: {
|
|
8439
|
-
position: "absolute",
|
|
8440
|
-
inset: 0,
|
|
8441
|
-
background: "rgba(255, 255, 255, 0.2)",
|
|
8442
|
-
borderRadius: "1.5px"
|
|
8443
|
-
}
|
|
8444
|
-
}),
|
|
8445
|
-
/* @__PURE__ */ jsx("div", {
|
|
8446
|
-
style: {
|
|
8447
|
-
position: "absolute",
|
|
8448
|
-
top: 0,
|
|
8449
|
-
left: 0,
|
|
8450
|
-
bottom: 0,
|
|
8451
|
-
width: "".concat((isMuted ? 0 : volume) * 100, "%"),
|
|
8452
|
-
background: "#fff",
|
|
8453
|
-
borderRadius: "1.5px",
|
|
8454
|
-
transition: "width 0.1s ease-out"
|
|
8455
|
-
}
|
|
8456
|
-
}),
|
|
8457
|
-
/* @__PURE__ */ jsx("div", {
|
|
8458
|
-
style: {
|
|
8459
|
-
position: "absolute",
|
|
8460
|
-
top: "50%",
|
|
8461
|
-
left: "".concat((isMuted ? 0 : volume) * 100, "%"),
|
|
8462
|
-
transform: "translate(-50%, -50%)",
|
|
8463
|
-
width: "12px",
|
|
8464
|
-
height: "12px",
|
|
8465
|
-
background: "#fff",
|
|
8466
|
-
borderRadius: "50%",
|
|
8467
|
-
boxShadow: "0 0 3px rgba(0, 0, 0, 0.3)",
|
|
8468
|
-
transition: "left 0.1s ease-out"
|
|
8469
|
-
}
|
|
8470
|
-
})
|
|
8471
|
-
]
|
|
8472
8555
|
})
|
|
8473
8556
|
})
|
|
8474
8557
|
]
|
|
8475
|
-
}),
|
|
8476
|
-
/* @__PURE__ */ jsx("button", {
|
|
8477
|
-
className: "sc-ctrl-btn",
|
|
8478
|
-
onClick: function onClick() {
|
|
8479
|
-
if (onFullscreenToggle) {
|
|
8480
|
-
onFullscreenToggle();
|
|
8481
|
-
} else if (wrapperRef.current) {
|
|
8482
|
-
if (!document.fullscreenElement) {
|
|
8483
|
-
wrapperRef.current.requestFullscreen().catch(function() {});
|
|
8484
|
-
} else {
|
|
8485
|
-
document.exitFullscreen().catch(function() {});
|
|
8486
|
-
}
|
|
8487
|
-
}
|
|
8488
|
-
resetControlsTimer();
|
|
8489
|
-
},
|
|
8490
|
-
style: {
|
|
8491
|
-
padding: "".concat(8 * responsiveScale, "px"),
|
|
8492
|
-
borderRadius: "50%",
|
|
8493
|
-
minWidth: "".concat(36 * responsiveScale, "px"),
|
|
8494
|
-
minHeight: "".concat(36 * responsiveScale, "px"),
|
|
8495
|
-
background: "rgba(0, 0, 0, 0.6)"
|
|
8496
|
-
},
|
|
8497
|
-
title: isFullscreen ? "Exit Fullscreen" : "Enter Fullscreen",
|
|
8498
|
-
children: isFullscreen ? /* @__PURE__ */ jsx(FaCompress, {
|
|
8499
|
-
size: Math.max(14, 18 * responsiveScale)
|
|
8500
|
-
}) : /* @__PURE__ */ jsx(FaExpand, {
|
|
8501
|
-
size: Math.max(14, 18 * responsiveScale)
|
|
8502
|
-
})
|
|
8503
8558
|
})
|
|
8504
8559
|
]
|
|
8505
8560
|
}),
|