Skip to content

Commit b73b2f6

Browse files
Kyle-ShanksKyle-Shanks
authored
[C-2681, C-2682, C-2683] Add new upload finish page (#3890)
1 parent 5d94b1f commit b73b2f6

File tree

9 files changed

+491
-10
lines changed

9 files changed

+491
-10
lines changed

‎packages/common/src/models/Analytics.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -575,7 +575,8 @@ export enum ShareSource {
575575
PAGE = 'page',
576576
NOW_PLAYING = 'now playing',
577577
OVERFLOW = 'overflow',
578-
LEFT_NAV = 'left-nav'
578+
LEFT_NAV = 'left-nav',
579+
UPLOAD = 'upload'
579580
}
580581
export enum RepostSource {
581582
TILE = 'tile',

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

+13
Original file line numberDiff line numberDiff line change
@@ -6,3 +6,16 @@ export const getUploadProgress = (state: CommonState) =>
66
export const getUploadSuccess = (state: CommonState) => state.upload.success
77
export const getTracks = (state: CommonState) => state.upload.tracks
88
export const getIsUploading = (state: CommonState) => state.upload.uploading
9+
10+
export const getUploadPercentage = (state: CommonState) => {
11+
const uploadProgress = getUploadProgress(state)
12+
const fullProgress = uploadProgress
13+
? uploadProgress.reduce((acc, progress) => acc + progress.loaded, 0)
14+
: 0
15+
16+
const totalProgress = uploadProgress
17+
? uploadProgress.reduce((acc, progress) => acc + progress.total, 0)
18+
: 1
19+
20+
return (fullProgress / totalProgress) * 100
21+
}

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

+2-1
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,8 @@ export interface ExtendedCollectionMetadata extends CollectionMetadata {
4141
export enum ProgressStatus {
4242
UPLOADING = 'UPLOADING',
4343
PROCESSING = 'PROCESSING',
44-
COMPLETE = 'COMPLETE'
44+
COMPLETE = 'COMPLETE',
45+
ERROR = 'ERROR'
4546
}
4647

4748
export type Progress = {

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

+74-7
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,19 @@
1-
import { useEffect, useState } from 'react'
1+
import { useCallback, useEffect, useMemo, useState } from 'react'
22

3-
import { UploadType } from '@audius/common'
3+
import { uploadActions, UploadType } from '@audius/common'
4+
import { useDispatch } from 'react-redux'
45

56
import Header from 'components/header/desktop/Header'
67
import Page from 'components/page/Page'
78

89
import styles from './UploadPage.module.css'
910
import { EditPageNew } from './components/EditPageNew'
11+
import { FinishPageNew } from './components/FinishPageNew'
1012
import SelectPageNew from './components/SelectPageNew'
1113
import { TrackForUpload } from './components/types'
1214

15+
const { uploadTracks } = uploadActions
16+
1317
type UploadPageProps = {
1418
uploadType: UploadType
1519
}
@@ -20,7 +24,16 @@ enum Phase {
2024
FINISH
2125
}
2226

27+
const messages = {
28+
selectPageTitle: 'Upload Your Music',
29+
editSingleTrackPageTitle: 'Complete Your Track',
30+
editMultiTrackPageTitle: 'Complete Your Tracks',
31+
finishSingleTrackPageTitle: 'Uploading Your Track',
32+
finishMultiTrackPageTitle: 'Uploading Your Tracks'
33+
}
34+
2335
export const UploadPageNew = (props: UploadPageProps) => {
36+
const dispatch = useDispatch()
2437
const [phase, setPhase] = useState(Phase.SELECT)
2538
const [tracks, setTracks] = useState<TrackForUpload[]>([])
2639

@@ -48,14 +61,32 @@ export const UploadPageNew = (props: UploadPageProps) => {
4861
injectPrettifyScript()
4962
}, [phase])
5063

64+
const pageTitle = useMemo(() => {
65+
switch (phase) {
66+
case Phase.EDIT:
67+
return tracks.length > 1
68+
? messages.editMultiTrackPageTitle
69+
: messages.editSingleTrackPageTitle
70+
case Phase.FINISH:
71+
return tracks.length > 1
72+
? messages.finishMultiTrackPageTitle
73+
: messages.finishSingleTrackPageTitle
74+
case Phase.SELECT:
75+
default:
76+
return messages.selectPageTitle
77+
}
78+
}, [phase, tracks])
79+
5180
let page
5281
switch (phase) {
5382
case Phase.SELECT:
5483
page = (
5584
<SelectPageNew
5685
tracks={tracks}
5786
setTracks={setTracks}
58-
onContinue={() => setPhase(Phase.EDIT)}
87+
onContinue={() => {
88+
setPhase(Phase.EDIT)
89+
}}
5990
/>
6091
)
6192
break
@@ -64,20 +95,56 @@ export const UploadPageNew = (props: UploadPageProps) => {
6495
<EditPageNew
6596
tracks={tracks}
6697
setTracks={setTracks}
67-
onContinue={() => setPhase(Phase.FINISH)}
98+
onContinue={() => {
99+
setPhase(Phase.FINISH)
100+
}}
68101
/>
69102
)
70103
break
71104
case Phase.FINISH:
72-
console.log(tracks[0])
73-
page = <pre>{JSON.stringify(tracks, null, 2)}</pre>
105+
page = (
106+
<FinishPageNew
107+
tracks={tracks}
108+
onContinue={() => {
109+
setTracks([])
110+
setPhase(Phase.SELECT)
111+
}}
112+
/>
113+
)
74114
}
115+
116+
const handleUpload = useCallback(() => {
117+
console.log('Handling upload')
118+
const trackStems = tracks.reduce((acc, track) => {
119+
// @ts-ignore - This has stems in it sometimes
120+
acc = [...acc, ...(track.metadata.stems ?? [])]
121+
return acc
122+
}, [])
123+
124+
dispatch(
125+
uploadTracks(
126+
// @ts-ignore - This has artwork on it
127+
tracks,
128+
// NOTE: Need to add metadata for collections here for collection upload
129+
undefined,
130+
tracks.length > 1
131+
? UploadType.INDIVIDUAL_TRACKS
132+
: UploadType.INDIVIDUAL_TRACK,
133+
trackStems
134+
)
135+
)
136+
}, [dispatch, tracks])
137+
138+
useEffect(() => {
139+
if (phase === Phase.FINISH) handleUpload()
140+
}, [handleUpload, phase])
141+
75142
return (
76143
<Page
77144
title='Upload'
78145
description='Upload and publish audio content to the Audius platform'
79146
contentClassName={styles.upload}
80-
header={<Header primary={'Upload'} />}
147+
header={<Header primary={pageTitle} />}
81148
>
82149
{page}
83150
</Page>

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ const createUploadTrackMetadataSchema = () =>
6666
download: z.optional(
6767
z
6868
.object({
69-
cid: z.string(),
69+
cid: z.optional(z.string()),
7070
isDownloadable: z.boolean(),
7171
requiresFollow: z.boolean()
7272
})

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

+79
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@
3636
height: 12px;
3737
width: 12px;
3838
}
39+
3940
.iconArrow path {
4041
fill: var(--static-neutral);
4142
}
@@ -90,3 +91,81 @@
9091
.iconVerified {
9192
margin-left: 4px;
9293
}
94+
95+
.page {
96+
display: flex;
97+
flex-direction: column;
98+
gap: 32px;
99+
}
100+
101+
.uploadProgress {
102+
display: flex;
103+
flex-direction: column;
104+
overflow: hidden;
105+
}
106+
107+
.uploadProgressBar {
108+
height: 16px;
109+
}
110+
111+
.uploadHeader {
112+
display: flex;
113+
flex-direction: column;
114+
gap: 16px;
115+
padding: 16px;
116+
background-color: var(--background-surface-1);
117+
border-bottom: 1px solid var(--border-strong);
118+
}
119+
120+
.headerInfo {
121+
display: flex;
122+
align-items: center;
123+
justify-content: space-between;
124+
}
125+
126+
.headerProgressInfo {
127+
display: flex;
128+
gap: 16px;
129+
align-items: center;
130+
}
131+
132+
.uploadFooter {
133+
display: flex;
134+
justify-content: space-between;
135+
padding: 16px;
136+
background-color: var(--background-surface-1);
137+
border-top: 1px solid var(--border-strong);
138+
}
139+
140+
.uploadTrackList {
141+
display: flex;
142+
flex-direction: column;
143+
padding: 16px;
144+
}
145+
146+
.uploadTrackItem {
147+
display: flex;
148+
gap: 12px;
149+
align-items: center;
150+
padding: 8px;
151+
}
152+
153+
.trackItemArtwork {
154+
height: 40px;
155+
width: 40px;
156+
border-radius: 4px;
157+
overflow: hidden;
158+
border: 1px solid var(--border-strong);
159+
}
160+
161+
.emptyProgressIndicator {
162+
height: 16px;
163+
width: 16px;
164+
border-radius: 100%;
165+
border: 2px solid var(--neutral);
166+
}
167+
168+
.progressIndicator {
169+
height: 16px;
170+
width: 16px;
171+
}

0 commit comments

Comments
 (0)