jump by page numbers in pdf

Author: fxnoob

.gitignore

@@ -6,3 +6,4 @@ dist/
 out/
 .env
 ext.zip
+dist.zip

constants.js

@@ -1,7 +1,7 @@
 const { generateGuid } = require("./src/services/guid");
 const constants = {
   appConfig: {
-    appName: "Image to Text Pro (OCR)",
+    appName: "Image to Text (OCR)",
     urls: {
       chrome:
         "https://chrome.google.com/webstore/detail/image-to-text/jgjlejdhmfpimggbicpffmpbnalcnhoo",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "text-to-image-pro",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "",
   "homepage": "https://fxnoob.github.io/image-to-text-landing",
   "scripts": {

src/background.js

@@ -5,23 +5,19 @@ import messagePassing from "./services/messagePassing";
 import constants from "../constants";
 import db, { schema } from "./services/dbService";
 import firebaseService from "./services/firebaseService";
-import { isGoogleChrome } from "./services/helper";
 /**
  * Main extension functionality
  *
  * @class Main
  */
 class Main {
   constructor() {
-    console.log({ isGoogleChrome });
     this.ctxMenuId1 = null;
     this.ctxMenuId2 = null;
     this.ctxMenuId3 = null;
     this.init().catch((e) => {
       console.log("Error loading extension", { e });
     });
-    // on install listener callback
-    this.onInstallListener();
     // set feedback form url
     this.setFeedbackFormUrl();
   }
@@ -40,6 +36,7 @@ class Main {
     const res = await db.get("___loaded");
     if (!res.hasOwnProperty("___loaded")) {
       await db.set({ ___loaded: true, ...schema.data });
+      chromeService.openHelpPage("welcome");
     }
   };
   openCropWindow = async () => {
@@ -114,17 +111,6 @@ class Main {
       await db.set({ isAuthenticated: true });
     }
   };
-
-  /**
-   *On install extension event
-   * */
-  onInstallListener = () => {
-    chrome.runtime.onInstalled.addListener((details) => {
-      // details.reason for install method
-      chromeService.openHelpPage("welcome");
-    });
-  };
-
   /**
    *set feedback form url shown while uninstalling
    * */

src/content-scripts/components/index.jsx

@@ -10,7 +10,7 @@ export default class Index extends React.Component {
     super(props);
     this.state = {
       imgSrc: "",
-      isModalOpen: false
+      isModalOpen: false,
     };
   }
   componentDidMount() {
@@ -28,9 +28,10 @@ export default class Index extends React.Component {
     });
   }
   handleClose = () => {
+    mediaControl.unmutePage();
     this.setState({ isModalOpen: false });
   };
-  onCropEnd = imgSrc => {
+  onCropEnd = (imgSrc) => {
     messagePassing.sendMessage("/open_tab", { imgSrc });
     this.handleClose();
   };

src/option-page/components/App.js

@@ -22,7 +22,6 @@ function App() {
       "/recognize",
       { url: url },
       (response) => {
-        console.log({ response });
         const { status, error, data } = response;
         if (url == response.url) {
           if (status == "SUCCESS") {

src/option-page/components/Error.js

@@ -1,7 +1,25 @@
 import React from "react";
+import Button from "@material-ui/core/Button";
 import Loader from "./Loader";
 import ConnectionErrorAnimation from "../../assets/NoInternetConnection";
 
 export default () => {
-  return <Loader json={ConnectionErrorAnimation} text="Network Error!" />;
+  const reload = () => {
+    window.location.reload();
+  };
+  return (
+    <>
+      <Loader json={ConnectionErrorAnimation} text="Network Error!" />
+      <div
+        style={{
+          textAlign: "center",
+          marginTop: "0.5rem",
+        }}
+      >
+        <Button style={{ border: "1px solid" }} onClick={reload}>
+          Reload
+        </Button>
+      </div>
+    </>
+  );
 };

src/option-page/components/Pdf.js

@@ -1,11 +1,14 @@
 import React, { useCallback, useRef } from "react";
+import ArrowLeftICon from "@material-ui/icons/KeyboardBackspace";
+import ArrowRightICon from "@material-ui/icons/ArrowRightAlt";
 import pdfService from "../../services/pdfService";
 import { useDropzone } from "react-dropzone";
 import Share from "./Share";
 import constants from "../../../constants";
 import chromeService from "../../services/chromeService";
 import messagePassing from "../../services/messagePassing";
 import { getExtensionStoreLink, isGoogleChrome } from "../../services/helper";
+import pdf from "../../services/pdfService";
 const extUrl = getExtensionStoreLink();
 let canvas = null;
 export default function PdfCard() {
@@ -33,25 +36,23 @@ export default function PdfCard() {
   const donateLabel = chromeService.getI18nMessage("donateLabel"); // Donate
   const renderPdf = (pdf, num) => {
     pdf.getPage(num).then((page) => {
-      const scale = 0.8;
+      const scale = 1;
       const viewport = page.getViewport({ scale: scale });
       canvas = canvasRef.current;
       canvas.height = viewport.height;
       canvas.width = viewport.width;
       const ctx = canvas.getContext("2d");
       // Render PDF page into canvas context
-      var renderContext = {
+      const renderContext = {
         canvasContext: ctx,
         viewport: viewport,
       };
-      var renderTask = page.render(renderContext);
+      const renderTask = page.render(renderContext);
       let pageRendering, pageNumPending;
       // Wait for rendering to finish
       renderTask.promise.then(function () {
         pageRendering = false;
         if (pageNumPending !== null) {
-          // New page rendering is pending
-          renderPage(pageNumPending);
           pageNumPending = null;
         }
       });
@@ -92,6 +93,13 @@ export default function PdfCard() {
     setPdfSettings({ ...pdfSettings, currentPage });
     renderPdf(pdfSettings.pdf, currentPage);
   };
+  const handlePdfPageChange = (event) => {
+    const pageNum = parseInt(event.target.value);
+    if (pageNum > -1 && pageNum <= pdfSettings.pageCount) {
+      setPdfSettings({ ...pdfSettings, currentPage: pageNum });
+      renderPdf(pdfSettings.pdf, pageNum);
+    }
+  };
   const onDrop = useCallback((acceptedFiles) => {
     acceptedFiles.forEach((file) => {
       const reader = new FileReader();
@@ -107,7 +115,6 @@ export default function PdfCard() {
             pageCount: pdf.numPages,
           });
           renderPdf(pdf, 1);
-          console.log(pdf.numPages);
         });
       };
       reader.readAsArrayBuffer(file);
@@ -210,18 +217,29 @@ export default function PdfCard() {
                             onClick={onPrevPage}
                             className="inline-flex items-center px-4 py-2 border border-transparent text-sm leading-5 font-medium rounded-md text-white focus:outline-none transition duration-150 ease-in-out btn-lite"
                           >
-                            {"<-"}
+                            <ArrowLeftICon />
                           </button>
                           <button
                             onClick={onNextPage}
                             style={{ marginLeft: "1rem" }}
                             className="inline-flex items-center px-4 py-2 border border-transparent text-sm leading-5 font-medium rounded-md text-white focus:outline-none transition duration-150 ease-in-out btn-lite"
                           >
-                            {"->"}
+                            <ArrowRightICon />
                           </button>
                           <span style={{ marginLeft: "1rem" }}>
-                            Page: {pdfSettings.currentPage}/
-                            {pdfSettings.pageCount}
+                            Page:{" "}
+                            <input
+                              type="number"
+                              onChange={handlePdfPageChange}
+                              style={{
+                                width: "4rem",
+                                textAlign: "end",
+                                border: "1px solid var(--main-color)",
+                                borderRadius: "1rem",
+                              }}
+                              value={pdfSettings.currentPage}
+                            />
+                            /{pdfSettings.pageCount}
                           </span>
                           <button
                             onClick={extractText}