Added add file component UI (#66)

* Added add file component UI

* Fix prettier and linter

---------

Co-authored-by: Kamil Stasiak <kamilstasiaknew@gmail.com>

src/components/AddFileComponent.tsx

@@ -0,0 +1,59 @@
+import React, { FC } from "react";
+import { useServerSdk } from "./ServerSdkContext";
+import { useAtom } from "jotai";
+import { atomWithStorage } from "jotai/utils";
+
+type Props = {
+  roomId: string;
+  refetchIfNeeded: () => void;
+  hasFileComponent: boolean;
+};
+
+const urlAtom = atomWithStorage("file-path", "");
+
+const AddFileComponent: FC<Props> = ({ roomId, refetchIfNeeded, hasFileComponent }) => {
+  const { roomApi } = useServerSdk();
+  const [filePath, setFilePath] = useAtom(urlAtom);
+
+  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">
+          <div className="flex flex-col gap-2">
+            <input
+              value={filePath}
+              onChange={(e) => setFilePath(e.target.value.trim())}
+              className="input input-bordered w-full"
+              placeholder="File Path"
+            />
+          </div>
+          <div
+            className={!hasFileComponent ? "" : "tooltip tooltip-info z-10"}
+            data-tip={hasFileComponent ? "File component already exists in this room" : ""}
+          >
+            <button
+              disabled={hasFileComponent}
+              onClick={() => {
+                roomApi
+                  ?.addComponent(roomId, {
+                    type: "file",
+                    options: {
+                      filePath: filePath,
+                    },
+                  })
+                  .then(() => {
+                    refetchIfNeeded();
+                  });
+              }}
+              className="btn btn-success"
+            >
+              Add File
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AddFileComponent;

src/containers/Room.tsx

@@ -8,6 +8,7 @@ import { Peer, Room as RoomAPI } from "../server-sdk";
 import { useServerSdk } from "../components/ServerSdkContext";
 import { getBooleanValue, loadObject, saveObject } from "../utils/localStorageUtils";
 import { useStore } from "./RoomsContext";
+import AddFileComponent from "../components/AddFileComponent";
 import AddRtspComponent from "../components/AddRtspComponent";
 import AddHlsComponent from "../components/AddHlsComponent";
 import ComponentsInRoom from "../components/ComponentsInRoom";
@@ -189,6 +190,11 @@ export const Room = ({ roomId, refetchIfNeeded, refetchRequested }: RoomProps) =
       {showComponents && (
         <div className="flex flex-row gap-2 items-start">
           <div className="flex flex-col w-150 gap-1">
+            <AddFileComponent
+              hasFileComponent={room.roomStatus.components.some((component) => component.type === "file")}
+              roomId={roomId}
+              refetchIfNeeded={refetchIfNeededInner}
+            />
             <AddRtspComponent roomId={roomId} refetchIfNeeded={refetchIfNeededInner} />
             <AddHlsComponent
               hasHlsComponent={room.roomStatus.components.some((component) => component.type === "hls")}