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

auto-load all media in lightbox

This commit is contained in:
Nicolas Constant 2019-06-15 16:51:41 -04:00
parent fdd9d751e7
commit 0e1ca8cf71
No known key found for this signature in database
GPG Key ID: 1E9F677FB01A5688
3 changed files with 69 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,21 +3,29 @@
<fa-icon [icon]="faTimes"></fa-icon>
</button>
<button class="media-viewer-canvas__previous media-viewer-canvas__button" title="previous" (click)="previous($event)" *ngIf="previousAvailable">
<button class="media-viewer-canvas__previous media-viewer-canvas__button" title="previous"
(click)="previous($event)" *ngIf="previousAvailable">
<fa-icon [icon]="faAngleLeft"></fa-icon>
</button>
<button class="media-viewer-canvas__next media-viewer-canvas__button" title="next" (click)="next($event)" *ngIf="nextAvailable">
<button class="media-viewer-canvas__next media-viewer-canvas__button" title="next" (click)="next($event)"
*ngIf="nextAvailable">
<fa-icon [icon]="faAngleRight"></fa-icon>
</button>
<img class="media-viewer-canvas__image" *ngIf="imageUrl" src="{{imageUrl}}" (click)="blockClick($event)"/>
<video class="media-viewer-canvas__image" *ngIf="gifvUrl" role="application" loop autoplay (click)="blockClick($event)">
<source src="{{ gifvUrl }}" type="video/mp4">
</video>
<video class="media-viewer-canvas__image" *ngIf="videoUrl" role="application" loop controls="controls" (click)="blockClick($event)">
<source src="{{ videoUrl }}" type="video/mp4">
</video>
<div *ngFor="let att of attachments" class="media-viewer-canvas__attachement" [ngClass]="{ 'collapsed': currentIndex !== att.index }">
<img *ngIf="att.type === 'image'"
src="{{att.url}}" class="media-viewer-canvas__image" (click)="blockClick($event)" />
<video *ngIf="att.type === 'gifv'"
class="media-viewer-canvas__image" role="application" loop autoplay (click)="blockClick($event)">
<source src="{{att.url}}" type="video/mp4">
</video>
<video *ngIf="att.type === 'video'"
class="media-viewer-canvas__image" role="application" loop autoplay controls="controls" (click)="blockClick($event)">
<source src="{{att.url}}" type="video/mp4">
</video>
</div>
<div #video *ngIf="html" class="media-viewer-canvas__image media-viewer-canvas__iframe" [innerHTML]="html">
</div>

15
src/app/components/media-viewer/media-viewer.component.scss
View File

@ -7,7 +7,7 @@
background-color: rgba(0, 0, 0, 0.8);
overflow: hidden;
position: relative;
&__button {
@include clearButton;
padding: 5px;
@ -60,6 +60,11 @@
padding: 10px;
}
&__attachement {
max-width: 100%;
height: 100vh;
}
&__image {
@media screen and (min-width: $screen-break) {
max-width: 85%;
@ -72,6 +77,8 @@
margin-top: 50vh;
margin-left: 50vw;
transform: translate(-50%, -50%);
visibility: visible;
}
&__iframe {
@ -80,4 +87,8 @@
max-height: 600px;
max-width: 950px;
}
}
}
.collapsed {
height: 0;
}

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

@ -18,26 +18,30 @@ export class MediaViewerComponent implements OnInit {
faAngleLeft = faAngleLeft;
faAngleRight = faAngleRight;
imageUrl: string;
gifvUrl: string;
videoUrl: string;
attachments: AttachmentsWrapper[] = [];
html: SafeHtml;
previousAvailable: boolean;
nextAvailable: boolean;
private currentIndex: number;
currentIndex: number;
@Input('openedMediaEvent')
set openedMediaEvent(value: OpenMediaEvent) {
this._mediaEvent = value;
this.attachments.length = 0;
if (value.iframe) {
this.html = value.iframe;
this.autoplayIframe();
} else {
const attachment = value.attachments[value.selectedIndex];
for(let i = 0; i < value.attachments.length; i++){
let att = value.attachments[i];
this.attachments.push(new AttachmentsWrapper(att, i));
}
this.currentIndex = value.selectedIndex;
this.loadAttachment(attachment);
this.setBrowsing();
}
}
@ -52,7 +56,7 @@ export class MediaViewerComponent implements OnInit {
handleKeyboardEvent(event: KeyboardEvent) {
event.stopPropagation();
event.preventDefault();
if (event.key === 'ArrowRight') {
this.next(event);
} else if (event.key === 'ArrowLeft') {
@ -65,24 +69,10 @@ export class MediaViewerComponent implements OnInit {
ngOnInit() {
}
private loadAttachment(attachment: Attachment) {
if (attachment.type === 'image') {
this.imageUrl = attachment.url;
} else if (attachment.type === 'gifv') {
this.gifvUrl = attachment.url;
} else if (attachment.type === 'video') {
this.videoUrl = attachment.url;
}
}
private setBrowsing() {
var index = this.currentIndex;
var attachments = this.openedMediaEvent.attachments;
console.log(`index ${index}`);
console.log(`attachments.length ${attachments.length}`);
if (index < attachments.length - 1) {
if (index < this.attachments.length - 1) {
this.nextAvailable = true;
} else {
this.nextAvailable = false;
@ -120,7 +110,6 @@ export class MediaViewerComponent implements OnInit {
if (this.currentIndex <= 0) return false;
this.currentIndex--;
this.imageUrl = this.openedMediaEvent.attachments[this.currentIndex].url;
this.setBrowsing();
return false;
@ -131,9 +120,34 @@ export class MediaViewerComponent implements OnInit {
if (this.currentIndex >= this.openedMediaEvent.attachments.length - 1) return false;
this.currentIndex++;
this.imageUrl = this.openedMediaEvent.attachments[this.currentIndex].url;
this.setBrowsing();
return false;
}
}
class AttachmentsWrapper implements Attachment {
constructor(attachment: Attachment, index: number) {
this.id = attachment.id;
this.type = attachment.type;
this.url = attachment.url;
this.remote_url = attachment.remote_url;
this.preview_url = attachment.preview_url;
this.text_url = attachment.text_url;
this.meta = attachment.meta;
this.description = attachment.description;
this.index = index;
}
id: string;
type: "image" | "video" | "gifv";
url: string;
remote_url: string;
preview_url: string;
text_url: string;
meta: any;
description: string;
index: number;
}