stormcloud-video-player 0.6.6 → 0.6.7

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 (8) hide show
  1. package/dist/stormcloud-vp.min.js +1 -1
  2. package/lib/index.cjs +64 -18
  3. package/lib/index.cjs.map +1 -1
  4. package/lib/index.js +65 -19
  5. package/lib/index.js.map +1 -1
  6. package/lib/ui/StormcloudVideoPlayer.cjs +64 -18
  7. package/lib/ui/StormcloudVideoPlayer.cjs.map +1 -1
  8. package/package.json +1 -1
package/lib/ui/StormcloudVideoPlayer.cjs CHANGED
@@ -6091,6 +6091,7 @@ var CRITICAL_PROPS = [
6091
6091
  "driftToleranceMs"
6092
6092
  ];
6093
6093
  var CONTROLS_HIDE_DELAY = 3e3;
6094
+ var DEFAULT_PLAYER_ASPECT_RATIO = 16 / 9;
6094
6095
  var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
6095
6096
  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, minSegmentsBeforePlay = props.minSegmentsBeforePlay, disableAds = props.disableAds, disableFiller = props.disableFiller, restVideoAttrs = _object_without_properties(props, [
6096
6097
  "src",
@@ -6148,6 +6149,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
6148
6149
  var _import_react_default_useState15 = _sliced_to_array(import_react.default.useState(true), 2), controlsVisible = _import_react_default_useState15[0], setControlsVisible = _import_react_default_useState15[1];
6149
6150
  var _import_react_default_useState16 = _sliced_to_array(import_react.default.useState(typeof window !== "undefined" ? window.innerWidth : 1920), 2), viewportWidth = _import_react_default_useState16[0], setViewportWidth = _import_react_default_useState16[1];
6150
6151
  var _import_react_default_useState17 = _sliced_to_array(import_react.default.useState(typeof window !== "undefined" ? window.innerHeight > window.innerWidth : false), 2), isPortrait = _import_react_default_useState17[0], setIsPortrait = _import_react_default_useState17[1];
6152
+ var _import_react_default_useState18 = _sliced_to_array(import_react.default.useState(DEFAULT_PLAYER_ASPECT_RATIO), 2), playerAspectRatio = _import_react_default_useState18[0], setPlayerAspectRatio = _import_react_default_useState18[1];
6151
6153
  var getResponsiveScale = function getResponsiveScale() {
6152
6154
  if (viewportWidth < 480) return 0.7;
6153
6155
  if (viewportWidth < 768) return 0.8;
@@ -6389,6 +6391,13 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
6389
6391
  }, []);
6390
6392
  (0, import_react.useEffect)(function() {
6391
6393
  if (!videoRef.current) return;
6394
+ var handleLoadedMetadata = function handleLoadedMetadata() {
6395
+ var video2 = videoRef.current;
6396
+ if (!video2) return;
6397
+ if (video2.videoWidth > 0 && video2.videoHeight > 0) {
6398
+ setPlayerAspectRatio(video2.videoWidth / video2.videoHeight);
6399
+ }
6400
+ };
6392
6401
  var handleCanPlay = function handleCanPlay() {
6393
6402
  setIsLoading(false);
6394
6403
  if (bufferingTimeoutRef.current) {
@@ -6435,6 +6444,8 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
6435
6444
  setShowCenterPlay(true);
6436
6445
  };
6437
6446
  var video = videoRef.current;
6447
+ handleLoadedMetadata();
6448
+ video.addEventListener("loadedmetadata", handleLoadedMetadata);
6438
6449
  video.addEventListener("canplay", handleCanPlay);
6439
6450
  video.addEventListener("canplaythrough", handleCanPlayThrough);
6440
6451
  video.addEventListener("waiting", handleWaiting);
@@ -6449,6 +6460,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
6449
6460
  clearTimeout(bufferingTimeoutRef.current);
6450
6461
  bufferingTimeoutRef.current = null;
6451
6462
  }
6463
+ video.removeEventListener("loadedmetadata", handleLoadedMetadata);
6452
6464
  video.removeEventListener("canplay", handleCanPlay);
6453
6465
  video.removeEventListener("canplaythrough", handleCanPlayThrough);
6454
6466
  video.removeEventListener("waiting", handleWaiting);
@@ -6459,6 +6471,11 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
6459
6471
  }, [
6460
6472
  debugAdTiming
6461
6473
  ]);
6474
+ (0, import_react.useEffect)(function() {
6475
+ setPlayerAspectRatio(DEFAULT_PLAYER_ASPECT_RATIO);
6476
+ }, [
6477
+ src
6478
+ ]);
6462
6479
  (0, import_react.useEffect)(function() {
6463
6480
  return function() {
6464
6481
  if (controlsTimerRef.current) {
@@ -6484,7 +6501,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
6484
6501
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
6485
6502
  children: [
6486
6503
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", {
6487
- children: "\n @keyframes sc-spin {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n }\n @keyframes sc-pulse {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.6; }\n }\n @keyframes sc-fade-in {\n from { opacity: 0; transform: translateY(8px); }\n to { opacity: 1; transform: translateY(0); }\n }\n .sc-wrapper:fullscreen,\n .sc-wrapper:has(*:fullscreen) {\n border-radius: 0 !important;\n box-shadow: none !important;\n width: 100vw !important;\n height: 100vh !important;\n max-width: 100vw !important;\n max-height: 100vh !important;\n position: fixed !important;\n top: 0 !important;\n left: 0 !important;\n z-index: 999999 !important;\n background: #000 !important;\n display: flex !important;\n align-items: center !important;\n justify-content: center !important;\n }\n .sc-ctrl-btn {\n background: none;\n border: none;\n color: #fff;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n padding: 8px;\n transition: background 0.15s ease, opacity 0.15s ease;\n opacity: 0.9;\n }\n .sc-ctrl-btn:hover {\n opacity: 1;\n background: rgba(255, 255, 255, 0.1);\n }\n .sc-ctrl-btn:active {\n opacity: 0.7;\n }\n .sc-controls-bar {\n transition: opacity 0.35s ease, transform 0.35s ease;\n }\n .sc-progress-track:hover .sc-progress-thumb {\n transform: translate(-50%, -50%) scale(1) !important;\n }\n .sc-loading-hidden .sc-loading-indicator {\n display: none !important;\n }\n "
6504
+ children: "\n @keyframes sc-spin {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n }\n @keyframes sc-loading-glow {\n 0%, 100% { opacity: 0.85; transform: scale(1); }\n 50% { opacity: 1; transform: scale(1.05); }\n }\n @keyframes sc-pulse {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.6; }\n }\n @keyframes sc-fade-in {\n from { opacity: 0; transform: translateY(8px); }\n to { opacity: 1; transform: translateY(0); }\n }\n .sc-wrapper:fullscreen,\n .sc-wrapper:has(*:fullscreen) {\n border-radius: 0 !important;\n box-shadow: none !important;\n width: 100vw !important;\n height: 100vh !important;\n max-width: 100vw !important;\n max-height: 100vh !important;\n position: fixed !important;\n top: 0 !important;\n left: 0 !important;\n z-index: 999999 !important;\n background: #000 !important;\n display: flex !important;\n align-items: center !important;\n justify-content: center !important;\n }\n .sc-ctrl-btn {\n background: none;\n border: none;\n color: #fff;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n padding: 8px;\n transition: background 0.15s ease, opacity 0.15s ease;\n opacity: 0.9;\n }\n .sc-ctrl-btn:hover {\n opacity: 1;\n background: rgba(255, 255, 255, 0.1);\n }\n .sc-ctrl-btn:active {\n opacity: 0.7;\n }\n .sc-controls-bar {\n transition: opacity 0.35s ease, transform 0.35s ease;\n }\n .sc-progress-track:hover .sc-progress-thumb {\n transform: translate(-50%, -50%) scale(1) !important;\n }\n .sc-loading-hidden .sc-loading-indicator {\n display: none !important;\n }\n "
6488
6505
  }),
6489
6506
  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
6490
6507
  ref: wrapperRef,
@@ -6502,6 +6519,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
6502
6519
  width: isFullscreen ? "100vw" : "100%",
6503
6520
  height: isFullscreen ? "100vh" : "auto",
6504
6521
  minHeight: isFullscreen ? "100vh" : "auto",
6522
+ aspectRatio: isFullscreen ? void 0 : playerAspectRatio,
6505
6523
  maxWidth: isFullscreen ? "100vw" : "100%",
6506
6524
  maxHeight: isFullscreen ? "100vh" : "none",
6507
6525
  zIndex: isFullscreen ? 999999 : void 0,
@@ -6516,7 +6534,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
6516
6534
  style: _object_spread({
6517
6535
  display: "block",
6518
6536
  width: "100%",
6519
- height: isFullscreen ? "100%" : "auto",
6537
+ height: "100%",
6520
6538
  maxWidth: "100%",
6521
6539
  maxHeight: isFullscreen ? "100%" : "none",
6522
6540
  objectFit: isFullscreen ? "cover" : "contain",
@@ -6530,18 +6548,44 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
6530
6548
  }, restVideoAttrs), {
6531
6549
  children: children
6532
6550
  })),
6533
- (isLoading || isBuffering) && !hideLoadingIndicator && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_fa.FaSpinner, {
6551
+ (isLoading || isBuffering) && !hideLoadingIndicator && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
6534
6552
  className: "sc-loading-indicator",
6535
- size: 40,
6536
- color: "rgba(255, 255, 255, 0.85)",
6537
6553
  style: {
6538
6554
  position: "absolute",
6539
- top: "calc(50% - 20px)",
6540
- left: "calc(50% - 20px)",
6555
+ top: "50%",
6556
+ left: "50%",
6557
+ transform: "translate(-50%, -50%)",
6541
6558
  zIndex: 20,
6542
- animation: "sc-spin 0.9s linear infinite",
6543
- filter: "drop-shadow(0 2px 8px rgba(0, 0, 0, 0.6))"
6544
- }
6559
+ width: "".concat(Math.max(34, 38 * responsiveScale), "px"),
6560
+ height: "".concat(Math.max(34, 38 * responsiveScale), "px"),
6561
+ display: "flex",
6562
+ alignItems: "center",
6563
+ justifyContent: "center",
6564
+ animation: "sc-loading-glow 1.4s ease-in-out infinite",
6565
+ filter: "drop-shadow(0 6px 14px rgba(0, 0, 0, 0.55))"
6566
+ },
6567
+ children: [
6568
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
6569
+ style: {
6570
+ position: "absolute",
6571
+ inset: 0,
6572
+ borderRadius: "50%",
6573
+ border: "3px solid rgba(255, 255, 255, 0.25)",
6574
+ borderTopColor: "#ff0000",
6575
+ borderRightColor: "rgba(255, 255, 255, 0.85)",
6576
+ animation: "sc-spin 0.8s linear infinite"
6577
+ }
6578
+ }),
6579
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
6580
+ style: {
6581
+ width: "7px",
6582
+ height: "7px",
6583
+ borderRadius: "50%",
6584
+ background: "#ff0000",
6585
+ boxShadow: "0 0 10px rgba(255, 0, 0, 0.65)"
6586
+ }
6587
+ })
6588
+ ]
6545
6589
  }),
6546
6590
  showLicenseWarning && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
6547
6591
  style: {
@@ -6777,7 +6821,8 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
6777
6821
  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
6778
6822
  style: {
6779
6823
  display: "flex",
6780
- alignItems: "center"
6824
+ alignItems: "center",
6825
+ paddingRight: "".concat(6 * responsiveScale, "px")
6781
6826
  },
6782
6827
  onMouseEnter: function onMouseEnter() {
6783
6828
  return setShowVolumeSlider(true);
@@ -6808,13 +6853,13 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
6808
6853
  }),
6809
6854
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
6810
6855
  style: {
6811
- width: showVolumeSlider ? "".concat(62 * responsiveScale, "px") : "0px",
6856
+ width: showVolumeSlider ? "".concat(68 * responsiveScale, "px") : "0px",
6812
6857
  overflow: "hidden",
6813
6858
  transition: "width 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
6814
6859
  display: "flex",
6815
6860
  alignItems: "center",
6816
- paddingLeft: showVolumeSlider ? "2px" : "0",
6817
- paddingRight: showVolumeSlider ? "4px" : "0"
6861
+ paddingLeft: showVolumeSlider ? "".concat(3 * responsiveScale, "px") : "0",
6862
+ paddingRight: showVolumeSlider ? "".concat(8 * responsiveScale, "px") : "0"
6818
6863
  },
6819
6864
  children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
6820
6865
  style: {
@@ -7061,7 +7106,8 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
7061
7106
  alignItems: "center",
7062
7107
  background: "rgba(0, 0, 0, 0.6)",
7063
7108
  borderRadius: "".concat(18 * responsiveScale, "px"),
7064
- padding: "2px"
7109
+ padding: "2px",
7110
+ paddingRight: "".concat(8 * responsiveScale, "px")
7065
7111
  },
7066
7112
  onMouseEnter: function onMouseEnter() {
7067
7113
  return setShowVolumeSlider(true);
@@ -7090,13 +7136,13 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
7090
7136
  }),
7091
7137
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
7092
7138
  style: {
7093
- width: showVolumeSlider ? "".concat(62 * responsiveScale, "px") : "0px",
7139
+ width: showVolumeSlider ? "".concat(68 * responsiveScale, "px") : "0px",
7094
7140
  overflow: "hidden",
7095
7141
  transition: "width 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
7096
7142
  display: "flex",
7097
7143
  alignItems: "center",
7098
- paddingLeft: showVolumeSlider ? "2px" : "0",
7099
- paddingRight: showVolumeSlider ? "6px" : "0"
7144
+ paddingLeft: showVolumeSlider ? "".concat(3 * responsiveScale, "px") : "0",
7145
+ paddingRight: showVolumeSlider ? "".concat(10 * responsiveScale, "px") : "0"
7100
7146
  },
7101
7147
  children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
7102
7148
  style: {