added showing iframe media in overlay

src/app/components/media-viewer/media-viewer.component.html

@@ -9,4 +9,7 @@
     <video class="media-viewer-canvas__image" *ngIf="videoUrl" role="application" loop controls="controls" (click)="blockClick($event)">
         <source src="{{ videoUrl }}" type="video/mp4">
     </video>
+
+    <div #video *ngIf="html" class="media-viewer-canvas__image media-viewer-canvas__iframe" [innerHTML]="html">
+    </div>
 </div>

src/app/components/media-viewer/media-viewer.component.scss

@@ -27,4 +27,12 @@
         margin-left: 50vw;
         transform: translate(-50%, -50%);
     }
+
+    &__iframe {
+        height: 60vw;
+        width: 95vw;
+        max-height: 600px;
+        max-width: 950px;
+        border: 1px solid greenyellow;
+    }
 }

src/app/components/media-viewer/media-viewer.component.ts

@@ -1,10 +1,12 @@
 import { Component, OnInit, Input, Output } from '@angular/core';
+import { SafeHtml } from '@angular/platform-browser';
 import { faChevronLeft, faChevronRight, faTimes } from "@fortawesome/free-solid-svg-icons";
 import { Subject } from 'rxjs';
 
 import { OpenMediaEvent } from '../../models/common.model';
 import { Attachment } from '../../services/models/mastodon.interfaces';
 
+
 @Component({
     selector: 'app-media-viewer',
     templateUrl: './media-viewer.component.html',
@@ -20,13 +22,18 @@ export class MediaViewerComponent implements OnInit {
     imageUrl: string;
     gifvUrl: string;
     videoUrl: string;
-    
+    html: SafeHtml;
+
     @Input('openedMediaEvent')
     set openedMediaEvent(value: OpenMediaEvent) {
         this._mediaEvent = value;
 
-        const attachment = value.attachments[value.selectedIndex];
-        this.loadAttachment(attachment);
+        if (value.iframe) {
+            this.html = value.iframe;
+        } else {
+            const attachment = value.attachments[value.selectedIndex];
+            this.loadAttachment(attachment);
+        }
     }
     get openedMediaEvent(): OpenMediaEvent {
         return this._mediaEvent;
@@ -42,9 +49,9 @@ export class MediaViewerComponent implements OnInit {
     private loadAttachment(attachment: Attachment) {
         if (attachment.type === 'image') {
             this.imageUrl = attachment.url;
-        } else if (attachment.type === 'gifv'){
+        } else if (attachment.type === 'gifv') {
             this.gifvUrl = attachment.url;
-        } else if (attachment.type === 'video'){
+        } else if (attachment.type === 'video') {
             this.videoUrl = attachment.url;
         }
     }
@@ -54,7 +61,7 @@ export class MediaViewerComponent implements OnInit {
         return false;
     }
 
-    blockClick(event: any): boolean{
+    blockClick(event: any): boolean {
         event.stopPropagation();
         return false;
     }

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

@@ -51,7 +51,7 @@ export class AttachementsComponent implements OnInit {
     }
 
     attachmentSelected(index: number): boolean {
-        let openMediaEvent = new OpenMediaEvent(index, this.attachments);
+        let openMediaEvent = new OpenMediaEvent(index, this.attachments, null);
         this.navigationService.openMedia(openMediaEvent);
         return false;
     }

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

@@ -4,6 +4,8 @@ import { faPlay, faExpand, faExternalLinkAlt } from "@fortawesome/free-solid-svg
 import { faFileAlt } from "@fortawesome/free-regular-svg-icons";
 
 import { Card } from '../../../../services/models/mastodon.interfaces';
+import { NavigationService } from '../../../../services/navigation.service';
+import { OpenMediaEvent } from '../../../../models/common.model';
 
 
 @Component({
@@ -24,14 +26,12 @@ export class CardComponent implements OnInit {
     html: SafeHtml;
     showHtml: boolean;
 
-    constructor(private sanitizer: DomSanitizer) { }
+    constructor(
+        private readonly navigationService: NavigationService,
+        private readonly sanitizer: DomSanitizer) { }
 
     ngOnInit() {
-        // 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{
@@ -44,6 +44,7 @@ export class CardComponent implements OnInit {
     }
     
     play(): boolean {
+        this.html = this.sanitize(this.card);
         this.showHtml = true;
 
         setTimeout(() => {
@@ -56,7 +57,11 @@ export class CardComponent implements OnInit {
         return false;
     }
 
-    expand(): boolean {        
+    expand(): boolean {
+        this.html = this.sanitize(this.card);
+
+        const openMedia = new OpenMediaEvent(null, null, this.html);
+        this.navigationService.openMedia(openMedia);
 
         return false;
     }

src/app/models/common.model.ts

@@ -1,10 +1,14 @@
+import { SafeHtml } from '@angular/platform-browser';
+
 import { Attachment, Status } from "../services/models/mastodon.interfaces";
 import { AccountInfo } from '../states/accounts.state';
 
+
 export class OpenMediaEvent {
     constructor(
         public selectedIndex: number,
-        public attachments: Attachment[]) {
+        public attachments: Attachment[],
+        public iframe: SafeHtml) {
     }
 }