feat: optimized for small screens (only)

2020-02-07 12:36:26 -05:00
parent 81e1a7088f
commit 2ca98d8e81
7 changed files with 165 additions and 116 deletions
@@ -0,0 +1,46 @@
+import { Loading, useGetOne } from 'react-admin'
+import { Card, CardContent, CardMedia, Typography } from '@material-ui/core'
+import { subsonicUrl } from '../subsonic'
+import React from 'react'
+
+export const AlbumDetails = ({ id, children, classes }) => {
+  const { data, loading, error } = useGetOne('album', id)
+
+  if (loading) {
+    return <Loading />
+  }
+
+  if (error) {
+    return <p>ERROR: {error}</p>
+  }
+
+  const genreYear = (data) => {
+    let genreDateLine = []
+    if (data.genre) {
+      genreDateLine.push(data.genre)
+    }
+    if (data.year) {
+      genreDateLine.push(data.year)
+    }
+    return genreDateLine.join(' - ')
+  }
+
+  return (
+    <Card className={classes.container}>
+      <CardMedia
+        image={subsonicUrl('getCoverArt', data.coverArtId || 'not_found')}
+        className={classes.albumCover}
+      />
+      <CardContent className={classes.albumDetails}>
+        <Typography variant="h5" className={classes.albumTitle}>
+          {data.name}
+        </Typography>
+        <Typography component="h6">
+          {data.albumArtist || data.artist}
+        </Typography>
+        <Typography variant="h7">{genreYear(data)}</Typography>
+      </CardContent>
+      {children}
+    </Card>
+  )
+}