Merge pull request #1247 from jj-style/feature/1099-download-mp3

Add episode download button to media item controls dropdown.
podverse · Apr 10, 2024 · e40394a · e40394a
2 parents ef48135 + 9ec118e
commit e40394a
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 0 deletions.
diff --git a/public/locales/en/common.json b/public/locales/en/common.json
@@ -96,6 +96,7 @@
   "Download on the F-Droid Store": "Download on F-Droid",
   "Download on the Google Play Store": "Download on Google Play",
   "DownloadDataBackup": "Download a backup of your data.",
+  "Download Episode": "Download Episode",
   "Duration": "Duration",
   "Edit": "Edit",
   "Edit activation description - remove": "Upon activation, a button for removal appears next to each list item.",

diff --git a/src/components/MediaItemControls/MediaItemControls.tsx b/src/components/MediaItemControls/MediaItemControls.tsx
@@ -19,6 +19,7 @@ import { modalsAddToPlaylistShowOrAlert } from '~/state/modals/addToPlaylist/act
 import { OmniAuralState } from '~/state/omniauralState'
 import { ButtonCircle, Dropdown, Icon } from '..'
 import { LiveStatusBadge } from '../LiveStatusBadge/LiveStatusBadge'
+import { AppearanceTypes, useToasts } from 'react-toast-notifications'
 
 type Props = {
   buttonSize: 'small' | 'medium' | 'large'
@@ -41,6 +42,7 @@ const _markAsPlayedKey = '_markAsPlayedKey'
 const _markAsUnplayedKey = '_markAsUnplayedKey'
 const _editClip = '_editClip'
 const _deleteClip = '_deleteClip'
+const _downloadEpisodeKey = '_downloadEpisode'
 
 export const MediaItemControls = ({
   buttonSize,
@@ -56,6 +58,8 @@ export const MediaItemControls = ({
   const [userInfo] = useOmniAural('session.userInfo') as [OmniAuralState['session']['userInfo']]
   const [player] = useOmniAural('player') as [OmniAuralState['player']]
 
+  const { addToast } = useToasts()
+
   /* Since we're not using useOmniAural for historyItemsIndex, call setForceRefresh to re-render */
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [forceRefresh, setForceRefresh] = useState<number>(0)
@@ -73,6 +77,16 @@ export const MediaItemControls = ({
 
   /* Function Helpers */
 
+  // helper to show a toast with the given appearance and message
+  // when downloading a file
+  const downloadToast = (type: AppearanceTypes, msg: string) => {
+    addToast(msg, {
+      appearance: type,
+      autoDismiss: true,
+      autoDismissTimeout: 35000
+    })
+  }
+
   const onChange = async (selected) => {
     const item = selected[0]
     if (item) {
@@ -105,6 +119,8 @@ export const MediaItemControls = ({
         if (shouldDelete) {
           deleteMediaRef(nowPlayingItem.clipId)
         }
+      } else if (item.key === _downloadEpisodeKey) {
+        await _handleDownload()
       }
     }
   }
@@ -113,6 +129,36 @@ export const MediaItemControls = ({
     await playerTogglePlayOrLoadNowPlayingItem(nowPlayingItem)
   }
 
+  const _handleDownload = async () => {
+    downloadToast('info', `Downloading ${nowPlayingItem.episodeTitle}`)
+    fetch(nowPlayingItem.episodeMediaUrl, {
+      method: 'GET'
+    })
+      .then((response) => {
+        if (!response.ok) {
+          throw response.status
+        }
+        return response.blob()
+      })
+      .then((blob) => {
+        const url = window.URL.createObjectURL(new Blob([blob]))
+
+        const link = document.createElement('a')
+        link.href = url
+        link.download = nowPlayingItem.episodeTitle?.endsWith('.mp3')
+          ? nowPlayingItem.episodeTitle
+          : nowPlayingItem.episodeTitle + '.mp3'
+
+        document.body.appendChild(link)
+        link.click()
+        link.parentNode.removeChild(link)
+        downloadToast('success', `${nowPlayingItem.episodeTitle} downloaded`)
+      })
+      .catch((err) => {
+        downloadToast('error', `Error downloading ${nowPlayingItem.episodeTitle}: ${err}`)
+      })
+  }
+
   const _handleQueueNext = async () => {
     if (userInfo) {
       const newUserQueueItems = await addQueueItemNextOnServer(nowPlayingItem)
@@ -177,6 +223,7 @@ export const MediaItemControls = ({
       } else {
         items.push({ i18nKey: 'Mark as Played', key: _markAsPlayedKey })
       }
+      items.push({ i18nKey: 'Download Episode', key: _downloadEpisodeKey })
     }
 
     if (isLoggedInUserMediaRef) {