audio editor

src/components/upload/AudioUpload/index.tsx

@@ -0,0 +1,43 @@
+import React, { FC, useCallback } from 'react';
+import classNames from 'classnames';
+import * as styles from './styles.scss';
+import { ArcProgress } from '~/components/input/ArcProgress';
+import { IFile } from '~/redux/types';
+import { Icon } from '~/components/input/Icon';
+
+interface IProps {
+  id?: IFile['id'];
+  title?: string;
+  progress?: number;
+  onDrop?: (file_id: IFile['id']) => void;
+
+  is_uploading?: boolean;
+}
+
+const AudioUpload: FC<IProps> = ({ title, progress, is_uploading, id, onDrop }) => {
+  const onDropFile = useCallback(() => {
+    if (!id || !onDrop) return;
+    onDrop(id);
+  }, [id, onDrop]);
+
+  return (
+    <div className={styles.wrap}>
+      {id && onDrop && (
+        <div className={styles.drop} onMouseDown={onDropFile}>
+          <Icon icon="close" />
+        </div>
+      )}
+
+      <div className={classNames(styles.thumb_wrap, { is_uploading })}>
+        {is_uploading && (
+          <div className={styles.progress}>
+            <ArcProgress size={40} progress={progress} />
+          </div>
+        )}
+        {title && <div className={styles.title}>{title}</div>}
+      </div>
+    </div>
+  );
+};
+
+export { AudioUpload };

src/components/upload/AudioUpload/styles.scss

@@ -0,0 +1,75 @@
+.wrap {
+  background: lighten($content_bg, 4%);
+  // padding-bottom: 100%;
+  border-radius: $radius;
+  position: relative;
+  user-select: none;
+  height: $comment_height;
+}
+
+.thumb_wrap {
+  // position: absolute;
+  // width: 100%;
+  // height: 100%;
+  z-index: 1;
+  border-radius: $radius;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: row;
+  height: 100%;
+}
+
+.title {
+  flex: 1;
+  border-radius: $radius;
+  display: flex;
+  align-items: center;
+  padding: 10px;
+  box-sizing: border-box;
+}
+
+.progress {
+  flex: 0 0 $comment_height;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  svg {
+    width: 40px;
+    height: 40px;
+    fill: none;
+    fill: white;
+  }
+}
+
+.helper {
+  opacity: 0.3;
+}
+
+.drop {
+  width: 24px;
+  height: 24px;
+  background: #222222;
+  position: absolute;
+  right: $gap;
+  top: $gap;
+  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;
+  }
+
+  &:hover {
+    opacity: 1;
+    background-color: $red;
+  }
+}