Fix electron windows screen and window picker for screensharing
This commit is contained in:
@@ -0,0 +1,191 @@
|
||||
@if (request(); as pickerRequest) {
|
||||
<div
|
||||
class="fixed inset-0 z-[110] bg-black/70 backdrop-blur-sm"
|
||||
(click)="cancel()"
|
||||
(keydown.enter)="cancel()"
|
||||
(keydown.space)="cancel()"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
aria-label="Close source picker"
|
||||
></div>
|
||||
|
||||
<div class="fixed inset-0 z-[111] flex items-center justify-center p-4 pointer-events-none">
|
||||
<section
|
||||
class="pointer-events-auto w-full max-w-6xl rounded-2xl border border-border bg-card shadow-2xl"
|
||||
(click)="$event.stopPropagation()"
|
||||
(keydown.enter)="$event.stopPropagation()"
|
||||
(keydown.space)="$event.stopPropagation()"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby="screen-share-source-picker-title"
|
||||
aria-describedby="screen-share-source-picker-description"
|
||||
tabindex="-1"
|
||||
>
|
||||
<header class="border-b border-border p-5">
|
||||
<div class="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
|
||||
<div>
|
||||
<h2 id="screen-share-source-picker-title" class="text-lg font-semibold text-foreground">
|
||||
Choose what to share
|
||||
</h2>
|
||||
<p id="screen-share-source-picker-description" class="mt-1 text-sm text-muted-foreground">
|
||||
Select a screen or window to start sharing.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<label
|
||||
class="flex items-center justify-between gap-3 rounded-xl border border-border bg-secondary/30 px-4 py-3 lg:min-w-80"
|
||||
for="screen-share-include-system-audio-toggle"
|
||||
>
|
||||
<div>
|
||||
<p class="text-sm font-medium text-foreground">Include system audio</p>
|
||||
<p class="text-xs text-muted-foreground">Share desktop sound with viewers.</p>
|
||||
</div>
|
||||
<span class="relative inline-flex items-center cursor-pointer">
|
||||
<input
|
||||
id="screen-share-include-system-audio-toggle"
|
||||
type="checkbox"
|
||||
class="sr-only peer"
|
||||
[checked]="includeSystemAudio()"
|
||||
(change)="onIncludeSystemAudioChange($event)"
|
||||
/>
|
||||
<span
|
||||
class="relative block h-5 w-10 rounded-full bg-secondary transition-colors peer-checked:bg-primary after:absolute after:left-[2px] after:top-0.5 after:h-4 after:w-4 after:rounded-full after:bg-white after:transition-transform after:content-[''] peer-checked:after:translate-x-full"
|
||||
></span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 flex flex-wrap gap-2" role="tablist" aria-label="Share source type">
|
||||
<button
|
||||
type="button"
|
||||
class="inline-flex items-center gap-2 rounded-lg border px-4 py-2 text-sm font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-60"
|
||||
role="tab"
|
||||
[attr.aria-selected]="activeTab() === 'screen'"
|
||||
[disabled]="getTabCount('screen') === 0"
|
||||
[class.border-primary]="activeTab() === 'screen'"
|
||||
[class.bg-primary/10]="activeTab() === 'screen'"
|
||||
[class.text-primary]="activeTab() === 'screen'"
|
||||
[class.border-border]="activeTab() !== 'screen'"
|
||||
[class.bg-secondary/30]="activeTab() !== 'screen'"
|
||||
[class.text-foreground]="activeTab() !== 'screen'"
|
||||
(click)="setActiveTab('screen')"
|
||||
>
|
||||
Entire screen
|
||||
<span class="rounded-full bg-black/10 px-2 py-0.5 text-xs text-current">
|
||||
{{ getTabCount('screen') }}
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="inline-flex items-center gap-2 rounded-lg border px-4 py-2 text-sm font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-60"
|
||||
role="tab"
|
||||
[attr.aria-selected]="activeTab() === 'window'"
|
||||
[disabled]="getTabCount('window') === 0"
|
||||
[class.border-primary]="activeTab() === 'window'"
|
||||
[class.bg-primary/10]="activeTab() === 'window'"
|
||||
[class.text-primary]="activeTab() === 'window'"
|
||||
[class.border-border]="activeTab() !== 'window'"
|
||||
[class.bg-secondary/30]="activeTab() !== 'window'"
|
||||
[class.text-foreground]="activeTab() !== 'window'"
|
||||
(click)="setActiveTab('window')"
|
||||
>
|
||||
Windows
|
||||
<span class="rounded-full bg-black/10 px-2 py-0.5 text-xs text-current">
|
||||
{{ getTabCount('window') }}
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@if (includeSystemAudio()) {
|
||||
<p class="mt-3 rounded-lg bg-primary/10 px-3 py-2 text-xs text-primary">
|
||||
Computer audio will be shared. MeToYou audio is filtered when supported, and your microphone stays on its normal voice track.
|
||||
</p>
|
||||
}
|
||||
</header>
|
||||
|
||||
<div class="screen-share-source-picker__body">
|
||||
@if (filteredSources().length > 0) {
|
||||
<div
|
||||
class="screen-share-source-picker__grid"
|
||||
[class.screen-share-source-picker__grid--screen]="activeTab() === 'screen'"
|
||||
[class.screen-share-source-picker__grid--window]="activeTab() === 'window'"
|
||||
>
|
||||
@for (source of filteredSources(); track trackSource($index, source)) {
|
||||
<button
|
||||
#sourceButton
|
||||
type="button"
|
||||
class="rounded-xl border px-4 py-4 text-left transition-colors screen-share-source-picker__source"
|
||||
[attr.aria-pressed]="selectedSourceId() === source.id"
|
||||
[attr.data-source-id]="source.id"
|
||||
[class.border-primary]="selectedSourceId() === source.id"
|
||||
[class.bg-primary/10]="selectedSourceId() === source.id"
|
||||
[class.text-primary]="selectedSourceId() === source.id"
|
||||
[class.border-border]="selectedSourceId() !== source.id"
|
||||
[class.bg-secondary/30]="selectedSourceId() !== source.id"
|
||||
[class.text-foreground]="selectedSourceId() !== source.id"
|
||||
(click)="selectSource(source.id)"
|
||||
>
|
||||
<div class="flex items-start justify-between gap-3">
|
||||
<div class="min-w-0 flex-1">
|
||||
<span class="screen-share-source-picker__preview">
|
||||
<img [ngSrc]="source.thumbnail" [alt]="source.name" fill />
|
||||
</span>
|
||||
|
||||
<p class="mt-3 truncate font-medium">{{ source.name }}</p>
|
||||
<p class="mt-1 text-sm text-muted-foreground">
|
||||
{{ source.kind === 'screen' ? 'Entire screen' : 'Window' }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<span
|
||||
class="mt-0.5 inline-flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-full border text-[10px]"
|
||||
[class.border-primary]="selectedSourceId() === source.id"
|
||||
[class.bg-primary]="selectedSourceId() === source.id"
|
||||
[class.text-primary-foreground]="selectedSourceId() === source.id"
|
||||
[class.border-border]="selectedSourceId() !== source.id"
|
||||
>
|
||||
@if (selectedSourceId() === source.id) {
|
||||
✓
|
||||
}
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
} @else {
|
||||
<div class="flex min-h-52 items-center justify-center px-5 py-8 text-center">
|
||||
<div>
|
||||
<p class="text-sm font-medium text-foreground">
|
||||
No {{ activeTab() === 'screen' ? 'screens' : 'windows' }} available
|
||||
</p>
|
||||
<p class="mt-1 text-sm text-muted-foreground">
|
||||
{{ activeTab() === 'screen'
|
||||
? 'No displays were reported by Electron right now.'
|
||||
: 'Restore the window you want to share and try again.' }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
<footer class="flex items-center justify-end gap-2 border-t border-border p-4">
|
||||
<button
|
||||
type="button"
|
||||
class="rounded-lg bg-secondary px-4 py-2 text-sm text-foreground transition-colors hover:bg-secondary/80"
|
||||
(click)="cancel()"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90 disabled:cursor-not-allowed disabled:opacity-60"
|
||||
[disabled]="!selectedSourceId()"
|
||||
(click)="confirmSelection()"
|
||||
>
|
||||
Start sharing
|
||||
</button>
|
||||
</footer>
|
||||
</section>
|
||||
</div>
|
||||
}
|
||||
Reference in New Issue
Block a user