From e902c0b6e256a773f39ad377ceefa00704e6e0e5 Mon Sep 17 00:00:00 2001
From: Bnyro <yannick.fehler@web.de>
Date: Mon, 1 Aug 2022 12:42:48 +0200
Subject: [PATCH] hmm

---
 src/components/ChannelPage.vue | 29 +++++++++++++++++------------
 src/components/WatchVideo.vue  | 28 ++++++++++++++++------------
 src/main.js                    | 14 ++++++++++++++
 3 files changed, 47 insertions(+), 24 deletions(-)

diff --git a/src/components/ChannelPage.vue b/src/components/ChannelPage.vue
index 3755f54d..42dceb4d 100644
--- a/src/components/ChannelPage.vue
+++ b/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,16 +114,20 @@ export default {
             }
         },
         subscribeHandler() {
-            this.fetchJson(this.authApiUrl() + (this.subscribed ? "/unsubscribe" : "/subscribe"), null, {
-                method: "POST",
-                body: JSON.stringify({
-                    channelId: this.channel.id,
-                }),
-                headers: {
-                    Authorization: this.getAuthToken(),
-                    "Content-Type": "application/json",
-                },
-            });
+            if (this.authenticated) {
+                this.fetchJson(this.authApiUrl() + (this.subscribed ? "/unsubscribe" : "/subscribe"), null, {
+                    method: "POST",
+                    body: JSON.stringify({
+                        channelId: this.channel.id,
+                    }),
+                    headers: {
+                        Authorization: this.getAuthToken(),
+                        "Content-Type": "application/json",
+                    },
+                });
+            } else {
+                this.handleLocalSubscriptions(this.channel.id);
+            }
             this.subscribed = !this.subscribed;
         },
     },
diff --git a/src/components/WatchVideo.vue b/src/components/WatchVideo.vue
index c9a562c9..deb65dae 100644
--- a/src/components/WatchVideo.vue
+++ b/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,16 +444,20 @@ export default {
             });
         },
         subscribeHandler() {
-            this.fetchJson(this.authApiUrl() + (this.subscribed ? "/unsubscribe" : "/subscribe"), null, {
-                method: "POST",
-                body: JSON.stringify({
-                    channelId: this.channelId,
-                }),
-                headers: {
-                    Authorization: this.getAuthToken(),
-                    "Content-Type": "application/json",
-                },
-            });
+            if (this.authenticated) {
+                this.fetchJson(this.authApiUrl() + (this.subscribed ? "/unsubscribe" : "/subscribe"), null, {
+                    method: "POST",
+                    body: JSON.stringify({
+                        channelId: this.channelId,
+                    }),
+                    headers: {
+                        Authorization: this.getAuthToken(),
+                        "Content-Type": "application/json",
+                    },
+                });
+            } else {
+                this.handleLocalSubscriptions(this.channelId);
+            }
             this.subscribed = !this.subscribed;
         },
         handleScroll() {
diff --git a/src/main.js b/src/main.js
index 7e64637b..4f9cf5fa 100644
--- a/src/main.js
+++ b/src/main.js
@@ -199,6 +199,20 @@ const mixin = {
                 });
             }
         },
+        getLocalSubscriptions() {
+            return JSON.parse(localStorage.getItem("localSubscriptions"));
+        },
+        isSubscribedLocally(channelId) {
+            return this.getLocalSubscriptions().includes(channelId);
+        },
+        handleLocalSubscriptions(channelId) {
+            var localSubscriptions = this.getLocalSubscriptions();
+            if (localSubscriptions == null || localSubscriptions.size == 0) localSubscriptions = [channelId];
+            else if (localSubscriptions.includes(channelId))
+                localSubscriptions.splice(localSubscriptions.indexOf(channelId));
+            else localSubscriptions.push(channelId);
+            localStorage.setItem("localSubscriptions", JSON.stringify(localSubscriptions));
+        },
     },
     computed: {
         theme() {