stormcloud-video-player 0.7.26 → 0.7.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 +135 -76
- package/lib/index.cjs.map +1 -1
- package/lib/index.d.cts +1 -0
- package/lib/index.d.ts +1 -0
- package/lib/index.js +135 -76
- package/lib/index.js.map +1 -1
- package/lib/player/StormcloudVideoPlayer.cjs +16 -11
- package/lib/player/StormcloudVideoPlayer.cjs.map +1 -1
- package/lib/player/StormcloudVideoPlayer.d.cts +1 -0
- package/lib/players/HlsPlayer.cjs +16 -11
- package/lib/players/HlsPlayer.cjs.map +1 -1
- package/lib/players/index.cjs +16 -11
- package/lib/players/index.cjs.map +1 -1
- package/lib/ui/StormcloudVideoPlayer.cjs +135 -76
- package/lib/ui/StormcloudVideoPlayer.cjs.map +1 -1
- package/package.json +1 -1
package/lib/index.cjs
CHANGED
|
@@ -3414,6 +3414,9 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
|
|
|
3414
3414
|
}
|
|
3415
3415
|
_this.adLayer.cancelPreload(token);
|
|
3416
3416
|
} else {
|
|
3417
|
+
_this.video.style.transition = "none";
|
|
3418
|
+
_this.video.style.opacity = "0";
|
|
3419
|
+
_this.video.style.visibility = "hidden";
|
|
3417
3420
|
if (!_this.config.singlePipelineMode) {
|
|
3418
3421
|
_this.showPlaceholderLayer();
|
|
3419
3422
|
}
|
|
@@ -3440,6 +3443,9 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
|
|
|
3440
3443
|
console.log("[StormcloudVideoPlayer] content_resume: skip pending bids, only", remainingNow1, "ms left");
|
|
3441
3444
|
}
|
|
3442
3445
|
} else {
|
|
3446
|
+
_this.video.style.transition = "none";
|
|
3447
|
+
_this.video.style.opacity = "0";
|
|
3448
|
+
_this.video.style.visibility = "hidden";
|
|
3443
3449
|
if (!_this.config.singlePipelineMode) {
|
|
3444
3450
|
_this.showPlaceholderLayer();
|
|
3445
3451
|
}
|
|
@@ -3469,17 +3475,10 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
|
|
|
3469
3475
|
_this.showPlaceholderLayer();
|
|
3470
3476
|
_this.adLayer.showPlaceholder();
|
|
3471
3477
|
} else {
|
|
3472
|
-
_this.
|
|
3473
|
-
|
|
3474
|
-
|
|
3475
|
-
|
|
3476
|
-
if (Math.abs(_this.video.volume - breakVolume) > 0.01) {
|
|
3477
|
-
_this.video.volume = breakVolume;
|
|
3478
|
-
}
|
|
3479
|
-
if (_this.video.paused) {
|
|
3480
|
-
var _this_video_play;
|
|
3481
|
-
(_this_video_play = _this.video.play()) === null || _this_video_play === void 0 ? void 0 : _this_video_play.catch(function() {});
|
|
3482
|
-
}
|
|
3478
|
+
_this.video.style.transition = "none";
|
|
3479
|
+
_this.video.style.opacity = "0";
|
|
3480
|
+
_this.video.style.visibility = "hidden";
|
|
3481
|
+
_this.adLayer.showPlaceholder();
|
|
3483
3482
|
}
|
|
3484
3483
|
_this.continuousFetchingActive = true;
|
|
3485
3484
|
_this.startContinuousFetchLoop();
|
|
@@ -3691,6 +3690,12 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
|
|
|
3691
3690
|
return this.showAds;
|
|
3692
3691
|
}
|
|
3693
3692
|
},
|
|
3693
|
+
{
|
|
3694
|
+
key: "isInAdBreak",
|
|
3695
|
+
value: function isInAdBreak() {
|
|
3696
|
+
return this.inAdBreak;
|
|
3697
|
+
}
|
|
3698
|
+
},
|
|
3694
3699
|
{
|
|
3695
3700
|
key: "initializeAdLayer",
|
|
3696
3701
|
value: function initializeAdLayer() {
|
|
@@ -7493,6 +7498,7 @@ var StormcloudVideoPlayerComponent = import_react2.default.memo(function(props)
|
|
|
7493
7498
|
var wrapperRef = (0, import_react2.useRef)(null);
|
|
7494
7499
|
var _import_react2_default_useState = _sliced_to_array(import_react2.default.useState({
|
|
7495
7500
|
showAds: false,
|
|
7501
|
+
inAdBreak: false,
|
|
7496
7502
|
currentIndex: 0,
|
|
7497
7503
|
totalAds: 0,
|
|
7498
7504
|
remainingSeconds: 0
|
|
@@ -7853,20 +7859,23 @@ var StormcloudVideoPlayerComponent = import_react2.default.memo(function(props)
|
|
|
7853
7859
|
if (!playerRef.current) return;
|
|
7854
7860
|
var checkAdStatus = function checkAdStatus() {
|
|
7855
7861
|
if (playerRef.current) {
|
|
7856
|
-
var
|
|
7862
|
+
var _ref;
|
|
7863
|
+
var _videoRef_current_dataset, _videoRef_current, _playerRef_current_isInAdBreak, _playerRef_current;
|
|
7857
7864
|
var showAdsFromMethod = playerRef.current.isShowingAds();
|
|
7858
7865
|
var showAdsFromAttribute = ((_videoRef_current = videoRef.current) === null || _videoRef_current === void 0 ? void 0 : (_videoRef_current_dataset = _videoRef_current.dataset) === null || _videoRef_current_dataset === void 0 ? void 0 : _videoRef_current_dataset.stormcloudAdPlaying) === "true";
|
|
7859
7866
|
var showAds = showAdsFromMethod || showAdsFromAttribute;
|
|
7867
|
+
var inAdBreak = (_ref = (_playerRef_current_isInAdBreak = (_playerRef_current = playerRef.current).isInAdBreak) === null || _playerRef_current_isInAdBreak === void 0 ? void 0 : _playerRef_current_isInAdBreak.call(_playerRef_current)) !== null && _ref !== void 0 ? _ref : showAds;
|
|
7860
7868
|
var currentIndex = playerRef.current.getCurrentAdIndex();
|
|
7861
7869
|
var totalAds = playerRef.current.getTotalAdsInBreak();
|
|
7862
7870
|
var remainingSeconds = playerRef.current.getRemainingAdSeconds();
|
|
7863
7871
|
setAdStatus(function(prev) {
|
|
7864
|
-
if (prev.showAds !== showAds || prev.currentIndex !== currentIndex || prev.totalAds !== totalAds || prev.remainingSeconds !== remainingSeconds) {
|
|
7872
|
+
if (prev.showAds !== showAds || prev.inAdBreak !== inAdBreak || prev.currentIndex !== currentIndex || prev.totalAds !== totalAds || prev.remainingSeconds !== remainingSeconds) {
|
|
7865
7873
|
if (showAds && !prev.showAds) {
|
|
7866
7874
|
setShowCenterPlay(false);
|
|
7867
7875
|
}
|
|
7868
7876
|
return {
|
|
7869
7877
|
showAds: showAds,
|
|
7878
|
+
inAdBreak: inAdBreak,
|
|
7870
7879
|
currentIndex: currentIndex,
|
|
7871
7880
|
totalAds: totalAds,
|
|
7872
7881
|
remainingSeconds: remainingSeconds
|
|
@@ -8520,7 +8529,7 @@ var StormcloudVideoPlayerComponent = import_react2.default.memo(function(props)
|
|
|
8520
8529
|
})
|
|
8521
8530
|
]
|
|
8522
8531
|
}),
|
|
8523
|
-
/* @__PURE__ */ (0, import_jsx_runtime2.
|
|
8532
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", {
|
|
8524
8533
|
className: "sc-ai-scroll",
|
|
8525
8534
|
style: {
|
|
8526
8535
|
padding: "12px",
|
|
@@ -8530,68 +8539,118 @@ var StormcloudVideoPlayerComponent = import_react2.default.memo(function(props)
|
|
|
8530
8539
|
display: "grid",
|
|
8531
8540
|
gap: "12px"
|
|
8532
8541
|
},
|
|
8533
|
-
children:
|
|
8534
|
-
|
|
8535
|
-
|
|
8536
|
-
|
|
8537
|
-
|
|
8538
|
-
|
|
8539
|
-
|
|
8540
|
-
|
|
8541
|
-
|
|
8542
|
-
|
|
8543
|
-
|
|
8544
|
-
|
|
8545
|
-
|
|
8546
|
-
|
|
8547
|
-
|
|
8548
|
-
|
|
8549
|
-
|
|
8550
|
-
|
|
8551
|
-
|
|
8552
|
-
|
|
8553
|
-
|
|
8554
|
-
|
|
8555
|
-
|
|
8556
|
-
|
|
8557
|
-
|
|
8558
|
-
|
|
8559
|
-
|
|
8560
|
-
|
|
8561
|
-
|
|
8562
|
-
|
|
8563
|
-
|
|
8564
|
-
|
|
8565
|
-
|
|
8566
|
-
|
|
8567
|
-
|
|
8568
|
-
|
|
8569
|
-
|
|
8570
|
-
|
|
8571
|
-
|
|
8572
|
-
|
|
8573
|
-
|
|
8574
|
-
|
|
8575
|
-
|
|
8576
|
-
|
|
8577
|
-
|
|
8578
|
-
|
|
8579
|
-
|
|
8580
|
-
|
|
8581
|
-
|
|
8582
|
-
|
|
8583
|
-
|
|
8584
|
-
|
|
8585
|
-
|
|
8586
|
-
|
|
8587
|
-
|
|
8588
|
-
|
|
8589
|
-
|
|
8590
|
-
|
|
8591
|
-
}
|
|
8592
|
-
|
|
8593
|
-
|
|
8594
|
-
|
|
8542
|
+
children: adStatus.inAdBreak ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", {
|
|
8543
|
+
style: {
|
|
8544
|
+
display: "flex",
|
|
8545
|
+
flexDirection: "column",
|
|
8546
|
+
alignItems: "center",
|
|
8547
|
+
justifyContent: "center",
|
|
8548
|
+
gap: "12px",
|
|
8549
|
+
padding: "24px 12px",
|
|
8550
|
+
borderRadius: "10px",
|
|
8551
|
+
border: "1px solid rgba(234, 179, 8, 0.5)",
|
|
8552
|
+
background: "linear-gradient(155deg, rgba(92, 64, 0, 0.45) 0%, rgba(17, 24, 39, 0.62) 100%)",
|
|
8553
|
+
boxShadow: "0 8px 24px rgba(234, 179, 8, 0.12)"
|
|
8554
|
+
},
|
|
8555
|
+
children: [
|
|
8556
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", {
|
|
8557
|
+
style: {
|
|
8558
|
+
width: "36px",
|
|
8559
|
+
height: "36px",
|
|
8560
|
+
borderRadius: "50%",
|
|
8561
|
+
background: "rgba(234, 179, 8, 0.18)",
|
|
8562
|
+
border: "2px solid rgba(234, 179, 8, 0.7)",
|
|
8563
|
+
display: "flex",
|
|
8564
|
+
alignItems: "center",
|
|
8565
|
+
justifyContent: "center",
|
|
8566
|
+
fontSize: "16px"
|
|
8567
|
+
},
|
|
8568
|
+
children: "\uD83D\uDCFA"
|
|
8569
|
+
}),
|
|
8570
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", {
|
|
8571
|
+
style: {
|
|
8572
|
+
fontSize: "13px",
|
|
8573
|
+
fontWeight: 700,
|
|
8574
|
+
color: "#fde68a",
|
|
8575
|
+
letterSpacing: "0.04em",
|
|
8576
|
+
textAlign: "center"
|
|
8577
|
+
},
|
|
8578
|
+
children: "Now Ad Playing"
|
|
8579
|
+
}),
|
|
8580
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", {
|
|
8581
|
+
style: {
|
|
8582
|
+
fontSize: "11px",
|
|
8583
|
+
color: "rgba(255,255,255,0.55)",
|
|
8584
|
+
textAlign: "center",
|
|
8585
|
+
lineHeight: "1.5"
|
|
8586
|
+
},
|
|
8587
|
+
children: "AI context will resume after the ad break."
|
|
8588
|
+
})
|
|
8589
|
+
]
|
|
8590
|
+
}) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, {
|
|
8591
|
+
children: [
|
|
8592
|
+
aiLiveContext.error && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", {
|
|
8593
|
+
style: {
|
|
8594
|
+
fontSize: "12px",
|
|
8595
|
+
color: "#fecaca",
|
|
8596
|
+
background: "rgba(220, 38, 38, 0.2)",
|
|
8597
|
+
border: "1px solid rgba(248, 113, 113, 0.5)",
|
|
8598
|
+
borderRadius: "10px",
|
|
8599
|
+
padding: "9px 10px"
|
|
8600
|
+
},
|
|
8601
|
+
children: aiLiveContext.error
|
|
8602
|
+
}),
|
|
8603
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", {
|
|
8604
|
+
style: {
|
|
8605
|
+
padding: "11px 12px",
|
|
8606
|
+
borderRadius: "10px",
|
|
8607
|
+
border: "1px solid rgba(236, 72, 153, 0.5)",
|
|
8608
|
+
background: "linear-gradient(155deg, rgba(88, 28, 135, 0.35) 0%, rgba(17, 24, 39, 0.62) 100%)",
|
|
8609
|
+
boxShadow: "0 8px 24px rgba(236, 72, 153, 0.12)"
|
|
8610
|
+
},
|
|
8611
|
+
children: [
|
|
8612
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", {
|
|
8613
|
+
style: {
|
|
8614
|
+
display: "flex",
|
|
8615
|
+
alignItems: "center",
|
|
8616
|
+
justifyContent: "space-between",
|
|
8617
|
+
gap: "8px",
|
|
8618
|
+
marginBottom: "7px"
|
|
8619
|
+
},
|
|
8620
|
+
children: [
|
|
8621
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", {
|
|
8622
|
+
style: {
|
|
8623
|
+
fontSize: "11px",
|
|
8624
|
+
fontWeight: 800,
|
|
8625
|
+
textTransform: "uppercase",
|
|
8626
|
+
letterSpacing: "0.1em",
|
|
8627
|
+
color: "#f9a8d4"
|
|
8628
|
+
},
|
|
8629
|
+
children: "AI Context"
|
|
8630
|
+
}),
|
|
8631
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", {
|
|
8632
|
+
style: {
|
|
8633
|
+
fontSize: "10px",
|
|
8634
|
+
color: "rgba(255,255,255,0.72)",
|
|
8635
|
+
fontFamily: "'SF Mono', 'Cascadia Code', monospace"
|
|
8636
|
+
},
|
|
8637
|
+
children: aiLiveContext.context ? formatAiRelativeTime(aiLiveContext.context.updated_at) : "--"
|
|
8638
|
+
})
|
|
8639
|
+
]
|
|
8640
|
+
}),
|
|
8641
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", {
|
|
8642
|
+
style: {
|
|
8643
|
+
fontSize: "13px",
|
|
8644
|
+
lineHeight: "1.58",
|
|
8645
|
+
color: "rgba(255,255,255,0.95)",
|
|
8646
|
+
whiteSpace: "pre-wrap"
|
|
8647
|
+
},
|
|
8648
|
+
children: (_ref = (_aiLiveContext_context = aiLiveContext.context) === null || _aiLiveContext_context === void 0 ? void 0 : _aiLiveContext_context.context) !== null && _ref !== void 0 ? _ref : aiLiveContext.isLoading ? "Analyzing live stream..." : "Waiting for AI context response."
|
|
8649
|
+
})
|
|
8650
|
+
]
|
|
8651
|
+
})
|
|
8652
|
+
]
|
|
8653
|
+
})
|
|
8595
8654
|
})
|
|
8596
8655
|
]
|
|
8597
8656
|
}),
|