[PAY-2703] Redesign mobile collection and track screen tiles #8255

amendelsohn · 2024-04-27T01:07:29Z

Description

Note: Apologies for the large PR. This one was hard to separate out. Happy to do a walkthrough or explain myself.

Features

Full rearranging / redesign of the collection and track screen tiles on mobile
Description section has darker background and new stats layout
Offline download status moved down to stats section with new layout
Stats rearranged and reformatted
AI badge moved to the top
Refactored and simplified props in several places, most notably the TrackScreenDetailsTile

TODOs:

The stats could be moved back out and passed in as a structured prop with arbitrary data
Trending badge?
Check for mismatches against the design

Reference designs:

Screenshots

How Has This Been Tested?

Looking good on local simulator, but we should test interactions and cases thoroughly

changeset-bot · 2024-04-27T01:07:32Z

⚠️ No Changeset found

Latest commit: 405cf15

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

gitguardian · 2024-04-27T01:07:32Z

⚠️ GitGuardian has uncovered 1 secret following the scan of your pull request.

Please consider investigating the findings and remediating the incidents. Failure to do so may lead to compromising the associated services or software components.

🔎 Detected hardcoded secret in your pull request

GitGuardian id	GitGuardian status	Secret	Commit	Filename
9349019	Triggered	Generic High Entropy Secret	`97a333f`	packages/ddex/.env.stage	View secret

🛠 Guidelines to remediate hardcoded secrets

Understand the implications of revoking this secret by investigating where it is used in your code.
Replace and store your secret safely. Learn here the best practices.
Revoke and rotate this secret.
If possible, rewrite git history. Rewriting git history is not a trivial act. You might completely break other contributing developers' workflow and you risk accidentally deleting legitimate data.

To avoid such incidents in the future consider

following these best practices for managing and storing secrets including API keys and other credentials
install secret detection on pre-commit to catch secret before it leaves your machine and ease remediation.

^{🦉 GitGuardian detects secrets in your source code to help developers and security teams secure the modern development process. You are seeing this because you or someone else with access to this repository has authorized GitGuardian to scan your pull request.}

audius-infra · 2024-04-27T01:10:08Z

Preview this change https://demo.audius.co/am-mobile-collection-header-redesign

dharit-tan · 2024-04-30T15:37:55Z

packages/mobile/src/components/details-tile/DetailsStat.tsx

-        {formatCount(count)}
+    <Pressable onPress={onPress}>
+      <Text>
+        <Flex direction='row' gap='xs' alignItems='center'>


dharit-tan · 2024-04-30T15:39:41Z

packages/mobile/src/components/details-tile/DetailsTile.tsx

+    isAiGeneratedTracksEnabled && aiAttributionUserId ? (
+      <DetailsTileAiAttribution userId={aiAttributionUserId} />
+    ) : null
+    // TODO: trending badge


bonus points if you make ticket for this

dharit-tan · 2024-04-30T15:40:42Z

packages/mobile/src/components/details-tile/DetailsTile.tsx

+
+        {badges.length > 0 ? (
+          <Flex direction='row' gap='s'>
+            <>{badges.map((badge) => badge)}</>


nit: is the <></> needed?

dharit-tan · 2024-04-30T15:42:01Z

packages/mobile/src/components/details-tile/DetailsTile.tsx

+          <Flex gap='xs' direction='row' alignItems='center'>
+            <IconCalendarMonth color='accent' size='m' />
+            <Text variant='body' color='accent' strength='strong' size='m'>
+              Releases


nit: probably not your code, but this whole thing could be a message

DejayJD · 2024-04-30T15:53:40Z

packages/common/src/utils/formatUtil.ts

@@ -129,7 +129,7 @@ export const pluralize = (
  count: number | null,
  suffix = 's',
  pluralizeAnyway = false
-) => `${message}${(count ?? 0) > 1 || pluralizeAnyway ? suffix : ''}`
+) => `${message}${(count ?? 0) !== 1 || pluralizeAnyway ? suffix : ''}`


curious what the reasoning for this is? I would think we don't want to account for negatives?

This covers the 0 case properly. We do want the suffix for 0 count.

0 reposts
1 repost
2+ reposts

DejayJD · 2024-04-30T15:54:44Z

packages/mobile/src/components/details-tile/DetailsTile.tsx

+  getDogEarType,
+  Genre


woah there, I dont know if I can get onboard with these changes

dharit-tan

great! bunch of nits but nothing major.

dharit-tan · 2024-04-30T15:43:58Z

packages/mobile/src/components/details-tile/DetailsTileBadge.tsx

+  }
+>
+
+export const DetailsTileBadge = (props: DetailsTileBadgeProps) => {


dharit-tan · 2024-04-30T16:08:39Z

packages/mobile/src/components/details-tile/SecondaryStats.tsx

+  updated: 'Updated'
+}
+
+const SecondaryStatRow = (props: { stats: (string | null)[] }) => {


nit: why do we need props? can we just destructure stats directly?

dharit-tan · 2024-04-30T16:09:19Z

packages/mobile/src/components/offline-downloads/OfflineStatusRow.tsx

+}
+
+export const OfflineStatusRow = (props: OfflineStatusRowProps) => {
+  const { contentId, isCollection } = props


nit: ditto - why not just destructure props directly in the line above?

I know @dylanjeffers prefers this, though it's not in our styleguide. Personally, I don't mind inline if there are few props.

@dylanjeffers care to defend your preference? If so, should we codify it in the guide?

dharit-tan · 2024-04-30T16:10:07Z

packages/mobile/src/harmony-native/components/layout/Paper/Paper.tsx

@@ -83,16 +83,25 @@ export const Paper = forwardRef<View, PaperProps>((props, ref) => {

  const flexProps = { backgroundColor, borderRadius, shadow }

+  const universalStyles: StyleProp<ViewStyle> = { overflow: 'hidden' }


whoa so now all Paper components will have overflow: hidden? i'm down but maybe worth flagging to the team.

yeah this brings it in line with web harmony Paper. Paper's meant to be a container so overflow is generally not desirable. I'll call out the change in the harmony channel.

dharit-tan · 2024-04-30T16:10:26Z

packages/mobile/src/screens/collection-screen/CollectionDownloadStatusRow.tsx

+}
+
+export const CollectionDownloadStatusRow = (
+  props: CollectionDownloadStatusRowProps


ditto with props destructuring

dharit-tan · 2024-04-30T16:11:14Z

packages/mobile/src/screens/collection-screen/CollectionDownloadStatusRow.tsx

+      }
+    },
+    [dispatch, collectionId],
+    800


nit: magic number

dharit-tan · 2024-04-30T16:12:16Z

packages/mobile/src/screens/collection-screen/CollectionScreen.tsx

@@ -156,6 +157,8 @@ const CollectionScreenComponent = (props: CollectionScreenComponentProps) => {

  const { neutralLight5 } = useThemePalette()

+  const releaseDate =
+    'release_date' in collection ? collection.release_date : created_at


nit: does collection?.release_date ?? created_at work?

no, sadly we need the type narrowing

dharit-tan · 2024-04-30T16:12:55Z

packages/mobile/src/screens/collection-screen/DownloadStatusRowDisplay.tsx

+}
+
+export const DownloadStatusRowDisplay = (
+  props: DownloadStatusRowDisplayProps


ditto props destructuring

dharit-tan · 2024-04-30T16:13:29Z

packages/mobile/src/screens/collection-screen/DownloadStatusRowDisplay.tsx

+      alignItems='center'
+    >
+      <Flex direction='row' gap='s' alignItems='center'>
+        <DownloadStatusIndicator status={downloadStatus} size={16} />


nit: use spacing instead of 16. maybe not your code tho.

audius-infra · 2024-05-01T01:01:25Z

Preview this change https://demo.audius.co/am-mobile-collection-header-redesign

[9f44712] Reapply "Convert swagger.json to OAS 3.0 before generating SDK types (#8274)" (#8324) (#8344) Marcus Pasell [2ea74f3] Fix issues with text-link variant (#8343) Dylan Jeffers [f005b25] [PAY-2860] SDK Services Config - Configure SDK using environment (#8329) Marcus Pasell [11a0813] Disable add to playlist for prem tracks if not purchased (#8336) Reed [33b1916] [C-4335] Migrate all user and collection cards (#8338) Dylan Jeffers [dafaa21] [QA-1241] Fix hidden track add to playlist allowing non hidden items (#8340) JD Francis [4c95031] [QA-956] Add deleted tile for tracks/albums/playlists (#8333) JD Francis [b8f5990] Add error message to upload flow (#8334) JD Francis [22894e8] [QA-957] Fix android overflowing text on access & sale modal (#8313) JD Francis [86f6447] [PAY-2812] Change spend to earn challenge copy (#8332) Reed [d4c4264] Close modal on done (#8331) Saliou Diallo [ded4933] [PAY-2861] CollectionCard fixes (#8330) Dylan Jeffers [36277cd] Revert "Convert swagger.json to OAS 3.0 before generating SDK types (#8274)" (#8324) Marcus Pasell [146b2e0] [QA-1212] Fix chromecast (#8323) Raymond Jacobson [0b33e68] [PAY-2738] Public album with prem track always shows buy button (#8321) Reed [d897a98] [C-4333] Migrate follow-users to new sign-up flow (#8312) Dylan Jeffers [3129a3a] [PAY-2799] Show preview button for collections (#8271) Reed [8c58601] Modify /etc/hosts on CI machines before api test (#8319) Danny [3586f41] [PAY-2859] Fix bugs in edit app flow (#8320) Raymond Jacobson [1bf3e97] [PAY-2801] Purchased selectable filter in library albums (#8318) Reed [6db35c6] [C-4285] Add claim all rewards button functionality (#8292) Saliou Diallo [a20d85a] [PAY-2728] Implement edit app flow (#8256) Raymond Jacobson [714a3d1] [C-4288] Migrate to new cards in profile, search, and library (#8300) Dylan Jeffers [4dceb61] Upgrade dapp-store to 0.8.1 (#8311) Dylan Jeffers [4d37233] [PAY-2794] Use UserLink for purchases/sales tables (#8306) Reed [fc2aef3] [PAY-2772] Fix collection description text size (#8309) Reed [c35bfe1] [PAY-2822] Convert LockedContentDetailsTile to Harmony (#8308) Reed [f7a921e] [PAY-2781] Poll for track access on album purchase (#8296) Reed [621c3ee] Convert swagger.json to OAS 3.0 before generating SDK types (#8274) Marcus Pasell [09789c1] Retrigger logic for android notification permissions post-manifest fix (#8305) JD Francis [b9c042a] [PAY-2815] Show unlocked icon if dm content is purchased (#8303) Andrew Mendelsohn [722e933] [PAY-2779] Fix validation for albumTrackPrice (#8302) Andrew Mendelsohn [963bec4] Fix EditCollection playwright test (#8304) Andrew Mendelsohn [7e0aa7e] [PAY-2823] Edit Album access control fixes (#8298) Andrew Mendelsohn [b42b6fd] [QA-971] Fix smart collections (#8299) Raymond Jacobson [eceb876] [PAY-2791] Show only own albums in artist dashboard (#8297) Reed [87ce027] [Web] [Harmony] Add accounts managing you modal [C-4295] [C-4292] (#8258) nicoback2 [7a3567c] [C-4238, C-4318] Add ssr small bundle flow for mobile track page (#8293) Kyle Shanks [c7c3752] [PAY-2800] Fix mobile navigate to album on purchase success (#8295) Reed [f113a91] [PAY-2802] Auto-favorite tracks in purchased album (#8294) Reed [d32934f] [C-4284] Fix rewards in mobile web (#8291) Saliou Diallo [45c4bc6] [PAY-2775] Remove suggested tracks for albums (#8288) Andrew Mendelsohn [22280c6] [C-4080] Mobile cooldown and claim all (#8263) Isaac Solo [80cca19] Jail broken test (#8289) Raymond Jacobson [d7c8e34] [PAY-2766] Analytics events for premium albums (#8262) JD Francis [c3ee4a8] [PAY-2817] Web collections show reposts, remove artist column (#8272) Reed [6f8bab6] Fix lint items (#8285) Raymond Jacobson [e8debc0] [PAY-2703] Redesign mobile collection and track screen tiles (#8255) Andrew Mendelsohn [a3964a8] Bump android build number for release-client-v1.5.78 (#8286) Raymond Jacobson [8481f8d] [C-4327] Fix track ordering within playlist/album (#8284) Raymond Jacobson [5165172] Bump android version for manifest changes (#8283) JD Francis [4e60f97] [C-4312] Add UserCard (#8276) Dylan Jeffers [35ed4ec] [ONC-82] Fix android notif permissions (#8279) JD Francis [82e1c67] [C-4323] Improve Avatar (#8273) Dylan Jeffers [909db7c] [C-4316, C-4317] SSR work to render webplayer and track page for web (#8268) Kyle Shanks [7417a40] Generate sdk after ursm code removal (#8275) Raymond Jacobson [62b5a08] Update Add Funds copy and loading state (#8266) Saliou Diallo [4503cc7] PROTO-1328: always default to discovery relay (#8247) alecsavvy [f42c6cd] Fix text-input spacing (#8270) Dylan Jeffers [75fd847] [C-4270] Fix text-link transition (#8260) Dylan Jeffers [df0349a] [PAY-2761] Add managed users endpoints (#8238) Randy Schott [5b4c998] [ONC-84] Add try/catch (#8264) Raymond Jacobson [2b5f89c] Fix clipped text in TracksTable name column (#8265) Reed [c3256fa] [C-4275] Add google-inspectiontool to crawler regex (#8261) Sebastian Klingler [5750045] [C-4033] Prevent useTabs from redirecting on page load (#8259) Sebastian Klingler [b17ff70] [PAY-2758] Allow gated tracks to be added to playlists (#8227) Reed

amendelsohn added 15 commits April 23, 2024 15:25

fix mobile collection tile formatting

4f46d15

fix duration formatting; fix spacing

cc248ba

fix dm premium label text size

d7a090e

fix mobile purchase button padding

ff19b78

Merge branch 'main' into am-mobile-collection-header-redesign

f296bf6

initial redesign (wip)

d73bb19

fix border radius; gated content section styles

f2543fe

collection tile almost done

b69fd35

Merge branch 'main' into am-mobile-collection-header-redesign

97a333f

playlist controls

946814f

secondary stats

4b01cd4

genre and mood

11b3aa8

tags and stems

e9bf01e

clean up TrackScreenDetailsTile

c05061a

offline download status row

12a42d3

amendelsohn requested review from dharit-tan and DejayJD April 27, 2024 01:07

pull-request-size bot added the size/XXL label Apr 27, 2024

dharit-tan reviewed Apr 30, 2024

View reviewed changes

DejayJD reviewed Apr 30, 2024

View reviewed changes

dharit-tan approved these changes Apr 30, 2024

View reviewed changes

amendelsohn added 2 commits April 30, 2024 17:44

pr feedback tweaks

dd6f09d

Merge branch 'main' into am-mobile-collection-header-redesign

405cf15

amendelsohn merged commit e8debc0 into main May 1, 2024
22 checks passed

amendelsohn deleted the am-mobile-collection-header-redesign branch May 1, 2024 01:18

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[PAY-2703] Redesign mobile collection and track screen tiles #8255

[PAY-2703] Redesign mobile collection and track screen tiles #8255

amendelsohn commented Apr 27, 2024 •

edited

changeset-bot bot commented Apr 27, 2024 •

edited

gitguardian bot commented Apr 27, 2024 •

edited

audius-infra commented Apr 27, 2024

dharit-tan Apr 30, 2024

dharit-tan Apr 30, 2024 •

edited

dharit-tan Apr 30, 2024

dharit-tan Apr 30, 2024

DejayJD Apr 30, 2024

amendelsohn May 1, 2024

DejayJD Apr 30, 2024

dharit-tan left a comment

dharit-tan Apr 30, 2024

dharit-tan Apr 30, 2024

dharit-tan Apr 30, 2024

amendelsohn May 1, 2024

dharit-tan Apr 30, 2024

amendelsohn May 1, 2024

dharit-tan Apr 30, 2024

dharit-tan Apr 30, 2024

dharit-tan Apr 30, 2024

amendelsohn May 1, 2024

dharit-tan Apr 30, 2024

dharit-tan Apr 30, 2024

audius-infra commented May 1, 2024

		@@ -83,16 +83,25 @@ export const Paper = forwardRef<View, PaperProps>((props, ref) => {

		const flexProps = { backgroundColor, borderRadius, shadow }

		const universalStyles: StyleProp<ViewStyle> = { overflow: 'hidden' }

[PAY-2703] Redesign mobile collection and track screen tiles #8255

[PAY-2703] Redesign mobile collection and track screen tiles #8255

Conversation

amendelsohn commented Apr 27, 2024 • edited

Description

Features

TODOs:

Reference designs:

Screenshots

How Has This Been Tested?

changeset-bot bot commented Apr 27, 2024 • edited

⚠️ No Changeset found

gitguardian bot commented Apr 27, 2024 • edited

⚠️ GitGuardian has uncovered 1 secret following the scan of your pull request.

audius-infra commented Apr 27, 2024

Choose a reason for hiding this comment

dharit-tan Apr 30, 2024 • edited

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

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

Choose a reason for hiding this comment

audius-infra commented May 1, 2024

amendelsohn commented Apr 27, 2024 •

edited

changeset-bot bot commented Apr 27, 2024 •

edited

gitguardian bot commented Apr 27, 2024 •

edited

dharit-tan Apr 30, 2024 •

edited