show "Next up" in related.

src/components/VideoPlayer.vue

@@ -38,6 +38,12 @@ export default {
                 return {};
             },
         },
+        nextVideo: {
+            type: Object,
+            default: () => {
+                return {};
+            },
+        },
         playlist: {
             type: Object,
             default: null,
@@ -63,16 +69,12 @@ export default {
             initialSeekComplete: false,
             destroying: false,
             inSegment: false,
-            nextVideo: null,
         };
     },
     computed: {
         shouldAutoPlay: _this => {
             return _this.getPreferenceBoolean("playerAutoPlay", true) && !_this.isEmbed;
         },
-        priorityAutoPlay: _this => {
-            return _this.getPreferenceBoolean("priorityAutoPlay", true) && !_this.isEmbed;
-        },
         preferredVideoCodecs: _this => {
             var preferredVideoCodecs = [];
             const enabledCodecs = _this.getPreferenceString("enabledCodecs", "vp9,avc").split(",");
@@ -408,9 +410,6 @@ export default {
                     }
                 });
             }
-            if (this.priorityAutoPlay) {
-                this.setNextVideo();
-            }
 
             //TODO: Add sponsors on seekbar: https://github.com/ajayyy/SponsorBlock/blob/e39de9fd852adb9196e0358ed827ad38d9933e29/src/js-components/previewBar.ts#L12
         },
@@ -616,46 +615,6 @@ export default {
                 this.$refs.videoEl.currentTime = time;
             }
         },
-        async getWatchedRelatedVideos() {
-            var tx = window.db.transaction("watch_history", "readwrite");
-            var store = tx.objectStore("watch_history");
-            const results = [];
-            for (let i = 0; i < this.video.relatedStreams.length; i++) {
-                const video = this.video.relatedStreams[i];
-                const id = video.url.replace("/watch?v=", "");
-                const request = store.get(id);
-                results.push(request);
-            }
-            const data = results.map(result => {
-                return new Promise(resolve => {
-                    result.onsuccess = function (event) {
-                        const video = event.target.result;
-                        resolve(video);
-                    };
-                    result.onerror = function () {
-                        resolve(null);
-                    };
-                });
-            });
-            return Promise.all(data);
-        },
-        async setNextVideo() {
-            const data = (await this.getWatchedRelatedVideos()).filter(video => video);
-            for (let i = 0; i < this.video.relatedStreams.length; i++) {
-                const video = this.video.relatedStreams[i];
-                const id = video.url.replace("/watch?v=", "");
-                const watched = data.find(video => video.videoId === id);
-                if (!watched) {
-                    if (video.uploaderUrl === this.video.uploaderUrl) {
-                        this.nextVideo = video;
-                        return;
-                    }
-                    this.nextVideo = video;
-                    return;
-                }
-                this.nextVideo = this.video.relatedStreams[0];
-            }
-        },
         navigateNext() {
             const params = this.$route.query;
             const relatedUrl = this.nextVideo?.url ?? this.video.relatedStreams[0].url;

src/components/WatchVideo.vue

@@ -20,6 +20,7 @@
                 <VideoPlayer
                     ref="videoPlayer"
                     :video="video"
+                    :next-video="nextVideo"
                     :sponsors="sponsors"
                     :playlist="playlist"
                     :index="index"
@@ -203,8 +204,12 @@
                 />
                 <hr v-show="showRecs" />
                 <div v-show="showRecs">
+                    <div v-if="nextVideo" class="">
+                        <p>Next up:</p>
+                        <VideoItem :key="nextVideo.url" :item="nextVideo" height="94" width="168" />
+                    </div>
                     <ContentItem
-                        v-for="related in video.relatedStreams"
+                        v-for="related in filteredRelatedStreams"
                         :key="related.url"
                         :item="related"
                         height="94"
@@ -227,6 +232,7 @@ import PlaylistAddModal from "./PlaylistAddModal.vue";
 import ShareModal from "./ShareModal.vue";
 import PlaylistVideos from "./PlaylistVideos.vue";
 import WatchOnYouTubeButton from "./WatchOnYouTubeButton.vue";
+import VideoItem from "./VideoItem.vue";
 
 export default {
     name: "App",
@@ -240,6 +246,7 @@ export default {
         ShareModal,
         PlaylistVideos,
         WatchOnYouTubeButton,
+        VideoItem,
     },
     data() {
         const smallViewQuery = window.matchMedia("(max-width: 640px)");
@@ -247,6 +254,7 @@ export default {
             video: {
                 title: "Loading...",
             },
+            nextVideo: null,
             playlistId: null,
             playlist: null,
             index: null,
@@ -288,6 +296,12 @@ export default {
                 year: "numeric",
             });
         },
+        filteredRelatedStreams: _this => {
+            return _this.video.relatedStreams?.filter(video => video.url !== _this.nextVideo?.url);
+        },
+        priorityAutoPlay: _this => {
+            return _this.getPreferenceBoolean("priorityAutoPlay", true) && !_this.isEmbed;
+        },
     },
     mounted() {
         // check screen size
@@ -422,6 +436,9 @@ export default {
                         });
                         xmlDoc.querySelectorAll("br").forEach(elem => (elem.outerHTML = "\n"));
                         this.video.description = this.rewriteDescription(xmlDoc.querySelector("body").innerHTML);
+                        if (this.priorityAutoPlay) {
+                            this.setNextVideo();
+                        }
                     }
                 });
         },
@@ -556,6 +573,50 @@ export default {
         onTimeUpdate(time) {
             this.currentTime = time;
         },
+        async getWatchedRelatedVideos() {
+            var tx = window.db.transaction("watch_history", "readwrite");
+            var store = tx.objectStore("watch_history");
+            const results = [];
+            for (let i = 0; i < this.video.relatedStreams.length; i++) {
+                const video = this.video.relatedStreams[i];
+                const id = video.url.replace("/watch?v=", "");
+                const request = store.get(id);
+                results.push(request);
+            }
+            const data = results.map(result => {
+                return new Promise(resolve => {
+                    result.onsuccess = function (event) {
+                        const video = event.target.result;
+                        resolve(video);
+                    };
+                    result.onerror = function () {
+                        resolve(null);
+                    };
+                });
+            });
+            return Promise.all(data);
+        },
+        async setNextVideo() {
+            const data = (await this.getWatchedRelatedVideos()).filter(video => video);
+            for (let i = 0; i < this.video.relatedStreams.length; i++) {
+                let foundAuthorMatch = false;
+                const video = this.video.relatedStreams[i];
+                const id = video.url.replace("/watch?v=", "");
+                const watched = data.find(video => video.videoId === id);
+                if (!watched) {
+                    if (video.uploaderUrl === this.video.uploaderUrl) {
+                        this.nextVideo = video;
+                        foundAuthorMatch = true;
+                        break;
+                    } else if (!foundAuthorMatch) {
+                        this.nextVideo = video;
+                    }
+                }
+                if (!this.nextVideo) {
+                    this.nextVideo = this.video.relatedStreams[0];
+                }
+            }
+        },
     },
 };
 </script>