Dockery/Homarr
1
0
Fork 0
mirror of https://github.com/ajnart/homarr.git synced 2025-11-14 09:25:47 +01:00
Code Issues Packages Projects Releases Wiki Activity

💄 Change media-server modal to popover (#1395)

Browse Source
This commit is contained in:
Tagaishi
2023-09-15 18:16:10 +02:00
committed by GitHub
parent 47e46a3a30
commit a3f364e67d
2 changed files with 73 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
src/widgets/media-server/DetailCollapseable.tsx
View File

@@ -1,6 +1,5 @@
import { Card, Divider, Flex, Grid, Group, Text } from '@mantine/core'; import { Card, Divider, Flex, Group, Stack, Text } from '@mantine/core';
import { IconDeviceMobile, IconId } from '@tabler/icons-react'; import { IconDeviceMobile, IconId } from '@tabler/icons-react';
import { GenericSessionInfo } from '~/types/api/media-server/session-info'; import { GenericSessionInfo } from '~/types/api/media-server/session-info';
export const DetailCollapseable = ({ session }: { session: GenericSessionInfo }) => { export const DetailCollapseable = ({ session }: { session: GenericSessionInfo }) => {
@@ -11,18 +10,18 @@ export const DetailCollapseable = ({ session }: { session: GenericSessionInfo })
details = [ details = [
...details, ...details,
{ {
title: "Video", title: 'Video',
metrics: [ metrics: [
{ {
name: "Resolution", name: 'Resolution',
value: `${session.currentlyPlaying.metadata.video.width}x${session.currentlyPlaying.metadata.video.height}`, value: `${session.currentlyPlaying.metadata.video.width}x${session.currentlyPlaying.metadata.video.height}`,
}, },
{ {
name: "Framerate", name: 'Framerate',
value: session.currentlyPlaying.metadata.video.videoFrameRate, value: session.currentlyPlaying.metadata.video.videoFrameRate,
}, },
{ {
name: "Video Codec", name: 'Video Codec',
value: session.currentlyPlaying.metadata.video.videoCodec, value: session.currentlyPlaying.metadata.video.videoCodec,
}, },
{ {
@@ -39,14 +38,14 @@ export const DetailCollapseable = ({ session }: { session: GenericSessionInfo })
details = [ details = [
...details, ...details,
{ {
title: "Audio", title: 'Audio',
metrics: [ metrics: [
{ {
name: "Audio Channels", name: 'Audio Channels',
value: `${session.currentlyPlaying.metadata.audio.audioChannels}`, value: `${session.currentlyPlaying.metadata.audio.audioChannels}`,
}, },
{ {
name: "Audio Codec", name: 'Audio Codec',
value: session.currentlyPlaying.metadata.audio.audioCodec, value: session.currentlyPlaying.metadata.audio.audioCodec,
}, },
], ],
@@ -58,24 +57,24 @@ export const DetailCollapseable = ({ session }: { session: GenericSessionInfo })
details = [ details = [
...details, ...details,
{ {
title: "Transcoding", title: 'Transcoding',
metrics: [ metrics: [
{ {
name: "Resolution", name: 'Resolution',
value: `${session.currentlyPlaying.metadata.transcoding.width}x${session.currentlyPlaying.metadata.transcoding.height}`, value: `${session.currentlyPlaying.metadata.transcoding.width}x${session.currentlyPlaying.metadata.transcoding.height}`,
}, },
{ {
name: "Context", name: 'Context',
value: session.currentlyPlaying.metadata.transcoding.context, value: session.currentlyPlaying.metadata.transcoding.context,
}, },
{ {
name: "Hardware Encoding Requested", name: 'Hardware Encoding Requested',
value: session.currentlyPlaying.metadata.transcoding.transcodeHwRequested value: session.currentlyPlaying.metadata.transcoding.transcodeHwRequested
? 'yes' ? 'yes'
: 'no', : 'no',
}, },
{ {
name: "Source Codec", name: 'Source Codec',
value: value:
session.currentlyPlaying.metadata.transcoding.sourceAudioCodec || session.currentlyPlaying.metadata.transcoding.sourceAudioCodec ||
session.currentlyPlaying.metadata.transcoding.sourceVideoCodec session.currentlyPlaying.metadata.transcoding.sourceVideoCodec
@@ -83,7 +82,7 @@ export const DetailCollapseable = ({ session }: { session: GenericSessionInfo })
: undefined, : undefined,
}, },
{ {
name: "Target Codec", name: 'Target Codec',
value: `${session.currentlyPlaying.metadata.transcoding.videoCodec} ${session.currentlyPlaying.metadata.transcoding.audioCodec}`, value: `${session.currentlyPlaying.metadata.transcoding.videoCodec} ${session.currentlyPlaying.metadata.transcoding.audioCodec}`,
}, },
], ],
@@ -109,23 +108,28 @@ export const DetailCollapseable = ({ session }: { session: GenericSessionInfo })
<Text>{session.sessionName}</Text> <Text>{session.sessionName}</Text>
</Flex> </Flex>
{details.length > 0 && ( {details.length > 0 && (
<Divider label={"Stats for nerds"} labelPosition="center" mt="lg" mb="sm" /> <Divider label={'Stats for nerds'} labelPosition="center" mt="lg" mb="sm" />
)} )}
<Grid> <Group align="start">
{details.map((detail, index) => ( {details.map((detail, index) => (
<Grid.Col xs={12} sm={6} key={index}> <>
<Text weight="bold">{detail.title}</Text> <Stack spacing={0} key={index}>
{detail.metrics <Text weight="bold">{detail.title}</Text>
.filter((x) => x.value !== undefined) {detail.metrics
.map((metric, index2) => ( .filter((x) => x.value !== undefined)
<Group position="apart" key={index2}> .map((metric, index2) => (
<Text>{metric.name}</Text> <Group position="apart" key={index2}>
<Text>{metric.value}</Text> <Text>{metric.name}</Text>
</Group> <Text>{metric.value}</Text>
))} </Group>
</Grid.Col> ))}
</Stack>
{index < details.length - 1 && (
<Divider key={'divider' + index} orientation="vertical" />
)}
</>
))} ))}
</Grid> </Group>
</Card> </Card>
); );
}; };

80
src/widgets/media-server/TableRow.tsx
View File

@@ -1,9 +1,8 @@
import { Avatar, Collapse, Flex, Text, createStyles } from '@mantine/core'; import { Avatar, Flex, Popover, Text, createStyles } from '@mantine/core';
import { useState } from 'react';
import { AppAvatar } from '~/components/AppAvatar'; import { AppAvatar } from '~/components/AppAvatar';
import { GenericSessionInfo } from '~/types/api/media-server/session-info'; import { GenericSessionInfo } from '~/types/api/media-server/session-info';
import { AppType } from '~/types/app'; import { AppType } from '~/types/app';
import { DetailCollapseable } from './DetailCollapseable'; import { DetailCollapseable } from './DetailCollapseable';
import { NowPlayingDisplay } from './NowPlayingDisplay'; import { NowPlayingDisplay } from './NowPlayingDisplay';
@@ -13,42 +12,47 @@ interface TableRowProps {
} }
export const TableRow = ({ session, app }: TableRowProps) => { export const TableRow = ({ session, app }: TableRowProps) => {
const [collapseOpen, setCollapseOpen] = useState(false);
const hasUserThumb = session.userProfilePicture !== undefined; const hasUserThumb = session.userProfilePicture !== undefined;
const { classes } = useStyles(); const { classes } = useStyles();
return ( return (
<> <Popover
<tr className={classes.dataRow} onClick={() => setCollapseOpen(!collapseOpen)}> withArrow
<td> withinPortal
<Flex wrap="nowrap" gap="xs"> radius="lg"
{app?.appearance.iconUrl && <AppAvatar iconUrl={app.appearance.iconUrl} />} shadow="sm"
<Text lineClamp={1}>{session.sessionName}</Text> transitionProps={{
</Flex> transition: 'pop',
</td> }}
<td> >
<Flex wrap="nowrap" gap="sm"> <Popover.Target>
{hasUserThumb ? ( <tr className={classes.dataRow}>
<Avatar src={session.userProfilePicture} size="sm" /> <td>
) : ( <Flex wrap="nowrap" gap="xs">
<Avatar src={null} alt={session.username} size="sm"> {app?.appearance.iconUrl && <AppAvatar iconUrl={app.appearance.iconUrl} />}
{session.username?.at(0)?.toUpperCase()} <Text lineClamp={1}>{session.sessionName}</Text>
</Avatar> </Flex>
)} </td>
<Text style={{ whiteSpace: 'nowrap' }}>{session.username}</Text> <td>
</Flex> <Flex wrap="nowrap" gap="sm">
</td> {hasUserThumb ? (
<td> <Avatar src={session.userProfilePicture} size="sm" />
<NowPlayingDisplay session={session} /> ) : (
</td> <Avatar src={null} alt={session.username} size="sm">
</tr> {session.username?.at(0)?.toUpperCase()}
<tr> </Avatar>
<td className={classes.collapseTableDataCell} colSpan={3}> )}
<Collapse in={collapseOpen} w="100%"> <Text style={{ whiteSpace: 'nowrap' }}>{session.username}</Text>
<DetailCollapseable session={session} /> </Flex>
</Collapse> </td>
</td> <td>
</tr> <NowPlayingDisplay session={session} />
</> </td>
</tr>
</Popover.Target>
<Popover.Dropdown>
<DetailCollapseable session={session} />
</Popover.Dropdown>
</Popover>
); );
}; };
@@ -56,8 +60,4 @@ const useStyles = createStyles(() => ({
dataRow: { dataRow: {
cursor: 'pointer', cursor: 'pointer',
}, },
collapseTableDataCell: {
border: 'none !important',
padding: '0 !important',
},
})); }));