fixed youtube block

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<IProps> = memo(({ block }) => {
+  const link = block.content.match(
+    /(https?:\/\/(www\.)?(youtube\.com|youtu\.be)\/(watch)?(\?v=)?[\w\-]+)/gi
+  );
+
+  return (
+    <div className={styles.text}>
+      <a href={link[0]} target="_blank">
+        {link[0]}
+      </a>
+    </div>
+  );
+});
+
+export { CommentEmbedBlock };

src/components/comment/CommentEmbedBlock/styles.scss

@@ -0,0 +1,3 @@
+.text {
+  padding: 0 $gap;
+}

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;

src/components/node/CommentContent/index.tsx

@@ -31,7 +31,7 @@ const CommentContent: FC<IProps> = memo(({ comment }) => {
   return (
     <>
       {comment.text && (
-        <div className={styles.block}>
+        <Group className={styles.block}>
           {formatCommentText(path(['user', 'username'], comment), comment.text).map(
             (block, key) =>
               COMMENT_BLOCK_RENDERERS[block.type] &&
@@ -39,7 +39,7 @@ const CommentContent: FC<IProps> = memo(({ comment }) => {
           )}
 
           <div className={styles.date}>{getPrettyDate(comment.created_at)}</div>
-        </div>
+        </Group>
       )}
 
       {groupped.image && groupped.image.length > 0 && (

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;

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,
 };

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