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
package/lib/index.cjs
CHANGED
|
@@ -4470,7 +4470,7 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
|
|
|
4470
4470
|
case 0:
|
|
4471
4471
|
_this = this;
|
|
4472
4472
|
durSec = (_marker_durationSeconds = marker.durationSeconds) !== null && _marker_durationSeconds !== void 0 ? _marker_durationSeconds : 60;
|
|
4473
|
-
estimatedCount = Math.min(4, Math.max(1, Math.ceil(durSec /
|
|
4473
|
+
estimatedCount = Math.min(4, Math.max(1, Math.ceil(durSec / 20)));
|
|
4474
4474
|
if (this.config.debugAdTiming) {
|
|
4475
4475
|
console.log("[PREFETCH] Firing ".concat(estimatedCount, " parallel bid request(s) for ").concat(durSec, "s break"));
|
|
4476
4476
|
}
|
|
@@ -4642,6 +4642,7 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
|
|
|
4642
4642
|
if (bids.length > 0) {
|
|
4643
4643
|
_this.consecutiveFailures = 0;
|
|
4644
4644
|
_this.pendingNextAdBids = bids;
|
|
4645
|
+
_this.totalAdsInBreak = Math.max(_this.totalAdsInBreak, _this.currentAdIndex + _this.preloadedTokens.length + 1);
|
|
4645
4646
|
if (_this.config.debugAdTiming) {
|
|
4646
4647
|
console.log("[CONTINUOUS-FETCH] Pre-fetched next ad stored as pending");
|
|
4647
4648
|
}
|
|
@@ -4781,6 +4782,7 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
|
|
|
4781
4782
|
17
|
|
4782
4783
|
];
|
|
4783
4784
|
_this.pendingNextAdBids = bids2;
|
|
4785
|
+
_this.totalAdsInBreak = Math.max(_this.totalAdsInBreak, _this.currentAdIndex + _this.preloadedTokens.length + 1);
|
|
4784
4786
|
if (_this.config.debugAdTiming) {
|
|
4785
4787
|
console.log("[CONTINUOUS-FETCH] Next ad response stored (ad currently playing or in transition)");
|
|
4786
4788
|
}
|
|
@@ -4934,7 +4936,7 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
|
|
|
4934
4936
|
this.inAdBreak = true;
|
|
4935
4937
|
this.currentAdBreakStartWallClockMs = Date.now();
|
|
4936
4938
|
this.currentAdIndex = 0;
|
|
4937
|
-
this.totalAdsInBreak = 1;
|
|
4939
|
+
this.totalAdsInBreak = Math.max(1, this.preloadedTokens.length);
|
|
4938
4940
|
this.adPodQueue = [];
|
|
4939
4941
|
if (!this.config.disableFiller) this.showAds = true;
|
|
4940
4942
|
if (adBreakDurationMs != null) {
|
|
@@ -5159,6 +5161,7 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
|
|
|
5159
5161
|
3
|
|
5160
5162
|
];
|
|
5161
5163
|
this.pendingNextAdBids = bids;
|
|
5164
|
+
this.totalAdsInBreak = Math.max(this.totalAdsInBreak, this.currentAdIndex + this.preloadedTokens.length);
|
|
5162
5165
|
return [
|
|
5163
5166
|
3,
|
|
5164
5167
|
5
|
|
@@ -5949,6 +5952,7 @@ var CRITICAL_PROPS = [
|
|
|
5949
5952
|
"driftToleranceMs"
|
|
5950
5953
|
];
|
|
5951
5954
|
var CONTROLS_HIDE_DELAY = 3e3;
|
|
5955
|
+
var DEFAULT_PLAYER_ASPECT_RATIO = 16 / 9;
|
|
5952
5956
|
var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
|
|
5953
5957
|
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, [
|
|
5954
5958
|
"src",
|
|
@@ -6006,6 +6010,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
|
|
|
6006
6010
|
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];
|
|
6007
6011
|
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];
|
|
6008
6012
|
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];
|
|
6013
|
+
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];
|
|
6009
6014
|
var getResponsiveScale = function getResponsiveScale() {
|
|
6010
6015
|
if (viewportWidth < 480) return 0.7;
|
|
6011
6016
|
if (viewportWidth < 768) return 0.8;
|
|
@@ -6247,6 +6252,13 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
|
|
|
6247
6252
|
}, []);
|
|
6248
6253
|
(0, import_react.useEffect)(function() {
|
|
6249
6254
|
if (!videoRef.current) return;
|
|
6255
|
+
var handleLoadedMetadata = function handleLoadedMetadata() {
|
|
6256
|
+
var video2 = videoRef.current;
|
|
6257
|
+
if (!video2) return;
|
|
6258
|
+
if (video2.videoWidth > 0 && video2.videoHeight > 0) {
|
|
6259
|
+
setPlayerAspectRatio(video2.videoWidth / video2.videoHeight);
|
|
6260
|
+
}
|
|
6261
|
+
};
|
|
6250
6262
|
var handleCanPlay = function handleCanPlay() {
|
|
6251
6263
|
setIsLoading(false);
|
|
6252
6264
|
if (bufferingTimeoutRef.current) {
|
|
@@ -6293,6 +6305,8 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
|
|
|
6293
6305
|
setShowCenterPlay(true);
|
|
6294
6306
|
};
|
|
6295
6307
|
var video = videoRef.current;
|
|
6308
|
+
handleLoadedMetadata();
|
|
6309
|
+
video.addEventListener("loadedmetadata", handleLoadedMetadata);
|
|
6296
6310
|
video.addEventListener("canplay", handleCanPlay);
|
|
6297
6311
|
video.addEventListener("canplaythrough", handleCanPlayThrough);
|
|
6298
6312
|
video.addEventListener("waiting", handleWaiting);
|
|
@@ -6307,6 +6321,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
|
|
|
6307
6321
|
clearTimeout(bufferingTimeoutRef.current);
|
|
6308
6322
|
bufferingTimeoutRef.current = null;
|
|
6309
6323
|
}
|
|
6324
|
+
video.removeEventListener("loadedmetadata", handleLoadedMetadata);
|
|
6310
6325
|
video.removeEventListener("canplay", handleCanPlay);
|
|
6311
6326
|
video.removeEventListener("canplaythrough", handleCanPlayThrough);
|
|
6312
6327
|
video.removeEventListener("waiting", handleWaiting);
|
|
@@ -6317,6 +6332,11 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
|
|
|
6317
6332
|
}, [
|
|
6318
6333
|
debugAdTiming
|
|
6319
6334
|
]);
|
|
6335
|
+
(0, import_react.useEffect)(function() {
|
|
6336
|
+
setPlayerAspectRatio(DEFAULT_PLAYER_ASPECT_RATIO);
|
|
6337
|
+
}, [
|
|
6338
|
+
src
|
|
6339
|
+
]);
|
|
6320
6340
|
(0, import_react.useEffect)(function() {
|
|
6321
6341
|
return function() {
|
|
6322
6342
|
if (controlsTimerRef.current) {
|
|
@@ -6342,7 +6362,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
|
|
|
6342
6362
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
|
|
6343
6363
|
children: [
|
|
6344
6364
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", {
|
|
6345
|
-
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 "
|
|
6365
|
+
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 "
|
|
6346
6366
|
}),
|
|
6347
6367
|
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
|
|
6348
6368
|
ref: wrapperRef,
|
|
@@ -6360,6 +6380,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
|
|
|
6360
6380
|
width: isFullscreen ? "100vw" : "100%",
|
|
6361
6381
|
height: isFullscreen ? "100vh" : "auto",
|
|
6362
6382
|
minHeight: isFullscreen ? "100vh" : "auto",
|
|
6383
|
+
aspectRatio: isFullscreen ? void 0 : playerAspectRatio,
|
|
6363
6384
|
maxWidth: isFullscreen ? "100vw" : "100%",
|
|
6364
6385
|
maxHeight: isFullscreen ? "100vh" : "none",
|
|
6365
6386
|
zIndex: isFullscreen ? 999999 : void 0,
|
|
@@ -6374,7 +6395,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
|
|
|
6374
6395
|
style: _object_spread({
|
|
6375
6396
|
display: "block",
|
|
6376
6397
|
width: "100%",
|
|
6377
|
-
height:
|
|
6398
|
+
height: "100%",
|
|
6378
6399
|
maxWidth: "100%",
|
|
6379
6400
|
maxHeight: isFullscreen ? "100%" : "none",
|
|
6380
6401
|
objectFit: isFullscreen ? "cover" : "contain",
|
|
@@ -6388,18 +6409,44 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
|
|
|
6388
6409
|
}, restVideoAttrs), {
|
|
6389
6410
|
children: children
|
|
6390
6411
|
})),
|
|
6391
|
-
(isLoading || isBuffering) && !hideLoadingIndicator && /* @__PURE__ */ (0, import_jsx_runtime.
|
|
6412
|
+
(isLoading || isBuffering) && !hideLoadingIndicator && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
|
|
6392
6413
|
className: "sc-loading-indicator",
|
|
6393
|
-
size: 40,
|
|
6394
|
-
color: "rgba(255, 255, 255, 0.85)",
|
|
6395
6414
|
style: {
|
|
6396
6415
|
position: "absolute",
|
|
6397
|
-
top: "
|
|
6398
|
-
left: "
|
|
6416
|
+
top: "50%",
|
|
6417
|
+
left: "50%",
|
|
6418
|
+
transform: "translate(-50%, -50%)",
|
|
6399
6419
|
zIndex: 20,
|
|
6400
|
-
|
|
6401
|
-
|
|
6402
|
-
|
|
6420
|
+
width: "".concat(Math.max(34, 38 * responsiveScale), "px"),
|
|
6421
|
+
height: "".concat(Math.max(34, 38 * responsiveScale), "px"),
|
|
6422
|
+
display: "flex",
|
|
6423
|
+
alignItems: "center",
|
|
6424
|
+
justifyContent: "center",
|
|
6425
|
+
animation: "sc-loading-glow 1.4s ease-in-out infinite",
|
|
6426
|
+
filter: "drop-shadow(0 6px 14px rgba(0, 0, 0, 0.55))"
|
|
6427
|
+
},
|
|
6428
|
+
children: [
|
|
6429
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
6430
|
+
style: {
|
|
6431
|
+
position: "absolute",
|
|
6432
|
+
inset: 0,
|
|
6433
|
+
borderRadius: "50%",
|
|
6434
|
+
border: "3px solid rgba(255, 255, 255, 0.25)",
|
|
6435
|
+
borderTopColor: "#ff0000",
|
|
6436
|
+
borderRightColor: "rgba(255, 255, 255, 0.85)",
|
|
6437
|
+
animation: "sc-spin 0.8s linear infinite"
|
|
6438
|
+
}
|
|
6439
|
+
}),
|
|
6440
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
6441
|
+
style: {
|
|
6442
|
+
width: "7px",
|
|
6443
|
+
height: "7px",
|
|
6444
|
+
borderRadius: "50%",
|
|
6445
|
+
background: "#ff0000",
|
|
6446
|
+
boxShadow: "0 0 10px rgba(255, 0, 0, 0.65)"
|
|
6447
|
+
}
|
|
6448
|
+
})
|
|
6449
|
+
]
|
|
6403
6450
|
}),
|
|
6404
6451
|
showLicenseWarning && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
|
|
6405
6452
|
style: {
|
|
@@ -6635,7 +6682,8 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
|
|
|
6635
6682
|
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
|
|
6636
6683
|
style: {
|
|
6637
6684
|
display: "flex",
|
|
6638
|
-
alignItems: "center"
|
|
6685
|
+
alignItems: "center",
|
|
6686
|
+
paddingRight: "".concat(6 * responsiveScale, "px")
|
|
6639
6687
|
},
|
|
6640
6688
|
onMouseEnter: function onMouseEnter() {
|
|
6641
6689
|
return setShowVolumeSlider(true);
|
|
@@ -6666,13 +6714,13 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
|
|
|
6666
6714
|
}),
|
|
6667
6715
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
6668
6716
|
style: {
|
|
6669
|
-
width: showVolumeSlider ? "".concat(
|
|
6717
|
+
width: showVolumeSlider ? "".concat(68 * responsiveScale, "px") : "0px",
|
|
6670
6718
|
overflow: "hidden",
|
|
6671
6719
|
transition: "width 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
|
|
6672
6720
|
display: "flex",
|
|
6673
6721
|
alignItems: "center",
|
|
6674
|
-
paddingLeft: showVolumeSlider ? "
|
|
6675
|
-
paddingRight: showVolumeSlider ? "
|
|
6722
|
+
paddingLeft: showVolumeSlider ? "".concat(3 * responsiveScale, "px") : "0",
|
|
6723
|
+
paddingRight: showVolumeSlider ? "".concat(8 * responsiveScale, "px") : "0"
|
|
6676
6724
|
},
|
|
6677
6725
|
children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
|
|
6678
6726
|
style: {
|
|
@@ -6919,7 +6967,8 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
|
|
|
6919
6967
|
alignItems: "center",
|
|
6920
6968
|
background: "rgba(0, 0, 0, 0.6)",
|
|
6921
6969
|
borderRadius: "".concat(18 * responsiveScale, "px"),
|
|
6922
|
-
padding: "2px"
|
|
6970
|
+
padding: "2px",
|
|
6971
|
+
paddingRight: "".concat(8 * responsiveScale, "px")
|
|
6923
6972
|
},
|
|
6924
6973
|
onMouseEnter: function onMouseEnter() {
|
|
6925
6974
|
return setShowVolumeSlider(true);
|
|
@@ -6948,13 +6997,13 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
|
|
|
6948
6997
|
}),
|
|
6949
6998
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
6950
6999
|
style: {
|
|
6951
|
-
width: showVolumeSlider ? "".concat(
|
|
7000
|
+
width: showVolumeSlider ? "".concat(68 * responsiveScale, "px") : "0px",
|
|
6952
7001
|
overflow: "hidden",
|
|
6953
7002
|
transition: "width 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
|
|
6954
7003
|
display: "flex",
|
|
6955
7004
|
alignItems: "center",
|
|
6956
|
-
paddingLeft: showVolumeSlider ? "
|
|
6957
|
-
paddingRight: showVolumeSlider ? "
|
|
7005
|
+
paddingLeft: showVolumeSlider ? "".concat(3 * responsiveScale, "px") : "0",
|
|
7006
|
+
paddingRight: showVolumeSlider ? "".concat(10 * responsiveScale, "px") : "0"
|
|
6958
7007
|
},
|
|
6959
7008
|
children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
|
|
6960
7009
|
style: {
|