match margin of abstract-video-list and sub-menu's fixed margin

[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 771ae54a2e3178da175a7b07daf9f1bd0a98e9e0..d4a5df19a05cd01146b48bd75aeb116035f8741d 100644 (file)
--- a/client/src/app/videos/recommendations/recommended-videos.component.ts
+++ b/client/src/app/videos/recommendations/recommended-videos.component.ts
@@ -7,7 +7,9 @@ import { RecommendedVideosStore } from '@app/videos/recommendations/recommended-
 import { User } from '@app/shared'
 import { AuthService, Notifier } from '@app/core'
 import { UserService } from '@app/shared/users/user.service'
-import { peertubeLocalStorage } from '@app/shared/misc/peertube-local-storage'
+import { I18n } from '@ngx-translate/i18n-polyfill'
+import { SessionStorageService } from '@app/shared/misc/storage.service'
+import { MiniatureDisplayOptions } from '@app/shared/video/video-miniature.component'
 
 @Component({
   selector: 'my-recommended-videos',
@@ -15,31 +17,46 @@ import { peertubeLocalStorage } from '@app/shared/misc/peertube-local-storage'
   styleUrls: [ './recommended-videos.component.scss' ]
 })
 export class RecommendedVideosComponent implements OnChanges {
-  static LOCAL_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
+  autoPlayNextVideoTooltip: string
+
+  displayOptions: MiniatureDisplayOptions = {
+    date: true,
+    views: true,
+    by: true,
+    avatar: true
+  }
+
   readonly hasVideos$: Observable<boolean>
   readonly videos$: Observable<Video[]>
 
-  private autoPlayNextVideo: boolean
-
   constructor (
     private userService: UserService,
     private authService: AuthService,
     private notifier: Notifier,
-    private store: RecommendedVideosStore
+    private i18n: I18n,
+    private store: RecommendedVideosStore,
+    private sessionStorageService: SessionStorageService
   ) {
     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
-      : peertubeLocalStorage.getItem(RecommendedVideosComponent.LOCAL_STORAGE_AUTO_PLAY_NEXT_VIDEO) === 'true' || false
+    if (this.authService.isLoggedIn()) {
+      this.autoPlayNextVideo = this.authService.getUser().autoPlayNextVideo
+    } else {
+      this.autoPlayNextVideo = this.sessionStorageService.getItem(User.KEYS.SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO) === 'true' || false
+      this.sessionStorageService.watch([User.KEYS.SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO]).subscribe(
+        () => this.autoPlayNextVideo = this.sessionStorageService.getItem(User.KEYS.SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO) === 'true'
+      )
+    }
+
+    this.autoPlayNextVideoTooltip = this.i18n('When active, the next video is automatically played after the current one.')
   }
 
   public ngOnChanges (): void {
@@ -53,7 +70,7 @@ export class RecommendedVideosComponent implements OnChanges {
   }
 
   switchAutoPlayNextVideo () {
-    peertubeLocalStorage.setItem(RecommendedVideosComponent.LOCAL_STORAGE_AUTO_PLAY_NEXT_VIDEO, this.autoPlayNextVideo.toString())
+    this.sessionStorageService.setItem(User.KEYS.SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO, this.autoPlayNextVideo.toString())
 
     if (this.authService.isLoggedIn()) {
       const details = {