stormcloud-video-player 0.3.61 → 0.3.62

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (23) hide show
  1. package/dist/stormcloud-vp.min.js +1 -1
  2. package/lib/index.cjs +203 -148
  3. package/lib/index.cjs.map +1 -1
  4. package/lib/index.d.cts +1 -0
  5. package/lib/index.d.ts +1 -0
  6. package/lib/index.js +203 -148
  7. package/lib/index.js.map +1 -1
  8. package/lib/player/StormcloudVideoPlayer.cjs +23 -13
  9. package/lib/player/StormcloudVideoPlayer.cjs.map +1 -1
  10. package/lib/player/StormcloudVideoPlayer.d.cts +1 -1
  11. package/lib/players/HlsPlayer.cjs +23 -13
  12. package/lib/players/HlsPlayer.cjs.map +1 -1
  13. package/lib/players/HlsPlayer.d.cts +1 -1
  14. package/lib/players/index.cjs +23 -13
  15. package/lib/players/index.cjs.map +1 -1
  16. package/lib/sdk/hlsAdPlayer.d.cts +1 -1
  17. package/lib/sdk/ima.d.cts +1 -1
  18. package/lib/{types-XKUJJhlG.d.cts → types-BJPNhfLV.d.cts} +1 -0
  19. package/lib/ui/StormcloudVideoPlayer.cjs +203 -148
  20. package/lib/ui/StormcloudVideoPlayer.cjs.map +1 -1
  21. package/lib/ui/StormcloudVideoPlayer.d.cts +1 -1
  22. package/lib/utils/tracking.d.cts +1 -1
  23. package/package.json +1 -1
package/lib/sdk/hlsAdPlayer.d.cts CHANGED
@@ -1,4 +1,4 @@
1
- import { I as ImaController } from '../types-XKUJJhlG.cjs';
1
+ import { I as ImaController } from '../types-BJPNhfLV.cjs';
2
2
  import Hls from 'hls.js';
3
3
 
4
4
  declare function createHlsAdPlayer(contentVideo: HTMLVideoElement, options?: {
package/lib/sdk/ima.d.cts CHANGED
@@ -1,4 +1,4 @@
1
- import { I as ImaController } from '../types-XKUJJhlG.cjs';
1
+ import { I as ImaController } from '../types-BJPNhfLV.cjs';
2
2
 
3
3
  declare global {
4
4
  interface Window {
package/lib/{types-XKUJJhlG.d.cts → types-BJPNhfLV.d.cts} RENAMED
@@ -5,6 +5,7 @@ interface StormcloudVideoPlayerConfig {
5
5
  muted?: boolean;
6
6
  allowNativeHls?: boolean;
7
7
  lowLatencyMode?: boolean;
8
+ isLiveStream?: boolean;
8
9
  driftToleranceMs?: number;
9
10
  immediateManifestAds?: boolean;
10
11
  debugAdTiming?: boolean;
package/lib/ui/StormcloudVideoPlayer.cjs CHANGED
@@ -3375,7 +3375,7 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
3375
3375
  key: "load",
3376
3376
  value: function load() {
3377
3377
  return _async_to_generator(function() {
3378
- var _this, error, _this_config_lowLatencyMode, _this_video_play;
3378
+ var _this, error, _this_config_isLiveStream, _this_config_lowLatencyMode, _this_video_play;
3379
3379
  return _ts_generator(this, function(_state) {
3380
3380
  switch(_state.label){
3381
3381
  case 0:
@@ -3419,7 +3419,7 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
3419
3419
  this.nativeHlsMode = true;
3420
3420
  this.videoSrcProtection = this.config.src;
3421
3421
  this.video.src = this.config.src;
3422
- this.isLiveStream = (_this_config_lowLatencyMode = this.config.lowLatencyMode) !== null && _this_config_lowLatencyMode !== void 0 ? _this_config_lowLatencyMode : false;
3422
+ this.isLiveStream = (_this_config_isLiveStream = this.config.isLiveStream) !== null && _this_config_isLiveStream !== void 0 ? _this_config_isLiveStream : (_this_config_lowLatencyMode = this.config.lowLatencyMode) !== null && _this_config_lowLatencyMode !== void 0 ? _this_config_lowLatencyMode : false;
3423
3423
  if (this.config.debugAdTiming) {
3424
3424
  console.log("[StormcloudVideoPlayer] Using native HLS playback - VOD mode:", {
3425
3425
  isLive: this.isLiveStream,
@@ -3470,19 +3470,28 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
3470
3470
  });
3471
3471
  this.hls.on(import_hls2.default.Events.MANIFEST_PARSED, function(_, data) {
3472
3472
  return _async_to_generator(function() {
3473
- var _this_config_minSegmentsBeforePlay, _ref, _this_hls_levels, _this_hls, adBehavior, minSegments, _this_video_play;
3473
+ var _this_config_isLiveStream, _ref, _this_config_minSegmentsBeforePlay, _this_hls_levels, _this_hls, prerollKey, adBehavior, minSegments, _this_video_play;
3474
3474
  return _ts_generator(this, function(_state) {
3475
3475
  switch(_state.label){
3476
3476
  case 0:
3477
- if (this.config.allowNativeHls === false) {
3478
- this.isLiveStream = true;
3479
- } else {
3480
- ;
3481
- ;
3482
- 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) {
3483
- var _level_details, _level_details1;
3484
- 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";
3485
- })) !== null && _ref !== void 0 ? _ref : false;
3477
+ 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) {
3478
+ var _level_details, _level_details1;
3479
+ 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";
3480
+ })) !== null && _ref !== void 0 ? _ref : false;
3481
+ if (!this.isLiveStream && this.vmapBreaks.length === 0 && this.apiVastTagUrl) {
3482
+ prerollKey = "synthetic-vod-preroll";
3483
+ if (!this.consumedVmapBreakIds.has(prerollKey)) {
3484
+ this.vmapBreaks = [
3485
+ {
3486
+ id: prerollKey,
3487
+ startTimeMs: 0,
3488
+ vastTagUrl: this.apiVastTagUrl
3489
+ }
3490
+ ];
3491
+ if (this.config.debugAdTiming) {
3492
+ console.log("[StormcloudVideoPlayer] Injected synthetic VOD preroll from apiVastTagUrl");
3493
+ }
3494
+ }
3486
3495
  }
3487
3496
  if (this.config.debugAdTiming) {
3488
3497
  adBehavior = this.shouldContinueLiveStreamDuringAds() ? "live (main video continues muted during ads)" : "vod (main video pauses during ads)";
@@ -7920,7 +7929,8 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
7920
7929
  continue;
7921
7930
  }
7922
7931
  var end = breakStartMs + (b.durationMs || 0);
7923
- if (nowMs >= breakStartMs && (b.durationMs ? nowMs < end : nowMs <= breakStartMs + tol)) {
7932
+ var effectiveTol = breakStartMs === 0 ? Math.max(tol, 3e4) : tol;
7933
+ if (nowMs >= breakStartMs && (b.durationMs ? nowMs < end : nowMs <= breakStartMs + effectiveTol)) {
7924
7934
  return b;
7925
7935
  }
7926
7936
  }
@@ -8151,6 +8161,7 @@ var import_jsx_runtime = require("react/jsx-runtime");
8151
8161
  var CRITICAL_PROPS = [
8152
8162
  "src",
8153
8163
  "allowNativeHls",
8164
+ "isLiveStream",
8154
8165
  "licenseKey",
8155
8166
  "vmapUrl",
8156
8167
  "lowLatencyMode",
@@ -8160,12 +8171,13 @@ var CRITICAL_PROPS = [
8160
8171
  var CONTROLS_HIDE_DELAY = 3e3;
8161
8172
  var DEFAULT_PLAYER_ASPECT_RATIO = 16 / 9;
8162
8173
  var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
8163
- var src = props.src, autoplay = props.autoplay, muted = props.muted, lowLatencyMode = props.lowLatencyMode, allowNativeHls = props.allowNativeHls, driftToleranceMs = props.driftToleranceMs, immediateManifestAds = props.immediateManifestAds, debugAdTiming = props.debugAdTiming, showCustomControls = props.showCustomControls, hideLoadingIndicator = props.hideLoadingIndicator, onVolumeToggle = props.onVolumeToggle, onFullscreenToggle = props.onFullscreenToggle, onControlClick = props.onControlClick, onReady = props.onReady, wrapperClassName = props.wrapperClassName, wrapperStyle = props.wrapperStyle, className = props.className, style = props.style, controls = props.controls, playsInline = props.playsInline, preload = props.preload, poster = props.poster, children = props.children, licenseKey = props.licenseKey, vastMode = props.vastMode, vastTagUrl = props.vastTagUrl, vmapUrl = props.vmapUrl, adPlayerType = props.adPlayerType, minSegmentsBeforePlay = props.minSegmentsBeforePlay, restVideoAttrs = _object_without_properties(props, [
8174
+ var src = props.src, autoplay = props.autoplay, muted = props.muted, lowLatencyMode = props.lowLatencyMode, allowNativeHls = props.allowNativeHls, isLiveStream = props.isLiveStream, driftToleranceMs = props.driftToleranceMs, immediateManifestAds = props.immediateManifestAds, debugAdTiming = props.debugAdTiming, showCustomControls = props.showCustomControls, hideLoadingIndicator = props.hideLoadingIndicator, onVolumeToggle = props.onVolumeToggle, onFullscreenToggle = props.onFullscreenToggle, onControlClick = props.onControlClick, onReady = props.onReady, wrapperClassName = props.wrapperClassName, wrapperStyle = props.wrapperStyle, className = props.className, style = props.style, controls = props.controls, playsInline = props.playsInline, preload = props.preload, poster = props.poster, children = props.children, licenseKey = props.licenseKey, vastMode = props.vastMode, vastTagUrl = props.vastTagUrl, vmapUrl = props.vmapUrl, adPlayerType = props.adPlayerType, minSegmentsBeforePlay = props.minSegmentsBeforePlay, restVideoAttrs = _object_without_properties(props, [
8164
8175
  "src",
8165
8176
  "autoplay",
8166
8177
  "muted",
8167
8178
  "lowLatencyMode",
8168
8179
  "allowNativeHls",
8180
+ "isLiveStream",
8169
8181
  "driftToleranceMs",
8170
8182
  "immediateManifestAds",
8171
8183
  "debugAdTiming",
@@ -8320,7 +8332,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
8320
8332
  setShowSpeedMenu(false);
8321
8333
  };
8322
8334
  var isHlsStream = (src === null || src === void 0 ? void 0 : src.toLowerCase().includes(".m3u8")) || (src === null || src === void 0 ? void 0 : src.toLowerCase().includes("/hls/"));
8323
- var shouldShowEnhancedControls = showCustomControls && (isHlsStream ? allowNativeHls : true);
8335
+ var shouldShowEnhancedControls = showCustomControls && (isHlsStream ? allowNativeHls || isLiveStream === false : true);
8324
8336
  var criticalPropsKey = (0, import_react.useMemo)(function() {
8325
8337
  return CRITICAL_PROPS.map(function(prop) {
8326
8338
  return "".concat(prop, ":").concat(props[prop]);
@@ -8328,6 +8340,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
8328
8340
  }, [
8329
8341
  src,
8330
8342
  allowNativeHls,
8343
+ isLiveStream,
8331
8344
  licenseKey,
8332
8345
  vmapUrl,
8333
8346
  lowLatencyMode,
@@ -8362,6 +8375,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
8362
8375
  if (muted !== void 0) cfg.muted = muted;
8363
8376
  if (lowLatencyMode !== void 0) cfg.lowLatencyMode = lowLatencyMode;
8364
8377
  if (allowNativeHls !== void 0) cfg.allowNativeHls = allowNativeHls;
8378
+ if (isLiveStream !== void 0) cfg.isLiveStream = isLiveStream;
8365
8379
  if (driftToleranceMs !== void 0) cfg.driftToleranceMs = driftToleranceMs;
8366
8380
  if (immediateManifestAds !== void 0) cfg.immediateManifestAds = immediateManifestAds;
8367
8381
  if (debugAdTiming !== void 0) cfg.debugAdTiming = debugAdTiming;
@@ -9201,161 +9215,202 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
9201
9215
  ]
9202
9216
  })
9203
9217
  ]
9204
- }) : showCustomControls && !showLicenseWarning && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
9205
- className: "sc-controls-bar",
9206
- style: {
9207
- position: "absolute",
9208
- bottom: "".concat(10 * responsiveScale, "px"),
9209
- right: "".concat(10 * responsiveScale, "px"),
9210
- display: "flex",
9211
- flexDirection: isPortrait ? "column" : "row",
9212
- gap: "".concat(8 * responsiveScale, "px"),
9213
- zIndex: 10,
9214
- opacity: controlsVisible ? 1 : 0,
9215
- transform: controlsVisible ? "translateY(0)" : "translateY(4px)",
9216
- pointerEvents: controlsVisible ? "auto" : "none"
9217
- },
9218
+ }) : showCustomControls && !showLicenseWarning && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
9218
9219
  children: [
9219
9220
  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
9220
9221
  style: {
9222
+ position: "absolute",
9223
+ top: "".concat(10 * responsiveScale, "px"),
9224
+ left: "".concat(10 * responsiveScale, "px"),
9221
9225
  display: "flex",
9222
9226
  alignItems: "center",
9223
- background: "rgba(0, 0, 0, 0.6)",
9224
- borderRadius: "".concat(18 * responsiveScale, "px"),
9225
- padding: "2px",
9226
- paddingRight: "".concat(8 * responsiveScale, "px")
9227
- },
9228
- onMouseEnter: function onMouseEnter() {
9229
- return setShowVolumeSlider(true);
9227
+ gap: "6px",
9228
+ zIndex: 10,
9229
+ opacity: controlsVisible ? 1 : 0,
9230
+ transition: "opacity 0.35s ease"
9230
9231
  },
9231
- onMouseLeave: function onMouseLeave() {
9232
- return setShowVolumeSlider(false);
9232
+ children: [
9233
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
9234
+ style: {
9235
+ width: "8px",
9236
+ height: "8px",
9237
+ borderRadius: "50%",
9238
+ background: "#ff3b30",
9239
+ animation: "sc-pulse 1.5s ease-in-out infinite",
9240
+ flexShrink: 0
9241
+ }
9242
+ }),
9243
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
9244
+ style: {
9245
+ fontSize: "".concat(12 * responsiveScale, "px"),
9246
+ fontFamily: "'SF Pro Display', 'Segoe UI', Arial, sans-serif",
9247
+ fontWeight: 700,
9248
+ letterSpacing: "0.08em",
9249
+ color: "#fff",
9250
+ textShadow: "0 1px 3px rgba(0,0,0,0.6)",
9251
+ userSelect: "none"
9252
+ },
9253
+ children: "LIVE"
9254
+ })
9255
+ ]
9256
+ }),
9257
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
9258
+ className: "sc-controls-bar",
9259
+ style: {
9260
+ position: "absolute",
9261
+ bottom: "".concat(10 * responsiveScale, "px"),
9262
+ right: "".concat(10 * responsiveScale, "px"),
9263
+ display: "flex",
9264
+ flexDirection: isPortrait ? "column" : "row",
9265
+ gap: "".concat(8 * responsiveScale, "px"),
9266
+ zIndex: 10,
9267
+ opacity: controlsVisible ? 1 : 0,
9268
+ transform: controlsVisible ? "translateY(0)" : "translateY(4px)",
9269
+ pointerEvents: controlsVisible ? "auto" : "none"
9233
9270
  },
9234
9271
  children: [
9272
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
9273
+ style: {
9274
+ display: "flex",
9275
+ alignItems: "center",
9276
+ background: "rgba(0, 0, 0, 0.6)",
9277
+ borderRadius: "".concat(18 * responsiveScale, "px"),
9278
+ padding: "2px",
9279
+ paddingRight: "".concat(8 * responsiveScale, "px")
9280
+ },
9281
+ onMouseEnter: function onMouseEnter() {
9282
+ return setShowVolumeSlider(true);
9283
+ },
9284
+ onMouseLeave: function onMouseLeave() {
9285
+ return setShowVolumeSlider(false);
9286
+ },
9287
+ children: [
9288
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
9289
+ className: "sc-ctrl-btn",
9290
+ onClick: function onClick() {
9291
+ if (playerRef.current) playerRef.current.toggleMute();
9292
+ onVolumeToggle === null || onVolumeToggle === void 0 ? void 0 : onVolumeToggle();
9293
+ resetControlsTimer();
9294
+ },
9295
+ style: {
9296
+ padding: "".concat(8 * responsiveScale, "px"),
9297
+ borderRadius: "50%",
9298
+ minWidth: "".concat(36 * responsiveScale, "px"),
9299
+ minHeight: "".concat(36 * responsiveScale, "px")
9300
+ },
9301
+ title: isMuted ? "Unmute" : "Mute",
9302
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(VolumeIcon, {
9303
+ size: Math.max(14, 18 * responsiveScale)
9304
+ })
9305
+ }),
9306
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
9307
+ style: {
9308
+ width: showVolumeSlider ? "".concat(68 * responsiveScale, "px") : "0px",
9309
+ overflow: "hidden",
9310
+ transition: "width 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
9311
+ display: "flex",
9312
+ alignItems: "center",
9313
+ paddingLeft: showVolumeSlider ? "".concat(3 * responsiveScale, "px") : "0",
9314
+ paddingRight: showVolumeSlider ? "".concat(10 * responsiveScale, "px") : "0"
9315
+ },
9316
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
9317
+ style: {
9318
+ position: "relative",
9319
+ width: "".concat(56 * responsiveScale, "px"),
9320
+ height: "3px",
9321
+ cursor: "pointer",
9322
+ borderRadius: "1.5px"
9323
+ },
9324
+ onMouseDown: function onMouseDown(e) {
9325
+ e.preventDefault();
9326
+ var el = e.currentTarget;
9327
+ var move = function move(ev) {
9328
+ var r2 = el.getBoundingClientRect();
9329
+ handleVolumeChange(Math.max(0, Math.min(1, (ev.clientX - r2.left) / r2.width)));
9330
+ };
9331
+ var up = function up1() {
9332
+ document.removeEventListener("mousemove", move);
9333
+ document.removeEventListener("mouseup", up);
9334
+ };
9335
+ document.addEventListener("mousemove", move);
9336
+ document.addEventListener("mouseup", up);
9337
+ var r = el.getBoundingClientRect();
9338
+ handleVolumeChange(Math.max(0, Math.min(1, (e.clientX - r.left) / r.width)));
9339
+ },
9340
+ onClick: function onClick(e) {
9341
+ e.stopPropagation();
9342
+ var r = e.currentTarget.getBoundingClientRect();
9343
+ handleVolumeChange(Math.max(0, Math.min(1, (e.clientX - r.left) / r.width)));
9344
+ },
9345
+ children: [
9346
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
9347
+ style: {
9348
+ position: "absolute",
9349
+ inset: 0,
9350
+ background: "rgba(255, 255, 255, 0.2)",
9351
+ borderRadius: "1.5px"
9352
+ }
9353
+ }),
9354
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
9355
+ style: {
9356
+ position: "absolute",
9357
+ top: 0,
9358
+ left: 0,
9359
+ bottom: 0,
9360
+ width: "".concat((isMuted ? 0 : volume) * 100, "%"),
9361
+ background: "#fff",
9362
+ borderRadius: "1.5px",
9363
+ transition: "width 0.1s ease-out"
9364
+ }
9365
+ }),
9366
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
9367
+ style: {
9368
+ position: "absolute",
9369
+ top: "50%",
9370
+ left: "".concat((isMuted ? 0 : volume) * 100, "%"),
9371
+ transform: "translate(-50%, -50%)",
9372
+ width: "12px",
9373
+ height: "12px",
9374
+ background: "#fff",
9375
+ borderRadius: "50%",
9376
+ boxShadow: "0 0 3px rgba(0, 0, 0, 0.3)",
9377
+ transition: "left 0.1s ease-out"
9378
+ }
9379
+ })
9380
+ ]
9381
+ })
9382
+ })
9383
+ ]
9384
+ }),
9235
9385
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
9236
9386
  className: "sc-ctrl-btn",
9237
9387
  onClick: function onClick() {
9238
- if (playerRef.current) playerRef.current.toggleMute();
9239
- onVolumeToggle === null || onVolumeToggle === void 0 ? void 0 : onVolumeToggle();
9388
+ if (onFullscreenToggle) {
9389
+ onFullscreenToggle();
9390
+ } else if (wrapperRef.current) {
9391
+ if (!document.fullscreenElement) {
9392
+ wrapperRef.current.requestFullscreen().catch(function() {});
9393
+ } else {
9394
+ document.exitFullscreen().catch(function() {});
9395
+ }
9396
+ }
9240
9397
  resetControlsTimer();
9241
9398
  },
9242
9399
  style: {
9243
9400
  padding: "".concat(8 * responsiveScale, "px"),
9244
9401
  borderRadius: "50%",
9245
9402
  minWidth: "".concat(36 * responsiveScale, "px"),
9246
- minHeight: "".concat(36 * responsiveScale, "px")
9403
+ minHeight: "".concat(36 * responsiveScale, "px"),
9404
+ background: "rgba(0, 0, 0, 0.6)"
9247
9405
  },
9248
- title: isMuted ? "Unmute" : "Mute",
9249
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(VolumeIcon, {
9406
+ title: isFullscreen ? "Exit Fullscreen" : "Enter Fullscreen",
9407
+ children: isFullscreen ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_fa.FaCompress, {
9408
+ size: Math.max(14, 18 * responsiveScale)
9409
+ }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_fa.FaExpand, {
9250
9410
  size: Math.max(14, 18 * responsiveScale)
9251
- })
9252
- }),
9253
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
9254
- style: {
9255
- width: showVolumeSlider ? "".concat(68 * responsiveScale, "px") : "0px",
9256
- overflow: "hidden",
9257
- transition: "width 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
9258
- display: "flex",
9259
- alignItems: "center",
9260
- paddingLeft: showVolumeSlider ? "".concat(3 * responsiveScale, "px") : "0",
9261
- paddingRight: showVolumeSlider ? "".concat(10 * responsiveScale, "px") : "0"
9262
- },
9263
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
9264
- style: {
9265
- position: "relative",
9266
- width: "".concat(56 * responsiveScale, "px"),
9267
- height: "3px",
9268
- cursor: "pointer",
9269
- borderRadius: "1.5px"
9270
- },
9271
- onMouseDown: function onMouseDown(e) {
9272
- e.preventDefault();
9273
- var el = e.currentTarget;
9274
- var move = function move(ev) {
9275
- var r2 = el.getBoundingClientRect();
9276
- handleVolumeChange(Math.max(0, Math.min(1, (ev.clientX - r2.left) / r2.width)));
9277
- };
9278
- var up = function up1() {
9279
- document.removeEventListener("mousemove", move);
9280
- document.removeEventListener("mouseup", up);
9281
- };
9282
- document.addEventListener("mousemove", move);
9283
- document.addEventListener("mouseup", up);
9284
- var r = el.getBoundingClientRect();
9285
- handleVolumeChange(Math.max(0, Math.min(1, (e.clientX - r.left) / r.width)));
9286
- },
9287
- onClick: function onClick(e) {
9288
- e.stopPropagation();
9289
- var r = e.currentTarget.getBoundingClientRect();
9290
- handleVolumeChange(Math.max(0, Math.min(1, (e.clientX - r.left) / r.width)));
9291
- },
9292
- children: [
9293
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
9294
- style: {
9295
- position: "absolute",
9296
- inset: 0,
9297
- background: "rgba(255, 255, 255, 0.2)",
9298
- borderRadius: "1.5px"
9299
- }
9300
- }),
9301
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
9302
- style: {
9303
- position: "absolute",
9304
- top: 0,
9305
- left: 0,
9306
- bottom: 0,
9307
- width: "".concat((isMuted ? 0 : volume) * 100, "%"),
9308
- background: "#fff",
9309
- borderRadius: "1.5px",
9310
- transition: "width 0.1s ease-out"
9311
- }
9312
- }),
9313
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
9314
- style: {
9315
- position: "absolute",
9316
- top: "50%",
9317
- left: "".concat((isMuted ? 0 : volume) * 100, "%"),
9318
- transform: "translate(-50%, -50%)",
9319
- width: "12px",
9320
- height: "12px",
9321
- background: "#fff",
9322
- borderRadius: "50%",
9323
- boxShadow: "0 0 3px rgba(0, 0, 0, 0.3)",
9324
- transition: "left 0.1s ease-out"
9325
- }
9326
- })
9327
- ]
9328
9411
  })
9329
9412
  })
9330
9413
  ]
9331
- }),
9332
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
9333
- className: "sc-ctrl-btn",
9334
- onClick: function onClick() {
9335
- if (onFullscreenToggle) {
9336
- onFullscreenToggle();
9337
- } else if (wrapperRef.current) {
9338
- if (!document.fullscreenElement) {
9339
- wrapperRef.current.requestFullscreen().catch(function() {});
9340
- } else {
9341
- document.exitFullscreen().catch(function() {});
9342
- }
9343
- }
9344
- resetControlsTimer();
9345
- },
9346
- style: {
9347
- padding: "".concat(8 * responsiveScale, "px"),
9348
- borderRadius: "50%",
9349
- minWidth: "".concat(36 * responsiveScale, "px"),
9350
- minHeight: "".concat(36 * responsiveScale, "px"),
9351
- background: "rgba(0, 0, 0, 0.6)"
9352
- },
9353
- title: isFullscreen ? "Exit Fullscreen" : "Enter Fullscreen",
9354
- children: isFullscreen ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_fa.FaCompress, {
9355
- size: Math.max(14, 18 * responsiveScale)
9356
- }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_fa.FaExpand, {
9357
- size: Math.max(14, 18 * responsiveScale)
9358
- })
9359
9414
  })
9360
9415
  ]
9361
9416
  }),