fix: subscription groups use invalid channel id length

TeamPiped · Jan 12, 2024 · bf7387a · bf7387a
1 parent 5cbd541
commit bf7387a
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 28 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -36,8 +36,8 @@ export default {
         });
 
         if ("indexedDB" in window) {
-            const request = indexedDB.open("piped-db", 5);
-            request.onupgradeneeded = ev => {
+            const request = indexedDB.open("piped-db", 6);
+            request.onupgradeneeded = async ev => {
                 const db = request.result;
                 console.log("Upgrading object store.");
                 if (!db.objectStoreNames.contains("watch_history")) {
@@ -64,6 +64,21 @@ 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
+                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;

diff --git a/src/components/ChannelPage.vue b/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>
 

diff --git a/src/components/SubscriptionsPage.vue b/src/components/SubscriptionsPage.vue
@@ -107,7 +107,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>
@@ -140,7 +140,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() {
@@ -159,28 +159,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);
@@ -256,7 +234,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);

diff --git a/src/main.js b/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 });