feat: support for importing and exporting channel groups

src/components/PlaylistsPage.vue

@@ -13,7 +13,7 @@
                 multiple="multiple"
                 @change="importPlaylists"
             />
-            <label v-t="'actions.import_from_json'" for="fileSelector" class="btn ml-2" />
+            <label v-t="'actions.import_from_json_csv'" for="fileSelector" class="btn ml-2" />
         </div>
     </div>
 

src/components/SubscriptionsPage.vue

@@ -2,11 +2,29 @@
     <h1 v-t="'titles.subscriptions'" class="my-4 text-center font-bold" />
     <!-- import / export section -->
     <div class="w-full flex justify-between">
-        <div class="flex">
+        <div class="flex gap-2">
-            <button class="btn mx-1">
+            <button class="btn">
-                <router-link v-t="'actions.import_from_json'" to="/import" />
+                <router-link v-t="'actions.import_from_json_csv'" to="/import" />
             </button>
             <button v-t="'actions.export_to_json'" class="btn" @click="exportHandler" />
+            <input
+                id="fileSelector"
+                ref="fileSelector"
+                type="file"
+                class="display-none"
+                multiple="multiple"
+                @change="importGroupsHandler"
+            />
+            <label
+                for="fileSelector"
+                class="btn"
+                v-text="`${$t('actions.import_from_json')} (${$t('titles.channel_groups')})`"
+            />
+            <button
+                class="btn"
+                @click="exportGroupsHandler"
+                v-text="`${$t('actions.export_to_json')} (${$t('titles.channel_groups')})`"
+            />
         </div>
         <!-- subscriptions count, only shown if there are any  -->
         <i18n-t v-if="subscriptions.length > 0" keypath="subscriptions.subscribed_channels_count">{{
@@ -231,6 +249,24 @@ export default {
                 : this.selectedGroup.channels.concat(channelId);
             this.createOrUpdateChannelGroup(this.selectedGroup);
         },
+        async importGroupsHandler() {
+            const files = this.$refs.fileSelector.files;
+            for (let file of files) {
+                const groups = JSON.parse(await file.text()).groups;
+                for (let group of groups) {
+                    this.createOrUpdateChannelGroup(group);
+                    this.channelGroups.push(group);
+                }
+            }
+        },
+        exportGroupsHandler() {
+            const json = {
+                format: "Piped",
+                version: 1,
+                groups: this.channelGroups.slice(1),
+            };
+            this.download(JSON.stringify(json), "channel_groups.json", "application/json");
+        },
     },
 };
 </script>

src/locales/en.json

@@ -69,7 +69,8 @@
         "yes": "Yes",
         "no": "No",
         "export_to_json": "Export to JSON",
-        "import_from_json": "Import from JSON/CSV",
+        "import_from_json": "Import from JSON",
+        "import_from_json_csv": "Import from JSON/CSV",
         "loop_this_video": "Loop this Video",
         "auto_play_next_video": "Auto Play next Video",
         "auto_display_captions": "Auto Display Captions",