From bd3fdc7df5a06ef379943760953cc82c4d2fd0ce Mon Sep 17 00:00:00 2001 From: Dylan Jeffers Date: Fri, 18 Aug 2023 21:43:26 -0700 Subject: [PATCH] [C-2972] Fix feed, trending track-page seo (#3907) --- .../web/src/components/link/Link.module.css | 2 + packages/web/src/components/link/Link.tsx | 20 ++++++- .../track/GiantTrackTile.module.css | 14 +---- .../src/components/track/GiantTrackTile.tsx | 20 +++++-- .../desktop/ConnectedPlaylistTile.module.css | 13 ----- .../track/desktop/ConnectedPlaylistTile.tsx | 26 +++------ .../desktop/ConnectedTrackTile.module.css | 29 +--------- .../track/desktop/ConnectedTrackTile.tsx | 55 +++++-------------- .../components/track/desktop/PlaylistTile.tsx | 1 - .../track/desktop/TrackTile.module.css | 16 +----- .../components/track/desktop/TrackTile.tsx | 27 +++------ .../track/mobile/ConnectedPlaylistTile.tsx | 11 +--- .../track/mobile/ConnectedTrackTile.tsx | 20 +------ .../track/mobile/PlaylistTile.module.css | 34 ++---------- .../components/track/mobile/PlaylistTile.tsx | 42 +++++++++----- .../track/mobile/TrackTile.module.css | 42 ++------------ .../src/components/track/mobile/TrackTile.tsx | 43 +++++++-------- packages/web/src/components/track/types.ts | 3 +- .../src/components/typography/constants.ts | 6 ++ .../web/src/components/typography/types.ts | 8 ++- .../typography/typography.module.css | 8 +++ .../pages/track-page/TrackPageProvider.tsx | 1 - .../components/desktop/TrackPage.tsx | 5 -- .../components/mobile/TrackHeader.module.css | 22 +------- .../components/mobile/TrackHeader.tsx | 22 +++++--- .../components/mobile/TrackPage.tsx | 5 +- 26 files changed, 169 insertions(+), 326 deletions(-) diff --git a/packages/web/src/components/link/Link.module.css b/packages/web/src/components/link/Link.module.css index 9f2473c594..f9af2932ea 100644 --- a/packages/web/src/components/link/Link.module.css +++ b/packages/web/src/components/link/Link.module.css @@ -1,4 +1,6 @@ .root { + display: inline-flex; + align-items: center; transition: color var(--expressive); } diff --git a/packages/web/src/components/link/Link.tsx b/packages/web/src/components/link/Link.tsx index b7316f2611..f3f33abfa1 100644 --- a/packages/web/src/components/link/Link.tsx +++ b/packages/web/src/components/link/Link.tsx @@ -1,3 +1,5 @@ +import { useCallback, MouseEvent } from 'react' + import cn from 'classnames' import { Link as LinkBase, LinkProps as LinkBaseProps } from 'react-router-dom' @@ -9,8 +11,22 @@ import styles from './Link.module.css' type LinkProps = LinkBaseProps<'a'> & TextProps<'a'> export const Link = (props: LinkProps) => { - const { className, ...other } = props + const { className, onClick, ...other } = props + + const handleClick = useCallback( + (e: MouseEvent) => { + onClick?.(e) + e.stopPropagation() + }, + [onClick] + ) + return ( - + ) } diff --git a/packages/web/src/components/track/GiantTrackTile.module.css b/packages/web/src/components/track/GiantTrackTile.module.css index 248f7d867a..55b3103876 100644 --- a/packages/web/src/components/track/GiantTrackTile.module.css +++ b/packages/web/src/components/track/GiantTrackTile.module.css @@ -95,19 +95,11 @@ display: inline; } -.artistWrapper .artist { +.artist { display: inline-flex; - color: var(--secondary); - font-size: var(--font-l); - font-weight: var(--font-medium); padding-left: var(--unit-1); - align-items: center; -} - -.artistWrapper .artist:hover { - color: var(--primary); - cursor: pointer; - text-decoration: underline; + text-decoration: inherit; + color: inherit; } .playSection { diff --git a/packages/web/src/components/track/GiantTrackTile.tsx b/packages/web/src/components/track/GiantTrackTile.tsx index f325ca95a0..7af087eaba 100644 --- a/packages/web/src/components/track/GiantTrackTile.tsx +++ b/packages/web/src/components/track/GiantTrackTile.tsx @@ -34,6 +34,7 @@ import { ReactComponent as IconRobot } from 'assets/img/robot.svg' import { ArtistPopover } from 'components/artist/ArtistPopover' import DownloadButtons from 'components/download-buttons/DownloadButtons' import { EntityActionButton } from 'components/entity-page/EntityActionButton' +import { Link } from 'components/link' import LoadingSpinner from 'components/loading-spinner/LoadingSpinner' import Menu from 'components/menu/Menu' import RepostFavoritesStats from 'components/repost-favorites-stats/RepostFavoritesStats' @@ -43,9 +44,11 @@ import { Tile } from 'components/tile' import Toast from 'components/toast/Toast' import Tooltip from 'components/tooltip/Tooltip' import { ComponentPlacement } from 'components/types' +import { Text } from 'components/typography' import UserBadges from 'components/user-badges/UserBadges' import { getFeatureEnabled } from 'services/remote-config/featureFlagHelpers' import { moodMap } from 'utils/Moods' +import { profilePage } from 'utils/route' import { AiTrackSection } from './AiTrackSection' import Badge from './Badge' @@ -105,7 +108,6 @@ export type GiantTrackTileProps = { listenCount: number loading: boolean mood: string - onClickArtistName: () => void onClickFavorites: () => void onClickReposts: () => void onDownload: (trackId: ID, category?: string, parentTrackId?: ID) => void @@ -154,7 +156,6 @@ export const GiantTrackTile = ({ listenCount, loading, mood, - onClickArtistName, onClickFavorites, onClickReposts, onDownload, @@ -523,16 +524,23 @@ export const GiantTrackTile = ({
- By + By -

- {artistName} + + + {artistName} + -

+
{isLoading && ( diff --git a/packages/web/src/components/track/desktop/ConnectedPlaylistTile.module.css b/packages/web/src/components/track/desktop/ConnectedPlaylistTile.module.css index 23a861c6fb..f59b052b63 100644 --- a/packages/web/src/components/track/desktop/ConnectedPlaylistTile.module.css +++ b/packages/web/src/components/track/desktop/ConnectedPlaylistTile.module.css @@ -43,12 +43,6 @@ margin-right: 4px; } -.name { - font-weight: var(--font-medium); - font-size: var(--font-m); - color: var(--neutral); -} - .userName { display: inline-flex; align-items: baseline; @@ -68,13 +62,6 @@ margin-right: 4px; } -.name.artistNameLink:hover { - cursor: pointer; - color: var(--primary); - text-decoration: underline; - text-decoration-color: var(--primary-light-2); -} - .iconVerified { margin-left: 4px; position: relative; diff --git a/packages/web/src/components/track/desktop/ConnectedPlaylistTile.tsx b/packages/web/src/components/track/desktop/ConnectedPlaylistTile.tsx index a4ef8bbaf4..9f0b09061d 100644 --- a/packages/web/src/components/track/desktop/ConnectedPlaylistTile.tsx +++ b/packages/web/src/components/track/desktop/ConnectedPlaylistTile.tsx @@ -6,8 +6,7 @@ import { useEffect, useCallback, ReactChildren, - useRef, - MouseEventHandler + useRef } from 'react' import { @@ -36,6 +35,7 @@ import { ReactComponent as IconKebabHorizontal } from 'assets/img/iconKebabHoriz import { TrackEvent, make } from 'common/store/analytics/actions' import { ArtistPopover } from 'components/artist/ArtistPopover' import { Draggable } from 'components/dragndrop' +import { Link } from 'components/link' import { OwnProps as CollectionkMenuProps } from 'components/menu/CollectionMenu' import Menu from 'components/menu/Menu' import { CollectionArtwork } from 'components/track/Artwork' @@ -78,6 +78,10 @@ const { const { getCollection, getTracksFromCollection } = cacheCollectionsSelectors const getUserHandle = accountSelectors.getUserHandle +const messages = { + createdBy: 'Created by' +} + type OwnProps = { uid: UID ordered: boolean @@ -309,27 +313,15 @@ const ConnectedPlaylistTile = ({ ) } - const onClickArtistName: MouseEventHandler = useCallback( - (e) => { - e.stopPropagation() - if (goToRoute) goToRoute(profilePage(handle)) - }, - [handle, goToRoute] - ) const renderUserName = () => { return (
- {'Created by'} + {messages.createdBy} - + {name} - + { - e.preventDefault() - e.stopPropagation() - if (goToRoute) goToRoute(profilePage(handle)) - }, - [handle, goToRoute] - ) - - const onClickTitle: MouseEventHandler = useCallback( - (e) => { - e.preventDefault() - e.stopPropagation() - if (goToRoute) goToRoute(permalink) - }, - [goToRoute, permalink] - ) - const renderUserName = () => { return ( -
- - - {name} - - - -
+ + + {name} + + + + ) } @@ -405,7 +378,6 @@ const ConnectedTrackTile = ({ [styles.loading]: loading, [styles.active]: isActive })} - onClickTitle={onClickTitle} onClickRepost={onClickRepost} onClickFavorite={onClickFavorite} onClickShare={onClickShare} @@ -449,7 +421,6 @@ function mapStateToProps(state: AppState, ownProps: OwnProps) { function mapDispatchToProps(dispatch: Dispatch) { return { - goToRoute: (route: string) => dispatch(pushRoute(route)), shareTrack: (trackId: ID) => dispatch( requestOpenShareModal({ diff --git a/packages/web/src/components/track/desktop/PlaylistTile.tsx b/packages/web/src/components/track/desktop/PlaylistTile.tsx index 2cfa2d5f0c..1edc12e59f 100644 --- a/packages/web/src/components/track/desktop/PlaylistTile.tsx +++ b/packages/web/src/components/track/desktop/PlaylistTile.tsx @@ -109,7 +109,6 @@ const PlaylistTile = ({ bottomBar={bottomBar} showIconButtons={showIconButtons} containerClassName={tileClassName} - onClickTitle={onClickTitle} onClickRepost={onClickRepost} onClickFavorite={onClickFavorite} onClickShare={onClickShare} diff --git a/packages/web/src/components/track/desktop/TrackTile.module.css b/packages/web/src/components/track/desktop/TrackTile.module.css index 75c6101f6d..084adfbf19 100644 --- a/packages/web/src/components/track/desktop/TrackTile.module.css +++ b/packages/web/src/components/track/desktop/TrackTile.module.css @@ -148,10 +148,6 @@ inset var(--unit-1) var(--unit-1) var(--unit-2) rgba(255, 255, 255, 0.2); } -.title { - color: var(--neutral); -} - .volumeIcon { margin-left: 6px; } @@ -212,19 +208,11 @@ color: var(--primary); } -.title:hover, -.creatorRow .name.artistNameLink:hover { - cursor: pointer; - color: var(--primary); - text-decoration: underline !important; - text-decoration-color: var(--primary-light-2); -} - .isDisabled .title:hover, -.isDisabled .creatorRow .name.artistNameLink:hover { +.isDisabled .creatorRow:hover { cursor: default; color: inherit; - text-decoration: none; + text-decoration: none !important; } .isHidden { diff --git a/packages/web/src/components/track/desktop/TrackTile.tsx b/packages/web/src/components/track/desktop/TrackTile.tsx index bec0643979..5fa710c308 100644 --- a/packages/web/src/components/track/desktop/TrackTile.tsx +++ b/packages/web/src/components/track/desktop/TrackTile.tsx @@ -1,4 +1,4 @@ -import { memo, MouseEvent, useCallback } from 'react' +import { memo } from 'react' import { formatCount, @@ -18,6 +18,7 @@ import { useSelector } from 'react-redux' import { ReactComponent as IconStar } from 'assets/img/iconStar.svg' import { ReactComponent as IconVolume } from 'assets/img/iconVolume.svg' import { DogEar } from 'components/dog-ear' +import { Link } from 'components/link' import Skeleton from 'components/skeleton/Skeleton' import typeStyles from 'components/typography/typography.module.css' import { useFlag } from 'hooks/useRemoteConfig' @@ -194,15 +195,6 @@ const TrackTile = ({ } } - const onClickTitleWrapper = useCallback( - (e: MouseEvent) => { - e.stopPropagation() - e.preventDefault() - onClickTitle(e) - }, - [onClickTitle] - ) - const dogEarType = isLoading ? undefined : getDogEarType({ @@ -291,20 +283,17 @@ const TrackTile = ({ {isLoading ? ( ) : ( - {title} {isPlaying ? ( ) : null} - + )}
) => { - e.stopPropagation() - goToRoute(profilePage(user.handle)) - }, - [goToRoute, user] - ) - const onShare = useCallback(() => { shareCollection(collection.playlist_id) }, [shareCollection, collection.playlist_id]) @@ -281,6 +272,7 @@ const ConnectedPlaylistTile = ({ isPublic={!collection.is_private} contentTitle={collection.is_album ? 'album' : 'playlist'} playlistTitle={collection.playlist_name} + permalink={collection.permalink} artistHandle={user.handle} artistName={user.name} artistIsVerified={user.is_verified} @@ -310,7 +302,6 @@ const ConnectedPlaylistTile = ({ isLoading={isActive && isBuffering} activeTrackUid={playingUid || null} goToRoute={goToRoute} - goToArtistPage={goToArtistPage} goToCollectionPage={goToCollectionPage} toggleSave={toggleSave} toggleRepost={toggleRepost} diff --git a/packages/web/src/components/track/mobile/ConnectedTrackTile.tsx b/packages/web/src/components/track/mobile/ConnectedTrackTile.tsx index 7400869246..0dde40e69c 100644 --- a/packages/web/src/components/track/mobile/ConnectedTrackTile.tsx +++ b/packages/web/src/components/track/mobile/ConnectedTrackTile.tsx @@ -30,11 +30,7 @@ import { Dispatch } from 'redux' import { TrackTileProps } from 'components/track/types' import { useFlag } from 'hooks/useRemoteConfig' import { AppState } from 'store/types' -import { - profilePage, - REPOSTING_USERS_ROUTE, - FAVORITING_USERS_ROUTE -} from 'utils/route' +import { REPOSTING_USERS_ROUTE, FAVORITING_USERS_ROUTE } from 'utils/route' import { isMatrix, shouldShowDark } from 'utils/theme/theme' import { getTrackWithFallback, getUserWithFallback } from '../helpers' @@ -163,18 +159,6 @@ const ConnectedTrackTile = ({ } } - const goToTrackPage = (e: MouseEvent) => { - e.preventDefault() - e.stopPropagation() - goToRoute(permalink) - } - - const goToArtistPage = (e: MouseEvent) => { - e.preventDefault() - e.stopPropagation() - goToRoute(profilePage(handle)) - } - const onShare = (id: ID) => { shareTrack(id) } @@ -266,8 +250,6 @@ const ConnectedTrackTile = ({ isLoading={loading} isPlaying={uid === playingUid && isPlaying} isBuffering={isBuffering} - goToArtistPage={goToArtistPage} - goToTrackPage={goToTrackPage} toggleSave={toggleSave} onShare={onShare} onClickOverflow={onClickOverflow} diff --git a/packages/web/src/components/track/mobile/PlaylistTile.module.css b/packages/web/src/components/track/mobile/PlaylistTile.module.css index f9d849487a..496ca0aabe 100644 --- a/packages/web/src/components/track/mobile/PlaylistTile.module.css +++ b/packages/web/src/components/track/mobile/PlaylistTile.module.css @@ -128,10 +128,6 @@ flex: 0 0 auto; } -.titlesActive { - color: var(--primary); -} - .titles div { overflow: hidden; text-overflow: ellipsis; @@ -140,33 +136,21 @@ } .title { - font-weight: bold; - line-height: normal; margin-bottom: 2px; - display: flex; - align-items: center; position: relative; min-height: 20px; min-width: 90px; } -.title:hover { - color: var(--primary); - text-decoration: underline; +.playIcon { + margin-left: var(--unit-2); } -.title:active { - color: var(--primary); - text-decoration: underline; -} - -.title svg { - margin-left: 4px; +.playIcon path { + fill: var(--primary); } .artist { - font-weight: var(--font-medium); - line-height: normal; max-width: 100%; width: 100%; display: inline-flex; @@ -176,16 +160,6 @@ min-height: 20px; } -.artist:hover { - color: var(--primary); - text-decoration: underline; -} - -.artist:active { - color: var(--primary); - text-decoration: underline; -} - .userName { overflow: hidden; text-overflow: ellipsis; diff --git a/packages/web/src/components/track/mobile/PlaylistTile.tsx b/packages/web/src/components/track/mobile/PlaylistTile.tsx index 2f76ba11a4..02c6c9c46c 100644 --- a/packages/web/src/components/track/mobile/PlaylistTile.tsx +++ b/packages/web/src/components/track/mobile/PlaylistTile.tsx @@ -13,9 +13,12 @@ import { range } from 'lodash' import { ReactComponent as IconVolume } from 'assets/img/iconVolume.svg' import FavoriteButton from 'components/alt-button/FavoriteButton' import RepostButton from 'components/alt-button/RepostButton' +import { Link } from 'components/link' import Skeleton from 'components/skeleton/Skeleton' import { PlaylistTileProps } from 'components/track/types' +import { Text } from 'components/typography' import UserBadges from 'components/user-badges/UserBadges' +import { profilePage } from 'utils/route' import BottomButtons from './BottomButtons' import styles from './PlaylistTile.module.css' @@ -113,7 +116,6 @@ type ExtraProps = { isPlaying: boolean isActive: boolean goToCollectionPage: (e: MouseEvent) => void - goToArtistPage: (e: MouseEvent) => void toggleSave: () => void toggleRepost: () => void onClickOverflow: () => void @@ -136,7 +138,9 @@ const PlaylistTile = (props: PlaylistTileProps & ExtraProps) => { showRankIcon, trackCount, variant, - containerClassName + containerClassName, + permalink, + artistHandle } = props const [artworkLoaded, setArtworkLoaded] = useState(false) useEffect(() => { @@ -176,14 +180,17 @@ const PlaylistTile = (props: PlaylistTileProps & ExtraProps) => { isBuffering={props.isLoading} artworkIconClassName={styles.artworkIcon} /> -
-
-
{props.playlistTitle}
- {props.isPlaying && } +
+ + + {props.playlistTitle} + + {props.isPlaying && } {!shouldShow && ( { height='16px' /> )} -
-
- + + + {props.artistName} - + { height='16px' /> )} -
+
diff --git a/packages/web/src/components/track/mobile/TrackTile.module.css b/packages/web/src/components/track/mobile/TrackTile.module.css index aea7df72e2..bf6032e199 100644 --- a/packages/web/src/components/track/mobile/TrackTile.module.css +++ b/packages/web/src/components/track/mobile/TrackTile.module.css @@ -131,19 +131,11 @@ margin-right: var(--unit-3); } -.title path { - fill: var(--primary); -} - -.title svg { - flex: 0 0 auto; -} - .titlesActive { color: var(--primary); } -.titles div { +.text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; @@ -158,27 +150,18 @@ margin-top: auto; padding-right: 5px; width: 100%; - color: inherit; - text-decoration: none; } -.title:hover { - color: var(--primary); - text-decoration: underline !important; -} - -.title:active { - text-decoration: underline !important; +.playIcon { + margin-left: var(--unit-2); } -.title svg { - margin-left: var(--unit-2); +.playIcon path { + fill: var(--primary); } .artist { margin-bottom: auto; - font-weight: 500; - line-height: normal; padding-right: 5px; max-width: 100%; min-height: var(--unit-5); @@ -187,21 +170,6 @@ position: relative; display: flex; color: inherit; - text-decoration: none; -} - -.artist:hover { - color: var(--primary); - text-decoration: underline !important; -} - -.artist:active { - text-decoration: underline !important; -} - -.userName { - overflow: hidden; - text-overflow: ellipsis; } .skeleton { diff --git a/packages/web/src/components/track/mobile/TrackTile.tsx b/packages/web/src/components/track/mobile/TrackTile.tsx index 518117d533..bfa8938d88 100644 --- a/packages/web/src/components/track/mobile/TrackTile.tsx +++ b/packages/web/src/components/track/mobile/TrackTile.tsx @@ -23,9 +23,11 @@ import FavoriteButton from 'components/alt-button/FavoriteButton' import RepostButton from 'components/alt-button/RepostButton' import { ArtistPopover } from 'components/artist/ArtistPopover' import { DogEar } from 'components/dog-ear' +import { Link } from 'components/link' import Skeleton from 'components/skeleton/Skeleton' import { PremiumContentLabel } from 'components/track/PremiumContentLabel' import { TrackTileProps } from 'components/track/types' +import { Text } from 'components/typography' import typeStyles from 'components/typography/typography.module.css' import UserBadges from 'components/user-badges/UserBadges' import { profilePage } from 'utils/route' @@ -42,8 +44,6 @@ const { getPremiumTrackStatusMap } = premiumContentSelectors type ExtraProps = { permalink: string - goToTrackPage: (e: MouseEvent) => void - goToArtistPage: (e: MouseEvent) => void toggleSave: (trackId: ID) => void toggleRepost: (trackId: ID) => void onShare: (trackId: ID) => void @@ -324,17 +324,16 @@ const TrackTile = (props: CombinedProps) => { [styles.titlesSkeleton]: props.showSkeleton })} > - -
{props.title}
- {isPlaying ? : null} + + {props.title} + + {isPlaying ? : null} {(!artworkLoaded || showSkeleton) && ( { height='80%' /> )} - - + -
- - {props.artistName} - -
+ + + {props.artistName} + + { height='80%' /> )} - +
{coSign && (
void + onClickTitle?: (e: MouseEvent) => void /** on click repost icon */ onClickRepost: (e?: MouseEvent) => void diff --git a/packages/web/src/components/typography/constants.ts b/packages/web/src/components/typography/constants.ts index 71dce531ce..9bed151feb 100644 --- a/packages/web/src/components/typography/constants.ts +++ b/packages/web/src/components/typography/constants.ts @@ -42,5 +42,11 @@ export const variantTagMap: Record = { medium: 'p', small: 'p', xSmall: 'p' + }, + inherit: { + large: 'span', + medium: 'span', + small: 'span', + xSmall: 'span' } } diff --git a/packages/web/src/components/typography/types.ts b/packages/web/src/components/typography/types.ts index ebab865115..b239589fbd 100644 --- a/packages/web/src/components/typography/types.ts +++ b/packages/web/src/components/typography/types.ts @@ -14,5 +14,11 @@ export type TextStrength = 'weak' | 'default' | 'strong' export type TextSize = 'xLarge' | 'large' | 'medium' | 'small' | 'xSmall' -export type TextVariant = 'display' | 'heading' | 'title' | 'label' | 'body' +export type TextVariant = + | 'display' + | 'heading' + | 'title' + | 'label' + | 'body' + | 'inherit' export type VariantSizeTagMap = Partial> diff --git a/packages/web/src/components/typography/typography.module.css b/packages/web/src/components/typography/typography.module.css index e21935365d..3533ab35b3 100644 --- a/packages/web/src/components/typography/typography.module.css +++ b/packages/web/src/components/typography/typography.module.css @@ -221,3 +221,11 @@ color: var(--focus); text-decoration: underline !important; } + +.inherit { + color: inherit; + font-size: inherit; + font-weight: inherit; + line-height: inherit; + text-decoration: inherit; +} diff --git a/packages/web/src/pages/track-page/TrackPageProvider.tsx b/packages/web/src/pages/track-page/TrackPageProvider.tsx index d679ccbb14..411fa46090 100644 --- a/packages/web/src/pages/track-page/TrackPageProvider.tsx +++ b/packages/web/src/pages/track-page/TrackPageProvider.tsx @@ -459,7 +459,6 @@ class TrackPageProvider extends Component< userId, badge, onHeroPlay: this.onHeroPlay, - goToProfilePage: this.goToProfilePage, goToAllRemixesPage: this.goToAllRemixesPage, goToParentRemixesPage: this.goToParentRemixesPage, onHeroRepost: this.onHeroRepost, diff --git a/packages/web/src/pages/track-page/components/desktop/TrackPage.tsx b/packages/web/src/pages/track-page/components/desktop/TrackPage.tsx index c654319a73..4c894f9f48 100644 --- a/packages/web/src/pages/track-page/components/desktop/TrackPage.tsx +++ b/packages/web/src/pages/track-page/components/desktop/TrackPage.tsx @@ -44,7 +44,6 @@ export type OwnProps = { userId: ID | null badge: string | null onHeroPlay: (isPlaying: boolean) => void - goToProfilePage: (handle: string) => void goToAllRemixesPage: () => void goToParentRemixesPage: () => void onHeroShare: (trackId: ID) => void @@ -81,7 +80,6 @@ const TrackPage = ({ userId, badge, onHeroPlay, - goToProfilePage, goToAllRemixesPage, goToParentRemixesPage, onHeroShare, @@ -118,8 +116,6 @@ const TrackPage = ({ const onSave = isOwner ? () => {} : () => heroTrack && onSaveTrack(isSaved, heroTrack.track_id) - const onClickArtistName = () => - goToProfilePage(emptyStringGuard(user?.handle)) const onShare = () => (heroTrack ? onHeroShare(heroTrack.track_id) : null) const onRepost = () => heroTrack ? onHeroRepost(isReposted, heroTrack.track_id) : null @@ -168,7 +164,6 @@ const TrackPage = ({ fieldVisibility={defaults.fieldVisibility} coSign={defaults.coSign} // Actions - onClickArtistName={onClickArtistName} onPlay={onPlay} onShare={onShare} onRepost={onRepost} diff --git a/packages/web/src/pages/track-page/components/mobile/TrackHeader.module.css b/packages/web/src/pages/track-page/components/mobile/TrackHeader.module.css index 53bf29bc18..ee94c46754 100644 --- a/packages/web/src/pages/track-page/components/mobile/TrackHeader.module.css +++ b/packages/web/src/pages/track-page/components/mobile/TrackHeader.module.css @@ -52,27 +52,6 @@ text-align: center; } -.artist { - color: var(--secondary); - font-family: var(--font-family); - font-size: var(--font-l); - font-weight: var(--font-medium); - line-height: 24px; - justify-content: center; - text-align: center; - display: flex; - align-items: center; -} - -.artist h2 { - color: var(--secondary); - display: inline; -} - -.artist:active { - text-decoration: underline; -} - .verified { margin-left: 8px; } @@ -80,6 +59,7 @@ .titleArtistSection { display: flex; flex-direction: column; + align-items: center; gap: var(--unit-3); } diff --git a/packages/web/src/pages/track-page/components/mobile/TrackHeader.tsx b/packages/web/src/pages/track-page/components/mobile/TrackHeader.tsx index 43e694646c..f221278890 100644 --- a/packages/web/src/pages/track-page/components/mobile/TrackHeader.tsx +++ b/packages/web/src/pages/track-page/components/mobile/TrackHeader.tsx @@ -40,14 +40,17 @@ import { Size } from 'components/co-sign/types' import { DogEar } from 'components/dog-ear' import DownloadButtons from 'components/download-buttons/DownloadButtons' import DynamicImage from 'components/dynamic-image/DynamicImage' +import { Link } from 'components/link' import { SearchTag } from 'components/search/SearchTag' import { AiTrackSection } from 'components/track/AiTrackSection' import Badge from 'components/track/Badge' import { PremiumTrackSection } from 'components/track/PremiumTrackSection' +import { Text } from 'components/typography' import typeStyles from 'components/typography/typography.module.css' import UserBadges from 'components/user-badges/UserBadges' import { useTrackCoverArt } from 'hooks/useTrackCoverArt' import { moodMap } from 'utils/Moods' +import { profilePage } from 'utils/route' import { isDarkMode } from 'utils/theme/theme' import HiddenTrackHeader from '../HiddenTrackHeader' @@ -112,7 +115,7 @@ type TrackHeaderProps = { userId: ID coverArtSizes: CoverArtSizes | null artistName: string - artistVerified: boolean + artistHandle: string description: string released: string genre: string @@ -131,7 +134,6 @@ type TrackHeaderProps = { fieldVisibility: FieldVisibility coSign: Remix | null aiAttributedUserId: Nullable - onClickArtistName: () => void onClickMobileOverflow: ( trackId: ID, overflowActions: OverflowAction[] @@ -151,7 +153,7 @@ const TrackHeader = ({ userId, coverArtSizes, artistName, - artistVerified, + artistHandle, description, isOwner, isFollowing, @@ -176,7 +178,6 @@ const TrackHeader = ({ genre, tags, aiAttributedUserId, - onClickArtistName, onPlay, onShare, onSave, @@ -400,14 +401,21 @@ const TrackHeader = ({ {imageElement}

{title}

-
-

{artistName}

+ + + {artistName} + -
+
{showPlay ? ( void onHeroShare: (trackId: ID) => void - goToProfilePage: (handle: string) => void goToAllRemixesPage: () => void goToParentRemixesPage: () => void onHeroRepost: (isReposted: boolean, trackId: number) => void @@ -82,7 +81,6 @@ const TrackPage = ({ userId, onHeroPlay, onHeroShare, - goToProfilePage, goToAllRemixesPage, goToParentRemixesPage, onSaveTrack, @@ -129,7 +127,6 @@ const TrackPage = ({ const onRepost = isOwner ? () => {} : () => heroTrack && onHeroRepost(isReposted, heroTrack.track_id) - const onClickArtistName = () => goToProfilePage(user ? user.handle : '') const onShare = () => { heroTrack && onHeroShare(heroTrack.track_id) } @@ -165,6 +162,7 @@ const TrackPage = ({ trackId={defaults.trackId} userId={heroTrack?.owner_id ?? 0} artistName={emptyStringGuard(user?.name)} + artistHandle={emptyStringGuard(user?.handle)} artistVerified={user?.is_verified ?? false} coverArtSizes={defaults.coverArtSizes} tags={defaults.tags} @@ -181,7 +179,6 @@ const TrackPage = ({ isSaved={isSaved} coSign={defaults.coSign} // Actions (Wire up once we add backend integrations) - onClickArtistName={onClickArtistName} onClickMobileOverflow={onClickMobileOverflow} onPlay={onPlay} onSave={onSave}