})
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
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())
}
})
<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)">
--- /dev/null
+.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;
+ }
+}
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[]>()
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 {
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)
+ )
+ }
+ }
}