Added a "previous" button on player when watching playlist

Implements https://github.com/Chocobozzz/PeerTube/issues/3485

2 files changed, 31 insertions, 0 deletions

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 d76d0bbd2..cc908b924 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
@@ -137,6 +137,33 @@ export class VideoWatchPlaylistComponent {
     this.onPlaylistVideosNearOfBottom(position)
   }
 
+  findPreviousPlaylistVideo (position = this.currentPlaylistPosition): VideoPlaylistElement {
+    if (this.currentPlaylistPosition <= 1) {
+      // we have reached the top of the playlist: either loop or stop
+      if (this.loopPlaylist) {
+        this.currentPlaylistPosition = position = this.playlistPagination.totalItems
+      } else {
+        return
+      }
+    }
+    const previous = this.playlistElements.find(e => e.position === position)
+
+    if (!previous || !previous.video) {
+      return this.findPreviousPlaylistVideo(position - 1)
+    }
+
+    return previous
+  }
+
+  navigateToPreviousPlaylistVideo () {
+    const previous = this.findPreviousPlaylistVideo(this.currentPlaylistPosition - 1)
+    if (!previous) return
+
+    const start = previous.startTimestamp
+    const stop = previous.stopTimestamp
+    this.router.navigate([],{ queryParams: { playlistPosition: previous.position, start, stop } })
+  }
+
   findNextPlaylistVideo (position = this.currentPlaylistPosition): VideoPlaylistElement {
     if (this.currentPlaylistPosition >= this.playlistPagination.totalItems) {
       // we have reached the end of the playlist: either loop or stop
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 366e9bb57..1f24c898e 100644
--- a/client/src/app/+videos/+video-watch/video-watch.component.ts
+++ b/client/src/app/+videos/+video-watch/video-watch.component.ts
@@ -799,6 +799,10 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
       common: {
         autoplay: this.isAutoplay(),
         nextVideo: () => this.zone.run(() => this.autoplayNext()),
+        previousVideo: () => this.zone.run(() => {
+          // FIXME: Only show if this is a playlist
+          if (this.playlist) this.zone.run(() => this.videoWatchPlaylist.navigateToPreviousPlaylistVideo())
+        }),
 
         playerElement: this.playerElement,
         onPlayerElementChange: (element: HTMLVideoElement) => this.playerElement = element,