From 51b394751d0ae6e8c48e411028af9d21b35bfbc4 Mon Sep 17 00:00:00 2001
From: FireMasterK <20838718+FireMasterK@users.noreply.github.com>
Date: Fri, 8 Oct 2021 19:20:41 +0100
Subject: [PATCH] Make eslint work, and fix all warnings.

---
 .eslintrc.js                         |   6 +
 babel.config.js                      |   6 +-
 package.json                         |   2 +
 src/App.vue                          |   2 +-
 src/components/Channel.vue           |  20 ++--
 src/components/Comment.vue           |  81 +++++++------
 src/components/ErrorHandler.vue      |   4 +-
 src/components/FeedPage.vue          |  34 +++---
 src/components/HistoryPage.vue       |  21 ++--
 src/components/ImportPage.vue        |   6 +-
 src/components/LoginPage.vue         |   7 +-
 src/components/Navigation.vue        |  18 +--
 src/components/Player.vue            | 168 ++++++++++++++-------------
 src/components/Playlist.vue          |  28 ++---
 src/components/Preferences.vue       |  99 ++++++++--------
 src/components/RegisterPage.vue      |   7 +-
 src/components/SearchResults.vue     |  26 +++--
 src/components/SearchSuggestions.vue |   5 +-
 src/components/SubscriptionsPage.vue |  41 +++----
 src/components/TrendingPage.vue      |  12 +-
 src/components/VideoItem.vue         |  24 ++--
 src/components/WatchVideo.vue        |  90 +++++++-------
 src/main.js                          |   2 +-
 vue.config.js                        |  32 ++---
 yarn.lock                            |  24 ++++
 25 files changed, 410 insertions(+), 355 deletions(-)
 create mode 100644 .eslintrc.js

diff --git a/.eslintrc.js b/.eslintrc.js
new file mode 100644
index 00000000..4274d91d
--- /dev/null
+++ b/.eslintrc.js
@@ -0,0 +1,6 @@
+module.exports = {
+    extends: ["plugin:vue/vue3-recommended", "plugin:prettier/recommended"],
+    rules: {
+        "vue/no-v-html": "off",
+    },
+};
diff --git a/babel.config.js b/babel.config.js
index e9558405..6431b568 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -1,5 +1,3 @@
 module.exports = {
-  presets: [
-    '@vue/cli-plugin-babel/preset'
-  ]
-}
+    presets: ["@vue/cli-plugin-babel/preset"],
+};
diff --git a/package.json b/package.json
index e92bc45b..15e35380 100644
--- a/package.json
+++ b/package.json
@@ -34,6 +34,8 @@
         "@vue/compiler-sfc": "3.2.19",
         "babel-eslint": "^10.1.0",
         "eslint": "^7.32.0",
+        "eslint-config-prettier": "^8.3.0",
+        "eslint-plugin-prettier": "^4.0.0",
         "eslint-plugin-vue": "^7.19.1"
     },
     "eslintConfig": {
diff --git a/src/App.vue b/src/App.vue
index f215f248..28803eaa 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -7,7 +7,7 @@
         <Navigation />
         <router-view v-slot="{ Component }">
             <keep-alive :max="5">
-                <component :key="$route.fullPath" :is="Component" />
+                <component :is="Component" :key="$route.fullPath" />
             </keep-alive>
         </router-view>
 
diff --git a/src/components/Channel.vue b/src/components/Channel.vue
index 780b7558..45cc4df6 100644
--- a/src/components/Channel.vue
+++ b/src/components/Channel.vue
@@ -3,17 +3,17 @@
 
     <div v-if="channel" v-show="!channel.error">
         <h1 class="uk-text-center">
-            <img height="48" width="48" class="uk-border-circle" v-bind:src="channel.avatarUrl" />{{ channel.name }}
+            <img height="48" width="48" class="uk-border-circle" :src="channel.avatarUrl" />{{ channel.name }}
         </h1>
-        <img v-if="channel.bannerUrl" v-bind:src="channel.bannerUrl" style="width: 100%" loading="lazy" />
+        <img v-if="channel.bannerUrl" :src="channel.bannerUrl" style="width: 100%" loading="lazy" />
         <p style="white-space: pre-wrap"><span v-html="purifyHTML(urlify(channel.description))"></span></p>
 
         <button
             v-if="authenticated"
-            @click="subscribeHandler"
             class="uk-button uk-button-small"
             style="background: #222"
             type="button"
+            @click="subscribeHandler"
         >
             {{ subscribed ? $t("actions.unsubscribe") : $t("actions.subscribe") }}
         </button>
@@ -22,11 +22,11 @@
 
         <div class="uk-grid-xl" uk-grid="parallax: 0">
             <div
+                v-for="video in channel.relatedStreams"
+                :key="video.url"
                 class="uk-width-1-2 uk-width-1-3@m uk-width-1-4@l uk-width-1-5@xl"
-                v-bind:key="video.url"
-                v-for="video in this.channel.relatedStreams"
             >
-                <VideoItem :video="video" height="94" width="168" hideChannel />
+                <VideoItem :video="video" height="94" width="168" hide-channel />
             </div>
         </div>
     </div>
@@ -37,6 +37,10 @@ import ErrorHandler from "@/components/ErrorHandler.vue";
 import VideoItem from "@/components/VideoItem.vue";
 
 export default {
+    components: {
+        ErrorHandler,
+        VideoItem,
+    },
     data() {
         return {
             channel: null,
@@ -116,9 +120,5 @@ export default {
             this.subscribed = !this.subscribed;
         },
     },
-    components: {
-        ErrorHandler,
-        VideoItem,
-    },
 };
 </script>
diff --git a/src/components/Comment.vue b/src/components/Comment.vue
index 660ca7b0..06987f9a 100644
--- a/src/components/Comment.vue
+++ b/src/components/Comment.vue
@@ -1,47 +1,52 @@
 <template>
-  <div class="comment uk-flex">
-    <img
-        :src="comment.thumbnail"
-        class="comment-avatar uk-border-circle uk-margin-right"
-        style="width: 48px; height: 48px;"
-        loading="lazy"
-        alt="Avatar"
-    />
+    <div class="comment uk-flex">
+        <img
+            :src="comment.thumbnail"
+            class="comment-avatar uk-border-circle uk-margin-right"
+            style="width: 48px; height: 48px;"
+            loading="lazy"
+            alt="Avatar"
+        />
 
-    <div class="comment-content">
-      <div class="comment-header">
-        <div v-if="comment.pinned" class="comment-pinned uk-text-meta">
-          <font-awesome-icon icon="thumbtack"></font-awesome-icon>&nbsp; {{ $t("comment.pinned_by") }} 
-          {{ uploader }}
-        </div>
+        <div class="comment-content">
+            <div class="comment-header">
+                <div v-if="comment.pinned" class="comment-pinned uk-text-meta">
+                    <font-awesome-icon icon="thumbtack"></font-awesome-icon>&nbsp; {{ $t("comment.pinned_by") }}
+                    {{ uploader }}
+                </div>
 
-        <div class="comment-author">
-          <router-link class="uk-text-bold uk-text-small" v-bind:to="comment.commentorUrl">
-              {{ comment.author }} </router-link
-          >&thinsp;<font-awesome-icon v-if="comment.verified" icon="check"></font-awesome-icon>
+                <div class="comment-author">
+                    <router-link class="uk-text-bold uk-text-small" :to="comment.commentorUrl">
+                        {{ comment.author }} </router-link
+                    >&thinsp;<font-awesome-icon v-if="comment.verified" icon="check"></font-awesome-icon>
+                </div>
+                <div class="comment-meta uk-text-meta uk-margin-small-bottom">
+                    {{ comment.commentedTime }}
+                </div>
+            </div>
+            <div class="comment-body" style="white-space: pre-wrap">
+                {{ comment.commentText }}
+            </div>
+            <div class="comment-footer uk-margin-small-top uk-text-meta">
+                <font-awesome-icon icon="thumbs-up" style="margin-right: 4px;"></font-awesome-icon>
+                <span>{{ numberFormat(comment.likeCount) }}</span>
+                &nbsp;
+                <font-awesome-icon v-if="comment.hearted" icon="heart"></font-awesome-icon>
+            </div>
         </div>
-        <div class="comment-meta uk-text-meta uk-margin-small-bottom">
-          {{ comment.commentedTime }}
-        </div>
-      </div>
-      <div class="comment-body" style="white-space: pre-wrap">
-        {{ comment.commentText }}
-      </div>
-      <div class="comment-footer uk-margin-small-top uk-text-meta">
-          <font-awesome-icon icon="thumbs-up" style="margin-right: 4px;"></font-awesome-icon>
-          <span>{{ numberFormat(comment.likeCount) }}</span>
-          &nbsp;
-          <font-awesome-icon v-if="comment.hearted" icon="heart"></font-awesome-icon>
-      </div>
     </div>
-  </div>
 </template>
 
 <script>
-  export default {
+export default {
     props: {
-      comment: Object,
-      uploader: String
-    }
-  }
-</script>
\ No newline at end of file
+        comment: {
+            type: Object,
+            default: () => {
+                return {};
+            },
+        },
+        uploader: { type: String, default: null },
+    },
+};
+</script>
diff --git a/src/components/ErrorHandler.vue b/src/components/ErrorHandler.vue
index 988559c8..bfda08c8 100644
--- a/src/components/ErrorHandler.vue
+++ b/src/components/ErrorHandler.vue
@@ -9,8 +9,8 @@
 <script>
 export default {
     props: {
-        error: String,
-        message: String,
+        error: { type: String, default: null },
+        message: { type: String, default: null },
     },
 };
 </script>
diff --git a/src/components/FeedPage.vue b/src/components/FeedPage.vue
index 2e58174e..278699ad 100644
--- a/src/components/FeedPage.vue
+++ b/src/components/FeedPage.vue
@@ -1,12 +1,12 @@
 <template>
-    <h1 class="uk-text-bold uk-text-center" v-t="'titles.feed'" />
+    <h1 v-t="'titles.feed'" class="uk-text-bold uk-text-center" />
 
     <button
         v-if="authenticated"
-        @click="exportHandler"
         class="uk-button uk-button-small"
         style="background: #222; margin-right: 0.5rem"
         type="button"
+        @click="exportHandler"
     >
         <router-link to="/subscriptions">
             Subscriptions
@@ -19,11 +19,11 @@
 
     <span class="uk-align-right@m">
         <label for="ddlSortBy">{{ $t("actions.sort_by") }}</label>
-        <select id="ddlSortBy" class="uk-select uk-width-auto" v-model="selectedSort" @change="onChange()">
-            <option value="descending" v-t="'actions.most_recent'" />
-            <option value="ascending" v-t="'actions.least_recent'" />
-            <option value="channel_ascending" v-t="'actions.channel_name_asc'" />
-            <option value="channel_descending" v-t="'actions.channel_name_desc'" />
+        <select id="ddlSortBy" v-model="selectedSort" class="uk-select uk-width-auto" @change="onChange()">
+            <option v-t="'actions.most_recent'" value="descending" />
+            <option v-t="'actions.least_recent'" value="ascending" />
+            <option v-t="'actions.channel_name_asc'" value="channel_ascending" />
+            <option v-t="'actions.channel_name_desc'" value="channel_descending" />
         </select>
     </span>
 
@@ -31,10 +31,10 @@
 
     <div class="uk-grid-xl" uk-grid="parallax: 0">
         <div
+            v-for="video in videos"
+            :key="video.url"
             :style="[{ background: backgroundColor }]"
             class="uk-width-1-1 uk-width-1-3@s uk-width-1-4@m uk-width-1-5@l uk-width-1-6@xl"
-            v-bind:key="video.url"
-            v-for="video in videos"
         >
             <VideoItem :video="video" />
         </div>
@@ -45,6 +45,9 @@
 import VideoItem from "@/components/VideoItem.vue";
 
 export default {
+    components: {
+        VideoItem,
+    },
     data() {
         return {
             currentVideoCount: 0,
@@ -54,6 +57,11 @@ export default {
             selectedSort: "descending",
         };
     },
+    computed: {
+        getRssUrl(_this) {
+            return _this.apiUrl() + "/feed/rss?authToken=" + _this.getAuthToken();
+        },
+    },
     mounted() {
         this.fetchFeed().then(videos => {
             this.videosStore = videos;
@@ -105,13 +113,5 @@ export default {
             }
         },
     },
-    computed: {
-        getRssUrl(_this) {
-            return _this.apiUrl() + "/feed/rss?authToken=" + _this.getAuthToken();
-        },
-    },
-    components: {
-        VideoItem,
-    },
 };
 </script>
diff --git a/src/components/HistoryPage.vue b/src/components/HistoryPage.vue
index 027989cf..d312827e 100644
--- a/src/components/HistoryPage.vue
+++ b/src/components/HistoryPage.vue
@@ -1,14 +1,13 @@
 <template>
     <h1 class="uk-text-bold uk-text-center">{{ $t("titles.history") }}</h1>
 
-
     <div style="text-align: right">
         <label for="ddlSortBy">{{ $t("actions.sort_by") }}</label>
-        <select id="ddlSortBy" class="uk-select uk-width-auto" v-model="selectedSort" @change="onChange()">
-            <option value="descending" v-t="'actions.most_recent'" />
-            <option value="ascending" v-t="'actions.least_recent'" />
-            <option value="channel_ascending" v-t="'actions.channel_name_asc'" />
-            <option value="channel_descending" v-t="'actions.channel_name_desc'" />
+        <select id="ddlSortBy" v-model="selectedSort" class="uk-select uk-width-auto" @change="onChange()">
+            <option v-t="'actions.most_recent'" value="descending" />
+            <option v-t="'actions.least_recent'" value="ascending" />
+            <option v-t="'actions.channel_name_asc'" value="channel_ascending" />
+            <option v-t="'actions.channel_name_desc'" value="channel_descending" />
         </select>
     </div>
 
@@ -16,10 +15,10 @@
 
     <div class="uk-grid-xl" uk-grid="parallax: 0">
         <div
+            v-for="video in videos"
+            :key="video.url"
             :style="[{ background: backgroundColor }]"
             class="uk-width-1-2 uk-width-1-3@s uk-width-1-4@m uk-width-1-5@l uk-width-1-6@xl"
-            v-bind:key="video.url"
-            v-for="video in videos"
         >
             <VideoItem :video="video" />
         </div>
@@ -32,6 +31,9 @@
 import VideoItem from "@/components/VideoItem.vue";
 
 export default {
+    components: {
+        VideoItem,
+    },
     data() {
         return {
             videos: [],
@@ -85,8 +87,5 @@ export default {
             }
         },
     },
-    components: {
-        VideoItem,
-    },
 };
 </script>
diff --git a/src/components/ImportPage.vue b/src/components/ImportPage.vue
index f164f335..29b42c77 100644
--- a/src/components/ImportPage.vue
+++ b/src/components/ImportPage.vue
@@ -2,13 +2,13 @@
     <div class="uk-vertical-align uk-text-center uk-height-1-1 ">
         <form class="uk-panel uk-panel-box">
             <div class="uk-form-row">
-                <input type="file" @change="fileChange" ref="fileSelector" />
+                <input ref="fileSelector" type="file" @change="fileChange" />
             </div>
             <div class="uk-form-row">
                 <b>Selected Subscriptions: {{ selectedSubscriptions }}</b>
             </div>
             <div class="uk-form-row">
-                <b>Override: <input class="uk-checkbox" v-model="override" type="checkbox"/></b>
+                <b>Override: <input v-model="override" class="uk-checkbox" type="checkbox"/></b>
             </div>
             <div class="uk-form-row">
                 <a
@@ -79,7 +79,7 @@ export default {
     },
     methods: {
         fileChange() {
-            const file = this.$refs.fileSelector.files[0]
+            const file = this.$refs.fileSelector.files[0];
             file.text().then(text => {
                 this.subscriptions = [];
 
diff --git a/src/components/LoginPage.vue b/src/components/LoginPage.vue
index bd2cd50b..31afb458 100644
--- a/src/components/LoginPage.vue
+++ b/src/components/LoginPage.vue
@@ -3,9 +3,9 @@
         <form class="uk-panel uk-panel-box">
             <div class="uk-form-row">
                 <input
+                    v-model="username"
                     class="uk-width-1-1 uk-form-large uk-input uk-width-auto"
                     type="text"
-                    v-model="username"
                     autocomplete="username"
                     :placeholder="$t('login.username')"
                     :aria-label="$t('login.username')"
@@ -13,9 +13,9 @@
             </div>
             <div class="uk-form-row">
                 <input
+                    v-model="password"
                     class="uk-width-1-1 uk-form-large uk-input  uk-width-auto"
                     type="password"
-                    v-model="password"
                     autocomplete="password"
                     :placeholder="$t('login.password')"
                     :aria-label="$t('login.password')"
@@ -26,8 +26,9 @@
                     class="uk-width-1-1 uk-button uk-button-primary uk-button-large uk-width-auto"
                     style="background: #222"
                     @click="login"
-                    > {{ $t('titles.login') }} </a
                 >
+                    {{ $t("titles.login") }}
+                </a>
             </div>
         </form>
     </div>
diff --git a/src/components/Navigation.vue b/src/components/Navigation.vue
index 93481309..b295aff2 100644
--- a/src/components/Navigation.vue
+++ b/src/components/Navigation.vue
@@ -17,12 +17,12 @@
         </div>
         <div class="uk-navbar-center uk-flex uk-visible@m">
             <input
+                v-model="searchText"
                 class="uk-input uk-width-medium"
                 type="text"
                 role="search"
                 :title="$t('actions.search')"
                 :placeholder="$t('actions.search')"
-                v-model="searchText"
                 @keyup="onKeyUp"
                 @focus="onInputFocus"
                 @blur="onInputBlur"
@@ -31,31 +31,31 @@
         <div class="uk-navbar-right">
             <ul class="uk-navbar-nav">
                 <li>
-                    <router-link to="/preferences" v-t="'titles.preferences'" />
+                    <router-link v-t="'titles.preferences'" to="/preferences" />
                 </li>
                 <li v-if="shouldShowLogin">
-                    <router-link to="/login" v-t="'titles.login'" />
+                    <router-link v-t="'titles.login'" to="/login" />
                 </li>
                 <li v-if="shouldShowLogin">
-                    <router-link to="/register" v-t="'titles.register'" />
+                    <router-link v-t="'titles.register'" to="/register" />
                 </li>
                 <li v-if="shouldShowHistory">
-                    <router-link to="/history" v-t="'titles.history'" />
+                    <router-link v-t="'titles.history'" to="/history" />
                 </li>
                 <li v-if="authenticated">
-                    <router-link to="/feed" v-t="'titles.feed'" />
+                    <router-link v-t="'titles.feed'" to="/feed" />
                 </li>
             </ul>
         </div>
     </nav>
     <div class="uk-container-expand uk-hidden@m">
         <input
+            v-model="searchText"
             class="uk-input"
             type="text"
             role="search"
             :title="$t('actions.search')"
             :placeholder="$t('actions.search')"
-            v-model="searchText"
             @keyup="onKeyUp"
             @focus="onInputFocus"
             @blur="onInputBlur"
@@ -63,9 +63,9 @@
     </div>
     <SearchSuggestions
         v-show="searchText && suggestionsVisible"
-        :searchText="searchText"
-        @searchchange="onSearchTextChange"
         ref="searchSuggestions"
+        :search-text="searchText"
+        @searchchange="onSearchTextChange"
     />
 </template>
 
diff --git a/src/components/Player.vue b/src/components/Player.vue
index f8924e19..9d213918 100644
--- a/src/components/Player.vue
+++ b/src/components/Player.vue
@@ -1,40 +1,22 @@
 <template>
     <div class="uk-container-expand">
         <div
+            ref="container"
             data-shaka-player-container
             style="width: 100%; height: 100%; background: #000"
             :style="!isEmbed ? { 'max-height': '75vh', 'min-height': '250px' } : {}"
-            ref="container"
         >
             <video
+                ref="videoEl"
                 data-shaka-player
                 class="uk-width-expand"
                 :autoplay="shouldAutoPlay"
                 :loop="selectedAutoLoop"
-                ref="videoEl"
             ></video>
         </div>
     </div>
 </template>
 
-<style>
-.shaka-text-container > div {
-    height: auto !important;
-    width: auto !important;
-    top: auto !important;
-    left: auto !important;
-}
-
-.shaka-text-container * {
-    background-color: rgba(8, 8, 8, 0.75) !important;
-    color: white !important;
-}
-
-.shaka-video-container:-webkit-full-screen {
-    max-height: none !important;
-}
-</style>
-
 <script>
 import("shaka-player/dist/controls.css");
 const shaka = import("shaka-player/dist/shaka-player.ui.js");
@@ -43,8 +25,18 @@ window.muxjs = muxjs;
 
 export default {
     props: {
-        video: Object,
-        sponsors: Object,
+        video: {
+            type: Object,
+            default: () => {
+                return {};
+            },
+        },
+        sponsors: {
+            type: Object,
+            default: () => {
+                return {};
+            },
+        },
         selectedAutoPlay: Boolean,
         selectedAutoLoop: Boolean,
         isEmbed: Boolean,
@@ -82,6 +74,63 @@ export default {
     mounted() {
         if (!this.shaka) this.shakaPromise = shaka.then(shaka => shaka.default).then(shaka => (this.shaka = shaka));
     },
+    activated() {
+        import("hotkeys-js")
+            .then(mod => mod.default)
+            .then(hotkeys => {
+                this.hotkeys = hotkeys;
+                var self = this;
+                hotkeys("f,m,j,k,l,space,up,down,left,right", function(e, handler) {
+                    const videoEl = self.$refs.videoEl;
+                    switch (handler.key) {
+                        case "f":
+                            self.$ui.getControls().toggleFullScreen();
+                            e.preventDefault();
+                            break;
+                        case "m":
+                            videoEl.muted = !videoEl.muted;
+                            e.preventDefault();
+                            break;
+                        case "j":
+                            videoEl.currentTime = Math.max(videoEl.currentTime - 15, 0);
+                            e.preventDefault();
+                            break;
+                        case "l":
+                            videoEl.currentTime = videoEl.currentTime + 15;
+                            e.preventDefault();
+                            break;
+                        case "k":
+                        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() {
+        this.destroy();
+    },
+    unmounted() {
+        this.destroy();
+    },
     methods: {
         async loadVideo() {
             const component = this;
@@ -304,62 +353,23 @@ export default {
             if (this.$refs.container) this.$refs.container.querySelectorAll("div").forEach(node => node.remove());
         },
     },
-    activated() {
-        import("hotkeys-js")
-            .then(mod => mod.default)
-            .then(hotkeys => {
-                this.hotkeys = hotkeys;
-                var self = this;
-                hotkeys("f,m,j,k,l,space,up,down,left,right", function(e, handler) {
-                    const videoEl = self.$refs.videoEl;
-                    switch (handler.key) {
-                        case "f":
-                            self.$ui.getControls().toggleFullScreen();
-                            e.preventDefault();
-                            break;
-                        case "m":
-                            videoEl.muted = !videoEl.muted;
-                            e.preventDefault();
-                            break;
-                        case "j":
-                            videoEl.currentTime = Math.max(videoEl.currentTime - 15, 0);
-                            e.preventDefault();
-                            break;
-                        case "l":
-                            videoEl.currentTime = videoEl.currentTime + 15;
-                            e.preventDefault();
-                            break;
-                        case "k":
-                        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() {
-        this.destroy();
-    },
-    unmounted() {
-        this.destroy();
-    },
 };
 </script>
+
+<style>
+.shaka-text-container > div {
+    height: auto !important;
+    width: auto !important;
+    top: auto !important;
+    left: auto !important;
+}
+
+.shaka-text-container * {
+    background-color: rgba(8, 8, 8, 0.75) !important;
+    color: white !important;
+}
+
+.shaka-video-container:-webkit-full-screen {
+    max-height: none !important;
+}
+</style>
diff --git a/src/components/Playlist.vue b/src/components/Playlist.vue
index e3a131e1..fa748066 100644
--- a/src/components/Playlist.vue
+++ b/src/components/Playlist.vue
@@ -3,13 +3,13 @@
 
     <div v-if="playlist" v-show="!playlist.error">
         <h1 class="uk-text-center">
-            <img v-bind:src="playlist.avatarUrl" height="48" width="48" loading="lazy"/>
+            <img :src="playlist.avatarUrl" height="48" width="48" loading="lazy" />
             {{ playlist.name }}
         </h1>
 
         <b
-            ><router-link class="uk-text-justify" v-bind:to="playlist.uploaderUrl || '/'">
-                <img v-bind:src="playlist.uploaderAvatar" loading="lazy" class="uk-border-circle" />
+            ><router-link class="uk-text-justify" :to="playlist.uploaderUrl || '/'">
+                <img :src="playlist.uploaderAvatar" loading="lazy" class="uk-border-circle" />
                 {{ playlist.uploader }}</router-link
             ></b
         >
@@ -24,9 +24,9 @@
 
         <div class="uk-grid-xl" uk-grid="parallax: 0">
             <div
+                v-for="video in playlist.relatedStreams"
+                :key="video.url"
                 class="uk-width-1-2 uk-width-1-3@m uk-width-1-4@l uk-width-1-5@xl"
-                v-bind:key="video.url"
-                v-for="video in this.playlist.relatedStreams"
             >
                 <VideoItem :video="video" height="94" width="168" />
             </div>
@@ -39,11 +39,20 @@ import ErrorHandler from "@/components/ErrorHandler.vue";
 import VideoItem from "@/components/VideoItem.vue";
 
 export default {
+    components: {
+        ErrorHandler,
+        VideoItem,
+    },
     data() {
         return {
             playlist: null,
         };
     },
+    computed: {
+        getRssUrl: _this => {
+            return _this.apiUrl() + "/rss/playlists/" + _this.$route.query.list;
+        },
+    },
     mounted() {
         this.getPlaylistData();
     },
@@ -53,11 +62,6 @@ export default {
     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);
@@ -82,9 +86,5 @@ export default {
             }
         },
     },
-    components: {
-        ErrorHandler,
-        VideoItem,
-    },
 };
 </script>
diff --git a/src/components/Preferences.vue b/src/components/Preferences.vue
index 8364938c..12ce50eb 100644
--- a/src/components/Preferences.vue
+++ b/src/components/Preferences.vue
@@ -3,7 +3,7 @@
         <button class="uk-button uk-button-text" @click="$router.go(-1) || $router.push('/')">
             <font-awesome-icon icon="chevron-left" /> &nbsp;{{ $t("actions.back") }}
         </button>
-        <span><h1 class="uk-text-bold uk-text-center" v-t="'titles.preferences'"/></span>
+        <span><h1 v-t="'titles.preferences'" class="uk-text-bold uk-text-center"/></span>
         <span />
     </div>
     <hr />
@@ -13,158 +13,163 @@
     <br />
     <input
         id="chkEnableSponsorblock"
-        class="uk-checkbox"
         v-model="sponsorBlock"
-        @change="onChange($event)"
+        class="uk-checkbox"
         type="checkbox"
+        @change="onChange($event)"
     />
     <br />
     <label for="chkSkipSponsors"><b v-t="'actions.skip_sponsors'"/></label>
     <br />
-    <input id="chkSkipSponsors" class="uk-checkbox" v-model="skipSponsor" @change="onChange($event)" type="checkbox" />
+    <input id="chkSkipSponsors" v-model="skipSponsor" class="uk-checkbox" type="checkbox" @change="onChange($event)" />
     <br />
     <label for="chkSkipIntro"><b v-t="'actions.skip_intro'"/></label>
     <br />
-    <input id="chkSkipIntro" class="uk-checkbox" v-model="skipIntro" @change="onChange($event)" type="checkbox" />
+    <input id="chkSkipIntro" v-model="skipIntro" class="uk-checkbox" type="checkbox" @change="onChange($event)" />
     <br />
     <label for="chkSkipOutro"><b v-t="'actions.skip_outro'"/></label>
     <br />
-    <input id="chkSkipOutro" class="uk-checkbox" v-model="skipOutro" @change="onChange($event)" type="checkbox" />
+    <input id="chkSkipOutro" v-model="skipOutro" class="uk-checkbox" type="checkbox" @change="onChange($event)" />
     <br />
     <label for="chkSkipPreview"><b v-t="'actions.skip_preview'"/></label>
     <br />
-    <input id="chkSkipPreview" class="uk-checkbox" v-model="skipPreview" @change="onChange($event)" type="checkbox" />
+    <input id="chkSkipPreview" v-model="skipPreview" class="uk-checkbox" type="checkbox" @change="onChange($event)" />
     <br />
     <label for="chkSkipInteraction"><b v-t="'actions.skip_interaction'"/></label>
     <br />
     <input
         id="chkSkipInteraction"
-        class="uk-checkbox"
         v-model="skipInteraction"
-        @change="onChange($event)"
+        class="uk-checkbox"
         type="checkbox"
+        @change="onChange($event)"
     />
     <br />
     <label for="chkSkipSelfPromo"><b v-t="'actions.skip_self_promo'"/></label>
     <br />
     <input
         id="chkSkipSelfPromo"
-        class="uk-checkbox"
         v-model="skipSelfPromo"
-        @change="onChange($event)"
+        class="uk-checkbox"
         type="checkbox"
+        @change="onChange($event)"
     />
     <br />
     <label for="chkSkipNonMusic"><b v-t="'actions.skip_non_music'"/></label>
     <br />
     <input
         id="chkSkipNonMusic"
-        class="uk-checkbox"
         v-model="skipMusicOffTopic"
-        @change="onChange($event)"
+        class="uk-checkbox"
         type="checkbox"
+        @change="onChange($event)"
     />
     <br />
     <label for="ddlTheme"><b v-t="'actions.theme'"/></label>
     <br />
-    <select id="ddlTheme" class="uk-select uk-width-auto" v-model="selectedTheme" @change="onChange($event)">
-        <option value="auto" v-t="'actions.auto'" />
-        <option value="dark" v-t="'actions.dark'" />
-        <option value="light" v-t="'actions.light'" />
+    <select id="ddlTheme" v-model="selectedTheme" class="uk-select uk-width-auto" @change="onChange($event)">
+        <option v-t="'actions.auto'" value="auto" />
+        <option v-t="'actions.dark'" value="dark" />
+        <option v-t="'actions.light'" value="light" />
     </select>
     <br />
     <label for="chkAutoPlayVideo"><b v-t="'actions.autoplay_video'"/></label>
     <br />
     <input
         id="chkAutoPlayVideo"
-        class="uk-checkbox"
         v-model="autoPlayVideo"
-        @change="onChange($event)"
+        class="uk-checkbox"
         type="checkbox"
+        @change="onChange($event)"
     />
     <br />
     <label for="chkAudioOnly"><b v-t="'actions.audio_only'"/></label>
     <br />
-    <input id="chkAudioOnly" class="uk-checkbox" v-model="listen" @change="onChange($event)" type="checkbox" />
+    <input id="chkAudioOnly" v-model="listen" class="uk-checkbox" type="checkbox" @change="onChange($event)" />
     <br />
     <label for="ddlDefaultQuality"><b v-t="'actions.default_quality'"/></label>
     <br />
-    <select id="ddlDefaultQuality" class="uk-select uk-width-auto" v-model="defaultQuality" @change="onChange($event)">
-        <option value="0" v-t="'actions.auto'" />
-        <option :key="resolution" v-for="resolution in resolutions" :value="resolution">{{ resolution }}p</option>
+    <select id="ddlDefaultQuality" v-model="defaultQuality" class="uk-select uk-width-auto" @change="onChange($event)">
+        <option v-t="'actions.auto'" value="0" />
+        <option v-for="resolution in resolutions" :key="resolution" :value="resolution">{{ resolution }}p</option>
     </select>
     <br />
     <label for="txtBufferingGoal"><b v-t="'actions.buffering_goal'"/></label>
     <br />
     <input
         id="txtBufferingGoal"
-        class="uk-input uk-width-auto"
         v-model="bufferingGoal"
-        @change="onChange($event)"
+        class="uk-input uk-width-auto"
         type="text"
+        @change="onChange($event)"
     />
     <br />
     <label for="ddlCountrySelection"><b v-t="'actions.country_selection'"/></label>
     <br />
-    <select id="ddlCountrySelection" class="uk-select uk-width-auto" v-model="country" @change="onChange($event)">
-        <option :key="country.code" v-for="country in countryMap" :value="country.code">{{ country.name }}</option>
+    <select
+        id="ddlCountrySelection"
+        v-model="countrySelected"
+        class="uk-select uk-width-auto"
+        @change="onChange($event)"
+    >
+        <option v-for="country in countryMap" :key="country.code" :value="country.code">{{ country.name }}</option>
     </select>
     <br />
     <label for="ddlDefaultHomepage"><b v-t="'actions.default_homepage'"/></label>
     <br />
     <select
         id="ddlDefaultHomepage"
-        class="uk-select uk-width-auto"
         v-model="defaultHomepage"
+        class="uk-select uk-width-auto"
         @change="onChange($event)"
     >
-        <option value="trending" v-t="'titles.trending'" />
-        <option value="feed" v-t="'titles.feed'" />
+        <option v-t="'titles.trending'" value="trending" />
+        <option v-t="'titles.feed'" value="feed" />
     </select>
     <br />
     <label for="chkShowComments"><b v-t="'actions.show_comments'"/></label>
     <br />
-    <input id="chkShowComments" class="uk-checkbox" v-model="showComments" @change="onChange($event)" type="checkbox" />
+    <input id="chkShowComments" v-model="showComments" class="uk-checkbox" type="checkbox" @change="onChange($event)" />
     <br />
     <label for="chkMinimizeDescription"><b v-t="'actions.minimize_description_default'"/></label>
     <br />
     <input
         id="chkMinimizeDescription"
-        class="uk-checkbox"
         v-model="minimizeDescription"
-        @change="onChange($event)"
+        class="uk-checkbox"
         type="checkbox"
+        @change="onChange($event)"
     />
     <br />
     <label for="chkStoreWatchHistory"><b v-t="'actions.store_watch_history'"/></label>
     <br />
     <input
         id="chkStoreWatchHistory"
-        class="uk-checkbox"
         v-model="watchHistory"
-        @change="onChange($event)"
+        class="uk-checkbox"
         type="checkbox"
+        @change="onChange($event)"
     />
     <br />
     <label for="ddlLanguageSelection"><b v-t="'actions.language_selection'"/></label>
     <br />
     <select
         id="ddlLanguageSelection"
-        class="uk-select uk-width-auto"
         v-model="selectedLanguage"
+        class="uk-select uk-width-auto"
         @change="onChange($event)"
     >
-        <option :key="language.code" v-for="language in languages" :value="language.code">{{ language.name }}</option>
+        <option v-for="language in languages" :key="language.code" :value="language.code">{{ language.name }}</option>
     </select>
     <br />
     <label for="ddlEnabledCodecs"><b v-t="'actions.enabled_codecs'"/></label>
     <br />
     <select
         id="ddlEnabledCodecs"
-        class="uk-select uk-width-auto"
         v-model="enabledCodecs"
-        @change="onChange($event)"
+        class="uk-select uk-width-auto"
         multiple
+        @change="onChange($event)"
     >
         <option value="av1">AV1</option>
         <option value="vp9">VP9</option>
@@ -173,11 +178,11 @@
     <br />
     <label for="chkDisableLBRY"><b v-t="'actions.disable_lbry'"/></label>
     <br />
-    <input id="chkDisableLBRY" class="uk-checkbox" v-model="disableLBRY" @change="onChange($event)" type="checkbox" />
+    <input id="chkDisableLBRY" v-model="disableLBRY" class="uk-checkbox" type="checkbox" @change="onChange($event)" />
     <br />
     <label for="chkEnableLBRYProxy"><b v-t="'actions.enable_lbry_proxy'"/></label>
     <br />
-    <input id="chkEnableLBRYProxy" class="uk-checkbox" v-model="proxyLBRY" @change="onChange($event)" type="checkbox" />
+    <input id="chkEnableLBRYProxy" v-model="proxyLBRY" class="uk-checkbox" type="checkbox" @change="onChange($event)" />
     <h2 v-t="'actions.instances_list'" />
     <table class="uk-table">
         <thead>
@@ -188,7 +193,7 @@
                 <th>{{ $t("preferences.ssl_score") }}</th>
             </tr>
         </thead>
-        <tbody v-bind:key="instance.name" v-for="instance in instances">
+        <tbody v-for="instance in instances" :key="instance.name">
             <tr>
                 <td>{{ instance.name }}</td>
                 <td>{{ instance.locations }}</td>
@@ -208,11 +213,11 @@
     <br />
     <select
         id="ddlInstanceSelection"
-        class="uk-select uk-width-auto"
         v-model="selectedInstance"
+        class="uk-select uk-width-auto"
         @change="onChange($event)"
     >
-        <option v-bind:key="instance.name" v-for="instance in instances" v-bind:value="instance.apiurl">
+        <option v-for="instance in instances" :key="instance.name" :value="instance.apiurl">
             {{ instance.name }}
         </option>
     </select>
@@ -240,7 +245,7 @@ export default {
             defaultQuality: 0,
             bufferingGoal: 10,
             countryMap: CountryMap,
-            country: "US",
+            countrySelected: "US",
             defaultHomepage: "trending",
             showComments: true,
             minimizeDescription: false,
@@ -347,7 +352,7 @@ export default {
             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.countrySelected = this.getPreferenceString("region", "US");
             this.defaultHomepage = this.getPreferenceString("homepage", "trending");
             this.showComments = this.getPreferenceBoolean("comments", true);
             this.minimizeDescription = this.getPreferenceBoolean("minimizeDescription", false);
@@ -400,7 +405,7 @@ export default {
                 localStorage.setItem("listen", this.listen);
                 localStorage.setItem("quality", this.defaultQuality);
                 localStorage.setItem("bufferGoal", this.bufferingGoal);
-                localStorage.setItem("region", this.country);
+                localStorage.setItem("region", this.countrySelected);
                 localStorage.setItem("homepage", this.defaultHomepage);
                 localStorage.setItem("comments", this.showComments);
                 localStorage.setItem("minimizeDescription", this.minimizeDescription);
diff --git a/src/components/RegisterPage.vue b/src/components/RegisterPage.vue
index d9b3f705..d797358d 100644
--- a/src/components/RegisterPage.vue
+++ b/src/components/RegisterPage.vue
@@ -3,9 +3,9 @@
         <form class="uk-panel uk-panel-box">
             <div class="uk-form-row">
                 <input
+                    v-model="username"
                     class="uk-width-1-1 uk-form-large uk-input uk-width-auto"
                     type="text"
-                    v-model="username"
                     autocomplete="username"
                     :placeholder="$t('login.username')"
                     :aria-label="$t('login.username')"
@@ -13,9 +13,9 @@
             </div>
             <div class="uk-form-row">
                 <input
+                    v-model="password"
                     class="uk-width-1-1 uk-form-large uk-input  uk-width-auto"
                     type="password"
-                    v-model="password"
                     autocomplete="password"
                     :placeholder="$t('login.password')"
                     :aria-label="$t('login.password')"
@@ -26,7 +26,8 @@
                     class="uk-width-1-1 uk-button uk-button-primary uk-button-large uk-width-auto"
                     style="background: #222"
                     @click="register"
-                    > {{ $t("titles.register") }}</a
+                >
+                    {{ $t("titles.register") }}</a
                 >
             </div>
         </form>
diff --git a/src/components/SearchResults.vue b/src/components/SearchResults.vue
index 389f65ec..9efc2858 100644
--- a/src/components/SearchResults.vue
+++ b/src/components/SearchResults.vue
@@ -3,16 +3,18 @@
         {{ $route.query.search_query }}
     </h1>
 
-    <label for="ddlSearchFilters"><b>{{ $t("actions.filter") }}: </b></label>
+    <label for="ddlSearchFilters"
+        ><b>{{ $t("actions.filter") }}: </b></label
+    >
     <select
         id="ddlSearchFilters"
+        v-model="selectedFilter"
         default="all"
         class="uk-select uk-width-auto"
         style="height: 100%"
-        v-model="selectedFilter"
         @change="updateResults()"
     >
-        <option v-bind:key="filter" v-for="filter in availableFilters" v-bind:value="filter">
+        <option v-for="filter in availableFilters" :key="filter" :value="filter">
             {{ filter.replace("_", " ") }}
         </option>
     </select>
@@ -21,16 +23,16 @@
 
     <div v-if="results" class="uk-grid-xl" uk-grid="parallax: 0">
         <div
+            v-for="result in results.items"
+            :key="result.url"
             :style="[{ background: backgroundColor }]"
             class="uk-width-1-2 uk-width-1-3@s uk-width-1-4@m uk-width-1-5@l uk-width-1-6@xl"
-            v-bind:key="result.url"
-            v-for="result in results.items"
         >
             <VideoItem v-if="shouldUseVideoItem(result)" :video="result" height="94" width="168" />
-            <div class="uk-text-secondary" v-if="!shouldUseVideoItem(result)">
-                <router-link class="uk-text-emphasis" v-bind:to="result.url">
+            <div v-if="!shouldUseVideoItem(result)" class="uk-text-secondary">
+                <router-link class="uk-text-emphasis" :to="result.url">
                     <div class="uk-position-relative">
-                        <img style="width: 100%" v-bind:src="result.thumbnail" loading="lazy" />
+                        <img style="width: 100%" :src="result.thumbnail" loading="lazy" />
                     </div>
                     <p>
                         {{ result.name }}&thinsp;<font-awesome-icon
@@ -40,7 +42,7 @@
                     </p>
                 </router-link>
                 <p v-if="result.description">{{ result.description }}</p>
-                <router-link class="uk-link-muted" v-if="result.uploaderUrl" v-bind:to="result.uploaderUrl">
+                <router-link v-if="result.uploaderUrl" class="uk-link-muted" :to="result.uploaderUrl">
                     <p>
                         {{ result.uploader }}&thinsp;<font-awesome-icon
                             v-if="result.uploaderVerified"
@@ -64,6 +66,9 @@
 import VideoItem from "@/components/VideoItem.vue";
 
 export default {
+    components: {
+        VideoItem,
+    },
     data() {
         return {
             results: null,
@@ -123,8 +128,5 @@ export default {
             return item.title;
         },
     },
-    components: {
-        VideoItem,
-    },
 };
 </script>
diff --git a/src/components/SearchSuggestions.vue b/src/components/SearchSuggestions.vue
index d0a51aae..696befd2 100644
--- a/src/components/SearchSuggestions.vue
+++ b/src/components/SearchSuggestions.vue
@@ -8,9 +8,9 @@
                 v-for="(suggestion, i) in searchSuggestions"
                 :key="i"
                 :style="[selected === i ? { background: secondaryForegroundColor } : {}]"
+                class="uk-margin-remove suggestion"
                 @mouseover="onMouseOver(i)"
                 @mousedown.stop="onClick(i)"
-                class="uk-margin-remove suggestion"
             >
                 {{ suggestion }}
             </li>
@@ -21,8 +21,9 @@
 <script>
 export default {
     props: {
-        searchText: String,
+        searchText: { type: String, default: "" },
     },
+    emits: ["searchchange"],
     data() {
         return {
             selected: 0,
diff --git a/src/components/SubscriptionsPage.vue b/src/components/SubscriptionsPage.vue
index 88458a02..c7138c74 100644
--- a/src/components/SubscriptionsPage.vue
+++ b/src/components/SubscriptionsPage.vue
@@ -1,7 +1,6 @@
 <template>
     <h1 class="uk-text-bold uk-text-center">{{ $t("titles.subscriptions") }}</h1>
 
-
     <div style="text-align: center">
         <button
             v-if="authenticated"
@@ -16,35 +15,37 @@
 
         <button
             v-if="authenticated"
-            @click="exportHandler"
             class="uk-button uk-button-small"
             style="background: #222; color: white"
             type="button"
+            @click="exportHandler"
         >
             {{ $t("actions.export_to_json") }}
         </button>
-
     </div>
-        <hr />
+    <hr />
 
-
-        <div :key="subscription.url" v-for="subscription in subscriptions" style="text-align: center;">
-            <div class="uk-text-primary" :style="[{ background: backgroundColor }]">
-                <a :href="subscription.url">
-                    <img :src="subscription.avatar" class="uk-margin-small-right uk-border-circle" width="96" height="96" />
-                    <span class="uk-text-large" style="width: 30rem; display: inline-block; text-align: center; margin-left: 6rem">{{ subscription.name }}</span>
-                </a>
-                <button
-                    class="uk-button uk-button-large"
-                    style="background: #222; margin-left: 0.5rem; width: 185px"
-                    type="button"
-                    @click="handleButton(subscription)"
+    <div v-for="subscription in subscriptions" :key="subscription.url" style="text-align: center;">
+        <div class="uk-text-primary" :style="[{ background: backgroundColor }]">
+            <a :href="subscription.url">
+                <img :src="subscription.avatar" class="uk-margin-small-right uk-border-circle" width="96" height="96" />
+                <span
+                    class="uk-text-large"
+                    style="width: 30rem; display: inline-block; text-align: center; margin-left: 6rem"
+                    >{{ subscription.name }}</span
                 >
-                    {{ subscription.subscribed ? $t("actions.unsubscribe") : $t("actions.subscribe") }}
-                </button>
-            </div>
-            <br />
+            </a>
+            <button
+                class="uk-button uk-button-large"
+                style="background: #222; margin-left: 0.5rem; width: 185px"
+                type="button"
+                @click="handleButton(subscription)"
+            >
+                {{ subscription.subscribed ? $t("actions.unsubscribe") : $t("actions.subscribe") }}
+            </button>
         </div>
+        <br />
+    </div>
     <br />
 </template>
 
diff --git a/src/components/TrendingPage.vue b/src/components/TrendingPage.vue
index 5f0b939e..9b00422d 100644
--- a/src/components/TrendingPage.vue
+++ b/src/components/TrendingPage.vue
@@ -1,14 +1,14 @@
 <template>
-    <h1 class="uk-text-bold uk-text-center" v-t="'titles.trending'" />
+    <h1 v-t="'titles.trending'" class="uk-text-bold uk-text-center" />
 
     <hr />
 
     <div class="uk-grid-xl" uk-grid="parallax: 0">
         <div
+            v-for="video in videos"
+            :key="video.url"
             :style="[{ background: backgroundColor }]"
             class="uk-width-1-2 uk-width-1-3@s uk-width-1-4@m uk-width-1-5@l uk-width-1-6@xl"
-            v-bind:key="video.url"
-            v-for="video in videos"
         >
             <VideoItem :video="video" height="118" width="210" />
         </div>
@@ -19,6 +19,9 @@
 import VideoItem from "@/components/VideoItem.vue";
 
 export default {
+    components: {
+        VideoItem,
+    },
     data() {
         return {
             videos: [],
@@ -43,8 +46,5 @@ export default {
             });
         },
     },
-    components: {
-        VideoItem,
-    },
 };
 </script>
diff --git a/src/components/VideoItem.vue b/src/components/VideoItem.vue
index 1b4371bd..9ffeba4c 100644
--- a/src/components/VideoItem.vue
+++ b/src/components/VideoItem.vue
@@ -1,14 +1,7 @@
 <template>
     <div class="uk-text-secondary" :style="[{ background: backgroundColor }]">
-        <router-link class="uk-text-emphasis" v-bind:to="video.url">
-            <img
-                :height="height"
-                :width="width"
-                style="width: 100%"
-                v-bind:src="video.thumbnail"
-                alt=""
-                loading="lazy"
-            />
+        <router-link class="uk-text-emphasis" :to="video.url">
+            <img :height="height" :width="width" style="width: 100%" :src="video.thumbnail" alt="" loading="lazy" />
             <div class="uk-position-relative">
                 <span
                     v-if="video.duration"
@@ -92,10 +85,15 @@
 <script>
 export default {
     props: {
-        video: Object,
-        height: String,
-        width: String,
-        hideChannel: Boolean,
+        video: {
+            type: Object,
+            default: () => {
+                return {};
+            },
+        },
+        height: { type: String, default: "118" },
+        width: { type: String, default: "210" },
+        hideChannel: { type: Boolean, default: false },
     },
 };
 </script>
diff --git a/src/components/WatchVideo.vue b/src/components/WatchVideo.vue
index f69c3419..cb9c6726 100644
--- a/src/components/WatchVideo.vue
+++ b/src/components/WatchVideo.vue
@@ -1,16 +1,16 @@
 <template>
-    <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 999" v-if="video && isEmbed">
+    <div v-if="video && isEmbed" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 999">
         <Player
             ref="videoPlayer"
             :video="video"
             :sponsors="sponsors"
-            :selectedAutoPlay="false"
-            :selectedAutoLoop="selectedAutoLoop"
-            :isEmbed="isEmbed"
+            :selected-auto-play="false"
+            :selected-auto-loop="selectedAutoLoop"
+            :is-embed="isEmbed"
         />
     </div>
 
-    <div class="uk-container uk-container-xlarge" v-if="video && !isEmbed">
+    <div v-if="video && !isEmbed" class="uk-container uk-container-xlarge">
         <ErrorHandler v-if="video && video.error" :message="video.message" :error="video.error" />
 
         <div v-show="!video.error">
@@ -18,8 +18,8 @@
                 ref="videoPlayer"
                 :video="video"
                 :sponsors="sponsors"
-                :selectedAutoPlay="selectedAutoPlay"
-                :selectedAutoLoop="selectedAutoLoop"
+                :selected-auto-play="selectedAutoPlay"
+                :selected-auto-loop="selectedAutoLoop"
             />
             <div class="uk-text-bold uk-margin-small-top uk-text-large uk-text-emphasis uk-text-break">
                 {{ video.title }}
@@ -65,16 +65,16 @@
 
             <div class="uk-flex uk-flex-middle uk-margin-small-top">
                 <img :src="video.uploaderAvatar" alt="" loading="lazy" class="uk-border-circle" />
-                <router-link class="uk-link uk-margin-small-left" v-if="video.uploaderUrl" :to="video.uploaderUrl">
+                <router-link v-if="video.uploaderUrl" class="uk-link uk-margin-small-left" :to="video.uploaderUrl">
                     {{ video.uploader }} </router-link
                 >&thinsp;<font-awesome-icon v-if="video.uploaderVerified" icon="check"></font-awesome-icon>
                 <div class="uk-flex-1"></div>
                 <button
                     v-if="authenticated"
-                    @click="subscribeHandler"
                     class="uk-button uk-button-small"
                     style="background: #222"
                     type="button"
+                    @click="subscribeHandler"
                 >
                     {{ subscribed ? $t("actions.unsubscribe") : $t("actions.subscribe") }}
                 </button>
@@ -98,10 +98,10 @@
         >&nbsp;
         <input
             id="chkAutoLoop"
-            class="uk-checkbox"
             v-model="selectedAutoLoop"
-            @change="onChange($event)"
+            class="uk-checkbox"
             type="checkbox"
+            @change="onChange($event)"
         />
         <br />
         <label for="chkAutoPlay"
@@ -109,27 +109,27 @@
         >&nbsp;
         <input
             id="chkAutoPlay"
-            class="uk-checkbox"
             v-model="selectedAutoPlay"
-            @change="onChange($event)"
+            class="uk-checkbox"
             type="checkbox"
+            @change="onChange($event)"
         />
 
         <hr />
 
         <div uk-grid>
-            <div class="uk-width-4-5@xl uk-width-3-4@s uk-width-1" v-if="comments" ref="comments">
+            <div v-if="comments" ref="comments" class="uk-width-4-5@xl uk-width-3-4@s uk-width-1">
                 <div
+                    v-for="comment in comments.comments"
+                    :key="comment.commentId"
                     class="uk-tile-default uk-align-left uk-width-expand"
                     :style="[{ background: backgroundColor }]"
-                    v-bind:key="comment.commentId"
-                    v-for="comment in comments.comments"
                 >
                     <Comment :comment="comment" :uploader="video.uploader" />
                 </div>
             </div>
 
-            <div class="uk-width-1-5@xl uk-width-1-4@s uk-width-1 uk-flex-last@s uk-flex-first" v-if="video">
+            <div v-if="video" class="uk-width-1-5@xl uk-width-1-4@s uk-width-1 uk-flex-last@s uk-flex-first">
                 <a
                     class="uk-button uk-button-small uk-margin-small-bottom uk-hidden@s"
                     style="background: #222"
@@ -138,11 +138,11 @@
                     {{ showRecs ? $t("actions.minimize_recommendations") : $t("actions.show_recommendations") }}
                 </a>
                 <div
+                    v-for="related in video.relatedStreams"
                     v-show="showRecs || !smallView"
+                    :key="related.url"
                     class="uk-tile-default uk-width-auto"
                     :style="[{ background: backgroundColor }]"
-                    v-bind:key="related.url"
-                    v-for="related in video.relatedStreams"
                 >
                     <VideoItem :video="related" height="94" width="168" />
                 </div>
@@ -160,6 +160,12 @@ import Comment from "@/components/Comment.vue";
 
 export default {
     name: "App",
+    components: {
+        Player,
+        VideoItem,
+        ErrorHandler,
+        Comment,
+    },
     data() {
         const smallViewQuery = window.matchMedia("(max-width: 640px)");
         return {
@@ -179,6 +185,26 @@ export default {
             smallView: smallViewQuery.matches,
         };
     },
+    computed: {
+        isListening(_this) {
+            return _this.getPreferenceBoolean("listen", false);
+        },
+        toggleListenUrl(_this) {
+            const url = new URL(window.location.href);
+            url.searchParams.set("listen", _this.isListening ? "0" : "1");
+            return url.href;
+        },
+        isEmbed(_this) {
+            return String(_this.$route.path).indexOf("/embed/") == 0;
+        },
+        uploadDate(_this) {
+            return new Date(_this.video.uploadDate).toLocaleString(undefined, {
+                month: "short",
+                day: "numeric",
+                year: "numeric",
+            });
+        },
+    },
     mounted() {
         this.getVideoData().then(() => {
             (async () => {
@@ -317,31 +343,5 @@ export default {
             return this.$route.query.v || this.$route.params.v;
         },
     },
-    computed: {
-        isListening(_this) {
-            return _this.getPreferenceBoolean("listen", false);
-        },
-        toggleListenUrl(_this) {
-            const url = new URL(window.location.href);
-            url.searchParams.set("listen", _this.isListening ? "0" : "1");
-            return url.href;
-        },
-        isEmbed(_this) {
-            return String(_this.$route.path).indexOf("/embed/") == 0;
-        },
-        uploadDate(_this) {
-            return new Date(_this.video.uploadDate).toLocaleString(undefined, {
-                month: "short",
-                day: "numeric",
-                year: "numeric",
-            });
-        },
-    },
-    components: {
-        Player,
-        VideoItem,
-        ErrorHandler,
-        Comment,
-    },
 };
 </script>
diff --git a/src/main.js b/src/main.js
index 677f040b..d6da6802 100644
--- a/src/main.js
+++ b/src/main.js
@@ -241,5 +241,5 @@ const app = createApp(App);
 app.use(i18n);
 app.use(router);
 app.mixin(mixin);
-app.component("font-awesome-icon", FontAwesomeIcon);
+app.component("FontAwesomeIcon", FontAwesomeIcon);
 app.mount("#app");
diff --git a/vue.config.js b/vue.config.js
index 68a6dee3..e16bbe60 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -1,19 +1,21 @@
 module.exports = {
     pwa: {
-        name: 'Piped',
-        themeColor: '#fa4b4b',
-        msTileColor: '#000000',
-        appleMobileWebAppCapable: 'yes',
-        appleMobileWebAppStatusBarStyle: 'black',
-        workboxPluginMode: 'GenerateSW',
+        name: "Piped",
+        themeColor: "#fa4b4b",
+        msTileColor: "#000000",
+        appleMobileWebAppCapable: "yes",
+        appleMobileWebAppStatusBarStyle: "black",
+        workboxPluginMode: "GenerateSW",
         workboxOptions: {
-            navigateFallback: 'index.html',
+            navigateFallback: "index.html",
             skipWaiting: true,
-            importWorkboxFrom: 'local',
-            runtimeCaching: [{
-                urlPattern: /\.(?:png|svg|ico)$/,
-                handler: 'CacheFirst',
-            }],
-        }
-    }
-}
+            importWorkboxFrom: "local",
+            runtimeCaching: [
+                {
+                    urlPattern: /\.(?:png|svg|ico)$/,
+                    handler: "CacheFirst",
+                },
+            ],
+        },
+    },
+};
diff --git a/yarn.lock b/yarn.lock
index 33135852..cc4aa258 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3727,6 +3727,11 @@ escape-string-regexp@^4.0.0:
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz#14ba83a5d373e3d311e5afca29cf5bfad965bf34"
   integrity sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==
 
+eslint-config-prettier@^8.3.0:
+  version "8.3.0"
+  resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-8.3.0.tgz#f7471b20b6fe8a9a9254cc684454202886a2dd7a"
+  integrity sha512-BgZuLUSeKzvlL/VUjx/Yb787VQ26RU3gGjA3iiFvdsp/2bMfVIWUVP7tjxtjS0e+HP409cPlPvNkQloz8C91ew==
+
 eslint-loader@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/eslint-loader/-/eslint-loader-2.2.1.tgz#28b9c12da54057af0845e2a6112701a2f6bf8337"
@@ -3738,6 +3743,13 @@ eslint-loader@^2.2.1:
     object-hash "^1.1.4"
     rimraf "^2.6.1"
 
+eslint-plugin-prettier@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-4.0.0.tgz#8b99d1e4b8b24a762472b4567992023619cb98e0"
+  integrity sha512-98MqmCJ7vJodoQK359bqQWaxOE0CS8paAz/GgjaZLyex4TTk3g9HugoO89EqWCrFiOqn9EVvcoo7gZzONCWVwQ==
+  dependencies:
+    prettier-linter-helpers "^1.0.0"
+
 eslint-plugin-vue@^7.19.1:
   version "7.19.1"
   resolved "https://registry.yarnpkg.com/eslint-plugin-vue/-/eslint-plugin-vue-7.19.1.tgz#435fb2ce712842a9530b28eacb883680e8eaa4f3"
@@ -4068,6 +4080,11 @@ fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
   integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
 
+fast-diff@^1.1.2:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/fast-diff/-/fast-diff-1.2.0.tgz#73ee11982d86caaf7959828d519cfe927fac5f03"
+  integrity sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==
+
 fast-glob@^2.2.6:
   version "2.2.7"
   resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-2.2.7.tgz#6953857c3afa475fff92ee6015d52da70a4cd39d"
@@ -7025,6 +7042,13 @@ prepend-http@^1.0.0:
   resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-1.0.4.tgz#d4f4562b0ce3696e41ac52d0e002e57a635dc6dc"
   integrity sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw=
 
+prettier-linter-helpers@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz#d23d41fe1375646de2d0104d3454a3008802cf7b"
+  integrity sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==
+  dependencies:
+    fast-diff "^1.1.2"
+
 prettier@^1.18.2:
   version "1.19.1"
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.19.1.tgz#f7d7f5ff8a9cd872a7be4ca142095956a60797cb"