62 lines
1.7 KiB
TypeScript
62 lines
1.7 KiB
TypeScript
import {
|
|
Component,
|
|
input,
|
|
output,
|
|
inject,
|
|
signal,
|
|
OnInit
|
|
} from '@angular/core';
|
|
import { NgIcon, provideIcons } from '@ng-icons/core';
|
|
import { lucideVolume2, lucideVolumeX } from '@ng-icons/lucide';
|
|
import { VoicePlaybackService } from '../../../domains/voice-connection';
|
|
import { ContextMenuComponent } from '../context-menu/context-menu.component';
|
|
|
|
@Component({
|
|
selector: 'app-user-volume-menu',
|
|
standalone: true,
|
|
imports: [NgIcon, ContextMenuComponent],
|
|
viewProviders: [provideIcons({ lucideVolume2, lucideVolumeX })],
|
|
templateUrl: './user-volume-menu.component.html',
|
|
styleUrl: './user-volume-menu.component.scss'
|
|
})
|
|
/* eslint-disable @typescript-eslint/member-ordering */
|
|
export class UserVolumeMenuComponent implements OnInit {
|
|
x = input.required<number>();
|
|
y = input.required<number>();
|
|
peerId = input.required<string>();
|
|
displayName = input.required<string>();
|
|
closed = output<undefined>();
|
|
|
|
private playback = inject(VoicePlaybackService);
|
|
|
|
volume = signal(100);
|
|
isMuted = signal(false);
|
|
|
|
ngOnInit(): void {
|
|
const id = this.peerId();
|
|
|
|
this.volume.set(this.playback.getUserVolume(id));
|
|
this.isMuted.set(this.playback.isUserMuted(id));
|
|
}
|
|
|
|
onSliderInput(event: Event): void {
|
|
const val = parseInt((event.target as HTMLInputElement).value, 10);
|
|
|
|
this.volume.set(val);
|
|
this.playback.setUserVolume(this.peerId(), val);
|
|
}
|
|
|
|
toggleMute(): void {
|
|
const next = !this.isMuted();
|
|
|
|
this.isMuted.set(next);
|
|
this.playback.setUserMuted(this.peerId(), next);
|
|
}
|
|
|
|
muteButtonClass(): string {
|
|
return this.isMuted()
|
|
? 'bg-destructive/15 text-destructive hover:bg-destructive/25'
|
|
: 'text-muted-foreground hover:bg-secondary hover:text-foreground';
|
|
}
|
|
}
|