Merge branch 'main' into feat/pdf-merge

src/components/input/BaseFileInput.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode, useContext, useEffect } from 'react';
+import React, { ReactNode, useContext, useEffect, useState } from 'react';
 import { Box, useTheme } from '@mui/material';
 import Typography from '@mui/material/Typography';
 import InputHeader from '../InputHeader';
@@ -26,7 +26,8 @@ export default function BaseFileInput({
   children,
   type
 }: BaseFileInputComponentProps) {
-  const [preview, setPreview] = React.useState<string | null>(null);
+  const [preview, setPreview] = useState<string | null>(null);
+  const [isDragging, setIsDragging] = useState<boolean>(false);
   const theme = useTheme();
   const fileInputRef = React.useRef<HTMLInputElement>(null);
   const { showSnackBar } = useContext(CustomSnackBarContext);
@@ -54,6 +55,7 @@ export default function BaseFileInput({
   const handleImportClick = () => {
     fileInputRef.current?.click();
   };
+
   const handleCopy = () => {
     if (isArray(value)) {
       const blob = new Blob([value[0]], { type: value[0].type });
@@ -73,6 +75,52 @@ export default function BaseFileInput({
     onChange(null);
   }
 
+  const handleDrop = (event: React.DragEvent<HTMLDivElement>) => {
+    event.preventDefault();
+    event.stopPropagation();
+    setIsDragging(false);
+
+    if (event.dataTransfer.files && event.dataTransfer.files.length > 0) {
+      const file = event.dataTransfer.files[0];
+
+      // Check if file type is acceptable
+      const isAcceptable = accept.some((acceptType) => {
+        // Handle wildcards like "image/*"
+        if (acceptType.endsWith('/*')) {
+          const category = acceptType.split('/')[0];
+          return file.type.startsWith(category);
+        }
+        return acceptType === file.type;
+      });
+
+      if (isAcceptable) {
+        onChange(file);
+      } else {
+        showSnackBar(
+          `Invalid file type. Please use ${accept.join(', ')}`,
+          'error'
+        );
+      }
+    }
+  };
+
+  const handleDragOver = (event: React.DragEvent<HTMLDivElement>) => {
+    event.preventDefault();
+    event.stopPropagation();
+  };
+
+  const handleDragEnter = (event: React.DragEvent<HTMLDivElement>) => {
+    event.preventDefault();
+    event.stopPropagation();
+    setIsDragging(true);
+  };
+
+  const handleDragLeave = (event: React.DragEvent<HTMLDivElement>) => {
+    event.preventDefault();
+    event.stopPropagation();
+    setIsDragging(false);
+  };
+
   useEffect(() => {
     const handlePaste = (event: ClipboardEvent) => {
       const clipboardItems = event.clipboardData?.items ?? [];
@@ -105,8 +153,15 @@ export default function BaseFileInput({
           borderRadius: 2,
           boxShadow: '5',
           bgcolor: 'background.paper',
-          position: 'relative'
+          position: 'relative',
+          borderColor: isDragging ? theme.palette.primary.main : undefined,
+          borderWidth: isDragging ? 2 : 1,
+          borderStyle: isDragging ? 'dashed' : 'solid'
         }}
+        onDrop={handleDrop}
+        onDragOver={handleDragOver}
+        onDragEnter={handleDragEnter}
+        onDragLeave={handleDragLeave}
       >
         {preview ? (
           <Box
@@ -137,17 +192,27 @@ export default function BaseFileInput({
               cursor: 'pointer'
             }}
           >
-            <Typography
-              color={
-                theme.palette.mode === 'dark'
-                  ? theme.palette.grey['300']
-                  : theme.palette.grey['600']
-              }
-            >
-              Click here to select a {type} from your device, press Ctrl+V to
-              use a {type} from your clipboard, drag and drop a file from
-              desktop
-            </Typography>
+            {isDragging ? (
+              <Typography
+                color={theme.palette.primary.main}
+                variant="h6"
+                align="center"
+              >
+                Drop your {type} here
+              </Typography>
+            ) : (
+              <Typography
+                color={
+                  theme.palette.mode === 'dark'
+                    ? theme.palette.grey['300']
+                    : theme.palette.grey['600']
+                }
+              >
+                Click here to select a {type} from your device, press Ctrl+V to
+                use a {type} from your clipboard, or drag and drop a file from
+                desktop
+              </Typography>
+            )}
           </Box>
         )}
       </Box>

src/components/input/NumericInputWithUnit.tsx

@@ -0,0 +1,178 @@
+import React, { useState, useEffect } from 'react';
+import { Grid, Select, MenuItem } from '@mui/material';
+import TextFieldWithDesc from '@components/options/TextFieldWithDesc';
+import Qty from 'js-quantities';
+//
+
+const siPrefixes: { [key: string]: number } = {
+  'Default prefix': 1,
+  k: 1000,
+  M: 1000000,
+  G: 1000000000,
+  T: 1000000000000,
+  m: 0.001,
+  u: 0.000001,
+  n: 0.000000001,
+  p: 0.000000000001
+};
+
+export default function NumericInputWithUnit(props: {
+  value: { value: number; unit: string };
+  disabled?: boolean;
+  disableChangingUnit?: boolean;
+  onOwnChange?: (value: { value: number; unit: string }) => void;
+  defaultPrefix?: string;
+}) {
+  const [inputValue, setInputValue] = useState(props.value.value);
+  const [prefix, setPrefix] = useState(props.defaultPrefix || 'Default prefix');
+
+  // internal display unit
+  const [unit, setUnit] = useState('');
+
+  // Whether user has overridden the unit
+  const [userSelectedUnit, setUserSelectedUnit] = useState(false);
+  const [unitKind, setUnitKind] = useState('');
+  const [unitOptions, setUnitOptions] = useState<string[]>([]);
+
+  const [disabled, setDisabled] = useState(props.disabled);
+  const [disableChangingUnit, setDisableChangingUnit] = useState(
+    props.disableChangingUnit
+  );
+
+  useEffect(() => {
+    setDisabled(props.disabled);
+    setDisableChangingUnit(props.disableChangingUnit);
+  }, [props.disabled, props.disableChangingUnit]);
+
+  useEffect(() => {
+    if (unitKind != Qty(props.value.unit).kind()) {
+      // Update the options for what units similar to this one are available
+      const kind = Qty(props.value.unit).kind();
+      let units: string[] = [];
+      if (kind) {
+        units = Qty.getUnits(kind);
+      }
+
+      if (!units.includes(props.value.unit)) {
+        units.push(props.value.unit);
+      }
+
+      // Workaround because the lib doesn't list them
+      if (kind == 'area') {
+        units.push('km^2');
+        units.push('mile^2');
+        units.push('inch^2');
+        units.push('m^2');
+        units.push('cm^2');
+      }
+      setUnitOptions(units);
+      setInputValue(props.value.value);
+      setUnit(props.value.unit);
+      setUnitKind(kind);
+      setUserSelectedUnit(false);
+      return;
+    }
+
+    if (userSelectedUnit) {
+      if (!isNaN(props.value.value)) {
+        const converted = Qty(props.value.value, props.value.unit).to(
+          unit
+        ).scalar;
+        setInputValue(converted);
+      } else {
+        setInputValue(props.value.value);
+      }
+    } else {
+      setInputValue(props.value.value);
+      setUnit(props.value.unit);
+    }
+  }, [props.value.value, props.value.unit, unit]);
+
+  const handleUserValueChange = (newValue: number) => {
+    setInputValue(newValue);
+
+    if (props.onOwnChange) {
+      try {
+        const converted = Qty(newValue * siPrefixes[prefix], unit).to(
+          props.value.unit
+        ).scalar;
+
+        props.onOwnChange({ unit: props.value.unit, value: converted });
+      } catch (error) {
+        console.error('Conversion error', error);
+      }
+    }
+  };
+
+  const handlePrefixChange = (newPrefix: string) => {
+    setPrefix(newPrefix);
+  };
+
+  const handleUserUnitChange = (newUnit: string) => {
+    if (!newUnit) return;
+    const oldInputValue = inputValue;
+    const oldUnit = unit;
+    setUnit(newUnit);
+    setPrefix('Default prefix');
+
+    const convertedValue = Qty(oldInputValue * siPrefixes[prefix], oldUnit).to(
+      newUnit
+    ).scalar;
+    setInputValue(convertedValue);
+  };
+
+  return (
+    <Grid container spacing={2} alignItems="center">
+      <Grid item xs={12} md={4}>
+        <TextFieldWithDesc
+          disabled={disabled}
+          type="number"
+          fullWidth
+          sx={{ width: { xs: '75%', sm: '80%', md: '90%' } }}
+          value={(inputValue / siPrefixes[prefix])
+            .toFixed(9)
+            .replace(/(\d*\.\d+?)0+$/, '$1')}
+          onOwnChange={(value) => handleUserValueChange(parseFloat(value))}
+        />
+      </Grid>
+
+      <Grid item xs={12} md={3}>
+        <Select
+          fullWidth
+          disabled={disableChangingUnit}
+          value={prefix}
+          sx={{ width: { xs: '75%', sm: '80%', md: '90%' } }}
+          onChange={(evt) => {
+            handlePrefixChange(evt.target.value || '');
+          }}
+        >
+          {Object.keys(siPrefixes).map((key) => (
+            <MenuItem key={key} value={key}>
+              {key}
+            </MenuItem>
+          ))}
+        </Select>
+      </Grid>
+
+      <Grid item xs={12} md={5}>
+        <Select
+          fullWidth
+          disabled={disableChangingUnit}
+          placeholder={'Unit'}
+          sx={{ width: { xs: '75%', sm: '80%', md: '90%' } }}
+          value={unit}
+          onChange={(event) => {
+            setUserSelectedUnit(true);
+            handleUserUnitChange(event.target.value || '');
+          }}
+        >
+          {unitOptions.map((key) => (
+            <MenuItem key={key} value={key}>
+              {key}
+            </MenuItem>
+          ))}
+        </Select>
+      </Grid>
+    </Grid>
+  );
+}

src/components/input/ToolVideoInput.tsx

@@ -5,11 +5,12 @@ import 'rc-slider/assets/index.css';
 import BaseFileInput from './BaseFileInput';
 import { BaseFileInputProps, formatTime } from './file-input-utils';
 
-interface VideoFileInputProps extends BaseFileInputProps {
+interface VideoFileInputProps extends Omit<BaseFileInputProps, 'accept'> {
   showTrimControls?: boolean;
   onTrimChange?: (trimStart: number, trimEnd: number) => void;
   trimStart?: number;
   trimEnd?: number;
+  accept?: string[];
 }
 
 export default function ToolVideoInput({
@@ -17,6 +18,7 @@ export default function ToolVideoInput({
   onTrimChange,
   trimStart = 0,
   trimEnd = 100,
+  accept = ['video/*', '.mkv'],
   ...props
 }: VideoFileInputProps) {
   const videoRef = useRef<HTMLVideoElement>(null);
@@ -38,7 +40,7 @@ export default function ToolVideoInput({
   };
 
   return (
-    <BaseFileInput {...props} type={'video'}>
+    <BaseFileInput {...props} type={'video'} accept={accept}>
       {({ preview }) => (
         <Box
           sx={{