feat: update video uploading page (#23)

* feat: add update video

* fix: routing issue

components/Upload/Dragzone.tsx

@@ -0,0 +1,61 @@
+import { useDropzone } from "react-dropzone";
+import * as React from "react";
+import { Box, CircularProgress, Stack, Typography } from "@mui/material";
+
+type DropzoneProps = {
+  file?: File;
+  onFile: (file: File) => void;
+  accept: string;
+  loading: boolean;
+};
+
+export function Dropzone(props: DropzoneProps) {
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({
+    onDrop: (acceptedFiles) => props.onFile(acceptedFiles[0]),
+  });
+  const ref = React.useRef<HTMLInputElement>(null);
+
+  return (
+    <div
+      {...getRootProps()}
+      style={{
+        width: "100%",
+        height: 400,
+        border: "1px dashed rgba(145, 158, 171, 0.32)",
+        cursor: "pointer",
+        borderRadius: 16,
+      }}
+      onClick={() => {
+        ref.current?.click();
+      }}
+    >
+      <Box
+        display={"flex"}
+        justifyContent={"center"}
+        alignItems={"center"}
+        height={"100%"}
+        width={"100%"}
+        position={"relative"}
+      >
+        <Box>
+          <Typography>
+            {props.file ? props.file.name : "Drag file here or click to upload"}
+          </Typography>
+        </Box>
+        {props.loading && (
+          <Box
+            position={"absolute"}
+            right={"50%"}
+            top={"48%"}
+            display={"flex"}
+            justifyContent={"center"}
+            alignItems={"center"}
+          >
+            <CircularProgress />
+          </Box>
+        )}
+      </Box>
+      <input {...getInputProps()} ref={ref} accept={props.accept} />
+    </div>
+  );
+}

components/Upload/ProgressBar.tsx

@@ -0,0 +1,46 @@
+// @flow
+import * as React from "react";
+import { styled } from "@mui/material/styles";
+import VideoLibraryIcon from "@mui/icons-material/VideoLibrary";
+import { Box, LinearProgress, Stack, Typography } from "@mui/material";
+import prettyBytes from "pretty-bytes";
+
+type Props = {
+  progress: number;
+  title: string;
+  currentUploadBytes: number;
+  totalUploadBytes: number;
+};
+
+export const StyledProgressBar = styled(LinearProgress)(({ theme }) => ({
+  height: 100,
+  color: "#1F94FF",
+  backgroundColor: "#EFF1F3",
+  borderRadius: 16,
+}));
+
+export function ProgressBar(props: Props) {
+  return (
+    <Box position={"relative"}>
+      <StyledProgressBar value={props.progress} variant={"determinate"} />
+      <Stack
+        direction={"row"}
+        position={"absolute"}
+        top={"10%"}
+        left={"10%"}
+        spacing={4}
+      >
+        <VideoLibraryIcon sx={{ height: 60, width: 60, color: "#CECECE" }} />
+        <Stack justifyContent={"center"}>
+          <Typography fontSize={14} color={"#CECECE"} fontWeight={"bold"}>
+            {props.title}
+          </Typography>
+          <Typography fontSize={14} color={"#CECECE"}>
+            {props.progress}% ({prettyBytes(props.currentUploadBytes)} /
+            {prettyBytes(props.totalUploadBytes)})
+          </Typography>
+        </Stack>
+      </Stack>
+    </Box>
+  );
+}

package.json

@@ -29,8 +29,10 @@
     "next": "13.0.6",
     "next-auth": "^4.18.0",
     "notistack": "^2.0.8",
+    "pretty-bytes": "^6.0.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-dropzone": "^14.2.3",
     "react-qr-code": "^2.0.8",
     "typescript": "4.9.3",
     "editor": "workspace:editor"