(extension) improve extension debug page [DA-405]

app/web/src/app/app.routes.ts

@@ -107,13 +107,13 @@ export const routes: Routes = [
             title: `Debug Components | ${PAGE_TITLE}`,
           },
           {
-            path: 'iframe',
+            path: 'playground',
             loadComponent: () =>
-              import('./features/debug/iframe-debug-page.component').then(
-                (m) => m.IframeDebugPageComponent
-              ),
+              import(
+                './features/debug/playground/playground-page.component'
+              ).then((m) => m.PlaygroundPageComponent),
             canActivate: [developmentOnly],
-            title: `Debug iframe | ${PAGE_TITLE}`,
+            title: `Playground | ${PAGE_TITLE}`,
           },
         ],
       },

app/web/src/app/features/debug/playground/panels/cross-origin-iframe-panel.component.ts

@@ -0,0 +1,89 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  inject,
+  output,
+  signal,
+} from '@angular/core'
+import { FormsModule } from '@angular/forms'
+import { DomSanitizer } from '@angular/platform-browser'
+import { InputText } from 'primeng/inputtext'
+import { Select } from 'primeng/select'
+
+import { DebugPanelComponent } from './debug-panel.component'
+
+interface UrlPreset {
+  label: string
+  url: string
+}
+
+@Component({
+  selector: 'da-cross-origin-iframe-panel',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [DebugPanelComponent, Select, InputText, FormsModule],
+  template: `
+    <da-debug-panel title="Cross-Origin Iframe" (remove)="remove.emit()" class="block h-full">
+      <div toolbar class="flex items-center gap-2 px-3 py-2 border-b border-surface">
+        <p-select
+          [options]="presets"
+          optionLabel="label"
+          optionValue="url"
+          placeholder="Presets"
+          [ngModel]="$url()"
+          (ngModelChange)="$url.set($event)"
+          size="small"
+          class="flex-shrink-0"
+        />
+        <input
+          pInputText
+          [ngModel]="$url()"
+          (ngModelChange)="$url.set($event)"
+          placeholder="Enter URL..."
+          class="flex-1 text-sm"
+        />
+      </div>
+      <iframe
+        [src]="$sanitizedUrl()"
+        class="size-full border-0"
+        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+        allowfullscreen
+      ></iframe>
+    </da-debug-panel>
+  `,
+})
+export class CrossOriginIframePanelComponent {
+  private readonly domSanitizer = inject(DomSanitizer)
+
+  protected readonly presets: UrlPreset[] = [
+    {
+      label: 'YouTube Embed',
+      url: 'https://www.youtube.com/embed/dQw4w9WgXcQ',
+    },
+    {
+      label: 'Vimeo Embed',
+      url: 'https://player.vimeo.com/video/148751763',
+    },
+    {
+      label: 'Wikipedia',
+      url: 'https://en.wikipedia.org/wiki/Main_Page',
+    },
+  ]
+
+  protected readonly $url = signal(this.presets[0].url)
+
+  protected readonly $sanitizedUrl = computed(() => {
+    const value = this.$url()
+    try {
+      const url = new URL(value)
+      if (url.protocol === 'http:' || url.protocol === 'https:') {
+        return this.domSanitizer.bypassSecurityTrustResourceUrl(value)
+      }
+    } catch {
+      // invalid URL
+    }
+    return this.domSanitizer.bypassSecurityTrustResourceUrl('about:blank')
+  })
+
+  readonly remove = output()
+}

app/web/src/app/features/debug/playground/panels/debug-panel.component.ts

@@ -0,0 +1,36 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  input,
+  output,
+} from '@angular/core'
+import { Button } from 'primeng/button'
+
+@Component({
+  selector: 'da-debug-panel',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [Button],
+  template: `
+    <div class="flex flex-col h-full border rounded border-surface">
+      <div class="flex items-center justify-between px-2 py-1 bg-surface-50 dark:bg-surface-800 border-b border-surface">
+        <span class="font-medium text-sm">{{ title() }}</span>
+        <p-button
+          icon="pi pi-times"
+          [rounded]="true"
+          [text]="true"
+          severity="danger"
+          size="small"
+          (onClick)="remove.emit()"
+        />
+      </div>
+      <ng-content select="[toolbar]" />
+      <div class="flex-1 min-h-0">
+        <ng-content />
+      </div>
+    </div>
+  `,
+})
+export class DebugPanelComponent {
+  readonly title = input.required<string>()
+  readonly remove = output()
+}

app/web/src/app/features/debug/playground/panels/native-video-panel.component.ts

@@ -0,0 +1,72 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  output,
+  signal,
+} from '@angular/core'
+import { FormsModule } from '@angular/forms'
+import { Select } from 'primeng/select'
+
+import { DebugPanelComponent } from './debug-panel.component'
+
+interface VideoOption {
+  label: string
+  url: string
+}
+
+@Component({
+  selector: 'da-native-video-panel',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [DebugPanelComponent, Select, FormsModule],
+  template: `
+    <da-debug-panel title="Native Video" (remove)="remove.emit()" class="block h-full">
+      <div toolbar class="flex items-center gap-2 px-3 py-2 border-b border-surface">
+        <p-select
+          [options]="videoOptions"
+          optionLabel="label"
+          optionValue="url"
+          [ngModel]="$videoUrl()"
+          (ngModelChange)="$videoUrl.set($event)"
+          placeholder="Select video"
+          size="small"
+          class="flex-1"
+        />
+      </div>
+      <div class="flex-1 min-h-0 flex items-center justify-center bg-black h-full">
+        <video
+          [src]="$videoUrl()"
+          controls
+          class="max-w-full max-h-full"
+        ></video>
+      </div>
+    </da-debug-panel>
+  `,
+})
+export class NativeVideoPanelComponent {
+  protected readonly videoOptions: VideoOption[] = [
+    {
+      label: 'Big Buck Bunny',
+      url: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
+    },
+    {
+      label: 'Elephants Dream',
+      url: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4',
+    },
+    {
+      label: 'For Bigger Blazes',
+      url: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4',
+    },
+    {
+      label: 'Sintel',
+      url: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/Sintel.mp4',
+    },
+    {
+      label: 'Tears of Steel',
+      url: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/TearsOfSteel.mp4',
+    },
+  ]
+
+  protected readonly $videoUrl = signal(this.videoOptions[0].url)
+
+  readonly remove = output()
+}

app/web/src/app/features/debug/playground/panels/same-origin-iframe-panel.component.ts

@@ -0,0 +1,33 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  inject,
+  output,
+} from '@angular/core'
+import { DomSanitizer } from '@angular/platform-browser'
+
+import { DebugPanelComponent } from './debug-panel.component'
+
+@Component({
+  selector: 'da-same-origin-iframe-panel',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [DebugPanelComponent],
+  template: `
+    <da-debug-panel title="Same-Origin Iframe" (remove)="remove.emit()" class="block h-full">
+      <iframe
+        [src]="iframeSrc"
+        class="size-full border-0"
+      ></iframe>
+    </da-debug-panel>
+  `,
+})
+export class SameOriginIframePanelComponent {
+  private readonly domSanitizer = inject(DomSanitizer)
+
+  protected readonly iframeSrc =
+    this.domSanitizer.bypassSecurityTrustResourceUrl(
+      `${window.location.origin}/local`
+    )
+
+  readonly remove = output()
+}