Mirrors/Dispatcharr
1
0
Fork 1
mirror of https://github.com/Dispatcharr/Dispatcharr.git synced 2026-01-23 02:35:14 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

Enhancement: Refactor StreamConnectionCard layout for improved UI, separating channel name and current program display.

Browse source
This commit is contained in:
SergeantPanda 2026-01-20 19:35:19 -06:00
parent 2fc2486c34
commit e43aba67e7
1 changed files with 29 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

57
frontend/src/components/cards/StreamConnectionCard.jsx
View file

@ -494,9 +494,8 @@ const StreamConnectionCard = ({
</Group>
</Group>
<Flex justify="space-between" align="center">
<Text fw={500}>{channelName}</Text>
{/* Stream Profile on right */}
<Flex justify="flex-end" align="center" mt={-8}>
<Tooltip label="Active Stream Profile">
<Group gap={5}>
<Video size="18" />
@ -505,32 +504,10 @@ const StreamConnectionCard = ({
</Tooltip>
</Flex>
{/* Display M3U profile and current program */}
{/* Channel Name on left, M3U Profile on right */}
<Flex justify="space-between" align="center" mt={-8}>
{currentProgram ? (
<Group gap={5}>
<Radio size="14" style={{ color: '#22c55e' }} />
<Text size="xs" fw={500} c="green.5">
Now Playing:
</Text>
<Text size="xs" c="dimmed">
{currentProgram.title}
</Text>
<ActionIcon
size="xs"
variant="subtle"
onClick={() => setIsProgramDescExpanded(!isProgramDescExpanded)}
>
{isProgramDescExpanded ? (
<ChevronDown size="14" />
) : (
<ChevronRight size="14" />
)}
</ActionIcon>
</Group>
) : (
<Box />
)}
<Text fw={500}>{channelName}</Text>
<Group gap={5}>
<HardDriveUpload size="18" />
<Tooltip label="Current M3U Profile">
@ -539,6 +516,30 @@ const StreamConnectionCard = ({
</Group>
</Flex>
{/* Display current program on its own line */}
{currentProgram && (
<Group gap={5} mt={-4}>
<Radio size="14" style={{ color: '#22c55e' }} />
<Text size="xs" fw={500} c="green.5">
Now Playing:
</Text>
<Text size="xs" c="dimmed">
{currentProgram.title}
</Text>
<ActionIcon
size="xs"
variant="subtle"
onClick={() => setIsProgramDescExpanded(!isProgramDescExpanded)}
>
{isProgramDescExpanded ? (
<ChevronDown size="14" />
) : (
<ChevronRight size="14" />
)}
</ActionIcon>
</Group>
)}
{/* Expandable program description */}
{currentProgram &&
isProgramDescExpanded &&