Make Players and Transcodings view mobile-friendly

ui/src/player/PlayerList.js

@@ -7,22 +7,34 @@ import {
   FunctionField,
   ReferenceField
 } from 'react-admin'
-import { Title } from '../common'
+import { useMediaQuery } from '@material-ui/core'
+import { SimpleList, Title } from '../common'
 
-const PlayerList = (props) => (
-  <List title={<Title subTitle={'Players'} />} exporter={false} {...props}>
-    <Datagrid rowClick="edit">
-      <TextField source="name" />
-      <ReferenceField source="transcodingId" reference="transcoding">
+const PlayerList = (props) => {
+  const isXsmall = useMediaQuery((theme) => theme.breakpoints.down('xs'))
+  return (
+    <List title={<Title subTitle={'Players'} />} exporter={false} {...props}>
+      {isXsmall ? (
+        <SimpleList
+          primaryText={(r) => r.client}
+          secondaryText={(r) => r.userName}
+          tertiaryText={(r) => (r.maxBitRate ? r.maxBitRate : 'Unlimited')}
+        />
+      ) : (
+      <Datagrid rowClick="edit">
         <TextField source="name" />
-      </ReferenceField>
-      <FunctionField
-        source="maxBitRate"
-        render={(r) => (r.maxBitRate ? r.maxBitRate : 'Unlimited')}
-      />
-      <DateField source="lastSeen" showTime />
-    </Datagrid>
-  </List>
-)
+        <ReferenceField source="transcodingId" reference="transcoding">
+          <TextField source="name" />
+        </ReferenceField>
+        <FunctionField
+          source="maxBitRate"
+          render={(r) => (r.maxBitRate ? r.maxBitRate : 'Unlimited')}
+        />
+        <DateField source="lastSeen" showTime />
+      </Datagrid>
+        )}
+    </List>
+  )
+}
 
 export default PlayerList

ui/src/transcoding/TranscodingList.js

@@ -1,16 +1,28 @@
 import React from 'react'
 import { Datagrid, List, TextField } from 'react-admin'
-import { Title } from '../common'
+import { useMediaQuery } from '@material-ui/core'
+import { SimpleList, Title } from '../common'
 
-const TranscodingList = (props) => (
-  <List title={<Title subTitle={'Transcodings'} />} exporter={false} {...props}>
-    <Datagrid rowClick="edit">
-      <TextField source="name" />
-      <TextField source="targetFormat" />
-      <TextField source="defaultBitRate" />
-      <TextField source="command" />
-    </Datagrid>
-  </List>
-)
+const TranscodingList = (props) => {
+  const isXsmall = useMediaQuery((theme) => theme.breakpoints.down('xs'))
+  return (
+    <List title={<Title subTitle={'Transcodings'} />} exporter={false} {...props}>
+      {isXsmall ? (
+        <SimpleList
+          primaryText={(r) => r.name}
+          secondaryText={(r) => `format: ${r.targetFormat}`}
+          tertiaryText={(r) => r.defaultBitRate}
+        />
+      ) : (
+      <Datagrid rowClick="edit">
+        <TextField source="name" />
+        <TextField source="targetFormat" />
+        <TextField source="defaultBitRate" />
+        <TextField source="command" />
+      </Datagrid>
+        )}
+    </List>
+  )
+}
 
 export default TranscodingList