added support for multi audio attachment (pleroma)
This commit is contained in:
parent
fbc10b049f
commit
a3e453ae0e
|
@ -1,45 +1,45 @@
|
|||
<div class="galery" *ngIf="imageAttachments.length > 0">
|
||||
<div class="galery__image" *ngIf="imageAttachments.length === 1">
|
||||
<app-attachement-image class="galery__img--1"
|
||||
[attachment]="imageAttachments[0]" (openEvent)="attachmentSelected('image', 0)">
|
||||
<app-attachement-image class="galery__img--1" [attachment]="imageAttachments[0]"
|
||||
(openEvent)="attachmentSelected('image', 0)">
|
||||
</app-attachement-image>
|
||||
</div>
|
||||
|
||||
<div class="galery__image" *ngIf="imageAttachments.length === 2">
|
||||
<app-attachement-image class="galery__img--2"
|
||||
[attachment]="imageAttachments[0]" (openEvent)="attachmentSelected('image', 0)">
|
||||
<app-attachement-image class="galery__img--2" [attachment]="imageAttachments[0]"
|
||||
(openEvent)="attachmentSelected('image', 0)">
|
||||
</app-attachement-image>
|
||||
<app-attachement-image class="galery__img--2"
|
||||
[attachment]="imageAttachments[1]" (openEvent)="attachmentSelected('image', 1)">
|
||||
<app-attachement-image class="galery__img--2" [attachment]="imageAttachments[1]"
|
||||
(openEvent)="attachmentSelected('image', 1)">
|
||||
</app-attachement-image>
|
||||
</div>
|
||||
|
||||
<div class="galery__image" *ngIf="imageAttachments.length === 3">
|
||||
<app-attachement-image class="galery__img--3-1"
|
||||
[attachment]="imageAttachments[0]" (openEvent)="attachmentSelected('image', 0)">
|
||||
<app-attachement-image class="galery__img--3-1" [attachment]="imageAttachments[0]"
|
||||
(openEvent)="attachmentSelected('image', 0)">
|
||||
</app-attachement-image>
|
||||
<app-attachement-image class="galery__img--3-2"
|
||||
[attachment]="imageAttachments[1]" (openEvent)="attachmentSelected('image', 1)">
|
||||
<app-attachement-image class="galery__img--3-2" [attachment]="imageAttachments[1]"
|
||||
(openEvent)="attachmentSelected('image', 1)">
|
||||
</app-attachement-image>
|
||||
<app-attachement-image class="galery__img--3-2"
|
||||
[attachment]="imageAttachments[2]" (openEvent)="attachmentSelected('image', 2)">
|
||||
<app-attachement-image class="galery__img--3-2" [attachment]="imageAttachments[2]"
|
||||
(openEvent)="attachmentSelected('image', 2)">
|
||||
</app-attachement-image>
|
||||
</div>
|
||||
|
||||
<div class="galery__image" *ngIf="imageAttachments.length === 4">
|
||||
<app-attachement-image class="galery__img--4"
|
||||
[attachment]="imageAttachments[0]" (openEvent)="attachmentSelected('image', 0)">
|
||||
<app-attachement-image class="galery__img--4" [attachment]="imageAttachments[0]"
|
||||
(openEvent)="attachmentSelected('image', 0)">
|
||||
</app-attachement-image>
|
||||
<app-attachement-image class="galery__img--4"
|
||||
[attachment]="imageAttachments[1]" (openEvent)="attachmentSelected('image', 1)">
|
||||
<app-attachement-image class="galery__img--4" [attachment]="imageAttachments[1]"
|
||||
(openEvent)="attachmentSelected('image', 1)">
|
||||
</app-attachement-image>
|
||||
<app-attachement-image class="galery__img--4"
|
||||
[attachment]="imageAttachments[2]" (openEvent)="attachmentSelected('image', 2)">
|
||||
<app-attachement-image class="galery__img--4" [attachment]="imageAttachments[2]"
|
||||
(openEvent)="attachmentSelected('image', 2)">
|
||||
</app-attachement-image>
|
||||
<app-attachement-image class="galery__img--4"
|
||||
[attachment]="imageAttachments[3]" (openEvent)="attachmentSelected('image', 3)">
|
||||
<app-attachement-image class="galery__img--4" [attachment]="imageAttachments[3]"
|
||||
(openEvent)="attachmentSelected('image', 3)">
|
||||
</app-attachement-image>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="galery galery__hover" *ngIf="videoAttachments.length > 0">
|
||||
|
@ -65,8 +65,10 @@
|
|||
</div>
|
||||
</div>
|
||||
<div *ngIf="audioAttachments.length > 0">
|
||||
<audio controls class="audio">
|
||||
<source src="{{ audioAttachments[0].url }}" type="{{ audioType }}">
|
||||
Your browser does not support the audio element.
|
||||
</audio>
|
||||
<div *ngFor="let a of audioAttachments">
|
||||
<audio controls class="audio">
|
||||
<source src="{{ a.url }}" type="{{ a.audioType }}">
|
||||
Your browser does not support the audio element.
|
||||
</audio>
|
||||
</div>
|
||||
</div>
|
|
@ -1,7 +1,7 @@
|
|||
import { Component, OnInit, Input, ViewChild, ElementRef } from '@angular/core';
|
||||
import { faPlay, faPause, faExpand, faVolumeUp, faVolumeMute } from "@fortawesome/free-solid-svg-icons";
|
||||
|
||||
import { Attachment } from '../../../../services/models/mastodon.interfaces';
|
||||
import { Attachment, PleromaAttachment } from '../../../../services/models/mastodon.interfaces';
|
||||
import { NavigationService } from '../../../../services/navigation.service';
|
||||
import { OpenMediaEvent } from '../../../../models/common.model';
|
||||
|
||||
|
@ -13,7 +13,7 @@ import { OpenMediaEvent } from '../../../../models/common.model';
|
|||
export class AttachementsComponent implements OnInit {
|
||||
imageAttachments: Attachment[] = [];
|
||||
videoAttachments: Attachment[] = [];
|
||||
audioAttachments: Attachment[] = [];
|
||||
audioAttachments: AudioAttachment[] = [];
|
||||
|
||||
private _attachments: Attachment[];
|
||||
|
||||
|
@ -51,8 +51,7 @@ export class AttachementsComponent implements OnInit {
|
|||
} else if(a.type === 'video') {
|
||||
this.videoAttachments.push(a);
|
||||
} else if(a.type === 'audio') {
|
||||
this.audioAttachments.push(a);
|
||||
this.setAudioData(a);
|
||||
this.audioAttachments.push(new AudioAttachment(a));
|
||||
}
|
||||
});
|
||||
}
|
||||
|
@ -103,6 +102,24 @@ export class AttachementsComponent implements OnInit {
|
|||
return false;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
class AudioAttachment implements Attachment {
|
||||
constructor(att: Attachment){
|
||||
this.id = att.id;
|
||||
this.type = att.type;
|
||||
this.url = att.url;
|
||||
this.remote_url = att.remote_url;
|
||||
this.preview_url = att.preview_url;
|
||||
this.text_url = att.text_url;
|
||||
this.meta = att.meta;
|
||||
this.description = att.description;
|
||||
this.pleroma = att.pleroma;
|
||||
|
||||
this.setAudioData(att);
|
||||
}
|
||||
|
||||
setAudioData(att: Attachment): any {
|
||||
if(att.meta && att.meta.audio_encode){
|
||||
this.audioType = `audio/${att.meta.audio_encode}`;
|
||||
|
@ -110,4 +127,16 @@ export class AttachementsComponent implements OnInit {
|
|||
this.audioType = att.pleroma.mime_type;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
id: string;
|
||||
type: "image" | "video" | "gifv" | "audio";
|
||||
url: string;
|
||||
remote_url: string;
|
||||
preview_url: string;
|
||||
text_url: string;
|
||||
meta: any;
|
||||
description: string;
|
||||
pleroma: PleromaAttachment;
|
||||
|
||||
audioType: string;
|
||||
}
|
Loading…
Reference in New Issue