diff --git a/.babelrc b/.babelrc index dbf8ad2..a4c8777 100644 --- a/.babelrc +++ b/.babelrc @@ -22,8 +22,7 @@ ], "@babel/plugin-proposal-class-properties", "@babel/plugin-proposal-object-rest-spread", - "@babel/plugin-proposal-optional-chaining", - "babel-plugin-styled-components" + "@babel/plugin-proposal-optional-chaining" ], "ignore": [ "src/components", diff --git a/public/css/index.css b/public/css/index.css index 1bd2895..30cf536 100644 --- a/public/css/index.css +++ b/public/css/index.css @@ -6,4 +6,9 @@ html, body { html { width: 100vw; height: 100vh; +} + +#root { + width: 100%; + height: 100%; } \ No newline at end of file diff --git a/src/LoadingView.tsx b/src/LoadingView.tsx index 39bce53..03c2519 100644 --- a/src/LoadingView.tsx +++ b/src/LoadingView.tsx @@ -1,44 +1,37 @@ -import styled, { keyframes } from 'styled-components' +import { CSSProperties } from 'react' const LoadingView = () => { return ( - - - - - +
+
+
Loading
+
+
); } -const spin = keyframes` - from { transform: rotate(0deg); } - to { transform: rotate(360deg); } -`; - -const LoadingWrapper = styled.div` - width: 100%; - height: 100%; - display: flex; - align-items: center; - justify-content: center; -`; +const LoadingWrapper: CSSProperties = { + width: "100%", + height: "100%", + display: "flex", + alignItems: "center", + justifyContent: "center" +} -const Wrapper = styled.div` - position: relative; - width: 100%; - height: 30px; - margin: 30px 0; - text-align: center; -`; +const Wrapper: CSSProperties = { + width: "100%", + height: "30px", + margin: "30px 0px", + textAlign: "center" +} -const Content = styled.div` - display: inline-block; - width: 30px; - height: 30px; - border: 3px solid #ebf1ff; - border-radius: 50%; - border-top-color: #3972ff; - animation: ${spin} 1s ease-in-out infinite; -`; +const Content: CSSProperties = { + display: "inline-block", + width: "auto", + height: "24px", + color: "#3972ff", + padding: "0 8px", + borderBottom: "3px solid #3972ff" +} export default LoadingView \ No newline at end of file diff --git a/src/index.tsx b/src/index.tsx index 53fc75a..f785cf2 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -5,7 +5,7 @@ import { ViewerRef } from 'types' const App = () => { - const EPUB_URL = "files/Alices Adventures in Wonderland.epub"; + const EPUB_URL = "/react-epub-viewer/files/Alices Adventures in Wonderland.epub"; const ref = useRef(null); return ( diff --git a/src/lib/utils/commonUtil.ts b/src/lib/utils/commonUtil.ts index be8c1de..9a7daa1 100644 --- a/src/lib/utils/commonUtil.ts +++ b/src/lib/utils/commonUtil.ts @@ -198,4 +198,22 @@ export const getSelectionPosition = ( height: selectionHeight, width: selectionWidth }; +} + +/** + * Debounce + * @param func Target function + * @param timeout delay + */ +export function debounce( + timeout: number, + func: (...args: Params) => any, +): (...args: Params) => void { + let timer: NodeJS.Timeout + return (...args: Params) => { + clearTimeout(timer) + timer = setTimeout(() => { + func(...args) + }, timeout) + } } \ No newline at end of file diff --git a/src/modules/reactViewer/ReactViewer.tsx b/src/modules/reactViewer/ReactViewer.tsx index bd175c8..3daac52 100644 --- a/src/modules/reactViewer/ReactViewer.tsx +++ b/src/modules/reactViewer/ReactViewer.tsx @@ -1,12 +1,11 @@ import React, { useState, useEffect, useRef, useCallback, useMemo } from "react" import { Book, Rendition, Contents } from "epubjs" -import { debounce } from "throttle-debounce" // modules import EpubViewer from "modules/epubViewer/EpubViewer" // components import LoadingView from 'LoadingView' // utils -import { timeFormatter } from 'lib/utils/commonUtil' +import { debounce, timeFormatter } from 'lib/utils/commonUtil' // styles import viewerDefaultStyles from 'modules/reactViewer/viewerStyle' // types diff --git a/yarn.lock b/yarn.lock index 2b5045a..53ba3f6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1270,7 +1270,7 @@ dependencies: regenerator-runtime "^0.13.4" -"@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.5", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2": +"@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2": version "7.13.10" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.13.10.tgz#47d42a57b6095f4468da440388fdbad8bebf0d7d" integrity sha512-4QPkjJq6Ns3V/RgpEahRk+AGfL0eO6RHHtTWoNNr5mO49G6B5+X6d6THgWEAvTrznU5xYpbAlVKRYcsCgh/Akw== @@ -1670,16 +1670,6 @@ schema-utils "^2.6.5" source-map "^0.7.3" -"@reduxjs/toolkit@^1.5.1": - version "1.5.1" - resolved "https://registry.yarnpkg.com/@reduxjs/toolkit/-/toolkit-1.5.1.tgz#05daa2f6eebc70dc18cd98a90421fab7fa565dc5" - integrity sha512-PngZKuwVZsd+mimnmhiOQzoD0FiMjqVks6ituO1//Ft5UEX5Ca9of13NEjo//pU22Jk7z/mdXVsmDfgsig1osA== - dependencies: - immer "^8.0.1" - redux "^4.0.0" - redux-thunk "^2.3.0" - reselect "^4.0.0" - "@rollup/plugin-node-resolve@^7.1.1": version "7.1.3" resolved "https://registry.yarnpkg.com/@rollup/plugin-node-resolve/-/plugin-node-resolve-7.1.3.tgz#80de384edfbd7bfc9101164910f86078151a3eca" @@ -1957,7 +1947,7 @@ dependencies: "@types/node" "*" -"@types/hoist-non-react-statics@*", "@types/hoist-non-react-statics@^3.3.0": +"@types/hoist-non-react-statics@*": version "3.3.1" resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f" integrity sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA== @@ -2066,16 +2056,6 @@ dependencies: "@types/react" "*" -"@types/react-redux@^7.1.16": - version "7.1.16" - resolved "https://registry.yarnpkg.com/@types/react-redux/-/react-redux-7.1.16.tgz#0fbd04c2500c12105494c83d4a3e45c084e3cb21" - integrity sha512-f/FKzIrZwZk7YEO9E1yoxIuDNRiDducxkFlkw/GNMGEnK9n4K8wJzlJBghpSuOVDgEUHoDkDF7Gi9lHNQR4siw== - dependencies: - "@types/hoist-non-react-statics" "^3.3.0" - "@types/react" "*" - hoist-non-react-statics "^3.3.0" - redux "^4.0.0" - "@types/react@*", "@types/react@^17.0.0": version "17.0.3" resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.3.tgz#ba6e215368501ac3826951eef2904574c262cc79" @@ -2128,11 +2108,6 @@ dependencies: "@types/jest" "*" -"@types/throttle-debounce@^2.1.0": - version "2.1.0" - resolved "https://registry.yarnpkg.com/@types/throttle-debounce/-/throttle-debounce-2.1.0.tgz#1c3df624bfc4b62f992d3012b84c56d41eab3776" - integrity sha512-5eQEtSCoESnh2FsiLTxE121IiE60hnMqcb435fShf4bpLRjEu1Eoekht23y6zXS9Ts3l+Szu3TARnTsA0GkOkQ== - "@types/uglify-js@*": version "3.13.0" resolved "https://registry.yarnpkg.com/@types/uglify-js/-/uglify-js-3.13.0.tgz#1cad8df1fb0b143c5aba08de5712ea9d1ff71124" @@ -2955,7 +2930,7 @@ babel-plugin-polyfill-regenerator@^0.1.2: dependencies: "@babel/helper-define-polyfill-provider" "^0.1.5" -"babel-plugin-styled-components@>= 1.12.0", babel-plugin-styled-components@^1.12.0: +"babel-plugin-styled-components@>= 1.12.0": version "1.12.0" resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-1.12.0.tgz#1dec1676512177de6b827211e9eda5a30db4f9b9" integrity sha512-FEiD7l5ZABdJPpLssKXjBUJMYqzbcNzBowfXDCdJhOpbhWiewapUaY+LZGT8R4Jg2TwOjGjG4RKeyrO5p9sBkA== @@ -5838,7 +5813,7 @@ hmac-drbg@^1.0.1: minimalistic-assert "^1.0.0" minimalistic-crypto-utils "^1.0.1" -hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2: +hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.3.0: version "3.3.2" resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45" integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw== @@ -6068,11 +6043,6 @@ immer@8.0.1: resolved "https://registry.yarnpkg.com/immer/-/immer-8.0.1.tgz#9c73db683e2b3975c424fb0572af5889877ae656" integrity sha512-aqXhGP7//Gui2+UrEtvxZxSquQVXTpZ7KDxfCcKAF3Vysvw0CViVaW9RZ1j1xlIYqaaaipBoqdqeibkc18PNvA== -immer@^8.0.1: - version "8.0.4" - resolved "https://registry.yarnpkg.com/immer/-/immer-8.0.4.tgz#3a21605a4e2dded852fb2afd208ad50969737b7a" - integrity sha512-jMfL18P+/6P6epANRvRk6q8t+3gGhqsJ9EuJ25AXE+9bNTYtssvzeYbEd0mXRYWCmmXSIbnlpz6vd6iJlmGGGQ== - import-cwd@^2.0.0: version "2.1.0" resolved "https://registry.yarnpkg.com/import-cwd/-/import-cwd-2.1.0.tgz#aa6cf36e722761285cb371ec6519f53e2435b0a9" @@ -9484,7 +9454,7 @@ react-error-overlay@^6.0.9: resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.9.tgz#3c743010c9359608c375ecd6bc76f35d93995b0a" integrity sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew== -react-is@^16.13.1, react-is@^16.7.0, react-is@^16.8.1: +react-is@^16.7.0, react-is@^16.8.1: version "16.13.1" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== @@ -9494,18 +9464,6 @@ react-is@^17.0.1: resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.1.tgz#5b3531bd76a645a4c9fb6e693ed36419e3301339" integrity sha512-NAnt2iGDXohE5LI7uBnLnqvLQMtzhkiAOLXTmv+qnF9Ky7xAPcX8Up/xWIhxvLVGJvuLiNc4xQLtuqDRzb4fSA== -react-redux@^7.2.3: - version "7.2.3" - resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.2.3.tgz#4c084618600bb199012687da9e42123cca3f0be9" - integrity sha512-ZhAmQ1lrK+Pyi0ZXNMUZuYxYAZd59wFuVDGUt536kSGdD0ya9Q7BfsE95E3TsFLE3kOSFp5m6G5qbatE+Ic1+w== - dependencies: - "@babel/runtime" "^7.12.1" - "@types/react-redux" "^7.1.16" - hoist-non-react-statics "^3.3.2" - loose-envify "^1.4.0" - prop-types "^15.7.2" - react-is "^16.13.1" - react-refresh@^0.8.3: version "0.8.3" resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.8.3.tgz#721d4657672d400c5e3c75d063c4a85fb2d5d68f" @@ -9674,19 +9632,6 @@ redent@^3.0.0: indent-string "^4.0.0" strip-indent "^3.0.0" -redux-thunk@^2.3.0: - version "2.3.0" - resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.3.0.tgz#51c2c19a185ed5187aaa9a2d08b666d0d6467622" - integrity sha512-km6dclyFnmcvxhAcrQV2AkZmPQjzPDjgVlQtR0EQjxZPyJ0BnMf3in1ryuR8A2qU0HldVRfxYXbFSKlI3N7Slw== - -redux@^4.0.0: - version "4.0.5" - resolved "https://registry.yarnpkg.com/redux/-/redux-4.0.5.tgz#4db5de5816e17891de8a80c424232d06f051d93f" - integrity sha512-VSz1uMAH24DM6MF72vcojpYPtrTUu3ByVWfPL1nPfVRb5mZVTve5GnNCUV53QM/BZ66xfWrm0CTWoM+Xlz8V1w== - dependencies: - loose-envify "^1.4.0" - symbol-observable "^1.2.0" - regenerate-unicode-properties@^8.2.0: version "8.2.0" resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-8.2.0.tgz#e5de7111d655e7ba60c057dbe9ff37c87e65cdec" @@ -10885,11 +10830,6 @@ svgo@^1.0.0, svgo@^1.2.2: unquote "~1.1.1" util.promisify "~1.0.0" -symbol-observable@^1.2.0: - version "1.2.0" - resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804" - integrity sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ== - symbol-tree@^3.2.4: version "3.2.4" resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2" @@ -11011,11 +10951,6 @@ throat@^5.0.0: resolved "https://registry.yarnpkg.com/throat/-/throat-5.0.0.tgz#c5199235803aad18754a667d659b5e72ce16764b" integrity sha512-fcwX4mndzpLQKBS1DVYhGAcYaYt7vsHNIvQV+WXMvnow5cgjPphq5CaayLaGsjRdSCKZFNGt7/GYAuXaNOiYCA== -throttle-debounce@^3.0.1: - version "3.0.1" - resolved "https://registry.yarnpkg.com/throttle-debounce/-/throttle-debounce-3.0.1.tgz#32f94d84dfa894f786c9a1f290e7a645b6a19abb" - integrity sha512-dTEWWNu6JmeVXY0ZYoPuH5cRIwc0MeGbJwah9KUNYSJwommQpCzTySTpEe8Gs1J23aeWEuAobe4Ag7EHVt/LOg== - through2@^2.0.0: version "2.0.5" resolved "https://registry.yarnpkg.com/through2/-/through2-2.0.5.tgz#01c1e39eb31d07cb7d03a96a70823260b23132cd"