Add arrow buttons to video viewer

components/ReportCard.tsx

@@ -6,17 +6,20 @@ import {
   CardFooter,
   CardHeader,
   Heading,
+  HStack,
   Radio,
   RadioGroup,
+  Spacer,
   Stack,
   Text,
 } from "@chakra-ui/react";
 import { useState } from "react";
 
 export default function (props: ReportCardProps) {
+  const [attachmentIdx, setAttachmentIdx] = useState(0);
   const targetMap: { [k: number]: string } = {};
-  const [attachmentReady, setAttachmentReady] = useState(
-    !props.attachment_loading
+  const [attachmentsReady, setAttachmentReady] = useState(
+    !props.attachments_loading,
   );
   const actionMap: { [k: number]: number } = {};
 
@@ -26,8 +29,12 @@ export default function (props: ReportCardProps) {
     });
 
   async function recheckAttachment() {
-    const attachmentCheck = await fetch(`/api/uploads/${props.attachment}`, {
-      method: "HEAD",
+    const attachmentCheck = await fetch("/api/uploads/status", {
+      body: JSON.stringify(props.attachments),
+      headers: {
+        "content-type": "application/json",
+      },
+      method: "POST",
     });
 
     setAttachmentReady(attachmentCheck.ok);
@@ -42,14 +49,71 @@ export default function (props: ReportCardProps) {
         <Text fontSize="xs">ID(s): {props.target_ids.toString()}</Text>
       </CardHeader>
       <CardBody>
-        {attachmentReady ? (
-          <video src={`/api/uploads/${props.attachment}`} width="100%" />
+        {attachmentsReady ? (
+          <div style={{ position: "relative" }}>
+            <video
+              src={`/api/uploads/${props.attachments[attachmentIdx]}`}
+              width="100%"
+            />
+            <HStack
+              pos="absolute"
+              top="50%"
+              transform="translateY(-50%)"
+              zIndex="1"
+            >
+              <Button
+                borderRadius="50%"
+                h="16"
+                visibility={attachmentIdx > 0 ? "visible" : "hidden"}
+                w="16"
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="32"
+                  height="32"
+                  fill="currentColor"
+                  viewBox="0 0 16 16"
+                >
+                  <path
+                    fillRule="evenodd"
+                    d="M12 8a.5.5 0 0 1-.5.5H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H11.5a.5.5 0 0 1 .5.5z"
+                  />
+                </svg>
+              </Button>
+              <Spacer />
+              <Button
+                borderRadius="50%"
+                h="16"
+                visibility={
+                  props.attachments.length > attachmentIdx + 1
+                    ? "visible"
+                    : "hidden"
+                }
+                w="16"
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="32"
+                  height="32"
+                  fill="currentColor"
+                  viewBox="0 0 16 16"
+                >
+                  <path
+                    fillRule="evenodd"
+                    d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z"
+                  />
+                </svg>
+              </Button>
+            </HStack>
+          </div>
         ) : (
-          <Text>Attachment processing...</Text>
+          <Text>Attachments processing...</Text>
         )}
+        <br />
+        <Text my="16px">{props.description}</Text>
       </CardBody>
       <CardFooter>
-        {props.attachment_loading ? (
+        {props.attachments_loading ? (
           <Button
             colorScheme="blue"
             onClick={async () => await recheckAttachment()}
@@ -82,7 +146,7 @@ export default function (props: ReportCardProps) {
                         Ban
                       </Radio>
                     </Stack>
-                  </RadioGroup>
+                  </RadioGroup>,
                 );
               }