Skip to content
This repository has been archived by the owner on Oct 4, 2023. It is now read-only.

[C-2911] Update new select page of the upload flow #3910

Merged
merged 1 commit into from
Aug 21, 2023
Merged

[C-2911] Update new select page of the upload flow #3910

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
59 changes: 59 additions & 0 deletions packages/web/src/components/upload/TrackPreview.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@
flex-grow: 1;
align-items: center;
}

.trackDetails > img {
margin-right: 24px;
}
Expand Down Expand Up @@ -58,19 +59,77 @@
cursor: pointer;
padding: 1px;
}

.remove g path {
fill: var(--neutral-light-6);
}

.remove g path {
transition: all ease-in-out 0.07s;
}

.remove:hover {
transform: scale(1.1);
}

.remove:hover g path {
fill: var(--neutral-light-4);
}

.remove:active {
transform: scale(0.95);
}

.trackPreviewNew {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

would we want to split up the css files too?

display: flex;
gap: 12px;
padding: 8px 24px 8px 16px;
align-items: center;
border-top: 1px solid transparent;
border-bottom: 1px solid transparent;
}

.trackPreviewNew:hover {
background: var(--neutral-light-9);
border-top: 1px solid var(--border-strong);
border-bottom: 1px solid var(--border-strong);
}

.trackPreviewNew:hover .fileSizeText {
display: none;
}

.trackPreviewNew:hover .removeButton {
display: flex;
}

.indexText {
padding-left: 8px;
}

.trackPreviewImage {
height: 40px;
width: 40px;
}

.titleText {
flex: 1 1 0;
}

.fileSizeText {
display: flex;
}

.removeButton {
color: var(--neutral-light-4);
display: none;
}

.removeButton svg {
height: 16px;
width: 16px;
}

.removeButton:hover {
color: var(--accent-red);
}
80 changes: 80 additions & 0 deletions packages/web/src/components/upload/TrackPreviewNew.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
import { HarmonyButton, HarmonyButtonType, IconTrash } from '@audius/stems'
import numeral from 'numeral'

import iconFileAiff from 'assets/img/iconFileAiff.svg'
import iconFileFlac from 'assets/img/iconFileFlac.svg'
import iconFileMp3 from 'assets/img/iconFileMp3.svg'
import iconFileOgg from 'assets/img/iconFileOgg.svg'
import iconFileUnknown from 'assets/img/iconFileUnknown.svg'
import iconFileWav from 'assets/img/iconFileWav.svg'
import { Text } from 'components/typography'

import styles from './TrackPreview.module.css'

const fileTypeIcon = (type: string) => {
switch (type) {
case 'audio/mpeg':
case 'audio/mp3':
return iconFileMp3
case 'audio/aiff':
return iconFileAiff
case 'audio/flac':
return iconFileFlac
case 'audio/ogg':
return iconFileOgg
case 'audio/wav':
return iconFileWav
default:
return iconFileUnknown
}
}

type TrackPreviewProps = {
fileType: string
trackTitle: string
fileSize: number
index: number
displayIndex: boolean
onRemove: () => void
}

export const TrackPreviewNew = (props: TrackPreviewProps) => {
const {
displayIndex = false,
index,
fileType = 'audio/mp3',
trackTitle = 'Untitled',
fileSize,
onRemove
} = props

const fileExtension = fileType.split('/')[1] ?? null

return (
<div className={styles.trackPreviewNew}>
{displayIndex ? (
<Text className={styles.indexText} size='small'>
{index + 1}
</Text>
) : null}
<img
className={styles.trackPreviewImage}
src={fileTypeIcon(fileType)}
alt='File type icon'
/>
<Text className={styles.titleText} size='small'>
{trackTitle}
{fileExtension ? `.${fileExtension}` : null}
</Text>
<Text className={styles.fileSizeText} size='small' color='neutralLight2'>
{numeral(fileSize).format('0.0 b')}
</Text>
<HarmonyButton
variant={HarmonyButtonType.PLAIN}
iconRight={IconTrash}
onClick={onRemove}
className={styles.removeButton}
/>
</div>
)
}
79 changes: 9 additions & 70 deletions packages/web/src/pages/upload-page/components/SelectPageNew.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,11 @@ import { useCallback, useState } from 'react'

import {
Nullable,
playerActions,
playerSelectors,
UploadType,
removeNullable,
newCollectionMetadata
} from '@audius/common'
import { Button, ButtonType, IconArrow } from '@audius/stems'
import cn from 'classnames'
import { useDispatch, useSelector } from 'react-redux'
import { useUnmount } from 'react-use'

import { Dropzone } from 'components/upload/Dropzone'
import InvalidFileType from 'components/upload/InvalidFileType'
Expand All @@ -20,10 +15,7 @@ import { processFiles } from '../store/utils/processFiles'
import { UploadFormState } from '../types'

import styles from './SelectPage.module.css'
import TracksPreview from './TracksPreview'
const { pause } = playerActions

const { getPlaying } = playerSelectors
import { TracksPreviewNew } from './TracksPreviewNew'

type ErrorType = { reason: 'size' | 'type' } | null

Expand All @@ -34,17 +26,13 @@ type SelectPageProps = {

export const SelectPageNew = (props: SelectPageProps) => {
const { formState, onContinue } = props
const dispatch = useDispatch()
const playing = useSelector(getPlaying)

const [tracks, setTracks] = useState(formState.tracks ?? [])
const [uploadType, setUploadType] = useState(
formState.uploadType ?? UploadType.INDIVIDUAL_TRACK
)
const [uploadTrackError, setUploadTrackError] =
useState<Nullable<ErrorType>>(null)
const [previewIndex, setPreviewIndex] = useState(-1)
const [preview, setPreview] = useState<Nullable<HTMLAudioElement>>()

const onSelectTracks = useCallback(
async (selectedFiles: File[]) => {
Expand Down Expand Up @@ -92,35 +80,6 @@ export const SelectPageNew = (props: SelectPageProps) => {
[setTracks, setUploadType, tracks, uploadType]
)

const stopPreview = useCallback(() => {
if (preview) {
preview.pause()
preview.currentTime = 0
}
setPreview(null)
setPreviewIndex(-1)
}, [preview])

const playPreview = useCallback(
(index: number) => {
// Stop existing music if some is playing.
if (playing) {
dispatch(pause())
}

if (preview) stopPreview()
const audio = tracks[index].preview
audio.play()
setPreview(audio)
setPreviewIndex(index)
},
[dispatch, playing, preview, stopPreview, tracks]
)

useUnmount(() => {
stopPreview()
})

const handleContinue = useCallback(() => {
if (uploadType !== undefined && tracks) {
switch (uploadType) {
Expand All @@ -138,7 +97,7 @@ export const SelectPageNew = (props: SelectPageProps) => {

const textAboveIcon = tracks.length > 0 ? 'More to Upload?' : undefined
return (
<div className={cn(styles.page)}>
<div>
<div className={styles.select}>
<div className={styles.dropzone}>
<Dropzone
Expand All @@ -159,33 +118,13 @@ export const SelectPageNew = (props: SelectPageProps) => {
})}
>
{tracks.length > 0 ? (
<div>
<TracksPreview
tracks={tracks}
uploadType={uploadType}
previewIndex={previewIndex}
onRemove={onRemoveTrack}
setUploadType={setUploadType}
playPreview={playPreview}
stopPreview={stopPreview}
/>
<div className={styles.count}>
{tracks.length === 1
? `${tracks.length} track uploaded`
: `${tracks.length} tracks uploaded`}
</div>
<div className={styles.continue}>
<Button
type={ButtonType.PRIMARY_ALT}
text='Continue'
name='continue'
rightIcon={<IconArrow />}
onClick={handleContinue}
textClassName={styles.continueButtonText}
className={styles.continueButton}
/>
</div>
</div>
<TracksPreviewNew
tracks={tracks}
uploadType={uploadType}
onRemove={onRemoveTrack}
setUploadType={setUploadType}
onContinue={handleContinue}
/>
) : null}
</div>
</div>
Expand Down
40 changes: 40 additions & 0 deletions packages/web/src/pages/upload-page/components/TracksPreview.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,3 +59,43 @@
.tabSlider {
margin-bottom: 15px;
}

.containerNew {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

same here, but whatever you think is easiest to reason about, whether these are in a new file so its easy to remove the old code eventually.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yea i've been updating things with the thought that we would remove old stuff later

display: flex;
flex-direction: column;
/* TODO: KJ - Figure out if we need this */
max-height: 600px;
width: 100%;
user-select: none;
border-radius: 8px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.08),
0px 0px 4px 0px rgba(0, 0, 0, 0.04);
}

.infoContainerNew {
display: flex;
flex-direction: column;
gap: 16px;
width: 100%;
padding: 16px;
background-color: var(--background-surface-1);
}

.headerContainerNew {
border-bottom: 1px solid var(--border-strong);
border-radius: 8px 8px 0 0;
}

.footerContainerNew {
border-top: 1px solid var(--border-strong);
border-radius: 0 0 8px 8px;
}

.tracksContainerNew {
display: flex;
padding: 16px 0;
flex-direction: column;
background-color: var(--background-white);
/* TODO: KJ - Figure out if we need this */
/* max-height: 467px; */
}
Loading