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
|
@@ -2481,7 +2481,7 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
|
|
|
2481
2481
|
key: "load",
|
|
2482
2482
|
value: function load() {
|
|
2483
2483
|
return _async_to_generator(function() {
|
|
2484
|
-
var _this, _this_config_lowLatencyMode, error, _this_config_lowLatencyMode1, _this_video_play;
|
|
2484
|
+
var _this, _this_config_lowLatencyMode, error, _this_config_isLiveStream, _this_config_lowLatencyMode1, _this_video_play;
|
|
2485
2485
|
return _ts_generator(this, function(_state) {
|
|
2486
2486
|
switch(_state.label){
|
|
2487
2487
|
case 0:
|
|
@@ -2532,7 +2532,7 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
|
|
|
2532
2532
|
this.nativeHlsMode = true;
|
|
2533
2533
|
this.videoSrcProtection = this.config.src;
|
|
2534
2534
|
this.video.src = this.config.src;
|
|
2535
|
-
this.isLiveStream = (_this_config_lowLatencyMode1 = this.config.lowLatencyMode) !== null && _this_config_lowLatencyMode1 !== void 0 ? _this_config_lowLatencyMode1 : false;
|
|
2535
|
+
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;
|
|
2536
2536
|
if (this.config.debugAdTiming) {
|
|
2537
2537
|
console.log("[StormcloudVideoPlayer] Using native HLS playback - VOD mode:", {
|
|
2538
2538
|
isLive: this.isLiveStream,
|
|
@@ -2583,11 +2583,11 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
|
|
|
2583
2583
|
});
|
|
2584
2584
|
this.hls.on(import_hls2.default.Events.MANIFEST_PARSED, function(_, data) {
|
|
2585
2585
|
return _async_to_generator(function() {
|
|
2586
|
-
var _ref, _this_config_minSegmentsBeforePlay, _this_hls_levels, _this_hls, prerollKey, adBehavior, minSegments, _this_video_play;
|
|
2586
|
+
var _this_config_isLiveStream, _ref, _this_config_minSegmentsBeforePlay, _this_hls_levels, _this_hls, prerollKey, adBehavior, minSegments, _this_video_play;
|
|
2587
2587
|
return _ts_generator(this, function(_state) {
|
|
2588
2588
|
switch(_state.label){
|
|
2589
2589
|
case 0:
|
|
2590
|
-
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) {
|
|
2590
|
+
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) {
|
|
2591
2591
|
var _level_details, _level_details1;
|
|
2592
2592
|
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";
|
|
2593
2593
|
})) !== null && _ref !== void 0 ? _ref : false;
|
|
@@ -7297,6 +7297,7 @@ var import_jsx_runtime = require("react/jsx-runtime");
|
|
|
7297
7297
|
var CRITICAL_PROPS = [
|
|
7298
7298
|
"src",
|
|
7299
7299
|
"allowNativeHls",
|
|
7300
|
+
"isLiveStream",
|
|
7300
7301
|
"licenseKey",
|
|
7301
7302
|
"vmapUrl",
|
|
7302
7303
|
"lowLatencyMode",
|
|
@@ -7306,12 +7307,13 @@ var CRITICAL_PROPS = [
|
|
|
7306
7307
|
var CONTROLS_HIDE_DELAY = 3e3;
|
|
7307
7308
|
var DEFAULT_PLAYER_ASPECT_RATIO = 16 / 9;
|
|
7308
7309
|
var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
|
|
7309
|
-
var src = props.src, autoplay = props.autoplay, muted = props.muted, lowLatencyMode = props.lowLatencyMode, allowNativeHls = props.allowNativeHls, driftToleranceMs = props.driftToleranceMs, immediateManifestAds = props.immediateManifestAds, debugAdTiming = props.debugAdTiming, showCustomControls = props.showCustomControls, hideLoadingIndicator = props.hideLoadingIndicator, onVolumeToggle = props.onVolumeToggle, onFullscreenToggle = props.onFullscreenToggle, onControlClick = props.onControlClick, onReady = props.onReady, wrapperClassName = props.wrapperClassName, wrapperStyle = props.wrapperStyle, className = props.className, style = props.style, controls = props.controls, playsInline = props.playsInline, preload = props.preload, poster = props.poster, children = props.children, licenseKey = props.licenseKey, vastMode = props.vastMode, vastTagUrl = props.vastTagUrl, vmapUrl = props.vmapUrl, minSegmentsBeforePlay = props.minSegmentsBeforePlay, restVideoAttrs = _object_without_properties(props, [
|
|
7310
|
+
var src = props.src, autoplay = props.autoplay, muted = props.muted, lowLatencyMode = props.lowLatencyMode, allowNativeHls = props.allowNativeHls, isLiveStream = props.isLiveStream, driftToleranceMs = props.driftToleranceMs, immediateManifestAds = props.immediateManifestAds, debugAdTiming = props.debugAdTiming, showCustomControls = props.showCustomControls, hideLoadingIndicator = props.hideLoadingIndicator, onVolumeToggle = props.onVolumeToggle, onFullscreenToggle = props.onFullscreenToggle, onControlClick = props.onControlClick, onReady = props.onReady, wrapperClassName = props.wrapperClassName, wrapperStyle = props.wrapperStyle, className = props.className, style = props.style, controls = props.controls, playsInline = props.playsInline, preload = props.preload, poster = props.poster, children = props.children, licenseKey = props.licenseKey, vastMode = props.vastMode, vastTagUrl = props.vastTagUrl, vmapUrl = props.vmapUrl, minSegmentsBeforePlay = props.minSegmentsBeforePlay, restVideoAttrs = _object_without_properties(props, [
|
|
7310
7311
|
"src",
|
|
7311
7312
|
"autoplay",
|
|
7312
7313
|
"muted",
|
|
7313
7314
|
"lowLatencyMode",
|
|
7314
7315
|
"allowNativeHls",
|
|
7316
|
+
"isLiveStream",
|
|
7315
7317
|
"driftToleranceMs",
|
|
7316
7318
|
"immediateManifestAds",
|
|
7317
7319
|
"debugAdTiming",
|
|
@@ -7465,7 +7467,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
|
|
|
7465
7467
|
setShowSpeedMenu(false);
|
|
7466
7468
|
};
|
|
7467
7469
|
var isHlsStream = (src === null || src === void 0 ? void 0 : src.toLowerCase().includes(".m3u8")) || (src === null || src === void 0 ? void 0 : src.toLowerCase().includes("/hls/"));
|
|
7468
|
-
var shouldShowEnhancedControls = showCustomControls && (isHlsStream ? allowNativeHls : true);
|
|
7470
|
+
var shouldShowEnhancedControls = showCustomControls && (isHlsStream ? allowNativeHls || isLiveStream === false : true);
|
|
7469
7471
|
var criticalPropsKey = (0, import_react.useMemo)(function() {
|
|
7470
7472
|
return CRITICAL_PROPS.map(function(prop) {
|
|
7471
7473
|
return "".concat(prop, ":").concat(props[prop]);
|
|
@@ -7473,6 +7475,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
|
|
|
7473
7475
|
}, [
|
|
7474
7476
|
src,
|
|
7475
7477
|
allowNativeHls,
|
|
7478
|
+
isLiveStream,
|
|
7476
7479
|
licenseKey,
|
|
7477
7480
|
vmapUrl,
|
|
7478
7481
|
lowLatencyMode,
|
|
@@ -7507,6 +7510,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
|
|
|
7507
7510
|
if (muted !== void 0) cfg.muted = muted;
|
|
7508
7511
|
if (lowLatencyMode !== void 0) cfg.lowLatencyMode = lowLatencyMode;
|
|
7509
7512
|
if (allowNativeHls !== void 0) cfg.allowNativeHls = allowNativeHls;
|
|
7513
|
+
if (isLiveStream !== void 0) cfg.isLiveStream = isLiveStream;
|
|
7510
7514
|
if (driftToleranceMs !== void 0) cfg.driftToleranceMs = driftToleranceMs;
|
|
7511
7515
|
if (immediateManifestAds !== void 0) cfg.immediateManifestAds = immediateManifestAds;
|
|
7512
7516
|
if (debugAdTiming !== void 0) cfg.debugAdTiming = debugAdTiming;
|
|
@@ -8345,161 +8349,202 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
|
|
|
8345
8349
|
]
|
|
8346
8350
|
})
|
|
8347
8351
|
]
|
|
8348
|
-
}) : showCustomControls && !showLicenseWarning && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
8349
|
-
className: "sc-controls-bar",
|
|
8350
|
-
style: {
|
|
8351
|
-
position: "absolute",
|
|
8352
|
-
bottom: "".concat(10 * responsiveScale, "px"),
|
|
8353
|
-
right: "".concat(10 * responsiveScale, "px"),
|
|
8354
|
-
display: "flex",
|
|
8355
|
-
flexDirection: isPortrait ? "column" : "row",
|
|
8356
|
-
gap: "".concat(8 * responsiveScale, "px"),
|
|
8357
|
-
zIndex: 10,
|
|
8358
|
-
opacity: controlsVisible ? 1 : 0,
|
|
8359
|
-
transform: controlsVisible ? "translateY(0)" : "translateY(4px)",
|
|
8360
|
-
pointerEvents: controlsVisible ? "auto" : "none"
|
|
8361
|
-
},
|
|
8352
|
+
}) : showCustomControls && !showLicenseWarning && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
|
|
8362
8353
|
children: [
|
|
8363
8354
|
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
|
|
8364
8355
|
style: {
|
|
8356
|
+
position: "absolute",
|
|
8357
|
+
top: "".concat(10 * responsiveScale, "px"),
|
|
8358
|
+
left: "".concat(10 * responsiveScale, "px"),
|
|
8365
8359
|
display: "flex",
|
|
8366
8360
|
alignItems: "center",
|
|
8367
|
-
|
|
8368
|
-
|
|
8369
|
-
|
|
8370
|
-
|
|
8371
|
-
},
|
|
8372
|
-
onMouseEnter: function onMouseEnter() {
|
|
8373
|
-
return setShowVolumeSlider(true);
|
|
8361
|
+
gap: "6px",
|
|
8362
|
+
zIndex: 10,
|
|
8363
|
+
opacity: controlsVisible ? 1 : 0,
|
|
8364
|
+
transition: "opacity 0.35s ease"
|
|
8374
8365
|
},
|
|
8375
|
-
|
|
8376
|
-
|
|
8366
|
+
children: [
|
|
8367
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
8368
|
+
style: {
|
|
8369
|
+
width: "8px",
|
|
8370
|
+
height: "8px",
|
|
8371
|
+
borderRadius: "50%",
|
|
8372
|
+
background: "#ff3b30",
|
|
8373
|
+
animation: "sc-pulse 1.5s ease-in-out infinite",
|
|
8374
|
+
flexShrink: 0
|
|
8375
|
+
}
|
|
8376
|
+
}),
|
|
8377
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
|
|
8378
|
+
style: {
|
|
8379
|
+
fontSize: "".concat(12 * responsiveScale, "px"),
|
|
8380
|
+
fontFamily: "'SF Pro Display', 'Segoe UI', Arial, sans-serif",
|
|
8381
|
+
fontWeight: 700,
|
|
8382
|
+
letterSpacing: "0.08em",
|
|
8383
|
+
color: "#fff",
|
|
8384
|
+
textShadow: "0 1px 3px rgba(0,0,0,0.6)",
|
|
8385
|
+
userSelect: "none"
|
|
8386
|
+
},
|
|
8387
|
+
children: "LIVE"
|
|
8388
|
+
})
|
|
8389
|
+
]
|
|
8390
|
+
}),
|
|
8391
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
|
|
8392
|
+
className: "sc-controls-bar",
|
|
8393
|
+
style: {
|
|
8394
|
+
position: "absolute",
|
|
8395
|
+
bottom: "".concat(10 * responsiveScale, "px"),
|
|
8396
|
+
right: "".concat(10 * responsiveScale, "px"),
|
|
8397
|
+
display: "flex",
|
|
8398
|
+
flexDirection: isPortrait ? "column" : "row",
|
|
8399
|
+
gap: "".concat(8 * responsiveScale, "px"),
|
|
8400
|
+
zIndex: 10,
|
|
8401
|
+
opacity: controlsVisible ? 1 : 0,
|
|
8402
|
+
transform: controlsVisible ? "translateY(0)" : "translateY(4px)",
|
|
8403
|
+
pointerEvents: controlsVisible ? "auto" : "none"
|
|
8377
8404
|
},
|
|
8378
8405
|
children: [
|
|
8406
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
|
|
8407
|
+
style: {
|
|
8408
|
+
display: "flex",
|
|
8409
|
+
alignItems: "center",
|
|
8410
|
+
background: "rgba(0, 0, 0, 0.6)",
|
|
8411
|
+
borderRadius: "".concat(18 * responsiveScale, "px"),
|
|
8412
|
+
padding: "2px",
|
|
8413
|
+
paddingRight: "".concat(8 * responsiveScale, "px")
|
|
8414
|
+
},
|
|
8415
|
+
onMouseEnter: function onMouseEnter() {
|
|
8416
|
+
return setShowVolumeSlider(true);
|
|
8417
|
+
},
|
|
8418
|
+
onMouseLeave: function onMouseLeave() {
|
|
8419
|
+
return setShowVolumeSlider(false);
|
|
8420
|
+
},
|
|
8421
|
+
children: [
|
|
8422
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
|
|
8423
|
+
className: "sc-ctrl-btn",
|
|
8424
|
+
onClick: function onClick() {
|
|
8425
|
+
if (playerRef.current) playerRef.current.toggleMute();
|
|
8426
|
+
onVolumeToggle === null || onVolumeToggle === void 0 ? void 0 : onVolumeToggle();
|
|
8427
|
+
resetControlsTimer();
|
|
8428
|
+
},
|
|
8429
|
+
style: {
|
|
8430
|
+
padding: "".concat(8 * responsiveScale, "px"),
|
|
8431
|
+
borderRadius: "50%",
|
|
8432
|
+
minWidth: "".concat(36 * responsiveScale, "px"),
|
|
8433
|
+
minHeight: "".concat(36 * responsiveScale, "px")
|
|
8434
|
+
},
|
|
8435
|
+
title: isMuted ? "Unmute" : "Mute",
|
|
8436
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(VolumeIcon, {
|
|
8437
|
+
size: Math.max(14, 18 * responsiveScale)
|
|
8438
|
+
})
|
|
8439
|
+
}),
|
|
8440
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
8441
|
+
style: {
|
|
8442
|
+
width: showVolumeSlider ? "".concat(68 * responsiveScale, "px") : "0px",
|
|
8443
|
+
overflow: "hidden",
|
|
8444
|
+
transition: "width 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
|
|
8445
|
+
display: "flex",
|
|
8446
|
+
alignItems: "center",
|
|
8447
|
+
paddingLeft: showVolumeSlider ? "".concat(3 * responsiveScale, "px") : "0",
|
|
8448
|
+
paddingRight: showVolumeSlider ? "".concat(10 * responsiveScale, "px") : "0"
|
|
8449
|
+
},
|
|
8450
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
|
|
8451
|
+
style: {
|
|
8452
|
+
position: "relative",
|
|
8453
|
+
width: "".concat(56 * responsiveScale, "px"),
|
|
8454
|
+
height: "3px",
|
|
8455
|
+
cursor: "pointer",
|
|
8456
|
+
borderRadius: "1.5px"
|
|
8457
|
+
},
|
|
8458
|
+
onMouseDown: function onMouseDown(e) {
|
|
8459
|
+
e.preventDefault();
|
|
8460
|
+
var el = e.currentTarget;
|
|
8461
|
+
var move = function move(ev) {
|
|
8462
|
+
var r2 = el.getBoundingClientRect();
|
|
8463
|
+
handleVolumeChange(Math.max(0, Math.min(1, (ev.clientX - r2.left) / r2.width)));
|
|
8464
|
+
};
|
|
8465
|
+
var up = function up1() {
|
|
8466
|
+
document.removeEventListener("mousemove", move);
|
|
8467
|
+
document.removeEventListener("mouseup", up);
|
|
8468
|
+
};
|
|
8469
|
+
document.addEventListener("mousemove", move);
|
|
8470
|
+
document.addEventListener("mouseup", up);
|
|
8471
|
+
var r = el.getBoundingClientRect();
|
|
8472
|
+
handleVolumeChange(Math.max(0, Math.min(1, (e.clientX - r.left) / r.width)));
|
|
8473
|
+
},
|
|
8474
|
+
onClick: function onClick(e) {
|
|
8475
|
+
e.stopPropagation();
|
|
8476
|
+
var r = e.currentTarget.getBoundingClientRect();
|
|
8477
|
+
handleVolumeChange(Math.max(0, Math.min(1, (e.clientX - r.left) / r.width)));
|
|
8478
|
+
},
|
|
8479
|
+
children: [
|
|
8480
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
8481
|
+
style: {
|
|
8482
|
+
position: "absolute",
|
|
8483
|
+
inset: 0,
|
|
8484
|
+
background: "rgba(255, 255, 255, 0.2)",
|
|
8485
|
+
borderRadius: "1.5px"
|
|
8486
|
+
}
|
|
8487
|
+
}),
|
|
8488
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
8489
|
+
style: {
|
|
8490
|
+
position: "absolute",
|
|
8491
|
+
top: 0,
|
|
8492
|
+
left: 0,
|
|
8493
|
+
bottom: 0,
|
|
8494
|
+
width: "".concat((isMuted ? 0 : volume) * 100, "%"),
|
|
8495
|
+
background: "#fff",
|
|
8496
|
+
borderRadius: "1.5px",
|
|
8497
|
+
transition: "width 0.1s ease-out"
|
|
8498
|
+
}
|
|
8499
|
+
}),
|
|
8500
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
8501
|
+
style: {
|
|
8502
|
+
position: "absolute",
|
|
8503
|
+
top: "50%",
|
|
8504
|
+
left: "".concat((isMuted ? 0 : volume) * 100, "%"),
|
|
8505
|
+
transform: "translate(-50%, -50%)",
|
|
8506
|
+
width: "12px",
|
|
8507
|
+
height: "12px",
|
|
8508
|
+
background: "#fff",
|
|
8509
|
+
borderRadius: "50%",
|
|
8510
|
+
boxShadow: "0 0 3px rgba(0, 0, 0, 0.3)",
|
|
8511
|
+
transition: "left 0.1s ease-out"
|
|
8512
|
+
}
|
|
8513
|
+
})
|
|
8514
|
+
]
|
|
8515
|
+
})
|
|
8516
|
+
})
|
|
8517
|
+
]
|
|
8518
|
+
}),
|
|
8379
8519
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
|
|
8380
8520
|
className: "sc-ctrl-btn",
|
|
8381
8521
|
onClick: function onClick() {
|
|
8382
|
-
if (
|
|
8383
|
-
|
|
8522
|
+
if (onFullscreenToggle) {
|
|
8523
|
+
onFullscreenToggle();
|
|
8524
|
+
} else if (wrapperRef.current) {
|
|
8525
|
+
if (!document.fullscreenElement) {
|
|
8526
|
+
wrapperRef.current.requestFullscreen().catch(function() {});
|
|
8527
|
+
} else {
|
|
8528
|
+
document.exitFullscreen().catch(function() {});
|
|
8529
|
+
}
|
|
8530
|
+
}
|
|
8384
8531
|
resetControlsTimer();
|
|
8385
8532
|
},
|
|
8386
8533
|
style: {
|
|
8387
8534
|
padding: "".concat(8 * responsiveScale, "px"),
|
|
8388
8535
|
borderRadius: "50%",
|
|
8389
8536
|
minWidth: "".concat(36 * responsiveScale, "px"),
|
|
8390
|
-
minHeight: "".concat(36 * responsiveScale, "px")
|
|
8537
|
+
minHeight: "".concat(36 * responsiveScale, "px"),
|
|
8538
|
+
background: "rgba(0, 0, 0, 0.6)"
|
|
8391
8539
|
},
|
|
8392
|
-
title:
|
|
8393
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
8540
|
+
title: isFullscreen ? "Exit Fullscreen" : "Enter Fullscreen",
|
|
8541
|
+
children: isFullscreen ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_fa.FaCompress, {
|
|
8542
|
+
size: Math.max(14, 18 * responsiveScale)
|
|
8543
|
+
}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_fa.FaExpand, {
|
|
8394
8544
|
size: Math.max(14, 18 * responsiveScale)
|
|
8395
|
-
})
|
|
8396
|
-
}),
|
|
8397
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
8398
|
-
style: {
|
|
8399
|
-
width: showVolumeSlider ? "".concat(68 * responsiveScale, "px") : "0px",
|
|
8400
|
-
overflow: "hidden",
|
|
8401
|
-
transition: "width 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
|
|
8402
|
-
display: "flex",
|
|
8403
|
-
alignItems: "center",
|
|
8404
|
-
paddingLeft: showVolumeSlider ? "".concat(3 * responsiveScale, "px") : "0",
|
|
8405
|
-
paddingRight: showVolumeSlider ? "".concat(10 * responsiveScale, "px") : "0"
|
|
8406
|
-
},
|
|
8407
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
|
|
8408
|
-
style: {
|
|
8409
|
-
position: "relative",
|
|
8410
|
-
width: "".concat(56 * responsiveScale, "px"),
|
|
8411
|
-
height: "3px",
|
|
8412
|
-
cursor: "pointer",
|
|
8413
|
-
borderRadius: "1.5px"
|
|
8414
|
-
},
|
|
8415
|
-
onMouseDown: function onMouseDown(e) {
|
|
8416
|
-
e.preventDefault();
|
|
8417
|
-
var el = e.currentTarget;
|
|
8418
|
-
var move = function move(ev) {
|
|
8419
|
-
var r2 = el.getBoundingClientRect();
|
|
8420
|
-
handleVolumeChange(Math.max(0, Math.min(1, (ev.clientX - r2.left) / r2.width)));
|
|
8421
|
-
};
|
|
8422
|
-
var up = function up1() {
|
|
8423
|
-
document.removeEventListener("mousemove", move);
|
|
8424
|
-
document.removeEventListener("mouseup", up);
|
|
8425
|
-
};
|
|
8426
|
-
document.addEventListener("mousemove", move);
|
|
8427
|
-
document.addEventListener("mouseup", up);
|
|
8428
|
-
var r = el.getBoundingClientRect();
|
|
8429
|
-
handleVolumeChange(Math.max(0, Math.min(1, (e.clientX - r.left) / r.width)));
|
|
8430
|
-
},
|
|
8431
|
-
onClick: function onClick(e) {
|
|
8432
|
-
e.stopPropagation();
|
|
8433
|
-
var r = e.currentTarget.getBoundingClientRect();
|
|
8434
|
-
handleVolumeChange(Math.max(0, Math.min(1, (e.clientX - r.left) / r.width)));
|
|
8435
|
-
},
|
|
8436
|
-
children: [
|
|
8437
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
8438
|
-
style: {
|
|
8439
|
-
position: "absolute",
|
|
8440
|
-
inset: 0,
|
|
8441
|
-
background: "rgba(255, 255, 255, 0.2)",
|
|
8442
|
-
borderRadius: "1.5px"
|
|
8443
|
-
}
|
|
8444
|
-
}),
|
|
8445
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
8446
|
-
style: {
|
|
8447
|
-
position: "absolute",
|
|
8448
|
-
top: 0,
|
|
8449
|
-
left: 0,
|
|
8450
|
-
bottom: 0,
|
|
8451
|
-
width: "".concat((isMuted ? 0 : volume) * 100, "%"),
|
|
8452
|
-
background: "#fff",
|
|
8453
|
-
borderRadius: "1.5px",
|
|
8454
|
-
transition: "width 0.1s ease-out"
|
|
8455
|
-
}
|
|
8456
|
-
}),
|
|
8457
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
8458
|
-
style: {
|
|
8459
|
-
position: "absolute",
|
|
8460
|
-
top: "50%",
|
|
8461
|
-
left: "".concat((isMuted ? 0 : volume) * 100, "%"),
|
|
8462
|
-
transform: "translate(-50%, -50%)",
|
|
8463
|
-
width: "12px",
|
|
8464
|
-
height: "12px",
|
|
8465
|
-
background: "#fff",
|
|
8466
|
-
borderRadius: "50%",
|
|
8467
|
-
boxShadow: "0 0 3px rgba(0, 0, 0, 0.3)",
|
|
8468
|
-
transition: "left 0.1s ease-out"
|
|
8469
|
-
}
|
|
8470
|
-
})
|
|
8471
|
-
]
|
|
8472
8545
|
})
|
|
8473
8546
|
})
|
|
8474
8547
|
]
|
|
8475
|
-
}),
|
|
8476
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
|
|
8477
|
-
className: "sc-ctrl-btn",
|
|
8478
|
-
onClick: function onClick() {
|
|
8479
|
-
if (onFullscreenToggle) {
|
|
8480
|
-
onFullscreenToggle();
|
|
8481
|
-
} else if (wrapperRef.current) {
|
|
8482
|
-
if (!document.fullscreenElement) {
|
|
8483
|
-
wrapperRef.current.requestFullscreen().catch(function() {});
|
|
8484
|
-
} else {
|
|
8485
|
-
document.exitFullscreen().catch(function() {});
|
|
8486
|
-
}
|
|
8487
|
-
}
|
|
8488
|
-
resetControlsTimer();
|
|
8489
|
-
},
|
|
8490
|
-
style: {
|
|
8491
|
-
padding: "".concat(8 * responsiveScale, "px"),
|
|
8492
|
-
borderRadius: "50%",
|
|
8493
|
-
minWidth: "".concat(36 * responsiveScale, "px"),
|
|
8494
|
-
minHeight: "".concat(36 * responsiveScale, "px"),
|
|
8495
|
-
background: "rgba(0, 0, 0, 0.6)"
|
|
8496
|
-
},
|
|
8497
|
-
title: isFullscreen ? "Exit Fullscreen" : "Enter Fullscreen",
|
|
8498
|
-
children: isFullscreen ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_fa.FaCompress, {
|
|
8499
|
-
size: Math.max(14, 18 * responsiveScale)
|
|
8500
|
-
}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_fa.FaExpand, {
|
|
8501
|
-
size: Math.max(14, 18 * responsiveScale)
|
|
8502
|
-
})
|
|
8503
8548
|
})
|
|
8504
8549
|
]
|
|
8505
8550
|
}),
|