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.cjs
CHANGED
|
@@ -3563,7 +3563,7 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
|
|
|
3563
3563
|
key: "load",
|
|
3564
3564
|
value: function load() {
|
|
3565
3565
|
return _async_to_generator(function() {
|
|
3566
|
-
var _this, error, _this_config_lowLatencyMode, _this_video_play;
|
|
3566
|
+
var _this, error, _this_config_isLiveStream, _this_config_lowLatencyMode, _this_video_play;
|
|
3567
3567
|
return _ts_generator(this, function(_state) {
|
|
3568
3568
|
switch(_state.label){
|
|
3569
3569
|
case 0:
|
|
@@ -3607,7 +3607,7 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
|
|
|
3607
3607
|
this.nativeHlsMode = true;
|
|
3608
3608
|
this.videoSrcProtection = this.config.src;
|
|
3609
3609
|
this.video.src = this.config.src;
|
|
3610
|
-
this.isLiveStream = (_this_config_lowLatencyMode = this.config.lowLatencyMode) !== null && _this_config_lowLatencyMode !== void 0 ? _this_config_lowLatencyMode : false;
|
|
3610
|
+
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;
|
|
3611
3611
|
if (this.config.debugAdTiming) {
|
|
3612
3612
|
console.log("[StormcloudVideoPlayer] Using native HLS playback - VOD mode:", {
|
|
3613
3613
|
isLive: this.isLiveStream,
|
|
@@ -3658,19 +3658,28 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
|
|
|
3658
3658
|
});
|
|
3659
3659
|
this.hls.on(import_hls2.default.Events.MANIFEST_PARSED, function(_, data) {
|
|
3660
3660
|
return _async_to_generator(function() {
|
|
3661
|
-
var
|
|
3661
|
+
var _this_config_isLiveStream, _ref, _this_config_minSegmentsBeforePlay, _this_hls_levels, _this_hls, prerollKey, adBehavior, minSegments, _this_video_play;
|
|
3662
3662
|
return _ts_generator(this, function(_state) {
|
|
3663
3663
|
switch(_state.label){
|
|
3664
3664
|
case 0:
|
|
3665
|
-
|
|
3666
|
-
|
|
3667
|
-
|
|
3668
|
-
|
|
3669
|
-
|
|
3670
|
-
|
|
3671
|
-
|
|
3672
|
-
|
|
3673
|
-
|
|
3665
|
+
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) {
|
|
3666
|
+
var _level_details, _level_details1;
|
|
3667
|
+
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";
|
|
3668
|
+
})) !== null && _ref !== void 0 ? _ref : false;
|
|
3669
|
+
if (!this.isLiveStream && this.vmapBreaks.length === 0 && this.apiVastTagUrl) {
|
|
3670
|
+
prerollKey = "synthetic-vod-preroll";
|
|
3671
|
+
if (!this.consumedVmapBreakIds.has(prerollKey)) {
|
|
3672
|
+
this.vmapBreaks = [
|
|
3673
|
+
{
|
|
3674
|
+
id: prerollKey,
|
|
3675
|
+
startTimeMs: 0,
|
|
3676
|
+
vastTagUrl: this.apiVastTagUrl
|
|
3677
|
+
}
|
|
3678
|
+
];
|
|
3679
|
+
if (this.config.debugAdTiming) {
|
|
3680
|
+
console.log("[StormcloudVideoPlayer] Injected synthetic VOD preroll from apiVastTagUrl");
|
|
3681
|
+
}
|
|
3682
|
+
}
|
|
3674
3683
|
}
|
|
3675
3684
|
if (this.config.debugAdTiming) {
|
|
3676
3685
|
adBehavior = this.shouldContinueLiveStreamDuringAds() ? "live (main video continues muted during ads)" : "vod (main video pauses during ads)";
|
|
@@ -8108,7 +8117,8 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
|
|
|
8108
8117
|
continue;
|
|
8109
8118
|
}
|
|
8110
8119
|
var end = breakStartMs + (b.durationMs || 0);
|
|
8111
|
-
|
|
8120
|
+
var effectiveTol = breakStartMs === 0 ? Math.max(tol, 3e4) : tol;
|
|
8121
|
+
if (nowMs >= breakStartMs && (b.durationMs ? nowMs < end : nowMs <= breakStartMs + effectiveTol)) {
|
|
8112
8122
|
return b;
|
|
8113
8123
|
}
|
|
8114
8124
|
}
|
|
@@ -8339,6 +8349,7 @@ var import_jsx_runtime = require("react/jsx-runtime");
|
|
|
8339
8349
|
var CRITICAL_PROPS = [
|
|
8340
8350
|
"src",
|
|
8341
8351
|
"allowNativeHls",
|
|
8352
|
+
"isLiveStream",
|
|
8342
8353
|
"licenseKey",
|
|
8343
8354
|
"vmapUrl",
|
|
8344
8355
|
"lowLatencyMode",
|
|
@@ -8348,12 +8359,13 @@ var CRITICAL_PROPS = [
|
|
|
8348
8359
|
var CONTROLS_HIDE_DELAY = 3e3;
|
|
8349
8360
|
var DEFAULT_PLAYER_ASPECT_RATIO = 16 / 9;
|
|
8350
8361
|
var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
|
|
8351
|
-
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, [
|
|
8362
|
+
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, [
|
|
8352
8363
|
"src",
|
|
8353
8364
|
"autoplay",
|
|
8354
8365
|
"muted",
|
|
8355
8366
|
"lowLatencyMode",
|
|
8356
8367
|
"allowNativeHls",
|
|
8368
|
+
"isLiveStream",
|
|
8357
8369
|
"driftToleranceMs",
|
|
8358
8370
|
"immediateManifestAds",
|
|
8359
8371
|
"debugAdTiming",
|
|
@@ -8508,7 +8520,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
|
|
|
8508
8520
|
setShowSpeedMenu(false);
|
|
8509
8521
|
};
|
|
8510
8522
|
var isHlsStream = (src === null || src === void 0 ? void 0 : src.toLowerCase().includes(".m3u8")) || (src === null || src === void 0 ? void 0 : src.toLowerCase().includes("/hls/"));
|
|
8511
|
-
var shouldShowEnhancedControls = showCustomControls && (isHlsStream ? allowNativeHls : true);
|
|
8523
|
+
var shouldShowEnhancedControls = showCustomControls && (isHlsStream ? allowNativeHls || isLiveStream === false : true);
|
|
8512
8524
|
var criticalPropsKey = (0, import_react.useMemo)(function() {
|
|
8513
8525
|
return CRITICAL_PROPS.map(function(prop) {
|
|
8514
8526
|
return "".concat(prop, ":").concat(props[prop]);
|
|
@@ -8516,6 +8528,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
|
|
|
8516
8528
|
}, [
|
|
8517
8529
|
src,
|
|
8518
8530
|
allowNativeHls,
|
|
8531
|
+
isLiveStream,
|
|
8519
8532
|
licenseKey,
|
|
8520
8533
|
vmapUrl,
|
|
8521
8534
|
lowLatencyMode,
|
|
@@ -8550,6 +8563,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
|
|
|
8550
8563
|
if (muted !== void 0) cfg.muted = muted;
|
|
8551
8564
|
if (lowLatencyMode !== void 0) cfg.lowLatencyMode = lowLatencyMode;
|
|
8552
8565
|
if (allowNativeHls !== void 0) cfg.allowNativeHls = allowNativeHls;
|
|
8566
|
+
if (isLiveStream !== void 0) cfg.isLiveStream = isLiveStream;
|
|
8553
8567
|
if (driftToleranceMs !== void 0) cfg.driftToleranceMs = driftToleranceMs;
|
|
8554
8568
|
if (immediateManifestAds !== void 0) cfg.immediateManifestAds = immediateManifestAds;
|
|
8555
8569
|
if (debugAdTiming !== void 0) cfg.debugAdTiming = debugAdTiming;
|
|
@@ -9389,161 +9403,202 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
|
|
|
9389
9403
|
]
|
|
9390
9404
|
})
|
|
9391
9405
|
]
|
|
9392
|
-
}) : showCustomControls && !showLicenseWarning && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
9393
|
-
className: "sc-controls-bar",
|
|
9394
|
-
style: {
|
|
9395
|
-
position: "absolute",
|
|
9396
|
-
bottom: "".concat(10 * responsiveScale, "px"),
|
|
9397
|
-
right: "".concat(10 * responsiveScale, "px"),
|
|
9398
|
-
display: "flex",
|
|
9399
|
-
flexDirection: isPortrait ? "column" : "row",
|
|
9400
|
-
gap: "".concat(8 * responsiveScale, "px"),
|
|
9401
|
-
zIndex: 10,
|
|
9402
|
-
opacity: controlsVisible ? 1 : 0,
|
|
9403
|
-
transform: controlsVisible ? "translateY(0)" : "translateY(4px)",
|
|
9404
|
-
pointerEvents: controlsVisible ? "auto" : "none"
|
|
9405
|
-
},
|
|
9406
|
+
}) : showCustomControls && !showLicenseWarning && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
|
|
9406
9407
|
children: [
|
|
9407
9408
|
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
|
|
9408
9409
|
style: {
|
|
9410
|
+
position: "absolute",
|
|
9411
|
+
top: "".concat(10 * responsiveScale, "px"),
|
|
9412
|
+
left: "".concat(10 * responsiveScale, "px"),
|
|
9409
9413
|
display: "flex",
|
|
9410
9414
|
alignItems: "center",
|
|
9411
|
-
|
|
9412
|
-
|
|
9413
|
-
|
|
9414
|
-
|
|
9415
|
-
},
|
|
9416
|
-
onMouseEnter: function onMouseEnter() {
|
|
9417
|
-
return setShowVolumeSlider(true);
|
|
9415
|
+
gap: "6px",
|
|
9416
|
+
zIndex: 10,
|
|
9417
|
+
opacity: controlsVisible ? 1 : 0,
|
|
9418
|
+
transition: "opacity 0.35s ease"
|
|
9418
9419
|
},
|
|
9419
|
-
|
|
9420
|
-
|
|
9420
|
+
children: [
|
|
9421
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
9422
|
+
style: {
|
|
9423
|
+
width: "8px",
|
|
9424
|
+
height: "8px",
|
|
9425
|
+
borderRadius: "50%",
|
|
9426
|
+
background: "#ff3b30",
|
|
9427
|
+
animation: "sc-pulse 1.5s ease-in-out infinite",
|
|
9428
|
+
flexShrink: 0
|
|
9429
|
+
}
|
|
9430
|
+
}),
|
|
9431
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
|
|
9432
|
+
style: {
|
|
9433
|
+
fontSize: "".concat(12 * responsiveScale, "px"),
|
|
9434
|
+
fontFamily: "'SF Pro Display', 'Segoe UI', Arial, sans-serif",
|
|
9435
|
+
fontWeight: 700,
|
|
9436
|
+
letterSpacing: "0.08em",
|
|
9437
|
+
color: "#fff",
|
|
9438
|
+
textShadow: "0 1px 3px rgba(0,0,0,0.6)",
|
|
9439
|
+
userSelect: "none"
|
|
9440
|
+
},
|
|
9441
|
+
children: "LIVE"
|
|
9442
|
+
})
|
|
9443
|
+
]
|
|
9444
|
+
}),
|
|
9445
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
|
|
9446
|
+
className: "sc-controls-bar",
|
|
9447
|
+
style: {
|
|
9448
|
+
position: "absolute",
|
|
9449
|
+
bottom: "".concat(10 * responsiveScale, "px"),
|
|
9450
|
+
right: "".concat(10 * responsiveScale, "px"),
|
|
9451
|
+
display: "flex",
|
|
9452
|
+
flexDirection: isPortrait ? "column" : "row",
|
|
9453
|
+
gap: "".concat(8 * responsiveScale, "px"),
|
|
9454
|
+
zIndex: 10,
|
|
9455
|
+
opacity: controlsVisible ? 1 : 0,
|
|
9456
|
+
transform: controlsVisible ? "translateY(0)" : "translateY(4px)",
|
|
9457
|
+
pointerEvents: controlsVisible ? "auto" : "none"
|
|
9421
9458
|
},
|
|
9422
9459
|
children: [
|
|
9460
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
|
|
9461
|
+
style: {
|
|
9462
|
+
display: "flex",
|
|
9463
|
+
alignItems: "center",
|
|
9464
|
+
background: "rgba(0, 0, 0, 0.6)",
|
|
9465
|
+
borderRadius: "".concat(18 * responsiveScale, "px"),
|
|
9466
|
+
padding: "2px",
|
|
9467
|
+
paddingRight: "".concat(8 * responsiveScale, "px")
|
|
9468
|
+
},
|
|
9469
|
+
onMouseEnter: function onMouseEnter() {
|
|
9470
|
+
return setShowVolumeSlider(true);
|
|
9471
|
+
},
|
|
9472
|
+
onMouseLeave: function onMouseLeave() {
|
|
9473
|
+
return setShowVolumeSlider(false);
|
|
9474
|
+
},
|
|
9475
|
+
children: [
|
|
9476
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
|
|
9477
|
+
className: "sc-ctrl-btn",
|
|
9478
|
+
onClick: function onClick() {
|
|
9479
|
+
if (playerRef.current) playerRef.current.toggleMute();
|
|
9480
|
+
onVolumeToggle === null || onVolumeToggle === void 0 ? void 0 : onVolumeToggle();
|
|
9481
|
+
resetControlsTimer();
|
|
9482
|
+
},
|
|
9483
|
+
style: {
|
|
9484
|
+
padding: "".concat(8 * responsiveScale, "px"),
|
|
9485
|
+
borderRadius: "50%",
|
|
9486
|
+
minWidth: "".concat(36 * responsiveScale, "px"),
|
|
9487
|
+
minHeight: "".concat(36 * responsiveScale, "px")
|
|
9488
|
+
},
|
|
9489
|
+
title: isMuted ? "Unmute" : "Mute",
|
|
9490
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(VolumeIcon, {
|
|
9491
|
+
size: Math.max(14, 18 * responsiveScale)
|
|
9492
|
+
})
|
|
9493
|
+
}),
|
|
9494
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
9495
|
+
style: {
|
|
9496
|
+
width: showVolumeSlider ? "".concat(68 * responsiveScale, "px") : "0px",
|
|
9497
|
+
overflow: "hidden",
|
|
9498
|
+
transition: "width 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
|
|
9499
|
+
display: "flex",
|
|
9500
|
+
alignItems: "center",
|
|
9501
|
+
paddingLeft: showVolumeSlider ? "".concat(3 * responsiveScale, "px") : "0",
|
|
9502
|
+
paddingRight: showVolumeSlider ? "".concat(10 * responsiveScale, "px") : "0"
|
|
9503
|
+
},
|
|
9504
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
|
|
9505
|
+
style: {
|
|
9506
|
+
position: "relative",
|
|
9507
|
+
width: "".concat(56 * responsiveScale, "px"),
|
|
9508
|
+
height: "3px",
|
|
9509
|
+
cursor: "pointer",
|
|
9510
|
+
borderRadius: "1.5px"
|
|
9511
|
+
},
|
|
9512
|
+
onMouseDown: function onMouseDown(e) {
|
|
9513
|
+
e.preventDefault();
|
|
9514
|
+
var el = e.currentTarget;
|
|
9515
|
+
var move = function move(ev) {
|
|
9516
|
+
var r2 = el.getBoundingClientRect();
|
|
9517
|
+
handleVolumeChange(Math.max(0, Math.min(1, (ev.clientX - r2.left) / r2.width)));
|
|
9518
|
+
};
|
|
9519
|
+
var up = function up1() {
|
|
9520
|
+
document.removeEventListener("mousemove", move);
|
|
9521
|
+
document.removeEventListener("mouseup", up);
|
|
9522
|
+
};
|
|
9523
|
+
document.addEventListener("mousemove", move);
|
|
9524
|
+
document.addEventListener("mouseup", up);
|
|
9525
|
+
var r = el.getBoundingClientRect();
|
|
9526
|
+
handleVolumeChange(Math.max(0, Math.min(1, (e.clientX - r.left) / r.width)));
|
|
9527
|
+
},
|
|
9528
|
+
onClick: function onClick(e) {
|
|
9529
|
+
e.stopPropagation();
|
|
9530
|
+
var r = e.currentTarget.getBoundingClientRect();
|
|
9531
|
+
handleVolumeChange(Math.max(0, Math.min(1, (e.clientX - r.left) / r.width)));
|
|
9532
|
+
},
|
|
9533
|
+
children: [
|
|
9534
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
9535
|
+
style: {
|
|
9536
|
+
position: "absolute",
|
|
9537
|
+
inset: 0,
|
|
9538
|
+
background: "rgba(255, 255, 255, 0.2)",
|
|
9539
|
+
borderRadius: "1.5px"
|
|
9540
|
+
}
|
|
9541
|
+
}),
|
|
9542
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
9543
|
+
style: {
|
|
9544
|
+
position: "absolute",
|
|
9545
|
+
top: 0,
|
|
9546
|
+
left: 0,
|
|
9547
|
+
bottom: 0,
|
|
9548
|
+
width: "".concat((isMuted ? 0 : volume) * 100, "%"),
|
|
9549
|
+
background: "#fff",
|
|
9550
|
+
borderRadius: "1.5px",
|
|
9551
|
+
transition: "width 0.1s ease-out"
|
|
9552
|
+
}
|
|
9553
|
+
}),
|
|
9554
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
9555
|
+
style: {
|
|
9556
|
+
position: "absolute",
|
|
9557
|
+
top: "50%",
|
|
9558
|
+
left: "".concat((isMuted ? 0 : volume) * 100, "%"),
|
|
9559
|
+
transform: "translate(-50%, -50%)",
|
|
9560
|
+
width: "12px",
|
|
9561
|
+
height: "12px",
|
|
9562
|
+
background: "#fff",
|
|
9563
|
+
borderRadius: "50%",
|
|
9564
|
+
boxShadow: "0 0 3px rgba(0, 0, 0, 0.3)",
|
|
9565
|
+
transition: "left 0.1s ease-out"
|
|
9566
|
+
}
|
|
9567
|
+
})
|
|
9568
|
+
]
|
|
9569
|
+
})
|
|
9570
|
+
})
|
|
9571
|
+
]
|
|
9572
|
+
}),
|
|
9423
9573
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
|
|
9424
9574
|
className: "sc-ctrl-btn",
|
|
9425
9575
|
onClick: function onClick() {
|
|
9426
|
-
if (
|
|
9427
|
-
|
|
9576
|
+
if (onFullscreenToggle) {
|
|
9577
|
+
onFullscreenToggle();
|
|
9578
|
+
} else if (wrapperRef.current) {
|
|
9579
|
+
if (!document.fullscreenElement) {
|
|
9580
|
+
wrapperRef.current.requestFullscreen().catch(function() {});
|
|
9581
|
+
} else {
|
|
9582
|
+
document.exitFullscreen().catch(function() {});
|
|
9583
|
+
}
|
|
9584
|
+
}
|
|
9428
9585
|
resetControlsTimer();
|
|
9429
9586
|
},
|
|
9430
9587
|
style: {
|
|
9431
9588
|
padding: "".concat(8 * responsiveScale, "px"),
|
|
9432
9589
|
borderRadius: "50%",
|
|
9433
9590
|
minWidth: "".concat(36 * responsiveScale, "px"),
|
|
9434
|
-
minHeight: "".concat(36 * responsiveScale, "px")
|
|
9591
|
+
minHeight: "".concat(36 * responsiveScale, "px"),
|
|
9592
|
+
background: "rgba(0, 0, 0, 0.6)"
|
|
9435
9593
|
},
|
|
9436
|
-
title:
|
|
9437
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
9594
|
+
title: isFullscreen ? "Exit Fullscreen" : "Enter Fullscreen",
|
|
9595
|
+
children: isFullscreen ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_fa.FaCompress, {
|
|
9596
|
+
size: Math.max(14, 18 * responsiveScale)
|
|
9597
|
+
}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_fa.FaExpand, {
|
|
9438
9598
|
size: Math.max(14, 18 * responsiveScale)
|
|
9439
|
-
})
|
|
9440
|
-
}),
|
|
9441
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
9442
|
-
style: {
|
|
9443
|
-
width: showVolumeSlider ? "".concat(68 * responsiveScale, "px") : "0px",
|
|
9444
|
-
overflow: "hidden",
|
|
9445
|
-
transition: "width 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
|
|
9446
|
-
display: "flex",
|
|
9447
|
-
alignItems: "center",
|
|
9448
|
-
paddingLeft: showVolumeSlider ? "".concat(3 * responsiveScale, "px") : "0",
|
|
9449
|
-
paddingRight: showVolumeSlider ? "".concat(10 * responsiveScale, "px") : "0"
|
|
9450
|
-
},
|
|
9451
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
|
|
9452
|
-
style: {
|
|
9453
|
-
position: "relative",
|
|
9454
|
-
width: "".concat(56 * responsiveScale, "px"),
|
|
9455
|
-
height: "3px",
|
|
9456
|
-
cursor: "pointer",
|
|
9457
|
-
borderRadius: "1.5px"
|
|
9458
|
-
},
|
|
9459
|
-
onMouseDown: function onMouseDown(e) {
|
|
9460
|
-
e.preventDefault();
|
|
9461
|
-
var el = e.currentTarget;
|
|
9462
|
-
var move = function move(ev) {
|
|
9463
|
-
var r2 = el.getBoundingClientRect();
|
|
9464
|
-
handleVolumeChange(Math.max(0, Math.min(1, (ev.clientX - r2.left) / r2.width)));
|
|
9465
|
-
};
|
|
9466
|
-
var up = function up1() {
|
|
9467
|
-
document.removeEventListener("mousemove", move);
|
|
9468
|
-
document.removeEventListener("mouseup", up);
|
|
9469
|
-
};
|
|
9470
|
-
document.addEventListener("mousemove", move);
|
|
9471
|
-
document.addEventListener("mouseup", up);
|
|
9472
|
-
var r = el.getBoundingClientRect();
|
|
9473
|
-
handleVolumeChange(Math.max(0, Math.min(1, (e.clientX - r.left) / r.width)));
|
|
9474
|
-
},
|
|
9475
|
-
onClick: function onClick(e) {
|
|
9476
|
-
e.stopPropagation();
|
|
9477
|
-
var r = e.currentTarget.getBoundingClientRect();
|
|
9478
|
-
handleVolumeChange(Math.max(0, Math.min(1, (e.clientX - r.left) / r.width)));
|
|
9479
|
-
},
|
|
9480
|
-
children: [
|
|
9481
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
9482
|
-
style: {
|
|
9483
|
-
position: "absolute",
|
|
9484
|
-
inset: 0,
|
|
9485
|
-
background: "rgba(255, 255, 255, 0.2)",
|
|
9486
|
-
borderRadius: "1.5px"
|
|
9487
|
-
}
|
|
9488
|
-
}),
|
|
9489
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
9490
|
-
style: {
|
|
9491
|
-
position: "absolute",
|
|
9492
|
-
top: 0,
|
|
9493
|
-
left: 0,
|
|
9494
|
-
bottom: 0,
|
|
9495
|
-
width: "".concat((isMuted ? 0 : volume) * 100, "%"),
|
|
9496
|
-
background: "#fff",
|
|
9497
|
-
borderRadius: "1.5px",
|
|
9498
|
-
transition: "width 0.1s ease-out"
|
|
9499
|
-
}
|
|
9500
|
-
}),
|
|
9501
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
9502
|
-
style: {
|
|
9503
|
-
position: "absolute",
|
|
9504
|
-
top: "50%",
|
|
9505
|
-
left: "".concat((isMuted ? 0 : volume) * 100, "%"),
|
|
9506
|
-
transform: "translate(-50%, -50%)",
|
|
9507
|
-
width: "12px",
|
|
9508
|
-
height: "12px",
|
|
9509
|
-
background: "#fff",
|
|
9510
|
-
borderRadius: "50%",
|
|
9511
|
-
boxShadow: "0 0 3px rgba(0, 0, 0, 0.3)",
|
|
9512
|
-
transition: "left 0.1s ease-out"
|
|
9513
|
-
}
|
|
9514
|
-
})
|
|
9515
|
-
]
|
|
9516
9599
|
})
|
|
9517
9600
|
})
|
|
9518
9601
|
]
|
|
9519
|
-
}),
|
|
9520
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
|
|
9521
|
-
className: "sc-ctrl-btn",
|
|
9522
|
-
onClick: function onClick() {
|
|
9523
|
-
if (onFullscreenToggle) {
|
|
9524
|
-
onFullscreenToggle();
|
|
9525
|
-
} else if (wrapperRef.current) {
|
|
9526
|
-
if (!document.fullscreenElement) {
|
|
9527
|
-
wrapperRef.current.requestFullscreen().catch(function() {});
|
|
9528
|
-
} else {
|
|
9529
|
-
document.exitFullscreen().catch(function() {});
|
|
9530
|
-
}
|
|
9531
|
-
}
|
|
9532
|
-
resetControlsTimer();
|
|
9533
|
-
},
|
|
9534
|
-
style: {
|
|
9535
|
-
padding: "".concat(8 * responsiveScale, "px"),
|
|
9536
|
-
borderRadius: "50%",
|
|
9537
|
-
minWidth: "".concat(36 * responsiveScale, "px"),
|
|
9538
|
-
minHeight: "".concat(36 * responsiveScale, "px"),
|
|
9539
|
-
background: "rgba(0, 0, 0, 0.6)"
|
|
9540
|
-
},
|
|
9541
|
-
title: isFullscreen ? "Exit Fullscreen" : "Enter Fullscreen",
|
|
9542
|
-
children: isFullscreen ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_fa.FaCompress, {
|
|
9543
|
-
size: Math.max(14, 18 * responsiveScale)
|
|
9544
|
-
}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_fa.FaExpand, {
|
|
9545
|
-
size: Math.max(14, 18 * responsiveScale)
|
|
9546
|
-
})
|
|
9547
9602
|
})
|
|
9548
9603
|
]
|
|
9549
9604
|
}),
|