displaying file id3 data

src/components/media/AudioPlayer/index.tsx

@@ -75,6 +75,10 @@ const AudioPlayerUnconnected = ({
     };
   }, [file, current, setPlaying, onProgress]);
 
+  const title =
+    file.metadata &&
+    [file.metadata.id3artist, file.metadata.id3title].filter(el => !!el).join(' - ');
+
   return (
     <div onClick={onPlay} className={classNames(styles.wrap, { playing })}>
       <div className={styles.playpause}>
@@ -84,7 +88,7 @@ const AudioPlayerUnconnected = ({
         <div className={styles.progress} onClick={onSeek}>
           <div className={styles.bar} style={{ width: `${progress.progress}%` }} />
         </div>
-        <div className={styles.title}>{file.url}</div>
+        <div className={styles.title}>{title || 'Unknown'}</div>
       </div>
     </div>
   );

src/components/node/CommentForm/index.tsx

@@ -11,7 +11,7 @@ import * as NODE_ACTIONS from '~/redux/node/actions';
 import { selectNode } from '~/redux/node/selectors';
 import { LoaderCircle } from '~/components/input/LoaderCircle';
 import { Group } from '~/components/containers/Group';
-import { UPLOAD_SUBJECTS, UPLOAD_TARGETS } from '~/redux/uploads/constants';
+import { UPLOAD_SUBJECTS, UPLOAD_TARGETS, UPLOAD_TYPES } from '~/redux/uploads/constants';
 import uuid from 'uuid4';
 import * as UPLOAD_ACTIONS from '~/redux/uploads/actions';
 import { selectUploads } from '~/redux/uploads/selectors';
@@ -20,6 +20,7 @@ import { getFileType } from '~/utils/uploader';
 import { selectUser } from '~/redux/auth/selectors';
 import { getURL } from '~/utils/dom';
 import { ButtonGroup } from '~/components/input/ButtonGroup';
+import { AudioPlayer } from '~/components/media/AudioPlayer';
 
 const mapStateToProps = (state: IState) => ({
   node: selectNode(state),
@@ -162,7 +163,13 @@ const CommentFormUnconnected: FC<IProps> = ({
           )
       )}
 
-      {comment.files.map(file => file.name && <div key={file.id}>{file.name}</div>)}
+      {comment.files.map(file => {
+        if (file.type === UPLOAD_TYPES.AUDIO) {
+          return <AudioPlayer file={file} />;
+        }
+
+        return <div>file.name</div>;
+      })}
     </CommentWrapper>
   );
 };

src/redux/types.ts

@@ -71,6 +71,13 @@ export interface IFile {
 
   type: IUploadType;
   mime: string;
+  metadata?: {
+    id3title?: string;
+    id3artist?: string;
+    duration?: number;
+    width?: number;
+    height?: number;
+  };
 
   createdAt?: string;
   updatedAt?: string;

src/styles/variables.scss

@@ -7,12 +7,12 @@ $gap: 10px;
 $spc: $gap * 2;
 $comment_height: 72px;
 
-$radius: 6px;
-$cell_radius: 6px;
+$radius: 8px;
+$cell_radius: $radius;
 $panel_radius: $radius;
+$input_radius: $radius;
 
 $input_height: 36px;
-$input_radius: $radius;
 $info_height: 24px;
 
 $panel_size: 64px;