Remove all direct localStorage calls.

Also: make instance changes active instantly without needing a reload.

src/Constants.js

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

src/components/Channel.vue

@@ -21,7 +21,6 @@
 </template>
 
 <script>
-import Constants from "@/Constants.js";
 import ErrorHandler from "@/components/ErrorHandler.vue";
 import VideoItem from "@/components/VideoItem.vue";
 
@@ -40,10 +39,7 @@ export default {
     },
     methods: {
         async fetchChannel() {
-            const url = 
+            const url = this.apiUrl() + "/" + this.$route.params.path + "/" + this.$route.params.channelId;
-                Constants.BASE_URL + "/" 
-                + this.$route.params.path + "/" 
-                + this.$route.params.channelId
             return await this.fetchJson(url);
         },
         async getChannelData() {
@@ -57,7 +53,7 @@ export default {
             if (this.loading || !this.channel || !this.channel.nextpage) return;
             if (window.innerHeight + window.scrollY >= document.body.offsetHeight - window.innerHeight) {
                 this.loading = true;
-                this.fetchJson(Constants.BASE_URL + "/nextpage/channel/" + this.channel.id, {
+                this.fetchJson(this.apiUrl() + "/nextpage/channel/" + this.channel.id, {
                     nextpage: this.channel.nextpage,
                 }).then(json => {
                     this.channel.relatedStreams.concat(json.relatedStreams);

src/components/Player.vue

@@ -23,9 +23,8 @@ export default {
         selectedAutoPlay: Boolean,
     },
     computed: {
-        shouldAutoPlay: () => {
+        shouldAutoPlay: _this => {
-            const value = localStorage.getItem("playerAutoPlay");
+            return _this.getPreferenceBoolean("playerAutoPlay", true);
-            return value === null || value === "true";
         },
     },
     methods: {
@@ -80,7 +79,7 @@ export default {
 
                         localPlayer.configure(
                             "streaming.bufferingGoal",
-                            Math.max(Number(localStorage.getItem("bufferGoal")), 10),
+                            Math.max(this.getPreferenceNumber("bufferGoal", 10), 10),
                         );
 
                         this.setPlayerAttrs(localPlayer, videoEl, uri, shaka);
@@ -106,7 +105,7 @@ export default {
                 });
 
                 videoEl.addEventListener("volumechange", () => {
-                    if (localStorage) localStorage.setItem("volume", videoEl.volume);
+                    this.setPreference("volume", videoEl.volume);
                 });
 
                 videoEl.addEventListener("ended", () => {
@@ -155,7 +154,7 @@ export default {
             const disableVideo = this.getPreferenceBoolean("listen", false) && !this.video.livestream;
             this.player.configure("manifest.disableVideo", disableVideo);
 
-            const quality = Number(localStorage.getItem("quality"));
+            const quality = this.getPreferenceNumber("quality", 0);
             const qualityConds = quality > 0 && (this.video.audioStreams.length > 0 || this.video.livestream);
             if (qualityConds) this.player.configure("abr.enabled", false);
 
@@ -186,7 +185,7 @@ export default {
                         subtitle.name,
                     );
                 });
-                if (localStorage) videoEl.volume = localStorage.getItem("volume") || 1;
+                videoEl.volume = this.getPreferenceNumber("volume", 1);
             });
         },
     },

src/components/Playlist.vue

@@ -31,7 +31,6 @@
 </template>
 
 <script>
-import Constants from "@/Constants.js";
 import ErrorHandler from "@/components/ErrorHandler.vue";
 import VideoItem from "@/components/VideoItem.vue";
 
@@ -50,7 +49,7 @@ export default {
     },
     methods: {
         async fetchPlaylist() {
-            return await await this.fetchJson(Constants.BASE_URL + "/playlists/" + this.$route.query.list);
+            return await await this.fetchJson(this.apiUrl() + "/playlists/" + this.$route.query.list);
         },
         async getPlaylistData() {
             this.fetchPlaylist()
@@ -61,7 +60,7 @@ export default {
             if (this.loading || !this.playlist || !this.playlist.nextpage) return;
             if (window.innerHeight + window.scrollY >= document.body.offsetHeight - window.innerHeight) {
                 this.loading = true;
-                this.fetchJson(Constants.BASE_URL + "/nextpage/playlists/" + this.$route.query.list, {
+                this.fetchJson(this.apiUrl() + "/nextpage/playlists/" + this.$route.query.list, {
                     nextpage: this.playlist.nextpage,
                 }).then(json => {
                     this.playlist.relatedStreams.concat(json.relatedStreams);

src/components/SearchResults.vue

@@ -67,8 +67,6 @@
 </template>
 
 <script>
-import Constants from "@/Constants.js";
-
 export default {
     data() {
         return {
@@ -100,7 +98,7 @@ export default {
     },
     methods: {
         async fetchResults() {
-            return await await this.fetchJson(Constants.BASE_URL + "/search", {
+            return await await this.fetchJson(this.apiUrl() + "/search", {
                 q: this.$route.query.search_query,
                 filter: this.selectedFilter,
             });
@@ -113,7 +111,7 @@ export default {
             if (this.loading || !this.results || !this.results.nextpage) return;
             if (window.innerHeight + window.scrollY >= document.body.offsetHeight - window.innerHeight) {
                 this.loading = true;
-                this.fetchJson(Constants.BASE_URL + "/nextpage/search", {
+                this.fetchJson(this.apiUrl() + "/nextpage/search", {
                     nextpage: this.results.nextpage,
                     q: this.$route.query.search_query,
                     filter: this.selectedFilter,

src/components/SearchSuggestions.vue

@@ -19,8 +19,6 @@
 </template>
 
 <script>
-import Constants from "@/Constants.js";
-
 export default {
     props: {
         searchText: String,
@@ -52,7 +50,7 @@ export default {
             }
         },
         async refreshSuggestions() {
-            this.searchSuggestions = await this.fetchJson(Constants.BASE_URL + "/suggestions", {
+            this.searchSuggestions = await this.fetchJson(this.apiUrl() + "/suggestions", {
                 query: this.searchText,
             });
             this.searchSuggestions.unshift(this.searchText);

src/components/TrendingPage.vue

@@ -16,7 +16,6 @@
 </template>
 
 <script>
-import Constants from "@/Constants.js";
 import VideoItem from "@/components/VideoItem.vue";
 
 export default {
@@ -34,7 +33,7 @@ export default {
     },
     methods: {
         async fetchTrending(region) {
-            return await this.fetchJson(Constants.BASE_URL + "/trending", {
+            return await this.fetchJson(this.apiUrl() + "/trending", {
                 region: region || "US",
             });
         },

src/components/WatchVideo.vue

@@ -106,7 +106,6 @@
 </template>
 
 <script>
-import Constants from "@/Constants.js";
 import Player from "@/components/Player.vue";
 import VideoItem from "@/components/VideoItem.vue";
 import ErrorHandler from "@/components/ErrorHandler.vue";
@@ -145,10 +144,10 @@ export default {
     },
     methods: {
         fetchVideo() {
-            return this.fetchJson(Constants.BASE_URL + "/streams/" + this.getVideoId());
+            return this.fetchJson(this.apiUrl() + "/streams/" + this.getVideoId());
         },
         async fetchSponsors() {
-            return await this.fetchJson(Constants.BASE_URL + "/sponsors/" + this.getVideoId(), {
+            return await this.fetchJson(this.apiUrl() + "/sponsors/" + this.getVideoId(), {
                 category:
                     '["' +
                     this.getPreferenceString("selectedSkip", "sponsor,interaction,selfpromo,music_offtopic").replaceAll(
@@ -159,7 +158,7 @@ export default {
             });
         },
         fetchComments() {
-            return this.fetchJson(Constants.BASE_URL + "/comments/" + this.getVideoId());
+            return this.fetchJson(this.apiUrl() + "/comments/" + this.getVideoId());
         },
         onChange() {
             this.setPreference("autoplay", this.selectedAutoPlay);
@@ -195,7 +194,7 @@ export default {
             if (this.loading || !this.comments || !this.comments.nextpage) return;
             if (window.innerHeight + window.scrollY >= this.$refs.comments.offsetHeight - window.innerHeight) {
                 this.loading = true;
-                this.fetchJson(Constants.BASE_URL + "/nextpage/comments/" + this.getVideoId(), {
+                this.fetchJson(this.apiUrl() + "/nextpage/comments/" + this.getVideoId(), {
                     url: this.comments.nextpage,
                 }).then(json => {
                     this.comments.nextpage = json.nextpage;

src/main.js

@@ -115,6 +115,18 @@ const mixin = {
                 return value;
             } else return defaultVal;
         },
+        getPreferenceNumber(key, defaultVal) {
+            var value;
+            if (
+                (value = this.$route.query[key]) !== undefined ||
+                (localStorage && (value = localStorage.getItem(key)) !== null)
+            ) {
+                return Number(value);
+            } else return defaultVal;
+        },
+        apiUrl() {
+            return this.getPreferenceString("instance", "https://pipedapi.kavin.rocks");
+        },
     },
     computed: {
         backgroundColor() {