Handle parameters more gracefully with the mixin. (#198)

src/components/Channel.vue

@@ -74,13 +74,9 @@ 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(
+                this.fetchJson(Constants.BASE_URL + "/nextpage/channels/" + this.channel.id, {
-                    Constants.BASE_URL +
+                    nextpage: this.channel.nextpage,
-                        "/nextpage/channels/" +
+                }).then(json => {
-                        this.channel.id +
-                        "?nextpage=" +
-                        encodeURIComponent(this.channel.nextpage),
-                ).then(json => {
                     this.channel.relatedStreams.concat(json.relatedStreams);
                     this.channel.nextpage = json.nextpage;
                     this.loading = false;

src/components/Playlist.vue

@@ -74,13 +74,9 @@ 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(
+                this.fetchJson(Constants.BASE_URL + "/nextpage/playlists/" + this.$route.query.list, {
-                    Constants.BASE_URL +
+                    nextpage: this.playlist.nextpage,
-                        "/nextpage/playlists/" +
+                }).then(json => {
-                        this.$route.query.list +
-                        "?nextpage=" +
-                        encodeURIComponent(this.playlist.nextpage),
-                ).then(json => {
                     this.playlist.relatedStreams.concat(json.relatedStreams);
                     this.playlist.nextpage = json.nextpage;
                     this.loading = false;

src/components/SearchResults.vue

@@ -100,13 +100,10 @@ export default {
     },
     methods: {
         async fetchResults() {
-            return await await this.fetchJson(
+            return await await this.fetchJson(Constants.BASE_URL + "/search", {
-                Constants.BASE_URL +
+                q: this.$route.query.search_query,
-                    "/search?q=" +
+                filter: this.selectedFilter,
-                    encodeURIComponent(this.$route.query.search_query) +
+            });
-                    "&filter=" +
-                    this.selectedFilter,
-            );
         },
         async updateResults() {
             document.title = this.$route.query.search_query + " - Piped";
@@ -116,16 +113,11 @@ 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(
+                this.fetchJson(Constants.BASE_URL + "/nextpage/search", {
-                    Constants.BASE_URL +
+                    nextpage: this.results.nextpage,
-                        "/nextpage/search" +
+                    q: this.$route.query.search_query,
-                        "?nextpage=" +
+                    filter: this.selectedFilter,
-                        encodeURIComponent(this.results.nextpage) +
+                }).then(json => {
-                        "&q=" +
-                        encodeURIComponent(this.$route.query.search_query) +
-                        "&filter=" +
-                        this.selectedFilter,
-                ).then(json => {
                     this.results.nextpage = json.nextpage;
                     this.results.id = json.id;
                     this.loading = false;

src/components/SearchSuggestions.vue

@@ -49,9 +49,9 @@ export default {
             }
         },
         async refreshSuggestions() {
-            this.searchSuggestions = await this.fetchJson(
+            this.searchSuggestions = await this.fetchJson(Constants.BASE_URL + "/suggestions", {
-                Constants.BASE_URL + "/suggestions?query=" + encodeURI(this.searchText),
+                query: this.searchText,
-            );
+            });
             this.searchSuggestions.unshift(this.searchText);
             this.setSelected(0);
         },

src/components/WatchVideo.vue

@@ -144,15 +144,12 @@ export default {
             return this.fetchJson(Constants.BASE_URL + "/streams/" + this.getVideoId());
         },
         async fetchSponsors() {
-            return await this.fetchJson(
+            return await this.fetchJson(Constants.BASE_URL + "/sponsors/" + this.getVideoId(), {
-                Constants.BASE_URL +
+                category:
-                    "/sponsors/" +
+                    localStorage && localStorage.getItem("selectedSkip") !== null
-                    this.getVideoId() +
+                        ? '["' + localStorage.getItem("selectedSkip").replace(",", '","') + '"]'
-                    "?category=" +
+                        : '["sponsor", "interaction", "selfpromo", "music_offtopic"]',
-                    (localStorage && localStorage.getItem("selectedSkip") !== null
+            });
-                        ? encodeURIComponent('["' + localStorage.getItem("selectedSkip").replace(",", '","') + '"]')
-                        : encodeURIComponent('["sponsor", "interaction", "selfpromo", "music_offtopic"]')),
-            );
         },
         fetchComments() {
             return this.fetchJson(Constants.BASE_URL + "/comments/" + this.getVideoId());
@@ -191,13 +188,9 @@ 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(
+                this.fetchJson(Constants.BASE_URL + "/nextpage/comments/" + this.getVideoId(), {
-                    Constants.BASE_URL +
+                    url: this.comments.nextpage,
-                        "/nextpage/comments/" +
+                }).then(json => {
-                        this.getVideoId() +
-                        "?url=" +
-                        encodeURIComponent(this.comments.nextpage),
-                ).then(json => {
                     this.comments.nextpage = json.nextpage;
                     this.loading = false;
                     json.comments.map(comment => this.comments.comments.push(comment));

src/main.js

@@ -55,7 +55,12 @@ const mixin = {
             num = parseInt(num)
             return num.toLocaleString('en-US')
         },
-        fetchJson: function (url, options) {
+        fetchJson: function (url, params, options) {
+            if (params) {
+                url = new URL(url);
+                for (var param in params)
+                    url.searchParams.set(param, params[param])
+            }
             return fetch(url, options).then(response => {
                 return response.json();
             });