diff --git a/src/components/comment/CommentEmbedBlock/index.tsx b/src/components/comment/CommentEmbedBlock/index.tsx new file mode 100644 index 00000000..b96996e4 --- /dev/null +++ b/src/components/comment/CommentEmbedBlock/index.tsx @@ -0,0 +1,23 @@ +import React, { FC, memo } from 'react'; +import { ICommentBlock } from '~/constants/comment'; +import styles from './styles.scss'; + +interface IProps { + block: ICommentBlock; +} + +const CommentEmbedBlock: FC = memo(({ block }) => { + const link = block.content.match( + /(https?:\/\/(www\.)?(youtube\.com|youtu\.be)\/(watch)?(\?v=)?[\w\-]+)/gi + ); + + return ( +
+ + {link[0]} + +
+ ); +}); + +export { CommentEmbedBlock }; diff --git a/src/components/comment/CommentEmbedBlock/styles.scss b/src/components/comment/CommentEmbedBlock/styles.scss new file mode 100644 index 00000000..229f3cfe --- /dev/null +++ b/src/components/comment/CommentEmbedBlock/styles.scss @@ -0,0 +1,3 @@ +.text { + padding: 0 $gap; +} diff --git a/src/components/comment/CommentTextBlock/styles.scss b/src/components/comment/CommentTextBlock/styles.scss index 659ea8c5..6a14f11c 100644 --- a/src/components/comment/CommentTextBlock/styles.scss +++ b/src/components/comment/CommentTextBlock/styles.scss @@ -1,5 +1,5 @@ .text { - padding: $gap; + padding: 0 $gap; font-weight: 300; font: $font_16_medium; line-height: 20px; diff --git a/src/components/node/CommentContent/index.tsx b/src/components/node/CommentContent/index.tsx index 95f08b6e..749cbbd0 100644 --- a/src/components/node/CommentContent/index.tsx +++ b/src/components/node/CommentContent/index.tsx @@ -31,7 +31,7 @@ const CommentContent: FC = memo(({ comment }) => { return ( <> {comment.text && ( -
+ {formatCommentText(path(['user', 'username'], comment), comment.text).map( (block, key) => COMMENT_BLOCK_RENDERERS[block.type] && @@ -39,7 +39,7 @@ const CommentContent: FC = memo(({ comment }) => { )}
{getPrettyDate(comment.created_at)}
-
+ )} {groupped.image && groupped.image.length > 0 && ( diff --git a/src/components/node/CommentContent/styles.scss b/src/components/node/CommentContent/styles.scss index ca44e9cf..e8162983 100644 --- a/src/components/node/CommentContent/styles.scss +++ b/src/components/node/CommentContent/styles.scss @@ -11,6 +11,7 @@ padding-bottom: 10px; box-sizing: border-box; flex-direction: column; + padding: $gap 0; &:first-child { border-top-right-radius: $radius; diff --git a/src/constants/comment.ts b/src/constants/comment.ts index 11f763b0..a89e3e4c 100644 --- a/src/constants/comment.ts +++ b/src/constants/comment.ts @@ -1,4 +1,5 @@ import { CommentTextBlock } from '~/components/comment/CommentTextBlock'; +import { CommentEmbedBlock } from '~/components/comment/CommentEmbedBlock'; export const COMMENT_BLOCK_TYPES = { TEXT: 'TEXT', @@ -29,5 +30,5 @@ export type ICommentBlock = { export const COMMENT_BLOCK_RENDERERS = { [COMMENT_BLOCK_TYPES.TEXT]: CommentTextBlock, [COMMENT_BLOCK_TYPES.MARK]: CommentTextBlock, - [COMMENT_BLOCK_TYPES.EMBED]: CommentTextBlock, + [COMMENT_BLOCK_TYPES.EMBED]: CommentEmbedBlock, }; diff --git a/src/index.tsx b/src/index.tsx index 2897e6b7..4ff8024f 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -21,9 +21,6 @@ render( /* [Stage 0]: - - <...> format - - youtube embeds - - check if email is registered at social login - friendship - cover change @@ -48,6 +45,8 @@ render( - comment editing Done: + - <...> format + - youtube embeds - mobile header - sticky header - password restore