More updates

manifest.ts

@@ -15,10 +15,10 @@ const manifest: chrome.runtime.ManifestV3 = {
   action: {
     default_title: "Grateful Grabber",
     default_popup: "src/pages/popup/index.html",
-    default_icon: "icon-34.png",
+    default_icon: "stealie-128.png",
   },
   icons: {
-    "128": "icon-128.png",
+    "128": "stealie-128.png",
   },
   content_scripts: [
     {
@@ -34,8 +34,10 @@ const manifest: chrome.runtime.ManifestV3 = {
       resources: [
         "assets/js/*.js",
         "assets/css/*.css",
-        "icon-128.png",
-        "icon-34.png",
+        // TODO Needed?
+        // "stealie-16.png",
+        // "stealie-48.png",
+        "stealie-128.png",
       ],
       matches: ["*://*/*"],
     },

package.json

@@ -24,12 +24,11 @@
   },
   "devDependencies": {
     "@rollup/plugin-typescript": "^8.5.0",
-    "@testing-library/react": "14.0.0",
     "@types/chrome": "0.0.224",
     "@types/jest": "29.0.3",
     "@types/lodash-es": "^4.17.8",
     "@types/node": "20.2.5",
-    "@types/react": "18.0.21",
+    "@types/react": "18.2.46",
     "@types/react-dom": "18.0.11",
     "@types/ws": "^8.5.4",
     "@typescript-eslint/eslint-plugin": "5.59.11",

src/pages/content/components/app.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { FC, useEffect, useState } from "react";
 import {
   ArchiveFile,
   MP3Url,
@@ -38,22 +38,11 @@ const getShowTitle = (show: ArchiveShow) => {
   return show.metadata.date[0];
 };
 
-const createZip = (show: ArchiveShow) => {
+const createZip = async (show: ArchiveShow) => {
   const fileStream = streamSaver.createWriteStream(`${getShowTitle(show)}.zip`);
   const mp3s = getMP3Urls(show);
 
   const readableZipStream = new ZIP({
-    // start(ctrl) {
-    //   // console.log(ctrl);
-    //   // ctrl.enqueue(file1);
-    //   // ctrl.enqueue(file2);
-    //   // ctrl.enqueue(file3);
-    //   // ctrl.enqueue({
-    //   //   name: "streamsaver-zip-example/empty folder",
-    //   //   directory: true,
-    //   // });
-    //   // ctrl.close()
-    // },
     async pull(ctrl) {
       // Gets executed everytime zip.js asks for more data
       const infoFile = await fetch(getInfoFileUrl(show));
@@ -80,11 +69,6 @@ const createZip = (show: ArchiveShow) => {
 
 export default function App() {
   const [archiveShow, setArchiveShow] = useState<ArchiveShow>();
-  const [loading, setLoading] = useState(false);
-
-  const downloadShow = (show: ArchiveShow) => {
-    createZip(show);
-  };
 
   useEffect(() => {
     fetch(window.location.href + "&output=json")
@@ -102,15 +86,45 @@ export default function App() {
         <div
           style={{
             display: "flex",
-            justifyContent: "space-between",
+            justifyContent: "space-around",
           }}
         >
-          <h3>Grateful Grabber</h3>
-          <button className="button" onClick={() => downloadShow(archiveShow)}>
-            Download Show
-          </button>
+          <div
+            style={{
+              display: "flex",
+              flexDirection: "column",
+              gap: "1rem",
+              alignItems: "center",
+            }}
+          >
+            <h3>Grateful Grabber</h3>
+            <DownloadButton show={archiveShow} />
+          </div>
         </div>
       </div>
     </div>
   );
 }
+
+const DownloadButton: FC<{ show: ArchiveShow }> = ({ show }) => {
+  const [loading, setLoading] = useState(false);
+
+  const downloadShow = async (archiveShow: ArchiveShow) => {
+    setLoading(true);
+    await createZip(archiveShow);
+    setLoading(false);
+  };
+
+  return (
+    <button
+      onClick={() => downloadShow(show)}
+      style={{
+        borderRadius: "1rem",
+        fontSize: "2rem",
+      }}
+      disabled={loading}
+    >
+      Download Show
+    </button>
+  );
+};

src/pages/popup/Popup.css

@@ -1,24 +1,12 @@
 .App {
   position: absolute;
-  top: 0px;
-  bottom: 0px;
-  left: 0px;
-  right: 0px;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
   text-align: center;
   height: 100%;
-  padding: 10px;
-  background-color: #282c34;
-}
-
-.App-logo {
-  height: 30vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
+  padding: 1rem;
 }
 
 .App-header {
@@ -27,19 +15,4 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
 }

src/pages/popup/Popup.tsx

@@ -1,29 +1,43 @@
-import React from "react";
-import logo from "@assets/img/logo.svg";
+import React, { FC } from "react";
 import "@pages/popup/Popup.css";
 
 // TODO Simple button to download show here
-// TODO Link to github
-// TODO Message of thanks
-const Popup = () => {
+export const Popup: FC = () => {
   return (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
+      <header
+        className="App-header"
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          gap: "1rem",
+        }}
+      >
+        <span>Thanks for using grateful grabber!</span>
+        <span>
+          If you would like to show support financially, please consider
+          donating to an organization that is doing good work such as&nbsp;
+          <a target="_blank" href="https://archive.org/donate" rel="noreferrer">
+            Archive.org
+          </a>
+          <span> or </span>
+          <a
+            target="_blank"
+            rel="noreferrer"
+            href="https://www.waterwheelfoundation.org/donate/"
+          >
+            Waterwheel Foundation
+          </a>
+        </span>
+
         <p>
-          Edit <code>src/pages/popup/Popup.tsx</code> and save to reload.
+          Grateful Grabber is&nbsp;
+          <a href="https://github.com/chrisbendel/grateful-grabber/blob/main/LICENSE">
+            open source.
+          </a>
+          <p>If you would like to contribute, please feel free!</p>
         </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React!
-        </a>
       </header>
     </div>
   );
 };
-
-export default Popup;

src/pages/popup/index.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { createRoot } from "react-dom/client";
 import "@pages/popup/index.css";
-import Popup from "@pages/popup/Popup";
+import { Popup } from "@pages/popup/Popup";
 import refreshOnUpdate from "virtual:reload-on-update-in-view";
 
 refreshOnUpdate("pages/popup");

tsconfig.json

@@ -15,7 +15,7 @@
     "allowSyntheticDefaultImports": true,
     "lib": ["dom", "dom.iterable", "esnext"],
     "forceConsistentCasingInFileNames": true,
-    "typeRoots": ["./src/global.d.ts"],
+    "typeRoots": ["./src/global.d.ts", "./node_modules", "node_modules/@types"],
     "paths": {
       "@src/*": ["src/*"],
       "@assets/*": ["src/assets/*"],