1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
|
import { html, render, useEffect, useRef, useState } from './vendor/htm-preact.js';
import { t } from './i18n.js';
/**
* Ask why a file is being reported, drawn by the page like `ask.js`.
*
* Resolves `{ reason, detail }`, or null when cancelled. The reasons are the
* hub's own closed list (api/moderation.py `ReportRequest`), and the detail is
* bounded to what the hub keeps (256 characters).
*/
const REASONS = ['illegal', 'spam', 'copyright', 'other'];
function ReportDialog({ name, onDone }) {
const [reason, setReason] = useState('illegal');
const [detail, setDetail] = useState('');
const firstRef = useRef(null);
useEffect(() => { if (firstRef.current) firstRef.current.focus(); }, []);
return html`
<div class="video-overlay" onClick=${(e) => {
if (e.target.classList.contains('video-overlay')) onDone(null);
}}>
<form class="music-detail playlist-modal" role="dialog" aria-modal="true"
onKeyDown=${(e) => { if (e.key === 'Escape') { e.preventDefault(); onDone(null); } }}
onSubmit=${(e) => {
e.preventDefault();
onDone({ reason, detail: detail.trim() || null });
}}>
<div class="playlist-modal-body">
<div class="ask-message"><strong>${t('report.title')}</strong></div>
<div class="ask-message file-name">${name}</div>
<p class="settings-hint">${t('report.hint')}</p>
<select ref=${firstRef} value=${reason}
onChange=${(e) => setReason(e.target.value)}>
${REASONS.map((r) => html`
<option key=${r} value=${r}>${t('report.reason_' + r)}</option>`)}
</select>
<textarea maxlength="256" placeholder=${t('report.detail_placeholder')}
value=${detail} onInput=${(e) => setDetail(e.target.value)} />
<div class="playlist-modal-actions">
<button type="button" class="tb-btn" onClick=${() => onDone(null)}>
${t('dialog.cancel')}</button>
<button type="submit" class="admin-btn">${t('report.send')}</button>
</div>
</div>
</form>
</div>
`;
}
export function askReport(name) {
return new Promise((resolve) => {
const host = document.createElement('div');
document.body.appendChild(host);
const previous = document.activeElement;
let settled = false;
const onDone = (value) => {
if (settled) return;
settled = true;
render(null, host);
host.remove();
if (previous && previous.isConnected && typeof previous.focus === 'function') {
previous.focus();
}
resolve(value);
};
render(html`<${ReportDialog} name=${String(name)} onDone=${onDone} />`, host);
});
}
|