Merge pull request #10 from aswanthabam/dev

Short Keys and other improvements

app/main.module.css

@@ -8,6 +8,7 @@
     align-items: center;
     justify-content: start;
     max-width: 70%;
+    width: fit-content;
     height: auto;
     padding: 1rem;
     bottom: 0;
@@ -43,6 +44,7 @@
       font-weight: 600;
       color: #222;
       background: transparent;
+      word-break: break-all;
     }
   }
   .loader {
@@ -224,7 +226,8 @@
 @media only screen and (max-width: 728px) {
   .main {
     .popup {
-      max-width: calc(100% - 3rem);
+      max-width: calc(100% - 1rem);
+      width: calc(100% - 3rem);
     }
     .bg {
       background-size: 190%;

app/main.tsx

@@ -29,9 +29,33 @@ export default function MainContainer({
     icon: "bi bi-info",
   });
   const [statusLoaded, setStatusLoaded] = useState(false);
-
+
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key == "Escape") {
+        router.push("/");
+      } else if (!window.location.pathname.includes("receive") && !window.location.pathname.includes("share")) {
+        if (event.key == "r")
+          router.push("/receive");
+      }
+    }
+    window.addEventListener("keydown", handleKeyDown);
+}, []);
+
   useEffect(() => {
     console.log("Page loaded (MAIN)", process.env.NODE_ENV);
+    const handlePaste = (event: React.ClipboardEvent) => {
+      if (window.location.pathname.includes("receive")) return;
+      event.clipboardData?.items[0].getAsString((text) => {
+        navigator.clipboard.readText().then((text) => {
+          console.log(text);
+          if (text[1] == "-") text = text[0] + text.slice(2);
+          if (text.length > 8 || !/^[A-Z]\d{0,6}$/.test(text)) return;
+          router.push(`/receive/?code=${text}`);
+        });
+      });
+    };
+    window.addEventListener("paste", handlePaste as any);
     document.body.style.setProperty("--x", "0px");
     document.body.style.setProperty("--y", "0px");
     document.body.style.setProperty(
@@ -104,11 +128,11 @@ export default function MainContainer({
     setLoader!({ text: "Loading...", visible: true });
     mainDragEnd();
     if (event.dataTransfer.files && event.dataTransfer.files.length > 0) {
-      if (event.dataTransfer.files[0].size > (50 * 1024 * 1024)) {
+      if (event.dataTransfer.files[0].size > 30 * 1024 * 1024) {
         setLoader!({ text: "", visible: false });
         showPopup(
           setPopup!,
-          "File size is too large (Maximum 50 MB)",
+          "File size is too large (Maximum 30 MB)",
           "bi bi-x-circle",
           2000
         );

app/page.tsx

@@ -5,13 +5,15 @@ import MainContainer from "./main";
 import { FileContext } from "@/context/FileContext";
 import { useRouter } from "next/navigation";
 import { LoaderContext } from "@/context/LoaderContext";
+import { PopupContext, showPopup } from "@/context/PopupContext";
 
 export default function Home() {
   useEffect(() => {
     console.log("Page loaded(HOME)");
   }, []);
   const router = useRouter();
   const { setLoader } = useContext(LoaderContext);
+  const { setPopup } = useContext(PopupContext);
   const fileContext = useContext(FileContext);
   const filePicRef = useRef<HTMLInputElement>(null);
   return (
@@ -53,6 +55,16 @@ export default function Home() {
           onChange={(e) => {
             const file = e.target.files?.[0];
             if (file) {
+              if (file.size > 30 * 1024 * 1024) {
+                setLoader!({ text: "", visible: false });
+                showPopup(
+                  setPopup!,
+                  "File size is too large (Maximum 30 MB)",
+                  "bi bi-x-circle",
+                  2000
+                );
+                return;
+              }
               setLoader!({ text: "", visible: true });
               fileContext.setFile!(file);
               router.push("/share");

app/receive/page.module.css

@@ -258,6 +258,11 @@
       &:hover {
         background: #66a63f;
       }
+
+      &.inactive {
+        background: #636363;
+        cursor: not-allowed;
+      }
     }
   }
 }

app/receive/page.tsx

@@ -4,6 +4,7 @@ import styles from "./page.module.css";
 import { LoaderContext } from "@/context/LoaderContext";
 import Link from "next/link";
 import { PopupContext, showPopup } from "@/context/PopupContext";
+import { useSearchParams, useRouter } from "next/navigation";
 
 type ProgressType = {
   buffering: boolean;
@@ -29,7 +30,7 @@ const progressBytes = (progress: ProgressType) => {
   }`;
 };
 
-export default function Share() {
+export default function Receive() {
   const { setPopup } = useContext(PopupContext);
   const [fileIcon, setFileIcon] = useState("bi bi-filetype-");
   const [fileSize, setFileSize] = useState("0MB");
@@ -38,6 +39,8 @@ export default function Share() {
   const { setLoader } = useContext(LoaderContext);
   const [fileInfo, setFileInfo] = useState<FileInfo | null>(null);
   const [downloading, setDownloading] = useState(false);
+  const searchParams = useSearchParams();
+  const router = useRouter();
   const [progress, setProgress] = useState<ProgressType>({
     buffering: false,
     percent: 0,
@@ -54,7 +57,23 @@ export default function Share() {
   useEffect(() => {
     console.log("Page loaded (RECEIVE)");
     inputRef.current?.focus();
-    setCode("");
+    if (searchParams.has("code")) {
+      if (
+        searchParams.get("code")!.length != 7 ||
+        !/^[A-Z]\d{0,6}$/.test(searchParams.get("code")!)
+      ) {
+        showPopup(setPopup!, "Invalid Code", "bi bi-exclamation-triangle");
+        router.push("/");
+        return;
+      }
+      setCode(searchParams.get("code")!);
+      for (var i = 0; i < 7; i++) {
+        document
+          .getElementsByClassName(styles.codeChar)
+          [i != 0 ? i + 1 : i].classList.remove(styles.inactive);
+      }
+      viewFileInfo();
+    }
     setLoader!({ text: "", visible: false });
   }, [setLoader]);
 
@@ -166,6 +185,9 @@ export default function Share() {
   };
 
   const downloadFile = () => {
+    if (downloading) {
+      return;
+    }
     if (fileInfo == null) {
       return;
     }
@@ -184,14 +206,19 @@ export default function Share() {
         }
         const total = parseInt(contentLength, 10);
         let loaded = 0;
-        setProgress({ buffering: false, percent: 0, total, loaded });
         showPopup(setPopup!, "Downloading ...", "bi bi-download", 1000);
         const reader = response.body!.getReader();
         const stream = new ReadableStream({
           start(controller) {
             function push() {
               reader.read().then(({ done, value }) => {
                 if (done) {
+                  setProgress({
+                    buffering: true,
+                    percent: 100,
+                    total,
+                    loaded,
+                  });
                   controller.close();
                   return;
                 }
@@ -331,7 +358,7 @@ export default function Share() {
                   </div>
                 )}
                 <div className={styles.buttonContainer}>
-                  <button onClick={downloadFile} className={styles.button}>
+                  <button onClick={downloadFile} className={styles.button + (downloading ? (" "+styles.inactive) : '')}>
                     Download It
                     <svg
                       xmlns="http://www.w3.org/2000/svg"

app/share/page.tsx

@@ -58,7 +58,7 @@ export default function Share() {
           file_name: file.name,
           file_size: fileSize.toString(),
           uploaded_by: name,
-          content_type: file.type,
+          content_type: file.type == null || file.type.length <= 1 ? 'application/octet-stream' : file.type,
           usage_limit: usageCount.toString(),
         }),
       });
@@ -176,6 +176,10 @@ export default function Share() {
             <h1 className={styles.titleUnderlined}>Your Code</h1>
             <h2
               onClick={() => {
+                if(!navigator.clipboard) {
+                  showPopup(setPopup!, "Failed to copy code", "bi bi-x-circle", 2000);
+                  return;
+                }
                 navigator.clipboard.writeText(code);
                 setCopied(true);
                 showPopup(setPopup!, "Copied", "bi bi-check-circle", 2000);