import { observer } from "mobx-react-lite"; import { useTranslation } from "react-i18next"; import { Button, Col, Input, Row } from "reactstrap"; import { useSiteStore } from "src/Stores"; import SiteComponent from "src/site/SiteComponent"; const EventPB = require("src/Event_pb"); export default observer(() => { const { targetSiteID, isEditable, input, setInput, isSignedIn, setAvatarsOpened, setConfigureOpened, setSignInOpened, } = useSiteStore(); const { t } = useTranslation(); const postFile = (file: File) => { const fr = new FileReader(); fr.readAsArrayBuffer(file); fr.addEventListener("loadend", () => { const { result } = fr; SiteComponent.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", async ({ 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) { SiteComponent.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"> {isSignedIn ? ( <Button color="danger" onClick={() => { window.localStorage.removeItem("avatarCipher"); window.localStorage.removeItem("autoSignIn"); SiteComponent.send({ eventID: EventPB.Event.EventID.NOT_SIGN_IN, }); }} > {t("notSignIn")} </Button> ) : ( <Button color="success" onClick={() => { setSignInOpened(true); }} > {t("signIn")} </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> ); });