autoplay next video switch for both user and visitors

client/src/app/header/header.component.html

@@ -1,5 +1,5 @@
 <input
-  type="text" id="search-video" name="search-video" i18n-placeholder placeholder="Search..."
+  type="text" id="search-video" name="search-video" i18n-placeholder placeholder="Search videos, channels…"
   [(ngModel)]="searchValue" (keyup.enter)="doSearch()"
 >
 <span (click)="doSearch()" class="icon icon-search"></span>

client/src/app/videos/+video-watch/video-watch.component.ts

@@ -45,6 +45,7 @@ import { randomInt } from '@shared/core-utils/miscs/miscs'
 })
 export class VideoWatchComponent implements OnInit, OnDestroy {
   private static LOCAL_STORAGE_PRIVACY_CONCERN_KEY = 'video-watch-privacy-concern'
+  private static LOCAL_STORAGE_AUTO_PLAY_NEXT_VIDEO = 'auto_play_next_video'
 
   @ViewChild('videoWatchPlaylist', { static: true }) videoWatchPlaylist: VideoWatchPlaylistComponent
   @ViewChild('videoShareModal', { static: false }) videoShareModal: VideoShareComponent
@@ -436,7 +437,10 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
       this.player.one('ended', () => {
         if (this.playlist) {
           this.zone.run(() => this.videoWatchPlaylist.navigateToNextPlaylistVideo())
-        } else if (this.user && this.user.autoPlayNextVideo) {
+        } else if (
+          this.user && this.user.autoPlayNextVideo ||
+          peertubeLocalStorage.getItem(VideoWatchComponent.LOCAL_STORAGE_AUTO_PLAY_NEXT_VIDEO) === 'true'
+        ) {
           this.zone.run(() => this.autoplayNext())
         }
       })

client/src/app/videos/recommendations/recommendations.module.ts

@@ -1,4 +1,5 @@
 import { NgModule } from '@angular/core'
+import { InputSwitchModule } from 'primeng/inputswitch'
 import { RecommendedVideosComponent } from '@app/videos/recommendations/recommended-videos.component'
 import { RecommendedVideosStore } from '@app/videos/recommendations/recommended-videos.store'
 import { CommonModule } from '@angular/common'
@@ -7,6 +8,7 @@ import { RecentVideosRecommendationService } from '@app/videos/recommendations/r
 
 @NgModule({
   imports: [
+    InputSwitchModule,
     SharedModule,
     CommonModule
   ],

client/src/app/videos/recommendations/recommended-videos.component.html

@@ -1,7 +1,13 @@
 <div class="other-videos">
   <ng-container *ngIf="hasVideos$ | async">
-    <div i18n class="title-page title-page-single">
-      Other videos
+    <div class="d-flex title-page-container">
+      <div i18n class="title-page title-page-single">
+        Other videos
+      </div>
+      <div class="d-flex title-page-autoplay">
+        <span>Autoplay</span>
+        <p-inputSwitch [(ngModel)]="autoPlayNextVideo" (ngModelChange)="switchAutoPlayNextVideo()"></p-inputSwitch>
+      </div>
     </div>
 
     <div *ngFor="let video of (videos$ | async)">

client/src/app/videos/recommendations/recommended-videos.component.scss

@@ -0,0 +1,44 @@
+.title-page-container {
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 25px;
+
+  .title-page.active, .title-page.title-page-single {
+    margin-bottom: unset;
+  }
+}
+
+.title-page-autoplay {
+  width: max-content;
+  height: max-content;
+  align-items: center;
+
+  span {
+    margin-right: 0.3rem;
+    text-transform: uppercase;
+    font-size: 85%;
+    font-weight: 600;
+  }
+}
+
+/* p-inputSwitch styles to reduce the switch size */
+
+::ng-deep {
+  p-inputswitch {
+    height: 20px;
+  }
+
+  .ui-inputswitch {
+    width: 2.5em !important;
+    height: 1.45em !important;
+
+    .ui-inputswitch-slider::before {
+      height: 1em !important;
+      width: 1em !important;
+    }
+  }
+
+  .ui-inputswitch-checked .ui-inputswitch-slider::before {
+    transform: translateX(1em) !important;
+  }
+}

client/src/app/videos/recommendations/recommended-videos.component.ts

@@ -4,12 +4,18 @@ import { Video } from '@app/shared/video/video.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 { peertubeLocalStorage } from '@app/shared/misc/peertube-local-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 {
+  private static LOCAL_STORAGE_AUTO_PLAY_NEXT_VIDEO = 'auto_play_next_video'
+
   @Input() inputRecommendation: RecommendationInfo
   @Input() user: User
   @Output() gotRecommendations = new EventEmitter<Video[]>()
@@ -17,12 +23,21 @@ export class RecommendedVideosComponent implements OnChanges {
   readonly hasVideos$: Observable<boolean>
   readonly videos$: Observable<Video[]>
 
+  private autoPlayNextVideo: boolean
+
   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
+      : peertubeLocalStorage.getItem(RecommendedVideosComponent.LOCAL_STORAGE_AUTO_PLAY_NEXT_VIDEO) === 'true' || false
   }
 
   public ngOnChanges (): void {
@@ -34,4 +49,21 @@ export class RecommendedVideosComponent implements OnChanges {
   onVideoRemoved () {
     this.store.requestNewRecommendations(this.inputRecommendation)
   }
+
+  switchAutoPlayNextVideo () {
+    peertubeLocalStorage.setItem(RecommendedVideosComponent.LOCAL_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)
+      )
+    }
+  }
 }