Reorganize client shared modules

5 files changed, 170 insertions, 0 deletions

diff --git a/client/src/app/shared/shared-main/angular/from-now.pipe.ts b/client/src/app/shared/shared-main/angular/from-now.pipe.ts
new file mode 100644
index 000000000..9851468ee
--- /dev/null
+++ b/client/src/app/shared/shared-main/angular/from-now.pipe.ts
@@ -0,0 +1,39 @@
+import { Pipe, PipeTransform } from '@angular/core'
+import { I18n } from '@ngx-translate/i18n-polyfill'
+
+// Thanks: https://stackoverflow.com/questions/3177836/how-to-format-time-since-xxx-e-g-4-minutes-ago-similar-to-stack-exchange-site
+@Pipe({ name: 'myFromNow' })
+export class FromNowPipe implements PipeTransform {
+
+  constructor (private i18n: I18n) { }
+
+  transform (arg: number | Date | string) {
+    const argDate = new Date(arg)
+    const seconds = Math.floor((Date.now() - argDate.getTime()) / 1000)
+
+    let interval = Math.floor(seconds / 31536000)
+    if (interval > 1) return this.i18n('{{interval}} years ago', { interval })
+    if (interval === 1) return this.i18n('{{interval}} year ago', { interval })
+
+    interval = Math.floor(seconds / 2592000)
+    if (interval > 1) return this.i18n('{{interval}} months ago', { interval })
+    if (interval === 1) return this.i18n('{{interval}} month ago', { interval })
+
+    interval = Math.floor(seconds / 604800)
+    if (interval > 1) return this.i18n('{{interval}} weeks ago', { interval })
+    if (interval === 1) return this.i18n('{{interval}} week ago', { interval })
+
+    interval = Math.floor(seconds / 86400)
+    if (interval > 1) return this.i18n('{{interval}} days ago', { interval })
+    if (interval === 1) return this.i18n('{{interval}} day ago', { interval })
+
+    interval = Math.floor(seconds / 3600)
+    if (interval > 1) return this.i18n('{{interval}} hours ago', { interval })
+    if (interval === 1) return this.i18n('{{interval}} hour ago', { interval })
+
+    interval = Math.floor(seconds / 60)
+    if (interval >= 1) return this.i18n('{{interval}} min ago', { interval })
+
+    return this.i18n('just now')
+  }
+}
diff --git a/client/src/app/shared/shared-main/angular/index.ts b/client/src/app/shared/shared-main/angular/index.ts
new file mode 100644
index 000000000..3b072fb84
--- /dev/null
+++ b/client/src/app/shared/shared-main/angular/index.ts
@@ -0,0 +1,4 @@
+export * from './from-now.pipe'
+export * from './infinite-scroller.directive'
+export * from './number-formatter.pipe'
+export * from './peertube-template.directive'
diff --git a/client/src/app/shared/shared-main/angular/infinite-scroller.directive.ts b/client/src/app/shared/shared-main/angular/infinite-scroller.directive.ts
new file mode 100644
index 000000000..f09c3d1fc
--- /dev/null
+++ b/client/src/app/shared/shared-main/angular/infinite-scroller.directive.ts
@@ -0,0 +1,96 @@
+import { distinctUntilChanged, filter, map, share, startWith, throttleTime } from 'rxjs/operators'
+import { AfterContentChecked, Directive, ElementRef, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core'
+import { fromEvent, Observable, Subscription } from 'rxjs'
+
+@Directive({
+  selector: '[myInfiniteScroller]'
+})
+export class InfiniteScrollerDirective implements OnInit, OnDestroy, AfterContentChecked {
+  @Input() percentLimit = 70
+  @Input() autoInit = false
+  @Input() onItself = false
+  @Input() dataObservable: Observable<any[]>
+
+  @Output() nearOfBottom = new EventEmitter<void>()
+
+  private decimalLimit = 0
+  private lastCurrentBottom = -1
+  private scrollDownSub: Subscription
+  private container: HTMLElement
+
+  private checkScroll = false
+
+  constructor (private el: ElementRef) {
+    this.decimalLimit = this.percentLimit / 100
+  }
+
+  ngAfterContentChecked () {
+    if (this.checkScroll) {
+      this.checkScroll = false
+
+      console.log('Checking if the initial state has a scroll.')
+
+      if (this.hasScroll() === false) this.nearOfBottom.emit()
+    }
+  }
+
+  ngOnInit () {
+    if (this.autoInit === true) return this.initialize()
+  }
+
+  ngOnDestroy () {
+    if (this.scrollDownSub) this.scrollDownSub.unsubscribe()
+  }
+
+  initialize () {
+    this.container = this.onItself
+      ? this.el.nativeElement
+      : document.documentElement
+
+    // Emit the last value
+    const throttleOptions = { leading: true, trailing: true }
+
+    const scrollableElement = this.onItself ? this.container : window
+    const scrollObservable = fromEvent(scrollableElement, 'scroll')
+      .pipe(
+        startWith(true),
+        throttleTime(200, undefined, throttleOptions),
+        map(() => this.getScrollInfo()),
+        distinctUntilChanged((o1, o2) => o1.current === o2.current),
+        share()
+      )
+
+    // Scroll Down
+    this.scrollDownSub = scrollObservable
+      .pipe(
+        filter(({ current }) => this.isScrollingDown(current)),
+        filter(({ current, maximumScroll }) => (current / maximumScroll) > this.decimalLimit)
+      )
+      .subscribe(() => this.nearOfBottom.emit())
+
+    if (this.dataObservable) {
+      this.dataObservable
+          .pipe(filter(d => d.length !== 0))
+          .subscribe(() => this.checkScroll = true)
+    }
+  }
+
+  private getScrollInfo () {
+    return { current: this.container.scrollTop, maximumScroll: this.getMaximumScroll() }
+  }
+
+  private getMaximumScroll () {
+    return this.container.scrollHeight - window.innerHeight
+  }
+
+  private hasScroll () {
+    return this.getMaximumScroll() > 0
+  }
+
+  private isScrollingDown (current: number) {
+    const result = this.lastCurrentBottom < current
+
+    this.lastCurrentBottom = current
+    return result
+  }
+}
diff --git a/client/src/app/shared/shared-main/angular/number-formatter.pipe.ts b/client/src/app/shared/shared-main/angular/number-formatter.pipe.ts
new file mode 100644
index 000000000..8a0756a36
--- /dev/null
+++ b/client/src/app/shared/shared-main/angular/number-formatter.pipe.ts
@@ -0,0 +1,19 @@
+import { Pipe, PipeTransform } from '@angular/core'
+
+// Thanks: https://github.com/danrevah/ngx-pipes/blob/master/src/pipes/math/bytes.ts
+
+@Pipe({ name: 'myNumberFormatter' })
+export class NumberFormatterPipe implements PipeTransform {
+  private dictionary: Array<{max: number, type: string}> = [
+    { max: 1000, type: '' },
+    { max: 1000000, type: 'K' },
+    { max: 1000000000, type: 'M' }
+  ]
+
+  transform (value: number) {
+    const format = this.dictionary.find(d => value < d.max) || this.dictionary[this.dictionary.length - 1]
+    const calc = Math.floor(value / (format.max / 1000))
+
+    return `${calc}${format.type}`
+  }
+}
diff --git a/client/src/app/shared/shared-main/angular/peertube-template.directive.ts b/client/src/app/shared/shared-main/angular/peertube-template.directive.ts
new file mode 100644
index 000000000..e04c25d9a
--- /dev/null
+++ b/client/src/app/shared/shared-main/angular/peertube-template.directive.ts
@@ -0,0 +1,12 @@
+import { Directive, Input, TemplateRef } from '@angular/core'
+
+@Directive({
+  selector: '[ptTemplate]'
+})
+export class PeerTubeTemplateDirective <T extends string> {
+  @Input('ptTemplate') name: T
+
+  constructor (public template: TemplateRef<any>) {
+    // empty
+  }
+}