Handle quicktime movies on mobile devices

components/NewGameBan.tsx

@@ -27,6 +27,22 @@ import { useState } from "react";
 export default function (props: { isOpen: boolean; onClose: () => void }) {
   const actionMap: { [k: string]: number } = {};
   const [rows, setRows] = useState([] as JSX.Element[]);
+  const fileTypes: { [k: string]: string } = {
+    gif: "image/gif",
+    heic: "image/heic",
+    heif: "image/heif",
+    jfif: "image/jpeg",
+    jpeg: "image/jpeg",
+    jpg: "image/jpg",
+    m4v: "video/x-m4v",
+    mkv: "video/x-matroska",
+    mov: "video/quicktime",
+    mp4: "video/mp4",
+    png: "image/png",
+    webp: "image/webp",
+    webm: "video/webm",
+    wmv: "video/x-ms-wmv",
+  };
 
   function addUser(user: string) {
     const newRows = [...rows];
@@ -81,6 +97,63 @@ export default function (props: { isOpen: boolean; onClose: () => void }) {
     props.onClose();
   }
 
+  async function submit() {
+    const actions: number[] = [];
+    const usernames: string[] = [];
+
+    for (const [u, a] of Object.entries(actionMap)) {
+      actions.push(a);
+      usernames.push(u);
+    }
+
+    if (!usernames.length || !actions.length) return;
+
+    const files = (document.getElementById("evidence") as HTMLInputElement)
+      .files;
+
+    if (!files) return;
+
+    const [evidence] = files;
+
+    const submitReq = await fetch("/api/reports/submit", {
+      body: JSON.stringify({
+        actions,
+        bypass: true,
+        filename: evidence.name,
+        filesize: evidence.size,
+        usernames,
+      }),
+      headers: {
+        "content-type": "application/json",
+      },
+      method: "POST",
+    });
+
+    if (!submitReq.ok) {
+      useToast()({
+        description: ((await submitReq.json()) as { error: string }).error,
+        status: "error",
+        title: "Failed to submit report",
+      });
+
+      return;
+    }
+
+    const { id, upload_url }: { [k: string]: string } = await submitReq.json();
+
+    const fileUpload = await fetch(upload_url, {
+      body: evidence,
+      headers: {
+        "content-type":
+          evidence.type ||
+          fileTypes[
+            evidence.name.split(".")[evidence.name.split(".").length - 1]
+          ],
+      },
+      method: "PUT",
+    });
+  }
+
   return (
     <Modal isCentered isOpen={props.isOpen} onClose={props.onClose}>
       <ModalOverlay />
@@ -147,7 +220,18 @@ export default function (props: { isOpen: boolean; onClose: () => void }) {
       </ModalContent>
       <ModalFooter>
         <Button onClick={reset}>Cancel</Button>
-        <Button colorScheme="blue" ml="8px">
+        <Button
+          colorScheme="blue"
+          disabled={
+            !(
+              Object.entries(actionMap).length &&
+              (document.getElementById("evidence") as HTMLInputElement).files
+                ?.length
+            )
+          }
+          ml="8px"
+          onClick={async () => await submit()}
+        >
           Submit
         </Button>
       </ModalFooter>