release: 1.0.0

Saebasol · Nov 5, 2021 · 501b831 · 501b831
1 parent 5c29f5d
commit 501b831
Show file tree

Hide file tree

Showing 7 changed files with 274 additions and 41 deletions.
diff --git a/manifest.json b/manifest.json
diff --git a/package.json b/package.json
@@ -10,8 +10,7 @@
     "@chakra-ui/react": "^1.6.12",
     "@emotion/react": "^11",
     "@emotion/styled": "^11",
-    "@types/chrome": "^0.0.162",
-    "framer-motion": "^4",
+    "framer-motion": "^5.2.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },
@@ -22,6 +21,7 @@
     "@snowpack/web-test-runner-plugin": "^0.2.2",
     "@testing-library/react": "^11.2.6",
     "@types/chai": "^4.2.17",
+    "@types/chrome": "^0.0.162",
     "@types/mocha": "^8.2.2",
     "@types/react": "^17.0.4",
     "@types/react-dom": "^17.0.3",

diff --git a/public/manifest.json b/public/manifest.json
@@ -0,0 +1,17 @@
+{
+    "name": "Hitomi Downloader extension",
+    "description": "Download directly from the web!",
+    "version": "1.0.0",
+    "manifest_version": 3,
+    "action": {
+        "default_popup": "index.html"
+    },
+    "host_permissions": [
+        "http://*/*",
+        "https://*/*"
+    ],
+    "permissions": [
+        "tabs",
+        "cookies"
+    ]
+}
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,13 +1,234 @@
 import React, { useState, useEffect } from 'react';
-import { Text } from '@chakra-ui/layout';
+import {
+  Heading,
+  Flex,
+  Spinner,
+  Text,
+  Center,
+  Container,
+  Button,
+  Link,
+  Alert,
+  AlertIcon,
+  useToast,
+} from '@chakra-ui/react';
 
+const api = 'http://localhost:6009';
+
+const Loading = ({ text = '' }: { text: string }) => {
+  return (
+    <Flex justify="center" align="center" direction="column" height="100%">
+      <Spinner margin="5px" />
+      <Text size="16px">{text}</Text>
+    </Flex>
+  );
+};
+
+const CompatMode = () => {
+  return (
+    <>
+      <Alert status="warning" margin="0px">
+        <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);
+            });
+          }}
+        >
+          Download currunt page
+        </Button>
+      </Flex>
+    </>
+  );
+};
+
+const ExtendMode = () => {
+  const toast = useToast();
+
+  const [valid, setValid] = useState(false);
+  const [url, setUrl] = useState('');
+  const [type, setType] = useState('');
+
+  const [downloadRequesting, setDownloadRequesting] = useState(false);
+  const [cookieRequesting, setCookieRequesting] = useState(false);
+
+  const fetchHitomiDownloaderValidUrl = async () => {
+    chrome.tabs.query({ active: true, currentWindow: true }, async (tabs) => {
+      const response = await fetch(api + '/valid_url', {
+        method: 'POST',
+        body: JSON.stringify({ gal_num: tabs[0].url }),
+      });
+      if (response.status === 200) {
+        const data = await response.json();
+        if (tabs[0].url) {
+          setUrl(tabs[0].url);
+          setType(data['type'][0]);
+          setValid(true);
+        }
+      }
+    });
+  };
+
+  const requestHitomiDownloaderdownload = async () => {
+    setDownloadRequesting(true);
+    const response = await fetch(api + '/download', {
+      method: 'POST',
+      body: JSON.stringify({ gal_num: url }),
+    });
+    if (response.status === 200) {
+      setDownloadRequesting(false);
+      toast({
+        title: 'Download has been requested!',
+        status: 'success',
+        duration: 3000,
+        isClosable: true,
+      });
+    }
+  };
+
+  const updateHitomiDownloaderCookies = async () => {
+    setCookieRequesting(true);
+    chrome.cookies.getAll({ url: url }, async (cookies) => {
+      const parsed: object[] = [];
+      cookies.forEach((cookie) => {
+        parsed.push({
+          domain: cookie.domain,
+          expires: cookie.expirationDate,
+          name: cookie.name,
+          value: cookie.value,
+          path: cookie.path,
+        });
+      });
+      const response = await fetch(api + '/cookie', {
+        method: 'POST',
+        body: JSON.stringify({ cookies: parsed }),
+      });
+
+      if (response.status === 200) {
+        setCookieRequesting(false);
+        toast({
+          title: 'Cookies have been updated!',
+          status: 'success',
+          duration: 3000,
+          isClosable: true,
+        });
+      } else {
+        setCookieRequesting(false);
+        toast({
+          title: 'Failed to update cookies!',
+          status: 'error',
+          duration: 3000,
+          isClosable: true,
+        });
+      }
+    });
+  };
+
+  useEffect(() => {
+    fetchHitomiDownloaderValidUrl();
+  }, []);
+
+  return (
+    <>
+      {valid ? (
+        <Alert status="success">
+          <AlertIcon />
+          <Heading size="md">You can download {type}</Heading>
+        </Alert>
+      ) : (
+        <Alert status="error">
+          <AlertIcon />
+          <Heading size="md">Invalid URL</Heading>
+        </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"
+        >
+          Load (Update) cookies
+        </Button>
+      </Flex>
+    </>
+  );
+};
 
 const App = () => {
+  const [checking, setCheking] = useState(true);
+  const [scriptLoaded, setScriptLoaded] = useState(false);
+  const fetchHitomiDownloaderScriptWasLoaded = async () => {
+    setCheking(true);
+    try {
+      await fetch(api + '/ping');
+    } catch {
+      setCheking(false);
+      setScriptLoaded(false);
+      return;
+    }
+    setCheking(false);
+    setScriptLoaded(true);
+  };
+  useEffect(() => {
+    fetchHitomiDownloaderScriptWasLoaded();
+  }, []);
   return (
-    <div>
-      any
-    </div>
-  )
-}
+    <>
+      <Container height="400px" width="500px" padding="0px">
+        <Center>
+          <Heading size="lg" margin="10px">
+            Hitomi Downloader extension
+          </Heading>
+        </Center>
+        {checking ? (
+          <Loading text="Cheking script is loaded..." />
+        ) : scriptLoaded ? (
+          <ExtendMode />
+        ) : (
+          <CompatMode />
+        )}
+        {scriptLoaded ? null : (
+          <Button
+            margin="10px"
+            onClick={() => {
+              fetchHitomiDownloaderScriptWasLoaded();
+            }}
+          >
+            Reload
+          </Button>
+        )}
+      </Container>
+    </>
+  );
+};
 
 export default App;
diff --git a/src/index.tsx b/src/index.tsx
@@ -6,9 +6,9 @@ import theme from './theme';
 
 ReactDOM.render(
   <React.StrictMode>
-     <ChakraProvider theme={theme}>
-        <App />
-      </ChakraProvider>
+    <ChakraProvider theme={theme}>
+      <App />
+    </ChakraProvider>
   </React.StrictMode>,
   document.getElementById('root'),
 );

diff --git a/src/theme.tsx b/src/theme.tsx
@@ -8,4 +8,4 @@ const theme = extendTheme({
   initialColorMode: 'dark',
 });
 
-export default theme;
+export default theme;
diff --git a/yarn.lock b/yarn.lock
@@ -3020,15 +3020,15 @@ form-data@~2.3.2:
     combined-stream "^1.0.6"
     mime-types "^2.1.12"
 
-framer-motion@^4:
-  version "4.1.17"
-  resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-4.1.17.tgz#4029469252a62ea599902e5a92b537120cc89721"
-  integrity sha512-thx1wvKzblzbs0XaK2X0G1JuwIdARcoNOW7VVwjO8BUltzXPyONGAElLu6CiCScsOQRI7FIk/45YTFtJw5Yozw==
+framer-motion@^5.2.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-5.2.1.tgz#5cfa59984649d73e3741d7bf189918f34fd3635e"
+  integrity sha512-igeMZaa0FnaB4NkCE+/ENGSuSvhRhUVFJCwWg/FGQn+CwnLPI/XjO6Zim8m+pN+4wBNlaesBRpqOQbq/VH7mew==
   dependencies:
-    framesync "5.3.0"
+    framesync "6.0.1"
     hey-listen "^1.0.8"
-    popmotion "9.3.6"
-    style-value-types "4.1.4"
+    popmotion "11.0.0"
+    style-value-types "5.0.0"
     tslib "^2.1.0"
   optionalDependencies:
     "@emotion/is-prop-valid" "^0.8.2"
@@ -3040,6 +3040,13 @@ [email protected]:
   dependencies:
     tslib "^2.1.0"
 
+[email protected], framesync@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/framesync/-/framesync-6.0.1.tgz#5e32fc01f1c42b39c654c35b16440e07a25d6f20"
+  integrity sha512-fUY88kXvGiIItgNC7wcTOl0SNRCVXMKSWW2Yzfmn7EKNc+MpCzcz9DhdHcdjbrtN3c6R4H5dTY2jiCpPdysEjA==
+  dependencies:
+    tslib "^2.1.0"
+
 fresh@~0.5.2:
   version "0.5.2"
   resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.2.tgz#3d8cadd90d976569fa835ab1f8e4b23a105605a7"
@@ -4503,14 +4510,14 @@ [email protected], pkg-dir@^4.1.0:
   dependencies:
     find-up "^4.0.0"
 
-popmotion@9.3.6:
-  version "9.3.6"
-  resolved "https://registry.yarnpkg.com/popmotion/-/popmotion-9.3.6.tgz#b5236fa28f242aff3871b9e23721f093133248d1"
-  integrity sha512-ZTbXiu6zIggXzIliMi8LGxXBF5ST+wkpXGEjeTUDUOCdSQ356hij/xjeUdv0F8zCQNeqB1+PR5/BB+gC+QLAPw==
+popmotion@11.0.0:
+  version "11.0.0"
+  resolved "https://registry.yarnpkg.com/popmotion/-/popmotion-11.0.0.tgz#910e2e7077d9aeba520db8744d40bb5354992212"
+  integrity sha512-kJDyaG00TtcANP5JZ51od+DCqopxBm2a/Txh3Usu23L9qntjY5wumvcVf578N8qXEHR1a+jx9XCv8zOntdYalQ==
   dependencies:
-    framesync "5.3.0"
+    framesync "^6.0.1"
     hey-listen "^1.0.8"
-    style-value-types "4.1.4"
+    style-value-types "5.0.0"
     tslib "^2.1.0"
 
 portfinder@^1.0.28:
@@ -5286,10 +5293,10 @@ strip-final-newline@^2.0.0:
   resolved "https://registry.yarnpkg.com/strip-final-newline/-/strip-final-newline-2.0.0.tgz#89b852fb2fcbe936f6f4b3187afb0a12c1ab58ad"
   integrity sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==
 
-style-value-types@4.1.4:
-  version "4.1.4"
-  resolved "https://registry.yarnpkg.com/style-value-types/-/style-value-types-4.1.4.tgz#80f37cb4fb024d6394087403dfb275e8bb627e75"
-  integrity sha512-LCJL6tB+vPSUoxgUBt9juXIlNJHtBMy8jkXzUJSBzeHWdBu6lhzHqCvLVkXFGsFIlNa2ln1sQHya/gzaFmB2Lg==
+style-value-types@5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/style-value-types/-/style-value-types-5.0.0.tgz#76c35f0e579843d523187989da866729411fc8ad"
+  integrity sha512-08yq36Ikn4kx4YU6RD7jWEv27v4V+PUsOGa4n/as8Et3CuODMJQ00ENeAVXAeydX4Z2j1XHZF1K2sX4mGl18fA==
   dependencies:
     hey-listen "^1.0.8"
     tslib "^2.1.0"