client/src/app/+videos/+video-watch/shared/recommendations/recommended-videos.component.ts

   1 import { Observable } from 'rxjs'
   2 import { Component, EventEmitter, Input, OnChanges, OnInit, Output } from '@angular/core'
   3 import { AuthService, Notifier, User, UserService } from '@app/core'
   4 import { Video } from '@app/shared/shared-main'
   5 import { MiniatureDisplayOptions } from '@app/shared/shared-video-miniature'
   6 import { VideoPlaylist } from '@app/shared/shared-video-playlist'
   7 import { RecommendationInfo } from './recommendation-info.model'
   8 import { RecommendedVideosStore } from './recommended-videos.store'
   9
  10 @Component({
  11   selector: 'my-recommended-videos',
  12   templateUrl: './recommended-videos.component.html',
  13   styleUrls: [ './recommended-videos.component.scss' ]
  14 })
  15 export class RecommendedVideosComponent implements OnInit, OnChanges {
  16   @Input() inputRecommendation: RecommendationInfo
  17   @Input() playlist: VideoPlaylist
  18   @Input() displayAsRow: boolean
  19
  20   @Output() gotRecommendations = new EventEmitter<Video[]>()
  21
  22   autoPlayNextVideo: boolean
  23   autoPlayNextVideoTooltip: string
  24
  25   displayOptions: MiniatureDisplayOptions = {
  26     date: true,
  27     views: true,
  28     by: true,
  29     avatar: true
  30   }
  31
  32   userMiniature: User
  33
  34   readonly hasVideos$: Observable<boolean>
  35   readonly videos$: Observable<Video[]>
  36
  37   constructor (
  38     private userService: UserService,
  39     private authService: AuthService,
  40     private notifier: Notifier,
  41     private store: RecommendedVideosStore
  42   ) {
  43     this.videos$ = this.store.recommendations$
  44     this.hasVideos$ = this.store.hasRecommendations$
  45     this.videos$.subscribe(videos => this.gotRecommendations.emit(videos))
  46
  47     this.userService.getAnonymousOrLoggedUser()
  48       .subscribe(user => this.autoPlayNextVideo = user.autoPlayNextVideo)
  49
  50     this.autoPlayNextVideoTooltip = $localize`When active, the next video is automatically played after the current one.`
  51   }
  52
  53   ngOnInit () {
  54     this.userService.getAnonymousOrLoggedUser()
  55       .subscribe(user => this.userMiniature = user)
  56   }
  57
  58   ngOnChanges () {
  59     if (this.inputRecommendation) {
  60       this.store.requestNewRecommendations(this.inputRecommendation)
  61     }
  62   }
  63
  64   onVideoRemoved () {
  65     this.store.requestNewRecommendations(this.inputRecommendation)
  66   }
  67
  68   switchAutoPlayNextVideo () {
  69     const details = { autoPlayNextVideo: this.autoPlayNextVideo }
  70
  71     if (this.authService.isLoggedIn()) {
  72       this.userService.updateMyProfile(details)
  73         .subscribe({
  74           next: () => {
  75             this.authService.refreshUserInformation()
  76           },
  77
  78           error: err => this.notifier.error(err.message)
  79         })
  80     } else {
  81       this.userService.updateMyAnonymousProfile(details)
  82     }
  83   }
  84 }