Use Mixins for global functions.

src/components/Channel.vue

@@ -71,14 +71,11 @@ export default {
                 .then(data => (this.channel = data))
                 .then(() => (document.title = this.channel.name + " - Piped"));
         },
-        timeFormat(d) {
-            return require("@/utils/TimeUtils.js").default.timeFormat(d);
-        },
         handleScroll() {
             if (this.loading || !this.channel || !this.channel.nextpage) return;
             if (
                 window.innerHeight + window.scrollY >=
-                document.body.offsetHeight - window.innerHeight / 2
+                document.body.offsetHeight - window.innerHeight
             ) {
                 this.loading = true;
                 fetch(

src/components/TrendingPage.vue

@@ -51,9 +51,6 @@ export default {
     methods: {
         async fetchTrending() {
             return await (await fetch(Constants.BASE_URL + "/trending")).json();
-        },
-        timeFormat(d) {
-            return require("@/utils/TimeUtils.js").default.timeFormat(d);
         }
     }
 };

src/components/WatchVideo.vue

@@ -14,13 +14,17 @@
 
         <p class="uk-dark">
             <font-awesome-icon icon="thumbs-down"></font-awesome-icon>
-            {{ video.likes }}
+            <b>{{ video.likes }}</b>
+            &nbsp;
             <font-awesome-icon icon="thumbs-up"></font-awesome-icon>
-            {{ video.dislikes }}
+            <b>{{ video.dislikes }}</b>
         </p>
         <p>
             <font-awesome-icon icon="eye"></font-awesome-icon>
-            {{ video.views }} views
+            <b>{{ video.views }}</b> views
+        </p>
+        <p>
+            Uploaded on <b>{{ video.uploadDate }}</b>
         </p>
         <p class="uk-light" v-html="video.description"></p>
         <a v-if="sponsors && sponsors.segments"

src/main.js

@@ -12,7 +12,33 @@ import App from './App.vue'
 
 import './registerServiceWorker'
 
+const mixin = {
+    methods: {
+        timeFormat: function (duration) {
+
+            var pad = function (num, size) {
+                return ("000" + num).slice(size * -1);
+            };
+
+            var time = parseFloat(duration).toFixed(3),
+                hours = Math.floor(time / 60 / 60),
+                minutes = Math.floor(time / 60) % 60,
+                seconds = Math.floor(time - minutes * 60);
+
+            var str = "";
+
+            if (hours > 0) str += pad(hours, 2) + ":";
+
+            str += pad(minutes, 2) + ":" + pad(seconds, 2);
+
+            return str;
+
+        }
+    }
+}
+
 const app = createApp(App)
 app.use(router)
+app.mixin(mixin)
 app.component('font-awesome-icon', FontAwesomeIcon)
 app.mount('#app')

src/utils/TimeUtils.js

@@ -1,20 +0,0 @@
-export default {
-    timeFormat: function (duration) {
-        var pad = function (num, size) {
-            return ("000" + num).slice(size * -1);
-        };
-
-        var time = parseFloat(duration).toFixed(3),
-            hours = Math.floor(time / 60 / 60),
-            minutes = Math.floor(time / 60) % 60,
-            seconds = Math.floor(time - minutes * 60);
-
-        var str = "";
-
-        if (hours > 0) str += pad(hours, 2) + ":";
-
-        str += pad(minutes, 2) + ":" + pad(seconds, 2);
-
-        return str;
-    }
-}