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

src/widgets/media-server/DetailCollapseable.tsx

@@ -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,23 +108,28 @@ 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}>
-            <Text weight="bold">{detail.title}</Text>
-            {detail.metrics
-              .filter((x) => x.value !== undefined)
-              .map((metric, index2) => (
-                <Group position="apart" key={index2}>
-                  <Text>{metric.name}</Text>
-                  <Text>{metric.value}</Text>
-                </Group>
-              ))}
-          </Grid.Col>
+          <>
+            <Stack spacing={0} key={index}>
+              <Text weight="bold">{detail.title}</Text>
+              {detail.metrics
+                .filter((x) => x.value !== undefined)
+                .map((metric, index2) => (
+                  <Group position="apart" key={index2}>
+                    <Text>{metric.name}</Text>
+                    <Text>{metric.value}</Text>
+                  </Group>
+                ))}
+            </Stack>
+            {index < details.length - 1 && (
+              <Divider key={'divider' + index} orientation="vertical" />
+            )}
+          </>
         ))}
-      </Grid>
+      </Group>
     </Card>
   );
 };

src/widgets/media-server/TableRow.tsx

@@ -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,42 +12,47 @@ 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)}>
-        <td>
-          <Flex wrap="nowrap" gap="xs">
-            {app?.appearance.iconUrl && <AppAvatar iconUrl={app.appearance.iconUrl} />}
-            <Text lineClamp={1}>{session.sessionName}</Text>
-          </Flex>
-        </td>
-        <td>
-          <Flex wrap="nowrap" gap="sm">
-            {hasUserThumb ? (
-              <Avatar src={session.userProfilePicture} size="sm" />
-            ) : (
-              <Avatar src={null} alt={session.username} size="sm">
-                {session.username?.at(0)?.toUpperCase()}
-              </Avatar>
-            )}
-            <Text style={{ whiteSpace: 'nowrap' }}>{session.username}</Text>
-          </Flex>
-        </td>
-        <td>
-          <NowPlayingDisplay session={session} />
-        </td>
-      </tr>
-      <tr>
-        <td className={classes.collapseTableDataCell} colSpan={3}>
-          <Collapse in={collapseOpen} w="100%">
-            <DetailCollapseable session={session} />
-          </Collapse>
-        </td>
-      </tr>
-    </>
+    <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} />}
+              <Text lineClamp={1}>{session.sessionName}</Text>
+            </Flex>
+          </td>
+          <td>
+            <Flex wrap="nowrap" gap="sm">
+              {hasUserThumb ? (
+                <Avatar src={session.userProfilePicture} size="sm" />
+              ) : (
+                <Avatar src={null} alt={session.username} size="sm">
+                  {session.username?.at(0)?.toUpperCase()}
+                </Avatar>
+              )}
+              <Text style={{ whiteSpace: 'nowrap' }}>{session.username}</Text>
+            </Flex>
+          </td>
+          <td>
+            <NowPlayingDisplay session={session} />
+          </td>
+        </tr>
+      </Popover.Target>
+      <Popover.Dropdown>
+        <DetailCollapseable session={session} />
+      </Popover.Dropdown>
+    </Popover>
   );
 };
 
@@ -56,8 +60,4 @@ const useStyles = createStyles(() => ({
   dataRow: {
     cursor: 'pointer',
   },
-  collapseTableDataCell: {
-    border: 'none !important',
-    padding: '0 !important',
-  },
 }));