From 88a7f93f8e5666f44121a2e3cf9d33d74c472aa7 Mon Sep 17 00:00:00 2001 From: Rigel Kent Date: Wed, 11 Dec 2019 22:13:20 +0100 Subject: add loop setting for playlists, and use sessionStorage --- .../video-watch-playlist.component.html | 9 +++++ .../video-watch-playlist.component.scss | 4 +++ .../+video-watch/video-watch-playlist.component.ts | 39 ++++++++++++++++++---- .../videos/+video-watch/video-watch.component.ts | 9 +++-- .../recommended-videos.component.ts | 8 ++--- 5 files changed, 53 insertions(+), 16 deletions(-) (limited to 'client/src/app/videos') diff --git a/client/src/app/videos/+video-watch/video-watch-playlist.component.html b/client/src/app/videos/+video-watch/video-watch-playlist.component.html index c07ba1ed6..a04081d35 100644 --- a/client/src/app/videos/+video-watch/video-watch-playlist.component.html +++ b/client/src/app/videos/+video-watch/video-watch-playlist.component.html @@ -24,6 +24,15 @@ placement="bottom auto" container="body" > + + diff --git a/client/src/app/videos/+video-watch/video-watch-playlist.component.scss b/client/src/app/videos/+video-watch/video-watch-playlist.component.scss index ba8d1c3e1..0dd318cb0 100644 --- a/client/src/app/videos/+video-watch/video-watch-playlist.component.scss +++ b/client/src/app/videos/+video-watch/video-watch-playlist.component.scss @@ -39,6 +39,10 @@ display: flex; margin: 10px 0; + my-global-icon:not(:last-child) { + margin-right: .5rem; + } + my-global-icon { &:not(.active) { opacity: .5 diff --git a/client/src/app/videos/+video-watch/video-watch-playlist.component.ts b/client/src/app/videos/+video-watch/video-watch-playlist.component.ts index ed2aeda6e..c6b04fd4b 100644 --- a/client/src/app/videos/+video-watch/video-watch-playlist.component.ts +++ b/client/src/app/videos/+video-watch/video-watch-playlist.component.ts @@ -3,11 +3,11 @@ import { VideoPlaylist } from '@app/shared/video-playlist/video-playlist.model' import { ComponentPagination } from '@app/shared/rest/component-pagination.model' import { VideoDetails, VideoPlaylistPrivacy } from '@shared/models' import { Router } from '@angular/router' -import { User, UserService } from '@app/shared' +import { UserService } from '@app/shared' import { AuthService, Notifier } from '@app/core' import { VideoPlaylistService } from '@app/shared/video-playlist/video-playlist.service' import { VideoPlaylistElement } from '@app/shared/video-playlist/video-playlist-element.model' -import { peertubeLocalStorage } from '@app/shared/misc/peertube-local-storage' +import { peertubeLocalStorage, peertubeSessionStorage } from '@app/shared/misc/peertube-web-storage' import { I18n } from '@ngx-translate/i18n-polyfill' @Component({ @@ -17,6 +17,7 @@ import { I18n } from '@ngx-translate/i18n-polyfill' }) export class VideoWatchPlaylistComponent { static LOCAL_STORAGE_AUTO_PLAY_NEXT_VIDEO_PLAYLIST = 'auto_play_video_playlist' + static SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO_PLAYLIST = 'loop_playlist' @Input() video: VideoDetails @Input() playlist: VideoPlaylist @@ -30,6 +31,8 @@ export class VideoWatchPlaylistComponent { autoPlayNextVideoPlaylist: boolean autoPlayNextVideoPlaylistSwitchText = '' + loopPlaylist: boolean + loopPlaylistSwitchText = '' noPlaylistVideos = false currentPlaylistPosition = 1 @@ -45,6 +48,9 @@ export class VideoWatchPlaylistComponent { ? this.auth.getUser().autoPlayNextVideoPlaylist : peertubeLocalStorage.getItem(VideoWatchPlaylistComponent.LOCAL_STORAGE_AUTO_PLAY_NEXT_VIDEO_PLAYLIST) !== 'false' this.setAutoPlayNextVideoPlaylistSwitchText() + + this.loopPlaylist = peertubeSessionStorage.getItem(VideoWatchPlaylistComponent.SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO_PLAYLIST) === 'true' + this.setLoopPlaylistSwitchText() } onPlaylistVideosNearOfBottom () { @@ -121,9 +127,9 @@ export class VideoWatchPlaylistComponent { this.onPlaylistVideosNearOfBottom() } - navigateToNextPlaylistVideo () { + navigateToNextPlaylistVideo (_next: VideoPlaylistElement = null) { if (this.currentPlaylistPosition < this.playlistPagination.totalItems) { - const next = this.playlistElements.find(e => e.position === this.currentPlaylistPosition + 1) + const next = _next || this.playlistElements.find(e => e.position === this.currentPlaylistPosition + 1) if (!next || !next.video) { this.currentPlaylistPosition++ @@ -134,6 +140,9 @@ export class VideoWatchPlaylistComponent { const start = next.startTimestamp const stop = next.stopTimestamp this.router.navigate([],{ queryParams: { videoId: next.video.uuid, start, stop } }) + } else if (this.loopPlaylist) { + this.currentPlaylistPosition = 0 + this.navigateToNextPlaylistVideo(this.playlistElements.find(e => e.position === this.currentPlaylistPosition)) } } @@ -160,9 +169,25 @@ export class VideoWatchPlaylistComponent { } } + switchLoopPlaylist () { + this.loopPlaylist = !this.loopPlaylist + this.setLoopPlaylistSwitchText() + + peertubeSessionStorage.setItem( + VideoWatchPlaylistComponent.SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO_PLAYLIST, + this.loopPlaylist.toString() + ) + } + private setAutoPlayNextVideoPlaylistSwitchText () { - this.autoPlayNextVideoPlaylistSwitchText = this.i18n('{{verb}} autoplay for playlists', { - verb: this.autoPlayNextVideoPlaylist ? this.i18n('Disable') : this.i18n('Enable') - }) + this.autoPlayNextVideoPlaylistSwitchText = this.autoPlayNextVideoPlaylist + ? this.i18n('Stop autoplaying next video') + : this.i18n('Autoplay next video') + } + + private setLoopPlaylistSwitchText () { + this.loopPlaylistSwitchText = this.loopPlaylist + ? this.i18n('Stop looping playlist videos') + : this.i18n('Loop playlist videos') } } 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 92c1c50c0..aaaa63d4d 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.ts +++ b/client/src/app/videos/+video-watch/video-watch.component.ts @@ -2,7 +2,7 @@ import { catchError } from 'rxjs/operators' import { ChangeDetectorRef, Component, ElementRef, Inject, LOCALE_ID, NgZone, OnDestroy, OnInit, ViewChild } from '@angular/core' import { ActivatedRoute, Router } from '@angular/router' import { RedirectService } from '@app/core/routing/redirect.service' -import { peertubeLocalStorage } from '@app/shared/misc/peertube-local-storage' +import { peertubeLocalStorage, peertubeSessionStorage } from '@app/shared/misc/peertube-web-storage' import { VideoSupportComponent } from '@app/videos/+video-watch/modal/video-support.component' import { MetaService } from '@ngx-meta/core' import { AuthUser, Notifier, ServerService } from '@app/core' @@ -46,7 +46,6 @@ import { RecommendedVideosComponent } from '../recommendations/recommended-video }) 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 @@ -439,11 +438,11 @@ export class VideoWatchComponent implements OnInit, OnDestroy { if (this.playlist) { if ( this.user && this.user.autoPlayNextVideoPlaylist || - peertubeLocalStorage.getItem(VideoWatchPlaylistComponent.LOCAL_STORAGE_AUTO_PLAY_NEXT_VIDEO_PLAYLIST) === 'true' + peertubeSessionStorage.getItem(VideoWatchPlaylistComponent.SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO_PLAYLIST) === 'true' ) this.zone.run(() => this.videoWatchPlaylist.navigateToNextPlaylistVideo()) } else if ( this.user && this.user.autoPlayNextVideo || - peertubeLocalStorage.getItem(RecommendedVideosComponent.LOCAL_STORAGE_AUTO_PLAY_NEXT_VIDEO) === 'true' + peertubeSessionStorage.getItem(RecommendedVideosComponent.SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO) === 'true' ) { this.zone.run(() => this.autoplayNext()) } @@ -453,7 +452,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy { if (this.playlist) { if ( this.user && this.user.autoPlayNextVideoPlaylist || - peertubeLocalStorage.getItem(VideoWatchPlaylistComponent.LOCAL_STORAGE_AUTO_PLAY_NEXT_VIDEO_PLAYLIST) === 'true' + peertubeSessionStorage.getItem(VideoWatchPlaylistComponent.SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO_PLAYLIST) === 'true' ) this.zone.run(() => this.videoWatchPlaylist.navigateToNextPlaylistVideo()) } }) diff --git a/client/src/app/videos/recommendations/recommended-videos.component.ts b/client/src/app/videos/recommendations/recommended-videos.component.ts index 771ae54a2..fdcfb28e3 100644 --- a/client/src/app/videos/recommendations/recommended-videos.component.ts +++ b/client/src/app/videos/recommendations/recommended-videos.component.ts @@ -7,7 +7,7 @@ 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 { peertubeSessionStorage } from '@app/shared/misc/peertube-web-storage' @Component({ selector: 'my-recommended-videos', @@ -15,7 +15,7 @@ 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' + static SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO = 'auto_play_next_video' @Input() inputRecommendation: RecommendationInfo @Input() user: User @@ -39,7 +39,7 @@ export class RecommendedVideosComponent implements OnChanges { this.autoPlayNextVideo = this.authService.isLoggedIn() ? this.authService.getUser().autoPlayNextVideo - : peertubeLocalStorage.getItem(RecommendedVideosComponent.LOCAL_STORAGE_AUTO_PLAY_NEXT_VIDEO) === 'true' || false + : peertubeSessionStorage.getItem(RecommendedVideosComponent.SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO) === 'true' || false } public ngOnChanges (): void { @@ -53,7 +53,7 @@ export class RecommendedVideosComponent implements OnChanges { } switchAutoPlayNextVideo () { - peertubeLocalStorage.setItem(RecommendedVideosComponent.LOCAL_STORAGE_AUTO_PLAY_NEXT_VIDEO, this.autoPlayNextVideo.toString()) + peertubeSessionStorage.setItem(RecommendedVideosComponent.SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO, this.autoPlayNextVideo.toString()) if (this.authService.isLoggedIn()) { const details = { -- cgit v1.2.3