Skip to content
This repository has been archived by the owner on Oct 4, 2023. It is now read-only.

[PAY-1556] Update mobile web gated content experience for TrackTiles #3692

Merged
merged 5 commits into from
Jul 3, 2023
Merged

[PAY-1556] Update mobile web gated content experience for TrackTiles #3692

merged 5 commits into from
Jul 3, 2023

Conversation

schottra
Copy link
Contributor

@schottra schottra commented Jul 3, 2023

Description

This brings the mobile web TrackTile into line with the latest mocks for gated content. It was a bit of an overhaul, but my goal was to clean this up and reuse some of the logic/styling/layout from the desktop experience. Long term, it would be nice to merge a lot of this code by switching to <Tile />.

  • Moved shared messages and layout logic from desktop component so I could reuse them here
  • Moved premium content elements around to match mocks
  • BottomButtons component had a lot of inline function for rendering which weren't necessary. Cleaned that function up so it was doing less at render time (Felt mildly important as we render potentially dozens of TrackTiles at once)
  • Cleaned up / refactored CSS for TrackTile and BottomButtons components. Replaced a lot of individual element margins with container padding and flex gaps.
  • Fixed a subtle issue with showing dog ears on tracks while they were still loading, due to usage of isBuffering when we should be using isLoading
  • Converted as many hard-coded pixel values to grid units as I could
  • Cleaned up unused classes in TrackTile css module
  • Updated crown icon with new SVG which is square
  • Added "semantic" text name variants. The Harmony Figma (as well as some of our feature artboards) use semantic color names for some elements. These are designed to map to palette color names. In cases where designs specify a semantic name, I wanted devs to be able to use those names directly, instead of having to look up what palette color that name maps to.

Dragons

Changes are mostly contained to mobile web code, so this should be relatively safe

How Has This Been Tested?

Tested locally in Chrome mobile emulator

How will this change be monitored?

N/A

Feature Flags

N/A

Screenshots

Locked
image

Unlocked
image

Unlocked (Artist pick)
image

Artist View
image

Trending Page
image

Trending Page (Co-sign)
image

@audius-infra
Copy link
Collaborator

Preview this change https://demo.audius.co/pay-1556-mobile-web-track-tile-updates

@schottra
Merge branch 'gated-content-updates' into pay-1556-mobile-web-track-t…
daff6e9 
…ile-updates

* gated-content-updates:
  Migrate `getDogEarType` to common (#3685)
  [PAY-1505] USDC-gated mobile track tiles (#3684)
dylanjeffers
dylanjeffers approved these changes Jul 3, 2023
View reviewed changes
Copy link
Contributor

@dylanjeffers dylanjeffers left a comment

Choose a reason for hiding this comment

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

Wow massive lift, so many styles.

@audius-infra
Copy link
Collaborator

Preview this change https://demo.audius.co/pay-1556-mobile-web-track-tile-updates

piazzatron
piazzatron reviewed Jul 3, 2023
View reviewed changes
Copy link
Contributor

@piazzatron piazzatron left a comment

Choose a reason for hiding this comment

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

Amazing campground cleanup! We should do a demo/lunch 'n learn around your CSS refactor approach here (using gap instead of individual margins, etc) :)

packages/web/src/components/track/trackTileMessages.ts
@@ -0,0 +1,13 @@
import { pluralize } from '@audius/common'

export const messages = {
Copy link
Contributor

Choose a reason for hiding this comment

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

Gooood looks pulling this out

@schottra schottra merged commit 6373b87 into gated-content-updates Jul 3, 2023
@schottra schottra deleted the pay-1556-mobile-web-track-tile-updates branch July 3, 2023 21:16
@AudiusProject AudiusProject deleted a comment from linear bot Sep 11, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@piazzatron piazzatron piazzatron approved these changes

@dylanjeffers dylanjeffers dylanjeffers approved these changes

@dharit-tan dharit-tan Awaiting requested review from dharit-tan

Assignees

@rickyrombo rickyrombo

@piazzatron piazzatron

@sddioulde sddioulde

Labels
size/XL
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
6 participants
@schottra @audius-infra @piazzatron @dylanjeffers @rickyrombo @sddioulde