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) { } }