Add a working feed and unsubscribe button.

package.json

@@ -17,6 +17,7 @@
         "dompurify": "^2.3.0",
         "hotkeys-js": "^3.8.7",
         "mux.js": "^5.12.2",
+        "javascript-time-ago": "^2.3.8",
         "register-service-worker": "^1.7.1",
         "shaka-player": "3.2.0",
         "uikit": "3.7.0",

src/components/Channel.vue

@@ -13,7 +13,7 @@
             style="background: #222"
             type="button"
         >
-            Subscribe
+            {{ subscribed ? "Unsubscribe" : "Subscribe" }}
         </button>
 
         <hr />
@@ -38,13 +38,9 @@ export default {
     data() {
         return {
             channel: null,
+            subscribed: false,
         };
     },
-    computed: {
-        authenticated(_this) {
-            return _this.getAuthToken() !== undefined;
-        },
-    },
     mounted() {
         this.getChannelData();
     },
@@ -55,6 +51,21 @@ export default {
         window.removeEventListener("scroll", this.handleScroll);
     },
     methods: {
+        async fetchSubscribedStatus() {
+            this.fetchJson(
+                this.apiUrl() + "/subscribed",
+                {
+                    channelId: this.channel.id,
+                },
+                {
+                    headers: {
+                        Authorization: this.getAuthToken(),
+                    },
+                },
+            ).then(json => {
+                this.subscribed = json.subscribed;
+            });
+        },
         async fetchChannel() {
             const url = this.apiUrl() + "/" + this.$route.params.path + "/" + this.$route.params.channelId;
             return await this.fetchJson(url);
@@ -63,7 +74,10 @@ export default {
             this.fetchChannel()
                 .then(data => (this.channel = data))
                 .then(() => {
-                    if (!this.channel.error) document.title = this.channel.name + " - Piped";
+                    if (!this.channel.error) {
+                        document.title = this.channel.name + " - Piped";
+                        if (this.authenticated) this.fetchSubscribedStatus();
+                    }
                 });
         },
         handleScroll() {
@@ -81,20 +95,17 @@ export default {
             }
         },
         subscribeHandler() {
-            this.fetchJson(this.apiUrl() + "/subscribe", null, {
+            this.fetchJson(this.apiUrl() + (this.subscribed ? "/unsubscribe" : "/subscribe"), null, {
                 method: "POST",
                 body: JSON.stringify({
-                    // channelId: this.channel.id,
+                    channelId: this.channel.id,
                 }),
                 headers: {
-                    "Auth-Token": this.getAuthToken(),
+                    Authorization: this.getAuthToken(),
                     "Content-Type": "application/json",
                 },
-            }).then(resp => {
-                if (resp.status === "ok") {
-                    alert("Subscribed!");
-                }
             });
+            this.subscribed = !this.subscribed;
         },
     },
     components: {

src/components/FeedPage.vue

@@ -0,0 +1,72 @@
+<template>
+    <h1 class="uk-text-bold uk-text-center">Feed</h1>
+
+    <hr />
+
+    <div class="uk-grid-xl" uk-grid="parallax: 0">
+        <div
+            :style="[{ background: backgroundColor }]"
+            class="uk-width-1-2 uk-width-1-3@s uk-width-1-4@m uk-width-1-5@l uk-width-1-6@xl"
+            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">
+                    <img style="width: 100%" v-bind:src="video.thumbnail" alt="thumbnail" loading="lazy" />
+                    <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">
+                    <b class="uk-text-small">{{ timeFormat(video.duration) }}</b>
+
+                    <br />
+
+                    <router-link :to="'/watch?v=' + video.id + '&listen=1'">
+                        <font-awesome-icon icon="headphones"></font-awesome-icon>
+                    </router-link>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            videos: [],
+        };
+    },
+    mounted() {
+        document.title = "Feed - Piped";
+
+        this.fetchFeed().then(videos => (this.videos = videos));
+    },
+    methods: {
+        async fetchFeed() {
+            return await this.fetchJson(this.apiUrl() + "/feed", {
+                authToken: this.getAuthToken(),
+            });
+        },
+    },
+};
+</script>

src/components/Navigation.vue

@@ -31,6 +31,9 @@
                 <li v-if="shouldShowLogin">
                     <router-link to="/register">Register</router-link>
                 </li>
+                <li v-if="authenticated">
+                    <router-link to="/feed">Feed</router-link>
+                </li>
             </ul>
         </div>
     </nav>

src/main.js

@@ -34,6 +34,14 @@ import App from "./App.vue";
 
 import DOMPurify from "dompurify";
 
+import TimeAgo from "javascript-time-ago";
+
+import en from "javascript-time-ago/locale/en";
+
+TimeAgo.addDefaultLocale(en);
+
+const timeAgo = new TimeAgo("en-US");
+
 import("./registerServiceWorker");
 
 const mixin = {
@@ -145,6 +153,9 @@ const mixin = {
                 return a & a;
             }, 0);
         },
+        timeAgo(time) {
+            return timeAgo.format(time);
+        },
     },
     computed: {
         backgroundColor() {
@@ -162,6 +173,9 @@ const mixin = {
         darkMode() {
             return this.getEffectiveTheme() !== "light";
         },
+        authenticated(_this) {
+            return _this.getAuthToken() !== undefined;
+        },
     },
 };
 

src/router/router.js

@@ -39,6 +39,11 @@ const routes = [
         name: "Register",
         component: () => import("../components/RegisterPage.vue"),
     },
+    {
+        path: "/feed",
+        name: "Feed",
+        component: () => import("../components/FeedPage.vue"),
+    },
 ];
 
 const router = createRouter({

yarn.lock

@@ -5186,6 +5186,13 @@ javascript-stringify@^2.0.1:
   resolved "https://registry.yarnpkg.com/javascript-stringify/-/javascript-stringify-2.0.1.tgz#6ef358035310e35d667c675ed63d3eb7c1aa19e5"
   integrity sha512-yV+gqbd5vaOYjqlbk16EG89xB5udgjqQF3C5FAORDg4f/IS1Yc5ERCv5e/57yBcfJYw05V5JyIXabhwb75Xxow==
 
+javascript-time-ago@^2.3.8:
+  version "2.3.8"
+  resolved "https://registry.yarnpkg.com/javascript-time-ago/-/javascript-time-ago-2.3.8.tgz#7e1cd94a770987cc00db82e60e655d3efdd25629"
+  integrity sha512-ahVSuInQC6iJtwy/XsburOc6JMsI0OI/84b3nAhtMlDhCm9g4Py+zuiPASnt02B4GkaURqWtiyw98ce0ICAZYQ==
+  dependencies:
+    relative-time-format "^1.0.5"
+
 js-message@1.0.7:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/js-message/-/js-message-1.0.7.tgz#fbddd053c7a47021871bb8b2c95397cc17c20e47"
@@ -7196,6 +7203,11 @@ relateurl@0.2.x:
   resolved "https://registry.yarnpkg.com/relateurl/-/relateurl-0.2.7.tgz#54dbf377e51440aca90a4cd274600d3ff2d888a9"
   integrity sha1-VNvzd+UUQKypCkzSdGANP/LYiKk=
 
+relative-time-format@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/relative-time-format/-/relative-time-format-1.0.5.tgz#3fb7c76ae39156afe0a3a7ff0cb7bf30aa0f0fb6"
+  integrity sha512-MAgx/YKcUQYJpIaWcfetPstElnWf26JxVis4PirdwVrrymFdbxyCSm6yENpfB1YuwFbtHSHksN3aBajVNxk10Q==
+
 remove-trailing-separator@^1.0.1:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz#c24bce2a283adad5bc3f58e0d48249b92379d8ef"