Skip to content

Hang misc #14

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
kixelated merged 2 commits into from
Aug 15, 2025
Merged

Hang misc #14

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
78850a0
Change some CSS
kixelated Aug 14, 2025
ddee55c
Merge remote-tracking branch 'origin/main' into hang-misc
kixelated Aug 14, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
66 changes: 30 additions & 36 deletions app/src/controls.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,26 +26,21 @@ export function Controls(props: {
canvas: Canvas;
}): JSX.Element {
return (
<div class="controls pointer-gaps" role="toolbar" aria-label="Media controls">
{/* Left group */}
<div class="flex gap-inherit">
<Microphone audio={props.camera.audio} />
<Camera video={props.camera.video} room={props.room} />
<Screen video={props.screen.video} audio={props.screen.audio} room={props.room} />
</div>

{/* Center group */}
<div class="flex-1 flex justify-center">
<Chat broadcast={props.camera} />
</div>

{/* Right group */}
<div class="flex gap-inherit">
<Volume room={props.room} />
<ClosedCaptions />
<Advanced />
<Fullscreen canvas={props.canvas} />
</div>
<div
class="fixed bottom-0 left-0 right-0 flex items-end gap-3 p-3 text-shadow-lg text-xl pointer-events-none"
style={{ "z-index": "10" }}
role="toolbar"
aria-label="Media controls"
>
<Microphone audio={props.camera.audio} />
<Camera video={props.camera.video} room={props.room} />
<Screen video={props.screen.video} audio={props.screen.audio} room={props.room} />
<Chat broadcast={props.camera} />
<div style={{ "flex-grow": "1", "pointer-events": "none", "backdrop-filter": "none" }} />
<Volume room={props.room} />
<ClosedCaptions />
<Advanced />
<Fullscreen canvas={props.canvas} />
</div>
);
}
Expand All @@ -67,7 +62,7 @@ function Microphone(props: { audio: Publish.Audio }): JSX.Element {
return (
<Tooltip content={root() ? "Disable microphone" : "Enable microphone"} position="top">
<fieldset
class="flex flex-col-reverse"
class="flex flex-col-reverse pointer-events-auto"
aria-label="Microphone controls"
onMouseEnter={() => setHover(true)}
onMouseLeave={() => setHover(false)}
Expand All @@ -77,7 +72,7 @@ function Microphone(props: { audio: Publish.Audio }): JSX.Element {
<button
type="button"
onClick={toggle}
class="relative border hover:bg-gray-700 transition-all cursor-pointer p-2"
class="relative border hover:bg-gray-700 transition-all cursor-pointer p-2 backdrop-blur-sm bg-transparent rounded"
role="switch"
aria-checked={!!root()}
aria-label="Toggle microphone"
Expand All @@ -98,7 +93,7 @@ function Microphone(props: { audio: Publish.Audio }): JSX.Element {
max="2"
value={volume()}
onInput={(e) => Settings.microphoneGain.set(Number(e.currentTarget.value))}
class="cursor-pointer"
class="cursor-pointer backdrop-blur-sm bg-transparent rounded py-1 px-2 outline-none"
aria-label="Microphone volume"
style={{
"writing-mode": "vertical-rl",
Expand All @@ -123,7 +118,7 @@ function Camera(props: { video: Publish.Video; room: Room }): JSX.Element {
<button
type="button"
onClick={toggle}
class="relative border hover:bg-gray-700 transition-all cursor-pointer p-2"
class="relative border hover:bg-gray-700 transition-all cursor-pointer p-2 pointer-events-auto backdrop-blur-sm bg-transparent rounded"
role="switch"
aria-checked={!!media()}
aria-label="Toggle camera"
Expand Down Expand Up @@ -153,7 +148,7 @@ function Screen(props: { video: Publish.Video; audio: Publish.Audio; room: Room
<button
type="button"
onClick={toggle}
class="relative border hover:bg-gray-700 transition-all cursor-pointer p-2"
class="relative border hover:bg-gray-700 transition-all cursor-pointer p-2 pointer-events-auto backdrop-blur-sm bg-transparent rounded"
role="switch"
aria-checked={!!media()}
aria-label="Toggle screen sharing"
Expand Down Expand Up @@ -289,17 +284,17 @@ function Chat(props: { broadcast: Publish.Broadcast }): JSX.Element {
};

return (
<form id="chat" onSubmit={submit} class="w-full max-w-md">
<form id="chat" onSubmit={submit} class="flex-1 min-w-48">
<input
type="text"
autocomplete="off"
placeholder="type to chat"
placeholder="chat"
ref={setInput}
value={message()}
onInput={(e) => setMessage(e.currentTarget.value)}
aria-label="Chat message"
tabIndex={0}
class="w-full text-center placeholder:text-center"
class="w-full pointer-events-auto backdrop-blur-sm bg-transparent rounded py-1 px-2 outline-none"
/>
</form>
);
Expand Down Expand Up @@ -341,7 +336,7 @@ function Volume(props: { room: Room }): JSX.Element {
return (
<Tooltip content={muted() || suspended() ? "Enable audio" : "Disable audio"} position="top">
<fieldset
class="flex flex-col-reverse"
class="flex flex-col-reverse pointer-events-auto"
aria-label="Volume controls"
onMouseEnter={() => setShowSlider(true)}
onMouseLeave={() => setShowSlider(false)}
Expand All @@ -354,7 +349,7 @@ function Volume(props: { room: Room }): JSX.Element {
role="switch"
aria-checked={!muted()}
aria-label="Toggle mute"
class="hover:bg-gray-700 transition-all cursor-pointer p-2"
class="hover:bg-gray-700 transition-all cursor-pointer p-2 backdrop-blur-sm bg-transparent rounded"
classList={{ "text-red-500": muted() || suspended() }}
>
{muted() ? <IconVolumeMute /> : <IconVolumeHigh />}
Expand All @@ -367,12 +362,11 @@ function Volume(props: { room: Room }): JSX.Element {
max="2"
value={muted() ? 0 : volume()}
onInput={(e) => setVolume(Number(e.currentTarget.value))}
class="cursor-pointer"
class="cursor-pointer backdrop-blur-sm bg-transparent rounded py-1 px-2 outline-none"
aria-label="Output Volume"
style={{
"writing-mode": "vertical-rl",
direction: "rtl",
"vertical-align": "middle",
opacity: opacity(),
}}
/>
Expand All @@ -397,7 +391,7 @@ function ClosedCaptions(): JSX.Element {
role="switch"
aria-checked={enabled()}
aria-label="Toggle closed captions"
class="hover:bg-gray-700 transition-all cursor-pointer p-2"
class="hover:bg-gray-700 transition-all cursor-pointer p-2 pointer-events-auto backdrop-blur-sm bg-transparent rounded"
>
{enabled() ? <IconClosedCaption /> : <IconClosedCaptionDisabled />}
</button>
Expand Down Expand Up @@ -440,7 +434,7 @@ function Advanced(): JSX.Element {
aria-label="Settings"
aria-expanded={showSettings()}
aria-haspopup="dialog"
class="hover:bg-gray-700 transition-all cursor-pointer p-2"
class="hover:bg-gray-700 transition-all cursor-pointer p-2 backdrop-blur-sm bg-transparent rounded"
>
<IconSettings />
</button>
Expand Down Expand Up @@ -475,7 +469,7 @@ function Fullscreen(props: { canvas: Canvas }): JSX.Element {
type="button"
onClick={toggle}
aria-label="Toggle fullscreen"
class="hover:bg-gray-700 transition-all cursor-pointer p-2"
class="hover:bg-gray-700 transition-all cursor-pointer p-2 pointer-events-auto backdrop-blur-sm bg-transparent rounded"
>
<IconFullscreen />
</button>
Expand Down Expand Up @@ -520,4 +514,4 @@ function Opacity(fn: () => boolean): Accessor<number> {
});

return opacity;
}
}
Loading