video datacards are working

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "sengi",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

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

@@ -12,23 +12,27 @@
 
     </div>
     <div *ngIf="card.type === 'video'" class="card__video">
-        <div class="card__video--preview">
+        <div *ngIf="!showHtml" class="card__video--preview">
             <div class="card__video--preview--controls">
-                <a href>
-                    <fa-icon class="" [icon]="faFileAlt"></fa-icon>
+                <a href class="card__video--preview--link" (click)="play()">
+                    <fa-icon [icon]="faPlay"></fa-icon>
                 </a>
-                <a href>
-                    <fa-icon class="" [icon]="faFileAlt"></fa-icon>
+                <a href class="card__video--preview--link" (click)="expand()">
+                    <fa-icon [icon]="faExpand"></fa-icon>
                 </a>
-                <a href>
-                    <fa-icon class="" [icon]="faFileAlt"></fa-icon>
+                <a href="{{ card.url }}" class="card__video--preview--link" target="_blank">
+                    <fa-icon [icon]="faExternalLinkAlt"></fa-icon>
                 </a>
             </div>
-            <img src="{{card.image}}" class="card__video--preview--image" />
+            <img src="{{ card.image }}" class="card__video--preview--image" />
         </div>
-        <div class="card__video--content">
+        <div #video *ngIf="showHtml" class="card__video--content" [innerHTML]="html">
 
         </div>
+        <!-- {{ card.html }} -->
+        <!-- <div [innerHTML]="html">
+
+        </div> -->
     </div>
-    <div *ngIf="card.type === 'rich'" class="card__rich" innerHTML="card.html"></div>
+    <div *ngIf="card.type === 'rich'" class="card__rich" [innerHTML]="html"></div>
 </div>

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

@@ -61,12 +61,27 @@
             &--controls {
                 position: absolute;
                 top: 50px;
-                left: 50px;
-                outline: 2px solid greenyellow;
+                left: 65px;
+                // outline: 2px solid greenyellow;
                 width: 100px;
                 height: 50px;
                 z-index: 10;
+                border-radius: 5px;
+                background-color: rgba($color: #000000, $alpha: .85);
+                padding-left: 12px;
+            }
 
+            &--link {
+                transition: all .2s;
+                display: block;
+                color: whitesmoke;
+                font-size: 16px;
+                margin: 12px 5px 0 5px;
+                float: left;
+                
+                &:hover {
+                    opacity: 0.7;
+                }
             }
 
             &--image {
@@ -77,6 +92,11 @@
             }
         }
 
+        &--content {
+            //width: 300px;
+            width: 100%;
+            height: 150px;
+        }
     }
 
     &__rich {

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

@@ -1,28 +1,63 @@
-import { Component, OnInit, Input } from '@angular/core';
-// import { faWindowClose, faReply, faRetweet, faStar } from "@fortawesome/free-solid-svg-icons";
+import { Component, OnInit, Input, ViewChild, ElementRef } from '@angular/core';
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+import { faPlay, faExpand, faExternalLinkAlt } from "@fortawesome/free-solid-svg-icons";
 import { faFileAlt } from "@fortawesome/free-regular-svg-icons";
 
 import { Card } from '../../../../services/models/mastodon.interfaces';
 
+
 @Component({
     selector: 'app-card',
     templateUrl: './card.component.html',
     styleUrls: ['./card.component.scss']
 })
 export class CardComponent implements OnInit {
+    faPlay = faPlay;
+    faExpand = faExpand;
     faFileAlt = faFileAlt;
+    faExternalLinkAlt = faExternalLinkAlt;
 
     @Input() card: Card;
+    @ViewChild('video') myVideo: ElementRef;
 
     host: string;
+    html: SafeHtml;
+    showHtml: boolean;
 
-    constructor() { }
+    constructor(private sanitizer: DomSanitizer) { }
 
     ngOnInit() {
-        console.warn('card');
-        console.warn(this.card);
+        // console.warn('card');
+        // console.warn(this.card);
 
         this.host = this.card.url.replace('https://', '').replace('http://', '').split('/')[0];
+        this.html = this.sanitize(this.card);
     }
 
+    private sanitize(card: Card): SafeHtml{
+        if(!card.html) return null;     
+
+        let html = card.html.replace(`width="${card.width}"`, '');
+        html = html.replace(`height="${card.height}"`, '');
+        html = html.replace(`<iframe `, '<iframe allow="autoplay" style="width:100%; height:100%;"');
+        return this.sanitizer.bypassSecurityTrustHtml(html);
+    }
+    
+    play(): boolean {
+        this.showHtml = true;
+
+        setTimeout(() => {
+            if(this.myVideo.nativeElement.childNodes[0].src.includes('?')){
+                this.myVideo.nativeElement.childNodes[0].src+='&autoplay=1&auto_play=1';
+            } else {
+                this.myVideo.nativeElement.childNodes[0].src+='?autoplay=1&auto_play=1';
+            }
+        }, 500);
+        return false;
+    }
+
+    expand(): boolean {        
+
+        return false;
+    }
 }