204 lines
8.7 KiB
HTML
204 lines
8.7 KiB
HTML
@if (request(); as pickerRequest) {
|
|
<app-modal-backdrop
|
|
[zIndex]="110"
|
|
ariaLabel="Close source picker"
|
|
(dismissed)="cancel()"
|
|
/>
|
|
|
|
<div class="fixed inset-0 z-[111] flex items-center justify-center p-4 pointer-events-none">
|
|
<section
|
|
appThemeNode="screenShareSourcePicker"
|
|
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
|
|
appThemeNode="screenShareSourceCard"
|
|
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>
|
|
}
|