diff --git a/src/app/components/media-viewer/media-viewer.component.html b/src/app/components/media-viewer/media-viewer.component.html
index cd6ccc47..f97475af 100644
--- a/src/app/components/media-viewer/media-viewer.component.html
+++ b/src/app/components/media-viewer/media-viewer.component.html
@@ -9,4 +9,7 @@
+
+
+
\ No newline at end of file
diff --git a/src/app/components/media-viewer/media-viewer.component.scss b/src/app/components/media-viewer/media-viewer.component.scss
index 9a006d08..7642a703 100644
--- a/src/app/components/media-viewer/media-viewer.component.scss
+++ b/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;
+ }
}
\ No newline at end of file
diff --git a/src/app/components/media-viewer/media-viewer.component.ts b/src/app/components/media-viewer/media-viewer.component.ts
index d7e1ad26..9dfd5e01 100644
--- a/src/app/components/media-viewer/media-viewer.component.ts
+++ b/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;
}
diff --git a/src/app/components/stream/status/attachements/attachements.component.ts b/src/app/components/stream/status/attachements/attachements.component.ts
index 182123e5..8336a72c 100644
--- a/src/app/components/stream/status/attachements/attachements.component.ts
+++ b/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;
}
diff --git a/src/app/components/stream/status/card/card.component.ts b/src/app/components/stream/status/card/card.component.ts
index bbe5eda3..8bbfd652 100644
--- a/src/app/components/stream/status/card/card.component.ts
+++ b/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;
}
diff --git a/src/app/models/common.model.ts b/src/app/models/common.model.ts
index 4f93ac20..cf5ed018 100644
--- a/src/app/models/common.model.ts
+++ b/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) {
}
}