stormcloud-video-player 0.8.2 → 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 +184 -139
- 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 +184 -139
- package/lib/index.js.map +1 -1
- package/lib/player/StormcloudVideoPlayer.cjs +4 -4
- package/lib/player/StormcloudVideoPlayer.cjs.map +1 -1
- package/lib/player/StormcloudVideoPlayer.d.cts +1 -1
- package/lib/players/FilePlayer.cjs.map +1 -1
- package/lib/players/HlsPlayer.cjs +4 -4
- package/lib/players/HlsPlayer.cjs.map +1 -1
- package/lib/players/HlsPlayer.d.cts +1 -1
- package/lib/players/index.cjs +4 -4
- package/lib/players/index.cjs.map +1 -1
- package/lib/sdk/hlsAdPlayer.cjs.map +1 -1
- package/lib/sdk/hlsAdPlayer.d.cts +1 -1
- package/lib/sdk/pal.cjs.map +1 -1
- package/lib/{types-DDwAfBLt.d.cts → types-DWVgdqF-.d.cts} +1 -0
- package/lib/ui/StormcloudVideoPlayer.cjs +184 -139
- package/lib/ui/StormcloudVideoPlayer.cjs.map +1 -1
- package/lib/ui/StormcloudVideoPlayer.d.cts +1 -1
- package/lib/utils/browserCompat.cjs.map +1 -1
- package/lib/utils/polyfills.cjs.map +1 -1
- package/lib/utils/tracking.cjs.map +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,11 +2593,11 @@ 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 _ref, _this_config_minSegmentsBeforePlay, _this_hls_levels, _this_hls, prerollKey, adBehavior, minSegments, _this_video_play;
|
|
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
|
-
this.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) {
|
|
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
2601
|
var _level_details, _level_details1;
|
|
2602
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
2603
|
})) !== null && _ref !== void 0 ? _ref : false;
|
|
@@ -7307,6 +7307,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
|
7307
7307
|
var CRITICAL_PROPS = [
|
|
7308
7308
|
"src",
|
|
7309
7309
|
"allowNativeHls",
|
|
7310
|
+
"isLiveStream",
|
|
7310
7311
|
"licenseKey",
|
|
7311
7312
|
"vmapUrl",
|
|
7312
7313
|
"lowLatencyMode",
|
|
@@ -7316,12 +7317,13 @@ var CRITICAL_PROPS = [
|
|
|
7316
7317
|
var CONTROLS_HIDE_DELAY = 3e3;
|
|
7317
7318
|
var DEFAULT_PLAYER_ASPECT_RATIO = 16 / 9;
|
|
7318
7319
|
var StormcloudVideoPlayerComponent = React.memo(function(props) {
|
|
7319
|
-
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, [
|
|
7320
7321
|
"src",
|
|
7321
7322
|
"autoplay",
|
|
7322
7323
|
"muted",
|
|
7323
7324
|
"lowLatencyMode",
|
|
7324
7325
|
"allowNativeHls",
|
|
7326
|
+
"isLiveStream",
|
|
7325
7327
|
"driftToleranceMs",
|
|
7326
7328
|
"immediateManifestAds",
|
|
7327
7329
|
"debugAdTiming",
|
|
@@ -7475,7 +7477,7 @@ var StormcloudVideoPlayerComponent = React.memo(function(props) {
|
|
|
7475
7477
|
setShowSpeedMenu(false);
|
|
7476
7478
|
};
|
|
7477
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/"));
|
|
7478
|
-
var shouldShowEnhancedControls = showCustomControls && (isHlsStream ? allowNativeHls : true);
|
|
7480
|
+
var shouldShowEnhancedControls = showCustomControls && (isHlsStream ? allowNativeHls || isLiveStream === false : true);
|
|
7479
7481
|
var criticalPropsKey = useMemo(function() {
|
|
7480
7482
|
return CRITICAL_PROPS.map(function(prop) {
|
|
7481
7483
|
return "".concat(prop, ":").concat(props[prop]);
|
|
@@ -7483,6 +7485,7 @@ var StormcloudVideoPlayerComponent = React.memo(function(props) {
|
|
|
7483
7485
|
}, [
|
|
7484
7486
|
src,
|
|
7485
7487
|
allowNativeHls,
|
|
7488
|
+
isLiveStream,
|
|
7486
7489
|
licenseKey,
|
|
7487
7490
|
vmapUrl,
|
|
7488
7491
|
lowLatencyMode,
|
|
@@ -7517,6 +7520,7 @@ var StormcloudVideoPlayerComponent = React.memo(function(props) {
|
|
|
7517
7520
|
if (muted !== void 0) cfg.muted = muted;
|
|
7518
7521
|
if (lowLatencyMode !== void 0) cfg.lowLatencyMode = lowLatencyMode;
|
|
7519
7522
|
if (allowNativeHls !== void 0) cfg.allowNativeHls = allowNativeHls;
|
|
7523
|
+
if (isLiveStream !== void 0) cfg.isLiveStream = isLiveStream;
|
|
7520
7524
|
if (driftToleranceMs !== void 0) cfg.driftToleranceMs = driftToleranceMs;
|
|
7521
7525
|
if (immediateManifestAds !== void 0) cfg.immediateManifestAds = immediateManifestAds;
|
|
7522
7526
|
if (debugAdTiming !== void 0) cfg.debugAdTiming = debugAdTiming;
|
|
@@ -8355,161 +8359,202 @@ var StormcloudVideoPlayerComponent = React.memo(function(props) {
|
|
|
8355
8359
|
]
|
|
8356
8360
|
})
|
|
8357
8361
|
]
|
|
8358
|
-
}) : showCustomControls && !showLicenseWarning && /* @__PURE__ */ jsxs(
|
|
8359
|
-
className: "sc-controls-bar",
|
|
8360
|
-
style: {
|
|
8361
|
-
position: "absolute",
|
|
8362
|
-
bottom: "".concat(10 * responsiveScale, "px"),
|
|
8363
|
-
right: "".concat(10 * responsiveScale, "px"),
|
|
8364
|
-
display: "flex",
|
|
8365
|
-
flexDirection: isPortrait ? "column" : "row",
|
|
8366
|
-
gap: "".concat(8 * responsiveScale, "px"),
|
|
8367
|
-
zIndex: 10,
|
|
8368
|
-
opacity: controlsVisible ? 1 : 0,
|
|
8369
|
-
transform: controlsVisible ? "translateY(0)" : "translateY(4px)",
|
|
8370
|
-
pointerEvents: controlsVisible ? "auto" : "none"
|
|
8371
|
-
},
|
|
8362
|
+
}) : showCustomControls && !showLicenseWarning && /* @__PURE__ */ jsxs(Fragment, {
|
|
8372
8363
|
children: [
|
|
8373
8364
|
/* @__PURE__ */ jsxs("div", {
|
|
8374
8365
|
style: {
|
|
8366
|
+
position: "absolute",
|
|
8367
|
+
top: "".concat(10 * responsiveScale, "px"),
|
|
8368
|
+
left: "".concat(10 * responsiveScale, "px"),
|
|
8375
8369
|
display: "flex",
|
|
8376
8370
|
alignItems: "center",
|
|
8377
|
-
|
|
8378
|
-
|
|
8379
|
-
|
|
8380
|
-
|
|
8381
|
-
},
|
|
8382
|
-
onMouseEnter: function onMouseEnter() {
|
|
8383
|
-
return setShowVolumeSlider(true);
|
|
8371
|
+
gap: "6px",
|
|
8372
|
+
zIndex: 10,
|
|
8373
|
+
opacity: controlsVisible ? 1 : 0,
|
|
8374
|
+
transition: "opacity 0.35s ease"
|
|
8384
8375
|
},
|
|
8385
|
-
|
|
8386
|
-
|
|
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"
|
|
8387
8414
|
},
|
|
8388
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
|
+
}),
|
|
8389
8529
|
/* @__PURE__ */ jsx("button", {
|
|
8390
8530
|
className: "sc-ctrl-btn",
|
|
8391
8531
|
onClick: function onClick() {
|
|
8392
|
-
if (
|
|
8393
|
-
|
|
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
|
+
}
|
|
8394
8541
|
resetControlsTimer();
|
|
8395
8542
|
},
|
|
8396
8543
|
style: {
|
|
8397
8544
|
padding: "".concat(8 * responsiveScale, "px"),
|
|
8398
8545
|
borderRadius: "50%",
|
|
8399
8546
|
minWidth: "".concat(36 * responsiveScale, "px"),
|
|
8400
|
-
minHeight: "".concat(36 * responsiveScale, "px")
|
|
8547
|
+
minHeight: "".concat(36 * responsiveScale, "px"),
|
|
8548
|
+
background: "rgba(0, 0, 0, 0.6)"
|
|
8401
8549
|
},
|
|
8402
|
-
title:
|
|
8403
|
-
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, {
|
|
8404
8554
|
size: Math.max(14, 18 * responsiveScale)
|
|
8405
|
-
})
|
|
8406
|
-
}),
|
|
8407
|
-
/* @__PURE__ */ jsx("div", {
|
|
8408
|
-
style: {
|
|
8409
|
-
width: showVolumeSlider ? "".concat(68 * responsiveScale, "px") : "0px",
|
|
8410
|
-
overflow: "hidden",
|
|
8411
|
-
transition: "width 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
|
|
8412
|
-
display: "flex",
|
|
8413
|
-
alignItems: "center",
|
|
8414
|
-
paddingLeft: showVolumeSlider ? "".concat(3 * responsiveScale, "px") : "0",
|
|
8415
|
-
paddingRight: showVolumeSlider ? "".concat(10 * responsiveScale, "px") : "0"
|
|
8416
|
-
},
|
|
8417
|
-
children: /* @__PURE__ */ jsxs("div", {
|
|
8418
|
-
style: {
|
|
8419
|
-
position: "relative",
|
|
8420
|
-
width: "".concat(56 * responsiveScale, "px"),
|
|
8421
|
-
height: "3px",
|
|
8422
|
-
cursor: "pointer",
|
|
8423
|
-
borderRadius: "1.5px"
|
|
8424
|
-
},
|
|
8425
|
-
onMouseDown: function onMouseDown(e) {
|
|
8426
|
-
e.preventDefault();
|
|
8427
|
-
var el = e.currentTarget;
|
|
8428
|
-
var move = function move(ev) {
|
|
8429
|
-
var r2 = el.getBoundingClientRect();
|
|
8430
|
-
handleVolumeChange(Math.max(0, Math.min(1, (ev.clientX - r2.left) / r2.width)));
|
|
8431
|
-
};
|
|
8432
|
-
var up = function up1() {
|
|
8433
|
-
document.removeEventListener("mousemove", move);
|
|
8434
|
-
document.removeEventListener("mouseup", up);
|
|
8435
|
-
};
|
|
8436
|
-
document.addEventListener("mousemove", move);
|
|
8437
|
-
document.addEventListener("mouseup", up);
|
|
8438
|
-
var r = el.getBoundingClientRect();
|
|
8439
|
-
handleVolumeChange(Math.max(0, Math.min(1, (e.clientX - r.left) / r.width)));
|
|
8440
|
-
},
|
|
8441
|
-
onClick: function onClick(e) {
|
|
8442
|
-
e.stopPropagation();
|
|
8443
|
-
var r = e.currentTarget.getBoundingClientRect();
|
|
8444
|
-
handleVolumeChange(Math.max(0, Math.min(1, (e.clientX - r.left) / r.width)));
|
|
8445
|
-
},
|
|
8446
|
-
children: [
|
|
8447
|
-
/* @__PURE__ */ jsx("div", {
|
|
8448
|
-
style: {
|
|
8449
|
-
position: "absolute",
|
|
8450
|
-
inset: 0,
|
|
8451
|
-
background: "rgba(255, 255, 255, 0.2)",
|
|
8452
|
-
borderRadius: "1.5px"
|
|
8453
|
-
}
|
|
8454
|
-
}),
|
|
8455
|
-
/* @__PURE__ */ jsx("div", {
|
|
8456
|
-
style: {
|
|
8457
|
-
position: "absolute",
|
|
8458
|
-
top: 0,
|
|
8459
|
-
left: 0,
|
|
8460
|
-
bottom: 0,
|
|
8461
|
-
width: "".concat((isMuted ? 0 : volume) * 100, "%"),
|
|
8462
|
-
background: "#fff",
|
|
8463
|
-
borderRadius: "1.5px",
|
|
8464
|
-
transition: "width 0.1s ease-out"
|
|
8465
|
-
}
|
|
8466
|
-
}),
|
|
8467
|
-
/* @__PURE__ */ jsx("div", {
|
|
8468
|
-
style: {
|
|
8469
|
-
position: "absolute",
|
|
8470
|
-
top: "50%",
|
|
8471
|
-
left: "".concat((isMuted ? 0 : volume) * 100, "%"),
|
|
8472
|
-
transform: "translate(-50%, -50%)",
|
|
8473
|
-
width: "12px",
|
|
8474
|
-
height: "12px",
|
|
8475
|
-
background: "#fff",
|
|
8476
|
-
borderRadius: "50%",
|
|
8477
|
-
boxShadow: "0 0 3px rgba(0, 0, 0, 0.3)",
|
|
8478
|
-
transition: "left 0.1s ease-out"
|
|
8479
|
-
}
|
|
8480
|
-
})
|
|
8481
|
-
]
|
|
8482
8555
|
})
|
|
8483
8556
|
})
|
|
8484
8557
|
]
|
|
8485
|
-
}),
|
|
8486
|
-
/* @__PURE__ */ jsx("button", {
|
|
8487
|
-
className: "sc-ctrl-btn",
|
|
8488
|
-
onClick: function onClick() {
|
|
8489
|
-
if (onFullscreenToggle) {
|
|
8490
|
-
onFullscreenToggle();
|
|
8491
|
-
} else if (wrapperRef.current) {
|
|
8492
|
-
if (!document.fullscreenElement) {
|
|
8493
|
-
wrapperRef.current.requestFullscreen().catch(function() {});
|
|
8494
|
-
} else {
|
|
8495
|
-
document.exitFullscreen().catch(function() {});
|
|
8496
|
-
}
|
|
8497
|
-
}
|
|
8498
|
-
resetControlsTimer();
|
|
8499
|
-
},
|
|
8500
|
-
style: {
|
|
8501
|
-
padding: "".concat(8 * responsiveScale, "px"),
|
|
8502
|
-
borderRadius: "50%",
|
|
8503
|
-
minWidth: "".concat(36 * responsiveScale, "px"),
|
|
8504
|
-
minHeight: "".concat(36 * responsiveScale, "px"),
|
|
8505
|
-
background: "rgba(0, 0, 0, 0.6)"
|
|
8506
|
-
},
|
|
8507
|
-
title: isFullscreen ? "Exit Fullscreen" : "Enter Fullscreen",
|
|
8508
|
-
children: isFullscreen ? /* @__PURE__ */ jsx(FaCompress, {
|
|
8509
|
-
size: Math.max(14, 18 * responsiveScale)
|
|
8510
|
-
}) : /* @__PURE__ */ jsx(FaExpand, {
|
|
8511
|
-
size: Math.max(14, 18 * responsiveScale)
|
|
8512
|
-
})
|
|
8513
8558
|
})
|
|
8514
8559
|
]
|
|
8515
8560
|
}),
|