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/index.cjs CHANGED
@@ -6260,6 +6260,7 @@ var CRITICAL_PROPS = [
6260
6260
  "driftToleranceMs"
6261
6261
  ];
6262
6262
  var CONTROLS_HIDE_DELAY = 3e3;
6263
+ var DEFAULT_PLAYER_ASPECT_RATIO = 16 / 9;
6263
6264
  var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
6264
6265
  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, [
6265
6266
  "src",
@@ -6317,6 +6318,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
6317
6318
  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];
6318
6319
  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];
6319
6320
  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];
6321
+ 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];
6320
6322
  var getResponsiveScale = function getResponsiveScale() {
6321
6323
  if (viewportWidth < 480) return 0.7;
6322
6324
  if (viewportWidth < 768) return 0.8;
@@ -6558,6 +6560,13 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
6558
6560
  }, []);
6559
6561
  (0, import_react.useEffect)(function() {
6560
6562
  if (!videoRef.current) return;
6563
+ var handleLoadedMetadata = function handleLoadedMetadata() {
6564
+ var video2 = videoRef.current;
6565
+ if (!video2) return;
6566
+ if (video2.videoWidth > 0 && video2.videoHeight > 0) {
6567
+ setPlayerAspectRatio(video2.videoWidth / video2.videoHeight);
6568
+ }
6569
+ };
6561
6570
  var handleCanPlay = function handleCanPlay() {
6562
6571
  setIsLoading(false);
6563
6572
  if (bufferingTimeoutRef.current) {
@@ -6604,6 +6613,8 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
6604
6613
  setShowCenterPlay(true);
6605
6614
  };
6606
6615
  var video = videoRef.current;
6616
+ handleLoadedMetadata();
6617
+ video.addEventListener("loadedmetadata", handleLoadedMetadata);
6607
6618
  video.addEventListener("canplay", handleCanPlay);
6608
6619
  video.addEventListener("canplaythrough", handleCanPlayThrough);
6609
6620
  video.addEventListener("waiting", handleWaiting);
@@ -6618,6 +6629,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
6618
6629
  clearTimeout(bufferingTimeoutRef.current);
6619
6630
  bufferingTimeoutRef.current = null;
6620
6631
  }
6632
+ video.removeEventListener("loadedmetadata", handleLoadedMetadata);
6621
6633
  video.removeEventListener("canplay", handleCanPlay);
6622
6634
  video.removeEventListener("canplaythrough", handleCanPlayThrough);
6623
6635
  video.removeEventListener("waiting", handleWaiting);
@@ -6628,6 +6640,11 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
6628
6640
  }, [
6629
6641
  debugAdTiming
6630
6642
  ]);
6643
+ (0, import_react.useEffect)(function() {
6644
+ setPlayerAspectRatio(DEFAULT_PLAYER_ASPECT_RATIO);
6645
+ }, [
6646
+ src
6647
+ ]);
6631
6648
  (0, import_react.useEffect)(function() {
6632
6649
  return function() {
6633
6650
  if (controlsTimerRef.current) {
@@ -6653,7 +6670,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
6653
6670
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
6654
6671
  children: [
6655
6672
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", {
6656
- 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 "
6673
+ 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 "
6657
6674
  }),
6658
6675
  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
6659
6676
  ref: wrapperRef,
@@ -6671,6 +6688,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
6671
6688
  width: isFullscreen ? "100vw" : "100%",
6672
6689
  height: isFullscreen ? "100vh" : "auto",
6673
6690
  minHeight: isFullscreen ? "100vh" : "auto",
6691
+ aspectRatio: isFullscreen ? void 0 : playerAspectRatio,
6674
6692
  maxWidth: isFullscreen ? "100vw" : "100%",
6675
6693
  maxHeight: isFullscreen ? "100vh" : "none",
6676
6694
  zIndex: isFullscreen ? 999999 : void 0,
@@ -6685,7 +6703,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
6685
6703
  style: _object_spread({
6686
6704
  display: "block",
6687
6705
  width: "100%",
6688
- height: isFullscreen ? "100%" : "auto",
6706
+ height: "100%",
6689
6707
  maxWidth: "100%",
6690
6708
  maxHeight: isFullscreen ? "100%" : "none",
6691
6709
  objectFit: isFullscreen ? "cover" : "contain",
@@ -6699,18 +6717,44 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
6699
6717
  }, restVideoAttrs), {
6700
6718
  children: children
6701
6719
  })),
6702
- (isLoading || isBuffering) && !hideLoadingIndicator && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_fa.FaSpinner, {
6720
+ (isLoading || isBuffering) && !hideLoadingIndicator && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
6703
6721
  className: "sc-loading-indicator",
6704
- size: 40,
6705
- color: "rgba(255, 255, 255, 0.85)",
6706
6722
  style: {
6707
6723
  position: "absolute",
6708
- top: "calc(50% - 20px)",
6709
- left: "calc(50% - 20px)",
6724
+ top: "50%",
6725
+ left: "50%",
6726
+ transform: "translate(-50%, -50%)",
6710
6727
  zIndex: 20,
6711
- animation: "sc-spin 0.9s linear infinite",
6712
- filter: "drop-shadow(0 2px 8px rgba(0, 0, 0, 0.6))"
6713
- }
6728
+ width: "".concat(Math.max(34, 38 * responsiveScale), "px"),
6729
+ height: "".concat(Math.max(34, 38 * responsiveScale), "px"),
6730
+ display: "flex",
6731
+ alignItems: "center",
6732
+ justifyContent: "center",
6733
+ animation: "sc-loading-glow 1.4s ease-in-out infinite",
6734
+ filter: "drop-shadow(0 6px 14px rgba(0, 0, 0, 0.55))"
6735
+ },
6736
+ children: [
6737
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
6738
+ style: {
6739
+ position: "absolute",
6740
+ inset: 0,
6741
+ borderRadius: "50%",
6742
+ border: "3px solid rgba(255, 255, 255, 0.25)",
6743
+ borderTopColor: "#ff0000",
6744
+ borderRightColor: "rgba(255, 255, 255, 0.85)",
6745
+ animation: "sc-spin 0.8s linear infinite"
6746
+ }
6747
+ }),
6748
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
6749
+ style: {
6750
+ width: "7px",
6751
+ height: "7px",
6752
+ borderRadius: "50%",
6753
+ background: "#ff0000",
6754
+ boxShadow: "0 0 10px rgba(255, 0, 0, 0.65)"
6755
+ }
6756
+ })
6757
+ ]
6714
6758
  }),
6715
6759
  showLicenseWarning && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
6716
6760
  style: {
@@ -6946,7 +6990,8 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
6946
6990
  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
6947
6991
  style: {
6948
6992
  display: "flex",
6949
- alignItems: "center"
6993
+ alignItems: "center",
6994
+ paddingRight: "".concat(6 * responsiveScale, "px")
6950
6995
  },
6951
6996
  onMouseEnter: function onMouseEnter() {
6952
6997
  return setShowVolumeSlider(true);
@@ -6977,13 +7022,13 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
6977
7022
  }),
6978
7023
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
6979
7024
  style: {
6980
- width: showVolumeSlider ? "".concat(62 * responsiveScale, "px") : "0px",
7025
+ width: showVolumeSlider ? "".concat(68 * responsiveScale, "px") : "0px",
6981
7026
  overflow: "hidden",
6982
7027
  transition: "width 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
6983
7028
  display: "flex",
6984
7029
  alignItems: "center",
6985
- paddingLeft: showVolumeSlider ? "2px" : "0",
6986
- paddingRight: showVolumeSlider ? "4px" : "0"
7030
+ paddingLeft: showVolumeSlider ? "".concat(3 * responsiveScale, "px") : "0",
7031
+ paddingRight: showVolumeSlider ? "".concat(8 * responsiveScale, "px") : "0"
6987
7032
  },
6988
7033
  children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
6989
7034
  style: {
@@ -7230,7 +7275,8 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
7230
7275
  alignItems: "center",
7231
7276
  background: "rgba(0, 0, 0, 0.6)",
7232
7277
  borderRadius: "".concat(18 * responsiveScale, "px"),
7233
- padding: "2px"
7278
+ padding: "2px",
7279
+ paddingRight: "".concat(8 * responsiveScale, "px")
7234
7280
  },
7235
7281
  onMouseEnter: function onMouseEnter() {
7236
7282
  return setShowVolumeSlider(true);
@@ -7259,13 +7305,13 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
7259
7305
  }),
7260
7306
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
7261
7307
  style: {
7262
- width: showVolumeSlider ? "".concat(62 * responsiveScale, "px") : "0px",
7308
+ width: showVolumeSlider ? "".concat(68 * responsiveScale, "px") : "0px",
7263
7309
  overflow: "hidden",
7264
7310
  transition: "width 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
7265
7311
  display: "flex",
7266
7312
  alignItems: "center",
7267
- paddingLeft: showVolumeSlider ? "2px" : "0",
7268
- paddingRight: showVolumeSlider ? "6px" : "0"
7313
+ paddingLeft: showVolumeSlider ? "".concat(3 * responsiveScale, "px") : "0",
7314
+ paddingRight: showVolumeSlider ? "".concat(10 * responsiveScale, "px") : "0"
7269
7315
  },
7270
7316
  children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
7271
7317
  style: {