Added "last" and a reversed ?playlistPosition in playlist URL (#3974)

* Added "last" and a reversed playlistPosition

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

* Fixed lint errors in video-watch component

* Applied requested changes

* Removed debug logs

* Fixed lint

* Playlist position styling

Co-authored-by: Chocobozzz <me@florianbigard.com>

client/src/app/+videos/+video-watch/video-watch-playlist.component.ts

@@ -118,6 +118,9 @@ export class VideoWatchPlaylistComponent {
   updatePlaylistIndex (position: number) {
     if (this.playlistElements.length === 0 || !position) return
 
+    // Handle the reverse index
+    if (position < 0) position = this.playlist.videosLength + position + 1
+
     for (const playlistElement of this.playlistElements) {
       // >= if the previous videos were not valid
       if (playlistElement.video && playlistElement.position >= position) {

client/src/app/+videos/+video-watch/video-watch.component.ts

@@ -188,7 +188,18 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     })
 
     this.queryParamsSub = this.route.queryParams.subscribe(queryParams => {
-      this.playlistPosition = queryParams[ 'playlistPosition' ]
+      // Handle the ?playlistPosition
+      const positionParam = queryParams[ 'playlistPosition' ]
+
+      this.playlistPosition = positionParam === 'last'
+        ? -1 // Handle the "last" index
+        : parseInt(positionParam, 10)
+
+      if (isNaN(this.playlistPosition)) {
+        console.error(`playlistPosition query param '${positionParam}' was parsed as NaN, defaulting to 1.`)
+        this.playlistPosition = 1
+      }
+
       this.videoWatchPlaylist.updatePlaylistIndex(this.playlistPosition)
 
       const start = queryParams[ 'start' ]