added support for multi audio attachment (pleroma)

This commit is contained in:
Nicolas Constant 2020-04-15 01:26:03 -04:00
parent fbc10b049f
commit a3e453ae0e
No known key found for this signature in database
GPG Key ID: 1E9F677FB01A5688
2 changed files with 61 additions and 30 deletions

View File

@ -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>

View File

@ -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;
}