From 10ba5891a36812a422bf5e92d4011cebe28e91d3 Mon Sep 17 00:00:00 2001
From: Alin <ai6@tuta.io>
Date: Tue, 14 Feb 2023 17:51:01 +0000
Subject: [PATCH 1/5] prioritize unwatched videos from the same channel

---
 src/components/VideoPlayer.vue | 45 +++++++++++++++++++++++++++++++++-
 1 file changed, 44 insertions(+), 1 deletion(-)

diff --git a/src/components/VideoPlayer.vue b/src/components/VideoPlayer.vue
index 7a3012ac8b..c7f7b69558 100644
--- a/src/components/VideoPlayer.vue
+++ b/src/components/VideoPlayer.vue
@@ -51,6 +51,7 @@ export default {
             lastUpdate: new Date().getTime(),
             initialSeekComplete: false,
             destroying: false,
+            nextVideo: null,
         };
     },
     computed: {
@@ -395,6 +396,7 @@ export default {
                     }
                 });
             }
+            this.setNextVideo();
 
             //TODO: Add sponsors on seekbar: https://github.com/ajayyy/SponsorBlock/blob/e39de9fd852adb9196e0358ed827ad38d9933e29/src/js-components/previewBar.ts#L12
         },
@@ -585,9 +587,50 @@ 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;
-            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) {

From f4b370945a1012c4e1a697a675dbbe8061a729f7 Mon Sep 17 00:00:00 2001
From: Alin <ai6@tuta.io>
Date: Wed, 15 Feb 2023 12:34:33 +0000
Subject: [PATCH 2/5] add setting

---
 src/components/PreferencesPage.vue | 22 ++++++++++++++++++++++
 src/components/VideoPlayer.vue     |  7 ++++++-
 src/locales/en.json                |  2 ++
 src/main.js                        |  2 ++
 4 files changed, 32 insertions(+), 1 deletion(-)

diff --git a/src/components/PreferencesPage.vue b/src/components/PreferencesPage.vue
index 507c598ac9..886251f806 100644
--- a/src/components/PreferencesPage.vue
+++ b/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)" />
@@ -403,6 +422,7 @@ export default {
             showMarkers: true,
             selectedTheme: "dark",
             autoPlayVideo: true,
+            priorityAutoPlay: false,
             listen: false,
             resolutions: [144, 240, 360, 480, 720, 1080, 1440, 2160, 4320],
             defaultQuality: 0,
@@ -548,6 +568,7 @@ export default {
             this.showMarkers = this.getPreferenceBoolean("showMarkers", true);
             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);
@@ -609,6 +630,7 @@ export default {
                 localStorage.setItem("showMarkers", this.showMarkers);
                 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);
diff --git a/src/components/VideoPlayer.vue b/src/components/VideoPlayer.vue
index c7f7b69558..c9167dcfb6 100644
--- a/src/components/VideoPlayer.vue
+++ b/src/components/VideoPlayer.vue
@@ -58,6 +58,9 @@ export default {
         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(",");
@@ -396,7 +399,9 @@ export default {
                     }
                 });
             }
-            this.setNextVideo();
+            if (this.priorityAutoPlay) {
+                this.setNextVideo();
+            }
 
             //TODO: Add sponsors on seekbar: https://github.com/ajayyy/SponsorBlock/blob/e39de9fd852adb9196e0358ed827ad38d9933e29/src/js-components/previewBar.ts#L12
         },
diff --git a/src/locales/en.json b/src/locales/en.json
index 1f9e94d4d3..b9a2398a22 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -45,6 +45,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)",
diff --git a/src/main.js b/src/main.js
index 19a037de7a..4194685b9e 100644
--- a/src/main.js
+++ b/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";

From 6a6afa1f9633d7e72e21056649f58d873e25cc41 Mon Sep 17 00:00:00 2001
From: Alin <ai6@tuta.io>
Date: Fri, 17 Feb 2023 12:21:15 +0000
Subject: [PATCH 3/5] show "Next up" in related.

---
 src/components/VideoPlayer.vue | 53 ++++------------------------
 src/components/WatchVideo.vue  | 63 +++++++++++++++++++++++++++++++++-
 2 files changed, 68 insertions(+), 48 deletions(-)

diff --git a/src/components/VideoPlayer.vue b/src/components/VideoPlayer.vue
index 51fd2c307e..dd2ac58305 100644
--- a/src/components/VideoPlayer.vue
+++ b/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;
diff --git a/src/components/WatchVideo.vue b/src/components/WatchVideo.vue
index 0f7c5d6a78..e9398c29fc 100644
--- a/src/components/WatchVideo.vue
+++ b/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>

From d90e865e0d6774454dee1ab3700fcefabf63f107 Mon Sep 17 00:00:00 2001
From: vr10t <ai6@tuta.io>
Date: Sat, 25 Feb 2023 06:29:32 +0000
Subject: [PATCH 4/5] change preferences

---
 src/components/PreferencesPage.vue | 36 +++++++++--------
 src/components/WatchVideo.vue      | 62 +++++++++++++-----------------
 src/locales/en.json                |  4 +-
 src/main.js                        | 29 ++++++++------
 4 files changed, 66 insertions(+), 65 deletions(-)

diff --git a/src/components/PreferencesPage.vue b/src/components/PreferencesPage.vue
index edef9d4b71..722f5e1016 100644
--- a/src/components/PreferencesPage.vue
+++ b/src/components/PreferencesPage.vue
@@ -45,20 +45,21 @@
             @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>
+    <label v-if="autoPlayVideo" class="pref" for="chkAutoPlayPreferUnwatched">
+        <strong v-t="'actions.autoplay_prefer_unwatched'" />
+        <input
+            id="chkAutoPlayPreferUnwatched"
+            v-model="autoPlayPreferUnwatched"
+            class="checkbox"
+            type="checkbox"
+            @change="onChange($event)"
+        />
+    </label>
+    <label v-if="autoPlayVideo" class="pref" for="chkAutoPlayPreferSameAuthor">
+        <strong v-t="'actions.autoplay_prefer_same_author'" />
         <input
-            id="chkPriorityAutoPlay"
-            v-model="priorityAutoPlay"
+            id="chkAutoPlayPreferSameAuthor"
+            v-model="autoPlayPreferSameAuthor"
             class="checkbox"
             type="checkbox"
             @change="onChange($event)"
@@ -365,7 +366,8 @@ export default {
             minSegmentLength: 0,
             selectedTheme: "dark",
             autoPlayVideo: true,
-            priorityAutoPlay: false,
+            autoPlayPreferUnwatched: true,
+            autoPlayPreferSameAuthor: false,
             listen: false,
             resolutions: [144, 240, 360, 480, 720, 1080, 1440, 2160, 4320],
             defaultQuality: 0,
@@ -481,7 +483,8 @@ 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.autoPlayPreferUnwatched = this.getPreferenceBoolean("playerAutoPlayUnwatched", true);
+            this.autoPlayPreferSameAuthor = this.getPreferenceBoolean("playerAutoPlaySameAuthor", false);
             this.listen = this.getPreferenceBoolean("listen", false);
             this.defaultQuality = Number(localStorage.getItem("quality"));
             this.bufferingGoal = Math.max(Number(localStorage.getItem("bufferGoal")), 10);
@@ -536,7 +539,8 @@ export default {
                 localStorage.setItem("minSegmentLength", this.minSegmentLength);
                 localStorage.setItem("theme", this.selectedTheme);
                 localStorage.setItem("playerAutoPlay", this.autoPlayVideo);
-                localStorage.setItem("priorityAutoPlay", this.priorityAutoPlay);
+                localStorage.setItem("playerAutoPlayUnwatched", this.autoPlayPreferUnwatched);
+                localStorage.setItem("playerAutoPlaySameAuthor", this.autoPlayPreferSameAuthor);
                 localStorage.setItem("listen", this.listen);
                 localStorage.setItem("quality", this.defaultQuality);
                 localStorage.setItem("bufferGoal", this.bufferingGoal);
diff --git a/src/components/WatchVideo.vue b/src/components/WatchVideo.vue
index e4475f112c..e1b61b2c9b 100644
--- a/src/components/WatchVideo.vue
+++ b/src/components/WatchVideo.vue
@@ -302,8 +302,11 @@ export default {
         filteredRelatedStreams: _this => {
             return _this.video.relatedStreams?.filter(video => video.url !== _this.nextVideo?.url);
         },
-        priorityAutoPlay: _this => {
-            return _this.getPreferenceBoolean("priorityAutoPlay", true) && !_this.isEmbed;
+        preferUnwatched: _this => {
+            return _this.getPreferenceBoolean("playerAutoPlayUnwatched", true) && !_this.isEmbed;
+        },
+        preferAuthor: _this => {
+            return _this.getPreferenceBoolean("playerAutoPlaySameAuthor", false) && !_this.isEmbed;
         },
     },
     mounted() {
@@ -439,13 +442,13 @@ export default {
                         });
                         xmlDoc.querySelectorAll("br").forEach(elem => (elem.outerHTML = "\n"));
                         this.video.description = this.rewriteDescription(xmlDoc.querySelector("body").innerHTML);
-<<<<<<< HEAD
-                        if (this.priorityAutoPlay) {
-                            this.setNextVideo();
-                        }
-=======
-                        this.updateWatched(this.video.relatedStreams);
->>>>>>> fb8482b007828a48d847b7175f0ac15938adbaab
+                        this.updateWatched(this.video.relatedStreams).then(() => {
+                            if (!this.isEmbed) {
+                                if (!this.playlistId) {
+                                    this.setNextVideo();
+                                }
+                            }
+                        });
                     }
                 });
         },
@@ -580,37 +583,24 @@ 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);
+        setNextVideo() {
+            if (!this.preferUnwatched && !this.preferAuthor) {
+                this.nextVideo = this.video.relatedStreams[0];
+                return;
+            }
+            if (!this.preferUnwatched) {
+                this.nextVideo = this.video.relatedStreams.find(video => video.uploaderUrl === this.video.uploaderUrl);
+                if (!this.nextVideo) this.nextVideo = this.video.relatedStreams[0];
+                return;
             }
-            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.watched) {
+                    if (!this.preferAuthor) {
+                        this.nextVideo = video;
+                        break;
+                    }
                     if (video.uploaderUrl === this.video.uploaderUrl) {
                         this.nextVideo = video;
                         foundAuthorMatch = true;
diff --git a/src/locales/en.json b/src/locales/en.json
index db37d4d349..aa827e8bec 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -49,8 +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.",
+        "autoplay_prefer_unwatched": "Prefer unwatched videos",
+        "autoplay_prefer_same_author": "Prefer videos from the same author",
         "audio_only": "Audio Only",
         "default_quality": "Default Quality",
         "buffering_goal": "Buffering Goal (in seconds)",
diff --git a/src/main.js b/src/main.js
index aff68648ae..aa0ed100a0 100644
--- a/src/main.js
+++ b/src/main.js
@@ -21,7 +21,6 @@ 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";
@@ -49,7 +48,6 @@ library.add(
     faServer,
     faDonate,
     faBookmark,
-    faCircleQuestion,
 );
 
 import router from "@/router/router.js";
@@ -210,15 +208,24 @@ const mixin = {
             if (window.db && this.getPreferenceBoolean("watchHistory", false)) {
                 var tx = window.db.transaction("watch_history", "readonly");
                 var store = tx.objectStore("watch_history");
-                videos.map(async video => {
-                    var request = store.get(video.url.substr(-11));
-                    request.onsuccess = function (event) {
-                        if (event.target.result) {
-                            video.watched = true;
-                            video.currentTime = event.target.result.currentTime;
-                        }
-                    };
-                });
+                return Promise.all(
+                    videos.map(
+                        video =>
+                            new Promise(resolve => {
+                                var request = store.get(video.url.substr(-11));
+                                request.onsuccess = function (event) {
+                                    if (event.target.result) {
+                                        video.watched = true;
+                                        video.currentTime = event.target.result.currentTime;
+                                    }
+                                    resolve();
+                                };
+                                request.onerror = function () {
+                                    resolve();
+                                };
+                            }),
+                    ),
+                );
             }
         },
         getLocalSubscriptions() {

From fbe58aee7f5f3f23ec86f5f3699d5082f9d27102 Mon Sep 17 00:00:00 2001
From: vr10t <ai6@tuta.io>
Date: Wed, 1 Mar 2023 15:38:06 +0000
Subject: [PATCH 5/5] update preferences

---
 src/components/PreferencesPage.vue | 86 +++++++++++++++++++++---------
 src/components/WatchVideo.vue      |  6 +--
 src/locales/en.json                |  3 +-
 3 files changed, 67 insertions(+), 28 deletions(-)

diff --git a/src/components/PreferencesPage.vue b/src/components/PreferencesPage.vue
index 722f5e1016..841bd68fc4 100644
--- a/src/components/PreferencesPage.vue
+++ b/src/components/PreferencesPage.vue
@@ -45,26 +45,42 @@
             @change="onChange($event)"
         />
     </label>
-    <label v-if="autoPlayVideo" class="pref" for="chkAutoPlayPreferUnwatched">
-        <strong v-t="'actions.autoplay_prefer_unwatched'" />
-        <input
-            id="chkAutoPlayPreferUnwatched"
-            v-model="autoPlayPreferUnwatched"
-            class="checkbox"
-            type="checkbox"
-            @change="onChange($event)"
-        />
-    </label>
-    <label v-if="autoPlayVideo" class="pref" for="chkAutoPlayPreferSameAuthor">
-        <strong v-t="'actions.autoplay_prefer_same_author'" />
-        <input
-            id="chkAutoPlayPreferSameAuthor"
-            v-model="autoPlayPreferSameAuthor"
-            class="checkbox"
-            type="checkbox"
-            @change="onChange($event)"
-        />
-    </label>
+    <details v-bind:class="{ details: autoPlayNextVideo }" open>
+        <summary class="pref">
+            <label class="w-full flex items-center justify-between" for="chkAutoPlayNextVideo">
+                <strong v-t="'actions.auto_play_next_video'" />
+                <input
+                    id="chkAutoPlayNextVideo"
+                    v-model="autoPlayNextVideo"
+                    class="checkbox"
+                    type="checkbox"
+                    @change="onChange($event)"
+                />
+            </label>
+        </summary>
+        <div class="pl-4">
+            <label v-if="autoPlayNextVideo" class="pref" for="chkAutoPlayPreferUnwatched">
+                <strong v-t="'actions.autoplay_prefer_unwatched'" />
+                <input
+                    id="chkAutoPlayPreferUnwatched"
+                    v-model="autoPlayPreferUnwatched"
+                    class="checkbox"
+                    type="checkbox"
+                    @change="onChange($event)"
+                />
+            </label>
+            <label v-if="autoPlayNextVideo" class="pref" for="chkAutoPlayPreferSameAuthor">
+                <strong v-t="'actions.autoplay_prefer_same_author'" />
+                <input
+                    id="chkAutoPlayPreferSameAuthor"
+                    v-model="autoPlayPreferSameAuthor"
+                    class="checkbox"
+                    type="checkbox"
+                    @change="onChange($event)"
+                />
+            </label>
+        </div>
+    </details>
     <label class="pref" for="chkAudioOnly">
         <strong v-t="'actions.audio_only'" />
         <input id="chkAudioOnly" v-model="listen" class="checkbox" type="checkbox" @change="onChange($event)" />
@@ -366,6 +382,7 @@ export default {
             minSegmentLength: 0,
             selectedTheme: "dark",
             autoPlayVideo: true,
+            autoPlayNextVideo: true,
             autoPlayPreferUnwatched: true,
             autoPlayPreferSameAuthor: false,
             listen: false,
@@ -483,8 +500,9 @@ export default {
             this.minSegmentLength = Math.max(this.getPreferenceNumber("minSegmentLength", 0), 0);
             this.selectedTheme = this.getPreferenceString("theme", "dark");
             this.autoPlayVideo = this.getPreferenceBoolean("playerAutoPlay", true);
-            this.autoPlayPreferUnwatched = this.getPreferenceBoolean("playerAutoPlayUnwatched", true);
-            this.autoPlayPreferSameAuthor = this.getPreferenceBoolean("playerAutoPlaySameAuthor", false);
+            this.autoPlayNextVideo = this.getPreferenceBoolean("autoplay", true);
+            this.autoPlayPreferUnwatched = this.getPreferenceBoolean("autoPlayUnwatched", true);
+            this.autoPlayPreferSameAuthor = this.getPreferenceBoolean("autoPlaySameAuthor", false);
             this.listen = this.getPreferenceBoolean("listen", false);
             this.defaultQuality = Number(localStorage.getItem("quality"));
             this.bufferingGoal = Math.max(Number(localStorage.getItem("bufferGoal")), 10);
@@ -539,8 +557,9 @@ export default {
                 localStorage.setItem("minSegmentLength", this.minSegmentLength);
                 localStorage.setItem("theme", this.selectedTheme);
                 localStorage.setItem("playerAutoPlay", this.autoPlayVideo);
-                localStorage.setItem("playerAutoPlayUnwatched", this.autoPlayPreferUnwatched);
-                localStorage.setItem("playerAutoPlaySameAuthor", this.autoPlayPreferSameAuthor);
+                localStorage.setItem("autoplay", this.autoPlayNextVideo);
+                localStorage.setItem("autoPlayUnwatched", this.autoPlayPreferUnwatched);
+                localStorage.setItem("autoPlaySameAuthor", this.autoPlayPreferSameAuthor);
                 localStorage.setItem("listen", this.listen);
                 localStorage.setItem("quality", this.defaultQuality);
                 localStorage.setItem("bufferGoal", this.bufferingGoal);
@@ -628,4 +647,23 @@ export default {
 .pref {
     @apply flex justify-between items-center my-2 mx-[15vw] lt-md:mx-[2vw];
 }
+.details summary {
+    @apply pl-4 relative cursor-pointer;
+}
+.details summary:before {
+    content: "";
+    border-width: 0.4rem;
+    border-style: solid;
+    border-color: transparent transparent transparent #fff;
+    position: absolute;
+    top: 0.4rem;
+    left: 0;
+    margin-right: 1rem;
+    transform: rotate(0);
+    transform-origin: 0.2rem 50%;
+    transition: 0.25s transform ease;
+}
+details[open] > summary:before {
+    transform: rotate(90deg);
+}
 </style>
diff --git a/src/components/WatchVideo.vue b/src/components/WatchVideo.vue
index e1b61b2c9b..69cb8e4380 100644
--- a/src/components/WatchVideo.vue
+++ b/src/components/WatchVideo.vue
@@ -208,7 +208,7 @@
                 <hr v-show="showRecs" />
                 <div v-show="showRecs">
                     <div v-if="nextVideo" class="">
-                        <p>Next up:</p>
+                        <p v-t="'video.next_up'" />
                         <VideoItem :key="nextVideo.url" :item="nextVideo" height="94" width="168" />
                     </div>
                     <ContentItem
@@ -303,10 +303,10 @@ export default {
             return _this.video.relatedStreams?.filter(video => video.url !== _this.nextVideo?.url);
         },
         preferUnwatched: _this => {
-            return _this.getPreferenceBoolean("playerAutoPlayUnwatched", true) && !_this.isEmbed;
+            return _this.getPreferenceBoolean("autoPlayUnwatched", true) && !_this.isEmbed;
         },
         preferAuthor: _this => {
-            return _this.getPreferenceBoolean("playerAutoPlaySameAuthor", false) && !_this.isEmbed;
+            return _this.getPreferenceBoolean("autoPlaySameAuthor", false) && !_this.isEmbed;
         },
     },
     mounted() {
diff --git a/src/locales/en.json b/src/locales/en.json
index aa827e8bec..1a0daeb466 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -160,7 +160,8 @@
         "live": "{0} Live",
         "shorts": "Shorts",
         "all": "All",
-        "category": "Category"
+        "category": "Category",
+        "next_up": "Next up:"
     },
     "search": {
         "did_you_mean": "Did you mean: {0}?",