[PAY-2332] Add new stems and downloads upload UI #7333

sddioulde · 2024-01-25T18:27:44Z

Description

First PR to add new lossless / stems and downloads UI. Commits show the breakdown of the work.

#7382 merges into this one.

How Has This Been Tested?

Please describe the tests that you ran to verify your changes. Provide repro instructions & any configuration.

local web dapp vs stage

audius-infra · 2024-01-25T18:31:34Z

Preview this change https://demo.audius.co/sd-stems-and-downloads

audius-infra · 2024-01-25T19:37:09Z

Preview this change https://demo.audius.co/sd-stems-and-downloads

audius-infra · 2024-01-26T17:10:34Z

Preview this change https://demo.audius.co/sd-stems-and-downloads

audius-infra · 2024-01-26T17:29:00Z

Preview this change https://demo.audius.co/sd-stems-and-downloads

dharit-tan · 2024-01-30T18:05:27Z

packages/web/src/components/upload/Dropzone.module.css

@@ -65,6 +74,12 @@
  transform: scale(0.95);
 }

+.iconUpload.truncated {
+  margin: 0 12px;
+  width: 20px;


nit: unit vars

…control change

audius-infra · 2024-01-30T19:01:02Z

Preview this change https://demo.audius.co/sd-stems-and-downloads

dharit-tan · 2024-01-30T23:22:29Z

packages/web/src/components/upload/Dropzone.tsx

+        ) : null}
+        <Text>
+          {message}
+          <TextLink css={{ color: '#a30cb3' }}>


this feels weird.. is this not in our design system?

dharit-tan · 2024-01-31T17:40:57Z

packages/web/src/components/upload/TrackPreviewNew.tsx

 }

 export const TrackPreviewNew = (props: TrackPreviewProps) => {
-  const { isEnabled: isLosslessDownloadsEnabled } = useFeatureFlag(
+  const isLosslessDownloadsEnabled = getFeatureEnabled(


i think we prefer useFeatureFlag

yeah was wondering. thx

dharit-tan · 2024-01-31T19:32:27Z

packages/web/src/pages/upload-page/fields/download-availability/DownloadAvailability.tsx

+    {
+      key: DownloadTrackAvailabilityType.USDC_PURCHASE,
+      text: messages.premium,
+      icon: <IconCart size='s' fill='#858199' />


ditto why do we need custom color

dharit-tan · 2024-01-31T19:32:52Z

packages/web/src/pages/upload-page/fields/download-availability/DownloadPriceField.tsx

+  const [{ value }, , { setValue: setDownloadPrice }] =
+    useField<number>(DOWNLOAD_PRICE)
+  const [humanizedValue, setHumanizedValue] = useState(
+    value ? decimalIntegerToHumanReadable(value) : null


wonder if marcus's @audius/fixed-decimal could be useful here.

dharit-tan · 2024-01-31T19:35:05Z

packages/web/src/pages/upload-page/fields/StemFilesView.module.css

@@ -3,6 +3,7 @@
  display: flex;
  flex-direction: column;
  overflow: auto;
+  gap: 24px;


dharit-tan · 2024-01-31T19:35:18Z

packages/web/src/pages/upload-page/fields/StemFilesView.tsx

+        </Flex>
+      </>
+    )
+    // return (


dharit-tan · 2024-01-31T19:35:35Z

packages/harmony/src/components/button/FilterButton/FilterButton.tsx

@@ -142,10 +142,12 @@ export const FilterButton = forwardRef<HTMLButtonElement, FilterButtonProps>(
    const handleButtonClick = useCallback(() => {
      if (variant === 'fillContainer' && selection !== null) {
        setSelection(null)
+        // @ts-ignore


why ts-ignore here?

dharit-tan · 2024-01-31T19:35:45Z

packages/web/src/components/upload/TrackPreviewNew.tsx

@@ -83,6 +84,7 @@ export const TrackPreviewNew = (props: TrackPreviewProps) => {
  } = props

  const Icon = fileTypeIcon(fileType)
+  const iconStyle = isStem ? { width: 24, height: 24 } : undefined


dharit-tan · 2024-01-31T19:36:14Z

packages/web/src/pages/upload-page/fields/StemsAndDownloadsField.tsx

+            lowerCaseFilename.includes(category.toString().toLowerCase())
+          ) ?? StemCategory.OTHER
+        )
+      }


dharit-tan · 2024-01-31T19:36:53Z

packages/web/src/pages/upload-page/fields/StemFilesView.module.css

@@ -47,8 +50,9 @@
 }

 .dropzoneIcon {
-  height: 32px;
-  width: 32px;
+  margin: 24px;


dharit-tan · 2024-01-31T19:38:11Z

packages/web/src/pages/upload-page/fields/StemsAndDownloadsMenuFields.tsx

+}: USDCPurchaseRemoteConfig) =>
+  z
+    .object({
+      // [ALLOW_DOWNLOAD]: z.boolean(),


dharit-tan

mostly nitty stuff that can be addressed later but logic seems good to go.
mobile lint failure is my fault, now fixed in main.

… flows (#7382) Co-authored-by: Saliou Diallo <saliou@audius.co>

…ramp-transaction * origin/main: (26 commits) Change index_user_bank log to info instead of error (#7427) [PAY-2445] Separate email notifications for manual transfer and withdrawal (#7424) Add orig_filename to track/stems endpoint (#7426) Bump version to 0.6.28 track page sagas to typescript (#7418) Fix duplicate unregistered SPs on healthz overview (#7406) Convert signon page sagas to ts (#7415) User sagas to typescript (#7405) Fix native "MultiselectRemove" icons (#7413) Deprecate all non-harmony Avatar in native (#7404) Fix profile lineup loading (#7409) Small fixes for lossless upload flow (#7412) Fix @audius/common auto-imports (#7414) Upload includes download_conditions splits, orig_filename for stems (#7411) Unbundle @audius/common (#7379) Refactor to use Harmony PasswordInput in native (#7410) Add DDEX publisher CI workflow (#7408) Fix isrc/iswc regex (#7407) [PAY-2332] Add new stems and downloads upload UI (#7333) [DVRL-2] Clean out docusaurus boilerplate content (#7239) ...

[5646b21] Update dapp-store build artifacts audius-infra [b194d17] [INF-652] Fix SSR Deploy (#7450) Sebastian Klingler [03707c9] Upgrade dapp-store cli (#7420) Dylan Jeffers [5a33f62] Fix copy icon color (#7441) Raymond Jacobson [1fe48f9] Remove common command from root package.json (#7445) Sebastian Klingler [c71c04d] Openresty cleanup (#7444) Steve Perkins [080548b] Remove old cache track sagas js file (#7439) Kyle Shanks [95060d1] Add bs58 lock changes (#7432) Saliou Diallo [a0abc3a] Add stem orig_filename to tracks/<id>/stems (#7428) Reed [b2e26bf] [PAY-2425] Fix DownloadRow text styles (#7438) Reed [4759085] Openresty cleanup (#7423) Steve Perkins [11537a8] Fix drawer icon sizing issue (#7417) JD Francis [498e1c6] Fix mobile styles for pkey export (#7437) Raymond Jacobson [4c205f1] Bump version to 0.6.29 audius-infra [4140f4c] [PAY-2448] Exclude system USDC transactions by default (#7429) Randy Schott [e68c3b7] [PROTO-1644] Healthz displays audius-d managed status and icon (#7436) Danny [601f377] DDEX local dev (#7435) Michelle Brier [5149b1c] [PAY-2407][PAY-2441] Route withdraw transactions through user bank (#7388) Randy Schott [d12cfb4] Convert history page sagas to ts (#7431) Kyle Shanks [88abb2f] Convert search page sagas to ts (#7434) Kyle Shanks [e00cd7e] Convert trending page sagas to ts (#7433) Kyle Shanks [ba35a42] [PAY-2373][PAY-2406][PAY-2374] Support file sizes for stems / downloads (#7421) Raymond Jacobson [1f5aef3] [PAY-2413] Export private key (#7425) Saliou Diallo [57d8d7a] [PROTO-1636] Make ddex UI upload zip files to S3 (#7430) Theo Ilie [8b5eda3] ONC-1: add metrics backfill (#7422) alecsavvy [eb9655c] Change index_user_bank log to info instead of error (#7427) Reed [1e09b03] [PAY-2445] Separate email notifications for manual transfer and withdrawal (#7424) Randy Schott [5d442bd] Add orig_filename to track/stems endpoint (#7426) Reed [72d8a04] Bump version to 0.6.28 audius-infra [f3ebb3b] track page sagas to typescript (#7418) Andrew Mendelsohn [5d2b7cb] Fix duplicate unregistered SPs on healthz overview (#7406) Theo Ilie [967eeeb] Convert signon page sagas to ts (#7415) Kyle Shanks [7bfe439] User sagas to typescript (#7405) Andrew Mendelsohn [b70866b] Fix native "MultiselectRemove" icons (#7413) JD Francis [0ebff33] Deprecate all non-harmony Avatar in native (#7404) JD Francis [0e6064a] Fix profile lineup loading (#7409) Andrew Mendelsohn [81e7bca] Small fixes for lossless upload flow (#7412) Reed [d9f52b5] Fix @audius/common auto-imports (#7414) Dylan Jeffers [c6c5add] Upload includes download_conditions splits, orig_filename for stems (#7411) Reed [3c898a8] Unbundle @audius/common (#7379) Dylan Jeffers [7d81602] Refactor to use Harmony PasswordInput in native (#7410) JD Francis [5f911c0] Add DDEX publisher CI workflow (#7408) Michelle Brier [ebe57b6] Fix isrc/iswc regex (#7407) Raymond Jacobson [513b141] [PAY-2332] Add new stems and downloads upload UI (#7333) Saliou Diallo [f083d5c] [DVRL-2] Clean out docusaurus boilerplate content (#7239) Sam Gutentag [37f0cac] [DVRL-1] - Prep Upgrade docusaurus to v3.1.0 (#7271) Sam Gutentag [3d7cd2a] fix DDEX publisher dependencies and remove from blocking release (#7402) Michelle Brier [ebf3024] [PROTO-1650] Add uptime matrix to healthz (#7400) Theo Ilie [d09e31e] fix ddex-publisher ci (#7401) Michelle Brier [cd8a4ed] Bump version to 0.6.27 audius-infra [617ba71] [PAY-2440] Update indexers for cleaner withdrawal flow (#7394) Randy Schott [79bb969] Lineup sagas to typescript (#7399) Andrew Mendelsohn [a2571ea] Convert common js test tiles to ts (#7398) Kyle Shanks [8ff5b73] Convert trending page store js files to ts (#7396) Kyle Shanks [25e848c] Add maxsockets flag as workaround for constant npm ECONNRESET failures (#7397) Danny [eddc36f] Track sagas to typescript (#7391) Andrew Mendelsohn [234603a] Migrate (almost) all native icon references to harmony (#7377) JD Francis [334e9d5] Convert profile page store js files to ts (#7386) Kyle Shanks [5cd63b2] Convert track page store js files to ts (#7390) Kyle Shanks [873fa45] [PAY-2403] Fix purchase drawer height on small iphones (#7375) Raymond Jacobson [f85accf] Collection sagas to TS (#7387) Andrew Mendelsohn [047c348] Fix mobile typecheck (#7389) Reed [90d0bbf] Block future release dates on public tracks (#7358) Isaac Solo [83670a0] [PROTO-1638] Use static nodes in uptime reporting (#7384) Theo Ilie [2b0dd91] [PAY-2333] Download all logic for web (#7359) Reed [72cd42b] Allow memo v2 instructions in relay (#7383) Randy Schott [ab0ab02] DDEX publisher module scaffolding (#7381) Michelle Brier [6808b34] Convert saved page store js files to ts (#7378) Kyle Shanks [b801e0b] Bump version to 0.6.26 audius-infra [16b63b3] Fix sdk not initializing on stage ddex (#7380) Michelle Brier [4de2102] DDEX ingester scaffolding (#7361) Michelle Brier [d363294] Convert history page store js files to ts (#7376) Kyle Shanks [72c0af4] common/store/cache sagas to typescript (#7373) Andrew Mendelsohn [d69458f] Convert Feed page store js files to ts (#7374) Kyle Shanks [2e1b7bf] Convert collection page store js files to ts (#7372) Kyle Shanks [b006c02] Fix lottie imports (#7371) Dylan Jeffers [35e3d13] Convert common store cache js files to ts (#7369) Kyle Shanks [cd81ec8] Select Artists page playback fixes (#7343) JD Francis [583e266] [Web] Batch 1 of Harmony Icons Migration (#7368) nicoback2 [223cbda] [PROTO-1641] Add unregistered nodes to healthz in yellow (#7366) Theo Ilie [c2813c1] Fix node aggregation after changes to get_all_discovery_nodes_cached (#7365) Raymond Jacobson [d8e97ff] [C-3735] Add forceRefresh to audius-query hook results (#7345) Andrew Mendelsohn [14d5d1a] Fix monorepo package lock (#7364) Theo Ilie [6f15d0d] [PAY-2390] Fix chat reaction behind date + reaction popup placement (#7362) Reed [a676c6d] Add dist and .git directories to .dockerignore to speedup build times (#7336) Danny [2a29085] Bump version to 0.6.25 audius-infra [facb90c] Upgrade armada cli (#7177) Raymond Jacobson [3a0158a] [PAY-2314] Add audio user bank indexer tests (#7350) Raymond Jacobson

pull-request-size bot added the size/XXL label Jan 25, 2024

sddioulde force-pushed the sd-stems-and-downloads branch from c90397d to 67bbf7a Compare January 29, 2024 18:44

sddioulde mentioned this pull request Jan 30, 2024

[PAY-2332][PAY-2358] More work on stems and downloads upload and edit flows #7382

Merged

sddioulde requested review from dharit-tan and rickyrombo January 30, 2024 17:16

sddioulde assigned Kyle-Shanks and amendelsohn Jan 30, 2024

dharit-tan reviewed Jan 30, 2024

View reviewed changes

Saliou Diallo added 17 commits January 30, 2024 13:35

Reorder upload fields on web

6ee5696

Rename files and update copy

e65fd15

Add new stems and downloads ui

6a3a5fb

Update icon

7a74e6d

Add icon to SegmentedControl

e3047fa

Extract components and rename files

8a95118

Add callout

990d364

Enable lossless files if full track is toggled on

e1558b2

Toggle full track and lossless on for first gated download segmented …

169491e

…control change

wip

0fb4509

Add new stem files view

43762bb

Truncate stems dropzone if stem uploaded

3fbcb31

Improve text wrapping on stems dropzone

78d2276

Update truncated style

4ff6060

Submit stems and downloads form on access and sale link click

9c6f124

Add stems and downloads form validation

2ef1a7a

Select correct download availability on re-open of modal

b20f102

sddioulde force-pushed the sd-stems-and-downloads branch from 67bbf7a to b20f102 Compare January 30, 2024 18:48

dharit-tan reviewed Jan 30, 2024

View reviewed changes

dharit-tan reviewed Jan 31, 2024

View reviewed changes

packages/web/src/pages/upload-page/fields/StemFilesView.tsx Outdated

</Flex>

</>

)

// return (

Copy link

Contributor

dharit-tan Jan 31, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

comment

dharit-tan reviewed Jan 31, 2024

View reviewed changes

dharit-tan approved these changes Jan 31, 2024

View reviewed changes

[PAY-2332][PAY-2358] More work on stems and downloads upload and edit…

6734734

… flows (#7382) Co-authored-by: Saliou Diallo <saliou@audius.co>

sddioulde merged commit 513b141 into main Jan 31, 2024
6 of 7 checks passed

sddioulde deleted the sd-stems-and-downloads branch January 31, 2024 21:10

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[PAY-2332] Add new stems and downloads upload UI #7333

[PAY-2332] Add new stems and downloads upload UI #7333

sddioulde commented Jan 25, 2024 •

edited

Loading

audius-infra commented Jan 25, 2024

audius-infra commented Jan 25, 2024

audius-infra commented Jan 26, 2024

audius-infra commented Jan 26, 2024

dharit-tan Jan 30, 2024

audius-infra commented Jan 30, 2024

dharit-tan Jan 30, 2024

dharit-tan Jan 31, 2024

sddioulde Jan 31, 2024

dharit-tan Jan 31, 2024

dharit-tan Jan 31, 2024

dharit-tan Jan 31, 2024

dharit-tan Jan 31, 2024

dharit-tan Jan 31, 2024

dharit-tan Jan 31, 2024

dharit-tan Jan 31, 2024

dharit-tan Jan 31, 2024

dharit-tan Jan 31, 2024

dharit-tan left a comment •

edited

Loading

[PAY-2332] Add new stems and downloads upload UI #7333

[PAY-2332] Add new stems and downloads upload UI #7333

Conversation

sddioulde commented Jan 25, 2024 • edited Loading

Description

How Has This Been Tested?

audius-infra commented Jan 25, 2024

audius-infra commented Jan 25, 2024

audius-infra commented Jan 26, 2024

audius-infra commented Jan 26, 2024

Choose a reason for hiding this comment

audius-infra commented Jan 30, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

dharit-tan left a comment • edited Loading

Choose a reason for hiding this comment

sddioulde commented Jan 25, 2024 •

edited

Loading

dharit-tan left a comment •

edited

Loading