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
|
@@ -3236,6 +3236,9 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
|
|
|
3236
3236
|
}
|
|
3237
3237
|
_this.adLayer.cancelPreload(token);
|
|
3238
3238
|
} else {
|
|
3239
|
+
_this.video.style.transition = "none";
|
|
3240
|
+
_this.video.style.opacity = "0";
|
|
3241
|
+
_this.video.style.visibility = "hidden";
|
|
3239
3242
|
if (!_this.config.singlePipelineMode) {
|
|
3240
3243
|
_this.showPlaceholderLayer();
|
|
3241
3244
|
}
|
|
@@ -3262,6 +3265,9 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
|
|
|
3262
3265
|
console.log("[StormcloudVideoPlayer] content_resume: skip pending bids, only", remainingNow1, "ms left");
|
|
3263
3266
|
}
|
|
3264
3267
|
} else {
|
|
3268
|
+
_this.video.style.transition = "none";
|
|
3269
|
+
_this.video.style.opacity = "0";
|
|
3270
|
+
_this.video.style.visibility = "hidden";
|
|
3265
3271
|
if (!_this.config.singlePipelineMode) {
|
|
3266
3272
|
_this.showPlaceholderLayer();
|
|
3267
3273
|
}
|
|
@@ -3291,17 +3297,10 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
|
|
|
3291
3297
|
_this.showPlaceholderLayer();
|
|
3292
3298
|
_this.adLayer.showPlaceholder();
|
|
3293
3299
|
} else {
|
|
3294
|
-
_this.
|
|
3295
|
-
|
|
3296
|
-
|
|
3297
|
-
|
|
3298
|
-
if (Math.abs(_this.video.volume - breakVolume) > 0.01) {
|
|
3299
|
-
_this.video.volume = breakVolume;
|
|
3300
|
-
}
|
|
3301
|
-
if (_this.video.paused) {
|
|
3302
|
-
var _this_video_play;
|
|
3303
|
-
(_this_video_play = _this.video.play()) === null || _this_video_play === void 0 ? void 0 : _this_video_play.catch(function() {});
|
|
3304
|
-
}
|
|
3300
|
+
_this.video.style.transition = "none";
|
|
3301
|
+
_this.video.style.opacity = "0";
|
|
3302
|
+
_this.video.style.visibility = "hidden";
|
|
3303
|
+
_this.adLayer.showPlaceholder();
|
|
3305
3304
|
}
|
|
3306
3305
|
_this.continuousFetchingActive = true;
|
|
3307
3306
|
_this.startContinuousFetchLoop();
|
|
@@ -3513,6 +3512,12 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
|
|
|
3513
3512
|
return this.showAds;
|
|
3514
3513
|
}
|
|
3515
3514
|
},
|
|
3515
|
+
{
|
|
3516
|
+
key: "isInAdBreak",
|
|
3517
|
+
value: function isInAdBreak() {
|
|
3518
|
+
return this.inAdBreak;
|
|
3519
|
+
}
|
|
3520
|
+
},
|
|
3516
3521
|
{
|
|
3517
3522
|
key: "initializeAdLayer",
|
|
3518
3523
|
value: function initializeAdLayer() {
|
|
@@ -7315,6 +7320,7 @@ var StormcloudVideoPlayerComponent = import_react2.default.memo(function(props)
|
|
|
7315
7320
|
var wrapperRef = (0, import_react2.useRef)(null);
|
|
7316
7321
|
var _import_react2_default_useState = _sliced_to_array(import_react2.default.useState({
|
|
7317
7322
|
showAds: false,
|
|
7323
|
+
inAdBreak: false,
|
|
7318
7324
|
currentIndex: 0,
|
|
7319
7325
|
totalAds: 0,
|
|
7320
7326
|
remainingSeconds: 0
|
|
@@ -7675,20 +7681,23 @@ var StormcloudVideoPlayerComponent = import_react2.default.memo(function(props)
|
|
|
7675
7681
|
if (!playerRef.current) return;
|
|
7676
7682
|
var checkAdStatus = function checkAdStatus() {
|
|
7677
7683
|
if (playerRef.current) {
|
|
7678
|
-
var
|
|
7684
|
+
var _ref;
|
|
7685
|
+
var _videoRef_current_dataset, _videoRef_current, _playerRef_current_isInAdBreak, _playerRef_current;
|
|
7679
7686
|
var showAdsFromMethod = playerRef.current.isShowingAds();
|
|
7680
7687
|
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";
|
|
7681
7688
|
var showAds = showAdsFromMethod || showAdsFromAttribute;
|
|
7689
|
+
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;
|
|
7682
7690
|
var currentIndex = playerRef.current.getCurrentAdIndex();
|
|
7683
7691
|
var totalAds = playerRef.current.getTotalAdsInBreak();
|
|
7684
7692
|
var remainingSeconds = playerRef.current.getRemainingAdSeconds();
|
|
7685
7693
|
setAdStatus(function(prev) {
|
|
7686
|
-
if (prev.showAds !== showAds || prev.currentIndex !== currentIndex || prev.totalAds !== totalAds || prev.remainingSeconds !== remainingSeconds) {
|
|
7694
|
+
if (prev.showAds !== showAds || prev.inAdBreak !== inAdBreak || prev.currentIndex !== currentIndex || prev.totalAds !== totalAds || prev.remainingSeconds !== remainingSeconds) {
|
|
7687
7695
|
if (showAds && !prev.showAds) {
|
|
7688
7696
|
setShowCenterPlay(false);
|
|
7689
7697
|
}
|
|
7690
7698
|
return {
|
|
7691
7699
|
showAds: showAds,
|
|
7700
|
+
inAdBreak: inAdBreak,
|
|
7692
7701
|
currentIndex: currentIndex,
|
|
7693
7702
|
totalAds: totalAds,
|
|
7694
7703
|
remainingSeconds: remainingSeconds
|
|
@@ -8342,7 +8351,7 @@ var StormcloudVideoPlayerComponent = import_react2.default.memo(function(props)
|
|
|
8342
8351
|
})
|
|
8343
8352
|
]
|
|
8344
8353
|
}),
|
|
8345
|
-
/* @__PURE__ */ (0, import_jsx_runtime2.
|
|
8354
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", {
|
|
8346
8355
|
className: "sc-ai-scroll",
|
|
8347
8356
|
style: {
|
|
8348
8357
|
padding: "12px",
|
|
@@ -8352,68 +8361,118 @@ var StormcloudVideoPlayerComponent = import_react2.default.memo(function(props)
|
|
|
8352
8361
|
display: "grid",
|
|
8353
8362
|
gap: "12px"
|
|
8354
8363
|
},
|
|
8355
|
-
children:
|
|
8356
|
-
|
|
8357
|
-
|
|
8358
|
-
|
|
8359
|
-
|
|
8360
|
-
|
|
8361
|
-
|
|
8362
|
-
|
|
8363
|
-
|
|
8364
|
-
|
|
8365
|
-
|
|
8366
|
-
|
|
8367
|
-
|
|
8368
|
-
|
|
8369
|
-
|
|
8370
|
-
|
|
8371
|
-
|
|
8372
|
-
|
|
8373
|
-
|
|
8374
|
-
|
|
8375
|
-
|
|
8376
|
-
|
|
8377
|
-
|
|
8378
|
-
|
|
8379
|
-
|
|
8380
|
-
|
|
8381
|
-
|
|
8382
|
-
|
|
8383
|
-
|
|
8384
|
-
|
|
8385
|
-
|
|
8386
|
-
|
|
8387
|
-
|
|
8388
|
-
|
|
8389
|
-
|
|
8390
|
-
|
|
8391
|
-
|
|
8392
|
-
|
|
8393
|
-
|
|
8394
|
-
|
|
8395
|
-
|
|
8396
|
-
|
|
8397
|
-
|
|
8398
|
-
|
|
8399
|
-
|
|
8400
|
-
|
|
8401
|
-
|
|
8402
|
-
|
|
8403
|
-
|
|
8404
|
-
|
|
8405
|
-
|
|
8406
|
-
|
|
8407
|
-
|
|
8408
|
-
|
|
8409
|
-
|
|
8410
|
-
|
|
8411
|
-
|
|
8412
|
-
|
|
8413
|
-
}
|
|
8414
|
-
|
|
8415
|
-
|
|
8416
|
-
|
|
8364
|
+
children: adStatus.inAdBreak ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", {
|
|
8365
|
+
style: {
|
|
8366
|
+
display: "flex",
|
|
8367
|
+
flexDirection: "column",
|
|
8368
|
+
alignItems: "center",
|
|
8369
|
+
justifyContent: "center",
|
|
8370
|
+
gap: "12px",
|
|
8371
|
+
padding: "24px 12px",
|
|
8372
|
+
borderRadius: "10px",
|
|
8373
|
+
border: "1px solid rgba(234, 179, 8, 0.5)",
|
|
8374
|
+
background: "linear-gradient(155deg, rgba(92, 64, 0, 0.45) 0%, rgba(17, 24, 39, 0.62) 100%)",
|
|
8375
|
+
boxShadow: "0 8px 24px rgba(234, 179, 8, 0.12)"
|
|
8376
|
+
},
|
|
8377
|
+
children: [
|
|
8378
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", {
|
|
8379
|
+
style: {
|
|
8380
|
+
width: "36px",
|
|
8381
|
+
height: "36px",
|
|
8382
|
+
borderRadius: "50%",
|
|
8383
|
+
background: "rgba(234, 179, 8, 0.18)",
|
|
8384
|
+
border: "2px solid rgba(234, 179, 8, 0.7)",
|
|
8385
|
+
display: "flex",
|
|
8386
|
+
alignItems: "center",
|
|
8387
|
+
justifyContent: "center",
|
|
8388
|
+
fontSize: "16px"
|
|
8389
|
+
},
|
|
8390
|
+
children: "\uD83D\uDCFA"
|
|
8391
|
+
}),
|
|
8392
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", {
|
|
8393
|
+
style: {
|
|
8394
|
+
fontSize: "13px",
|
|
8395
|
+
fontWeight: 700,
|
|
8396
|
+
color: "#fde68a",
|
|
8397
|
+
letterSpacing: "0.04em",
|
|
8398
|
+
textAlign: "center"
|
|
8399
|
+
},
|
|
8400
|
+
children: "Now Ad Playing"
|
|
8401
|
+
}),
|
|
8402
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", {
|
|
8403
|
+
style: {
|
|
8404
|
+
fontSize: "11px",
|
|
8405
|
+
color: "rgba(255,255,255,0.55)",
|
|
8406
|
+
textAlign: "center",
|
|
8407
|
+
lineHeight: "1.5"
|
|
8408
|
+
},
|
|
8409
|
+
children: "AI context will resume after the ad break."
|
|
8410
|
+
})
|
|
8411
|
+
]
|
|
8412
|
+
}) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, {
|
|
8413
|
+
children: [
|
|
8414
|
+
aiLiveContext.error && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", {
|
|
8415
|
+
style: {
|
|
8416
|
+
fontSize: "12px",
|
|
8417
|
+
color: "#fecaca",
|
|
8418
|
+
background: "rgba(220, 38, 38, 0.2)",
|
|
8419
|
+
border: "1px solid rgba(248, 113, 113, 0.5)",
|
|
8420
|
+
borderRadius: "10px",
|
|
8421
|
+
padding: "9px 10px"
|
|
8422
|
+
},
|
|
8423
|
+
children: aiLiveContext.error
|
|
8424
|
+
}),
|
|
8425
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", {
|
|
8426
|
+
style: {
|
|
8427
|
+
padding: "11px 12px",
|
|
8428
|
+
borderRadius: "10px",
|
|
8429
|
+
border: "1px solid rgba(236, 72, 153, 0.5)",
|
|
8430
|
+
background: "linear-gradient(155deg, rgba(88, 28, 135, 0.35) 0%, rgba(17, 24, 39, 0.62) 100%)",
|
|
8431
|
+
boxShadow: "0 8px 24px rgba(236, 72, 153, 0.12)"
|
|
8432
|
+
},
|
|
8433
|
+
children: [
|
|
8434
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", {
|
|
8435
|
+
style: {
|
|
8436
|
+
display: "flex",
|
|
8437
|
+
alignItems: "center",
|
|
8438
|
+
justifyContent: "space-between",
|
|
8439
|
+
gap: "8px",
|
|
8440
|
+
marginBottom: "7px"
|
|
8441
|
+
},
|
|
8442
|
+
children: [
|
|
8443
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", {
|
|
8444
|
+
style: {
|
|
8445
|
+
fontSize: "11px",
|
|
8446
|
+
fontWeight: 800,
|
|
8447
|
+
textTransform: "uppercase",
|
|
8448
|
+
letterSpacing: "0.1em",
|
|
8449
|
+
color: "#f9a8d4"
|
|
8450
|
+
},
|
|
8451
|
+
children: "AI Context"
|
|
8452
|
+
}),
|
|
8453
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", {
|
|
8454
|
+
style: {
|
|
8455
|
+
fontSize: "10px",
|
|
8456
|
+
color: "rgba(255,255,255,0.72)",
|
|
8457
|
+
fontFamily: "'SF Mono', 'Cascadia Code', monospace"
|
|
8458
|
+
},
|
|
8459
|
+
children: aiLiveContext.context ? formatAiRelativeTime(aiLiveContext.context.updated_at) : "--"
|
|
8460
|
+
})
|
|
8461
|
+
]
|
|
8462
|
+
}),
|
|
8463
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", {
|
|
8464
|
+
style: {
|
|
8465
|
+
fontSize: "13px",
|
|
8466
|
+
lineHeight: "1.58",
|
|
8467
|
+
color: "rgba(255,255,255,0.95)",
|
|
8468
|
+
whiteSpace: "pre-wrap"
|
|
8469
|
+
},
|
|
8470
|
+
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."
|
|
8471
|
+
})
|
|
8472
|
+
]
|
|
8473
|
+
})
|
|
8474
|
+
]
|
|
8475
|
+
})
|
|
8417
8476
|
})
|
|
8418
8477
|
]
|
|
8419
8478
|
}),
|