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/index.cjs CHANGED
@@ -1124,7 +1124,6 @@ function createVastAdLayer(contentVideo, options) {
1124
1124
  var tornDown = false;
1125
1125
  var trackingFired = createEmptyTrackingState();
1126
1126
  var adStallTimerId;
1127
- var savedContentVideoStyles;
1128
1127
  var currentAdEventHandlers;
1129
1128
  var preloadSlots = /* @__PURE__ */ new Map();
1130
1129
  function emit(event, payload) {
@@ -1241,7 +1240,7 @@ function createVastAdLayer(contentVideo, options) {
1241
1240
  video.style.top = "0";
1242
1241
  video.style.width = "100%";
1243
1242
  video.style.height = "100%";
1244
- video.style.objectFit = "cover";
1243
+ video.style.objectFit = "contain";
1245
1244
  video.style.backgroundColor = "#000";
1246
1245
  video.playsInline = true;
1247
1246
  video.muted = false;
@@ -1356,31 +1355,12 @@ function createVastAdLayer(contentVideo, options) {
1356
1355
  delete contentVideo.dataset.stormcloudAdPlaying;
1357
1356
  }
1358
1357
  }
1359
- function applyContentVideoAdCoverStyles() {
1360
- if (!singleElementMode) return;
1361
- savedContentVideoStyles = {
1362
- objectFit: contentVideo.style.objectFit,
1363
- width: contentVideo.style.width,
1364
- height: contentVideo.style.height
1365
- };
1366
- contentVideo.style.objectFit = "cover";
1367
- contentVideo.style.width = "100%";
1368
- contentVideo.style.height = "100%";
1369
- }
1370
- function restoreContentVideoStyles() {
1371
- if (!singleElementMode || !savedContentVideoStyles) return;
1372
- contentVideo.style.objectFit = savedContentVideoStyles.objectFit;
1373
- contentVideo.style.width = savedContentVideoStyles.width;
1374
- contentVideo.style.height = savedContentVideoStyles.height;
1375
- savedContentVideoStyles = void 0;
1376
- }
1377
1358
  function handleAdComplete() {
1378
1359
  if (tornDown) return;
1379
1360
  clearAdStallTimer();
1380
1361
  if (debug) console.log("".concat(LOG, " Handling ad completion"));
1381
1362
  adPlaying = false;
1382
1363
  setAdPlayingFlag(false);
1383
- restoreContentVideoStyles();
1384
1364
  if (adContainerEl) {
1385
1365
  adContainerEl.style.display = "none";
1386
1366
  adContainerEl.style.pointerEvents = "none";
@@ -1395,7 +1375,6 @@ function createVastAdLayer(contentVideo, options) {
1395
1375
  if (debug) console.log("".concat(LOG, " Handling ad error"));
1396
1376
  adPlaying = false;
1397
1377
  setAdPlayingFlag(false);
1398
- restoreContentVideoStyles();
1399
1378
  if (adContainerEl) {
1400
1379
  adContainerEl.style.display = "none";
1401
1380
  adContainerEl.style.pointerEvents = "none";
@@ -1566,7 +1545,6 @@ function createVastAdLayer(contentVideo, options) {
1566
1545
  ];
1567
1546
  contentVideo.style.visibility = "visible";
1568
1547
  contentVideo.style.opacity = "1";
1569
- applyContentVideoAdCoverStyles();
1570
1548
  emit("content_pause");
1571
1549
  setupAdEventListeners();
1572
1550
  adVolume2 = originalMutedState ? 1 : originalVolume;
@@ -1805,7 +1783,6 @@ function createVastAdLayer(contentVideo, options) {
1805
1783
  ];
1806
1784
  contentVideo.style.visibility = "visible";
1807
1785
  contentVideo.style.opacity = "1";
1808
- applyContentVideoAdCoverStyles();
1809
1786
  emit("content_pause");
1810
1787
  setupAdEventListeners();
1811
1788
  adVolume2 = originalMutedState ? 1 : originalVolume;
@@ -1956,7 +1933,6 @@ function createVastAdLayer(contentVideo, options) {
1956
1933
  if (debug) console.log("".concat(LOG, " Stopping ad"));
1957
1934
  adPlaying = false;
1958
1935
  setAdPlayingFlag(false);
1959
- restoreContentVideoStyles();
1960
1936
  contentVideo.muted = originalMutedState;
1961
1937
  contentVideo.volume = originalMutedState ? 0 : originalVolume;
1962
1938
  contentVideo.style.visibility = "visible";
@@ -1995,7 +1971,6 @@ function createVastAdLayer(contentVideo, options) {
1995
1971
  destroyed = true;
1996
1972
  adPlaying = false;
1997
1973
  setAdPlayingFlag(false);
1998
- restoreContentVideoStyles();
1999
1974
  contentVideo.muted = originalMutedState;
2000
1975
  contentVideo.volume = originalVolume;
2001
1976
  var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
@@ -6260,6 +6235,7 @@ var CRITICAL_PROPS = [
6260
6235
  "driftToleranceMs"
6261
6236
  ];
6262
6237
  var CONTROLS_HIDE_DELAY = 3e3;
6238
+ var DEFAULT_PLAYER_ASPECT_RATIO = 16 / 9;
6263
6239
  var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
6264
6240
  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
6241
  "src",
@@ -6317,6 +6293,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
6317
6293
  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
6294
  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
6295
  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];
6296
+ 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
6297
  var getResponsiveScale = function getResponsiveScale() {
6321
6298
  if (viewportWidth < 480) return 0.7;
6322
6299
  if (viewportWidth < 768) return 0.8;
@@ -6558,6 +6535,13 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
6558
6535
  }, []);
6559
6536
  (0, import_react.useEffect)(function() {
6560
6537
  if (!videoRef.current) return;
6538
+ var handleLoadedMetadata = function handleLoadedMetadata() {
6539
+ var video2 = videoRef.current;
6540
+ if (!video2) return;
6541
+ if (video2.videoWidth > 0 && video2.videoHeight > 0) {
6542
+ setPlayerAspectRatio(video2.videoWidth / video2.videoHeight);
6543
+ }
6544
+ };
6561
6545
  var handleCanPlay = function handleCanPlay() {
6562
6546
  setIsLoading(false);
6563
6547
  if (bufferingTimeoutRef.current) {
@@ -6604,6 +6588,8 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
6604
6588
  setShowCenterPlay(true);
6605
6589
  };
6606
6590
  var video = videoRef.current;
6591
+ handleLoadedMetadata();
6592
+ video.addEventListener("loadedmetadata", handleLoadedMetadata);
6607
6593
  video.addEventListener("canplay", handleCanPlay);
6608
6594
  video.addEventListener("canplaythrough", handleCanPlayThrough);
6609
6595
  video.addEventListener("waiting", handleWaiting);
@@ -6618,6 +6604,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
6618
6604
  clearTimeout(bufferingTimeoutRef.current);
6619
6605
  bufferingTimeoutRef.current = null;
6620
6606
  }
6607
+ video.removeEventListener("loadedmetadata", handleLoadedMetadata);
6621
6608
  video.removeEventListener("canplay", handleCanPlay);
6622
6609
  video.removeEventListener("canplaythrough", handleCanPlayThrough);
6623
6610
  video.removeEventListener("waiting", handleWaiting);
@@ -6628,6 +6615,11 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
6628
6615
  }, [
6629
6616
  debugAdTiming
6630
6617
  ]);
6618
+ (0, import_react.useEffect)(function() {
6619
+ setPlayerAspectRatio(DEFAULT_PLAYER_ASPECT_RATIO);
6620
+ }, [
6621
+ src
6622
+ ]);
6631
6623
  (0, import_react.useEffect)(function() {
6632
6624
  return function() {
6633
6625
  if (controlsTimerRef.current) {
@@ -6653,7 +6645,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
6653
6645
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
6654
6646
  children: [
6655
6647
  /* @__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 "
6648
+ 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
6649
  }),
6658
6650
  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
6659
6651
  ref: wrapperRef,
@@ -6671,6 +6663,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
6671
6663
  width: isFullscreen ? "100vw" : "100%",
6672
6664
  height: isFullscreen ? "100vh" : "auto",
6673
6665
  minHeight: isFullscreen ? "100vh" : "auto",
6666
+ aspectRatio: isFullscreen ? void 0 : playerAspectRatio,
6674
6667
  maxWidth: isFullscreen ? "100vw" : "100%",
6675
6668
  maxHeight: isFullscreen ? "100vh" : "none",
6676
6669
  zIndex: isFullscreen ? 999999 : void 0,
@@ -6685,7 +6678,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
6685
6678
  style: _object_spread({
6686
6679
  display: "block",
6687
6680
  width: "100%",
6688
- height: isFullscreen ? "100%" : "auto",
6681
+ height: "100%",
6689
6682
  maxWidth: "100%",
6690
6683
  maxHeight: isFullscreen ? "100%" : "none",
6691
6684
  objectFit: isFullscreen ? "cover" : "contain",
@@ -6699,18 +6692,44 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
6699
6692
  }, restVideoAttrs), {
6700
6693
  children: children
6701
6694
  })),
6702
- (isLoading || isBuffering) && !hideLoadingIndicator && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_fa.FaSpinner, {
6695
+ (isLoading || isBuffering) && !hideLoadingIndicator && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
6703
6696
  className: "sc-loading-indicator",
6704
- size: 40,
6705
- color: "rgba(255, 255, 255, 0.85)",
6706
6697
  style: {
6707
6698
  position: "absolute",
6708
- top: "calc(50% - 20px)",
6709
- left: "calc(50% - 20px)",
6699
+ top: "50%",
6700
+ left: "50%",
6701
+ transform: "translate(-50%, -50%)",
6710
6702
  zIndex: 20,
6711
- animation: "sc-spin 0.9s linear infinite",
6712
- filter: "drop-shadow(0 2px 8px rgba(0, 0, 0, 0.6))"
6713
- }
6703
+ width: "".concat(Math.max(34, 38 * responsiveScale), "px"),
6704
+ height: "".concat(Math.max(34, 38 * responsiveScale), "px"),
6705
+ display: "flex",
6706
+ alignItems: "center",
6707
+ justifyContent: "center",
6708
+ animation: "sc-loading-glow 1.4s ease-in-out infinite",
6709
+ filter: "drop-shadow(0 6px 14px rgba(0, 0, 0, 0.55))"
6710
+ },
6711
+ children: [
6712
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
6713
+ style: {
6714
+ position: "absolute",
6715
+ inset: 0,
6716
+ borderRadius: "50%",
6717
+ border: "3px solid rgba(255, 255, 255, 0.25)",
6718
+ borderTopColor: "#ff0000",
6719
+ borderRightColor: "rgba(255, 255, 255, 0.85)",
6720
+ animation: "sc-spin 0.8s linear infinite"
6721
+ }
6722
+ }),
6723
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
6724
+ style: {
6725
+ width: "7px",
6726
+ height: "7px",
6727
+ borderRadius: "50%",
6728
+ background: "#ff0000",
6729
+ boxShadow: "0 0 10px rgba(255, 0, 0, 0.65)"
6730
+ }
6731
+ })
6732
+ ]
6714
6733
  }),
6715
6734
  showLicenseWarning && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
6716
6735
  style: {
@@ -6946,7 +6965,8 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
6946
6965
  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
6947
6966
  style: {
6948
6967
  display: "flex",
6949
- alignItems: "center"
6968
+ alignItems: "center",
6969
+ paddingRight: "".concat(6 * responsiveScale, "px")
6950
6970
  },
6951
6971
  onMouseEnter: function onMouseEnter() {
6952
6972
  return setShowVolumeSlider(true);
@@ -6977,13 +6997,13 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
6977
6997
  }),
6978
6998
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
6979
6999
  style: {
6980
- width: showVolumeSlider ? "".concat(62 * responsiveScale, "px") : "0px",
7000
+ width: showVolumeSlider ? "".concat(68 * responsiveScale, "px") : "0px",
6981
7001
  overflow: "hidden",
6982
7002
  transition: "width 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
6983
7003
  display: "flex",
6984
7004
  alignItems: "center",
6985
- paddingLeft: showVolumeSlider ? "2px" : "0",
6986
- paddingRight: showVolumeSlider ? "4px" : "0"
7005
+ paddingLeft: showVolumeSlider ? "".concat(3 * responsiveScale, "px") : "0",
7006
+ paddingRight: showVolumeSlider ? "".concat(8 * responsiveScale, "px") : "0"
6987
7007
  },
6988
7008
  children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
6989
7009
  style: {
@@ -7230,7 +7250,8 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
7230
7250
  alignItems: "center",
7231
7251
  background: "rgba(0, 0, 0, 0.6)",
7232
7252
  borderRadius: "".concat(18 * responsiveScale, "px"),
7233
- padding: "2px"
7253
+ padding: "2px",
7254
+ paddingRight: "".concat(8 * responsiveScale, "px")
7234
7255
  },
7235
7256
  onMouseEnter: function onMouseEnter() {
7236
7257
  return setShowVolumeSlider(true);
@@ -7259,13 +7280,13 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
7259
7280
  }),
7260
7281
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
7261
7282
  style: {
7262
- width: showVolumeSlider ? "".concat(62 * responsiveScale, "px") : "0px",
7283
+ width: showVolumeSlider ? "".concat(68 * responsiveScale, "px") : "0px",
7263
7284
  overflow: "hidden",
7264
7285
  transition: "width 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
7265
7286
  display: "flex",
7266
7287
  alignItems: "center",
7267
- paddingLeft: showVolumeSlider ? "2px" : "0",
7268
- paddingRight: showVolumeSlider ? "6px" : "0"
7288
+ paddingLeft: showVolumeSlider ? "".concat(3 * responsiveScale, "px") : "0",
7289
+ paddingRight: showVolumeSlider ? "".concat(10 * responsiveScale, "px") : "0"
7269
7290
  },
7270
7291
  children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
7271
7292
  style: {