stormcloud-video-player 0.7.14 → 0.7.17
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 +422 -53
- package/lib/index.cjs.map +1 -1
- package/lib/index.d.cts +16 -0
- package/lib/index.d.ts +16 -0
- package/lib/index.js +424 -55
- package/lib/index.js.map +1 -1
- package/lib/player/StormcloudVideoPlayer.cjs +27 -6
- package/lib/player/StormcloudVideoPlayer.cjs.map +1 -1
- package/lib/player/StormcloudVideoPlayer.d.cts +3 -0
- package/lib/players/HlsPlayer.cjs +27 -6
- package/lib/players/HlsPlayer.cjs.map +1 -1
- package/lib/players/index.cjs +27 -6
- package/lib/players/index.cjs.map +1 -1
- package/lib/ui/OverlayRenderer.cjs +408 -37
- package/lib/ui/OverlayRenderer.cjs.map +1 -1
- package/lib/ui/StormcloudVideoPlayer.cjs +422 -53
- package/lib/ui/StormcloudVideoPlayer.cjs.map +1 -1
- package/lib/ui/StormcloudVideoPlayer.d.cts +5 -0
- package/lib/utils/overlays.d.cts +8 -0
- package/package.json +1 -1
package/lib/index.js
CHANGED
|
@@ -2765,6 +2765,7 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
|
|
|
2765
2765
|
this.maxTotalAdRequestsPerBreak = 20;
|
|
2766
2766
|
this.pendingAdBreak = null;
|
|
2767
2767
|
this.savedMutedStateBeforeAd = null;
|
|
2768
|
+
this.adLayerInitialized = false;
|
|
2768
2769
|
this.consecutiveFailures = 0;
|
|
2769
2770
|
this.maxConsecutiveFailures = 5;
|
|
2770
2771
|
this.lastAdRequestTime = 0;
|
|
@@ -3413,12 +3414,7 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
|
|
|
3413
3414
|
this.video.autoplay = !!this.config.autoplay;
|
|
3414
3415
|
this.video.muted = !!this.config.muted;
|
|
3415
3416
|
if (!this.config.disableAds) {
|
|
3416
|
-
this.
|
|
3417
|
-
if (!this.config.disableFiller) {
|
|
3418
|
-
this.ensureFillerVideo();
|
|
3419
|
-
}
|
|
3420
|
-
this.adLayer.updateOriginalMutedState(this.video.muted, this.video.volume);
|
|
3421
|
-
this.attachAdLayerEventListeners();
|
|
3417
|
+
this.initializeAdLayer();
|
|
3422
3418
|
}
|
|
3423
3419
|
this.timeUpdateHandler = function() {
|
|
3424
3420
|
_this.onTimeUpdate(_this.video.currentTime);
|
|
@@ -3519,6 +3515,31 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
|
|
|
3519
3515
|
return this.showAds;
|
|
3520
3516
|
}
|
|
3521
3517
|
},
|
|
3518
|
+
{
|
|
3519
|
+
key: "initializeAdLayer",
|
|
3520
|
+
value: function initializeAdLayer() {
|
|
3521
|
+
if (this.adLayerInitialized) return;
|
|
3522
|
+
this.adLayer.initialize();
|
|
3523
|
+
if (!this.config.disableFiller) {
|
|
3524
|
+
this.ensureFillerVideo();
|
|
3525
|
+
}
|
|
3526
|
+
this.adLayer.updateOriginalMutedState(this.video.muted, this.video.volume);
|
|
3527
|
+
this.attachAdLayerEventListeners();
|
|
3528
|
+
this.adLayerInitialized = true;
|
|
3529
|
+
}
|
|
3530
|
+
},
|
|
3531
|
+
{
|
|
3532
|
+
key: "setDisableAds",
|
|
3533
|
+
value: function setDisableAds(disabled) {
|
|
3534
|
+
this.config.disableAds = disabled;
|
|
3535
|
+
if (!disabled && this.attached) {
|
|
3536
|
+
this.initializeAdLayer();
|
|
3537
|
+
}
|
|
3538
|
+
if (this.config.debugAdTiming) {
|
|
3539
|
+
console.log("[StormcloudVideoPlayer] setDisableAds:", disabled);
|
|
3540
|
+
}
|
|
3541
|
+
}
|
|
3542
|
+
},
|
|
3522
3543
|
{
|
|
3523
3544
|
key: "syncMainContentAudioWhenVisible",
|
|
3524
3545
|
value: function syncMainContentAudioWhenVisible() {
|
|
@@ -5586,9 +5607,9 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
|
|
|
5586
5607
|
return StormcloudVideoPlayer;
|
|
5587
5608
|
}();
|
|
5588
5609
|
// src/ui/StormcloudVideoPlayer.tsx
|
|
5589
|
-
import { FaPlay, FaPause, FaVolumeUp, FaVolumeMute, FaVolumeDown, FaExpand, FaCompress, FaCog, FaTimes, FaCopy } from "react-icons/fa";
|
|
5610
|
+
import { FaPlay, FaPause, FaVolumeUp, FaVolumeMute, FaVolumeDown, FaExpand, FaCompress, FaCog, FaTimes, FaCopy, FaLayerGroup } from "react-icons/fa";
|
|
5590
5611
|
// src/ui/OverlayRenderer.tsx
|
|
5591
|
-
import React, { useEffect, useRef, useState, useCallback, useMemo } from "react";
|
|
5612
|
+
import React, { useEffect, useRef, useState, useCallback, useMemo, useId } from "react";
|
|
5592
5613
|
// src/utils/overlays.ts
|
|
5593
5614
|
var OVERLAY_API_BASE = "https://adstorm.co/api-adstorm-dev";
|
|
5594
5615
|
function timeStringToSeconds(timeStr) {
|
|
@@ -5753,60 +5774,303 @@ function TextOverlay(param) {
|
|
|
5753
5774
|
children: text
|
|
5754
5775
|
});
|
|
5755
5776
|
}
|
|
5777
|
+
function fetchRSSItems(rssUrl, maxItems) {
|
|
5778
|
+
return _async_to_generator(function() {
|
|
5779
|
+
var resp, data, parser, doc;
|
|
5780
|
+
return _ts_generator(this, function(_state) {
|
|
5781
|
+
switch(_state.label){
|
|
5782
|
+
case 0:
|
|
5783
|
+
return [
|
|
5784
|
+
4,
|
|
5785
|
+
fetch("https://api.allorigins.win/get?url=".concat(encodeURIComponent(rssUrl)))
|
|
5786
|
+
];
|
|
5787
|
+
case 1:
|
|
5788
|
+
resp = _state.sent();
|
|
5789
|
+
return [
|
|
5790
|
+
4,
|
|
5791
|
+
resp.json()
|
|
5792
|
+
];
|
|
5793
|
+
case 2:
|
|
5794
|
+
data = _state.sent();
|
|
5795
|
+
if (!data.contents) throw new Error("No content from RSS feed");
|
|
5796
|
+
parser = new DOMParser();
|
|
5797
|
+
doc = parser.parseFromString(data.contents, "text/xml");
|
|
5798
|
+
if (doc.querySelector("parsererror")) throw new Error("Invalid RSS XML");
|
|
5799
|
+
return [
|
|
5800
|
+
2,
|
|
5801
|
+
Array.from(doc.querySelectorAll("item")).map(function(item) {
|
|
5802
|
+
var _item_querySelector, _item_querySelector1, _item_querySelector2, _item_querySelector3, _item_querySelector4;
|
|
5803
|
+
return {
|
|
5804
|
+
title: (((_item_querySelector = item.querySelector("title")) === null || _item_querySelector === void 0 ? void 0 : _item_querySelector.textContent) || "").replace(/<[^>]*>/g, "").trim(),
|
|
5805
|
+
description: (((_item_querySelector1 = item.querySelector("description")) === null || _item_querySelector1 === void 0 ? void 0 : _item_querySelector1.textContent) || "").replace(/<[^>]*>/g, "").trim(),
|
|
5806
|
+
pubDate: ((_item_querySelector2 = item.querySelector("pubDate")) === null || _item_querySelector2 === void 0 ? void 0 : _item_querySelector2.textContent) || "",
|
|
5807
|
+
author: ((_item_querySelector3 = item.querySelector("author, dc\\:creator")) === null || _item_querySelector3 === void 0 ? void 0 : _item_querySelector3.textContent) || "",
|
|
5808
|
+
category: ((_item_querySelector4 = item.querySelector("category")) === null || _item_querySelector4 === void 0 ? void 0 : _item_querySelector4.textContent) || ""
|
|
5809
|
+
};
|
|
5810
|
+
}).filter(function(i) {
|
|
5811
|
+
return i.title;
|
|
5812
|
+
}).slice(0, maxItems)
|
|
5813
|
+
];
|
|
5814
|
+
}
|
|
5815
|
+
});
|
|
5816
|
+
})();
|
|
5817
|
+
}
|
|
5756
5818
|
function ScrollerOverlay(param) {
|
|
5757
5819
|
var overlay = param.overlay;
|
|
5758
|
-
var _ref, _ref1, _ref2, _ref3, _ref4;
|
|
5820
|
+
var _ref, _ref1, _ref2, _ref3, _ref4, _ref5, _ref6, _ref7, _ref8, _ref9, _ref10, _ref11, _ref12;
|
|
5759
5821
|
var cfg = overlay.scroller_config;
|
|
5760
|
-
var
|
|
5761
|
-
var
|
|
5762
|
-
var
|
|
5763
|
-
var
|
|
5822
|
+
var uid = useId().replace(/:/g, "");
|
|
5823
|
+
var _useState = _sliced_to_array(useState([]), 2), rssItems = _useState[0], setRssItems = _useState[1];
|
|
5824
|
+
var _useState1 = _sliced_to_array(useState(false), 2), rssLoading = _useState1[0], setRssLoading = _useState1[1];
|
|
5825
|
+
var rssUrl = (cfg === null || cfg === void 0 ? void 0 : cfg.rss_url) || "";
|
|
5826
|
+
var maxItems = (_ref = cfg === null || cfg === void 0 ? void 0 : cfg.max_items) !== null && _ref !== void 0 ? _ref : 10;
|
|
5827
|
+
var autoRefresh = (cfg === null || cfg === void 0 ? void 0 : cfg.auto_refresh) !== false;
|
|
5828
|
+
var updateInterval = (_ref1 = cfg === null || cfg === void 0 ? void 0 : cfg.update_interval) !== null && _ref1 !== void 0 ? _ref1 : 5;
|
|
5829
|
+
useEffect(function() {
|
|
5830
|
+
if (!rssUrl || (cfg === null || cfg === void 0 ? void 0 : cfg.use_custom_text) && (cfg === null || cfg === void 0 ? void 0 : cfg.custom_text)) return;
|
|
5831
|
+
var cancelled = false;
|
|
5832
|
+
setRssLoading(true);
|
|
5833
|
+
fetchRSSItems(rssUrl, maxItems).then(function(items) {
|
|
5834
|
+
if (!cancelled) setRssItems(items);
|
|
5835
|
+
}).catch(function() {}).finally(function() {
|
|
5836
|
+
if (!cancelled) setRssLoading(false);
|
|
5837
|
+
});
|
|
5838
|
+
return function() {
|
|
5839
|
+
cancelled = true;
|
|
5840
|
+
};
|
|
5841
|
+
}, [
|
|
5842
|
+
rssUrl,
|
|
5843
|
+
maxItems,
|
|
5844
|
+
cfg === null || cfg === void 0 ? void 0 : cfg.use_custom_text,
|
|
5845
|
+
cfg === null || cfg === void 0 ? void 0 : cfg.custom_text
|
|
5846
|
+
]);
|
|
5847
|
+
useEffect(function() {
|
|
5848
|
+
if (!rssUrl || !autoRefresh || (cfg === null || cfg === void 0 ? void 0 : cfg.use_custom_text) && (cfg === null || cfg === void 0 ? void 0 : cfg.custom_text)) return;
|
|
5849
|
+
var interval = setInterval(function() {
|
|
5850
|
+
fetchRSSItems(rssUrl, maxItems).then(setRssItems).catch(function() {});
|
|
5851
|
+
}, updateInterval * 60 * 1e3);
|
|
5852
|
+
return function() {
|
|
5853
|
+
return clearInterval(interval);
|
|
5854
|
+
};
|
|
5855
|
+
}, [
|
|
5856
|
+
rssUrl,
|
|
5857
|
+
autoRefresh,
|
|
5858
|
+
updateInterval,
|
|
5859
|
+
maxItems,
|
|
5860
|
+
cfg === null || cfg === void 0 ? void 0 : cfg.use_custom_text,
|
|
5861
|
+
cfg === null || cfg === void 0 ? void 0 : cfg.custom_text
|
|
5862
|
+
]);
|
|
5863
|
+
var sep = (_ref2 = cfg === null || cfg === void 0 ? void 0 : cfg.separator_char) !== null && _ref2 !== void 0 ? _ref2 : "\u25C6";
|
|
5864
|
+
var segments;
|
|
5865
|
+
if ((cfg === null || cfg === void 0 ? void 0 : cfg.use_custom_text) && (cfg === null || cfg === void 0 ? void 0 : cfg.custom_text)) {
|
|
5866
|
+
segments = [
|
|
5867
|
+
cfg.custom_text
|
|
5868
|
+
];
|
|
5869
|
+
} else if (rssItems.length > 0) {
|
|
5870
|
+
segments = rssItems.map(function(item) {
|
|
5871
|
+
var parts = [];
|
|
5872
|
+
if ((cfg === null || cfg === void 0 ? void 0 : cfg.show_title) !== false && item.title) parts.push(item.title);
|
|
5873
|
+
if ((cfg === null || cfg === void 0 ? void 0 : cfg.show_description) && item.description) parts.push(item.description);
|
|
5874
|
+
if ((cfg === null || cfg === void 0 ? void 0 : cfg.show_timestamp) && item.pubDate) {
|
|
5875
|
+
try {
|
|
5876
|
+
parts.push(new Date(item.pubDate).toLocaleDateString());
|
|
5877
|
+
} catch (unused) {}
|
|
5878
|
+
}
|
|
5879
|
+
if ((cfg === null || cfg === void 0 ? void 0 : cfg.show_author) && item.author) parts.push("— ".concat(item.author));
|
|
5880
|
+
if ((cfg === null || cfg === void 0 ? void 0 : cfg.show_category) && item.category) parts.push("[".concat(item.category, "]"));
|
|
5881
|
+
return parts.join(" ");
|
|
5882
|
+
});
|
|
5883
|
+
} else if (rssLoading) {
|
|
5884
|
+
segments = [
|
|
5885
|
+
"Loading feed\u2026"
|
|
5886
|
+
];
|
|
5887
|
+
} else if (overlay.content) {
|
|
5888
|
+
segments = [
|
|
5889
|
+
overlay.content
|
|
5890
|
+
];
|
|
5891
|
+
} else {
|
|
5892
|
+
segments = rssUrl ? [
|
|
5893
|
+
"Fetching RSS feed\u2026"
|
|
5894
|
+
] : [
|
|
5895
|
+
"RSS Ticker"
|
|
5896
|
+
];
|
|
5897
|
+
}
|
|
5898
|
+
var scrollSpeed = (_ref3 = cfg === null || cfg === void 0 ? void 0 : cfg.scroll_speed) !== null && _ref3 !== void 0 ? _ref3 : 40;
|
|
5899
|
+
var direction = (_ref4 = cfg === null || cfg === void 0 ? void 0 : cfg.direction) !== null && _ref4 !== void 0 ? _ref4 : "left";
|
|
5900
|
+
var fontSize = (_ref5 = cfg === null || cfg === void 0 ? void 0 : cfg.font_size) !== null && _ref5 !== void 0 ? _ref5 : 15;
|
|
5764
5901
|
var fontFamily = (cfg === null || cfg === void 0 ? void 0 : cfg.font_family) || "Roboto, 'Segoe UI', Arial, sans-serif";
|
|
5765
|
-
var fontWeight = (cfg === null || cfg === void 0 ? void 0 : cfg.font_weight) || "
|
|
5902
|
+
var fontWeight = (cfg === null || cfg === void 0 ? void 0 : cfg.font_weight) || "700";
|
|
5766
5903
|
var textColor = (cfg === null || cfg === void 0 ? void 0 : cfg.text_color) || "#ffffff";
|
|
5767
|
-
var bgColor = (cfg === null || cfg === void 0 ? void 0 : cfg.background_color) || "
|
|
5768
|
-
var bgOpacity = (cfg === null || cfg === void 0 ? void 0 : cfg.background_opacity) !== void 0 ? cfg.background_opacity / 100 : 0;
|
|
5769
|
-
var
|
|
5770
|
-
var
|
|
5771
|
-
var
|
|
5772
|
-
var
|
|
5773
|
-
var
|
|
5904
|
+
var bgColor = (cfg === null || cfg === void 0 ? void 0 : cfg.background_color) || "#0d0d1a";
|
|
5905
|
+
var bgOpacity = (cfg === null || cfg === void 0 ? void 0 : cfg.background_opacity) !== void 0 ? cfg.background_opacity / 100 : 0.95;
|
|
5906
|
+
var borderRadius = (_ref6 = cfg === null || cfg === void 0 ? void 0 : cfg.border_radius) !== null && _ref6 !== void 0 ? _ref6 : 0;
|
|
5907
|
+
var itemSpacing = (_ref7 = cfg === null || cfg === void 0 ? void 0 : cfg.item_spacing) !== null && _ref7 !== void 0 ? _ref7 : 60;
|
|
5908
|
+
var label = (_ref8 = cfg === null || cfg === void 0 ? void 0 : cfg.label) !== null && _ref8 !== void 0 ? _ref8 : "NEWS";
|
|
5909
|
+
var labelLine2 = (_ref9 = cfg === null || cfg === void 0 ? void 0 : cfg.label_line2) !== null && _ref9 !== void 0 ? _ref9 : "";
|
|
5910
|
+
var labelColor = (_ref10 = cfg === null || cfg === void 0 ? void 0 : cfg.label_color) !== null && _ref10 !== void 0 ? _ref10 : "#f97316";
|
|
5911
|
+
var labelTextColor = (_ref11 = cfg === null || cfg === void 0 ? void 0 : cfg.label_text_color) !== null && _ref11 !== void 0 ? _ref11 : "#ffffff";
|
|
5912
|
+
var accentColor = (_ref12 = cfg === null || cfg === void 0 ? void 0 : cfg.accent_color) !== null && _ref12 !== void 0 ? _ref12 : labelColor;
|
|
5913
|
+
var showAccentLine = (cfg === null || cfg === void 0 ? void 0 : cfg.show_accent_line) !== false;
|
|
5914
|
+
var isHorizontal = direction === "left" || direction === "right";
|
|
5774
5915
|
var isReverse = direction === "right" || direction === "down";
|
|
5775
|
-
var
|
|
5776
|
-
var
|
|
5777
|
-
var
|
|
5916
|
+
var fullText = segments.join(" ".concat(sep, " "));
|
|
5917
|
+
var durationSec = Math.max(6, fullText.length * 9 / scrollSpeed);
|
|
5918
|
+
var animId = "sc-ticker-".concat(overlay.id, "-").concat(uid);
|
|
5919
|
+
var keyframes = isHorizontal ? "@keyframes ".concat(animId, " {\n ").concat(isReverse ? "0% { transform: translateX(-50%); } 100% { transform: translateX(0%); }" : "0% { transform: translateX(0); } 100% { transform: translateX(-50%); }", "\n }") : "@keyframes ".concat(animId, " {\n ").concat(isReverse ? "0% { transform: translateY(-50%); } 100% { transform: translateY(0%); }" : "0% { transform: translateY(0); } 100% { transform: translateY(-50%); }", "\n }");
|
|
5778
5920
|
return /* @__PURE__ */ jsxs(Fragment, {
|
|
5779
5921
|
children: [
|
|
5780
5922
|
/* @__PURE__ */ jsx("style", {
|
|
5781
5923
|
children: keyframes
|
|
5782
5924
|
}),
|
|
5783
|
-
/* @__PURE__ */
|
|
5925
|
+
/* @__PURE__ */ jsxs("div", {
|
|
5784
5926
|
style: {
|
|
5785
5927
|
width: "100%",
|
|
5786
5928
|
height: "100%",
|
|
5787
|
-
overflow: "hidden",
|
|
5788
5929
|
display: "flex",
|
|
5789
|
-
|
|
5790
|
-
|
|
5791
|
-
border: borderWidth > 0 ? "".concat(borderWidth, "px solid ").concat(borderColor) : void 0,
|
|
5930
|
+
flexDirection: "column",
|
|
5931
|
+
overflow: "hidden",
|
|
5792
5932
|
borderRadius: borderRadius > 0 ? "".concat(borderRadius, "px") : void 0,
|
|
5793
|
-
|
|
5794
|
-
|
|
5795
|
-
|
|
5933
|
+
backgroundColor: "rgba(".concat(hexToRgb(bgColor), ", ").concat(bgOpacity, ")"),
|
|
5934
|
+
fontFamily: fontFamily,
|
|
5935
|
+
fontSize: "".concat(fontSize, "px"),
|
|
5936
|
+
fontWeight: fontWeight,
|
|
5937
|
+
color: textColor,
|
|
5938
|
+
pointerEvents: "none",
|
|
5939
|
+
userSelect: "none"
|
|
5796
5940
|
},
|
|
5797
|
-
children:
|
|
5798
|
-
|
|
5799
|
-
|
|
5800
|
-
|
|
5801
|
-
|
|
5802
|
-
|
|
5803
|
-
|
|
5804
|
-
|
|
5805
|
-
|
|
5806
|
-
|
|
5807
|
-
|
|
5808
|
-
|
|
5809
|
-
|
|
5941
|
+
children: [
|
|
5942
|
+
showAccentLine && /* @__PURE__ */ jsx("div", {
|
|
5943
|
+
style: {
|
|
5944
|
+
height: 3,
|
|
5945
|
+
background: accentColor,
|
|
5946
|
+
flexShrink: 0,
|
|
5947
|
+
width: "100%"
|
|
5948
|
+
}
|
|
5949
|
+
}),
|
|
5950
|
+
/* @__PURE__ */ jsxs("div", {
|
|
5951
|
+
style: {
|
|
5952
|
+
display: "flex",
|
|
5953
|
+
flex: 1,
|
|
5954
|
+
overflow: "hidden",
|
|
5955
|
+
minHeight: 0
|
|
5956
|
+
},
|
|
5957
|
+
children: [
|
|
5958
|
+
label && /* @__PURE__ */ jsxs("div", {
|
|
5959
|
+
style: {
|
|
5960
|
+
background: labelColor,
|
|
5961
|
+
color: labelTextColor,
|
|
5962
|
+
padding: "0 14px",
|
|
5963
|
+
display: "flex",
|
|
5964
|
+
flexDirection: "column",
|
|
5965
|
+
alignItems: "center",
|
|
5966
|
+
justifyContent: "center",
|
|
5967
|
+
flexShrink: 0,
|
|
5968
|
+
minWidth: 72,
|
|
5969
|
+
textAlign: "center",
|
|
5970
|
+
gap: 1
|
|
5971
|
+
},
|
|
5972
|
+
children: [
|
|
5973
|
+
/* @__PURE__ */ jsx("span", {
|
|
5974
|
+
style: {
|
|
5975
|
+
fontWeight: 800,
|
|
5976
|
+
fontSize: "0.82em",
|
|
5977
|
+
letterSpacing: "0.05em",
|
|
5978
|
+
lineHeight: 1.1,
|
|
5979
|
+
textTransform: "uppercase",
|
|
5980
|
+
whiteSpace: "nowrap"
|
|
5981
|
+
},
|
|
5982
|
+
children: label
|
|
5983
|
+
}),
|
|
5984
|
+
labelLine2 && /* @__PURE__ */ jsx("span", {
|
|
5985
|
+
style: {
|
|
5986
|
+
fontWeight: 500,
|
|
5987
|
+
fontSize: "0.62em",
|
|
5988
|
+
letterSpacing: "0.03em",
|
|
5989
|
+
lineHeight: 1.1,
|
|
5990
|
+
opacity: 0.85,
|
|
5991
|
+
whiteSpace: "nowrap"
|
|
5992
|
+
},
|
|
5993
|
+
children: labelLine2
|
|
5994
|
+
})
|
|
5995
|
+
]
|
|
5996
|
+
}),
|
|
5997
|
+
label && /* @__PURE__ */ jsx("div", {
|
|
5998
|
+
style: {
|
|
5999
|
+
width: 3,
|
|
6000
|
+
background: accentColor,
|
|
6001
|
+
flexShrink: 0
|
|
6002
|
+
}
|
|
6003
|
+
}),
|
|
6004
|
+
/* @__PURE__ */ jsx("div", {
|
|
6005
|
+
style: {
|
|
6006
|
+
flex: 1,
|
|
6007
|
+
overflow: "hidden",
|
|
6008
|
+
position: "relative",
|
|
6009
|
+
display: "flex",
|
|
6010
|
+
alignItems: "center"
|
|
6011
|
+
},
|
|
6012
|
+
children: isHorizontal ? /* @__PURE__ */ jsx("div", {
|
|
6013
|
+
style: {
|
|
6014
|
+
display: "inline-flex",
|
|
6015
|
+
whiteSpace: "nowrap",
|
|
6016
|
+
animation: "".concat(animId, " ").concat(durationSec, "s linear infinite"),
|
|
6017
|
+
willChange: "transform"
|
|
6018
|
+
},
|
|
6019
|
+
children: [
|
|
6020
|
+
0,
|
|
6021
|
+
1
|
|
6022
|
+
].map(function(copy) {
|
|
6023
|
+
return /* @__PURE__ */ jsx("span", {
|
|
6024
|
+
style: {
|
|
6025
|
+
paddingRight: "".concat(itemSpacing, "px")
|
|
6026
|
+
},
|
|
6027
|
+
children: segments.map(function(seg, i) {
|
|
6028
|
+
return /* @__PURE__ */ jsxs(React.Fragment, {
|
|
6029
|
+
children: [
|
|
6030
|
+
i > 0 && /* @__PURE__ */ jsx("span", {
|
|
6031
|
+
style: {
|
|
6032
|
+
opacity: 0.5,
|
|
6033
|
+
margin: "0 8px"
|
|
6034
|
+
},
|
|
6035
|
+
children: sep
|
|
6036
|
+
}),
|
|
6037
|
+
/* @__PURE__ */ jsx("span", {
|
|
6038
|
+
style: {
|
|
6039
|
+
textShadow: "0 1px 3px rgba(0,0,0,0.6)"
|
|
6040
|
+
},
|
|
6041
|
+
children: seg
|
|
6042
|
+
})
|
|
6043
|
+
]
|
|
6044
|
+
}, i);
|
|
6045
|
+
})
|
|
6046
|
+
}, copy);
|
|
6047
|
+
})
|
|
6048
|
+
}) : /* @__PURE__ */ jsx("div", {
|
|
6049
|
+
style: {
|
|
6050
|
+
display: "flex",
|
|
6051
|
+
flexDirection: "column",
|
|
6052
|
+
whiteSpace: "nowrap",
|
|
6053
|
+
animation: "".concat(animId, " ").concat(durationSec, "s linear infinite"),
|
|
6054
|
+
willChange: "transform"
|
|
6055
|
+
},
|
|
6056
|
+
children: [
|
|
6057
|
+
0,
|
|
6058
|
+
1
|
|
6059
|
+
].map(function(copy) {
|
|
6060
|
+
return segments.map(function(seg, i) {
|
|
6061
|
+
return /* @__PURE__ */ jsx("div", {
|
|
6062
|
+
style: {
|
|
6063
|
+
paddingBottom: "".concat(itemSpacing / 4, "px")
|
|
6064
|
+
},
|
|
6065
|
+
children: seg
|
|
6066
|
+
}, "".concat(copy, "-").concat(i));
|
|
6067
|
+
});
|
|
6068
|
+
})
|
|
6069
|
+
})
|
|
6070
|
+
})
|
|
6071
|
+
]
|
|
6072
|
+
})
|
|
6073
|
+
]
|
|
5810
6074
|
})
|
|
5811
6075
|
]
|
|
5812
6076
|
});
|
|
@@ -6957,7 +7221,7 @@ var PANEL_BASE_RIGHT_OFFSET = 10;
|
|
|
6957
7221
|
var StormcloudVideoPlayerComponent = React2.memo(function(props) {
|
|
6958
7222
|
var _ref;
|
|
6959
7223
|
var _aiLiveContext_context;
|
|
6960
|
-
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, swirlProjectId = props.swirlProjectId, restVideoAttrs = _object_without_properties(props, [
|
|
7224
|
+
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, swirlProjectId = props.swirlProjectId, disableOverlays = props.disableOverlays, showAdsControl = props.showAdsControl, showOverlaysControl = props.showOverlaysControl, showAiContextControl = props.showAiContextControl, showDebugControl = props.showDebugControl, restVideoAttrs = _object_without_properties(props, [
|
|
6961
7225
|
"src",
|
|
6962
7226
|
"autoplay",
|
|
6963
7227
|
"muted",
|
|
@@ -6985,7 +7249,12 @@ var StormcloudVideoPlayerComponent = React2.memo(function(props) {
|
|
|
6985
7249
|
"minSegmentsBeforePlay",
|
|
6986
7250
|
"disableAds",
|
|
6987
7251
|
"disableFiller",
|
|
6988
|
-
"swirlProjectId"
|
|
7252
|
+
"swirlProjectId",
|
|
7253
|
+
"disableOverlays",
|
|
7254
|
+
"showAdsControl",
|
|
7255
|
+
"showOverlaysControl",
|
|
7256
|
+
"showAiContextControl",
|
|
7257
|
+
"showDebugControl"
|
|
6989
7258
|
]);
|
|
6990
7259
|
var videoRef = useRef2(null);
|
|
6991
7260
|
var playerRef = useRef2(null);
|
|
@@ -7021,12 +7290,14 @@ var StormcloudVideoPlayerComponent = React2.memo(function(props) {
|
|
|
7021
7290
|
var _React2_useState21 = _sliced_to_array(React2.useState(false), 2), showDebugPanel = _React2_useState21[0], setShowDebugPanel = _React2_useState21[1];
|
|
7022
7291
|
var _React2_useState22 = _sliced_to_array(React2.useState([]), 2), debugMarkers = _React2_useState22[0], setDebugMarkers = _React2_useState22[1];
|
|
7023
7292
|
var _React2_useState23 = _sliced_to_array(React2.useState(false), 2), showAiPanel = _React2_useState23[0], setShowAiPanel = _React2_useState23[1];
|
|
7024
|
-
var _React2_useState24 = _sliced_to_array(React2.useState(
|
|
7293
|
+
var _React2_useState24 = _sliced_to_array(React2.useState(disableAds !== null && disableAds !== void 0 ? disableAds : false), 2), adsDisabled = _React2_useState24[0], setAdsDisabled = _React2_useState24[1];
|
|
7294
|
+
var _React2_useState25 = _sliced_to_array(React2.useState(disableOverlays !== null && disableOverlays !== void 0 ? disableOverlays : false), 2), overlaysDisabled = _React2_useState25[0], setOverlaysDisabled = _React2_useState25[1];
|
|
7295
|
+
var _React2_useState26 = _sliced_to_array(React2.useState({
|
|
7025
7296
|
context: null,
|
|
7026
7297
|
isLoading: false,
|
|
7027
7298
|
error: null,
|
|
7028
7299
|
lastPolledAt: null
|
|
7029
|
-
}), 2), aiLiveContext =
|
|
7300
|
+
}), 2), aiLiveContext = _React2_useState26[0], setAiLiveContext = _React2_useState26[1];
|
|
7030
7301
|
var getResponsiveScale = function getResponsiveScale() {
|
|
7031
7302
|
if (viewportWidth < 480) return 0.7;
|
|
7032
7303
|
if (viewportWidth < 768) return 0.8;
|
|
@@ -7701,7 +7972,7 @@ var StormcloudVideoPlayerComponent = React2.memo(function(props) {
|
|
|
7701
7972
|
}, restVideoAttrs), {
|
|
7702
7973
|
children: children
|
|
7703
7974
|
})),
|
|
7704
|
-
overlays.length > 0 && !adStatus.showAds && /* @__PURE__ */ jsx2(OverlayRenderer, {
|
|
7975
|
+
overlays.length > 0 && !adStatus.showAds && !overlaysDisabled && /* @__PURE__ */ jsx2(OverlayRenderer, {
|
|
7705
7976
|
overlays: overlays,
|
|
7706
7977
|
currentTime: currentTime,
|
|
7707
7978
|
videoRef: videoRef,
|
|
@@ -8513,7 +8784,54 @@ var StormcloudVideoPlayerComponent = React2.memo(function(props) {
|
|
|
8513
8784
|
gap: "".concat(8 * responsiveScale, "px")
|
|
8514
8785
|
},
|
|
8515
8786
|
children: [
|
|
8516
|
-
|
|
8787
|
+
(showAdsControl !== null && showAdsControl !== void 0 ? showAdsControl : true) && /* @__PURE__ */ jsx2("button", {
|
|
8788
|
+
className: "sc-ctrl-btn",
|
|
8789
|
+
onClick: function onClick() {
|
|
8790
|
+
var _playerRef_current;
|
|
8791
|
+
var next = !adsDisabled;
|
|
8792
|
+
setAdsDisabled(next);
|
|
8793
|
+
(_playerRef_current = playerRef.current) === null || _playerRef_current === void 0 ? void 0 : _playerRef_current.setDisableAds(next);
|
|
8794
|
+
resetControlsTimer();
|
|
8795
|
+
},
|
|
8796
|
+
style: {
|
|
8797
|
+
padding: "".concat(8 * responsiveScale, "px"),
|
|
8798
|
+
borderRadius: "50%",
|
|
8799
|
+
minWidth: "".concat(36 * responsiveScale, "px"),
|
|
8800
|
+
minHeight: "".concat(36 * responsiveScale, "px"),
|
|
8801
|
+
background: adsDisabled ? "rgba(239, 68, 68, 0.28)" : "transparent",
|
|
8802
|
+
fontFamily: "'SF Mono', 'Cascadia Code', monospace",
|
|
8803
|
+
fontSize: "".concat(12 * responsiveScale, "px"),
|
|
8804
|
+
fontWeight: 700,
|
|
8805
|
+
letterSpacing: "0.03em",
|
|
8806
|
+
color: adsDisabled ? "rgba(252, 165, 165, 0.9)" : "rgba(255, 255, 255, 0.75)",
|
|
8807
|
+
textDecoration: adsDisabled ? "line-through" : "none"
|
|
8808
|
+
},
|
|
8809
|
+
title: adsDisabled ? "Enable ads" : "Disable ads",
|
|
8810
|
+
children: "AD"
|
|
8811
|
+
}),
|
|
8812
|
+
swirlProjectId && (showOverlaysControl !== null && showOverlaysControl !== void 0 ? showOverlaysControl : true) && /* @__PURE__ */ jsx2("button", {
|
|
8813
|
+
className: "sc-ctrl-btn",
|
|
8814
|
+
onClick: function onClick() {
|
|
8815
|
+
setOverlaysDisabled(function(prev) {
|
|
8816
|
+
return !prev;
|
|
8817
|
+
});
|
|
8818
|
+
resetControlsTimer();
|
|
8819
|
+
},
|
|
8820
|
+
style: {
|
|
8821
|
+
padding: "".concat(8 * responsiveScale, "px"),
|
|
8822
|
+
borderRadius: "50%",
|
|
8823
|
+
minWidth: "".concat(36 * responsiveScale, "px"),
|
|
8824
|
+
minHeight: "".concat(36 * responsiveScale, "px"),
|
|
8825
|
+
background: overlaysDisabled ? "rgba(239, 68, 68, 0.28)" : "transparent",
|
|
8826
|
+
color: overlaysDisabled ? "rgba(252, 165, 165, 0.9)" : "rgba(255, 255, 255, 0.75)",
|
|
8827
|
+
opacity: overlaysDisabled ? 1 : 0.9
|
|
8828
|
+
},
|
|
8829
|
+
title: overlaysDisabled ? "Enable overlays" : "Disable overlays",
|
|
8830
|
+
children: /* @__PURE__ */ jsx2(FaLayerGroup, {
|
|
8831
|
+
size: Math.max(14, 18 * responsiveScale)
|
|
8832
|
+
})
|
|
8833
|
+
}),
|
|
8834
|
+
swirlProjectId && (showAiContextControl !== null && showAiContextControl !== void 0 ? showAiContextControl : true) && /* @__PURE__ */ jsx2("button", {
|
|
8517
8835
|
className: "sc-ctrl-btn",
|
|
8518
8836
|
onClick: function onClick() {
|
|
8519
8837
|
setShowAiPanel(function(prev) {
|
|
@@ -8535,7 +8853,7 @@ var StormcloudVideoPlayerComponent = React2.memo(function(props) {
|
|
|
8535
8853
|
title: showAiPanel ? "Hide AI context" : "Show AI context",
|
|
8536
8854
|
children: "AI"
|
|
8537
8855
|
}),
|
|
8538
|
-
debugAdTiming && /* @__PURE__ */ jsx2("button", {
|
|
8856
|
+
debugAdTiming && (showDebugControl !== null && showDebugControl !== void 0 ? showDebugControl : true) && /* @__PURE__ */ jsx2("button", {
|
|
8539
8857
|
className: "sc-ctrl-btn",
|
|
8540
8858
|
onClick: function onClick() {
|
|
8541
8859
|
setShowDebugPanel(function(prev) {
|
|
@@ -8806,7 +9124,53 @@ var StormcloudVideoPlayerComponent = React2.memo(function(props) {
|
|
|
8806
9124
|
})
|
|
8807
9125
|
]
|
|
8808
9126
|
}),
|
|
8809
|
-
|
|
9127
|
+
(showAdsControl !== null && showAdsControl !== void 0 ? showAdsControl : true) && /* @__PURE__ */ jsx2("button", {
|
|
9128
|
+
className: "sc-ctrl-btn",
|
|
9129
|
+
onClick: function onClick() {
|
|
9130
|
+
var _playerRef_current;
|
|
9131
|
+
var next = !adsDisabled;
|
|
9132
|
+
setAdsDisabled(next);
|
|
9133
|
+
(_playerRef_current = playerRef.current) === null || _playerRef_current === void 0 ? void 0 : _playerRef_current.setDisableAds(next);
|
|
9134
|
+
resetControlsTimer();
|
|
9135
|
+
},
|
|
9136
|
+
style: {
|
|
9137
|
+
padding: "".concat(8 * responsiveScale, "px"),
|
|
9138
|
+
borderRadius: "50%",
|
|
9139
|
+
minWidth: "".concat(36 * responsiveScale, "px"),
|
|
9140
|
+
minHeight: "".concat(36 * responsiveScale, "px"),
|
|
9141
|
+
background: adsDisabled ? "rgba(239, 68, 68, 0.28)" : "rgba(0, 0, 0, 0.6)",
|
|
9142
|
+
fontFamily: "'SF Mono', 'Cascadia Code', monospace",
|
|
9143
|
+
fontSize: "".concat(12 * responsiveScale, "px"),
|
|
9144
|
+
fontWeight: 700,
|
|
9145
|
+
letterSpacing: "0.03em",
|
|
9146
|
+
color: adsDisabled ? "rgba(252, 165, 165, 0.9)" : "rgba(255, 255, 255, 0.75)",
|
|
9147
|
+
textDecoration: adsDisabled ? "line-through" : "none"
|
|
9148
|
+
},
|
|
9149
|
+
title: adsDisabled ? "Enable ads" : "Disable ads",
|
|
9150
|
+
children: "AD"
|
|
9151
|
+
}),
|
|
9152
|
+
swirlProjectId && (showOverlaysControl !== null && showOverlaysControl !== void 0 ? showOverlaysControl : true) && /* @__PURE__ */ jsx2("button", {
|
|
9153
|
+
className: "sc-ctrl-btn",
|
|
9154
|
+
onClick: function onClick() {
|
|
9155
|
+
setOverlaysDisabled(function(prev) {
|
|
9156
|
+
return !prev;
|
|
9157
|
+
});
|
|
9158
|
+
resetControlsTimer();
|
|
9159
|
+
},
|
|
9160
|
+
style: {
|
|
9161
|
+
padding: "".concat(8 * responsiveScale, "px"),
|
|
9162
|
+
borderRadius: "50%",
|
|
9163
|
+
minWidth: "".concat(36 * responsiveScale, "px"),
|
|
9164
|
+
minHeight: "".concat(36 * responsiveScale, "px"),
|
|
9165
|
+
background: overlaysDisabled ? "rgba(239, 68, 68, 0.28)" : "rgba(0, 0, 0, 0.6)",
|
|
9166
|
+
color: overlaysDisabled ? "rgba(252, 165, 165, 0.9)" : "rgba(255, 255, 255, 0.75)"
|
|
9167
|
+
},
|
|
9168
|
+
title: overlaysDisabled ? "Enable overlays" : "Disable overlays",
|
|
9169
|
+
children: /* @__PURE__ */ jsx2(FaLayerGroup, {
|
|
9170
|
+
size: Math.max(14, 18 * responsiveScale)
|
|
9171
|
+
})
|
|
9172
|
+
}),
|
|
9173
|
+
swirlProjectId && (showAiContextControl !== null && showAiContextControl !== void 0 ? showAiContextControl : true) && /* @__PURE__ */ jsx2("button", {
|
|
8810
9174
|
className: "sc-ctrl-btn",
|
|
8811
9175
|
onClick: function onClick() {
|
|
8812
9176
|
setShowAiPanel(function(prev) {
|
|
@@ -8828,7 +9192,7 @@ var StormcloudVideoPlayerComponent = React2.memo(function(props) {
|
|
|
8828
9192
|
title: showAiPanel ? "Hide AI context" : "Show AI context",
|
|
8829
9193
|
children: "AI"
|
|
8830
9194
|
}),
|
|
8831
|
-
debugAdTiming && /* @__PURE__ */ jsx2("button", {
|
|
9195
|
+
debugAdTiming && (showDebugControl !== null && showDebugControl !== void 0 ? showDebugControl : true) && /* @__PURE__ */ jsx2("button", {
|
|
8832
9196
|
className: "sc-ctrl-btn",
|
|
8833
9197
|
onClick: function onClick() {
|
|
8834
9198
|
setShowDebugPanel(function(prev) {
|
|
@@ -8930,7 +9294,12 @@ var StormcloudVideoPlayerComponent = React2.memo(function(props) {
|
|
|
8930
9294
|
"preload",
|
|
8931
9295
|
"poster",
|
|
8932
9296
|
"children",
|
|
8933
|
-
"swirlProjectId"
|
|
9297
|
+
"swirlProjectId",
|
|
9298
|
+
"disableOverlays",
|
|
9299
|
+
"showAdsControl",
|
|
9300
|
+
"showOverlaysControl",
|
|
9301
|
+
"showAiContextControl",
|
|
9302
|
+
"showDebugControl"
|
|
8934
9303
|
];
|
|
8935
9304
|
var _iteratorNormalCompletion1 = true, _didIteratorError1 = false, _iteratorError1 = undefined;
|
|
8936
9305
|
try {
|