[C-5161 C-5151] Improve desktop track page responsiveness (#10040)

AudiusProject · Oct 15, 2024 · c1a5488 · c1a5488
1 parent 5de96ce
commit c1a5488
Show file tree

Hide file tree

Showing 19 changed files with 132 additions and 52 deletions.
diff --git a/packages/mobile/src/screens/feature-flag-override-screen/FeatureFlagOverrideScreen.tsx b/packages/mobile/src/screens/feature-flag-override-screen/FeatureFlagOverrideScreen.tsx
@@ -127,6 +127,7 @@ const FeatureFlagScreen = () => {
       <FlatList
         ListHeaderComponent={
           <FilterInput
+            autoFocus
             placeholder={messages.filterPlaceholder}
             onChangeText={setFilter}
           />

diff --git a/packages/web/src/components/feature-flag-override-modal/FeatureFlagOverrideModal.tsx b/packages/web/src/components/feature-flag-override-modal/FeatureFlagOverrideModal.tsx
@@ -127,6 +127,7 @@ export const FeatureFlagOverrideModal = () => {
             </Box>
           ) : null}
           <TextInput
+            autoFocus
             label={messages.filterPlaceholder}
             onChange={(e) => setFilter(e.target.value)}
             value={filter}

diff --git a/packages/web/src/components/lineup/Lineup.tsx b/packages/web/src/components/lineup/Lineup.tsx
@@ -9,22 +9,22 @@ import { useIsMobile } from 'hooks/useIsMobile'
 import LineupProvider, { LineupProviderProps } from './LineupProvider'
 import { LineupVariant } from './types'
 
-export type LineupWithoutTile = Omit<
+export type LineupProps = Omit<
   LineupProviderProps,
   'trackTile' | 'skeletonTile' | 'playlistTile'
 >
-type LineupProps = LineupWithoutTile & { useSmallTiles?: boolean }
 
 /** A lineup renders a LineupProvider, injecting different tiles
  * depending on the client state.
  */
 const Lineup = (props: LineupProps) => {
-  const { useSmallTiles } = props
+  const { variant } = props
   const isMobile = useIsMobile()
   const trackTile =
-    isMobile || useSmallTiles ? MobileTrackTile : DesktopTrackTile
-  const playlistTile =
-    isMobile || useSmallTiles ? MobilePlaylistTile : DesktopPlaylistTile
+    isMobile || variant === LineupVariant.SECTION
+      ? MobileTrackTile
+      : DesktopTrackTile
+  const playlistTile = isMobile ? MobilePlaylistTile : DesktopPlaylistTile
 
   return (
     <LineupProvider

diff --git a/packages/web/src/components/lineup/LineupProvider.tsx b/packages/web/src/components/lineup/LineupProvider.tsx
@@ -514,7 +514,7 @@ class LineupProvider extends PureComponent<CombinedProps, LineupProviderState> {
     if (variant === LineupVariant.MAIN || variant === LineupVariant.PLAYLIST) {
       tileSize = TrackTileSize.LARGE
       lineupStyle = styles.main
-    } else if (variant === LineupVariant.SECTION) {
+    } else if (variant === LineupVariant.GRID) {
       tileSize = TrackTileSize.SMALL
       lineupStyle = styles.section
       statSize = 'small'

diff --git a/packages/web/src/components/lineup/types.ts b/packages/web/src/components/lineup/types.ts
@@ -1,6 +1,7 @@
 export enum LineupVariant {
   MAIN = 'main',
-  SECTION = 'section',
+  GRID = 'grid',
   CONDENSED = 'condensed',
-  PLAYLIST = 'playlist'
+  PLAYLIST = 'playlist',
+  SECTION = 'section'
 }
diff --git a/packages/web/src/components/track/mobile/BottomButtons.tsx b/packages/web/src/components/track/mobile/BottomButtons.tsx
@@ -12,6 +12,7 @@ import FavoriteButton from 'components/alt-button/FavoriteButton'
 import MoreButton from 'components/alt-button/MoreButton'
 import RepostButton from 'components/alt-button/RepostButton'
 import ShareButton from 'components/alt-button/ShareButton'
+import { useIsMobile } from 'hooks/useIsMobile'
 import { useIsUSDCEnabled } from 'hooks/useIsUSDCEnabled'
 
 import { GatedConditionsPill } from '../GatedConditionsPill'
@@ -39,9 +40,11 @@ type BottomButtonsProps = {
   isMatrixMode: boolean
   contentId: number
   contentType: string
+  renderOverflow?: () => React.ReactNode
 }
 
 const BottomButtons = (props: BottomButtonsProps) => {
+  const isMobile = useIsMobile()
   const isUSDCEnabled = useIsUSDCEnabled()
   const isUSDCPurchase =
     isUSDCEnabled && isContentUSDCPurchaseGated(props.streamConditions)
@@ -51,15 +54,18 @@ const BottomButtons = (props: BottomButtonsProps) => {
     return null
   }
 
-  const moreButton = (
-    <MoreButton
-      wrapperClassName={styles.button}
-      className={styles.buttonContent}
-      onClick={props.onClickOverflow}
-      isDarkMode={props.isDarkMode}
-      isMatrixMode={props.isMatrixMode}
-    />
-  )
+  const moreButton =
+    !isMobile && props.renderOverflow ? (
+      props.renderOverflow()
+    ) : (
+      <MoreButton
+        wrapperClassName={styles.button}
+        className={styles.buttonContent}
+        onClick={props.onClickOverflow}
+        isDarkMode={props.isDarkMode}
+        isMatrixMode={props.isMatrixMode}
+      />
+    )
 
   // Stream conditions without access
   if (!props.isLoading && props.streamConditions && !props.hasStreamAccess) {

diff --git a/packages/web/src/components/track/mobile/ConnectedTrackTile.tsx b/packages/web/src/components/track/mobile/ConnectedTrackTile.tsx
@@ -25,10 +25,13 @@ import {
   playerSelectors
 } from '@audius/common/store'
 import { Genre, route } from '@audius/common/utils'
+import { Box, IconButton, IconKebabHorizontal } from '@audius/harmony'
 import { push as pushRoute } from 'connected-react-router'
 import { connect } from 'react-redux'
 import { Dispatch } from 'redux'
 
+import Menu from 'components/menu/Menu'
+import { OwnProps as TrackMenuProps } from 'components/menu/TrackMenu'
 import { TrackTileProps } from 'components/track/types'
 import { useFlag } from 'hooks/useRemoteConfig'
 import { AppState } from 'store/types'
@@ -144,6 +147,7 @@ const ConnectedTrackTile = ({
     getUserWithFallback(user)
 
   const isOwner = user_id === currentUserId
+  const isArtistPick = showArtistPick && artist_pick_track_id === track_id
 
   const { isEnabled: isNewPodcastControlsEnabled } = useFlag(
     FeatureFlags.PODCAST_CONTROL_UPDATES_ENABLED,
@@ -195,6 +199,55 @@ const ConnectedTrackTile = ({
     goToRoute(track?.permalink + '?showComments=true')
   }
 
+  // We wanted to use mobile track tile on desktop, which means shimming in the desktop overflow
+  // menu whenever isMobile is false.
+  const renderOverflowMenu = () => {
+    const menu: Omit<TrackMenuProps, 'children'> = {
+      extraMenuItems: [],
+      handle,
+      includeAddToPlaylist: !is_unlisted || isOwner,
+      includeAddToAlbum: isOwner && !ddexApp,
+      includeArtistPick: isOwner,
+      includeEdit: isOwner,
+      ddexApp: track?.ddex_app,
+      includeEmbed: !(is_unlisted || isStreamGated),
+      includeFavorite: hasStreamAccess,
+      includeRepost: hasStreamAccess,
+      includeShare: true,
+      includeTrackPage: true,
+      isArtistPick,
+      isDeleted: is_delete || user?.is_deactivated,
+      isFavorited: has_current_user_saved,
+      isOwner,
+      isReposted: has_current_user_reposted,
+      isUnlisted: is_unlisted,
+      trackId: track_id,
+      trackTitle: title,
+      genre: genre as Genre,
+      trackPermalink: permalink,
+      type: 'track'
+    }
+
+    return (
+      <Menu menu={menu}>
+        {(ref, triggerPopup) => (
+          <Box mb={-8}>
+            <IconButton
+              ref={ref}
+              icon={IconKebabHorizontal}
+              onClick={(e) => {
+                e.stopPropagation()
+                triggerPopup()
+              }}
+              aria-label='More'
+              color='subdued'
+            />
+          </Box>
+        )}
+      </Menu>
+    )
+  }
+
   const onClickOverflow = (trackId: ID) => {
     const isLongFormContent =
       genre === Genre.PODCASTS || genre === Genre.AUDIOBOOKS
@@ -260,7 +313,7 @@ const ConnectedTrackTile = ({
       fieldVisibility={field_visibility}
       coSign={_co_sign}
       // Artist Pick
-      isArtistPick={showArtistPick && artist_pick_track_id === track_id}
+      isArtistPick={isArtistPick}
       // Artist
       artistHandle={handle}
       artistName={name}
@@ -276,6 +329,7 @@ const ConnectedTrackTile = ({
       toggleSave={toggleSave}
       onShare={onShare}
       onClickOverflow={onClickOverflow}
+      renderOverflow={renderOverflowMenu}
       toggleRepost={toggleRepost}
       makeGoToRepostsPage={makeGoToRepostsPage}
       makeGoToFavoritesPage={makeGoToFavoritesPage}

diff --git a/packages/web/src/components/track/mobile/TrackTile.module.css b/packages/web/src/components/track/mobile/TrackTile.module.css
@@ -10,7 +10,6 @@
   display: flex;
   padding: var(--harmony-unit-2);
   border-radius: var(--harmony-unit-2);
-  max-width: 400px;
   cursor: pointer;
   transition: all 0.2 ease-in-out;
   user-select: none;

diff --git a/packages/web/src/components/track/mobile/TrackTile.tsx b/packages/web/src/components/track/mobile/TrackTile.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, MouseEvent } from 'react'
+import { useCallback, useEffect, MouseEvent, ReactNode } from 'react'
 
 import { useFeatureFlag } from '@audius/common/hooks'
 import {
@@ -74,6 +74,7 @@ type ExtraProps = {
   hasPreview?: boolean
   hasStreamAccess: boolean
   trackId?: number
+  renderOverflow?: () => ReactNode
 }
 
 type CombinedProps = TrackTileProps & ExtraProps
@@ -209,7 +210,8 @@ const TrackTile = (props: CombinedProps) => {
     containerClassName,
     hasPreview = false,
     title,
-    source
+    source,
+    renderOverflow
   } = props
 
   const hideShare: boolean = props.fieldVisibility
@@ -515,6 +517,7 @@ const TrackTile = (props: CombinedProps) => {
             toggleSave={onToggleSave}
             onShare={onClickShare}
             onClickOverflow={onClickOverflowMenu}
+            renderOverflow={renderOverflow}
             onClickGatedUnlockPill={onClickPill}
             isOwner={isOwner}
             readonly={isReadonly}

diff --git a/packages/web/src/pages/ai-attributed-tracks-page/components/desktop/AiPage.tsx b/packages/web/src/pages/ai-attributed-tracks-page/components/desktop/AiPage.tsx
@@ -3,7 +3,7 @@ import { IconRobot } from '@audius/harmony'
 import cn from 'classnames'
 
 import Header from 'components/header/desktop/Header'
-import Lineup, { LineupWithoutTile } from 'components/lineup/Lineup'
+import Lineup, { LineupProps } from 'components/lineup/Lineup'
 import Page from 'components/page/Page'
 import UserBadges from 'components/user-badges/UserBadges'
 import { fullAiPage } from 'utils/route'
@@ -24,7 +24,7 @@ const messages = {
 export type AiPageProps = {
   title: string
   user: User | null
-  getLineupProps: () => LineupWithoutTile
+  getLineupProps: () => LineupProps
   goToArtistPage: () => void
 }
 

diff --git a/packages/web/src/pages/ai-attributed-tracks-page/components/mobile/AiPage.tsx b/packages/web/src/pages/ai-attributed-tracks-page/components/mobile/AiPage.tsx
@@ -6,7 +6,7 @@ import cn from 'classnames'
 
 import Header from 'components/header/mobile/Header'
 import { HeaderContext } from 'components/header/mobile/HeaderContextProvider'
-import Lineup, { LineupWithoutTile } from 'components/lineup/Lineup'
+import Lineup, { LineupProps } from 'components/lineup/Lineup'
 import MobilePageContainer from 'components/mobile-page-container/MobilePageContainer'
 import { useSubPageHeader } from 'components/nav/mobile/NavContext'
 import UserBadges from 'components/user-badges/UserBadges'
@@ -27,7 +27,7 @@ const messages = {
 export type AiPageProps = {
   title: string
   user: User | null
-  getLineupProps: () => LineupWithoutTile
+  getLineupProps: () => LineupProps
   goToArtistPage: () => void
 }
 

diff --git a/packages/web/src/pages/deleted-page/components/desktop/DeletedPage.tsx b/packages/web/src/pages/deleted-page/components/desktop/DeletedPage.tsx
@@ -12,7 +12,7 @@ import { Button, IconUser } from '@audius/harmony'
 import { ArtistPopover } from 'components/artist/ArtistPopover'
 import CoverPhoto from 'components/cover-photo/CoverPhoto'
 import DynamicImage from 'components/dynamic-image/DynamicImage'
-import Lineup, { LineupWithoutTile } from 'components/lineup/Lineup'
+import Lineup, { LineupProps } from 'components/lineup/Lineup'
 import NavBanner from 'components/nav-banner/NavBanner'
 import Page from 'components/page/Page'
 import { StatBanner } from 'components/stat-banner/StatBanner'
@@ -71,7 +71,7 @@ export type DeletedPageProps = {
 
   playable: Playable
   user: User | null
-  getLineupProps: () => LineupWithoutTile
+  getLineupProps: () => LineupProps
   goToArtistPage: () => void
 }
 

diff --git a/packages/web/src/pages/deleted-page/components/mobile/DeletedPage.tsx b/packages/web/src/pages/deleted-page/components/mobile/DeletedPage.tsx
@@ -11,7 +11,7 @@ import { Button, IconUser } from '@audius/harmony'
 
 import { ArtistPopover } from 'components/artist/ArtistPopover'
 import DynamicImage from 'components/dynamic-image/DynamicImage'
-import Lineup, { LineupWithoutTile } from 'components/lineup/Lineup'
+import Lineup, { LineupProps } from 'components/lineup/Lineup'
 import MobilePageContainer from 'components/mobile-page-container/MobilePageContainer'
 import UserBadges from 'components/user-badges/UserBadges'
 import { useCollectionCoverArt } from 'hooks/useCollectionCoverArt'
@@ -68,7 +68,7 @@ export type DeletedPageProps = {
 
   playable: Playable
   user: User | null
-  getLineupProps: () => LineupWithoutTile
+  getLineupProps: () => LineupProps
   goToArtistPage: () => void
 }
 

diff --git a/packages/web/src/pages/remixes-page/components/desktop/RemixesPage.tsx b/packages/web/src/pages/remixes-page/components/desktop/RemixesPage.tsx
@@ -4,7 +4,7 @@ import { IconRemix as IconRemixes } from '@audius/harmony'
 import cn from 'classnames'
 
 import Header from 'components/header/desktop/Header'
-import Lineup, { LineupWithoutTile } from 'components/lineup/Lineup'
+import Lineup, { LineupProps } from 'components/lineup/Lineup'
 import Page from 'components/page/Page'
 import UserBadges from 'components/user-badges/UserBadges'
 import { fullTrackRemixesPage } from 'utils/route'
@@ -26,7 +26,7 @@ export type RemixesPageProps = {
   count: number | null
   originalTrack: Track | null
   user: User | null
-  getLineupProps: () => LineupWithoutTile
+  getLineupProps: () => LineupProps
   goToTrackPage: () => void
   goToArtistPage: () => void
 }

diff --git a/packages/web/src/pages/remixes-page/components/mobile/RemixesPage.tsx b/packages/web/src/pages/remixes-page/components/mobile/RemixesPage.tsx
@@ -7,7 +7,7 @@ import cn from 'classnames'
 
 import Header from 'components/header/mobile/Header'
 import { HeaderContext } from 'components/header/mobile/HeaderContextProvider'
-import Lineup, { LineupWithoutTile } from 'components/lineup/Lineup'
+import Lineup, { LineupProps } from 'components/lineup/Lineup'
 import MobilePageContainer from 'components/mobile-page-container/MobilePageContainer'
 import { useSubPageHeader } from 'components/nav/mobile/NavContext'
 import UserBadges from 'components/user-badges/UserBadges'
@@ -30,7 +30,7 @@ export type RemixesPageProps = {
   count: number | null
   originalTrack: Track | null
   user: User | null
-  getLineupProps: () => LineupWithoutTile
+  getLineupProps: () => LineupProps
   goToTrackPage: () => void
   goToArtistPage: () => void
 }

diff --git a/packages/web/src/pages/search-page-v2/search-results/TrackResults.tsx b/packages/web/src/pages/search-page-v2/search-results/TrackResults.tsx
@@ -137,9 +137,7 @@ export const TrackResults = (props: TrackResultsProps) => {
 
   return (
     <Lineup
-      variant={
-        viewLayout === 'grid' ? LineupVariant.SECTION : LineupVariant.MAIN
-      }
+      variant={viewLayout === 'grid' ? LineupVariant.GRID : LineupVariant.MAIN}
       count={count}
       loadMore={loadMore}
       scrollParent={mainContentRef.current}