Cleanup + Allow setting some parameters over query.

src/Constants.js

@@ -1,4 +1,3 @@
 export default {
     BASE_URL: localStorage.getItem("instance") || "https://pipedapi.kavin.rocks",
-    AUTO_PLAY: localStorage.getItem("autoplay") === "true",
 };

src/components/Player.vue

@@ -152,9 +152,7 @@ export default {
 
             this.player = player;
 
-            const disableVideo =
+            const disableVideo = this.getPreferenceBoolean("listen", false) && !this.video.livestream;
-                ((localStorage && localStorage.getItem("audioOnly") === "true") || this.$route.query.listen === "1") &&
-                !this.video.livestream;
             this.player.configure("manifest.disableVideo", disableVideo);
 
             const quality = Number(localStorage.getItem("quality"));

src/components/Preferences.vue

@@ -44,7 +44,7 @@
     <br />
     <b>Audio Only</b>
     <br />
-    <input class="uk-checkbox" v-model="audioOnly" @change="onChange($event)" type="checkbox" />
+    <input class="uk-checkbox" v-model="listen" @change="onChange($event)" type="checkbox" />
     <br />
     <b>Default Quality</b>
     <br />
@@ -104,13 +104,15 @@ export default {
             skipMusicOffTopic: true,
             selectedTheme: "dark",
             autoPlayVideo: true,
-            audioOnly: false,
+            listen: false,
             resolutions: [144, 240, 360, 480, 720, 1080, 1440, 2160, 4320],
             defaultQuality: 0,
             bufferingGoal: 10,
         };
     },
     mounted() {
+        if (Object.keys(this.$route.query).length > 0) this.$router.replace({ query: {} });
+
         fetch("https://raw.githubusercontent.com/wiki/TeamPiped/Piped-Frontend/Instances.md")
             .then(resp => resp.text())
             .then(body => {
@@ -136,7 +138,7 @@ export default {
         if (localStorage) {
             this.selectedInstance = localStorage.getItem("instance") || "https://pipedapi.kavin.rocks";
 
-            this.sponsorBlock = localStorage.getItem("sponsorblock") || true;
+            this.sponsorBlock = this.getPreferenceBoolean("sponsorblock", true);
             if (localStorage.getItem("selectedSkip") !== null) {
                 var skipList = localStorage.getItem("selectedSkip").split(",");
                 this.skipSponsor = this.skipIntro = this.skipOutro = this.skipInteraction = this.skipSelfPromo = this.skipMusicOffTopic = false;
@@ -167,10 +169,9 @@ export default {
                 });
             }
 
-            this.selectedTheme = localStorage.getItem("theme") || "dark";
+            this.selectedTheme = this.getPreferenceString("theme", "dark");
-            this.autoPlayVideo =
+            this.autoPlayVideo = this.getPreferenceBoolean(localStorage.getItem("playerAutoPlay"), true);
-                localStorage.getItem("playerAutoPlay") === null || localStorage.getItem("playerAutoPlay") === "true";
+            this.listen = this.getPreferenceBoolean("listen", false);
-            this.audioOnly = localStorage.getItem("audioOnly") === "true";
             this.defaultQuality = Number(localStorage.getItem("quality"));
             this.bufferingGoal = Math.max(Number(localStorage.getItem("bufferGoal")), 10);
         }
@@ -180,7 +181,7 @@ export default {
             if (localStorage) {
                 var shouldReload = false;
 
-                if (localStorage.getItem("playerAutoPlay") !== this.autoPlayVideo) shouldReload = true;
+                if (this.getPreferenceString("theme", "dark") !== this.selectedTheme) shouldReload = true;
 
                 localStorage.setItem("instance", this.selectedInstance);
                 localStorage.setItem("sponsorblock", this.sponsorBlock);
@@ -196,7 +197,7 @@ export default {
 
                 localStorage.setItem("theme", this.selectedTheme);
                 localStorage.setItem("playerAutoPlay", this.autoPlayVideo);
-                localStorage.setItem("audioOnly", this.audioOnly);
+                localStorage.setItem("listen", this.listen);
                 localStorage.setItem("quality", this.defaultQuality);
                 localStorage.setItem("bufferGoal", this.bufferingGoal);
 

src/components/WatchVideo.vue

@@ -125,7 +125,7 @@ export default {
         };
     },
     mounted() {
-        this.selectedAutoPlay = Constants.AUTO_PLAY;
+        this.selectedAutoPlay = this.getPreferenceBoolean("autoplay", true);
         this.getVideoData();
         this.getSponsors();
         this.getComments();
@@ -150,16 +150,19 @@ export default {
         async fetchSponsors() {
             return await this.fetchJson(Constants.BASE_URL + "/sponsors/" + this.getVideoId(), {
                 category:
-                    localStorage && localStorage.getItem("selectedSkip") !== null
+                    '["' +
-                        ? '["' + localStorage.getItem("selectedSkip").replace(",", '","') + '"]'
+                    this.getPreferenceString("selectedSkip", "sponsor,interaction,selfpromo,music_offtopic").replaceAll(
-                        : '["sponsor", "interaction", "selfpromo", "music_offtopic"]',
+                        ",",
+                        '","',
+                    ) +
+                    '"]',
             });
         },
         fetchComments() {
             return this.fetchJson(Constants.BASE_URL + "/comments/" + this.getVideoId());
         },
         onChange() {
-            if (localStorage) localStorage.setItem("autoplay", this.selectedAutoPlay);
+            this.setPreference("autoplay", this.selectedAutoPlay);
         },
         async getVideoData() {
             this.fetchVideo()
@@ -182,7 +185,7 @@ export default {
                 });
         },
         async getSponsors() {
-            if (!localStorage || localStorage.getItem("sponsorblock") !== false)
+            if (this.getPreferenceBoolean("sponsorblock", true))
                 this.fetchSponsors().then(data => (this.sponsors = data));
         },
         async getComments() {

src/main.js

@@ -67,23 +67,46 @@ const mixin = {
         },
         purifyHTML(original) {
             return DOMPurify.sanitize(original);
+        },
+        setPreference(key, value) {
+            if (localStorage) localStorage.setItem(key, value)
+        },
+        getPreferenceBoolean(key, defaultVal) {
+            var value;
+            if ((value = this.$route.query[key]) !== undefined || (localStorage && (value = localStorage.getItem(key)) !== null)) {
+                switch (String(value)) {
+                    case "true":
+                    case "1":
+                    case "on":
+                    case "yes":
+                        return true;
+                    default:
+                        return false;
                 }
+            } else return defaultVal;
+        },
+        getPreferenceString(key, defaultVal) {
+            var value;
+            if ((value = this.$route.query[key]) !== undefined || (localStorage && (value = localStorage.getItem(key)) !== null)) {
+                return value;
+            } else return defaultVal;
+        },
     },
     computed: {
         backgroundColor() {
-            return localStorage.getItem("theme") === "light" ? "#fff" : "#0b0e0f"
+            return this.getPreferenceString("theme", "dark") === "light" ? "#fff" : "#0b0e0f"
         },
         secondaryBackgroundColor() {
-            return localStorage.getItem("theme") === "light" ? "#e5e5e5" : "#242727"
+            return this.getPreferenceString("theme", "dark") === "light" ? "#e5e5e5" : "#242727"
         },
         foregroundColor() {
-            return localStorage.getItem("theme") === "light" ? "#15191a" : "#0b0e0f"
+            return this.getPreferenceString("theme", "dark") === "light" ? "#15191a" : "#0b0e0f"
         },
         secondaryForegroundColor() {
-            return localStorage.getItem("theme") === "light" ? "#666" : "#393d3d"
+            return this.getPreferenceString("theme", "dark") === "light" ? "#666" : "#393d3d"
         },
         darkMode() {
-            return localStorage.getItem('theme') !== 'light'
+            return this.getPreferenceString("theme", "dark") !== 'light'
         }
     }
 };