import wsAPI from "@/app/[language]/site/lib/wsAPI"; import { useSiteStore } from "@/state/Stores"; import { observer } from "mobx-react-lite"; import { useTranslations } from "next-intl"; import { Button, Col, Input, Row } from "reactstrap"; const EventPB = require("@/Event_pb"); export default observer(() => { const { targetSiteID, isEditable, input, setInput, isLoggedIn, setAvatarsOpened, setConfigureOpened, setLogInOpened, } = useSiteStore(); const t = useTranslations(); const postFile = (file: File) => { const fr = new FileReader(); fr.readAsArrayBuffer(file); fr.addEventListener("loadend", () => { const { result } = fr; wsAPI.send({ eventID: EventPB.Event.EventID.POST_FILE, text: file.name, data: [new Uint8Array(result as ArrayBufferLike)], }); }); }; return ( <Row className="g-0"> <Col className="m-1" xs="auto"> <Button onClick={() => { const inputElement = document.createElement("input"); inputElement.type = "file"; inputElement.accept = "audio/*,image/*,video/*"; inputElement.addEventListener("change", ({ target }) => { const file = (target as HTMLInputElement).files?.[0]; if (file) { postFile(file); } }); inputElement.click(); }} > {t("postFile")} </Button> </Col> <Col className="m-1"> <Input disabled={!isEditable} value={input} onChange={({ target: { value } }) => { setInput(value); }} onKeyDown={({ key }) => { if (key === "Enter") { if (input.length > 0) { wsAPI.send({ eventID: EventPB.Event.EventID.SITE_YELL, text: JSON.stringify({ siteID: targetSiteID, siteYell: input, }), }); setInput(""); } } }} onPaste={({ clipboardData: { items } }) => { const data = items[0]; if (data && data.kind === "file") { const file = data.getAsFile(); if (file) { postFile(file); } } }} /> </Col> <Col className="m-1" xs="auto"> {isLoggedIn ? ( <Button color="danger" onClick={() => { window.localStorage.removeItem("avatarCipher"); window.localStorage.removeItem("autoLogIn"); wsAPI.send({ eventID: EventPB.Event.EventID.NOT_LOG_IN, }); }} > {t("notLogIn")} </Button> ) : ( <Button color="success" onClick={() => { setLogInOpened(true); }} > {t("logIn")} </Button> )} </Col> <Col className="m-1" xs="auto"> <Button color="info" onClick={() => { setAvatarsOpened(true); }} > {t("onAvatars")} </Button> </Col> <Col className="m-1" xs="auto"> <Button onClick={() => { setConfigureOpened(true); }} > {t("onConfigure")} </Button> </Col> </Row> ); });