client/src/app/videos/recommendations/recommended-videos.component.ts

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