Option to prioritize unwatched videos when autoplaying

src/components/PreferencesPage.vue

@@ -45,6 +45,25 @@
             @change="onChange($event)"
         />
     </label>
+    <label v-if="autoPlayVideo" class="pref" for="chkPriorityAutoPlay">
+        <div class="flex items-center">
+            <strong v-t="'actions.priority_autoplay'" />
+            <font-awesome-icon icon="circle-question" class="ml-2 peer" />
+            <div class="peer hidden peer-hover:block relative w-0 h-0">
+                <div
+                    class="absolute sm:min-w-xs min-w-[12rem] bottom-5 bg-black/80 rounded p-2"
+                    v-t="'actions.priority_autoplay_tooltip'"
+                />
+            </div>
+        </div>
+        <input
+            id="chkPriorityAutoPlay"
+            v-model="priorityAutoPlay"
+            class="checkbox"
+            type="checkbox"
+            @change="onChange($event)"
+        />
+    </label>
     <label class="pref" for="chkAudioOnly">
         <strong v-t="'actions.audio_only'" />
         <input id="chkAudioOnly" v-model="listen" class="checkbox" type="checkbox" @change="onChange($event)" />
@@ -346,6 +365,7 @@ export default {
             minSegmentLength: 0,
             selectedTheme: "dark",
             autoPlayVideo: true,
+            priorityAutoPlay: false,
             listen: false,
             resolutions: [144, 240, 360, 480, 720, 1080, 1440, 2160, 4320],
             defaultQuality: 0,
@@ -461,6 +481,7 @@ export default {
             this.minSegmentLength = Math.max(this.getPreferenceNumber("minSegmentLength", 0), 0);
             this.selectedTheme = this.getPreferenceString("theme", "dark");
             this.autoPlayVideo = this.getPreferenceBoolean("playerAutoPlay", true);
+            this.priorityAutoPlay = this.getPreferenceBoolean("priorityAutoPlay", false);
             this.listen = this.getPreferenceBoolean("listen", false);
             this.defaultQuality = Number(localStorage.getItem("quality"));
             this.bufferingGoal = Math.max(Number(localStorage.getItem("bufferGoal")), 10);
@@ -515,6 +536,7 @@ export default {
                 localStorage.setItem("minSegmentLength", this.minSegmentLength);
                 localStorage.setItem("theme", this.selectedTheme);
                 localStorage.setItem("playerAutoPlay", this.autoPlayVideo);
+                localStorage.setItem("priorityAutoPlay", this.priorityAutoPlay);
                 localStorage.setItem("listen", this.listen);
                 localStorage.setItem("quality", this.defaultQuality);
                 localStorage.setItem("bufferGoal", this.bufferingGoal);

src/components/VideoPlayer.vue

@@ -38,6 +38,12 @@ export default {
                 return {};
             },
         },
+        nextVideo: {
+            type: Object,
+            default: () => {
+                return {};
+            },
+        },
         playlist: {
             type: Object,
             default: null,
@@ -611,7 +617,8 @@ export default {
         },
         navigateNext() {
             const params = this.$route.query;
-            let url = this.playlist?.relatedStreams?.[this.index]?.url ?? this.video.relatedStreams[0].url;
+            const relatedUrl = this.nextVideo?.url ?? this.video.relatedStreams[0].url;
+            let url = this.playlist?.relatedStreams?.[this.index]?.url ?? relatedUrl;
             const searchParams = new URLSearchParams();
             for (var param in params)
                 switch (param) {

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,13 +246,15 @@ export default {
         ShareModal,
         PlaylistVideos,
         WatchOnYouTubeButton,
+        VideoItem,
     },
     data() {
         const smallViewQuery = window.matchMedia("(max-width: 640px)");
         return {
             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>

src/locales/en.json

@@ -49,6 +49,8 @@
         "dark": "Dark",
         "light": "Light",
         "autoplay_video": "Autoplay Video",
+        "priority_autoplay": "Priority Autoplay",
+        "priority_autoplay_tooltip": "Prioritize unwatched videos from the same channel when selecting next video from related streams.",
         "audio_only": "Audio Only",
         "default_quality": "Default Quality",
         "buffering_goal": "Buffering Goal (in seconds)",

src/main.js

@@ -21,6 +21,7 @@ import {
     faServer,
     faDonate,
     faBookmark,
+    faCircleQuestion,
 } from "@fortawesome/free-solid-svg-icons";
 import { faGithub, faBitcoin, faYoutube } from "@fortawesome/free-brands-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
@@ -48,6 +49,7 @@ library.add(
     faServer,
     faDonate,
     faBookmark,
+    faCircleQuestion,
 );
 
 import router from "@/router/router.js";