Extract transcoding options to its own hook

ui/src/album/AlbumActions.js

@@ -108,7 +108,7 @@ const AlbumActions = ({
           </Button>
           {config.devEnableShare && (
             <Button
-              onClick={shareDialog.open}
+              onClick={shareDialog.openDialog}
               label={translate('resources.album.actions.share')}
             >
               <ShareIcon />
@@ -130,7 +130,6 @@ const AlbumActions = ({
       </div>
       <ShareDialog
         {...shareDialog.props}
-        close={shareDialog.close}
         ids={[record.id]}
         resource={'album'}
         title={`Share album '${record.name}'`}

ui/src/dialogs/ShareDialog.js

@@ -4,58 +4,17 @@ import {
   DialogActions,
   DialogContent,
   DialogTitle,
-  FormControlLabel,
-  Switch,
 } from '@material-ui/core'
-import {
+import { SimpleForm, TextInput, useCreate, useNotify } from 'react-admin'
-  SelectInput,
+import { useState } from 'react'
-  SimpleForm,
-  TextInput,
-  useCreate,
-  useGetList,
-  useNotify,
-} from 'react-admin'
-import { useMemo, useState } from 'react'
 import { shareUrl } from '../utils'
-import config from '../config'
+import { useTranscodingOptions } from './useTranscodingOptions'
-import { DEFAULT_SHARE_BITRATE } from '../consts'
 
-export const ShareDialog = ({ open, close, onClose, ids, resource, title }) => {
+export const ShareDialog = ({ open, onClose, ids, resource, title }) => {
   const notify = useNotify()
-  const [format, setFormat] = useState(config.defaultDownsamplingFormat)
-  const [maxBitRate, setMaxBitRate] = useState(DEFAULT_SHARE_BITRATE)
-  const [originalFormat, setUseOriginalFormat] = useState(true)
   const [description, setDescription] = useState('')
-  const { data: formats, loading: loadingFormats } = useGetList(
+  const { TranscodingOptionsInput, format, maxBitRate, originalFormat } =
-    'transcoding',
+    useTranscodingOptions()
-    {
-      page: 1,
-      perPage: 1000,
-    },
-    { field: 'name', order: 'ASC' }
-  )
-
-  const formatOptions = useMemo(
-    () =>
-      loadingFormats
-        ? []
-        : Object.values(formats).map((f) => {
-            return { id: f.targetFormat, name: f.targetFormat }
-          }),
-    [formats, loadingFormats]
-  )
-
-  const handleOriginal = (e) => {
-    const original = e.target.checked
-
-    setUseOriginalFormat(original)
-
-    if (original) {
-      setFormat('')
-      setMaxBitRate(0)
-    }
-  }
-
   const [createShare] = useCreate(
     'share',
     {
@@ -68,7 +27,7 @@ export const ShareDialog = ({ open, close, onClose, ids, resource, title }) => {
     {
       onSuccess: (res) => {
         const url = shareUrl(res?.data?.id)
-        close()
+        onClose()
         navigator.clipboard
           .writeText(url)
           .then(() => {
@@ -98,54 +57,19 @@ export const ShareDialog = ({ open, close, onClose, ids, resource, title }) => {
       onBackdropClick={onClose}
       aria-labelledby="share-dialog"
       fullWidth={true}
-      maxWidth={'sm'}
+      maxWidth={'xs'}
     >
       <DialogTitle id="share-dialog">{title}</DialogTitle>
       <DialogContent>
         <SimpleForm toolbar={null} variant={'outlined'}>
-          <FormControlLabel
-            control={<Switch checked={originalFormat} />}
-            label={'Share in original format'}
-            onChange={handleOriginal}
-          />
           <TextInput
             source="description"
+            fullWidth
             onChange={(event) => {
               setDescription(event.target.value)
             }}
           />
-          {!originalFormat && (
+          <TranscodingOptionsInput />
-            <SelectInput
-              source="format"
-              defaultValue={format}
-              choices={formatOptions}
-              onChange={(event) => {
-                setFormat(event.target.value)
-              }}
-            />
-          )}
-          {!originalFormat && (
-            <SelectInput
-              source="maxBitRate"
-              defaultValue={maxBitRate}
-              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' },
-              ]}
-              onChange={(event) => {
-                setMaxBitRate(event.target.value)
-              }}
-            />
-          )}
         </SimpleForm>
       </DialogContent>
       <DialogActions>

ui/src/dialogs/useDialog.js

@@ -4,12 +4,12 @@ import { useCallback, useMemo, useState } from 'react'
 export const useDialog = () => {
   const [anchorEl, setAnchorEl] = useState(null)
 
-  const open = useCallback((event) => {
+  const openDialog = useCallback((event) => {
     event?.stopPropagation()
     setAnchorEl(event.currentTarget)
   }, [])
 
-  const close = useCallback((event) => {
+  const closeDialog = useCallback((event) => {
     event?.stopPropagation()
     setAnchorEl(null)
   }, [])
@@ -18,13 +18,13 @@ export const useDialog = () => {
     return {
       anchorEl,
       open: Boolean(anchorEl),
-      onClose: close,
+      onClose: closeDialog,
     }
-  }, [anchorEl, close])
+  }, [anchorEl, closeDialog])
 
   return {
-    open,
+    openDialog,
-    close,
+    closeDialog,
     props,
   }
 }

ui/src/dialogs/useTranscodingOptions.js

@@ -0,0 +1,97 @@
+import React, { useCallback, useMemo, useState } from 'react'
+import config from '../config'
+import { DEFAULT_SHARE_BITRATE } from '../consts'
+import { BooleanInput, SelectInput, useGetList } from 'react-admin'
+
+export const useTranscodingOptions = () => {
+  const [format, setFormat] = useState(config.defaultDownsamplingFormat)
+  const [maxBitRate, setMaxBitRate] = useState(DEFAULT_SHARE_BITRATE)
+  const [originalFormat, setUseOriginalFormat] = useState(true)
+
+  const { data: formats, loading: loadingFormats } = useGetList(
+    'transcoding',
+    {
+      page: 1,
+      perPage: 1000,
+    },
+    { field: 'name', order: 'ASC' }
+  )
+
+  const formatOptions = useMemo(
+    () =>
+      loadingFormats
+        ? []
+        : Object.values(formats).map((f) => {
+            return { id: f.targetFormat, name: f.targetFormat }
+          }),
+    [formats, loadingFormats]
+  )
+
+  const handleOriginal = useCallback(
+    (original) => {
+      setUseOriginalFormat(original)
+      if (original) {
+        setFormat(config.defaultDownsamplingFormat)
+        setMaxBitRate(DEFAULT_SHARE_BITRATE)
+      }
+    },
+    [setUseOriginalFormat, setFormat, setMaxBitRate]
+  )
+
+  const TranscodingOptionsInput = useMemo(() => {
+    return ({ basePath, ...props }) => {
+      return (
+        <>
+          <BooleanInput
+            {...props}
+            source="original"
+            defaultValue={originalFormat}
+            label={'Share in original format'}
+            onChange={handleOriginal}
+          />
+          {!originalFormat && (
+            <>
+              <SelectInput
+                {...props}
+                source="format"
+                defaultValue={format}
+                choices={formatOptions}
+                onChange={(event) => {
+                  setFormat(event.target.value)
+                }}
+              />
+              <SelectInput
+                {...props}
+                source="maxBitRate"
+                defaultValue={maxBitRate}
+                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' },
+                ]}
+                onChange={(event) => {
+                  setMaxBitRate(event.target.value)
+                }}
+              />
+            </>
+          )}
+        </>
+      )
+    }
+  }, [handleOriginal, formatOptions, format, maxBitRate, originalFormat])
+
+  return {
+    TranscodingOptionsInput,
+    format,
+    maxBitRate,
+    originalFormat,
+  }
+}