From d750eabc37351ee5540516de20829b4377045e42 Mon Sep 17 00:00:00 2001
From: Tomasz Rymkiewicz <kreha1@pm.me>
Date: Mon, 27 Dec 2021 17:29:25 +0100
Subject: [PATCH] Favour v-text over mustache syntax

---
 src/App.vue                          |  2 +-
 src/components/Channel.vue           | 11 +++--
 src/components/Comment.vue           | 22 +++++----
 src/components/ErrorHandler.vue      |  9 ++--
 src/components/FeedPage.vue          |  2 +-
 src/components/HistoryPage.vue       |  4 +-
 src/components/ImportPage.vue        |  2 +-
 src/components/LoginPage.vue         |  4 +-
 src/components/Playlist.vue          | 16 +++----
 src/components/Preferences.vue       | 34 +++++++-------
 src/components/RegisterPage.vue      |  2 +-
 src/components/SearchResults.vue     | 39 ++++++++--------
 src/components/SearchSuggestions.vue |  5 +--
 src/components/SubscriptionsPage.vue | 20 ++++-----
 src/components/TrendingPage.vue      |  2 +-
 src/components/VideoItem.vue         | 37 +++++++--------
 src/components/VideoRedirect.vue     |  2 +-
 src/components/WatchVideo.vue        | 67 +++++++++++++++-------------
 18 files changed, 136 insertions(+), 144 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index a503fddb..c245aa32 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -13,7 +13,7 @@
             </a>
             <a class="ml-2" href="https://github.com/TeamPiped/Piped#donations">
                 <font-awesome-icon :icon="['fab', 'bitcoin']"></font-awesome-icon>
-                {{ $t("actions.donations") }}
+                <span v-text="$t('actions.donations')" />
             </a>
         </footer>
     </div>
diff --git a/src/components/Channel.vue b/src/components/Channel.vue
index b473a0fb..1e7c4d56 100644
--- a/src/components/Channel.vue
+++ b/src/components/Channel.vue
@@ -4,15 +4,18 @@
     <div v-if="channel" v-show="!channel.error">
         <div class="flex justify-center place-items-center">
             <img height="48" width="48" class="rounded-full m-1" :src="channel.avatarUrl" />
-            <h1>{{ channel.name }}</h1>
+            <h1 v-text="channel.name" />
         </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>
 
-        <button v-if="authenticated" class="btn" @click="subscribeHandler">
-            {{ subscribed ? $t("actions.unsubscribe") : $t("actions.subscribe") }}
-        </button>
+        <button
+            v-if="authenticated"
+            class="btn"
+            @click="subscribeHandler"
+            v-text="$t(`actions.${subscribed ? 'unsubscribe' : 'subscribe'}`)"
+        />
 
         <hr />
 
diff --git a/src/components/Comment.vue b/src/components/Comment.vue
index 83731f8f..1c46ea20 100644
--- a/src/components/Comment.vue
+++ b/src/components/Comment.vue
@@ -13,25 +13,23 @@
             <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">{{ $t("comment.pinned_by") }}</span>
-                    {{ uploader }}
+                    ><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">
-                        {{ comment.author }} </router-link
-                    ><font-awesome-icon class="ml-1.5" v-if="comment.verified" icon="check"></font-awesome-icon>
-                </div>
-                <div class="comment-meta uk-text-meta uk-margin-small-bottom">
-                    {{ comment.commentedTime }}
+                    <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>
                 </div>
+                <div class="comment-meta uk-text-meta uk-margin-small-bottom" v-text="comment.commentedTime" />
             </div>
-            <div class="whitespace-pre-wrap">
-                {{ comment.commentText }}
-            </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>
-                <span class="ml-1">{{ numberFormat(comment.likeCount) }}</span>
+                <span class="ml-1" v-text="numberFormat(comment.likeCount)" />
                 <font-awesome-icon class="ml-1" v-if="comment.hearted" icon="heart"></font-awesome-icon>
             </div>
             <template v-if="comment.repliesPage && (!loadingReplies || !showingReplies)">
diff --git a/src/components/ErrorHandler.vue b/src/components/ErrorHandler.vue
index abd2e771..d593139e 100644
--- a/src/components/ErrorHandler.vue
+++ b/src/components/ErrorHandler.vue
@@ -1,9 +1,8 @@
 <template>
-    <p>{{ message }}</p>
-    <button @click="toggleTrace" class="btn">
-        {{ $t("actions.show_more") }}
-    </button>
-    <p ref="stacktrace" style="white-space: pre-wrap" hidden>{{ error }}</p>
+    <p v-text="message" />
+    >
+    <button @click="toggleTrace" class="btn" v-text="$t('actions.show_more')" />
+    <p ref="stacktrace" style="white-space: pre-wrap" hidden v-text="error" />
 </template>
 
 <script>
diff --git a/src/components/FeedPage.vue b/src/components/FeedPage.vue
index 5dcbb456..27e9e8de 100644
--- a/src/components/FeedPage.vue
+++ b/src/components/FeedPage.vue
@@ -10,7 +10,7 @@
     </span>
 
     <span class="md:float-right">
-        <label for="ddlSortBy">{{ $t("actions.sort_by") }}</label>
+        <label for="ddlSortBy" v-text="$t('actions.sort_by')" />
         <select id="ddlSortBy" v-model="selectedSort" class="select w-auto" @change="onChange()">
             <option v-t="'actions.most_recent'" value="descending" />
             <option v-t="'actions.least_recent'" value="ascending" />
diff --git a/src/components/HistoryPage.vue b/src/components/HistoryPage.vue
index 8fc181e8..d711f1d3 100644
--- a/src/components/HistoryPage.vue
+++ b/src/components/HistoryPage.vue
@@ -1,12 +1,12 @@
 <template>
-    <h1 class="font-bold text-center">{{ $t("titles.history") }}</h1>
+    <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>
     </div>
 
     <div style="text-align: right">
-        <label for="ddlSortBy">{{ $t("actions.sort_by") }}</label>
+        <label for="ddlSortBy" v-text="$t('actions.sort_by')" />
         <select id="ddlSortBy" v-model="selectedSort" class="select w-auto" @change="onChange()">
             <option v-t="'actions.most_recent'" value="descending" />
             <option v-t="'actions.least_recent'" value="ascending" />
diff --git a/src/components/ImportPage.vue b/src/components/ImportPage.vue
index 327b46f9..a3a70a63 100644
--- a/src/components/ImportPage.vue
+++ b/src/components/ImportPage.vue
@@ -5,7 +5,7 @@
                 <input ref="fileSelector" type="file" @change="fileChange" />
             </div>
             <div class="uk-form-row">
-                <strong>Selected Subscriptions: {{ selectedSubscriptions }}</strong>
+                <strong v-text="`Selected Subscriptions: ${selectedSubscriptions}`" />
             </div>
             <div class="uk-form-row">
                 <strong>Override: <input v-model="override" class="uk-checkbox" type="checkbox" /></strong>
diff --git a/src/components/LoginPage.vue b/src/components/LoginPage.vue
index b566bf4b..97a2e67f 100644
--- a/src/components/LoginPage.vue
+++ b/src/components/LoginPage.vue
@@ -22,9 +22,7 @@
                 />
             </div>
             <div class="uk-form-row">
-                <a class="uk-width-1-1 uk-button uk-button-large w-auto" @click="login">
-                    {{ $t("titles.login") }}
-                </a>
+                <a class="uk-width-1-1 uk-button uk-button-large w-auto" @click="login" v-text="$t('titles.login')" />
             </div>
         </form>
     </div>
diff --git a/src/components/Playlist.vue b/src/components/Playlist.vue
index 5821f7b8..54982caa 100644
--- a/src/components/Playlist.vue
+++ b/src/components/Playlist.vue
@@ -2,22 +2,20 @@
     <ErrorHandler v-if="playlist && playlist.error" :message="playlist.message" :error="playlist.error" />
 
     <div v-if="playlist" v-show="!playlist.error">
-        <h1 class="text-center">
-            {{ playlist.name }}
-        </h1>
+        <h1 class="text-center" v-text="playlist.name" />
 
         <div class="grid grid-cols-2">
             <div>
-                <strong
-                    ><router-link class="uk-text-justify" :to="playlist.uploaderUrl || '/'">
+                <strong>
+                    <router-link class="uk-text-justify" :to="playlist.uploaderUrl || '/'">
                         <img :src="playlist.uploaderAvatar" loading="lazy" class="rounded-full" />
-                        {{ playlist.uploader }}</router-link
-                    ></strong
-                >
+                        <span v-text="playlist.uploader" />
+                    </router-link>
+                </strong>
             </div>
             <div>
                 <div class="right-2vw absolute">
-                    <strong>{{ playlist.videos }} {{ $t("video.videos") }}</strong>
+                    <strong v-text="`${playlist.videos} ${$t('video.videos')}`" />
                     <br />
                     <a :href="getRssUrl"><font-awesome-icon icon="rss"></font-awesome-icon></a>
                 </div>
diff --git a/src/components/Preferences.vue b/src/components/Preferences.vue
index d03f1c70..d29ca8fb 100644
--- a/src/components/Preferences.vue
+++ b/src/components/Preferences.vue
@@ -1,14 +1,14 @@
 <template>
     <div class="uk-flex uk-flex-between uk-flex-middle">
         <button class="uk-button uk-button-text" @click="$router.go(-1) || $router.push('/')">
-            <font-awesome-icon icon="chevron-left" /><span class="ml-1.5">{{ $t("actions.back") }}</span>
+            <font-awesome-icon icon="chevron-left" /><span class="ml-1.5" v-text="$t('actions.back')" />
         </button>
         <span><h1 v-t="'titles.preferences'" class="font-bold text-center" /></span>
         <span />
     </div>
     <hr />
     <h2>SponsorBlock</h2>
-    <p>{{ $t("actions.uses_api_from") }}<a href="https://sponsor.ajay.app/">sponsor.ajay.app</a></p>
+    <p><span v-text="$t('actions.uses_api_from')" /><a href="https://sponsor.ajay.app/">sponsor.ajay.app</a></p>
     <label for="chkEnableSponsorblock"><strong v-t="'actions.enable_sponsorblock'" /></label>
     <br />
     <input
@@ -91,7 +91,7 @@
     <br />
     <select id="ddlDefaultQuality" v-model="defaultQuality" class="select w-auto" @change="onChange($event)">
         <option v-t="'actions.auto'" value="0" />
-        <option v-for="resolution in resolutions" :key="resolution" :value="resolution">{{ resolution }}p</option>
+        <option v-for="resolution in resolutions" :key="resolution" :value="resolution" v-text="`${resolution}p`" />
     </select>
     <br />
     <label for="txtBufferingGoal"><strong v-t="'actions.buffering_goal'" /></label>
@@ -101,7 +101,7 @@
     <label for="ddlCountrySelection"><strong v-t="'actions.country_selection'" /></label>
     <br />
     <select id="ddlCountrySelection" v-model="countrySelected" class="select w-auto" @change="onChange($event)">
-        <option v-for="country in countryMap" :key="country.code" :value="country.code">{{ country.name }}</option>
+        <option v-for="country in countryMap" :key="country.code" :value="country.code" v-text="country.name" />
     </select>
     <br />
     <label for="ddlDefaultHomepage"><strong v-t="'actions.default_homepage'" /></label>
@@ -138,7 +138,7 @@
     <label for="ddlLanguageSelection"><strong v-t="'actions.language_selection'" /></label>
     <br />
     <select id="ddlLanguageSelection" v-model="selectedLanguage" class="select w-auto" @change="onChange($event)">
-        <option v-for="language in languages" :key="language.code" :value="language.code">{{ language.name }}</option>
+        <option v-for="language in languages" :key="language.code" :value="language.code" v-text="language.name" />
     </select>
     <br />
     <label for="ddlEnabledCodecs"><strong v-t="'actions.enabled_codecs'" /></label>
@@ -160,19 +160,19 @@
     <table class="uk-table">
         <thead>
             <tr>
-                <th>{{ $t("preferences.instance_name") }}</th>
-                <th>{{ $t("preferences.instance_locations") }}</th>
-                <th>{{ $t("preferences.has_cdn") }}</th>
-                <th>{{ $t("preferences.ssl_score") }}</th>
+                <th v-text="$t('preferences.instance_name')" />
+                <th v-text="$t('preferences.instance_locations')" />
+                <th v-text="$t('preferences.has_cdn')" />
+                <th v-text="$t('preferences.ssl_score')" />
             </tr>
         </thead>
         <tbody v-for="instance in instances" :key="instance.name">
             <tr>
-                <td>{{ instance.name }}</td>
-                <td>{{ instance.locations }}</td>
-                <td>{{ instance.cdn == "Yes" ? $t("actions.yes") : $t("actions.no") }}</td>
+                <td v-text="instance.name" />
+                <td v-text="instance.locations" />
+                <td v-text="$t(`actions.${instance.cdn === 'Yes' ? 'yes' : 'no'}`)" />
                 <td>
-                    <a :href="sslScore(instance.apiurl)" target="_blank"> {{ $t("actions.view_ssl_score") }}</a>
+                    <a :href="sslScore(instance.apiurl)" target="_blank" v-text="$t('actions.view_ssl_score')" />
                 </td>
             </tr>
         </tbody>
@@ -180,14 +180,10 @@
 
     <hr />
 
-    <label for="ddlInstanceSelection"
-        ><strong>{{ $t("actions.instance_selection") }}:</strong></label
-    >
+    <label for="ddlInstanceSelection"><strong v-text="`${$t('actions.instance_selection')}:`" /></label>
     <br />
     <select id="ddlInstanceSelection" v-model="selectedInstance" class="select w-auto" @change="onChange($event)">
-        <option v-for="instance in instances" :key="instance.name" :value="instance.apiurl">
-            {{ instance.name }}
-        </option>
+        <option v-for="instance in instances" :key="instance.name" :value="instance.apiurl" v-text="instance.name" />
     </select>
 </template>
 
diff --git a/src/components/RegisterPage.vue b/src/components/RegisterPage.vue
index 5e80dd3f..f7722f77 100644
--- a/src/components/RegisterPage.vue
+++ b/src/components/RegisterPage.vue
@@ -22,7 +22,7 @@
                 />
             </div>
             <div class="uk-form-row">
-                <a class="uk-width-1-1 btn w-auto" @click="register"> {{ $t("titles.register") }}</a>
+                <a class="uk-width-1-1 btn w-auto" @click="register" v-text="$t('titles.register')" />
             </div>
         </form>
     </div>
diff --git a/src/components/SearchResults.vue b/src/components/SearchResults.vue
index 99fb16ee..a752ffde 100644
--- a/src/components/SearchResults.vue
+++ b/src/components/SearchResults.vue
@@ -1,11 +1,7 @@
 <template>
-    <h1 class="text-center">
-        {{ $route.query.search_query }}
-    </h1>
+    <h1 class="text-center" v-text="$route.query.search_query" />
 
-    <label for="ddlSearchFilters"
-        ><strong>{{ $t("actions.filter") }}: </strong></label
-    >
+    <label for="ddlSearchFilters"><strong v-text="`${$t('actions.filter')}:`" /></label>
     <select
         id="ddlSearchFilters"
         v-model="selectedFilter"
@@ -14,19 +10,18 @@
         style="height: 100%"
         @change="updateResults()"
     >
-        <option v-for="filter in availableFilters" :key="filter" :value="filter">
-            {{ filter.replace("_", " ") }}
-        </option>
+        <option v-for="filter in availableFilters" :key="filter" :value="filter" v-text="filter.replace('_', ' ')" />
     </select>
 
     <hr />
 
     <div v-if="results && results.corrected" style="height: 7vh">
-        {{ $t("search.did_you_mean") }}
+        <span v-text="$t('search.did_you_mean')" />
         <em>
-            <router-link :to="{ name: 'SearchResults', query: { search_query: results.suggestion } }">
-                {{ results.suggestion }}
-            </router-link>
+            <router-link
+                :to="{ name: 'SearchResults', query: { search_query: results.suggestion } }"
+                v-text="results.suggestion"
+            />
         </em>
     </div>
 
@@ -39,15 +34,17 @@
                         <img style="width: 100%" :src="result.thumbnail" loading="lazy" />
                     </div>
                     <p>
-                        {{ 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"
+                        ></font-awesome-icon>
                     </p>
                 </router-link>
-                <p v-if="result.description">{{ result.description }}</p>
+                <p v-if="result.description" v-text="result.description" />
                 <router-link v-if="result.uploaderUrl" class="uk-link-muted" :to="result.uploaderUrl">
                     <p>
-                        {{ result.uploader
-                        }}<font-awesome-icon
+                        <span v-text="result.uploader" /><font-awesome-icon
                             class="ml-1.5"
                             v-if="result.uploaderVerified"
                             icon="check"
@@ -55,10 +52,10 @@
                     </p>
                 </router-link>
 
-                <a v-if="result.uploaderName" class="uk-text-muted">{{ result.uploaderName }}</a>
+                <a v-if="result.uploaderName" class="uk-text-muted" v-text="result.uploaderName" />
                 <strong v-if="result.videos >= 0"
-                    ><br v-if="result.uploaderName" />{{ result.videos }} {{ $t("video.videos") }}</strong
-                >
+                    ><br v-if="result.uploaderName" /><span v-text="`${result.videos} ${$t('video.videos')}`"
+                /></strong>
 
                 <br />
             </div>
diff --git a/src/components/SearchSuggestions.vue b/src/components/SearchSuggestions.vue
index 9c368f06..3e0455a1 100644
--- a/src/components/SearchSuggestions.vue
+++ b/src/components/SearchSuggestions.vue
@@ -8,9 +8,8 @@
                 :class="{ 'suggestion-selected': selected === i }"
                 @mouseover="onMouseOver(i)"
                 @mousedown.stop="onClick(i)"
-            >
-                {{ suggestion }}
-            </li>
+                v-text="suggestion"
+            />
         </ul>
     </div>
 </template>
diff --git a/src/components/SubscriptionsPage.vue b/src/components/SubscriptionsPage.vue
index b9d32cc4..915e6432 100644
--- a/src/components/SubscriptionsPage.vue
+++ b/src/components/SubscriptionsPage.vue
@@ -1,16 +1,12 @@
 <template>
-    <h1 class="font-bold text-center">{{ $t("titles.subscriptions") }}</h1>
+    <h1 class="font-bold text-center" v-text="$t('titles.subscriptions')" />
 
     <div v-if="authenticated">
         <button class="btn mr-0.5">
-            <router-link to="/import">
-                {{ $t("actions.import_from_json") }}
-            </router-link>
+            <router-link to="/import" v-text="$t('actions.import_from_json')" />
         </button>
 
-        <button class="btn" @click="exportHandler">
-            {{ $t("actions.export_to_json") }}
-        </button>
+        <button class="btn" @click="exportHandler" v-text="$t('actions.export_to_json')" />
     </div>
     <hr />
 
@@ -20,11 +16,13 @@
                 <div class="w-full grid grid-cols-3">
                     <router-link :to="subscription.url" class="col-start-2 block flex text-center font-bold text-4xl">
                         <img :src="subscription.avatar" class="rounded-full" width="48" height="48" />
-                        <span>{{ subscription.name }}</span>
+                        <span v-text="subscription.name" />>
                     </router-link>
-                    <button class="btn !w-min" @click="handleButton(subscription)">
-                        {{ subscription.subscribed ? $t("actions.unsubscribe") : $t("actions.subscribe") }}
-                    </button>
+                    <button
+                        class="btn !w-min"
+                        @click="handleButton(subscription)"
+                        v-text="$t(`actions.${subscription.subscribed ? 'unsubscribe' : 'subscribe'}`)"
+                    />
                 </div>
             </div>
         </div>
diff --git a/src/components/TrendingPage.vue b/src/components/TrendingPage.vue
index 856ab5a4..91809d72 100644
--- a/src/components/TrendingPage.vue
+++ b/src/components/TrendingPage.vue
@@ -1,5 +1,5 @@
 <template>
-    <h1 v-t="'titles.trending'" class="font-bold text-center" />
+    <h1 v-t="$t('titles.trending')" class="font-bold text-center" />
 
     <hr />
 
diff --git a/src/components/VideoItem.vue b/src/components/VideoItem.vue
index ba750548..e341117a 100644
--- a/src/components/VideoItem.vue
+++ b/src/components/VideoItem.vue
@@ -3,12 +3,18 @@
         <router-link :to="video.url">
             <img :height="height" :width="width" class="w-full" :src="video.thumbnail" alt="" loading="lazy" />
             <div class="relative text-sm">
-                <span v-if="video.duration" class="thumbnail-overlay bottom-5px right-5px" style="padding: 0 5px">{{
-                    timeFormat(video.duration)
-                }}</span>
-                <span v-if="video.watched" class="thumbnail-overlay bottom-5px left-5px" style="padding: 0 5px">{{
-                    $t("video.watched")
-                }}</span>
+                <span
+                    v-if="video.duration"
+                    class="thumbnail-overlay bottom-5px right-5px"
+                    style="padding: 0 5px"
+                    v-text="timeFormat(video.duration)"
+                />
+                <span
+                    v-if="video.watched"
+                    class="thumbnail-overlay bottom-5px left-5px"
+                    style="padding: 0 5px"
+                    v-text="$t('video.watched')"
+                />
             </div>
 
             <div>
@@ -16,9 +22,8 @@
                     style="display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical"
                     class="my-2 overflow-hidden flex link"
                     :title="video.title"
-                >
-                    {{ video.title }}
-                </p>
+                    v-text="video.title"
+                />
             </div>
         </router-link>
 
@@ -52,21 +57,17 @@
                     :to="video.uploaderUrl"
                     :title="video.uploaderName"
                 >
-                    {{ video.uploaderName
-                    }}<font-awesome-icon class="ml-1.5" v-if="video.uploaderVerified" icon="check"></font-awesome-icon>
+                    <span v-text="video.uploaderName" />
+                    <font-awesome-icon class="ml-1.5" v-if="video.uploaderVerified" icon="check"></font-awesome-icon>
                 </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>
-                        {{ numberFormat(video.views) }} •
-                    </span>
-                    <span v-if="video.uploadedDate">
-                        {{ video.uploadedDate }}
-                    </span>
-                    <span v-if="video.uploaded">
-                        {{ timeAgo(video.uploaded) }}
+                        <span v-text="`${numberFormat(video.views)} •`" />
                     </span>
+                    <span v-if="video.uploadedDate" v-text="video.uploadedDate" />
+                    <span v-if="video.uploaded" v-text="timeAgo(video.uploaded)" />
                 </strong>
             </div>
         </div>
diff --git a/src/components/VideoRedirect.vue b/src/components/VideoRedirect.vue
index fa329208..0e3a2391 100644
--- a/src/components/VideoRedirect.vue
+++ b/src/components/VideoRedirect.vue
@@ -1,5 +1,5 @@
 <template>
-    <div>{{ $t("actions.loading") }}</div>
+    <div v-text="$t('actions.loading')" />
 </template>
 
 <script>
diff --git a/src/components/WatchVideo.vue b/src/components/WatchVideo.vue
index c1e2ed69..68c04988 100644
--- a/src/components/WatchVideo.vue
+++ b/src/components/WatchVideo.vue
@@ -21,23 +21,21 @@
                 :selected-auto-play="selectedAutoPlay"
                 :selected-auto-loop="selectedAutoLoop"
             />
-            <div class="font-bold mt-2 text-2xl break-words">
-                {{ video.title }}
-            </div>
+            <div class="font-bold mt-2 text-2xl break-words" v-text="video.title" />
 
             <div class="flex mb-1.5">
-                <span>{{ addCommas(video.views) }} views</span>
-                <span class="ml-2">{{ uploadDate }}</span>
+                <span v-text="`${addCommas(video.views)} views`" />
+                <span class="ml-2" v-text="uploadDate" />
 
                 <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>
-                            <strong class="ml-2">{{ addCommas(video.likes) }}</strong>
+                            <strong class="ml-2" v-text="addCommas(video.likes)" />
                         </div>
                         <div>
                             <font-awesome-icon icon="thumbs-down"></font-awesome-icon>
-                            <strong class="ml-2">{{ video.dislikes >= 0 ? addCommas(video.dislikes) : "?" }}</strong>
+                            <strong class="ml-2" v-text="video.dislikes >= 0 ? addCommas(video.dislikes) : '?'" />
                         </div>
                     </template>
                     <template v-if="video.likes < 0">
@@ -45,12 +43,12 @@
                             <strong v-t="'video.ratings_disabled'" />
                         </div>
                     </template>
-                    <a :href="'https://youtu.be/' + getVideoId()" class="btn">
-                        <strong>{{ $t("player.watch_on") }}</strong>
+                    <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>
                     </a>
                     <a v-if="video.lbryId" :href="'https://odysee.com/' + video.lbryId" class="btn">
-                        <strong>{{ $t("player.watch_on") }} LBRY</strong>
+                        <strong v-text="`${$t('player.watch_on')} LBRY`" />
                     </a>
                     <router-link
                         :to="toggleListenUrl"
@@ -66,37 +64,42 @@
             <div class="flex">
                 <div class="flex items-center">
                     <img :src="video.uploaderAvatar" alt="" loading="lazy" class="rounded-full" />
-                    <router-link v-if="video.uploaderUrl" class="link ml-1.5" :to="video.uploaderUrl">
-                        {{ video.uploader }} </router-link
-                    ><font-awesome-icon class="ml-1" v-if="video.uploaderVerified" icon="check"></font-awesome-icon>
+                    <router-link
+                        v-if="video.uploaderUrl"
+                        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>
                 </div>
-                <button v-if="authenticated" class="btn relative ml-auto" @click="subscribeHandler">
-                    {{ subscribed ? $t("actions.unsubscribe") : $t("actions.subscribe") }}
-                </button>
+                <button
+                    v-if="authenticated"
+                    class="btn relative ml-auto"
+                    @click="subscribeHandler"
+                    v-text="$t(`actions.${subscribed ? 'unsubscribe' : 'subscribe'}`)"
+                />
             </div>
 
             <hr />
 
-            <button class="btn mb-2" @click="showDesc = !showDesc">
-                {{ showDesc ? $t("actions.minimize_description") : $t("actions.show_description") }}
-            </button>
+            <button
+                class="btn mb-2"
+                @click="showDesc = !showDesc"
+                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>
-            <div v-if="showDesc && sponsors && sponsors.segments">
-                {{ $t("video.sponsor_segments") }}: {{ sponsors.segments.length }}
-            </div>
+            <div
+                v-if="showDesc && sponsors && sponsors.segments"
+                v-text="`${$t('video.sponsor_segments')}: ${sponsors.segments.length}`"
+            />
         </div>
 
         <hr />
 
-        <label for="chkAutoLoop"
-            ><strong>{{ $t("actions.loop_this_video") }}:</strong></label
-        >
+        <label for="chkAutoLoop"><strong v-text="`${$t('actions.loop_this_video')}:`" /></label>
         <input id="chkAutoLoop" v-model="selectedAutoLoop" class="ml-1.5" type="checkbox" @change="onChange($event)" />
         <br />
-        <label for="chkAutoPlay"
-            ><strong>{{ $t("actions.auto_play_next_video") }}:</strong></label
-        >
+        <label for="chkAutoPlay"><strong v-text="`${$t('actions.auto_play_next_video')}:`" /></label>
         <input id="chkAutoPlay" v-model="selectedAutoPlay" class="ml-1.5" type="checkbox" @change="onChange($event)" />
 
         <hr />
@@ -113,9 +116,11 @@
             </div>
 
             <div v-if="video" class="order-first sm:order-last">
-                <a class="btn mb-2 sm:hidden" @click="showRecs = !showRecs">
-                    {{ showRecs ? $t("actions.minimize_recommendations") : $t("actions.show_recommendations") }}
-                </a>
+                <a
+                    class="btn mb-2 sm:hidden"
+                    @click="showRecs = !showRecs"
+                    v-text="$t(`actions.${showRecs ? 'minimize_recommendations' : 'show_recommendations'}`)"
+                />
                 <VideoItem
                     v-for="related in video.relatedStreams"
                     class="w-auto"