[PAY-2404] Display correct file extensions when selecting download qu…

…ality (#7446)
AudiusProject · Feb 5, 2024 · 109be52 · 109be52
1 parent 4939341
commit 109be52
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 13 deletions.
diff --git a/packages/common/src/utils/fileUtils.ts b/packages/common/src/utils/fileUtils.ts
@@ -1,5 +1,7 @@
 import { Buffer } from 'buffer'
 
+import { Nullable } from './typeUtils'
+
 /** Convert a base64 string to a file object */
 export const dataURLtoFile = async (
   dataUrl: string,
@@ -17,3 +19,19 @@ export const dataURLtoFile = async (
   const buff = Buffer.from(arr[1], 'base64')
   return new File([buff], fileName, { type: mime })
 }
+
+export const getDownloadFilename = ({
+  filename,
+  isOriginal
+}: {
+  filename?: Nullable<string>
+  isOriginal: boolean
+}) => {
+  if (!filename) return ''
+  if (isOriginal) return filename
+  else {
+    const split = filename.split('.')
+    split.pop()
+    return `${split.join('.')}.mp3`
+  }
+}
diff --git a/packages/mobile/src/screens/track-screen/DownloadRow.tsx b/packages/mobile/src/screens/track-screen/DownloadRow.tsx
@@ -1,6 +1,7 @@
-import type { ID, DownloadQuality } from '@audius/common/models'
+import type { ID } from '@audius/common/models'
 import type { CommonState } from '@audius/common/store'
 import { cacheTracksSelectors } from '@audius/common/store'
+import { getDownloadFilename } from '@audius/common/utils'
 import { css } from '@emotion/native'
 import { useSelector } from 'react-redux'
 
@@ -16,20 +17,18 @@ const messages = {
 
 type DownloadRowProps = {
   trackId: ID
-  parentTrackId?: ID
-  quality: DownloadQuality
   hideDownload?: boolean
   index: number
   onDownload: (args: { trackIds: ID[]; parentTrackId?: ID }) => void
+  isOriginal: boolean
 }
 
 export const DownloadRow = ({
   trackId,
-  parentTrackId,
-  quality,
   hideDownload,
   index,
-  onDownload
+  onDownload,
+  isOriginal = true
 }: DownloadRowProps) => {
   const track = useSelector((state: CommonState) =>
     getTrack(state, { id: trackId })
@@ -64,7 +63,10 @@ export const DownloadRow = ({
             ellipsizeMode='tail'
             numberOfLines={1}
           >
-            {track?.orig_filename}
+            {getDownloadFilename({
+              filename: track?.orig_filename,
+              isOriginal
+            })}
           </Text>
         </Flex>
       </Flex>

diff --git a/packages/mobile/src/screens/track-screen/DownloadSection.tsx b/packages/mobile/src/screens/track-screen/DownloadSection.tsx
@@ -225,26 +225,25 @@ export const DownloadSection = ({ trackId }: { trackId: ID }) => {
         {track?.is_downloadable ? (
           <DownloadRow
             trackId={trackId}
-            quality={quality}
             index={ORIGINAL_TRACK_INDEX}
             hideDownload={shouldHideDownload}
             onDownload={handleDownload}
+            isOriginal={quality === DownloadQuality.ORIGINAL}
           />
         ) : null}
         {stemTracks?.map((s, i) => (
           <DownloadRow
             trackId={s.id}
-            parentTrackId={trackId}
             key={s.id}
             index={
               i +
               (track?.is_downloadable
                 ? STEM_INDEX_OFFSET_WITH_ORIGINAL_TRACK
                 : STEM_INDEX_OFFSET_WITHOUT_ORIGINAL_TRACK)
             }
-            quality={quality}
             hideDownload={shouldHideDownload}
             onDownload={handleDownload}
+            isOriginal={quality === DownloadQuality.ORIGINAL}
           />
         ))}
         {shouldDisplayDownloadAll ? (

diff --git a/packages/web/src/components/track/DownloadRow.tsx b/packages/web/src/components/track/DownloadRow.tsx
@@ -1,7 +1,7 @@
 import { useDownloadableContentAccess } from '@audius/common/hooks'
 import { ID } from '@audius/common/models'
 import { cacheTracksSelectors, CommonState } from '@audius/common/store'
-import { formatBytes } from '@audius/common/utils'
+import { getDownloadFilename, formatBytes } from '@audius/common/utils'
 import { Flex, IconReceive, PlainButton, Text } from '@audius/harmony'
 import { shallowEqual, useSelector } from 'react-redux'
 
@@ -21,14 +21,16 @@ type DownloadRowProps = {
   hideDownload?: boolean
   index: number
   size?: number
+  isOriginal: boolean
 }
 
 export const DownloadRow = ({
   trackId,
   onDownload,
   hideDownload,
   index,
-  size
+  size,
+  isOriginal
 }: DownloadRowProps) => {
   const track = useSelector(
     (state: CommonState) => getTrack(state, { id: trackId }),
@@ -68,7 +70,10 @@ export const DownloadRow = ({
             {track?.stem_of?.category ?? messages.fullTrack}
           </Text>
           <Text variant='body' color='subdued'>
-            {track?.orig_filename}
+            {getDownloadFilename({
+              filename: track?.orig_filename,
+              isOriginal
+            })}
           </Text>
         </Flex>
       </Flex>

diff --git a/packages/web/src/components/track/DownloadSection.tsx b/packages/web/src/components/track/DownloadSection.tsx
@@ -273,6 +273,7 @@ export const DownloadSection = ({ trackId }: DownloadSectionProps) => {
                 index={ORIGINAL_TRACK_INDEX}
                 hideDownload={shouldHideDownload}
                 size={fileSizes[trackId]}
+                isOriginal={quality === DownloadQuality.ORIGINAL}
               />
             ) : null}
             {stemTracks.map((s, i) => (
@@ -288,6 +289,7 @@ export const DownloadSection = ({ trackId }: DownloadSectionProps) => {
                     ? STEM_INDEX_OFFSET_WITH_ORIGINAL_TRACK
                     : STEM_INDEX_OFFSET_WITHOUT_ORIGINAL_TRACK)
                 }
+                isOriginal={quality === DownloadQuality.ORIGINAL}
               />
             ))}
             {/* Only display this row if original quality is not available,