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 { I18n } from '@ngx-translate/i18n-polyfill'
   8 import { RecommendationInfo } from './recommendation-info.model'
   9 import { RecommendedVideosStore } from './recommended-videos.store'
  10 import { UserLocalStorageKeys } from '@root-helpers/users'
  11
  12 @Component({
  13   selector: 'my-recommended-videos',
  14   templateUrl: './recommended-videos.component.html',
  15   styleUrls: [ './recommended-videos.component.scss' ]
  16 })
  17 export class RecommendedVideosComponent implements OnInit, OnChanges {
  18   @Input() inputRecommendation: RecommendationInfo
  19   @Input() playlist: VideoPlaylist
  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 i18n: I18n,
  42     private store: RecommendedVideosStore,
  43     private sessionStorageService: SessionStorageService
  44   ) {
  45     this.videos$ = this.store.recommendations$
  46     this.hasVideos$ = this.store.hasRecommendations$
  47     this.videos$.subscribe(videos => this.gotRecommendations.emit(videos))
  48
  49     if (this.authService.isLoggedIn()) {
  50       this.autoPlayNextVideo = this.authService.getUser().autoPlayNextVideo
  51     } else {
  52       this.autoPlayNextVideo = this.sessionStorageService.getItem(UserLocalStorageKeys.SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO) === 'true'
  53
  54       this.sessionStorageService.watch([UserLocalStorageKeys.SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO]).subscribe(
  55         () => {
  56           this.autoPlayNextVideo = this.sessionStorageService.getItem(UserLocalStorageKeys.SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO) === 'true'
  57         }
  58       )
  59     }
  60
  61     this.autoPlayNextVideoTooltip = this.i18n('When active, the next video is automatically played after the current one.')
  62   }
  63
  64   ngOnInit () {
  65     this.userService.getAnonymousOrLoggedUser()
  66       .subscribe(user => this.userMiniature = user)
  67   }
  68
  69   ngOnChanges () {
  70     if (this.inputRecommendation) {
  71       this.store.requestNewRecommendations(this.inputRecommendation)
  72     }
  73   }
  74
  75   onVideoRemoved () {
  76     this.store.requestNewRecommendations(this.inputRecommendation)
  77   }
  78
  79   switchAutoPlayNextVideo () {
  80     this.sessionStorageService.setItem(UserLocalStorageKeys.SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO, this.autoPlayNextVideo.toString())
  81
  82     if (this.authService.isLoggedIn()) {
  83       const details = {
  84         autoPlayNextVideo: this.autoPlayNextVideo
  85       }
  86
  87       this.userService.updateMyProfile(details).subscribe(
  88         () => {
  89           this.authService.refreshUserInformation()
  90         },
  91         err => this.notifier.error(err.message)
  92       )
  93     }
  94   }
  95 }