rewiring attachments
This commit is contained in:
Nicolas Constant
parent
ecd75676bb
commit
4ea25c4866
|
|
@ -1,55 +1,103 @@
|
|||
<div class="galery" *ngIf="isImage">
|
||||
<div class="galery" *ngIf="imageAttachments.length > 0">
|
||||
<div class="galery__image">
|
||||
<a *ngIf="attachments.length === 1" class="galery__image--link" title="{{ attachments[0].description }}"
|
||||
(click)="attachmentSelected(0)">
|
||||
<img class="galery__image--1" src="{{ attachments[0].preview_url }}" />
|
||||
<div class="galery__image" *ngIf="imageAttachments.length === 1">
|
||||
<a *ngIf="imageAttachments[0].type === 'image'" class="galery__image--link"
|
||||
title="{{ imageAttachments[0].description }}" (click)="attachmentSelected(0)">
|
||||
<img class="galery__image--1" src="{{ imageAttachments[0].preview_url }}" />
|
||||
</a>
|
||||
<video *ngIf="imageAttachments[0].type === 'gifv'" class="galery__image--link galery__image--1"
|
||||
role="application" loop autoplay (click)="attachmentSelected(0)">
|
||||
<source src="{{ imageAttachments[0].url }}" type="video/mp4">
|
||||
</video>
|
||||
</div>
|
||||
|
||||
<div class="galery__image" *ngIf="imageAttachments.length === 2">
|
||||
<a *ngIf="imageAttachments[0].type === 'image'" class="galery__image--link galery__image--link-2"
|
||||
title="{{ imageAttachments[0].description }}" (click)="attachmentSelected(0)">
|
||||
<img src="{{ imageAttachments[0].preview_url }}" />
|
||||
</a>
|
||||
<div class="galery__image--link galery__image--link-2">
|
||||
<video *ngIf="imageAttachments[0].type === 'gifv'" role="application" loop autoplay
|
||||
(click)="attachmentSelected(0)">
|
||||
<source src="{{ imageAttachments[0].url }}" type="video/mp4">
|
||||
</video>
|
||||
</div>
|
||||
<a *ngIf="imageAttachments[0].type === 'image'" class="galery__image--link galery__image--link-2"
|
||||
title="{{ imageAttachments[1].description }}" (click)="attachmentSelected(1)">
|
||||
<img src="{{ imageAttachments[1].preview_url }}" />
|
||||
</a>
|
||||
<div class="galery__image--link galery__image--link-2">
|
||||
<video *ngIf="imageAttachments[1].type === 'gifv'" role="application" loop autoplay
|
||||
(click)="attachmentSelected(1)">
|
||||
<source src="{{ imageAttachments[1].url }}" type="video/mp4">
|
||||
</video>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a *ngIf="imageAttachments.length === 3" class="galery__image--link galery__image--link-3-1"
|
||||
title="{{ imageAttachments[0].description }}" (click)="attachmentSelected(0)">
|
||||
<img *ngIf="imageAttachments[0].type === 'image'" src="{{ imageAttachments[0].preview_url }}" />
|
||||
<video *ngIf="imageAttachments[0].type === 'gifv'" class="galery__gifv" role="application" loop autoplay
|
||||
(click)="attachmentSelected(0)">
|
||||
<source src="{{ imageAttachments[0].url }}" type="video/mp4">
|
||||
</video>
|
||||
</a>
|
||||
<a *ngIf="imageAttachments.length === 3" class="galery__image--link galery__image--link-3-2"
|
||||
title="{{ imageAttachments[1].description }}" (click)="attachmentSelected(1)">
|
||||
<img *ngIf="imageAttachments[1].type === 'image'" src="{{ imageAttachments[1].preview_url }}" />
|
||||
<video *ngIf="imageAttachments[1].type === 'gifv'" class="galery__gifv" role="application" loop autoplay
|
||||
(click)="attachmentSelected(1)">
|
||||
<source src="{{ imageAttachments[1].url }}" type="video/mp4">
|
||||
</video>
|
||||
</a>
|
||||
<a *ngIf="imageAttachments.length === 3" class="galery__image--link galery__image--link-3-2"
|
||||
title="{{ imageAttachments[2].description }}" (click)="attachmentSelected(2)">
|
||||
<img *ngIf="imageAttachments[2].type === 'image'" src="{{ imageAttachments[2].preview_url }}" />
|
||||
<video *ngIf="imageAttachments[2].type === 'gifv'" class="galery__gifv" role="application" loop autoplay
|
||||
(click)="attachmentSelected(2)">
|
||||
<source src="{{ imageAttachments[2].url }}" type="video/mp4">
|
||||
</video>
|
||||
</a>
|
||||
|
||||
<a *ngIf="attachments.length === 2" class="galery__image--link galery__image--link-2"
|
||||
title="{{ attachments[0].description }}" (click)="attachmentSelected(0)">
|
||||
<img src="{{ attachments[0].preview_url }}" />
|
||||
<a *ngIf="imageAttachments.length === 4" class="galery__image--link galery__image--link-4"
|
||||
title="{{ imageAttachments[0].description }}" (click)="attachmentSelected(0)">
|
||||
<img *ngIf="imageAttachments[0].type === 'image'" src="{{ imageAttachments[0].preview_url }}" />
|
||||
<video *ngIf="imageAttachments[0].type === 'gifv'" class="galery__gifv" role="application" loop autoplay
|
||||
(click)="attachmentSelected(0)">
|
||||
<source src="{{ imageAttachments[0].url }}" type="video/mp4">
|
||||
</video>
|
||||
</a>
|
||||
<a *ngIf="attachments.length === 2" class="galery__image--link galery__image--link-2"
|
||||
title="{{ attachments[1].description }}" (click)="attachmentSelected(1)">
|
||||
<img src="{{ attachments[1].preview_url }}" />
|
||||
<a *ngIf="imageAttachments.length === 4" class="galery__image--link galery__image--link-4"
|
||||
title="{{ imageAttachments[1].description }}" (click)="attachmentSelected(1)">
|
||||
<img *ngIf="imageAttachments[1].type === 'image'" src="{{ imageAttachments[1].preview_url }}" />
|
||||
<video *ngIf="imageAttachments[1].type === 'gifv'" class="galery__gifv" role="application" loop autoplay
|
||||
(click)="attachmentSelected(1)">
|
||||
<source src="{{ imageAttachments[1].url }}" type="video/mp4">
|
||||
</video>
|
||||
</a>
|
||||
|
||||
<a *ngIf="attachments.length === 3" class="galery__image--link galery__image--link-3-1"
|
||||
title="{{ attachments[0].description }}" (click)="attachmentSelected(0)">
|
||||
<img src="{{ attachments[0].preview_url }}" />
|
||||
<a *ngIf="imageAttachments.length === 4" class="galery__image--link galery__image--link-4"
|
||||
title="{{ imageAttachments[2].description }}" (click)="attachmentSelected(2)">
|
||||
<img *ngIf="imageAttachments[2].type === 'image'" src="{{ imageAttachments[2].preview_url }}" />
|
||||
<video *ngIf="imageAttachments[2].type === 'gifv'" class="galery__gifv" role="application" loop autoplay
|
||||
(click)="attachmentSelected(2)">
|
||||
<source src="{{ imageAttachments[2].url }}" type="video/mp4">
|
||||
</video>
|
||||
</a>
|
||||
<a *ngIf="attachments.length === 3" class="galery__image--link galery__image--link-3-2"
|
||||
title="{{ attachments[1].description }}" (click)="attachmentSelected(1)">
|
||||
<img src="{{ attachments[1].preview_url }}" />
|
||||
</a>
|
||||
<a *ngIf="attachments.length === 3" class="galery__image--link galery__image--link-3-2"
|
||||
title="{{ attachments[2].description }}" (click)="attachmentSelected(2)">
|
||||
<img src="{{ attachments[2].preview_url }}" />
|
||||
</a>
|
||||
|
||||
<a *ngIf="attachments.length === 4" class="galery__image--link galery__image--link-4"
|
||||
title="{{ attachments[0].description }}" (click)="attachmentSelected(0)">
|
||||
<img src="{{ attachments[0].preview_url }}" />
|
||||
</a>
|
||||
<a *ngIf="attachments.length === 4" class="galery__image--link galery__image--link-4"
|
||||
title="{{ attachments[1].description }}" (click)="attachmentSelected(1)">
|
||||
<img src="{{ attachments[1].preview_url }}" />
|
||||
</a>
|
||||
<a *ngIf="attachments.length === 4" class="galery__image--link galery__image--link-4"
|
||||
title="{{ attachments[2].description }}" (click)="attachmentSelected(2)">
|
||||
<img src="{{ attachments[2].preview_url }}" />
|
||||
</a>
|
||||
<a *ngIf="attachments.length === 4" class="galery__image--link galery__image--link-4"
|
||||
title="{{ attachments[3].description }}" (click)="attachmentSelected(3)">
|
||||
<img src="{{ attachments[3].preview_url }}" />
|
||||
<a *ngIf="imageAttachments.length === 4" class="galery__image--link galery__image--link-4"
|
||||
title="{{ imageAttachments[3].description }}" (click)="attachmentSelected(3)">
|
||||
<img *ngIf="imageAttachments[3].type === 'image'" src="{{ imageAttachments[3].preview_url }}" />
|
||||
<video *ngIf="imageAttachments[3].type === 'gifv'" class="galery__gifv" role="application" loop autoplay
|
||||
(click)="attachmentSelected(3)">
|
||||
<source src="{{ imageAttachments[3].url }}" type="video/mp4">
|
||||
</video>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="galery" *ngIf="isGifv">
|
||||
<!-- <div class="galery" *ngIf="isGifv">
|
||||
<video class="galery__gifv" role="application" loop autoplay (click)="attachmentSelected(0)">
|
||||
<source src="{{ attachments[0].url }}" type="video/mp4">
|
||||
</video>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="galery galery__hover" *ngIf="isVideo">
|
||||
<video #videoPlayer class="galery__video" role="application" loop>
|
||||
<source src="{{ attachments[0].url }}" type="video/mp4">
|
||||
|
|
@ -62,14 +110,14 @@
|
|||
<div class="galery__control">
|
||||
<a href class="galery__control--button" (click)="onPlay()">
|
||||
<fa-icon [icon]="faPause" *ngIf="isPlaying"></fa-icon>
|
||||
</a>
|
||||
</a>
|
||||
<a href class="galery__control--button galery__control--expand" (click)="onExpand()">
|
||||
<fa-icon [icon]="faExpand"></fa-icon>
|
||||
</a>
|
||||
<a href class="galery__control--button galery__control--mute" (click)="onMute()">
|
||||
<fa-icon [icon]="faVolumeUp" *ngIf="!isMuted"></fa-icon>
|
||||
<fa-icon [icon]="faVolumeMute" *ngIf="isMuted"></fa-icon>
|
||||
</a>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="isAudio">
|
||||
|
|
|
|||
|
|
@ -12,8 +12,10 @@
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
&--link {
|
||||
&--link {
|
||||
//display: inline;
|
||||
cursor: zoom-in;
|
||||
outline: 1px solid orange;
|
||||
}
|
||||
|
||||
&--1 {
|
||||
|
|
@ -31,12 +33,17 @@
|
|||
margin-left: 2%; // border: 1px greenyellow solid;
|
||||
}
|
||||
|
||||
& img {
|
||||
& img, & video {
|
||||
width: 49%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: 50% 50%;
|
||||
}
|
||||
|
||||
// & video {
|
||||
// object-fit: cover;
|
||||
// object-position: 50% 50%;
|
||||
// }
|
||||
}
|
||||
|
||||
&--link-3-1 {
|
||||
|
|
@ -44,7 +51,7 @@
|
|||
height: 100%;
|
||||
float: left;
|
||||
|
||||
& img {
|
||||
& img, & video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
|
|
@ -62,7 +69,7 @@
|
|||
margin-bottom: 2%;
|
||||
}
|
||||
|
||||
& img {
|
||||
& img, & video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
|
|
@ -78,7 +85,7 @@
|
|||
margin-left: 2%;
|
||||
}
|
||||
|
||||
& img {
|
||||
& img, & video {
|
||||
width: 49%;
|
||||
height: 49%;
|
||||
object-fit: cover;
|
||||
|
|
@ -88,13 +95,13 @@
|
|||
}
|
||||
}
|
||||
|
||||
&__gifv {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
cursor: zoom-in;
|
||||
border-radius: 2px;
|
||||
}
|
||||
// &__gifv {
|
||||
// width: 100%;
|
||||
// height: 100%;
|
||||
// object-fit: cover;
|
||||
// cursor: zoom-in;
|
||||
// border-radius: 2px;
|
||||
// }
|
||||
|
||||
&__video {
|
||||
width: 100%;
|
||||
|
|
|
|||
|
|
@ -11,11 +11,15 @@ import { OpenMediaEvent } from '../../../../models/common.model';
|
|||
styleUrls: ['./attachements.component.scss']
|
||||
})
|
||||
export class AttachementsComponent implements OnInit {
|
||||
imageAttachments: Attachment[] = [];
|
||||
videoAttachments: Attachment[] = [];
|
||||
audioAttachments: Attachment[] = [];
|
||||
|
||||
private _attachments: Attachment[];
|
||||
isImage: boolean;
|
||||
isGifv: boolean;
|
||||
isVideo: boolean;
|
||||
isAudio: boolean;
|
||||
// isImage: boolean;
|
||||
// isGifv: boolean;
|
||||
// isVideo: boolean;
|
||||
// isAudio: boolean;
|
||||
|
||||
faPlay = faPlay;
|
||||
faPause = faPause;
|
||||
|
|
@ -32,16 +36,18 @@ export class AttachementsComponent implements OnInit {
|
|||
set attachments(value: Attachment[]) {
|
||||
this._attachments = value;
|
||||
|
||||
if (this._attachments[0].type === 'image') {
|
||||
this.isImage = true;
|
||||
} else if (this._attachments[0].type === 'gifv') {
|
||||
this.isGifv = true;
|
||||
} else if (this._attachments[0].type === 'video') {
|
||||
this.isVideo = true;
|
||||
} else if (this._attachments[0].type === 'audio') {
|
||||
this.isAudio = true;
|
||||
this.setAudioData(this._attachments[0]);
|
||||
}
|
||||
this.setAttachments(value);
|
||||
|
||||
// if (this._attachments[0].type === 'image') {
|
||||
// this.isImage = true;
|
||||
// } else if (this._attachments[0].type === 'gifv') {
|
||||
// this.isGifv = true;
|
||||
// } else if (this._attachments[0].type === 'video') {
|
||||
// this.isVideo = true;
|
||||
// } else if (this._attachments[0].type === 'audio') {
|
||||
// this.isAudio = true;
|
||||
// this.setAudioData(this._attachments[0]);
|
||||
// }
|
||||
}
|
||||
get attachments(): Attachment[] {
|
||||
return this._attachments;
|
||||
|
|
@ -54,6 +60,19 @@ export class AttachementsComponent implements OnInit {
|
|||
ngOnInit() {
|
||||
}
|
||||
|
||||
private setAttachments(att: Attachment[]){
|
||||
att.forEach(a => {
|
||||
if(a.type === 'image' || a.type === 'gifv'){
|
||||
this.imageAttachments.push(a);
|
||||
} else if(a.type === 'video') {
|
||||
this.videoAttachments.push(a);
|
||||
} else if(a.type === 'audio') {
|
||||
this.audioAttachments.push(a);
|
||||
this.setAudioData(a);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
attachmentSelected(index: number): boolean {
|
||||
let openMediaEvent = new OpenMediaEvent(index, this.attachments, null);
|
||||
this.navigationService.openMedia(openMediaEvent);
|
||||
|
|
|
|||
Loading…
Reference in New Issue