Refactor code structure for improved readability and maintainability
This commit is contained in:
@@ -0,0 +1,4 @@
|
||||
OPENAI_API_KEY=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
|
||||
LIVEKIT_URL=ws://192.168.1.131:7880
|
||||
LIVEKIT_TOKEN=devkey
|
||||
LIVEKIT_API_SECRET=secret
|
||||
+11
@@ -0,0 +1,11 @@
|
||||
# Python-generated files
|
||||
__pycache__/
|
||||
*.py[oc]
|
||||
build/
|
||||
dist/
|
||||
wheels/
|
||||
*.egg-info
|
||||
|
||||
# Virtual environments
|
||||
.venv
|
||||
frontend/node_modules/
|
||||
@@ -0,0 +1 @@
|
||||
3.13
|
||||
@@ -0,0 +1,5 @@
|
||||
# 🌐 Puerto TCP (señalización / WebSocket)
|
||||
New-NetFirewallRule -DisplayName "LiveKit TCP 7880" -Direction Inbound -LocalPort 7880 -Protocol TCP -Action Allow
|
||||
|
||||
# 🎙️ Puertos UDP (media WebRTC)
|
||||
New-NetFirewallRule -DisplayName "LiveKit UDP 7881-7882" -Direction Inbound -LocalPort 7881-7882 -Protocol UDP -Action Allow
|
||||
@@ -0,0 +1,26 @@
|
||||
# backend/main.py
|
||||
from fastapi import FastAPI
|
||||
from fastapi.middleware.cors import CORSMiddleware
|
||||
from livekit import api
|
||||
|
||||
app = FastAPI()
|
||||
|
||||
app.add_middleware(
|
||||
CORSMiddleware,
|
||||
allow_origins=["*"], # permite desde cualquier origen
|
||||
allow_methods=["*"],
|
||||
allow_headers=["*"],
|
||||
)
|
||||
|
||||
@app.get("/token")
|
||||
def get_token(room: str, user: str):
|
||||
access = api.AccessToken("devkey", "secret")
|
||||
grants = api.VideoGrants(
|
||||
room_join=True,
|
||||
room=room,
|
||||
can_publish=True,
|
||||
can_subscribe=True,
|
||||
)
|
||||
access.with_identity(user).with_grants(grants)
|
||||
token = access.to_jwt()
|
||||
return {"token": token}
|
||||
@@ -0,0 +1,40 @@
|
||||
import asyncio
|
||||
from livekit import api
|
||||
from livekit.api.room_service import CreateRoomRequest, ListRoomsRequest
|
||||
|
||||
async def main():
|
||||
# Instanciar cliente de servidor LiveKit
|
||||
# Puedes pasar URL, api_key y api_secret directamente,
|
||||
# o establecer variables de entorno LIVEKIT_URL, LIVEKIT_API_KEY, LIVEKIT_API_SECRET
|
||||
lkapi = api.LiveKitAPI(
|
||||
url="http://localhost:7880", # URL de tu servidor LiveKit local
|
||||
api_key="devkey", # tu clave de API
|
||||
api_secret="secret", # tu secreto
|
||||
)
|
||||
|
||||
# 1. Crear una sala
|
||||
req = CreateRoomRequest(
|
||||
name="mi_sala_prueba",
|
||||
empty_timeout=300, # opcional: cuánto tiempo mantener la sala vacía
|
||||
max_participants=10, # opcional: límite de participantes
|
||||
metadata="Sala de prueba desde servidor"
|
||||
)
|
||||
room = await lkapi.room.create_room(req)
|
||||
print("Sala creada:", room.name, " — SID:", room.sid)
|
||||
|
||||
# 2. Listar salas existentes
|
||||
list_req = ListRoomsRequest(names=["mi_sala_prueba"])
|
||||
rooms_resp = await lkapi.room.list_rooms(list_req)
|
||||
print("Salas existentes:", [r.name for r in rooms_resp.rooms])
|
||||
|
||||
# 3. (Opcional) Eliminar sala
|
||||
# from livekit.api.room_service import DeleteRoomRequest
|
||||
# del_req = DeleteRoomRequest(room="mi_sala_prueba")
|
||||
# await lkapi.room.delete_room(del_req)
|
||||
# print("Sala eliminada")
|
||||
|
||||
# Cerrar cliente cuando termines
|
||||
await lkapi.aclose()
|
||||
|
||||
if __name__ == "__main__":
|
||||
asyncio.run(main())
|
||||
@@ -0,0 +1,95 @@
|
||||
# detalles_de_sala.py
|
||||
import os
|
||||
import logging
|
||||
import asyncio
|
||||
import aiohttp
|
||||
from livekit import rtc
|
||||
|
||||
ROOM = "mi_sala_prueba"
|
||||
USER = "agente_tts"
|
||||
TOKEN_URL = "http://127.0.0.1:8000/token"
|
||||
LIVEKIT_URL = "ws://192.168.1.131:7880"
|
||||
|
||||
|
||||
async def get_token():
|
||||
"""Solicita el token JWT al backend FastAPI"""
|
||||
print("🔍 Solicitando token al backend FastAPI...")
|
||||
try:
|
||||
async with aiohttp.ClientSession() as session:
|
||||
async with session.get(f"{TOKEN_URL}?room={ROOM}&user={USER}") as resp:
|
||||
print(f"📡 Respuesta del backend: {resp.status}")
|
||||
if resp.status != 200:
|
||||
print(f"❌ Error al obtener token: {await resp.text()}")
|
||||
raise Exception(f"Error HTTP {resp.status} al solicitar token")
|
||||
data = await resp.json()
|
||||
token = data.get("token")
|
||||
if not token:
|
||||
print("⚠️ Respuesta no contiene campo 'token'")
|
||||
raise Exception("Respuesta inválida del backend /token")
|
||||
print("✅ Token recibido correctamente")
|
||||
print(f"🧾 Token (primeros 60 chars): {token[:60]}...")
|
||||
return token
|
||||
except Exception as e:
|
||||
print(f"🚨 Error en get_token(): {e}")
|
||||
raise
|
||||
|
||||
|
||||
async def main():
|
||||
print("🚀 Iniciando script LiveKit Client")
|
||||
print(f"🌍 Servidor LiveKit: {LIVEKIT_URL}")
|
||||
print(f"🔑 URL de Token: {TOKEN_URL}")
|
||||
print(f"🏠 Sala: {ROOM}, 👤 Usuario: {USER}")
|
||||
|
||||
logging.basicConfig(level=logging.INFO)
|
||||
logger = logging.getLogger(__name__)
|
||||
room = rtc.Room()
|
||||
|
||||
print("⚙️ Configurando eventos del Room...")
|
||||
|
||||
@room.on("participant_connected")
|
||||
def on_participant_connected(participant: rtc.RemoteParticipant):
|
||||
print(f"🟢 Participante conectado: {participant.identity} ({participant.sid})")
|
||||
logger.info("🟢 Participant connected: %s (%s)", participant.identity, participant.sid)
|
||||
|
||||
@room.on("participant_disconnected")
|
||||
def on_participant_disconnected(participant: rtc.RemoteParticipant):
|
||||
print(f"🔴 Participante desconectado: {participant.identity} ({participant.sid})")
|
||||
logger.info("🔴 Participant disconnected: %s (%s)", participant.identity, participant.sid)
|
||||
|
||||
@room.on("track_subscribed")
|
||||
def on_track_subscribed(track: rtc.Track, publication: rtc.RemoteTrackPublication, participant: rtc.RemoteParticipant):
|
||||
print(f"🎥 Track suscrito de {participant.identity}: {publication.sid} ({track.kind})")
|
||||
logger.info("🎥 Track subscribed from %s: %s", participant.identity, publication.sid)
|
||||
|
||||
@room.on("disconnected")
|
||||
def on_disconnected():
|
||||
print("⚠️ Desconectado del servidor LiveKit.")
|
||||
logger.warning("⚠️ Room disconnected.")
|
||||
|
||||
# 🔑 Obtener token
|
||||
token = await get_token()
|
||||
|
||||
print("🧩 Intentando conectar al servidor LiveKit...")
|
||||
try:
|
||||
await room.connect(LIVEKIT_URL, token)
|
||||
print(f"✅ Conectado exitosamente a la sala: {room.name}")
|
||||
except Exception as e:
|
||||
print(f"🚨 Error al conectar a LiveKit: {e}")
|
||||
raise
|
||||
|
||||
print("🕓 Conexión activa. Esperando eventos...")
|
||||
try:
|
||||
while True:
|
||||
await asyncio.sleep(2)
|
||||
print("⏳ Manteniendo conexión viva...")
|
||||
except KeyboardInterrupt:
|
||||
print("🛑 Interrupción manual detectada. Cerrando sesión...")
|
||||
await room.disconnect()
|
||||
print("👋 Desconectado correctamente.")
|
||||
|
||||
|
||||
if __name__ == "__main__":
|
||||
try:
|
||||
asyncio.run(main())
|
||||
except Exception as e:
|
||||
print(f"💥 Error fatal: {e}")
|
||||
@@ -0,0 +1,15 @@
|
||||
services:
|
||||
livekit:
|
||||
image: livekit/livekit-server:latest
|
||||
ports:
|
||||
- "7880:7880/tcp"
|
||||
- "7881:7881/udp"
|
||||
- "7882:7882/udp"
|
||||
environment:
|
||||
- LIVEKIT_API_KEY=devkey
|
||||
- LIVEKIT_API_SECRET=secret
|
||||
volumes:
|
||||
- ./livekit.yaml:/livekit.yaml
|
||||
command: >
|
||||
--config /livekit.yaml
|
||||
--dev
|
||||
+27
@@ -0,0 +1,27 @@
|
||||
name: npm test
|
||||
|
||||
on:
|
||||
pull_request:
|
||||
branches:
|
||||
- '**'
|
||||
|
||||
concurrency:
|
||||
group: ${{ github.workflow }}-${{ github.event.number || github.sha }}
|
||||
cancel-in-progress: true
|
||||
|
||||
jobs:
|
||||
test_pull_request:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
- uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version-file: '.nvmrc'
|
||||
cache: 'yarn'
|
||||
cache-dependency-path: '**/yarn.lock'
|
||||
- name: Install dependencies
|
||||
run: yarn
|
||||
- name: Run build
|
||||
run: npm run build
|
||||
- name: Run tests
|
||||
run: npm test
|
||||
@@ -0,0 +1 @@
|
||||
.vscode
|
||||
@@ -0,0 +1 @@
|
||||
v24.3.0
|
||||
@@ -0,0 +1,35 @@
|
||||
/** @type {import("@ianvs/prettier-plugin-sort-imports").PrettierConfig} */
|
||||
const config = {
|
||||
printWidth: 100,
|
||||
singleQuote: true,
|
||||
trailingComma: 'es5',
|
||||
plugins: ['@ianvs/prettier-plugin-sort-imports'],
|
||||
importOrder: [
|
||||
'.*styles.css$',
|
||||
'',
|
||||
'dayjs',
|
||||
'^react$',
|
||||
'^next$',
|
||||
'^next/.*$',
|
||||
'<BUILTIN_MODULES>',
|
||||
'<THIRD_PARTY_MODULES>',
|
||||
'^@mantine/(.*)$',
|
||||
'^@mantinex/(.*)$',
|
||||
'^@mantine-tests/(.*)$',
|
||||
'^@docs/(.*)$',
|
||||
'^@/.*$',
|
||||
'^../(?!.*.css$).*$',
|
||||
'^./(?!.*.css$).*$',
|
||||
'\\.css$',
|
||||
],
|
||||
overrides: [
|
||||
{
|
||||
files: '*.mdx',
|
||||
options: {
|
||||
printWidth: 70,
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
export default config;
|
||||
@@ -0,0 +1,17 @@
|
||||
import type { StorybookConfig } from '@storybook/react-vite';
|
||||
|
||||
const config: StorybookConfig = {
|
||||
core: {
|
||||
disableWhatsNewNotifications: true,
|
||||
disableTelemetry: true,
|
||||
enableCrashReports: false,
|
||||
},
|
||||
stories: ['../src/**/*.mdx', '../src/**/*.story.@(js|jsx|ts|tsx)'],
|
||||
addons: ['@storybook/addon-themes'],
|
||||
framework: {
|
||||
name: '@storybook/react-vite',
|
||||
options: {},
|
||||
},
|
||||
};
|
||||
|
||||
export default config;
|
||||
@@ -0,0 +1,40 @@
|
||||
import '@mantine/core/styles.css';
|
||||
|
||||
import { ColorSchemeScript, MantineProvider } from '@mantine/core';
|
||||
import { theme } from '../src/theme';
|
||||
|
||||
export const parameters = {
|
||||
layout: 'fullscreen',
|
||||
options: {
|
||||
showPanel: false,
|
||||
storySort: (a: any, b: any) => a.title.localeCompare(b.title, undefined, { numeric: true }),
|
||||
},
|
||||
backgrounds: { disable: true },
|
||||
};
|
||||
|
||||
export const globalTypes = {
|
||||
theme: {
|
||||
name: 'Theme',
|
||||
description: 'Mantine color scheme',
|
||||
defaultValue: 'light',
|
||||
toolbar: {
|
||||
icon: 'mirror',
|
||||
items: [
|
||||
{ value: 'light', title: 'Light' },
|
||||
{ value: 'dark', title: 'Dark' },
|
||||
],
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const decorators = [
|
||||
(renderStory: any, context: any) => {
|
||||
const scheme = (context.globals.theme || 'light') as 'light' | 'dark';
|
||||
return (
|
||||
<MantineProvider theme={theme} forceColorScheme={scheme}>
|
||||
<ColorSchemeScript />
|
||||
{renderStory()}
|
||||
</MantineProvider>
|
||||
);
|
||||
},
|
||||
];
|
||||
@@ -0,0 +1 @@
|
||||
dist
|
||||
@@ -0,0 +1,28 @@
|
||||
{
|
||||
"extends": ["stylelint-config-standard-scss"],
|
||||
"rules": {
|
||||
"custom-property-pattern": null,
|
||||
"selector-class-pattern": null,
|
||||
"scss/no-duplicate-mixins": null,
|
||||
"declaration-empty-line-before": null,
|
||||
"declaration-block-no-redundant-longhand-properties": null,
|
||||
"alpha-value-notation": null,
|
||||
"custom-property-empty-line-before": null,
|
||||
"property-no-vendor-prefix": null,
|
||||
"color-function-notation": null,
|
||||
"length-zero-no-unit": null,
|
||||
"selector-not-notation": null,
|
||||
"no-descending-specificity": null,
|
||||
"comment-empty-line-before": null,
|
||||
"scss/at-mixin-pattern": null,
|
||||
"scss/at-rule-no-unknown": null,
|
||||
"value-keyword-case": null,
|
||||
"media-feature-range-notation": null,
|
||||
"selector-pseudo-class-no-unknown": [
|
||||
true,
|
||||
{
|
||||
"ignorePseudoClasses": ["global"]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
+942
File diff suppressed because one or more lines are too long
@@ -0,0 +1,3 @@
|
||||
nodeLinker: node-modules
|
||||
|
||||
yarnPath: .yarn/releases/yarn-4.10.3.cjs
|
||||
@@ -0,0 +1,34 @@
|
||||
# Mantine Vite template
|
||||
|
||||
## Features
|
||||
|
||||
This template comes with the following features:
|
||||
|
||||
- [PostCSS](https://postcss.org/) with [mantine-postcss-preset](https://mantine.dev/styles/postcss-preset)
|
||||
- [TypeScript](https://www.typescriptlang.org/)
|
||||
- [Storybook](https://storybook.js.org/)
|
||||
- [Vitest](https://vitest.dev/) setup with [React Testing Library](https://testing-library.com/docs/react-testing-library/intro)
|
||||
- ESLint setup with [eslint-config-mantine](https://github.com/mantinedev/eslint-config-mantine)
|
||||
|
||||
## npm scripts
|
||||
|
||||
## Build and dev scripts
|
||||
|
||||
- `dev` – start development server
|
||||
- `build` – build production version of the app
|
||||
- `preview` – locally preview production build
|
||||
|
||||
### Testing scripts
|
||||
|
||||
- `typecheck` – checks TypeScript types
|
||||
- `lint` – runs ESLint
|
||||
- `prettier:check` – checks files with Prettier
|
||||
- `vitest` – runs vitest tests
|
||||
- `vitest:watch` – starts vitest watch
|
||||
- `test` – runs `vitest`, `prettier:check`, `lint` and `typecheck` scripts
|
||||
|
||||
### Other scripts
|
||||
|
||||
- `storybook` – starts storybook dev server
|
||||
- `storybook:build` – build production storybook bundle to `storybook-static`
|
||||
- `prettier:write` – formats all files with Prettier
|
||||
@@ -0,0 +1,22 @@
|
||||
import mantine from 'eslint-config-mantine';
|
||||
import { defineConfig } from 'eslint/config';
|
||||
import tseslint from 'typescript-eslint';
|
||||
|
||||
// @ts-check
|
||||
export default defineConfig(
|
||||
tseslint.configs.recommended,
|
||||
...mantine,
|
||||
{ ignores: ['**/*.{mjs,cjs,js,d.ts,d.mts}'] },
|
||||
{
|
||||
files: ['**/*.story.tsx'],
|
||||
rules: { 'no-console': 'off' },
|
||||
},
|
||||
{
|
||||
languageOptions: {
|
||||
parserOptions: {
|
||||
tsconfigRootDir: process.cwd(),
|
||||
project: ['./tsconfig.json'],
|
||||
},
|
||||
},
|
||||
}
|
||||
);
|
||||
@@ -0,0 +1,16 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
|
||||
<meta
|
||||
name="viewport"
|
||||
content="minimum-scale=1, initial-scale=1, width=device-width, user-scalable=no"
|
||||
/>
|
||||
<title>My App</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
Generated
+9763
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,70 @@
|
||||
{
|
||||
"name": "mantine-vite-template",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"version": "0.0.0",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "tsc && vite build",
|
||||
"preview": "vite preview",
|
||||
"typecheck": "tsc --noEmit",
|
||||
"lint": "npm run eslint && npm run stylelint",
|
||||
"eslint": "eslint . --cache",
|
||||
"stylelint": "stylelint '**/*.css' --cache",
|
||||
"prettier": "prettier --check \"**/*.{ts,tsx}\"",
|
||||
"prettier:write": "prettier --write \"**/*.{ts,tsx}\"",
|
||||
"vitest": "vitest run",
|
||||
"vitest:watch": "vitest",
|
||||
"test": "npm run typecheck && npm run prettier && npm run lint && npm run vitest && npm run build",
|
||||
"storybook": "storybook dev -p 6006",
|
||||
"storybook:build": "storybook build"
|
||||
},
|
||||
"dependencies": {
|
||||
"@mantine/core": "8.3.1",
|
||||
"@mantine/hooks": "8.3.1",
|
||||
"@phosphor-icons/react": "^2.1.10",
|
||||
"@react-three/fiber": "^9.3.0",
|
||||
"dockview": "^4.9.0",
|
||||
"livekit-client": "^2.15.8",
|
||||
"phosphor-react": "^1.4.1",
|
||||
"react": "^19.1.1",
|
||||
"react-dom": "^19.1.1",
|
||||
"react-router-dom": "^7.8.2",
|
||||
"three": "^0.180.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/js": "^9.35.0",
|
||||
"@ianvs/prettier-plugin-sort-imports": "^4.7.0",
|
||||
"@storybook/addon-themes": "^9.1.5",
|
||||
"@storybook/react": "^9.1.5",
|
||||
"@storybook/react-vite": "^9.1.5",
|
||||
"@testing-library/dom": "^10.4.1",
|
||||
"@testing-library/jest-dom": "^6.8.0",
|
||||
"@testing-library/react": "^16.3.0",
|
||||
"@testing-library/user-event": "^14.6.1",
|
||||
"@types/node": "^24.3.1",
|
||||
"@types/react": "^19.1.12",
|
||||
"@types/react-dom": "^19.1.9",
|
||||
"@vitejs/plugin-react": "^5.0.2",
|
||||
"eslint": "^9.35.0",
|
||||
"eslint-config-mantine": "^4.0.3",
|
||||
"eslint-plugin-jsx-a11y": "^6.10.2",
|
||||
"eslint-plugin-react": "^7.37.5",
|
||||
"identity-obj-proxy": "^3.0.0",
|
||||
"jsdom": "^26.1.0",
|
||||
"postcss": "^8.5.6",
|
||||
"postcss-preset-mantine": "1.18.0",
|
||||
"postcss-simple-vars": "^7.0.1",
|
||||
"prettier": "^3.6.2",
|
||||
"prop-types": "^15.8.1",
|
||||
"storybook": "^9.1.5",
|
||||
"stylelint": "^16.24.0",
|
||||
"stylelint-config-standard-scss": "^16.0.0",
|
||||
"typescript": "^5.9.2",
|
||||
"typescript-eslint": "^8.43.0",
|
||||
"vite": "^7.1.5",
|
||||
"vite-tsconfig-paths": "^5.1.4",
|
||||
"vitest": "^3.2.4"
|
||||
},
|
||||
"packageManager": "yarn@4.9.4"
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
module.exports = {
|
||||
plugins: {
|
||||
'postcss-preset-mantine': {},
|
||||
'postcss-simple-vars': {
|
||||
variables: {
|
||||
'mantine-breakpoint-xs': '36em',
|
||||
'mantine-breakpoint-sm': '48em',
|
||||
'mantine-breakpoint-md': '62em',
|
||||
'mantine-breakpoint-lg': '75em',
|
||||
'mantine-breakpoint-xl': '88em',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,13 @@
|
||||
import '@mantine/core/styles.css';
|
||||
|
||||
import { MantineProvider } from '@mantine/core';
|
||||
import { Router } from './Router';
|
||||
import { theme } from './theme';
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<MantineProvider theme={theme}>
|
||||
<Router />
|
||||
</MantineProvider>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
import { createBrowserRouter, RouterProvider } from 'react-router-dom';
|
||||
import { HomePage } from './pages/Home.page';
|
||||
import { Error_404 } from './components/404/404';
|
||||
|
||||
const router = createBrowserRouter([
|
||||
{
|
||||
path: '/',
|
||||
element: <HomePage />,
|
||||
},
|
||||
|
||||
|
||||
|
||||
{
|
||||
path: '*',
|
||||
element: <Error_404 /> },
|
||||
]);
|
||||
|
||||
export function Router() {
|
||||
return <RouterProvider router={router} />;
|
||||
}
|
||||
@@ -0,0 +1,59 @@
|
||||
import { Box, Title, Text, Button, Group, Stack, Image, Center } from '@mantine/core';
|
||||
import { useMantineTheme } from '@mantine/core';
|
||||
import { ArrowLeft } from 'phosphor-react'; // ← Importa el icono directamente
|
||||
import { Link } from 'react-router-dom';
|
||||
import { MantineCardWithShader } from './HoloShader_404';
|
||||
import { AppShellWithMenu } from '../Appshell/Appshell';
|
||||
|
||||
export function Error_404() {
|
||||
const theme = useMantineTheme();
|
||||
|
||||
return (
|
||||
<AppShellWithMenu>
|
||||
<Box
|
||||
style={{
|
||||
flex: 1,
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'flex-start',
|
||||
padding: '2rem',
|
||||
paddingTop: '0.5rem',
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
style={{
|
||||
flex: 1,
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
padding: '2rem',
|
||||
}}
|
||||
>
|
||||
<Stack align="center" maw={500} mx="auto">
|
||||
<MantineCardWithShader />
|
||||
<Title order={1}>Página no encontrada</Title>
|
||||
<Text size="lg">
|
||||
Parece que la página que estás buscando no existe o fue removida. Pero no te preocupes,
|
||||
puedes volver al inicio fácilmente.
|
||||
</Text>
|
||||
<Group mt="md">
|
||||
<Button
|
||||
component={Link}
|
||||
to="/"
|
||||
size="md"
|
||||
variant="gradient"
|
||||
gradient={{
|
||||
from: theme.colors.brand[7],
|
||||
to: theme.colors.secondary[4],
|
||||
}}
|
||||
leftSection={<ArrowLeft size={18} />} // ← Usa el icono Phosphor aquí
|
||||
>
|
||||
Volver al inicio
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Box>
|
||||
</Box>
|
||||
</AppShellWithMenu>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,142 @@
|
||||
import { Card, Title, Box, useMantineTheme } from '@mantine/core';
|
||||
import { Canvas, extend, useFrame, useThree } from '@react-three/fiber';
|
||||
import { useRef, useMemo } from 'react';
|
||||
import * as THREE from 'three';
|
||||
|
||||
// 🎨 Utilidad para convertir hex a RGB [0–1]
|
||||
function hexToRGBArray(hex: string): [number, number, number] {
|
||||
const bigint = parseInt(hex.replace('#', ''), 16);
|
||||
return [
|
||||
((bigint >> 16) & 255) / 255,
|
||||
((bigint >> 8) & 255) / 255,
|
||||
(bigint & 255) / 255,
|
||||
];
|
||||
}
|
||||
|
||||
// ✨ Shader personalizado estilo holográfico, con color dinámico
|
||||
class HoloShaderMaterial extends THREE.ShaderMaterial {
|
||||
constructor(color: [number, number, number]) {
|
||||
super({
|
||||
uniforms: {
|
||||
u_time: { value: 0 },
|
||||
u_resolution: { value: new THREE.Vector2() },
|
||||
u_color: { value: new THREE.Vector3(...color) },
|
||||
},
|
||||
vertexShader: `
|
||||
void main() {
|
||||
gl_Position = vec4(position, 1.0);
|
||||
}
|
||||
`,
|
||||
fragmentShader: `
|
||||
precision mediump float;
|
||||
uniform float u_time;
|
||||
uniform vec2 u_resolution;
|
||||
uniform vec3 u_color;
|
||||
|
||||
void main() {
|
||||
vec2 uv = gl_FragCoord.xy / u_resolution;
|
||||
vec2 pos = uv * 10.0;
|
||||
pos.x += u_time * 0.3;
|
||||
pos.y += sin(u_time * 0.2) * 2.0;
|
||||
|
||||
float color = sin(pos.x + sin(pos.y + sin(pos.x))) * 0.5 + 0.5;
|
||||
|
||||
vec3 c = vec3(
|
||||
u_color.r + 0.2 * sin(u_time + pos.x),
|
||||
u_color.g + 0.2 * cos(u_time + pos.y),
|
||||
u_color.b + 0.2 * sin(pos.x + pos.y + u_time)
|
||||
);
|
||||
|
||||
gl_FragColor = vec4(c * color, 1.0);
|
||||
}
|
||||
`,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
extend({ HoloShaderMaterial });
|
||||
|
||||
// 🎥 Plano con el shader
|
||||
function HoloPlane({ color }: { color: [number, number, number] }) {
|
||||
const mat = useRef<any>(null);
|
||||
const { size } = useThree();
|
||||
|
||||
useFrame(({ clock }) => {
|
||||
if (mat.current) {
|
||||
mat.current.uniforms.u_time.value = clock.getElapsedTime();
|
||||
mat.current.uniforms.u_resolution.value.set(size.width, size.height);
|
||||
}
|
||||
});
|
||||
|
||||
const material = useMemo(() => new HoloShaderMaterial(color), [color]);
|
||||
|
||||
return (
|
||||
<mesh>
|
||||
<planeGeometry args={[2, 2]} />
|
||||
<primitive object={material} ref={mat} attach="material" />
|
||||
</mesh>
|
||||
);
|
||||
}
|
||||
|
||||
// 🎨 Fondo que ocupa todo el contenedor
|
||||
function HolographicBackground({ color }: { color: [number, number, number] }) {
|
||||
return (
|
||||
<Box
|
||||
style={{
|
||||
position: 'absolute',
|
||||
inset: 0,
|
||||
zIndex: 0,
|
||||
pointerEvents: 'none',
|
||||
}}
|
||||
>
|
||||
<Canvas orthographic camera={{ zoom: 1, position: [0, 0, 1] }}>
|
||||
<HoloPlane color={color} />
|
||||
</Canvas>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
// 🧩 Componente final con fondo shader y texto 404
|
||||
export function MantineCardWithShader() {
|
||||
const theme = useMantineTheme();
|
||||
const hex = theme.colors[theme.primaryColor][6];
|
||||
const rgb = hexToRGBArray(hex);
|
||||
|
||||
return (
|
||||
<Card
|
||||
withBorder
|
||||
radius="lg"
|
||||
shadow="xl"
|
||||
style={{
|
||||
position: 'relative',
|
||||
overflow: 'hidden',
|
||||
minHeight: 300,
|
||||
minWidth: 400,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<HolographicBackground color={rgb} />
|
||||
|
||||
<Box style={{ position: 'relative', zIndex: 1, textAlign: 'center' }}>
|
||||
<Title
|
||||
order={1}
|
||||
style={{
|
||||
fontSize: '15rem',
|
||||
fontWeight: 900,
|
||||
backgroundImage: 'linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0))',
|
||||
WebkitBackgroundClip: 'text',
|
||||
WebkitTextFillColor: 'transparent',
|
||||
textAlign: 'center',
|
||||
lineHeight: 1,
|
||||
userSelect: 'none', // <-- evita selección
|
||||
textDecoration: 'none', // <-- evita subrayado
|
||||
}}
|
||||
>
|
||||
404
|
||||
</Title>
|
||||
</Box>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,103 @@
|
||||
.navbar {
|
||||
height: 100vh; /* ← Ocupa todo el alto de la ventana */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: light-dark(var(--mantine-color-white), var(--mantine-color-dark-6));
|
||||
width: 300px;
|
||||
border-right: 1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
|
||||
position: sticky; /* ← Opcional, si quieres que se quede "pegado" */
|
||||
top: 0; /* ← Ancla arriba */
|
||||
}
|
||||
|
||||
|
||||
.title {
|
||||
font-family:
|
||||
Greycliff CF,
|
||||
var(--mantine-font-family);
|
||||
margin-bottom: var(--mantine-spacing-sm);
|
||||
background-color: var(--mantine-color-body);
|
||||
padding: var(--mantine-spacing-xs);
|
||||
padding-top: 15px;
|
||||
height: 50px;
|
||||
border-bottom: 1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-7));
|
||||
}
|
||||
|
||||
|
||||
|
||||
.wrapper {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* Esta es la barra izquierda pequeña donde los iconos */
|
||||
.aside {
|
||||
flex: 0 0 52px;
|
||||
background-color: var(--mantine-color-body);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
border-right: 1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-7));
|
||||
}
|
||||
|
||||
.main {
|
||||
flex: 1;
|
||||
background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
|
||||
}
|
||||
|
||||
.topSection {
|
||||
padding-top: 12px; /* o la cantidad que desees */
|
||||
}
|
||||
|
||||
/* Estos son los iconos */
|
||||
.mainLink {
|
||||
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin-bottom: 4px;
|
||||
border-radius: var(--mantine-radius-md);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-0));
|
||||
|
||||
&:hover {
|
||||
background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-5));
|
||||
}
|
||||
|
||||
&[data-active] {
|
||||
&,
|
||||
&:hover {
|
||||
background-color: var(--mantine-color-brand-7);
|
||||
color: var(--mantine-color-brand-2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.link {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
border-top-right-radius: var(--mantine-radius-md);
|
||||
border-bottom-right-radius: var(--mantine-radius-md);
|
||||
color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-0));
|
||||
padding: 0 var(--mantine-spacing-md);
|
||||
font-size: var(--mantine-font-size-sm);
|
||||
margin-right: var(--mantine-spacing-md);
|
||||
font-weight: 420;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
|
||||
&:hover {
|
||||
background-color: light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-5));
|
||||
color: light-dark(var(--mantine-color-dark), var(--mantine-color-light));
|
||||
}
|
||||
|
||||
&[data-active] {
|
||||
&,
|
||||
&:hover {
|
||||
background-color: var(--mantine-color-brand-7);
|
||||
color: var(--mantine-color-brand-2);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,197 @@
|
||||
import {
|
||||
AppShell,
|
||||
Burger,
|
||||
Group,
|
||||
Tooltip,
|
||||
UnstyledButton,
|
||||
Title,
|
||||
useMantineTheme,
|
||||
} from '@mantine/core';
|
||||
import { useMediaQuery } from '@mantine/hooks';
|
||||
import { useEffect, useMemo } from 'react';
|
||||
import { Link, useLocation, useNavigate } from 'react-router-dom';
|
||||
|
||||
import { submenuLinks } from './Links_Appshell/submenuLinks';
|
||||
import { mainLinksdata } from './Links_Appshell/navigationsLinks';
|
||||
import { default as LogoIcon } from '../icons/favicon';
|
||||
|
||||
import classes from './Appshell.module.css';
|
||||
|
||||
import {
|
||||
useAppShellStore,
|
||||
getLastSubmenuRoute,
|
||||
setLastSubmenuRoute,
|
||||
} from '@/stores/useAppShellStore';
|
||||
|
||||
type AppShellWithMenuProps = {
|
||||
children?: React.ReactNode;
|
||||
};
|
||||
|
||||
export function AppShellWithMenu({ children }: AppShellWithMenuProps) {
|
||||
const theme = useMantineTheme();
|
||||
const location = useLocation();
|
||||
const navigate = useNavigate();
|
||||
const isMobile = useMediaQuery('(max-width: 768px)');
|
||||
|
||||
// Zustand store
|
||||
const {
|
||||
activeMain,
|
||||
setActiveMain,
|
||||
activeLink,
|
||||
setActiveLink,
|
||||
mobileOpened,
|
||||
desktopOpened,
|
||||
toggleMobile,
|
||||
toggleDesktop,
|
||||
openDesktop,
|
||||
closeMobile,
|
||||
} = useAppShellStore();
|
||||
|
||||
const isCollapsed = useMemo(
|
||||
() => (isMobile ? !mobileOpened : !desktopOpened),
|
||||
[isMobile, mobileOpened, desktopOpened]
|
||||
);
|
||||
|
||||
// Detectar main activo según la ruta
|
||||
useEffect(() => {
|
||||
const currentPath =
|
||||
location.pathname?.toLowerCase().replace(/\/$/, '') ?? '';
|
||||
|
||||
let matchedMain: string | null = null;
|
||||
let maxMatchLength = 0;
|
||||
|
||||
Object.entries(submenuLinks).forEach(([main, items]) => {
|
||||
items.forEach((item: { to: string }) => {
|
||||
const itemPath = item.to.toLowerCase().replace(/\/$/, '');
|
||||
if (currentPath === itemPath || currentPath.startsWith(itemPath + '/')) {
|
||||
if (itemPath.length > maxMatchLength) {
|
||||
matchedMain = main;
|
||||
maxMatchLength = itemPath.length;
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
if (matchedMain) setActiveMain(matchedMain);
|
||||
}, [location.pathname, setActiveMain]);
|
||||
|
||||
// Actualizar activeLink
|
||||
useEffect(() => {
|
||||
const sublinks = submenuLinks[activeMain as keyof typeof submenuLinks] || [];
|
||||
const found = sublinks.find((item) => item.to === location.pathname);
|
||||
setActiveLink(found?.label ?? '');
|
||||
}, [location.pathname, activeMain, setActiveLink]);
|
||||
|
||||
const mainLinks = mainLinksdata.map((link) => (
|
||||
<Tooltip
|
||||
label={link.label}
|
||||
position="right"
|
||||
withArrow
|
||||
transitionProps={{ duration: 0 }}
|
||||
key={link.label}
|
||||
>
|
||||
<UnstyledButton
|
||||
onClick={() => {
|
||||
setActiveMain(link.label);
|
||||
const remembered = getLastSubmenuRoute(link.label);
|
||||
const fallback =
|
||||
submenuLinks[link.label as keyof typeof submenuLinks]?.[0]?.to;
|
||||
if (isCollapsed && (remembered || fallback)) {
|
||||
navigate(remembered ?? fallback);
|
||||
}
|
||||
}}
|
||||
className={classes.mainLink}
|
||||
data-active={link.label === activeMain || undefined}
|
||||
>
|
||||
<link.icon size={24} weight="duotone" />
|
||||
</UnstyledButton>
|
||||
</Tooltip>
|
||||
));
|
||||
|
||||
const links: React.ReactNode = (
|
||||
(submenuLinks[activeMain as keyof typeof submenuLinks] || []) as {
|
||||
label: string;
|
||||
to: string;
|
||||
}[]
|
||||
).map((item) => (
|
||||
<Link
|
||||
className={classes.link}
|
||||
data-active={activeLink === item.label || undefined}
|
||||
to={item.to}
|
||||
key={item.label}
|
||||
style={{ display: isCollapsed ? 'none' : 'block' }}
|
||||
onClick={() => {
|
||||
setLastSubmenuRoute(activeMain, item.to);
|
||||
if (isMobile) closeMobile();
|
||||
}}
|
||||
>
|
||||
{item.label}
|
||||
</Link>
|
||||
));
|
||||
|
||||
useEffect(() => {
|
||||
if (!isMobile) openDesktop();
|
||||
}, [isMobile, openDesktop]);
|
||||
|
||||
return (
|
||||
<AppShell
|
||||
header={{ height: 60 }}
|
||||
navbar={{
|
||||
width: isCollapsed ? 60 : 300,
|
||||
breakpoint: 'sm',
|
||||
collapsed: { mobile: !mobileOpened, desktop: !desktopOpened },
|
||||
}}
|
||||
padding={0}
|
||||
styles={{
|
||||
main: {
|
||||
height: '100dvh', // o '100vh', pero mejor con 100dvh para evitar bugs móviles
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
},
|
||||
}}
|
||||
>
|
||||
{/* Header */}
|
||||
<AppShell.Header>
|
||||
<Group h="100%" px="sm">
|
||||
<Burger
|
||||
opened={mobileOpened}
|
||||
onClick={toggleMobile}
|
||||
hiddenFrom="sm"
|
||||
size="sm"
|
||||
/>
|
||||
<Burger
|
||||
opened={desktopOpened}
|
||||
onClick={toggleDesktop}
|
||||
visibleFrom="sm"
|
||||
size="sm"
|
||||
/>
|
||||
<LogoIcon
|
||||
style={{ width: 30, height: 30 }}
|
||||
circleFill={theme.colors.brand[9]}
|
||||
pathFill={theme.colors.secondary[2]}
|
||||
/>
|
||||
</Group>
|
||||
</AppShell.Header>
|
||||
|
||||
{/* Navbar */}
|
||||
<AppShell.Navbar>
|
||||
<div className={classes.wrapper}>
|
||||
<div className={classes.aside}>
|
||||
<div className={classes.topSection}>{mainLinks}</div>
|
||||
</div>
|
||||
<div className={classes.main}>
|
||||
{!isCollapsed && (
|
||||
<Title order={4} className={classes.title}>
|
||||
{activeMain}
|
||||
</Title>
|
||||
)}
|
||||
{links}
|
||||
</div>
|
||||
</div>
|
||||
</AppShell.Navbar>
|
||||
|
||||
{/* Main Content */}
|
||||
<AppShell.Main>{children}</AppShell.Main>
|
||||
</AppShell>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
// src/data/navigationLinks.ts
|
||||
import { House, Book, Users, Camera, Flask, Gear } from "phosphor-react";
|
||||
|
||||
export const mainLinksdata = [
|
||||
{ icon: House, label: "Home" },
|
||||
// { icon: Book, label: "Biblioteca" },
|
||||
// { icon: Users, label: "AgentesLLMs" },
|
||||
// { icon: Camera, label: "CameraNoir" },
|
||||
// { icon: Flask, label: "Experimentos" },
|
||||
// { icon: Gear, label: "Settings" },
|
||||
];
|
||||
@@ -0,0 +1,19 @@
|
||||
// src/data/submenuLinks.ts
|
||||
|
||||
export const submenuLinks = {
|
||||
|
||||
// Home Principal
|
||||
|
||||
Home: [
|
||||
{ label: 'Inicio', to: '/' },
|
||||
|
||||
],
|
||||
|
||||
// Biblioteca
|
||||
|
||||
// Biblioteca: [
|
||||
// { label: 'Biblioteca', to: '/bibliot/Biblioteca' },
|
||||
// { label: 'test', to: '/bibliot/editortest' },
|
||||
|
||||
// ],
|
||||
};
|
||||
@@ -0,0 +1,28 @@
|
||||
import { Button, Group, useMantineColorScheme } from '@mantine/core';
|
||||
|
||||
export function ColorSchemeToggle() {
|
||||
const { setColorScheme, colorScheme } = useMantineColorScheme();
|
||||
|
||||
return (
|
||||
<Group justify="center" mt="xl">
|
||||
<Button
|
||||
variant={colorScheme === 'light' ? 'filled' : 'outline'}
|
||||
onClick={() => setColorScheme('light')}
|
||||
>
|
||||
Light
|
||||
</Button>
|
||||
<Button
|
||||
variant={colorScheme === 'dark' ? 'filled' : 'outline'}
|
||||
onClick={() => setColorScheme('dark')}
|
||||
>
|
||||
Dark
|
||||
</Button>
|
||||
<Button
|
||||
variant={colorScheme === 'auto' ? 'filled' : 'outline'}
|
||||
onClick={() => setColorScheme('auto')}
|
||||
>
|
||||
Auto
|
||||
</Button>
|
||||
</Group>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,260 @@
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import {
|
||||
Room,
|
||||
RoomEvent,
|
||||
RemoteParticipant,
|
||||
RemoteTrack,
|
||||
createLocalTracks,
|
||||
} from 'livekit-client';
|
||||
import { Button, SimpleGrid, Stack, Text, Loader, Paper, Group } from '@mantine/core';
|
||||
import { VUMeter } from '@/components/VUMeter';
|
||||
|
||||
interface LiveKitRoomProps {
|
||||
tokenUrl: string;
|
||||
roomName: string;
|
||||
userName: string;
|
||||
}
|
||||
|
||||
interface VideoTile {
|
||||
id: string;
|
||||
element: HTMLVideoElement;
|
||||
}
|
||||
|
||||
export function LiveKitRoom({ tokenUrl, roomName, userName }: LiveKitRoomProps) {
|
||||
const [room, setRoom] = useState<Room | null>(null);
|
||||
const [connecting, setConnecting] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [videos, setVideos] = useState<VideoTile[]>([]);
|
||||
const localVideoRef = useRef<HTMLVideoElement>(null);
|
||||
const audioAnalyzers = useRef<Record<string, AnalyserNode>>({});
|
||||
const audioContexts = useRef<Record<string, AudioContext>>({});
|
||||
|
||||
function createVUMeter(stream: MediaStream, id: string) {
|
||||
const audioContext = new AudioContext();
|
||||
const source = audioContext.createMediaStreamSource(stream);
|
||||
const analyser = audioContext.createAnalyser();
|
||||
analyser.fftSize = 512;
|
||||
analyser.smoothingTimeConstant = 0.7;
|
||||
source.connect(analyser);
|
||||
audioContexts.current[id] = audioContext;
|
||||
audioAnalyzers.current[id] = analyser;
|
||||
}
|
||||
|
||||
async function joinRoom() {
|
||||
try {
|
||||
setConnecting(true);
|
||||
setError(null);
|
||||
|
||||
const res = await fetch(`${tokenUrl}?room=${roomName}&user=${userName}`);
|
||||
if (!res.ok) throw new Error(`HTTP ${res.status}`);
|
||||
const { token } = await res.json();
|
||||
|
||||
const r = new Room();
|
||||
setRoom(r);
|
||||
|
||||
r.on(RoomEvent.ParticipantConnected, (p) =>
|
||||
console.log(`🟢 ${p.identity} se unió`),
|
||||
);
|
||||
r.on(RoomEvent.ParticipantDisconnected, (p) => {
|
||||
console.log(`🔴 ${p.identity} salió`);
|
||||
removeParticipantVideo(p.identity);
|
||||
});
|
||||
|
||||
r.on(RoomEvent.TrackSubscribed, (track: RemoteTrack, pub, participant: RemoteParticipant) => {
|
||||
if (track.kind === 'video') {
|
||||
const videoEl = track.attach();
|
||||
videoEl.style.width = '100%';
|
||||
videoEl.style.height = '100%';
|
||||
videoEl.style.objectFit = 'cover';
|
||||
addParticipantVideo(participant.identity, videoEl);
|
||||
} else if (track.kind === 'audio') {
|
||||
const stream = new MediaStream([track.mediaStreamTrack]);
|
||||
createVUMeter(stream, participant.identity);
|
||||
track.attach();
|
||||
}
|
||||
});
|
||||
|
||||
await r.connect('ws://192.168.1.131:7880', token);
|
||||
|
||||
const localTracks = await createLocalTracks({ audio: true, video: true });
|
||||
for (const track of localTracks) {
|
||||
await r.localParticipant.publishTrack(track);
|
||||
if (track.kind === 'video' && localVideoRef.current) {
|
||||
const el = track.attach();
|
||||
el.muted = true;
|
||||
el.playsInline = true;
|
||||
el.autoplay = true;
|
||||
el.style.width = '100%';
|
||||
el.style.height = '100%';
|
||||
el.style.objectFit = 'cover';
|
||||
localVideoRef.current.srcObject = el.srcObject;
|
||||
} else if (track.kind === 'audio') {
|
||||
const stream = new MediaStream([track.mediaStreamTrack]);
|
||||
createVUMeter(stream, 'Tú');
|
||||
}
|
||||
}
|
||||
} catch (err: any) {
|
||||
setError(err.message || 'Error al conectar');
|
||||
} finally {
|
||||
setConnecting(false);
|
||||
}
|
||||
}
|
||||
|
||||
function addParticipantVideo(id: string, element: HTMLVideoElement) {
|
||||
setVideos((prev) => (prev.find((v) => v.id === id) ? prev : [...prev, { id, element }]));
|
||||
}
|
||||
|
||||
function removeParticipantVideo(id: string) {
|
||||
setVideos((prev) => prev.filter((v) => v.id !== id));
|
||||
}
|
||||
|
||||
function leaveRoom() {
|
||||
room?.disconnect();
|
||||
for (const ctx of Object.values(audioContexts.current)) ctx.close();
|
||||
setRoom(null);
|
||||
setVideos([]);
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
room?.disconnect();
|
||||
for (const ctx of Object.values(audioContexts.current)) ctx.close();
|
||||
};
|
||||
}, [room]);
|
||||
|
||||
return (
|
||||
<Stack align="center" spacing="sm" p="sm">
|
||||
<Text fw={600} size="lg">
|
||||
LiveKit Sala: {roomName}
|
||||
</Text>
|
||||
|
||||
{error && <Text c="red">{error}</Text>}
|
||||
|
||||
{!room && !connecting && (
|
||||
<Button onClick={joinRoom} variant="filled" color="blue">
|
||||
Unirme a la sala
|
||||
</Button>
|
||||
)}
|
||||
|
||||
{connecting && <Loader />}
|
||||
|
||||
{room && (
|
||||
<>
|
||||
<Group>
|
||||
<Button onClick={leaveRoom} color="red" variant="light" size="xs">
|
||||
Salir
|
||||
</Button>
|
||||
</Group>
|
||||
|
||||
{/* ✅ Rejilla más densa con VU Meter */}
|
||||
<SimpleGrid
|
||||
cols={{ base: 2, sm: 3, md: 4, lg: 5 }}
|
||||
spacing="xs"
|
||||
style={{
|
||||
width: '100%',
|
||||
maxWidth: 1400,
|
||||
gridAutoRows: '140px',
|
||||
}}
|
||||
>
|
||||
{/* 📹 Video local */}
|
||||
<Paper
|
||||
shadow="sm"
|
||||
p={2}
|
||||
radius="md"
|
||||
style={{
|
||||
height: 140,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'space-between',
|
||||
}}
|
||||
>
|
||||
<Text ta="center" size="xs" fw={500}>
|
||||
Tú ({userName})
|
||||
</Text>
|
||||
<div
|
||||
style={{
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
overflow: 'hidden',
|
||||
borderRadius: 6,
|
||||
position: 'relative',
|
||||
}}
|
||||
>
|
||||
<video
|
||||
ref={localVideoRef}
|
||||
autoPlay
|
||||
muted
|
||||
playsInline
|
||||
style={{
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
objectFit: 'cover',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
position: 'absolute',
|
||||
bottom: 4,
|
||||
left: 4,
|
||||
right: 4,
|
||||
height: 8,
|
||||
}}
|
||||
>
|
||||
<VUMeter analyser={audioAnalyzers.current['Tú']} />
|
||||
</div>
|
||||
</div>
|
||||
</Paper>
|
||||
|
||||
{/* 👥 Participantes remotos */}
|
||||
{videos.map((v) => (
|
||||
<Paper
|
||||
shadow="sm"
|
||||
p={2}
|
||||
radius="md"
|
||||
style={{
|
||||
height: 180,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'flex-start',
|
||||
}}
|
||||
>
|
||||
{/* Nombre */}
|
||||
<Text ta="center" size="xs" fw={500} mb={2}>
|
||||
{v.id}
|
||||
</Text>
|
||||
|
||||
{/* Video */}
|
||||
<div
|
||||
style={{
|
||||
width: '100%',
|
||||
flexGrow: 1,
|
||||
overflow: 'hidden',
|
||||
borderRadius: 6,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
{v.element}
|
||||
</div>
|
||||
|
||||
{/* 👇 VU Meter totalmente debajo */}
|
||||
<div
|
||||
style={{
|
||||
marginTop: 6,
|
||||
width: '90%',
|
||||
height: 10,
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
<VUMeter analyser={audioAnalyzers.current[v.id]} color="blue" />
|
||||
</div>
|
||||
</Paper>
|
||||
))}
|
||||
</SimpleGrid>
|
||||
</>
|
||||
)}
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
import { AppShellWithMenu } from './Appshell/Appshell';
|
||||
|
||||
|
||||
export function Plantilla() {
|
||||
return (
|
||||
<AppShellWithMenu>
|
||||
|
||||
</AppShellWithMenu>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,65 @@
|
||||
import { useState } from 'react';
|
||||
import { TextInput, PasswordInput, Button, Paper, Title, Container, Group, Alert } from '@mantine/core';
|
||||
import { User, Lock } from 'phosphor-react'; // ← Importa los iconos Phosphor
|
||||
|
||||
export function LoginPage() {
|
||||
const [email, setEmail] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
const [error, setError] = useState('');
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setLoading(true);
|
||||
setError('');
|
||||
// Aquí deberías llamar a tu endpoint de login (ajusta la URL y payload)
|
||||
try {
|
||||
const res = await fetch('/api/v1/usuarios/login', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ email, password })
|
||||
});
|
||||
if (!res.ok) throw new Error('Credenciales incorrectas');
|
||||
// Aquí puedes guardar el usuario/token en el estado global o localStorage
|
||||
window.location.href = '/';
|
||||
} catch (err: any) {
|
||||
setError(err.message);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Container size={420} my={40}>
|
||||
<Title align="center" mb={20}>Iniciar sesión</Title>
|
||||
<Paper withBorder shadow="md" p={30} mt={30} radius="md">
|
||||
<form onSubmit={handleSubmit}>
|
||||
<TextInput
|
||||
label="Email"
|
||||
placeholder="tucorreo@ejemplo.com"
|
||||
icon={<User size={18} />} // ← Usa el icono Phosphor aquí
|
||||
value={email}
|
||||
onChange={e => setEmail(e.target.value)}
|
||||
required
|
||||
mb={10}
|
||||
/>
|
||||
<PasswordInput
|
||||
label="Contraseña"
|
||||
placeholder="Tu contraseña"
|
||||
icon={<Lock size={18} />} // ← Usa el icono Phosphor aquí
|
||||
value={password}
|
||||
onChange={e => setPassword(e.target.value)}
|
||||
required
|
||||
mb={20}
|
||||
/>
|
||||
{error && <Alert color="red" mb={10}>{error}</Alert>}
|
||||
<Group mt="md">
|
||||
<Button type="submit" loading={loading} fullWidth>
|
||||
Entrar
|
||||
</Button>
|
||||
</Group>
|
||||
</form>
|
||||
</Paper>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,68 @@
|
||||
import { useEffect, useRef } from 'react';
|
||||
import { Progress } from '@mantine/core';
|
||||
|
||||
interface VUMeterProps {
|
||||
analyser: AnalyserNode | null;
|
||||
color?: string;
|
||||
id?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 🎚️ Componente VUmetro visual
|
||||
* Mide energía RMS del audio en tiempo real desde un AnalyserNode.
|
||||
*/
|
||||
export function VUMeter({ analyser, color = 'green', id }: VUMeterProps) {
|
||||
const valueRef = useRef(0);
|
||||
const barRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!analyser) return;
|
||||
|
||||
const dataArray = new Uint8Array(analyser.fftSize);
|
||||
const update = () => {
|
||||
analyser.getByteTimeDomainData(dataArray);
|
||||
const rms =
|
||||
Math.sqrt(
|
||||
dataArray.reduce((acc, val) => acc + (val - 128) ** 2, 0) /
|
||||
dataArray.length
|
||||
) / 128;
|
||||
|
||||
// Escala sensible y suavizada
|
||||
const level = Math.min(rms * 180, 100);
|
||||
valueRef.current = level;
|
||||
|
||||
if (barRef.current) {
|
||||
barRef.current.style.width = `${level}%`;
|
||||
barRef.current.style.backgroundColor =
|
||||
level < 30 ? '#4caf50' : level < 70 ? '#ffeb3b' : '#f44336';
|
||||
}
|
||||
|
||||
requestAnimationFrame(update);
|
||||
};
|
||||
|
||||
update();
|
||||
}, [analyser]);
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
width: '100%',
|
||||
height: '8px',
|
||||
background: '#222',
|
||||
borderRadius: '4px',
|
||||
overflow: 'hidden',
|
||||
position: 'relative',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
ref={barRef}
|
||||
style={{
|
||||
height: '100%',
|
||||
width: '0%',
|
||||
transition: 'width 0.1s linear',
|
||||
background: color,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
.title {
|
||||
color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
|
||||
font-size: rem(100px);
|
||||
font-weight: 900;
|
||||
letter-spacing: rem(-2px);
|
||||
|
||||
@media (max-width: $mantine-breakpoint-md) {
|
||||
font-size: rem(50px);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
import { Welcome } from './Welcome';
|
||||
|
||||
export default {
|
||||
title: 'Welcome',
|
||||
};
|
||||
|
||||
export const Usage = () => <Welcome />;
|
||||
@@ -0,0 +1,12 @@
|
||||
import { render, screen } from '@test-utils';
|
||||
import { Welcome } from './Welcome';
|
||||
|
||||
describe('Welcome component', () => {
|
||||
it('has correct Vite guide link', () => {
|
||||
render(<Welcome />);
|
||||
expect(screen.getByText('this guide')).toHaveAttribute(
|
||||
'href',
|
||||
'https://mantine.dev/guides/vite/'
|
||||
);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,23 @@
|
||||
import { Anchor, Text, Title } from '@mantine/core';
|
||||
import classes from './Welcome.module.css';
|
||||
|
||||
export function Welcome() {
|
||||
return (
|
||||
<>
|
||||
<Title className={classes.title} ta="center" mt={100}>
|
||||
Welcome to{' '}
|
||||
<Text inherit variant="gradient" component="span" gradient={{ from: 'pink', to: 'yellow' }}>
|
||||
Mantine
|
||||
</Text>
|
||||
</Title>
|
||||
<Text c="dimmed" ta="center" size="lg" maw={580} mx="auto" mt="xl">
|
||||
This starter Vite project includes a minimal setup, if you want to learn more on Mantine +
|
||||
Vite integration follow{' '}
|
||||
<Anchor href="https://mantine.dev/guides/vite/" size="lg">
|
||||
this guide
|
||||
</Anchor>
|
||||
. To get started edit pages/Home.page.tsx file.
|
||||
</Text>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
width="185.21428mm"
|
||||
height="185.21428mm"
|
||||
viewBox="0 0 185.21428 185.21428"
|
||||
version="1.1"
|
||||
id="svg1"
|
||||
sodipodi:docname="favicon.svg"
|
||||
inkscape:version="1.4 (86a8ad7, 2024-10-11)"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<sodipodi:namedview
|
||||
id="namedview1"
|
||||
pagecolor="#242424"
|
||||
bordercolor="#000000"
|
||||
borderopacity="0.25"
|
||||
inkscape:showpageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#d1d1d1"
|
||||
inkscape:document-units="mm"
|
||||
inkscape:zoom="0.52284039"
|
||||
inkscape:cx="317.49651"
|
||||
inkscape:cy="284.02549"
|
||||
inkscape:window-width="1147"
|
||||
inkscape:window-height="927"
|
||||
inkscape:window-x="2024"
|
||||
inkscape:window-y="105"
|
||||
inkscape:window-maximized="0"
|
||||
inkscape:current-layer="layer1" />
|
||||
<defs
|
||||
id="defs1" />
|
||||
<g
|
||||
inkscape:label="Layer 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1"
|
||||
transform="translate(-13.15728,-55.159447)">
|
||||
<circle
|
||||
style="fill:#ffffff"
|
||||
id="path1"
|
||||
cx="105.76442"
|
||||
cy="147.76659"
|
||||
r="92.60714" />
|
||||
<path
|
||||
d="m 60.52824,130.59648 q 5.092664,-3.88488 12.125369,-6.43431 7.032718,-2.54944 15.035463,-4.12768 2.78883,-3.52067 5.45641,-6.91992 2.66758,-3.52066 4.60763,-6.55571 1.94007,-3.15645 3.031358,-5.82731 1.09128,-2.792247 0.84876,-4.977477 l 0.24252,0.2428 q -0.60628,-1.21402 -2.910088,-1.82102 -2.30382,-0.72842 -5.45642,-0.72842 -4.00138,0 -8.972768,1.09262 -4.971406,0.97121 -10.064057,2.91365 -5.092651,1.82102 -10.064057,4.491867 -4.850147,2.67085 -8.851513,5.94871 -3.880108,3.27786 -6.547698,7.16273 -2.546319,3.88487 -2.910081,8.13394 -5.456413,-4.61327 -7.881486,-8.49814 -2.303829,-4.00627 -2.303829,-7.52694 0,-6.19151 3.152597,-10.926187 3.152597,-4.73468 8.124003,-8.13393 5.092651,-3.52067 11.519091,-5.827315 6.547698,-2.306631 13.095396,-3.642054 6.668943,-1.456837 12.852879,-1.94244 6.305193,-0.607005 10.912843,-0.607005 6.911448,0 12.974128,0.971207 6.06269,0.971221 10.54908,3.035062 4.60766,1.942428 7.27523,4.856075 2.66758,2.91365 2.66758,6.91992 -0.72751,3.88487 -2.54632,7.16272 -1.69755,3.277867 -3.88013,6.312907 -2.18257,2.91365 -4.60766,5.94871 -2.30381,2.91365 -4.24387,5.94871 2.78884,0.12142 5.09265,0.36421 2.42508,0.12141 4.72891,0.12141 l -5.33517,13.35423 q -3.27384,0 -5.33517,0 -2.0613,0 -3.6376,0.12142 -1.45505,0 -2.78884,0.12141 -1.21253,0.12141 -2.78884,0.3642 -0.2425,0 -0.36376,0.12142 -0.12128,0 -0.36376,0 -8.730248,12.86862 -13.944158,27.19407 -5.213911,14.20405 -7.881489,28.77232 -4.728902,0.2428 -8.972771,-0.36422 -4.122624,-0.4856 -7.153976,-2.06382 -2.910081,-1.45683 -4.365128,-4.00627 -1.455047,-2.54946 -0.727524,-6.31292 0.848782,-3.27786 2.425074,-7.76973 1.697551,-4.61329 3.637617,-9.59078 2.061313,-5.09889 4.24387,-10.19778 2.303828,-5.22029 4.486386,-9.71218 -3.031339,1.33543 -6.91146,3.15647 -3.880108,1.82102 -6.668943,3.64206 z m 103.06565,44.5546 q 0.24249,3.64205 -1.94006,8.49814 -2.18258,4.8561 -5.69893,10.07639 -3.3951,5.22029 -7.63897,10.31916 -4.24389,5.2203 -8.12401,9.46937 -3.8801,4.24907 -6.91144,7.04132 -3.03134,2.91365 -4.12263,3.52066 -1.57629,0.60702 -3.27384,1.09263 -1.57629,0.607 -3.88013,-0.36422 -1.45506,-0.60699 -3.51638,-1.69963 -1.94005,-0.97122 -3.6376,-2.42803 -1.8188,-1.33542 -2.78884,-3.15646 -1.09128,-1.69963 -0.60626,-3.76347 0.48502,-1.82104 2.30383,-4.49187 1.69755,-2.67085 4.12261,-5.70591 2.54633,-3.03505 5.57768,-6.1915 3.15261,-3.03505 6.3052,-5.82729 3.27385,-2.79225 6.3052,-4.85609 3.15258,-2.06384 5.82015,-3.03506 0.36376,-0.12142 0.72754,-1.82103 0.36375,-1.69964 0.12115,-4.49187 -0.12115,-1.45684 -0.72752,-3.15646 -0.48502,-1.69963 -1.45505,-3.03505 -0.84876,-1.33543 -2.18254,-2.18525 -1.3338,-0.97122 -2.91009,-0.97122 -2.78884,0 -5.82018,2.91365 -3.03134,2.54946 -5.57767,1.82104 -2.4251,-0.72842 -3.7589,-3.03506 -1.21252,-2.42803 -0.84877,-5.46309 0.48502,-3.03505 3.39511,-5.09889 0.97004,-0.60702 4.00138,-3.03505 3.03135,-2.54945 6.66897,-5.7059 3.63759,-3.15646 7.03269,-6.31292 3.39512,-3.27785 5.09267,-5.3417 1.57629,-1.94242 2.0613,-3.03504 0.48502,-1.09261 0.36376,-1.69963 -0.12116,-0.60702 -0.72752,-0.72842 -0.48502,-0.2428 -0.84877,-0.2428 -1.45505,-0.12141 -3.3951,-0.2428 -1.81881,-0.12142 -3.51636,0 -1.69754,0.12128 -3.15259,0.4856 -1.33379,0.2428 -1.81881,0.72842 -0.97002,0.7284 -3.03134,3.88487 -1.94005,3.03505 -4.24386,6.67711 -2.30383,3.64207 -4.48642,7.04132 -2.06132,3.39927 -3.03135,4.85609 -2.18257,3.03505 -4.36511,3.88487 -2.30382,0.72842 -3.88012,0 -1.57631,-0.72841 -1.94007,-2.54945 -0.48501,-1.82102 0.84878,-4.00627 1.45505,-2.30664 3.1526,-5.34169 1.69754,-3.15646 3.51636,-6.55571 1.81878,-3.52067 3.63759,-7.16274 1.94008,-3.64206 3.75889,-7.16273 1.3338,-2.42803 2.78885,-3.88487 1.45503,-1.57822 3.8801,-2.42803 2.9101,-0.72842 6.42644,-0.97122 3.63761,-0.24281 7.15397,-0.12141 3.51636,0 6.66895,0.3642 3.15259,0.2428 5.2139,0.36422 2.30381,0.24279 4.48638,1.94243 2.30383,1.69962 3.88013,3.88485 1.69755,2.18524 2.42507,4.6133 0.72752,2.30664 -0.12116,3.88486 -0.12115,0.24281 -1.45503,1.57823 -1.33379,1.33543 -3.51636,3.39927 -2.06131,2.06383 -4.7289,4.61327 -2.66758,2.42805 -5.33516,4.97749 -2.54633,2.42805 -4.9714,4.61329 -2.42506,2.18523 -4.00137,3.64205 h 1.45505 q 4.60763,0 7.88149,0.72842 3.39511,0.607 6.54769,3.27785 2.66758,-3.03505 5.57768,-7.52693 2.91008,-4.61328 5.45641,-8.74095 2.30381,-4.00628 4.60764,-5.22029 2.42506,-1.21402 4.12263,-0.60702 1.81879,0.48561 2.42507,2.54946 0.72751,1.94243 -0.36376,4.49186 -6.79022,11.0476 -11.15534,18.21033 -4.24387,7.04132 -6.30518,9.95498 z"
|
||||
id="text1-8-5-1"
|
||||
style="fill:#000000"
|
||||
aria-label="Fz"
|
||||
inkscape:label="text1" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 5.9 KiB |
@@ -0,0 +1,37 @@
|
||||
import React from 'react';
|
||||
|
||||
type LogoIconProps = React.SVGProps<SVGSVGElement> & {
|
||||
circleFill?: string;
|
||||
pathFill?: string;
|
||||
};
|
||||
|
||||
const LogoIcon: React.FC<LogoIconProps> = ({
|
||||
style,
|
||||
circleFill = 'currentColor',
|
||||
pathFill = 'currentColor',
|
||||
...props
|
||||
}) => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="1em"
|
||||
height="1em"
|
||||
viewBox="0 0 185.21428 185.21428"
|
||||
style={style}
|
||||
{...props}
|
||||
>
|
||||
<g transform="translate(-13.15728,-55.159447)">
|
||||
<circle
|
||||
cx="105.76442"
|
||||
cy="147.76659"
|
||||
r="92.60714"
|
||||
fill={circleFill}
|
||||
/>
|
||||
<path
|
||||
d="m 60.52824,130.59648 q 5.092664,-3.88488 12.125369,-6.43431 7.032718,-2.54944 15.035463,-4.12768 2.78883,-3.52067 5.45641,-6.91992 2.66758,-3.52066 4.60763,-6.55571 1.94007,-3.15645 3.031358,-5.82731 1.09128,-2.792247 0.84876,-4.977477 l 0.24252,0.2428 q -0.60628,-1.21402 -2.910088,-1.82102 -2.30382,-0.72842 -5.45642,-0.72842 -4.00138,0 -8.972768,1.09262 -4.971406,0.97121 -10.064057,2.91365 -5.092651,1.82102 -10.064057,4.491867 -4.850147,2.67085 -8.851513,5.94871 -3.880108,3.27786 -6.547698,7.16273 -2.546319,3.88487 -2.910081,8.13394 -5.456413,-4.61327 -7.881486,-8.49814 -2.303829,-4.00627 -2.303829,-7.52694 0,-6.19151 3.152597,-10.926187 3.152597,-4.73468 8.124003,-8.13393 5.092651,-3.52067 11.519091,-5.827315 6.547698,-2.306631 13.095396,-3.642054 6.668943,-1.456837 12.852879,-1.94244 6.305193,-0.607005 10.912843,-0.607005 6.911448,0 12.974128,0.971207 6.06269,0.971221 10.54908,3.035062 4.60766,1.942428 7.27523,4.856075 2.66758,2.91365 2.66758,6.91992 -0.72751,3.88487 -2.54632,7.16272 -1.69755,3.277867 -3.88013,6.312907 -2.18257,2.91365 -4.60766,5.94871 -2.30381,2.91365 -4.24387,5.94871 2.78884,0.12142 5.09265,0.36421 2.42508,0.12141 4.72891,0.12141 l -5.33517,13.35423 q -3.27384,0 -5.33517,0 -2.0613,0 -3.6376,0.12142 -1.45505,0 -2.78884,0.12141 -1.21253,0.12141 -2.78884,0.3642 -0.2425,0 -0.36376,0.12142 -0.12128,0 -0.36376,0 -8.730248,12.86862 -13.944158,27.19407 -5.213911,14.20405 -7.881489,28.77232 -4.728902,0.2428 -8.972771,-0.36422 -4.122624,-0.4856 -7.153976,-2.06382 -2.910081,-1.45683 -4.365128,-4.00627 -1.455047,-2.54946 -0.727524,-6.31292 0.848782,-3.27786 2.425074,-7.76973 1.697551,-4.61329 3.637617,-9.59078 2.061313,-5.09889 4.24387,-10.19778 2.303828,-5.22029 4.486386,-9.71218 -3.031339,1.33543 -6.91146,3.15647 -3.880108,1.82102 -6.668943,3.64206 z m 103.06565,44.5546 q 0.24249,3.64205 -1.94006,8.49814 -2.18258,4.8561 -5.69893,10.07639 -3.3951,5.22029 -7.63897,10.31916 -4.24389,5.2203 -8.12401,9.46937 -3.8801,4.24907 -6.91144,7.04132 -3.03134,2.91365 -4.12263,3.52066 -1.57629,0.60702 -3.27384,1.09263 -1.57629,0.607 -3.88013,-0.36422 -1.45506,-0.60699 -3.51638,-1.69963 -1.94005,-0.97122 -3.6376,-2.42803 -1.8188,-1.33542 -2.78884,-3.15646 -1.09128,-1.69963 -0.60626,-3.76347 0.48502,-1.82104 2.30383,-4.49187 1.69755,-2.67085 4.12261,-5.70591 2.54633,-3.03505 5.57768,-6.1915 3.15261,-3.03505 6.3052,-5.82729 3.27385,-2.79225 6.3052,-4.85609 3.15258,-2.06384 5.82015,-3.03506 0.36376,-0.12142 0.72754,-1.82103 0.36375,-1.69964 0.12115,-4.49187 -0.12115,-1.45684 -0.72752,-3.15646 -0.48502,-1.69963 -1.45505,-3.03505 -0.84876,-1.33543 -2.18254,-2.18525 -1.3338,-0.97122 -2.91009,-0.97122 -2.78884,0 -5.82018,2.91365 -3.03134,2.54946 -5.57767,1.82104 -2.4251,-0.72842 -3.7589,-3.03506 -1.21252,-2.42803 -0.84877,-5.46309 0.48502,-3.03505 3.39511,-5.09889 0.97004,-0.60702 4.00138,-3.03505 3.03135,-2.54945 6.66897,-5.7059 3.63759,-3.15646 7.03269,-6.31292 3.39512,-3.27785 5.09267,-5.3417 1.57629,-1.94242 2.0613,-3.03504 0.48502,-1.09261 0.36376,-1.69963 -0.12116,-0.60702 -0.72752,-0.72842 -0.48502,-0.2428 -0.84877,-0.2428 -1.45505,-0.12141 -3.3951,-0.2428 -1.81881,-0.12142 -3.51636,0 -1.69754,0.12128 -3.15259,0.4856 -1.33379,0.2428 -1.81881,0.72842 -0.97002,0.7284 -3.03134,3.88487 -1.94005,3.03505 -4.24386,6.67711 -2.30383,3.64207 -4.48642,7.04132 -2.06132,3.39927 -3.03135,4.85609 -2.18257,3.03505 -4.36511,3.88487 -2.30382,0.72842 -3.88012,0 -1.57631,-0.72841 -1.94007,-2.54945 -0.48501,-1.82102 0.84878,-4.00627 1.45505,-2.30664 3.1526,-5.34169 1.69754,-3.15646 3.51636,-6.55571 1.81878,-3.52067 3.63759,-7.16274 1.94008,-3.64206 3.75889,-7.16273 1.3338,-2.42803 2.78885,-3.88487 1.45503,-1.57822 3.8801,-2.42803 2.9101,-0.72842 6.42644,-0.97122 3.63761,-0.24281 7.15397,-0.12141 3.51636,0 6.66895,0.3642 3.15259,0.2428 5.2139,0.36422 2.30381,0.24279 4.48638,1.94243 2.30383,1.69962 3.88013,3.88485 1.69755,2.18524 2.42507,4.6133 0.72752,2.30664 -0.12116,3.88486 -0.12115,0.24281 -1.45503,1.57823 -1.33379,1.33543 -3.51636,3.39927 -2.06131,2.06383 -4.7289,4.61327 -2.66758,2.42805 -5.33516,4.97749 -2.54633,2.42805 -4.9714,4.61329 -2.42506,2.18523 -4.00137,3.64205 h 1.45505 q 4.60763,0 7.88149,0.72842 3.39511,0.607 6.54769,3.27785 2.66758,-3.03505 5.57768,-7.52693 2.91008,-4.61328 5.45641,-8.74095 2.30381,-4.00628 4.60764,-5.22029 2.42506,-1.21402 4.12263,-0.60702 1.81879,0.48561 2.42507,2.54946 0.72751,1.94243 -0.36376,4.49186 -6.79022,11.0476 -11.15534,18.21033 -4.24387,7.04132 -6.30518,9.95498 z"
|
||||
fill={pathFill}
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
|
||||
export default LogoIcon;
|
||||
@@ -0,0 +1,55 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
width="185.21428mm"
|
||||
height="185.21428mm"
|
||||
viewBox="0 0 185.21428 185.21428"
|
||||
version="1.1"
|
||||
id="svg1"
|
||||
sodipodi:docname="favicon.svg"
|
||||
inkscape:version="1.4 (86a8ad7, 2024-10-11)"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<sodipodi:namedview
|
||||
id="namedview1"
|
||||
pagecolor="#242424"
|
||||
bordercolor="#000000"
|
||||
borderopacity="0.25"
|
||||
inkscape:showpageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#d1d1d1"
|
||||
inkscape:document-units="mm"
|
||||
inkscape:zoom="0.52284039"
|
||||
inkscape:cx="317.49651"
|
||||
inkscape:cy="284.02549"
|
||||
inkscape:window-width="1147"
|
||||
inkscape:window-height="927"
|
||||
inkscape:window-x="2024"
|
||||
inkscape:window-y="105"
|
||||
inkscape:window-maximized="0"
|
||||
inkscape:current-layer="layer1" />
|
||||
<defs
|
||||
id="defs1" />
|
||||
<g
|
||||
inkscape:label="Layer 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1"
|
||||
transform="translate(-13.15728,-55.159447)">
|
||||
<circle
|
||||
style="fill:#ffffff"
|
||||
id="path1"
|
||||
cx="105.76442"
|
||||
cy="147.76659"
|
||||
r="92.60714" />
|
||||
<path
|
||||
d="m 60.52824,130.59648 q 5.092664,-3.88488 12.125369,-6.43431 7.032718,-2.54944 15.035463,-4.12768 2.78883,-3.52067 5.45641,-6.91992 2.66758,-3.52066 4.60763,-6.55571 1.94007,-3.15645 3.031358,-5.82731 1.09128,-2.792247 0.84876,-4.977477 l 0.24252,0.2428 q -0.60628,-1.21402 -2.910088,-1.82102 -2.30382,-0.72842 -5.45642,-0.72842 -4.00138,0 -8.972768,1.09262 -4.971406,0.97121 -10.064057,2.91365 -5.092651,1.82102 -10.064057,4.491867 -4.850147,2.67085 -8.851513,5.94871 -3.880108,3.27786 -6.547698,7.16273 -2.546319,3.88487 -2.910081,8.13394 -5.456413,-4.61327 -7.881486,-8.49814 -2.303829,-4.00627 -2.303829,-7.52694 0,-6.19151 3.152597,-10.926187 3.152597,-4.73468 8.124003,-8.13393 5.092651,-3.52067 11.519091,-5.827315 6.547698,-2.306631 13.095396,-3.642054 6.668943,-1.456837 12.852879,-1.94244 6.305193,-0.607005 10.912843,-0.607005 6.911448,0 12.974128,0.971207 6.06269,0.971221 10.54908,3.035062 4.60766,1.942428 7.27523,4.856075 2.66758,2.91365 2.66758,6.91992 -0.72751,3.88487 -2.54632,7.16272 -1.69755,3.277867 -3.88013,6.312907 -2.18257,2.91365 -4.60766,5.94871 -2.30381,2.91365 -4.24387,5.94871 2.78884,0.12142 5.09265,0.36421 2.42508,0.12141 4.72891,0.12141 l -5.33517,13.35423 q -3.27384,0 -5.33517,0 -2.0613,0 -3.6376,0.12142 -1.45505,0 -2.78884,0.12141 -1.21253,0.12141 -2.78884,0.3642 -0.2425,0 -0.36376,0.12142 -0.12128,0 -0.36376,0 -8.730248,12.86862 -13.944158,27.19407 -5.213911,14.20405 -7.881489,28.77232 -4.728902,0.2428 -8.972771,-0.36422 -4.122624,-0.4856 -7.153976,-2.06382 -2.910081,-1.45683 -4.365128,-4.00627 -1.455047,-2.54946 -0.727524,-6.31292 0.848782,-3.27786 2.425074,-7.76973 1.697551,-4.61329 3.637617,-9.59078 2.061313,-5.09889 4.24387,-10.19778 2.303828,-5.22029 4.486386,-9.71218 -3.031339,1.33543 -6.91146,3.15647 -3.880108,1.82102 -6.668943,3.64206 z m 103.06565,44.5546 q 0.24249,3.64205 -1.94006,8.49814 -2.18258,4.8561 -5.69893,10.07639 -3.3951,5.22029 -7.63897,10.31916 -4.24389,5.2203 -8.12401,9.46937 -3.8801,4.24907 -6.91144,7.04132 -3.03134,2.91365 -4.12263,3.52066 -1.57629,0.60702 -3.27384,1.09263 -1.57629,0.607 -3.88013,-0.36422 -1.45506,-0.60699 -3.51638,-1.69963 -1.94005,-0.97122 -3.6376,-2.42803 -1.8188,-1.33542 -2.78884,-3.15646 -1.09128,-1.69963 -0.60626,-3.76347 0.48502,-1.82104 2.30383,-4.49187 1.69755,-2.67085 4.12261,-5.70591 2.54633,-3.03505 5.57768,-6.1915 3.15261,-3.03505 6.3052,-5.82729 3.27385,-2.79225 6.3052,-4.85609 3.15258,-2.06384 5.82015,-3.03506 0.36376,-0.12142 0.72754,-1.82103 0.36375,-1.69964 0.12115,-4.49187 -0.12115,-1.45684 -0.72752,-3.15646 -0.48502,-1.69963 -1.45505,-3.03505 -0.84876,-1.33543 -2.18254,-2.18525 -1.3338,-0.97122 -2.91009,-0.97122 -2.78884,0 -5.82018,2.91365 -3.03134,2.54946 -5.57767,1.82104 -2.4251,-0.72842 -3.7589,-3.03506 -1.21252,-2.42803 -0.84877,-5.46309 0.48502,-3.03505 3.39511,-5.09889 0.97004,-0.60702 4.00138,-3.03505 3.03135,-2.54945 6.66897,-5.7059 3.63759,-3.15646 7.03269,-6.31292 3.39512,-3.27785 5.09267,-5.3417 1.57629,-1.94242 2.0613,-3.03504 0.48502,-1.09261 0.36376,-1.69963 -0.12116,-0.60702 -0.72752,-0.72842 -0.48502,-0.2428 -0.84877,-0.2428 -1.45505,-0.12141 -3.3951,-0.2428 -1.81881,-0.12142 -3.51636,0 -1.69754,0.12128 -3.15259,0.4856 -1.33379,0.2428 -1.81881,0.72842 -0.97002,0.7284 -3.03134,3.88487 -1.94005,3.03505 -4.24386,6.67711 -2.30383,3.64207 -4.48642,7.04132 -2.06132,3.39927 -3.03135,4.85609 -2.18257,3.03505 -4.36511,3.88487 -2.30382,0.72842 -3.88012,0 -1.57631,-0.72841 -1.94007,-2.54945 -0.48501,-1.82102 0.84878,-4.00627 1.45505,-2.30664 3.1526,-5.34169 1.69754,-3.15646 3.51636,-6.55571 1.81878,-3.52067 3.63759,-7.16274 1.94008,-3.64206 3.75889,-7.16273 1.3338,-2.42803 2.78885,-3.88487 1.45503,-1.57822 3.8801,-2.42803 2.9101,-0.72842 6.42644,-0.97122 3.63761,-0.24281 7.15397,-0.12141 3.51636,0 6.66895,0.3642 3.15259,0.2428 5.2139,0.36422 2.30381,0.24279 4.48638,1.94243 2.30383,1.69962 3.88013,3.88485 1.69755,2.18524 2.42507,4.6133 0.72752,2.30664 -0.12116,3.88486 -0.12115,0.24281 -1.45503,1.57823 -1.33379,1.33543 -3.51636,3.39927 -2.06131,2.06383 -4.7289,4.61327 -2.66758,2.42805 -5.33516,4.97749 -2.54633,2.42805 -4.9714,4.61329 -2.42506,2.18523 -4.00137,3.64205 h 1.45505 q 4.60763,0 7.88149,0.72842 3.39511,0.607 6.54769,3.27785 2.66758,-3.03505 5.57768,-7.52693 2.91008,-4.61328 5.45641,-8.74095 2.30381,-4.00628 4.60764,-5.22029 2.42506,-1.21402 4.12263,-0.60702 1.81879,0.48561 2.42507,2.54946 0.72751,1.94243 -0.36376,4.49186 -6.79022,11.0476 -11.15534,18.21033 -4.24387,7.04132 -6.30518,9.95498 z"
|
||||
id="text1-8-5-1"
|
||||
style="fill:#000000"
|
||||
aria-label="Fz"
|
||||
inkscape:label="text1" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 5.9 KiB |
@@ -0,0 +1,4 @@
|
||||
import ReactDOM from 'react-dom/client';
|
||||
import App from './App';
|
||||
|
||||
ReactDOM.createRoot(document.getElementById('root')!).render(<App />);
|
||||
@@ -0,0 +1,16 @@
|
||||
import { AppShellWithMenu } from '@/components/Appshell/Appshell';
|
||||
import { LiveKitRoom } from '@/components/LiveKitRoom';
|
||||
import { ColorSchemeToggle } from '../components/ColorSchemeToggle/ColorSchemeToggle';
|
||||
import { Welcome } from '../components/Welcome/Welcome';
|
||||
|
||||
export function HomePage() {
|
||||
return (
|
||||
<AppShellWithMenu>
|
||||
<LiveKitRoom
|
||||
tokenUrl="http://localhost:8000/token" // endpoint backend que genera JWT
|
||||
roomName="mi_sala_prueba"
|
||||
userName="usuario_1"
|
||||
/>
|
||||
</AppShellWithMenu>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,50 @@
|
||||
// stores/useAppShellStore.ts
|
||||
import { create } from 'zustand';
|
||||
|
||||
interface AppShellState {
|
||||
activeMain: string;
|
||||
activeLink: string;
|
||||
mobileOpened: boolean;
|
||||
desktopOpened: boolean;
|
||||
setActiveMain: (main: string) => void;
|
||||
setActiveLink: (link: string) => void;
|
||||
toggleMobile: () => void;
|
||||
toggleDesktop: () => void;
|
||||
openDesktop: () => void;
|
||||
closeMobile: () => void;
|
||||
}
|
||||
|
||||
// Persistencia en localStorage (solo para rutas, si lo quieres)
|
||||
const STORAGE_KEY = 'lastSubmenuRoutes';
|
||||
function getLastSubmenuRoute(section: string): string | null {
|
||||
try {
|
||||
const raw = localStorage.getItem(STORAGE_KEY);
|
||||
const parsed = raw ? JSON.parse(raw) : {};
|
||||
return parsed[section] ?? null;
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
function setLastSubmenuRoute(section: string, route: string) {
|
||||
try {
|
||||
const raw = localStorage.getItem(STORAGE_KEY);
|
||||
const parsed = raw ? JSON.parse(raw) : {};
|
||||
parsed[section] = route;
|
||||
localStorage.setItem(STORAGE_KEY, JSON.stringify(parsed));
|
||||
} catch {}
|
||||
}
|
||||
|
||||
export const useAppShellStore = create<AppShellState>((set) => ({
|
||||
activeMain: 'Home',
|
||||
activeLink: '',
|
||||
mobileOpened: false,
|
||||
desktopOpened: true,
|
||||
setActiveMain: (main) => set({ activeMain: main }),
|
||||
setActiveLink: (link) => set({ activeLink: link }),
|
||||
toggleMobile: () => set((s) => ({ mobileOpened: !s.mobileOpened })),
|
||||
toggleDesktop: () => set((s) => ({ desktopOpened: !s.desktopOpened })),
|
||||
openDesktop: () => set({ desktopOpened: true }),
|
||||
closeMobile: () => set({ mobileOpened: false }),
|
||||
}));
|
||||
|
||||
export { getLastSubmenuRoute, setLastSubmenuRoute };
|
||||
@@ -0,0 +1,58 @@
|
||||
import { createTheme } from '@mantine/core';
|
||||
|
||||
export const theme = createTheme({
|
||||
colors: {
|
||||
// Definición de la paleta principal
|
||||
brand: [
|
||||
"#e7f2ff",
|
||||
"#d0e1ff",
|
||||
"#a1c0fa",
|
||||
"#6e9df6",
|
||||
"#447ff1",
|
||||
"#296df0",
|
||||
"#1863f0",
|
||||
"#0753d6",
|
||||
"#0049c1",
|
||||
"#003faa"
|
||||
],
|
||||
// Puedes añadir hasta 3 colores adicionales si lo deseas
|
||||
secondary: [
|
||||
"#ecf4ff",
|
||||
"#dce4f5",
|
||||
"#b9c7e2",
|
||||
"#94a8d0",
|
||||
"#748dc0",
|
||||
"#5f7cb7",
|
||||
"#5474b4",
|
||||
"#44639f",
|
||||
"#3a5890",
|
||||
"#2c4b80"
|
||||
],
|
||||
accent: [
|
||||
'#fff3e0',
|
||||
'#ffe0b2',
|
||||
'#ffcc80',
|
||||
'#ffb74d',
|
||||
'#ffa726',
|
||||
'#ff9800',
|
||||
'#fb8c00',
|
||||
'#f57c00',
|
||||
'#ef6c00',
|
||||
'#e65100',
|
||||
],
|
||||
neutral: [
|
||||
'#fafafa',
|
||||
'#f5f5f5',
|
||||
'#eeeeee',
|
||||
'#e0e0e0',
|
||||
'#bdbdbd',
|
||||
'#9e9e9e',
|
||||
'#757575',
|
||||
'#616161',
|
||||
'#424242',
|
||||
'#212121',
|
||||
],
|
||||
},
|
||||
primaryColor: 'brand', // Establece 'brand' como el color primario
|
||||
primaryShade: { light: 6, dark: 8 }, // Define los tonos primarios para los esquemas de color claro y oscuro
|
||||
});
|
||||
Vendored
+1
@@ -0,0 +1 @@
|
||||
/// <reference types="vite/client" />
|
||||
@@ -0,0 +1,5 @@
|
||||
import userEvent from '@testing-library/user-event';
|
||||
|
||||
export * from '@testing-library/react';
|
||||
export { render } from './render';
|
||||
export { userEvent };
|
||||
@@ -0,0 +1,13 @@
|
||||
import { render as testingLibraryRender } from '@testing-library/react';
|
||||
import { MantineProvider } from '@mantine/core';
|
||||
import { theme } from '../src/theme';
|
||||
|
||||
export function render(ui: React.ReactNode) {
|
||||
return testingLibraryRender(ui, {
|
||||
wrapper: ({ children }: { children: React.ReactNode }) => (
|
||||
<MantineProvider theme={theme} env="test">
|
||||
{children}
|
||||
</MantineProvider>
|
||||
),
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"types": ["node", "@testing-library/jest-dom", "vitest/globals"],
|
||||
"target": "ESNext",
|
||||
"useDefineForClassFields": true,
|
||||
"lib": ["DOM", "DOM.Iterable", "ESNext"],
|
||||
"allowJs": false,
|
||||
"skipLibCheck": true,
|
||||
"esModuleInterop": false,
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"strict": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "Node",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"noEmit": true,
|
||||
"jsx": "react-jsx",
|
||||
"paths": {
|
||||
"@/*": ["./src/*"],
|
||||
"@test-utils": ["./test-utils"]
|
||||
}
|
||||
},
|
||||
"include": ["src", "test-utils", ".storybook/main.ts", ".storybook/preview.tsx"]
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
import react from '@vitejs/plugin-react';
|
||||
import { defineConfig } from 'vite';
|
||||
import tsconfigPaths from 'vite-tsconfig-paths';
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [react(), tsconfigPaths()],
|
||||
server: {
|
||||
host: '0.0.0.0', // 🔥 Escucha en todas las interfaces
|
||||
port: 5173, // Puedes cambiarlo si lo deseas
|
||||
},
|
||||
test: {
|
||||
globals: true,
|
||||
environment: 'jsdom',
|
||||
setupFiles: './vitest.setup.mjs',
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,28 @@
|
||||
import '@testing-library/jest-dom/vitest';
|
||||
import { vi } from 'vitest';
|
||||
|
||||
const { getComputedStyle } = window;
|
||||
window.getComputedStyle = (elt) => getComputedStyle(elt);
|
||||
window.HTMLElement.prototype.scrollIntoView = () => {};
|
||||
|
||||
Object.defineProperty(window, 'matchMedia', {
|
||||
writable: true,
|
||||
value: vi.fn().mockImplementation((query) => ({
|
||||
matches: false,
|
||||
media: query,
|
||||
onchange: null,
|
||||
addListener: vi.fn(),
|
||||
removeListener: vi.fn(),
|
||||
addEventListener: vi.fn(),
|
||||
removeEventListener: vi.fn(),
|
||||
dispatchEvent: vi.fn(),
|
||||
})),
|
||||
});
|
||||
|
||||
class ResizeObserver {
|
||||
observe() {}
|
||||
unobserve() {}
|
||||
disconnect() {}
|
||||
}
|
||||
|
||||
window.ResizeObserver = ResizeObserver;
|
||||
+4562
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,15 @@
|
||||
rtc:
|
||||
node_ip: 192.168.1.131 # tu IP LAN
|
||||
use_external_ip: false
|
||||
tcp_port: 7881
|
||||
port_range_start: 7881
|
||||
port_range_end: 7882
|
||||
stun_servers:
|
||||
- stun.l.google.com:19302
|
||||
- stun1.l.google.com:19302
|
||||
|
||||
keys:
|
||||
devkey: secret
|
||||
|
||||
logging:
|
||||
level: debug
|
||||
@@ -0,0 +1,13 @@
|
||||
import uvicorn
|
||||
|
||||
def main():
|
||||
print("🚀 Iniciando servidor LiveKit Backend en http://0.0.0.0:8000 ...")
|
||||
uvicorn.run(
|
||||
"backend.main:app", # apunta al FastAPI que ya tienes
|
||||
host="0.0.0.0",
|
||||
port=8000,
|
||||
reload=True
|
||||
)
|
||||
|
||||
if __name__ == "__main__":
|
||||
main()
|
||||
@@ -0,0 +1,57 @@
|
||||
# prueba_agente_tts.py
|
||||
import os
|
||||
import asyncio
|
||||
from livekit.agents import WorkerOptions, Worker, JobContext, AgentSession, Agent
|
||||
from livekit.plugins import openai
|
||||
|
||||
LIVEKIT_URL = "ws://192.168.1.131:7880"
|
||||
LIVEKIT_API_KEY = "devkey"
|
||||
LIVEKIT_API_SECRET = "secret"
|
||||
ROOM_NAME = "mi_sala_prueba"
|
||||
PARTICIPANT_IDENTITY = "agente_tts"
|
||||
|
||||
OPENAI_API_KEY = os.getenv("OPENAI_API_KEY", "sk-...tu_clave...")
|
||||
os.environ["OPENAI_API_KEY"] = OPENAI_API_KEY
|
||||
|
||||
|
||||
async def entrypoint(ctx: JobContext):
|
||||
print("🎙️ Conectando agente al room LiveKit...")
|
||||
await ctx.connect()
|
||||
print(f"✅ Conectado a la sala: {ctx.room.name}")
|
||||
|
||||
# Crear el modelo TTS
|
||||
tts_model = openai.realtime.RealtimeModel(
|
||||
model="gpt-4o-realtime-preview-2024-12-17",
|
||||
voice="alloy",
|
||||
)
|
||||
|
||||
# Crear agente
|
||||
agent = Agent(instructions="Eres un agente TTS de prueba con voz de OpenAI.")
|
||||
session = AgentSession(agent=agent, llm=tts_model)
|
||||
|
||||
await session.start(room=ctx.room)
|
||||
print("🗣️ Agente hablando...")
|
||||
await session.generate_reply(text="Hola, soy el agente TTS de LiveKit.")
|
||||
await asyncio.sleep(5)
|
||||
print("👋 Cerrando sesión del agente.")
|
||||
await session.close()
|
||||
|
||||
|
||||
async def main():
|
||||
opts = WorkerOptions(
|
||||
entrypoint_fnc=entrypoint,
|
||||
api_key=LIVEKIT_API_KEY,
|
||||
api_secret=LIVEKIT_API_SECRET,
|
||||
ws_url=LIVEKIT_URL,
|
||||
)
|
||||
|
||||
worker = Worker(opts)
|
||||
# 🔥 Esta es la línea correcta para unir al agente al room directamente
|
||||
await worker.run_in_room(
|
||||
room_name=ROOM_NAME,
|
||||
participant_identity=PARTICIPANT_IDENTITY,
|
||||
)
|
||||
|
||||
|
||||
if __name__ == "__main__":
|
||||
asyncio.run(main())
|
||||
@@ -0,0 +1,17 @@
|
||||
[project]
|
||||
name = "livekit-primera-prueba"
|
||||
version = "0.1.0"
|
||||
description = "Add your description here"
|
||||
readme = "README.md"
|
||||
requires-python = ">=3.13"
|
||||
dependencies = [
|
||||
"dotenv-python>=0.0.1",
|
||||
"fastapi>=0.118.0",
|
||||
"livekit-agents>=1.2.14",
|
||||
"livekit-api>=1.0.6",
|
||||
"livekit-plugins-cartesia>=1.0",
|
||||
"livekit-plugins-google>=1.2.14",
|
||||
"livekit-plugins-openai>=1.2.14",
|
||||
"python-dotenv>=1.1.1",
|
||||
"uvicorn>=0.37.0",
|
||||
]
|
||||
Reference in New Issue
Block a user