]> git.immae.eu Git - github/Chocobozzz/PeerTube.git/blobdiff - client/src/app/shared/shared-video-miniature/abstract-video-list.ts
Refactor menu css
[github/Chocobozzz/PeerTube.git] / client / src / app / shared / shared-video-miniature / abstract-video-list.ts
index da05e15fbd0295f87299f20d03d5e5dd2fa52859..f833805136c50eb7f9eb2f6bfd8585231bfe23e9 100644 (file)
@@ -1,7 +1,17 @@
-import { fromEvent, Observable, Subject, Subscription } from 'rxjs'
+import { fromEvent, Observable, ReplaySubject, Subject, Subscription } from 'rxjs'
 import { debounceTime, switchMap, tap } from 'rxjs/operators'
-import { Directive, OnDestroy, OnInit } from '@angular/core'
-import { ActivatedRoute, Router } from '@angular/router'
+import {
+  AfterContentInit,
+  ComponentFactoryResolver,
+  Directive,
+  Injector,
+  OnDestroy,
+  OnInit,
+  Type,
+  ViewChild,
+  ViewContainerRef
+} from '@angular/core'
+import { ActivatedRoute, Params, Router } from '@angular/router'
 import {
   AuthService,
   ComponentPaginationLight,
@@ -15,10 +25,11 @@ import {
 import { DisableForReuseHook } from '@app/core/routing/disable-for-reuse-hook'
 import { GlobalIconName } from '@app/shared/shared-icons'
 import { isLastMonth, isLastWeek, isThisMonth, isToday, isYesterday } from '@shared/core-utils/miscs/date'
-import { ServerConfig, VideoSortField } from '@shared/models'
+import { ServerConfig, UserRight, VideoFilter, VideoSortField } from '@shared/models'
 import { NSFWPolicyType } from '@shared/models/videos/nsfw-policy.type'
 import { Syndication, Video } from '../shared-main'
-import { MiniatureDisplayOptions, OwnerDisplayType } from './video-miniature.component'
+import { GenericHeaderComponent, VideoListHeaderComponent } from './video-list-header.component'
+import { MiniatureDisplayOptions } from './video-miniature.component'
 
 enum GroupDate {
   UNKNOWN = 0,
@@ -32,7 +43,12 @@ enum GroupDate {
 
 @Directive()
 // tslint:disable-next-line: directive-class-suffix
-export abstract class AbstractVideoList implements OnInit, OnDestroy, DisableForReuseHook {
+export abstract class AbstractVideoList implements OnInit, OnDestroy, AfterContentInit, DisableForReuseHook {
+  @ViewChild('videoListHeader', { static: true, read: ViewContainerRef }) videoListHeader: ViewContainerRef
+
+  HeaderComponent: Type<GenericHeaderComponent> = VideoListHeaderComponent
+  headerComponentInjector: Injector
+
   pagination: ComponentPaginationLight = {
     currentPage: 1,
     itemsPerPage: 25
@@ -47,8 +63,8 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy, DisableFor
   syndicationItems: Syndication[] = []
 
   loadOnInit = true
-  useUserVideoPreferences = false
-  ownerDisplayType: OwnerDisplayType = 'account'
+  loadUserVideoPreferences = false
+
   displayModerationBlock = false
   titleTooltip: string
   displayVideoActions = true
@@ -70,15 +86,20 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy, DisableFor
   }
 
   actions: {
-    routerLink: string
     iconName: GlobalIconName
     label: string
+    justIcon?: boolean
+    routerLink?: string
+    href?: string
+    click?: (e: Event) => void
   }[] = []
 
   onDataSubject = new Subject<any[]>()
 
   userMiniature: User
 
+  protected onUserLoadedSubject = new ReplaySubject<void>(1)
+
   protected serverConfig: ServerConfig
 
   protected abstract notifier: Notifier
@@ -89,6 +110,7 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy, DisableFor
   protected abstract screenService: ScreenService
   protected abstract storageService: LocalStorageService
   protected abstract router: Router
+  protected abstract cfr: ComponentFactoryResolver
   abstract titlePage: string
 
   private resizeSubscription: Subscription
@@ -129,10 +151,11 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy, DisableFor
     this.calcPageSizes()
 
     const loadUserObservable = this.loadUserAndSettings()
+    loadUserObservable.subscribe(() => {
+      this.onUserLoadedSubject.next()
 
-    if (this.loadOnInit === true) {
-      loadUserObservable.subscribe(() => this.loadMoreVideos())
-    }
+      if (this.loadOnInit === true) this.loadMoreVideos()
+    })
 
     this.userService.listenAnonymousUpdate()
       .pipe(switchMap(() => this.loadUserAndSettings()))
@@ -150,6 +173,13 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy, DisableFor
     if (this.resizeSubscription) this.resizeSubscription.unsubscribe()
   }
 
+  ngAfterContentInit () {
+    if (this.videoListHeader) {
+      // some components don't use the header: they use their own template, like my-history.component.html
+      this.setHeader.apply(this, [ this.HeaderComponent, this.headerComponentInjector ])
+    }
+  }
+
   disableForReuse () {
     this.disabled = true
   }
@@ -168,6 +198,7 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy, DisableFor
     // No more results
     if (this.lastQueryLength !== undefined && this.lastQueryLength < this.pagination.itemsPerPage) return
 
+    console.log('near of bottom')
     this.pagination.currentPage += 1
 
     this.setScrollRouteParams()
@@ -205,10 +236,6 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy, DisableFor
     this.loadMoreVideos(true)
   }
 
-  toggleModerationDisplay () {
-    throw new Error('toggleModerationDisplay is not implemented')
-  }
-
   removeVideoFromArray (video: Video) {
     this.videos = this.videos.filter(v => v.id !== video.id)
   }
@@ -268,13 +295,71 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy, DisableFor
     return this.groupedDateLabels[this.groupedDates[video.id]]
   }
 
+  toggleModerationDisplay () {
+    throw new Error('toggleModerationDisplay ' + $localize`function is not implemented`)
+  }
+
+  setHeader (
+    t: Type<any> = this.HeaderComponent,
+    i: Injector = this.headerComponentInjector
+  ) {
+    const injector = i || Injector.create({
+      providers: [{
+        provide: 'data',
+        useValue: {
+          titlePage: this.titlePage,
+          titleTooltip: this.titleTooltip
+        }
+      }]
+    })
+    const viewContainerRef = this.videoListHeader
+    viewContainerRef.clear()
+
+    const componentFactory = this.cfr.resolveComponentFactory(t)
+    viewContainerRef.createComponent(componentFactory, 0, injector)
+  }
+
+  // Can be redefined by child
+  displayAsRow () {
+    return false
+  }
+
   // On videos hook for children that want to do something
   protected onMoreVideos () { /* empty */ }
 
-  protected loadRouteParams (routeParams: { [ key: string ]: any }) {
-    this.sort = routeParams[ 'sort' ] as VideoSortField || this.defaultSort
-    this.categoryOneOf = routeParams[ 'categoryOneOf' ]
-    this.angularState = routeParams[ 'a-state' ]
+  protected load () { /* empty */ }
+
+  // Hook if the page has custom route params
+  protected loadPageRouteParams (_queryParams: Params) { /* empty */ }
+
+  protected loadRouteParams (queryParams: Params) {
+    this.sort = queryParams[ 'sort' ] as VideoSortField || this.defaultSort
+    this.categoryOneOf = queryParams[ 'categoryOneOf' ]
+    this.angularState = queryParams[ 'a-state' ]
+
+    this.loadPageRouteParams(queryParams)
+  }
+
+  protected buildLocalFilter (existing: VideoFilter, base: VideoFilter) {
+    if (base === 'local') {
+      return existing === 'local'
+        ? 'all-local' as 'all-local'
+        : 'local' as 'local'
+    }
+
+    return existing === 'all'
+      ? null
+      : 'all'
+  }
+
+  protected enableAllFilterIfPossible () {
+    if (!this.authService.isLoggedIn()) return
+
+    this.authService.userInformationLoaded
+      .subscribe(() => {
+        const user = this.authService.getUser()
+        this.displayModerationBlock = user.hasRight(UserRight.SEE_ALL_VIDEOS)
+      })
   }
 
   private calcPageSizes () {
@@ -294,7 +379,7 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy, DisableFor
       categoryOneOf: this.categoryOneOf
     }
 
-    let path = this.router.url
+    let path = this.getUrlWithoutParams()
     if (!path || path === '/') path = this.serverConfig.instance.defaultClientRoute
 
     this.router.navigate([ path ], { queryParams, replaceUrl: true, queryParamsHandling: 'merge' })
@@ -305,10 +390,17 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy, DisableFor
       .pipe(tap(user => {
         this.userMiniature = user
 
-        if (!this.useUserVideoPreferences) return
+        if (!this.loadUserVideoPreferences) return
 
         this.languageOneOf = user.videoLanguages
         this.nsfwPolicy = user.nsfwPolicy
       }))
   }
+
+  private getUrlWithoutParams () {
+    const urlTree = this.router.parseUrl(this.router.url)
+    urlTree.queryParams = {}
+
+    return urlTree.toString()
+  }
 }