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

AudiusProject · Aug 21, 2023 · 1e376fe · 1e376fe
1 parent bc0226f
commit 1e376fe
Show file tree

Hide file tree

Showing 6 changed files with 300 additions and 71 deletions.
diff --git a/packages/web/src/components/upload/TrackPreview.module.css b/packages/web/src/components/upload/TrackPreview.module.css
@@ -22,6 +22,7 @@
   flex-grow: 1;
   align-items: center;
 }
+
 .trackDetails > img {
   margin-right: 24px;
 }
@@ -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 {
+  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);
+}
diff --git a/packages/web/src/components/upload/TrackPreviewNew.tsx b/packages/web/src/components/upload/TrackPreviewNew.tsx
@@ -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>
+  )
+}
diff --git a/packages/web/src/pages/upload-page/components/SelectPageNew.tsx b/packages/web/src/pages/upload-page/components/SelectPageNew.tsx
@@ -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'
@@ -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
 
@@ -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[]) => {
@@ -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) {
@@ -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
@@ -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>

diff --git a/packages/web/src/pages/upload-page/components/TracksPreview.module.css b/packages/web/src/pages/upload-page/components/TracksPreview.module.css
@@ -59,3 +59,43 @@
 .tabSlider {
   margin-bottom: 15px;
 }
+
+.containerNew {
+  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; */
+}