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.cjs
CHANGED
|
@@ -2657,7 +2657,7 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
|
|
|
2657
2657
|
key: "load",
|
|
2658
2658
|
value: function load() {
|
|
2659
2659
|
return _async_to_generator(function() {
|
|
2660
|
-
var _this, _this_config_lowLatencyMode, error, _this_config_lowLatencyMode1, _this_video_play;
|
|
2660
|
+
var _this, _this_config_lowLatencyMode, error, _this_config_isLiveStream, _this_config_lowLatencyMode1, _this_video_play;
|
|
2661
2661
|
return _ts_generator(this, function(_state) {
|
|
2662
2662
|
switch(_state.label){
|
|
2663
2663
|
case 0:
|
|
@@ -2708,7 +2708,7 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
|
|
|
2708
2708
|
this.nativeHlsMode = true;
|
|
2709
2709
|
this.videoSrcProtection = this.config.src;
|
|
2710
2710
|
this.video.src = this.config.src;
|
|
2711
|
-
this.isLiveStream = (_this_config_lowLatencyMode1 = this.config.lowLatencyMode) !== null && _this_config_lowLatencyMode1 !== void 0 ? _this_config_lowLatencyMode1 : false;
|
|
2711
|
+
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;
|
|
2712
2712
|
if (this.config.debugAdTiming) {
|
|
2713
2713
|
console.log("[StormcloudVideoPlayer] Using native HLS playback - VOD mode:", {
|
|
2714
2714
|
isLive: this.isLiveStream,
|
|
@@ -2759,19 +2759,28 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
|
|
|
2759
2759
|
});
|
|
2760
2760
|
this.hls.on(import_hls2.default.Events.MANIFEST_PARSED, function(_, data) {
|
|
2761
2761
|
return _async_to_generator(function() {
|
|
2762
|
-
var
|
|
2762
|
+
var _this_config_isLiveStream, _ref, _this_config_minSegmentsBeforePlay, _this_hls_levels, _this_hls, prerollKey, adBehavior, minSegments, _this_video_play;
|
|
2763
2763
|
return _ts_generator(this, function(_state) {
|
|
2764
2764
|
switch(_state.label){
|
|
2765
2765
|
case 0:
|
|
2766
|
-
|
|
2767
|
-
|
|
2768
|
-
|
|
2769
|
-
|
|
2770
|
-
|
|
2771
|
-
|
|
2772
|
-
|
|
2773
|
-
|
|
2774
|
-
|
|
2766
|
+
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) {
|
|
2767
|
+
var _level_details, _level_details1;
|
|
2768
|
+
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";
|
|
2769
|
+
})) !== null && _ref !== void 0 ? _ref : false;
|
|
2770
|
+
if (!this.isLiveStream && this.vmapBreaks.length === 0 && this.apiVastTagUrl) {
|
|
2771
|
+
prerollKey = "synthetic-vod-preroll";
|
|
2772
|
+
if (!this.consumedVmapBreakIds.has(prerollKey)) {
|
|
2773
|
+
this.vmapBreaks = [
|
|
2774
|
+
{
|
|
2775
|
+
id: prerollKey,
|
|
2776
|
+
startTimeMs: 0,
|
|
2777
|
+
vastTagUrl: this.apiVastTagUrl
|
|
2778
|
+
}
|
|
2779
|
+
];
|
|
2780
|
+
if (this.config.debugAdTiming) {
|
|
2781
|
+
console.log("[StormcloudVideoPlayer] Injected synthetic VOD preroll from apiVastTagUrl");
|
|
2782
|
+
}
|
|
2783
|
+
}
|
|
2775
2784
|
}
|
|
2776
2785
|
if (this.config.debugAdTiming) {
|
|
2777
2786
|
adBehavior = this.shouldContinueLiveStreamDuringAds() ? "live (main video continues muted during ads)" : "vod (main video pauses during ads)";
|
|
@@ -7227,7 +7236,8 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
|
|
|
7227
7236
|
continue;
|
|
7228
7237
|
}
|
|
7229
7238
|
var end = breakStartMs + (b.durationMs || 0);
|
|
7230
|
-
|
|
7239
|
+
var effectiveTol = breakStartMs === 0 ? Math.max(tol, 3e4) : tol;
|
|
7240
|
+
if (nowMs >= breakStartMs && (b.durationMs ? nowMs < end : nowMs <= breakStartMs + effectiveTol)) {
|
|
7231
7241
|
return b;
|
|
7232
7242
|
}
|
|
7233
7243
|
}
|
|
@@ -7463,6 +7473,7 @@ var import_jsx_runtime = require("react/jsx-runtime");
|
|
|
7463
7473
|
var CRITICAL_PROPS = [
|
|
7464
7474
|
"src",
|
|
7465
7475
|
"allowNativeHls",
|
|
7476
|
+
"isLiveStream",
|
|
7466
7477
|
"licenseKey",
|
|
7467
7478
|
"vmapUrl",
|
|
7468
7479
|
"lowLatencyMode",
|
|
@@ -7472,12 +7483,13 @@ var CRITICAL_PROPS = [
|
|
|
7472
7483
|
var CONTROLS_HIDE_DELAY = 3e3;
|
|
7473
7484
|
var DEFAULT_PLAYER_ASPECT_RATIO = 16 / 9;
|
|
7474
7485
|
var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
|
|
7475
|
-
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, [
|
|
7486
|
+
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, [
|
|
7476
7487
|
"src",
|
|
7477
7488
|
"autoplay",
|
|
7478
7489
|
"muted",
|
|
7479
7490
|
"lowLatencyMode",
|
|
7480
7491
|
"allowNativeHls",
|
|
7492
|
+
"isLiveStream",
|
|
7481
7493
|
"driftToleranceMs",
|
|
7482
7494
|
"immediateManifestAds",
|
|
7483
7495
|
"debugAdTiming",
|
|
@@ -7631,7 +7643,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
|
|
|
7631
7643
|
setShowSpeedMenu(false);
|
|
7632
7644
|
};
|
|
7633
7645
|
var isHlsStream = (src === null || src === void 0 ? void 0 : src.toLowerCase().includes(".m3u8")) || (src === null || src === void 0 ? void 0 : src.toLowerCase().includes("/hls/"));
|
|
7634
|
-
var shouldShowEnhancedControls = showCustomControls && (isHlsStream ? allowNativeHls : true);
|
|
7646
|
+
var shouldShowEnhancedControls = showCustomControls && (isHlsStream ? allowNativeHls || isLiveStream === false : true);
|
|
7635
7647
|
var criticalPropsKey = (0, import_react.useMemo)(function() {
|
|
7636
7648
|
return CRITICAL_PROPS.map(function(prop) {
|
|
7637
7649
|
return "".concat(prop, ":").concat(props[prop]);
|
|
@@ -7639,6 +7651,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
|
|
|
7639
7651
|
}, [
|
|
7640
7652
|
src,
|
|
7641
7653
|
allowNativeHls,
|
|
7654
|
+
isLiveStream,
|
|
7642
7655
|
licenseKey,
|
|
7643
7656
|
vmapUrl,
|
|
7644
7657
|
lowLatencyMode,
|
|
@@ -7673,6 +7686,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
|
|
|
7673
7686
|
if (muted !== void 0) cfg.muted = muted;
|
|
7674
7687
|
if (lowLatencyMode !== void 0) cfg.lowLatencyMode = lowLatencyMode;
|
|
7675
7688
|
if (allowNativeHls !== void 0) cfg.allowNativeHls = allowNativeHls;
|
|
7689
|
+
if (isLiveStream !== void 0) cfg.isLiveStream = isLiveStream;
|
|
7676
7690
|
if (driftToleranceMs !== void 0) cfg.driftToleranceMs = driftToleranceMs;
|
|
7677
7691
|
if (immediateManifestAds !== void 0) cfg.immediateManifestAds = immediateManifestAds;
|
|
7678
7692
|
if (debugAdTiming !== void 0) cfg.debugAdTiming = debugAdTiming;
|
|
@@ -8511,161 +8525,202 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
|
|
|
8511
8525
|
]
|
|
8512
8526
|
})
|
|
8513
8527
|
]
|
|
8514
|
-
}) : showCustomControls && !showLicenseWarning && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
8515
|
-
className: "sc-controls-bar",
|
|
8516
|
-
style: {
|
|
8517
|
-
position: "absolute",
|
|
8518
|
-
bottom: "".concat(10 * responsiveScale, "px"),
|
|
8519
|
-
right: "".concat(10 * responsiveScale, "px"),
|
|
8520
|
-
display: "flex",
|
|
8521
|
-
flexDirection: isPortrait ? "column" : "row",
|
|
8522
|
-
gap: "".concat(8 * responsiveScale, "px"),
|
|
8523
|
-
zIndex: 10,
|
|
8524
|
-
opacity: controlsVisible ? 1 : 0,
|
|
8525
|
-
transform: controlsVisible ? "translateY(0)" : "translateY(4px)",
|
|
8526
|
-
pointerEvents: controlsVisible ? "auto" : "none"
|
|
8527
|
-
},
|
|
8528
|
+
}) : showCustomControls && !showLicenseWarning && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
|
|
8528
8529
|
children: [
|
|
8529
8530
|
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
|
|
8530
8531
|
style: {
|
|
8532
|
+
position: "absolute",
|
|
8533
|
+
top: "".concat(10 * responsiveScale, "px"),
|
|
8534
|
+
left: "".concat(10 * responsiveScale, "px"),
|
|
8531
8535
|
display: "flex",
|
|
8532
8536
|
alignItems: "center",
|
|
8533
|
-
|
|
8534
|
-
|
|
8535
|
-
|
|
8536
|
-
|
|
8537
|
-
},
|
|
8538
|
-
onMouseEnter: function onMouseEnter() {
|
|
8539
|
-
return setShowVolumeSlider(true);
|
|
8537
|
+
gap: "6px",
|
|
8538
|
+
zIndex: 10,
|
|
8539
|
+
opacity: controlsVisible ? 1 : 0,
|
|
8540
|
+
transition: "opacity 0.35s ease"
|
|
8540
8541
|
},
|
|
8541
|
-
|
|
8542
|
-
|
|
8542
|
+
children: [
|
|
8543
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
8544
|
+
style: {
|
|
8545
|
+
width: "8px",
|
|
8546
|
+
height: "8px",
|
|
8547
|
+
borderRadius: "50%",
|
|
8548
|
+
background: "#ff3b30",
|
|
8549
|
+
animation: "sc-pulse 1.5s ease-in-out infinite",
|
|
8550
|
+
flexShrink: 0
|
|
8551
|
+
}
|
|
8552
|
+
}),
|
|
8553
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
|
|
8554
|
+
style: {
|
|
8555
|
+
fontSize: "".concat(12 * responsiveScale, "px"),
|
|
8556
|
+
fontFamily: "'SF Pro Display', 'Segoe UI', Arial, sans-serif",
|
|
8557
|
+
fontWeight: 700,
|
|
8558
|
+
letterSpacing: "0.08em",
|
|
8559
|
+
color: "#fff",
|
|
8560
|
+
textShadow: "0 1px 3px rgba(0,0,0,0.6)",
|
|
8561
|
+
userSelect: "none"
|
|
8562
|
+
},
|
|
8563
|
+
children: "LIVE"
|
|
8564
|
+
})
|
|
8565
|
+
]
|
|
8566
|
+
}),
|
|
8567
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
|
|
8568
|
+
className: "sc-controls-bar",
|
|
8569
|
+
style: {
|
|
8570
|
+
position: "absolute",
|
|
8571
|
+
bottom: "".concat(10 * responsiveScale, "px"),
|
|
8572
|
+
right: "".concat(10 * responsiveScale, "px"),
|
|
8573
|
+
display: "flex",
|
|
8574
|
+
flexDirection: isPortrait ? "column" : "row",
|
|
8575
|
+
gap: "".concat(8 * responsiveScale, "px"),
|
|
8576
|
+
zIndex: 10,
|
|
8577
|
+
opacity: controlsVisible ? 1 : 0,
|
|
8578
|
+
transform: controlsVisible ? "translateY(0)" : "translateY(4px)",
|
|
8579
|
+
pointerEvents: controlsVisible ? "auto" : "none"
|
|
8543
8580
|
},
|
|
8544
8581
|
children: [
|
|
8582
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
|
|
8583
|
+
style: {
|
|
8584
|
+
display: "flex",
|
|
8585
|
+
alignItems: "center",
|
|
8586
|
+
background: "rgba(0, 0, 0, 0.6)",
|
|
8587
|
+
borderRadius: "".concat(18 * responsiveScale, "px"),
|
|
8588
|
+
padding: "2px",
|
|
8589
|
+
paddingRight: "".concat(8 * responsiveScale, "px")
|
|
8590
|
+
},
|
|
8591
|
+
onMouseEnter: function onMouseEnter() {
|
|
8592
|
+
return setShowVolumeSlider(true);
|
|
8593
|
+
},
|
|
8594
|
+
onMouseLeave: function onMouseLeave() {
|
|
8595
|
+
return setShowVolumeSlider(false);
|
|
8596
|
+
},
|
|
8597
|
+
children: [
|
|
8598
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
|
|
8599
|
+
className: "sc-ctrl-btn",
|
|
8600
|
+
onClick: function onClick() {
|
|
8601
|
+
if (playerRef.current) playerRef.current.toggleMute();
|
|
8602
|
+
onVolumeToggle === null || onVolumeToggle === void 0 ? void 0 : onVolumeToggle();
|
|
8603
|
+
resetControlsTimer();
|
|
8604
|
+
},
|
|
8605
|
+
style: {
|
|
8606
|
+
padding: "".concat(8 * responsiveScale, "px"),
|
|
8607
|
+
borderRadius: "50%",
|
|
8608
|
+
minWidth: "".concat(36 * responsiveScale, "px"),
|
|
8609
|
+
minHeight: "".concat(36 * responsiveScale, "px")
|
|
8610
|
+
},
|
|
8611
|
+
title: isMuted ? "Unmute" : "Mute",
|
|
8612
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(VolumeIcon, {
|
|
8613
|
+
size: Math.max(14, 18 * responsiveScale)
|
|
8614
|
+
})
|
|
8615
|
+
}),
|
|
8616
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
8617
|
+
style: {
|
|
8618
|
+
width: showVolumeSlider ? "".concat(68 * responsiveScale, "px") : "0px",
|
|
8619
|
+
overflow: "hidden",
|
|
8620
|
+
transition: "width 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
|
|
8621
|
+
display: "flex",
|
|
8622
|
+
alignItems: "center",
|
|
8623
|
+
paddingLeft: showVolumeSlider ? "".concat(3 * responsiveScale, "px") : "0",
|
|
8624
|
+
paddingRight: showVolumeSlider ? "".concat(10 * responsiveScale, "px") : "0"
|
|
8625
|
+
},
|
|
8626
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
|
|
8627
|
+
style: {
|
|
8628
|
+
position: "relative",
|
|
8629
|
+
width: "".concat(56 * responsiveScale, "px"),
|
|
8630
|
+
height: "3px",
|
|
8631
|
+
cursor: "pointer",
|
|
8632
|
+
borderRadius: "1.5px"
|
|
8633
|
+
},
|
|
8634
|
+
onMouseDown: function onMouseDown(e) {
|
|
8635
|
+
e.preventDefault();
|
|
8636
|
+
var el = e.currentTarget;
|
|
8637
|
+
var move = function move(ev) {
|
|
8638
|
+
var r2 = el.getBoundingClientRect();
|
|
8639
|
+
handleVolumeChange(Math.max(0, Math.min(1, (ev.clientX - r2.left) / r2.width)));
|
|
8640
|
+
};
|
|
8641
|
+
var up = function up1() {
|
|
8642
|
+
document.removeEventListener("mousemove", move);
|
|
8643
|
+
document.removeEventListener("mouseup", up);
|
|
8644
|
+
};
|
|
8645
|
+
document.addEventListener("mousemove", move);
|
|
8646
|
+
document.addEventListener("mouseup", up);
|
|
8647
|
+
var r = el.getBoundingClientRect();
|
|
8648
|
+
handleVolumeChange(Math.max(0, Math.min(1, (e.clientX - r.left) / r.width)));
|
|
8649
|
+
},
|
|
8650
|
+
onClick: function onClick(e) {
|
|
8651
|
+
e.stopPropagation();
|
|
8652
|
+
var r = e.currentTarget.getBoundingClientRect();
|
|
8653
|
+
handleVolumeChange(Math.max(0, Math.min(1, (e.clientX - r.left) / r.width)));
|
|
8654
|
+
},
|
|
8655
|
+
children: [
|
|
8656
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
8657
|
+
style: {
|
|
8658
|
+
position: "absolute",
|
|
8659
|
+
inset: 0,
|
|
8660
|
+
background: "rgba(255, 255, 255, 0.2)",
|
|
8661
|
+
borderRadius: "1.5px"
|
|
8662
|
+
}
|
|
8663
|
+
}),
|
|
8664
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
8665
|
+
style: {
|
|
8666
|
+
position: "absolute",
|
|
8667
|
+
top: 0,
|
|
8668
|
+
left: 0,
|
|
8669
|
+
bottom: 0,
|
|
8670
|
+
width: "".concat((isMuted ? 0 : volume) * 100, "%"),
|
|
8671
|
+
background: "#fff",
|
|
8672
|
+
borderRadius: "1.5px",
|
|
8673
|
+
transition: "width 0.1s ease-out"
|
|
8674
|
+
}
|
|
8675
|
+
}),
|
|
8676
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
8677
|
+
style: {
|
|
8678
|
+
position: "absolute",
|
|
8679
|
+
top: "50%",
|
|
8680
|
+
left: "".concat((isMuted ? 0 : volume) * 100, "%"),
|
|
8681
|
+
transform: "translate(-50%, -50%)",
|
|
8682
|
+
width: "12px",
|
|
8683
|
+
height: "12px",
|
|
8684
|
+
background: "#fff",
|
|
8685
|
+
borderRadius: "50%",
|
|
8686
|
+
boxShadow: "0 0 3px rgba(0, 0, 0, 0.3)",
|
|
8687
|
+
transition: "left 0.1s ease-out"
|
|
8688
|
+
}
|
|
8689
|
+
})
|
|
8690
|
+
]
|
|
8691
|
+
})
|
|
8692
|
+
})
|
|
8693
|
+
]
|
|
8694
|
+
}),
|
|
8545
8695
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
|
|
8546
8696
|
className: "sc-ctrl-btn",
|
|
8547
8697
|
onClick: function onClick() {
|
|
8548
|
-
if (
|
|
8549
|
-
|
|
8698
|
+
if (onFullscreenToggle) {
|
|
8699
|
+
onFullscreenToggle();
|
|
8700
|
+
} else if (wrapperRef.current) {
|
|
8701
|
+
if (!document.fullscreenElement) {
|
|
8702
|
+
wrapperRef.current.requestFullscreen().catch(function() {});
|
|
8703
|
+
} else {
|
|
8704
|
+
document.exitFullscreen().catch(function() {});
|
|
8705
|
+
}
|
|
8706
|
+
}
|
|
8550
8707
|
resetControlsTimer();
|
|
8551
8708
|
},
|
|
8552
8709
|
style: {
|
|
8553
8710
|
padding: "".concat(8 * responsiveScale, "px"),
|
|
8554
8711
|
borderRadius: "50%",
|
|
8555
8712
|
minWidth: "".concat(36 * responsiveScale, "px"),
|
|
8556
|
-
minHeight: "".concat(36 * responsiveScale, "px")
|
|
8713
|
+
minHeight: "".concat(36 * responsiveScale, "px"),
|
|
8714
|
+
background: "rgba(0, 0, 0, 0.6)"
|
|
8557
8715
|
},
|
|
8558
|
-
title:
|
|
8559
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
8716
|
+
title: isFullscreen ? "Exit Fullscreen" : "Enter Fullscreen",
|
|
8717
|
+
children: isFullscreen ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_fa.FaCompress, {
|
|
8718
|
+
size: Math.max(14, 18 * responsiveScale)
|
|
8719
|
+
}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_fa.FaExpand, {
|
|
8560
8720
|
size: Math.max(14, 18 * responsiveScale)
|
|
8561
|
-
})
|
|
8562
|
-
}),
|
|
8563
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
8564
|
-
style: {
|
|
8565
|
-
width: showVolumeSlider ? "".concat(68 * responsiveScale, "px") : "0px",
|
|
8566
|
-
overflow: "hidden",
|
|
8567
|
-
transition: "width 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
|
|
8568
|
-
display: "flex",
|
|
8569
|
-
alignItems: "center",
|
|
8570
|
-
paddingLeft: showVolumeSlider ? "".concat(3 * responsiveScale, "px") : "0",
|
|
8571
|
-
paddingRight: showVolumeSlider ? "".concat(10 * responsiveScale, "px") : "0"
|
|
8572
|
-
},
|
|
8573
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
|
|
8574
|
-
style: {
|
|
8575
|
-
position: "relative",
|
|
8576
|
-
width: "".concat(56 * responsiveScale, "px"),
|
|
8577
|
-
height: "3px",
|
|
8578
|
-
cursor: "pointer",
|
|
8579
|
-
borderRadius: "1.5px"
|
|
8580
|
-
},
|
|
8581
|
-
onMouseDown: function onMouseDown(e) {
|
|
8582
|
-
e.preventDefault();
|
|
8583
|
-
var el = e.currentTarget;
|
|
8584
|
-
var move = function move(ev) {
|
|
8585
|
-
var r2 = el.getBoundingClientRect();
|
|
8586
|
-
handleVolumeChange(Math.max(0, Math.min(1, (ev.clientX - r2.left) / r2.width)));
|
|
8587
|
-
};
|
|
8588
|
-
var up = function up1() {
|
|
8589
|
-
document.removeEventListener("mousemove", move);
|
|
8590
|
-
document.removeEventListener("mouseup", up);
|
|
8591
|
-
};
|
|
8592
|
-
document.addEventListener("mousemove", move);
|
|
8593
|
-
document.addEventListener("mouseup", up);
|
|
8594
|
-
var r = el.getBoundingClientRect();
|
|
8595
|
-
handleVolumeChange(Math.max(0, Math.min(1, (e.clientX - r.left) / r.width)));
|
|
8596
|
-
},
|
|
8597
|
-
onClick: function onClick(e) {
|
|
8598
|
-
e.stopPropagation();
|
|
8599
|
-
var r = e.currentTarget.getBoundingClientRect();
|
|
8600
|
-
handleVolumeChange(Math.max(0, Math.min(1, (e.clientX - r.left) / r.width)));
|
|
8601
|
-
},
|
|
8602
|
-
children: [
|
|
8603
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
8604
|
-
style: {
|
|
8605
|
-
position: "absolute",
|
|
8606
|
-
inset: 0,
|
|
8607
|
-
background: "rgba(255, 255, 255, 0.2)",
|
|
8608
|
-
borderRadius: "1.5px"
|
|
8609
|
-
}
|
|
8610
|
-
}),
|
|
8611
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
8612
|
-
style: {
|
|
8613
|
-
position: "absolute",
|
|
8614
|
-
top: 0,
|
|
8615
|
-
left: 0,
|
|
8616
|
-
bottom: 0,
|
|
8617
|
-
width: "".concat((isMuted ? 0 : volume) * 100, "%"),
|
|
8618
|
-
background: "#fff",
|
|
8619
|
-
borderRadius: "1.5px",
|
|
8620
|
-
transition: "width 0.1s ease-out"
|
|
8621
|
-
}
|
|
8622
|
-
}),
|
|
8623
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
8624
|
-
style: {
|
|
8625
|
-
position: "absolute",
|
|
8626
|
-
top: "50%",
|
|
8627
|
-
left: "".concat((isMuted ? 0 : volume) * 100, "%"),
|
|
8628
|
-
transform: "translate(-50%, -50%)",
|
|
8629
|
-
width: "12px",
|
|
8630
|
-
height: "12px",
|
|
8631
|
-
background: "#fff",
|
|
8632
|
-
borderRadius: "50%",
|
|
8633
|
-
boxShadow: "0 0 3px rgba(0, 0, 0, 0.3)",
|
|
8634
|
-
transition: "left 0.1s ease-out"
|
|
8635
|
-
}
|
|
8636
|
-
})
|
|
8637
|
-
]
|
|
8638
8721
|
})
|
|
8639
8722
|
})
|
|
8640
8723
|
]
|
|
8641
|
-
}),
|
|
8642
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
|
|
8643
|
-
className: "sc-ctrl-btn",
|
|
8644
|
-
onClick: function onClick() {
|
|
8645
|
-
if (onFullscreenToggle) {
|
|
8646
|
-
onFullscreenToggle();
|
|
8647
|
-
} else if (wrapperRef.current) {
|
|
8648
|
-
if (!document.fullscreenElement) {
|
|
8649
|
-
wrapperRef.current.requestFullscreen().catch(function() {});
|
|
8650
|
-
} else {
|
|
8651
|
-
document.exitFullscreen().catch(function() {});
|
|
8652
|
-
}
|
|
8653
|
-
}
|
|
8654
|
-
resetControlsTimer();
|
|
8655
|
-
},
|
|
8656
|
-
style: {
|
|
8657
|
-
padding: "".concat(8 * responsiveScale, "px"),
|
|
8658
|
-
borderRadius: "50%",
|
|
8659
|
-
minWidth: "".concat(36 * responsiveScale, "px"),
|
|
8660
|
-
minHeight: "".concat(36 * responsiveScale, "px"),
|
|
8661
|
-
background: "rgba(0, 0, 0, 0.6)"
|
|
8662
|
-
},
|
|
8663
|
-
title: isFullscreen ? "Exit Fullscreen" : "Enter Fullscreen",
|
|
8664
|
-
children: isFullscreen ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_fa.FaCompress, {
|
|
8665
|
-
size: Math.max(14, 18 * responsiveScale)
|
|
8666
|
-
}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_fa.FaExpand, {
|
|
8667
|
-
size: Math.max(14, 18 * responsiveScale)
|
|
8668
|
-
})
|
|
8669
8724
|
})
|
|
8670
8725
|
]
|
|
8671
8726
|
}),
|