candid support for audio attachment

src/app/components/stream/status/attachements/attachements.component.html

@@ -79,3 +79,9 @@
         </button>
     </div>
 </div>
+<div *ngIf="isAudio">
+    <audio controls class="audio">
+        <source src="{{ attachments[0].url }}" type="audio/{{ attachments[0].meta.audio_encode }}">
+        Your browser does not support the audio element.
+    </audio>
+</div>

src/app/components/stream/status/attachements/attachements.component.scss

@@ -1,5 +1,6 @@
 @import "variables";
 @import "mixins";
+
 .galery {
     width: 100%;
     height: 150px;
@@ -10,21 +11,26 @@
     &__image {
         width: 100%;
         height: 100%;
+
         &--link {
             cursor: zoom-in;
         }
+
         &--1 {
             width: 100%;
             height: 100%;
             object-fit: cover;
             object-position: 50% 50%;
         }
+
         &--link-2 {
             width: 49%;
             height: 100%;
+
             &:last-child {
                 margin-left: 2%; // border: 1px greenyellow solid;
             }
+
             & img {
                 width: 49%;
                 height: 100%;
@@ -32,10 +38,12 @@
                 object-position: 50% 50%;
             }
         }
+
         &--link-3-1 {
             width: 49%;
             height: 100%;
             float: left;
+
             & img {
                 width: 100%;
                 height: 100%;
@@ -43,14 +51,17 @@
                 object-position: 50% 50%;
             }
         }
+
         &--link-3-2 {
             width: 49%;
             height: 49%;
             margin-left: 2%;
             float: left;
+
             &:nth-child(even) {
                 margin-bottom: 2%;
             }
+
             & img {
                 width: 100%;
                 height: 100%;
@@ -58,12 +69,15 @@
                 object-position: 50% 50%;
             }
         }
+
         &--link-4 {
             width: 49%;
             height: 49%;
+
             &:nth-child(even) {
                 margin-left: 2%;
             }
+
             & img {
                 width: 49%;
                 height: 49%;
@@ -73,6 +87,7 @@
             }
         }
     }
+
     &__gifv {
         width: 100%;
         height: 100%;
@@ -80,6 +95,7 @@
         cursor: zoom-in;
         border-radius: 2px;
     }
+
     &__video {
         width: 100%;
         height: 100%;
@@ -87,6 +103,7 @@
         background-color: black;
         border-radius: 2px;
     }
+
     &__play-control {
         z-index: 2;
         position: absolute;
@@ -94,6 +111,7 @@
         left: 0;
         // outline: 1px greenyellow solid;    
     }
+
     &__control {
         z-index: 1;
         position: absolute;
@@ -137,6 +155,7 @@
 
         background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .1), rgba(0, 0, 0, .6), rgba(0, 0, 0, 1));
     }
+
     &__hover {
         &:hover .galery__control {
             opacity: 100;
@@ -144,3 +163,13 @@
         }
     }
 }
+
+
+.audio {
+    width: calc(100%);
+    height: 30px;
+
+    &:focus {
+        outline: none;
+    }
+}

src/app/components/stream/status/attachements/attachements.component.ts

@@ -15,6 +15,7 @@ export class AttachementsComponent implements OnInit {
     isImage: boolean;
     isGifv: boolean;
     isVideo: boolean;
+    isAudio: boolean;
 
     faPlay = faPlay;
     faPause = faPause;
@@ -37,6 +38,8 @@ export class AttachementsComponent implements OnInit {
             this.isGifv = true;
         } else if (this._attachments[0].type === 'video') {
             this.isVideo = true;
+        } else if (this._attachments[0].type === 'audio') {
+            this.isAudio = true;
         }
     }
     get attachments(): Attachment[] {