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
103 lines
3.1 KiB
HTML
103 lines
3.1 KiB
HTML
<div
|
|
class="relative bg-black rounded-lg overflow-hidden"
|
|
[class.fixed]="isFullscreen()"
|
|
[class.inset-0]="isFullscreen()"
|
|
[class.z-50]="isFullscreen()"
|
|
[class.hidden]="!hasStream()"
|
|
>
|
|
<!-- Video Element -->
|
|
<video
|
|
#screenVideo
|
|
autoplay
|
|
playsinline
|
|
class="w-full h-full object-contain"
|
|
[class.max-h-[400px]]="!isFullscreen()"
|
|
></video>
|
|
|
|
<!-- Overlay Controls -->
|
|
<div class="absolute top-0 left-0 right-0 p-4 bg-gradient-to-b from-black/70 to-transparent opacity-0 hover:opacity-100 transition-opacity">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center gap-2 text-white">
|
|
<ng-icon
|
|
name="lucideMonitor"
|
|
class="w-4 h-4"
|
|
/>
|
|
@if (activeScreenSharer()) {
|
|
<span class="text-sm font-medium"> {{ activeScreenSharer()?.displayName }} is sharing their screen </span>
|
|
} @else {
|
|
<span class="text-sm font-medium">Someone is sharing their screen</span>
|
|
}
|
|
</div>
|
|
<div class="flex items-center gap-3">
|
|
<!-- Viewer volume -->
|
|
<div class="flex items-center gap-2 text-white">
|
|
<span class="text-xs opacity-80">Volume: {{ screenVolume() }}%</span>
|
|
<input
|
|
type="range"
|
|
min="0"
|
|
max="200"
|
|
[value]="screenVolume()"
|
|
(input)="onScreenVolumeChange($event)"
|
|
class="w-32 accent-white"
|
|
/>
|
|
</div>
|
|
<button
|
|
(click)="toggleFullscreen()"
|
|
type="button"
|
|
class="grid h-9 w-9 place-items-center rounded-lg bg-white/10 transition-colors hover:bg-white/20"
|
|
>
|
|
@if (isFullscreen()) {
|
|
<ng-icon
|
|
name="lucideMinimize"
|
|
class="w-4 h-4 text-white"
|
|
/>
|
|
} @else {
|
|
<ng-icon
|
|
name="lucideMaximize"
|
|
class="w-4 h-4 text-white"
|
|
/>
|
|
}
|
|
</button>
|
|
@if (isLocalShare()) {
|
|
<button
|
|
(click)="stopSharing()"
|
|
type="button"
|
|
class="grid h-9 w-9 place-items-center rounded-lg bg-destructive transition-colors hover:bg-destructive/90"
|
|
title="Stop sharing"
|
|
>
|
|
<ng-icon
|
|
name="lucideX"
|
|
class="w-4 h-4 text-white"
|
|
/>
|
|
</button>
|
|
} @else {
|
|
<button
|
|
(click)="stopWatching()"
|
|
type="button"
|
|
class="grid h-9 w-9 place-items-center rounded-lg bg-destructive transition-colors hover:bg-destructive/90"
|
|
title="Stop watching"
|
|
>
|
|
<ng-icon
|
|
name="lucideX"
|
|
class="w-4 h-4 text-white"
|
|
/>
|
|
</button>
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- No Stream Placeholder -->
|
|
@if (!hasStream()) {
|
|
<div class="absolute inset-0 flex items-center justify-center bg-secondary">
|
|
<div class="text-center text-muted-foreground">
|
|
<ng-icon
|
|
name="lucideMonitor"
|
|
class="w-12 h-12 mx-auto mb-2 opacity-50"
|
|
/>
|
|
<p>Waiting for screen share...</p>
|
|
</div>
|
|
</div>
|
|
}
|
|
</div>
|