client/src/app/+videos/video-list/trending/video-trending.component.ts

   1 import { Subscription } from 'rxjs'
   2 import { first, switchMap } from 'rxjs/operators'
   3 import { Component, ComponentFactoryResolver, Injector, OnDestroy, OnInit } from '@angular/core'
   4 import { ActivatedRoute, Params, Router } from '@angular/router'
   5 import { AuthService, LocalStorageService, Notifier, RedirectService, ScreenService, ServerService, UserService } from '@app/core'
   6 import { HooksService } from '@app/core/plugins/hooks.service'
   7 import { immutableAssign } from '@app/helpers'
   8 import { VideoService } from '@app/shared/shared-main'
   9 import { AbstractVideoList } from '@app/shared/shared-video-miniature'
  10 import { VideoSortField } from '@shared/models'
  11 import { VideoTrendingHeaderComponent } from './video-trending-header.component'
  12
  13 @Component({
  14   selector: 'my-videos-hot',
  15   styleUrls: [ '../../../shared/shared-video-miniature/abstract-video-list.scss' ],
  16   templateUrl: '../../../shared/shared-video-miniature/abstract-video-list.html'
  17 })
  18 export class VideoTrendingComponent extends AbstractVideoList implements OnInit, OnDestroy {
  19   HeaderComponent = VideoTrendingHeaderComponent
  20   titlePage: string
  21   defaultSort: VideoSortField = '-trending'
  22
  23   loadUserVideoPreferences = true
  24
  25   private algorithmChangeSub: Subscription
  26
  27   constructor (
  28     protected router: Router,
  29     protected serverService: ServerService,
  30     protected route: ActivatedRoute,
  31     protected notifier: Notifier,
  32     protected authService: AuthService,
  33     protected userService: UserService,
  34     protected screenService: ScreenService,
  35     protected storageService: LocalStorageService,
  36     protected cfr: ComponentFactoryResolver,
  37     private videoService: VideoService,
  38     private hooks: HooksService
  39   ) {
  40     super()
  41
  42     this.defaultSort = this.parseAlgorithm(RedirectService.DEFAULT_TRENDING_ALGORITHM)
  43
  44     this.headerComponentInjector = this.getInjector()
  45   }
  46
  47   ngOnInit () {
  48     super.ngOnInit()
  49
  50     this.generateSyndicationList()
  51
  52     // Subscribe to alg change after we loaded the data
  53     // The initial alg load is handled by the parent class
  54     this.algorithmChangeSub = this.onDataSubject
  55       .pipe(
  56         first(),
  57         switchMap(() => this.route.queryParams)
  58       ).subscribe(queryParams => {
  59         const oldSort = this.sort
  60
  61         this.loadPageRouteParams(queryParams)
  62
  63         if (oldSort !== this.sort) this.reloadVideos()
  64       }
  65     )
  66   }
  67
  68   ngOnDestroy () {
  69     super.ngOnDestroy()
  70     if (this.algorithmChangeSub) this.algorithmChangeSub.unsubscribe()
  71   }
  72
  73   getVideosObservable (page: number) {
  74     const newPagination = immutableAssign(this.pagination, { currentPage: page })
  75     const params = {
  76       videoPagination: newPagination,
  77       sort: this.sort,
  78       categoryOneOf: this.categoryOneOf,
  79       languageOneOf: this.languageOneOf,
  80       nsfwPolicy: this.nsfwPolicy,
  81       skipCount: true
  82     }
  83
  84     return this.hooks.wrapObsFun(
  85       this.videoService.getVideos.bind(this.videoService),
  86       params,
  87       'common',
  88       'filter:api.trending-videos.videos.list.params',
  89       'filter:api.trending-videos.videos.list.result'
  90     )
  91   }
  92
  93   generateSyndicationList () {
  94     this.syndicationItems = this.videoService.getVideoFeedUrls(this.sort, undefined, this.categoryOneOf)
  95   }
  96
  97   getInjector () {
  98     return Injector.create({
  99       providers: [{
 100         provide: 'data',
 101         useValue: {
 102           model: this.defaultSort
 103         }
 104       }]
 105     })
 106   }
 107
 108   protected loadPageRouteParams (queryParams: Params) {
 109     const algorithm = queryParams['alg'] || RedirectService.DEFAULT_TRENDING_ALGORITHM
 110
 111     this.sort = this.parseAlgorithm(algorithm)
 112   }
 113
 114   private parseAlgorithm (algorithm: string): VideoSortField {
 115     switch (algorithm) {
 116       case 'most-viewed':
 117         return '-trending'
 118       case 'most-liked':
 119         return '-likes'
 120       default:
 121         return '-' + algorithm as VideoSortField
 122     }
 123   }
 124 }