diff --git a/about/index.html b/about/index.html index 758e764..8f3e10c 100644 --- a/about/index.html +++ b/about/index.html @@ -40,6 +40,16 @@
  • Live: windows open as people go live and close when they stop. Click a window to hear it; the speaker button pins audio on; the slider is per window.
  • +
    Live page: windows, groups, names + +
    diff --git a/live/src/App.jsx b/live/src/App.jsx index c8e2d9f..f7e8cf2 100644 --- a/live/src/App.jsx +++ b/live/src/App.jsx @@ -6,6 +6,7 @@ import { audio } from './useAudio.js' import GoLive from './GoLive.jsx' import Tab from './Tab.jsx' import GroupLabel from './GroupLabel.jsx' +import GroupActions from './GroupActions.jsx' import { streamLabel } from './names.js' const components = { player: Player } @@ -18,6 +19,7 @@ const POLL_MS = 3000 export function arrange(api) { const panels = [...api.panels].sort((a, b) => ((a.params?.since || '').localeCompare(b.params?.since || '')) || a.id.localeCompare(b.id)) const n = panels.length; if (n < 2) return + if (api.hasMaximizedGroup?.()) api.exitMaximizedGroup?.() // a maximised window would hide the new grid const cols = Math.ceil(Math.sqrt(n)) for (let i = 1; i < n; i++) { const r = Math.floor(i / cols), c = i % cols @@ -92,7 +94,7 @@ export default function App() { )}
    + leftHeaderActionsComponent={GroupLabel} rightHeaderActionsComponent={GroupActions} onReady={onReady} />
    )} diff --git a/live/src/GroupActions.jsx b/live/src/GroupActions.jsx new file mode 100644 index 0000000..ef5704e --- /dev/null +++ b/live/src/GroupActions.jsx @@ -0,0 +1,16 @@ +import React, { useEffect, useState } from 'react' + +// Right end of every tab bar: maximise / restore this group. +export default function GroupActions({ api, containerApi }) { + const [max, setMax] = useState(() => api.isMaximized()) + useEffect(() => { + const d = containerApi.onDidMaximizedGroupChange?.(() => setMax(api.isMaximized())) + return () => d?.dispose?.() + }, [api, containerApi]) + const toggle = e => { e.stopPropagation(); if (api.isMaximized()) api.exitMaximized(); else api.maximize(); setMax(api.isMaximized()) } + return ( +
    e.stopPropagation()}> + +
    + ) +} diff --git a/live/src/styles.css b/live/src/styles.css index 6c08870..6887410 100644 --- a/live/src/styles.css +++ b/live/src/styles.css @@ -71,3 +71,6 @@ html, body, #root { height:100%; margin:0; background:var(--bg); color:var(--fg) .grouplabel { display:flex; align-items:center; height:100%; padding:0 10px; font-size:12px; white-space:nowrap; border-right:1px solid #2a2a2a; cursor:default; } .grouplabel .gname { color:var(--acc); font-weight:700; } .grouplabel .hint { color:#555; } +.groupactions { display:flex; align-items:center; height:100%; padding:0 6px; } +.gbtn { background:transparent; color:var(--mut); border:0; cursor:pointer; font-size:14px; padding:0 6px; line-height:1; } +.gbtn:hover { color:var(--fg); }