72 lines
2.3 KiB
HTML
72 lines
2.3 KiB
HTML
<div class="flex w-full flex-wrap items-center justify-center gap-3 rounded-2xl bg-background/75 px-4 py-3 backdrop-blur">
|
|
@if (!connected()) {
|
|
<button
|
|
type="button"
|
|
class="inline-flex h-12 items-center gap-2 rounded-full bg-emerald-500 px-6 text-sm font-semibold text-white transition-colors hover:bg-emerald-600"
|
|
(click)="joinRequested.emit()"
|
|
>
|
|
<ng-icon
|
|
name="lucidePhone"
|
|
class="h-5 w-5"
|
|
/>
|
|
Join call
|
|
</button>
|
|
}
|
|
|
|
<button
|
|
type="button"
|
|
class="grid h-12 w-12 place-items-center rounded-full bg-secondary text-foreground transition-colors hover:bg-secondary/80 disabled:opacity-45"
|
|
[disabled]="!connected()"
|
|
(click)="muteToggled.emit()"
|
|
[attr.aria-label]="muted() ? 'Unmute' : 'Mute'"
|
|
[title]="muted() ? 'Unmute' : 'Mute'"
|
|
>
|
|
<ng-icon
|
|
[name]="muted() ? 'lucideMicOff' : 'lucideMic'"
|
|
class="h-5 w-5"
|
|
/>
|
|
</button>
|
|
|
|
<button
|
|
type="button"
|
|
class="grid h-12 w-12 place-items-center rounded-full bg-secondary text-foreground transition-colors hover:bg-secondary/80 disabled:opacity-45"
|
|
[disabled]="!connected()"
|
|
(click)="cameraToggled.emit()"
|
|
[attr.aria-label]="cameraEnabled() ? 'Turn camera off' : 'Turn camera on'"
|
|
[title]="cameraEnabled() ? 'Turn camera off' : 'Turn camera on'"
|
|
>
|
|
<ng-icon
|
|
[name]="cameraEnabled() ? 'lucideVideoOff' : 'lucideVideo'"
|
|
class="h-5 w-5"
|
|
/>
|
|
</button>
|
|
|
|
<button
|
|
type="button"
|
|
class="grid h-12 w-12 place-items-center rounded-full bg-secondary text-foreground transition-colors hover:bg-secondary/80 disabled:opacity-45"
|
|
[disabled]="!connected()"
|
|
(click)="screenShareToggled.emit()"
|
|
[attr.aria-label]="screenSharing() ? 'Stop sharing screen' : 'Share screen'"
|
|
[title]="screenSharing() ? 'Stop sharing screen' : 'Share screen'"
|
|
>
|
|
<ng-icon
|
|
[name]="screenSharing() ? 'lucideMonitorOff' : 'lucideMonitor'"
|
|
class="h-5 w-5"
|
|
/>
|
|
</button>
|
|
|
|
<button
|
|
type="button"
|
|
class="grid h-12 w-12 place-items-center rounded-full bg-destructive/10 text-destructive transition-colors hover:bg-destructive/15 disabled:opacity-45"
|
|
[disabled]="!connected()"
|
|
(click)="leaveRequested.emit()"
|
|
aria-label="Leave call"
|
|
title="Leave call"
|
|
>
|
|
<ng-icon
|
|
name="lucidePhoneOff"
|
|
class="h-5 w-5"
|
|
/>
|
|
</button>
|
|
</div>
|