kopia lustrzana https://github.com/cheeaun/phanpy
528 wiersze
17 KiB
JavaScript
528 wiersze
17 KiB
JavaScript
import './compose.css';
|
|
|
|
import '@github/text-expander-element';
|
|
import { useEffect, useMemo, useRef, useState } from 'preact/hooks';
|
|
|
|
import emojifyText from '../utils/emojify-text';
|
|
import store from '../utils/store';
|
|
import visibilityIconsMap from '../utils/visibility-icons-map';
|
|
|
|
import Avatar from './avatar';
|
|
import Icon from './icon';
|
|
import Loader from './loader';
|
|
import Status from './status';
|
|
|
|
/* NOTES:
|
|
- Max character limit includes BOTH status text and Content Warning text
|
|
*/
|
|
|
|
export default ({ onClose, replyToStatus }) => {
|
|
const [uiState, setUIState] = useState('default');
|
|
|
|
const accounts = store.local.getJSON('accounts');
|
|
const currentAccount = store.session.get('currentAccount');
|
|
const currentAccountInfo = accounts.find(
|
|
(a) => a.info.id === currentAccount,
|
|
).info;
|
|
|
|
const configuration = useMemo(() => {
|
|
const instances = store.local.getJSON('instances');
|
|
const currentInstance = accounts.find(
|
|
(a) => a.info.id === currentAccount,
|
|
).instanceURL;
|
|
const config = instances[currentInstance].configuration;
|
|
console.log(config);
|
|
return config;
|
|
}, []);
|
|
|
|
const {
|
|
statuses: { maxCharacters, maxMediaAttachments, charactersReservedPerUrl },
|
|
mediaAttachments: {
|
|
supportedMimeTypes,
|
|
imageSizeLimit,
|
|
imageMatrixLimit,
|
|
videoSizeLimit,
|
|
videoMatrixLimit,
|
|
videoFrameRateLimit,
|
|
},
|
|
polls: { maxOptions, maxCharactersPerOption, maxExpiration, minExpiration },
|
|
} = configuration;
|
|
|
|
const textareaRef = useRef();
|
|
|
|
const [visibility, setVisibility] = useState(
|
|
replyToStatus?.visibility || 'public',
|
|
);
|
|
const [sensitive, setSensitive] = useState(replyToStatus?.sensitive || false);
|
|
const spoilerTextRef = useRef();
|
|
|
|
useEffect(() => {
|
|
let timer = setTimeout(() => {
|
|
const spoilerText = replyToStatus?.spoilerText;
|
|
if (spoilerText && spoilerTextRef.current) {
|
|
spoilerTextRef.current.value = spoilerText;
|
|
spoilerTextRef.current.focus();
|
|
} else {
|
|
textareaRef.current?.focus();
|
|
}
|
|
}, 0);
|
|
return () => clearTimeout(timer);
|
|
}, []);
|
|
|
|
const textExpanderRef = useRef();
|
|
const textExpanderTextRef = useRef('');
|
|
useEffect(() => {
|
|
if (textExpanderRef.current) {
|
|
const handleChange = (e) => {
|
|
console.log('text-expander-change', e);
|
|
const { key, provide, text } = e.detail;
|
|
textExpanderTextRef.current = text;
|
|
if (text === '') {
|
|
provide(
|
|
Promise.resolve({
|
|
matched: false,
|
|
}),
|
|
);
|
|
return;
|
|
}
|
|
const type = {
|
|
'@': 'accounts',
|
|
'#': 'hashtags',
|
|
}[key];
|
|
provide(
|
|
new Promise((resolve) => {
|
|
const resultsIterator = masto.search({
|
|
type,
|
|
q: text,
|
|
limit: 5,
|
|
});
|
|
resultsIterator.next().then(({ value }) => {
|
|
if (text !== textExpanderTextRef.current) {
|
|
return;
|
|
}
|
|
const results = value[type];
|
|
console.log('RESULTS', value, results);
|
|
const menu = document.createElement('ul');
|
|
menu.role = 'listbox';
|
|
menu.className = 'text-expander-menu';
|
|
results.forEach((result) => {
|
|
const {
|
|
name,
|
|
avatarStatic,
|
|
displayName,
|
|
username,
|
|
acct,
|
|
emojis,
|
|
} = result;
|
|
const displayNameWithEmoji = emojifyText(displayName, emojis);
|
|
const item = document.createElement('li');
|
|
item.setAttribute('role', 'option');
|
|
if (acct) {
|
|
item.dataset.value = acct;
|
|
// Want to use <Avatar /> here, but will need to render to string 😅
|
|
item.innerHTML = `
|
|
<span class="avatar">
|
|
<img src="${avatarStatic}" width="16" height="16" alt="" loading="lazy" />
|
|
</span>
|
|
<span>
|
|
<b>${displayNameWithEmoji || username}</b>
|
|
<br>@${acct}
|
|
</span>
|
|
`;
|
|
} else {
|
|
item.dataset.value = name;
|
|
item.innerHTML = `
|
|
<span>#<b>${name}</b></span>
|
|
`;
|
|
}
|
|
menu.appendChild(item);
|
|
});
|
|
console.log('MENU', results, menu);
|
|
resolve({
|
|
matched: results.length > 0,
|
|
fragment: menu,
|
|
});
|
|
});
|
|
}),
|
|
);
|
|
};
|
|
|
|
textExpanderRef.current.addEventListener(
|
|
'text-expander-change',
|
|
handleChange,
|
|
);
|
|
|
|
textExpanderRef.current.addEventListener('text-expander-value', (e) => {
|
|
const { key, item } = e.detail;
|
|
e.detail.value = key + item.dataset.value;
|
|
});
|
|
}
|
|
}, []);
|
|
|
|
const [mediaAttachments, setMediaAttachments] = useState([]);
|
|
|
|
const formRef = useRef();
|
|
|
|
const beforeUnloadCopy =
|
|
'You have unsaved changes. Are you sure you want to discard this post?';
|
|
const canClose = () => {
|
|
// check for status or mediaAttachments
|
|
if (textareaRef.current.value || mediaAttachments.length > 0) {
|
|
const yes = confirm(beforeUnloadCopy);
|
|
return yes;
|
|
}
|
|
return true;
|
|
};
|
|
|
|
useEffect(() => {
|
|
// Show warning if user tries to close window with unsaved changes
|
|
const handleBeforeUnload = (e) => {
|
|
if (!canClose()) {
|
|
e.preventDefault();
|
|
e.returnValue = beforeUnloadCopy;
|
|
}
|
|
};
|
|
window.addEventListener('beforeunload', handleBeforeUnload, {
|
|
capture: true,
|
|
});
|
|
return () =>
|
|
window.removeEventListener('beforeunload', handleBeforeUnload, {
|
|
capture: true,
|
|
});
|
|
}, []);
|
|
|
|
return (
|
|
<div id="compose-container">
|
|
<div class="compose-top">
|
|
{currentAccountInfo?.avatarStatic && (
|
|
<Avatar
|
|
url={currentAccountInfo.avatarStatic}
|
|
size="l"
|
|
alt={currentAccountInfo.username}
|
|
/>
|
|
)}
|
|
<button
|
|
type="button"
|
|
class="light close-button"
|
|
onClick={() => {
|
|
if (canClose()) {
|
|
onClose();
|
|
}
|
|
}}
|
|
>
|
|
<Icon icon="x" />
|
|
</button>
|
|
</div>
|
|
{!!replyToStatus && (
|
|
<div class="reply-to">
|
|
<Status status={replyToStatus} size="s" />
|
|
</div>
|
|
)}
|
|
<form
|
|
ref={formRef}
|
|
style={{
|
|
pointerEvents: uiState === 'loading' ? 'none' : 'auto',
|
|
opacity: uiState === 'loading' ? 0.5 : 1,
|
|
}}
|
|
onSubmit={(e) => {
|
|
e.preventDefault();
|
|
|
|
const formData = new FormData(e.target);
|
|
const entries = Object.fromEntries(formData.entries());
|
|
console.log('ENTRIES', entries);
|
|
let { status, visibility, sensitive, spoilerText } = entries;
|
|
|
|
// Pre-cleanup
|
|
sensitive = sensitive === 'on'; // checkboxes return "on" if checked
|
|
|
|
// Validation
|
|
if (status.length > maxCharacters) {
|
|
alert(`Status is too long! Max characters: ${maxCharacters}`);
|
|
return;
|
|
}
|
|
if (sensitive && status.length + spoilerText.length > maxCharacters) {
|
|
alert(
|
|
`Status and content warning is too long! Max characters: ${maxCharacters}`,
|
|
);
|
|
return;
|
|
}
|
|
// TODO: check for URLs and use `charactersReservedPerUrl` to calculate max characters
|
|
|
|
// Post-cleanup
|
|
spoilerText = (sensitive && spoilerText) || undefined;
|
|
status = status === '' ? undefined : status;
|
|
|
|
setUIState('loading');
|
|
(async () => {
|
|
try {
|
|
console.log('MEDIA ATTACHMENTS', mediaAttachments);
|
|
if (mediaAttachments.length > 0) {
|
|
// Upload media attachments first
|
|
const mediaPromises = mediaAttachments.map((attachment) => {
|
|
const params = {
|
|
file: attachment.file,
|
|
description: attachment.description || undefined,
|
|
};
|
|
return masto.mediaAttachments.create(params).then((res) => {
|
|
// Update media attachment with ID
|
|
if (res.id) {
|
|
attachment.id = res.id;
|
|
}
|
|
return res;
|
|
});
|
|
});
|
|
const results = await Promise.allSettled(mediaPromises);
|
|
|
|
// If any failed, return
|
|
if (
|
|
results.some(
|
|
(result) =>
|
|
result.status === 'rejected' || !result.value.id,
|
|
)
|
|
) {
|
|
setUIState('error');
|
|
// Alert all the reasons
|
|
results.forEach((result) => {
|
|
if (result.status === 'rejected') {
|
|
alert(result.reason || `Attachment #${i} failed`);
|
|
}
|
|
});
|
|
return;
|
|
}
|
|
|
|
console.log({ results, mediaAttachments });
|
|
}
|
|
|
|
const params = {
|
|
status,
|
|
visibility,
|
|
sensitive,
|
|
spoilerText,
|
|
inReplyToId: replyToStatus?.id || undefined,
|
|
mediaIds: mediaAttachments.map((attachment) => attachment.id),
|
|
};
|
|
console.log('POST', params);
|
|
const newStatus = await masto.statuses.create(params);
|
|
setUIState('default');
|
|
|
|
// Close
|
|
onClose({
|
|
newStatus,
|
|
});
|
|
} catch (e) {
|
|
alert(e);
|
|
setUIState('error');
|
|
}
|
|
})();
|
|
}}
|
|
>
|
|
<div class="toolbar stretch">
|
|
<input
|
|
ref={spoilerTextRef}
|
|
type="text"
|
|
name="spoilerText"
|
|
placeholder="Spoiler text"
|
|
disabled={uiState === 'loading'}
|
|
class="spoiler-text-field"
|
|
style={{
|
|
opacity: sensitive ? 1 : 0,
|
|
pointerEvents: sensitive ? 'auto' : 'none',
|
|
}}
|
|
/>
|
|
<label
|
|
class="toolbar-button"
|
|
title="Content warning or sensitive media"
|
|
>
|
|
<input
|
|
name="sensitive"
|
|
type="checkbox"
|
|
disabled={uiState === 'loading'}
|
|
onChange={(e) => {
|
|
const sensitive = e.target.checked;
|
|
setSensitive(sensitive);
|
|
if (sensitive) {
|
|
spoilerTextRef.current?.focus();
|
|
} else {
|
|
textareaRef.current?.focus();
|
|
}
|
|
}}
|
|
/>
|
|
<Icon icon={`eye-${sensitive ? 'close' : 'open'}`} />
|
|
</label>{' '}
|
|
<label
|
|
class={`toolbar-button ${
|
|
visibility !== 'public' && !sensitive ? 'show-field' : ''
|
|
}`}
|
|
title={`Visibility: ${visibility}`}
|
|
>
|
|
<Icon icon={visibilityIconsMap[visibility]} alt={visibility} />
|
|
<select
|
|
name="visibility"
|
|
value={visibility}
|
|
onChange={(e) => {
|
|
setVisibility(e.target.value);
|
|
}}
|
|
disabled={uiState === 'loading'}
|
|
>
|
|
<option value="public">
|
|
Public <Icon icon="earth" />
|
|
</option>
|
|
<option value="unlisted">Unlisted</option>
|
|
<option value="private">Followers only</option>
|
|
<option value="direct">Direct</option>
|
|
</select>
|
|
</label>{' '}
|
|
</div>
|
|
<text-expander ref={textExpanderRef} keys="@ #">
|
|
<textarea
|
|
class="large"
|
|
ref={textareaRef}
|
|
placeholder={
|
|
replyToStatus ? 'Post your reply' : 'What are you doing?'
|
|
}
|
|
required={mediaAttachments.length === 0}
|
|
autoCapitalize="sentences"
|
|
autoComplete="on"
|
|
autoCorrect="on"
|
|
spellCheck="true"
|
|
dir="auto"
|
|
rows="6"
|
|
cols="50"
|
|
name="status"
|
|
disabled={uiState === 'loading'}
|
|
onInput={(e) => {
|
|
const { scrollHeight, offsetHeight, clientHeight, value } =
|
|
e.target;
|
|
const offset = offsetHeight - clientHeight;
|
|
e.target.style.height = value
|
|
? scrollHeight + offset + 'px'
|
|
: null;
|
|
}}
|
|
style={{
|
|
maxHeight: `${maxCharacters / 50}em`,
|
|
}}
|
|
></textarea>
|
|
</text-expander>
|
|
{mediaAttachments.length > 0 && (
|
|
<div class="media-attachments">
|
|
{mediaAttachments.map((attachment, i) => {
|
|
const { url, type, id } = attachment;
|
|
const suffixType = type.split('/')[0];
|
|
return (
|
|
<div class="media-attachment" key={i + id}>
|
|
<div class="media-preview">
|
|
{suffixType === 'image' ? (
|
|
<img src={url} alt="" />
|
|
) : suffixType === 'video' ? (
|
|
<video src={url} playsinline muted />
|
|
) : suffixType === 'audio' ? (
|
|
<audio src={url} controls />
|
|
) : null}
|
|
</div>
|
|
<textarea
|
|
placeholder={
|
|
{
|
|
image: 'Image description',
|
|
video: 'Video description',
|
|
audio: 'Audio description',
|
|
}[suffixType]
|
|
}
|
|
autoCapitalize="sentences"
|
|
autoComplete="on"
|
|
autoCorrect="on"
|
|
spellCheck="true"
|
|
dir="auto"
|
|
disabled={uiState === 'loading'}
|
|
maxlength="1500"
|
|
// TODO: Un-hard-code this maxlength, ref: https://github.com/mastodon/mastodon/blob/b59fb28e90bc21d6fd1a6bafd13cfbd81ab5be54/app/models/media_attachment.rb#L39
|
|
onInput={(e) => {
|
|
const { value } = e.target;
|
|
// Modify `description` in media attachment
|
|
setMediaAttachments((attachments) => {
|
|
const newAttachments = [...attachments];
|
|
newAttachments[i].description = value;
|
|
return newAttachments;
|
|
});
|
|
}}
|
|
></textarea>
|
|
<div class="media-aside">
|
|
<button
|
|
type="button"
|
|
class="plain close-button"
|
|
disabled={uiState === 'loading'}
|
|
onClick={() => {
|
|
setMediaAttachments((attachments) => {
|
|
return attachments.filter((_, j) => j !== i);
|
|
});
|
|
}}
|
|
>
|
|
<Icon icon="x" />
|
|
</button>
|
|
{!!id && (
|
|
<Icon icon="upload" title="Uploaded" class="uploaded" />
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
<div class="toolbar">
|
|
<div>
|
|
<label class="toolbar-button">
|
|
<input
|
|
type="file"
|
|
accept={supportedMimeTypes.join(',')}
|
|
multiple={mediaAttachments.length < maxMediaAttachments - 1}
|
|
disabled={
|
|
uiState === 'loading' ||
|
|
mediaAttachments.length >= maxMediaAttachments
|
|
}
|
|
onChange={(e) => {
|
|
const files = e.target.files;
|
|
if (!files) return;
|
|
|
|
const mediaFiles = Array.from(files).map((file) => ({
|
|
file,
|
|
type: file.type,
|
|
size: file.size,
|
|
url: URL.createObjectURL(file),
|
|
id: null, // indicate uploaded state
|
|
description: null,
|
|
}));
|
|
console.log('MEDIA ATTACHMENTS', files, mediaFiles);
|
|
|
|
// Validate max media attachments
|
|
if (
|
|
mediaAttachments.length + mediaFiles.length >
|
|
maxMediaAttachments
|
|
) {
|
|
alert(
|
|
`You can only attach up to ${maxMediaAttachments} files.`,
|
|
);
|
|
} else {
|
|
setMediaAttachments((attachments) => {
|
|
return attachments.concat(mediaFiles);
|
|
});
|
|
}
|
|
}}
|
|
/>
|
|
<Icon icon="attachment" />
|
|
</label>
|
|
</div>
|
|
<div>
|
|
{uiState === 'loading' && <Loader />}{' '}
|
|
<button
|
|
type="submit"
|
|
class="large"
|
|
disabled={uiState === 'loading'}
|
|
>
|
|
{replyToStatus ? 'Reply' : 'Post'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
);
|
|
};
|