diff --git a/src/components/media/AudioPlayer/index.tsx b/src/components/media/AudioPlayer/index.tsx
index 7ac6017a..1eb6a7e5 100644
--- a/src/components/media/AudioPlayer/index.tsx
+++ b/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 (
@@ -84,7 +88,7 @@ const AudioPlayerUnconnected = ({
-
{file.url}
+
{title || 'Unknown'}
);
diff --git a/src/components/node/CommentForm/index.tsx b/src/components/node/CommentForm/index.tsx
index 10a147f0..642942f8 100644
--- a/src/components/node/CommentForm/index.tsx
+++ b/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 = ({
)
)}
- {comment.files.map(file => file.name && {file.name}
)}
+ {comment.files.map(file => {
+ if (file.type === UPLOAD_TYPES.AUDIO) {
+ return ;
+ }
+
+ return file.name
;
+ })}
);
};
diff --git a/src/redux/types.ts b/src/redux/types.ts
index 561b7379..b171fd1e 100644
--- a/src/redux/types.ts
+++ b/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;
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 834d1937..1d7584f0 100644
--- a/src/styles/variables.scss
+++ b/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;