@memberjunction/ng-conversations 5.43.0 → 5.44.0

package/dist/lib/components/realtime/media/realtime-media-surface.component.js

@@ -0,0 +1,574 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, ViewChild, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { DomSanitizer } from '@angular/platform-browser';
+import { LogError } from '@memberjunction/core';
+import { BaseAngularComponent } from '@memberjunction/ng-base-types';
+import { MJMediaPlayerComponent, MJStorageMediaPlayerComponent } from '@memberjunction/ng-media-player';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+const _c0 = ["mediaPane"];
+function RealtimeMediaSurfaceComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 2);
+    i0.ɵɵelement(1, "i", 3);
+    i0.ɵɵelementStart(2, "p", 4);
+    i0.ɵɵtext(3, "No media yet");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "p", 5);
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate1("", ctx_r0.AgentName, " will share visuals here during the conversation.");
+} }
+function RealtimeMediaSurfaceComponent_Conditional_2_For_2_Template(rf, ctx) { if (rf & 1) {
+    const _r2 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 8);
+    i0.ɵɵlistener("click", function RealtimeMediaSurfaceComponent_Conditional_2_For_2_Template_button_click_0_listener() { const item_r3 = i0.ɵɵrestoreView(_r2).$implicit; const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.SelectTab(item_r3)); })("keydown", function RealtimeMediaSurfaceComponent_Conditional_2_For_2_Template_button_keydown_0_listener($event) { const ɵ$index_17_r4 = i0.ɵɵrestoreView(_r2).$index; const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.OnTabKeydown($event, ɵ$index_17_r4)); });
+    i0.ɵɵelement(1, "i", 9);
+    i0.ɵɵelementStart(2, "span", 10);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "span", 11);
+    i0.ɵɵlistener("click", function RealtimeMediaSurfaceComponent_Conditional_2_For_2_Template_span_click_4_listener($event) { const item_r3 = i0.ɵɵrestoreView(_r2).$implicit; const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.CloseItem($event, item_r3)); })("keydown.enter", function RealtimeMediaSurfaceComponent_Conditional_2_For_2_Template_span_keydown_enter_4_listener($event) { const item_r3 = i0.ɵɵrestoreView(_r2).$implicit; const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.CloseItem($event, item_r3)); })("keydown.space", function RealtimeMediaSurfaceComponent_Conditional_2_For_2_Template_span_keydown_space_4_listener($event) { const item_r3 = i0.ɵɵrestoreView(_r2).$implicit; const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.CloseItem($event, item_r3)); });
+    i0.ɵɵelement(5, "i", 12);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const item_r3 = ctx.$implicit;
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassProp("media-tab--active", ctx_r0.IsActive(item_r3));
+    i0.ɵɵproperty("title", item_r3.DisplayName);
+    i0.ɵɵattribute("aria-selected", ctx_r0.IsActive(item_r3))("tabindex", ctx_r0.IsActive(item_r3) ? 0 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r0.IconFor(item_r3.Type));
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(item_r3.DisplayName);
+    i0.ɵɵadvance();
+    i0.ɵɵattribute("aria-label", "Close " + item_r3.DisplayName);
+} }
+function RealtimeMediaSurfaceComponent_Conditional_2_Conditional_3_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 25);
+    i0.ɵɵlistener("click", function RealtimeMediaSurfaceComponent_Conditional_2_Conditional_3_Conditional_4_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.CycleZoom()); });
+    i0.ɵɵelement(1, "i", 26);
+    i0.ɵɵelementStart(2, "span", 27);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(3);
+    i0.ɵɵattribute("aria-label", "Zoom image (currently " + ctx_r0.ImageZoom + "x)");
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate1("", ctx_r0.ImageZoom, "\u00D7");
+} }
+function RealtimeMediaSurfaceComponent_Conditional_2_Conditional_3_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 28);
+    i0.ɵɵlistener("click", function RealtimeMediaSurfaceComponent_Conditional_2_Conditional_3_Conditional_5_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r6); const active_r7 = i0.ɵɵnextContext(); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.Download(active_r7)); });
+    i0.ɵɵelement(1, "i", 29);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(2, "button", 30);
+    i0.ɵɵlistener("click", function RealtimeMediaSurfaceComponent_Conditional_2_Conditional_3_Conditional_5_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r6); const active_r7 = i0.ɵɵnextContext(); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.OpenInNew(active_r7)); });
+    i0.ɵɵelement(3, "i", 31);
+    i0.ɵɵelementEnd();
+} }
+function RealtimeMediaSurfaceComponent_Conditional_2_Conditional_3_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-storage-media-player", 19);
+} if (rf & 2) {
+    const active_r7 = i0.ɵɵnextContext();
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("FileID", active_r7.FileID ?? null)("Provider", ctx_r0.Provider);
+} }
+function RealtimeMediaSurfaceComponent_Conditional_2_Conditional_3_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-media-player", 20);
+} if (rf & 2) {
+    const active_r7 = i0.ɵɵnextContext();
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("Tracks", ctx_r0.TracksFor(active_r7));
+} }
+function RealtimeMediaSurfaceComponent_Conditional_2_Conditional_3_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 21);
+    i0.ɵɵelement(1, "i", 32);
+    i0.ɵɵelementStart(2, "p", 33);
+    i0.ɵɵtext(3, "Loading secure media\u2026");
+    i0.ɵɵelementEnd()();
+} }
+function RealtimeMediaSurfaceComponent_Conditional_2_Conditional_3_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 22);
+    i0.ɵɵelement(1, "i", 34);
+    i0.ɵɵelementStart(2, "p", 33);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(ctx);
+} }
+function RealtimeMediaSurfaceComponent_Conditional_2_Conditional_3_Conditional_13_Case_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "img", 38);
+} if (rf & 2) {
+    const renderUrl_r8 = i0.ɵɵnextContext();
+    const active_r7 = i0.ɵɵnextContext();
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵstyleProp("transform", "scale(" + ctx_r0.ImageZoom + ")");
+    i0.ɵɵproperty("src", renderUrl_r8, i0.ɵɵsanitizeUrl)("alt", active_r7.DisplayName);
+} }
+function RealtimeMediaSurfaceComponent_Conditional_2_Conditional_3_Conditional_13_Case_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "iframe", 36);
+} if (rf & 2) {
+    const renderUrl_r8 = i0.ɵɵnextContext();
+    const active_r7 = i0.ɵɵnextContext();
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("src", ctx_r0.SafeUrl(renderUrl_r8), i0.ɵɵsanitizeResourceUrl)("title", active_r7.DisplayName);
+} }
+function RealtimeMediaSurfaceComponent_Conditional_2_Conditional_3_Conditional_13_Case_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "iframe", 37);
+} if (rf & 2) {
+    const renderUrl_r8 = i0.ɵɵnextContext();
+    const active_r7 = i0.ɵɵnextContext();
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("src", ctx_r0.SafeUrl(renderUrl_r8), i0.ɵɵsanitizeResourceUrl)("title", active_r7.DisplayName);
+} }
+function RealtimeMediaSurfaceComponent_Conditional_2_Conditional_3_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, RealtimeMediaSurfaceComponent_Conditional_2_Conditional_3_Conditional_13_Case_0_Template, 1, 4, "img", 35)(1, RealtimeMediaSurfaceComponent_Conditional_2_Conditional_3_Conditional_13_Case_1_Template, 1, 2, "iframe", 36)(2, RealtimeMediaSurfaceComponent_Conditional_2_Conditional_3_Conditional_13_Case_2_Template, 1, 2, "iframe", 37);
+} if (rf & 2) {
+    let tmp_6_0;
+    const active_r7 = i0.ɵɵnextContext();
+    i0.ɵɵconditional((tmp_6_0 = active_r7.Type) === "image" ? 0 : tmp_6_0 === "pdf" ? 1 : tmp_6_0 === "web" ? 2 : -1);
+} }
+function RealtimeMediaSurfaceComponent_Conditional_2_Conditional_3_Conditional_14_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 39);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const active_r7 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(active_r7.Highlight == null ? null : active_r7.Highlight.Label);
+} }
+function RealtimeMediaSurfaceComponent_Conditional_2_Conditional_3_Conditional_14_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 23);
+    i0.ɵɵconditionalCreate(1, RealtimeMediaSurfaceComponent_Conditional_2_Conditional_3_Conditional_14_Conditional_1_Template, 2, 1, "span", 39);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const active_r7 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("ngStyle", ctx);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional((active_r7.Highlight == null ? null : active_r7.Highlight.Label) ? 1 : -1);
+} }
+function RealtimeMediaSurfaceComponent_Conditional_2_Conditional_3_Conditional_15_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 24);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const active_r7 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(active_r7.Caption);
+} }
+function RealtimeMediaSurfaceComponent_Conditional_2_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 13)(1, "span", 14);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(3, "span", 15);
+    i0.ɵɵconditionalCreate(4, RealtimeMediaSurfaceComponent_Conditional_2_Conditional_3_Conditional_4_Template, 4, 2, "button", 16);
+    i0.ɵɵconditionalCreate(5, RealtimeMediaSurfaceComponent_Conditional_2_Conditional_3_Conditional_5_Template, 4, 0);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "div", 17, 0)(8, "div", 18);
+    i0.ɵɵconditionalCreate(9, RealtimeMediaSurfaceComponent_Conditional_2_Conditional_3_Conditional_9_Template, 1, 2, "mj-storage-media-player", 19)(10, RealtimeMediaSurfaceComponent_Conditional_2_Conditional_3_Conditional_10_Template, 1, 1, "mj-media-player", 20)(11, RealtimeMediaSurfaceComponent_Conditional_2_Conditional_3_Conditional_11_Template, 4, 0, "div", 21)(12, RealtimeMediaSurfaceComponent_Conditional_2_Conditional_3_Conditional_12_Template, 4, 1, "div", 22)(13, RealtimeMediaSurfaceComponent_Conditional_2_Conditional_3_Conditional_13_Template, 3, 1);
+    i0.ɵɵconditionalCreate(14, RealtimeMediaSurfaceComponent_Conditional_2_Conditional_3_Conditional_14_Template, 2, 2, "div", 23);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(15, RealtimeMediaSurfaceComponent_Conditional_2_Conditional_3_Conditional_15_Template, 2, 1, "p", 24);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    let tmp_9_0;
+    let tmp_10_0;
+    const active_r7 = ctx;
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("title", active_r7.DisplayName);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(active_r7.DisplayName);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(active_r7.Type === "image" ? 4 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.CanOpenOrDownload(active_r7) ? 5 : -1);
+    i0.ɵɵadvance(3);
+    i0.ɵɵclassProp("media-stage--scroll", active_r7.Type === "image" && ctx_r0.ImageZoom > 1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.UsesStoragePlayer(active_r7) ? 9 : ctx_r0.UsesUrlPlayer(active_r7) ? 10 : ctx_r0.IsResolving(active_r7) ? 11 : (tmp_9_0 = ctx_r0.ResolveError(active_r7)) ? 12 : (tmp_9_0 = ctx_r0.RenderUrl(active_r7)) ? 13 : -1, tmp_9_0);
+    i0.ɵɵadvance(5);
+    i0.ɵɵconditional((tmp_10_0 = ctx_r0.HighlightStyle(active_r7)) ? 14 : -1, tmp_10_0);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(active_r7.Caption ? 15 : -1);
+} }
+function RealtimeMediaSurfaceComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 6);
+    i0.ɵɵrepeaterCreate(1, RealtimeMediaSurfaceComponent_Conditional_2_For_2_Template, 6, 8, "button", 7, i0.ɵɵcomponentInstance().TrackById, true);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(3, RealtimeMediaSurfaceComponent_Conditional_2_Conditional_3_Template, 16, 9);
+} if (rf & 2) {
+    let tmp_2_0;
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r0.Items);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional((tmp_2_0 = ctx_r0.ActiveItem) ? 3 : -1, tmp_2_0);
+} }
+/** Zoom levels cycled by the image zoom control (×). */
+const IMAGE_ZOOM_LEVELS = [1, 1.5, 2, 3];
+/**
+ * The exact GraphQL mutation used to resolve a SECURE streaming URL for an `MJ: Files` id — mints a
+ * short-lived signed token (after a server-side per-user permission check) and returns the
+ * authenticated `/media/<fileId>?token=` URL. Image / PDF / web (iframe) panes render this URL; the
+ * audio/video panes hand the file id straight to `mj-storage-media-player` (which mints its own).
+ */
+const CREATE_MEDIA_ACCESS_TOKEN_MUTATION = `mutation CreateMediaAccessToken($fileId: String!) {
+  CreateMediaAccessToken(fileId: $fileId) {
+    Success
+    Url
+    ErrorMessage
+  }
+}`;
+/** Whether an item is rendered by the real media player (audio/video) vs. an img/iframe pane. */
+export function IsPlayerMediaType(item) {
+    return item.Type === 'audio' || item.Type === 'video';
+}
+/**
+ * Decides which render path an item uses based ONLY on its source + type — the single source of truth
+ * the surface methods delegate to (kept pure so it's unit-testable without an Angular context):
+ *  - audio/video + FileID → `'storage-player'` (`mj-storage-media-player`, secure streaming)
+ *  - audio/video + Url    → `'url-player'`     (`mj-media-player`, public URL)
+ *  - image/pdf/web        → `'iframe-or-img'`  (img/iframe; FileID resolves a streaming URL first)
+ *  - no usable source     → `'none'`
+ */
+export function RouteForMediaItem(item) {
+    if (IsPlayerMediaType(item)) {
+        if (item.FileID) {
+            return 'storage-player';
+        }
+        return item.Url ? 'url-player' : 'none';
+    }
+    if (item.Url || item.FileID) {
+        return 'iframe-or-img';
+    }
+    return 'none';
+}
+/**
+ * LIVE MEDIA surface (`mj-realtime-media-surface`) — the Media channel tab's pane, rendered with a
+ * TABS layout: a horizontal tab bar (one tab per {@link MediaItem}, type icon + name) over a single
+ * media pane that swaps as you switch tabs. Pure PERCEPTION of the channel's {@link MediaChannelState}:
+ * the agent's `Media_*` tools mutate the state through the channel plugin and this surface re-renders.
+ *
+ * SOURCE-AWARE rendering. Each item is backed by EITHER an external/public {@link MediaItem.Url} or an
+ * MemberJunction {@link MediaItem.FileID} (an `MJ: Files` id, streamed securely + permission-gated):
+ *  - **audio/video + FileID** → `<mj-storage-media-player [FileID] [Provider]>` (real transport/waveform,
+ *    streams over HTTP Range under the session's authenticated provider).
+ *  - **audio/video + Url** → `<mj-media-player [Tracks]>` (the same real player, fed the public URL).
+ *  - **image/pdf/web + FileID** → a streaming URL is resolved via `CreateMediaAccessToken` (through the
+ *    channel's provider) and rendered in the existing img/iframe path; graceful no-access state on failure.
+ *  - **image/pdf/web + Url** → the public URL, rendered unchanged.
+ *
+ * Multi-provider safe: the channel plugin threads the live session's `IMetadataProvider` in via the
+ * `Provider` input ({@link BaseAngularComponent}), and both the storage player and the token mutation
+ * use it ({@link ProviderToUse}) rather than the global default.
+ */
+export class RealtimeMediaSurfaceComponent extends BaseAngularComponent {
+    /** The shared media state engine (set by the channel's BindSurface before first CD). */
+    set State(value) {
+        if (value === this._state) {
+            return;
+        }
+        this._state = value;
+        this.resubscribe();
+    }
+    get State() {
+        return this._state;
+    }
+    _state = null;
+    /** Display name of the agent fronting the session — used in the empty-state copy. */
+    AgentName = 'The agent';
+    /** The current image zoom multiplier (cycled by the zoom button; image panes only). */
+    ImageZoom = 1;
+    /** Sanitized URL cache for `web` / `pdf` iframes (Angular blocks raw resource URLs in `[src]`). */
+    safeUrlCache = new Map();
+    /** The id of the item whose play we last actioned, so a re-render doesn't replay it. */
+    lastPlayedStamp = new Map();
+    /**
+     * Resolution status for FileID-backed image/pdf/web items, keyed by item id. Audio/video FileID items
+     * resolve inside `mj-storage-media-player` and never enter this map.
+     */
+    fileResolveByItem = new Map();
+    mediaPane;
+    cdr = inject(ChangeDetectorRef);
+    sanitizer = inject(DomSanitizer);
+    stateSub = null;
+    ngOnInit() {
+        this.resubscribe();
+    }
+    ngOnDestroy() {
+        this.stateSub?.unsubscribe();
+        this.stateSub = null;
+    }
+    /** The items currently on the surface (empty when no state is bound). */
+    get Items() {
+        return this._state?.Items ?? [];
+    }
+    /** The active item, or `null` when the surface is empty. */
+    get ActiveItem() {
+        return this._state?.ActiveItem ?? null;
+    }
+    /** Whether the active id matches `item` (drives the active tab + pane). */
+    IsActive(item) {
+        return this._state?.ActiveItemId === item.Id;
+    }
+    // ---------------------------------------------------------------------------
+    // Source routing — which render path an item uses
+    // ---------------------------------------------------------------------------
+    /** Whether `item` is rendered by the real media player (audio/video). */
+    IsPlayerItem(item) {
+        return IsPlayerMediaType(item);
+    }
+    /** Whether `item` is an audio/video item backed by an MJStorage FileID → `mj-storage-media-player`. */
+    UsesStoragePlayer(item) {
+        return RouteForMediaItem(item) === 'storage-player';
+    }
+    /** Whether `item` is an audio/video item backed by a public URL → `mj-media-player`. */
+    UsesUrlPlayer(item) {
+        return RouteForMediaItem(item) === 'url-player';
+    }
+    /** The single-track payload for the URL-backed `mj-media-player` (audio/video). */
+    TracksFor(item) {
+        if (!item.Url) {
+            return [];
+        }
+        return [{ Id: item.Id, Kind: item.Type === 'video' ? 'video' : 'audio', Url: item.Url }];
+    }
+    /**
+     * The render URL for an IMG/IFRAME (image/pdf/web) item: its public {@link MediaItem.Url}, or — for a
+     * FileID-backed item — the resolved streaming URL once minted (`null` while loading / on no-access).
+     */
+    RenderUrl(item) {
+        if (item.Url) {
+            return item.Url;
+        }
+        if (item.FileID) {
+            const state = this.fileResolveByItem.get(item.Id);
+            return state?.Status === 'ready' ? state.Url : null;
+        }
+        return null;
+    }
+    /** Whether a FileID-backed image/pdf/web item is still resolving its streaming URL. */
+    IsResolving(item) {
+        return !item.Url && !!item.FileID && this.fileResolveByItem.get(item.Id)?.Status === 'loading';
+    }
+    /** The no-access / load-failure message for a FileID-backed image/pdf/web item, or `null`. */
+    ResolveError(item) {
+        if (item.Url || !item.FileID) {
+            return null;
+        }
+        const state = this.fileResolveByItem.get(item.Id);
+        return state?.Status === 'error' ? state.Message : null;
+    }
+    /** Switches the active tab to `item`. */
+    SelectTab(item) {
+        this._state?.SetActive(item.Id);
+    }
+    /** Keyboard handler for the tab buttons — Enter/Space activate, arrows move between tabs. */
+    OnTabKeydown(event, index) {
+        const items = this.Items;
+        if (items.length === 0) {
+            return;
+        }
+        if (event.key === 'ArrowRight' || event.key === 'ArrowLeft') {
+            event.preventDefault();
+            const delta = event.key === 'ArrowRight' ? 1 : -1;
+            const next = (index + delta + items.length) % items.length;
+            this._state?.SetActive(items[next].Id);
+            this.focusTabButton(next);
+        }
+    }
+    /** Closes one media item (removes its tab + pane). */
+    CloseItem(event, item) {
+        event.stopPropagation();
+        this.fileResolveByItem.delete(item.Id);
+        this._state?.RemoveItem(item.Id);
+    }
+    /** Whether the open-in-tab / download toolbar buttons are available for `item` (need a usable URL). */
+    CanOpenOrDownload(item) {
+        return !!this.RenderUrl(item);
+    }
+    /** Opens the active media in a new browser tab (its public or resolved streaming URL). */
+    OpenInNew(item) {
+        const url = this.RenderUrl(item);
+        if (url) {
+            window.open(url, '_blank', 'noopener,noreferrer');
+        }
+    }
+    /** Triggers a browser download of the active media via a transient anchor (public or resolved URL). */
+    Download(item) {
+        const url = this.RenderUrl(item);
+        if (!url) {
+            return;
+        }
+        const anchor = document.createElement('a');
+        anchor.href = url;
+        anchor.download = item.DisplayName || '';
+        anchor.target = '_blank';
+        anchor.rel = 'noopener noreferrer';
+        anchor.click();
+    }
+    /** Cycles the image zoom multiplier through {@link IMAGE_ZOOM_LEVELS}. */
+    CycleZoom() {
+        const idx = IMAGE_ZOOM_LEVELS.indexOf(this.ImageZoom);
+        this.ImageZoom = IMAGE_ZOOM_LEVELS[(idx + 1) % IMAGE_ZOOM_LEVELS.length];
+    }
+    /** The Font Awesome icon class for a media type's tab. */
+    IconFor(type) {
+        switch (type) {
+            case 'image':
+                return 'fa-solid fa-image';
+            case 'video':
+                return 'fa-solid fa-film';
+            case 'audio':
+                return 'fa-solid fa-music';
+            case 'pdf':
+                return 'fa-solid fa-file-pdf';
+            case 'web':
+                return 'fa-solid fa-globe';
+            default:
+                return 'fa-solid fa-file';
+        }
+    }
+    /** A memoized sanitized resource URL for iframe-rendered media (web / pdf). */
+    SafeUrl(url) {
+        let cached = this.safeUrlCache.get(url);
+        if (!cached) {
+            cached = this.sanitizer.bypassSecurityTrustResourceUrl(url);
+            this.safeUrlCache.set(url, cached);
+        }
+        return cached;
+    }
+    /** Inline style for the fractional highlight rectangle (percentages of the pane box). */
+    HighlightStyle(item) {
+        const h = item.Highlight;
+        if (!h) {
+            return null;
+        }
+        const pct = (v) => `${Math.max(0, Math.min(1, v)) * 100}%`;
+        return { left: pct(h.X), top: pct(h.Y), width: pct(h.W), height: pct(h.H) };
+    }
+    /** Stable `@for` track for tab/pane diffing. */
+    TrackById(_index, item) {
+        return item.Id;
+    }
+    /** Re-subscribes the state's Changed$ stream (called on state input change + ngOnInit). */
+    resubscribe() {
+        this.stateSub?.unsubscribe();
+        this.stateSub = null;
+        if (!this._state) {
+            this.cdr.markForCheck();
+            return;
+        }
+        this.stateSub = this._state.Changed$.subscribe(() => {
+            this.resolvePendingFileUrls();
+            this.applyPendingPlay();
+            this.cdr.markForCheck();
+        });
+    }
+    /**
+     * Mints streaming URLs for any FileID-backed image/pdf/web items not yet resolved (audio/video FileID
+     * items resolve inside the storage player, so they're skipped). Idempotent — each item is resolved
+     * once; a `loading`/`ready`/`error` entry guards against re-firing on every state change.
+     */
+    resolvePendingFileUrls() {
+        for (const item of this.Items) {
+            if (item.Url || !item.FileID || this.IsPlayerItem(item)) {
+                continue;
+            }
+            if (this.fileResolveByItem.has(item.Id)) {
+                continue;
+            }
+            this.fileResolveByItem.set(item.Id, { Status: 'loading' });
+            void this.resolveFileUrl(item.Id, item.FileID);
+        }
+    }
+    /** Resolves one file id to a secure streaming URL via the channel's provider, then re-renders. */
+    async resolveFileUrl(itemId, fileId) {
+        const result = await this.mintAccessToken(fileId);
+        if (result && result.Success && result.Url) {
+            this.fileResolveByItem.set(itemId, { Status: 'ready', Url: result.Url });
+        }
+        else {
+            this.fileResolveByItem.set(itemId, {
+                Status: 'error',
+                Message: result?.ErrorMessage || "This media couldn't be loaded, or you don't have access to it.",
+            });
+        }
+        this.cdr.markForCheck();
+    }
+    /** Mints an authenticated streaming-URL token for one file id via the active provider. */
+    async mintAccessToken(fileId) {
+        try {
+            const provider = this.ProviderToUse;
+            const data = await provider.ExecuteGQL(CREATE_MEDIA_ACCESS_TOKEN_MUTATION, { fileId });
+            const payload = data?.CreateMediaAccessToken;
+            return payload ?? null;
+        }
+        catch (err) {
+            LogError(`CreateMediaAccessToken failed for file '${fileId}': ${err instanceof Error ? err.message : String(err)}`);
+            return { Success: false, ErrorMessage: 'Unable to load this media.' };
+        }
+    }
+    /**
+     * Honors a pending {@link MediaItem.PlayRequestedAt} stamp on the active video/audio element by
+     * calling `.play()` once per new stamp (so a routine re-render never replays the media). Only applies
+     * to the URL-backed `<mj-media-player>` / raw-element panes; the storage player owns its own autoplay.
+     */
+    applyPendingPlay() {
+        const item = this.ActiveItem;
+        if (!item || item.PlayRequestedAt == null || (item.Type !== 'video' && item.Type !== 'audio')) {
+            return;
+        }
+        if (this.lastPlayedStamp.get(item.Id) === item.PlayRequestedAt) {
+            return;
+        }
+        this.lastPlayedStamp.set(item.Id, item.PlayRequestedAt);
+        // The pane re-renders this CD pass; defer the play to the next microtask so the element exists.
+        queueMicrotask(() => {
+            const el = this.mediaPane?.nativeElement.querySelector('video, audio');
+            void el?.play().catch(() => undefined);
+        });
+    }
+    /** Moves keyboard focus to the tab button at `index` (arrow-key navigation). */
+    focusTabButton(index) {
+        queueMicrotask(() => {
+            const host = this.mediaPane?.nativeElement.parentElement;
+            const buttons = host?.querySelectorAll('.media-tab');
+            buttons?.[index]?.focus();
+        });
+    }
+    static ɵfac = /*@__PURE__*/ (() => { let ɵRealtimeMediaSurfaceComponent_BaseFactory; return function RealtimeMediaSurfaceComponent_Factory(__ngFactoryType__) { return (ɵRealtimeMediaSurfaceComponent_BaseFactory || (ɵRealtimeMediaSurfaceComponent_BaseFactory = i0.ɵɵgetInheritedFactory(RealtimeMediaSurfaceComponent)))(__ngFactoryType__ || RealtimeMediaSurfaceComponent); }; })();
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: RealtimeMediaSurfaceComponent, selectors: [["mj-realtime-media-surface"]], viewQuery: function RealtimeMediaSurfaceComponent_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuery(_c0, 5);
+        } if (rf & 2) {
+            let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.mediaPane = _t.first);
+        } }, inputs: { State: "State", AgentName: "AgentName" }, features: [i0.ɵɵInheritDefinitionFeature], decls: 3, vars: 1, consts: [["mediaPane", ""], [1, "media-surface"], [1, "media-empty"], ["aria-hidden", "true", 1, "fa-solid", "fa-images", "media-empty__icon"], [1, "media-empty__title"], [1, "media-empty__hint"], ["role", "tablist", "aria-label", "Shared media", 1, "media-tabs"], ["type", "button", "role", "tab", 1, "media-tab", 3, "media-tab--active", "title"], ["type", "button", "role", "tab", 1, "media-tab", 3, "click", "keydown", "title"], ["aria-hidden", "true", 1, "media-tab__icon", 3, "ngClass"], [1, "media-tab__name"], ["role", "button", "tabindex", "0", 1, "media-tab__close", 3, "click", "keydown.enter", "keydown.space"], ["aria-hidden", "true", 1, "fa-solid", "fa-xmark"], [1, "media-toolbar"], [1, "media-toolbar__title", 3, "title"], [1, "media-toolbar__spacer"], ["type", "button", "title", "Zoom", 1, "media-iconbtn"], [1, "media-pane"], [1, "media-stage"], [1, "media-player", 3, "FileID", "Provider"], [1, "media-player", 3, "Tracks"], [1, "media-status"], [1, "media-status", "media-status--error"], ["aria-hidden", "true", 1, "media-highlight", 3, "ngStyle"], [1, "media-caption"], ["type", "button", "title", "Zoom", 1, "media-iconbtn", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-magnifying-glass-plus"], [1, "media-iconbtn__badge"], ["type", "button", "aria-label", "Download media", "title", "Download", 1, "media-iconbtn", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-download"], ["type", "button", "aria-label", "Open media in a new tab", "title", "Open in new tab", 1, "media-iconbtn", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-arrow-up-right-from-square"], ["aria-hidden", "true", 1, "fa-solid", "fa-spinner", "fa-spin", "media-status__icon"], [1, "media-status__text"], ["aria-hidden", "true", 1, "fa-solid", "fa-triangle-exclamation", "media-status__icon"], [1, "media-image", 3, "src", "transform", "alt"], [1, "media-frame", 3, "src", "title"], ["sandbox", "allow-scripts allow-same-origin allow-forms allow-popups", "referrerpolicy", "no-referrer", 1, "media-frame", 3, "src", "title"], [1, "media-image", 3, "src", "alt"], [1, "media-highlight__label"]], template: function RealtimeMediaSurfaceComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 1);
+            i0.ɵɵconditionalCreate(1, RealtimeMediaSurfaceComponent_Conditional_1_Template, 6, 1, "div", 2)(2, RealtimeMediaSurfaceComponent_Conditional_2_Template, 4, 1);
+            i0.ɵɵelementEnd();
+        } if (rf & 2) {
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.Items.length === 0 ? 1 : 2);
+        } }, dependencies: [CommonModule, i1.NgClass, i1.NgStyle, MJMediaPlayerComponent, MJStorageMediaPlayerComponent], styles: ["[_nghost-%COMP%] {\n  display: block;\n  height: 100%;\n}\n\n.media-surface[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-height: 0;\n  background: var(--mj-bg-surface-sunken);\n}\n\n\n\n.media-empty[_ngcontent-%COMP%] {\n  flex: 1 1 auto;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  padding: 24px;\n  text-align: center;\n  color: var(--mj-text-muted);\n\n  &__icon {\n    font-size: 2.5rem;\n    color: var(--mj-text-disabled);\n    margin-bottom: 4px;\n  }\n\n  &__title {\n    margin: 0;\n    font-size: 0.9375rem;\n    font-weight: 600;\n    color: var(--mj-text-secondary);\n  }\n\n  &__hint {\n    margin: 0;\n    font-size: 0.8125rem;\n    max-width: 32ch;\n  }\n}\n\n\n\n.media-tabs[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: stretch;\n  gap: 4px;\n  flex: 0 0 auto;\n  padding: 6px 8px 0;\n  overflow-x: auto;\n  border-bottom: 1px solid var(--mj-border-subtle);\n  background: var(--mj-bg-surface);\n  scrollbar-width: thin;\n}\n\n.media-tab[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  flex: 0 0 auto;\n  max-width: 220px;\n  padding: 7px 8px 7px 10px;\n  border: 1px solid transparent;\n  border-bottom: none;\n  border-top-left-radius: var(--mj-radius-md, 6px);\n  border-top-right-radius: var(--mj-radius-md, 6px);\n  background: transparent;\n  color: var(--mj-text-secondary);\n  font-size: 0.8125rem;\n  font-weight: 500;\n  cursor: pointer;\n  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;\n\n  &:hover {\n    background: var(--mj-bg-surface-hover);\n    color: var(--mj-text-primary);\n  }\n\n  &:focus-visible {\n    outline: none;\n    border-color: var(--mj-border-focus);\n    box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n  }\n\n  &--active {\n    background: var(--mj-bg-surface-card);\n    color: var(--mj-text-primary);\n    border-color: var(--mj-border-default);\n    box-shadow: inset 0 2px 0 var(--mj-brand-primary);\n  }\n\n  &__icon {\n    flex: 0 0 auto;\n    font-size: 0.8125rem;\n    color: var(--mj-brand-primary);\n  }\n\n  &__name {\n    flex: 1 1 auto;\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  &__close {\n    flex: 0 0 auto;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 18px;\n    height: 18px;\n    border-radius: var(--mj-radius-sm, 4px);\n    color: var(--mj-text-muted);\n    cursor: pointer;\n    font-size: 0.6875rem;\n\n    &:hover {\n      background: color-mix(in srgb, var(--mj-status-error) 14%, transparent);\n      color: var(--mj-status-error);\n    }\n\n    &:focus-visible {\n      outline: none;\n      box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n    }\n  }\n}\n\n\n\n.media-toolbar[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  flex: 0 0 auto;\n  padding: 6px 10px;\n  border-bottom: 1px solid var(--mj-border-subtle);\n  background: var(--mj-bg-surface);\n\n  &__title {\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    font-size: 0.8125rem;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n  }\n\n  &__spacer {\n    flex: 1 1 auto;\n  }\n}\n\n.media-iconbtn[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  height: 28px;\n  padding: 0 8px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md, 6px);\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  font-size: 0.8125rem;\n  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;\n\n  &:hover {\n    background: var(--mj-bg-surface-hover);\n    color: var(--mj-text-primary);\n  }\n\n  &:focus-visible {\n    outline: none;\n    border-color: var(--mj-border-focus);\n    box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n  }\n\n  &__badge {\n    font-size: 0.6875rem;\n    font-weight: 600;\n    color: var(--mj-brand-primary);\n  }\n}\n\n\n\n.media-pane[_ngcontent-%COMP%] {\n  flex: 1 1 auto;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n  padding: 12px;\n  gap: 8px;\n}\n\n.media-stage[_ngcontent-%COMP%] {\n  position: relative;\n  flex: 1 1 auto;\n  min-height: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md, 6px);\n  background: var(--mj-bg-surface);\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);\n\n  &--scroll {\n    overflow: auto;\n  }\n}\n\n.media-image[_ngcontent-%COMP%] {\n  max-width: 100%;\n  max-height: 100%;\n  object-fit: contain;\n  transform-origin: center center;\n  transition: transform 0.18s ease;\n}\n\n.media-video[_ngcontent-%COMP%] {\n  max-width: 100%;\n  max-height: 100%;\n  background: var(--mj-color-neutral-950, #000);\n  border-radius: var(--mj-radius-sm, 4px);\n}\n\n.media-audio-wrap[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 16px;\n  width: 100%;\n  padding: 24px;\n\n  &__icon {\n    font-size: 3rem;\n    color: color-mix(in srgb, var(--mj-brand-primary) 70%, var(--mj-text-muted));\n  }\n}\n\n.media-audio[_ngcontent-%COMP%] {\n  width: 100%;\n  max-width: 480px;\n}\n\n.media-frame[_ngcontent-%COMP%] {\n  width: 100%;\n  height: 100%;\n  border: none;\n  background: var(--mj-bg-surface);\n}\n\n\n\n.media-player[_ngcontent-%COMP%] {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n\n\n\n.media-status[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 12px;\n  padding: 24px;\n  text-align: center;\n  color: var(--mj-text-secondary);\n\n  &__icon {\n    font-size: 2rem;\n    color: var(--mj-text-muted);\n  }\n\n  &__text {\n    margin: 0;\n    font-size: 0.9rem;\n  }\n\n  &--error {\n    color: var(--mj-status-error-text);\n\n    .media-status__icon {\n      color: var(--mj-status-error);\n    }\n  }\n}\n\n\n\n.media-highlight[_ngcontent-%COMP%] {\n  position: absolute;\n  border: 2px solid var(--mj-brand-primary);\n  border-radius: var(--mj-radius-sm, 4px);\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n  box-shadow: 0 0 0 9999px color-mix(in srgb, var(--mj-text-primary) 18%, transparent);\n  pointer-events: none;\n  animation: _ngcontent-%COMP%_media-highlight-in 0.2s ease;\n\n  &__label {\n    position: absolute;\n    top: -1.5em;\n    left: -2px;\n    padding: 1px 6px;\n    border-radius: var(--mj-radius-sm, 4px);\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n    font-size: 0.6875rem;\n    font-weight: 600;\n    white-space: nowrap;\n  }\n}\n\n.media-caption[_ngcontent-%COMP%] {\n  flex: 0 0 auto;\n  margin: 0;\n  font-size: 0.8125rem;\n  color: var(--mj-text-secondary);\n  text-align: center;\n}\n\n@keyframes _ngcontent-%COMP%_media-highlight-in {\n  from {\n    opacity: 0;\n    transform: scale(1.04);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .media-image[_ngcontent-%COMP%], \n   .media-tab[_ngcontent-%COMP%], \n   .media-iconbtn[_ngcontent-%COMP%] {\n    transition: none;\n  }\n\n  .media-highlight[_ngcontent-%COMP%] {\n    animation: none;\n  }\n}"], changeDetection: 0 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(RealtimeMediaSurfaceComponent, [{
+        type: Component,
+        args: [{ standalone: true, selector: 'mj-realtime-media-surface', imports: [CommonModule, MJMediaPlayerComponent, MJStorageMediaPlayerComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"media-surface\">\n  @if (Items.length === 0) {\n    <div class=\"media-empty\">\n      <i class=\"fa-solid fa-images media-empty__icon\" aria-hidden=\"true\"></i>\n      <p class=\"media-empty__title\">No media yet</p>\n      <p class=\"media-empty__hint\">{{ AgentName }} will share visuals here during the conversation.</p>\n    </div>\n  } @else {\n    <!-- Tab bar: one tab per media item (the chosen \"Tabs\" layout \u2014 one pane, switch via tabs). -->\n    <div class=\"media-tabs\" role=\"tablist\" aria-label=\"Shared media\">\n      @for (item of Items; track TrackById($index, item); let i = $index) {\n        <button\n          type=\"button\"\n          class=\"media-tab\"\n          role=\"tab\"\n          [class.media-tab--active]=\"IsActive(item)\"\n          [attr.aria-selected]=\"IsActive(item)\"\n          [attr.tabindex]=\"IsActive(item) ? 0 : -1\"\n          [title]=\"item.DisplayName\"\n          (click)=\"SelectTab(item)\"\n          (keydown)=\"OnTabKeydown($event, i)\"\n        >\n          <i class=\"media-tab__icon\" [ngClass]=\"IconFor(item.Type)\" aria-hidden=\"true\"></i>\n          <span class=\"media-tab__name\">{{ item.DisplayName }}</span>\n          <span\n            class=\"media-tab__close\"\n            role=\"button\"\n            tabindex=\"0\"\n            [attr.aria-label]=\"'Close ' + item.DisplayName\"\n            (click)=\"CloseItem($event, item)\"\n            (keydown.enter)=\"CloseItem($event, item)\"\n            (keydown.space)=\"CloseItem($event, item)\"\n          >\n            <i class=\"fa-solid fa-xmark\" aria-hidden=\"true\"></i>\n          </span>\n        </button>\n      }\n    </div>\n\n    @if (ActiveItem; as active) {\n      <!-- Pane toolbar: per-type controls (open / download / zoom). -->\n      <div class=\"media-toolbar\">\n        <span class=\"media-toolbar__title\" [title]=\"active.DisplayName\">{{ active.DisplayName }}</span>\n        <span class=\"media-toolbar__spacer\"></span>\n        @if (active.Type === 'image') {\n          <button\n            type=\"button\"\n            class=\"media-iconbtn\"\n            [attr.aria-label]=\"'Zoom image (currently ' + ImageZoom + 'x)'\"\n            title=\"Zoom\"\n            (click)=\"CycleZoom()\"\n          >\n            <i class=\"fa-solid fa-magnifying-glass-plus\" aria-hidden=\"true\"></i>\n            <span class=\"media-iconbtn__badge\">{{ ImageZoom }}\u00D7</span>\n          </button>\n        }\n        @if (CanOpenOrDownload(active)) {\n          <button\n            type=\"button\"\n            class=\"media-iconbtn\"\n            aria-label=\"Download media\"\n            title=\"Download\"\n            (click)=\"Download(active)\"\n          >\n            <i class=\"fa-solid fa-download\" aria-hidden=\"true\"></i>\n          </button>\n          <button\n            type=\"button\"\n            class=\"media-iconbtn\"\n            aria-label=\"Open media in a new tab\"\n            title=\"Open in new tab\"\n            (click)=\"OpenInNew(active)\"\n          >\n            <i class=\"fa-solid fa-arrow-up-right-from-square\" aria-hidden=\"true\"></i>\n          </button>\n        }\n      </div>\n\n      <!-- The single media pane (swaps as tabs switch). The highlight overlay sits on top. -->\n      <div class=\"media-pane\" #mediaPane>\n        <div class=\"media-stage\" [class.media-stage--scroll]=\"active.Type === 'image' && ImageZoom > 1\">\n          @if (UsesStoragePlayer(active)) {\n            <!-- Audio/video backed by an MJStorage file: secure, permission-gated streaming player. -->\n            <mj-storage-media-player\n              class=\"media-player\"\n              [FileID]=\"active.FileID ?? null\"\n              [Provider]=\"Provider\"\n            ></mj-storage-media-player>\n          } @else if (UsesUrlPlayer(active)) {\n            <!-- Audio/video from a public URL: the real media player (waveform/transport). -->\n            <mj-media-player class=\"media-player\" [Tracks]=\"TracksFor(active)\"></mj-media-player>\n          } @else if (IsResolving(active)) {\n            <div class=\"media-status\">\n              <i class=\"fa-solid fa-spinner fa-spin media-status__icon\" aria-hidden=\"true\"></i>\n              <p class=\"media-status__text\">Loading secure media\u2026</p>\n            </div>\n          } @else if (ResolveError(active); as err) {\n            <div class=\"media-status media-status--error\">\n              <i class=\"fa-solid fa-triangle-exclamation media-status__icon\" aria-hidden=\"true\"></i>\n              <p class=\"media-status__text\">{{ err }}</p>\n            </div>\n          } @else if (RenderUrl(active); as renderUrl) {\n            @switch (active.Type) {\n              @case ('image') {\n                <img\n                  class=\"media-image\"\n                  [src]=\"renderUrl\"\n                  [style.transform]=\"'scale(' + ImageZoom + ')'\"\n                  [alt]=\"active.DisplayName\"\n                />\n              }\n              @case ('pdf') {\n                <iframe\n                  class=\"media-frame\"\n                  [src]=\"SafeUrl(renderUrl)\"\n                  [title]=\"active.DisplayName\"\n                ></iframe>\n              }\n              @case ('web') {\n                <iframe\n                  class=\"media-frame\"\n                  [src]=\"SafeUrl(renderUrl)\"\n                  [title]=\"active.DisplayName\"\n                  sandbox=\"allow-scripts allow-same-origin allow-forms allow-popups\"\n                  referrerpolicy=\"no-referrer\"\n                ></iframe>\n              }\n            }\n          }\n\n          @if (HighlightStyle(active); as hs) {\n            <div class=\"media-highlight\" [ngStyle]=\"hs\" aria-hidden=\"true\">\n              @if (active.Highlight?.Label) {\n                <span class=\"media-highlight__label\">{{ active.Highlight?.Label }}</span>\n              }\n            </div>\n          }\n        </div>\n\n        @if (active.Caption) {\n          <p class=\"media-caption\">{{ active.Caption }}</p>\n        }\n      </div>\n    }\n  }\n</div>\n", styles: [":host {\n  display: block;\n  height: 100%;\n}\n\n.media-surface {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-height: 0;\n  background: var(--mj-bg-surface-sunken);\n}\n\n/* ---------- Empty state ---------- */\n.media-empty {\n  flex: 1 1 auto;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  padding: 24px;\n  text-align: center;\n  color: var(--mj-text-muted);\n\n  &__icon {\n    font-size: 2.5rem;\n    color: var(--mj-text-disabled);\n    margin-bottom: 4px;\n  }\n\n  &__title {\n    margin: 0;\n    font-size: 0.9375rem;\n    font-weight: 600;\n    color: var(--mj-text-secondary);\n  }\n\n  &__hint {\n    margin: 0;\n    font-size: 0.8125rem;\n    max-width: 32ch;\n  }\n}\n\n/* ---------- Tab bar ---------- */\n.media-tabs {\n  display: flex;\n  align-items: stretch;\n  gap: 4px;\n  flex: 0 0 auto;\n  padding: 6px 8px 0;\n  overflow-x: auto;\n  border-bottom: 1px solid var(--mj-border-subtle);\n  background: var(--mj-bg-surface);\n  scrollbar-width: thin;\n}\n\n.media-tab {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  flex: 0 0 auto;\n  max-width: 220px;\n  padding: 7px 8px 7px 10px;\n  border: 1px solid transparent;\n  border-bottom: none;\n  border-top-left-radius: var(--mj-radius-md, 6px);\n  border-top-right-radius: var(--mj-radius-md, 6px);\n  background: transparent;\n  color: var(--mj-text-secondary);\n  font-size: 0.8125rem;\n  font-weight: 500;\n  cursor: pointer;\n  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;\n\n  &:hover {\n    background: var(--mj-bg-surface-hover);\n    color: var(--mj-text-primary);\n  }\n\n  &:focus-visible {\n    outline: none;\n    border-color: var(--mj-border-focus);\n    box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n  }\n\n  &--active {\n    background: var(--mj-bg-surface-card);\n    color: var(--mj-text-primary);\n    border-color: var(--mj-border-default);\n    box-shadow: inset 0 2px 0 var(--mj-brand-primary);\n  }\n\n  &__icon {\n    flex: 0 0 auto;\n    font-size: 0.8125rem;\n    color: var(--mj-brand-primary);\n  }\n\n  &__name {\n    flex: 1 1 auto;\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  &__close {\n    flex: 0 0 auto;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 18px;\n    height: 18px;\n    border-radius: var(--mj-radius-sm, 4px);\n    color: var(--mj-text-muted);\n    cursor: pointer;\n    font-size: 0.6875rem;\n\n    &:hover {\n      background: color-mix(in srgb, var(--mj-status-error) 14%, transparent);\n      color: var(--mj-status-error);\n    }\n\n    &:focus-visible {\n      outline: none;\n      box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n    }\n  }\n}\n\n/* ---------- Pane toolbar ---------- */\n.media-toolbar {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  flex: 0 0 auto;\n  padding: 6px 10px;\n  border-bottom: 1px solid var(--mj-border-subtle);\n  background: var(--mj-bg-surface);\n\n  &__title {\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    font-size: 0.8125rem;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n  }\n\n  &__spacer {\n    flex: 1 1 auto;\n  }\n}\n\n.media-iconbtn {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  height: 28px;\n  padding: 0 8px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md, 6px);\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  font-size: 0.8125rem;\n  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;\n\n  &:hover {\n    background: var(--mj-bg-surface-hover);\n    color: var(--mj-text-primary);\n  }\n\n  &:focus-visible {\n    outline: none;\n    border-color: var(--mj-border-focus);\n    box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n  }\n\n  &__badge {\n    font-size: 0.6875rem;\n    font-weight: 600;\n    color: var(--mj-brand-primary);\n  }\n}\n\n/* ---------- Media pane ---------- */\n.media-pane {\n  flex: 1 1 auto;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n  padding: 12px;\n  gap: 8px;\n}\n\n.media-stage {\n  position: relative;\n  flex: 1 1 auto;\n  min-height: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md, 6px);\n  background: var(--mj-bg-surface);\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);\n\n  &--scroll {\n    overflow: auto;\n  }\n}\n\n.media-image {\n  max-width: 100%;\n  max-height: 100%;\n  object-fit: contain;\n  transform-origin: center center;\n  transition: transform 0.18s ease;\n}\n\n.media-video {\n  max-width: 100%;\n  max-height: 100%;\n  background: var(--mj-color-neutral-950, #000);\n  border-radius: var(--mj-radius-sm, 4px);\n}\n\n.media-audio-wrap {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 16px;\n  width: 100%;\n  padding: 24px;\n\n  &__icon {\n    font-size: 3rem;\n    color: color-mix(in srgb, var(--mj-brand-primary) 70%, var(--mj-text-muted));\n  }\n}\n\n.media-audio {\n  width: 100%;\n  max-width: 480px;\n}\n\n.media-frame {\n  width: 100%;\n  height: 100%;\n  border: none;\n  background: var(--mj-bg-surface);\n}\n\n/* The real media player (mj-media-player / mj-storage-media-player) fills the stage. */\n.media-player {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n\n/* Loading / no-access status for a FileID-backed image/pdf/web pane awaiting its streaming URL. */\n.media-status {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 12px;\n  padding: 24px;\n  text-align: center;\n  color: var(--mj-text-secondary);\n\n  &__icon {\n    font-size: 2rem;\n    color: var(--mj-text-muted);\n  }\n\n  &__text {\n    margin: 0;\n    font-size: 0.9rem;\n  }\n\n  &--error {\n    color: var(--mj-status-error-text);\n\n    .media-status__icon {\n      color: var(--mj-status-error);\n    }\n  }\n}\n\n/* ---------- Highlight overlay (fractional coords) ---------- */\n.media-highlight {\n  position: absolute;\n  border: 2px solid var(--mj-brand-primary);\n  border-radius: var(--mj-radius-sm, 4px);\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n  box-shadow: 0 0 0 9999px color-mix(in srgb, var(--mj-text-primary) 18%, transparent);\n  pointer-events: none;\n  animation: media-highlight-in 0.2s ease;\n\n  &__label {\n    position: absolute;\n    top: -1.5em;\n    left: -2px;\n    padding: 1px 6px;\n    border-radius: var(--mj-radius-sm, 4px);\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n    font-size: 0.6875rem;\n    font-weight: 600;\n    white-space: nowrap;\n  }\n}\n\n.media-caption {\n  flex: 0 0 auto;\n  margin: 0;\n  font-size: 0.8125rem;\n  color: var(--mj-text-secondary);\n  text-align: center;\n}\n\n@keyframes media-highlight-in {\n  from {\n    opacity: 0;\n    transform: scale(1.04);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .media-image,\n  .media-tab,\n  .media-iconbtn {\n    transition: none;\n  }\n\n  .media-highlight {\n    animation: none;\n  }\n}\n"] }]
+    }], null, { State: [{
+            type: Input
+        }], AgentName: [{
+            type: Input
+        }], mediaPane: [{
+            type: ViewChild,
+            args: ['mediaPane']
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(RealtimeMediaSurfaceComponent, { className: "RealtimeMediaSurfaceComponent", filePath: "src/lib/components/realtime/media/realtime-media-surface.component.ts", lineNumber: 100 }); })();
+//# sourceMappingURL=realtime-media-surface.component.js.map