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
GetStream · Nov 5, 2024 · ebd48c9 · ebd48c9
1 parent 5875c66
commit ebd48c9
Show file tree

Hide file tree

Showing 8 changed files with 40 additions and 6 deletions.
diff --git a/src/assets/icons/stream-chat-icons.eot b/src/assets/icons/stream-chat-icons.eot
diff --git a/src/assets/icons/stream-chat-icons.svg b/src/assets/icons/stream-chat-icons.svg
diff --git a/src/assets/icons/stream-chat-icons.ttf b/src/assets/icons/stream-chat-icons.ttf
diff --git a/src/assets/icons/stream-chat-icons.woff b/src/assets/icons/stream-chat-icons.woff
diff --git a/src/assets/icons/stream-chat-icons.woff2 b/src/assets/icons/stream-chat-icons.woff2
diff --git a/src/v2/styles/AttachmentList/AttachmentList-layout.scss b/src/v2/styles/AttachmentList/AttachmentList-layout.scss
@@ -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;
+      }
+    }
+  }
 }
diff --git a/src/v2/styles/AttachmentList/AttachmentList-theme.scss b/src/v2/styles/AttachmentList/AttachmentList-theme.scss
@@ -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);
+  }
+}
diff --git a/src/v2/styles/Icon/Icon-layout.scss b/src/v2/styles/Icon/Icon-layout.scss
@@ -61,7 +61,7 @@
   content: '\e809';
 } /* '' */
 .str-chat__icon--play::before {
-  content: '\e80a';
+  content: '\e814';
 } /* '' */
 .str-chat__icon--reaction::before {
   content: '\e80b';