Merge pull request #1692 from TeamPiped/localstorage

Add better error messages for localStorage disabled

src/components/ChannelPage.vue

@@ -195,7 +195,7 @@ export default {
                     },
                 });
             } else {
-                this.handleLocalSubscriptions(this.channel.id);
+                if (!this.handleLocalSubscriptions(this.channel.id)) return;
             }
             this.subscribed = !this.subscribed;
         },

src/components/ImportPage.vue

@@ -158,7 +158,11 @@ export default {
                 : [...new Set((this.getLocalSubscriptions() ?? []).concat(newChannels))];
             // Sort for better cache hits
             subscriptions.sort();
+            try {
                 localStorage.setItem("localSubscriptions", JSON.stringify(subscriptions));
+            } catch (e) {
+                alert(this.$t("info.local_storage"));
+            }
         },
     },
 };

src/components/NavBar.vue

@@ -137,8 +137,8 @@ export default {
         shouldShowTrending(_this) {
             return _this.getPreferenceString("homepage", "trending") != "trending";
         },
-        showSearchHistory() {
+        showSearchHistory(_this) {
-            return localStorage.getItem("searchHistory") && localStorage.getItem("search_history");
+            return _this.getPreferenceBoolean("searchHistory", false) && localStorage.getItem("search_history");
         },
     },
     methods: {

src/components/ShareModal.vue

@@ -66,8 +66,8 @@ export default {
             }
         },
         onChange() {
-            this.setPreference("shareWithTimeCode", this.withTimeCode);
+            this.setPreference("shareWithTimeCode", this.withTimeCode, true);
-            this.setPreference("shareAsPipedLink", this.pipedLink);
+            this.setPreference("shareAsPipedLink", this.pipedLink, true);
         },
     },
     computed: {

src/components/VideoPlayer.vue

@@ -372,13 +372,13 @@ export default {
                 });
 
                 videoEl.addEventListener("volumechange", () => {
-                    this.setPreference("volume", videoEl.volume);
+                    this.setPreference("volume", videoEl.volume, true);
                 });
 
                 videoEl.addEventListener("ratechange", e => {
                     const rate = videoEl.playbackRate;
                     if (rate > 0 && !isNaN(videoEl.duration) && !isNaN(videoEl.duration - e.timeStamp / 1000))
-                        this.setPreference("rate", rate);
+                        this.setPreference("rate", rate, true);
                 });
 
                 videoEl.addEventListener("ended", () => {

src/components/WatchVideo.vue

@@ -383,7 +383,7 @@ export default {
             return this.fetchJson(this.apiUrl() + "/comments/" + this.getVideoId());
         },
         onChange() {
-            this.setPreference("autoplay", this.selectedAutoPlay);
+            this.setPreference("autoplay", this.selectedAutoPlay, true);
         },
         async getVideoData() {
             await this.fetchVideo()
@@ -485,7 +485,7 @@ export default {
                     },
                 });
             } else {
-                this.handleLocalSubscriptions(this.channelId);
+                if (!this.handleLocalSubscriptions(this.channelId)) return;
             }
             this.subscribed = !this.subscribed;
         },

src/locales/en.json

@@ -167,6 +167,7 @@
         "preferences_note": "Note: preferences are saved in the local storage of your browser. Deleting your browser data will reset them.",
         "page_not_found": "Page not found",
         "copied": "Copied!",
-        "cannot_copy": "Can't copy!"
+        "cannot_copy": "Can't copy!",
+        "local_storage": "This action requires localStorage, are cookies enabled?"
     }
 }

src/main.js

@@ -118,8 +118,12 @@ const mixin = {
         purifyHTML(original) {
             return DOMPurify.sanitize(original);
         },
-        setPreference(key, value) {
+        setPreference(key, value, disableAlert = false) {
-            if (localStorage) localStorage.setItem(key, value);
+            try {
+                localStorage.setItem(key, value);
+            } catch {
+                if (!disableAlert) alert(this.$t("info.local_storage"));
+            }
         },
         getPreferenceBoolean(key, defaultVal) {
             var value;
@@ -204,7 +208,11 @@ const mixin = {
             }
         },
         getLocalSubscriptions() {
+            try {
                 return JSON.parse(localStorage.getItem("localSubscriptions"));
+            } catch {
+                return [];
+            }
         },
         isSubscribedLocally(channelId) {
             const localSubscriptions = this.getLocalSubscriptions();
@@ -218,7 +226,13 @@ const mixin = {
             else localSubscriptions.push(channelId);
             // Sort for better cache hits
             localSubscriptions.sort();
+            try {
                 localStorage.setItem("localSubscriptions", JSON.stringify(localSubscriptions));
+                return true;
+            } catch {
+                alert(this.$t("info.local_storage"));
+            }
+            return false;
         },
         getUnauthenticatedChannels() {
             const localSubscriptions = this.getLocalSubscriptions() ?? [];