Add framerate input to file component (#80)

fishjam-dev · Mar 21, 2024 · e5b0ec0 · e5b0ec0
1 parent 0ca7913
commit e5b0ec0
Showing 1 changed file with 19 additions and 7 deletions.
diff --git a/src/components/AddFileComponent.tsx b/src/components/AddFileComponent.tsx
@@ -10,23 +10,34 @@ type Props = {
 };
 
 const urlAtom = atomWithStorage("file-path", "");
+const framerateAtom = atomWithStorage<null | number>("file-framerate", null);
 
 const AddFileComponent: FC<Props> = ({ roomId, refetchIfNeeded, hasFileComponent }) => {
   const { roomApi } = useServerSdk();
   const [filePath, setFilePath] = useAtom(urlAtom);
+  const [framerate, setFramerate] = useAtom(framerateAtom);
 
   return (
     <div className="w-full card bg-base-100 shadow-xl indicator">
       <div className="card-body p-4">
-        <div className="flex flex-row justify-between gap-2">
-          <div className="flex flex-col flex-grow">
+        <div className="flex">
+          <input
+            value={filePath}
+            onChange={(e) => setFilePath(e.target.value.trim())}
+            className="input input-bordered flex-grow"
+            placeholder="File Path"
+          />
+          <label className="ml-2 flex items-center gap-1 mr-1 min-w-0">
+            <span>Framerate</span>
             <input
-              value={filePath}
-              onChange={(e) => setFilePath(e.target.value.trim())}
-              className="input input-bordered w-full"
-              placeholder="File Path"
+              type="number"
+              value={framerate ?? ""}
+              min={1}
+              onChange={(e) => setFramerate(parseInt(e.target.value) || null)}
+              className="input input-bordered flex-1 min-w-0"
+              placeholder="30"
             />
-          </div>
+          </label>
           <div
             className={!hasFileComponent ? "" : "tooltip tooltip-info z-10"}
             data-tip={hasFileComponent ? "File component already exists in this room" : ""}
@@ -39,6 +50,7 @@ const AddFileComponent: FC<Props> = ({ roomId, refetchIfNeeded, hasFileComponent
                     type: "file",
                     options: {
                       filePath: filePath,
+                      framerate: framerate ?? undefined,
                     },
                   })
                   .then(() => {