1 import * as debug from 'debug'
14 } from '@angular/core'
16 const logger = debug('peertube:main:DeferLoadingDirective')
19 selector: '[myDeferLoading]'
21 export class DeferLoadingDirective implements AfterViewInit, OnDestroy {
22 @ContentChild(TemplateRef) template: TemplateRef<any>
24 @Output() loaded: EventEmitter<any> = new EventEmitter()
26 view: EmbeddedViewRef<any>
28 private observer: IntersectionObserver
31 private el: ElementRef,
32 private viewContainer: ViewContainerRef,
33 private cd: ChangeDetectorRef
37 if (this.hasIncompatibleBrowser()) {
41 this.observer = new IntersectionObserver(entries => {
42 const entry = entries[0]
43 if (!entry.isIntersecting || entry.target !== this.el.nativeElement) return
45 this.observer.unobserve(this.el.nativeElement)
47 }, { threshold: 0.1 })
49 this.observer.observe(this.el.nativeElement)
53 if (this.isLoaded()) return
55 logger('Loading component')
57 this.viewContainer.clear()
58 this.view = this.viewContainer.createEmbeddedView(this.template, {}, 0)
60 this.cd.detectChanges()
64 return this.view != null
70 if (this.observer) this.observer.disconnect()
73 private hasIncompatibleBrowser () {
74 return !('IntersectionObserver' in window)