preliminarily, video cropper works

package.json

@@ -16,6 +16,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-drag-drop-files": "^2.3.10",
+    "react-easy-crop": "^5.0.8",
     "react-router-dom": "^6.26.1",
     "tailwind-merge": "^2.5.2",
     "uuid": "^10.0.0",

src/components/features/ToolbarMain/index.tsx

@@ -102,6 +102,7 @@ export const ToolbarMain = ({
               onClick={() => {
                 setState({ ...state, isUploadSubmenuOpen: true });
               }}
+              tooltip={state.isUploadSubmenuOpen ? undefined : "Add..."}
             />
             {state.isUploadSubmenuOpen && (
               <div

src/components/features/UploadVideo/index.tsx

@@ -1,6 +1,7 @@
 import { useState } from "react";
 import { twMerge } from "tailwind-merge";
 import { Dialog, DialogPanel, DialogTitle } from "@headlessui/react";
+import Cropper, { Point, Area } from "react-easy-crop";
 
 import { FileUploader, VIDEO_FILE_TYPE } from "../FileUploader";
 import { Button } from "~/components/ui";
@@ -8,6 +9,13 @@ import { Button } from "~/components/ui";
 import { paperWrapperStyles } from "~/components/styles";
 import { dispatchUiEvents } from "~/signals/uiEvents";
 
+function readFile(file: File) {
+  return new Promise<string | ArrayBuffer | null>((resolve) => {
+    const reader = new FileReader();
+    reader.addEventListener("load", () => resolve(reader.result), false);
+    reader.readAsDataURL(file);
+  });
+}
 export const UploadVideo = ({
   isOpen,
   closeCallback,
@@ -16,6 +24,14 @@ export const UploadVideo = ({
   closeCallback: () => void;
 }) => {
   const [assetFile, setAssetFile] = useState<File | null>(null);
+  const [videoFile, setVideoFile] = useState<string | null>(null);
+
+  const [crop, setCrop] = useState({ x: 0, y: 0 });
+  const [zoom, setZoom] = useState(1);
+
+  const onCropComplete = (croppedArea: Area, croppedAreaPixels: Point) => {
+    console.log(croppedArea, croppedAreaPixels);
+  };
 
   function handleClose() {
     setAssetFile(null);
@@ -28,6 +44,7 @@ export const UploadVideo = ({
     }
     handleClose();
   }
+
   return (
     <Dialog open={isOpen} onClose={closeCallback} className="relative z-50">
       <div className="fixed inset-0 flex w-screen items-center justify-center">
@@ -42,20 +59,37 @@ export const UploadVideo = ({
             title=""
             fileTypes={Object.values(VIDEO_FILE_TYPE)}
             file={assetFile}
-            setFile={(file: File | null) => {
+            setFile={async (file: File | null) => {
               setAssetFile(file);
+              if (file) {
+                let videoDataUrl = await readFile(file);
+                setVideoFile(videoDataUrl as string);
+              }
             }}
           />
-          {assetFile && (
-            <div className="relative flex items-center justify-center rounded-xl bg-ui-border">
+          {assetFile && videoFile && (
+            <div className="relative flex aspect-video items-center justify-center rounded-xl bg-ui-border">
               <label className="absolute left-0 top-0 rounded-br-xl rounded-tl-xl border border-ui-border bg-white p-2 shadow-md">
                 Preview
               </label>
-              <video
+              {/* <video
                 src={URL.createObjectURL(assetFile)}
                 controls
                 className="border border-dashed border-white"
-              />
+              /> */}
+              <div className="crop-container">
+                <Cropper
+                  video={videoFile}
+                  crop={crop}
+                  zoom={zoom}
+                  aspect={4 / 3}
+                  onCropChange={setCrop}
+                  onZoomChange={setZoom}
+                  // onImageLoaded={(res:any) => {
+                  //   console.log(res);
+                  // }}
+                />
+              </div>
             </div>
           )}
           <div className="flex w-full justify-end gap-4 pt-4">

yarn.lock

@@ -3110,6 +3110,11 @@ normalize-range@^0.1.2:
   resolved "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz"
   integrity sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==
 
+normalize-wheel@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/normalize-wheel/-/normalize-wheel-1.0.1.tgz#aec886affdb045070d856447df62ecf86146ec45"
+  integrity sha512-1OnlAPZ3zgrk8B91HyRj+eVv+kS5u+Z0SCsak6Xil/kmgEia50ga7zfkumayonZrImffAxPU/5WcyGhzetHNPA==
+
 npm-audit-report@^5.0.0:
   version "5.0.0"
   resolved "https://registry.npmjs.org/npm-audit-report/-/npm-audit-report-5.0.0.tgz"
@@ -3601,6 +3606,14 @@ react-drag-drop-files@^2.3.10:
     prop-types "^15.7.2"
     styled-components "^5.3.0"
 
+react-easy-crop@^5.0.8:
+  version "5.0.8"
+  resolved "https://registry.yarnpkg.com/react-easy-crop/-/react-easy-crop-5.0.8.tgz#6cf5be061c0ec6dc0c6ee7413974c34e35bf7475"
+  integrity sha512-KjulxXhR5iM7+ATN2sGCum/IyDxGw7xT0dFoGcqUP+ysaPU5Ka7gnrDa2tUHFHUoMNyPrVZ05QA+uvMgC5ym/g==
+  dependencies:
+    normalize-wheel "^1.0.1"
+    tslib "^2.0.1"
+
 react-is@^16.13.1, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
@@ -4208,7 +4221,7 @@ tsconfck@^3.0.3:
   resolved "https://registry.npmjs.org/tsconfck/-/tsconfck-3.1.1.tgz"
   integrity sha512-00eoI6WY57SvZEVjm13stEVE90VkEdJAFGgpFLTsZbJyW/LwFQ7uQxJHWpZ2hzSWgCPKc9AnBnNP+0X7o3hAmQ==
 
-tslib@^2.4.0:
+tslib@^2.0.1, tslib@^2.4.0:
   version "2.7.0"
   resolved "https://registry.npmjs.org/tslib/-/tslib-2.7.0.tgz"
   integrity sha512-gLXCKdN1/j47AiHiOkJN69hJmcbGTHI0ImLmbYLHykhgeN0jVGola9yVjFgzCUklsZQMW55o+dW7IXv3RCXDzA==