feat(angular): scraped video metadata displayed in attachment list (#318)

### 🎯 Goal

_Describe why we are making this change_

### 🛠 Implementation details

_Provide a description of the implementation_

### 🎨 UI Changes

_Add relevant screenshots_

Make sure to test with both Angular and React (with both `MessageList`
and `VirtualizedMessageList` components) SDKs

Author: szuperaz

src/assets/icons/stream-chat-icons.eot

@@ -260,7 +260,7 @@
     margin: var(--str-chat__attachment-margin);
 
     .str-chat__file-icon {
-      width: calc(var(--str-chat__spacing-px)* 30);
+      width: calc(var(--str-chat__spacing-px) * 30);
     }
 
     .str-chat__message-attachment-unsupported__metadata {
@@ -270,7 +270,6 @@
       flex-direction: column;
       align-items: flex-start;
       justify-content: center;
-
     }
 
     .str-chat__message-attachment-unsupported__title {
@@ -622,4 +621,31 @@
 
 .str-chat__attachment-list-angular-host {
   min-width: 0;
+
+  .str-chat__message-attachment-card--video {
+    width: 100%;
+
+    a {
+      display: block;
+      width: 100%;
+      height: 100%;
+      position: relative;
+
+      .str-chat__message-attachment-card--video-play,
+      stream-icon-placeholder {
+        position: absolute;
+        top: 50%;
+        left: 0;
+        right: 0;
+        margin: auto;
+        transform: translateY(-50%);
+        width: calc(var(--str-chat__spacing-px) * 36);
+        height: calc(var(--str-chat__spacing-px) * 36);
+      }
+
+      img {
+        cursor: pointer;
+      }
+    }
+  }
 }

src/assets/icons/stream-chat-icons.svg

@@ -534,8 +534,16 @@
   }
 }
 
-
 .str-chat-angular__message-attachment-file-single
   .str-chat__message-attachment-file--item-first-row {
   color: var(--str-chat__attachment-list-color);
 }
+
+.str-chat__attachment-list-angular-host {
+  .str-chat__message-attachment-card--video-play {
+    --str-chat-icon-color: var(--str-chat__text-color);
+
+    background-color: var(--str-chat__secondary-background-color);
+    border-radius: var(--str-chat__border-radius-circle);
+  }
+}

src/assets/icons/stream-chat-icons.ttf

@@ -61,7 +61,7 @@
   content: '\e809';
 } /* '' */
 .str-chat__icon--play::before {
-  content: '\e80a';
+  content: '\e814';
 } /* '' */
 .str-chat__icon--reaction::before {
   content: '\e80b';