[C-2681, C-2682, C-2683] Add new upload finish page (#3890)

packages/common/src/models/Analytics.ts

@@ -575,7 +575,8 @@ export enum ShareSource {
   PAGE = 'page',
   NOW_PLAYING = 'now playing',
   OVERFLOW = 'overflow',
-  LEFT_NAV = 'left-nav'
+  LEFT_NAV = 'left-nav',
+  UPLOAD = 'upload'
 }
 export enum RepostSource {
   TILE = 'tile',

packages/common/src/store/upload/selectors.ts

@@ -6,3 +6,16 @@ export const getUploadProgress = (state: CommonState) =>
 export const getUploadSuccess = (state: CommonState) => state.upload.success
 export const getTracks = (state: CommonState) => state.upload.tracks
 export const getIsUploading = (state: CommonState) => state.upload.uploading
+
+export const getUploadPercentage = (state: CommonState) => {
+  const uploadProgress = getUploadProgress(state)
+  const fullProgress = uploadProgress
+    ? uploadProgress.reduce((acc, progress) => acc + progress.loaded, 0)
+    : 0
+
+  const totalProgress = uploadProgress
+    ? uploadProgress.reduce((acc, progress) => acc + progress.total, 0)
+    : 1
+
+  return (fullProgress / totalProgress) * 100
+}

packages/common/src/store/upload/types.ts

@@ -41,7 +41,8 @@ export interface ExtendedCollectionMetadata extends CollectionMetadata {
 export enum ProgressStatus {
   UPLOADING = 'UPLOADING',
   PROCESSING = 'PROCESSING',
-  COMPLETE = 'COMPLETE'
+  COMPLETE = 'COMPLETE',
+  ERROR = 'ERROR'
 }
 
 export type Progress = {

packages/web/src/pages/upload-page/UploadPageNew.tsx

@@ -1,15 +1,19 @@
-import { useEffect, useState } from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
 
-import { UploadType } from '@audius/common'
+import { uploadActions, UploadType } from '@audius/common'
+import { useDispatch } from 'react-redux'
 
 import Header from 'components/header/desktop/Header'
 import Page from 'components/page/Page'
 
 import styles from './UploadPage.module.css'
 import { EditPageNew } from './components/EditPageNew'
+import { FinishPageNew } from './components/FinishPageNew'
 import SelectPageNew from './components/SelectPageNew'
 import { TrackForUpload } from './components/types'
 
+const { uploadTracks } = uploadActions
+
 type UploadPageProps = {
   uploadType: UploadType
 }
@@ -20,7 +24,16 @@ enum Phase {
   FINISH
 }
 
+const messages = {
+  selectPageTitle: 'Upload Your Music',
+  editSingleTrackPageTitle: 'Complete Your Track',
+  editMultiTrackPageTitle: 'Complete Your Tracks',
+  finishSingleTrackPageTitle: 'Uploading Your Track',
+  finishMultiTrackPageTitle: 'Uploading Your Tracks'
+}
+
 export const UploadPageNew = (props: UploadPageProps) => {
+  const dispatch = useDispatch()
   const [phase, setPhase] = useState(Phase.SELECT)
   const [tracks, setTracks] = useState<TrackForUpload[]>([])
 
@@ -48,14 +61,32 @@ export const UploadPageNew = (props: UploadPageProps) => {
     injectPrettifyScript()
   }, [phase])
 
+  const pageTitle = useMemo(() => {
+    switch (phase) {
+      case Phase.EDIT:
+        return tracks.length > 1
+          ? messages.editMultiTrackPageTitle
+          : messages.editSingleTrackPageTitle
+      case Phase.FINISH:
+        return tracks.length > 1
+          ? messages.finishMultiTrackPageTitle
+          : messages.finishSingleTrackPageTitle
+      case Phase.SELECT:
+      default:
+        return messages.selectPageTitle
+    }
+  }, [phase, tracks])
+
   let page
   switch (phase) {
     case Phase.SELECT:
       page = (
         <SelectPageNew
           tracks={tracks}
           setTracks={setTracks}
-          onContinue={() => setPhase(Phase.EDIT)}
+          onContinue={() => {
+            setPhase(Phase.EDIT)
+          }}
         />
       )
       break
@@ -64,20 +95,56 @@ export const UploadPageNew = (props: UploadPageProps) => {
         <EditPageNew
           tracks={tracks}
           setTracks={setTracks}
-          onContinue={() => setPhase(Phase.FINISH)}
+          onContinue={() => {
+            setPhase(Phase.FINISH)
+          }}
         />
       )
       break
     case Phase.FINISH:
-      console.log(tracks[0])
-      page = <pre>{JSON.stringify(tracks, null, 2)}</pre>
+      page = (
+        <FinishPageNew
+          tracks={tracks}
+          onContinue={() => {
+            setTracks([])
+            setPhase(Phase.SELECT)
+          }}
+        />
+      )
   }
+
+  const handleUpload = useCallback(() => {
+    console.log('Handling upload')
+    const trackStems = tracks.reduce((acc, track) => {
+      // @ts-ignore - This has stems in it sometimes
+      acc = [...acc, ...(track.metadata.stems ?? [])]
+      return acc
+    }, [])
+
+    dispatch(
+      uploadTracks(
+        // @ts-ignore - This has artwork on it
+        tracks,
+        // NOTE: Need to add metadata for collections here for collection upload
+        undefined,
+        tracks.length > 1
+          ? UploadType.INDIVIDUAL_TRACKS
+          : UploadType.INDIVIDUAL_TRACK,
+        trackStems
+      )
+    )
+  }, [dispatch, tracks])
+
+  useEffect(() => {
+    if (phase === Phase.FINISH) handleUpload()
+  }, [handleUpload, phase])
+
   return (
     <Page
       title='Upload'
       description='Upload and publish audio content to the Audius platform'
       contentClassName={styles.upload}
-      header={<Header primary={'Upload'} />}
+      header={<Header primary={pageTitle} />}
     >
       {page}
     </Page>

packages/web/src/pages/upload-page/components/EditPageNew.tsx

@@ -66,7 +66,7 @@ const createUploadTrackMetadataSchema = () =>
     download: z.optional(
       z
         .object({
-          cid: z.string(),
+          cid: z.optional(z.string()),
           isDownloadable: z.boolean(),
           requiresFollow: z.boolean()
         })

packages/web/src/pages/upload-page/components/FinishPage.module.css

@@ -36,6 +36,7 @@
   height: 12px;
   width: 12px;
 }
+
 .iconArrow path {
   fill: var(--static-neutral);
 }
@@ -90,3 +91,81 @@
 .iconVerified {
   margin-left: 4px;
 }
+
+.page {
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+}
+
+.uploadProgress {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.uploadProgressBar {
+  height: 16px;
+}
+
+.uploadHeader {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 16px;
+  background-color: var(--background-surface-1);
+  border-bottom: 1px solid var(--border-strong);
+}
+
+.headerInfo {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.headerProgressInfo {
+  display: flex;
+  gap: 16px;
+  align-items: center;
+}
+
+.uploadFooter {
+  display: flex;
+  justify-content: space-between;
+  padding: 16px;
+  background-color: var(--background-surface-1);
+  border-top: 1px solid var(--border-strong);
+}
+
+.uploadTrackList {
+  display: flex;
+  flex-direction: column;
+  padding: 16px;
+}
+
+.uploadTrackItem {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  padding: 8px;
+}
+
+.trackItemArtwork {
+  height: 40px;
+  width: 40px;
+  border-radius: 4px;
+  overflow: hidden;
+  border: 1px solid var(--border-strong);
+}
+
+.emptyProgressIndicator {
+  height: 16px;
+  width: 16px;
+  border-radius: 100%;
+  border: 2px solid var(--neutral);
+}
+
+.progressIndicator {
+  height: 16px;
+  width: 16px;
+}