client/src/app/shared/shared-video-miniature/abstract-video-list.ts

   1 import { fromEvent, Observable, ReplaySubject, Subject, Subscription } from 'rxjs'
   2 import { debounceTime, switchMap, tap } from 'rxjs/operators'
   3 import {
   4   AfterContentInit,
   5   ComponentFactoryResolver,
   6   Directive,
   7   Injector,
   8   OnDestroy,
   9   OnInit,
  10   Type,
  11   ViewChild,
  12   ViewContainerRef
  13 } from '@angular/core'
  14 import { ActivatedRoute, Params, Router } from '@angular/router'
  15 import {
  16   AuthService,
  17   ComponentPaginationLight,
  18   LocalStorageService,
  19   Notifier,
  20   ScreenService,
  21   ServerService,
  22   User,
  23   UserService
  24 } from '@app/core'
  25 import { DisableForReuseHook } from '@app/core/routing/disable-for-reuse-hook'
  26 import { GlobalIconName } from '@app/shared/shared-icons'
  27 import { isLastMonth, isLastWeek, isThisMonth, isToday, isYesterday } from '@shared/core-utils/miscs/date'
  28 import { ServerConfig, UserRight, VideoFilter, VideoSortField } from '@shared/models'
  29 import { NSFWPolicyType } from '@shared/models/videos/nsfw-policy.type'
  30 import { Syndication, Video } from '../shared-main'
  31 import { MiniatureDisplayOptions, OwnerDisplayType } from './video-miniature.component'
  32 import { GenericHeaderComponent, VideoListHeaderComponent } from './video-list-header.component'
  33
  34 enum GroupDate {
  35   UNKNOWN = 0,
  36   TODAY = 1,
  37   YESTERDAY = 2,
  38   THIS_WEEK = 3,
  39   THIS_MONTH = 4,
  40   LAST_MONTH = 5,
  41   OLDER = 6
  42 }
  43
  44 @Directive()
  45 // tslint:disable-next-line: directive-class-suffix
  46 export abstract class AbstractVideoList implements OnInit, OnDestroy, AfterContentInit, DisableForReuseHook {
  47   @ViewChild('videoListHeader', { static: true, read: ViewContainerRef }) videoListHeader: ViewContainerRef
  48
  49   HeaderComponent: Type<GenericHeaderComponent> = VideoListHeaderComponent
  50   headerComponentInjector: Injector
  51
  52   pagination: ComponentPaginationLight = {
  53     currentPage: 1,
  54     itemsPerPage: 25
  55   }
  56   sort: VideoSortField = '-publishedAt'
  57
  58   categoryOneOf?: number[]
  59   languageOneOf?: string[]
  60   nsfwPolicy?: NSFWPolicyType
  61   defaultSort: VideoSortField = '-publishedAt'
  62
  63   syndicationItems: Syndication[] = []
  64
  65   loadOnInit = true
  66   loadUserVideoPreferences = false
  67
  68   ownerDisplayType: OwnerDisplayType = 'auto'
  69   displayModerationBlock = false
  70   titleTooltip: string
  71   displayVideoActions = true
  72   groupByDate = false
  73
  74   videos: Video[] = []
  75   hasDoneFirstQuery = false
  76   disabled = false
  77
  78   displayOptions: MiniatureDisplayOptions = {
  79     date: true,
  80     views: true,
  81     by: true,
  82     avatar: false,
  83     privacyLabel: true,
  84     privacyText: false,
  85     state: false,
  86     blacklistInfo: false
  87   }
  88
  89   actions: {
  90     iconName: GlobalIconName
  91     label: string
  92     justIcon?: boolean
  93     routerLink?: string
  94     href?: string
  95     click?: (e: Event) => void
  96   }[] = []
  97
  98   onDataSubject = new Subject<any[]>()
  99
 100   userMiniature: User
 101
 102   protected onUserLoadedSubject = new ReplaySubject<void>(1)
 103
 104   protected serverConfig: ServerConfig
 105
 106   protected abstract notifier: Notifier
 107   protected abstract authService: AuthService
 108   protected abstract userService: UserService
 109   protected abstract route: ActivatedRoute
 110   protected abstract serverService: ServerService
 111   protected abstract screenService: ScreenService
 112   protected abstract storageService: LocalStorageService
 113   protected abstract router: Router
 114   protected abstract cfr: ComponentFactoryResolver
 115   abstract titlePage: string
 116
 117   private resizeSubscription: Subscription
 118   private angularState: number
 119
 120   private groupedDateLabels: { [id in GroupDate]: string }
 121   private groupedDates: { [id: number]: GroupDate } = {}
 122
 123   private lastQueryLength: number
 124
 125   abstract getVideosObservable (page: number): Observable<{ data: Video[] }>
 126
 127   abstract generateSyndicationList (): void
 128
 129   ngOnInit () {
 130     this.serverConfig = this.serverService.getTmpConfig()
 131     this.serverService.getConfig()
 132       .subscribe(config => this.serverConfig = config)
 133
 134     this.groupedDateLabels = {
 135       [GroupDate.UNKNOWN]: null,
 136       [GroupDate.TODAY]: $localize`Today`,
 137       [GroupDate.YESTERDAY]: $localize`Yesterday`,
 138       [GroupDate.THIS_WEEK]: $localize`This week`,
 139       [GroupDate.THIS_MONTH]: $localize`This month`,
 140       [GroupDate.LAST_MONTH]: $localize`Last month`,
 141       [GroupDate.OLDER]: $localize`Older`
 142     }
 143
 144     // Subscribe to route changes
 145     const routeParams = this.route.snapshot.queryParams
 146     this.loadRouteParams(routeParams)
 147
 148     this.resizeSubscription = fromEvent(window, 'resize')
 149       .pipe(debounceTime(500))
 150       .subscribe(() => this.calcPageSizes())
 151
 152     this.calcPageSizes()
 153
 154     const loadUserObservable = this.loadUserAndSettings()
 155     loadUserObservable.subscribe(() => {
 156       this.onUserLoadedSubject.next()
 157
 158       if (this.loadOnInit === true) this.loadMoreVideos()
 159     })
 160
 161     this.userService.listenAnonymousUpdate()
 162       .pipe(switchMap(() => this.loadUserAndSettings()))
 163       .subscribe(() => {
 164         if (this.hasDoneFirstQuery) this.reloadVideos()
 165       })
 166
 167     // Display avatar in mobile view
 168     if (this.screenService.isInMobileView()) {
 169       this.displayOptions.avatar = true
 170     }
 171   }
 172
 173   ngOnDestroy () {
 174     if (this.resizeSubscription) this.resizeSubscription.unsubscribe()
 175   }
 176
 177   ngAfterContentInit () {
 178     if (this.videoListHeader) {
 179       // some components don't use the header: they use their own template, like my-history.component.html
 180       this.setHeader.apply(this, [ this.HeaderComponent, this.headerComponentInjector ])
 181     }
 182   }
 183
 184   disableForReuse () {
 185     this.disabled = true
 186   }
 187
 188   enabledForReuse () {
 189     this.disabled = false
 190   }
 191
 192   videoById (index: number, video: Video) {
 193     return video.id
 194   }
 195
 196   onNearOfBottom () {
 197     if (this.disabled) return
 198
 199     // No more results
 200     if (this.lastQueryLength !== undefined && this.lastQueryLength < this.pagination.itemsPerPage) return
 201
 202     console.log('near of bottom')
 203     this.pagination.currentPage += 1
 204
 205     this.setScrollRouteParams()
 206
 207     this.loadMoreVideos()
 208   }
 209
 210   loadMoreVideos (reset = false) {
 211     this.getVideosObservable(this.pagination.currentPage).subscribe(
 212       ({ data }) => {
 213         this.hasDoneFirstQuery = true
 214         this.lastQueryLength = data.length
 215
 216         if (reset) this.videos = []
 217         this.videos = this.videos.concat(data)
 218
 219         if (this.groupByDate) this.buildGroupedDateLabels()
 220
 221         this.onMoreVideos()
 222
 223         this.onDataSubject.next(data)
 224       },
 225
 226       error => {
 227         const message = $localize`Cannot load more videos. Try again later.`
 228
 229         console.error(message, { error })
 230         this.notifier.error(message)
 231       }
 232     )
 233   }
 234
 235   reloadVideos () {
 236     this.pagination.currentPage = 1
 237     this.loadMoreVideos(true)
 238   }
 239
 240   removeVideoFromArray (video: Video) {
 241     this.videos = this.videos.filter(v => v.id !== video.id)
 242   }
 243
 244   buildGroupedDateLabels () {
 245     let currentGroupedDate: GroupDate = GroupDate.UNKNOWN
 246
 247     const periods = [
 248       {
 249         value: GroupDate.TODAY,
 250         validator: (d: Date) => isToday(d)
 251       },
 252       {
 253         value: GroupDate.YESTERDAY,
 254         validator: (d: Date) => isYesterday(d)
 255       },
 256       {
 257         value: GroupDate.THIS_WEEK,
 258         validator: (d: Date) => isLastWeek(d)
 259       },
 260       {
 261         value: GroupDate.THIS_MONTH,
 262         validator: (d: Date) => isThisMonth(d)
 263       },
 264       {
 265         value: GroupDate.LAST_MONTH,
 266         validator: (d: Date) => isLastMonth(d)
 267       },
 268       {
 269         value: GroupDate.OLDER,
 270         validator: () => true
 271       }
 272     ]
 273
 274     for (const video of this.videos) {
 275       const publishedDate = video.publishedAt
 276
 277       for (let i = 0; i < periods.length; i++) {
 278         const period = periods[i]
 279
 280         if (currentGroupedDate <= period.value && period.validator(publishedDate)) {
 281
 282           if (currentGroupedDate !== period.value) {
 283             currentGroupedDate = period.value
 284             this.groupedDates[ video.id ] = currentGroupedDate
 285           }
 286
 287           break
 288         }
 289       }
 290     }
 291   }
 292
 293   getCurrentGroupedDateLabel (video: Video) {
 294     if (this.groupByDate === false) return undefined
 295
 296     return this.groupedDateLabels[this.groupedDates[video.id]]
 297   }
 298
 299   toggleModerationDisplay () {
 300     throw new Error('toggleModerationDisplay ' + $localize`function is not implemented`)
 301   }
 302
 303   setHeader (
 304     t: Type<any> = this.HeaderComponent,
 305     i: Injector = this.headerComponentInjector
 306   ) {
 307     const injector = i || Injector.create({
 308       providers: [{
 309         provide: 'data',
 310         useValue: {
 311           titlePage: this.titlePage,
 312           titleTooltip: this.titleTooltip
 313         }
 314       }]
 315     })
 316     const viewContainerRef = this.videoListHeader
 317     viewContainerRef.clear()
 318
 319     const componentFactory = this.cfr.resolveComponentFactory(t)
 320     viewContainerRef.createComponent(componentFactory, 0, injector)
 321   }
 322
 323   // On videos hook for children that want to do something
 324   protected onMoreVideos () { /* empty */ }
 325
 326   protected load () { /* empty */ }
 327
 328   // Hook if the page has custom route params
 329   protected loadPageRouteParams (_queryParams: Params) { /* empty */ }
 330
 331   protected loadRouteParams (queryParams: Params) {
 332     this.sort = queryParams[ 'sort' ] as VideoSortField || this.defaultSort
 333     this.categoryOneOf = queryParams[ 'categoryOneOf' ]
 334     this.angularState = queryParams[ 'a-state' ]
 335
 336     this.loadPageRouteParams(queryParams)
 337   }
 338
 339   protected buildLocalFilter (existing: VideoFilter, base: VideoFilter) {
 340     if (base === 'local') {
 341       return existing === 'local'
 342         ? 'all-local' as 'all-local'
 343         : 'local' as 'local'
 344     }
 345
 346     return existing === 'all'
 347       ? null
 348       : 'all'
 349   }
 350
 351   protected enableAllFilterIfPossible () {
 352     if (!this.authService.isLoggedIn()) return
 353
 354     this.authService.userInformationLoaded
 355       .subscribe(() => {
 356         const user = this.authService.getUser()
 357         this.displayModerationBlock = user.hasRight(UserRight.SEE_ALL_VIDEOS)
 358       })
 359   }
 360
 361   private calcPageSizes () {
 362     if (this.screenService.isInMobileView()) {
 363       this.pagination.itemsPerPage = 5
 364     }
 365   }
 366
 367   private setScrollRouteParams () {
 368     // Already set
 369     if (this.angularState) return
 370
 371     this.angularState = 42
 372
 373     const queryParams = {
 374       'a-state': this.angularState,
 375       categoryOneOf: this.categoryOneOf
 376     }
 377
 378     let path = this.getUrlWithoutParams()
 379     if (!path || path === '/') path = this.serverConfig.instance.defaultClientRoute
 380
 381     this.router.navigate([ path ], { queryParams, replaceUrl: true, queryParamsHandling: 'merge' })
 382   }
 383
 384   private loadUserAndSettings () {
 385     return this.userService.getAnonymousOrLoggedUser()
 386       .pipe(tap(user => {
 387         this.userMiniature = user
 388
 389         if (!this.loadUserVideoPreferences) return
 390
 391         this.languageOneOf = user.videoLanguages
 392         this.nsfwPolicy = user.nsfwPolicy
 393       }))
 394   }
 395
 396   private getUrlWithoutParams () {
 397     const urlTree = this.router.parseUrl(this.router.url)
 398     urlTree.queryParams = {}
 399
 400     return urlTree.toString()
 401   }
 402 }