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'
15 selector: 'my-recommended-videos',
16 templateUrl: './recommended-videos.component.html',
17 styleUrls: [ './recommended-videos.component.scss' ]
19 export class RecommendedVideosComponent implements OnChanges {
20 @Input() inputRecommendation: RecommendationInfo
22 @Input() playlist: VideoPlaylist
23 @Output() gotRecommendations = new EventEmitter<Video[]>()
25 autoPlayNextVideo: boolean
26 autoPlayNextVideoTooltip: string
28 displayOptions: MiniatureDisplayOptions = {
35 readonly hasVideos$: Observable<boolean>
36 readonly videos$: Observable<Video[]>
39 private userService: UserService,
40 private authService: AuthService,
41 private notifier: Notifier,
43 private store: RecommendedVideosStore,
44 private sessionStorageService: SessionStorageService
46 this.videos$ = this.store.recommendations$
47 this.hasVideos$ = this.store.hasRecommendations$
48 this.videos$.subscribe(videos => this.gotRecommendations.emit(videos))
50 if (this.authService.isLoggedIn()) {
51 this.autoPlayNextVideo = this.authService.getUser().autoPlayNextVideo
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'
59 this.autoPlayNextVideoTooltip = this.i18n('When active, the next video is automatically played after the current one.')
62 public ngOnChanges (): void {
63 if (this.inputRecommendation) {
64 this.store.requestNewRecommendations(this.inputRecommendation)
69 this.store.requestNewRecommendations(this.inputRecommendation)
72 switchAutoPlayNextVideo () {
73 this.sessionStorageService.setItem(User.KEYS.SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO, this.autoPlayNextVideo.toString())
75 if (this.authService.isLoggedIn()) {
77 autoPlayNextVideo: this.autoPlayNextVideo
80 this.userService.updateMyProfile(details).subscribe(
82 this.authService.refreshUserInformation()
84 err => this.notifier.error(err.message)