(css) vertical-center modals, bullet as separator

[github/Chocobozzz/PeerTube.git] / client / src / app / videos / recommendations / recommended-videos.component.ts

diff --git a/client/src/app/videos/recommendations/recommended-videos.component.ts b/client/src/app/videos/recommendations/recommended-videos.component.ts
index c6c1d9e5d4c42a43c6eb0aa2499f016543114ae9..116b0e8f75f99663ab94433d5a6bc7430826506a 100644 (file)
--- a/client/src/app/videos/recommendations/recommended-videos.component.ts
+++ b/client/src/app/videos/recommendations/recommended-videos.component.ts
@@ -1,26 +1,45 @@
-import { Component, Input, OnChanges } from '@angular/core'
+import { Component, Input, Output, OnChanges, EventEmitter } from '@angular/core'
 import { Observable } from 'rxjs'
 import { Video } from '@app/shared/video/video.model'
+import { VideoPlaylist } from '@app/shared/video-playlist/video-playlist.model'
 import { RecommendationInfo } from '@app/shared/video/recommendation-info.model'
 import { RecommendedVideosStore } from '@app/videos/recommendations/recommended-videos.store'
 import { User } from '@app/shared'
+import { AuthService, Notifier } from '@app/core'
+import { UserService } from '@app/shared/users/user.service'
+import { peertubeSessionStorage } from '@app/shared/misc/peertube-web-storage'
 
 @Component({
   selector: 'my-recommended-videos',
-  templateUrl: './recommended-videos.component.html'
+  templateUrl: './recommended-videos.component.html',
+  styleUrls: [ './recommended-videos.component.scss' ]
 })
 export class RecommendedVideosComponent implements OnChanges {
+  static SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO = 'auto_play_next_video'
+
   @Input() inputRecommendation: RecommendationInfo
   @Input() user: User
+  @Input() playlist: VideoPlaylist
+  @Output() gotRecommendations = new EventEmitter<Video[]>()
+
+  autoPlayNextVideo: boolean
 
   readonly hasVideos$: Observable<boolean>
   readonly videos$: Observable<Video[]>
 
   constructor (
+    private userService: UserService,
+    private authService: AuthService,
+    private notifier: Notifier,
     private store: RecommendedVideosStore
   ) {
     this.videos$ = this.store.recommendations$
     this.hasVideos$ = this.store.hasRecommendations$
+    this.videos$.subscribe(videos => this.gotRecommendations.emit(videos))
+
+    this.autoPlayNextVideo = this.authService.isLoggedIn()
+      ? this.authService.getUser().autoPlayNextVideo
+      : peertubeSessionStorage.getItem(RecommendedVideosComponent.SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO) === 'true' || false
   }
 
   public ngOnChanges (): void {
@@ -29,4 +48,24 @@ export class RecommendedVideosComponent implements OnChanges {
     }
   }
 
+  onVideoRemoved () {
+    this.store.requestNewRecommendations(this.inputRecommendation)
+  }
+
+  switchAutoPlayNextVideo () {
+    peertubeSessionStorage.setItem(RecommendedVideosComponent.SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO, this.autoPlayNextVideo.toString())
+
+    if (this.authService.isLoggedIn()) {
+      const details = {
+        autoPlayNextVideo: this.autoPlayNextVideo
+      }
+
+      this.userService.updateMyProfile(details).subscribe(
+        () => {
+          this.authService.refreshUserInformation()
+        },
+        err => this.notifier.error(err.message)
+      )
+    }
+  }
 }