Scheduled release mobile (#6954)

packages/common/src/models/Collection.ts

@@ -58,6 +58,7 @@ export type CollectionMetadata = {
   playlist_image_sizes_multihash?: string
   offline?: OfflineCollectionMetadata
   local?: boolean
+  release_date?: string
 }
 
 export type CollectionDownloadReason = { is_from_favorites: boolean }

packages/mobile/src/components/core/ContextualMenu.tsx

@@ -26,6 +26,7 @@ export type ContextualMenuProps = {
   error?: boolean
   errorMessage?: string
   lastItem?: boolean
+  formattedValue?: string
   renderValue?: (value: any) => JSX.Element | null
 }
 
@@ -66,7 +67,8 @@ export const ContextualMenu = (props: ContextualMenuProps) => {
     errorMessage,
     error,
     lastItem,
-    renderValue: renderValueProp
+    renderValue: renderValueProp,
+    formattedValue
   } = props
   const styles = useStyles()
 
@@ -120,7 +122,9 @@ export const ContextualMenu = (props: ContextualMenuProps) => {
           />
         </View>
         {hasValue ? (
-          <View style={styles.value}>{renderValue(value)}</View>
+          <View style={styles.value}>
+            {renderValue(formattedValue ?? value)}
+          </View>
         ) : null}
         {error && errorMessage ? (
           <InputErrorMessage message={errorMessage} />

packages/mobile/src/components/details-tile/DetailsTile.tsx

@@ -12,9 +12,11 @@ import {
   getDogEarType,
   isPremiumContentUSDCPurchaseGated
 } from '@audius/common'
+import moment from 'moment'
 import { TouchableOpacity, View } from 'react-native'
 import { useSelector } from 'react-redux'
 
+import { Text as HarmonyText, IconCalendarMonth } from '@audius/harmony-native'
 import IconPause from 'app/assets/images/iconPause.svg'
 import IconPlay from 'app/assets/images/iconPlay.svg'
 import IconRepeat from 'app/assets/images/iconRepeatOff.svg'
@@ -139,6 +141,12 @@ const useStyles = makeStyles(({ palette, spacing, typography }) => ({
   },
   link: {
     color: palette.primary
+  },
+  releaseContainer: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    justifyContent: 'center',
+    gap: spacing(1)
   }
 }))
 
@@ -241,12 +249,14 @@ export const DetailsTile = ({
     light()
     onPressPreview?.()
   }, [onPressPreview])
-
+  const isScheduledRelease = track?.release_date
+    ? moment(track.release_date).isAfter(moment())
+    : false
   const renderDogEar = () => {
     const dogEarType = getDogEarType({
       isOwner,
       premiumConditions,
-      isUnlisted
+      isUnlisted: isUnlisted && !isScheduledRelease
     })
     return dogEarType ? <DogEar type={dogEarType} borderOffset={1} /> : null
   }
@@ -401,6 +411,18 @@ export const DetailsTile = ({
                   />
                 ) : null}
                 {showPreviewButton ? <PreviewButton /> : null}
+                {isScheduledRelease && track?.release_date ? (
+                  <View style={styles.releaseContainer}>
+                    <IconCalendarMonth color='accent' size='m' />
+                    <HarmonyText color='accent' strength='strong' size='l'>
+                      Release on{' '}
+                      {moment
+                        .utc(track.release_date)
+                        .local()
+                        .format('M/D/YY @ h:mm A')}
+                    </HarmonyText>
+                  </View>
+                ) : null}
                 <DetailsTileActionButtons
                   hasReposted={!!hasReposted}
                   hasSaved={!!hasSaved}

packages/mobile/src/components/lineup-tile/LineupTile.tsx

@@ -7,6 +7,7 @@ import {
   usePremiumContentAccess,
   getDogEarType
 } from '@audius/common'
+import moment from 'moment'
 import { View } from 'react-native'
 import { useSelector, useDispatch } from 'react-redux'
 
@@ -71,13 +72,15 @@ export const LineupTile = ({
   const premiumConditions = isTrack ? item.premium_conditions : null
   const isArtistPick = artist_pick_track_id === id
   const { doesUserHaveAccess } = usePremiumContentAccess(isTrack ? item : null)
-
+  const isScheduledRelease = item.release_date
+    ? moment(item.release_date).isAfter(moment())
+    : false
   const dogEarType = getDogEarType({
     premiumConditions,
     isOwner,
     doesUserHaveAccess,
     isArtistPick: showArtistPick && isArtistPick,
-    isUnlisted
+    isUnlisted: isUnlisted && !isScheduledRelease
   })
 
   const handlePress = useCallback(() => {
@@ -139,6 +142,7 @@ export const LineupTile = ({
           isOwner={isOwner}
           isArtistPick={isArtistPick}
           showArtistPick={showArtistPick}
+          releaseDate={item?.release_date ? item.release_date : undefined}
         />
       </View>
       {children}

packages/mobile/src/components/lineup-tile/LineupTileStats.tsx

@@ -13,9 +13,11 @@ import {
   favoritesUserListActions,
   isPremiumContentUSDCPurchaseGated
 } from '@audius/common'
+import moment from 'moment'
 import { View, TouchableOpacity } from 'react-native'
 import { useDispatch } from 'react-redux'
 
+import { IconCalendarMonth } from '@audius/harmony-native'
 import IconHeart from 'app/assets/images/iconHeart.svg'
 import IconHidden from 'app/assets/images/iconHidden.svg'
 import IconRepost from 'app/assets/images/iconRepost.svg'
@@ -108,6 +110,7 @@ type Props = {
   isOwner: boolean
   isArtistPick?: boolean
   showArtistPick?: boolean
+  releaseDate?: string
 }
 
 export const LineupTileStats = ({
@@ -128,11 +131,12 @@ export const LineupTileStats = ({
   premiumConditions,
   isOwner,
   isArtistPick,
-  showArtistPick
+  showArtistPick,
+  releaseDate
 }: Props) => {
   const styles = useStyles()
   const trackTileStyles = useTrackTileStyles()
-  const { neutralLight4 } = useThemeColors()
+  const { neutralLight4, accentPurple } = useThemeColors()
   const dispatch = useDispatch()
   const navigation = useNavigation()
 
@@ -155,7 +159,7 @@ export const LineupTileStats = ({
   )
 
   const isReadonly = variant === 'readonly'
-
+  const isScheduledRelease = isUnlisted && moment(releaseDate).isAfter(moment())
   return (
     <View style={styles.root}>
       <View style={styles.stats}>
@@ -181,7 +185,7 @@ export const LineupTileStats = ({
             </Text>
           </View>
         ) : null}
-        {isUnlisted ? (
+        {isUnlisted && !isScheduledRelease ? (
           <View style={styles.tagContainer}>
             <IconHidden
               fill={neutralLight4}
@@ -193,6 +197,19 @@ export const LineupTileStats = ({
             </Text>
           </View>
         ) : null}
+        {isUnlisted && isScheduledRelease ? (
+          <View style={styles.tagContainer}>
+            <IconCalendarMonth
+              fill={accentPurple}
+              height={spacing(4)}
+              width={spacing(4)}
+            />
+            <Text fontSize='xs' colorValue={accentPurple}>
+              Releases{' '}
+              {moment.utc(releaseDate).local().format('M/D/YY @ h:mm A')}
+            </Text>
+          </View>
+        ) : null}
         <View style={styles.leftStats}>
           {hasEngagement && !isUnlisted ? (
             <>

packages/mobile/src/screens/edit-track-screen/EditTrackForm.tsx

@@ -1,6 +1,6 @@
 import { useCallback } from 'react'
 
-import type { UploadTrack } from '@audius/common'
+import { FeatureFlags, type UploadTrack } from '@audius/common'
 import { Keyboard } from 'react-native'
 import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'
 import { useDispatch } from 'react-redux'
@@ -13,6 +13,7 @@ import { InputErrorMessage } from 'app/components/core/InputErrorMessage'
 import { PickArtworkField, TextField } from 'app/components/fields'
 import { useNavigation } from 'app/hooks/useNavigation'
 import { useOneTimeDrawer } from 'app/hooks/useOneTimeDrawer'
+import { useFeatureFlag } from 'app/hooks/useRemoteConfig'
 import { setVisibility } from 'app/store/drawers/slice'
 import { makeStyles } from 'app/styles'
 
@@ -26,6 +27,7 @@ import {
   TagField,
   SubmenuList,
   RemixSettingsField,
+  ReleaseDateField,
   AdvancedOptionsField,
   AccessAndSaleField
 } from './fields'
@@ -92,6 +94,10 @@ export const EditTrackForm = (props: EditTrackFormProps) => {
     }
   }, [dirty, navigation, dispatch])
 
+  const { isEnabled: isScheduledReleasesEnabled } = useFeatureFlag(
+    FeatureFlags.SCHEDULED_RELEASES
+  )
+
   return (
     <>
       <FormScreen
@@ -139,6 +145,7 @@ export const EditTrackForm = (props: EditTrackFormProps) => {
               <DescriptionField />
               <SubmenuList removeBottomDivider>
                 <AccessAndSaleField />
+                {isScheduledReleasesEnabled ? <ReleaseDateField /> : <></>}
                 <RemixSettingsField />
                 <AdvancedOptionsField />
               </SubmenuList>

packages/mobile/src/screens/edit-track-screen/EditTrackNavigator.tsx

@@ -1,7 +1,9 @@
+import { FeatureFlags } from '@audius/common'
 import { createNativeStackNavigator } from '@react-navigation/native-stack'
 
 import { GatedContentUploadPromptDrawer } from 'app/components/gated-content-upload-prompt-drawer'
 import { SupportersInfoDrawer } from 'app/components/supporters-info-drawer'
+import { useFeatureFlag } from 'app/hooks/useRemoteConfig'
 import { useAppScreenOptions } from 'app/screens/app-screen/useAppScreenOptions'
 
 import { EditTrackForm } from './EditTrackForm'
@@ -13,7 +15,8 @@ import {
   LicenseTypeScreen,
   RemixSettingsScreen,
   SelectGenreScreen,
-  SelectMoodScreen
+  SelectMoodScreen,
+  ReleaseDateScreen
 } from './screens'
 import { NFTCollectionsScreen } from './screens/NFTCollectionsScreen'
 import type { EditTrackFormProps } from './types'
@@ -26,6 +29,9 @@ type EditTrackNavigatorProps = EditTrackFormProps
 
 export const EditTrackNavigator = (props: EditTrackNavigatorProps) => {
   const screenOptions = useAppScreenOptions(screenOptionOverrides)
+  const { isEnabled: isScheduledReleasesEnabled } = useFeatureFlag(
+    FeatureFlags.SCHEDULED_RELEASES
+  )
 
   return (
     <>
@@ -36,6 +42,9 @@ export const EditTrackNavigator = (props: EditTrackNavigatorProps) => {
         <Stack.Screen name='SelectGenre' component={SelectGenreScreen} />
         <Stack.Screen name='SelectMood' component={SelectMoodScreen} />
         <Stack.Screen name='RemixSettings' component={RemixSettingsScreen} />
+        {isScheduledReleasesEnabled ? (
+          <Stack.Screen name='ReleaseDate' component={ReleaseDateScreen} />
+        ) : null}
         <Stack.Screen
           name='AdvancedOptions'
           component={AdvancedOptionsScreen}