From 53197b5e2d70c27ea076bc35366e13f2bfead1c8 Mon Sep 17 00:00:00 2001
From: Tomasz Rymkiewicz <kreha1@pm.me>
Date: Mon, 27 Dec 2021 23:33:55 +0100
Subject: [PATCH] Autoclose HTML tags

---
 src/App.vue                      |  4 ++--
 src/components/Channel.vue       |  4 +++-
 src/components/Comment.vue       | 15 ++++++---------
 src/components/FeedPage.vue      |  4 +++-
 src/components/HistoryPage.vue   |  2 +-
 src/components/Player.vue        |  8 +-------
 src/components/Playlist.vue      |  4 +++-
 src/components/SearchResults.vue | 18 +++++++-----------
 src/components/VideoItem.vue     |  6 +++---
 src/components/WatchVideo.vue    | 13 +++++++------
 10 files changed, 36 insertions(+), 42 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index c245aa32..54c45b0c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -9,10 +9,10 @@
 
         <footer class="text-center">
             <a aria-label="GitHub" href="https://github.com/TeamPiped/Piped">
-                <font-awesome-icon :icon="['fab', 'github']"></font-awesome-icon>
+                <font-awesome-icon :icon="['fab', 'github']" />
             </a>
             <a class="ml-2" href="https://github.com/TeamPiped/Piped#donations">
-                <font-awesome-icon :icon="['fab', 'bitcoin']"></font-awesome-icon>
+                <font-awesome-icon :icon="['fab', 'bitcoin']" />
                 <span v-text="$t('actions.donations')" />
             </a>
         </footer>
diff --git a/src/components/Channel.vue b/src/components/Channel.vue
index 1e7c4d56..701b363f 100644
--- a/src/components/Channel.vue
+++ b/src/components/Channel.vue
@@ -8,7 +8,9 @@
         </div>
         <img v-if="channel.bannerUrl" :src="channel.bannerUrl" class="w-full pb-1.5" loading="lazy" />
         <!-- eslint-disable-next-line vue/no-v-html -->
-        <p style="white-space: pre-wrap"><span v-html="purifyHTML(urlify(channel.description))"></span></p>
+        <p style="white-space: pre-wrap">
+            <span v-html="purifyHTML(urlify(channel.description))" />
+        </p>
 
         <button
             v-if="authenticated"
diff --git a/src/components/Comment.vue b/src/components/Comment.vue
index 1c46ea20..1cad58b7 100644
--- a/src/components/Comment.vue
+++ b/src/components/Comment.vue
@@ -12,25 +12,22 @@
         <div class="comment-content pl-2">
             <div class="comment-header">
                 <div v-if="comment.pinned" class="comment-pinned uk-text-meta">
-                    <font-awesome-icon icon="thumbtack"></font-awesome-icon
-                    ><span class="ml-1.5" v-text="$t('comment.pinned_by')" />
+                    <font-awesome-icon icon="thumbtack" />
+                    <span class="ml-1.5" v-text="$t('comment.pinned_by')" />
                     <span v-text="uploader" />
                 </div>
 
                 <div class="comment-author">
-                    <router-link
-                        class="font-bold uk-text-small"
-                        :to="comment.commentorUrl"
-                        v-text="comment.author"
-                    /><font-awesome-icon class="ml-1.5" v-if="comment.verified" icon="check"></font-awesome-icon>
+                    <router-link class="font-bold uk-text-small" :to="comment.commentorUrl" v-text="comment.author" />
+                    <font-awesome-icon class="ml-1.5" v-if="comment.verified" icon="check" />
                 </div>
                 <div class="comment-meta uk-text-meta uk-margin-small-bottom" v-text="comment.commentedTime" />
             </div>
             <div class="whitespace-pre-wrap" v-text="comment.commentText" />
             <div class="comment-footer uk-margin-small-top uk-text-meta">
-                <font-awesome-icon icon="thumbs-up"></font-awesome-icon>
+                <font-awesome-icon icon="thumbs-up" />
                 <span class="ml-1" v-text="numberFormat(comment.likeCount)" />
-                <font-awesome-icon class="ml-1" v-if="comment.hearted" icon="heart"></font-awesome-icon>
+                <font-awesome-icon class="ml-1" v-if="comment.hearted" icon="heart" />
             </div>
             <template v-if="comment.repliesPage && (!loadingReplies || !showingReplies)">
                 <div @click="loadReplies">
diff --git a/src/components/FeedPage.vue b/src/components/FeedPage.vue
index 27e9e8de..51170828 100644
--- a/src/components/FeedPage.vue
+++ b/src/components/FeedPage.vue
@@ -6,7 +6,9 @@
     </button>
 
     <span>
-        <a :href="getRssUrl"><font-awesome-icon icon="rss" style="padding-top: 0.2rem"></font-awesome-icon></a>
+        <a :href="getRssUrl">
+            <font-awesome-icon icon="rss" style="padding-top: 0.2rem" />
+        </a>
     </span>
 
     <span class="md:float-right">
diff --git a/src/components/HistoryPage.vue b/src/components/HistoryPage.vue
index d711f1d3..0afb74ce 100644
--- a/src/components/HistoryPage.vue
+++ b/src/components/HistoryPage.vue
@@ -2,7 +2,7 @@
     <h1 class="font-bold text-center" v-text="$t('titles.history')" />
 
     <div style="text-align: left">
-        <button class="btn" v-t="'actions.clear_history'" @click="clearHistory"></button>
+        <button class="btn" v-t="'actions.clear_history'" @click="clearHistory" />
     </div>
 
     <div style="text-align: right">
diff --git a/src/components/Player.vue b/src/components/Player.vue
index 6a11ec67..28c3f6cd 100644
--- a/src/components/Player.vue
+++ b/src/components/Player.vue
@@ -6,13 +6,7 @@
             style="width: 100%; height: 100%; background: #000"
             :style="!isEmbed ? { 'max-height': '75vh', 'min-height': '250px' } : {}"
         >
-            <video
-                ref="videoEl"
-                data-shaka-player
-                class="w-full"
-                :autoplay="shouldAutoPlay"
-                :loop="selectedAutoLoop"
-            ></video>
+            <video ref="videoEl" data-shaka-player class="w-full" :autoplay="shouldAutoPlay" :loop="selectedAutoLoop" />
         </div>
     </div>
 </template>
diff --git a/src/components/Playlist.vue b/src/components/Playlist.vue
index 54982caa..68eeba0e 100644
--- a/src/components/Playlist.vue
+++ b/src/components/Playlist.vue
@@ -17,7 +17,9 @@
                 <div class="right-2vw absolute">
                     <strong v-text="`${playlist.videos} ${$t('video.videos')}`" />
                     <br />
-                    <a :href="getRssUrl"><font-awesome-icon icon="rss"></font-awesome-icon></a>
+                    <a :href="getRssUrl">
+                        <font-awesome-icon icon="rss" />
+                    </a>
                 </div>
             </div>
         </div>
diff --git a/src/components/SearchResults.vue b/src/components/SearchResults.vue
index a752ffde..5759caf6 100644
--- a/src/components/SearchResults.vue
+++ b/src/components/SearchResults.vue
@@ -1,7 +1,9 @@
 <template>
     <h1 class="text-center" v-text="$route.query.search_query" />
 
-    <label for="ddlSearchFilters"><strong v-text="`${$t('actions.filter')}:`" /></label>
+    <label for="ddlSearchFilters">
+        <strong v-text="`${$t('actions.filter')}:`" />
+    </label>
     <select
         id="ddlSearchFilters"
         v-model="selectedFilter"
@@ -34,21 +36,15 @@
                         <img style="width: 100%" :src="result.thumbnail" loading="lazy" />
                     </div>
                     <p>
-                        <span v-text="result.name" /><font-awesome-icon
-                            class="ml-1.5"
-                            v-if="result.verified"
-                            icon="check"
-                        ></font-awesome-icon>
+                        <span v-text="result.name" />
+                        <font-awesome-icon class="ml-1.5" v-if="result.verified" icon="check" />
                     </p>
                 </router-link>
                 <p v-if="result.description" v-text="result.description" />
                 <router-link v-if="result.uploaderUrl" class="uk-link-muted" :to="result.uploaderUrl">
                     <p>
-                        <span v-text="result.uploader" /><font-awesome-icon
-                            class="ml-1.5"
-                            v-if="result.uploaderVerified"
-                            icon="check"
-                        ></font-awesome-icon>
+                        <span v-text="result.uploader" />
+                        <font-awesome-icon class="ml-1.5" v-if="result.uploaderVerified" icon="check" />
                     </p>
                 </router-link>
 
diff --git a/src/components/VideoItem.vue b/src/components/VideoItem.vue
index e341117a..bbffcd7d 100644
--- a/src/components/VideoItem.vue
+++ b/src/components/VideoItem.vue
@@ -33,7 +33,7 @@
                 :aria-label="'Listen to ' + video.title"
                 :title="'Listen to ' + video.title"
             >
-                <font-awesome-icon icon="headphones"></font-awesome-icon>
+                <font-awesome-icon icon="headphones" />
             </router-link>
         </div>
 
@@ -58,12 +58,12 @@
                     :title="video.uploaderName"
                 >
                     <span v-text="video.uploaderName" />
-                    <font-awesome-icon class="ml-1.5" v-if="video.uploaderVerified" icon="check"></font-awesome-icon>
+                    <font-awesome-icon class="ml-1.5" v-if="video.uploaderVerified" icon="check" />
                 </router-link>
 
                 <strong v-if="video.views >= 0 || video.uploadedDate" class="uk-text-small">
                     <span v-if="video.views >= 0">
-                        <font-awesome-icon icon="eye"></font-awesome-icon>
+                        <font-awesome-icon icon="eye" />
                         <span v-text="`${numberFormat(video.views)} •`" />
                     </span>
                     <span v-if="video.uploadedDate" v-text="video.uploadedDate" />
diff --git a/src/components/WatchVideo.vue b/src/components/WatchVideo.vue
index 68c04988..4a880cfe 100644
--- a/src/components/WatchVideo.vue
+++ b/src/components/WatchVideo.vue
@@ -30,11 +30,11 @@
                 <div class="flex items-center relative ml-auto children:ml-2">
                     <template v-if="video.likes >= 0">
                         <div>
-                            <font-awesome-icon icon="thumbs-up"></font-awesome-icon>
+                            <font-awesome-icon icon="thumbs-up" />
                             <strong class="ml-2" v-text="addCommas(video.likes)" />
                         </div>
                         <div>
-                            <font-awesome-icon icon="thumbs-down"></font-awesome-icon>
+                            <font-awesome-icon icon="thumbs-down" />
                             <strong class="ml-2" v-text="video.dislikes >= 0 ? addCommas(video.dislikes) : '?'" />
                         </div>
                     </template>
@@ -45,7 +45,7 @@
                     </template>
                     <a :href="`https://youtu.be/${getVideoId()}`" class="btn">
                         <strong v-text="$t('player.watch_on')" />
-                        <font-awesome-icon class="ml-1.5" :icon="['fab', 'youtube']"></font-awesome-icon>
+                        <font-awesome-icon class="ml-1.5" :icon="['fab', 'youtube']" />
                     </a>
                     <a v-if="video.lbryId" :href="'https://odysee.com/' + video.lbryId" class="btn">
                         <strong v-text="`${$t('player.watch_on')} LBRY`" />
@@ -56,7 +56,7 @@
                         :title="(isListening ? 'Watch ' : 'Listen to ') + video.title"
                         class="btn"
                     >
-                        <font-awesome-icon :icon="isListening ? 'tv' : 'headphones'"></font-awesome-icon>
+                        <font-awesome-icon :icon="isListening ? 'tv' : 'headphones'" />
                     </router-link>
                 </div>
             </div>
@@ -69,7 +69,8 @@
                         class="link ml-1.5"
                         :to="video.uploaderUrl"
                         v-text="video.uploader"
-                    /><font-awesome-icon class="ml-1" v-if="video.uploaderVerified" icon="check"></font-awesome-icon>
+                    />
+                    <font-awesome-icon class="ml-1" v-if="video.uploaderVerified" icon="check" />
                 </div>
                 <button
                     v-if="authenticated"
@@ -87,7 +88,7 @@
                 v-text="$t(`actions.${showDesc ? 'minimize_description' : 'show_description'}`)"
             />
             <!-- eslint-disable-next-line vue/no-v-html -->
-            <p v-show="showDesc" class="break-words" v-html="purifyHTML(video.description)"></p>
+            <p v-show="showDesc" class="break-words" v-html="purifyHTML(video.description)" />
             <div
                 v-if="showDesc && sponsors && sponsors.segments"
                 v-text="`${$t('video.sponsor_segments')}: ${sponsors.segments.length}`"