diff --git a/src/App.vue b/src/App.vue
index bfae6dd..525a85e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -36,7 +36,7 @@ export default {
         case 'trending':
           break
         case 'feed':
-          this.$router.push('/feed')
+          this.$router.replace('/feed')
           break
         default:
           break
diff --git a/src/components/Channel.vue b/src/components/Channel.vue
index 8ba6dd1..11da53d 100644
--- a/src/components/Channel.vue
+++ b/src/components/Channel.vue
@@ -31,86 +31,86 @@
 </template>
 
 <script>
-import ErrorHandler from "@/components/ErrorHandler.vue";
-import VideoItem from "@/components/VideoItem.vue";
+import ErrorHandler from '@/components/ErrorHandler.vue'
+import VideoItem from '@/components/VideoItem.vue'
 
 export default {
-    data() {
-        return {
-            channel: null,
-            subscribed: false,
-        };
-    },
-    mounted() {
-        this.getChannelData();
-    },
-    activated() {
-        window.addEventListener("scroll", this.handleScroll);
-    },
-    deactivated() {
-        window.removeEventListener("scroll", this.handleScroll);
-    },
-    methods: {
-        async fetchSubscribedStatus() {
-            this.fetchJson(
-                this.apiUrl() + "/subscribed",
-                {
-                    channelId: this.channel.id,
-                },
-                {
-                    headers: {
-                        Authorization: this.getAuthToken(),
-                    },
-                },
-            ).then(json => {
-                this.subscribed = json.subscribed;
-            });
-        },
-        async fetchChannel() {
-            const url = this.apiUrl() + "/" + this.$route.params.path + "/" + this.$route.params.channelId;
-            return await this.fetchJson(url);
-        },
-        async getChannelData() {
-            this.fetchChannel()
-                .then(data => (this.channel = data))
-                .then(() => {
-                    if (!this.channel.error) {
-                        document.title = this.channel.name + " - Piped";
-                        if (this.authenticated) this.fetchSubscribedStatus();
-                    }
-                });
-        },
-        handleScroll() {
-            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.apiUrl() + "/nextpage/channel/" + this.channel.id, {
-                    nextpage: this.channel.nextpage,
-                }).then(json => {
-                    this.channel.relatedStreams.concat(json.relatedStreams);
-                    this.channel.nextpage = json.nextpage;
-                    this.loading = false;
-                    json.relatedStreams.map(stream => this.channel.relatedStreams.push(stream));
-                });
-            }
-        },
-        subscribeHandler() {
-            this.fetchJson(this.apiUrl() + (this.subscribed ? "/unsubscribe" : "/subscribe"), null, {
-                method: "POST",
-                body: JSON.stringify({
-                    channelId: this.channel.id,
-                }),
-                headers: {
-                    Authorization: this.getAuthToken(),
-                    "Content-Type": "application/json",
-                },
-            });
-            this.subscribed = !this.subscribed;
+  data () {
+    return {
+      channel: null,
+      subscribed: false
+    }
+  },
+  mounted () {
+    this.getChannelData()
+  },
+  activated () {
+    window.addEventListener('scroll', this.handleScroll)
+  },
+  deactivated () {
+    window.removeEventListener('scroll', this.handleScroll)
+  },
+  methods: {
+    async fetchSubscribedStatus () {
+      this.fetchJson(
+        this.apiUrl() + '/subscribed',
+        {
+          channelId: this.channel.id
         },
+        {
+          headers: {
+            Authorization: this.getAuthToken()
+          }
+        }
+      ).then(json => {
+        this.subscribed = json.subscribed
+      })
     },
-    components: {
-        ErrorHandler,
-        VideoItem,
+    async fetchChannel () {
+      const url = this.apiUrl() + '/' + this.$route.params.path + '/' + this.$route.params.channelId
+      return await this.fetchJson(url)
     },
-};
+    async getChannelData () {
+      this.fetchChannel()
+        .then(data => (this.channel = data))
+        .then(() => {
+          if (!this.channel.error) {
+            document.title = this.channel.name + ' - Piped'
+            if (this.authenticated) this.fetchSubscribedStatus()
+          }
+        })
+    },
+    handleScroll () {
+      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.apiUrl() + '/nextpage/channel/' + this.channel.id, {
+          nextpage: this.channel.nextpage
+        }).then(json => {
+          this.channel.relatedStreams.concat(json.relatedStreams)
+          this.channel.nextpage = json.nextpage
+          this.loading = false
+          json.relatedStreams.map(stream => this.channel.relatedStreams.push(stream))
+        })
+      }
+    },
+    subscribeHandler () {
+      this.fetchJson(this.apiUrl() + (this.subscribed ? '/unsubscribe' : '/subscribe'), null, {
+        method: 'POST',
+        body: JSON.stringify({
+          channelId: this.channel.id
+        }),
+        headers: {
+          Authorization: this.getAuthToken(),
+          'Content-Type': 'application/json'
+        }
+      })
+      this.subscribed = !this.subscribed
+    }
+  },
+  components: {
+    ErrorHandler,
+    VideoItem
+  }
+}
 </script>
diff --git a/src/components/ErrorHandler.vue b/src/components/ErrorHandler.vue
index a32a187..40b4c8c 100644
--- a/src/components/ErrorHandler.vue
+++ b/src/components/ErrorHandler.vue
@@ -8,9 +8,9 @@
 
 <script>
 export default {
-    props: {
-        error: String,
-        message: String,
-    },
-};
+  props: {
+    error: String,
+    message: String
+  }
+}
 </script>
diff --git a/src/components/FeedPage.vue b/src/components/FeedPage.vue
index 5b95ce8..e38c905 100644
--- a/src/components/FeedPage.vue
+++ b/src/components/FeedPage.vue
@@ -57,27 +57,27 @@
 
 <script>
 export default {
-    data() {
-        return {
-            videos: [],
-        };
-    },
-    mounted() {
-        document.title = "Feed - Piped";
+  data () {
+    return {
+      videos: []
+    }
+  },
+  mounted () {
+    document.title = 'Feed - Piped'
 
-        this.fetchFeed().then(videos => (this.videos = videos));
-    },
-    methods: {
-        async fetchFeed() {
-            return await this.fetchJson(this.apiUrl() + "/feed", {
-                authToken: this.getAuthToken(),
-            });
-        },
-    },
-    computed: {
-        getRssUrl(_this) {
-            return _this.apiUrl() + "/feed/rss?authToken=" + _this.getAuthToken();
-        },
-    },
-};
+    this.fetchFeed().then(videos => (this.videos = videos))
+  },
+  methods: {
+    async fetchFeed () {
+      return await this.fetchJson(this.apiUrl() + '/feed', {
+        authToken: this.getAuthToken()
+      })
+    }
+  },
+  computed: {
+    getRssUrl (_this) {
+      return _this.apiUrl() + '/feed/rss?authToken=' + _this.getAuthToken()
+    }
+  }
+}
 </script>
diff --git a/src/components/ImportPage.vue b/src/components/ImportPage.vue
index f898cd7..ca6be9f 100644
--- a/src/components/ImportPage.vue
+++ b/src/components/ImportPage.vue
@@ -59,71 +59,71 @@
 
 <script>
 export default {
-    data() {
-        return {
-            subscriptions: [],
-        };
-    },
-    computed: {
-        selectedSubscriptions() {
-            return this.subscriptions.length;
-        },
-    },
-    activated() {
-        if (!this.authenticated) this.$router.push("/login");
-    },
-    methods: {
-        fileChange() {
-            this.$refs.fileSelector.files[0].text().then(text => {
-                this.subscriptions = [];
+  data () {
+    return {
+      subscriptions: []
+    }
+  },
+  computed: {
+    selectedSubscriptions () {
+      return this.subscriptions.length
+    }
+  },
+  activated () {
+    if (!this.authenticated) this.$router.push('/login')
+  },
+  methods: {
+    fileChange () {
+      this.$refs.fileSelector.files[0].text().then(text => {
+        this.subscriptions = []
 
-                // Invidious
-                if (text.indexOf("opml") != -1) {
-                    const parser = new DOMParser();
-                    const xmlDoc = parser.parseFromString(text, "text/xml");
-                    xmlDoc.querySelectorAll("outline[xmlUrl]").forEach(item => {
-                        const url = item.getAttribute("xmlUrl");
-                        const id = url.substr(-24);
-                        this.subscriptions.push(id);
-                    });
-                }
-                // NewPipe
-                if (text.indexOf("app_version") != -1) {
-                    const json = JSON.parse(text);
-                    json.subscriptions
-                        .filter(item => item.service_id == 0)
-                        .forEach(item => {
-                            const url = item.url;
-                            const id = url.substr(-24);
-                            this.subscriptions.push(id);
-                        });
-                }
-                // Invidious JSON
-                if (text.indexOf("thin_mode") != -1) {
-                    const json = JSON.parse(text);
-                    this.subscriptions = json.subscriptions;
-                }
-                // Google Takeout
-                if (text.indexOf("contentDetails") != -1) {
-                    const json = JSON.parse(text);
-                    json.forEach(item => {
-                        const id = item.snippet.resourceId.channelId;
-                        this.subscriptions.push(id);
-                    });
-                }
-            });
-        },
-        handleImport() {
-            this.fetchJson(this.apiUrl() + "/import", null, {
-                method: "POST",
-                headers: {
-                    Authorization: this.getAuthToken(),
-                },
-                body: JSON.stringify(this.subscriptions),
-            }).then(json => {
-                if (json.message === "ok") window.location = "/feed";
-            });
-        },
+        // Invidious
+        if (text.indexOf('opml') !== -1) {
+          const parser = new DOMParser()
+          const xmlDoc = parser.parseFromString(text, 'text/xml')
+          xmlDoc.querySelectorAll('outline[xmlUrl]').forEach(item => {
+            const url = item.getAttribute('xmlUrl')
+            const id = url.substr(-24)
+            this.subscriptions.push(id)
+          })
+        }
+        // NewPipe
+        if (text.indexOf('app_version') !== -1) {
+          const json = JSON.parse(text)
+          json.subscriptions
+            .filter(item => item.service_id === 0)
+            .forEach(item => {
+              const url = item.url
+              const id = url.substr(-24)
+              this.subscriptions.push(id)
+            })
+        }
+        // Invidious JSON
+        if (text.indexOf('thin_mode') !== -1) {
+          const json = JSON.parse(text)
+          this.subscriptions = json.subscriptions
+        }
+        // Google Takeout
+        if (text.indexOf('contentDetails') !== -1) {
+          const json = JSON.parse(text)
+          json.forEach(item => {
+            const id = item.snippet.resourceId.channelId
+            this.subscriptions.push(id)
+          })
+        }
+      })
     },
-};
+    handleImport () {
+      this.fetchJson(this.apiUrl() + '/import', null, {
+        method: 'POST',
+        headers: {
+          Authorization: this.getAuthToken()
+        },
+        body: JSON.stringify(this.subscriptions)
+      }).then(json => {
+        if (json.message === 'ok') window.location = '/feed'
+      })
+    }
+  }
+}
 </script>
diff --git a/src/components/LoginPage.vue b/src/components/LoginPage.vue
index 3be179e..20bae5c 100644
--- a/src/components/LoginPage.vue
+++ b/src/components/LoginPage.vue
@@ -33,34 +33,34 @@
 
 <script>
 export default {
-    data() {
-        return {
-            username: null,
-            password: null,
-        };
-    },
-    mounted() {
-        //TODO: Add Server Side check
-        if (this.getAuthToken()) {
-            this.$router.push("/");
-        }
-    },
-    methods: {
-        login() {
-            console.log("authToken" + this.hashCode(this.apiUrl()));
-            this.fetchJson(this.apiUrl() + "/login", null, {
-                method: "POST",
-                body: JSON.stringify({
-                    username: this.username,
-                    password: this.password,
-                }),
-            }).then(resp => {
-                if (resp.token) {
-                    this.setPreference("authToken" + this.hashCode(this.apiUrl()), resp.token);
-                    window.location = "/"; // done to bypass cache
-                } else alert(resp.error);
-            });
-        },
-    },
-};
+  data () {
+    return {
+      username: null,
+      password: null
+    }
+  },
+  mounted () {
+    // TODO: Add Server Side check
+    if (this.getAuthToken()) {
+      this.$router.push('/')
+    }
+  },
+  methods: {
+    login () {
+      console.log('authToken' + this.hashCode(this.apiUrl()))
+      this.fetchJson(this.apiUrl() + '/login', null, {
+        method: 'POST',
+        body: JSON.stringify({
+          username: this.username,
+          password: this.password
+        })
+      }).then(resp => {
+        if (resp.token) {
+          this.setPreference('authToken' + this.hashCode(this.apiUrl()), resp.token)
+          window.location = '/' // done to bypass cache
+        } else alert(resp.error)
+      })
+    }
+  }
+}
 </script>
diff --git a/src/components/Navigation.vue b/src/components/Navigation.vue
index 6ff4ca6..03405a7 100644
--- a/src/components/Navigation.vue
+++ b/src/components/Navigation.vue
@@ -57,48 +57,48 @@
 </template>
 
 <script>
-import SearchSuggestions from "@/components/SearchSuggestions";
+import SearchSuggestions from '@/components/SearchSuggestions'
 
 export default {
-    components: {
-        SearchSuggestions,
+  components: {
+    SearchSuggestions
+  },
+  data () {
+    return {
+      searchText: '',
+      suggestionsVisible: false
+    }
+  },
+  computed: {
+    shouldShowLogin (_this) {
+      return _this.getAuthToken() == null
+    }
+  },
+  methods: {
+    onKeyUp (e) {
+      if (e.key === 'Enter') {
+        e.target.blur()
+        this.$router.push({
+          name: 'SearchResults',
+          query: { search_query: this.searchText }
+        })
+        return
+      } else if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+        e.preventDefault()
+      }
+      this.$refs.searchSuggestions.onKeyUp(e)
     },
-    data() {
-        return {
-            searchText: "",
-            suggestionsVisible: false,
-        };
+    onInputFocus () {
+      this.suggestionsVisible = true
     },
-    computed: {
-        shouldShowLogin(_this) {
-            return _this.getAuthToken() == null;
-        },
+    onInputBlur () {
+      this.suggestionsVisible = false
     },
-    methods: {
-        onKeyUp(e) {
-            if (e.key === "Enter") {
-                e.target.blur();
-                this.$router.push({
-                    name: "SearchResults",
-                    query: { search_query: this.searchText },
-                });
-                return;
-            } else if (e.key === "ArrowUp" || e.key === "ArrowDown") {
-                e.preventDefault();
-            }
-            this.$refs.searchSuggestions.onKeyUp(e);
-        },
-        onInputFocus() {
-            this.suggestionsVisible = true;
-        },
-        onInputBlur() {
-            this.suggestionsVisible = false;
-        },
-        onSearchTextChange(searchText) {
-            this.searchText = searchText;
-        },
-    },
-};
+    onSearchTextChange (searchText) {
+      this.searchText = searchText
+    }
+  }
+}
 </script>
 
 <style></style>
diff --git a/src/components/Player.vue b/src/components/Player.vue
index 49e829b..5e77086 100644
--- a/src/components/Player.vue
+++ b/src/components/Player.vue
@@ -17,255 +17,255 @@
 </template>
 
 <script>
-import("shaka-player/dist/controls.css");
-const shaka = import("shaka-player/dist/shaka-player.ui.js");
-import muxjs from "mux.js";
-window.muxjs = muxjs;
+import muxjs from 'mux.js'
+import('shaka-player/dist/controls.css')
+const shaka = import('shaka-player/dist/shaka-player.ui.js')
+window.muxjs = muxjs
 
 export default {
-    props: {
-        video: Object,
-        sponsors: Object,
-        selectedAutoPlay: Boolean,
-        selectedAutoLoop: Boolean,
-    },
-    data() {
-        return {
-            player: null,
-        };
-    },
-    computed: {
-        shouldAutoPlay: _this => {
-            return _this.getPreferenceBoolean("playerAutoPlay", true);
-        },
-    },
-    mounted() {
-        if (!this.shaka) this.shakaPromise = shaka.then(shaka => shaka.default).then(shaka => (this.shaka = shaka));
-    },
-    methods: {
-        loadVideo() {
-            const component = this;
-            const videoEl = this.$refs.videoEl;
+  props: {
+    video: Object,
+    sponsors: Object,
+    selectedAutoPlay: Boolean,
+    selectedAutoLoop: Boolean
+  },
+  data () {
+    return {
+      player: null
+    }
+  },
+  computed: {
+    shouldAutoPlay: _this => {
+      return _this.getPreferenceBoolean('playerAutoPlay', true)
+    }
+  },
+  mounted () {
+    if (!this.shaka) this.shakaPromise = shaka.then(shaka => shaka.default).then(shaka => (this.shaka = shaka))
+  },
+  methods: {
+    loadVideo () {
+      const component = this
+      const videoEl = this.$refs.videoEl
 
-            videoEl.setAttribute("poster", this.video.thumbnailUrl);
+      videoEl.setAttribute('poster', this.video.thumbnailUrl)
 
-            if (this.$route.query.t) videoEl.currentTime = this.$route.query.t;
+      if (this.$route.query.t) videoEl.currentTime = this.$route.query.t
 
-            const noPrevPlayer = !this.player;
+      const noPrevPlayer = !this.player
 
-            var streams = [];
+      const streams = []
 
-            streams.push(...this.video.audioStreams);
-            streams.push(...this.video.videoStreams);
+      streams.push(...this.video.audioStreams)
+      streams.push(...this.video.videoStreams)
 
-            const MseSupport = window.MediaSource !== undefined;
+      const MseSupport = window.MediaSource !== undefined
 
-            var uri;
+      let uri
 
-            if (this.video.livestream) {
-                uri = this.video.hls;
-            } else if (this.video.audioStreams.length > 0 && MseSupport) {
-                const dash = require("@/utils/DashUtils.js").default.generate_dash_file_from_formats(
-                    streams,
-                    this.video.duration,
-                );
+      if (this.video.livestream) {
+        uri = this.video.hls
+      } else if (this.video.audioStreams.length > 0 && MseSupport) {
+        const dash = require('@/utils/DashUtils.js').default.generate_dash_file_from_formats(
+          streams,
+          this.video.duration
+        )
 
-                uri = "data:application/dash+xml;charset=utf-8;base64," + btoa(dash);
-            } else {
-                uri = this.video.videoStreams.filter(stream => stream.codec == null).slice(-1)[0].url;
+        uri = 'data:application/dash+xml;charset=utf-8;base64,' + btoa(dash)
+      } else {
+        uri = this.video.videoStreams.filter(stream => stream.codec == null).slice(-1)[0].url
+      }
+
+      if (noPrevPlayer) {
+        this.shakaPromise.then(() => {
+          this.shaka.polyfill.installAll()
+
+          const localPlayer = new this.shaka.Player(videoEl)
+
+          localPlayer.getNetworkingEngine().registerRequestFilter((_type, request) => {
+            const uri = request.uris[0]
+            const url = new URL(uri)
+            if (url.host.endsWith('.googlevideo.com')) {
+              url.searchParams.set('host', url.host)
+              url.host = new URL(component.video.proxyUrl).host
+              request.uris[0] = url.toString()
             }
+          })
 
-            if (noPrevPlayer)
-                this.shakaPromise.then(() => {
-                    this.shaka.polyfill.installAll();
+          localPlayer.configure(
+            'streaming.bufferingGoal',
+            Math.max(this.getPreferenceNumber('bufferGoal', 10), 10)
+          )
 
-                    const localPlayer = new this.shaka.Player(videoEl);
+          this.setPlayerAttrs(localPlayer, videoEl, uri, this.shaka)
+        })
+      } else this.setPlayerAttrs(this.player, videoEl, uri, this.shaka)
 
-                    localPlayer.getNetworkingEngine().registerRequestFilter((_type, request) => {
-                        const uri = request.uris[0];
-                        var url = new URL(uri);
-                        if (url.host.endsWith(".googlevideo.com")) {
-                            url.searchParams.set("host", url.host);
-                            url.host = new URL(component.video.proxyUrl).host;
-                            request.uris[0] = url.toString();
-                        }
-                    });
-
-                    localPlayer.configure(
-                        "streaming.bufferingGoal",
-                        Math.max(this.getPreferenceNumber("bufferGoal", 10), 10),
-                    );
-
-                    this.setPlayerAttrs(localPlayer, videoEl, uri, this.shaka);
-                });
-            else this.setPlayerAttrs(this.player, videoEl, uri, this.shaka);
-
-            if (noPrevPlayer) {
-                videoEl.addEventListener("timeupdate", () => {
-                    if (this.sponsors && this.sponsors.segments) {
-                        const time = videoEl.currentTime;
-                        this.sponsors.segments.map(segment => {
-                            if (!segment.skipped || this.selectedAutoLoop) {
-                                const end = segment.segment[1];
-                                if (time >= segment.segment[0] && time < end) {
-                                    console.log("Skipped segment at " + time);
-                                    videoEl.currentTime = end;
-                                    segment.skipped = true;
-                                    return;
-                                }
-                            }
-                        });
-                    }
-                });
-
-                videoEl.addEventListener("volumechange", () => {
-                    this.setPreference("volume", videoEl.volume);
-                });
-
-                videoEl.addEventListener("ended", () => {
-                    if (!this.selectedAutoLoop && this.selectedAutoPlay && this.video.relatedStreams.length > 0) {
-                        const params = this.$route.query;
-                        let url = this.video.relatedStreams[0].url;
-                        const searchParams = new URLSearchParams();
-                        for (var param in params)
-                            switch (param) {
-                                case "v":
-                                case "t":
-                                    break;
-                                default:
-                                    searchParams.set(param, params[param]);
-                                    break;
-                            }
-                        const paramStr = searchParams.toString();
-                        if (paramStr.length > 0) url += "&" + paramStr;
-                        this.$router.push(url);
-                    }
-                });
-            }
-
-            //TODO: Add sponsors on seekbar: https://github.com/ajayyy/SponsorBlock/blob/e39de9fd852adb9196e0358ed827ad38d9933e29/src/js-components/previewBar.ts#L12
-        },
-        setPlayerAttrs(localPlayer, videoEl, uri, shaka) {
-            if (!this.ui) {
-                this.ui = new shaka.ui.Overlay(localPlayer, this.$refs.container, videoEl);
-
-                const config = {
-                    overflowMenuButtons: ["quality", "captions", "picture_in_picture", "playback_rate"],
-                    seekBarColors: {
-                        base: "rgba(255, 255, 255, 0.3)",
-                        buffered: "rgba(255, 255, 255, 0.54)",
-                        played: "rgb(255, 0, 0)",
-                    },
-                };
-
-                this.ui.configure(config);
-            }
-
-            const player = this.ui.getControls().getPlayer();
-
-            this.player = player;
-
-            const disableVideo = this.getPreferenceBoolean("listen", false) && !this.video.livestream;
-
-            this.player.configure({
-                preferredVideoCodecs: ["av01", "vp9", "avc1"],
-                preferredAudioCodecs: ["opus", "mp4a"],
-                manifest: {
-                    disableVideo: disableVideo,
-                },
-            });
-
-            const quality = this.getPreferenceNumber("quality", 0);
-            const qualityConds =
-                quality > 0 && (this.video.audioStreams.length > 0 || this.video.livestream) && !disableVideo;
-            if (qualityConds) this.player.configure("abr.enabled", false);
-
-            player.load(uri, 0, uri.indexOf("dash+xml") >= 0 ? "application/dash+xml" : "video/mp4").then(() => {
-                if (qualityConds) {
-                    var leastDiff = Number.MAX_VALUE;
-                    var bestStream = null;
-                    player
-                        .getVariantTracks()
-                        .sort((a, b) => a.bandwidth - b.bandwidth)
-                        .forEach(stream => {
-                            const diff = Math.abs(quality - stream.height);
-                            if (diff < leastDiff) {
-                                leastDiff = diff;
-                                bestStream = stream;
-                            }
-                        });
-                    player.selectVariantTrack(bestStream);
+      if (noPrevPlayer) {
+        videoEl.addEventListener('timeupdate', () => {
+          if (this.sponsors && this.sponsors.segments) {
+            const time = videoEl.currentTime
+            this.sponsors.segments.forEach(segment => {
+              if (!segment.skipped || this.selectedAutoLoop) {
+                const end = segment.segment[1]
+                if (time >= segment.segment[0] && time < end) {
+                  console.log('Skipped segment at ' + time)
+                  videoEl.currentTime = end
+                  segment.skipped = true
                 }
+              }
+            })
+          }
+        })
 
-                this.video.subtitles.map(subtitle => {
-                    player.addTextTrackAsync(
-                        subtitle.url,
-                        subtitle.code,
-                        "SUBTITLE",
-                        subtitle.mimeType,
-                        null,
-                        subtitle.name,
-                    );
-                });
-                videoEl.volume = this.getPreferenceNumber("volume", 1);
-            });
-        },
+        videoEl.addEventListener('volumechange', () => {
+          this.setPreference('volume', videoEl.volume)
+        })
+
+        videoEl.addEventListener('ended', () => {
+          if (!this.selectedAutoLoop && this.selectedAutoPlay && this.video.relatedStreams.length > 0) {
+            const params = this.$route.query
+            let url = this.video.relatedStreams[0].url
+            const searchParams = new URLSearchParams()
+            for (const param in params) {
+              switch (param) {
+                case 'v':
+                case 't':
+                  break
+                default:
+                  searchParams.set(param, params[param])
+                  break
+              }
+            }
+            const paramStr = searchParams.toString()
+            if (paramStr.length > 0) url += '&' + paramStr
+            this.$router.push(url)
+          }
+        })
+      }
+
+      // TODO: Add sponsors on seekbar: https://github.com/ajayyy/SponsorBlock/blob/e39de9fd852adb9196e0358ed827ad38d9933e29/src/js-components/previewBar.ts#L12
     },
-    activated() {
-        import("hotkeys-js")
-            .then(mod => mod.default)
-            .then(hotkeys => {
-                this.hotkeys = hotkeys;
-                var self = this;
-                hotkeys("f,m,space,up,down,left,right", function(e, handler) {
-                    const videoEl = self.$refs.videoEl;
-                    switch (handler.key) {
-                        case "f":
-                            if (document.fullscreenElement) document.exitFullscreen();
-                            else self.$refs.container.requestFullscreen();
-                            e.preventDefault();
-                            break;
-                        case "m":
-                            videoEl.muted = !videoEl.muted;
-                            e.preventDefault();
-                            break;
-                        case "space":
-                            if (videoEl.paused) videoEl.play();
-                            else videoEl.pause();
-                            e.preventDefault();
-                            break;
-                        case "up":
-                            videoEl.volume = Math.min(videoEl.volume + 0.05, 1);
-                            e.preventDefault();
-                            break;
-                        case "down":
-                            videoEl.volume = Math.max(videoEl.volume - 0.05, 0);
-                            e.preventDefault();
-                            break;
-                        case "left":
-                            videoEl.currentTime = Math.max(videoEl.currentTime - 5, 0);
-                            e.preventDefault();
-                            break;
-                        case "right":
-                            videoEl.currentTime = videoEl.currentTime + 5;
-                            e.preventDefault();
-                            break;
-                    }
-                });
-            });
-    },
-    deactivated() {
-        if (this.ui) {
-            this.ui.destroy();
-            this.ui = undefined;
-            this.player = undefined;
+    setPlayerAttrs (localPlayer, videoEl, uri, shaka) {
+      if (!this.ui) {
+        this.ui = new shaka.ui.Overlay(localPlayer, this.$refs.container, videoEl)
+
+        const config = {
+          overflowMenuButtons: ['quality', 'captions', 'picture_in_picture', 'playback_rate'],
+          seekBarColors: {
+            base: 'rgba(255, 255, 255, 0.3)',
+            buffered: 'rgba(255, 255, 255, 0.54)',
+            played: 'rgb(255, 0, 0)'
+          }
         }
-        if (this.player) {
-            this.player.destroy();
-            this.player = undefined;
+
+        this.ui.configure(config)
+      }
+
+      const player = this.ui.getControls().getPlayer()
+
+      this.player = player
+
+      const disableVideo = this.getPreferenceBoolean('listen', false) && !this.video.livestream
+
+      this.player.configure({
+        preferredVideoCodecs: ['av01', 'vp9', 'avc1'],
+        preferredAudioCodecs: ['opus', 'mp4a'],
+        manifest: {
+          disableVideo: disableVideo
         }
-        if (this.hotkeys) this.hotkeys.unbind();
-        this.$refs.container.querySelectorAll("div").forEach(node => node.remove());
-    },
-};
+      })
+
+      const quality = this.getPreferenceNumber('quality', 0)
+      const qualityConds =
+                quality > 0 && (this.video.audioStreams.length > 0 || this.video.livestream) && !disableVideo
+      if (qualityConds) this.player.configure('abr.enabled', false)
+
+      player.load(uri, 0, uri.indexOf('dash+xml') >= 0 ? 'application/dash+xml' : 'video/mp4').then(() => {
+        if (qualityConds) {
+          let leastDiff = Number.MAX_VALUE
+          let bestStream = null
+          player
+            .getVariantTracks()
+            .sort((a, b) => a.bandwidth - b.bandwidth)
+            .forEach(stream => {
+              const diff = Math.abs(quality - stream.height)
+              if (diff < leastDiff) {
+                leastDiff = diff
+                bestStream = stream
+              }
+            })
+          player.selectVariantTrack(bestStream)
+        }
+
+        this.video.subtitles.forEach(subtitle => {
+          player.addTextTrackAsync(
+            subtitle.url,
+            subtitle.code,
+            'SUBTITLE',
+            subtitle.mimeType,
+            null,
+            subtitle.name
+          )
+        })
+        videoEl.volume = this.getPreferenceNumber('volume', 1)
+      })
+    }
+  },
+  activated () {
+    import('hotkeys-js')
+      .then(mod => mod.default)
+      .then(hotkeys => {
+        this.hotkeys = hotkeys
+        const self = this
+        hotkeys('f,m,space,up,down,left,right', function (e, handler) {
+          const videoEl = self.$refs.videoEl
+          switch (handler.key) {
+            case 'f':
+              if (document.fullscreenElement) document.exitFullscreen()
+              else self.$refs.container.requestFullscreen()
+              e.preventDefault()
+              break
+            case 'm':
+              videoEl.muted = !videoEl.muted
+              e.preventDefault()
+              break
+            case 'space':
+              if (videoEl.paused) videoEl.play()
+              else videoEl.pause()
+              e.preventDefault()
+              break
+            case 'up':
+              videoEl.volume = Math.min(videoEl.volume + 0.05, 1)
+              e.preventDefault()
+              break
+            case 'down':
+              videoEl.volume = Math.max(videoEl.volume - 0.05, 0)
+              e.preventDefault()
+              break
+            case 'left':
+              videoEl.currentTime = Math.max(videoEl.currentTime - 5, 0)
+              e.preventDefault()
+              break
+            case 'right':
+              videoEl.currentTime = videoEl.currentTime + 5
+              e.preventDefault()
+              break
+          }
+        })
+      })
+  },
+  deactivated () {
+    if (this.ui) {
+      this.ui.destroy()
+      this.ui = undefined
+      this.player = undefined
+    }
+    if (this.player) {
+      this.player.destroy()
+      this.player = undefined
+    }
+    if (this.hotkeys) this.hotkeys.unbind()
+    this.$refs.container.querySelectorAll('div').forEach(node => node.remove())
+  }
+}
 </script>
diff --git a/src/components/Playlist.vue b/src/components/Playlist.vue
index de3975f..2015bae 100644
--- a/src/components/Playlist.vue
+++ b/src/components/Playlist.vue
@@ -35,56 +35,56 @@
 </template>
 
 <script>
-import ErrorHandler from "@/components/ErrorHandler.vue";
-import VideoItem from "@/components/VideoItem.vue";
+import ErrorHandler from '@/components/ErrorHandler.vue'
+import VideoItem from '@/components/VideoItem.vue'
 
 export default {
-    data() {
-        return {
-            playlist: null,
-        };
+  data () {
+    return {
+      playlist: null
+    }
+  },
+  mounted () {
+    this.getPlaylistData()
+  },
+  activated () {
+    window.addEventListener('scroll', this.handleScroll)
+  },
+  deactivated () {
+    window.removeEventListener('scroll', this.handleScroll)
+  },
+  computed: {
+    getRssUrl: _this => {
+      return _this.apiUrl() + '/rss/playlists/' + _this.$route.query.list
+    }
+  },
+  methods: {
+    async fetchPlaylist () {
+      return await await this.fetchJson(this.apiUrl() + '/playlists/' + this.$route.query.list)
     },
-    mounted() {
-        this.getPlaylistData();
+    async getPlaylistData () {
+      this.fetchPlaylist()
+        .then(data => (this.playlist = data))
+        .then(() => (document.title = this.playlist.name + ' - Piped'))
     },
-    activated() {
-        window.addEventListener("scroll", this.handleScroll);
-    },
-    deactivated() {
-        window.removeEventListener("scroll", this.handleScroll);
-    },
-    computed: {
-        getRssUrl: _this => {
-            return _this.apiUrl() + "/rss/playlists/" + _this.$route.query.list;
-        },
-    },
-    methods: {
-        async fetchPlaylist() {
-            return await await this.fetchJson(this.apiUrl() + "/playlists/" + this.$route.query.list);
-        },
-        async getPlaylistData() {
-            this.fetchPlaylist()
-                .then(data => (this.playlist = data))
-                .then(() => (document.title = this.playlist.name + " - Piped"));
-        },
-        handleScroll() {
-            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.apiUrl() + "/nextpage/playlists/" + this.$route.query.list, {
-                    nextpage: this.playlist.nextpage,
-                }).then(json => {
-                    this.playlist.relatedStreams.concat(json.relatedStreams);
-                    this.playlist.nextpage = json.nextpage;
-                    this.loading = false;
-                    json.relatedStreams.map(stream => this.playlist.relatedStreams.push(stream));
-                });
-            }
-        },
-    },
-    components: {
-        ErrorHandler,
-        VideoItem,
-    },
-};
+    handleScroll () {
+      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.apiUrl() + '/nextpage/playlists/' + this.$route.query.list, {
+          nextpage: this.playlist.nextpage
+        }).then(json => {
+          this.playlist.relatedStreams.concat(json.relatedStreams)
+          this.playlist.nextpage = json.nextpage
+          this.loading = false
+          json.relatedStreams.map(stream => this.playlist.relatedStreams.push(stream))
+        })
+      }
+    }
+  },
+  components: {
+    ErrorHandler,
+    VideoItem
+  }
+}
 </script>
diff --git a/src/components/Preferences.vue b/src/components/Preferences.vue
index 5a4ae0c..25872eb 100644
--- a/src/components/Preferences.vue
+++ b/src/components/Preferences.vue
@@ -112,139 +112,139 @@
 </template>
 
 <script>
-import CountryMap from "@/utils/CountryMap.js";
+import CountryMap from '@/utils/CountryMap.js'
 export default {
-    data() {
-        return {
-            selectedInstance: null,
-            instances: [],
-            sponsorBlock: true,
-            skipSponsor: true,
-            skipIntro: false,
-            skipOutro: false,
-            skipPreview: false,
-            skipInteraction: true,
-            skipSelfPromo: true,
-            skipMusicOffTopic: true,
-            selectedTheme: "dark",
-            autoPlayVideo: true,
-            listen: false,
-            resolutions: [144, 240, 360, 480, 720, 1080, 1440, 2160, 4320],
-            defaultQuality: 0,
-            bufferingGoal: 10,
-            countryMap: CountryMap.COUNTRIES,
-            country: "US",
-            defaultHomepage: "trending",
-            showComments: true,
-        };
-    },
-    mounted() {
-        if (Object.keys(this.$route.query).length > 0) this.$router.replace({ query: {} });
+  data () {
+    return {
+      selectedInstance: null,
+      instances: [],
+      sponsorBlock: true,
+      skipSponsor: true,
+      skipIntro: false,
+      skipOutro: false,
+      skipPreview: false,
+      skipInteraction: true,
+      skipSelfPromo: true,
+      skipMusicOffTopic: true,
+      selectedTheme: 'dark',
+      autoPlayVideo: true,
+      listen: false,
+      resolutions: [144, 240, 360, 480, 720, 1080, 1440, 2160, 4320],
+      defaultQuality: 0,
+      bufferingGoal: 10,
+      countryMap: CountryMap.COUNTRIES,
+      country: 'US',
+      defaultHomepage: 'trending',
+      showComments: true
+    }
+  },
+  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 => {
-                var skipped = 0;
-                const lines = body.split("\n");
-                lines.map(line => {
-                    const split = line.split("|");
-                    if (split.length == 4) {
-                        if (skipped < 2) {
-                            skipped++;
-                            return;
-                        }
-                        this.instances.push({
-                            name: split[0].trim(),
-                            apiurl: split[1].trim(),
-                            locations: split[2].trim(),
-                            cdn: split[3].trim(),
-                        });
-                    }
-                });
-            });
-
-        if (localStorage) {
-            this.selectedInstance = this.getPreferenceString("instance", "https://pipedapi.kavin.rocks");
-
-            this.sponsorBlock = this.getPreferenceBoolean("sponsorblock", true);
-            if (localStorage.getItem("selectedSkip") !== null) {
-                var skipList = localStorage.getItem("selectedSkip").split(",");
-                this.skipSponsor = this.skipIntro = this.skipOutro = this.skipPreview = this.skipInteraction = this.skipSelfPromo = this.skipMusicOffTopic = false;
-                skipList.forEach(skip => {
-                    switch (skip) {
-                        case "sponsor":
-                            this.skipSponsor = true;
-                            break;
-                        case "intro":
-                            this.skipIntro = true;
-                            break;
-                        case "outro":
-                            this.skipOutro = true;
-                            break;
-                        case "preview":
-                            this.skipPreview = true;
-                            break;
-                        case "interaction":
-                            this.skipInteraction = true;
-                            break;
-                        case "selfpromo":
-                            this.skipSelfPromo = true;
-                            break;
-                        case "music_offtopic":
-                            this.skipMusicOffTopic = true;
-                            break;
-                        default:
-                            console.log("Unknown sponsor type: " + skip);
-                            break;
-                    }
-                });
+    fetch('https://raw.githubusercontent.com/wiki/TeamPiped/Piped-Frontend/Instances.md')
+      .then(resp => resp.text())
+      .then(body => {
+        let skipped = 0
+        const lines = body.split('\n')
+        lines.forEach(line => {
+          const split = line.split('|')
+          if (split.length === 4) {
+            if (skipped < 2) {
+              skipped++
+              return
             }
+            this.instances.push({
+              name: split[0].trim(),
+              apiurl: split[1].trim(),
+              locations: split[2].trim(),
+              cdn: split[3].trim()
+            })
+          }
+        })
+      })
 
-            this.selectedTheme = this.getPreferenceString("theme", "dark");
-            this.autoPlayVideo = this.getPreferenceBoolean(localStorage.getItem("playerAutoPlay"), true);
-            this.listen = this.getPreferenceBoolean("listen", false);
-            this.defaultQuality = Number(localStorage.getItem("quality"));
-            this.bufferingGoal = Math.max(Number(localStorage.getItem("bufferGoal")), 10);
-            this.country = this.getPreferenceString("region", "US");
-            this.defaultHomepage = this.getPreferenceString("homepage", "trending");
-            this.showComments = this.getPreferenceBoolean("comments", true);
-        }
+    if (localStorage) {
+      this.selectedInstance = this.getPreferenceString('instance', 'https://pipedapi.kavin.rocks')
+
+      this.sponsorBlock = this.getPreferenceBoolean('sponsorblock', true)
+      if (localStorage.getItem('selectedSkip') !== null) {
+        const skipList = localStorage.getItem('selectedSkip').split(',')
+        this.skipSponsor = this.skipIntro = this.skipOutro = this.skipPreview = this.skipInteraction = this.skipSelfPromo = this.skipMusicOffTopic = false
+        skipList.forEach(skip => {
+          switch (skip) {
+            case 'sponsor':
+              this.skipSponsor = true
+              break
+            case 'intro':
+              this.skipIntro = true
+              break
+            case 'outro':
+              this.skipOutro = true
+              break
+            case 'preview':
+              this.skipPreview = true
+              break
+            case 'interaction':
+              this.skipInteraction = true
+              break
+            case 'selfpromo':
+              this.skipSelfPromo = true
+              break
+            case 'music_offtopic':
+              this.skipMusicOffTopic = true
+              break
+            default:
+              console.log('Unknown sponsor type: ' + skip)
+              break
+          }
+        })
+      }
+
+      this.selectedTheme = this.getPreferenceString('theme', 'dark')
+      this.autoPlayVideo = this.getPreferenceBoolean(localStorage.getItem('playerAutoPlay'), true)
+      this.listen = this.getPreferenceBoolean('listen', false)
+      this.defaultQuality = Number(localStorage.getItem('quality'))
+      this.bufferingGoal = Math.max(Number(localStorage.getItem('bufferGoal')), 10)
+      this.country = this.getPreferenceString('region', 'US')
+      this.defaultHomepage = this.getPreferenceString('homepage', 'trending')
+      this.showComments = this.getPreferenceBoolean('comments', true)
+    }
+  },
+  methods: {
+    onChange () {
+      if (localStorage) {
+        let shouldReload = false
+
+        if (this.getPreferenceString('theme', 'dark') !== this.selectedTheme) shouldReload = true
+
+        localStorage.setItem('instance', this.selectedInstance)
+        localStorage.setItem('sponsorblock', this.sponsorBlock)
+
+        const sponsorSelected = []
+        if (this.skipSponsor) sponsorSelected.push('sponsor')
+        if (this.skipIntro) sponsorSelected.push('intro')
+        if (this.skipOutro) sponsorSelected.push('outro')
+        if (this.skipPreview) sponsorSelected.push('preview')
+        if (this.skipInteraction) sponsorSelected.push('interaction')
+        if (this.skipSelfPromo) sponsorSelected.push('selfpromo')
+        if (this.skipMusicOffTopic) sponsorSelected.push('music_offtopic')
+        localStorage.setItem('selectedSkip', sponsorSelected)
+
+        localStorage.setItem('theme', this.selectedTheme)
+        localStorage.setItem('playerAutoPlay', this.autoPlayVideo)
+        localStorage.setItem('listen', this.listen)
+        localStorage.setItem('quality', this.defaultQuality)
+        localStorage.setItem('bufferGoal', this.bufferingGoal)
+        localStorage.setItem('region', this.country)
+        localStorage.setItem('homepage', this.defaultHomepage)
+        localStorage.setItem('comments', this.showComments)
+
+        if (shouldReload) window.location.reload()
+      }
     },
-    methods: {
-        onChange() {
-            if (localStorage) {
-                var shouldReload = false;
-
-                if (this.getPreferenceString("theme", "dark") !== this.selectedTheme) shouldReload = true;
-
-                localStorage.setItem("instance", this.selectedInstance);
-                localStorage.setItem("sponsorblock", this.sponsorBlock);
-
-                var sponsorSelected = [];
-                if (this.skipSponsor) sponsorSelected.push("sponsor");
-                if (this.skipIntro) sponsorSelected.push("intro");
-                if (this.skipOutro) sponsorSelected.push("outro");
-                if (this.skipPreview) sponsorSelected.push("preview");
-                if (this.skipInteraction) sponsorSelected.push("interaction");
-                if (this.skipSelfPromo) sponsorSelected.push("selfpromo");
-                if (this.skipMusicOffTopic) sponsorSelected.push("music_offtopic");
-                localStorage.setItem("selectedSkip", sponsorSelected);
-
-                localStorage.setItem("theme", this.selectedTheme);
-                localStorage.setItem("playerAutoPlay", this.autoPlayVideo);
-                localStorage.setItem("listen", this.listen);
-                localStorage.setItem("quality", this.defaultQuality);
-                localStorage.setItem("bufferGoal", this.bufferingGoal);
-                localStorage.setItem("region", this.country);
-                localStorage.setItem("homepage", this.defaultHomepage);
-                localStorage.setItem("comments", this.showComments);
-
-                if (shouldReload) window.location.reload();
-            }
-        },
-        sslScore(url) {
-            return "https://www.ssllabs.com/ssltest/analyze.html?d=" + new URL(url).host + "&latest";
-        },
-    },
-};
+    sslScore (url) {
+      return 'https://www.ssllabs.com/ssltest/analyze.html?d=' + new URL(url).host + '&latest'
+    }
+  }
+}
 </script>
diff --git a/src/components/RegisterPage.vue b/src/components/RegisterPage.vue
index afb4bc6..baf067e 100644
--- a/src/components/RegisterPage.vue
+++ b/src/components/RegisterPage.vue
@@ -33,34 +33,34 @@
 
 <script>
 export default {
-    data() {
-        return {
-            username: null,
-            password: null,
-        };
-    },
-    mounted() {
-        //TODO: Add Server Side check
-        if (this.getAuthToken()) {
-            this.$router.push("/");
-        }
-    },
-    methods: {
-        register() {
-            console.log("authToken" + this.hashCode(this.apiUrl()));
-            this.fetchJson(this.apiUrl() + "/register", null, {
-                method: "POST",
-                body: JSON.stringify({
-                    username: this.username,
-                    password: this.password,
-                }),
-            }).then(resp => {
-                if (resp.token) {
-                    this.setPreference("authToken" + this.hashCode(this.apiUrl()), resp.token);
-                    window.location = "/"; // done to bypass cache
-                } else alert(resp.error);
-            });
-        },
-    },
-};
+  data () {
+    return {
+      username: null,
+      password: null
+    }
+  },
+  mounted () {
+    // TODO: Add Server Side check
+    if (this.getAuthToken()) {
+      this.$router.push('/')
+    }
+  },
+  methods: {
+    register () {
+      console.log('authToken' + this.hashCode(this.apiUrl()))
+      this.fetchJson(this.apiUrl() + '/register', null, {
+        method: 'POST',
+        body: JSON.stringify({
+          username: this.username,
+          password: this.password
+        })
+      }).then(resp => {
+        if (resp.token) {
+          this.setPreference('authToken' + this.hashCode(this.apiUrl()), resp.token)
+          window.location = '/' // done to bypass cache
+        } else alert(resp.error)
+      })
+    }
+  }
+}
 </script>
diff --git a/src/components/SearchResults.vue b/src/components/SearchResults.vue
index c7ab748..0f9fdc2 100644
--- a/src/components/SearchResults.vue
+++ b/src/components/SearchResults.vue
@@ -68,58 +68,58 @@
 
 <script>
 export default {
-    data() {
-        return {
-            results: null,
-            availableFilters: [
-                "all",
-                "videos",
-                "channels",
-                "playlists",
-                "music_songs",
-                "music_videos",
-                "music_albums",
-                "music_playlists",
-            ],
-            selectedFilter: "all",
-        };
+  data () {
+    return {
+      results: null,
+      availableFilters: [
+        'all',
+        'videos',
+        'channels',
+        'playlists',
+        'music_songs',
+        'music_videos',
+        'music_albums',
+        'music_playlists'
+      ],
+      selectedFilter: 'all'
+    }
+  },
+  mounted () {
+    this.updateResults()
+  },
+  activated () {
+    window.addEventListener('scroll', this.handleScroll)
+  },
+  deactivated () {
+    window.removeEventListener('scroll', this.handleScroll)
+  },
+  methods: {
+    async fetchResults () {
+      return await await this.fetchJson(this.apiUrl() + '/search', {
+        q: this.$route.query.search_query,
+        filter: this.selectedFilter
+      })
     },
-    mounted() {
-        this.updateResults();
+    async updateResults () {
+      document.title = this.$route.query.search_query + ' - Piped'
+      this.results = this.fetchResults().then(json => (this.results = json))
     },
-    activated() {
-        window.addEventListener("scroll", this.handleScroll);
-    },
-    deactivated() {
-        window.removeEventListener("scroll", this.handleScroll);
-    },
-    methods: {
-        async fetchResults() {
-            return await await this.fetchJson(this.apiUrl() + "/search", {
-                q: this.$route.query.search_query,
-                filter: this.selectedFilter,
-            });
-        },
-        async updateResults() {
-            document.title = this.$route.query.search_query + " - Piped";
-            this.results = this.fetchResults().then(json => (this.results = json));
-        },
-        handleScroll() {
-            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.apiUrl() + "/nextpage/search", {
-                    nextpage: this.results.nextpage,
-                    q: this.$route.query.search_query,
-                    filter: this.selectedFilter,
-                }).then(json => {
-                    this.results.nextpage = json.nextpage;
-                    this.results.id = json.id;
-                    this.loading = false;
-                    json.items.map(stream => this.results.items.push(stream));
-                });
-            }
-        },
-    },
-};
+    handleScroll () {
+      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.apiUrl() + '/nextpage/search', {
+          nextpage: this.results.nextpage,
+          q: this.$route.query.search_query,
+          filter: this.selectedFilter
+        }).then(json => {
+          this.results.nextpage = json.nextpage
+          this.results.id = json.id
+          this.loading = false
+          json.items.map(stream => this.results.items.push(stream))
+        })
+      }
+    }
+  }
+}
 </script>
diff --git a/src/components/SearchSuggestions.vue b/src/components/SearchSuggestions.vue
index d0a51aa..10ce3c5 100644
--- a/src/components/SearchSuggestions.vue
+++ b/src/components/SearchSuggestions.vue
@@ -20,60 +20,60 @@
 
 <script>
 export default {
-    props: {
-        searchText: String,
+  props: {
+    searchText: String
+  },
+  data () {
+    return {
+      selected: 0,
+      searchSuggestions: []
+    }
+  },
+  methods: {
+    onKeyUp (e) {
+      if (e.key === 'ArrowUp') {
+        if (this.selected <= 0) {
+          this.setSelected(this.searchSuggestions.length - 1)
+        } else {
+          this.setSelected(this.selected - 1)
+        }
+        e.preventDefault()
+      } else if (e.key === 'ArrowDown') {
+        if (this.selected >= this.searchSuggestions.length - 1) {
+          this.setSelected(0)
+        } else {
+          this.setSelected(this.selected + 1)
+        }
+        e.preventDefault()
+      } else {
+        this.refreshSuggestions()
+      }
     },
-    data() {
-        return {
-            selected: 0,
-            searchSuggestions: [],
-        };
+    async refreshSuggestions () {
+      this.searchSuggestions = await this.fetchJson(this.apiUrl() + '/suggestions', {
+        query: this.searchText
+      })
+      this.searchSuggestions.unshift(this.searchText)
+      this.setSelected(0)
     },
-    methods: {
-        onKeyUp(e) {
-            if (e.key === "ArrowUp") {
-                if (this.selected <= 0) {
-                    this.setSelected(this.searchSuggestions.length - 1);
-                } else {
-                    this.setSelected(this.selected - 1);
-                }
-                e.preventDefault();
-            } else if (e.key === "ArrowDown") {
-                if (this.selected >= this.searchSuggestions.length - 1) {
-                    this.setSelected(0);
-                } else {
-                    this.setSelected(this.selected + 1);
-                }
-                e.preventDefault();
-            } else {
-                this.refreshSuggestions();
-            }
-        },
-        async refreshSuggestions() {
-            this.searchSuggestions = await this.fetchJson(this.apiUrl() + "/suggestions", {
-                query: this.searchText,
-            });
-            this.searchSuggestions.unshift(this.searchText);
-            this.setSelected(0);
-        },
-        onMouseOver(i) {
-            if (i !== this.selected) {
-                this.selected = i;
-            }
-        },
-        onClick(i) {
-            this.setSelected(i);
-            this.$router.push({
-                name: "SearchResults",
-                query: { search_query: this.searchSuggestions[i] },
-            });
-        },
-        setSelected(val) {
-            this.selected = val;
-            this.$emit("searchchange", this.searchSuggestions[this.selected]);
-        },
+    onMouseOver (i) {
+      if (i !== this.selected) {
+        this.selected = i
+      }
     },
-};
+    onClick (i) {
+      this.setSelected(i)
+      this.$router.push({
+        name: 'SearchResults',
+        query: { search_query: this.searchSuggestions[i] }
+      })
+    },
+    setSelected (val) {
+      this.selected = val
+      this.$emit('searchchange', this.searchSuggestions[this.selected])
+    }
+  }
+}
 </script>
 
 <style>
diff --git a/src/components/TrendingPage.vue b/src/components/TrendingPage.vue
index 42b9b9d..b0fb2fe 100644
--- a/src/components/TrendingPage.vue
+++ b/src/components/TrendingPage.vue
@@ -16,30 +16,30 @@
 </template>
 
 <script>
-import VideoItem from "@/components/VideoItem.vue";
+import VideoItem from '@/components/VideoItem.vue'
 
 export default {
-    data() {
-        return {
-            videos: [],
-        };
-    },
-    mounted() {
-        document.title = "Trending - Piped";
+  data () {
+    return {
+      videos: []
+    }
+  },
+  mounted () {
+    document.title = 'Trending - Piped'
 
-        let region = this.getPreferenceString("region", "US");
+    const region = this.getPreferenceString('region', 'US')
 
-        this.fetchTrending(region).then(videos => (this.videos = videos));
-    },
-    methods: {
-        async fetchTrending(region) {
-            return await this.fetchJson(this.apiUrl() + "/trending", {
-                region: region || "US",
-            });
-        },
-    },
-    components: {
-        VideoItem,
-    },
-};
+    this.fetchTrending(region).then(videos => (this.videos = videos))
+  },
+  methods: {
+    async fetchTrending (region) {
+      return await this.fetchJson(this.apiUrl() + '/trending', {
+        region: region || 'US'
+      })
+    }
+  },
+  components: {
+    VideoItem
+  }
+}
 </script>
diff --git a/src/components/VideoItem.vue b/src/components/VideoItem.vue
index e4074f6..c2dab8b 100644
--- a/src/components/VideoItem.vue
+++ b/src/components/VideoItem.vue
@@ -45,11 +45,11 @@
 
 <script>
 export default {
-    props: {
-        video: Object,
-        height: String,
-        width: String,
-        hideChannel: Boolean,
-    },
-};
+  props: {
+    video: Object,
+    height: String,
+    width: String,
+    hideChannel: Boolean
+  }
+}
 </script>
diff --git a/src/components/VideoRedirect.vue b/src/components/VideoRedirect.vue
index 1394969..7fb05a0 100644
--- a/src/components/VideoRedirect.vue
+++ b/src/components/VideoRedirect.vue
@@ -2,16 +2,16 @@
     <div>Loading...</div>
 </template>
 
-
 <script>
 export default {
-    activated() {
-        const videoId = this.$route.params.videoId;
-        if (videoId)
-            this.$router.push({
-                path: "/watch",
-                query: { v: videoId },
-            });
-    },
-};
+  activated () {
+    const videoId = this.$route.params.videoId
+    if (videoId) {
+      this.$router.push({
+        path: '/watch',
+        query: { v: videoId }
+      })
+    }
+  }
+}
 </script>
diff --git a/src/components/WatchVideo.vue b/src/components/WatchVideo.vue
index 2f9d20d..580c0d7 100644
--- a/src/components/WatchVideo.vue
+++ b/src/components/WatchVideo.vue
@@ -125,147 +125,146 @@
 </template>
 
 <script>
-import Player from "@/components/Player.vue";
-import VideoItem from "@/components/VideoItem.vue";
-import ErrorHandler from "@/components/ErrorHandler.vue";
+import Player from '@/components/Player.vue'
+import VideoItem from '@/components/VideoItem.vue'
+import ErrorHandler from '@/components/ErrorHandler.vue'
 
 export default {
-    name: "App",
-    data() {
-        return {
-            video: {
-                title: "Loading...",
-            },
-            sponsors: null,
-            selectedAutoLoop: false,
-            selectedAutoPlay: null,
-            showDesc: true,
-            comments: null,
-            subscribed: false,
-            channelId: null,
-        };
+  name: 'App',
+  data () {
+    return {
+      video: {
+        title: 'Loading...'
+      },
+      sponsors: null,
+      selectedAutoLoop: false,
+      selectedAutoPlay: null,
+      showDesc: true,
+      comments: null,
+      subscribed: false,
+      channelId: null
+    }
+  },
+  mounted () {
+    this.getVideoData().then(() => {
+      this.$refs.videoPlayer.loadVideo()
+    })
+    this.getSponsors()
+    if (this.getPreferenceBoolean('comments', true)) this.getComments()
+  },
+  activated () {
+    this.selectedAutoPlay = this.getPreferenceBoolean('autoplay', true)
+    if (this.video.duration) this.$refs.videoPlayer.loadVideo()
+    window.addEventListener('scroll', this.handleScroll)
+  },
+  deactivated () {
+    window.removeEventListener('scroll', this.handleScroll)
+  },
+  watch: {
+    '$route.query.v': function (v) {
+      if (v) {
+        window.scrollTo(0, 0)
+      }
+    }
+  },
+  methods: {
+    fetchVideo () {
+      return this.fetchJson(this.apiUrl() + '/streams/' + this.getVideoId())
     },
-    mounted() {
-        this.getVideoData().then(() => {
-            this.$refs.videoPlayer.loadVideo();
-        });
-        this.getSponsors();
-        if (this.getPreferenceBoolean("comments", true)) this.getComments();
-    },
-    activated() {
-        this.selectedAutoPlay = this.getPreferenceBoolean("autoplay", true);
-        if (this.video.duration) this.$refs.videoPlayer.loadVideo();
-        window.addEventListener("scroll", this.handleScroll);
-    },
-    deactivated() {
-        window.removeEventListener("scroll", this.handleScroll);
-    },
-    watch: {
-        "$route.query.v": function(v) {
-            if (v) {
-                window.scrollTo(0, 0);
-            }
-        },
-    },
-    methods: {
-        fetchVideo() {
-            return this.fetchJson(this.apiUrl() + "/streams/" + this.getVideoId());
-        },
-        async fetchSponsors() {
-            return await this.fetchJson(this.apiUrl() + "/sponsors/" + this.getVideoId(), {
-                category:
+    async fetchSponsors () {
+      return await this.fetchJson(this.apiUrl() + '/sponsors/' + this.getVideoId(), {
+        category:
                     '["' +
-                    this.getPreferenceString("selectedSkip", "sponsor,interaction,selfpromo,music_offtopic").replaceAll(
-                        ",",
-                        '","',
+                    this.getPreferenceString('selectedSkip', 'sponsor,interaction,selfpromo,music_offtopic').replaceAll(
+                      ',',
+                      '","'
                     ) +
-                    '"]',
-            });
-        },
-        fetchComments() {
-            return this.fetchJson(this.apiUrl() + "/comments/" + this.getVideoId());
-        },
-        onChange() {
-            this.setPreference("autoplay", this.selectedAutoPlay);
-        },
-        async getVideoData() {
-            await this.fetchVideo()
-                .then(data => {
-                    this.video = data;
-                })
-                .then(() => {
-                    if (!this.video.error) {
-                        document.title = this.video.title + " - Piped";
-                        this.channelId = this.video.uploaderUrl.split("/")[2];
-                        this.fetchSubscribedStatus();
-
-                        this.video.description = this.purifyHTML(
-                            this.video.description
-                                .replaceAll("http://www.youtube.com", "")
-                                .replaceAll("https://www.youtube.com", "")
-                                .replaceAll("\n", "<br>"),
-                        );
-                    }
-                });
-        },
-        async getSponsors() {
-            if (this.getPreferenceBoolean("sponsorblock", true))
-                this.fetchSponsors().then(data => (this.sponsors = data));
-        },
-        async getComments() {
-            this.fetchComments().then(data => (this.comments = data));
-        },
-        async fetchSubscribedStatus() {
-            if (!this.channelId) return;
-
-            this.fetchJson(
-                this.apiUrl() + "/subscribed",
-                {
-                    channelId: this.channelId,
-                },
-                {
-                    headers: {
-                        Authorization: this.getAuthToken(),
-                    },
-                },
-            ).then(json => {
-                this.subscribed = json.subscribed;
-            });
-        },
-        subscribeHandler() {
-            this.fetchJson(this.apiUrl() + (this.subscribed ? "/unsubscribe" : "/subscribe"), null, {
-                method: "POST",
-                body: JSON.stringify({
-                    channelId: this.channelId,
-                }),
-                headers: {
-                    Authorization: this.getAuthToken(),
-                    "Content-Type": "application/json",
-                },
-            });
-            this.subscribed = !this.subscribed;
-        },
-        handleScroll() {
-            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.apiUrl() + "/nextpage/comments/" + this.getVideoId(), {
-                    url: this.comments.nextpage,
-                }).then(json => {
-                    this.comments.nextpage = json.nextpage;
-                    this.loading = false;
-                    json.comments.map(comment => this.comments.comments.push(comment));
-                });
-            }
-        },
-        getVideoId() {
-            return this.$route.query.v || this.$route.params.v;
-        },
+                    '"]'
+      })
     },
-    components: {
-        Player,
-        VideoItem,
-        ErrorHandler,
+    fetchComments () {
+      return this.fetchJson(this.apiUrl() + '/comments/' + this.getVideoId())
     },
-};
+    onChange () {
+      this.setPreference('autoplay', this.selectedAutoPlay)
+    },
+    async getVideoData () {
+      await this.fetchVideo()
+        .then(data => {
+          this.video = data
+        })
+        .then(() => {
+          if (!this.video.error) {
+            document.title = this.video.title + ' - Piped'
+            this.channelId = this.video.uploaderUrl.split('/')[2]
+            this.fetchSubscribedStatus()
+
+            this.video.description = this.purifyHTML(
+              this.video.description
+                .replaceAll('http://www.youtube.com', '')
+                .replaceAll('https://www.youtube.com', '')
+                .replaceAll('\n', '<br>')
+            )
+          }
+        })
+    },
+    async getSponsors () {
+      if (this.getPreferenceBoolean('sponsorblock', true)) { this.fetchSponsors().then(data => (this.sponsors = data)) }
+    },
+    async getComments () {
+      this.fetchComments().then(data => (this.comments = data))
+    },
+    async fetchSubscribedStatus () {
+      if (!this.channelId) return
+
+      this.fetchJson(
+        this.apiUrl() + '/subscribed',
+        {
+          channelId: this.channelId
+        },
+        {
+          headers: {
+            Authorization: this.getAuthToken()
+          }
+        }
+      ).then(json => {
+        this.subscribed = json.subscribed
+      })
+    },
+    subscribeHandler () {
+      this.fetchJson(this.apiUrl() + (this.subscribed ? '/unsubscribe' : '/subscribe'), null, {
+        method: 'POST',
+        body: JSON.stringify({
+          channelId: this.channelId
+        }),
+        headers: {
+          Authorization: this.getAuthToken(),
+          'Content-Type': 'application/json'
+        }
+      })
+      this.subscribed = !this.subscribed
+    },
+    handleScroll () {
+      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.apiUrl() + '/nextpage/comments/' + this.getVideoId(), {
+          url: this.comments.nextpage
+        }).then(json => {
+          this.comments.nextpage = json.nextpage
+          this.loading = false
+          json.comments.map(comment => this.comments.comments.push(comment))
+        })
+      }
+    },
+    getVideoId () {
+      return this.$route.query.v || this.$route.params.v
+    }
+  },
+  components: {
+    Player,
+    VideoItem,
+    ErrorHandler
+  }
+}
 </script>
diff --git a/src/router/router.js b/src/router/router.js
index 0030891..9e01408 100644
--- a/src/router/router.js
+++ b/src/router/router.js
@@ -4,56 +4,56 @@ const routes = [
   {
     path: '/',
     name: 'Trending',
-    component: () => import('@/components/TrendingPage.vue')
+    component: () => import('@/components/TrendingPage')
   },
   {
     path: '/preferences',
     name: 'Preferences',
-    component: () => import('@/components/Preferences.vue')
+    component: () => import('@/components/Preferences')
   },
   {
     path: '/results',
     name: 'SearchResults',
-    component: () => import('@/components/SearchResults.vue')
+    component: () => import('@/components/SearchResults')
   },
   {
     path: '/playlist',
     name: 'Playlist',
-    component: () => import('@/components/Playlist.vue')
+    component: () => import('@/components/Playlist')
   },
   {
     path: '/:path(v|w|embed|shorts|watch)/:v?',
     name: 'WatchVideo',
-    component: () => import('@/components/WatchVideo.vue')
+    component: () => import('@/components/WatchVideo')
   },
   {
     path: '/:path(channel|user|c)/:channelId/:videos?',
     name: 'Channel',
-    component: () => import('@/components/Channel.vue')
+    component: () => import('@/components/Channel')
   },
   {
     path: '/login',
     name: 'Login',
-    component: () => import('@/components/LoginPage.vue')
+    component: () => import('@/components/LoginPage')
   },
   {
     path: '/register',
     name: 'Register',
-    component: () => import('@/components/RegisterPage.vue')
+    component: () => import('@/components/RegisterPage')
   },
   {
     path: '/feed',
     name: 'Feed',
-    component: () => import('@/components/FeedPage.vue')
+    component: () => import('@/components/FeedPage')
   },
   {
     path: '/import',
     name: 'Import',
-    component: () => import('@/components/ImportPage.vue')
+    component: () => import('@/components/ImportPage')
   },
   {
     path: '/:videoId([a-zA-Z0-9_-]{11})',
-    component: () => import('@/components/VideoRedirect.vue')
+    component: () => import('@/components/VideoRedirect')
   }
 ]