Initial work on Shares

ui/src/dialogs/ShareDialog.js

@@ -0,0 +1,134 @@
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+} from '@material-ui/core'
+import {
+  SelectInput,
+  SimpleForm,
+  useCreate,
+  useGetList,
+  useNotify,
+} from 'react-admin'
+import { useMemo, useState } from 'react'
+import { shareUrl } from '../utils'
+import Typography from '@material-ui/core/Typography'
+
+export const ShareDialog = ({ open, close, onClose, ids, resource }) => {
+  const notify = useNotify()
+  const [format, setFormat] = useState('')
+  const [maxBitRate, setMaxBitRate] = useState(0)
+  const { data: formats, loading } = useGetList(
+    'transcoding',
+    {
+      page: 1,
+      perPage: 1000,
+    },
+    { field: 'name', order: 'ASC' }
+  )
+
+  const formatOptions = useMemo(
+    () =>
+      loading
+        ? []
+        : Object.values(formats).map((f) => {
+            return { id: f.targetFormat, name: f.targetFormat }
+          }),
+    [formats, loading]
+  )
+
+  const [createShare] = useCreate(
+    'share',
+    {
+      resourceType: resource,
+      resourceIds: ids?.join(','),
+      format,
+      maxBitRate,
+    },
+    {
+      onSuccess: (res) => {
+        const url = shareUrl(res?.data?.id)
+        close()
+        navigator.clipboard
+          .writeText(url)
+          .then(() => {
+            notify(`URL copied to clipboard: ${url}`, {
+              type: 'info',
+              multiLine: true,
+              duration: 0,
+            })
+          })
+          .catch((err) => {
+            notify(`Error copying URL ${url} to clipboard: ${err.message}`, {
+              type: 'warning',
+              multiLine: true,
+              duration: 0,
+            })
+          })
+      },
+      onFailure: (error) =>
+        notify(`Error sharing media: ${error.message}`, { type: 'warning' }),
+    }
+  )
+
+  return (
+    <Dialog
+      open={open}
+      onClose={onClose}
+      onBackdropClick={onClose}
+      aria-labelledby="info-dialog-album"
+      fullWidth={true}
+      maxWidth={'sm'}
+    >
+      <DialogTitle id="info-dialog-album">
+        Create a link to share your music with friends
+      </DialogTitle>
+      <DialogContent>
+        <SimpleForm toolbar={null} variant={'outlined'}>
+          <Typography variant="body1">Select transcoding options:</Typography>
+          <Typography variant="caption">
+            (Leave options empty for original quality)
+          </Typography>
+          <SelectInput
+            source="format"
+            choices={formatOptions}
+            resettable
+            onChange={(event) => {
+              setFormat(event.target.value)
+            }}
+          />
+          <SelectInput
+            source="bitrate"
+            choices={[
+              { id: 32, name: '32' },
+              { id: 48, name: '48' },
+              { id: 64, name: '64' },
+              { id: 80, name: '80' },
+              { id: 96, name: '96' },
+              { id: 112, name: '112' },
+              { id: 128, name: '128' },
+              { id: 160, name: '160' },
+              { id: 192, name: '192' },
+              { id: 256, name: '256' },
+              { id: 320, name: '320' },
+            ]}
+            resettable
+            onChange={(event) => {
+              setMaxBitRate(event.target.value)
+            }}
+          />
+        </SimpleForm>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={createShare} color="primary">
+          Share
+        </Button>
+        <Button onClick={onClose} color="primary">
+          Cancel
+        </Button>
+      </DialogActions>
+    </Dialog>
+  )
+}

ui/src/dialogs/useDialog.js

@@ -0,0 +1,30 @@
+import { useCallback, useMemo, useState } from 'react'
+
+// Idea from https://blog.bitsrc.io/new-react-design-pattern-return-component-from-hooks-79215c3eac00
+export const useDialog = () => {
+  const [anchorEl, setAnchorEl] = useState(null)
+
+  const open = useCallback((event) => {
+    event?.stopPropagation()
+    setAnchorEl(event.currentTarget)
+  }, [])
+
+  const close = useCallback((event) => {
+    event?.stopPropagation()
+    setAnchorEl(null)
+  }, [])
+
+  const props = useMemo(() => {
+    return {
+      anchorEl,
+      open: Boolean(anchorEl),
+      onClose: close,
+    }
+  }, [anchorEl, close])
+
+  return {
+    open,
+    close,
+    props,
+  }
+}