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;