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.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,11 +2759,11 @@ 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 _ref, _this_config_minSegmentsBeforePlay, _this_hls_levels, _this_hls, prerollKey, adBehavior, minSegments, _this_video_play;
|
|
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
|
-
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) {
|
|
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
2767
|
var _level_details, _level_details1;
|
|
2768
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
2769
|
})) !== null && _ref !== void 0 ? _ref : false;
|
|
@@ -7473,6 +7473,7 @@ var import_jsx_runtime = require("react/jsx-runtime");
|
|
|
7473
7473
|
var CRITICAL_PROPS = [
|
|
7474
7474
|
"src",
|
|
7475
7475
|
"allowNativeHls",
|
|
7476
|
+
"isLiveStream",
|
|
7476
7477
|
"licenseKey",
|
|
7477
7478
|
"vmapUrl",
|
|
7478
7479
|
"lowLatencyMode",
|
|
@@ -7482,12 +7483,13 @@ var CRITICAL_PROPS = [
|
|
|
7482
7483
|
var CONTROLS_HIDE_DELAY = 3e3;
|
|
7483
7484
|
var DEFAULT_PLAYER_ASPECT_RATIO = 16 / 9;
|
|
7484
7485
|
var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
|
|
7485
|
-
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, [
|
|
7486
7487
|
"src",
|
|
7487
7488
|
"autoplay",
|
|
7488
7489
|
"muted",
|
|
7489
7490
|
"lowLatencyMode",
|
|
7490
7491
|
"allowNativeHls",
|
|
7492
|
+
"isLiveStream",
|
|
7491
7493
|
"driftToleranceMs",
|
|
7492
7494
|
"immediateManifestAds",
|
|
7493
7495
|
"debugAdTiming",
|
|
@@ -7641,7 +7643,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
|
|
|
7641
7643
|
setShowSpeedMenu(false);
|
|
7642
7644
|
};
|
|
7643
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/"));
|
|
7644
|
-
var shouldShowEnhancedControls = showCustomControls && (isHlsStream ? allowNativeHls : true);
|
|
7646
|
+
var shouldShowEnhancedControls = showCustomControls && (isHlsStream ? allowNativeHls || isLiveStream === false : true);
|
|
7645
7647
|
var criticalPropsKey = (0, import_react.useMemo)(function() {
|
|
7646
7648
|
return CRITICAL_PROPS.map(function(prop) {
|
|
7647
7649
|
return "".concat(prop, ":").concat(props[prop]);
|
|
@@ -7649,6 +7651,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
|
|
|
7649
7651
|
}, [
|
|
7650
7652
|
src,
|
|
7651
7653
|
allowNativeHls,
|
|
7654
|
+
isLiveStream,
|
|
7652
7655
|
licenseKey,
|
|
7653
7656
|
vmapUrl,
|
|
7654
7657
|
lowLatencyMode,
|
|
@@ -7683,6 +7686,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
|
|
|
7683
7686
|
if (muted !== void 0) cfg.muted = muted;
|
|
7684
7687
|
if (lowLatencyMode !== void 0) cfg.lowLatencyMode = lowLatencyMode;
|
|
7685
7688
|
if (allowNativeHls !== void 0) cfg.allowNativeHls = allowNativeHls;
|
|
7689
|
+
if (isLiveStream !== void 0) cfg.isLiveStream = isLiveStream;
|
|
7686
7690
|
if (driftToleranceMs !== void 0) cfg.driftToleranceMs = driftToleranceMs;
|
|
7687
7691
|
if (immediateManifestAds !== void 0) cfg.immediateManifestAds = immediateManifestAds;
|
|
7688
7692
|
if (debugAdTiming !== void 0) cfg.debugAdTiming = debugAdTiming;
|
|
@@ -8521,161 +8525,202 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
|
|
|
8521
8525
|
]
|
|
8522
8526
|
})
|
|
8523
8527
|
]
|
|
8524
|
-
}) : showCustomControls && !showLicenseWarning && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
8525
|
-
className: "sc-controls-bar",
|
|
8526
|
-
style: {
|
|
8527
|
-
position: "absolute",
|
|
8528
|
-
bottom: "".concat(10 * responsiveScale, "px"),
|
|
8529
|
-
right: "".concat(10 * responsiveScale, "px"),
|
|
8530
|
-
display: "flex",
|
|
8531
|
-
flexDirection: isPortrait ? "column" : "row",
|
|
8532
|
-
gap: "".concat(8 * responsiveScale, "px"),
|
|
8533
|
-
zIndex: 10,
|
|
8534
|
-
opacity: controlsVisible ? 1 : 0,
|
|
8535
|
-
transform: controlsVisible ? "translateY(0)" : "translateY(4px)",
|
|
8536
|
-
pointerEvents: controlsVisible ? "auto" : "none"
|
|
8537
|
-
},
|
|
8528
|
+
}) : showCustomControls && !showLicenseWarning && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
|
|
8538
8529
|
children: [
|
|
8539
8530
|
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
|
|
8540
8531
|
style: {
|
|
8532
|
+
position: "absolute",
|
|
8533
|
+
top: "".concat(10 * responsiveScale, "px"),
|
|
8534
|
+
left: "".concat(10 * responsiveScale, "px"),
|
|
8541
8535
|
display: "flex",
|
|
8542
8536
|
alignItems: "center",
|
|
8543
|
-
|
|
8544
|
-
|
|
8545
|
-
|
|
8546
|
-
|
|
8547
|
-
},
|
|
8548
|
-
onMouseEnter: function onMouseEnter() {
|
|
8549
|
-
return setShowVolumeSlider(true);
|
|
8537
|
+
gap: "6px",
|
|
8538
|
+
zIndex: 10,
|
|
8539
|
+
opacity: controlsVisible ? 1 : 0,
|
|
8540
|
+
transition: "opacity 0.35s ease"
|
|
8550
8541
|
},
|
|
8551
|
-
|
|
8552
|
-
|
|
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"
|
|
8553
8580
|
},
|
|
8554
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
|
+
}),
|
|
8555
8695
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
|
|
8556
8696
|
className: "sc-ctrl-btn",
|
|
8557
8697
|
onClick: function onClick() {
|
|
8558
|
-
if (
|
|
8559
|
-
|
|
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
|
+
}
|
|
8560
8707
|
resetControlsTimer();
|
|
8561
8708
|
},
|
|
8562
8709
|
style: {
|
|
8563
8710
|
padding: "".concat(8 * responsiveScale, "px"),
|
|
8564
8711
|
borderRadius: "50%",
|
|
8565
8712
|
minWidth: "".concat(36 * responsiveScale, "px"),
|
|
8566
|
-
minHeight: "".concat(36 * responsiveScale, "px")
|
|
8713
|
+
minHeight: "".concat(36 * responsiveScale, "px"),
|
|
8714
|
+
background: "rgba(0, 0, 0, 0.6)"
|
|
8567
8715
|
},
|
|
8568
|
-
title:
|
|
8569
|
-
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, {
|
|
8570
8720
|
size: Math.max(14, 18 * responsiveScale)
|
|
8571
|
-
})
|
|
8572
|
-
}),
|
|
8573
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
8574
|
-
style: {
|
|
8575
|
-
width: showVolumeSlider ? "".concat(68 * responsiveScale, "px") : "0px",
|
|
8576
|
-
overflow: "hidden",
|
|
8577
|
-
transition: "width 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
|
|
8578
|
-
display: "flex",
|
|
8579
|
-
alignItems: "center",
|
|
8580
|
-
paddingLeft: showVolumeSlider ? "".concat(3 * responsiveScale, "px") : "0",
|
|
8581
|
-
paddingRight: showVolumeSlider ? "".concat(10 * responsiveScale, "px") : "0"
|
|
8582
|
-
},
|
|
8583
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
|
|
8584
|
-
style: {
|
|
8585
|
-
position: "relative",
|
|
8586
|
-
width: "".concat(56 * responsiveScale, "px"),
|
|
8587
|
-
height: "3px",
|
|
8588
|
-
cursor: "pointer",
|
|
8589
|
-
borderRadius: "1.5px"
|
|
8590
|
-
},
|
|
8591
|
-
onMouseDown: function onMouseDown(e) {
|
|
8592
|
-
e.preventDefault();
|
|
8593
|
-
var el = e.currentTarget;
|
|
8594
|
-
var move = function move(ev) {
|
|
8595
|
-
var r2 = el.getBoundingClientRect();
|
|
8596
|
-
handleVolumeChange(Math.max(0, Math.min(1, (ev.clientX - r2.left) / r2.width)));
|
|
8597
|
-
};
|
|
8598
|
-
var up = function up1() {
|
|
8599
|
-
document.removeEventListener("mousemove", move);
|
|
8600
|
-
document.removeEventListener("mouseup", up);
|
|
8601
|
-
};
|
|
8602
|
-
document.addEventListener("mousemove", move);
|
|
8603
|
-
document.addEventListener("mouseup", up);
|
|
8604
|
-
var r = el.getBoundingClientRect();
|
|
8605
|
-
handleVolumeChange(Math.max(0, Math.min(1, (e.clientX - r.left) / r.width)));
|
|
8606
|
-
},
|
|
8607
|
-
onClick: function onClick(e) {
|
|
8608
|
-
e.stopPropagation();
|
|
8609
|
-
var r = e.currentTarget.getBoundingClientRect();
|
|
8610
|
-
handleVolumeChange(Math.max(0, Math.min(1, (e.clientX - r.left) / r.width)));
|
|
8611
|
-
},
|
|
8612
|
-
children: [
|
|
8613
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
8614
|
-
style: {
|
|
8615
|
-
position: "absolute",
|
|
8616
|
-
inset: 0,
|
|
8617
|
-
background: "rgba(255, 255, 255, 0.2)",
|
|
8618
|
-
borderRadius: "1.5px"
|
|
8619
|
-
}
|
|
8620
|
-
}),
|
|
8621
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
8622
|
-
style: {
|
|
8623
|
-
position: "absolute",
|
|
8624
|
-
top: 0,
|
|
8625
|
-
left: 0,
|
|
8626
|
-
bottom: 0,
|
|
8627
|
-
width: "".concat((isMuted ? 0 : volume) * 100, "%"),
|
|
8628
|
-
background: "#fff",
|
|
8629
|
-
borderRadius: "1.5px",
|
|
8630
|
-
transition: "width 0.1s ease-out"
|
|
8631
|
-
}
|
|
8632
|
-
}),
|
|
8633
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
8634
|
-
style: {
|
|
8635
|
-
position: "absolute",
|
|
8636
|
-
top: "50%",
|
|
8637
|
-
left: "".concat((isMuted ? 0 : volume) * 100, "%"),
|
|
8638
|
-
transform: "translate(-50%, -50%)",
|
|
8639
|
-
width: "12px",
|
|
8640
|
-
height: "12px",
|
|
8641
|
-
background: "#fff",
|
|
8642
|
-
borderRadius: "50%",
|
|
8643
|
-
boxShadow: "0 0 3px rgba(0, 0, 0, 0.3)",
|
|
8644
|
-
transition: "left 0.1s ease-out"
|
|
8645
|
-
}
|
|
8646
|
-
})
|
|
8647
|
-
]
|
|
8648
8721
|
})
|
|
8649
8722
|
})
|
|
8650
8723
|
]
|
|
8651
|
-
}),
|
|
8652
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
|
|
8653
|
-
className: "sc-ctrl-btn",
|
|
8654
|
-
onClick: function onClick() {
|
|
8655
|
-
if (onFullscreenToggle) {
|
|
8656
|
-
onFullscreenToggle();
|
|
8657
|
-
} else if (wrapperRef.current) {
|
|
8658
|
-
if (!document.fullscreenElement) {
|
|
8659
|
-
wrapperRef.current.requestFullscreen().catch(function() {});
|
|
8660
|
-
} else {
|
|
8661
|
-
document.exitFullscreen().catch(function() {});
|
|
8662
|
-
}
|
|
8663
|
-
}
|
|
8664
|
-
resetControlsTimer();
|
|
8665
|
-
},
|
|
8666
|
-
style: {
|
|
8667
|
-
padding: "".concat(8 * responsiveScale, "px"),
|
|
8668
|
-
borderRadius: "50%",
|
|
8669
|
-
minWidth: "".concat(36 * responsiveScale, "px"),
|
|
8670
|
-
minHeight: "".concat(36 * responsiveScale, "px"),
|
|
8671
|
-
background: "rgba(0, 0, 0, 0.6)"
|
|
8672
|
-
},
|
|
8673
|
-
title: isFullscreen ? "Exit Fullscreen" : "Enter Fullscreen",
|
|
8674
|
-
children: isFullscreen ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_fa.FaCompress, {
|
|
8675
|
-
size: Math.max(14, 18 * responsiveScale)
|
|
8676
|
-
}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_fa.FaExpand, {
|
|
8677
|
-
size: Math.max(14, 18 * responsiveScale)
|
|
8678
|
-
})
|
|
8679
8724
|
})
|
|
8680
8725
|
]
|
|
8681
8726
|
}),
|