From d3f4653e8a5862c7d968b4b335be5513eb9a1ff8 Mon Sep 17 00:00:00 2001
From: FireMasterK <20838718+FireMasterK@users.noreply.github.com>
Date: Wed, 21 Jul 2021 18:02:17 +0530
Subject: [PATCH] Merge videos in FeedPage with VideoItem.

---
 src/components/FeedPage.vue  | 45 +++++-------------------------------
 src/components/VideoItem.vue | 12 ++++++----
 2 files changed, 14 insertions(+), 43 deletions(-)

diff --git a/src/components/FeedPage.vue b/src/components/FeedPage.vue
index 8760c7f6..a986d231 100644
--- a/src/components/FeedPage.vue
+++ b/src/components/FeedPage.vue
@@ -16,50 +16,14 @@
             v-bind:key="video.url"
             v-for="video in videos"
         >
-            <div class="uk-text-secondary" :style="[{ background: backgroundColor }]">
-                <router-link class="uk-text-emphasis" v-bind:to="'/watch?v=' + video.id">
-                    <div class="uk-position-relative">
-                        <img style="width: 100%" v-bind:src="video.thumbnail" alt="thumbnail" loading="lazy" />
-                        <span
-                            v-if="video.duration"
-                            class="uk-label uk-border-rounded uk-position-absolute video-duration"
-                            style="bottom: 5px; right: 5px; background: rgba(0, 0, 0, .75); color: white; padding: 0 5px;"
-                            >{{ timeFormat(video.duration) }}</span
-                        >
-                    </div>
-                    <p>{{ video.title }}</p>
-                </router-link>
-
-                <div>
-                    <div>
-                        <router-link class="uk-link-muted" :to="'/channel/' + video.uploader_id">
-                            <a>{{ video.uploader }}</a>
-                        </router-link>
-                        <br />
-                    </div>
-                </div>
-
-                <b class="uk-text-small uk-align-left">
-                    <div v-if="video.views >= 0">
-                        <font-awesome-icon icon="eye"></font-awesome-icon>
-                        {{ numberFormat(video.views) }} views
-                        <br />
-                    </div>
-                    <div>
-                        {{ timeAgo(video.uploaded) }}
-                    </div>
-                </b>
-                <div class="uk-align-right">
-                    <router-link :to="'/watch?v=' + video.id + '&listen=1'">
-                        <font-awesome-icon icon="headphones"></font-awesome-icon>
-                    </router-link>
-                </div>
-            </div>
+            <VideoItem :video="video" />
         </div>
     </div>
 </template>
 
 <script>
+import VideoItem from "@/components/VideoItem.vue";
+
 export default {
     data() {
         return {
@@ -84,5 +48,8 @@ export default {
             return _this.apiUrl() + "/feed/rss?authToken=" + _this.getAuthToken();
         },
     },
+    components: {
+        VideoItem,
+    },
 };
 </script>
diff --git a/src/components/VideoItem.vue b/src/components/VideoItem.vue
index b843bc6e..5ba39ca8 100644
--- a/src/components/VideoItem.vue
+++ b/src/components/VideoItem.vue
@@ -10,11 +10,12 @@
                     alt="thumbnail"
                     loading="lazy"
                 />
-                <span 
+                <span
                     v-if="video.duration"
-                    class="uk-label uk-border-rounded uk-position-absolute video-duration" 
+                    class="uk-label uk-border-rounded uk-position-absolute video-duration"
                     style="bottom: 5px; right: 5px; background: rgba(0, 0, 0, .75); color: white; padding: 0 5px;"
-                    >{{ timeFormat(video.duration) }}</span>
+                    >{{ timeFormat(video.duration) }}</span
+                >
             </div>
             <p>{{ video.title }}</p>
         </router-link>
@@ -37,6 +38,9 @@
             <div v-if="video.uploadedDate">
                 {{ video.uploadedDate }}
             </div>
+            <div v-if="video.uploaded">
+                {{ timeAgo(video.uploaded) }}
+            </div>
         </b>
         <div class="uk-align-right">
             <router-link :to="video.url + '&listen=1'">
@@ -55,4 +59,4 @@ export default {
         hideChannel: Boolean,
     },
 };
-</script>
\ No newline at end of file
+</script>