jared
a9505ca5b2
Soundboard v2 — a near-parallel of the custom-emoji image-pack system for in-call audio clips. - Data model: 3-tier packs mirroring MSC2545 — room/space pack (state event io.lotus.soundboard, inherited by child rooms via parent-space aggregation), global refs (io.lotus.soundboard_rooms), and the personal pack (io.lotus.soundboard account data; the v1 flat-list content is migrated to the pack shape on read). New plugins/soundboard/ (readers, SoundboardPack, utils) + hooks/useSoundboardPacks (useRelevantSoundboardPacks = user U global U room, deduped). Unit-tested (migration + slug). - Management: reusable SoundboardPackEditor (name + emoji + per-clip volume + delete + upload + batched save), power-level-gated for room packs like emoji packs; a Soundboard page wired into Room + Space settings. - In-call: CallSoundboard rewritten as a Discord-style grid grouped by pack (emoji + name tiles), sourcing room+parent-space U personal clips; a Manage toggle embeds the editors; per-clip volume x master volume on playback. - Spam guard: host gates on a playing key (fork enforces one clip at a time). - Control bar: Mute-Screenshare moved next to the Screenshare button. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
62 lines
2.2 KiB
TypeScript
62 lines
2.2 KiB
TypeScript
import React from 'react';
|
|
import { Box, Icon, IconButton, Icons, Scroll, Text } from 'folds';
|
|
import { Page, PageContent, PageHeader } from '../../../components/page';
|
|
import { useRoom } from '../../../hooks/useRoom';
|
|
import { RoomSoundboardPack, UserSoundboardPack } from '../../../components/soundboard-pack-view';
|
|
|
|
type SoundboardProps = {
|
|
requestClose: () => void;
|
|
};
|
|
|
|
/**
|
|
* Soundboard management page (Room/Space settings). Mirrors the Emojis &
|
|
* Stickers page: a shared room/space pack (admin-editable, inherited by child
|
|
* rooms like emoji packs) plus the user's personal pack. A single default room
|
|
* pack (state key "") is used per room/space.
|
|
*/
|
|
export function Soundboard({ requestClose }: SoundboardProps) {
|
|
const room = useRoom();
|
|
|
|
return (
|
|
<Page>
|
|
<PageHeader outlined={false}>
|
|
<Box grow="Yes" gap="200">
|
|
<Box grow="Yes" alignItems="Center" gap="200">
|
|
<Text as="h2" size="H3" truncate>
|
|
Soundboard
|
|
</Text>
|
|
</Box>
|
|
<Box shrink="No">
|
|
<IconButton onClick={requestClose} variant="Surface" aria-label="Close">
|
|
<Icon src={Icons.Cross} />
|
|
</IconButton>
|
|
</Box>
|
|
</Box>
|
|
</PageHeader>
|
|
<Box grow="Yes">
|
|
<Scroll hideTrack visibility="Hover">
|
|
<PageContent>
|
|
<Box direction="Column" gap="700">
|
|
<Box direction="Column" gap="200">
|
|
<Text size="L400">This room / space (shared)</Text>
|
|
<Text size="T200" priority="300">
|
|
Clips here are shared with everyone, and inherited by every room under this space
|
|
— just like emoji/sticker packs. Only members with permission can edit.
|
|
</Text>
|
|
{room && <RoomSoundboardPack room={room} stateKey="" />}
|
|
</Box>
|
|
<Box direction="Column" gap="200">
|
|
<Text size="L400">Personal</Text>
|
|
<Text size="T200" priority="300">
|
|
Your own clips, available in every call and synced across your devices.
|
|
</Text>
|
|
<UserSoundboardPack />
|
|
</Box>
|
|
</Box>
|
|
</PageContent>
|
|
</Scroll>
|
|
</Box>
|
|
</Page>
|
|
);
|
|
}
|