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 redirectService: RedirectService,
  39     private hooks: HooksService
  40   ) {
  41     super()
  42
  43     this.defaultSort = this.parseAlgorithm(this.redirectService.getDefaultTrendingAlgorithm())
  44
  45     this.headerComponentInjector = this.getInjector()
  46   }
  47
  48   ngOnInit () {
  49     super.ngOnInit()
  50
  51     this.generateSyndicationList()
  52
  53     // Subscribe to alg change after we loaded the data
  54     // The initial alg load is handled by the parent class
  55     this.algorithmChangeSub = this.onDataSubject
  56       .pipe(
  57         first(),
  58         switchMap(() => this.route.queryParams)
  59       ).subscribe(queryParams => {
  60         const oldSort = this.sort
  61
  62         this.loadPageRouteParams(queryParams)
  63
  64         if (oldSort !== this.sort) this.reloadVideos()
  65       }
  66       )
  67   }
  68
  69   ngOnDestroy () {
  70     super.ngOnDestroy()
  71     if (this.algorithmChangeSub) this.algorithmChangeSub.unsubscribe()
  72   }
  73
  74   getVideosObservable (page: number) {
  75     const newPagination = immutableAssign(this.pagination, { currentPage: page })
  76     const params = {
  77       videoPagination: newPagination,
  78       sort: this.sort,
  79       categoryOneOf: this.categoryOneOf,
  80       languageOneOf: this.languageOneOf,
  81       nsfwPolicy: this.nsfwPolicy,
  82       skipCount: true
  83     }
  84
  85     return this.hooks.wrapObsFun(
  86       this.videoService.getVideos.bind(this.videoService),
  87       params,
  88       'common',
  89       'filter:api.trending-videos.videos.list.params',
  90       'filter:api.trending-videos.videos.list.result'
  91     )
  92   }
  93
  94   generateSyndicationList () {
  95     this.syndicationItems = this.videoService.getVideoFeedUrls(this.sort, undefined, this.categoryOneOf)
  96   }
  97
  98   getInjector () {
  99     return Injector.create({
 100       providers: [ {
 101         provide: 'data',
 102         useValue: {
 103           model: this.defaultSort
 104         }
 105       } ]
 106     })
 107   }
 108
 109   protected loadPageRouteParams (queryParams: Params) {
 110     const algorithm = queryParams['alg'] || this.redirectService.getDefaultTrendingAlgorithm()
 111
 112     this.sort = this.parseAlgorithm(algorithm)
 113   }
 114
 115   private parseAlgorithm (algorithm: string): VideoSortField {
 116     switch (algorithm) {
 117       case 'most-viewed':
 118         return '-trending'
 119
 120       case 'most-liked':
 121         return '-likes'
 122
 123       default:
 124         return '-' + algorithm as VideoSortField
 125     }
 126   }
 127 }