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/ui/StormcloudVideoPlayer.cjs CHANGED
@@ -7231,6 +7231,7 @@ var CRITICAL_PROPS = [
7231
7231
  "driftToleranceMs"
7232
7232
  ];
7233
7233
  var CONTROLS_HIDE_DELAY = 3e3;
7234
+ var DEFAULT_PLAYER_ASPECT_RATIO = 16 / 9;
7234
7235
  var StormcloudVideoPlayerComponent = import_react2.default.memo(function(props) {
7235
7236
  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, [
7236
7237
  "src",
@@ -7291,6 +7292,7 @@ var StormcloudVideoPlayerComponent = import_react2.default.memo(function(props)
7291
7292
  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];
7292
7293
  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];
7293
7294
  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];
7295
+ 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];
7294
7296
  var getResponsiveScale = function getResponsiveScale() {
7295
7297
  if (viewportWidth < 480) return 0.7;
7296
7298
  if (viewportWidth < 768) return 0.8;
@@ -7586,6 +7588,13 @@ var StormcloudVideoPlayerComponent = import_react2.default.memo(function(props)
7586
7588
  }, []);
7587
7589
  (0, import_react2.useEffect)(function() {
7588
7590
  if (!videoRef.current) return;
7591
+ var handleLoadedMetadata = function handleLoadedMetadata() {
7592
+ var video2 = videoRef.current;
7593
+ if (!video2) return;
7594
+ if (video2.videoWidth > 0 && video2.videoHeight > 0) {
7595
+ setPlayerAspectRatio(video2.videoWidth / video2.videoHeight);
7596
+ }
7597
+ };
7589
7598
  var handleCanPlay = function handleCanPlay() {
7590
7599
  setIsLoading(false);
7591
7600
  if (bufferingTimeoutRef.current) {
@@ -7632,6 +7641,8 @@ var StormcloudVideoPlayerComponent = import_react2.default.memo(function(props)
7632
7641
  setShowCenterPlay(true);
7633
7642
  };
7634
7643
  var video = videoRef.current;
7644
+ handleLoadedMetadata();
7645
+ video.addEventListener("loadedmetadata", handleLoadedMetadata);
7635
7646
  video.addEventListener("canplay", handleCanPlay);
7636
7647
  video.addEventListener("canplaythrough", handleCanPlayThrough);
7637
7648
  video.addEventListener("waiting", handleWaiting);
@@ -7646,6 +7657,7 @@ var StormcloudVideoPlayerComponent = import_react2.default.memo(function(props)
7646
7657
  clearTimeout(bufferingTimeoutRef.current);
7647
7658
  bufferingTimeoutRef.current = null;
7648
7659
  }
7660
+ video.removeEventListener("loadedmetadata", handleLoadedMetadata);
7649
7661
  video.removeEventListener("canplay", handleCanPlay);
7650
7662
  video.removeEventListener("canplaythrough", handleCanPlayThrough);
7651
7663
  video.removeEventListener("waiting", handleWaiting);
@@ -7656,6 +7668,11 @@ var StormcloudVideoPlayerComponent = import_react2.default.memo(function(props)
7656
7668
  }, [
7657
7669
  debugAdTiming
7658
7670
  ]);
7671
+ (0, import_react2.useEffect)(function() {
7672
+ setPlayerAspectRatio(DEFAULT_PLAYER_ASPECT_RATIO);
7673
+ }, [
7674
+ src
7675
+ ]);
7659
7676
  (0, import_react2.useEffect)(function() {
7660
7677
  return function() {
7661
7678
  if (controlsTimerRef.current) {
@@ -7681,7 +7698,7 @@ var StormcloudVideoPlayerComponent = import_react2.default.memo(function(props)
7681
7698
  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, {
7682
7699
  children: [
7683
7700
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("style", {
7684
- 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 "
7701
+ 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 "
7685
7702
  }),
7686
7703
  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", {
7687
7704
  ref: wrapperRef,
@@ -7699,6 +7716,7 @@ var StormcloudVideoPlayerComponent = import_react2.default.memo(function(props)
7699
7716
  width: isFullscreen ? "100vw" : "100%",
7700
7717
  height: isFullscreen ? "100vh" : "auto",
7701
7718
  minHeight: isFullscreen ? "100vh" : "auto",
7719
+ aspectRatio: isFullscreen ? void 0 : playerAspectRatio,
7702
7720
  maxWidth: isFullscreen ? "100vw" : "100%",
7703
7721
  maxHeight: isFullscreen ? "100vh" : "none",
7704
7722
  zIndex: isFullscreen ? 999999 : void 0,
@@ -7715,7 +7733,7 @@ var StormcloudVideoPlayerComponent = import_react2.default.memo(function(props)
7715
7733
  zIndex: 1,
7716
7734
  display: "block",
7717
7735
  width: "100%",
7718
- height: isFullscreen ? "100%" : "auto",
7736
+ height: "100%",
7719
7737
  maxWidth: "100%",
7720
7738
  maxHeight: isFullscreen ? "100%" : "none",
7721
7739
  objectFit: isFullscreen ? "cover" : "contain",
@@ -7735,18 +7753,44 @@ var StormcloudVideoPlayerComponent = import_react2.default.memo(function(props)
7735
7753
  videoRef: videoRef,
7736
7754
  coordinateSpace: overlayCoordSpace
7737
7755
  }),
7738
- (isLoading || isBuffering) && !hideLoadingIndicator && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_fa.FaSpinner, {
7756
+ (isLoading || isBuffering) && !hideLoadingIndicator && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", {
7739
7757
  className: "sc-loading-indicator",
7740
- size: 40,
7741
- color: "rgba(255, 255, 255, 0.85)",
7742
7758
  style: {
7743
7759
  position: "absolute",
7744
- top: "calc(50% - 20px)",
7745
- left: "calc(50% - 20px)",
7760
+ top: "50%",
7761
+ left: "50%",
7762
+ transform: "translate(-50%, -50%)",
7746
7763
  zIndex: 20,
7747
- animation: "sc-spin 0.9s linear infinite",
7748
- filter: "drop-shadow(0 2px 8px rgba(0, 0, 0, 0.6))"
7749
- }
7764
+ width: "".concat(Math.max(34, 38 * responsiveScale), "px"),
7765
+ height: "".concat(Math.max(34, 38 * responsiveScale), "px"),
7766
+ display: "flex",
7767
+ alignItems: "center",
7768
+ justifyContent: "center",
7769
+ animation: "sc-loading-glow 1.4s ease-in-out infinite",
7770
+ filter: "drop-shadow(0 6px 14px rgba(0, 0, 0, 0.55))"
7771
+ },
7772
+ children: [
7773
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", {
7774
+ style: {
7775
+ position: "absolute",
7776
+ inset: 0,
7777
+ borderRadius: "50%",
7778
+ border: "3px solid rgba(255, 255, 255, 0.25)",
7779
+ borderTopColor: "#ff0000",
7780
+ borderRightColor: "rgba(255, 255, 255, 0.85)",
7781
+ animation: "sc-spin 0.8s linear infinite"
7782
+ }
7783
+ }),
7784
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", {
7785
+ style: {
7786
+ width: "7px",
7787
+ height: "7px",
7788
+ borderRadius: "50%",
7789
+ background: "#ff0000",
7790
+ boxShadow: "0 0 10px rgba(255, 0, 0, 0.65)"
7791
+ }
7792
+ })
7793
+ ]
7750
7794
  }),
7751
7795
  showLicenseWarning && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", {
7752
7796
  style: {
@@ -7982,7 +8026,8 @@ var StormcloudVideoPlayerComponent = import_react2.default.memo(function(props)
7982
8026
  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", {
7983
8027
  style: {
7984
8028
  display: "flex",
7985
- alignItems: "center"
8029
+ alignItems: "center",
8030
+ paddingRight: "".concat(6 * responsiveScale, "px")
7986
8031
  },
7987
8032
  onMouseEnter: function onMouseEnter() {
7988
8033
  return setShowVolumeSlider(true);
@@ -8013,13 +8058,13 @@ var StormcloudVideoPlayerComponent = import_react2.default.memo(function(props)
8013
8058
  }),
8014
8059
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", {
8015
8060
  style: {
8016
- width: showVolumeSlider ? "".concat(62 * responsiveScale, "px") : "0px",
8061
+ width: showVolumeSlider ? "".concat(68 * responsiveScale, "px") : "0px",
8017
8062
  overflow: "hidden",
8018
8063
  transition: "width 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
8019
8064
  display: "flex",
8020
8065
  alignItems: "center",
8021
- paddingLeft: showVolumeSlider ? "2px" : "0",
8022
- paddingRight: showVolumeSlider ? "4px" : "0"
8066
+ paddingLeft: showVolumeSlider ? "".concat(3 * responsiveScale, "px") : "0",
8067
+ paddingRight: showVolumeSlider ? "".concat(8 * responsiveScale, "px") : "0"
8023
8068
  },
8024
8069
  children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", {
8025
8070
  style: {
@@ -8266,7 +8311,8 @@ var StormcloudVideoPlayerComponent = import_react2.default.memo(function(props)
8266
8311
  alignItems: "center",
8267
8312
  background: "rgba(0, 0, 0, 0.6)",
8268
8313
  borderRadius: "".concat(18 * responsiveScale, "px"),
8269
- padding: "2px"
8314
+ padding: "2px",
8315
+ paddingRight: "".concat(8 * responsiveScale, "px")
8270
8316
  },
8271
8317
  onMouseEnter: function onMouseEnter() {
8272
8318
  return setShowVolumeSlider(true);
@@ -8295,13 +8341,13 @@ var StormcloudVideoPlayerComponent = import_react2.default.memo(function(props)
8295
8341
  }),
8296
8342
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", {
8297
8343
  style: {
8298
- width: showVolumeSlider ? "".concat(62 * responsiveScale, "px") : "0px",
8344
+ width: showVolumeSlider ? "".concat(68 * responsiveScale, "px") : "0px",
8299
8345
  overflow: "hidden",
8300
8346
  transition: "width 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
8301
8347
  display: "flex",
8302
8348
  alignItems: "center",
8303
- paddingLeft: showVolumeSlider ? "2px" : "0",
8304
- paddingRight: showVolumeSlider ? "6px" : "0"
8349
+ paddingLeft: showVolumeSlider ? "".concat(3 * responsiveScale, "px") : "0",
8350
+ paddingRight: showVolumeSlider ? "".concat(10 * responsiveScale, "px") : "0"
8305
8351
  },
8306
8352
  children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", {
8307
8353
  style: {