electron-rare/meet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

wip

Browse Source
This commit is contained in:
Nathan Vasse
2025-02-03 12:38:11 +01:00
parent c61bae279e
commit 414b3720f1
8 changed files with 221 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/frontend/src/App.tsx
+26 -10
View File
@@ -13,24 +13,40 @@ import { routes } from './routes'
import './i18n/init'
import { queryClient } from '@/api/queryClient'
import { AppInitialization } from '@/components/AppInitialization'
import { SdkCreateButton } from './features/rooms/routes/sdk/CreateButton'
function App() {
const { i18n } = useTranslation()
useLang(i18n.language)
return (
<QueryClientProvider client={queryClient}>
<AppInitialization />
<Suspense fallback={null}>
<I18nProvider locale={i18n.language}>
<Layout>
<Switch>
{Object.entries(routes).map(([, route], i) => (
<Route key={i} path={route.path} component={route.Component} />
))}
<Route component={NotFoundScreen} />
</Switch>
</Layout>
{/* <ReactQueryDevtools initialIsOpen={false} buttonPosition="top-left" /> */}
<Switch>
{/* We only want support and ReactQueryDevTools in non /sdk routes */}
<Route path={/^(?!\/sdk).*$/}>
<AppInitialization />
<Layout>
{Object.entries(routes).map(([, route], i) => (
<Route
key={i}
path={route.path}
component={route.Component}
/>
))}
</Layout>
<ReactQueryDevtools
initialIsOpen={false}
buttonPosition="top-left"
/>
</Route>
<Route path="/sdk" nest>
<Route path="/create-button">
<SdkCreateButton />
</Route>
</Route>
<Route component={NotFoundScreen} />
</Switch>
</I18nProvider>
</Suspense>
</QueryClientProvider>
src/frontend/src/assets/VisioIcon.tsx
+24
View File
@@ -0,0 +1,24 @@
export const VisioIcon = () => {
return (
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M0.841702 8.95427C0.75 9.42479 0.75 10.0042 0.75 10.9748V13.3096C0.75 14.5138 0.75 15.1159 0.925134 15.6549C1.08009 16.1319 1.33356 16.5709 1.6691 16.9435C2.04833 17.3647 2.56977 17.6658 3.61264 18.2679L5.6346 19.4353C6.55753 19.9681 7.07208 20.2652 7.56247 20.4081V13.2043C7.56247 12.8442 7.36578 12.5129 7.04965 12.3404L0.841702 8.95427Z"
fill="currentColor"
/>
<path
d="M17.747 10.0123V13.7685C17.747 14.2878 17.9727 14.7815 18.3654 15.1214L21.0688 17.4609C21.227 17.5947 21.3912 17.7042 21.5616 17.7894C21.738 17.8685 21.9084 17.9081 22.0726 17.9081C22.4255 17.9081 22.7084 17.7925 22.9213 17.5613C23.1404 17.324 23.2499 17.0168 23.2499 16.6396V7.14866C23.2499 6.77146 23.1404 6.46726 22.9213 6.23607C22.7084 5.9988 22.4255 5.88017 22.0726 5.88017C21.9084 5.88017 21.738 5.91971 21.5616 5.9988C21.3912 6.07789 21.227 6.1874 21.0688 6.32733L18.3675 8.65759C17.9735 8.99746 17.747 9.49201 17.747 10.0123Z"
fill="currentColor"
/>
<path
d="M1.74517 7.61282C1.67 7.57182 1.59117 7.54405 1.51135 7.52872C1.56171 7.46443 1.61433 7.40178 1.66914 7.34091C2.04837 6.91973 2.56981 6.61868 3.61268 6.01657L5.63464 4.84919C6.67751 4.24708 7.19894 3.94603 7.7533 3.82819C8.2438 3.72394 8.75074 3.72394 9.24124 3.82819C9.7956 3.94603 10.317 4.24708 11.3599 4.84919L13.358 6.0028C13.366 6.00738 13.374 6.01197 13.3819 6.01658C14.4248 6.61868 14.9462 6.91973 15.3255 7.34091C15.661 7.71357 15.9145 8.15259 16.0694 8.62951C16.2446 9.16852 16.2446 9.77063 16.2446 10.9748V13.3096C16.2446 14.5138 16.2446 15.1159 16.0694 15.6549C15.9145 16.1319 15.661 16.5709 15.3255 16.9435C14.9462 17.3647 14.4248 17.6657 13.382 18.2678C13.373 18.273 13.364 18.2782 13.3551 18.2833L11.3599 19.4353C10.317 20.0374 9.7956 20.3384 9.24124 20.4562C9.21846 20.4611 9.19564 20.4657 9.17279 20.4701L9.17278 13.2043C9.17278 12.255 8.65422 11.3814 7.82079 10.9268L1.74517 7.61282Z"
fill="currentColor"
/>
</svg>
)
}
src/frontend/src/features/rooms/routes/sdk/CreateButton.tsx
+81 -4
View File
@@ -1,13 +1,90 @@
import { Button } from '@/primitives/Button'
import { useTranslation } from 'react-i18next'
import { generateRoomId } from '../../utils/generateRoomId'
import { useCreateRoom } from '../../api/createRoom'
import { usePersistentUserChoices } from '@livekit/components-react'
import { useState } from 'react'
import { getRouteUrl } from '@/navigation/getRouteUrl'
import { css } from '@/styled-system/css'
import { RiCheckLine, RiFileCopyLine } from '@remixicon/react'
import { Loader } from '@/primitives/Loader'
import { VisioIcon } from '@/assets/VisioIcon'
export const SdkCreateButton = () => {
const { t } = useTranslation('sdk', { keyPrefix: 'createButton' })
const { t: th } = useTranslation('home')
const [roomUrl, setRoomUrl] = useState<string>()
const [isLoading, setIsLoading] = useState(false)
const {
userChoices: { username },
} = usePersistentUserChoices()
const { mutateAsync: createRoom } = useCreateRoom()
const submit = () => {
console.log('SUBMIT')
setIsLoading(true)
setTimeout(() => {
const slug = generateRoomId()
createRoom({ slug, username }).then((data) => {
const roomUrlTmp = getRouteUrl('room', data.slug)
setRoomUrl(roomUrlTmp)
setIsLoading(false)
})
}, 2000)
}
const [isCopied, setIsCopied] = useState(false)
const [isHovered, setIsHovered] = useState(false)
const copy = () => {
navigator.clipboard.writeText(roomUrl!)
setIsCopied(true)
setTimeout(() => setIsCopied(false), 1000)
}
return (
<div>
<Button variant="primaryDark" aria-label={t('label')}>
{t('label')}
</Button>
<div className={css({})}>
{roomUrl ? (
<Button
variant={isCopied ? 'success' : 'tertiaryText'}
onHoverChange={setIsHovered}
data-attr="sdk-create-copy"
onPress={copy}
icon={
isCopied ? (
<RiCheckLine size={18} style={{ marginRight: '8px' }} />
) : undefined
}
>
{isCopied ? (
th('laterMeetingDialog.copied')
) : (
<div
className={css({
display: 'flex',
alignItems: 'center',
color: 'greyscale.600',
gap: '0.5rem',
})}
>
<div>{roomUrl}</div>
<RiFileCopyLine size={24} />
</div>
)}
</Button>
) : (
<Button
variant="primaryDark"
aria-label={t('label')}
onPress={submit}
data-attr="sdk-create"
loading={isLoading}
icon={<VisioIcon />}
>
{t('label')}
</Button>
)}
</div>
)
}
src/frontend/src/primitives/Button.tsx
+5
View File
@@ -6,12 +6,15 @@ import { type RecipeVariantProps } from '@/styled-system/css'
import { buttonRecipe, type ButtonRecipe } from './buttonRecipe'
import { TooltipWrapper, type TooltipWrapperProps } from './TooltipWrapper'
import { ReactNode } from 'react'
import { Loader } from './Loader'
export type ButtonProps = RecipeVariantProps<ButtonRecipe> &
RACButtonsProps &
TooltipWrapperProps & {
// Use tooltip as description below the button.
description?: boolean
} & {
icon?: ReactNode
}
export const Button = ({
@@ -27,6 +30,8 @@ export const Button = ({
className={buttonRecipe(variantProps)}
{...(componentProps as RACButtonsProps)}
>
{!props.loading && props.icon}
{props.loading && <Loader />}
{componentProps.children as ReactNode}
{props.description && <span>{tooltip}</span>}
</RACButton>
src/frontend/src/primitives/Loader.tsx
+45
View File
@@ -0,0 +1,45 @@
import { cva } from '@/styled-system/css'
const loader = cva({
base: {
borderRadius: '50%',
position: 'relative',
animation: 'rotate 1s linear infinite',
'&:before, &:after': {
content: '""',
boxSizing: 'border-box',
position: 'absolute',
inset: '0',
borderRadius: '50%',
borderStyle: 'solid',
borderColor: 'white',
},
_before: {
animation: 'prixClipFix 2s linear infinite',
},
_after: {
borderColor: 'white',
animation:
'prixClipFix 2s linear infinite, rotate 0.5s linear infinite reverse',
inset: 6,
},
},
variants: {
size: {
small: {
width: '24px',
height: '24px',
'&:before, &:after': {
borderWidth: '2px',
},
},
},
},
defaultVariants: {
size: 'small',
},
})
export const Loader = () => {
return <div className={loader()}></div>
}
src/frontend/src/primitives/buttonRecipe.ts
+4
View File
@@ -8,6 +8,7 @@ export const buttonRecipe = cva({
transition: 'background 200ms, outline 200ms, border-color 200ms',
cursor: 'pointer',
border: '1px solid transparent',
gap: '0.5rem',
},
variants: {
size: {
@@ -229,6 +230,9 @@ export const buttonRecipe = cva({
width: 'full',
},
},
loading: {
true: {},
},
// some toggle buttons make more sense without a "pushed button" style when selected because their content changes to mark the state
shySelected: {
true: {},
src/frontend/src/routes.ts
+5 -5
View File
@@ -28,11 +28,11 @@ export const routes: Record<
path: '/feedback',
Component: FeedbackRoute,
},
sdkCreateButton: {
name: 'sdkCreateButton',
path: '/sdk/create-button',
Component: SdkCreateButton,
},
// sdkCreateButton: {
// name: 'sdkCreateButton',
// path: '/sdk/create-button',
// Component: SdkCreateButton,
// },
}
export type RouteName = keyof typeof routes
src/frontend/src/styles/index.css
+31
View File
@@ -38,3 +38,34 @@ body:has(.lk-video-conference) #crisp-chatbox > div > a {
transform: translateY(0);
}
}
/**
* Loader animations.
*/
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes prixClipFix {
0% {
clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);
}
25% {
clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);
}
50% {
clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);
}
75% {
clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);
}
100% {
clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);
}
}