@ciphore/radiocli 0.2.4 → 0.2.6

package/dist/ui/AdaptiveContent.js

@@ -5,9 +5,9 @@ import { computeListeningStats } from '../activity/stats.js';
 import { playbackBackendLabel } from '../player/backend-install.js';
 import { visibleWindow } from './list-window.js';
 import { displayWidth, padDisplayEnd, stationLocation, stationTags, stationTech, truncate } from './format.js';
-import { homeItems, settingsGroup, settingsGroups, settingsItemsForPage } from './screen-items.js';
+import { homeItems, settingsGroup, settingsGroupsForAirPlay, settingsItemsForPage } from './screen-items.js';
 import { screenTitle } from './screen-meta.js';
-import { keyHelpSections, commandHelp } from './help-content.js';
+import { keyHelpSections, commandHelpForAirPlay } from './help-content.js';
 import { settingLabel, settingValue } from './screens/SettingsScreen.js';
 import { exploreMapLand, mapMarker, panelBorder, textDim, textMuted, themeAccent } from './theme.js';
 import { panelBorderStyle, useDisplay } from './display-context.js';
@@ -19,6 +19,7 @@ import { formatExploreCursor } from './app-state.js';
 import { buildCosmoWorldMap } from './cosmo-world-map.js';
 import { adaptiveExploreFrameMetrics, computeAdaptiveExploreLayout } from './adaptive-explore-layout.js';
 import { AdaptiveMarquee } from './components/AdaptiveMarquee.js';
+import { ReceiverVisualRow } from './components/ReceiverVisualRow.js';
 export function AdaptiveContent(props) {
     return _jsx(AdaptiveContentBody, { ...props });
 }
@@ -55,9 +56,11 @@ function AdaptiveContentBody(props) {
             width,
             mode,
             ascii,
-            airPlaySupported
+            airPlaySupported,
+            platform: props.platform
         });
         const empty = adaptiveEmptyState({
+            airPlaySetupRequired: props.platform === 'linux' && !backends.includes('airplay'),
             screen,
             searchQuery,
             editingSearch,
@@ -105,9 +108,11 @@ function AdaptiveContentBody(props) {
         width,
         mode,
         ascii,
-        airPlaySupported
+        airPlaySupported,
+        platform: props.platform
     });
     const empty = adaptiveEmptyState({
+        airPlaySetupRequired: props.platform === 'linux' && !backends.includes('airplay'),
         screen,
         searchQuery,
         editingSearch,
@@ -221,7 +226,7 @@ function StaticRows({ rows, width, theme }) {
 }
 function AdaptiveNowPlaying({ mode, station, playback, metadata, width, height, ascii, theme, receiverStyle, reduceMotion }) {
     const pulse = useReceiverPulse();
-    const { screenReader } = useDisplay();
+    const { screenReader, app: appBackground } = useDisplay();
     const accent = themeAccent(theme);
     const stationName = station?.name ?? 'No station tuned';
     const showMetadata = Boolean(metadata?.title) && (screenReader || mode === 'compact' && height >= 9);
@@ -237,19 +242,7 @@ function AdaptiveNowPlaying({ mode, station, playback, metadata, width, height,
     const status = `${stationName}  ${playback.state}${playback.muted ? ' · muted' : ` · vol ${playback.volume}`}`;
     return (_jsxs(Box, { flexDirection: "column", height: height, width: width, overflow: "hidden", children: [_jsx(Text, { color: accent, bold: true, "aria-label": mode === 'micro' ? `Now playing. Station: ${stationName}. Playback: ${playback.state}, ${playback.muted ? 'muted' : `volume ${playback.volume}`}` : undefined, children: mode === 'micro'
                     ? _jsx(AdaptiveMarquee, { text: header, width: width, active: true, reduceMotion: reduceMotion })
-                    : truncate(header, width) }), mode === 'compact' ? _jsx(Text, { color: textMuted, "aria-label": `Station: ${stationName}. Playback: ${playback.state}, ${playback.muted ? 'muted' : `volume ${playback.volume}`}`, children: ascii ? toAsciiSafe(truncate(status, width)) : truncate(status, width) }) : null, gapRows ? _jsx(Box, { height: gapRows, flexShrink: 0 }) : null, !screenReader ? _jsx(Box, { flexDirection: "column", height: availableVisualRows, overflow: "hidden", "aria-hidden": true, children: visualRows.map((row, index) => (_jsx(Text, { color: row.segments ? undefined : row.color, children: row.segments
-                        ? renderAdaptiveSegments(row.segments, ascii)
-                        : ascii
-                            ? toAsciiSafe(row.text)
-                            : row.text }, index))) }) : null, showMetadata ? (_jsx(Text, { color: accent, "aria-label": `Track: ${metadata?.title ?? ''}`, children: _jsx(AdaptiveMarquee, { text: metadata?.title ?? '', width: width, active: true, reduceMotion: reduceMotion }) })) : null, gapRows ? _jsx(Box, { height: gapRows, flexShrink: 0 }) : null] }));
-}
-function renderAdaptiveSegments(segments, ascii) {
-    let offset = 0;
-    return segments.map(segment => {
-        const key = offset;
-        offset += segment.text.length;
-        return (_jsx(Text, { color: segment.color, backgroundColor: segment.backgroundColor, bold: segment.bold, children: ascii ? toAsciiSafe(segment.text) : segment.text }, key));
-    });
+                    : truncate(header, width) }), mode === 'compact' ? _jsx(Text, { color: textMuted, "aria-label": `Station: ${stationName}. Playback: ${playback.state}, ${playback.muted ? 'muted' : `volume ${playback.volume}`}`, children: ascii ? toAsciiSafe(truncate(status, width)) : truncate(status, width) }) : null, gapRows ? _jsx(Box, { height: gapRows, flexShrink: 0 }) : null, !screenReader ? _jsx(Box, { flexDirection: "column", height: availableVisualRows, overflow: "hidden", "aria-hidden": true, children: visualRows.map((row, index) => (_jsx(ReceiverVisualRow, { row: row, width: width, ascii: ascii, backgroundColor: appBackground }, index))) }) : null, showMetadata ? (_jsx(Text, { color: accent, "aria-label": `Track: ${metadata?.title ?? ''}`, children: _jsx(AdaptiveMarquee, { text: metadata?.title ?? '', width: width, active: true, reduceMotion: reduceMotion }) })) : null, gapRows ? _jsx(Box, { height: gapRows, flexShrink: 0 }) : null] }));
 }
 function AdaptiveSearch({ mode, query, editing, loading, rows, empty, selected, height, width, theme, ascii, reduceMotion }) {
     const accent = themeAccent(theme);
@@ -273,15 +266,15 @@ function adaptiveRows(input) {
         }));
     }
     if (screen === 'settings') {
-        const pageItems = settingsItemsForPage(input.settingsPage);
+        const pageItems = settingsItemsForPage(input.settingsPage, input.airPlaySupported);
         const labels = pageItems.map(item => settingLabel(item, updateCheck, input.appVersion, input.airPlaySupported));
         const labelWidth = pairedColumnWidth(labels, width, mode);
         return pageItems.map((item, index) => ({
             key: item,
             label: padDisplayEnd(truncate(settingLabel(item, updateCheck, input.appVersion, input.airPlaySupported), labelWidth), labelWidth),
             detail: input.settingsPage === 'root'
-                ? adaptiveSettingsRootValue(item)
-                : settingValue(item, library.settings, diagnostics, backends, airPlayDevices, updateCheck, input.appVersion),
+                ? adaptiveSettingsRootValue(item, input.airPlaySupported)
+                : settingValue(item, library.settings, diagnostics, backends, airPlayDevices, updateCheck, input.appVersion, input.platform),
             separator: '   ',
             index
         }));
@@ -312,7 +305,7 @@ function adaptiveRows(input) {
             }
         }
         rows.push({ key: 'section-commands', label: 'Commands', heading: true });
-        for (const command of commandHelp) {
+        for (const command of commandHelpForAirPlay(input.airPlaySupported)) {
             rows.push({ key: `command-${command.name}`, label: `:${command.name}${command.args ? ` ${command.args}` : ''}`, detail: command.description, index });
             index += 1;
         }
@@ -320,8 +313,8 @@ function adaptiveRows(input) {
     }
     return stationAdaptiveRows(stations, favoriteKeys, selected, width, ascii);
 }
-function adaptiveSettingsRootValue(item) {
-    const group = settingsGroups.find(candidate => candidate.label === item);
+function adaptiveSettingsRootValue(item, airPlayVisible) {
+    const group = settingsGroupsForAirPlay(airPlayVisible).find(candidate => candidate.label === item);
     return group ? `${group.items.length} settings ›` : undefined;
 }
 function stationAdaptiveRows(stations, favoriteKeys, selected, width, ascii) {
@@ -378,6 +371,8 @@ function adaptiveEmptyState(input) {
         return [{ key: 'error', label: stationError }, { key: 'hint', label: 'Try again later or reopen this view.' }];
     }
     if (screen === 'airplay-settings') {
+        if (input.airPlaySetupRequired)
+            return [{ key: 'empty', label: 'Setup required' }, { key: 'hint', label: 'radiocli setup' }, { key: 'option', label: '--airplay' }];
         return [{ key: 'empty', label: 'No AirPlay receivers found.' }, { key: 'hint', label: 'Press r to scan again.' }];
     }
     return [{ key: 'empty', label: `No stations in ${stationTitle.toLowerCase()}.` }, { key: 'hint', label: 'Try another view or clear filters.' }];
@@ -415,6 +410,8 @@ function adaptiveStatus(props) {
         return playingStation ? playingStation.name : 'Receiver authentication';
     }
     if (screen === 'airplay-settings') {
+        if (props.platform === 'linux' && !props.backends.includes('airplay'))
+            return 'Setup required';
         return `${props.airPlayDevices.length} receivers · ${playbackBackendLabel(playback.backend)}`;
     }
     return `${stations.length.toLocaleString()} stations${playingStation ? ` · playing ${playingStation.name}` : ''}`;