stormcloud-video-player 0.5.26 → 0.5.27
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.
- package/dist/stormcloud-vp.min.js +1 -1
- package/lib/index.cjs +69 -20
- package/lib/index.cjs.map +1 -1
- package/lib/index.js +70 -21
- package/lib/index.js.map +1 -1
- package/lib/player/StormcloudVideoPlayer.cjs +5 -2
- package/lib/player/StormcloudVideoPlayer.cjs.map +1 -1
- package/lib/players/HlsPlayer.cjs +5 -2
- package/lib/players/HlsPlayer.cjs.map +1 -1
- package/lib/players/index.cjs +5 -2
- package/lib/players/index.cjs.map +1 -1
- package/lib/ui/StormcloudVideoPlayer.cjs +69 -20
- package/lib/ui/StormcloudVideoPlayer.cjs.map +1 -1
- package/package.json +1 -1
|
@@ -4301,7 +4301,7 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
|
|
|
4301
4301
|
case 0:
|
|
4302
4302
|
_this = this;
|
|
4303
4303
|
durSec = (_marker_durationSeconds = marker.durationSeconds) !== null && _marker_durationSeconds !== void 0 ? _marker_durationSeconds : 60;
|
|
4304
|
-
estimatedCount = Math.min(4, Math.max(1, Math.ceil(durSec /
|
|
4304
|
+
estimatedCount = Math.min(4, Math.max(1, Math.ceil(durSec / 20)));
|
|
4305
4305
|
if (this.config.debugAdTiming) {
|
|
4306
4306
|
console.log("[PREFETCH] Firing ".concat(estimatedCount, " parallel bid request(s) for ").concat(durSec, "s break"));
|
|
4307
4307
|
}
|
|
@@ -4473,6 +4473,7 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
|
|
|
4473
4473
|
if (bids.length > 0) {
|
|
4474
4474
|
_this.consecutiveFailures = 0;
|
|
4475
4475
|
_this.pendingNextAdBids = bids;
|
|
4476
|
+
_this.totalAdsInBreak = Math.max(_this.totalAdsInBreak, _this.currentAdIndex + _this.preloadedTokens.length + 1);
|
|
4476
4477
|
if (_this.config.debugAdTiming) {
|
|
4477
4478
|
console.log("[CONTINUOUS-FETCH] Pre-fetched next ad stored as pending");
|
|
4478
4479
|
}
|
|
@@ -4612,6 +4613,7 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
|
|
|
4612
4613
|
17
|
|
4613
4614
|
];
|
|
4614
4615
|
_this.pendingNextAdBids = bids2;
|
|
4616
|
+
_this.totalAdsInBreak = Math.max(_this.totalAdsInBreak, _this.currentAdIndex + _this.preloadedTokens.length + 1);
|
|
4615
4617
|
if (_this.config.debugAdTiming) {
|
|
4616
4618
|
console.log("[CONTINUOUS-FETCH] Next ad response stored (ad currently playing or in transition)");
|
|
4617
4619
|
}
|
|
@@ -4765,7 +4767,7 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
|
|
|
4765
4767
|
this.inAdBreak = true;
|
|
4766
4768
|
this.currentAdBreakStartWallClockMs = Date.now();
|
|
4767
4769
|
this.currentAdIndex = 0;
|
|
4768
|
-
this.totalAdsInBreak = 1;
|
|
4770
|
+
this.totalAdsInBreak = Math.max(1, this.preloadedTokens.length);
|
|
4769
4771
|
this.adPodQueue = [];
|
|
4770
4772
|
if (!this.config.disableFiller) this.showAds = true;
|
|
4771
4773
|
if (adBreakDurationMs != null) {
|
|
@@ -4990,6 +4992,7 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
|
|
|
4990
4992
|
3
|
|
4991
4993
|
];
|
|
4992
4994
|
this.pendingNextAdBids = bids;
|
|
4995
|
+
this.totalAdsInBreak = Math.max(this.totalAdsInBreak, this.currentAdIndex + this.preloadedTokens.length);
|
|
4993
4996
|
return [
|
|
4994
4997
|
3,
|
|
4995
4998
|
5
|
|
@@ -5780,6 +5783,7 @@ var CRITICAL_PROPS = [
|
|
|
5780
5783
|
"driftToleranceMs"
|
|
5781
5784
|
];
|
|
5782
5785
|
var CONTROLS_HIDE_DELAY = 3e3;
|
|
5786
|
+
var DEFAULT_PLAYER_ASPECT_RATIO = 16 / 9;
|
|
5783
5787
|
var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
|
|
5784
5788
|
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, disablePrebid = props.disablePrebid, disableFiller = props.disableFiller, restVideoAttrs = _object_without_properties(props, [
|
|
5785
5789
|
"src",
|
|
@@ -5837,6 +5841,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
|
|
|
5837
5841
|
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];
|
|
5838
5842
|
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];
|
|
5839
5843
|
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];
|
|
5844
|
+
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];
|
|
5840
5845
|
var getResponsiveScale = function getResponsiveScale() {
|
|
5841
5846
|
if (viewportWidth < 480) return 0.7;
|
|
5842
5847
|
if (viewportWidth < 768) return 0.8;
|
|
@@ -6078,6 +6083,13 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
|
|
|
6078
6083
|
}, []);
|
|
6079
6084
|
(0, import_react.useEffect)(function() {
|
|
6080
6085
|
if (!videoRef.current) return;
|
|
6086
|
+
var handleLoadedMetadata = function handleLoadedMetadata() {
|
|
6087
|
+
var video2 = videoRef.current;
|
|
6088
|
+
if (!video2) return;
|
|
6089
|
+
if (video2.videoWidth > 0 && video2.videoHeight > 0) {
|
|
6090
|
+
setPlayerAspectRatio(video2.videoWidth / video2.videoHeight);
|
|
6091
|
+
}
|
|
6092
|
+
};
|
|
6081
6093
|
var handleCanPlay = function handleCanPlay() {
|
|
6082
6094
|
setIsLoading(false);
|
|
6083
6095
|
if (bufferingTimeoutRef.current) {
|
|
@@ -6124,6 +6136,8 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
|
|
|
6124
6136
|
setShowCenterPlay(true);
|
|
6125
6137
|
};
|
|
6126
6138
|
var video = videoRef.current;
|
|
6139
|
+
handleLoadedMetadata();
|
|
6140
|
+
video.addEventListener("loadedmetadata", handleLoadedMetadata);
|
|
6127
6141
|
video.addEventListener("canplay", handleCanPlay);
|
|
6128
6142
|
video.addEventListener("canplaythrough", handleCanPlayThrough);
|
|
6129
6143
|
video.addEventListener("waiting", handleWaiting);
|
|
@@ -6138,6 +6152,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
|
|
|
6138
6152
|
clearTimeout(bufferingTimeoutRef.current);
|
|
6139
6153
|
bufferingTimeoutRef.current = null;
|
|
6140
6154
|
}
|
|
6155
|
+
video.removeEventListener("loadedmetadata", handleLoadedMetadata);
|
|
6141
6156
|
video.removeEventListener("canplay", handleCanPlay);
|
|
6142
6157
|
video.removeEventListener("canplaythrough", handleCanPlayThrough);
|
|
6143
6158
|
video.removeEventListener("waiting", handleWaiting);
|
|
@@ -6148,6 +6163,11 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
|
|
|
6148
6163
|
}, [
|
|
6149
6164
|
debugAdTiming
|
|
6150
6165
|
]);
|
|
6166
|
+
(0, import_react.useEffect)(function() {
|
|
6167
|
+
setPlayerAspectRatio(DEFAULT_PLAYER_ASPECT_RATIO);
|
|
6168
|
+
}, [
|
|
6169
|
+
src
|
|
6170
|
+
]);
|
|
6151
6171
|
(0, import_react.useEffect)(function() {
|
|
6152
6172
|
return function() {
|
|
6153
6173
|
if (controlsTimerRef.current) {
|
|
@@ -6173,7 +6193,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
|
|
|
6173
6193
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
|
|
6174
6194
|
children: [
|
|
6175
6195
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", {
|
|
6176
|
-
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 "
|
|
6196
|
+
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 "
|
|
6177
6197
|
}),
|
|
6178
6198
|
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
|
|
6179
6199
|
ref: wrapperRef,
|
|
@@ -6191,6 +6211,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
|
|
|
6191
6211
|
width: isFullscreen ? "100vw" : "100%",
|
|
6192
6212
|
height: isFullscreen ? "100vh" : "auto",
|
|
6193
6213
|
minHeight: isFullscreen ? "100vh" : "auto",
|
|
6214
|
+
aspectRatio: isFullscreen ? void 0 : playerAspectRatio,
|
|
6194
6215
|
maxWidth: isFullscreen ? "100vw" : "100%",
|
|
6195
6216
|
maxHeight: isFullscreen ? "100vh" : "none",
|
|
6196
6217
|
zIndex: isFullscreen ? 999999 : void 0,
|
|
@@ -6205,7 +6226,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
|
|
|
6205
6226
|
style: _object_spread({
|
|
6206
6227
|
display: "block",
|
|
6207
6228
|
width: "100%",
|
|
6208
|
-
height:
|
|
6229
|
+
height: "100%",
|
|
6209
6230
|
maxWidth: "100%",
|
|
6210
6231
|
maxHeight: isFullscreen ? "100%" : "none",
|
|
6211
6232
|
objectFit: isFullscreen ? "cover" : "contain",
|
|
@@ -6219,18 +6240,44 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
|
|
|
6219
6240
|
}, restVideoAttrs), {
|
|
6220
6241
|
children: children
|
|
6221
6242
|
})),
|
|
6222
|
-
(isLoading || isBuffering) && !hideLoadingIndicator && /* @__PURE__ */ (0, import_jsx_runtime.
|
|
6243
|
+
(isLoading || isBuffering) && !hideLoadingIndicator && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
|
|
6223
6244
|
className: "sc-loading-indicator",
|
|
6224
|
-
size: 40,
|
|
6225
|
-
color: "rgba(255, 255, 255, 0.85)",
|
|
6226
6245
|
style: {
|
|
6227
6246
|
position: "absolute",
|
|
6228
|
-
top: "
|
|
6229
|
-
left: "
|
|
6247
|
+
top: "50%",
|
|
6248
|
+
left: "50%",
|
|
6249
|
+
transform: "translate(-50%, -50%)",
|
|
6230
6250
|
zIndex: 20,
|
|
6231
|
-
|
|
6232
|
-
|
|
6233
|
-
|
|
6251
|
+
width: "".concat(Math.max(34, 38 * responsiveScale), "px"),
|
|
6252
|
+
height: "".concat(Math.max(34, 38 * responsiveScale), "px"),
|
|
6253
|
+
display: "flex",
|
|
6254
|
+
alignItems: "center",
|
|
6255
|
+
justifyContent: "center",
|
|
6256
|
+
animation: "sc-loading-glow 1.4s ease-in-out infinite",
|
|
6257
|
+
filter: "drop-shadow(0 6px 14px rgba(0, 0, 0, 0.55))"
|
|
6258
|
+
},
|
|
6259
|
+
children: [
|
|
6260
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
6261
|
+
style: {
|
|
6262
|
+
position: "absolute",
|
|
6263
|
+
inset: 0,
|
|
6264
|
+
borderRadius: "50%",
|
|
6265
|
+
border: "3px solid rgba(255, 255, 255, 0.25)",
|
|
6266
|
+
borderTopColor: "#ff0000",
|
|
6267
|
+
borderRightColor: "rgba(255, 255, 255, 0.85)",
|
|
6268
|
+
animation: "sc-spin 0.8s linear infinite"
|
|
6269
|
+
}
|
|
6270
|
+
}),
|
|
6271
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
6272
|
+
style: {
|
|
6273
|
+
width: "7px",
|
|
6274
|
+
height: "7px",
|
|
6275
|
+
borderRadius: "50%",
|
|
6276
|
+
background: "#ff0000",
|
|
6277
|
+
boxShadow: "0 0 10px rgba(255, 0, 0, 0.65)"
|
|
6278
|
+
}
|
|
6279
|
+
})
|
|
6280
|
+
]
|
|
6234
6281
|
}),
|
|
6235
6282
|
showLicenseWarning && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
|
|
6236
6283
|
style: {
|
|
@@ -6466,7 +6513,8 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
|
|
|
6466
6513
|
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
|
|
6467
6514
|
style: {
|
|
6468
6515
|
display: "flex",
|
|
6469
|
-
alignItems: "center"
|
|
6516
|
+
alignItems: "center",
|
|
6517
|
+
paddingRight: "".concat(6 * responsiveScale, "px")
|
|
6470
6518
|
},
|
|
6471
6519
|
onMouseEnter: function onMouseEnter() {
|
|
6472
6520
|
return setShowVolumeSlider(true);
|
|
@@ -6497,13 +6545,13 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
|
|
|
6497
6545
|
}),
|
|
6498
6546
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
6499
6547
|
style: {
|
|
6500
|
-
width: showVolumeSlider ? "".concat(
|
|
6548
|
+
width: showVolumeSlider ? "".concat(68 * responsiveScale, "px") : "0px",
|
|
6501
6549
|
overflow: "hidden",
|
|
6502
6550
|
transition: "width 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
|
|
6503
6551
|
display: "flex",
|
|
6504
6552
|
alignItems: "center",
|
|
6505
|
-
paddingLeft: showVolumeSlider ? "
|
|
6506
|
-
paddingRight: showVolumeSlider ? "
|
|
6553
|
+
paddingLeft: showVolumeSlider ? "".concat(3 * responsiveScale, "px") : "0",
|
|
6554
|
+
paddingRight: showVolumeSlider ? "".concat(8 * responsiveScale, "px") : "0"
|
|
6507
6555
|
},
|
|
6508
6556
|
children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
|
|
6509
6557
|
style: {
|
|
@@ -6750,7 +6798,8 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
|
|
|
6750
6798
|
alignItems: "center",
|
|
6751
6799
|
background: "rgba(0, 0, 0, 0.6)",
|
|
6752
6800
|
borderRadius: "".concat(18 * responsiveScale, "px"),
|
|
6753
|
-
padding: "2px"
|
|
6801
|
+
padding: "2px",
|
|
6802
|
+
paddingRight: "".concat(8 * responsiveScale, "px")
|
|
6754
6803
|
},
|
|
6755
6804
|
onMouseEnter: function onMouseEnter() {
|
|
6756
6805
|
return setShowVolumeSlider(true);
|
|
@@ -6779,13 +6828,13 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
|
|
|
6779
6828
|
}),
|
|
6780
6829
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
6781
6830
|
style: {
|
|
6782
|
-
width: showVolumeSlider ? "".concat(
|
|
6831
|
+
width: showVolumeSlider ? "".concat(68 * responsiveScale, "px") : "0px",
|
|
6783
6832
|
overflow: "hidden",
|
|
6784
6833
|
transition: "width 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
|
|
6785
6834
|
display: "flex",
|
|
6786
6835
|
alignItems: "center",
|
|
6787
|
-
paddingLeft: showVolumeSlider ? "
|
|
6788
|
-
paddingRight: showVolumeSlider ? "
|
|
6836
|
+
paddingLeft: showVolumeSlider ? "".concat(3 * responsiveScale, "px") : "0",
|
|
6837
|
+
paddingRight: showVolumeSlider ? "".concat(10 * responsiveScale, "px") : "0"
|
|
6789
6838
|
},
|
|
6790
6839
|
children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
|
|
6791
6840
|
style: {
|