diff --git a/client/src/app/header/header.component.html b/client/src/app/header/header.component.html index 46a87c79c..8ee41c4de 100644 --- a/client/src/app/header/header.component.html +++ b/client/src/app/header/header.component.html @@ -1,5 +1,5 @@ diff --git a/client/src/app/videos/+video-watch/video-watch.component.ts b/client/src/app/videos/+video-watch/video-watch.component.ts index 0de621aca..156a3235a 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.ts +++ b/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()) } }) diff --git a/client/src/app/videos/recommendations/recommendations.module.ts b/client/src/app/videos/recommendations/recommendations.module.ts index 5a46ea739..3e279cc29 100644 --- a/client/src/app/videos/recommendations/recommendations.module.ts +++ b/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 ], diff --git a/client/src/app/videos/recommendations/recommended-videos.component.html b/client/src/app/videos/recommendations/recommended-videos.component.html index 5b5951f99..5f223078a 100644 --- a/client/src/app/videos/recommendations/recommended-videos.component.html +++ b/client/src/app/videos/recommendations/recommended-videos.component.html @@ -1,7 +1,13 @@
-
- Other videos +
+
+ Other videos +
+
+ Autoplay + +
diff --git a/client/src/app/videos/recommendations/recommended-videos.component.scss b/client/src/app/videos/recommendations/recommended-videos.component.scss new file mode 100644 index 000000000..c337979d8 --- /dev/null +++ b/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; + } +} diff --git a/client/src/app/videos/recommendations/recommended-videos.component.ts b/client/src/app/videos/recommendations/recommended-videos.component.ts index 7e0fb8856..4c3cde225 100644 --- a/client/src/app/videos/recommendations/recommended-videos.component.ts +++ b/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() @@ -17,12 +23,21 @@ export class RecommendedVideosComponent implements OnChanges { readonly hasVideos$: Observable readonly videos$: Observable + 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) + ) + } + } }