1 import { Observable } from 'rxjs'
2 import { Component, EventEmitter, Input, OnChanges, OnInit, Output } from '@angular/core'
3 import { AuthService, Notifier } from '@app/core'
4 import { User } from '@app/shared'
5 import { SessionStorageService } from '@app/shared/misc/storage.service'
6 import { UserService } from '@app/shared/users/user.service'
7 import { VideoPlaylist } from '@app/shared/video-playlist/video-playlist.model'
8 import { RecommendationInfo } from '@app/shared/video/recommendation-info.model'
9 import { MiniatureDisplayOptions } from '@app/shared/video/video-miniature.component'
10 import { Video } from '@app/shared/video/video.model'
11 import { RecommendedVideosStore } from '@app/videos/recommendations/recommended-videos.store'
12 import { I18n } from '@ngx-translate/i18n-polyfill'
15 selector: 'my-recommended-videos',
16 templateUrl: './recommended-videos.component.html',
17 styleUrls: [ './recommended-videos.component.scss' ]
19 export class RecommendedVideosComponent implements OnInit, OnChanges {
20 @Input() inputRecommendation: RecommendationInfo
21 @Input() playlist: VideoPlaylist
22 @Output() gotRecommendations = new EventEmitter<Video[]>()
24 autoPlayNextVideo: boolean
25 autoPlayNextVideoTooltip: string
27 displayOptions: MiniatureDisplayOptions = {
36 readonly hasVideos$: Observable<boolean>
37 readonly videos$: Observable<Video[]>
40 private userService: UserService,
41 private authService: AuthService,
42 private notifier: Notifier,
44 private store: RecommendedVideosStore,
45 private sessionStorageService: SessionStorageService
47 this.videos$ = this.store.recommendations$
48 this.hasVideos$ = this.store.hasRecommendations$
49 this.videos$.subscribe(videos => this.gotRecommendations.emit(videos))
51 if (this.authService.isLoggedIn()) {
52 this.autoPlayNextVideo = this.authService.getUser().autoPlayNextVideo
54 this.autoPlayNextVideo = this.sessionStorageService.getItem(User.KEYS.SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO) === 'true' || false
55 this.sessionStorageService.watch([User.KEYS.SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO]).subscribe(
56 () => this.autoPlayNextVideo = this.sessionStorageService.getItem(User.KEYS.SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO) === 'true'
60 this.autoPlayNextVideoTooltip = this.i18n('When active, the next video is automatically played after the current one.')
64 this.userService.getAnonymousOrLoggedUser()
65 .subscribe(user => this.userMiniature = user)
69 if (this.inputRecommendation) {
70 this.store.requestNewRecommendations(this.inputRecommendation)
75 this.store.requestNewRecommendations(this.inputRecommendation)
78 switchAutoPlayNextVideo () {
79 this.sessionStorageService.setItem(User.KEYS.SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO, this.autoPlayNextVideo.toString())
81 if (this.authService.isLoggedIn()) {
83 autoPlayNextVideo: this.autoPlayNextVideo
86 this.userService.updateMyProfile(details).subscribe(
88 this.authService.refreshUserInformation()
90 err => this.notifier.error(err.message)