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
|
@@ -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,19 +2583,28 @@ 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
|
|
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
|
-
|
|
2591
|
-
|
|
2592
|
-
|
|
2593
|
-
|
|
2594
|
-
|
|
2595
|
-
|
|
2596
|
-
|
|
2597
|
-
|
|
2598
|
-
|
|
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
|
+
var _level_details, _level_details1;
|
|
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
|
+
})) !== null && _ref !== void 0 ? _ref : false;
|
|
2594
|
+
if (!this.isLiveStream && this.vmapBreaks.length === 0 && this.apiVastTagUrl) {
|
|
2595
|
+
prerollKey = "synthetic-vod-preroll";
|
|
2596
|
+
if (!this.consumedVmapBreakIds.has(prerollKey)) {
|
|
2597
|
+
this.vmapBreaks = [
|
|
2598
|
+
{
|
|
2599
|
+
id: prerollKey,
|
|
2600
|
+
startTimeMs: 0,
|
|
2601
|
+
vastTagUrl: this.apiVastTagUrl
|
|
2602
|
+
}
|
|
2603
|
+
];
|
|
2604
|
+
if (this.config.debugAdTiming) {
|
|
2605
|
+
console.log("[StormcloudVideoPlayer] Injected synthetic VOD preroll from apiVastTagUrl");
|
|
2606
|
+
}
|
|
2607
|
+
}
|
|
2599
2608
|
}
|
|
2600
2609
|
if (this.config.debugAdTiming) {
|
|
2601
2610
|
adBehavior = this.shouldContinueLiveStreamDuringAds() ? "live (main video continues muted during ads)" : "vod (main video pauses during ads)";
|
|
@@ -7051,7 +7060,8 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
|
|
|
7051
7060
|
continue;
|
|
7052
7061
|
}
|
|
7053
7062
|
var end = breakStartMs + (b.durationMs || 0);
|
|
7054
|
-
|
|
7063
|
+
var effectiveTol = breakStartMs === 0 ? Math.max(tol, 3e4) : tol;
|
|
7064
|
+
if (nowMs >= breakStartMs && (b.durationMs ? nowMs < end : nowMs <= breakStartMs + effectiveTol)) {
|
|
7055
7065
|
return b;
|
|
7056
7066
|
}
|
|
7057
7067
|
}
|
|
@@ -7287,6 +7297,7 @@ var import_jsx_runtime = require("react/jsx-runtime");
|
|
|
7287
7297
|
var CRITICAL_PROPS = [
|
|
7288
7298
|
"src",
|
|
7289
7299
|
"allowNativeHls",
|
|
7300
|
+
"isLiveStream",
|
|
7290
7301
|
"licenseKey",
|
|
7291
7302
|
"vmapUrl",
|
|
7292
7303
|
"lowLatencyMode",
|
|
@@ -7296,12 +7307,13 @@ var CRITICAL_PROPS = [
|
|
|
7296
7307
|
var CONTROLS_HIDE_DELAY = 3e3;
|
|
7297
7308
|
var DEFAULT_PLAYER_ASPECT_RATIO = 16 / 9;
|
|
7298
7309
|
var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
|
|
7299
|
-
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, [
|
|
7300
7311
|
"src",
|
|
7301
7312
|
"autoplay",
|
|
7302
7313
|
"muted",
|
|
7303
7314
|
"lowLatencyMode",
|
|
7304
7315
|
"allowNativeHls",
|
|
7316
|
+
"isLiveStream",
|
|
7305
7317
|
"driftToleranceMs",
|
|
7306
7318
|
"immediateManifestAds",
|
|
7307
7319
|
"debugAdTiming",
|
|
@@ -7455,7 +7467,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
|
|
|
7455
7467
|
setShowSpeedMenu(false);
|
|
7456
7468
|
};
|
|
7457
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/"));
|
|
7458
|
-
var shouldShowEnhancedControls = showCustomControls && (isHlsStream ? allowNativeHls : true);
|
|
7470
|
+
var shouldShowEnhancedControls = showCustomControls && (isHlsStream ? allowNativeHls || isLiveStream === false : true);
|
|
7459
7471
|
var criticalPropsKey = (0, import_react.useMemo)(function() {
|
|
7460
7472
|
return CRITICAL_PROPS.map(function(prop) {
|
|
7461
7473
|
return "".concat(prop, ":").concat(props[prop]);
|
|
@@ -7463,6 +7475,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
|
|
|
7463
7475
|
}, [
|
|
7464
7476
|
src,
|
|
7465
7477
|
allowNativeHls,
|
|
7478
|
+
isLiveStream,
|
|
7466
7479
|
licenseKey,
|
|
7467
7480
|
vmapUrl,
|
|
7468
7481
|
lowLatencyMode,
|
|
@@ -7497,6 +7510,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
|
|
|
7497
7510
|
if (muted !== void 0) cfg.muted = muted;
|
|
7498
7511
|
if (lowLatencyMode !== void 0) cfg.lowLatencyMode = lowLatencyMode;
|
|
7499
7512
|
if (allowNativeHls !== void 0) cfg.allowNativeHls = allowNativeHls;
|
|
7513
|
+
if (isLiveStream !== void 0) cfg.isLiveStream = isLiveStream;
|
|
7500
7514
|
if (driftToleranceMs !== void 0) cfg.driftToleranceMs = driftToleranceMs;
|
|
7501
7515
|
if (immediateManifestAds !== void 0) cfg.immediateManifestAds = immediateManifestAds;
|
|
7502
7516
|
if (debugAdTiming !== void 0) cfg.debugAdTiming = debugAdTiming;
|
|
@@ -8335,161 +8349,202 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
|
|
|
8335
8349
|
]
|
|
8336
8350
|
})
|
|
8337
8351
|
]
|
|
8338
|
-
}) : showCustomControls && !showLicenseWarning && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
8339
|
-
className: "sc-controls-bar",
|
|
8340
|
-
style: {
|
|
8341
|
-
position: "absolute",
|
|
8342
|
-
bottom: "".concat(10 * responsiveScale, "px"),
|
|
8343
|
-
right: "".concat(10 * responsiveScale, "px"),
|
|
8344
|
-
display: "flex",
|
|
8345
|
-
flexDirection: isPortrait ? "column" : "row",
|
|
8346
|
-
gap: "".concat(8 * responsiveScale, "px"),
|
|
8347
|
-
zIndex: 10,
|
|
8348
|
-
opacity: controlsVisible ? 1 : 0,
|
|
8349
|
-
transform: controlsVisible ? "translateY(0)" : "translateY(4px)",
|
|
8350
|
-
pointerEvents: controlsVisible ? "auto" : "none"
|
|
8351
|
-
},
|
|
8352
|
+
}) : showCustomControls && !showLicenseWarning && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
|
|
8352
8353
|
children: [
|
|
8353
8354
|
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
|
|
8354
8355
|
style: {
|
|
8356
|
+
position: "absolute",
|
|
8357
|
+
top: "".concat(10 * responsiveScale, "px"),
|
|
8358
|
+
left: "".concat(10 * responsiveScale, "px"),
|
|
8355
8359
|
display: "flex",
|
|
8356
8360
|
alignItems: "center",
|
|
8357
|
-
|
|
8358
|
-
|
|
8359
|
-
|
|
8360
|
-
|
|
8361
|
-
},
|
|
8362
|
-
onMouseEnter: function onMouseEnter() {
|
|
8363
|
-
return setShowVolumeSlider(true);
|
|
8361
|
+
gap: "6px",
|
|
8362
|
+
zIndex: 10,
|
|
8363
|
+
opacity: controlsVisible ? 1 : 0,
|
|
8364
|
+
transition: "opacity 0.35s ease"
|
|
8364
8365
|
},
|
|
8365
|
-
|
|
8366
|
-
|
|
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"
|
|
8367
8404
|
},
|
|
8368
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
|
+
}),
|
|
8369
8519
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
|
|
8370
8520
|
className: "sc-ctrl-btn",
|
|
8371
8521
|
onClick: function onClick() {
|
|
8372
|
-
if (
|
|
8373
|
-
|
|
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
|
+
}
|
|
8374
8531
|
resetControlsTimer();
|
|
8375
8532
|
},
|
|
8376
8533
|
style: {
|
|
8377
8534
|
padding: "".concat(8 * responsiveScale, "px"),
|
|
8378
8535
|
borderRadius: "50%",
|
|
8379
8536
|
minWidth: "".concat(36 * responsiveScale, "px"),
|
|
8380
|
-
minHeight: "".concat(36 * responsiveScale, "px")
|
|
8537
|
+
minHeight: "".concat(36 * responsiveScale, "px"),
|
|
8538
|
+
background: "rgba(0, 0, 0, 0.6)"
|
|
8381
8539
|
},
|
|
8382
|
-
title:
|
|
8383
|
-
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, {
|
|
8384
8544
|
size: Math.max(14, 18 * responsiveScale)
|
|
8385
|
-
})
|
|
8386
|
-
}),
|
|
8387
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
8388
|
-
style: {
|
|
8389
|
-
width: showVolumeSlider ? "".concat(68 * responsiveScale, "px") : "0px",
|
|
8390
|
-
overflow: "hidden",
|
|
8391
|
-
transition: "width 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
|
|
8392
|
-
display: "flex",
|
|
8393
|
-
alignItems: "center",
|
|
8394
|
-
paddingLeft: showVolumeSlider ? "".concat(3 * responsiveScale, "px") : "0",
|
|
8395
|
-
paddingRight: showVolumeSlider ? "".concat(10 * responsiveScale, "px") : "0"
|
|
8396
|
-
},
|
|
8397
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
|
|
8398
|
-
style: {
|
|
8399
|
-
position: "relative",
|
|
8400
|
-
width: "".concat(56 * responsiveScale, "px"),
|
|
8401
|
-
height: "3px",
|
|
8402
|
-
cursor: "pointer",
|
|
8403
|
-
borderRadius: "1.5px"
|
|
8404
|
-
},
|
|
8405
|
-
onMouseDown: function onMouseDown(e) {
|
|
8406
|
-
e.preventDefault();
|
|
8407
|
-
var el = e.currentTarget;
|
|
8408
|
-
var move = function move(ev) {
|
|
8409
|
-
var r2 = el.getBoundingClientRect();
|
|
8410
|
-
handleVolumeChange(Math.max(0, Math.min(1, (ev.clientX - r2.left) / r2.width)));
|
|
8411
|
-
};
|
|
8412
|
-
var up = function up1() {
|
|
8413
|
-
document.removeEventListener("mousemove", move);
|
|
8414
|
-
document.removeEventListener("mouseup", up);
|
|
8415
|
-
};
|
|
8416
|
-
document.addEventListener("mousemove", move);
|
|
8417
|
-
document.addEventListener("mouseup", up);
|
|
8418
|
-
var r = el.getBoundingClientRect();
|
|
8419
|
-
handleVolumeChange(Math.max(0, Math.min(1, (e.clientX - r.left) / r.width)));
|
|
8420
|
-
},
|
|
8421
|
-
onClick: function onClick(e) {
|
|
8422
|
-
e.stopPropagation();
|
|
8423
|
-
var r = e.currentTarget.getBoundingClientRect();
|
|
8424
|
-
handleVolumeChange(Math.max(0, Math.min(1, (e.clientX - r.left) / r.width)));
|
|
8425
|
-
},
|
|
8426
|
-
children: [
|
|
8427
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
8428
|
-
style: {
|
|
8429
|
-
position: "absolute",
|
|
8430
|
-
inset: 0,
|
|
8431
|
-
background: "rgba(255, 255, 255, 0.2)",
|
|
8432
|
-
borderRadius: "1.5px"
|
|
8433
|
-
}
|
|
8434
|
-
}),
|
|
8435
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
8436
|
-
style: {
|
|
8437
|
-
position: "absolute",
|
|
8438
|
-
top: 0,
|
|
8439
|
-
left: 0,
|
|
8440
|
-
bottom: 0,
|
|
8441
|
-
width: "".concat((isMuted ? 0 : volume) * 100, "%"),
|
|
8442
|
-
background: "#fff",
|
|
8443
|
-
borderRadius: "1.5px",
|
|
8444
|
-
transition: "width 0.1s ease-out"
|
|
8445
|
-
}
|
|
8446
|
-
}),
|
|
8447
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
8448
|
-
style: {
|
|
8449
|
-
position: "absolute",
|
|
8450
|
-
top: "50%",
|
|
8451
|
-
left: "".concat((isMuted ? 0 : volume) * 100, "%"),
|
|
8452
|
-
transform: "translate(-50%, -50%)",
|
|
8453
|
-
width: "12px",
|
|
8454
|
-
height: "12px",
|
|
8455
|
-
background: "#fff",
|
|
8456
|
-
borderRadius: "50%",
|
|
8457
|
-
boxShadow: "0 0 3px rgba(0, 0, 0, 0.3)",
|
|
8458
|
-
transition: "left 0.1s ease-out"
|
|
8459
|
-
}
|
|
8460
|
-
})
|
|
8461
|
-
]
|
|
8462
8545
|
})
|
|
8463
8546
|
})
|
|
8464
8547
|
]
|
|
8465
|
-
}),
|
|
8466
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
|
|
8467
|
-
className: "sc-ctrl-btn",
|
|
8468
|
-
onClick: function onClick() {
|
|
8469
|
-
if (onFullscreenToggle) {
|
|
8470
|
-
onFullscreenToggle();
|
|
8471
|
-
} else if (wrapperRef.current) {
|
|
8472
|
-
if (!document.fullscreenElement) {
|
|
8473
|
-
wrapperRef.current.requestFullscreen().catch(function() {});
|
|
8474
|
-
} else {
|
|
8475
|
-
document.exitFullscreen().catch(function() {});
|
|
8476
|
-
}
|
|
8477
|
-
}
|
|
8478
|
-
resetControlsTimer();
|
|
8479
|
-
},
|
|
8480
|
-
style: {
|
|
8481
|
-
padding: "".concat(8 * responsiveScale, "px"),
|
|
8482
|
-
borderRadius: "50%",
|
|
8483
|
-
minWidth: "".concat(36 * responsiveScale, "px"),
|
|
8484
|
-
minHeight: "".concat(36 * responsiveScale, "px"),
|
|
8485
|
-
background: "rgba(0, 0, 0, 0.6)"
|
|
8486
|
-
},
|
|
8487
|
-
title: isFullscreen ? "Exit Fullscreen" : "Enter Fullscreen",
|
|
8488
|
-
children: isFullscreen ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_fa.FaCompress, {
|
|
8489
|
-
size: Math.max(14, 18 * responsiveScale)
|
|
8490
|
-
}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_fa.FaExpand, {
|
|
8491
|
-
size: Math.max(14, 18 * responsiveScale)
|
|
8492
|
-
})
|
|
8493
8548
|
})
|
|
8494
8549
|
]
|
|
8495
8550
|
}),
|