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 { peertubeSessionStorage } from '@app/shared/misc/peertube-web-storage'
  11 import { I18n } from '@ngx-translate/i18n-polyfill'
  12
  13 @Component({
  14   selector: 'my-recommended-videos',
  15   templateUrl: './recommended-videos.component.html',
  16   styleUrls: [ './recommended-videos.component.scss' ]
  17 })
  18 export class RecommendedVideosComponent implements OnChanges {
  19   static SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO = 'auto_play_next_video'
  20
  21   @Input() inputRecommendation: RecommendationInfo
  22   @Input() user: User
  23   @Input() playlist: VideoPlaylist
  24   @Output() gotRecommendations = new EventEmitter<Video[]>()
  25
  26   autoPlayNextVideo: boolean
  27   autoPlayNextVideoTooltip: string
  28
  29   readonly hasVideos$: Observable<boolean>
  30   readonly videos$: Observable<Video[]>
  31
  32   constructor (
  33     private userService: UserService,
  34     private authService: AuthService,
  35     private notifier: Notifier,
  36     private i18n: I18n,
  37     private store: RecommendedVideosStore
  38   ) {
  39     this.videos$ = this.store.recommendations$
  40     this.hasVideos$ = this.store.hasRecommendations$
  41     this.videos$.subscribe(videos => this.gotRecommendations.emit(videos))
  42
  43     this.autoPlayNextVideo = this.authService.isLoggedIn()
  44       ? this.authService.getUser().autoPlayNextVideo
  45       : peertubeSessionStorage.getItem(RecommendedVideosComponent.SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO) === 'true' || false
  46
  47     this.autoPlayNextVideoTooltip = this.i18n('When active, the next video is automatically played after the current one.')
  48   }
  49
  50   public ngOnChanges (): void {
  51     if (this.inputRecommendation) {
  52       this.store.requestNewRecommendations(this.inputRecommendation)
  53     }
  54   }
  55
  56   onVideoRemoved () {
  57     this.store.requestNewRecommendations(this.inputRecommendation)
  58   }
  59
  60   switchAutoPlayNextVideo () {
  61     peertubeSessionStorage.setItem(RecommendedVideosComponent.SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO, this.autoPlayNextVideo.toString())
  62
  63     if (this.authService.isLoggedIn()) {
  64       const details = {
  65         autoPlayNextVideo: this.autoPlayNextVideo
  66       }
  67
  68       this.userService.updateMyProfile(details).subscribe(
  69         () => {
  70           this.authService.refreshUserInformation()
  71         },
  72         err => this.notifier.error(err.message)
  73       )
  74     }
  75   }
  76 }