Audio title editing

src/components/editors/AudioGrid/index.tsx

@@ -28,9 +28,21 @@ const AudioGrid: FC<IProps> = ({ files, setFiles, locked }) => {
     [setFiles, files]
   );
 
+  const onTitleChange = useCallback(
+    (changeId: IFile['id'], title: IFile['metadata']['title']) => {
+      setFiles(
+        files.map(file =>
+          file && file.id === changeId ? { ...file, metadata: { ...file.metadata, title } } : file
+        )
+      );
+    },
+    [setFiles, files]
+  );
+
   return (
     <SortableAudioGrid
       onDrop={onDrop}
+      onTitleChange={onTitleChange}
       onSortEnd={onMove}
       axis="xy"
       items={files}

src/components/editors/SortableAudioGrid/index.tsx

@@ -12,17 +12,19 @@ const SortableAudioGrid = SortableContainer(
     items,
     locked,
     onDrop,
+    onTitleChange,
   }: {
     items: IFile[];
     locked: IUploadStatus[];
     onDrop: (file_id: IFile['id']) => void;
+    onTitleChange: (file_id: IFile['id'], title: IFile['metadata']['title']) => void;
   }) => (
     <div className={styles.grid}>
       {items
         .filter(file => file && file.id)
         .map((file, index) => (
           <SortableImageGridItem key={file.id} index={index} collection={0}>
-            <AudioPlayer file={file} onDrop={onDrop} nonInteractive />
+            <AudioPlayer file={file} onDrop={onDrop} onTitleChange={onTitleChange} isEditing />
           </SortableImageGridItem>
         ))}
 

src/components/media/AudioPlayer/index.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useState, useEffect, memo } from 'react';
+import React, { useCallback, useState, useEffect, memo, useMemo } from 'react';
 import { connect } from 'react-redux';
 import { selectPlayer } from '~/redux/player/selectors';
 import * as PLAYER_ACTIONS from '~/redux/player/actions';
@@ -8,6 +8,7 @@ import { Player, IPlayerProgress } from '~/utils/player';
 import classNames from 'classnames';
 import * as styles from './styles.scss';
 import { Icon } from '~/components/input/Icon';
+import { InputText } from '~/components/input/InputText';
 
 const mapStateToProps = state => ({
   player: selectPlayer(state),
@@ -23,15 +24,17 @@ const mapDispatchToProps = {
 type Props = ReturnType<typeof mapStateToProps> &
   typeof mapDispatchToProps & {
     file: IFile;
-    nonInteractive?: boolean;
+    isEditing?: boolean;
     onDrop?: (id: IFile['id']) => void;
+    onTitleChange?: (file_id: IFile['id'], title: IFile['metadata']['title']) => void;
   };
 
 const AudioPlayerUnconnected = memo(
   ({
     file,
     onDrop,
-    nonInteractive,
+    isEditing,
+    onTitleChange,
     player: { file: current, status },
     playerSetFileAndPlay,
     playerPlay,
@@ -46,7 +49,7 @@ const AudioPlayerUnconnected = memo(
     });
 
     const onPlay = useCallback(() => {
-      if (nonInteractive) return;
+      if (isEditing) return;
 
       if (current && current.id === file.id) {
         if (status === PLAYER_STATES.PLAYING) return playerPause();
@@ -54,7 +57,7 @@ const AudioPlayerUnconnected = memo(
       }
 
       playerSetFileAndPlay(file);
-    }, [file, current, status, playerPlay, playerPause, playerSetFileAndPlay, nonInteractive]);
+    }, [file, current, status, playerPlay, playerPause, playerSetFileAndPlay, isEditing]);
 
     const onProgress = useCallback(
       ({ detail }: { detail: IPlayerProgress }) => {
@@ -80,6 +83,21 @@ const AudioPlayerUnconnected = memo(
       onDrop(file.id);
     }, [file, onDrop]);
 
+    const title = useMemo(
+      () =>
+        (file.metadata &&
+          (file.metadata.title ||
+            [file.metadata.id3artist, file.metadata.id3title].filter(el => el).join(' - '))) ||
+        file.orig_name ||
+        '',
+      [file.metadata]
+    );
+
+    const onRename = useCallback((val: string) => onTitleChange(file.id, val), [
+      onTitleChange,
+      file.id,
+    ]);
+
     useEffect(() => {
       const active = current && current.id === file.id;
       setPlaying(current && current.id === file.id);
@@ -91,11 +109,6 @@ const AudioPlayerUnconnected = memo(
       };
     }, [file, current, setPlaying, onProgress]);
 
-    const title =
-      file.metadata &&
-      (file.metadata.title ||
-        [file.metadata.id3artist, file.metadata.id3title].filter(el => !!el).join(' - '));
-
     return (
       <div onClick={onPlay} className={classNames(styles.wrap, { playing })}>
         {onDrop && (
@@ -112,13 +125,21 @@ const AudioPlayerUnconnected = memo(
           )}
         </div>
 
+        {isEditing ? (
+          <div className={styles.input}>
+            <InputText value={title} handler={onRename} />
+          </div>
+        ) : (
           <div className={styles.content}>
+            <div className={styles.title}>
               <div className={styles.title}>{title || 'Unknown'}</div>
+            </div>
 
             <div className={styles.progress} onClick={onSeek}>
               <div className={styles.bar} style={{ width: `${progress.progress}%` }} />
             </div>
           </div>
+        )}
       </div>
     );
   }

src/components/media/AudioPlayer/styles.scss

@@ -130,3 +130,9 @@
     height: 20px;
   }
 }
+
+.input {
+  flex: 1;
+  box-sizing: border-box;
+  padding: 0 48px 0 0;
+}

src/components/node/CommentForm/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useCallback, KeyboardEventHandler, useEffect, useMemo } from 'react';
+import React, { FC, useCallback, KeyboardEventHandler, useEffect, useMemo, memo } from 'react';
 import { Textarea } from '~/components/input/Textarea';
 import * as styles from './styles.scss';
 import { Filler } from '~/components/containers/Filler';
@@ -41,7 +41,8 @@ type IProps = ReturnType<typeof mapStateToProps> &
     is_before?: boolean;
   };
 
-const CommentFormUnconnected: FC<IProps> = ({
+const CommentFormUnconnected: FC<IProps> = memo(
+  ({
     node: { comment_data, is_sending_comment },
     uploads: { statuses, files },
     id,
@@ -155,10 +156,26 @@ const CommentFormUnconnected: FC<IProps> = ({
     );
 
     const onFileDrop = useCallback(
-    (file_id: IFile['id']) => {
+      (fileId: IFile['id']) => {
         nodeSetCommentData(
           id,
-        assocPath(['files'], comment.files.filter(file => file.id != file_id), comment_data[id])
+          assocPath(['files'], comment.files.filter(file => file.id != fileId), comment_data[id])
+        );
+      },
+      [comment_data, id, nodeSetCommentData]
+    );
+
+    const onTitleChange = useCallback(
+      (fileId: IFile['id'], title: IFile['metadata']['title']) => {
+        nodeSetCommentData(
+          id,
+          assocPath(
+            ['files'],
+            comment.files.map(file =>
+              file.id === fileId ? { ...file, metadata: { ...file.metadata, title } } : file
+            ),
+            comment_data[id]
+          )
         );
       },
       [comment_data, id, nodeSetCommentData]
@@ -236,6 +253,7 @@ const CommentFormUnconnected: FC<IProps> = ({
               <SortableAudioGrid
                 items={audios}
                 onDrop={onFileDrop}
+                onTitleChange={onTitleChange}
                 onSortEnd={onAudioMove}
                 axis="y"
                 locked={locked_audios}
@@ -278,7 +296,8 @@ const CommentFormUnconnected: FC<IProps> = ({
         </Group>
       </form>
     );
-};
+  }
+);
 
 const CommentForm = connect(
   mapStateToProps,

src/redux/types.ts

@@ -64,6 +64,7 @@ export interface IFile {
   node_id?: UUID;
 
   name: string;
+  orig_name: string;
   path: string;
   full_path: string;
   url: string;

src/redux/uploads/constants.ts

@@ -19,13 +19,14 @@ export const EMPTY_FILE: IFile = {
   user_id: null,
   node_id: null,
 
-  name: 'mario-collage-800x450.jpg',
+  name: '',
-  path: '/wp-content/uploads/2017/09/',
+  orig_name: '',
-  full_path: '/wp-content/uploads/2017/09/mario-collage-800x450.jpg',
+  path: '',
-  url: 'https://cdn.arstechnica.net/wp-content/uploads/2017/09/mario-collage-800x450.jpg',
+  full_path: '',
-  size: 2400000,
+  url: '',
-  type: 'image',
+  size: 0,
-  mime: 'image/jpeg',
+  type: null,
+  mime: '',
 };
 
 export const EMPTY_UPLOAD_STATUS: IUploadStatus = {