Add live indicator for videos, pretranslate more components.

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']" />
-                <span v-text="$t('actions.donations')" />
+                <span v-t="'actions.donations'" />
             </a>
         </footer>
     </div>

src/components/ChannelPage.vue

@@ -16,7 +16,7 @@
             v-if="authenticated"
             class="btn"
             @click="subscribeHandler"
-            v-text="$t(`actions.${subscribed ? 'unsubscribe' : 'subscribe'}`)"
+            v-t="`actions.${subscribed ? 'unsubscribe' : 'subscribe'}`"
         />
 
         <hr />

src/components/CommentItem.vue

@@ -13,7 +13,7 @@
             <div class="comment-header">
                 <div v-if="comment.pinned" class="comment-pinned">
                     <font-awesome-icon icon="thumbtack" />
-                    <span class="ml-1.5" v-text="$t('comment.pinned_by')" />
+                    <span class="ml-1.5" v-t="'comment.pinned_by'" />
                     <span v-text="uploader" />
                 </div>
 

src/components/ErrorHandler.vue

@@ -1,6 +1,6 @@
 <template>
     <p v-text="message" />
-    <button @click="toggleTrace" class="btn" v-text="$t('actions.show_more')" />
+    <button @click="toggleTrace" class="btn" v-t="'actions.show_more'" />
     <p ref="stacktrace" class="whitespace-pre-wrap" hidden v-text="error" />
 </template>
 

src/components/HistoryPage.vue

@@ -1,5 +1,5 @@
 <template>
-    <h1 class="font-bold text-center" v-text="$t('titles.history')" />
+    <h1 class="font-bold text-center" v-t="'titles.history'" />
 
     <div class="flex">
         <div>

src/components/LoginPage.vue

@@ -23,7 +23,7 @@
                 />
             </div>
             <div>
-                <a class="btn w-auto" @click="login" v-text="$t('titles.login')" />
+                <a class="btn w-auto" @click="login" v-t="'titles.login'" />
             </div>
         </form>
     </div>

src/components/PreferencesPage.vue

@@ -1,17 +1,13 @@
 <template>
     <div class="flex">
         <button @click="$router.go(-1) || $router.push('/')">
-            <font-awesome-icon icon="chevron-left" /><span class="ml-1.5" v-text="$t('actions.back')" />
+            <font-awesome-icon icon="chevron-left" /><span class="ml-1.5" v-t="'actions.back'" />
         </button>
     </div>
     <h1 v-t="'titles.preferences'" class="font-bold text-center" />
     <hr />
     <h2>SponsorBlock</h2>
-    <p>
+    <p><span v-t="'actions.uses_api_from'" /><a class="link" href="https://sponsor.ajay.app/">sponsor.ajay.app</a></p>
-        <span v-text="$t('actions.uses_api_from')" /><a class="link" href="https://sponsor.ajay.app/"
-            >sponsor.ajay.app</a
-        >
-    </p>
     <label for="chkEnableSponsorblock"><strong v-t="'actions.enable_sponsorblock'" /></label>
     <br />
     <input
@@ -159,19 +155,19 @@
     <table class="table">
         <thead>
             <tr>
-                <th v-text="$t('preferences.instance_name')" />
+                <th v-t="'preferences.instance_name'" />
-                <th v-text="$t('preferences.instance_locations')" />
+                <th v-t="'preferences.instance_locations'" />
-                <th v-text="$t('preferences.has_cdn')" />
+                <th v-t="'preferences.has_cdn'" />
-                <th v-text="$t('preferences.ssl_score')" />
+                <th v-t="'preferences.ssl_score'" />
             </tr>
         </thead>
         <tbody v-for="instance in instances" :key="instance.name">
             <tr>
                 <td v-text="instance.name" />
                 <td v-text="instance.locations" />
-                <td v-text="$t(`actions.${instance.cdn === 'Yes' ? 'yes' : 'no'}`)" />
+                <td v-t="`actions.${instance.cdn === 'Yes' ? 'yes' : 'no'}`" />
                 <td>
-                    <a :href="sslScore(instance.apiurl)" target="_blank" v-text="$t('actions.view_ssl_score')" />
+                    <a :href="sslScore(instance.apiurl)" target="_blank" v-t="'actions.view_ssl_score'" />
                 </td>
             </tr>
         </tbody>

src/components/RegisterPage.vue

@@ -22,7 +22,7 @@
                 />
             </div>
             <div>
-                <a class="btn w-auto" @click="register" v-text="$t('titles.register')" />
+                <a class="btn w-auto" @click="register" v-t="'titles.register'" />
             </div>
         </form>
     </div>

src/components/SearchResults.vue

@@ -25,7 +25,7 @@
     </div>
 
     <div v-if="results" class="video-grid">
-        <div v-for="result in results.items" :key="result.url">
+        <template v-for="result in results.items" :key="result.url">
             <VideoItem v-if="shouldUseVideoItem(result)" :video="result" height="94" width="168" />
             <div v-if="!shouldUseVideoItem(result)">
                 <router-link :to="result.url">
@@ -53,7 +53,7 @@
 
                 <br />
             </div>
-        </div>
+        </template>
     </div>
 </template>
 

src/components/Sorting.vue

@@ -1,5 +1,5 @@
 <template>
-    <label for="ddlSortBy" v-text="$t('actions.sort_by')" />
+    <label for="ddlSortBy" v-t="'actions.sort_by'" />
     <select id="ddlSortBy" v-model="selectedSort" class="select w-auto">
         <option v-for="(value, key) in options" v-t="`actions.${key}`" :key="key" :value="value" />
     </select>

src/components/SubscriptionsPage.vue

@@ -1,12 +1,12 @@
 <template>
-    <h1 class="font-bold text-center" v-text="$t('titles.subscriptions')" />
+    <h1 class="font-bold text-center" v-t="'titles.subscriptions'" />
 
     <div v-if="authenticated">
         <button class="btn mr-0.5">
-            <router-link to="/import" v-text="$t('actions.import_from_json')" />
+            <router-link to="/import" v-t="'actions.import_from_json'" />
         </button>
 
-        <button class="btn" @click="exportHandler" v-text="$t('actions.export_to_json')" />
+        <button class="btn" @click="exportHandler" v-t="'actions.export_to_json'" />
     </div>
     <hr />
 
@@ -21,7 +21,7 @@
                     <button
                         class="btn !w-min"
                         @click="handleButton(subscription)"
-                        v-text="$t(`actions.${subscription.subscribed ? 'unsubscribe' : 'subscribe'}`)"
+                        v-t="`actions.${subscription.subscribed ? 'unsubscribe' : 'subscribe'}`"
                     />
                 </div>
             </div>

src/components/VideoItem.vue

@@ -4,15 +4,14 @@
             <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 thumbnail-right"
-                    class="thumbnail-overlay bottom-5px right-5px px-5px"
+                    v-if="video.duration > 0"
                     v-text="timeFormat(video.duration)"
                 />
-                <span
+                <i18n-t v-else keypath="video.live" class="thumbnail-overlay thumbnail-right !bg-red-600" tag="div">
-                    v-if="video.watched"
+                    <font-awesome-icon class="!w-3" :icon="['fas', 'broadcast-tower']" />
-                    class="thumbnail-overlay bottom-5px left-5px px-5px"
+                </i18n-t>
-                    v-text="$t('video.watched')"
+                <span v-if="video.watched" class="thumbnail-overlay bottom-5px left-5px" v-t="'video.watched'" />
-                />
             </div>
 
             <div>
@@ -74,7 +73,11 @@
 
 <style>
 .thumbnail-overlay {
-    @apply rounded-md absolute bg-black text-white bg-opacity-75;
+    @apply rounded-md absolute bg-black text-white bg-opacity-75 px-5px;
+}
+
+.thumbnail-right {
+    @apply bottom-5px right-5px;
 }
 </style>
 

src/components/VideoRedirect.vue

@@ -1,5 +1,5 @@
 <template>
-    <div v-text="$t('actions.loading')" />
+    <div v-t="'actions.loading'" />
 </template>
 
 <script>

src/components/WatchVideo.vue

@@ -77,7 +77,7 @@
                     v-if="authenticated"
                     class="btn relative ml-auto"
                     @click="subscribeHandler"
-                    v-text="$t(`actions.${subscribed ? 'unsubscribe' : 'subscribe'}`)"
+                    v-t="`actions.${subscribed ? 'unsubscribe' : 'subscribe'}`"
                 />
             </div>
 
@@ -86,7 +86,7 @@
             <button
                 class="btn mb-2"
                 @click="showDesc = !showDesc"
-                v-text="$t(`actions.${showDesc ? 'minimize_description' : 'show_description'}`)"
+                v-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)" />
@@ -122,7 +122,7 @@
                 <a
                     class="btn mb-2 sm:hidden"
                     @click="showRecs = !showRecs"
-                    v-text="$t(`actions.${showRecs ? 'minimize_recommendations' : 'show_recommendations'}`)"
+                    v-t="`actions.${showRecs ? 'minimize_recommendations' : 'show_recommendations'}`"
                 />
                 <hr v-show="showRecs" />
                 <div v-show="showRecs || !smallView">

src/locales/en.json

@@ -91,7 +91,8 @@
         "watched": "Watched",
         "sponsor_segments": "Sponsors Segments",
         "ratings_disabled": "Ratings Disabled",
-        "chapters": "Chapters"
+        "chapters": "Chapters",
+        "live": "{0} Live"
     },
     "search": {
         "did_you_mean": "Did you mean: {0}?"

src/main.js

@@ -13,6 +13,7 @@ import {
     faLevelDownAlt,
     faTv,
     faLevelUpAlt,
+    faBroadcastTower,
 } from "@fortawesome/free-solid-svg-icons";
 import { faGithub, faBitcoin, faYoutube } from "@fortawesome/free-brands-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
@@ -32,6 +33,7 @@ library.add(
     faLevelDownAlt,
     faLevelUpAlt,
     faTv,
+    faBroadcastTower,
 );
 
 import router from "@/router/router.js";