Skip to content

Commit 4640162

Browse files
dharit-tandharit-tan
authored
[PE-6016] Web Remix Contest Section (#11906)
1 parent 644fed6 commit 4640162

File tree

6 files changed

+247
-14
lines changed

6 files changed

+247
-14
lines changed

‎packages/web/src/pages/track-page/components/TrackPageLineup.tsx‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
1-
import { useFeatureFlag } from '@audius/common/hooks'
21
import { User } from '@audius/common/models'
3-
import { FeatureFlags } from '@audius/common/services'
42
import { useTrackPageLineup } from '@audius/common/src/api/tan-query/useTrackPageLineup'
53
import { tracksActions } from '@audius/common/src/store/pages/track/lineup/actions'
64
import { Flex, Text, IconRemix } from '@audius/harmony'
@@ -54,10 +52,7 @@ export const TrackPageLineup = ({
5452

5553
const { isDesktop, isMobile } = useTrackPageSize()
5654

57-
const { isEnabled: commentsFlagEnabled } = useFeatureFlag(
58-
FeatureFlags.COMMENTS_ENABLED
59-
)
60-
const isCommentingEnabled = commentsFlagEnabled && !commentsDisabled
55+
const isCommentingEnabled = !commentsDisabled
6156
const lineupVariant =
6257
(isCommentingEnabled && isDesktop) || isMobile
6358
? LineupVariant.SECTION

‎packages/web/src/pages/track-page/components/desktop/RemixContestDetailsTab.tsx‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import { useRemixContest } from '@audius/common/api'
2+
import { ID } from '@audius/common/models'
3+
import { dayjs } from '@audius/common/utils'
4+
import { Flex, Text } from '@audius/harmony'
5+
6+
const messages = {
7+
due: 'Submission Due:',
8+
deadline: (deadline?: string) => {
9+
if (!deadline) return ''
10+
const date = dayjs(deadline)
11+
return `${date.format('ddd. MMM D, YYYY')} at ${date.format('h:mm A')}`
12+
}
13+
}
14+
15+
type RemixContestDetailsTabProps = {
16+
trackId: ID
17+
}
18+
19+
/**
20+
* Tab content displaying details about a remix contest
21+
*/
22+
export const RemixContestDetailsTab = ({
23+
trackId
24+
}: RemixContestDetailsTabProps) => {
25+
const { data: remixContest } = useRemixContest(trackId)
26+
return (
27+
<Flex column gap='l' p='xl'>
28+
<Flex row gap='s'>
29+
<Text variant='title' size='l' color='accent'>
30+
{messages.due}
31+
</Text>
32+
<Text variant='body' size='l' strength='strong'>
33+
{messages.deadline(remixContest?.endDate)}
34+
</Text>
35+
</Flex>
36+
<Text variant='body' size='l'>
37+
{
38+
"Join our exciting remix contest! Showcase your creativity by reimagining your favorite tracks. Submit your remixes for a chance to win amazing prizes and gain recognition in the music community. Don't miss out on this opportunity to shine!"
39+
}
40+
</Text>
41+
</Flex>
42+
)
43+
}

‎packages/web/src/pages/track-page/components/desktop/RemixContestPrizesTab.tsx‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import { ID } from '@audius/common/models'
2+
import { Text, Flex } from '@audius/harmony'
3+
4+
type RemixContestPrizesTabProps = {
5+
trackId: ID
6+
}
7+
8+
/**
9+
* Tab content displaying prizes for a remix contest
10+
*/
11+
export const RemixContestPrizesTab = ({
12+
trackId
13+
}: RemixContestPrizesTabProps) => {
14+
return (
15+
<Flex column gap='l' p='xl'>
16+
<Text variant='body' size='l'>
17+
{'Best Remix Award - $500'}
18+
</Text>
19+
<Text variant='body' size='l'>
20+
{'Audience Choice Award - $300'}
21+
</Text>
22+
<Text variant='body' size='l'>
23+
{'Most Creative Remix - $200'}
24+
</Text>
25+
<Text variant='body' size='l'>
26+
{'Best Use of Original Material - $250'}
27+
</Text>
28+
<Text variant='body' size='l'>
29+
{'Rising Star Award - $150'}
30+
</Text>
31+
<Text variant='body' size='l'>
32+
{'Honorable Mention - $100'}
33+
</Text>
34+
</Flex>
35+
)
36+
}

‎packages/web/src/pages/track-page/components/desktop/RemixContestSection.tsx‎

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
import { useRemixContest } from '@audius/common/api'
2+
import { ID } from '@audius/common/models'
3+
import { UPLOAD_PAGE } from '@audius/common/src/utils/route'
4+
import {
5+
Box,
6+
Button,
7+
Flex,
8+
IconCloudUpload,
9+
IconTrophy,
10+
Text
11+
} from '@audius/harmony'
12+
13+
import { useNavigateToPage } from 'hooks/useNavigateToPage'
14+
import { useRequiresAccountCallback } from 'hooks/useRequiresAccount'
15+
import useTabs from 'hooks/useTabs/useTabs'
16+
17+
import { RemixContestDetailsTab } from './RemixContestDetailsTab'
18+
import { RemixContestPrizesTab } from './RemixContestPrizesTab'
19+
import { RemixContestSubmissionsTab } from './RemixContestSubmissionsTab'
20+
21+
const messages = {
22+
title: 'Remix Contest',
23+
details: 'Details',
24+
prizes: 'Prizes',
25+
submissions: 'Submissions',
26+
uploadRemixButtonText: 'Upload Your Remix'
27+
}
28+
29+
type RemixContestSectionProps = {
30+
trackId: ID
31+
isOwner: boolean
32+
}
33+
34+
/**
35+
* Section component that displays remix contest information for a track
36+
*/
37+
export const RemixContestSection = ({
38+
trackId,
39+
isOwner
40+
}: RemixContestSectionProps) => {
41+
const navigate = useNavigateToPage()
42+
const { data: remixContest } = useRemixContest(trackId)
43+
44+
const tabs = [
45+
{
46+
text: messages.details,
47+
label: 'details'
48+
},
49+
{
50+
text: messages.prizes,
51+
label: 'prizes'
52+
},
53+
{
54+
text: messages.submissions,
55+
label: 'submissions'
56+
}
57+
]
58+
59+
const elements = [
60+
<RemixContestDetailsTab key='details' trackId={trackId} />,
61+
<RemixContestPrizesTab key='prizes' trackId={trackId} />,
62+
<RemixContestSubmissionsTab key='submissions' trackId={trackId} />
63+
]
64+
65+
const { tabs: TabBar, body: TabBody } = useTabs({
66+
tabs,
67+
elements,
68+
isMobile: false
69+
})
70+
71+
const goToUploadWithRemix = useRequiresAccountCallback(() => {
72+
if (!trackId) return
73+
74+
const state = {
75+
initialMetadata: {
76+
is_remix: true,
77+
remix_of: {
78+
tracks: [{ parent_track_id: trackId }]
79+
}
80+
}
81+
}
82+
navigate(UPLOAD_PAGE, state)
83+
}, [trackId, navigate])
84+
85+
// TODO: Also return null if no remix contest description
86+
if (!trackId || !remixContest) return null
87+
88+
return (
89+
<Flex column gap='l'>
90+
<Flex alignItems='center' gap='s'>
91+
<IconTrophy color='default' />
92+
<Text variant='title' size='l'>
93+
{messages.title}
94+
</Text>
95+
</Flex>
96+
<Box backgroundColor='white' shadow='mid' borderRadius='l'>
97+
<Flex column pv='m'>
98+
<Flex justifyContent='space-between' borderBottom='default' ph='xl'>
99+
<Flex alignItems='center'>{TabBar}</Flex>
100+
{!isOwner ? (
101+
<Flex mb='m'>
102+
<Button
103+
variant='secondary'
104+
size='small'
105+
onClick={goToUploadWithRemix}
106+
iconLeft={IconCloudUpload}
107+
>
108+
{messages.uploadRemixButtonText}
109+
</Button>
110+
</Flex>
111+
) : null}
112+
</Flex>
113+
{TabBody}
114+
</Flex>
115+
</Box>
116+
</Flex>
117+
)
118+
}

‎packages/web/src/pages/track-page/components/desktop/RemixContestSubmissionsTab.tsx‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import { ID } from '@audius/common/models'
2+
import { Flex, Text } from '@audius/harmony'
3+
4+
const messages = {
5+
noSubmissions: 'No submissions yet',
6+
beFirst: 'Be the first to upload a remix!'
7+
}
8+
9+
type RemixContestSubmissionsTabProps = {
10+
trackId: ID
11+
}
12+
13+
/**
14+
* Tab content displaying submissions for a remix contest
15+
*/
16+
export const RemixContestSubmissionsTab = ({
17+
trackId
18+
}: RemixContestSubmissionsTabProps) => {
19+
return <EmptyRemixContestSubmissions />
20+
}
21+
22+
const EmptyRemixContestSubmissions = () => {
23+
return (
24+
<Flex
25+
column
26+
w='100%'
27+
pv='3xl'
28+
gap='m'
29+
justifyContent='center'
30+
alignItems='center'
31+
>
32+
<Text variant='heading' size='s'>
33+
{messages.noSubmissions}
34+
</Text>
35+
<Text variant='body' size='l' color='subdued'>
36+
{messages.beFirst}
37+
</Text>
38+
</Flex>
39+
)
40+
}

‎packages/web/src/pages/track-page/components/desktop/TrackPage.tsx‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
import { useCallback, useRef } from 'react'
22

33
import { useToggleFavoriteTrack } from '@audius/common/api'
4-
import { useFeatureFlag, useGatedContentAccess } from '@audius/common/hooks'
4+
import { useGatedContentAccess } from '@audius/common/hooks'
55
import { ID, Track, User, FavoriteSource } from '@audius/common/models'
6-
import { FeatureFlags } from '@audius/common/services'
76
import { Box, Flex } from '@audius/harmony'
87

98
import { CommentSection } from 'components/comments/CommentSection'
@@ -19,6 +18,8 @@ import { getTrackDefaults, emptyStringGuard } from 'pages/track-page/utils'
1918
import { TrackPageLineup } from '../TrackPageLineup'
2019
import { useTrackPageSize } from '../useTrackPageSize'
2120

21+
import { RemixContestSection } from './RemixContestSection'
22+
2223
export type OwnProps = {
2324
title: string
2425
description: string
@@ -72,11 +73,7 @@ const TrackPage = ({
7273
const { isFetchingNFTAccess, hasStreamAccess } =
7374
useGatedContentAccess(heroTrack)
7475

75-
const { isEnabled: commentsFlagEnabled } = useFeatureFlag(
76-
FeatureFlags.COMMENTS_ENABLED
77-
)
78-
const isCommentingEnabled =
79-
commentsFlagEnabled && !heroTrack?.comments_disabled
76+
const isCommentingEnabled = !heroTrack?.comments_disabled
8077
const loading = !heroTrack || isFetchingNFTAccess
8178

8279
const toggleSaveTrack = useToggleFavoriteTrack({
@@ -184,13 +181,17 @@ const TrackPage = ({
184181
pt={200}
185182
pb={60}
186183
css={{ position: 'relative' }}
184+
gap='unit12'
187185
>
188186
{renderGiantTrackTile()}
187+
<RemixContestSection
188+
trackId={heroTrack?.track_id ?? 0}
189+
isOwner={isOwner}
190+
/>
189191
<Flex
190192
gap='2xl'
191193
w='100%'
192194
direction={isDesktop ? 'row' : 'column'}
193-
mt='3xl'
194195
mh='auto'
195196
css={{ maxWidth: 1080 }}
196197
justifyContent='center'

0 commit comments

Comments
 (0)