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

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