demostf/frontend
1
0
Fork 0
mirror of https://codeberg.org/demostf/frontend.git synced 2026-06-03 18:24:12 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

put share button under menu

Browse source
This commit is contained in:
Robin Appelman 2024-11-30 23:30:44 +01:00
commit 9c82b445a3
2 changed files with 53 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

67
script/viewer/Analyse/AnalyseMenu.tsx
View file

@ -5,44 +5,45 @@ export interface AnalyseMenuProps {
isShared: boolean;
clients: number,
inShared: boolean,
open: boolean,
}
export function AnalyseMenu(props: AnalyseMenuProps) {
const loc = () => window.location.toString().replace(/\#.*/, '') + '#' + props.sessionName;
const shareText = () => (props.isShared) ?
<input class="share-text" value={loc()} readOnly={true}
title="Use this link to join the current session"
style={{width: `${(loc().length * 8)}px`}}
onFocus={(event) => {
(event.target as HTMLInputElement).select()
}}/> : <span class="share-text">Start a shared session</span>;
const clientCount = () => (props.isShared) ?
<div class="clients">{props.clients} {(props.clients === 1) ? "spectator" : "spectators"}</div> : [];
const shareButton = () => {
if (props.canShare) {
return [
<div class="share">
<button class="share-session" title="Start a shared session"
onClick={() => {
props.onShare()
}}/>
{shareText}
</div>,
clientCount,
]
} else if (props.inShared) {
return <div class="share shared">
You're spectating a session controlled by someone else
</div>
} else {
return [];
}
}
return (<div class="analyse-menu">
{shareButton}
<Show when={props.inShared}>
<div class="share shared">
You're spectating a session controlled by someone else
</div>
</Show>
<Show when={!props.inShared}>
<details>
<summary title="Menu">☰</summary>
<ul class="menu">
<li>
<button class="share-session" title="Start a shared session" disabled={props.isShared}
onClick={() => {
props.onShare()
}}>
<Show when={!props.isShared}>
Start a shared session
</Show>
<Show when={props.isShared}>
<input class="share-text" value={loc()} readOnly={true}
title="Use this link to join the current session"
style={{width: `${(loc().length * 8)}px`}}
onFocus={(event) => {
(event.target as HTMLInputElement).select()
}}/>
</Show>
</button>
</li>
</ul>
</details>
</Show>
<Show when={props.isShared && !props.inShared}>
<div class="clients">{props.clients} {(props.clients === 1) ? "spectator" : "spectators"}</div>
</Show>
</div>)
}