5 Commits

Author SHA1 Message Date
0915d3c64d начало чата
All checks were successful
Deploy / deploy (push) Successful in 3m47s
2026-04-16 02:21:54 +06:00
9f39ee6430 убрал из панели задач, скрыл от шаринга
All checks were successful
Deploy / publish-web (push) Successful in 1m28s
2026-04-15 15:43:43 +06:00
3658975b93 cringe sfx
All checks were successful
Deploy / publish-web (push) Successful in 1m33s
2026-04-12 22:38:48 +06:00
363f1008c6 update 2026-02-11 07:05:20 +06:00
1bd8aa0fea cringe sfx
All checks were successful
Deploy / publish-web (push) Successful in 51s
2026-02-06 23:14:13 +06:00
34 changed files with 1991 additions and 1182 deletions

View File

@@ -0,0 +1,7 @@
{
"permissions": {
"allow": [
"Bash(printf '%s\\\\n' \"\n================================================================================\nCOMPREHENSIVE ARCHITECTURE REPORT\nTauri 2 + Nuxt 4 + mediasoup-client Voice Chat App\n================================================================================\")"
]
}
}

Binary file not shown.

118
client/CLAUDE.md Normal file
View File

@@ -0,0 +1,118 @@
# CLAUDE.md
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
## Project Overview
Chad is a voice/video chat desktop app built with **Tauri 2 + Nuxt 4 (SPA) + mediasoup-client**. It uses an SFU (Selective Forwarding Unit) architecture for WebRTC media — each peer sends to the server, which forwards selectively to others.
## Commands
| Command | Description |
|---------|-------------|
| `yarn dev` | Start dev server (binds to all interfaces via `--host`) |
| `yarn generate` | Generate static site to `.output/public` |
| `yarn build` | Build for production |
| `yarn preview` | Preview production build |
| `npx eslint .` | Lint the project |
| `npx eslint --fix .` | Lint and auto-fix |
**Tauri desktop build**: `yarn tauri build` (runs `yarn generate` first automatically).
Package manager is **Yarn 4.12.0**. No test framework is configured.
## Architecture
### Composable-Based State (No Pinia/Vuex)
All state is managed through Vue composables using `@vueuse/core`'s `createGlobalState` and `createSharedComposable`. Nuxt auto-imports all composables from `app/composables/`.
**Dependency graph** (arrows = "depends on"):
```
useAuth (foundation — user session)
└→ useSignaling (Socket.IO connection to /webrtc namespace)
└→ useClients (connected peer list)
└→ useMediasoup (transports, producers, consumers)
├← usePreferences (device IDs, audio effects, hotkeys)
│ └← useDevices (enumerates hardware via getUserMedia)
└← useSfx (Howler.js sound effects)
useApp (top-level orchestrator — mute/unmute, video/share toggles)
└→ depends on useClients, useMediasoup, useSignaling, useSfx
```
### Composable Tiers
**Global state** (`createGlobalState` — single instance, persists for app lifetime):
- `useApp` — ready state, input/output mute, video/share toggles, version info
- `useAuth``me` ref, login/register/logout
- `useClients``clients[]` array, add/remove/update peers
- `usePreferences` — device selections, audio effects, hotkeys (localStorage + server sync)
- `useUpdater` — Tauri app update checks
- `useFullscreenVideo` — fullscreen video element control
**Shared** (`createSharedComposable` — single instance, disposed when last consumer unmounts):
- `useMediasoup` — mediasoup Device, transports, producers, consumers, speaking state
- `useSignaling` — Socket.IO client, connect/disconnect
- `useSfx` — sound effect playback via Howler.js
**Per-instance** (new instance per call):
- `useClient(socketId)` — per-peer volume/mute (localStorage), filtered consumers/producers
- `useAudioContext(audioTrack)` — Web Audio API gain node for per-client volume
- `useDevices` — media device enumeration
### Initialization Flow
1. **Middleware** (global, ordered by filename prefix):
- `00.updater` — Tauri update check, redirects to `/updater` if available
- `01.auth` — validates session via `GET /me`, redirects guests to `/login`
- `02.user-preferences` — loads server-synced preferences for authenticated users
2. **Plugins**: build info logging, Tauri hotkey registration
3. **Layout** (`default.vue`): calls `useApp()` which triggers `useSignaling().connect()`
4. **Socket authenticated** → mediasoup Device created → transports created → `join()` → mic enabled
### mediasoup Integration
**Producer types** (tracked in `appData.source`):
- Microphone: `kind='audio'`, `source='mic-video'`
- Camera: `kind='video'`, `source='mic-video'`
- Screen share: `kind='video'`, `source='share'`
**Consumer filtering** uses `kind` + `appData.source` to distinguish audio/video/share streams.
Transports use `emitWithAck()` on the Socket.IO connection for all signaling (create, connect, produce, join, pause/resume/close).
### API & Networking
- **REST API**: `shared/chad-api.ts``$fetch` instance with `credentials: 'include'`, base URL from `__API_BASE_URL__` build-time define
- **WebSocket**: Socket.IO to `/webrtc` namespace for signaling
- **Vite proxy**: `/api` → production API server (for dev)
### Shared Types
`shared/types.ts` defines `ChadClient`, `Consumer`, `Producer`, `AppData`, `UpdatedClient` — used by both composables and components.
## Code Conventions
- **ESLint**: `@antfu/eslint-config` with formatters enabled
- **Vue SFC block order**: `<template>`, `<script>`, `<style>` (enforced by ESLint)
- **`console.log` allowed** (no-console is off)
- **PrimeVue components** are prefixed: `PrimeButton`, `PrimeCard`, etc.
- **Icons**: `lucide-vue-next` + `primeicons`
- **Styling**: Tailwind CSS 4 + PrimeVue Aura theme (Zinc palette, dark-first)
- **Reactivity**: mediasoup objects wrapped with `markRaw()` to prevent deep reactivity; `triggerRef()` used for manual reactivity triggers on the clients array
## Build-Time Defines
Set via `.env` or environment variables:
- `API_BASE_URL` — backend API base (default: `http://localhost:4000/chad`)
- `COMMIT_SHA` — git commit hash (default: `'local'`)
## Tauri
- App identifier: `xyz.koptilnya.chad`
- Windows-only NSIS installer (`bundle.targets: ["nsis"]`)
- Plugins: global-shortcut, process, updater, single-instance, log
- Frontend dist: `.output/public` (from `yarn generate`)
- `@tauri-apps/plugin-*` packages provide JS bindings; use `window.__TAURI__` check or the `useTauri()` composable for Tauri detection

View File

@@ -15,6 +15,8 @@ declare module 'vue' {
PrimeCard: typeof import('primevue/card')['default']
PrimeDivider: typeof import('primevue/divider')['default']
PrimeFloatLabel: typeof import('primevue/floatlabel')['default']
PrimeInputGroup: typeof import('primevue/inputgroup')['default']
PrimeInputGroupAddon: typeof import('primevue/inputgroupaddon')['default']
PrimeInputText: typeof import('primevue/inputtext')['default']
PrimePassword: typeof import('primevue/password')['default']
PrimeProgressBar: typeof import('primevue/progressbar')['default']
@@ -23,6 +25,7 @@ declare module 'vue' {
PrimeSelectButton: typeof import('primevue/selectbutton')['default']
PrimeSlider: typeof import('primevue/slider')['default']
PrimeTag: typeof import('primevue/tag')['default']
PrimeTextarea: typeof import('primevue/textarea')['default']
PrimeToast: typeof import('primevue/toast')['default']
PrimeToggleSwitch: typeof import('primevue/toggleswitch')['default']
RouterLink: typeof import('vue-router')['RouterLink']

View File

@@ -16,11 +16,12 @@
</template>
<script setup lang="ts">
import type { ChadClient } from '#shared/types'
import type { ChadClient, Consumer, Producer } from '#shared/types'
const props = defineProps<{
client: ChadClient
stream: MediaStream
consumer?: Consumer
producer?: Producer
}>()
const { me } = useClients()
@@ -30,8 +31,21 @@ const isMe = computed(() => {
return props.client.socketId === me.value?.socketId
})
const track = computed(() => {
return props.consumer?.raw.track ?? props.producer?.raw.track
})
const stream = computed<MediaStream | undefined>((previousStream) => {
if (previousStream?.getTracks()[0] === track.value) {
return previousStream
}
return track.value ? new MediaStream([track.value]) : undefined
})
function watch() {
fullscreenVideo.show(props.stream)
if (stream.value)
fullscreenVideo.show(stream.value)
}
</script>

View File

@@ -7,8 +7,7 @@ export const useApp = createGlobalState(() => {
const { clients } = useClients()
const mediasoup = useMediasoup()
const signaling = useSignaling()
const toast = useToast()
const sfx = useSfx()
const { emit } = useEventBus()
const ready = ref(false)
const isTauri = computed(() => '__TAURI_INTERNALS__' in window)
@@ -53,8 +52,7 @@ export const useApp = createGlobalState(() => {
await mediasoup.pauseProducer(mediasoup.micProducer.value)
sfx.playEvent('mic-off').then()
toast.add({ severity: 'info', summary: 'Microphone muted', closable: false, life: 1000 })
emit('audio:muted')
}
async function unmuteInput() {
@@ -67,8 +65,7 @@ export const useApp = createGlobalState(() => {
await mediasoup.resumeProducer(mediasoup.micProducer.value)
sfx.playEvent('mic-on').then()
toast.add({ severity: 'info', summary: 'Microphone activated', closable: false, life: 1000 })
emit('audio:unmuted')
}
async function toggleInput() {
@@ -92,7 +89,7 @@ export const useApp = createGlobalState(() => {
outputMuted: true,
})
toast.add({ severity: 'info', summary: 'Sound muted', closable: false, life: 1000 })
emit('output:muted')
}
async function unmuteOutput() {
@@ -105,7 +102,7 @@ export const useApp = createGlobalState(() => {
outputMuted: false,
})
toast.add({ severity: 'info', summary: 'Sound resumed', closable: false, life: 1000 })
emit('output:unmuted')
}
async function toggleOutput() {
@@ -118,22 +115,22 @@ export const useApp = createGlobalState(() => {
async function toggleVideo() {
if (!mediasoup.videoProducer.value) {
await mediasoup.enableVideo()
await sfx.playEvent('stream-on')
emit('video:enabled')
}
else {
await mediasoup.disableProducer(mediasoup.videoProducer.value)
await sfx.playEvent('stream-off')
emit('video:disabled')
}
}
async function toggleShare() {
if (!mediasoup.shareProducer.value) {
await mediasoup.enableShare()
await sfx.playEvent('stream-on')
emit('share:enabled')
}
else {
await mediasoup.disableProducer(mediasoup.shareProducer.value)
await sfx.playEvent('stream-off')
emit('share:disabled')
}
}

View File

@@ -0,0 +1,55 @@
import { createGlobalState } from '@vueuse/core'
export interface ChatClientMessage {
text: string
replyTo?: {
messageId: string
}
}
export interface ChatMessage {
id: string
sender: string
text: string
createdAt: string
replyTo?: {
messageId: string
sender: string
text: string
}
}
export const useChat = createGlobalState(() => {
const signaling = useSignaling()
const { emit } = useEventBus()
const messages = shallowRef<ChatMessage[]>([])
watch(signaling.socket, (socket) => {
if (!socket)
return
socket.on('chat:new-message', (message: ChatMessage) => {
messages.value.push(message)
triggerRef(messages)
emit('chat:new-message')
})
socket.on('disconnect', () => {
messages.value = []
})
}, { immediate: true })
function sendMessage(message: ChatClientMessage) {
if (!signaling.connected.value)
return
signaling.socket.value!.emit('chat:message', message)
}
return {
messages,
sendMessage,
}
})

View File

@@ -4,7 +4,7 @@ import { createGlobalState } from '@vueuse/core'
export const useClients = createGlobalState(() => {
const auth = useAuth()
const signaling = useSignaling()
const toast = useToast()
const { emit } = useEventBus()
const clients = shallowRef<ChadClient[]>([])
@@ -16,10 +16,17 @@ export const useClients = createGlobalState(() => {
socket.on('clientChanged', (clientId: ChadClient['socketId'], updatedClient: UpdatedClient) => {
const client = getClient(clientId)
if (!client)
return
updateClient(clientId, updatedClient)
if (client && client.displayName !== updatedClient.displayName)
toast.add({ severity: 'info', summary: `${client.displayName} is now ${updatedClient.displayName}`, closable: false, life: 1000 })
emit('client:updated', {
socketId: clientId,
oldClient: client,
updatedClient,
})
})
socket.on('disconnect', () => {

View File

@@ -0,0 +1,44 @@
import type { ChadClient, Consumer, Producer } from '#shared/types'
import type { EventType } from 'mitt'
import mitt from 'mitt'
export interface AppEvents extends Record<EventType, unknown> {
'socket:connected': void
'socket:disconnected': void
'socket:authenticated': { socketId: string }
'client:added': ChadClient
'client:removed': ChadClient
'client:updated': { socketId: string, oldClient: ChadClient, updatedClient: Partial<ChadClient> }
'consumer:added': Consumer
'consumer:removed': Consumer
'consumer:paused': Consumer
'consumer:resumed': Consumer
'producer:added': Producer
'producer:removed': Producer
'producer:paused': Producer
'producer:resumed': Producer
'audio:muted': void
'audio:unmuted': void
'output:muted': void
'output:unmuted': void
'video:enabled': void
'video:disabled': void
'share:enabled': void
'share:disabled': void
'chat:new-message': void
}
const emitter = mitt<AppEvents>()
export function useEventBus() {
return {
emit: emitter.emit,
on: emitter.on,
off: emitter.off,
}
}

View File

@@ -7,8 +7,6 @@ import { useDevices } from '~/composables/use-devices'
import { usePreferences } from '~/composables/use-preferences'
import { useSignaling } from '~/composables/use-signaling'
type ProducerType = 'microphone' | 'video' | 'share'
interface SpeakingClient {
clientId: ChadClient['socketId']
volume: number
@@ -28,11 +26,10 @@ const ICE_SERVERS: RTCIceServer[] = [
]
export const useMediasoup = createSharedComposable(() => {
const toast = useToast()
const sfx = useSfx()
const { emit } = useEventBus()
const signaling = useSignaling()
const { addClient, removeClient } = useClients()
const { addClient, removeClient, me } = useClients()
const preferences = usePreferences()
const { getShareStream } = useDevices()
@@ -170,18 +167,25 @@ export const useMediasoup = createSharedComposable(() => {
addClient(...joinedClients)
toast.add({ severity: 'success', summary: 'Joined', closable: false, life: 1000 })
if (me.value)
emit('socket:authenticated', { socketId: me.value.socketId })
await enableMic()
})
socket.on('newPeer', (client) => {
sfx.playRandomConnectionSound(client.socketId).then()
addClient(client)
emit('client:added', client)
})
socket.on('peerClosed', (id) => {
const { getClient } = useClients()
const client = getClient(id)
removeClient(id)
if (client)
emit('client:removed', client)
})
socket.on(
@@ -202,9 +206,6 @@ export const useMediasoup = createSharedComposable(() => {
appData: { ...appData, socketId },
})
if (kind === 'video')
sfx.playEvent('stream-on').then()
if (producerPaused)
consumer.pause()
@@ -215,19 +216,27 @@ export const useMediasoup = createSharedComposable(() => {
raw: markRaw(consumer),
}
emit('consumer:added', consumers.value[consumer.id]!)
consumer.observer.on('resume', () => {
consumers.value[consumer.id]!.paused = false
emit('consumer:resumed', consumers.value[consumer.id]!)
})
consumer.observer.on('pause', () => {
consumers.value[consumer.id]!.paused = true
emit('consumer:paused', consumers.value[consumer.id]!)
})
consumer.observer.on('close', () => {
if (kind === 'video')
sfx.playEvent('stream-off').then()
const consumerData = consumers.value[consumer.id]
delete consumers.value[consumer.id]
if (consumerData)
emit('consumer:removed', consumerData)
})
consumer.on('trackended', () => {
@@ -308,16 +317,27 @@ export const useMediasoup = createSharedComposable(() => {
raw: markRaw(producer),
}
emit('producer:added', producers.value[producer.id]!)
producer.observer.on('pause', () => {
producers.value[producer.id]!.paused = true
emit('producer:paused', producers.value[producer.id]!)
})
producer.observer.on('resume', () => {
producers.value[producer.id]!.paused = false
emit('producer:resumed', producers.value[producer.id]!)
})
producer.observer.on('close', () => {
const producerData = producers.value[producer.id]
delete producers.value[producer.id]
if (producerData)
emit('producer:removed', producerData)
})
producer.on('trackended', () => {

View File

@@ -15,7 +15,7 @@ function hashStringToNumber(str: string, cap: number): number {
const oneShots: Howl[] = []
type SfxEvent = 'mic-on' | 'mic-off' | 'stream-on' | 'stream-off' | 'connection'
type SfxEvent = 'mic-on' | 'mic-off' | 'stream-on' | 'stream-off' | 'connection' | 'message'
const EVENT_VOLUME: Record<SfxEvent, number> = {
'mic-on': 0.2,
@@ -25,7 +25,10 @@ const EVENT_VOLUME: Record<SfxEvent, number> = {
'connection': 0.1,
}
// TODO: refactor this shit
export const useSfx = createSharedComposable(() => {
const { outputMuted } = useApp()
async function play(src: string, volume = 0.2): Promise<void> {
return new Promise((resolve) => {
const howl = new Howl({
@@ -74,7 +77,11 @@ export const useSfx = createSharedComposable(() => {
async function playRandomConnectionSound(seed: string) {
await playEvent('stream-on')
await play(CONNECTION_SOUNDS[hashStringToNumber(seed, CONNECTION_SOUNDS.length + 1)]!, 0.1)
if (outputMuted.value)
return
await play(CONNECTION_SOUNDS[hashStringToNumber(seed, CONNECTION_SOUNDS.length)]!, 0.1)
}
return {

View File

@@ -4,7 +4,7 @@ import { io } from 'socket.io-client'
import { parseURL } from 'ufo'
export const useSignaling = createSharedComposable(() => {
const toast = useToast()
const { emit } = useEventBus()
const { me } = useAuth()
const socket = shallowRef<Socket>()
@@ -41,9 +41,9 @@ export const useSignaling = createSharedComposable(() => {
watch(connected, (connected) => {
if (connected)
toast.add({ severity: 'success', summary: 'Connected', closable: false, life: 1000 })
emit('socket:connected')
else
toast.add({ severity: 'error', summary: 'Disconnected', closable: false, life: 1000 })
emit('socket:disconnected')
}, { immediate: true })
watch(me, (me) => {
@@ -66,7 +66,7 @@ export const useSignaling = createSharedComposable(() => {
const uri = host ? `${protocol}//${host}` : ``
socket.value = io(`${uri}/webrtc`, {
socket.value = io(uri, {
path: `${pathname}/ws`,
transports: ['websocket'],
withCredentials: true,

View File

@@ -56,11 +56,9 @@
</div>
</PrimeScrollPanel>
<PrimeScrollPanel class="bg-surface-900 rounded-xl overflow-hidden" style="min-height: 0">
<div class="p-3">
<div class="bg-surface-900 rounded-xl overflow-hidden p-3 flex flex-col min-h-full">
<slot />
</div>
</PrimeScrollPanel>
</div>
<FullscreenGallery />

View File

@@ -1,21 +1,23 @@
<template>
<div class="grid grid-cols-[1fr_1fr] gap-2">
<PrimeScrollPanel class="grid grid-cols-[1fr_1fr] gap-2 min-h-0">
<GalleryCard
v-for="item in gallery"
:key="item.client.socketId"
:client="item.client"
:stream="item.stream"
v-for="producer in producers"
:key="`producer-${producer.id}`"
:client="me!"
:producer="producer"
/>
</div>
<GalleryCard
v-for="consumer in consumers"
:key="`consumer-${consumer.consumer.id}`"
:client="consumer.client"
:consumer="consumer.consumer"
/>
</PrimeScrollPanel>
</template>
<script setup lang="ts">
import type { ChadClient } from '#shared/types'
interface GalleryItem {
client: ChadClient
stream: MediaStream
}
import type { ChadClient, Consumer, Producer } from '#shared/types'
definePageMeta({
name: 'Gallery',
@@ -24,39 +26,29 @@ definePageMeta({
const { videoProducer, shareProducer } = useMediasoup()
const { clients, me } = useClients()
const gallery = computed(() => {
return clients.value.reduce<GalleryItem[]>(
(acc, client) => {
const { streaming, videoConsumers, shareConsumers } = useClient(client.socketId)
const producers = computed(() => {
return [videoProducer.value, shareProducer.value].filter(p => !!p && !!p.raw.track) as Producer[]
})
const consumers = computed(() => {
return clients.value.reduce<{ client: ChadClient, consumer: Consumer }[]>((acc, client) => {
const { streaming, videoConsumers: clientVideoConsumers, shareConsumers: clientShareConsumers } = useClient(client.socketId)
if (!streaming.value)
return acc
for (const consumer of [...videoConsumers.value, ...shareConsumers.value]) {
acc.push({
client,
stream: new MediaStream([consumer.raw.track]),
})
for (const consumer of [...clientVideoConsumers.value, ...clientShareConsumers.value]) {
acc.push({ client, consumer })
}
return acc
},
[videoProducer.value, shareProducer.value].reduce<GalleryItem[]>((acc, producer) => {
if (!me.value || !producer || !producer.raw.track)
return acc
acc.push({
client: me.value,
stream: new MediaStream([producer.raw.track]),
})
return acc
}, []),
)
}, [])
})
watch(gallery, (gallery) => {
if (gallery.length > 0)
const hasItems = computed(() => producers.value.length > 0 || consumers.value.length > 0)
watch(hasItems, (hasItems) => {
if (hasItems)
return
navigateTo({ name: 'Index' })

View File

@@ -1,17 +1,85 @@
<template>
<div>
<div class="flex items-center justify-center">
<PrimeCard>
<template #content>
The chat is under development.
</template>
</PrimeCard>
<PrimeScrollPanel class="flex-1 min-h-0">
<div v-auto-animate class="flex flex-col gap-3">
<div
v-for="message in messages"
:key="message.id"
class="min-w-64 w-fit max-w-[60%]"
:class="{
'ml-auto': message.sender === me?.username,
}"
>
<p
v-if="message.sender !== me?.username"
class="text-sm text-muted-color mb-1"
>
{{ message.sender }}
</p>
<div
class="px-2 py-1 rounded-lg"
:class="{
'bg-surface-800': message.sender !== me?.username,
'bg-surface-700': message.sender === me?.username,
}"
>
<p v-html="parseMessageText(message.text)" />
<p class="text-right text-sm text-muted-color">
{{ formatDate(message.createdAt) }}
</p>
</div>
</div>
</div>
</PrimeScrollPanel>
<div class="pt-3 mt-auto">
<PrimeInputGroup>
<!-- <PrimeInputGroupAddon> -->
<!-- <PrimeButton severity="secondary" class="shrink-0" disabled> -->
<!-- <template #icon> -->
<!-- <Paperclip /> -->
<!-- </template> -->
<!-- </PrimeButton> -->
<!-- </PrimeInputGroupAddon> -->
<PrimeInputText v-model="text" placeholder="Write a message..." fluid @keydown.enter="sendMessage" />
<PrimeButton class="shrink-0" label="Send" severity="contrast" @click="sendMessage" />
</PrimeInputGroup>
</div>
</template>
<script setup lang="ts">
import { format } from 'date-fns'
import linkifyStr from 'linkify-string'
import { useChat } from '~/composables/use-chat'
definePageMeta({
name: 'Index',
})
const { me } = useClients()
const chat = useChat()
const { messages } = chat
const text = ref('')
function parseMessageText(text: string) {
return linkifyStr(text, { className: 'underline', rel: 'noopener noreferrer', target: '_blank' })
}
function formatDate(date: string) {
return format(date, 'HH:mm')
}
function sendMessage() {
if (!text.value)
return
chat.sendMessage({
text: text.value,
})
text.value = ''
}
</script>

View File

@@ -1,5 +1,5 @@
<template>
<div>
<PrimeScrollPanel class="min-h-0">
<PrimeDivider align="left">
Audio
</PrimeDivider>
@@ -132,7 +132,7 @@
@click="checkForUpdates"
/>
</template>
</div>
</PrimeScrollPanel>
</template>
<script setup lang="ts">

View File

@@ -0,0 +1,61 @@
export default defineNuxtPlugin(() => {
const { on } = useEventBus()
const sfx = useSfx()
// Connection sounds
on('socket:authenticated', ({ socketId }) => {
sfx.playEvent('stream-on')
})
// Client events
on('client:added', (client) => {
sfx.playEvent('stream-on')
})
on('client:removed', () => {
sfx.playEvent('stream-off')
})
// Audio mute/unmute
on('audio:muted', () => {
sfx.playEvent('mic-off')
})
on('audio:unmuted', () => {
sfx.playEvent('mic-on')
})
// Video/share toggle
on('video:enabled', () => {
sfx.playEvent('stream-on')
})
on('video:disabled', () => {
sfx.playEvent('stream-off')
})
on('share:enabled', () => {
sfx.playEvent('stream-on')
})
on('share:disabled', () => {
sfx.playEvent('stream-off')
})
// Consumer video streams
on('consumer:added', (consumer) => {
if (consumer.raw.kind === 'video') {
sfx.playEvent('stream-on')
}
})
on('consumer:removed', (consumer) => {
if (consumer.raw.kind === 'video') {
sfx.playEvent('stream-off')
}
})
on('chat:new-message', () => {
sfx.playEvent('message')
})
})

View File

@@ -0,0 +1,62 @@
export default defineNuxtPlugin(() => {
const { on } = useEventBus()
const toast = useToast()
// Socket events
on('socket:connected', () => {
toast.add({ severity: 'success', summary: 'Connected', life: 1000 })
})
on('socket:disconnected', () => {
toast.add({ severity: 'error', summary: 'Disconnected', life: 1000 })
})
on('socket:authenticated', () => {
toast.add({ severity: 'success', summary: 'Joined', life: 1000 })
})
// Client events
on('client:added', (client) => {
toast.add({
severity: 'info',
summary: `${client.displayName} connected`,
life: 1000,
})
})
on('client:removed', (client) => {
toast.add({
severity: 'info',
summary: `${client.displayName} disconnected`,
life: 1000,
})
})
on('client:updated', ({ oldClient, updatedClient }) => {
if (oldClient.displayName !== updatedClient.displayName) {
toast.add({
severity: 'info',
summary: `${oldClient.displayName} is now ${updatedClient.displayName}`,
life: 1000,
})
}
})
// Audio control
on('audio:muted', () => {
toast.add({ severity: 'info', summary: 'Microphone muted', life: 1000 })
})
on('audio:unmuted', () => {
toast.add({ severity: 'info', summary: 'Microphone activated', life: 1000 })
})
// Output mute control
on('output:muted', () => {
toast.add({ severity: 'info', summary: 'Sound muted', life: 1000 })
})
on('output:unmuted', () => {
toast.add({ severity: 'info', summary: 'Sound resumed', life: 1000 })
})
})

View File

View File

@@ -14,14 +14,18 @@
"@nuxt/fonts": "^0.11.4",
"@primeuix/themes": "^1.2.5",
"@tailwindcss/vite": "^4.1.14",
"@tauri-apps/plugin-global-shortcut": "~2",
"@tauri-apps/plugin-process": "~2",
"@tauri-apps/plugin-updater": "~2",
"@tauri-apps/plugin-global-shortcut": "^2.3.1",
"@tauri-apps/plugin-process": "^2.3.1",
"@tauri-apps/plugin-updater": "^2.10.1",
"@vueuse/core": "^13.9.0",
"date-fns": "^4.1.0",
"hotkeys-js": "^4.0.0",
"howler": "^2.2.4",
"linkify-string": "^4.3.2",
"linkifyjs": "^4.3.2",
"lucide-vue-next": "^0.562.0",
"mediasoup-client": "^3.18.6",
"mitt": "^3.0.1",
"nuxt": "^4.2.2",
"postcss": "^8.5.6",
"primeicons": "^7.0.0",

File diff suppressed because it is too large Load Diff

View File

@@ -24,6 +24,7 @@ log = "0.4"
tauri = { version = "2.8.5", features = [] }
tauri-plugin-log = "2"
tauri-plugin-process = "2"
windows = { version = "0.52", features = ["Win32_UI_Shell"] }
[target.'cfg(not(any(target_os = "android", target_os = "ios")))'.dependencies]
tauri-plugin-global-shortcut = "2"

View File

@@ -4,7 +4,7 @@ pub fn run() {
.plugin(tauri_plugin_global_shortcut::Builder::new().build())
.plugin(tauri_plugin_process::init())
.plugin(tauri_plugin_updater::Builder::new().build())
.plugin(tauri_plugin_single_instance::init(|_, _, _| {}))
// .plugin(tauri_plugin_single_instance::init(|_, _, _| {}))
.setup(|app| {
if cfg!(debug_assertions) {
app.handle().plugin(

View File

@@ -1,6 +1,21 @@
// Prevents additional console window on Windows in release, DO NOT REMOVE!!
#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]
#[cfg(target_os = "windows")]
fn set_app_user_model_id() {
use windows::core::HSTRING;
use windows::Win32::UI::Shell::SetCurrentProcessExplicitAppUserModelID;
unsafe {
SetCurrentProcessExplicitAppUserModelID(
&HSTRING::from("xyz.koptilnya.chad")
).ok().expect("Failed to set AppUserModelID");
}
}
fn main() {
#[cfg(target_os = "windows")]
set_app_user_model_id();
app_lib::run();
}

View File

@@ -1,7 +1,7 @@
{
"$schema": "../node_modules/@tauri-apps/cli/config.schema.json",
"productName": "Chad",
"version": "0.2.32",
"version": "0.3.0-rc.1",
"identifier": "xyz.koptilnya.chad",
"build": {
"frontendDist": "../.output/public",
@@ -23,7 +23,7 @@
"fullscreen": false,
"center": true,
"theme": "Dark",
"additionalBrowserArgs": "--disable-features=msWebOOUI,msPdfOOUI,msSmartScreenProtection --autoplay-policy=no-user-gesture-required",
"additionalBrowserArgs": "--disable-features=msWebOOUI,msPdfOOUI,msSmartScreenProtection --autoplay-policy=no-user-gesture-required --lang=en",
"incognito": false
}
],

View File

@@ -2824,10 +2824,10 @@ __metadata:
languageName: node
linkType: hard
"@tauri-apps/api@npm:^2.6.0":
version: 2.8.0
resolution: "@tauri-apps/api@npm:2.8.0"
checksum: 10c0/fb111e4d7572372997b440ebe6879543fa8c4765151878e3fddfbfe809b18da29eed142ce83061d14a9ca6d896b3266dc8a4927c642d71cdc0b4277dc7e3aabf
"@tauri-apps/api@npm:^2.10.1":
version: 2.10.1
resolution: "@tauri-apps/api@npm:2.10.1"
checksum: 10c0/f3c0b2ba67a0b887440a7faa1e0589e847760ee30ec29b964f22573a46b817cb3af2199d6f5f7dfdda54d65b465ebaaa280454c610a5c53d808a0911fa15e45d
languageName: node
linkType: hard
@@ -2959,7 +2959,7 @@ __metadata:
languageName: node
linkType: hard
"@tauri-apps/plugin-global-shortcut@npm:~2":
"@tauri-apps/plugin-global-shortcut@npm:^2.3.1":
version: 2.3.1
resolution: "@tauri-apps/plugin-global-shortcut@npm:2.3.1"
dependencies:
@@ -2968,21 +2968,21 @@ __metadata:
languageName: node
linkType: hard
"@tauri-apps/plugin-process@npm:~2":
version: 2.3.0
resolution: "@tauri-apps/plugin-process@npm:2.3.0"
"@tauri-apps/plugin-process@npm:^2.3.1":
version: 2.3.1
resolution: "@tauri-apps/plugin-process@npm:2.3.1"
dependencies:
"@tauri-apps/api": "npm:^2.6.0"
checksum: 10c0/ef50344a7436d92278c2ef4526f72daaf3171c4d65743bbc1f7a00fa581644a8583bb8680f637a34af5c7e6a0e8722c22189290e903584fef70ed83b64b6e9c0
"@tauri-apps/api": "npm:^2.8.0"
checksum: 10c0/2e5086898f1c9f25f6426a752404c788727237142bbb7c8f418b97c76c5360874d06203150d136e51114df9e720022e4fa3681fd1d4cb6f777dc83c3553f8670
languageName: node
linkType: hard
"@tauri-apps/plugin-updater@npm:~2":
version: 2.9.0
resolution: "@tauri-apps/plugin-updater@npm:2.9.0"
"@tauri-apps/plugin-updater@npm:^2.10.1":
version: 2.10.1
resolution: "@tauri-apps/plugin-updater@npm:2.10.1"
dependencies:
"@tauri-apps/api": "npm:^2.6.0"
checksum: 10c0/72ce83d1c241308a13b9929f0900e4d33453875877009166e3998e3e75a1003ac48c3641086b4d3230f0f18c64f475ad6c3556d1603fc641ca50dc9c18d61866
"@tauri-apps/api": "npm:^2.10.1"
checksum: 10c0/5d3813851ccbbf90253ad4647dbd97501c2bb75db864175693322fa6eb062b6e1bae03890810ad0bbe7f6da4e020af35e8c787e6999f8c7c645121164587dc29
languageName: node
linkType: hard
@@ -4059,17 +4059,21 @@ __metadata:
"@primevue/nuxt-module": "npm:^4.4.0"
"@tailwindcss/vite": "npm:^4.1.14"
"@tauri-apps/cli": "npm:^2.8.4"
"@tauri-apps/plugin-global-shortcut": "npm:~2"
"@tauri-apps/plugin-process": "npm:~2"
"@tauri-apps/plugin-updater": "npm:~2"
"@tauri-apps/plugin-global-shortcut": "npm:^2.3.1"
"@tauri-apps/plugin-process": "npm:^2.3.1"
"@tauri-apps/plugin-updater": "npm:^2.10.1"
"@types/howler": "npm:^2"
"@vueuse/core": "npm:^13.9.0"
date-fns: "npm:^4.1.0"
eslint: "npm:^9.36.0"
eslint-plugin-format: "npm:^1.0.2"
hotkeys-js: "npm:^4.0.0"
howler: "npm:^2.2.4"
linkify-string: "npm:^4.3.2"
linkifyjs: "npm:^4.3.2"
lucide-vue-next: "npm:^0.562.0"
mediasoup-client: "npm:^3.18.6"
mitt: "npm:^3.0.1"
nuxt: "npm:^4.2.2"
postcss: "npm:^8.5.6"
primeicons: "npm:^7.0.0"
@@ -4565,6 +4569,13 @@ __metadata:
languageName: node
linkType: hard
"date-fns@npm:^4.1.0":
version: 4.1.0
resolution: "date-fns@npm:4.1.0"
checksum: 10c0/b79ff32830e6b7faa009590af6ae0fb8c3fd9ffad46d930548fbb5acf473773b4712ae887e156ba91a7b3dc30591ce0f517d69fd83bd9c38650fdc03b4e0bac8
languageName: node
linkType: hard
"db0@npm:^0.3.4":
version: 0.3.4
resolution: "db0@npm:0.3.4"
@@ -6952,6 +6963,22 @@ __metadata:
languageName: node
linkType: hard
"linkify-string@npm:^4.3.2":
version: 4.3.2
resolution: "linkify-string@npm:4.3.2"
peerDependencies:
linkifyjs: ^4.0.0
checksum: 10c0/674e908b46aa6da3ee7e5c0749464d8de55f4d44933d7e9dea4d2f9bb5af0137d45142494288cd120335e21d8298c76ec4524ab6e67edede4613adb5f17f7dc6
languageName: node
linkType: hard
"linkifyjs@npm:^4.3.2":
version: 4.3.2
resolution: "linkifyjs@npm:4.3.2"
checksum: 10c0/1a85e6b368304a4417567fe5e38651681e3e82465590836942d1b4f3c834cc35532898eb1e2479f6337d9144b297d418eb708b6be8ed0b3dc3954a3588e07971
languageName: node
linkType: hard
"listhen@npm:^1.9.0":
version: 1.9.0
resolution: "listhen@npm:1.9.0"

View File

@@ -10,6 +10,7 @@
"@fastify/autoload": "^6.3.1",
"@fastify/cookie": "^11.0.2",
"@fastify/cors": "^11.1.0",
"@fastify/multipart": "^10.0.0",
"@lucia-auth/adapter-prisma": "^4.0.1",
"@prisma/client": "^6.17.0",
"bcrypt": "^6.0.0",
@@ -21,6 +22,7 @@
"mediasoup": "^3.19.3",
"prisma": "^6.17.0",
"socket.io": "^4.8.1",
"uuid": "^13.0.0",
"ws": "^8.18.3",
"zod": "^4.1.12"
},

View File

@@ -2,6 +2,7 @@ import type { FastifyInstance } from 'fastify'
import type { ServerOptions } from 'socket.io'
import fp from 'fastify-plugin'
import { Server } from 'socket.io'
import registerChatSocket from '../socket/chat.ts'
import registerWebrtcSocket from '../socket/webrtc.ts'
declare module 'fastify' {
@@ -24,6 +25,7 @@ export default fp<Partial<ServerOptions>>(
fastify.ready(async () => {
await registerWebrtcSocket(fastify.io, fastify.mediasoupRouter)
await registerChatSocket(fastify.io)
})
},
{ name: 'socket-io', dependencies: ['mediasoup-worker', 'mediasoup-router'] },

View File

@@ -0,0 +1,33 @@
import type { FastifyInstance } from 'fastify'
import bcrypt from 'bcrypt'
import { z } from 'zod'
export default function (fastify: FastifyInstance) {
fastify.post('/attachments/upload', async (req, reply) => {
try {
const schema = z.object({
file: z.file(),
})
const input = schema.parse(req.body)
// const file = req.file({ limits: { } })
const id = await bcrypt.hash(input.file, 10)
return {
id,
}
}
catch (err) {
fastify.log.error(err)
reply.code(400)
if (err instanceof z.ZodError) {
reply.send({ error: z.prettifyError(err) })
}
else {
reply.send({ error: err.message })
}
}
})
}

View File

@@ -3,9 +3,12 @@ import { fileURLToPath } from 'node:url'
import FastifyAutoLoad from '@fastify/autoload'
import FastifyCookie from '@fastify/cookie'
import FastifyCors from '@fastify/cors'
import FastifyMultipart from '@fastify/multipart'
import Fastify from 'fastify'
import prisma from './prisma/client.ts'
console.log(process.env.DATABASE_URL)
const __filename = fileURLToPath(import.meta.url)
const __dirname = dirname(__filename)
@@ -25,6 +28,7 @@ fastify.register(FastifyCors, {
})
fastify.register(FastifyCookie)
fastify.register(FastifyMultipart)
fastify.register(FastifyAutoLoad, {
dir: join(__dirname, 'plugins'),

28
server/socket/chat.ts Normal file
View File

@@ -0,0 +1,28 @@
import type { Server as SocketServer } from 'socket.io'
import type { ChatClientMessage, ChatMessage } from '../types/chat.ts'
import { v4 as uuidv4 } from 'uuid'
export default async function (io: SocketServer) {
const messages: ChatMessage[] = []
io.on('connection', async (socket) => {
socket.on('chat:message', async (clientMessage: ChatClientMessage, cb) => {
const message: ChatMessage = {
id: uuidv4(),
createdAt: new Date().toISOString(),
sender: socket.data.username,
text: clientMessage.text,
}
console.log(message)
messages.push(message)
if (messages.length > 5000) {
messages.shift()
}
io.emit('chat:new-message', message)
})
})
}

View File

@@ -2,7 +2,6 @@ import type { types } from 'mediasoup'
import type { Server as SocketServer } from 'socket.io'
import type {
ChadClient,
Namespace,
SomeSocket,
} from '../types/webrtc.ts'
import { consola } from 'consola'
@@ -10,8 +9,6 @@ import prisma from '../prisma/client.ts'
import { socketToClient } from '../utils/socket-to-client.ts'
export default async function (io: SocketServer, router: types.Router) {
const namespace: Namespace = io.of('/webrtc')
const audioLevelObserver = await router.createAudioLevelObserver({
maxEntries: 10,
threshold: -80,
@@ -21,7 +18,7 @@ export default async function (io: SocketServer, router: types.Router) {
const activeSpeakerObserver = await router.createActiveSpeakerObserver()
audioLevelObserver.on('volumes', async (volumes: types.AudioLevelObserverVolume[]) => {
namespace.emit('speakingPeers', volumes.map(({ producer, volume }) => {
io.emit('speakingPeers', volumes.map(({ producer, volume }) => {
const { socketId } = producer.appData as { socketId: ChadClient['socketId'] }
return {
@@ -32,17 +29,17 @@ export default async function (io: SocketServer, router: types.Router) {
})
audioLevelObserver.on('silence', () => {
namespace.emit('speakingPeers', [])
namespace.emit('activeSpeaker', undefined)
io.emit('speakingPeers', [])
io.emit('activeSpeaker', undefined)
})
activeSpeakerObserver.on('dominantspeaker', ({ producer }) => {
const { socketId } = producer.appData as { socketId: ChadClient['socketId'] }
namespace.emit('activeSpeaker', socketId)
io.emit('activeSpeaker', socketId)
})
namespace.on('connection', async (socket) => {
io.on('connection', async (socket) => {
consola.info('[WebRtc]', 'Client connected', socket.id)
socket.data.joined = false
@@ -350,7 +347,7 @@ export default async function (io: SocketServer, router: types.Router) {
cb(socketToClient(socket))
namespace.emit('clientChanged', socket.id, socketToClient(socket))
io.emit('clientChanged', socket.id, socketToClient(socket))
})
socket.on('disconnect', () => {
@@ -367,7 +364,7 @@ export default async function (io: SocketServer, router: types.Router) {
})
async function getJoinedSockets(excludeId?: string) {
const sockets = await namespace.fetchSockets()
const sockets = await io.fetchSockets()
return sockets.filter(socket => socket.data.joined && (excludeId ? excludeId !== socket.id : true))
}

18
server/types/chat.ts Normal file
View File

@@ -0,0 +1,18 @@
export interface ChatClientMessage {
text: string
replyTo?: {
messageId: string
}
}
export interface ChatMessage {
id: string
sender: string
text: string
createdAt: string
replyTo?: {
messageId: string
sender: string
text: string
}
}

View File

@@ -331,6 +331,13 @@ __metadata:
languageName: node
linkType: hard
"@fastify/busboy@npm:^3.0.0":
version: 3.2.0
resolution: "@fastify/busboy@npm:3.2.0"
checksum: 10c0/3e4fb00a27e3149d1c68de8ff14007d2bbcbbc171a9d050d0a8772e836727329d4d3f130995ebaa19cf537d5d2f5ce2a88000366e6192e751457bfcc2125f351
languageName: node
linkType: hard
"@fastify/cookie@npm:^11.0.2":
version: 11.0.2
resolution: "@fastify/cookie@npm:11.0.2"
@@ -351,6 +358,13 @@ __metadata:
languageName: node
linkType: hard
"@fastify/deepmerge@npm:^3.0.0":
version: 3.2.1
resolution: "@fastify/deepmerge@npm:3.2.1"
checksum: 10c0/2c0f8b627537834822ec761842e3a57965d3fb59e011ac5f2215b618ce34698e277bcbe4f586b09e4f03347391f292cfef9dccb6bda7b019ea9420d8767ade49
languageName: node
linkType: hard
"@fastify/error@npm:^4.0.0":
version: 4.2.0
resolution: "@fastify/error@npm:4.2.0"
@@ -383,6 +397,19 @@ __metadata:
languageName: node
linkType: hard
"@fastify/multipart@npm:^10.0.0":
version: 10.0.0
resolution: "@fastify/multipart@npm:10.0.0"
dependencies:
"@fastify/busboy": "npm:^3.0.0"
"@fastify/deepmerge": "npm:^3.0.0"
"@fastify/error": "npm:^4.0.0"
fastify-plugin: "npm:^5.0.0"
secure-json-parse: "npm:^4.0.0"
checksum: 10c0/49e09135599a59aab761b71f65ab5f9ad63c3ea28ede04389c308dea1149b1fd7779693230f5bc0ffc9063c42484e99a2d1d38c0fd73b074c9ed3216db12e9da
languageName: node
linkType: hard
"@fastify/proxy-addr@npm:^5.0.0":
version: 5.1.0
resolution: "@fastify/proxy-addr@npm:5.1.0"
@@ -4265,6 +4292,7 @@ __metadata:
"@fastify/autoload": "npm:^6.3.1"
"@fastify/cookie": "npm:^11.0.2"
"@fastify/cors": "npm:^11.1.0"
"@fastify/multipart": "npm:^10.0.0"
"@lucia-auth/adapter-prisma": "npm:^4.0.1"
"@prisma/client": "npm:^6.17.0"
"@types/bcrypt": "npm:^6"
@@ -4281,6 +4309,7 @@ __metadata:
socket.io: "npm:^4.8.1"
ts-node: "npm:^10.9.2"
typescript: "npm:^5.9.3"
uuid: "npm:^13.0.0"
ws: "npm:^8.18.3"
zod: "npm:^4.1.12"
languageName: unknown
@@ -4787,6 +4816,15 @@ __metadata:
languageName: node
linkType: hard
"uuid@npm:^13.0.0":
version: 13.0.0
resolution: "uuid@npm:13.0.0"
bin:
uuid: dist-node/bin/uuid
checksum: 10c0/950e4c18d57fef6c69675344f5700a08af21e26b9eff2bf2180427564297368c538ea11ac9fb2e6528b17fc3966a9fd2c5049361b0b63c7d654f3c550c9b3d67
languageName: node
linkType: hard
"v8-compile-cache-lib@npm:^3.0.1":
version: 3.0.1
resolution: "v8-compile-cache-lib@npm:3.0.1"