youtube titles

src/components/comment/CommentEmbedBlock/index.tsx

@@ -1,10 +1,11 @@
-import React, { FC, memo, useMemo } from 'react';
+import React, { FC, memo, useMemo, useEffect } from 'react';
 import { ICommentBlock } from '~/constants/comment';
 import styles from './styles.scss';
 import { getYoutubeThumb } from '~/utils/dom';
 import { selectPlayer } from '~/redux/player/selectors';
 import { connect } from 'react-redux';
 import * as PLAYER_ACTIONS from '~/redux/player/actions';
+import { Icon } from '~/components/input/Icon';
 
 const mapStateToProps = state => ({
   youtubes: selectPlayer(state).youtubes,
@@ -31,11 +32,16 @@ const CommentEmbedBlockUnconnected: FC<Props> = memo(
 
     const preview = useMemo(() => getYoutubeThumb(block.content), [block.content]);
 
-    useMemo(() => {
+    useEffect(() => {
       if (!link[5] || youtubes[link[5]]) return;
-
       playerGetYoutubeInfo(link[5]);
-    }, [playerGetYoutubeInfo]);
+    }, [link, playerGetYoutubeInfo]);
+
+    const title = useMemo(
+      () =>
+        (youtubes[link[5]] && youtubes[link[5]].metadata && youtubes[link[5]].metadata.title) || '',
+      [link, youtubes]
+    );
 
     return (
       <div className={styles.embed}>
@@ -43,7 +49,13 @@ const CommentEmbedBlockUnconnected: FC<Props> = memo(
 
         <div className={styles.preview}>
           <div style={{ backgroundImage: `url("${preview}")` }}>
-            <div className={styles.backdrop}>{link[0]}</div>
+            <div className={styles.backdrop}>
+              <div className={styles.play}>
+                <Icon icon="play" size={32} />
+              </div>
+
+              <div className={styles.title}>{title || link[0]}</div>
+            </div>
           </div>
         </div>
       </div>

src/components/comment/CommentEmbedBlock/styles.scss

@@ -9,7 +9,7 @@
   display: flex;
   align-items: center;
   justify-content: flex-start;
-  margin: 0 0 $gap 0;
+  margin: 0 !important;
 
   a {
     position: absolute;
@@ -33,7 +33,7 @@
   left: 0;
   width: 100%;
   height: 100%;
-  background: transparentize(black, 0.5) 50% 50%;
+  background: transparentize($comment_bg, 0.15) 50% 50%;
   background-size: cover;
   z-index: 15;
   border-radius: $radius;
@@ -42,15 +42,13 @@
   justify-content: center;
   text-align: center;
   font: $font_16_medium;
+  flex-direction: row;
 
-  @include can_backdrop {
+  @include outer_shadow();
-    background: transparentize(black, 0.5) 50% 50%;
-    backdrop-filter: blur(3px);
-  }
 }
 
 .preview {
-  padding: 0 $gap $gap / 2;
+  padding: 0 $gap / 2 0;
   position: absolute;
   top: 0;
   left: 0;
@@ -70,3 +68,23 @@
     background-size: cover;
   }
 }
+
+.play {
+  flex: 0 0 $comment_height;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.title {
+  flex: 1;
+  text-align: left;
+  box-sizing: border-box;
+  font: $font_18_semibold;
+  padding: 0 $gap 0 0;
+  text-transform: capitalize;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}

src/components/node/CommentContent/styles.scss

@@ -111,8 +111,13 @@
   right: 0;
   font: $font_12_regular;
   color: transparentize($color: white, $amount: 0.8);
-  padding: 4px 6px 4px 6px;
+  padding: 0 6px 2px;
   border-radius: 0 0 $radius 0;
+  z-index: 2;
+  background: $comment_bg;
+  border-radius: 4px;
+  pointer-events: none;
+  touch-action: none;
 }
 
 .images {