Add audio only buttons.

src/components/Channel.vue

@@ -11,25 +11,10 @@
         <div class="uk-grid-xl" uk-grid="parallax: 0">
             <div
                 class="uk-width-1-2 uk-width-1-3@m uk-width-1-4@l uk-width-1-5@xl"
-                v-bind:key="item.url"
+                v-bind:key="video.url"
-                v-for="item in this.channel.relatedStreams"
+                v-for="video in this.channel.relatedStreams"
             >
-                <router-link class="uk-link-muted uk-text-justify" v-bind:to="item.url || '/'">
+                <VideoItem :video="video" height="94" width="168" hideChannel />
-                    <img height="94" width="168" style="width: 100%" v-bind:src="item.thumbnail" loading="lazy" />
-                    <a>{{ item.title }}</a>
-                </router-link>
-                <br />
-                <div>
-                    <b class="uk-text-small uk-align-left">
-                        <font-awesome-icon icon="eye"></font-awesome-icon>
-                        {{ numberFormat(item.views) }} views
-                        <br />
-                        {{ item.uploadedDate }}
-                    </b>
-                    <b class="uk-text-small uk-align-right">
-                        {{ timeFormat(item.duration) }}
-                    </b>
-                </div>
             </div>
         </div>
     </div>
@@ -38,6 +23,7 @@
 <script>
 import Constants from "@/Constants.js";
 import ErrorHandler from "@/components/ErrorHandler.vue";
+import VideoItem from "@/components/VideoItem.vue";
 
 export default {
     data() {
@@ -87,6 +73,7 @@ export default {
     },
     components: {
         ErrorHandler,
+        VideoItem,
     },
 };
 </script>

src/components/Playlist.vue

@@ -21,24 +21,10 @@
         <div class="uk-grid-xl" uk-grid="parallax: 0">
             <div
                 class="uk-width-1-2 uk-width-1-3@m uk-width-1-4@l uk-width-1-5@xl"
-                v-bind:key="item.url"
+                v-bind:key="video.url"
-                v-for="item in this.playlist.relatedStreams"
+                v-for="video in this.playlist.relatedStreams"
             >
-                <router-link class="uk-link-muted uk-text-justify" v-bind:to="item.url || '/'">
+                <VideoItem :video="video" height="94" width="168" />
-                    <img style="width: 100%" height="94" width="168" v-bind:src="item.thumbnail" loading="lazy" />
-                    <a>{{ item.title }}</a>
-                </router-link>
-                <br />
-                <div>
-                    <b class="uk-text-small uk-align-left">
-                        <router-link class="uk-text-justify" v-bind:to="item.uploaderUrl || '/'">{{
-                            item.uploaderName
-                        }}</router-link>
-                    </b>
-                    <b class="uk-text-small uk-align-right">
-                        {{ timeFormat(item.duration) }}
-                    </b>
-                </div>
             </div>
         </div>
     </div>
@@ -47,6 +33,7 @@
 <script>
 import Constants from "@/Constants.js";
 import ErrorHandler from "@/components/ErrorHandler.vue";
+import VideoItem from "@/components/VideoItem.vue";
 
 export default {
     data() {
@@ -87,6 +74,7 @@ export default {
     },
     components: {
         ErrorHandler,
+        VideoItem,
     },
 };
 </script>

src/components/TrendingPage.vue

@@ -10,37 +10,14 @@
             v-bind:key="video.url"
             v-for="video in videos"
         >
-            <div class="uk-text-secondary" style="background: #0b0e0f">
+            <VideoItem :video="video" height="118" width="210" />
-                <router-link class="uk-text-emphasis" v-bind:to="video.url || '/'">
-                    <img
-                        height="118"
-                        width="210"
-                        style="width: 100%"
-                        v-bind:src="video.thumbnail"
-                        alt="thumbnail"
-                        loading="lazy"
-                    />
-                    <p>{{ video.title }}</p>
-                </router-link>
-                <router-link class="uk-link-muted" v-bind:to="video.uploaderUrl || '/'">
-                    <p>{{ video.uploaderName }}</p>
-                </router-link>
-                <b class="uk-text-small uk-align-left">
-                    <font-awesome-icon icon="eye"></font-awesome-icon>
-                    {{ numberFormat(video.views) }} views
-                    <br />
-                    {{ video.uploadedDate }}
-                </b>
-                <b class="uk-text-small uk-align-right">
-                    {{ timeFormat(video.duration) }}
-                </b>
-            </div>
         </div>
     </div>
 </template>
 
 <script>
 import Constants from "@/Constants.js";
+import VideoItem from "@/components/VideoItem.vue";
 
 export default {
     data() {
@@ -58,5 +35,8 @@ export default {
             return await this.fetchJson(Constants.BASE_URL + "/trending");
         },
     },
+    components: {
+        VideoItem,
+    },
 };
 </script>

src/components/VideoItem.vue

@@ -0,0 +1,55 @@
+<template>
+    <div class="uk-text-secondary" style="background: #0b0e0f">
+        <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="thumbnail"
+                loading="lazy"
+            />
+            <p>{{ video.title }}</p>
+        </router-link>
+
+        <div :class="{ 'uk-align-left': !(video.views >= 0 || video.uploadedDate) }">
+            <div v-if="video.uploaderUrl && video.uploaderName && !hideChannel">
+                <router-link class="uk-link-muted" :to="video.uploaderUrl">
+                    <a>{{ video.uploaderName }}</a>
+                </router-link>
+                <br />
+            </div>
+        </div>
+
+        <b v-if="video.views >= 0 || video.uploadedDate" 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 v-if="video.uploadedDate">
+                {{ video.uploadedDate }}
+            </div>
+        </b>
+        <div class="uk-align-right">
+            <b class="uk-text-small">{{ timeFormat(video.duration) }}</b>
+
+            <br />
+
+            <router-link :to="video.url + '&listen=1'">
+                <font-awesome-icon icon="headphones"></font-awesome-icon>
+            </router-link>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        video: Object,
+        height: String,
+        width: String,
+        hideChannel: Boolean,
+    },
+};
+</script>

src/main.js

@@ -1,9 +1,9 @@
 import { createApp } from "vue";
 import { library } from "@fortawesome/fontawesome-svg-core";
-import { faThumbsUp, faThumbsDown, faEye, faThumbtack, faCheck, faHeart } from "@fortawesome/free-solid-svg-icons";
+import { faThumbsUp, faThumbsDown, faEye, faThumbtack, faCheck, faHeart, faHeadphones } from "@fortawesome/free-solid-svg-icons";
 import { faGithub, faBitcoin } from "@fortawesome/free-brands-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-library.add(faThumbsUp, faThumbsDown, faEye, faGithub, faBitcoin, faThumbtack, faCheck, faHeart);
+library.add(faThumbsUp, faThumbsDown, faEye, faGithub, faBitcoin, faThumbtack, faCheck, faHeart, faHeadphones);
 
 import("uikit/dist/css/uikit-core.css");
 import("uikit/dist/js/uikit-core.min");