diff --git a/src/components/OrbitGuestQueue.tsx b/src/components/OrbitGuestQueue.tsx index 4de6f2cf..8c71eb10 100644 --- a/src/components/OrbitGuestQueue.tsx +++ b/src/components/OrbitGuestQueue.tsx @@ -1,5 +1,5 @@ import { useEffect, useMemo, useState } from 'react'; -import { Radio, Users } from 'lucide-react'; +import { Radio } from 'lucide-react'; import { useTranslation } from 'react-i18next'; import { useOrbitStore } from '../store/orbitStore'; import { @@ -9,6 +9,7 @@ import { type SubsonicSong, } from '../api/subsonic'; import CachedImage from './CachedImage'; +import OrbitQueueHead from './OrbitQueueHead'; /** * Orbit — guest-side queue view. @@ -67,12 +68,7 @@ export default function OrbitGuestQueue() { return (
-
-

{state.name}

-
- {state.participants.length + 1} · {t('orbit.guestHost', { name: state.host })} -
-
+ {currentTrack && (
diff --git a/src/components/OrbitQueueHead.tsx b/src/components/OrbitQueueHead.tsx new file mode 100644 index 00000000..21530636 --- /dev/null +++ b/src/components/OrbitQueueHead.tsx @@ -0,0 +1,24 @@ +import { Users } from 'lucide-react'; +import type { OrbitState } from '../api/orbit'; + +interface Props { + state: OrbitState; +} + +/** + * Shared Orbit head strip rendered at the top of the queue for both host + * and guest. Shows the session name and a comma-separated list of every + * participant (host first, then guests in join order). + */ +export default function OrbitQueueHead({ state }: Props) { + const names = [state.host, ...state.participants.map(p => p.user)]; + return ( +
+

{state.name}

+
+ + {names.join(', ')} +
+
+ ); +} diff --git a/src/components/QueuePanel.tsx b/src/components/QueuePanel.tsx index 18244748..65d917f0 100644 --- a/src/components/QueuePanel.tsx +++ b/src/components/QueuePanel.tsx @@ -2,6 +2,7 @@ import React, { useState, useRef, useMemo, useEffect } from 'react'; import { Track, usePlayerStore, songToTrack } from '../store/playerStore'; import { useOrbitStore } from '../store/orbitStore'; import OrbitGuestQueue from './OrbitGuestQueue'; +import OrbitQueueHead from './OrbitQueueHead'; import { Play, Music, Star, X, Trash2, Save, FolderOpen, Shuffle, Infinity, Waves, MicVocal, ListMusic, Check, ListPlus, MoveRight, Radio, HardDrive, ChevronDown, Info, Share2 } from 'lucide-react'; import { buildCoverArtUrl, coverArtCacheKey, getAlbum, getPlaylists, getPlaylist, updatePlaylist, deletePlaylist, SubsonicPlaylist } from '../api/subsonic'; import { usePlaylistStore } from '../store/playlistStore'; @@ -247,6 +248,8 @@ export default function QueuePanel() { function QueuePanelHostOrSolo() { const { t } = useTranslation(); const navigate = useNavigate(); + const orbitRole = useOrbitStore(s => s.role); + const orbitState = useOrbitStore(s => s.state); const queue = usePlayerStore(s => s.queue); const queueIndex = usePlayerStore(s => s.queueIndex); const currentTrack = usePlayerStore(s => s.currentTrack); @@ -465,6 +468,9 @@ function QueuePanelHostOrSolo() { borderLeftWidth: isQueueVisible ? 1 : 0, }} > + {orbitRole === 'host' && orbitState && ( + + )}