stormcloud-video-player 0.7.1 → 0.7.2

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/index.cjs CHANGED
@@ -7412,6 +7412,7 @@ var CRITICAL_PROPS = [
7412
7412
  "driftToleranceMs"
7413
7413
  ];
7414
7414
  var CONTROLS_HIDE_DELAY = 3e3;
7415
+ var DEFAULT_PLAYER_ASPECT_RATIO = 16 / 9;
7415
7416
  var StormcloudVideoPlayerComponent = import_react2.default.memo(function(props) {
7416
7417
  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, swirlProjectId = props.swirlProjectId, restVideoAttrs = _object_without_properties(props, [
7417
7418
  "src",
@@ -7472,6 +7473,7 @@ var StormcloudVideoPlayerComponent = import_react2.default.memo(function(props)
7472
7473
  var _import_react2_default_useState17 = _sliced_to_array(import_react2.default.useState(null), 2), overlayCoordSpace = _import_react2_default_useState17[0], setOverlayCoordSpace = _import_react2_default_useState17[1];
7473
7474
  var _import_react2_default_useState18 = _sliced_to_array(import_react2.default.useState(typeof window !== "undefined" ? window.innerWidth : 1920), 2), viewportWidth = _import_react2_default_useState18[0], setViewportWidth = _import_react2_default_useState18[1];
7474
7475
  var _import_react2_default_useState19 = _sliced_to_array(import_react2.default.useState(typeof window !== "undefined" ? window.innerHeight > window.innerWidth : false), 2), isPortrait = _import_react2_default_useState19[0], setIsPortrait = _import_react2_default_useState19[1];
7476
+ var _import_react2_default_useState20 = _sliced_to_array(import_react2.default.useState(DEFAULT_PLAYER_ASPECT_RATIO), 2), playerAspectRatio = _import_react2_default_useState20[0], setPlayerAspectRatio = _import_react2_default_useState20[1];
7475
7477
  var getResponsiveScale = function getResponsiveScale() {
7476
7478
  if (viewportWidth < 480) return 0.7;
7477
7479
  if (viewportWidth < 768) return 0.8;
@@ -7767,6 +7769,13 @@ var StormcloudVideoPlayerComponent = import_react2.default.memo(function(props)
7767
7769
  }, []);
7768
7770
  (0, import_react2.useEffect)(function() {
7769
7771
  if (!videoRef.current) return;
7772
+ var handleLoadedMetadata = function handleLoadedMetadata() {
7773
+ var video2 = videoRef.current;
7774
+ if (!video2) return;
7775
+ if (video2.videoWidth > 0 && video2.videoHeight > 0) {
7776
+ setPlayerAspectRatio(video2.videoWidth / video2.videoHeight);
7777
+ }
7778
+ };
7770
7779
  var handleCanPlay = function handleCanPlay() {
7771
7780
  setIsLoading(false);
7772
7781
  if (bufferingTimeoutRef.current) {
@@ -7813,6 +7822,8 @@ var StormcloudVideoPlayerComponent = import_react2.default.memo(function(props)
7813
7822
  setShowCenterPlay(true);
7814
7823
  };
7815
7824
  var video = videoRef.current;
7825
+ handleLoadedMetadata();
7826
+ video.addEventListener("loadedmetadata", handleLoadedMetadata);
7816
7827
  video.addEventListener("canplay", handleCanPlay);
7817
7828
  video.addEventListener("canplaythrough", handleCanPlayThrough);
7818
7829
  video.addEventListener("waiting", handleWaiting);
@@ -7827,6 +7838,7 @@ var StormcloudVideoPlayerComponent = import_react2.default.memo(function(props)
7827
7838
  clearTimeout(bufferingTimeoutRef.current);
7828
7839
  bufferingTimeoutRef.current = null;
7829
7840
  }
7841
+ video.removeEventListener("loadedmetadata", handleLoadedMetadata);
7830
7842
  video.removeEventListener("canplay", handleCanPlay);
7831
7843
  video.removeEventListener("canplaythrough", handleCanPlayThrough);
7832
7844
  video.removeEventListener("waiting", handleWaiting);
@@ -7837,6 +7849,11 @@ var StormcloudVideoPlayerComponent = import_react2.default.memo(function(props)
7837
7849
  }, [
7838
7850
  debugAdTiming
7839
7851
  ]);
7852
+ (0, import_react2.useEffect)(function() {
7853
+ setPlayerAspectRatio(DEFAULT_PLAYER_ASPECT_RATIO);
7854
+ }, [
7855
+ src
7856
+ ]);
7840
7857
  (0, import_react2.useEffect)(function() {
7841
7858
  return function() {
7842
7859
  if (controlsTimerRef.current) {
@@ -7862,7 +7879,7 @@ var StormcloudVideoPlayerComponent = import_react2.default.memo(function(props)
7862
7879
  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, {
7863
7880
  children: [
7864
7881
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("style", {
7865
- 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 "
7882
+ 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 "
7866
7883
  }),
7867
7884
  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", {
7868
7885
  ref: wrapperRef,
@@ -7880,6 +7897,7 @@ var StormcloudVideoPlayerComponent = import_react2.default.memo(function(props)
7880
7897
  width: isFullscreen ? "100vw" : "100%",
7881
7898
  height: isFullscreen ? "100vh" : "auto",
7882
7899
  minHeight: isFullscreen ? "100vh" : "auto",
7900
+ aspectRatio: isFullscreen ? void 0 : playerAspectRatio,
7883
7901
  maxWidth: isFullscreen ? "100vw" : "100%",
7884
7902
  maxHeight: isFullscreen ? "100vh" : "none",
7885
7903
  zIndex: isFullscreen ? 999999 : void 0,
@@ -7896,7 +7914,7 @@ var StormcloudVideoPlayerComponent = import_react2.default.memo(function(props)
7896
7914
  zIndex: 1,
7897
7915
  display: "block",
7898
7916
  width: "100%",
7899
- height: isFullscreen ? "100%" : "auto",
7917
+ height: "100%",
7900
7918
  maxWidth: "100%",
7901
7919
  maxHeight: isFullscreen ? "100%" : "none",
7902
7920
  objectFit: isFullscreen ? "cover" : "contain",
@@ -7916,18 +7934,44 @@ var StormcloudVideoPlayerComponent = import_react2.default.memo(function(props)
7916
7934
  videoRef: videoRef,
7917
7935
  coordinateSpace: overlayCoordSpace
7918
7936
  }),
7919
- (isLoading || isBuffering) && !hideLoadingIndicator && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_fa.FaSpinner, {
7937
+ (isLoading || isBuffering) && !hideLoadingIndicator && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", {
7920
7938
  className: "sc-loading-indicator",
7921
- size: 40,
7922
- color: "rgba(255, 255, 255, 0.85)",
7923
7939
  style: {
7924
7940
  position: "absolute",
7925
- top: "calc(50% - 20px)",
7926
- left: "calc(50% - 20px)",
7941
+ top: "50%",
7942
+ left: "50%",
7943
+ transform: "translate(-50%, -50%)",
7927
7944
  zIndex: 20,
7928
- animation: "sc-spin 0.9s linear infinite",
7929
- filter: "drop-shadow(0 2px 8px rgba(0, 0, 0, 0.6))"
7930
- }
7945
+ width: "".concat(Math.max(34, 38 * responsiveScale), "px"),
7946
+ height: "".concat(Math.max(34, 38 * responsiveScale), "px"),
7947
+ display: "flex",
7948
+ alignItems: "center",
7949
+ justifyContent: "center",
7950
+ animation: "sc-loading-glow 1.4s ease-in-out infinite",
7951
+ filter: "drop-shadow(0 6px 14px rgba(0, 0, 0, 0.55))"
7952
+ },
7953
+ children: [
7954
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", {
7955
+ style: {
7956
+ position: "absolute",
7957
+ inset: 0,
7958
+ borderRadius: "50%",
7959
+ border: "3px solid rgba(255, 255, 255, 0.25)",
7960
+ borderTopColor: "#ff0000",
7961
+ borderRightColor: "rgba(255, 255, 255, 0.85)",
7962
+ animation: "sc-spin 0.8s linear infinite"
7963
+ }
7964
+ }),
7965
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", {
7966
+ style: {
7967
+ width: "7px",
7968
+ height: "7px",
7969
+ borderRadius: "50%",
7970
+ background: "#ff0000",
7971
+ boxShadow: "0 0 10px rgba(255, 0, 0, 0.65)"
7972
+ }
7973
+ })
7974
+ ]
7931
7975
  }),
7932
7976
  showLicenseWarning && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", {
7933
7977
  style: {
@@ -8163,7 +8207,8 @@ var StormcloudVideoPlayerComponent = import_react2.default.memo(function(props)
8163
8207
  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", {
8164
8208
  style: {
8165
8209
  display: "flex",
8166
- alignItems: "center"
8210
+ alignItems: "center",
8211
+ paddingRight: "".concat(6 * responsiveScale, "px")
8167
8212
  },
8168
8213
  onMouseEnter: function onMouseEnter() {
8169
8214
  return setShowVolumeSlider(true);
@@ -8194,13 +8239,13 @@ var StormcloudVideoPlayerComponent = import_react2.default.memo(function(props)
8194
8239
  }),
8195
8240
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", {
8196
8241
  style: {
8197
- width: showVolumeSlider ? "".concat(62 * responsiveScale, "px") : "0px",
8242
+ width: showVolumeSlider ? "".concat(68 * responsiveScale, "px") : "0px",
8198
8243
  overflow: "hidden",
8199
8244
  transition: "width 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
8200
8245
  display: "flex",
8201
8246
  alignItems: "center",
8202
- paddingLeft: showVolumeSlider ? "2px" : "0",
8203
- paddingRight: showVolumeSlider ? "4px" : "0"
8247
+ paddingLeft: showVolumeSlider ? "".concat(3 * responsiveScale, "px") : "0",
8248
+ paddingRight: showVolumeSlider ? "".concat(8 * responsiveScale, "px") : "0"
8204
8249
  },
8205
8250
  children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", {
8206
8251
  style: {
@@ -8447,7 +8492,8 @@ var StormcloudVideoPlayerComponent = import_react2.default.memo(function(props)
8447
8492
  alignItems: "center",
8448
8493
  background: "rgba(0, 0, 0, 0.6)",
8449
8494
  borderRadius: "".concat(18 * responsiveScale, "px"),
8450
- padding: "2px"
8495
+ padding: "2px",
8496
+ paddingRight: "".concat(8 * responsiveScale, "px")
8451
8497
  },
8452
8498
  onMouseEnter: function onMouseEnter() {
8453
8499
  return setShowVolumeSlider(true);
@@ -8476,13 +8522,13 @@ var StormcloudVideoPlayerComponent = import_react2.default.memo(function(props)
8476
8522
  }),
8477
8523
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", {
8478
8524
  style: {
8479
- width: showVolumeSlider ? "".concat(62 * responsiveScale, "px") : "0px",
8525
+ width: showVolumeSlider ? "".concat(68 * responsiveScale, "px") : "0px",
8480
8526
  overflow: "hidden",
8481
8527
  transition: "width 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
8482
8528
  display: "flex",
8483
8529
  alignItems: "center",
8484
- paddingLeft: showVolumeSlider ? "2px" : "0",
8485
- paddingRight: showVolumeSlider ? "6px" : "0"
8530
+ paddingLeft: showVolumeSlider ? "".concat(3 * responsiveScale, "px") : "0",
8531
+ paddingRight: showVolumeSlider ? "".concat(10 * responsiveScale, "px") : "0"
8486
8532
  },
8487
8533
  children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", {
8488
8534
  style: {