Mastodon
/
Sengi-Windows-MacOS-Linux
mirror of https://github.com/NicolasConstant/sengi
1
0
Fork 0
Code Issues Releases Wiki Activity

open gifv in media-overlay #38 #37

This commit is contained in:
Nicolas Constant 2019-02-27 20:28:39 -05:00
parent 9167cbd4da
commit 9fc2aecd0a
No known key found for this signature in database
GPG Key ID: 1E9F677FB01A5688
4 changed files with 17 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/app/components/media-viewer/media-viewer.component.html
View File

@ -3,4 +3,7 @@
<fa-icon [icon]="faTimes"></fa-icon>
</button>
<img class="media-viewer-canvas__image" *ngIf="imageUrl" src="{{imageUrl}}" />
<video class="media-viewer-canvas__image" *ngIf="gifvUrl" role="application" loop autoplay (click)="attachmentSelected(0)">
<source src="{{ gifvUrl }}" type="video/mp4">
</video>
</div>

4
src/app/components/media-viewer/media-viewer.component.ts
View File

@ -16,7 +16,9 @@ export class MediaViewerComponent implements OnInit {
faChevronLeft = faChevronLeft;
faChevronRight = faChevronRight;
faTimes = faTimes;
imageUrl: string;
gifvUrl: string;
@Input('openedMediaEvent')
set openedMediaEvent(value: OpenMediaEvent) {
@ -42,6 +44,8 @@ export class MediaViewerComponent implements OnInit {
if (attachment.type === 'image') {
this.imageUrl = attachment.url;
} else if (attachment.type === 'gifv'){
this.gifvUrl = attachment.url;
}
}

18
src/app/components/stream/status/attachements/attachements.component.html
View File

@ -1,16 +1,16 @@
<div class="galery" *ngIf="isImage">
<div class="galery__image">
<a *ngIf="attachments.length === 1" class="galery__image--link" title="{{ attachments[0].text_url }}"
<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 }}" />
</a>
<a *ngIf="attachments.length === 2" class="galery__image--link galery__image--link-2"
title="{{ attachments[0].text_url }}" (click)="attachmentSelected(0)">
title="{{ attachments[0].description }}" (click)="attachmentSelected(0)">
<img src="{{ attachments[0].preview_url }}" />
</a>
<a *ngIf="attachments.length === 2" class="galery__image--link galery__image--link-2"
title="{{ attachments[1].text_url }}" (click)="attachmentSelected(1)">
title="{{ attachments[1].description }}" (click)="attachmentSelected(1)">
<img src="{{ attachments[1].preview_url }}" />
</a>
@ -19,11 +19,11 @@
<img src="{{ attachments[0].preview_url }}" />
</a>
<a *ngIf="attachments.length === 3" class="galery__image--link galery__image--link-3-2"
title="{{ attachments[1].text_url }}" (click)="attachmentSelected(1)">
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].text_url }}" (click)="attachmentSelected(2)">
title="{{ attachments[2].description }}" (click)="attachmentSelected(2)">
<img src="{{ attachments[2].urpreview_urll }}" />
</a>
@ -32,22 +32,22 @@
<img src="{{ attachments[0].preview_url }}" />
</a>
<a *ngIf="attachments.length === 4" class="galery__image--link galery__image--link-4"
title="{{ attachments[1].text_url }}" (click)="attachmentSelected(1)">
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].text_url }}" (click)="attachmentSelected(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[3].text_url }}" (click)="attachmentSelected(3)">
title="{{ attachments[3].description }}" (click)="attachmentSelected(3)">
<img src="{{ attachments[3].preview_url }}" />
</a>
</div>
</div>
<div class="galery" *ngIf="isGifv">
<!-- <video width="480" height="320" controls="controls"> -->
<video class="galery__gifv" role="application" loop autoplay>
<video class="galery__gifv" role="application" loop autoplay (click)="attachmentSelected(0)">
<source src="{{ attachments[0].url }}" type="video/mp4">
</video>
</div>

1
src/app/components/stream/status/attachements/attachements.component.scss
View File

@ -76,5 +76,6 @@
width: 100%;
height: 100%;
object-fit: cover;
cursor: zoom-in;
}
}