[PE-6049] Remix contest container for mobile web (#11944)

Author: Kyle-Shanks

packages/web/src/hooks/useTabs/TabStyles.module.css

@@ -24,6 +24,13 @@
   width: 100%;
 }
 
+.tabMobileV2 {
+  color: var(--harmony-text-subdued);
+  flex-direction: row;
+  justify-content: center;
+  padding: 4px 8px 6px;
+}
+
 .tabDesktop {
   color: var(--harmony-text-subdued);
   flex-direction: row;
@@ -82,6 +89,12 @@
   box-shadow: 0 2px 5px -2px var(--tile-shadow-3);
 }
 
+.tabBarContainerMobileV2 {
+  width: 100%;
+  background-color: var(--harmony-white);
+  justify-content: space-around;
+  align-items: center;
+}
 .bodyContainer {
   position: relative;
 }

packages/web/src/hooks/useTabs/useTabs.tsx

@@ -40,6 +40,7 @@ type TabProps = {
   onClick: () => void
   isActive: boolean
   isMobile: boolean
+  isMobileV2: boolean
   icon?: ReactNode
   text: string
   label: string
@@ -48,14 +49,15 @@ type TabProps = {
 
 const Tab = forwardRef(
   (
-    { onClick, icon, text, isActive, isMobile, disabled }: TabProps,
+    { onClick, icon, text, isActive, isMobile, isMobileV2, disabled }: TabProps,
     ref?: Ref<HTMLDivElement>
   ) => (
     <div
       className={cn(
         styles.tab,
         { [styles.tabMobile]: isMobile },
-        { [styles.tabDesktop]: !isMobile },
+        { [styles.tabMobileV2]: isMobileV2 },
+        { [styles.tabDesktop]: !isMobile && !isMobileV2 },
         { [styles.tabActive]: isActive },
         { [styles.tabDisabled]: disabled }
       )}
@@ -67,6 +69,10 @@ const Tab = forwardRef(
         <Text variant='body' size='xs' strength='strong' color='inherit'>
           {text}
         </Text>
+      ) : isMobileV2 ? (
+        <Text variant='body' strength='strong' color='inherit'>
+          {text}
+        </Text>
       ) : (
         <Text variant='title' color='inherit'>
           {text}
@@ -92,6 +98,7 @@ type TabBarProps = {
   onClick: (index: number) => void
   shouldAnimate: boolean
   isMobile: boolean
+  isMobileV2: boolean
   disabledTabTooltipText?: string
   // Offset the tab to the left or right.
   // offset of 1 offsets 1 tab to the right,
@@ -107,6 +114,7 @@ const TabBar = memo(
     tabs,
     onClick,
     isMobile,
+    isMobileV2,
     disabledTabTooltipText,
     fractionalOffset = 0,
     pathname
@@ -235,7 +243,8 @@ const TabBar = memo(
         className={cn(
           styles.tabBarContainer,
           { [styles.tabBarContainerMobile]: isMobile },
-          { [styles.tabBarContainerDesktop]: !isMobile }
+          { [styles.tabBarContainerMobileV2]: isMobileV2 },
+          { [styles.tabBarContainerDesktop]: !isMobile && !isMobileV2 }
         )}
         role='tablist'
       >
@@ -260,6 +269,7 @@ const TabBar = memo(
               isActive={isActive}
               key={tab.label}
               isMobile={isMobile}
+              isMobileV2={isMobileV2}
               disabled={!!tab.disabled}
               icon={tab.icon}
               label={tab.label}
@@ -380,6 +390,7 @@ type BodyContainerProps = {
   lastActive: number
   didTransitionCallback: () => void
   isMobile: boolean
+  isMobileV2: boolean
   interElementSpacing: number
 
   // If container dimensions are dirty and need a resize.
@@ -921,6 +932,7 @@ type UseTabsArguments = {
   bodyClassName?: string
   elementClassName?: string
   isMobile?: boolean
+  isMobileV2?: boolean
 
   // Optionally allow useTabs to be a controlled component
   selectedTabLabel?: string
@@ -987,6 +999,7 @@ const useTabs = ({
   bodyClassName,
   elementClassName,
   isMobile = true,
+  isMobileV2 = false,
   interElementSpacing = 0,
   disabledTabTooltipText,
   tabRecalculator,
@@ -1110,6 +1123,7 @@ const useTabs = ({
     tabRecalculator._setRecalculateFunc(recalculateDimensions)
   }
 
+  // TODO: Add isMobileV2 to the condition and fix the bugs with scrolling
   const BodyContainerElement = isMobile
     ? GestureSupportingBodyContainer
     : BodyContainer
@@ -1126,10 +1140,18 @@ const useTabs = ({
       // when the animation finishes. On desktop, it's fired
       // immediately
       setActiveIndex(newIndex)
-      !isMobile && onChangeComplete(activeIndex, newIndex)
+      !isMobile && !isMobileV2 && onChangeComplete(activeIndex, newIndex)
       onTabClickCb && onTabClickCb(tabs[newIndex].label)
     },
-    [isControlled, isMobile, onChangeComplete, activeIndex, onTabClickCb, tabs]
+    [
+      isControlled,
+      isMobile,
+      isMobileV2,
+      onChangeComplete,
+      activeIndex,
+      onTabClickCb,
+      tabs
+    ]
   )
 
   const tabBarKey = tabs.map((t) => t.label).join('-')
@@ -1143,6 +1165,7 @@ const useTabs = ({
         onClick={onTabClick}
         shouldAnimate={shouldAnimate}
         isMobile={isMobile}
+        isMobileV2={isMobileV2}
         disabledTabTooltipText={disabledTabTooltipText}
         fractionalOffset={accentFractionalOffset}
         pathname={pathname}
@@ -1155,6 +1178,7 @@ const useTabs = ({
       onTabClick,
       shouldAnimate,
       isMobile,
+      isMobileV2,
       disabledTabTooltipText,
       accentFractionalOffset,
       pathname
@@ -1176,6 +1200,7 @@ const useTabs = ({
           didTransitionCallback || emptyDidTransitionCallback
         }
         isMobile={isMobile}
+        isMobileV2={isMobileV2}
         interElementSpacing={interElementSpacing}
         dimensionsAreDirty={dimensionsAreDirty}
         didSetDimensions={didSetDimensions}
@@ -1197,6 +1222,7 @@ const useTabs = ({
       didTransitionCallback,
       emptyDidTransitionCallback,
       isMobile,
+      isMobileV2,
       interElementSpacing,
       dimensionsAreDirty,
       didSetDimensions,

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

@@ -88,7 +88,6 @@ export const RemixContestSection = ({
     navigate(UPLOAD_PAGE, state)
   }, [trackId, navigate])
 
-  // TODO: Also return null if no remix contest description
   if (!trackId || !remixContest) return null
 
   return (

packages/web/src/pages/track-page/components/mobile/TrackHeader.tsx

@@ -24,8 +24,7 @@ import {
   Box,
   Button,
   MusicBadge,
-  Text,
-  IconCloudUpload
+  Text
 } from '@audius/harmony'
 import IconCalendarMonth from '@audius/harmony/src/assets/icons/CalendarMonth.svg'
 import IconRobot from '@audius/harmony/src/assets/icons/Robot.svg'
@@ -69,15 +68,7 @@ const messages = {
   hidden: 'Hidden',
   releases: (releaseDate: string) =>
     `Releases ${formatReleaseDate({ date: releaseDate, withHour: true })}`,
-  remixContest: 'Remix Contest',
-  contestEnded: 'Contest Ended',
-  contestDeadline: 'Contest Deadline',
-  uploadRemixButtonText: 'Upload Remix',
-  deadline: (deadline?: string) => {
-    return deadline
-      ? `${dayjs(deadline).format('MM/DD/YYYY')} at ${dayjs(deadline).format('h:mm A')}`
-      : ''
-  }
+  remixContest: 'Remix Contest'
 }
 
 type PlayButtonProps = {
@@ -352,35 +343,6 @@ const TrackHeader = ({
     setIsDrawerOpen(false)
   }, [setIsDrawerOpen])
 
-  const handleClick = useCallback(() => {
-    setIsDrawerOpen(true)
-  }, [setIsDrawerOpen])
-
-  const renderSubmitRemixContestSection = useCallback(() => {
-    if (!isRemixContest) return null
-    const isContestOver = dayjs(remixContest.endDate).isBefore(dayjs())
-    return (
-      <Flex column gap='m' w='100%'>
-        <Flex gap='xs' alignItems='center'>
-          <Text variant='label' color='accent'>
-            {isContestOver ? messages.contestEnded : messages.contestDeadline}
-          </Text>
-          <Text>{messages.deadline(remixContest.endDate)}</Text>
-        </Flex>
-        {!isOwner ? (
-          <Button
-            variant='secondary'
-            size='small'
-            onClick={handleClick}
-            iconLeft={IconCloudUpload}
-          >
-            {messages.uploadRemixButtonText}
-          </Button>
-        ) : null}
-      </Flex>
-    )
-  }, [isRemixContest, remixContest?.endDate, isOwner, handleClick])
-
   const trendingRank = useTrackRank(trackId)
 
   return (
@@ -506,7 +468,6 @@ const TrackHeader = ({
             </Text>
           </Flex>
         ) : null}
-        {renderSubmitRemixContestSection()}
         {hasDownloadableAssets ? (
           <Box pt='l' w='100%'>
             <Suspense>

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

@@ -20,6 +20,7 @@ import { getTrackDefaults } from 'pages/track-page/utils'
 import { TrackPageLineup } from '../TrackPageLineup'
 
 import TrackPageHeader from './TrackHeader'
+import { RemixContestSection } from './remix-contests/RemixContestSection'
 
 export type OwnProps = {
   title: string
@@ -165,6 +166,7 @@ const TrackPage = ({
             goToRepostsPage={goToRepostsPage}
           />
         </Flex>
+        <RemixContestSection trackId={defaults.trackId} isOwner={isOwner} />
         {isCommentingEnabled ? (
           <CommentPreview entityId={defaults.trackId} />
         ) : null}

packages/web/src/pages/track-page/components/mobile/remix-contests/RemixContestDetailsTab.tsx

@@ -0,0 +1,89 @@
+import { useRemixContest } from '@audius/common/api'
+import { ID } from '@audius/common/models'
+import { UPLOAD_PAGE } from '@audius/common/src/utils/route'
+import { dayjs } from '@audius/common/utils'
+import { Button, Divider, Flex, IconCloudUpload, Text } from '@audius/harmony'
+
+import { UserGeneratedText } from 'components/user-generated-text'
+import { useNavigateToPage } from 'hooks/useNavigateToPage'
+import { useRequiresAccountCallback } from 'hooks/useRequiresAccount'
+
+const messages = {
+  due: 'Submission Due:',
+  deadline: (deadline?: string) => {
+    if (!deadline) return ''
+    const date = dayjs(deadline)
+    return `${date.format('ddd. MMM D, YYYY')} at ${date.format('h:mm A')}`
+  },
+  ended: 'Contest Ended',
+  fallbackDescription:
+    'Enter my remix contest before the deadline for your chance to win!',
+  uploadRemixButtonText: 'Upload Your Remix'
+}
+
+type RemixContestDetailsTabProps = {
+  trackId: ID
+  isOwner: boolean
+}
+
+/**
+ * Tab content displaying details about a remix contest
+ */
+export const RemixContestDetailsTab = ({
+  trackId,
+  isOwner
+}: RemixContestDetailsTabProps) => {
+  const navigate = useNavigateToPage()
+  const { data: remixContest } = useRemixContest(trackId)
+  const isContestEnded = dayjs(remixContest?.endDate).isBefore(dayjs())
+
+  const goToUploadWithRemix = useRequiresAccountCallback(() => {
+    if (!trackId) return
+
+    const state = {
+      initialMetadata: {
+        is_remix: true,
+        remix_of: {
+          tracks: [{ parent_track_id: trackId }]
+        }
+      }
+    }
+    navigate(UPLOAD_PAGE, state)
+  }, [trackId, navigate])
+
+  return (
+    <Flex column w='100%'>
+      <Flex column gap='s' p='l'>
+        <Flex row gap='xs'>
+          <Text variant='title' color='accent'>
+            {messages.due}
+          </Text>
+          <Text variant='body' strength='strong'>
+            {isContestEnded
+              ? messages.ended
+              : messages.deadline(remixContest?.endDate)}
+          </Text>
+        </Flex>
+        <UserGeneratedText variant='body'>
+          {remixContest?.eventData?.description ?? messages.fallbackDescription}
+        </UserGeneratedText>
+      </Flex>
+      {!isOwner ? (
+        <>
+          <Divider />
+          <Flex p='l' pb='s'>
+            <Button
+              variant='secondary'
+              size='small'
+              fullWidth
+              onClick={goToUploadWithRemix}
+              iconLeft={IconCloudUpload}
+            >
+              {messages.uploadRemixButtonText}
+            </Button>
+          </Flex>
+        </>
+      ) : null}
+    </Flex>
+  )
+}

packages/web/src/pages/track-page/components/mobile/remix-contests/RemixContestPrizesTab.tsx

@@ -0,0 +1,23 @@
+import { useRemixContest } from '@audius/common/api'
+import { ID } from '@audius/common/models'
+import { Flex } from '@audius/harmony'
+
+import { UserGeneratedText } from 'components/user-generated-text'
+
+type RemixContestPrizesTabProps = {
+  trackId: ID
+}
+
+export const RemixContestPrizesTab = ({
+  trackId
+}: RemixContestPrizesTabProps) => {
+  const { data: remixContest } = useRemixContest(trackId)
+
+  return (
+    <Flex column gap='s' p='l' pb='s'>
+      <UserGeneratedText variant='body'>
+        {remixContest?.eventData?.prizeInfo}
+      </UserGeneratedText>
+    </Flex>
+  )
+}