stormcloud-video-player 0.7.6 → 0.7.8
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 +425 -27
- 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 +425 -27
- package/lib/index.js.map +1 -1
- package/lib/player/StormcloudVideoPlayer.cjs +47 -22
- package/lib/player/StormcloudVideoPlayer.cjs.map +1 -1
- package/lib/player/StormcloudVideoPlayer.d.cts +1 -0
- package/lib/players/HlsPlayer.cjs +47 -22
- package/lib/players/HlsPlayer.cjs.map +1 -1
- package/lib/players/index.cjs +47 -22
- package/lib/players/index.cjs.map +1 -1
- package/lib/sdk/adstormPlayer.cjs +3 -22
- package/lib/sdk/adstormPlayer.cjs.map +1 -1
- package/lib/ui/StormcloudVideoPlayer.cjs +425 -27
- package/lib/ui/StormcloudVideoPlayer.cjs.map +1 -1
- package/package.json +1 -1
|
@@ -775,28 +775,9 @@ function createAdStormPlayer(contentVideo, options) {
|
|
|
775
775
|
adVideoElement.removeAttribute("src");
|
|
776
776
|
adVideoElement.load();
|
|
777
777
|
}
|
|
778
|
-
function buildVastUrl(durationSeconds
|
|
779
|
-
var baseUrl = "https://adstorm.co/api-adstorm-dev/adstorm/vast/
|
|
780
|
-
|
|
781
|
-
video: {
|
|
782
|
-
codec: "h264",
|
|
783
|
-
width: contentVideo.videoWidth || 1280,
|
|
784
|
-
height: contentVideo.videoHeight || 720,
|
|
785
|
-
fps: 29.97,
|
|
786
|
-
bitrate: 5e3,
|
|
787
|
-
profile: "high",
|
|
788
|
-
pix_fmt: "yuv420p",
|
|
789
|
-
has_b_frames: 0
|
|
790
|
-
},
|
|
791
|
-
audio: {
|
|
792
|
-
codec: "aac",
|
|
793
|
-
sample_rate: 48e3,
|
|
794
|
-
bitrate: 128
|
|
795
|
-
}
|
|
796
|
-
};
|
|
797
|
-
var finalMetadata = metadata || defaultMetadata;
|
|
798
|
-
var metadataStr = encodeURIComponent(JSON.stringify(finalMetadata));
|
|
799
|
-
return "".concat(baseUrl, "?duration=").concat(Math.ceil(durationSeconds), "&metadata=").concat(metadataStr);
|
|
778
|
+
function buildVastUrl(durationSeconds) {
|
|
779
|
+
var baseUrl = "https://adstorm.co/api-adstorm-dev/adstorm/nab/vast/pod";
|
|
780
|
+
return "".concat(baseUrl, "?duration=").concat(Math.ceil(durationSeconds));
|
|
800
781
|
}
|
|
801
782
|
function parseVastXml(xmlString) {
|
|
802
783
|
var ads = [];
|
|
@@ -5914,6 +5895,50 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
|
|
|
5914
5895
|
return min;
|
|
5915
5896
|
}
|
|
5916
5897
|
},
|
|
5898
|
+
{
|
|
5899
|
+
key: "getCurrentHlsSegmentDurationMs",
|
|
5900
|
+
value: function getCurrentHlsSegmentDurationMs() {
|
|
5901
|
+
var fallbackMs = 4e3;
|
|
5902
|
+
if (this.nativeHlsMode) {
|
|
5903
|
+
return fallbackMs;
|
|
5904
|
+
}
|
|
5905
|
+
var hls = this.hls;
|
|
5906
|
+
if (!hls) return null;
|
|
5907
|
+
var levelCandidates = [
|
|
5908
|
+
hls.currentLevel,
|
|
5909
|
+
hls.nextLoadLevel,
|
|
5910
|
+
hls.loadLevel
|
|
5911
|
+
];
|
|
5912
|
+
var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
|
|
5913
|
+
try {
|
|
5914
|
+
for(var _iterator = levelCandidates[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true){
|
|
5915
|
+
var levelIndex = _step.value;
|
|
5916
|
+
var _hls_levels_levelIndex, _hls_levels;
|
|
5917
|
+
if (typeof levelIndex !== "number" || levelIndex < 0) continue;
|
|
5918
|
+
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;
|
|
5919
|
+
if (!details) continue;
|
|
5920
|
+
var targetDurationSec = typeof details.partTarget === "number" && details.partTarget > 0 ? details.partTarget : typeof details.targetduration === "number" && details.targetduration > 0 ? details.targetduration : void 0;
|
|
5921
|
+
if (targetDurationSec !== void 0) {
|
|
5922
|
+
return Math.max(800, Math.floor(targetDurationSec * 1e3));
|
|
5923
|
+
}
|
|
5924
|
+
}
|
|
5925
|
+
} catch (err) {
|
|
5926
|
+
_didIteratorError = true;
|
|
5927
|
+
_iteratorError = err;
|
|
5928
|
+
} finally{
|
|
5929
|
+
try {
|
|
5930
|
+
if (!_iteratorNormalCompletion && _iterator.return != null) {
|
|
5931
|
+
_iterator.return();
|
|
5932
|
+
}
|
|
5933
|
+
} finally{
|
|
5934
|
+
if (_didIteratorError) {
|
|
5935
|
+
throw _iteratorError;
|
|
5936
|
+
}
|
|
5937
|
+
}
|
|
5938
|
+
}
|
|
5939
|
+
return fallbackMs;
|
|
5940
|
+
}
|
|
5941
|
+
},
|
|
5917
5942
|
{
|
|
5918
5943
|
key: "videoElement",
|
|
5919
5944
|
get: function get() {
|
|
@@ -7090,7 +7115,12 @@ var CRITICAL_PROPS = [
|
|
|
7090
7115
|
var CONTROLS_HIDE_DELAY = 3e3;
|
|
7091
7116
|
var DEFAULT_PLAYER_ASPECT_RATIO = 16 / 9;
|
|
7092
7117
|
var DEBUG_PANEL_MARKER_LIMIT = 12;
|
|
7118
|
+
var AI_CONTEXT_FALLBACK_POLL_MS = 4e3;
|
|
7119
|
+
var AI_CONTEXT_MIN_POLL_MS = 800;
|
|
7120
|
+
var PANEL_BASE_RIGHT_OFFSET = 10;
|
|
7093
7121
|
var StormcloudVideoPlayerComponent = import_react2.default.memo(function(props) {
|
|
7122
|
+
var _ref;
|
|
7123
|
+
var _aiLiveContext_context, _aiLiveContext_context_keywords, _aiLiveContext_context1;
|
|
7094
7124
|
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, [
|
|
7095
7125
|
"src",
|
|
7096
7126
|
"autoplay",
|
|
@@ -7154,6 +7184,13 @@ var StormcloudVideoPlayerComponent = import_react2.default.memo(function(props)
|
|
|
7154
7184
|
var _import_react2_default_useState20 = _sliced_to_array(import_react2.default.useState(DEFAULT_PLAYER_ASPECT_RATIO), 2), playerAspectRatio = _import_react2_default_useState20[0], setPlayerAspectRatio = _import_react2_default_useState20[1];
|
|
7155
7185
|
var _import_react2_default_useState21 = _sliced_to_array(import_react2.default.useState(false), 2), showDebugPanel = _import_react2_default_useState21[0], setShowDebugPanel = _import_react2_default_useState21[1];
|
|
7156
7186
|
var _import_react2_default_useState22 = _sliced_to_array(import_react2.default.useState([]), 2), debugMarkers = _import_react2_default_useState22[0], setDebugMarkers = _import_react2_default_useState22[1];
|
|
7187
|
+
var _import_react2_default_useState23 = _sliced_to_array(import_react2.default.useState(false), 2), showAiPanel = _import_react2_default_useState23[0], setShowAiPanel = _import_react2_default_useState23[1];
|
|
7188
|
+
var _import_react2_default_useState24 = _sliced_to_array(import_react2.default.useState({
|
|
7189
|
+
context: null,
|
|
7190
|
+
isLoading: false,
|
|
7191
|
+
error: null,
|
|
7192
|
+
lastPolledAt: null
|
|
7193
|
+
}), 2), aiLiveContext = _import_react2_default_useState24[0], setAiLiveContext = _import_react2_default_useState24[1];
|
|
7157
7194
|
var getResponsiveScale = function getResponsiveScale() {
|
|
7158
7195
|
if (viewportWidth < 480) return 0.7;
|
|
7159
7196
|
if (viewportWidth < 768) return 0.8;
|
|
@@ -7183,6 +7220,18 @@ var StormcloudVideoPlayerComponent = import_react2.default.memo(function(props)
|
|
|
7183
7220
|
if (typeof obj.splice_command_type === "number") return "binary splice";
|
|
7184
7221
|
return "marker";
|
|
7185
7222
|
};
|
|
7223
|
+
var formatAiRelativeTime = function formatAiRelativeTime(timestamp) {
|
|
7224
|
+
var epochMs = Date.parse(timestamp);
|
|
7225
|
+
if (!Number.isFinite(epochMs)) return "unknown";
|
|
7226
|
+
var diffSec = Math.max(0, Math.floor((Date.now() - epochMs) / 1e3));
|
|
7227
|
+
if (diffSec < 5) return "just now";
|
|
7228
|
+
if (diffSec < 60) return "".concat(diffSec, "s ago");
|
|
7229
|
+
var diffMin = Math.floor(diffSec / 60);
|
|
7230
|
+
if (diffMin < 60) return "".concat(diffMin, "m ago");
|
|
7231
|
+
var diffHr = Math.floor(diffMin / 60);
|
|
7232
|
+
if (diffHr < 24) return "".concat(diffHr, "h ago");
|
|
7233
|
+
return "".concat(Math.floor(diffHr / 24), "d ago");
|
|
7234
|
+
};
|
|
7186
7235
|
var resetControlsTimer = (0, import_react2.useCallback)(function() {
|
|
7187
7236
|
if (controlsTimerRef.current) {
|
|
7188
7237
|
clearTimeout(controlsTimerRef.current);
|
|
@@ -7260,7 +7309,14 @@ var StormcloudVideoPlayerComponent = import_react2.default.memo(function(props)
|
|
|
7260
7309
|
};
|
|
7261
7310
|
var isHlsStream = (src === null || src === void 0 ? void 0 : src.toLowerCase().includes(".m3u8")) || (src === null || src === void 0 ? void 0 : src.toLowerCase().includes("/hls/"));
|
|
7262
7311
|
var shouldShowEnhancedControls = showCustomControls && (isHlsStream ? allowNativeHls : true);
|
|
7312
|
+
var analyzerPanelWidth = Math.min(420, Math.max(320, viewportWidth * 0.41));
|
|
7313
|
+
var analyzerPanelHeight = isPortrait ? "52vh" : "420px";
|
|
7314
|
+
var analyzerPanelMaxHeight = "60vh";
|
|
7315
|
+
var panelGap = Math.max(8, 12 * responsiveScale);
|
|
7316
|
+
var shouldStackPanels = isPortrait || viewportWidth < 980;
|
|
7263
7317
|
var debugPanelBottomOffset = shouldShowEnhancedControls ? Math.max(74, 92 * responsiveScale) : Math.max(52, 58 * responsiveScale);
|
|
7318
|
+
var panelBaseRight = PANEL_BASE_RIGHT_OFFSET * responsiveScale;
|
|
7319
|
+
var debugPanelRightOffset = showAiPanel && !shouldStackPanels ? panelBaseRight + analyzerPanelWidth + panelGap : panelBaseRight;
|
|
7264
7320
|
var criticalPropsKey = (0, import_react2.useMemo)(function() {
|
|
7265
7321
|
return CRITICAL_PROPS.map(function(prop) {
|
|
7266
7322
|
return "".concat(prop, ":").concat(props[prop]);
|
|
@@ -7586,6 +7642,130 @@ var StormcloudVideoPlayerComponent = import_react2.default.memo(function(props)
|
|
|
7586
7642
|
debugAdTiming,
|
|
7587
7643
|
criticalPropsKey
|
|
7588
7644
|
]);
|
|
7645
|
+
(0, import_react2.useEffect)(function() {
|
|
7646
|
+
if (!swirlProjectId) {
|
|
7647
|
+
setShowAiPanel(false);
|
|
7648
|
+
setAiLiveContext({
|
|
7649
|
+
context: null,
|
|
7650
|
+
isLoading: false,
|
|
7651
|
+
error: null,
|
|
7652
|
+
lastPolledAt: null
|
|
7653
|
+
});
|
|
7654
|
+
}
|
|
7655
|
+
}, [
|
|
7656
|
+
swirlProjectId
|
|
7657
|
+
]);
|
|
7658
|
+
(0, import_react2.useEffect)(function() {
|
|
7659
|
+
if (!showAiPanel || !swirlProjectId) return;
|
|
7660
|
+
var cancelled = false;
|
|
7661
|
+
var pollTimeoutId = null;
|
|
7662
|
+
var inFlight = false;
|
|
7663
|
+
var pollLiveContext = function pollLiveContext1() {
|
|
7664
|
+
return _async_to_generator(function() {
|
|
7665
|
+
var response, payload, error, message, _ref, _playerRef_current, segmentPollMs, nextPollMs;
|
|
7666
|
+
return _ts_generator(this, function(_state) {
|
|
7667
|
+
switch(_state.label){
|
|
7668
|
+
case 0:
|
|
7669
|
+
if (cancelled || inFlight) return [
|
|
7670
|
+
2
|
|
7671
|
+
];
|
|
7672
|
+
inFlight = true;
|
|
7673
|
+
setAiLiveContext(function(prev) {
|
|
7674
|
+
return _object_spread_props(_object_spread({}, prev), {
|
|
7675
|
+
isLoading: prev.context == null,
|
|
7676
|
+
error: null
|
|
7677
|
+
});
|
|
7678
|
+
});
|
|
7679
|
+
_state.label = 1;
|
|
7680
|
+
case 1:
|
|
7681
|
+
_state.trys.push([
|
|
7682
|
+
1,
|
|
7683
|
+
4,
|
|
7684
|
+
5,
|
|
7685
|
+
6
|
|
7686
|
+
]);
|
|
7687
|
+
return [
|
|
7688
|
+
4,
|
|
7689
|
+
fetch("https://adstorm.co/api-adstorm-dev/adstorm/swirl/projects/".concat(swirlProjectId, "/live-context"), {
|
|
7690
|
+
method: "GET",
|
|
7691
|
+
headers: {
|
|
7692
|
+
Accept: "application/json"
|
|
7693
|
+
}
|
|
7694
|
+
})
|
|
7695
|
+
];
|
|
7696
|
+
case 2:
|
|
7697
|
+
response = _state.sent();
|
|
7698
|
+
if (!response.ok) {
|
|
7699
|
+
throw new Error("Live context request failed (".concat(response.status, " ").concat(response.statusText, ")"));
|
|
7700
|
+
}
|
|
7701
|
+
return [
|
|
7702
|
+
4,
|
|
7703
|
+
response.json()
|
|
7704
|
+
];
|
|
7705
|
+
case 3:
|
|
7706
|
+
payload = _state.sent();
|
|
7707
|
+
if (cancelled) return [
|
|
7708
|
+
2
|
|
7709
|
+
];
|
|
7710
|
+
setAiLiveContext({
|
|
7711
|
+
context: payload,
|
|
7712
|
+
isLoading: false,
|
|
7713
|
+
error: null,
|
|
7714
|
+
lastPolledAt: Date.now()
|
|
7715
|
+
});
|
|
7716
|
+
return [
|
|
7717
|
+
3,
|
|
7718
|
+
6
|
|
7719
|
+
];
|
|
7720
|
+
case 4:
|
|
7721
|
+
error = _state.sent();
|
|
7722
|
+
if (cancelled) return [
|
|
7723
|
+
2
|
|
7724
|
+
];
|
|
7725
|
+
message = _instanceof(error, Error) ? error.message : "Unable to load AI live context.";
|
|
7726
|
+
setAiLiveContext(function(prev) {
|
|
7727
|
+
return _object_spread_props(_object_spread({}, prev), {
|
|
7728
|
+
isLoading: false,
|
|
7729
|
+
error: message,
|
|
7730
|
+
lastPolledAt: Date.now()
|
|
7731
|
+
});
|
|
7732
|
+
});
|
|
7733
|
+
return [
|
|
7734
|
+
3,
|
|
7735
|
+
6
|
|
7736
|
+
];
|
|
7737
|
+
case 5:
|
|
7738
|
+
inFlight = false;
|
|
7739
|
+
if (!cancelled) {
|
|
7740
|
+
;
|
|
7741
|
+
;
|
|
7742
|
+
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;
|
|
7743
|
+
nextPollMs = Math.max(AI_CONTEXT_MIN_POLL_MS, segmentPollMs);
|
|
7744
|
+
pollTimeoutId = window.setTimeout(pollLiveContext, nextPollMs);
|
|
7745
|
+
}
|
|
7746
|
+
return [
|
|
7747
|
+
7
|
|
7748
|
+
];
|
|
7749
|
+
case 6:
|
|
7750
|
+
return [
|
|
7751
|
+
2
|
|
7752
|
+
];
|
|
7753
|
+
}
|
|
7754
|
+
});
|
|
7755
|
+
})();
|
|
7756
|
+
};
|
|
7757
|
+
pollLiveContext();
|
|
7758
|
+
return function() {
|
|
7759
|
+
cancelled = true;
|
|
7760
|
+
if (pollTimeoutId != null) {
|
|
7761
|
+
clearTimeout(pollTimeoutId);
|
|
7762
|
+
}
|
|
7763
|
+
};
|
|
7764
|
+
}, [
|
|
7765
|
+
showAiPanel,
|
|
7766
|
+
swirlProjectId,
|
|
7767
|
+
criticalPropsKey
|
|
7768
|
+
]);
|
|
7589
7769
|
var handleWrapperMouseMove = (0, import_react2.useCallback)(function() {
|
|
7590
7770
|
resetControlsTimer();
|
|
7591
7771
|
}, [
|
|
@@ -7604,7 +7784,7 @@ var StormcloudVideoPlayerComponent = import_react2.default.memo(function(props)
|
|
|
7604
7784
|
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, {
|
|
7605
7785
|
children: [
|
|
7606
7786
|
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("style", {
|
|
7607
|
-
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 "
|
|
7787
|
+
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 "
|
|
7608
7788
|
}),
|
|
7609
7789
|
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", {
|
|
7610
7790
|
ref: wrapperRef,
|
|
@@ -7846,15 +8026,189 @@ var StormcloudVideoPlayerComponent = import_react2.default.memo(function(props)
|
|
|
7846
8026
|
})
|
|
7847
8027
|
]
|
|
7848
8028
|
}),
|
|
8029
|
+
showAiPanel && !showLicenseWarning && swirlProjectId && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", {
|
|
8030
|
+
style: _object_spread_props(_object_spread({
|
|
8031
|
+
position: "absolute",
|
|
8032
|
+
right: "".concat(panelBaseRight, "px")
|
|
8033
|
+
}, shouldStackPanels && showDebugPanel ? {
|
|
8034
|
+
top: "".concat(12 * responsiveScale, "px")
|
|
8035
|
+
} : {
|
|
8036
|
+
bottom: "".concat(debugPanelBottomOffset, "px")
|
|
8037
|
+
}), {
|
|
8038
|
+
width: "".concat(analyzerPanelWidth, "px"),
|
|
8039
|
+
maxWidth: "92vw",
|
|
8040
|
+
height: analyzerPanelHeight,
|
|
8041
|
+
maxHeight: analyzerPanelMaxHeight,
|
|
8042
|
+
zIndex: 61,
|
|
8043
|
+
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%)",
|
|
8044
|
+
border: "1px solid rgba(236, 72, 153, 0.35)",
|
|
8045
|
+
borderRadius: "14px",
|
|
8046
|
+
boxShadow: "0 18px 56px rgba(4, 7, 20, 0.58), inset 0 1px 0 rgba(255, 255, 255, 0.09)",
|
|
8047
|
+
backdropFilter: "blur(20px)",
|
|
8048
|
+
WebkitBackdropFilter: "blur(20px)",
|
|
8049
|
+
color: "rgba(255,255,255,0.96)",
|
|
8050
|
+
overflow: "hidden"
|
|
8051
|
+
}),
|
|
8052
|
+
children: [
|
|
8053
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", {
|
|
8054
|
+
style: {
|
|
8055
|
+
display: "flex",
|
|
8056
|
+
alignItems: "center",
|
|
8057
|
+
justifyContent: "space-between",
|
|
8058
|
+
padding: "11px 13px",
|
|
8059
|
+
borderBottom: "1px solid rgba(255,255,255,0.12)",
|
|
8060
|
+
background: "linear-gradient(90deg, rgba(236, 72, 153, 0.2) 0%, rgba(168, 85, 247, 0.18) 100%)"
|
|
8061
|
+
},
|
|
8062
|
+
children: [
|
|
8063
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", {
|
|
8064
|
+
children: [
|
|
8065
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", {
|
|
8066
|
+
style: {
|
|
8067
|
+
fontSize: "13px",
|
|
8068
|
+
fontWeight: 800,
|
|
8069
|
+
letterSpacing: "0.02em"
|
|
8070
|
+
},
|
|
8071
|
+
children: "AI Live Context Analyzer"
|
|
8072
|
+
}),
|
|
8073
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", {
|
|
8074
|
+
style: {
|
|
8075
|
+
marginTop: "2px",
|
|
8076
|
+
fontSize: "11px",
|
|
8077
|
+
color: "rgba(255,255,255,0.72)"
|
|
8078
|
+
},
|
|
8079
|
+
children: aiLiveContext.lastPolledAt ? "Updated ".concat(formatDebugClock(aiLiveContext.lastPolledAt)) : "Waiting for first sample..."
|
|
8080
|
+
})
|
|
8081
|
+
]
|
|
8082
|
+
}),
|
|
8083
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", {
|
|
8084
|
+
className: "sc-ctrl-btn",
|
|
8085
|
+
onClick: function onClick() {
|
|
8086
|
+
return setShowAiPanel(false);
|
|
8087
|
+
},
|
|
8088
|
+
style: {
|
|
8089
|
+
padding: "4px",
|
|
8090
|
+
borderRadius: "6px",
|
|
8091
|
+
minWidth: "26px",
|
|
8092
|
+
minHeight: "26px"
|
|
8093
|
+
},
|
|
8094
|
+
title: "Close AI panel",
|
|
8095
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_fa.FaTimes, {
|
|
8096
|
+
size: 12
|
|
8097
|
+
})
|
|
8098
|
+
})
|
|
8099
|
+
]
|
|
8100
|
+
}),
|
|
8101
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", {
|
|
8102
|
+
className: "sc-ai-scroll",
|
|
8103
|
+
style: {
|
|
8104
|
+
padding: "12px",
|
|
8105
|
+
overflowY: "auto",
|
|
8106
|
+
overflowX: "hidden",
|
|
8107
|
+
height: "calc(100% - 52px)",
|
|
8108
|
+
display: "grid",
|
|
8109
|
+
gap: "12px"
|
|
8110
|
+
},
|
|
8111
|
+
children: [
|
|
8112
|
+
aiLiveContext.error && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", {
|
|
8113
|
+
style: {
|
|
8114
|
+
fontSize: "12px",
|
|
8115
|
+
color: "#fecaca",
|
|
8116
|
+
background: "rgba(220, 38, 38, 0.2)",
|
|
8117
|
+
border: "1px solid rgba(248, 113, 113, 0.5)",
|
|
8118
|
+
borderRadius: "10px",
|
|
8119
|
+
padding: "9px 10px"
|
|
8120
|
+
},
|
|
8121
|
+
children: aiLiveContext.error
|
|
8122
|
+
}),
|
|
8123
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", {
|
|
8124
|
+
style: {
|
|
8125
|
+
padding: "11px 12px",
|
|
8126
|
+
borderRadius: "10px",
|
|
8127
|
+
border: "1px solid rgba(236, 72, 153, 0.5)",
|
|
8128
|
+
background: "linear-gradient(155deg, rgba(88, 28, 135, 0.35) 0%, rgba(17, 24, 39, 0.62) 100%)",
|
|
8129
|
+
boxShadow: "0 8px 24px rgba(236, 72, 153, 0.12)"
|
|
8130
|
+
},
|
|
8131
|
+
children: [
|
|
8132
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", {
|
|
8133
|
+
style: {
|
|
8134
|
+
display: "flex",
|
|
8135
|
+
alignItems: "center",
|
|
8136
|
+
justifyContent: "space-between",
|
|
8137
|
+
gap: "8px",
|
|
8138
|
+
marginBottom: "7px"
|
|
8139
|
+
},
|
|
8140
|
+
children: [
|
|
8141
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", {
|
|
8142
|
+
style: {
|
|
8143
|
+
fontSize: "11px",
|
|
8144
|
+
fontWeight: 800,
|
|
8145
|
+
textTransform: "uppercase",
|
|
8146
|
+
letterSpacing: "0.1em",
|
|
8147
|
+
color: "#f9a8d4"
|
|
8148
|
+
},
|
|
8149
|
+
children: "AI Context"
|
|
8150
|
+
}),
|
|
8151
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", {
|
|
8152
|
+
style: {
|
|
8153
|
+
fontSize: "10px",
|
|
8154
|
+
color: "rgba(255,255,255,0.72)",
|
|
8155
|
+
fontFamily: "'SF Mono', 'Cascadia Code', monospace"
|
|
8156
|
+
},
|
|
8157
|
+
children: aiLiveContext.context ? formatAiRelativeTime(aiLiveContext.context.updated_at) : "--"
|
|
8158
|
+
})
|
|
8159
|
+
]
|
|
8160
|
+
}),
|
|
8161
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", {
|
|
8162
|
+
style: {
|
|
8163
|
+
fontSize: "13px",
|
|
8164
|
+
lineHeight: "1.58",
|
|
8165
|
+
color: "rgba(255,255,255,0.95)",
|
|
8166
|
+
whiteSpace: "pre-wrap"
|
|
8167
|
+
},
|
|
8168
|
+
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."
|
|
8169
|
+
}),
|
|
8170
|
+
((_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__ */ (0, import_jsx_runtime2.jsx)("div", {
|
|
8171
|
+
style: {
|
|
8172
|
+
marginTop: "10px",
|
|
8173
|
+
display: "flex",
|
|
8174
|
+
flexWrap: "wrap",
|
|
8175
|
+
gap: "6px"
|
|
8176
|
+
},
|
|
8177
|
+
children: aiLiveContext.context.keywords.slice(0, 12).map(function(kw) {
|
|
8178
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", {
|
|
8179
|
+
style: {
|
|
8180
|
+
fontSize: "10px",
|
|
8181
|
+
fontWeight: 600,
|
|
8182
|
+
padding: "4px 7px",
|
|
8183
|
+
borderRadius: "999px",
|
|
8184
|
+
background: "rgba(236, 72, 153, 0.2)",
|
|
8185
|
+
border: "1px solid rgba(244, 114, 182, 0.42)",
|
|
8186
|
+
color: "#fce7f3",
|
|
8187
|
+
maxWidth: "100%",
|
|
8188
|
+
overflow: "hidden",
|
|
8189
|
+
textOverflow: "ellipsis",
|
|
8190
|
+
whiteSpace: "nowrap"
|
|
8191
|
+
},
|
|
8192
|
+
title: kw,
|
|
8193
|
+
children: kw
|
|
8194
|
+
}, kw);
|
|
8195
|
+
})
|
|
8196
|
+
}) : null
|
|
8197
|
+
]
|
|
8198
|
+
})
|
|
8199
|
+
]
|
|
8200
|
+
})
|
|
8201
|
+
]
|
|
8202
|
+
}),
|
|
7849
8203
|
debugAdTiming && showDebugPanel && !showLicenseWarning && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", {
|
|
7850
8204
|
style: {
|
|
7851
8205
|
position: "absolute",
|
|
7852
|
-
right: "".concat(
|
|
8206
|
+
right: "".concat(debugPanelRightOffset, "px"),
|
|
7853
8207
|
bottom: "".concat(debugPanelBottomOffset, "px"),
|
|
7854
|
-
width: "".concat(
|
|
8208
|
+
width: "".concat(analyzerPanelWidth, "px"),
|
|
7855
8209
|
maxWidth: "92vw",
|
|
7856
|
-
height:
|
|
7857
|
-
maxHeight:
|
|
8210
|
+
height: analyzerPanelHeight,
|
|
8211
|
+
maxHeight: analyzerPanelMaxHeight,
|
|
7858
8212
|
zIndex: 60,
|
|
7859
8213
|
background: "rgba(10, 10, 10, 0.74)",
|
|
7860
8214
|
border: "1px solid rgba(255, 255, 255, 0.14)",
|
|
@@ -8238,6 +8592,28 @@ var StormcloudVideoPlayerComponent = import_react2.default.memo(function(props)
|
|
|
8238
8592
|
gap: "".concat(8 * responsiveScale, "px")
|
|
8239
8593
|
},
|
|
8240
8594
|
children: [
|
|
8595
|
+
swirlProjectId && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", {
|
|
8596
|
+
className: "sc-ctrl-btn",
|
|
8597
|
+
onClick: function onClick() {
|
|
8598
|
+
setShowAiPanel(function(prev) {
|
|
8599
|
+
return !prev;
|
|
8600
|
+
});
|
|
8601
|
+
resetControlsTimer();
|
|
8602
|
+
},
|
|
8603
|
+
style: {
|
|
8604
|
+
padding: "".concat(8 * responsiveScale, "px"),
|
|
8605
|
+
borderRadius: "50%",
|
|
8606
|
+
minWidth: "".concat(36 * responsiveScale, "px"),
|
|
8607
|
+
minHeight: "".concat(36 * responsiveScale, "px"),
|
|
8608
|
+
background: showAiPanel ? "rgba(236, 72, 153, 0.34)" : "transparent",
|
|
8609
|
+
fontFamily: "'SF Mono', 'Cascadia Code', monospace",
|
|
8610
|
+
fontSize: "".concat(12 * responsiveScale, "px"),
|
|
8611
|
+
fontWeight: 700,
|
|
8612
|
+
letterSpacing: "0.03em"
|
|
8613
|
+
},
|
|
8614
|
+
title: showAiPanel ? "Hide AI context" : "Show AI context",
|
|
8615
|
+
children: "AI"
|
|
8616
|
+
}),
|
|
8241
8617
|
debugAdTiming && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", {
|
|
8242
8618
|
className: "sc-ctrl-btn",
|
|
8243
8619
|
onClick: function onClick() {
|
|
@@ -8509,6 +8885,28 @@ var StormcloudVideoPlayerComponent = import_react2.default.memo(function(props)
|
|
|
8509
8885
|
})
|
|
8510
8886
|
]
|
|
8511
8887
|
}),
|
|
8888
|
+
swirlProjectId && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", {
|
|
8889
|
+
className: "sc-ctrl-btn",
|
|
8890
|
+
onClick: function onClick() {
|
|
8891
|
+
setShowAiPanel(function(prev) {
|
|
8892
|
+
return !prev;
|
|
8893
|
+
});
|
|
8894
|
+
resetControlsTimer();
|
|
8895
|
+
},
|
|
8896
|
+
style: {
|
|
8897
|
+
padding: "".concat(8 * responsiveScale, "px"),
|
|
8898
|
+
borderRadius: "50%",
|
|
8899
|
+
minWidth: "".concat(36 * responsiveScale, "px"),
|
|
8900
|
+
minHeight: "".concat(36 * responsiveScale, "px"),
|
|
8901
|
+
background: showAiPanel ? "rgba(236, 72, 153, 0.34)" : "rgba(0, 0, 0, 0.6)",
|
|
8902
|
+
fontFamily: "'SF Mono', 'Cascadia Code', monospace",
|
|
8903
|
+
fontSize: "".concat(12 * responsiveScale, "px"),
|
|
8904
|
+
fontWeight: 700,
|
|
8905
|
+
letterSpacing: "0.03em"
|
|
8906
|
+
},
|
|
8907
|
+
title: showAiPanel ? "Hide AI context" : "Show AI context",
|
|
8908
|
+
children: "AI"
|
|
8909
|
+
}),
|
|
8512
8910
|
debugAdTiming && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", {
|
|
8513
8911
|
className: "sc-ctrl-btn",
|
|
8514
8912
|
onClick: function onClick() {
|