aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/videos
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/app/videos')
-rw-r--r--client/src/app/videos/+video-watch/video-watch-playlist.component.html9
-rw-r--r--client/src/app/videos/+video-watch/video-watch-playlist.component.scss4
-rw-r--r--client/src/app/videos/+video-watch/video-watch-playlist.component.ts39
-rw-r--r--client/src/app/videos/+video-watch/video-watch.component.ts9
-rw-r--r--client/src/app/videos/recommendations/recommended-videos.component.ts8
5 files changed, 53 insertions, 16 deletions
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 @@
24 placement="bottom auto" 24 placement="bottom auto"
25 container="body" 25 container="body"
26 ></my-global-icon> 26 ></my-global-icon>
27
28 <my-global-icon
29 iconName="repeat"
30 [class.active]="loopPlaylist"
31 (click)="switchLoopPlaylist()"
32 [ngbTooltip]="'Loop playlist videos'"
33 placement="bottom auto"
34 container="body"
35 ></my-global-icon>
27 </div> 36 </div>
28 </div> 37 </div>
29 38
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 @@
39 display: flex; 39 display: flex;
40 margin: 10px 0; 40 margin: 10px 0;
41 41
42 my-global-icon:not(:last-child) {
43 margin-right: .5rem;
44 }
45
42 my-global-icon { 46 my-global-icon {
43 &:not(.active) { 47 &:not(.active) {
44 opacity: .5 48 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'
3import { ComponentPagination } from '@app/shared/rest/component-pagination.model' 3import { ComponentPagination } from '@app/shared/rest/component-pagination.model'
4import { VideoDetails, VideoPlaylistPrivacy } from '@shared/models' 4import { VideoDetails, VideoPlaylistPrivacy } from '@shared/models'
5import { Router } from '@angular/router' 5import { Router } from '@angular/router'
6import { User, UserService } from '@app/shared' 6import { UserService } from '@app/shared'
7import { AuthService, Notifier } from '@app/core' 7import { AuthService, Notifier } from '@app/core'
8import { VideoPlaylistService } from '@app/shared/video-playlist/video-playlist.service' 8import { VideoPlaylistService } from '@app/shared/video-playlist/video-playlist.service'
9import { VideoPlaylistElement } from '@app/shared/video-playlist/video-playlist-element.model' 9import { VideoPlaylistElement } from '@app/shared/video-playlist/video-playlist-element.model'
10import { peertubeLocalStorage } from '@app/shared/misc/peertube-local-storage' 10import { peertubeLocalStorage, peertubeSessionStorage } from '@app/shared/misc/peertube-web-storage'
11import { I18n } from '@ngx-translate/i18n-polyfill' 11import { I18n } from '@ngx-translate/i18n-polyfill'
12 12
13@Component({ 13@Component({
@@ -17,6 +17,7 @@ import { I18n } from '@ngx-translate/i18n-polyfill'
17}) 17})
18export class VideoWatchPlaylistComponent { 18export class VideoWatchPlaylistComponent {
19 static LOCAL_STORAGE_AUTO_PLAY_NEXT_VIDEO_PLAYLIST = 'auto_play_video_playlist' 19 static LOCAL_STORAGE_AUTO_PLAY_NEXT_VIDEO_PLAYLIST = 'auto_play_video_playlist'
20 static SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO_PLAYLIST = 'loop_playlist'
20 21
21 @Input() video: VideoDetails 22 @Input() video: VideoDetails
22 @Input() playlist: VideoPlaylist 23 @Input() playlist: VideoPlaylist
@@ -30,6 +31,8 @@ export class VideoWatchPlaylistComponent {
30 31
31 autoPlayNextVideoPlaylist: boolean 32 autoPlayNextVideoPlaylist: boolean
32 autoPlayNextVideoPlaylistSwitchText = '' 33 autoPlayNextVideoPlaylistSwitchText = ''
34 loopPlaylist: boolean
35 loopPlaylistSwitchText = ''
33 noPlaylistVideos = false 36 noPlaylistVideos = false
34 currentPlaylistPosition = 1 37 currentPlaylistPosition = 1
35 38
@@ -45,6 +48,9 @@ export class VideoWatchPlaylistComponent {
45 ? this.auth.getUser().autoPlayNextVideoPlaylist 48 ? this.auth.getUser().autoPlayNextVideoPlaylist
46 : peertubeLocalStorage.getItem(VideoWatchPlaylistComponent.LOCAL_STORAGE_AUTO_PLAY_NEXT_VIDEO_PLAYLIST) !== 'false' 49 : peertubeLocalStorage.getItem(VideoWatchPlaylistComponent.LOCAL_STORAGE_AUTO_PLAY_NEXT_VIDEO_PLAYLIST) !== 'false'
47 this.setAutoPlayNextVideoPlaylistSwitchText() 50 this.setAutoPlayNextVideoPlaylistSwitchText()
51
52 this.loopPlaylist = peertubeSessionStorage.getItem(VideoWatchPlaylistComponent.SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO_PLAYLIST) === 'true'
53 this.setLoopPlaylistSwitchText()
48 } 54 }
49 55
50 onPlaylistVideosNearOfBottom () { 56 onPlaylistVideosNearOfBottom () {
@@ -121,9 +127,9 @@ export class VideoWatchPlaylistComponent {
121 this.onPlaylistVideosNearOfBottom() 127 this.onPlaylistVideosNearOfBottom()
122 } 128 }
123 129
124 navigateToNextPlaylistVideo () { 130 navigateToNextPlaylistVideo (_next: VideoPlaylistElement = null) {
125 if (this.currentPlaylistPosition < this.playlistPagination.totalItems) { 131 if (this.currentPlaylistPosition < this.playlistPagination.totalItems) {
126 const next = this.playlistElements.find(e => e.position === this.currentPlaylistPosition + 1) 132 const next = _next || this.playlistElements.find(e => e.position === this.currentPlaylistPosition + 1)
127 133
128 if (!next || !next.video) { 134 if (!next || !next.video) {
129 this.currentPlaylistPosition++ 135 this.currentPlaylistPosition++
@@ -134,6 +140,9 @@ export class VideoWatchPlaylistComponent {
134 const start = next.startTimestamp 140 const start = next.startTimestamp
135 const stop = next.stopTimestamp 141 const stop = next.stopTimestamp
136 this.router.navigate([],{ queryParams: { videoId: next.video.uuid, start, stop } }) 142 this.router.navigate([],{ queryParams: { videoId: next.video.uuid, start, stop } })
143 } else if (this.loopPlaylist) {
144 this.currentPlaylistPosition = 0
145 this.navigateToNextPlaylistVideo(this.playlistElements.find(e => e.position === this.currentPlaylistPosition))
137 } 146 }
138 } 147 }
139 148
@@ -160,9 +169,25 @@ export class VideoWatchPlaylistComponent {
160 } 169 }
161 } 170 }
162 171
172 switchLoopPlaylist () {
173 this.loopPlaylist = !this.loopPlaylist
174 this.setLoopPlaylistSwitchText()
175
176 peertubeSessionStorage.setItem(
177 VideoWatchPlaylistComponent.SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO_PLAYLIST,
178 this.loopPlaylist.toString()
179 )
180 }
181
163 private setAutoPlayNextVideoPlaylistSwitchText () { 182 private setAutoPlayNextVideoPlaylistSwitchText () {
164 this.autoPlayNextVideoPlaylistSwitchText = this.i18n('{{verb}} autoplay for playlists', { 183 this.autoPlayNextVideoPlaylistSwitchText = this.autoPlayNextVideoPlaylist
165 verb: this.autoPlayNextVideoPlaylist ? this.i18n('Disable') : this.i18n('Enable') 184 ? this.i18n('Stop autoplaying next video')
166 }) 185 : this.i18n('Autoplay next video')
186 }
187
188 private setLoopPlaylistSwitchText () {
189 this.loopPlaylistSwitchText = this.loopPlaylist
190 ? this.i18n('Stop looping playlist videos')
191 : this.i18n('Loop playlist videos')
167 } 192 }
168} 193}
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'
2import { ChangeDetectorRef, Component, ElementRef, Inject, LOCALE_ID, NgZone, OnDestroy, OnInit, ViewChild } from '@angular/core' 2import { ChangeDetectorRef, Component, ElementRef, Inject, LOCALE_ID, NgZone, OnDestroy, OnInit, ViewChild } from '@angular/core'
3import { ActivatedRoute, Router } from '@angular/router' 3import { ActivatedRoute, Router } from '@angular/router'
4import { RedirectService } from '@app/core/routing/redirect.service' 4import { RedirectService } from '@app/core/routing/redirect.service'
5import { peertubeLocalStorage } from '@app/shared/misc/peertube-local-storage' 5import { peertubeLocalStorage, peertubeSessionStorage } from '@app/shared/misc/peertube-web-storage'
6import { VideoSupportComponent } from '@app/videos/+video-watch/modal/video-support.component' 6import { VideoSupportComponent } from '@app/videos/+video-watch/modal/video-support.component'
7import { MetaService } from '@ngx-meta/core' 7import { MetaService } from '@ngx-meta/core'
8import { AuthUser, Notifier, ServerService } from '@app/core' 8import { AuthUser, Notifier, ServerService } from '@app/core'
@@ -46,7 +46,6 @@ import { RecommendedVideosComponent } from '../recommendations/recommended-video
46}) 46})
47export class VideoWatchComponent implements OnInit, OnDestroy { 47export class VideoWatchComponent implements OnInit, OnDestroy {
48 private static LOCAL_STORAGE_PRIVACY_CONCERN_KEY = 'video-watch-privacy-concern' 48 private static LOCAL_STORAGE_PRIVACY_CONCERN_KEY = 'video-watch-privacy-concern'
49 private static LOCAL_STORAGE_AUTO_PLAY_NEXT_VIDEO = 'auto_play_next_video'
50 49
51 @ViewChild('videoWatchPlaylist', { static: true }) videoWatchPlaylist: VideoWatchPlaylistComponent 50 @ViewChild('videoWatchPlaylist', { static: true }) videoWatchPlaylist: VideoWatchPlaylistComponent
52 @ViewChild('videoShareModal', { static: false }) videoShareModal: VideoShareComponent 51 @ViewChild('videoShareModal', { static: false }) videoShareModal: VideoShareComponent
@@ -439,11 +438,11 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
439 if (this.playlist) { 438 if (this.playlist) {
440 if ( 439 if (
441 this.user && this.user.autoPlayNextVideoPlaylist || 440 this.user && this.user.autoPlayNextVideoPlaylist ||
442 peertubeLocalStorage.getItem(VideoWatchPlaylistComponent.LOCAL_STORAGE_AUTO_PLAY_NEXT_VIDEO_PLAYLIST) === 'true' 441 peertubeSessionStorage.getItem(VideoWatchPlaylistComponent.SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO_PLAYLIST) === 'true'
443 ) this.zone.run(() => this.videoWatchPlaylist.navigateToNextPlaylistVideo()) 442 ) this.zone.run(() => this.videoWatchPlaylist.navigateToNextPlaylistVideo())
444 } else if ( 443 } else if (
445 this.user && this.user.autoPlayNextVideo || 444 this.user && this.user.autoPlayNextVideo ||
446 peertubeLocalStorage.getItem(RecommendedVideosComponent.LOCAL_STORAGE_AUTO_PLAY_NEXT_VIDEO) === 'true' 445 peertubeSessionStorage.getItem(RecommendedVideosComponent.SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO) === 'true'
447 ) { 446 ) {
448 this.zone.run(() => this.autoplayNext()) 447 this.zone.run(() => this.autoplayNext())
449 } 448 }
@@ -453,7 +452,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
453 if (this.playlist) { 452 if (this.playlist) {
454 if ( 453 if (
455 this.user && this.user.autoPlayNextVideoPlaylist || 454 this.user && this.user.autoPlayNextVideoPlaylist ||
456 peertubeLocalStorage.getItem(VideoWatchPlaylistComponent.LOCAL_STORAGE_AUTO_PLAY_NEXT_VIDEO_PLAYLIST) === 'true' 455 peertubeSessionStorage.getItem(VideoWatchPlaylistComponent.SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO_PLAYLIST) === 'true'
457 ) this.zone.run(() => this.videoWatchPlaylist.navigateToNextPlaylistVideo()) 456 ) this.zone.run(() => this.videoWatchPlaylist.navigateToNextPlaylistVideo())
458 } 457 }
459 }) 458 })
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-
7import { User } from '@app/shared' 7import { User } from '@app/shared'
8import { AuthService, Notifier } from '@app/core' 8import { AuthService, Notifier } from '@app/core'
9import { UserService } from '@app/shared/users/user.service' 9import { UserService } from '@app/shared/users/user.service'
10import { peertubeLocalStorage } from '@app/shared/misc/peertube-local-storage' 10import { peertubeSessionStorage } from '@app/shared/misc/peertube-web-storage'
11 11
12@Component({ 12@Component({
13 selector: 'my-recommended-videos', 13 selector: 'my-recommended-videos',
@@ -15,7 +15,7 @@ import { peertubeLocalStorage } from '@app/shared/misc/peertube-local-storage'
15 styleUrls: [ './recommended-videos.component.scss' ] 15 styleUrls: [ './recommended-videos.component.scss' ]
16}) 16})
17export class RecommendedVideosComponent implements OnChanges { 17export class RecommendedVideosComponent implements OnChanges {
18 static LOCAL_STORAGE_AUTO_PLAY_NEXT_VIDEO = 'auto_play_next_video' 18 static SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO = 'auto_play_next_video'
19 19
20 @Input() inputRecommendation: RecommendationInfo 20 @Input() inputRecommendation: RecommendationInfo
21 @Input() user: User 21 @Input() user: User
@@ -39,7 +39,7 @@ export class RecommendedVideosComponent implements OnChanges {
39 39
40 this.autoPlayNextVideo = this.authService.isLoggedIn() 40 this.autoPlayNextVideo = this.authService.isLoggedIn()
41 ? this.authService.getUser().autoPlayNextVideo 41 ? this.authService.getUser().autoPlayNextVideo
42 : peertubeLocalStorage.getItem(RecommendedVideosComponent.LOCAL_STORAGE_AUTO_PLAY_NEXT_VIDEO) === 'true' || false 42 : peertubeSessionStorage.getItem(RecommendedVideosComponent.SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO) === 'true' || false
43 } 43 }
44 44
45 public ngOnChanges (): void { 45 public ngOnChanges (): void {
@@ -53,7 +53,7 @@ export class RecommendedVideosComponent implements OnChanges {
53 } 53 }
54 54
55 switchAutoPlayNextVideo () { 55 switchAutoPlayNextVideo () {
56 peertubeLocalStorage.setItem(RecommendedVideosComponent.LOCAL_STORAGE_AUTO_PLAY_NEXT_VIDEO, this.autoPlayNextVideo.toString()) 56 peertubeSessionStorage.setItem(RecommendedVideosComponent.SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO, this.autoPlayNextVideo.toString())
57 57
58 if (this.authService.isLoggedIn()) { 58 if (this.authService.isLoggedIn()) {
59 const details = { 59 const details = {