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,39 +590,75 @@ 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.Label>Room size</Field.Label>
<Select.Root
value={[room.roomMode]}
onValueChange={(e) =>
setRoomInput({ ...room, roomMode: e.value[0] })
}
collection={roomModeCollection}
>
<Select.HiddenSelect />
<Select.Control>
<Select.Trigger>
<Select.ValueText placeholder="Select room size" />
</Select.Trigger>
<Select.IndicatorGroup>
<Select.Indicator />
</Select.IndicatorGroup>
</Select.Control>
<Select.Positioner>
<Select.Content>
{roomModeOptions.map((option) => (
<Select.Item key={option.value} item={option}>
{option.label}
<Select.ItemIndicator />
</Select.Item>
))}
</Select.Content>
</Select.Positioner>
</Select.Root>
</Field.Root>
)}
<Field.Root mt={4}> <Field.Root mt={4}>
<Field.Label>Room size</Field.Label> <HStack gap={2} alignItems="center">
<Select.Root <Field.Label>Recording type</Field.Label>
value={[room.roomMode]} <Popover.Root>
onValueChange={(e) => <Popover.Trigger asChild>
setRoomInput({ ...room, roomMode: e.value[0] }) <IconButton
} aria-label="Recording type help"
collection={roomModeCollection} variant="ghost"
disabled={room.platform === "daily"} size="xs"
> colorPalette="gray"
<Select.HiddenSelect /> >
<Select.Control> <LuInfo />
<Select.Trigger> </IconButton>
<Select.ValueText placeholder="Select room size" /> </Popover.Trigger>
</Select.Trigger> <Popover.Positioner>
<Select.IndicatorGroup> <Popover.Content>
<Select.Indicator /> <Popover.Arrow />
</Select.IndicatorGroup> <Popover.Body>
</Select.Control> <Text fontSize="sm" lineHeight="1.6">
<Select.Positioner> <strong>None:</strong> No recording will be
<Select.Content> created.
{roomModeOptions.map((option) => ( <br />
<Select.Item key={option.value} item={option}> <br />
{option.label} <strong>Local:</strong> Recording happens on
<Select.ItemIndicator /> each participant's device. Files are saved
</Select.Item> locally.
))} <br />
</Select.Content> <br />
</Select.Positioner> <strong>Cloud:</strong> Recording happens on
</Select.Root> the platform's servers and is available after
</Field.Root> the meeting ends.
<Field.Root mt={4}> </Text>
<Field.Label>Recording type</Field.Label> </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,44 +702,77 @@ export default function RoomsList() {
</Select.Positioner> </Select.Positioner>
</Select.Root> </Select.Root>
</Field.Root> </Field.Root>
<Field.Root mt={4}> {room.recordingType === "cloud" &&
<Field.Label>Recording start trigger</Field.Label> room.platform !== "daily" && (
<Select.Root <Field.Root mt={4}>
value={[room.recordingTrigger]} <HStack gap={2} alignItems="center">
onValueChange={(e) => <Field.Label>Recording start trigger</Field.Label>
setRoomInput({ <Popover.Root>
...room, <Popover.Trigger asChild>
recordingTrigger: e.value[0], <IconButton
}) aria-label="Recording start trigger help"
} variant="ghost"
collection={recordingTriggerCollection} size="xs"
disabled={ colorPalette="gray"
room.recordingType !== "cloud" || >
(room.platform === "daily" && <LuInfo />
room.recordingType === "cloud") </IconButton>
} </Popover.Trigger>
> <Popover.Positioner>
<Select.HiddenSelect /> <Popover.Content>
<Select.Control> <Popover.Arrow />
<Select.Trigger> <Popover.Body>
<Select.ValueText placeholder="Select trigger" /> <Text fontSize="sm" lineHeight="1.6">
</Select.Trigger> <strong>None:</strong> Recording must be
<Select.IndicatorGroup> started manually by a participant.
<Select.Indicator /> <br />
</Select.IndicatorGroup> <br />
</Select.Control> <strong>Prompt:</strong> Participants will
<Select.Positioner> be prompted to start recording when they
<Select.Content> join.
{recordingTriggerOptions.map((option) => ( <br />
<Select.Item key={option.value} item={option}> <br />
{option.label} <strong>Automatic:</strong> Recording
<Select.ItemIndicator /> starts automatically when a second
</Select.Item> participant joins.
))} </Text>
</Select.Content> </Popover.Body>
</Select.Positioner> </Popover.Content>
</Select.Root> </Popover.Positioner>
</Field.Root> </Popover.Root>
</HStack>
<Select.Root
value={[room.recordingTrigger]}
onValueChange={(e) =>
setRoomInput({
...room,
recordingTrigger: e.value[0],
})
}
collection={recordingTriggerCollection}
>
<Select.HiddenSelect />
<Select.Control>
<Select.Trigger>
<Select.ValueText placeholder="Select trigger" />
</Select.Trigger>
<Select.IndicatorGroup>
<Select.Indicator />
</Select.IndicatorGroup>
</Select.Control>
<Select.Positioner>
<Select.Content>
{recordingTriggerOptions.map((option) => (
<Select.Item key={option.value} item={option}>
{option.label}
<Select.ItemIndicator />
</Select.Item>
))}
</Select.Content>
</Select.Positioner>
</Select.Root>
</Field.Root>
)}
<Field.Root mt={4}> <Field.Root mt={4}>
<Checkbox.Root <Checkbox.Root