Add option to allow share to be downloaded

ui/src/config.js

@@ -22,6 +22,7 @@ const defaultConfig = {
   defaultUIVolume: 100,
   enableUserEditing: true,
   enableSharing: true,
+  defaultDownloadableShare: true,
   devSidebarPlaylists: true,
   lastFMEnabled: true,
   lastFMApiKey: '9b94a5515ea66b2da3ec03c12300327e',

ui/src/dialogs/ShareDialog.js

@@ -8,6 +8,7 @@ import {
 import {
   SimpleForm,
   TextInput,
+  BooleanInput,
   useCreate,
   useNotify,
   useTranslate,
@@ -17,6 +18,7 @@ import { shareUrl } from '../utils'
 import { useTranscodingOptions } from './useTranscodingOptions'
 import { useDispatch, useSelector } from 'react-redux'
 import { closeShareMenu } from '../actions'
+import config from '../config'
 
 export const ShareDialog = () => {
   const {
@@ -30,6 +32,9 @@ export const ShareDialog = () => {
   const notify = useNotify()
   const translate = useTranslate()
   const [description, setDescription] = useState('')
+  const [downloadable, setDownloadable] = useState(
+    config.defaultDownloadableShare
+  )
   useEffect(() => {
     setDescription('')
   }, [ids])
@@ -41,6 +46,7 @@ export const ShareDialog = () => {
       resourceType: resource,
       resourceIds: ids?.join(','),
       description,
+      downloadable,
       ...(!originalFormat && { format }),
       ...(!originalFormat && { maxBitRate }),
     },
@@ -105,12 +111,21 @@ export const ShareDialog = () => {
       <DialogContent>
         <SimpleForm toolbar={null} variant={'outlined'}>
           <TextInput
-            source="description"
+            resource={'share'}
+            source={'description'}
             fullWidth
             onChange={(event) => {
               setDescription(event.target.value)
             }}
           />
+          <BooleanInput
+            resource={'share'}
+            source={'downloadable'}
+            defaultValue={downloadable}
+            onChange={(value) => {
+              setDownloadable(value)
+            }}
+          />
           <TranscodingOptionsInput
             fullWidth
             label={translate('message.shareOriginalFormat')}

ui/src/i18n/en.json

@@ -184,6 +184,7 @@
                 "username": "Shared By",
                 "url": "URL",
                 "description": "Description",
+                "downloadable": "Allow Downloads?",
                 "contents": "Contents",
                 "expiresAt": "Expires",
                 "lastVisitedAt": "Last Visited",

ui/src/share/ShareEdit.js

@@ -1,5 +1,6 @@
 import {
   DateTimeInput,
+  BooleanInput,
   Edit,
   NumberField,
   SimpleForm,
@@ -19,6 +20,7 @@ export const ShareEdit = (props) => {
           {url}
         </Link>
         <TextInput source="description" />
+        <BooleanInput source="downloadable" />
         <DateTimeInput source="expiresAt" />
         <TextInput source="contents" disabled />
         <TextInput source="format" disabled />

ui/src/share/ShareList.js

@@ -1,6 +1,7 @@
 import {
   Datagrid,
   FunctionField,
+  BooleanField,
   List,
   NumberField,
   SimpleList,
@@ -24,6 +25,7 @@ export const FormatInfo = ({ record, size }) => {
 
 const ShareList = (props) => {
   const isXsmall = useMediaQuery((theme) => theme.breakpoints.down('xs'))
+  const isDesktop = useMediaQuery((theme) => theme.breakpoints.up('lg'))
   const translate = useTranslate()
   const notify = useNotify()
 
@@ -101,10 +103,13 @@ const ShareList = (props) => {
           />
           <TextField source="username" />
           <TextField source="description" />
-          <TextField source="contents" />
-          <FormatInfo source="format" />
+          {isDesktop && <TextField source="contents" />}
+          {isDesktop && <FormatInfo source="format" />}
+          <BooleanField source="downloadable" />
           <NumberField source="visitCount" />
-          <DateField source="lastVisitedAt" showTime sortByOrder={'DESC'} />
+          {isDesktop && (
+            <DateField source="lastVisitedAt" showTime sortByOrder={'DESC'} />
+          )}
           <DateField source="expiresAt" showTime />
         </Datagrid>
       )}