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'
12 selector: 'my-recommended-videos',
13 templateUrl: './recommended-videos.component.html',
14 styleUrls: [ './recommended-videos.component.scss' ]
16 export class RecommendedVideosComponent implements OnInit, OnChanges {
17 @Input() inputRecommendation: RecommendationInfo
18 @Input() playlist: VideoPlaylist
19 @Input() displayAsRow: boolean
21 @Output() gotRecommendations = new EventEmitter<Video[]>()
23 autoPlayNextVideo: boolean
24 autoPlayNextVideoTooltip: string
26 displayOptions: MiniatureDisplayOptions = {
35 readonly hasVideos$: Observable<boolean>
36 readonly videos$: Observable<Video[]>
39 private userService: UserService,
40 private authService: AuthService,
41 private notifier: Notifier,
42 private store: RecommendedVideosStore,
43 private sessionStorageService: SessionStorageService
45 this.videos$ = this.store.recommendations$
46 this.hasVideos$ = this.store.hasRecommendations$
47 this.videos$.subscribe(videos => this.gotRecommendations.emit(videos))
49 if (this.authService.isLoggedIn()) {
50 this.autoPlayNextVideo = this.authService.getUser().autoPlayNextVideo
52 this.autoPlayNextVideo = this.sessionStorageService.getItem(UserLocalStorageKeys.SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO) === 'true'
54 this.sessionStorageService.watch([ UserLocalStorageKeys.SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO ]).subscribe(
56 this.autoPlayNextVideo = this.sessionStorageService.getItem(UserLocalStorageKeys.SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO) === 'true'
61 this.autoPlayNextVideoTooltip = $localize`When active, the next video is automatically played after the current one.`
65 this.userService.getAnonymousOrLoggedUser()
66 .subscribe(user => this.userMiniature = user)
70 if (this.inputRecommendation) {
71 this.store.requestNewRecommendations(this.inputRecommendation)
76 this.store.requestNewRecommendations(this.inputRecommendation)
79 switchAutoPlayNextVideo () {
80 this.sessionStorageService.setItem(UserLocalStorageKeys.SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO, this.autoPlayNextVideo.toString())
82 if (this.authService.isLoggedIn()) {
84 autoPlayNextVideo: this.autoPlayNextVideo
87 this.userService.updateMyProfile(details)
90 this.authService.refreshUserInformation()
93 error: err => this.notifier.error(err.message)