mirror of https://github.com/Chocobozzz/PeerTube
Lazy load charts when listing my channels
This commit is contained in:
parent
11d70211af
commit
439b6b7bfb
|
@ -41,8 +41,16 @@
|
||||||
<my-delete-button label (click)="deleteVideoChannel(videoChannel)"></my-delete-button>
|
<my-delete-button label (click)="deleteVideoChannel(videoChannel)"></my-delete-button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div *ngIf="!isInSmallView" class="w-100 d-flex justify-content-end">
|
<div *ngIf="!isInSmallView" class="w-100 d-flex justify-content-end chart-container">
|
||||||
<p-chart *ngIf="chartOptions && videoChannelsChartData && videoChannelsChartData[i]" type="line" [data]="videoChannelsChartData[i]" [options]="chartOptions" width="40vw" height="100px"></p-chart>
|
<div myDeferLoading>
|
||||||
|
<ng-template>
|
||||||
|
<p-chart
|
||||||
|
*ngIf="chartOptions && videoChannelsChartData && videoChannelsChartData[i]"
|
||||||
|
width="40vw" height="100px"
|
||||||
|
type="line" [data]="videoChannelsChartData[i]" [options]="chartOptions"
|
||||||
|
></p-chart>
|
||||||
|
</ng-template>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -62,9 +62,10 @@ my-edit-button {
|
||||||
min-width: 190px;
|
min-width: 190px;
|
||||||
}
|
}
|
||||||
|
|
||||||
::ng-deep .chartjs-render-monitor {
|
.chart-container {
|
||||||
position: relative;
|
// Sync these values with the template
|
||||||
top: 1px;
|
width: 40vw;
|
||||||
|
height: 100px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.video-channels-header {
|
.video-channels-header {
|
||||||
|
|
|
@ -0,0 +1,76 @@
|
||||||
|
import * as debug from 'debug'
|
||||||
|
import {
|
||||||
|
AfterViewInit,
|
||||||
|
ChangeDetectorRef,
|
||||||
|
ContentChild,
|
||||||
|
Directive,
|
||||||
|
ElementRef,
|
||||||
|
EmbeddedViewRef,
|
||||||
|
EventEmitter,
|
||||||
|
OnDestroy,
|
||||||
|
Output,
|
||||||
|
TemplateRef,
|
||||||
|
ViewContainerRef
|
||||||
|
} from '@angular/core'
|
||||||
|
|
||||||
|
const logger = debug('peertube:main:DeferLoadingDirective')
|
||||||
|
|
||||||
|
@Directive({
|
||||||
|
selector: '[myDeferLoading]'
|
||||||
|
})
|
||||||
|
export class DeferLoadingDirective implements AfterViewInit, OnDestroy {
|
||||||
|
@ContentChild(TemplateRef) template: TemplateRef<any>
|
||||||
|
|
||||||
|
@Output() loaded: EventEmitter<any> = new EventEmitter()
|
||||||
|
|
||||||
|
view: EmbeddedViewRef<any>
|
||||||
|
|
||||||
|
private observer: IntersectionObserver
|
||||||
|
|
||||||
|
constructor (
|
||||||
|
private el: ElementRef,
|
||||||
|
private viewContainer: ViewContainerRef,
|
||||||
|
private cd: ChangeDetectorRef
|
||||||
|
) { }
|
||||||
|
|
||||||
|
ngAfterViewInit () {
|
||||||
|
if (this.hasIncompatibleBrowser()) {
|
||||||
|
return this.load()
|
||||||
|
}
|
||||||
|
|
||||||
|
this.observer = new IntersectionObserver(entries => {
|
||||||
|
const entry = entries[0]
|
||||||
|
if (!entry.isIntersecting || entry.target !== this.el.nativeElement) return
|
||||||
|
|
||||||
|
this.observer.unobserve(this.el.nativeElement)
|
||||||
|
this.load()
|
||||||
|
}, { threshold: 0.1 })
|
||||||
|
|
||||||
|
this.observer.observe(this.el.nativeElement)
|
||||||
|
}
|
||||||
|
|
||||||
|
load () {
|
||||||
|
if (this.isLoaded()) return
|
||||||
|
|
||||||
|
logger('Loading component')
|
||||||
|
|
||||||
|
this.viewContainer.clear()
|
||||||
|
this.view = this.viewContainer.createEmbeddedView(this.template, {}, 0)
|
||||||
|
this.loaded.emit()
|
||||||
|
this.cd.detectChanges()
|
||||||
|
}
|
||||||
|
|
||||||
|
isLoaded () {
|
||||||
|
return this.view != null
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnDestroy () {
|
||||||
|
this.view = null
|
||||||
|
|
||||||
|
if (this.observer) this.observer.disconnect()
|
||||||
|
}
|
||||||
|
|
||||||
|
private hasIncompatibleBrowser () {
|
||||||
|
return !('IntersectionObserver' in window)
|
||||||
|
}
|
||||||
|
}
|
|
@ -1,5 +1,6 @@
|
||||||
export * from './autofocus.directive'
|
export * from './autofocus.directive'
|
||||||
export * from './bytes.pipe'
|
export * from './bytes.pipe'
|
||||||
|
export * from './defer-loading.directive'
|
||||||
export * from './duration-formatter.pipe'
|
export * from './duration-formatter.pipe'
|
||||||
export * from './from-now.pipe'
|
export * from './from-now.pipe'
|
||||||
export * from './infinite-scroller.directive'
|
export * from './infinite-scroller.directive'
|
||||||
|
|
|
@ -21,6 +21,7 @@ import { AccountService } from './account'
|
||||||
import {
|
import {
|
||||||
AutofocusDirective,
|
AutofocusDirective,
|
||||||
BytesPipe,
|
BytesPipe,
|
||||||
|
DeferLoadingDirective,
|
||||||
DurationFormatterPipe,
|
DurationFormatterPipe,
|
||||||
FromNowPipe,
|
FromNowPipe,
|
||||||
InfiniteScrollerDirective,
|
InfiniteScrollerDirective,
|
||||||
|
@ -80,6 +81,7 @@ import { VideoChannelService } from './video-channel'
|
||||||
BytesPipe,
|
BytesPipe,
|
||||||
DurationFormatterPipe,
|
DurationFormatterPipe,
|
||||||
AutofocusDirective,
|
AutofocusDirective,
|
||||||
|
DeferLoadingDirective,
|
||||||
|
|
||||||
InfiniteScrollerDirective,
|
InfiniteScrollerDirective,
|
||||||
PeerTubeTemplateDirective,
|
PeerTubeTemplateDirective,
|
||||||
|
@ -139,6 +141,7 @@ import { VideoChannelService } from './video-channel'
|
||||||
NumberFormatterPipe,
|
NumberFormatterPipe,
|
||||||
DurationFormatterPipe,
|
DurationFormatterPipe,
|
||||||
AutofocusDirective,
|
AutofocusDirective,
|
||||||
|
DeferLoadingDirective,
|
||||||
|
|
||||||
InfiniteScrollerDirective,
|
InfiniteScrollerDirective,
|
||||||
PeerTubeTemplateDirective,
|
PeerTubeTemplateDirective,
|
||||||
|
|
Loading…
Reference in New Issue