Add button to share selected songs

ui/src/actions/dialogs.js

@@ -15,11 +15,12 @@ export const DOWNLOAD_MENU_SONG = 'song'
 export const SHARE_MENU_OPEN = 'SHARE_MENU_OPEN'
 export const SHARE_MENU_CLOSE = 'SHARE_MENU_CLOSE'
 
-export const openShareMenu = (ids, resource, name) => ({
+export const openShareMenu = (ids, resource, name, label) => ({
   type: SHARE_MENU_OPEN,
   ids,
   resource,
   name,
+  label,
 })
 
 export const closeShareMenu = () => ({

ui/src/common/BatchShareButton.js

@@ -0,0 +1,40 @@
+import React from 'react'
+import { Button, useTranslate, useUnselectAll } from 'react-admin'
+import { useDispatch } from 'react-redux'
+import { openShareMenu } from '../actions'
+import ShareIcon from '@material-ui/icons/Share'
+
+export const BatchShareButton = ({ resource, selectedIds, className }) => {
+  const dispatch = useDispatch()
+  const translate = useTranslate()
+  const unselectAll = useUnselectAll()
+
+  const share = () => {
+    dispatch(
+      openShareMenu(
+        selectedIds,
+        resource,
+        translate('ra.action.bulk_actions', {
+          _: 'ra.action.bulk_actions',
+          smart_count: selectedIds.length,
+        }),
+        'message.shareBatchDialogTitle'
+      )
+    )
+    unselectAll(resource)
+  }
+
+  const caption = translate('ra.action.share')
+  return (
+    <Button
+      aria-label={caption}
+      onClick={share}
+      label={caption}
+      className={className}
+    >
+      <ShareIcon />
+    </Button>
+  )
+}
+
+BatchShareButton.propTypes = {}

ui/src/common/SongBulkActions.js

@@ -6,6 +6,7 @@ import PlayArrowIcon from '@material-ui/icons/PlayArrow'
 import { BatchPlayButton } from './index'
 import { AddToPlaylistButton } from './AddToPlaylistButton'
 import { makeStyles } from '@material-ui/core/styles'
+import { BatchShareButton } from './BatchShareButton'
 
 const useStyles = makeStyles((theme) => ({
   button: {
@@ -42,6 +43,7 @@ export const SongBulkActions = (props) => {
         icon={<RiPlayListAddFill />}
         className={classes.button}
       />
+      <BatchShareButton {...props} className={classes.button} />
       <AddToPlaylistButton {...props} className={classes.button} />
     </Fragment>
   )

ui/src/dialogs/ShareDialog.js

@@ -19,9 +19,13 @@ import { useDispatch, useSelector } from 'react-redux'
 import { closeShareMenu } from '../actions'
 
 export const ShareDialog = () => {
-  const { open, ids, resource, name } = useSelector(
-    (state) => state.shareDialog
-  )
+  const {
+    open,
+    ids,
+    resource,
+    name,
+    label = 'message.shareDialogTitle',
+  } = useSelector((state) => state.shareDialog)
   const dispatch = useDispatch()
   const notify = useNotify()
   const translate = useTranslate()
@@ -88,11 +92,12 @@ export const ShareDialog = () => {
     >
       <DialogTitle id="share-dialog">
         {resource &&
-          translate('message.shareDialogTitle', {
+          translate(label, {
             resource: translate(`resources.${resource}.name`, {
               smart_count: ids?.length,
             }).toLocaleLowerCase(),
             name,
+            smart_count: ids?.length,
           })}
       </DialogTitle>
       <DialogContent>

ui/src/i18n/en.json

@@ -374,6 +374,7 @@
         "lastfmLink": "Read More...",
         "shareOriginalFormat": "Share in original format",
         "shareDialogTitle": "Share %{resource} '%{name}'",
+        "shareBatchDialogTitle": "Share 1 %{resource} |||| Share %{smart_count} %{resource}",
         "shareSuccess": "URL copied to clipboard: %{url}",
         "shareFailure": "Error copying URL %{url} to clipboard",
         "downloadDialogTitle": "Download %{resource} '%{name}' (%{size})",

ui/src/reducers/dialogReducer.js

@@ -26,7 +26,7 @@ export const shareDialogReducer = (
   },
   payload
 ) => {
-  const { type, ids, resource, name } = payload
+  const { type, ids, resource, name, label } = payload
   switch (type) {
     case SHARE_MENU_OPEN:
       return {
@@ -35,6 +35,7 @@ export const shareDialogReducer = (
         ids,
         resource,
         name,
+        label,
       }
     case SHARE_MENU_CLOSE:
       return {