From 5a46bef7ca466e7afbe938c01baf14de47f493af Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Fri, 1 Nov 2019 16:38:16 +0700
Subject: [PATCH] sorting audios on comment attach

---
 .../editors/SortableAudioGrid/index.tsx       |  2 +-
 src/components/media/AudioPlayer/index.tsx    |  6 +-
 src/components/media/AudioPlayer/styles.scss  |  1 +
 src/components/node/CommentForm/index.tsx     | 58 +++++++++++++++----
 4 files changed, 53 insertions(+), 14 deletions(-)

diff --git a/src/components/editors/SortableAudioGrid/index.tsx b/src/components/editors/SortableAudioGrid/index.tsx
index 5aa4c293..ff5f2a30 100644
--- a/src/components/editors/SortableAudioGrid/index.tsx
+++ b/src/components/editors/SortableAudioGrid/index.tsx
@@ -22,7 +22,7 @@ const SortableAudioGrid = SortableContainer(
         .filter(file => file && file.id)
         .map((file, index) => (
           <SortableImageGridItem key={file.id} index={index} collection={0}>
-            <AudioPlayer file={file} onDrop={onDrop} />
+            <AudioPlayer file={file} onDrop={onDrop} nonInteractive />
           </SortableImageGridItem>
         ))}
 
diff --git a/src/components/media/AudioPlayer/index.tsx b/src/components/media/AudioPlayer/index.tsx
index c5079e63..5b94e0f8 100644
--- a/src/components/media/AudioPlayer/index.tsx
+++ b/src/components/media/AudioPlayer/index.tsx
@@ -23,11 +23,13 @@ const mapDispatchToProps = {
 type Props = ReturnType<typeof mapStateToProps> &
   typeof mapDispatchToProps & {
     file: IFile;
+    nonInteractive?: boolean;
   };
 
 const AudioPlayerUnconnected = memo(
   ({
     file,
+    nonInteractive,
     player: { file: current, status },
     playerSetFileAndPlay,
     playerPlay,
@@ -42,13 +44,15 @@ const AudioPlayerUnconnected = memo(
     });
 
     const onPlay = useCallback(() => {
+      if (nonInteractive) return;
+
       if (current && current.id === file.id) {
         if (status === PLAYER_STATES.PLAYING) return playerPause();
         return playerPlay();
       }
 
       playerSetFileAndPlay(file);
-    }, [file, current, status, playerPlay, playerPause, playerSetFileAndPlay]);
+    }, [file, current, status, playerPlay, playerPause, playerSetFileAndPlay, nonInteractive]);
 
     const onProgress = useCallback(
       ({ detail }: { detail: IPlayerProgress }) => {
diff --git a/src/components/media/AudioPlayer/styles.scss b/src/components/media/AudioPlayer/styles.scss
index 5603da44..e6225cc6 100644
--- a/src/components/media/AudioPlayer/styles.scss
+++ b/src/components/media/AudioPlayer/styles.scss
@@ -6,6 +6,7 @@
   align-items: center;
   justify-content: stretch;
   flex: 1;
+  user-select: none;
 
   &:global(.playing) {
     .progress {
diff --git a/src/components/node/CommentForm/index.tsx b/src/components/node/CommentForm/index.tsx
index 79c3a3e2..d6f70d43 100644
--- a/src/components/node/CommentForm/index.tsx
+++ b/src/components/node/CommentForm/index.tsx
@@ -24,6 +24,7 @@ import { AudioPlayer } from '~/components/media/AudioPlayer';
 import { SortableImageGrid } from '~/components/editors/SortableImageGrid';
 import { moveArrItem } from '~/utils/fn';
 import { SortEnd } from 'react-sortable-hoc';
+import { SortableAudioGrid } from '~/components/editors/SortableAudioGrid';
 
 const mapStateToProps = (state: IState) => ({
   node: selectNode(state),
@@ -105,7 +106,7 @@ const CommentFormUnconnected: FC<IProps> = ({
     const added_files = temp_ids
       .map(temp_uuid => statuses[temp_uuid] && statuses[temp_uuid].uuid)
       .map(el => !!el && files[el])
-      .filter(el => !!el && !comment_data[id].files.some(file => file.id === el.id));
+      .filter(el => !!el && !comment_data[id].files.some(file => file && file.id === el.id));
 
     const filtered_temps = temp_ids.filter(
       temp_id =>
@@ -124,13 +125,23 @@ const CommentFormUnconnected: FC<IProps> = ({
 
   const comment = comment_data[id];
 
-  const images = useMemo(() => comment.files.filter(file => file.type === UPLOAD_TYPES.IMAGE), [
-    comment.files,
-  ]);
+  const images = useMemo(
+    () => comment.files.filter(file => file && file.type === UPLOAD_TYPES.IMAGE),
+    [comment.files]
+  );
 
-  const audios = useMemo(() => comment.files.filter(file => file.type === UPLOAD_TYPES.AUDIO), [
-    comment.files,
-  ]);
+  const locked_images = useMemo(
+    () =>
+      comment.temp_ids
+        .filter(temp => statuses[temp] && statuses[temp].type === UPLOAD_TYPES.IMAGE)
+        .map(temp_id => statuses[temp_id]),
+    [statuses, comment.temp_ids]
+  );
+
+  const audios = useMemo(
+    () => comment.files.filter(file => file && file.type === UPLOAD_TYPES.AUDIO),
+    [comment.files]
+  );
 
   const onFileDrop = useCallback(
     (file_id: IFile['id']) => {
@@ -159,6 +170,23 @@ const CommentFormUnconnected: FC<IProps> = ({
     [images, audios]
   );
 
+  const onAudioMove = useCallback(
+    ({ oldIndex, newIndex }: SortEnd) => {
+      nodeSetCommentData(
+        id,
+        assocPath(
+          ['files'],
+          [
+            ...images,
+            ...(moveArrItem(oldIndex, newIndex, audios.filter(file => !!file)) as IFile[]),
+          ],
+          comment_data[id]
+        )
+      );
+    },
+    [images, audios]
+  );
+
   return (
     <CommentWrapper user={user}>
       <form onSubmit={onSubmit} className={styles.wrap}>
@@ -179,15 +207,21 @@ const CommentFormUnconnected: FC<IProps> = ({
               onSortEnd={onImageMove}
               axis="xy"
               items={images}
-              locked={[]}
-              pressDelay={window.innerWidth < 768 ? 200 : 0}
+              locked={locked_images}
+              pressDelay={50}
               helperClass={styles.helper}
               size={120}
             />
 
-            {audios.map(file => (
-              <AudioPlayer file={file} key={file.id} />
-            ))}
+            <SortableAudioGrid
+              items={audios}
+              onDrop={onFileDrop}
+              onSortEnd={onAudioMove}
+              axis="y"
+              locked={[]}
+              pressDelay={50}
+              helperClass={styles.helper}
+            />
           </div>
         )}