Merge pull request #3325 from Bnyro/fix-channel-id

fix: subscription groups use invalid channel id length

src/App.vue

@@ -36,7 +36,7 @@ export default {
         });
 
         if ("indexedDB" in window) {
-            const request = indexedDB.open("piped-db", 5);
+            const request = indexedDB.open("piped-db", 6);
             request.onupgradeneeded = ev => {
                 const db = request.result;
                 console.log("Upgrading object store.");
@@ -64,6 +64,23 @@ export default {
                     const playlistVideosStore = db.createObjectStore("playlist_videos", { keyPath: "videoId" });
                     playlistVideosStore.createIndex("videoId", "videoId", { unique: true });
                 }
+                // migration to fix an invalid previous length of channel ids: 11 -> 24
+                (async () => {
+                    if (ev.oldVersion < 6) {
+                        const subscriptions = await this.fetchSubscriptions();
+                        const channelGroups = await this.getChannelGroups();
+                        for (let group of channelGroups) {
+                            for (let i = 0; i < group.channels.length; i++) {
+                                const tooShortChannelId = group.channels[i];
+                                const foundChannel = subscriptions.find(
+                                    channel => channel.url.substr(-11) == tooShortChannelId,
+                                );
+                                if (foundChannel) group.channels[i] = foundChannel.url.substr(-24);
+                            }
+                            this.createOrUpdateChannelGroup(group);
+                        }
+                    }
+                })();
             };
             request.onsuccess = e => {
                 window.db = e.target.result;

src/components/ChannelPage.vue

@@ -79,7 +79,7 @@
             />
         </div>
 
-        <AddToGroupModal v-if="showGroupModal" :channel-id="channel.id.substr(-11)" @close="showGroupModal = false" />
+        <AddToGroupModal v-if="showGroupModal" :channel-id="channel.id.substr(-24)" @close="showGroupModal = false" />
     </LoadingIndicatorPage>
 </template>
 

src/components/SubscriptionsPage.vue

@@ -105,7 +105,7 @@
                     <input
                         type="checkbox"
                         class="checkbox"
-                        :checked="selectedGroup.channels.includes(subscription.url.substr(-11))"
+                        :checked="selectedGroup.channels.includes(subscription.url.substr(-24))"
                         @change="checkedChange(subscription)"
                     />
                 </div>
@@ -138,7 +138,7 @@ export default {
         filteredSubscriptions(_this) {
             return _this.selectedGroup.groupName == ""
                 ? _this.subscriptions
-                : _this.subscriptions.filter(channel => _this.selectedGroup.channels.includes(channel.url.substr(-11)));
+                : _this.subscriptions.filter(channel => _this.selectedGroup.channels.includes(channel.url.substr(-24)));
         },
     },
     mounted() {
@@ -157,28 +157,6 @@ export default {
         document.title = "Subscriptions - Piped";
     },
     methods: {
-        async fetchSubscriptions() {
-            if (this.authenticated) {
-                return await this.fetchJson(this.authApiUrl() + "/subscriptions", null, {
-                    headers: {
-                        Authorization: this.getAuthToken(),
-                    },
-                });
-            } else {
-                const channels = this.getUnauthenticatedChannels();
-                const split = channels.split(",");
-                if (split.length > 100) {
-                    return await this.fetchJson(this.authApiUrl() + "/subscriptions/unauthenticated", null, {
-                        method: "POST",
-                        body: JSON.stringify(split),
-                    });
-                } else {
-                    return await this.fetchJson(this.authApiUrl() + "/subscriptions/unauthenticated", {
-                        channels: this.getUnauthenticatedChannels(),
-                    });
-                }
-            }
-        },
         async loadChannelGroups() {
             const groups = await this.getChannelGroups();
             this.channelGroups.push(...groups);
@@ -254,7 +232,7 @@ export default {
             this.selectedGroup = this.channelGroups[0];
         },
         checkedChange(subscription) {
-            const channelId = subscription.url.substr(-11);
+            const channelId = subscription.url.substr(-24);
             this.selectedGroup.channels = this.selectedGroup.channels.includes(channelId)
                 ? this.selectedGroup.channels.filter(channel => channel != channelId)
                 : this.selectedGroup.channels.concat(channelId);

src/main.js

@@ -236,6 +236,28 @@ const mixin = {
             const localSubscriptions = this.getLocalSubscriptions() ?? [];
             return localSubscriptions.join(",");
         },
+        async fetchSubscriptions() {
+            if (this.authenticated) {
+                return await this.fetchJson(this.authApiUrl() + "/subscriptions", null, {
+                    headers: {
+                        Authorization: this.getAuthToken(),
+                    },
+                });
+            } else {
+                const channels = this.getUnauthenticatedChannels();
+                const split = channels.split(",");
+                if (split.length > 100) {
+                    return await this.fetchJson(this.authApiUrl() + "/subscriptions/unauthenticated", null, {
+                        method: "POST",
+                        body: JSON.stringify(split),
+                    });
+                } else {
+                    return await this.fetchJson(this.authApiUrl() + "/subscriptions/unauthenticated", {
+                        channels: this.getUnauthenticatedChannels(),
+                    });
+                }
+            }
+        },
         /* generate a temporary file and ask the user to download it */
         download(text, filename, mimeType) {
             var file = new Blob([text], { type: mimeType });