stormcloud-video-player 0.7.5 → 0.7.7
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 +461 -29
- 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 +461 -29
- package/lib/index.js.map +1 -1
- package/lib/player/StormcloudVideoPlayer.cjs +44 -0
- package/lib/player/StormcloudVideoPlayer.cjs.map +1 -1
- package/lib/player/StormcloudVideoPlayer.d.cts +1 -0
- package/lib/players/HlsPlayer.cjs +44 -0
- package/lib/players/HlsPlayer.cjs.map +1 -1
- package/lib/players/index.cjs +44 -0
- package/lib/players/index.cjs.map +1 -1
- package/lib/ui/StormcloudVideoPlayer.cjs +461 -29
- package/lib/ui/StormcloudVideoPlayer.cjs.map +1 -1
- package/package.json +1 -1
- package/lib/types-BII_CKbE.d.cts +0 -105
package/lib/index.d.cts
CHANGED
package/lib/index.d.ts
CHANGED
package/lib/index.js
CHANGED
|
@@ -5926,6 +5926,50 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
|
|
|
5926
5926
|
return min;
|
|
5927
5927
|
}
|
|
5928
5928
|
},
|
|
5929
|
+
{
|
|
5930
|
+
key: "getCurrentHlsSegmentDurationMs",
|
|
5931
|
+
value: function getCurrentHlsSegmentDurationMs() {
|
|
5932
|
+
var fallbackMs = 4e3;
|
|
5933
|
+
if (this.nativeHlsMode) {
|
|
5934
|
+
return fallbackMs;
|
|
5935
|
+
}
|
|
5936
|
+
var hls = this.hls;
|
|
5937
|
+
if (!hls) return null;
|
|
5938
|
+
var levelCandidates = [
|
|
5939
|
+
hls.currentLevel,
|
|
5940
|
+
hls.nextLoadLevel,
|
|
5941
|
+
hls.loadLevel
|
|
5942
|
+
];
|
|
5943
|
+
var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
|
|
5944
|
+
try {
|
|
5945
|
+
for(var _iterator = levelCandidates[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true){
|
|
5946
|
+
var levelIndex = _step.value;
|
|
5947
|
+
var _hls_levels_levelIndex, _hls_levels;
|
|
5948
|
+
if (typeof levelIndex !== "number" || levelIndex < 0) continue;
|
|
5949
|
+
var details = (_hls_levels = hls.levels) === null || _hls_levels === void 0 ? void 0 : (_hls_levels_levelIndex = _hls_levels[levelIndex]) === null || _hls_levels_levelIndex === void 0 ? void 0 : _hls_levels_levelIndex.details;
|
|
5950
|
+
if (!details) continue;
|
|
5951
|
+
var targetDurationSec = typeof details.partTarget === "number" && details.partTarget > 0 ? details.partTarget : typeof details.targetduration === "number" && details.targetduration > 0 ? details.targetduration : void 0;
|
|
5952
|
+
if (targetDurationSec !== void 0) {
|
|
5953
|
+
return Math.max(800, Math.floor(targetDurationSec * 1e3));
|
|
5954
|
+
}
|
|
5955
|
+
}
|
|
5956
|
+
} catch (err) {
|
|
5957
|
+
_didIteratorError = true;
|
|
5958
|
+
_iteratorError = err;
|
|
5959
|
+
} finally{
|
|
5960
|
+
try {
|
|
5961
|
+
if (!_iteratorNormalCompletion && _iterator.return != null) {
|
|
5962
|
+
_iterator.return();
|
|
5963
|
+
}
|
|
5964
|
+
} finally{
|
|
5965
|
+
if (_didIteratorError) {
|
|
5966
|
+
throw _iteratorError;
|
|
5967
|
+
}
|
|
5968
|
+
}
|
|
5969
|
+
}
|
|
5970
|
+
return fallbackMs;
|
|
5971
|
+
}
|
|
5972
|
+
},
|
|
5929
5973
|
{
|
|
5930
5974
|
key: "videoElement",
|
|
5931
5975
|
get: function get() {
|
|
@@ -7102,7 +7146,12 @@ var CRITICAL_PROPS = [
|
|
|
7102
7146
|
var CONTROLS_HIDE_DELAY = 3e3;
|
|
7103
7147
|
var DEFAULT_PLAYER_ASPECT_RATIO = 16 / 9;
|
|
7104
7148
|
var DEBUG_PANEL_MARKER_LIMIT = 12;
|
|
7149
|
+
var AI_CONTEXT_FALLBACK_POLL_MS = 4e3;
|
|
7150
|
+
var AI_CONTEXT_MIN_POLL_MS = 800;
|
|
7151
|
+
var PANEL_BASE_RIGHT_OFFSET = 10;
|
|
7105
7152
|
var StormcloudVideoPlayerComponent = React2.memo(function(props) {
|
|
7153
|
+
var _ref;
|
|
7154
|
+
var _aiLiveContext_context, _aiLiveContext_context_keywords, _aiLiveContext_context1;
|
|
7106
7155
|
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, [
|
|
7107
7156
|
"src",
|
|
7108
7157
|
"autoplay",
|
|
@@ -7166,6 +7215,13 @@ var StormcloudVideoPlayerComponent = React2.memo(function(props) {
|
|
|
7166
7215
|
var _React2_useState20 = _sliced_to_array(React2.useState(DEFAULT_PLAYER_ASPECT_RATIO), 2), playerAspectRatio = _React2_useState20[0], setPlayerAspectRatio = _React2_useState20[1];
|
|
7167
7216
|
var _React2_useState21 = _sliced_to_array(React2.useState(false), 2), showDebugPanel = _React2_useState21[0], setShowDebugPanel = _React2_useState21[1];
|
|
7168
7217
|
var _React2_useState22 = _sliced_to_array(React2.useState([]), 2), debugMarkers = _React2_useState22[0], setDebugMarkers = _React2_useState22[1];
|
|
7218
|
+
var _React2_useState23 = _sliced_to_array(React2.useState(false), 2), showAiPanel = _React2_useState23[0], setShowAiPanel = _React2_useState23[1];
|
|
7219
|
+
var _React2_useState24 = _sliced_to_array(React2.useState({
|
|
7220
|
+
context: null,
|
|
7221
|
+
isLoading: false,
|
|
7222
|
+
error: null,
|
|
7223
|
+
lastPolledAt: null
|
|
7224
|
+
}), 2), aiLiveContext = _React2_useState24[0], setAiLiveContext = _React2_useState24[1];
|
|
7169
7225
|
var getResponsiveScale = function getResponsiveScale() {
|
|
7170
7226
|
if (viewportWidth < 480) return 0.7;
|
|
7171
7227
|
if (viewportWidth < 768) return 0.8;
|
|
@@ -7195,6 +7251,18 @@ var StormcloudVideoPlayerComponent = React2.memo(function(props) {
|
|
|
7195
7251
|
if (typeof obj.splice_command_type === "number") return "binary splice";
|
|
7196
7252
|
return "marker";
|
|
7197
7253
|
};
|
|
7254
|
+
var formatAiRelativeTime = function formatAiRelativeTime(timestamp) {
|
|
7255
|
+
var epochMs = Date.parse(timestamp);
|
|
7256
|
+
if (!Number.isFinite(epochMs)) return "unknown";
|
|
7257
|
+
var diffSec = Math.max(0, Math.floor((Date.now() - epochMs) / 1e3));
|
|
7258
|
+
if (diffSec < 5) return "just now";
|
|
7259
|
+
if (diffSec < 60) return "".concat(diffSec, "s ago");
|
|
7260
|
+
var diffMin = Math.floor(diffSec / 60);
|
|
7261
|
+
if (diffMin < 60) return "".concat(diffMin, "m ago");
|
|
7262
|
+
var diffHr = Math.floor(diffMin / 60);
|
|
7263
|
+
if (diffHr < 24) return "".concat(diffHr, "h ago");
|
|
7264
|
+
return "".concat(Math.floor(diffHr / 24), "d ago");
|
|
7265
|
+
};
|
|
7198
7266
|
var resetControlsTimer = useCallback2(function() {
|
|
7199
7267
|
if (controlsTimerRef.current) {
|
|
7200
7268
|
clearTimeout(controlsTimerRef.current);
|
|
@@ -7272,6 +7340,14 @@ var StormcloudVideoPlayerComponent = React2.memo(function(props) {
|
|
|
7272
7340
|
};
|
|
7273
7341
|
var isHlsStream = (src === null || src === void 0 ? void 0 : src.toLowerCase().includes(".m3u8")) || (src === null || src === void 0 ? void 0 : src.toLowerCase().includes("/hls/"));
|
|
7274
7342
|
var shouldShowEnhancedControls = showCustomControls && (isHlsStream ? allowNativeHls : true);
|
|
7343
|
+
var analyzerPanelWidth = Math.min(420, Math.max(320, viewportWidth * 0.41));
|
|
7344
|
+
var analyzerPanelHeight = isPortrait ? "52vh" : "420px";
|
|
7345
|
+
var analyzerPanelMaxHeight = "60vh";
|
|
7346
|
+
var panelGap = Math.max(8, 12 * responsiveScale);
|
|
7347
|
+
var shouldStackPanels = isPortrait || viewportWidth < 980;
|
|
7348
|
+
var debugPanelBottomOffset = shouldShowEnhancedControls ? Math.max(74, 92 * responsiveScale) : Math.max(52, 58 * responsiveScale);
|
|
7349
|
+
var panelBaseRight = PANEL_BASE_RIGHT_OFFSET * responsiveScale;
|
|
7350
|
+
var debugPanelRightOffset = showAiPanel && !shouldStackPanels ? panelBaseRight + analyzerPanelWidth + panelGap : panelBaseRight;
|
|
7275
7351
|
var criticalPropsKey = useMemo(function() {
|
|
7276
7352
|
return CRITICAL_PROPS.map(function(prop) {
|
|
7277
7353
|
return "".concat(prop, ":").concat(props[prop]);
|
|
@@ -7597,6 +7673,130 @@ var StormcloudVideoPlayerComponent = React2.memo(function(props) {
|
|
|
7597
7673
|
debugAdTiming,
|
|
7598
7674
|
criticalPropsKey
|
|
7599
7675
|
]);
|
|
7676
|
+
useEffect2(function() {
|
|
7677
|
+
if (!swirlProjectId) {
|
|
7678
|
+
setShowAiPanel(false);
|
|
7679
|
+
setAiLiveContext({
|
|
7680
|
+
context: null,
|
|
7681
|
+
isLoading: false,
|
|
7682
|
+
error: null,
|
|
7683
|
+
lastPolledAt: null
|
|
7684
|
+
});
|
|
7685
|
+
}
|
|
7686
|
+
}, [
|
|
7687
|
+
swirlProjectId
|
|
7688
|
+
]);
|
|
7689
|
+
useEffect2(function() {
|
|
7690
|
+
if (!showAiPanel || !swirlProjectId) return;
|
|
7691
|
+
var cancelled = false;
|
|
7692
|
+
var pollTimeoutId = null;
|
|
7693
|
+
var inFlight = false;
|
|
7694
|
+
var pollLiveContext = function pollLiveContext1() {
|
|
7695
|
+
return _async_to_generator(function() {
|
|
7696
|
+
var response, payload, error, message, _ref, _playerRef_current, segmentPollMs, nextPollMs;
|
|
7697
|
+
return _ts_generator(this, function(_state) {
|
|
7698
|
+
switch(_state.label){
|
|
7699
|
+
case 0:
|
|
7700
|
+
if (cancelled || inFlight) return [
|
|
7701
|
+
2
|
|
7702
|
+
];
|
|
7703
|
+
inFlight = true;
|
|
7704
|
+
setAiLiveContext(function(prev) {
|
|
7705
|
+
return _object_spread_props(_object_spread({}, prev), {
|
|
7706
|
+
isLoading: prev.context == null,
|
|
7707
|
+
error: null
|
|
7708
|
+
});
|
|
7709
|
+
});
|
|
7710
|
+
_state.label = 1;
|
|
7711
|
+
case 1:
|
|
7712
|
+
_state.trys.push([
|
|
7713
|
+
1,
|
|
7714
|
+
4,
|
|
7715
|
+
5,
|
|
7716
|
+
6
|
|
7717
|
+
]);
|
|
7718
|
+
return [
|
|
7719
|
+
4,
|
|
7720
|
+
fetch("https://adstorm.co/api-adstorm-dev/adstorm/swirl/projects/".concat(swirlProjectId, "/live-context"), {
|
|
7721
|
+
method: "GET",
|
|
7722
|
+
headers: {
|
|
7723
|
+
Accept: "application/json"
|
|
7724
|
+
}
|
|
7725
|
+
})
|
|
7726
|
+
];
|
|
7727
|
+
case 2:
|
|
7728
|
+
response = _state.sent();
|
|
7729
|
+
if (!response.ok) {
|
|
7730
|
+
throw new Error("Live context request failed (".concat(response.status, " ").concat(response.statusText, ")"));
|
|
7731
|
+
}
|
|
7732
|
+
return [
|
|
7733
|
+
4,
|
|
7734
|
+
response.json()
|
|
7735
|
+
];
|
|
7736
|
+
case 3:
|
|
7737
|
+
payload = _state.sent();
|
|
7738
|
+
if (cancelled) return [
|
|
7739
|
+
2
|
|
7740
|
+
];
|
|
7741
|
+
setAiLiveContext({
|
|
7742
|
+
context: payload,
|
|
7743
|
+
isLoading: false,
|
|
7744
|
+
error: null,
|
|
7745
|
+
lastPolledAt: Date.now()
|
|
7746
|
+
});
|
|
7747
|
+
return [
|
|
7748
|
+
3,
|
|
7749
|
+
6
|
|
7750
|
+
];
|
|
7751
|
+
case 4:
|
|
7752
|
+
error = _state.sent();
|
|
7753
|
+
if (cancelled) return [
|
|
7754
|
+
2
|
|
7755
|
+
];
|
|
7756
|
+
message = _instanceof(error, Error) ? error.message : "Unable to load AI live context.";
|
|
7757
|
+
setAiLiveContext(function(prev) {
|
|
7758
|
+
return _object_spread_props(_object_spread({}, prev), {
|
|
7759
|
+
isLoading: false,
|
|
7760
|
+
error: message,
|
|
7761
|
+
lastPolledAt: Date.now()
|
|
7762
|
+
});
|
|
7763
|
+
});
|
|
7764
|
+
return [
|
|
7765
|
+
3,
|
|
7766
|
+
6
|
|
7767
|
+
];
|
|
7768
|
+
case 5:
|
|
7769
|
+
inFlight = false;
|
|
7770
|
+
if (!cancelled) {
|
|
7771
|
+
;
|
|
7772
|
+
;
|
|
7773
|
+
segmentPollMs = (_ref = (_playerRef_current = playerRef.current) === null || _playerRef_current === void 0 ? void 0 : _playerRef_current.getCurrentHlsSegmentDurationMs()) !== null && _ref !== void 0 ? _ref : AI_CONTEXT_FALLBACK_POLL_MS;
|
|
7774
|
+
nextPollMs = Math.max(AI_CONTEXT_MIN_POLL_MS, segmentPollMs);
|
|
7775
|
+
pollTimeoutId = window.setTimeout(pollLiveContext, nextPollMs);
|
|
7776
|
+
}
|
|
7777
|
+
return [
|
|
7778
|
+
7
|
|
7779
|
+
];
|
|
7780
|
+
case 6:
|
|
7781
|
+
return [
|
|
7782
|
+
2
|
|
7783
|
+
];
|
|
7784
|
+
}
|
|
7785
|
+
});
|
|
7786
|
+
})();
|
|
7787
|
+
};
|
|
7788
|
+
pollLiveContext();
|
|
7789
|
+
return function() {
|
|
7790
|
+
cancelled = true;
|
|
7791
|
+
if (pollTimeoutId != null) {
|
|
7792
|
+
clearTimeout(pollTimeoutId);
|
|
7793
|
+
}
|
|
7794
|
+
};
|
|
7795
|
+
}, [
|
|
7796
|
+
showAiPanel,
|
|
7797
|
+
swirlProjectId,
|
|
7798
|
+
criticalPropsKey
|
|
7799
|
+
]);
|
|
7600
7800
|
var handleWrapperMouseMove = useCallback2(function() {
|
|
7601
7801
|
resetControlsTimer();
|
|
7602
7802
|
}, [
|
|
@@ -7615,7 +7815,7 @@ var StormcloudVideoPlayerComponent = React2.memo(function(props) {
|
|
|
7615
7815
|
return /* @__PURE__ */ jsxs2(Fragment2, {
|
|
7616
7816
|
children: [
|
|
7617
7817
|
/* @__PURE__ */ jsx2("style", {
|
|
7618
|
-
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 .sc-debug-scroll::-webkit-scrollbar {\n width: 8px;\n }\n .sc-debug-scroll::-webkit-scrollbar-thumb {\n background: rgba(255, 255, 255, 0.22);\n border-radius: 4px;\n }\n .sc-debug-scroll {\n overflow-x: hidden !important;\n }\n "
|
|
7818
|
+
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 .sc-debug-scroll::-webkit-scrollbar {\n width: 8px;\n }\n .sc-debug-scroll::-webkit-scrollbar-thumb {\n background: rgba(255, 255, 255, 0.22);\n border-radius: 4px;\n }\n .sc-debug-scroll {\n overflow-x: hidden !important;\n }\n .sc-ai-scroll::-webkit-scrollbar {\n width: 8px;\n }\n .sc-ai-scroll::-webkit-scrollbar-thumb {\n background: rgba(236, 72, 153, 0.34);\n border-radius: 4px;\n }\n .sc-ai-scroll {\n overflow-x: hidden !important;\n }\n "
|
|
7619
7819
|
}),
|
|
7620
7820
|
/* @__PURE__ */ jsxs2("div", {
|
|
7621
7821
|
ref: wrapperRef,
|
|
@@ -7857,41 +8057,189 @@ var StormcloudVideoPlayerComponent = React2.memo(function(props) {
|
|
|
7857
8057
|
})
|
|
7858
8058
|
]
|
|
7859
8059
|
}),
|
|
7860
|
-
|
|
7861
|
-
|
|
7862
|
-
onClick: function onClick() {
|
|
7863
|
-
setShowDebugPanel(function(prev) {
|
|
7864
|
-
return !prev;
|
|
7865
|
-
});
|
|
7866
|
-
resetControlsTimer();
|
|
7867
|
-
},
|
|
7868
|
-
style: {
|
|
8060
|
+
showAiPanel && !showLicenseWarning && swirlProjectId && /* @__PURE__ */ jsxs2("div", {
|
|
8061
|
+
style: _object_spread_props(_object_spread({
|
|
7869
8062
|
position: "absolute",
|
|
7870
|
-
|
|
7871
|
-
|
|
8063
|
+
right: "".concat(panelBaseRight, "px")
|
|
8064
|
+
}, shouldStackPanels && showDebugPanel ? {
|
|
8065
|
+
top: "".concat(12 * responsiveScale, "px")
|
|
8066
|
+
} : {
|
|
8067
|
+
bottom: "".concat(debugPanelBottomOffset, "px")
|
|
8068
|
+
}), {
|
|
8069
|
+
width: "".concat(analyzerPanelWidth, "px"),
|
|
8070
|
+
maxWidth: "92vw",
|
|
8071
|
+
height: analyzerPanelHeight,
|
|
8072
|
+
maxHeight: analyzerPanelMaxHeight,
|
|
7872
8073
|
zIndex: 61,
|
|
7873
|
-
|
|
7874
|
-
|
|
7875
|
-
borderRadius: "
|
|
7876
|
-
|
|
7877
|
-
|
|
7878
|
-
|
|
7879
|
-
|
|
7880
|
-
|
|
7881
|
-
|
|
7882
|
-
children:
|
|
7883
|
-
|
|
7884
|
-
|
|
8074
|
+
background: "linear-gradient(165deg, rgba(17, 24, 39, 0.94) 0%, rgba(41, 17, 63, 0.82) 52%, rgba(17, 24, 39, 0.9) 100%)",
|
|
8075
|
+
border: "1px solid rgba(236, 72, 153, 0.35)",
|
|
8076
|
+
borderRadius: "14px",
|
|
8077
|
+
boxShadow: "0 18px 56px rgba(4, 7, 20, 0.58), inset 0 1px 0 rgba(255, 255, 255, 0.09)",
|
|
8078
|
+
backdropFilter: "blur(20px)",
|
|
8079
|
+
WebkitBackdropFilter: "blur(20px)",
|
|
8080
|
+
color: "rgba(255,255,255,0.96)",
|
|
8081
|
+
overflow: "hidden"
|
|
8082
|
+
}),
|
|
8083
|
+
children: [
|
|
8084
|
+
/* @__PURE__ */ jsxs2("div", {
|
|
8085
|
+
style: {
|
|
8086
|
+
display: "flex",
|
|
8087
|
+
alignItems: "center",
|
|
8088
|
+
justifyContent: "space-between",
|
|
8089
|
+
padding: "11px 13px",
|
|
8090
|
+
borderBottom: "1px solid rgba(255,255,255,0.12)",
|
|
8091
|
+
background: "linear-gradient(90deg, rgba(236, 72, 153, 0.2) 0%, rgba(168, 85, 247, 0.18) 100%)"
|
|
8092
|
+
},
|
|
8093
|
+
children: [
|
|
8094
|
+
/* @__PURE__ */ jsxs2("div", {
|
|
8095
|
+
children: [
|
|
8096
|
+
/* @__PURE__ */ jsx2("div", {
|
|
8097
|
+
style: {
|
|
8098
|
+
fontSize: "13px",
|
|
8099
|
+
fontWeight: 800,
|
|
8100
|
+
letterSpacing: "0.02em"
|
|
8101
|
+
},
|
|
8102
|
+
children: "AI Live Context Analyzer"
|
|
8103
|
+
}),
|
|
8104
|
+
/* @__PURE__ */ jsx2("div", {
|
|
8105
|
+
style: {
|
|
8106
|
+
marginTop: "2px",
|
|
8107
|
+
fontSize: "11px",
|
|
8108
|
+
color: "rgba(255,255,255,0.72)"
|
|
8109
|
+
},
|
|
8110
|
+
children: aiLiveContext.lastPolledAt ? "Updated ".concat(formatDebugClock(aiLiveContext.lastPolledAt)) : "Waiting for first sample..."
|
|
8111
|
+
})
|
|
8112
|
+
]
|
|
8113
|
+
}),
|
|
8114
|
+
/* @__PURE__ */ jsx2("button", {
|
|
8115
|
+
className: "sc-ctrl-btn",
|
|
8116
|
+
onClick: function onClick() {
|
|
8117
|
+
return setShowAiPanel(false);
|
|
8118
|
+
},
|
|
8119
|
+
style: {
|
|
8120
|
+
padding: "4px",
|
|
8121
|
+
borderRadius: "6px",
|
|
8122
|
+
minWidth: "26px",
|
|
8123
|
+
minHeight: "26px"
|
|
8124
|
+
},
|
|
8125
|
+
title: "Close AI panel",
|
|
8126
|
+
children: /* @__PURE__ */ jsx2(FaTimes, {
|
|
8127
|
+
size: 12
|
|
8128
|
+
})
|
|
8129
|
+
})
|
|
8130
|
+
]
|
|
8131
|
+
}),
|
|
8132
|
+
/* @__PURE__ */ jsxs2("div", {
|
|
8133
|
+
className: "sc-ai-scroll",
|
|
8134
|
+
style: {
|
|
8135
|
+
padding: "12px",
|
|
8136
|
+
overflowY: "auto",
|
|
8137
|
+
overflowX: "hidden",
|
|
8138
|
+
height: "calc(100% - 52px)",
|
|
8139
|
+
display: "grid",
|
|
8140
|
+
gap: "12px"
|
|
8141
|
+
},
|
|
8142
|
+
children: [
|
|
8143
|
+
aiLiveContext.error && /* @__PURE__ */ jsx2("div", {
|
|
8144
|
+
style: {
|
|
8145
|
+
fontSize: "12px",
|
|
8146
|
+
color: "#fecaca",
|
|
8147
|
+
background: "rgba(220, 38, 38, 0.2)",
|
|
8148
|
+
border: "1px solid rgba(248, 113, 113, 0.5)",
|
|
8149
|
+
borderRadius: "10px",
|
|
8150
|
+
padding: "9px 10px"
|
|
8151
|
+
},
|
|
8152
|
+
children: aiLiveContext.error
|
|
8153
|
+
}),
|
|
8154
|
+
/* @__PURE__ */ jsxs2("div", {
|
|
8155
|
+
style: {
|
|
8156
|
+
padding: "11px 12px",
|
|
8157
|
+
borderRadius: "10px",
|
|
8158
|
+
border: "1px solid rgba(236, 72, 153, 0.5)",
|
|
8159
|
+
background: "linear-gradient(155deg, rgba(88, 28, 135, 0.35) 0%, rgba(17, 24, 39, 0.62) 100%)",
|
|
8160
|
+
boxShadow: "0 8px 24px rgba(236, 72, 153, 0.12)"
|
|
8161
|
+
},
|
|
8162
|
+
children: [
|
|
8163
|
+
/* @__PURE__ */ jsxs2("div", {
|
|
8164
|
+
style: {
|
|
8165
|
+
display: "flex",
|
|
8166
|
+
alignItems: "center",
|
|
8167
|
+
justifyContent: "space-between",
|
|
8168
|
+
gap: "8px",
|
|
8169
|
+
marginBottom: "7px"
|
|
8170
|
+
},
|
|
8171
|
+
children: [
|
|
8172
|
+
/* @__PURE__ */ jsx2("div", {
|
|
8173
|
+
style: {
|
|
8174
|
+
fontSize: "11px",
|
|
8175
|
+
fontWeight: 800,
|
|
8176
|
+
textTransform: "uppercase",
|
|
8177
|
+
letterSpacing: "0.1em",
|
|
8178
|
+
color: "#f9a8d4"
|
|
8179
|
+
},
|
|
8180
|
+
children: "AI Context"
|
|
8181
|
+
}),
|
|
8182
|
+
/* @__PURE__ */ jsx2("div", {
|
|
8183
|
+
style: {
|
|
8184
|
+
fontSize: "10px",
|
|
8185
|
+
color: "rgba(255,255,255,0.72)",
|
|
8186
|
+
fontFamily: "'SF Mono', 'Cascadia Code', monospace"
|
|
8187
|
+
},
|
|
8188
|
+
children: aiLiveContext.context ? formatAiRelativeTime(aiLiveContext.context.updated_at) : "--"
|
|
8189
|
+
})
|
|
8190
|
+
]
|
|
8191
|
+
}),
|
|
8192
|
+
/* @__PURE__ */ jsx2("div", {
|
|
8193
|
+
style: {
|
|
8194
|
+
fontSize: "13px",
|
|
8195
|
+
lineHeight: "1.58",
|
|
8196
|
+
color: "rgba(255,255,255,0.95)",
|
|
8197
|
+
whiteSpace: "pre-wrap"
|
|
8198
|
+
},
|
|
8199
|
+
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."
|
|
8200
|
+
}),
|
|
8201
|
+
((_aiLiveContext_context1 = aiLiveContext.context) === null || _aiLiveContext_context1 === void 0 ? void 0 : (_aiLiveContext_context_keywords = _aiLiveContext_context1.keywords) === null || _aiLiveContext_context_keywords === void 0 ? void 0 : _aiLiveContext_context_keywords.length) ? /* @__PURE__ */ jsx2("div", {
|
|
8202
|
+
style: {
|
|
8203
|
+
marginTop: "10px",
|
|
8204
|
+
display: "flex",
|
|
8205
|
+
flexWrap: "wrap",
|
|
8206
|
+
gap: "6px"
|
|
8207
|
+
},
|
|
8208
|
+
children: aiLiveContext.context.keywords.slice(0, 12).map(function(kw) {
|
|
8209
|
+
return /* @__PURE__ */ jsx2("span", {
|
|
8210
|
+
style: {
|
|
8211
|
+
fontSize: "10px",
|
|
8212
|
+
fontWeight: 600,
|
|
8213
|
+
padding: "4px 7px",
|
|
8214
|
+
borderRadius: "999px",
|
|
8215
|
+
background: "rgba(236, 72, 153, 0.2)",
|
|
8216
|
+
border: "1px solid rgba(244, 114, 182, 0.42)",
|
|
8217
|
+
color: "#fce7f3",
|
|
8218
|
+
maxWidth: "100%",
|
|
8219
|
+
overflow: "hidden",
|
|
8220
|
+
textOverflow: "ellipsis",
|
|
8221
|
+
whiteSpace: "nowrap"
|
|
8222
|
+
},
|
|
8223
|
+
title: kw,
|
|
8224
|
+
children: kw
|
|
8225
|
+
}, kw);
|
|
8226
|
+
})
|
|
8227
|
+
}) : null
|
|
8228
|
+
]
|
|
8229
|
+
})
|
|
8230
|
+
]
|
|
8231
|
+
})
|
|
8232
|
+
]
|
|
7885
8233
|
}),
|
|
7886
8234
|
debugAdTiming && showDebugPanel && !showLicenseWarning && /* @__PURE__ */ jsxs2("div", {
|
|
7887
8235
|
style: {
|
|
7888
8236
|
position: "absolute",
|
|
7889
|
-
|
|
7890
|
-
|
|
7891
|
-
width: "".concat(
|
|
8237
|
+
right: "".concat(debugPanelRightOffset, "px"),
|
|
8238
|
+
bottom: "".concat(debugPanelBottomOffset, "px"),
|
|
8239
|
+
width: "".concat(analyzerPanelWidth, "px"),
|
|
7892
8240
|
maxWidth: "92vw",
|
|
7893
|
-
height:
|
|
7894
|
-
maxHeight:
|
|
8241
|
+
height: analyzerPanelHeight,
|
|
8242
|
+
maxHeight: analyzerPanelMaxHeight,
|
|
7895
8243
|
zIndex: 60,
|
|
7896
8244
|
background: "rgba(10, 10, 10, 0.74)",
|
|
7897
8245
|
border: "1px solid rgba(255, 255, 255, 0.14)",
|
|
@@ -8275,6 +8623,48 @@ var StormcloudVideoPlayerComponent = React2.memo(function(props) {
|
|
|
8275
8623
|
gap: "".concat(8 * responsiveScale, "px")
|
|
8276
8624
|
},
|
|
8277
8625
|
children: [
|
|
8626
|
+
swirlProjectId && /* @__PURE__ */ jsx2("button", {
|
|
8627
|
+
className: "sc-ctrl-btn",
|
|
8628
|
+
onClick: function onClick() {
|
|
8629
|
+
setShowAiPanel(function(prev) {
|
|
8630
|
+
return !prev;
|
|
8631
|
+
});
|
|
8632
|
+
resetControlsTimer();
|
|
8633
|
+
},
|
|
8634
|
+
style: {
|
|
8635
|
+
padding: "".concat(8 * responsiveScale, "px"),
|
|
8636
|
+
borderRadius: "50%",
|
|
8637
|
+
minWidth: "".concat(36 * responsiveScale, "px"),
|
|
8638
|
+
minHeight: "".concat(36 * responsiveScale, "px"),
|
|
8639
|
+
background: showAiPanel ? "rgba(236, 72, 153, 0.34)" : "transparent",
|
|
8640
|
+
fontFamily: "'SF Mono', 'Cascadia Code', monospace",
|
|
8641
|
+
fontSize: "".concat(12 * responsiveScale, "px"),
|
|
8642
|
+
fontWeight: 700,
|
|
8643
|
+
letterSpacing: "0.03em"
|
|
8644
|
+
},
|
|
8645
|
+
title: showAiPanel ? "Hide AI context" : "Show AI context",
|
|
8646
|
+
children: "AI"
|
|
8647
|
+
}),
|
|
8648
|
+
debugAdTiming && /* @__PURE__ */ jsx2("button", {
|
|
8649
|
+
className: "sc-ctrl-btn",
|
|
8650
|
+
onClick: function onClick() {
|
|
8651
|
+
setShowDebugPanel(function(prev) {
|
|
8652
|
+
return !prev;
|
|
8653
|
+
});
|
|
8654
|
+
resetControlsTimer();
|
|
8655
|
+
},
|
|
8656
|
+
style: {
|
|
8657
|
+
padding: "".concat(8 * responsiveScale, "px"),
|
|
8658
|
+
borderRadius: "50%",
|
|
8659
|
+
minWidth: "".concat(36 * responsiveScale, "px"),
|
|
8660
|
+
minHeight: "".concat(36 * responsiveScale, "px"),
|
|
8661
|
+
background: showDebugPanel ? "rgba(255, 255, 255, 0.16)" : "transparent"
|
|
8662
|
+
},
|
|
8663
|
+
title: showDebugPanel ? "Hide debug panel" : "Show debug panel",
|
|
8664
|
+
children: /* @__PURE__ */ jsx2(FaCog, {
|
|
8665
|
+
size: Math.max(14, 18 * responsiveScale)
|
|
8666
|
+
})
|
|
8667
|
+
}),
|
|
8278
8668
|
/* @__PURE__ */ jsxs2("div", {
|
|
8279
8669
|
style: {
|
|
8280
8670
|
position: "relative",
|
|
@@ -8526,6 +8916,48 @@ var StormcloudVideoPlayerComponent = React2.memo(function(props) {
|
|
|
8526
8916
|
})
|
|
8527
8917
|
]
|
|
8528
8918
|
}),
|
|
8919
|
+
swirlProjectId && /* @__PURE__ */ jsx2("button", {
|
|
8920
|
+
className: "sc-ctrl-btn",
|
|
8921
|
+
onClick: function onClick() {
|
|
8922
|
+
setShowAiPanel(function(prev) {
|
|
8923
|
+
return !prev;
|
|
8924
|
+
});
|
|
8925
|
+
resetControlsTimer();
|
|
8926
|
+
},
|
|
8927
|
+
style: {
|
|
8928
|
+
padding: "".concat(8 * responsiveScale, "px"),
|
|
8929
|
+
borderRadius: "50%",
|
|
8930
|
+
minWidth: "".concat(36 * responsiveScale, "px"),
|
|
8931
|
+
minHeight: "".concat(36 * responsiveScale, "px"),
|
|
8932
|
+
background: showAiPanel ? "rgba(236, 72, 153, 0.34)" : "rgba(0, 0, 0, 0.6)",
|
|
8933
|
+
fontFamily: "'SF Mono', 'Cascadia Code', monospace",
|
|
8934
|
+
fontSize: "".concat(12 * responsiveScale, "px"),
|
|
8935
|
+
fontWeight: 700,
|
|
8936
|
+
letterSpacing: "0.03em"
|
|
8937
|
+
},
|
|
8938
|
+
title: showAiPanel ? "Hide AI context" : "Show AI context",
|
|
8939
|
+
children: "AI"
|
|
8940
|
+
}),
|
|
8941
|
+
debugAdTiming && /* @__PURE__ */ jsx2("button", {
|
|
8942
|
+
className: "sc-ctrl-btn",
|
|
8943
|
+
onClick: function onClick() {
|
|
8944
|
+
setShowDebugPanel(function(prev) {
|
|
8945
|
+
return !prev;
|
|
8946
|
+
});
|
|
8947
|
+
resetControlsTimer();
|
|
8948
|
+
},
|
|
8949
|
+
style: {
|
|
8950
|
+
padding: "".concat(8 * responsiveScale, "px"),
|
|
8951
|
+
borderRadius: "50%",
|
|
8952
|
+
minWidth: "".concat(36 * responsiveScale, "px"),
|
|
8953
|
+
minHeight: "".concat(36 * responsiveScale, "px"),
|
|
8954
|
+
background: showDebugPanel ? "rgba(255, 255, 255, 0.16)" : "rgba(0, 0, 0, 0.6)"
|
|
8955
|
+
},
|
|
8956
|
+
title: showDebugPanel ? "Hide debug panel" : "Show debug panel",
|
|
8957
|
+
children: /* @__PURE__ */ jsx2(FaCog, {
|
|
8958
|
+
size: Math.max(14, 18 * responsiveScale)
|
|
8959
|
+
})
|
|
8960
|
+
}),
|
|
8529
8961
|
/* @__PURE__ */ jsx2("button", {
|
|
8530
8962
|
className: "sc-ctrl-btn",
|
|
8531
8963
|
onClick: function onClick() {
|