From 109be5213f90f2a22ac4faca64c7d33238430b2f Mon Sep 17 00:00:00 2001 From: Reed <3893871+dharit-tan@users.noreply.github.com> Date: Mon, 5 Feb 2024 11:53:03 -0500 Subject: [PATCH] [PAY-2404] Display correct file extensions when selecting download quality (#7446) --- packages/common/src/utils/fileUtils.ts | 18 ++++++++++++++++++ .../src/screens/track-screen/DownloadRow.tsx | 16 +++++++++------- .../screens/track-screen/DownloadSection.tsx | 5 ++--- .../web/src/components/track/DownloadRow.tsx | 11 ++++++++--- .../src/components/track/DownloadSection.tsx | 2 ++ 5 files changed, 39 insertions(+), 13 deletions(-) diff --git a/packages/common/src/utils/fileUtils.ts b/packages/common/src/utils/fileUtils.ts index a9176bef241..38eee35ff55 100644 --- 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 + 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 index e7a7266cb88..b5862ee85da 100644 --- 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 + })} diff --git a/packages/mobile/src/screens/track-screen/DownloadSection.tsx b/packages/mobile/src/screens/track-screen/DownloadSection.tsx index 2f590bce753..358ba320792 100644 --- a/packages/mobile/src/screens/track-screen/DownloadSection.tsx +++ b/packages/mobile/src/screens/track-screen/DownloadSection.tsx @@ -225,16 +225,15 @@ export const DownloadSection = ({ trackId }: { trackId: ID }) => { {track?.is_downloadable ? ( ) : null} {stemTracks?.map((s, i) => ( { ? 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 index 36bb0a4b5b8..35547184b32 100644 --- 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,6 +21,7 @@ type DownloadRowProps = { hideDownload?: boolean index: number size?: number + isOriginal: boolean } export const DownloadRow = ({ @@ -28,7 +29,8 @@ export const DownloadRow = ({ 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} - {track?.orig_filename} + {getDownloadFilename({ + filename: track?.orig_filename, + isOriginal + })} diff --git a/packages/web/src/components/track/DownloadSection.tsx b/packages/web/src/components/track/DownloadSection.tsx index 614ce216510..03c714539ae 100644 --- 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,