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