dropping audio attaches

src/components/media/AudioPlayer/index.tsx

@@ -24,11 +24,13 @@ type Props = ReturnType<typeof mapStateToProps> &
   typeof mapDispatchToProps & {
     file: IFile;
     nonInteractive?: boolean;
+    onDrop?: (id: IFile['id']) => void;
   };
 
 const AudioPlayerUnconnected = memo(
   ({
     file,
+    onDrop,
     nonInteractive,
     player: { file: current, status },
     playerSetFileAndPlay,
@@ -72,6 +74,12 @@ const AudioPlayerUnconnected = memo(
       [playerSeek]
     );
 
+    const onDropClick = useCallback(() => {
+      if (!onDrop) return;
+
+      onDrop(file.id);
+    }, [file, onDrop]);
+
     useEffect(() => {
       const active = current && current.id === file.id;
       setPlaying(current && current.id === file.id);
@@ -90,6 +98,12 @@ const AudioPlayerUnconnected = memo(
 
     return (
       <div onClick={onPlay} className={classNames(styles.wrap, { playing })}>
+        {onDrop && (
+          <div className={styles.drop} onMouseDown={onDropClick}>
+            <Icon icon="close" />
+          </div>
+        )}
+
         <div className={styles.playpause}>
           {playing && status === PLAYER_STATES.PLAYING ? (
             <Icon icon="pause" />
@@ -97,6 +111,7 @@ const AudioPlayerUnconnected = memo(
             <Icon icon="play" />
           )}
         </div>
+
         <div className={styles.content}>
           <div className={styles.title}>{title || 'Unknown'}</div>
 

src/components/media/AudioPlayer/styles.scss

@@ -109,3 +109,24 @@
   min-width: 10px;
   transition: width 0.5s;
 }
+
+.drop {
+  width: 24px;
+  height: 24px;
+  background: #222222;
+  position: absolute;
+  right: 10px;
+  top: 10px;
+  border-radius: 12px;
+  z-index: 2;
+  transition: background-color 250ms, opacity 0.25s;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  svg {
+    width: 20px;
+    height: 20px;
+  }
+}

src/components/node/CommentForm/index.tsx

@@ -202,26 +202,30 @@ const CommentFormUnconnected: FC<IProps> = ({
 
         {(!!images.length || !!audios.length) && (
           <div className={styles.attaches}>
-            <SortableImageGrid
-              onDrop={onFileDrop}
-              onSortEnd={onImageMove}
-              axis="xy"
-              items={images}
-              locked={locked_images}
-              pressDelay={50}
-              helperClass={styles.helper}
-              size={120}
-            />
+            {!!images.length && (
+              <SortableImageGrid
+                onDrop={onFileDrop}
+                onSortEnd={onImageMove}
+                axis="xy"
+                items={images}
+                locked={locked_images}
+                pressDelay={50}
+                helperClass={styles.helper}
+                size={120}
+              />
+            )}
 
-            <SortableAudioGrid
-              items={audios}
-              onDrop={onFileDrop}
-              onSortEnd={onAudioMove}
-              axis="y"
-              locked={[]}
-              pressDelay={50}
-              helperClass={styles.helper}
-            />
+            {!!audios.length && (
+              <SortableAudioGrid
+                items={audios}
+                onDrop={onFileDrop}
+                onSortEnd={onAudioMove}
+                axis="y"
+                locked={[]}
+                pressDelay={50}
+                helperClass={styles.helper}
+              />
+            )}
           </div>
         )}