fix: hide rooms settings instead of disabling (#763)

* Hide rooms settings instead of disabling

* Reset recording trigger
This commit is contained in:
2025-12-03 16:49:17 +01:00
committed by GitHub
parent d3a5cd12d2
commit 3ad78be762

View File

@@ -15,9 +15,12 @@ import {
createListCollection, createListCollection,
useDisclosure, useDisclosure,
Tabs, Tabs,
Popover,
Text,
HStack,
} from "@chakra-ui/react"; } from "@chakra-ui/react";
import { useEffect, useMemo, useState } from "react"; import { useEffect, useMemo, useState } from "react";
import { LuEye, LuEyeOff } from "react-icons/lu"; import { LuEye, LuEyeOff, LuInfo } from "react-icons/lu";
import useRoomList from "./useRoomList"; import useRoomList from "./useRoomList";
import type { components } from "../../reflector-api"; import type { components } from "../../reflector-api";
import { import {
@@ -534,6 +537,10 @@ export default function RoomsList() {
room.recordingType === "cloud" room.recordingType === "cloud"
? "automatic-2nd-participant" ? "automatic-2nd-participant"
: "none"; : "none";
} else {
if (room.recordingType !== "cloud") {
updates.recordingTrigger = "none";
}
} }
setRoomInput({ ...room, ...updates }); setRoomInput({ ...room, ...updates });
}} }}
@@ -583,6 +590,7 @@ export default function RoomsList() {
<Checkbox.Label>Locked room</Checkbox.Label> <Checkbox.Label>Locked room</Checkbox.Label>
</Checkbox.Root> </Checkbox.Root>
</Field.Root> </Field.Root>
{room.platform !== "daily" && (
<Field.Root mt={4}> <Field.Root mt={4}>
<Field.Label>Room size</Field.Label> <Field.Label>Room size</Field.Label>
<Select.Root <Select.Root
@@ -591,7 +599,6 @@ export default function RoomsList() {
setRoomInput({ ...room, roomMode: e.value[0] }) setRoomInput({ ...room, roomMode: e.value[0] })
} }
collection={roomModeCollection} collection={roomModeCollection}
disabled={room.platform === "daily"}
> >
<Select.HiddenSelect /> <Select.HiddenSelect />
<Select.Control> <Select.Control>
@@ -614,8 +621,44 @@ export default function RoomsList() {
</Select.Positioner> </Select.Positioner>
</Select.Root> </Select.Root>
</Field.Root> </Field.Root>
)}
<Field.Root mt={4}> <Field.Root mt={4}>
<HStack gap={2} alignItems="center">
<Field.Label>Recording type</Field.Label> <Field.Label>Recording type</Field.Label>
<Popover.Root>
<Popover.Trigger asChild>
<IconButton
aria-label="Recording type help"
variant="ghost"
size="xs"
colorPalette="gray"
>
<LuInfo />
</IconButton>
</Popover.Trigger>
<Popover.Positioner>
<Popover.Content>
<Popover.Arrow />
<Popover.Body>
<Text fontSize="sm" lineHeight="1.6">
<strong>None:</strong> No recording will be
created.
<br />
<br />
<strong>Local:</strong> Recording happens on
each participant's device. Files are saved
locally.
<br />
<br />
<strong>Cloud:</strong> Recording happens on
the platform's servers and is available after
the meeting ends.
</Text>
</Popover.Body>
</Popover.Content>
</Popover.Positioner>
</Popover.Root>
</HStack>
<Select.Root <Select.Root
value={[room.recordingType]} value={[room.recordingType]}
onValueChange={(e) => { onValueChange={(e) => {
@@ -623,14 +666,12 @@ export default function RoomsList() {
const updates: Partial<typeof room> = { const updates: Partial<typeof room> = {
recordingType: newRecordingType, recordingType: newRecordingType,
}; };
// For Daily: if cloud, use automatic; otherwise none
if (room.platform === "daily") { if (room.platform === "daily") {
updates.recordingTrigger = updates.recordingTrigger =
newRecordingType === "cloud" newRecordingType === "cloud"
? "automatic-2nd-participant" ? "automatic-2nd-participant"
: "none"; : "none";
} else { } else {
// For Whereby: if not cloud, set to none
updates.recordingTrigger = updates.recordingTrigger =
newRecordingType !== "cloud" newRecordingType !== "cloud"
? "none" ? "none"
@@ -661,8 +702,45 @@ export default function RoomsList() {
</Select.Positioner> </Select.Positioner>
</Select.Root> </Select.Root>
</Field.Root> </Field.Root>
{room.recordingType === "cloud" &&
room.platform !== "daily" && (
<Field.Root mt={4}> <Field.Root mt={4}>
<HStack gap={2} alignItems="center">
<Field.Label>Recording start trigger</Field.Label> <Field.Label>Recording start trigger</Field.Label>
<Popover.Root>
<Popover.Trigger asChild>
<IconButton
aria-label="Recording start trigger help"
variant="ghost"
size="xs"
colorPalette="gray"
>
<LuInfo />
</IconButton>
</Popover.Trigger>
<Popover.Positioner>
<Popover.Content>
<Popover.Arrow />
<Popover.Body>
<Text fontSize="sm" lineHeight="1.6">
<strong>None:</strong> Recording must be
started manually by a participant.
<br />
<br />
<strong>Prompt:</strong> Participants will
be prompted to start recording when they
join.
<br />
<br />
<strong>Automatic:</strong> Recording
starts automatically when a second
participant joins.
</Text>
</Popover.Body>
</Popover.Content>
</Popover.Positioner>
</Popover.Root>
</HStack>
<Select.Root <Select.Root
value={[room.recordingTrigger]} value={[room.recordingTrigger]}
onValueChange={(e) => onValueChange={(e) =>
@@ -672,11 +750,6 @@ export default function RoomsList() {
}) })
} }
collection={recordingTriggerCollection} collection={recordingTriggerCollection}
disabled={
room.recordingType !== "cloud" ||
(room.platform === "daily" &&
room.recordingType === "cloud")
}
> >
<Select.HiddenSelect /> <Select.HiddenSelect />
<Select.Control> <Select.Control>
@@ -699,6 +772,7 @@ export default function RoomsList() {
</Select.Positioner> </Select.Positioner>
</Select.Root> </Select.Root>
</Field.Root> </Field.Root>
)}
<Field.Root mt={4}> <Field.Root mt={4}>
<Checkbox.Root <Checkbox.Root