From b83f06cf1fc012af263ee6ab2100664afd497145 Mon Sep 17 00:00:00 2001
From: Holger Frovin Jensen <holger@frovin.com>
Date: Sun, 5 Dec 2021 05:56:03 +0100
Subject: [PATCH] Actually works now

---
 src/components/Player.vue     | 23 ++++++++++++++++++++++-
 src/components/Playlist.vue   |  4 ++--
 src/components/VideoItem.vue  | 19 +++++++++++++++++--
 src/components/WatchVideo.vue | 21 +++++++++++++++++----
 4 files changed, 58 insertions(+), 9 deletions(-)

diff --git a/src/components/Player.vue b/src/components/Player.vue
index 5c9b4ce0..c6c5974e 100644
--- a/src/components/Player.vue
+++ b/src/components/Player.vue
@@ -31,6 +31,12 @@ export default {
                 return {};
             },
         },
+        playlist: {
+            type: Object,
+            default: () => {
+                return {};
+            },
+        },
         sponsors: {
             type: Object,
             default: () => {
@@ -40,6 +46,7 @@ export default {
         selectedAutoPlay: Boolean,
         selectedAutoLoop: Boolean,
         isEmbed: Boolean,
+        isPlaylist: Boolean,
     },
     data() {
         return {
@@ -328,13 +335,27 @@ export default {
                 videoEl.addEventListener("ended", () => {
                     if (!this.selectedAutoLoop && this.selectedAutoPlay && this.video.relatedStreams.length > 0) {
                         const params = this.$route.query;
-                        let url = this.video.relatedStreams[0].url;
+                        let index = Number(params.index).valueOf();
                         const searchParams = new URLSearchParams();
+                        let isPlaylist = this.isPlaylist;
+                        let url =
+                            isPlaylist && index > this.playlist.relatedStreams.length
+                                ? this.playlist.relatedStreams[index].url
+                                : this.video.relatedStreams[0].url;
+                        let playlistEnded = index == this.playlist.relatedStreams.length;
                         for (var param in params)
                             switch (param) {
                                 case "v":
                                 case "t":
                                     break;
+                                case "index":
+                                    if (playlistEnded) {
+                                        searchParams.delete("index");
+                                    } else searchParams.set(param, index + 1);
+                                    break;
+                                case "list":
+                                    if (playlistEnded) searchParams.delete("list");
+                                    break;
                                 default:
                                     searchParams.set(param, params[param]);
                                     break;
diff --git a/src/components/Playlist.vue b/src/components/Playlist.vue
index 35ace3ed..4f8243bb 100644
--- a/src/components/Playlist.vue
+++ b/src/components/Playlist.vue
@@ -70,8 +70,8 @@ export default {
             this.fetchPlaylist()
                 .then(data => (this.playlist = data))
                 .then(() =>
-                    this.playlist.relatedStreams.forEach(video => {
-                        video.url += "&list=" + this.$route.query.list;
+                    this.playlist.relatedStreams.forEach((video, i) => {
+                        video.url += "&list=" + this.$route.query.list + "&index=" + (i + 1);
                     }),
                 )
                 .then(() => (document.title = this.playlist.name + " - Piped"));
diff --git a/src/components/VideoItem.vue b/src/components/VideoItem.vue
index ce545379..af9f3a12 100644
--- a/src/components/VideoItem.vue
+++ b/src/components/VideoItem.vue
@@ -1,6 +1,13 @@
 <template>
     <div class="uk-text-secondary" :style="[{ background: backgroundColor }]">
-        <router-link class="uk-text-emphasis" :to="video.url">
+        <router-link
+            class="uk-text-emphasis"
+            :to="
+                isPlaylist
+                    ? video.url + '&list=' + this.$route.query.list + '&index=' + (index.valueOf() + 1)
+                    : video.url
+            "
+        >
             <img :height="height" :width="width" style="width: 100%" :src="video.thumbnail" alt="" loading="lazy" />
             <div class="uk-position-relative">
                 <span
@@ -36,7 +43,7 @@
 
         <div class="uk-align-right" style="margin-left: 0; margin-bottom: 0; display: inline-block; width: 10%">
             <router-link
-                :to="video.url + '&listen=1'"
+                :to="video.url + 'en=1'"
                 :aria-label="'Listen to ' + video.title"
                 :title="'Listen to ' + video.title"
             >
@@ -96,6 +103,14 @@ export default {
                 return {};
             },
         },
+        playlist: {
+            type: Object,
+            default: () => {
+                return {};
+            },
+        },
+        isPlaylist: Boolean,
+        index: Number,
         height: { type: String, default: "118" },
         width: { type: String, default: "210" },
         hideChannel: { type: Boolean, default: false },
diff --git a/src/components/WatchVideo.vue b/src/components/WatchVideo.vue
index 2f472e3d..291dfb57 100644
--- a/src/components/WatchVideo.vue
+++ b/src/components/WatchVideo.vue
@@ -17,6 +17,8 @@
             <Player
                 ref="videoPlayer"
                 :video="video"
+                :playlist="playlist"
+                :isPlaylist="isPlaylist"
                 :sponsors="sponsors"
                 :selected-auto-play="selectedAutoPlay"
                 :selected-auto-loop="selectedAutoLoop"
@@ -131,13 +133,20 @@
                     {{ showRecs ? $t("actions.minimize_recommendations") : $t("actions.show_recommendations") }}
                 </a>
                 <div
-                    v-for="related in isPlaylist ? playlist.relatedStreams : video.relatedStreams"
+                    v-for="(related, index) in isPlaylist ? playlist.relatedStreams : video.relatedStreams"
                     v-show="showRecs || !smallView"
                     :key="related.url"
                     class="uk-tile-default uk-width-auto"
                     :style="[{ background: backgroundColor }]"
                 >
-                    <VideoItem :video="related" height="94" width="168" />
+                    <VideoItem
+                        :video="related"
+                        :playlist="playlist"
+                        :index="index"
+                        height="94"
+                        width="168"
+                        :isPlaylist="isPlaylist"
+                    />
                 </div>
                 <hr class="uk-hidden@s" />
             </div>
@@ -168,6 +177,7 @@ export default {
             playlist: {
                 title: "Loading...",
             },
+            index: null,
             sponsors: null,
             selectedAutoLoop: false,
             selectedAutoPlay: null,
@@ -194,7 +204,7 @@ export default {
             return String(_this.$route.path).indexOf("/embed/") == 0;
         },
         isPlaylist(_this) {
-            return _this.$route.query.list;
+            return !!_this.$route.query.list;
         },
         uploadDate(_this) {
             return new Date(_this.video.uploadDate).toLocaleString(undefined, {
@@ -234,7 +244,10 @@ export default {
             })();
             if (this.active) this.$refs.videoPlayer.loadVideo();
         });
-        this.getPlaylistData();
+        if (this.isPlaylist) {
+            this.getPlaylistData();
+            this.index = this.$route.query.index;
+        }
         this.getSponsors();
         if (!this.isEmbed && this.getPreferenceBoolean("comments", true)) this.getComments();
         window.addEventListener("resize", () => {