stormcloud-video-player 0.6.6 → 0.6.8

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 (16) hide show
  1. package/dist/stormcloud-vp.min.js +1 -1
  2. package/lib/index.cjs +65 -44
  3. package/lib/index.cjs.map +1 -1
  4. package/lib/index.js +66 -45
  5. package/lib/index.js.map +1 -1
  6. package/lib/player/StormcloudVideoPlayer.cjs +1 -26
  7. package/lib/player/StormcloudVideoPlayer.cjs.map +1 -1
  8. package/lib/players/HlsPlayer.cjs +1 -26
  9. package/lib/players/HlsPlayer.cjs.map +1 -1
  10. package/lib/players/index.cjs +1 -26
  11. package/lib/players/index.cjs.map +1 -1
  12. package/lib/sdk/vastAdLayer.cjs +1 -26
  13. package/lib/sdk/vastAdLayer.cjs.map +1 -1
  14. package/lib/ui/StormcloudVideoPlayer.cjs +65 -44
  15. package/lib/ui/StormcloudVideoPlayer.cjs.map +1 -1
  16. package/package.json +1 -1
package/lib/ui/StormcloudVideoPlayer.cjs CHANGED
@@ -980,7 +980,6 @@ function createVastAdLayer(contentVideo, options) {
980
980
  var tornDown = false;
981
981
  var trackingFired = createEmptyTrackingState();
982
982
  var adStallTimerId;
983
- var savedContentVideoStyles;
984
983
  var currentAdEventHandlers;
985
984
  var preloadSlots = /* @__PURE__ */ new Map();
986
985
  function emit(event, payload) {
@@ -1097,7 +1096,7 @@ function createVastAdLayer(contentVideo, options) {
1097
1096
  video.style.top = "0";
1098
1097
  video.style.width = "100%";
1099
1098
  video.style.height = "100%";
1100
- video.style.objectFit = "cover";
1099
+ video.style.objectFit = "contain";
1101
1100
  video.style.backgroundColor = "#000";
1102
1101
  video.playsInline = true;
1103
1102
  video.muted = false;
@@ -1212,31 +1211,12 @@ function createVastAdLayer(contentVideo, options) {
1212
1211
  delete contentVideo.dataset.stormcloudAdPlaying;
1213
1212
  }
1214
1213
  }
1215
- function applyContentVideoAdCoverStyles() {
1216
- if (!singleElementMode) return;
1217
- savedContentVideoStyles = {
1218
- objectFit: contentVideo.style.objectFit,
1219
- width: contentVideo.style.width,
1220
- height: contentVideo.style.height
1221
- };
1222
- contentVideo.style.objectFit = "cover";
1223
- contentVideo.style.width = "100%";
1224
- contentVideo.style.height = "100%";
1225
- }
1226
- function restoreContentVideoStyles() {
1227
- if (!singleElementMode || !savedContentVideoStyles) return;
1228
- contentVideo.style.objectFit = savedContentVideoStyles.objectFit;
1229
- contentVideo.style.width = savedContentVideoStyles.width;
1230
- contentVideo.style.height = savedContentVideoStyles.height;
1231
- savedContentVideoStyles = void 0;
1232
- }
1233
1214
  function handleAdComplete() {
1234
1215
  if (tornDown) return;
1235
1216
  clearAdStallTimer();
1236
1217
  if (debug) console.log("".concat(LOG, " Handling ad completion"));
1237
1218
  adPlaying = false;
1238
1219
  setAdPlayingFlag(false);
1239
- restoreContentVideoStyles();
1240
1220
  if (adContainerEl) {
1241
1221
  adContainerEl.style.display = "none";
1242
1222
  adContainerEl.style.pointerEvents = "none";
@@ -1251,7 +1231,6 @@ function createVastAdLayer(contentVideo, options) {
1251
1231
  if (debug) console.log("".concat(LOG, " Handling ad error"));
1252
1232
  adPlaying = false;
1253
1233
  setAdPlayingFlag(false);
1254
- restoreContentVideoStyles();
1255
1234
  if (adContainerEl) {
1256
1235
  adContainerEl.style.display = "none";
1257
1236
  adContainerEl.style.pointerEvents = "none";
@@ -1422,7 +1401,6 @@ function createVastAdLayer(contentVideo, options) {
1422
1401
  ];
1423
1402
  contentVideo.style.visibility = "visible";
1424
1403
  contentVideo.style.opacity = "1";
1425
- applyContentVideoAdCoverStyles();
1426
1404
  emit("content_pause");
1427
1405
  setupAdEventListeners();
1428
1406
  adVolume2 = originalMutedState ? 1 : originalVolume;
@@ -1661,7 +1639,6 @@ function createVastAdLayer(contentVideo, options) {
1661
1639
  ];
1662
1640
  contentVideo.style.visibility = "visible";
1663
1641
  contentVideo.style.opacity = "1";
1664
- applyContentVideoAdCoverStyles();
1665
1642
  emit("content_pause");
1666
1643
  setupAdEventListeners();
1667
1644
  adVolume2 = originalMutedState ? 1 : originalVolume;
@@ -1812,7 +1789,6 @@ function createVastAdLayer(contentVideo, options) {
1812
1789
  if (debug) console.log("".concat(LOG, " Stopping ad"));
1813
1790
  adPlaying = false;
1814
1791
  setAdPlayingFlag(false);
1815
- restoreContentVideoStyles();
1816
1792
  contentVideo.muted = originalMutedState;
1817
1793
  contentVideo.volume = originalMutedState ? 0 : originalVolume;
1818
1794
  contentVideo.style.visibility = "visible";
@@ -1851,7 +1827,6 @@ function createVastAdLayer(contentVideo, options) {
1851
1827
  destroyed = true;
1852
1828
  adPlaying = false;
1853
1829
  setAdPlayingFlag(false);
1854
- restoreContentVideoStyles();
1855
1830
  contentVideo.muted = originalMutedState;
1856
1831
  contentVideo.volume = originalVolume;
1857
1832
  var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
@@ -6091,6 +6066,7 @@ var CRITICAL_PROPS = [
6091
6066
  "driftToleranceMs"
6092
6067
  ];
6093
6068
  var CONTROLS_HIDE_DELAY = 3e3;
6069
+ var DEFAULT_PLAYER_ASPECT_RATIO = 16 / 9;
6094
6070
  var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
6095
6071
  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
6072
  "src",
@@ -6148,6 +6124,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
6148
6124
  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
6125
  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
6126
  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];
6127
+ 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
6128
  var getResponsiveScale = function getResponsiveScale() {
6152
6129
  if (viewportWidth < 480) return 0.7;
6153
6130
  if (viewportWidth < 768) return 0.8;
@@ -6389,6 +6366,13 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
6389
6366
  }, []);
6390
6367
  (0, import_react.useEffect)(function() {
6391
6368
  if (!videoRef.current) return;
6369
+ var handleLoadedMetadata = function handleLoadedMetadata() {
6370
+ var video2 = videoRef.current;
6371
+ if (!video2) return;
6372
+ if (video2.videoWidth > 0 && video2.videoHeight > 0) {
6373
+ setPlayerAspectRatio(video2.videoWidth / video2.videoHeight);
6374
+ }
6375
+ };
6392
6376
  var handleCanPlay = function handleCanPlay() {
6393
6377
  setIsLoading(false);
6394
6378
  if (bufferingTimeoutRef.current) {
@@ -6435,6 +6419,8 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
6435
6419
  setShowCenterPlay(true);
6436
6420
  };
6437
6421
  var video = videoRef.current;
6422
+ handleLoadedMetadata();
6423
+ video.addEventListener("loadedmetadata", handleLoadedMetadata);
6438
6424
  video.addEventListener("canplay", handleCanPlay);
6439
6425
  video.addEventListener("canplaythrough", handleCanPlayThrough);
6440
6426
  video.addEventListener("waiting", handleWaiting);
@@ -6449,6 +6435,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
6449
6435
  clearTimeout(bufferingTimeoutRef.current);
6450
6436
  bufferingTimeoutRef.current = null;
6451
6437
  }
6438
+ video.removeEventListener("loadedmetadata", handleLoadedMetadata);
6452
6439
  video.removeEventListener("canplay", handleCanPlay);
6453
6440
  video.removeEventListener("canplaythrough", handleCanPlayThrough);
6454
6441
  video.removeEventListener("waiting", handleWaiting);
@@ -6459,6 +6446,11 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
6459
6446
  }, [
6460
6447
  debugAdTiming
6461
6448
  ]);
6449
+ (0, import_react.useEffect)(function() {
6450
+ setPlayerAspectRatio(DEFAULT_PLAYER_ASPECT_RATIO);
6451
+ }, [
6452
+ src
6453
+ ]);
6462
6454
  (0, import_react.useEffect)(function() {
6463
6455
  return function() {
6464
6456
  if (controlsTimerRef.current) {
@@ -6484,7 +6476,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
6484
6476
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
6485
6477
  children: [
6486
6478
  /* @__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 "
6479
+ 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
6480
  }),
6489
6481
  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
6490
6482
  ref: wrapperRef,
@@ -6502,6 +6494,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
6502
6494
  width: isFullscreen ? "100vw" : "100%",
6503
6495
  height: isFullscreen ? "100vh" : "auto",
6504
6496
  minHeight: isFullscreen ? "100vh" : "auto",
6497
+ aspectRatio: isFullscreen ? void 0 : playerAspectRatio,
6505
6498
  maxWidth: isFullscreen ? "100vw" : "100%",
6506
6499
  maxHeight: isFullscreen ? "100vh" : "none",
6507
6500
  zIndex: isFullscreen ? 999999 : void 0,
@@ -6516,7 +6509,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
6516
6509
  style: _object_spread({
6517
6510
  display: "block",
6518
6511
  width: "100%",
6519
- height: isFullscreen ? "100%" : "auto",
6512
+ height: "100%",
6520
6513
  maxWidth: "100%",
6521
6514
  maxHeight: isFullscreen ? "100%" : "none",
6522
6515
  objectFit: isFullscreen ? "cover" : "contain",
@@ -6530,18 +6523,44 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
6530
6523
  }, restVideoAttrs), {
6531
6524
  children: children
6532
6525
  })),
6533
- (isLoading || isBuffering) && !hideLoadingIndicator && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_fa.FaSpinner, {
6526
+ (isLoading || isBuffering) && !hideLoadingIndicator && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
6534
6527
  className: "sc-loading-indicator",
6535
- size: 40,
6536
- color: "rgba(255, 255, 255, 0.85)",
6537
6528
  style: {
6538
6529
  position: "absolute",
6539
- top: "calc(50% - 20px)",
6540
- left: "calc(50% - 20px)",
6530
+ top: "50%",
6531
+ left: "50%",
6532
+ transform: "translate(-50%, -50%)",
6541
6533
  zIndex: 20,
6542
- animation: "sc-spin 0.9s linear infinite",
6543
- filter: "drop-shadow(0 2px 8px rgba(0, 0, 0, 0.6))"
6544
- }
6534
+ width: "".concat(Math.max(34, 38 * responsiveScale), "px"),
6535
+ height: "".concat(Math.max(34, 38 * responsiveScale), "px"),
6536
+ display: "flex",
6537
+ alignItems: "center",
6538
+ justifyContent: "center",
6539
+ animation: "sc-loading-glow 1.4s ease-in-out infinite",
6540
+ filter: "drop-shadow(0 6px 14px rgba(0, 0, 0, 0.55))"
6541
+ },
6542
+ children: [
6543
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
6544
+ style: {
6545
+ position: "absolute",
6546
+ inset: 0,
6547
+ borderRadius: "50%",
6548
+ border: "3px solid rgba(255, 255, 255, 0.25)",
6549
+ borderTopColor: "#ff0000",
6550
+ borderRightColor: "rgba(255, 255, 255, 0.85)",
6551
+ animation: "sc-spin 0.8s linear infinite"
6552
+ }
6553
+ }),
6554
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
6555
+ style: {
6556
+ width: "7px",
6557
+ height: "7px",
6558
+ borderRadius: "50%",
6559
+ background: "#ff0000",
6560
+ boxShadow: "0 0 10px rgba(255, 0, 0, 0.65)"
6561
+ }
6562
+ })
6563
+ ]
6545
6564
  }),
6546
6565
  showLicenseWarning && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
6547
6566
  style: {
@@ -6777,7 +6796,8 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
6777
6796
  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
6778
6797
  style: {
6779
6798
  display: "flex",
6780
- alignItems: "center"
6799
+ alignItems: "center",
6800
+ paddingRight: "".concat(6 * responsiveScale, "px")
6781
6801
  },
6782
6802
  onMouseEnter: function onMouseEnter() {
6783
6803
  return setShowVolumeSlider(true);
@@ -6808,13 +6828,13 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
6808
6828
  }),
6809
6829
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
6810
6830
  style: {
6811
- width: showVolumeSlider ? "".concat(62 * responsiveScale, "px") : "0px",
6831
+ width: showVolumeSlider ? "".concat(68 * responsiveScale, "px") : "0px",
6812
6832
  overflow: "hidden",
6813
6833
  transition: "width 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
6814
6834
  display: "flex",
6815
6835
  alignItems: "center",
6816
- paddingLeft: showVolumeSlider ? "2px" : "0",
6817
- paddingRight: showVolumeSlider ? "4px" : "0"
6836
+ paddingLeft: showVolumeSlider ? "".concat(3 * responsiveScale, "px") : "0",
6837
+ paddingRight: showVolumeSlider ? "".concat(8 * responsiveScale, "px") : "0"
6818
6838
  },
6819
6839
  children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
6820
6840
  style: {
@@ -7061,7 +7081,8 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
7061
7081
  alignItems: "center",
7062
7082
  background: "rgba(0, 0, 0, 0.6)",
7063
7083
  borderRadius: "".concat(18 * responsiveScale, "px"),
7064
- padding: "2px"
7084
+ padding: "2px",
7085
+ paddingRight: "".concat(8 * responsiveScale, "px")
7065
7086
  },
7066
7087
  onMouseEnter: function onMouseEnter() {
7067
7088
  return setShowVolumeSlider(true);
@@ -7090,13 +7111,13 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
7090
7111
  }),
7091
7112
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
7092
7113
  style: {
7093
- width: showVolumeSlider ? "".concat(62 * responsiveScale, "px") : "0px",
7114
+ width: showVolumeSlider ? "".concat(68 * responsiveScale, "px") : "0px",
7094
7115
  overflow: "hidden",
7095
7116
  transition: "width 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
7096
7117
  display: "flex",
7097
7118
  alignItems: "center",
7098
- paddingLeft: showVolumeSlider ? "2px" : "0",
7099
- paddingRight: showVolumeSlider ? "6px" : "0"
7119
+ paddingLeft: showVolumeSlider ? "".concat(3 * responsiveScale, "px") : "0",
7120
+ paddingRight: showVolumeSlider ? "".concat(10 * responsiveScale, "px") : "0"
7100
7121
  },
7101
7122
  children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
7102
7123
  style: {