mregosar
c69d5548e5
Der Organisator bekommt einen Link auf /stream/match/<id>, die Stream-Übersicht nur für dieses Match. Der Zuschauercode bleibt außen vor. Ist STREAM_KEY gesetzt, wird der Schlüssel angehängt.
46 lines
2.2 KiB
React
46 lines
2.2 KiB
React
import CopyField from './CopyField.jsx';
|
||
|
||
export default function OrganizerPanel({ state, act, busy, matchId, token }) {
|
||
const { codes, links } = state.organizer;
|
||
const open = !['finished', 'cancelled'].includes(state.status);
|
||
const orgLink = `${window.location.origin}/m/${matchId}#org=${token}`;
|
||
|
||
const regen = (target, label) =>
|
||
window.confirm(`Neuen Code für ${label} erzeugen? Der alte Link funktioniert dann nicht mehr. Bereits beigetretene Spieler bleiben im Team.`) &&
|
||
act('codes/regenerate', { target }, `Neuer Code für ${label}`);
|
||
|
||
return (
|
||
<section className="panel organizer-panel">
|
||
<h2>Einladungen</h2>
|
||
<p className="small muted">Jeder Link führt nur in das jeweilige Team. Gib ihn ausschließlich an dieses Team weiter.</p>
|
||
{[
|
||
['A', state.teams.A.name, 'team-A'],
|
||
['B', state.teams.B.name, 'team-B'],
|
||
['spectator', 'Zuschauer (Stream, Kommentatoren)', 'spectator'],
|
||
].map(([key, label, cls]) => (
|
||
<div key={key} className={`invite ${cls}`}>
|
||
<div className="invite-head">
|
||
<strong>{label}</strong>
|
||
<span className="invite-code">{codes[key]}</span>
|
||
{open && <button className="link-btn" disabled={!!busy} onClick={() => regen(key, label)}>Neuer Code</button>}
|
||
</div>
|
||
<CopyField value={links[key]} />
|
||
{key === 'spectator' && (
|
||
<div className="stream-link">
|
||
<CopyField label="Stream-Übersicht (als Browserquelle in OBS, 1920×1080)" value={links.stream} />
|
||
<a className="btn btn-sm" href={links.stream} target="_blank" rel="noreferrer">Stream-Ansicht öffnen</a>
|
||
<CopyField label="Match-Übersicht (nur dieses Match, ohne Zuschauercode)" value={links.overview} />
|
||
<a className="btn btn-sm" href={links.overview} target="_blank" rel="noreferrer">Match-Übersicht öffnen</a>
|
||
</div>
|
||
)}
|
||
</div>
|
||
))}
|
||
<details className="org-link">
|
||
<summary>Organisator-Zugang auf einem anderen Gerät öffnen</summary>
|
||
<p className="small muted">Dieser Link gibt volle Kontrolle über das Match. Nicht weitergeben.</p>
|
||
<CopyField value={orgLink} secret />
|
||
</details>
|
||
</section>
|
||
);
|
||
}
|