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] 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 722f5e10..841bd68f 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 e1b61b2c..69cb8e43 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 aa827e8b..1a0daeb4 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}?",