Myx
ae0ee8fac7
All checks were successful
Queue Release Build / prepare (push) Successful in 11s
Deploy Web Apps / deploy (push) Successful in 14m0s
Queue Release Build / build-linux (push) Successful in 35m41s
Queue Release Build / build-windows (push) Successful in 28m53s
Queue Release Build / finalize (push) Successful in 2m6s
531 lines
22 KiB
HTML
531 lines
22 KiB
HTML
<!-- eslint-disable @angular-eslint/template/button-has-type, @angular-eslint/template/cyclomatic-complexity -->
|
|
<aside class="flex h-full min-h-0 flex-col bg-card">
|
|
<div class="border-b border-border px-3 py-3">
|
|
@if (panelMode() === 'channels') {
|
|
<div class="flex items-center gap-3">
|
|
<div class="grid h-9 w-9 place-items-center rounded-md bg-secondary text-sm font-semibold text-foreground">
|
|
{{ currentRoom()?.name?.charAt(0)?.toUpperCase() || '#' }}
|
|
</div>
|
|
|
|
<div class="min-w-0 flex-1">
|
|
<p class="truncate text-sm font-semibold text-foreground">{{ currentRoom()?.name || 'Server' }}</p>
|
|
<p class="truncate text-xs text-muted-foreground">{{ currentRoom()?.description || 'Choose a text channel or jump into voice.' }}</p>
|
|
</div>
|
|
</div>
|
|
} @else {
|
|
<div class="flex items-center gap-3">
|
|
<div class="grid h-9 w-9 place-items-center rounded-md bg-secondary text-muted-foreground">
|
|
<ng-icon
|
|
name="lucideUsers"
|
|
class="h-4 w-4"
|
|
/>
|
|
</div>
|
|
|
|
<div class="min-w-0 flex-1">
|
|
<p class="text-sm font-semibold text-foreground">{{ knownUserCount() }} members</p>
|
|
<p class="text-xs text-muted-foreground">{{ onlineRoomUsers().length + (currentUser() ? 1 : 0) }} online right now</p>
|
|
</div>
|
|
</div>
|
|
}
|
|
</div>
|
|
|
|
<!-- Channels View -->
|
|
@if (panelMode() === 'channels') {
|
|
<div class="flex-1 overflow-auto">
|
|
<!-- Text Channels -->
|
|
<section class="px-2 py-3">
|
|
<div class="mb-2 flex items-center justify-between px-1">
|
|
<h4 class="text-xs font-semibold uppercase tracking-[0.18em] text-muted-foreground">Text Channels</h4>
|
|
@if (canManageChannels()) {
|
|
<button
|
|
(click)="createChannel('text')"
|
|
class="grid h-7 w-7 place-items-center rounded-md text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground"
|
|
title="Create Text Channel"
|
|
>
|
|
<ng-icon
|
|
name="lucidePlus"
|
|
class="w-3.5 h-3.5"
|
|
/>
|
|
</button>
|
|
}
|
|
</div>
|
|
<div class="space-y-1">
|
|
@for (ch of textChannels(); track ch.id) {
|
|
<button
|
|
class="flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm transition-colors"
|
|
[class.bg-secondary]="activeChannelId() === ch.id"
|
|
[class.text-foreground]="activeChannelId() === ch.id"
|
|
[class.font-medium]="activeChannelId() === ch.id"
|
|
[class.text-foreground/60]="activeChannelId() !== ch.id"
|
|
[class.hover:bg-secondary/70]="activeChannelId() !== ch.id"
|
|
[class.hover:text-foreground/80]="activeChannelId() !== ch.id"
|
|
(click)="selectTextChannel(ch.id)"
|
|
(contextmenu)="openChannelContextMenu($event, ch)"
|
|
>
|
|
<span class="text-muted-foreground text-base">#</span>
|
|
@if (renamingChannelId() === ch.id) {
|
|
<input
|
|
#renameInput
|
|
type="text"
|
|
[value]="ch.name"
|
|
[class.border-destructive]="renamingChannelId() === ch.id && !!channelNameError()"
|
|
[title]="renamingChannelId() === ch.id ? (channelNameError() ?? '') : ''"
|
|
(keydown.enter)="confirmRename($event)"
|
|
(keydown.escape)="cancelRename()"
|
|
(blur)="confirmRename($event)"
|
|
(input)="clearChannelNameError()"
|
|
class="flex-1 rounded-md border border-input bg-background px-2 py-1 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-primary"
|
|
(click)="$event.stopPropagation()"
|
|
/>
|
|
} @else {
|
|
<span class="flex-1 truncate">{{ ch.name }}</span>
|
|
}
|
|
|
|
@if (channelUnreadCount(ch.id) > 0) {
|
|
<span class="ml-auto rounded-full bg-primary/15 px-1.5 py-0.5 text-[10px] font-semibold text-primary">
|
|
{{ formatUnreadCount(channelUnreadCount(ch.id)) }}
|
|
</span>
|
|
}
|
|
</button>
|
|
}
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Voice Channels -->
|
|
<section class="border-t border-border px-2 py-3">
|
|
<div class="mb-2 flex items-center justify-between px-1">
|
|
<h4 class="text-xs font-semibold uppercase tracking-[0.18em] text-muted-foreground">Voice Channels</h4>
|
|
@if (canManageChannels()) {
|
|
<button
|
|
(click)="createChannel('voice')"
|
|
class="grid h-7 w-7 place-items-center rounded-md text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground"
|
|
title="Create Voice Channel"
|
|
>
|
|
<ng-icon
|
|
name="lucidePlus"
|
|
class="w-3.5 h-3.5"
|
|
/>
|
|
</button>
|
|
}
|
|
</div>
|
|
@if (!voiceEnabled()) {
|
|
<p class="px-2 py-2 text-sm text-muted-foreground">Voice is disabled by host</p>
|
|
}
|
|
<div class="space-y-1">
|
|
@for (ch of voiceChannels(); track ch.id) {
|
|
<div
|
|
class="rounded-md transition-colors"
|
|
[class.bg-primary/10]="dragTargetVoiceChannelId() === ch.id"
|
|
[class.ring-1]="dragTargetVoiceChannelId() === ch.id"
|
|
[class.ring-primary/40]="dragTargetVoiceChannelId() === ch.id"
|
|
(dragover)="onVoiceChannelDragOver($event, ch.id)"
|
|
(dragleave)="onVoiceChannelDragLeave(ch.id)"
|
|
(drop)="onVoiceChannelDrop($event, ch.id)"
|
|
>
|
|
<button
|
|
class="flex w-full items-center justify-between rounded-md px-2 py-1.5 text-left text-sm transition-colors hover:bg-secondary/60"
|
|
(click)="joinVoice(ch.id)"
|
|
(contextmenu)="openChannelContextMenu($event, ch)"
|
|
[class.bg-secondary]="isCurrentRoom(ch.id)"
|
|
[disabled]="!voiceEnabled()"
|
|
[title]="isCurrentRoom(ch.id) ? 'Open stream workspace' : 'Join voice channel'"
|
|
>
|
|
<span class="flex items-center gap-2 text-foreground/80">
|
|
<ng-icon
|
|
name="lucideMic"
|
|
class="w-4 h-4 text-muted-foreground"
|
|
/>
|
|
@if (renamingChannelId() === ch.id) {
|
|
<input
|
|
#renameInput
|
|
type="text"
|
|
[value]="ch.name"
|
|
[class.border-destructive]="renamingChannelId() === ch.id && !!channelNameError()"
|
|
[title]="renamingChannelId() === ch.id ? (channelNameError() ?? '') : ''"
|
|
(keydown.enter)="confirmRename($event)"
|
|
(keydown.escape)="cancelRename()"
|
|
(blur)="confirmRename($event)"
|
|
(input)="clearChannelNameError()"
|
|
class="flex-1 rounded-md border border-input bg-background px-2 py-1 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-primary"
|
|
(click)="$event.stopPropagation()"
|
|
/>
|
|
} @else {
|
|
<span>{{ ch.name }}</span>
|
|
}
|
|
</span>
|
|
|
|
@if (isCurrentRoom(ch.id)) {
|
|
<span class="rounded-full bg-primary/15 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-primary">
|
|
{{ isVoiceWorkspaceExpanded() ? 'Open' : 'View' }}
|
|
</span>
|
|
} @else if (voiceOccupancy(ch.id) > 0) {
|
|
<span class="text-xs text-muted-foreground">{{ voiceOccupancy(ch.id) }}</span>
|
|
}
|
|
</button>
|
|
<!-- Voice users connected to this channel -->
|
|
@if (voiceUsersInRoom(ch.id).length > 0) {
|
|
<div class="ml-5 mt-1 space-y-1 border-l border-border pb-1 pl-2">
|
|
@for (u of voiceUsersInRoom(ch.id); track u.id) {
|
|
<div
|
|
class="flex items-center gap-2 rounded-md px-2 py-1.5 transition-colors hover:bg-secondary/50"
|
|
[class.cursor-pointer]="canDragVoiceUser(u)"
|
|
[class.opacity-60]="draggedVoiceUserId() === (u.id || u.oderId)"
|
|
[draggable]="canDragVoiceUser(u)"
|
|
(dragstart)="onVoiceUserDragStart($event, u)"
|
|
(dragend)="onVoiceUserDragEnd()"
|
|
(contextmenu)="openVoiceUserVolumeMenu($event, u)"
|
|
>
|
|
<app-user-avatar
|
|
[name]="u.displayName"
|
|
[avatarUrl]="u.avatarUrl"
|
|
size="xs"
|
|
[ringClass]="
|
|
u.voiceState?.isDeafened
|
|
? 'ring-2 ring-red-500'
|
|
: u.voiceState?.isMuted
|
|
? 'ring-2 ring-yellow-500'
|
|
: voiceActivity.isSpeaking(u.oderId || u.id)()
|
|
? 'ring-2 ring-green-400 shadow-[0_0_8px_2px_rgba(74,222,128,0.6)]'
|
|
: 'ring-2 ring-green-500/40'
|
|
"
|
|
/>
|
|
<span class="text-sm text-foreground/80 truncate flex-1">{{ u.displayName }}</span>
|
|
<!-- Ping latency indicator -->
|
|
@if (u.id !== currentUser()?.id) {
|
|
<span
|
|
class="w-2 h-2 rounded-full shrink-0"
|
|
[class]="getPingColorClass(u)"
|
|
[title]="getPeerLatency(u) !== null ? getPeerLatency(u) + ' ms' : 'Measuring...'"
|
|
></span>
|
|
}
|
|
@if (isUserStreaming(u.oderId || u.id)) {
|
|
<button
|
|
(click)="viewStream(u.oderId || u.id); $event.stopPropagation()"
|
|
class="inline-flex items-center gap-1 px-1.5 py-0.5 text-[10px] font-bold bg-red-500 text-white rounded animate-pulse hover:bg-red-600 transition-colors"
|
|
>
|
|
<ng-icon
|
|
[name]="getUserLiveIconName(u.oderId || u.id)"
|
|
class="w-2.5 h-2.5"
|
|
/>
|
|
LIVE
|
|
</button>
|
|
}
|
|
@if (u.voiceState?.isMuted) {
|
|
<ng-icon
|
|
name="lucideMicOff"
|
|
class="w-4 h-4 text-muted-foreground"
|
|
/>
|
|
}
|
|
@if (isUserLocallyMuted(u)) {
|
|
<ng-icon
|
|
name="lucideVolumeX"
|
|
class="w-4 h-4 text-destructive"
|
|
title="Muted by you"
|
|
/>
|
|
}
|
|
</div>
|
|
}
|
|
</div>
|
|
}
|
|
</div>
|
|
}
|
|
</div>
|
|
</section>
|
|
</div>
|
|
}
|
|
|
|
<!-- Users View -->
|
|
@if (panelMode() === 'users') {
|
|
<div class="flex-1 overflow-auto px-2 py-3">
|
|
<!-- Current User (You) -->
|
|
@if (currentUser()) {
|
|
<div class="mb-4">
|
|
<h4 class="text-xs uppercase tracking-wide text-muted-foreground font-medium mb-2 px-1">You</h4>
|
|
<div class="flex items-center gap-2 rounded-md bg-secondary/60 px-3 py-2">
|
|
<div class="relative">
|
|
<app-user-avatar
|
|
[name]="currentUser()?.displayName || '?'"
|
|
[avatarUrl]="currentUser()?.avatarUrl"
|
|
size="sm"
|
|
/>
|
|
<span class="absolute bottom-0 right-0 w-2.5 h-2.5 rounded-full bg-green-500 ring-2 ring-card"></span>
|
|
</div>
|
|
<div class="flex-1 min-w-0">
|
|
<p class="text-sm text-foreground truncate">{{ currentUser()?.displayName }}</p>
|
|
<div class="flex items-center gap-2">
|
|
@if (currentUser()?.voiceState?.isConnected) {
|
|
<p class="text-[10px] text-muted-foreground flex items-center gap-1">
|
|
<ng-icon
|
|
name="lucideMic"
|
|
class="w-2.5 h-2.5"
|
|
/>
|
|
In voice
|
|
</p>
|
|
}
|
|
@if (currentUser() && isUserStreaming(currentUser()!.oderId || currentUser()!.id)) {
|
|
<button
|
|
class="text-[10px] bg-red-500 text-white px-1.5 py-0.5 rounded-sm font-medium flex items-center gap-1 animate-pulse hover:bg-red-600 transition-colors"
|
|
(click)="viewStream(currentUser()!.oderId || currentUser()!.id); $event.stopPropagation()"
|
|
>
|
|
<ng-icon
|
|
[name]="getUserLiveIconName(currentUser()!.oderId || currentUser()!.id)"
|
|
class="w-2.5 h-2.5"
|
|
/>
|
|
LIVE
|
|
</button>
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
}
|
|
|
|
<!-- Other Online Users -->
|
|
@if (onlineRoomUsers().length > 0) {
|
|
<div class="mb-4">
|
|
<h4 class="text-xs uppercase tracking-wide text-muted-foreground font-medium mb-2 px-1">Online - {{ onlineRoomUsers().length }}</h4>
|
|
<div class="space-y-1">
|
|
@for (user of onlineRoomUsers(); track user.id) {
|
|
<div
|
|
class="group/user flex items-center gap-2 rounded-md px-3 py-2 transition-colors hover:bg-secondary/50"
|
|
(contextmenu)="openUserContextMenu($event, user)"
|
|
>
|
|
<div class="relative">
|
|
<app-user-avatar
|
|
[name]="user.displayName"
|
|
[avatarUrl]="user.avatarUrl"
|
|
size="sm"
|
|
/>
|
|
<span class="absolute bottom-0 right-0 w-2.5 h-2.5 rounded-full bg-green-500 ring-2 ring-card"></span>
|
|
</div>
|
|
<div class="flex-1 min-w-0">
|
|
<div class="flex items-center gap-1.5">
|
|
<p class="text-sm text-foreground truncate">{{ user.displayName }}</p>
|
|
@if (user.role === 'host') {
|
|
<span class="text-[10px] bg-yellow-500/20 text-yellow-400 px-1 py-0.5 rounded font-medium">Owner</span>
|
|
} @else if (user.role === 'admin') {
|
|
<span class="text-[10px] bg-blue-500/20 text-blue-400 px-1 py-0.5 rounded font-medium">Admin</span>
|
|
} @else if (user.role === 'moderator') {
|
|
<span class="text-[10px] bg-green-500/20 text-green-400 px-1 py-0.5 rounded font-medium">Mod</span>
|
|
}
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
@if (user.voiceState?.isConnected) {
|
|
<p class="text-[10px] text-muted-foreground flex items-center gap-1">
|
|
<ng-icon
|
|
name="lucideMic"
|
|
class="w-2.5 h-2.5"
|
|
/>
|
|
In voice
|
|
</p>
|
|
}
|
|
@if (isUserStreaming(user.oderId || user.id)) {
|
|
<button
|
|
(click)="viewStream(user.oderId || user.id); $event.stopPropagation()"
|
|
class="text-[10px] bg-red-500 text-white px-1.5 py-0.5 rounded-sm font-medium hover:bg-red-600 transition-colors flex items-center gap-1 animate-pulse"
|
|
>
|
|
<ng-icon
|
|
[name]="getUserLiveIconName(user.oderId || user.id)"
|
|
class="w-2.5 h-2.5"
|
|
/>
|
|
LIVE
|
|
</button>
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
}
|
|
|
|
<!-- Offline Users -->
|
|
@if (offlineRoomMembers().length > 0) {
|
|
<div class="mb-4">
|
|
<h4 class="text-xs uppercase tracking-wide text-muted-foreground font-medium mb-2 px-1">Offline - {{ offlineRoomMembers().length }}</h4>
|
|
<div class="space-y-1">
|
|
@for (member of offlineRoomMembers(); track member.oderId || member.id) {
|
|
<div class="flex items-center gap-2 rounded-md px-3 py-2 opacity-80">
|
|
<div class="relative">
|
|
<app-user-avatar
|
|
[name]="member.displayName"
|
|
[avatarUrl]="member.avatarUrl"
|
|
size="sm"
|
|
/>
|
|
<span class="absolute bottom-0 right-0 w-2.5 h-2.5 rounded-full bg-gray-500 ring-2 ring-card"></span>
|
|
</div>
|
|
<div class="flex-1 min-w-0">
|
|
<div class="flex items-center gap-1.5">
|
|
<p class="text-sm text-foreground/80 truncate">{{ member.displayName }}</p>
|
|
@if (member.role === 'host') {
|
|
<span class="text-[10px] bg-yellow-500/20 text-yellow-400 px-1 py-0.5 rounded font-medium">Owner</span>
|
|
} @else if (member.role === 'admin') {
|
|
<span class="text-[10px] bg-blue-500/20 text-blue-400 px-1 py-0.5 rounded font-medium">Admin</span>
|
|
} @else if (member.role === 'moderator') {
|
|
<span class="text-[10px] bg-green-500/20 text-green-400 px-1 py-0.5 rounded font-medium">Mod</span>
|
|
}
|
|
</div>
|
|
<p class="text-[10px] text-muted-foreground">Offline</p>
|
|
</div>
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
}
|
|
|
|
<!-- No other users message -->
|
|
@if (onlineRoomUsers().length === 0 && offlineRoomMembers().length === 0) {
|
|
<div class="text-center py-4 text-muted-foreground">
|
|
<p class="text-sm">No other users in this server</p>
|
|
</div>
|
|
}
|
|
</div>
|
|
}
|
|
|
|
<!-- Voice controls pinned to sidebar bottom (hidden when floating controls visible) -->
|
|
@if (panelMode() === 'channels' && showVoiceControls() && voiceEnabled()) {
|
|
<div
|
|
class="border-t border-border px-2 py-3"
|
|
[class.invisible]="showFloatingControls()"
|
|
>
|
|
<app-voice-controls />
|
|
</div>
|
|
}
|
|
</aside>
|
|
|
|
<!-- Channel context menu -->
|
|
@if (panelMode() === 'channels' && showChannelMenu()) {
|
|
<app-context-menu
|
|
[x]="channelMenuX()"
|
|
[y]="channelMenuY()"
|
|
(closed)="closeChannelMenu()"
|
|
[width]="'w-44'"
|
|
>
|
|
<button
|
|
(click)="resyncMessages()"
|
|
class="context-menu-item"
|
|
>
|
|
Resync Messages
|
|
</button>
|
|
@if (contextChannel()?.type === 'text') {
|
|
<button
|
|
(click)="toggleChannelNotifications()"
|
|
class="context-menu-item"
|
|
>
|
|
{{ isContextChannelMuted() ? 'Unmute Notifications' : 'Mute Notifications' }}
|
|
</button>
|
|
}
|
|
@if (canManageChannels()) {
|
|
<div class="context-menu-divider"></div>
|
|
<button
|
|
(click)="startRename()"
|
|
class="context-menu-item"
|
|
>
|
|
Rename Channel
|
|
</button>
|
|
<button
|
|
(click)="deleteChannel()"
|
|
class="context-menu-item-danger"
|
|
>
|
|
Delete Channel
|
|
</button>
|
|
}
|
|
</app-context-menu>
|
|
}
|
|
|
|
<!-- User context menu (kick / role management) -->
|
|
@if (panelMode() === 'users' && showUserMenu()) {
|
|
<app-context-menu
|
|
[x]="userMenuX()"
|
|
[y]="userMenuY()"
|
|
(closed)="closeUserMenu()"
|
|
>
|
|
@if (contextMenuUser(); as selectedUser) {
|
|
@if (canChangeUserRole(selectedUser) && selectedUser.role === 'member') {
|
|
<button
|
|
(click)="changeUserRole('moderator')"
|
|
class="context-menu-item"
|
|
>
|
|
Promote to Moderator
|
|
</button>
|
|
<button
|
|
(click)="changeUserRole('admin')"
|
|
class="context-menu-item"
|
|
>
|
|
Promote to Admin
|
|
</button>
|
|
}
|
|
@if (canChangeUserRole(selectedUser) && selectedUser.role === 'moderator') {
|
|
<button
|
|
(click)="changeUserRole('admin')"
|
|
class="context-menu-item"
|
|
>
|
|
Promote to Admin
|
|
</button>
|
|
<button
|
|
(click)="changeUserRole('member')"
|
|
class="context-menu-item"
|
|
>
|
|
Demote to Member
|
|
</button>
|
|
}
|
|
@if (canChangeUserRole(selectedUser) && selectedUser.role === 'admin') {
|
|
<button
|
|
(click)="changeUserRole('member')"
|
|
class="context-menu-item"
|
|
>
|
|
Demote to Member
|
|
</button>
|
|
}
|
|
@if (canChangeUserRole(selectedUser) && canKickUser(selectedUser)) {
|
|
<div class="context-menu-divider"></div>
|
|
}
|
|
@if (canKickUser(selectedUser)) {
|
|
<button
|
|
(click)="kickUserAction()"
|
|
class="context-menu-item-danger"
|
|
>
|
|
Kick User
|
|
</button>
|
|
}
|
|
@if (!canChangeUserRole(selectedUser) && !canKickUser(selectedUser)) {
|
|
<div class="context-menu-empty">No actions available</div>
|
|
}
|
|
}
|
|
</app-context-menu>
|
|
}
|
|
|
|
<!-- Per-user volume context menu -->
|
|
@if (panelMode() === 'channels' && showVolumeMenu()) {
|
|
<app-user-volume-menu
|
|
[x]="volumeMenuX()"
|
|
[y]="volumeMenuY()"
|
|
[peerId]="volumeMenuPeerId()"
|
|
[displayName]="volumeMenuDisplayName()"
|
|
(closed)="showVolumeMenu.set(false)"
|
|
/>
|
|
}
|
|
|
|
<!-- Create channel dialog -->
|
|
@if (panelMode() === 'channels' && showCreateChannelDialog()) {
|
|
<app-confirm-dialog
|
|
[title]="'Create ' + (createChannelType() === 'text' ? 'Text' : 'Voice') + ' Channel'"
|
|
confirmLabel="Create"
|
|
(confirmed)="confirmCreateChannel()"
|
|
(cancelled)="cancelCreateChannel()"
|
|
>
|
|
<input
|
|
type="text"
|
|
[(ngModel)]="newChannelName"
|
|
placeholder="Channel name"
|
|
class="w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-primary"
|
|
[class.border-destructive]="!!channelNameError()"
|
|
(ngModelChange)="clearChannelNameError()"
|
|
(keydown.enter)="confirmCreateChannel()"
|
|
/>
|
|
@if (channelNameError()) {
|
|
<p class="mt-2 text-sm text-destructive">{{ channelNameError() }}</p>
|
|
}
|
|
</app-confirm-dialog>
|
|
}
|