import * as React from 'react'; import {useEffect, useRef, useState} from 'react'; import theme from "./theme"; import {Checkbox, Chip, FormControl, FormControlLabel, InputLabel, Link, Select, useMediaQuery} from "@mui/material"; import TextField from "@mui/material/TextField"; import priority1 from "../img/priority-1.svg"; import priority2 from "../img/priority-2.svg"; import priority3 from "../img/priority-3.svg"; import priority4 from "../img/priority-4.svg"; import priority5 from "../img/priority-5.svg"; import Dialog from "@mui/material/Dialog"; import DialogTitle from "@mui/material/DialogTitle"; import DialogContent from "@mui/material/DialogContent"; import Button from "@mui/material/Button"; import Typography from "@mui/material/Typography"; import IconButton from "@mui/material/IconButton"; import InsertEmoticonIcon from '@mui/icons-material/InsertEmoticon'; import {Close} from "@mui/icons-material"; import MenuItem from "@mui/material/MenuItem"; import {formatBytes, maybeWithAuth, topicShortUrl, topicUrl, validTopic, validUrl} from "../app/utils"; import Box from "@mui/material/Box"; import AttachmentIcon from "./AttachmentIcon"; import DialogFooter from "./DialogFooter"; import api from "../app/Api"; import userManager from "../app/UserManager"; import EmojiPicker from "./EmojiPicker"; import {Trans, useTranslation} from "react-i18next"; import session from "../app/Session"; import routes from "./routes"; import accountApi from "../app/AccountApi"; import {UnauthorizedError} from "../app/errors"; const PublishDialog = (props) => { const { t } = useTranslation(); const [baseUrl, setBaseUrl] = useState(""); const [topic, setTopic] = useState(""); const [message, setMessage] = useState(""); const [messageFocused, setMessageFocused] = useState(true); const [title, setTitle] = useState(""); const [tags, setTags] = useState(""); const [priority, setPriority] = useState(3); const [clickUrl, setClickUrl] = useState(""); const [attachUrl, setAttachUrl] = useState(""); const [attachFile, setAttachFile] = useState(null); const [filename, setFilename] = useState(""); const [filenameEdited, setFilenameEdited] = useState(false); const [email, setEmail] = useState(""); const [delay, setDelay] = useState(""); const [publishAnother, setPublishAnother] = useState(false); const [showTopicUrl, setShowTopicUrl] = useState(""); const [showClickUrl, setShowClickUrl] = useState(false); const [showAttachUrl, setShowAttachUrl] = useState(false); const [showEmail, setShowEmail] = useState(false); const [showDelay, setShowDelay] = useState(false); const showAttachFile = !!attachFile && !showAttachUrl; const attachFileInput = useRef(); const [attachFileError, setAttachFileError] = useState(""); const [activeRequest, setActiveRequest] = useState(null); const [status, setStatus] = useState(""); const disabled = !!activeRequest; const [emojiPickerAnchorEl, setEmojiPickerAnchorEl] = useState(null); const [dropZone, setDropZone] = useState(false); const [sendButtonEnabled, setSendButtonEnabled] = useState(true); const open = !!props.openMode; const fullScreen = useMediaQuery(theme.breakpoints.down('sm')); useEffect(() => { window.addEventListener('dragenter', () => { props.onDragEnter(); setDropZone(true); }); }, []); useEffect(() => { setBaseUrl(props.baseUrl); setTopic(props.topic); setShowTopicUrl(!props.baseUrl || !props.topic); setMessageFocused(!!props.topic); // Focus message only if topic is set }, [props.baseUrl, props.topic]); useEffect(() => { const valid = validUrl(baseUrl) && validTopic(topic) && !attachFileError; setSendButtonEnabled(valid); }, [baseUrl, topic, attachFileError]); useEffect(() => { setMessage(props.message); }, [props.message]); const updateBaseUrl = (newVal) => { if (validUrl(newVal)) { setBaseUrl(newVal.replace(/\/$/, '')); // strip traililng slash after https?:// } else { setBaseUrl(newVal); } }; const handleSubmit = async () => { const url = new URL(topicUrl(baseUrl, topic)); if (title.trim()) { url.searchParams.append("title", title.trim()); } if (tags.trim()) { url.searchParams.append("tags", tags.trim()); } if (priority && priority !== 3) { url.searchParams.append("priority", priority.toString()); } if (clickUrl.trim()) { url.searchParams.append("click", clickUrl.trim()); } if (attachUrl.trim()) { url.searchParams.append("attach", attachUrl.trim()); } if (filename.trim()) { url.searchParams.append("filename", filename.trim()); } if (email.trim()) { url.searchParams.append("email", email.trim()); } if (delay.trim()) { url.searchParams.append("delay", delay.trim()); } if (attachFile && message.trim()) { url.searchParams.append("message", message.replaceAll("\n", "\\n").trim()); } const body = (attachFile) ? attachFile : message; try { const user = await userManager.get(baseUrl); const headers = maybeWithAuth({}, user); const progressFn = (ev) => { if (ev.loaded > 0 && ev.total > 0) { setStatus(t("publish_dialog_progress_uploading_detail", { loaded: formatBytes(ev.loaded), total: formatBytes(ev.total), percent: Math.round(ev.loaded * 100.0 / ev.total) })); } else { setStatus(t("publish_dialog_progress_uploading")); } }; const request = api.publishXHR(url, body, headers, progressFn); setActiveRequest(request); await request; if (!publishAnother) { props.onClose(); } else { setStatus(t("publish_dialog_message_published")); setActiveRequest(null); } } catch (e) { setStatus({e}); setActiveRequest(null); } }; const checkAttachmentLimits = async (file) => { try { const account = await accountApi.get(); const fileSizeLimit = account.limits.attachment_file_size ?? 0; const remainingBytes = account.stats.attachment_total_size_remaining; const fileSizeLimitReached = fileSizeLimit > 0 && file.size > fileSizeLimit; const quotaReached = remainingBytes > 0 && file.size > remainingBytes; if (fileSizeLimitReached && quotaReached) { return setAttachFileError(t("publish_dialog_attachment_limits_file_and_quota_reached", { fileSizeLimit: formatBytes(fileSizeLimit), remainingBytes: formatBytes(remainingBytes) })); } else if (fileSizeLimitReached) { return setAttachFileError(t("publish_dialog_attachment_limits_file_reached", { fileSizeLimit: formatBytes(fileSizeLimit) })); } else if (quotaReached) { return setAttachFileError(t("publish_dialog_attachment_limits_quota_reached", { remainingBytes: formatBytes(remainingBytes) })); } setAttachFileError(""); } catch (e) { console.log(`[PublishDialog] Retrieving attachment limits failed`, e); if (e instanceof UnauthorizedError) { session.resetAndRedirect(routes.login); } else { setAttachFileError(""); // Reset error (rely on server-side checking) } } }; const handleAttachFileClick = () => { attachFileInput.current.click(); }; const handleAttachFileChanged = async (ev) => { await updateAttachFile(ev.target.files[0]); }; const handleAttachFileDrop = async (ev) => { ev.preventDefault(); setDropZone(false); await updateAttachFile(ev.dataTransfer.files[0]); }; const updateAttachFile = async (file) => { setAttachFile(file); setFilename(file.name); props.onResetOpenMode(); await checkAttachmentLimits(file); }; const handleAttachFileDragLeave = () => { setDropZone(false); if (props.openMode === PublishDialog.OPEN_MODE_DRAG) { props.onClose(); // Only close dialog if it was not open before dragging file in } }; const handleEmojiClick = (ev) => { setEmojiPickerAnchorEl(ev.currentTarget); }; const handleEmojiPick = (emoji) => { setTags(tags => (tags.trim()) ? `${tags.trim()}, ${emoji}` : emoji); }; const handleEmojiClose = () => { setEmojiPickerAnchorEl(null); }; const priorities = { 1: { label: t("publish_dialog_priority_min"), file: priority1 }, 2: { label: t("publish_dialog_priority_low"), file: priority2 }, 3: { label: t("publish_dialog_priority_default"), file: priority3 }, 4: { label: t("publish_dialog_priority_high"), file: priority4 }, 5: { label: t("publish_dialog_priority_max"), file: priority5 } }; return ( <> {dropZone && } {(baseUrl && topic) ? t("publish_dialog_title_topic", { topic: topicShortUrl(baseUrl, topic) }) : t("publish_dialog_title_no_topic")} {dropZone && } {showTopicUrl && { setBaseUrl(props.baseUrl); setTopic(props.topic); setShowTopicUrl(false); }}> updateBaseUrl(ev.target.value)} disabled={disabled} type="url" variant="standard" sx={{flexGrow: 1, marginRight: 1}} inputProps={{ "aria-label": t("publish_dialog_base_url_label") }} /> setTopic(ev.target.value)} disabled={disabled} type="text" variant="standard" autoFocus={!messageFocused} sx={{flexGrow: 1}} inputProps={{ "aria-label": t("publish_dialog_topic_label") }} /> } setTitle(ev.target.value)} disabled={disabled} type="text" fullWidth variant="standard" inputProps={{ "aria-label": t("publish_dialog_title_label") }} /> setMessage(ev.target.value)} disabled={disabled} type="text" variant="standard" rows={5} autoFocus={messageFocused} fullWidth multiline inputProps={{ "aria-label": t("publish_dialog_message_label") }} />
setTags(ev.target.value)} disabled={disabled} type="text" variant="standard" sx={{flexGrow: 1, marginRight: 1}} inputProps={{ "aria-label": t("publish_dialog_tags_label") }} />
{showClickUrl && { setClickUrl(""); setShowClickUrl(false); }}> setClickUrl(ev.target.value)} disabled={disabled} type="url" fullWidth variant="standard" inputProps={{ "aria-label": t("publish_dialog_click_label") }} /> } {showEmail && { setEmail(""); setShowEmail(false); }}> setEmail(ev.target.value)} disabled={disabled} type="email" variant="standard" fullWidth inputProps={{ "aria-label": t("publish_dialog_email_label") }} /> } {showAttachUrl && { setAttachUrl(""); setFilename(""); setFilenameEdited(false); setShowAttachUrl(false); }}> { const url = ev.target.value; setAttachUrl(url); if (!filenameEdited) { try { const u = new URL(url); const parts = u.pathname.split("/"); if (parts.length > 0) { setFilename(parts[parts.length-1]); } } catch (e) { // Do nothing } } }} disabled={disabled} type="url" variant="standard" sx={{flexGrow: 5, marginRight: 1}} inputProps={{ "aria-label": t("publish_dialog_attach_label") }} /> { setFilename(ev.target.value); setFilenameEdited(true); }} disabled={disabled} type="text" variant="standard" sx={{flexGrow: 1}} inputProps={{ "aria-label": t("publish_dialog_filename_label") }} /> } {showAttachFile && setFilename(f)} onClose={() => { setAttachFile(null); setAttachFileError(""); setFilename(""); }} />} {showDelay && { setDelay(""); setShowDelay(false); }}> setDelay(ev.target.value)} disabled={disabled} type="text" variant="standard" fullWidth inputProps={{ "aria-label": t("publish_dialog_delay_label") }} /> } {t("publish_dialog_other_features")}
{!showClickUrl && setShowClickUrl(true)} sx={{marginRight: 1, marginBottom: 1}}/>} {!showEmail && setShowEmail(true)} sx={{marginRight: 1, marginBottom: 1}}/>} {!showAttachUrl && !showAttachFile && setShowAttachUrl(true)} sx={{marginRight: 1, marginBottom: 1}}/>} {!showAttachFile && !showAttachUrl && handleAttachFileClick()} sx={{marginRight: 1, marginBottom: 1}}/>} {!showDelay && setShowDelay(true)} sx={{marginRight: 1, marginBottom: 1}}/>} {!showTopicUrl && setShowTopicUrl(true)} sx={{marginRight: 1, marginBottom: 1}}/>}
}} />
{activeRequest && } {!activeRequest && <> setPublishAnother(ev.target.checked)} inputProps={{ "aria-label": t("publish_dialog_checkbox_publish_another") }} /> } /> }
); }; const Row = (props) => { return (
{props.children}
); }; const ClosableRow = (props) => { const closable = (props.hasOwnProperty("closable")) ? props.closable : true; return ( {props.children} {closable && } ); }; const DialogIconButton = (props) => { const sx = props.sx || {}; return ( {props.children} ); }; const AttachmentBox = (props) => { const { t } = useTranslation(); const file = props.file; return ( <> {t("publish_dialog_attached_file_title")} props.onChangeFilename(ev.target.value)} disabled={props.disabled} />
{formatBytes(file.size)} {props.error && {" "}({props.error}) }
); }; const ExpandingTextField = (props) => { const invisibleFieldRef = useRef(); const [textWidth, setTextWidth] = useState(props.minWidth); const determineTextWidth = () => { const boundingRect = invisibleFieldRef?.current?.getBoundingClientRect(); if (!boundingRect) { return props.minWidth; } return (boundingRect.width >= props.minWidth) ? Math.round(boundingRect.width) : props.minWidth; }; useEffect(() => { setTextWidth(determineTextWidth() + 5); }, [props.value]); return ( <> {props.value} ) }; const DropArea = (props) => { const allowDrag = (ev) => { // This is where we could disallow certain files to be dragged in. // For now we allow all files. ev.dataTransfer.dropEffect = 'copy'; ev.preventDefault(); }; return ( ); }; const DropBox = () => { const { t } = useTranslation(); return ( {t("publish_dialog_drop_file_here")} ); } PublishDialog.OPEN_MODE_DEFAULT = "default"; PublishDialog.OPEN_MODE_DRAG = "drag"; export default PublishDialog;