Fix electron windows screen and window picker for screensharing

src/app/shared/components/screen-share-source-picker/screen-share-source-picker.component.html

@@ -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>
+}

src/app/shared/components/screen-share-source-picker/screen-share-source-picker.component.scss

@@ -0,0 +1,64 @@
+:host {
+  display: contents;
+}
+
+.screen-share-source-picker__body {
+  max-height: min(36rem, calc(100vh - 15rem));
+  overflow: auto;
+}
+
+.screen-share-source-picker__grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
+  gap: 0.75rem;
+  align-content: start;
+  padding: 1.25rem;
+}
+
+.screen-share-source-picker__grid--screen {
+  grid-template-columns: repeat(auto-fill, minmax(12.5rem, 15rem));
+  justify-content: start;
+}
+
+.screen-share-source-picker__grid--window {
+  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
+}
+
+.screen-share-source-picker__source {
+  cursor: pointer;
+  min-height: 100%;
+}
+
+.screen-share-source-picker__source:focus-visible {
+  outline: 2px solid hsl(var(--ring));
+  outline-offset: 2px;
+}
+
+.screen-share-source-picker__preview {
+  display: block;
+  position: relative;
+  aspect-ratio: 16 / 10;
+  overflow: hidden;
+  border: 1px solid hsl(var(--border));
+  border-radius: 0.875rem;
+  background: hsl(var(--secondary) / 0.45);
+}
+
+.screen-share-source-picker__preview img {
+  width: 100%;
+  height: 100%;
+  display: block;
+  object-fit: cover;
+  background: hsl(var(--secondary) / 0.3);
+}
+
+@media (max-width: 640px) {
+  .screen-share-source-picker__body {
+    max-height: calc(100vh - 22rem);
+  }
+
+  .screen-share-source-picker__grid {
+    grid-template-columns: 1fr;
+    padding: 1rem;
+  }
+}

src/app/shared/components/screen-share-source-picker/screen-share-source-picker.component.ts

@@ -0,0 +1,132 @@
+import { CommonModule, NgOptimizedImage } from '@angular/common';
+import {
+  Component,
+  ElementRef,
+  HostListener,
+  computed,
+  effect,
+  inject,
+  signal,
+  viewChildren
+} from '@angular/core';
+import {
+  ScreenShareSourceKind,
+  ScreenShareSourceOption,
+  ScreenShareSourcePickerService
+} from '../../../core/services/screen-share-source-picker.service';
+
+@Component({
+  selector: 'app-screen-share-source-picker',
+  standalone: true,
+  imports: [CommonModule, NgOptimizedImage],
+  templateUrl: './screen-share-source-picker.component.html',
+  styleUrl: './screen-share-source-picker.component.scss',
+  host: {
+    style: 'display: contents;'
+  }
+})
+export class ScreenShareSourcePickerComponent {
+  readonly picker = inject(ScreenShareSourcePickerService);
+  readonly request = this.picker.request;
+  readonly sources = computed(() => this.request()?.sources ?? []);
+  readonly screenSources = computed(() => this.sources().filter((source) => source.kind === 'screen'));
+  readonly windowSources = computed(() => this.sources().filter((source) => source.kind === 'window'));
+  readonly filteredSources = computed(() => {
+    return this.activeTab() === 'screen'
+      ? this.screenSources()
+      : this.windowSources();
+  });
+  readonly hasOpenRequest = computed(() => !!this.request());
+  readonly activeTab = signal<ScreenShareSourceKind>('screen');
+  readonly includeSystemAudio = signal(false);
+  readonly selectedSourceId = signal<string | null>(null);
+
+  private readonly sourceButtons = viewChildren<ElementRef<HTMLButtonElement>>('sourceButton');
+
+  constructor() {
+    effect(() => {
+      const request = this.request();
+      const defaultTab: ScreenShareSourceKind = request?.sources.some((source) => source.kind === 'screen')
+        ? 'screen'
+        : 'window';
+
+      this.activeTab.set(defaultTab);
+      this.includeSystemAudio.set(request?.includeSystemAudio ?? false);
+    });
+
+    effect(() => {
+      const sources = this.filteredSources();
+      const selectedSourceId = this.selectedSourceId();
+
+      if (!sources.some((source) => source.id === selectedSourceId)) {
+        this.selectedSourceId.set(sources[0]?.id ?? null);
+      }
+
+      if (sources.length === 0) {
+        return;
+      }
+
+      window.requestAnimationFrame(() => {
+        const activeSourceId = this.selectedSourceId();
+        const targetButton = this.sourceButtons().find(
+          (button) => button.nativeElement.dataset['sourceId'] === activeSourceId
+        ) ?? this.sourceButtons()[0];
+
+        targetButton?.nativeElement.focus();
+      });
+    });
+  }
+
+  @HostListener('document:keydown.escape')
+  onEscape(): void {
+    if (this.hasOpenRequest()) {
+      this.cancel();
+    }
+  }
+
+  trackSource(_index: number, source: ScreenShareSourceOption): string {
+    return source.id;
+  }
+
+  setActiveTab(tab: ScreenShareSourceKind): void {
+    if (!this.getTabSources(tab).length) {
+      return;
+    }
+
+    this.activeTab.set(tab);
+  }
+
+  getTabCount(tab: ScreenShareSourceKind): number {
+    return this.getTabSources(tab).length;
+  }
+
+  selectSource(sourceId: string): void {
+    this.selectedSourceId.set(sourceId);
+  }
+
+  onIncludeSystemAudioChange(event: Event): void {
+    const input = event.target as HTMLInputElement;
+
+    this.includeSystemAudio.set(!!input.checked);
+  }
+
+  confirmSelection(): void {
+    const sourceId = this.selectedSourceId();
+
+    if (!sourceId) {
+      return;
+    }
+
+    this.picker.confirm(sourceId, this.includeSystemAudio());
+  }
+
+  cancel(): void {
+    this.picker.cancel();
+  }
+
+  private getTabSources(tab: ScreenShareSourceKind): ScreenShareSourceOption[] {
+    return tab === 'screen'
+      ? this.screenSources()
+      : this.windowSources();
+  }
+}