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>
|
||
|
|
);
|
||
|
|
}
|