stormcloud-video-player 0.7.6 → 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 +422 -5
- 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 +422 -5
- 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 +422 -5
- package/lib/ui/StormcloudVideoPlayer.cjs.map +1 -1
- package/package.json +1 -1
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,7 +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;
|
|
7275
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;
|
|
7276
7351
|
var criticalPropsKey = useMemo(function() {
|
|
7277
7352
|
return CRITICAL_PROPS.map(function(prop) {
|
|
7278
7353
|
return "".concat(prop, ":").concat(props[prop]);
|
|
@@ -7598,6 +7673,130 @@ var StormcloudVideoPlayerComponent = React2.memo(function(props) {
|
|
|
7598
7673
|
debugAdTiming,
|
|
7599
7674
|
criticalPropsKey
|
|
7600
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
|
+
]);
|
|
7601
7800
|
var handleWrapperMouseMove = useCallback2(function() {
|
|
7602
7801
|
resetControlsTimer();
|
|
7603
7802
|
}, [
|
|
@@ -7616,7 +7815,7 @@ var StormcloudVideoPlayerComponent = React2.memo(function(props) {
|
|
|
7616
7815
|
return /* @__PURE__ */ jsxs2(Fragment2, {
|
|
7617
7816
|
children: [
|
|
7618
7817
|
/* @__PURE__ */ jsx2("style", {
|
|
7619
|
-
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 "
|
|
7620
7819
|
}),
|
|
7621
7820
|
/* @__PURE__ */ jsxs2("div", {
|
|
7622
7821
|
ref: wrapperRef,
|
|
@@ -7858,15 +8057,189 @@ var StormcloudVideoPlayerComponent = React2.memo(function(props) {
|
|
|
7858
8057
|
})
|
|
7859
8058
|
]
|
|
7860
8059
|
}),
|
|
8060
|
+
showAiPanel && !showLicenseWarning && swirlProjectId && /* @__PURE__ */ jsxs2("div", {
|
|
8061
|
+
style: _object_spread_props(_object_spread({
|
|
8062
|
+
position: "absolute",
|
|
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,
|
|
8073
|
+
zIndex: 61,
|
|
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
|
+
]
|
|
8233
|
+
}),
|
|
7861
8234
|
debugAdTiming && showDebugPanel && !showLicenseWarning && /* @__PURE__ */ jsxs2("div", {
|
|
7862
8235
|
style: {
|
|
7863
8236
|
position: "absolute",
|
|
7864
|
-
right: "".concat(
|
|
8237
|
+
right: "".concat(debugPanelRightOffset, "px"),
|
|
7865
8238
|
bottom: "".concat(debugPanelBottomOffset, "px"),
|
|
7866
|
-
width: "".concat(
|
|
8239
|
+
width: "".concat(analyzerPanelWidth, "px"),
|
|
7867
8240
|
maxWidth: "92vw",
|
|
7868
|
-
height:
|
|
7869
|
-
maxHeight:
|
|
8241
|
+
height: analyzerPanelHeight,
|
|
8242
|
+
maxHeight: analyzerPanelMaxHeight,
|
|
7870
8243
|
zIndex: 60,
|
|
7871
8244
|
background: "rgba(10, 10, 10, 0.74)",
|
|
7872
8245
|
border: "1px solid rgba(255, 255, 255, 0.14)",
|
|
@@ -8250,6 +8623,28 @@ var StormcloudVideoPlayerComponent = React2.memo(function(props) {
|
|
|
8250
8623
|
gap: "".concat(8 * responsiveScale, "px")
|
|
8251
8624
|
},
|
|
8252
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
|
+
}),
|
|
8253
8648
|
debugAdTiming && /* @__PURE__ */ jsx2("button", {
|
|
8254
8649
|
className: "sc-ctrl-btn",
|
|
8255
8650
|
onClick: function onClick() {
|
|
@@ -8521,6 +8916,28 @@ var StormcloudVideoPlayerComponent = React2.memo(function(props) {
|
|
|
8521
8916
|
})
|
|
8522
8917
|
]
|
|
8523
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
|
+
}),
|
|
8524
8941
|
debugAdTiming && /* @__PURE__ */ jsx2("button", {
|
|
8525
8942
|
className: "sc-ctrl-btn",
|
|
8526
8943
|
onClick: function onClick() {
|