unauthenticated subscriptions (#1270)

* hmm

* unauthenticated feed

* unauthenticated rss

* Small improvements to code.

* add unauthenticated subscriptions

* cleanup

* Sort subs locally.

* Fix some bugs and small improvements.

Co-authored-by: Kavin <20838718+FireMasterK@users.noreply.github.com>

src/components/ChannelPage.vue

@@ -14,7 +14,6 @@
         </p>
 
         <button
-            v-if="authenticated"
             class="btn"
             @click="subscribeHandler"
             v-t="{
@@ -50,7 +49,7 @@ export default {
     data() {
         return {
             channel: null,
-            subscribed: false,
+            subscribed: this.authenticated ? false : this.isSubscribedLocally(this.channelId),
         };
     },
     mounted() {
@@ -69,6 +68,8 @@ export default {
     },
     methods: {
         async fetchSubscribedStatus() {
+            if (!this.channelId || !this.authenticated) return;
+
             this.fetchJson(
                 this.authApiUrl() + "/subscribed",
                 {
@@ -113,6 +114,7 @@ export default {
             }
         },
         subscribeHandler() {
+            if (this.authenticated) {
                 this.fetchJson(this.authApiUrl() + (this.subscribed ? "/unsubscribe" : "/subscribe"), null, {
                     method: "POST",
                     body: JSON.stringify({
@@ -123,6 +125,9 @@ export default {
                         "Content-Type": "application/json",
                     },
                 });
+            } else {
+                this.handleLocalSubscriptions(this.channel.id);
+            }
             this.subscribed = !this.subscribed;
         },
     },

src/components/FeedPage.vue

@@ -1,7 +1,7 @@
 <template>
     <h1 v-t="'titles.feed'" class="font-bold text-center my-4" />
 
-    <button v-if="authenticated" class="btn mr-2" @click="exportHandler">
+    <button class="btn mr-2" @click="exportHandler">
         <router-link to="/subscriptions">Subscriptions</router-link>
     </button>
 
@@ -41,17 +41,16 @@ export default {
     },
     computed: {
         getRssUrl(_this) {
-            return _this.authApiUrl() + "/feed/rss?authToken=" + _this.getAuthToken();
+            if (_this.authenticated) return _this.authApiUrl() + "/feed/rss?authToken=" + _this.getAuthToken();
+            else return _this.authApiUrl() + "/feed/unauthenticated/rss?channels=" + _this.getUnauthenticatedChannels();
         },
     },
     mounted() {
-        if (this.authenticated)
         this.fetchFeed().then(videos => {
             this.videosStore = videos;
             this.loadMoreVideos();
             this.updateWatched(this.videos);
         });
-        else this.$router.push("/login");
     },
     activated() {
         document.title = this.$t("titles.feed") + " - Piped";
@@ -66,9 +65,15 @@ export default {
     },
     methods: {
         async fetchFeed() {
+            if (this.authenticated) {
                 return await this.fetchJson(this.authApiUrl() + "/feed", {
                     authToken: this.getAuthToken(),
                 });
+            } else {
+                return await this.fetchJson(this.authApiUrl() + "/feed/unauthenticated", {
+                    channels: this.getUnauthenticatedChannels(),
+                });
+            }
         },
         loadMoreVideos() {
             this.currentVideoCount = Math.min(this.currentVideoCount + this.videoStep, this.videosStore.length);

src/components/ImportPage.vue

@@ -69,7 +69,6 @@ export default {
         },
     },
     activated() {
-        if (!this.authenticated) this.$router.push("/login");
         document.title = "Import - Piped";
     },
     methods: {
@@ -132,6 +131,7 @@ export default {
             });
         },
         handleImport() {
+            if (this.authenticated) {
                 this.fetchJson(
                     this.authApiUrl() + "/import",
                     {
@@ -147,6 +147,18 @@ export default {
                 ).then(json => {
                     if (json.message === "ok") window.location = "/feed";
                 });
+            } else {
+                this.importSubscriptionsLocally(this.subscriptions);
+                window.location = "/feed";
+            }
+        },
+        importSubscriptionsLocally(newChannels) {
+            const subscriptions = this.override
+                ? [...new Set(newChannels)]
+                : [...new Set(this.getLocalSubscriptions().concat(newChannels))];
+            // Sort for better cache hits
+            subscriptions.sort();
+            localStorage.setItem("localSubscriptions", JSON.stringify(subscriptions));
         },
     },
 };

src/components/NavBar.vue

@@ -52,7 +52,7 @@
             <li v-if="authenticated">
                 <router-link v-t="'titles.playlists'" to="/playlists" />
             </li>
-            <li v-if="authenticated && !shouldShowTrending">
+            <li v-if="!shouldShowTrending">
                 <router-link v-t="'titles.feed'" to="/feed" />
             </li>
         </ul>
@@ -81,7 +81,7 @@
         <li v-if="authenticated">
             <router-link v-t="'titles.playlists'" to="/playlists" />
         </li>
-        <li v-if="authenticated && !shouldShowTrending">
+        <li v-if="!shouldShowTrending">
             <router-link v-t="'titles.feed'" to="/feed" />
         </li>
     </ul>

src/components/SubscriptionsPage.vue

@@ -1,7 +1,7 @@
 <template>
     <h1 class="font-bold text-center my-4" v-t="'titles.subscriptions'" />
 
-    <div v-if="authenticated" class="flex justify-between w-full">
+    <div class="flex justify-between w-full">
         <div class="flex">
             <button class="btn mx-1">
                 <router-link to="/import" v-t="'actions.import_from_json'" />
@@ -40,21 +40,28 @@ export default {
         };
     },
     mounted() {
-        if (this.authenticated)
+        this.fetchSubscriptions().then(json => {
-            this.fetchJson(this.authApiUrl() + "/subscriptions", null, {
-                headers: {
-                    Authorization: this.getAuthToken(),
-                },
-            }).then(json => {
             this.subscriptions = json;
             this.subscriptions.forEach(subscription => (subscription.subscribed = true));
         });
-        else this.$router.push("/login");
     },
     activated() {
         document.title = "Subscriptions - Piped";
     },
     methods: {
+        async fetchSubscriptions() {
+            if (this.authenticated) {
+                return await this.fetchJson(this.authApiUrl() + "/subscriptions", null, {
+                    headers: {
+                        Authorization: this.getAuthToken(),
+                    },
+                });
+            } else {
+                return await this.fetchJson(this.authApiUrl() + "/subscriptions/unauthenticated", {
+                    channels: this.getUnauthenticatedChannels(),
+                });
+            }
+        },
         handleButton(subscription) {
             this.fetchJson(this.authApiUrl() + (subscription.subscribed ? "/unsubscribe" : "/subscribe"), null, {
                 method: "POST",

src/components/WatchVideo.vue

@@ -80,7 +80,6 @@
                     </button>
                     <button
                         class="btn"
-                        v-if="authenticated"
                         @click="subscribeHandler"
                         v-t="{
                             path: `actions.${subscribed ? 'unsubscribe' : 'subscribe'}`,
@@ -427,7 +426,8 @@ export default {
             this.fetchComments().then(data => (this.comments = data));
         },
         async fetchSubscribedStatus() {
-            if (!this.channelId || !this.authenticated) return;
+            if (!this.channelId) return;
+            if (!this.authenticated) this.subscribed = this.isSubscribedLocally(this.channelId);
 
             this.fetchJson(
                 this.authApiUrl() + "/subscribed",
@@ -444,6 +444,7 @@ export default {
             });
         },
         subscribeHandler() {
+            if (this.authenticated) {
                 this.fetchJson(this.authApiUrl() + (this.subscribed ? "/unsubscribe" : "/subscribe"), null, {
                     method: "POST",
                     body: JSON.stringify({
@@ -454,6 +455,9 @@ export default {
                         "Content-Type": "application/json",
                     },
                 });
+            } else {
+                this.handleLocalSubscriptions(this.channelId);
+            }
             this.subscribed = !this.subscribed;
         },
         handleScroll() {

src/main.js

@@ -199,6 +199,27 @@ const mixin = {
                 });
             }
         },
+        getLocalSubscriptions() {
+            return JSON.parse(localStorage.getItem("localSubscriptions"));
+        },
+        isSubscribedLocally(channelId) {
+            const localSubscriptions = this.getLocalSubscriptions();
+            if (localSubscriptions == null) return false;
+            return localSubscriptions.includes(channelId);
+        },
+        handleLocalSubscriptions(channelId) {
+            var localSubscriptions = this.getLocalSubscriptions() ?? [];
+            if (localSubscriptions.includes(channelId))
+                localSubscriptions.splice(localSubscriptions.indexOf(channelId));
+            else localSubscriptions.push(channelId);
+            // Sort for better cache hits
+            localSubscriptions.sort();
+            localStorage.setItem("localSubscriptions", JSON.stringify(localSubscriptions));
+        },
+        getUnauthenticatedChannels() {
+            const localSubscriptions = this.getLocalSubscriptions();
+            return localSubscriptions.join(",");
+        },
     },
     computed: {
         theme() {