Make changes for video processing check

This commit is contained in:
regalijan 2023-10-19 16:51:05 -04:00
parent 4e0729e91e
commit de8fc6a4e2
Signed by: regalijan
GPG Key ID: 5D4196DA269EF520
3 changed files with 95 additions and 135 deletions

View File

@ -21,9 +21,6 @@ export default function (props: ReportCardProps) {
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const toast = useToast(); const toast = useToast();
const targetMap: { [k: number]: string } = {}; const targetMap: { [k: number]: string } = {};
const [attachmentsReady, setAttachmentReady] = useState(
!props.attachments_loading,
);
const actionMap: { [k: number]: number } = {}; const actionMap: { [k: number]: number } = {};
for (let i = 0; i < props.target_ids.length; i++) for (let i = 0; i < props.target_ids.length; i++)
@ -31,18 +28,6 @@ export default function (props: ReportCardProps) {
value: props.target_usernames[i], value: props.target_usernames[i],
}); });
async function recheckAttachment() {
const attachmentCheck = await fetch("/api/uploads/status", {
body: JSON.stringify(props.attachments),
headers: {
"content-type": "application/json",
},
method: "POST",
});
setAttachmentReady(attachmentCheck.ok);
}
async function submitActions() { async function submitActions() {
setLoading(true); setLoading(true);
const submitReq = await fetch(`/api/reports/${props.id}/action`, { const submitReq = await fetch(`/api/reports/${props.id}/action`, {
@ -82,124 +67,109 @@ export default function (props: ReportCardProps) {
<Text fontSize="xs">ID(s): {props.target_ids.toString()}</Text> <Text fontSize="xs">ID(s): {props.target_ids.toString()}</Text>
</CardHeader> </CardHeader>
<CardBody> <CardBody>
{attachmentsReady ? ( <div style={{ position: "relative" }}>
<div style={{ position: "relative" }}> <video autoPlay={true} controls={true} width="100%">
<video <source src={`/api/uploads/${props.attachments[attachmentIdx]}`} />
autoPlay={true} <source src="/files/processing.webm" />
controls={true} </video>
src={`/api/uploads/${props.attachments[attachmentIdx]}`} <HStack
width="100%" pos="absolute"
/> top="50%"
<HStack transform="translate(5%, -50%)"
pos="absolute" w="90%"
top="50%" zIndex="1"
transform="translate(5%, -50%)" >
w="90%" <Button
zIndex="1" borderRadius="50%"
h="16"
onClick={() => setAttachmentIdx(attachmentIdx - 1)}
visibility={attachmentIdx > 0 ? "visible" : "hidden"}
w="16"
> >
<Button <svg
borderRadius="50%" xmlns="http://www.w3.org/2000/svg"
h="16" width="32"
onClick={() => setAttachmentIdx(attachmentIdx - 1)} height="32"
visibility={attachmentIdx > 0 ? "visible" : "hidden"} fill="currentColor"
w="16" viewBox="0 0 16 16"
> >
<svg <path
xmlns="http://www.w3.org/2000/svg" fillRule="evenodd"
width="32" 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"
height="32" />
fill="currentColor" </svg>
viewBox="0 0 16 16" </Button>
> <Spacer />
<path <Button
fillRule="evenodd" borderRadius="50%"
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" h="16"
/> onClick={() => setAttachmentIdx(attachmentIdx + 1)}
</svg> visibility={
</Button> props.attachments.length > attachmentIdx + 1
<Spacer /> ? "visible"
<Button : "hidden"
borderRadius="50%" }
h="16" w="16"
onClick={() => setAttachmentIdx(attachmentIdx + 1)} >
visibility={ <svg
props.attachments.length > attachmentIdx + 1 xmlns="http://www.w3.org/2000/svg"
? "visible" width="32"
: "hidden" height="32"
} fill="currentColor"
w="16" viewBox="0 0 16 16"
> >
<svg <path
xmlns="http://www.w3.org/2000/svg" fillRule="evenodd"
width="32" 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"
height="32" />
fill="currentColor" </svg>
viewBox="0 0 16 16" </Button>
> </HStack>
<path </div>
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>Attachments processing...</Text>
)}
<br /> <br />
<Text my="16px">{props.description}</Text> <Text my="16px">{props.description}</Text>
</CardBody> </CardBody>
<CardFooter> <CardFooter>
{props.attachments_loading ? ( <Stack direction="column">
<Button {(function () {
colorScheme="blue" const radioGroups = [];
onClick={async () => await recheckAttachment()} for (let i = 0; i < props.target_ids.length; i++) {
> radioGroups.push(
Reload Attachment <RadioGroup
</Button> name={props.target_ids[i].toString()}
) : ( onChange={(val) => {
<Stack direction="column"> actionMap[props.target_ids[i]] = parseInt(val);
{(function () { }}
const radioGroups = []; >
for (let i = 0; i < props.target_ids.length; i++) { <Stack direction="row">
radioGroups.push( <Text>{props.target_usernames[i]}</Text>
<RadioGroup <Radio key={0} value="0">
name={props.target_ids[i].toString()} Ignore
onChange={(val) => { </Radio>
actionMap[props.target_ids[i]] = parseInt(val); <Radio key={1} value="1">
}} Hide from Leaderboards
> </Radio>
<Stack direction="row"> <Radio key={2} value="2">
<Text>{props.target_usernames[i]}</Text> Ban
<Radio key={0} value="0"> </Radio>
Ignore </Stack>
</Radio> </RadioGroup>,
<Radio key={1} value="1"> );
Hide from Leaderboards }
</Radio>
<Radio key={2} value="2">
Ban
</Radio>
</Stack>
</RadioGroup>,
);
}
return radioGroups; return radioGroups;
})()} })()}
<Box pt="16px"> <Box pt="16px">
<Button <Button
colorScheme="blue" colorScheme="blue"
onClick={async () => await submitActions()} onClick={async () => await submitActions()}
isLoading={loading} isLoading={loading}
loadingText="Submitting..." loadingText="Submitting..."
> >
Submit Submit
</Button> </Button>
</Box> </Box>
</Stack> </Stack>
)}
</CardFooter> </CardFooter>
</Card> </Card>
); );

View File

@ -189,15 +189,6 @@ export async function onRequestPost(context: RequestContext) {
uploadUrls.push(urlResult.value); uploadUrls.push(urlResult.value);
let url = new URL(urlResult.value).searchParams.get("name") as string; let url = new URL(urlResult.value).searchParams.get("name") as string;
const extension = (url.split(".").at(-1) as string).toLowerCase();
if (["mkv", "wmv"].includes(extension)) {
url = url.replace(`.${extension}`, ".mp4");
await context.env.DATA.put(`videoprocessing_${url}`, "1", {
expirationTtl: 600,
});
}
attachments.push(url); attachments.push(url);
} }

1
index.d.ts vendored
View File

@ -63,7 +63,6 @@ declare global {
interface ReportCardProps { interface ReportCardProps {
attachments: string[]; attachments: string[];
attachments_loading?: boolean;
created_at: number; created_at: number;
description?: string; description?: string;
id: string; id: string;