Release 1.1.0 (#1)

* refactor(app): now support formula http api * feat(app): add version checking * release: bump up 1.0.0 to 1.1.0
Saebasol · Nov 14, 2021 · 4e535f8 · 4e535f8
1 parent 2c4c22f
commit 4e535f8
Show file tree

Hide file tree

Showing 2 changed files with 165 additions and 77 deletions.
diff --git a/public/manifest.json b/public/manifest.json
@@ -1,7 +1,7 @@
 {
     "name": "Hitomi Downloader extension",
     "description": "Download directly from the web!",
-    "version": "1.0.0",
+    "version": "1.1.0",
     "manifest_version": 3,
     "action": {
         "default_popup": "index.html"

diff --git a/src/App.tsx b/src/App.tsx
@@ -7,13 +7,43 @@ import {
   Center,
   Container,
   Button,
-  Link,
   Alert,
   AlertIcon,
   useToast,
+  Link,
 } from '@chakra-ui/react';
 
-const api = 'http://localhost:6009';
+const api = 'http://localhost:6975';
+
+const Footer = () => {
+  return (
+    <Flex
+      as="footer"
+      align="center"
+      justify="space-between"
+      bg="blackAlpha.300"
+      color="white"
+      p={6}
+    >
+      <Text fontSize="sm">
+        Made with{' '}
+        <span role="img" aria-label="love">
+          💖
+        </span>{' '}
+        by SaidBySolo
+      </Text>
+      <Text fontSize="sm">
+        <a
+          href="https://github.com/Hitomi-Downloader-extension/chrome-extension"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Github
+        </a>
+      </Text>
+    </Flex>
+  );
+};
 
 const Loading = ({ text = '' }: { text: string }) => {
   return (
@@ -24,45 +54,57 @@ const Loading = ({ text = '' }: { text: string }) => {
   );
 };
 
-const CompatMode = () => {
+const CompatMode = ({ checkFunc }: { checkFunc: () => Promise<void> }) => {
   return (
     <>
-      <Alert status="warning" margin="0px">
+      <Alert status="warning">
         <AlertIcon />
         Couldn't connect with Hitomi Downloader :(
       </Alert>
-      <Flex justify="center" align="center" direction="column" height="100%">
-        <Text fontSize="md">But that's ok. I'll use compatibility mode.</Text>
-        <Text fontSize="sm">
-          Please{' '}
-          <Link
-            color="teal.500"
-            onClick={() =>
-              window.open(
-                'https://github.com/Hitomi-Downloader-extension/api/releases',
-              )
-            }
-          >
-            apply this extension
-          </Link>{' '}
-          for a better experience.
-        </Text>
-        <Button
-          margin="5px"
-          onClick={() => {
-            chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
-              window.open('hitomi://' + tabs[0].url);
-            });
-          }}
+      <Flex direction="column" height="100%">
+        <Flex
+          justify="center"
+          align="center"
+          flexDirection="column"
+          height="400px"
         >
-          Download currunt page
-        </Button>
+          <Text fontSize="md">But that's ok. I'll use compatibility mode.</Text>
+          <Text fontSize="sm">
+            Please turn on HTTP API for a better experience.
+          </Text>
+          <Text fontSize="sm">
+            ( Options -{'>'} Preferences -{'>'} Advanced -{'>'} HTTP API )
+          </Text>
+          <Button
+            margin="5px"
+            onClick={() => {
+              chrome.tabs.query(
+                { active: true, currentWindow: true },
+                (tabs) => {
+                  window.open('hitomi://' + tabs[0].url);
+                },
+              );
+            }}
+          >
+            Download currunt page
+          </Button>
+        </Flex>
+        <Flex>
+          <Button
+            margin="10px"
+            onClick={() => {
+              checkFunc();
+            }}
+          >
+            Reload
+          </Button>
+        </Flex>
       </Flex>
     </>
   );
 };
 
-const ExtendMode = () => {
+const ExtendMode = ({ version }: { version: string }) => {
   const toast = useToast();
 
   const [valid, setValid] = useState(false);
@@ -74,26 +116,29 @@ const ExtendMode = () => {
 
   const fetchHitomiDownloaderValidUrl = async () => {
     chrome.tabs.query({ active: true, currentWindow: true }, async (tabs) => {
-      const response = await fetch(api + '/valid_url', {
+      const response = await fetch(api + '/types', {
         method: 'POST',
-        body: JSON.stringify({ gal_num: tabs[0].url }),
+        body: JSON.stringify({ input: tabs[0].url }),
       });
       if (response.status === 200) {
         const data = await response.json();
         if (tabs[0].url) {
+          if (data['types'].length === 0) {
+            return setValid(false);
+          }
           setUrl(tabs[0].url);
-          setType(data['type'][0]);
+          setType(data['types'][0]);
           setValid(true);
         }
       }
     });
   };
 
-  const requestHitomiDownloaderdownload = async () => {
+  const requestHitomiDownloaderDownload = async () => {
     setDownloadRequesting(true);
     const response = await fetch(api + '/download', {
       method: 'POST',
-      body: JSON.stringify({ gal_num: url }),
+      body: JSON.stringify({ input: url }),
     });
     if (response.status === 200) {
       setDownloadRequesting(false);
@@ -119,7 +164,7 @@ const ExtendMode = () => {
           path: cookie.path,
         });
       });
-      const response = await fetch(api + '/cookie', {
+      const response = await fetch(api + '/update_cookies', {
         method: 'POST',
         body: JSON.stringify({ cookies: parsed }),
       });
@@ -140,6 +185,8 @@ const ExtendMode = () => {
           duration: 3000,
           isClosable: true,
         });
+        console.log(`err: ${response.status}`);
+        console.log(`resp: ${response.text()}`);
       }
     });
   };
@@ -153,79 +200,120 @@ const ExtendMode = () => {
       {valid ? (
         <Alert status="success">
           <AlertIcon />
-          <Heading size="md">You can download {type}</Heading>
+          You can download {type}
         </Alert>
       ) : (
         <Alert status="error">
           <AlertIcon />
-          <Heading size="md">Invalid URL</Heading>
+          Invalid URL
         </Alert>
       )}
-      <Flex justify="center" align="center" direction="column" height="100%">
-        <Button
-          isLoading={!!downloadRequesting}
-          isDisabled={!url}
-          onClick={() => requestHitomiDownloaderdownload()}
-          margin="5px"
-        >
-          Download currunt page
-        </Button>
-        <Button
-          isLoading={!!cookieRequesting}
-          isDisabled={!url}
-          onClick={() => updateHitomiDownloaderCookies()}
-          margin="5px"
+      <Flex direction="column" height="100%">
+        <Flex
+          flexDirection="column"
+          justifyContent="center"
+          align="center"
+          height="400px"
         >
-          Load (Update) cookies
-        </Button>
+          <Button
+            isLoading={!!downloadRequesting}
+            isDisabled={!url}
+            onClick={() => requestHitomiDownloaderDownload()}
+            margin="5px"
+          >
+            Download currunt page
+          </Button>
+          <Button
+            isLoading={!!cookieRequesting}
+            isDisabled={!url}
+            onClick={() => updateHitomiDownloaderCookies()}
+            margin="5px"
+          >
+            Load (Update) cookies
+          </Button>
+        </Flex>
+        {/* <Flex margin="5px">Hitomi Downloader Version: {version}</Flex> */}
       </Flex>
     </>
   );
 };
 
 const App = () => {
   const [checking, setCheking] = useState(true);
-  const [scriptLoaded, setScriptLoaded] = useState(false);
-  const fetchHitomiDownloaderScriptWasLoaded = async () => {
+  const [isEnabled, setIsEnabled] = useState(false);
+  const [extensionVersion, setextensionChecking] = useState('');
+  const [version, setVersion] = useState('');
+
+  const checkExtensionNewVersion = async () => {
+    const response = await fetch(
+      'https://api.github.com/repos/Hitomi-Downloader-extension/chrome-extension/releases',
+    );
+    const data = await response.json();
+    if (data[0].tag_name != chrome.runtime.getManifest().version) {
+      setextensionChecking(data[0].tag_name);
+      return;
+    }
+  };
+
+  const checkHitomiDownloaderHTTPAPIIsEnabled = async () => {
     setCheking(true);
     try {
-      await fetch(api + '/ping');
+      const response = await fetch(api + '/version');
+      if (response.status === 200) {
+        setCheking(false);
+        setIsEnabled(true);
+        setVersion((await response.json())['version']);
+        console.log(`Hitomi Downloader version: ${version}`);
+        return;
+      }
     } catch {
       setCheking(false);
-      setScriptLoaded(false);
+      setIsEnabled(false);
       return;
     }
     setCheking(false);
-    setScriptLoaded(true);
+    setIsEnabled(false);
+    return;
   };
   useEffect(() => {
-    fetchHitomiDownloaderScriptWasLoaded();
+    console.log(`version: ${chrome.runtime.getManifest().version}`);
+    checkHitomiDownloaderHTTPAPIIsEnabled();
+    checkExtensionNewVersion();
   }, []);
   return (
     <>
-      <Container height="400px" width="500px" padding="0px">
-        <Center>
+      <Container height="400px" width="500px" padding="0px" maxHeight="100vh">
+        <Center as="header">
           <Heading size="lg" margin="10px">
             Hitomi Downloader extension
           </Heading>
         </Center>
+        {extensionVersion !== '' ? (
+          <Alert status="warning" margin={0}>
+            <AlertIcon />
+            <Text>
+              New version released!{' '}
+              <Link
+                color="teal.500"
+                onClick={() =>
+                  window.open(
+                    `https://github.com/Hitomi-Downloader-extension/chrome-extension/releases/tag/${extensionVersion}`,
+                  )
+                }
+              >
+                Download {extensionVersion}
+              </Link>
+            </Text>
+          </Alert>
+        ) : null}
         {checking ? (
-          <Loading text="Cheking script is loaded..." />
-        ) : scriptLoaded ? (
-          <ExtendMode />
+          <Loading text="Checking HTTP API was enabled..." />
+        ) : isEnabled ? (
+          <ExtendMode version={version} />
         ) : (
-          <CompatMode />
-        )}
-        {scriptLoaded ? null : (
-          <Button
-            margin="10px"
-            onClick={() => {
-              fetchHitomiDownloaderScriptWasLoaded();
-            }}
-          >
-            Reload
-          </Button>
+          <CompatMode checkFunc={checkHitomiDownloaderHTTPAPIIsEnabled} />
         )}
+        <Footer />
       </Container>
     </>
   );