clonegur/frontend/src/app/images/images.component.ts

49 lines
1.5 KiB
TypeScript

import { Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
import { environment } from 'src/environments/environment';
import { Image, ImagesService } from '../services/images.service';
import { ScrollService } from '../services/scroll.service';
import { Observable } from 'rxjs';
@Component({
selector: 'app-images',
templateUrl: './images.component.html',
styleUrls: ['./images.component.scss']
})
export class ImagesComponent {
private static nextFrame() {
return new Promise(requestAnimationFrame);
}
public static fromFeed(element: HTMLDivElement, n: number, feed: (n: number, i: number) => Promise<Image[]>) {
return new Observable<Image[]>(sub => {
let done = false;
let images: Image[] = [];
let i = 0;
(async () => {
while (!done) {
await this.nextFrame();
if (element.scrollTop + element.clientHeight * 1.5 < element.scrollHeight) continue;
const els = await feed(n, i++);
images.push(...els);
if (els.length === 0) {
sub.complete();
return;
}
else sub.next(images);
}
})();
});
}
@Input() public images: Image[] | null = null;
public ended = false;
public i = 0;
public constructor() {
}
}