takeout read

global.d.ts

@@ -0,0 +1,10 @@
+// declaring module will allow typescript to import the module
+declare module "csv-iter-parse" {
+  // typing module default export as `any` will allow you to access its members without compiler warning
+  type Apps = {
+    csv_async_iter: any;
+  };
+
+  const ts: Apps;
+  export = ts;
+}

package.json

@@ -18,9 +18,11 @@
     "@tsconfig/svelte": "5.0.0",
     "@types/chrome": "0.0.239",
     "@types/node": "^20.4.0",
+    "async-zip-reader": "^0.1.0",
     "autoprefixer": "^10.4.14",
     "axios": "^1.4.0",
     "copy-text-to-clipboard": "^3.1.0",
+    "csv-iter-parse": "^0.0.4",
     "daisyui": "^3.1.7",
     "detect-browser": "^5.3.0",
     "pino": "^8.14.1",

src/components/data/Zip_Reader.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+  import { PassthroughBlobProvider, ZipReader } from "async-zip-reader";
+  import { csv_async_iter } from "csv-iter-parse";
+
+  export let channelsIdsTakeoutSave: (channelIDs: string[]) => void;
+  let files: FileList;
+  let isLoading = false;
+  const subCsvPath =
+    "Takeout/YouTube and YouTube Music/subscriptions/subscriptions.csv";
+
+  async function handleFileSelect(file: File) {
+    const zip = await ZipReader.init(new PassthroughBlobProvider(file));
+    const zipEntry = zip.files.find((x) => x.path === subCsvPath);
+    if (zipEntry) {
+      const subscriptCSVFile = await zip.extract(zipEntry);
+      const channelIds: string[] = [];
+
+      let isFirstRow = true;
+      for await (let row of csv_async_iter(subscriptCSVFile.stream())) {
+        if (isFirstRow) {
+          isFirstRow = false;
+          continue;
+        }
+        const id = row[0];
+        if (id) channelIds.push("channel/" + id);
+      }
+      channelsIdsTakeoutSave(channelIds);
+    }
+  }
+
+  const fileCheck = async () => {
+    if (files && !isLoading) {
+      const file = files.item(0);
+      if (file) {
+        try {
+          isLoading = true;
+          await handleFileSelect(file);
+        } catch (error) {
+          console.log(error);
+        } finally {
+          isLoading = false;
+        }
+      }
+    }
+  };
+
+  $: {
+    console.log(files);
+
+    fileCheck();
+  }
+</script>
+
+<div class="space-y-2 m-1 p-1 form-control">
+  <div class="font-bold text-sm">Takeout import</div>
+  <div class="relative w-full h-full">
+    {#if isLoading}
+      <div
+        class="absolute w-full flex justify-center items-center backdrop-blur-sm h-full rounded"
+      >
+        <div class="loading" />
+      </div>
+    {/if}
+    <input
+      bind:files
+      name="Takeout"
+      class="file-input w-full file-input-sm"
+      type="file"
+    />
+  </div>
+</div>

src/components/pages/Home.svelte

@@ -19,6 +19,7 @@
   import copy from "copy-text-to-clipboard";
   import Timer from "../Timer.svelte";
   import { channelPathsSchema } from "src/utils/schema";
+  import ZipReader from "../data/Zip_Reader.svelte";
 
   let channelPaths: string[] = [];
   let xpathValues: XPathModel | undefined = undefined;
@@ -369,6 +370,23 @@
     });
   }
 
+  function channelsIdsTakeoutSave(channelIDs: string[]) {
+    const toastId = toast.loading("Saving...");
+    const l = channelsIdsParse(channelIDs);
+    if (l === undefined) {
+      toast.error("Save unsuccessful", {
+        id: toastId,
+      });
+      return;
+    }
+
+    channelPaths = l;
+    channelPathsWritable.set(l);
+    toast.success("Save successful", {
+      id: toastId,
+    });
+  }
+
   async function readySignalSend() {
     // Ready signal
     await runtime.send({
@@ -496,6 +514,7 @@
             >Save</button
           >
         </form>
+        <ZipReader {channelsIdsTakeoutSave} />
       </div>
     </div>
     <div>

tsconfig.json

@@ -25,7 +25,8 @@
     "src/**/*.ts",
     "src/**/*.js",
     "src/**/*.svelte",
-    "storage.ts"
+    "storage.ts",
+    "global.d.ts"
   ],
   "references": [{ "path": "./tsconfig.node.json" }]
 }