Dockery/Homarr
1
0
Fork 0
mirror of https://github.com/ajnart/homarr.git synced 2025-11-14 17:26:26 +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

44
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 { GenericSessionInfo } from '~/types/api/media-server/session-info';
export const DetailCollapseable = ({ session }: { session: GenericSessionInfo }) => {
@@ -11,18 +10,18 @@ export const DetailCollapseable = ({ session }: { session: GenericSessionInfo })
details = [
...details,
{
title: "Video",
title: 'Video',
metrics: [
{
name: "Resolution",
name: 'Resolution',
value: `${session.currentlyPlaying.metadata.video.width}x${session.currentlyPlaying.metadata.video.height}`,
},
{
name: "Framerate",
name: 'Framerate',
value: session.currentlyPlaying.metadata.video.videoFrameRate,
},
{
name: "Video Codec",
name: 'Video Codec',
value: session.currentlyPlaying.metadata.video.videoCodec,
},
{
@@ -39,14 +38,14 @@ export const DetailCollapseable = ({ session }: { session: GenericSessionInfo })
details = [
...details,
{
title: "Audio",
title: 'Audio',
metrics: [
{
name: "Audio Channels",
name: 'Audio Channels',
value: `${session.currentlyPlaying.metadata.audio.audioChannels}`,
},
{
name: "Audio Codec",
name: 'Audio Codec',
value: session.currentlyPlaying.metadata.audio.audioCodec,
},
],
@@ -58,24 +57,24 @@ export const DetailCollapseable = ({ session }: { session: GenericSessionInfo })
details = [
...details,
{
title: "Transcoding",
title: 'Transcoding',
metrics: [
{
name: "Resolution",
name: 'Resolution',
value: `${session.currentlyPlaying.metadata.transcoding.width}x${session.currentlyPlaying.metadata.transcoding.height}`,
},
{
name: "Context",
name: 'Context',
value: session.currentlyPlaying.metadata.transcoding.context,
},
{
name: "Hardware Encoding Requested",
name: 'Hardware Encoding Requested',
value: session.currentlyPlaying.metadata.transcoding.transcodeHwRequested
? 'yes'
: 'no',
},
{
name: "Source Codec",
name: 'Source Codec',
value:
session.currentlyPlaying.metadata.transcoding.sourceAudioCodec ||
session.currentlyPlaying.metadata.transcoding.sourceVideoCodec
@@ -83,7 +82,7 @@ export const DetailCollapseable = ({ session }: { session: GenericSessionInfo })
: undefined,
},
{
name: "Target Codec",
name: 'Target Codec',
value: `${session.currentlyPlaying.metadata.transcoding.videoCodec} ${session.currentlyPlaying.metadata.transcoding.audioCodec}`,
},
],
@@ -109,11 +108,12 @@ export const DetailCollapseable = ({ session }: { session: GenericSessionInfo })
<Text>{session.sessionName}</Text>
</Flex>
{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) => (
<Grid.Col xs={12} sm={6} key={index}>
<>
<Stack spacing={0} key={index}>
<Text weight="bold">{detail.title}</Text>
{detail.metrics
.filter((x) => x.value !== undefined)
@@ -123,9 +123,13 @@ export const DetailCollapseable = ({ session }: { session: GenericSessionInfo })
<Text>{metric.value}</Text>
</Group>
))}
</Grid.Col>
</Stack>
{index < details.length - 1 && (
<Divider key={'divider' + index} orientation="vertical" />
)}
</>
))}
</Grid>
</Group>
</Card>
);
};

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

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