@vivix-ai/ivi-frontend-sdk 0.2.3 → 0.3.1

package/dist/index.js

@@ -1,5 +1,5 @@
-import { ReceiveConversationItemAddedEvent, ReceiveConversationItemDoneEvent, ReceiveResponseCreatedEvent, IviClient, SessionCreatedEvent, ReceiveSessionEndedEvent, ReceiveSessionStageGetResponseEvent, ReceiveSessionStageUpdatedEvent, ReceiveSessionTrackCreatedEvent, ReceiveSessionTrackDeletedEvent, ReceiveSessionTrackTookEvent, ReceiveSessionTrackCuedEvent, ReceiveSessionTrackNextSetEvent, ReceiveSessionTracksListResponseEvent, ReceiveSessionSourceCreatedEvent, ReceiveSessionSourceReadyEvent, ReceiveSessionSourceFailedEvent, ReceiveSessionSourceDeletedEvent, ReceiveSessionSourcePreloadEvent, ReceiveSessionSourceClearPreloadEvent, ReceiveSessionSourcesListResponseEvent, ReceiveSessionSourcePlaybackCompletedEvent, SessionStreamCreatedEvent, ReceiveSessionStreamStartedEvent, ReceiveSessionStreamEndedEvent, ReceiveSessionStreamFailedEvent, ReceiveSessionStreamDeletedEvent, ReceiveSessionStreamsListResponseEvent, ReceiveConversationListResponseEvent, ReceiveResponseOutputTextDeltaEvent, ReceiveResponseOutputTextDoneEvent, ReceiveResponseOutputAudioTranscriptDeltaEvent, ReceiveResponseOutputAudioTranscriptDoneEvent, ReceiveResponseDoneEvent } from '@vivix/ivi-sdk-ts';
-import { createContext, useState, useEffect, useMemo, useContext, useRef, useCallback } from 'react';
+import { ReceiveConversationItemAddedEvent, ReceiveConversationItemDoneEvent, ReceiveResponseCreatedEvent, IviClient, ReceiveSessionCreatedEvent, ReceiveSessionEndedEvent, ReceiveSessionStageGetResponseEvent, ReceiveSessionStageUpdatedEvent, ReceiveSessionTrackCreatedEvent, ReceiveSessionTrackDeletedEvent, ReceiveSessionTrackTookEvent, ReceiveSessionTrackCuedEvent, ReceiveSessionTrackNextSetEvent, ReceiveSessionTracksListResponseEvent, ReceiveSessionSourceCreatedEvent, ReceiveSessionSourceReadyEvent, ReceiveSessionSourceFailedEvent, ReceiveSessionSourceDeletedEvent, ReceiveSessionSourcePreloadEvent, ReceiveSessionSourceClearPreloadEvent, ReceiveSessionSourcesListResponseEvent, ReceiveSessionSourcePlaybackCompletedEvent, ReceiveSessionStreamCreatedEvent, ReceiveSessionStreamStartedEvent, ReceiveSessionStreamEndedEvent, ReceiveSessionStreamFailedEvent, ReceiveSessionStreamDeletedEvent, ReceiveSessionStreamsListResponseEvent, ReceiveConversationListResponseEvent, ReceiveResponseOutputTextDeltaEvent, ReceiveResponseOutputTextDoneEvent, ReceiveResponseOutputAudioTranscriptDeltaEvent, ReceiveResponseOutputAudioTranscriptDoneEvent, ReceiveResponseDoneEvent } from '@vivix-ai/ivi-sdk-ts';
+import { createContext, useState, useEffect, useMemo, useRef, useContext, useCallback, useId } from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 // src/runtime/runtime-coordinator.ts
@@ -26,7 +26,6 @@ function logIviEventReceived(event) {
     args: [message, event.raw],
     data: event.raw
   });
-  console.log(message, event.raw);
 }
 function logIviStateChange(entity, key, eventType, before, after) {
   if (!didChange(before, after)) {
@@ -45,7 +44,6 @@ function logIviStateChange(entity, key, eventType, before, after) {
     args: [message, data],
     data
   });
-  console.log(message, data);
 }
 function didChange(before, after) {
   if (before === after) return false;
@@ -108,7 +106,7 @@ var SessionEventHandler = class {
     this.callbacks = callbacks;
   }
   handle(event) {
-    if (event instanceof SessionCreatedEvent) {
+    if (event instanceof ReceiveSessionCreatedEvent) {
       const before = this.sessionManager.getSession();
       this.sessionManager.setSession(event.session);
       logIviStateChange("session", null, event.type, before, this.sessionManager.getSession());
@@ -257,7 +255,7 @@ var SourceEventHandler = class {
         const before = this.sourceManager.get(sourceId);
         this.sourceManager.upsertCreated(source);
         this.sourceManager.applyPreload(sourceId, {
-          autoclearAfterPlay: event.autoclearAfterPlay
+          autoclearAfterPlay: event.autoclearAfterPlay ?? true
         });
         logIviStateChange("source", sourceId, event.type, before, this.sourceManager.get(sourceId));
       }
@@ -299,7 +297,7 @@ var StreamEventHandler = class {
     this.callbacks = callbacks;
   }
   handle(event) {
-    if (event instanceof SessionStreamCreatedEvent) {
+    if (event instanceof ReceiveSessionStreamCreatedEvent) {
       const streamId = event.stream.stream_id;
       const before = this.streamManager.getAll().get(streamId);
       this.streamManager.upsertCreated(event.stream);
@@ -360,7 +358,7 @@ var ConversationEventHandler = class {
   handle(event) {
     if (event instanceof ReceiveConversationListResponseEvent) {
       const before = snapshotMap4(this.conversationManager.getAllMap());
-      this.conversationManager.replaceAll(event.items);
+      this.conversationManager.replaceAll(event.items.filter(hasConversationItemId));
       logIviStateChange(
         "conversations(list)",
         null,
@@ -372,6 +370,9 @@ var ConversationEventHandler = class {
       return { handled: true };
     }
     if (event instanceof ReceiveConversationItemAddedEvent) {
+      if (!hasConversationItemId(event.item)) {
+        return { handled: true };
+      }
       const before = this.conversationManager.getAllMap().get(event.item.id);
       this.conversationManager.upsertAdded(event.item);
       logIviStateChange(
@@ -385,6 +386,9 @@ var ConversationEventHandler = class {
       return { handled: true };
     }
     if (event instanceof ReceiveConversationItemDoneEvent) {
+      if (!hasConversationItemId(event.item)) {
+        return { handled: true };
+      }
       const before = this.conversationManager.getAllMap().get(event.item.id);
       this.conversationManager.markDone(event.item);
       logIviStateChange(
@@ -398,6 +402,9 @@ var ConversationEventHandler = class {
       return { handled: true };
     }
     if (event instanceof ReceiveResponseOutputTextDeltaEvent) {
+      if (!event.itemId) {
+        return { handled: true };
+      }
       const before = this.conversationManager.getAllMap().get(event.itemId);
       this.conversationManager.applyTextDelta(event.itemId, event.delta);
       logIviStateChange(
@@ -411,6 +418,9 @@ var ConversationEventHandler = class {
       return { handled: true };
     }
     if (event instanceof ReceiveResponseOutputTextDoneEvent) {
+      if (!event.itemId) {
+        return { handled: true };
+      }
       const before = this.conversationManager.getAllMap().get(event.itemId);
       this.conversationManager.applyTextDone(event.itemId, event.text);
       logIviStateChange(
@@ -424,6 +434,9 @@ var ConversationEventHandler = class {
       return { handled: true };
     }
     if (event instanceof ReceiveResponseOutputAudioTranscriptDeltaEvent) {
+      if (!event.itemId) {
+        return { handled: true };
+      }
       const before = this.conversationManager.getAllMap().get(event.itemId);
       this.conversationManager.applyTranscriptDelta(event.itemId, event.delta);
       logIviStateChange(
@@ -437,6 +450,9 @@ var ConversationEventHandler = class {
       return { handled: true };
     }
     if (event instanceof ReceiveResponseOutputAudioTranscriptDoneEvent) {
+      if (!event.itemId) {
+        return { handled: true };
+      }
       const before = this.conversationManager.getAllMap().get(event.itemId);
       this.conversationManager.applyTranscriptDone(event.itemId, event.transcript);
       logIviStateChange(
@@ -478,6 +494,9 @@ function snapshotMap4(map) {
   });
   return snap;
 }
+function hasConversationItemId(item) {
+  return typeof item.id === "string" && item.id.length > 0;
+}
 
 // src/runtime/managers/session-manager.ts
 var SessionManager = class {
@@ -548,13 +567,13 @@ var TrackManager = class {
     }
     this.patchTrack(trackId, {
       active_source_id: resolvedSourceId,
-      next_source_id: null
+      next_source_id: void 0
     });
   }
   applyTrackCued(trackId, sourceId) {
     this.patchTrack(trackId, {
       active_source_id: sourceId,
-      next_source_id: null
+      next_source_id: void 0
     });
   }
   applyTrackNextSet(trackId, sourceId) {
@@ -1118,7 +1137,7 @@ var TrtcSourceManager = class {
   upsertSource(sourceId, trtc) {
     const existing = this.sessions.get(sourceId);
     if (!existing) {
-      this.log("info", `\u65B0\u5EFA\u4F1A\u8BDD source=${sourceId} room=${trtc.room_id} user=${trtc.user_id}`);
+      this.log("info", `\u65B0\u5EFA\u4F1A\u8BDD source=${sourceId} room=${getTrtcString(trtc, "room_id")} user=${getTrtcString(trtc, "user_id")}`);
       const session2 = this.createSession(sourceId, trtc);
       this.sessions.set(sourceId, session2);
       void this.ensureConnected(session2);
@@ -1127,7 +1146,7 @@ var TrtcSourceManager = class {
     if (isSameTrtcConfig(existing.trtc, trtc)) {
       return;
     }
-    this.log("info", `\u914D\u7F6E\u53D8\u66F4\uFF0C\u91CD\u5EFA\u4F1A\u8BDD source=${sourceId} room=${trtc.room_id}`);
+    this.log("info", `\u914D\u7F6E\u53D8\u66F4\uFF0C\u91CD\u5EFA\u4F1A\u8BDD source=${sourceId} room=${getTrtcString(trtc, "room_id")}`);
     void this.disposeSession(existing);
     const session = this.createSession(sourceId, trtc);
     this.sessions.set(sourceId, session);
@@ -1301,11 +1320,14 @@ var TrtcSourceManager = class {
     session.connectPromise = (async () => {
       const m = await import('trtc-sdk-v5');
       const TRTC = m.default ?? m;
-      const sdkAppId = Number(session.trtc.app_id);
+      const roomId = getTrtcString(session.trtc, "room_id");
+      const userId = getTrtcString(session.trtc, "user_id");
+      const userSig = getTrtcString(session.trtc, "user_sig");
+      const sdkAppId = Number(getTrtcString(session.trtc, "app_id"));
       if (!Number.isFinite(sdkAppId)) {
         throw new Error("TRTC app_id \u5FC5\u987B\u662F\u6570\u5B57\u5B57\u7B26\u4E32\u3002");
       }
-      const isStringRoomId = shouldUseStringRoomId(session.trtc.room_id);
+      const isStringRoomId = shouldUseStringRoomId(roomId);
       const client = TRTC.create();
       const onRemoteVideoAvailable = (event) => {
         this.log("info", `\u8FDC\u7AEF\u89C6\u9891\u53EF\u7528 source=${session.sourceId} userId=${event.userId} streamType=${event.streamType}`);
@@ -1353,21 +1375,21 @@ var TrtcSourceManager = class {
       client.on(TRTC.EVENT.REMOTE_VIDEO_UNAVAILABLE, onRemoteVideoUnavailable);
       client.on(TRTC.EVENT.REMOTE_AUDIO_AVAILABLE, onRemoteAudioAvailable);
       client.on(TRTC.EVENT.REMOTE_AUDIO_UNAVAILABLE, onRemoteAudioUnavailable);
-      this.log("info", `\u6B63\u5728\u8FDB\u623F source=${session.sourceId} room=${session.trtc.room_id} sdkAppId=${sdkAppId} userId=${session.trtc.user_id}`);
+      this.log("info", `\u6B63\u5728\u8FDB\u623F source=${session.sourceId} room=${roomId} sdkAppId=${sdkAppId} userId=${userId}`);
       await client.enterRoom({
         sdkAppId,
-        userId: session.trtc.user_id,
-        userSig: session.trtc.user_sig,
+        userId,
+        userSig,
         scene: TRTC.TYPE.SCENE_LIVE,
         role: TRTC.TYPE.ROLE_AUDIENCE,
         autoReceiveAudio: true,
-        ...isStringRoomId ? { strRoomId: session.trtc.room_id } : { roomId: Number(session.trtc.room_id) }
+        ...isStringRoomId ? { strRoomId: roomId } : { roomId: Number(roomId) }
       });
       session.TRTC = TRTC;
       session.client = client;
       session.status = "connected";
       session.error = void 0;
-      this.log("info", `\u8FDB\u623F\u6210\u529F source=${session.sourceId} room=${session.trtc.room_id}`);
+      this.log("info", `\u8FDB\u623F\u6210\u529F source=${session.sourceId} room=${roomId}`);
       this.emitSnapshot(session.sourceId, {
         status: session.status
       });
@@ -1515,19 +1537,10 @@ var TrtcSourceManager = class {
       args,
       data: extra.length > 0 ? { message, extra } : { message }
     });
-    if (level === "error") {
-      console.error(...args);
-      return;
-    }
-    if (level === "warn") {
-      console.warn(...args);
-      return;
-    }
-    console.log(...args);
   }
 };
 function isRuntimeTrtcSource(source) {
-  return source.status === "ready" && source.playback?.type === "trtc" && Boolean(source.playback.trtc);
+  return source.status === "ready" && source.playback?.type === "trtc" && typeof source.playback.trtc === "object" && source.playback.trtc !== null;
 }
 function isSameTrtcConfig(a, b) {
   return a.app_id === b.app_id && a.user_id === b.user_id && a.user_sig === b.user_sig && a.room_id === b.room_id;
@@ -1539,6 +1552,10 @@ function shouldUseStringRoomId(roomId) {
   const roomNumber = Number(roomId);
   return !Number.isInteger(roomNumber) || roomNumber < 1 || roomNumber > 4294967294;
 }
+function getTrtcString(trtc, key) {
+  const value = trtc[key];
+  return typeof value === "string" ? value : "";
+}
 function buildRemoteVideoKey(userId, streamType) {
   return `${userId}::${streamType}`;
 }
@@ -1577,6 +1594,433 @@ function enforceContainMedia(container) {
   });
 }
 
+// src/runtime/livekit-types.ts
+function isLivekitSourcePlayback(playback) {
+  if (!playback) return false;
+  const candidate = playback;
+  if (candidate.type !== "livekit" || typeof candidate.livekit !== "object" || candidate.livekit === null) {
+    return false;
+  }
+  const livekit = candidate.livekit;
+  return typeof livekit.ws_url === "string" && typeof livekit.token === "string";
+}
+function isReadyLivekitRuntimeSource(source) {
+  if (!source || source.status !== "ready") return false;
+  return isLivekitSourcePlayback(source.playback);
+}
+function isSameLivekitConfig(a, b) {
+  return a.ws_url === b.ws_url && a.token === b.token && a.room === b.room && a.identity === b.identity;
+}
+function describeLivekitRoom(livekit) {
+  return livekit.room ?? livekit.identity ?? "unknown";
+}
+
+// src/runtime/managers/livekit-source-manager.ts
+var TAG2 = "[IVI-LIVEKIT]";
+var LivekitSourceManager = class {
+  constructor(onLog) {
+    this.onLog = onLog;
+    this.sessions = /* @__PURE__ */ new Map();
+    this.listeners = /* @__PURE__ */ new Map();
+  }
+  /**
+   * 与 runtime 当前 sources 对齐：
+   * - 对 ready + livekit 的 source 进行 upsert（必要时建立连接）；
+   * - 清理已不在 runtime 中的会话（释放资源）。
+   */
+  syncRuntimeSources(sources) {
+    const existingIds = new Set(sources.keys());
+    sources.forEach((source, sourceId) => {
+      if (!isReadyLivekitRuntimeSource(source)) {
+        return;
+      }
+      this.upsertSource(sourceId, source.playback.livekit);
+    });
+    this.sessions.forEach((_session, sourceId) => {
+      if (!existingIds.has(sourceId)) {
+        this.removeSource(sourceId);
+      }
+    });
+  }
+  /**
+   * 按 sourceId 注册/更新 LiveKit 配置。
+   * 若 ws_url / token / room / identity 任一发生变化，会先销毁旧会话再按新参数重建连接。
+   */
+  upsertSource(sourceId, livekit) {
+    const existing = this.sessions.get(sourceId);
+    if (!existing) {
+      this.log("info", `\u65B0\u5EFA\u4F1A\u8BDD source=${sourceId} room=${describeLivekitRoom(livekit)}`);
+      const session2 = this.createSession(sourceId, livekit);
+      this.sessions.set(sourceId, session2);
+      void this.ensureConnected(session2);
+      return;
+    }
+    if (isSameLivekitConfig(existing.livekit, livekit)) {
+      return;
+    }
+    this.log("info", `\u914D\u7F6E\u53D8\u66F4\uFF0C\u91CD\u5EFA\u4F1A\u8BDD source=${sourceId} room=${describeLivekitRoom(livekit)}`);
+    void this.disposeSession(existing);
+    const session = this.createSession(sourceId, livekit);
+    this.sessions.set(sourceId, session);
+    void this.ensureConnected(session);
+  }
+  /**
+   * 删除指定 source 的 LiveKit 会话并释放连接资源。
+   */
+  removeSource(sourceId) {
+    const session = this.sessions.get(sourceId);
+    if (!session) {
+      return;
+    }
+    this.log("info", `\u79FB\u9664\u4F1A\u8BDD source=${sourceId}`);
+    this.sessions.delete(sourceId);
+    void this.disposeSession(session);
+    this.emitSnapshot(sourceId, { status: "idle" });
+    this.listeners.delete(sourceId);
+  }
+  reset() {
+    this.log("info", `\u91CD\u7F6E\u5168\u90E8\u4F1A\u8BDD count=${this.sessions.size}`);
+    const sessions = Array.from(this.sessions.values());
+    this.sessions.clear();
+    sessions.forEach((session) => {
+      void this.disposeSession(session);
+    });
+    this.listeners.clear();
+  }
+  subscribe(sourceId, listener) {
+    const set = this.listeners.get(sourceId) ?? /* @__PURE__ */ new Set();
+    set.add(listener);
+    this.listeners.set(sourceId, set);
+    listener(this.getSnapshot(sourceId));
+    return () => {
+      const target = this.listeners.get(sourceId);
+      if (!target) {
+        return;
+      }
+      target.delete(listener);
+      if (target.size === 0) {
+        this.listeners.delete(sourceId);
+      }
+    };
+  }
+  getSnapshot(sourceId) {
+    const session = this.sessions.get(sourceId);
+    if (!session) {
+      return { status: "idle" };
+    }
+    return { status: session.status, error: session.error };
+  }
+  hasRemoteVideoAvailable(sourceId) {
+    const session = this.sessions.get(sourceId);
+    return session?.hasEverReceivedRemoteVideo ?? false;
+  }
+  /**
+   * 等待指定 source 的 LiveKit 会话首次拿到远端视频 track。
+   * - 若已收到过，立即返回 true；
+   * - 若会话被销毁或超时，返回 false。
+   */
+  waitForRemoteVideoAvailable(sourceId, timeoutMs = 3e4) {
+    const session = this.sessions.get(sourceId);
+    if (!session) return Promise.resolve(false);
+    if (session.hasEverReceivedRemoteVideo) return Promise.resolve(true);
+    return new Promise((resolve) => {
+      let settled = false;
+      const timer = setTimeout(() => {
+        if (settled) return;
+        settled = true;
+        const idx = session.remoteVideoWaiters.indexOf(waiter);
+        if (idx >= 0) session.remoteVideoWaiters.splice(idx, 1);
+        resolve(false);
+      }, timeoutMs);
+      const waiter = (available) => {
+        if (settled) return;
+        settled = true;
+        clearTimeout(timer);
+        resolve(available);
+      };
+      session.remoteVideoWaiters.push(waiter);
+    });
+  }
+  /**
+   * 把一个渲染容器绑定到 source 会话：
+   * - 确保已连接；
+   * - 把已订阅的远端 video/audio 回放到该容器；
+   * - 应用初始 muted 策略。
+   */
+  async attachView(sourceId, viewId, container, muted) {
+    const session = this.sessions.get(sourceId);
+    if (!session) {
+      throw new Error(`LiveKit source session not found: ${sourceId}`);
+    }
+    session.views.set(viewId, {
+      container,
+      muted,
+      attachedElements: /* @__PURE__ */ new Map()
+    });
+    await this.ensureConnected(session);
+    const binding = session.views.get(viewId);
+    if (!binding) {
+      return;
+    }
+    this.attachKnownTracksToView(session, binding);
+    this.applyMutedToBinding(binding);
+  }
+  detachView(sourceId, viewId) {
+    const session = this.sessions.get(sourceId);
+    if (!session) {
+      return;
+    }
+    const binding = session.views.get(viewId);
+    if (!binding) {
+      return;
+    }
+    this.detachAllElementsFromView(session, binding);
+    session.views.delete(viewId);
+  }
+  updateViewMuted(sourceId, viewId, muted) {
+    const session = this.sessions.get(sourceId);
+    if (!session) {
+      return;
+    }
+    const binding = session.views.get(viewId);
+    if (!binding) {
+      return;
+    }
+    binding.muted = muted;
+    this.applyMutedToBinding(binding);
+  }
+  createSession(sourceId, livekit) {
+    return {
+      sourceId,
+      livekit,
+      livekitModule: null,
+      room: null,
+      connectPromise: null,
+      views: /* @__PURE__ */ new Map(),
+      remoteTracks: /* @__PURE__ */ new Map(),
+      status: "idle",
+      hasEverReceivedRemoteVideo: false,
+      remoteVideoWaiters: [],
+      detachRoomListeners: () => void 0
+    };
+  }
+  /**
+   * 懒连接：单飞模式下复用同一个 connectPromise；建连后注册远端事件并把已订阅 track 推给 view。
+   */
+  async ensureConnected(session) {
+    if (session.room && session.livekitModule) {
+      return;
+    }
+    if (session.connectPromise) {
+      await session.connectPromise;
+      return;
+    }
+    session.status = "connecting";
+    session.error = void 0;
+    this.emitSnapshot(session.sourceId, { status: session.status });
+    session.connectPromise = (async () => {
+      const livekitModule = await import('livekit-client');
+      const RoomCtor = livekitModule.Room;
+      const RoomEvent = livekitModule.RoomEvent;
+      const TrackKind = livekitModule.Track.Kind;
+      const room = new RoomCtor({
+        adaptiveStream: true,
+        dynacast: true
+      });
+      const onTrackSubscribed = (track, _publication, participant) => {
+        const kind = track.kind === TrackKind.Video ? "video" : track.kind === TrackKind.Audio ? "audio" : null;
+        if (!kind) return;
+        const trackKey = buildRemoteTrackKey(participant.identity, track.sid ?? track.kind);
+        this.log(
+          "info",
+          `\u8BA2\u9605\u8FDC\u7AEF track source=${session.sourceId} participant=${participant.identity} kind=${kind} sid=${track.sid ?? "?"}`
+        );
+        session.remoteTracks.set(trackKey, {
+          track,
+          participantIdentity: participant.identity,
+          kind
+        });
+        if (kind === "video" && !session.hasEverReceivedRemoteVideo) {
+          session.hasEverReceivedRemoteVideo = true;
+          for (const waiter of session.remoteVideoWaiters) {
+            waiter(true);
+          }
+          session.remoteVideoWaiters.length = 0;
+        }
+        session.views.forEach((binding) => {
+          this.attachTrackToView(track, kind, trackKey, binding);
+        });
+      };
+      const onTrackUnsubscribed = (track, _publication, participant) => {
+        const trackKey = buildRemoteTrackKey(participant.identity, track.sid ?? track.kind);
+        this.log(
+          "info",
+          `\u8FDC\u7AEF track \u53D6\u6D88\u8BA2\u9605 source=${session.sourceId} participant=${participant.identity} sid=${track.sid ?? "?"}`
+        );
+        session.remoteTracks.delete(trackKey);
+        session.views.forEach((binding) => {
+          this.detachTrackFromBinding(track, trackKey, binding);
+        });
+      };
+      const onDisconnected = () => {
+        this.log("warn", `Room \u65AD\u5F00 source=${session.sourceId}`);
+      };
+      room.on(RoomEvent.TrackSubscribed, onTrackSubscribed);
+      room.on(RoomEvent.TrackUnsubscribed, onTrackUnsubscribed);
+      room.on(RoomEvent.Disconnected, onDisconnected);
+      session.detachRoomListeners = () => {
+        room.off(RoomEvent.TrackSubscribed, onTrackSubscribed);
+        room.off(RoomEvent.TrackUnsubscribed, onTrackUnsubscribed);
+        room.off(RoomEvent.Disconnected, onDisconnected);
+      };
+      this.log(
+        "info",
+        `\u6B63\u5728\u8FDB\u623F source=${session.sourceId} room=${describeLivekitRoom(session.livekit)} ws=${session.livekit.ws_url}`
+      );
+      await room.connect(session.livekit.ws_url, session.livekit.token);
+      session.room = room;
+      session.livekitModule = livekitModule;
+      session.status = "connected";
+      session.error = void 0;
+      this.log("info", `\u8FDB\u623F\u6210\u529F source=${session.sourceId} room=${describeLivekitRoom(session.livekit)}`);
+      this.emitSnapshot(session.sourceId, { status: session.status });
+    })().catch((error) => {
+      session.status = "error";
+      session.error = error instanceof Error ? error.message : String(error);
+      this.log("error", `\u8FDE\u63A5\u5931\u8D25 source=${session.sourceId} error=${session.error}`);
+      this.emitSnapshot(session.sourceId, {
+        status: session.status,
+        error: session.error
+      });
+      throw error;
+    }).finally(() => {
+      session.connectPromise = null;
+    });
+    await session.connectPromise;
+  }
+  attachKnownTracksToView(session, binding) {
+    session.remoteTracks.forEach((entry, trackKey) => {
+      this.attachTrackToView(entry.track, entry.kind, trackKey, binding);
+    });
+  }
+  attachTrackToView(track, kind, trackKey, binding) {
+    if (binding.attachedElements.has(trackKey)) {
+      return;
+    }
+    let element;
+    try {
+      element = track.attach();
+    } catch (error) {
+      this.log("warn", `attach track \u5931\u8D25 trackKey=${trackKey}`, error);
+      return;
+    }
+    binding.attachedElements.set(trackKey, element);
+    if (kind === "video") {
+      enforceContainMedia2(element);
+    } else {
+      element.style.display = "none";
+    }
+    binding.container.appendChild(element);
+    this.applyMutedToElement(element, binding.muted);
+  }
+  detachTrackFromBinding(track, trackKey, binding) {
+    const element = binding.attachedElements.get(trackKey);
+    if (!element) return;
+    try {
+      track.detach(element);
+    } catch {
+    }
+    if (element.parentElement === binding.container) {
+      binding.container.removeChild(element);
+    }
+    binding.attachedElements.delete(trackKey);
+  }
+  detachAllElementsFromView(session, binding) {
+    binding.attachedElements.forEach((element, trackKey) => {
+      const entry = session.remoteTracks.get(trackKey);
+      if (entry) {
+        try {
+          entry.track.detach(element);
+        } catch {
+        }
+      }
+      if (element.parentElement === binding.container) {
+        binding.container.removeChild(element);
+      }
+    });
+    binding.attachedElements.clear();
+  }
+  applyMutedToBinding(binding) {
+    binding.attachedElements.forEach((element) => {
+      this.applyMutedToElement(element, binding.muted);
+    });
+  }
+  applyMutedToElement(element, muted) {
+    element.muted = muted;
+    if (muted) {
+      element.volume = 0;
+    }
+  }
+  async disposeSession(session) {
+    session.connectPromise = null;
+    session.views.forEach((binding) => {
+      this.detachAllElementsFromView(session, binding);
+    });
+    session.views.clear();
+    session.remoteTracks.clear();
+    for (const waiter of session.remoteVideoWaiters) {
+      waiter(false);
+    }
+    session.remoteVideoWaiters.length = 0;
+    session.hasEverReceivedRemoteVideo = false;
+    session.status = "idle";
+    session.error = void 0;
+    const room = session.room;
+    session.detachRoomListeners();
+    session.detachRoomListeners = () => void 0;
+    session.room = null;
+    session.livekitModule = null;
+    if (!room) {
+      return;
+    }
+    this.log("info", `\u9500\u6BC1\u4F1A\u8BDD source=${session.sourceId}`);
+    try {
+      await room.disconnect();
+      this.log("info", `\u79BB\u5F00\u623F\u95F4\u5B8C\u6210 source=${session.sourceId}`);
+    } catch (err) {
+      this.log("warn", `\u79BB\u5F00\u623F\u95F4\u5F02\u5E38 source=${session.sourceId}`, err);
+    }
+  }
+  emitSnapshot(sourceId, snapshot) {
+    const targetListeners = this.listeners.get(sourceId);
+    if (!targetListeners) {
+      return;
+    }
+    targetListeners.forEach((listener) => listener(snapshot));
+  }
+  log(level, message, ...extra) {
+    const args = [TAG2, message, ...extra];
+    this.onLog?.({
+      level,
+      tag: TAG2,
+      message: `${TAG2} ${message}`,
+      args,
+      data: extra.length > 0 ? { message, extra } : { message }
+    });
+  }
+};
+function buildRemoteTrackKey(identity, trackId) {
+  return `${identity}::${trackId}`;
+}
+function enforceContainMedia2(element) {
+  element.style.setProperty("width", "100%", "important");
+  element.style.setProperty("height", "100%", "important");
+  element.style.setProperty("max-width", "100%", "important");
+  element.style.setProperty("max-height", "100%", "important");
+  element.style.setProperty("object-fit", "contain", "important");
+  element.style.setProperty("display", "block", "important");
+}
+
 // src/runtime/runtime-coordinator.ts
 var IviRuntimeCoordinator = class {
   /**
@@ -1612,6 +2056,7 @@ var IviRuntimeCoordinator = class {
       ...config
     };
     this.trtcSourceManager = new TrtcSourceManager(this.config.onLog);
+    this.livekitSourceManager = new LivekitSourceManager(this.config.onLog);
     this.sessionHandler = new SessionEventHandler(this.sessionManager, {
       onSessionCreated: (event) => this.onSessionCreated(event),
       onSessionEnded: (event) => this.onSessionEnded(event)
@@ -1683,13 +2128,16 @@ var IviRuntimeCoordinator = class {
       this.eventListeners.delete(listener);
     };
   }
+  emitLog(entry) {
+    this.config.onLog?.(entry);
+  }
   /**
    * 编排一次"用户文本输入 -> 触发模型回复"链路。
    *
    * 流程：
    * 1) 发送 conversation.item.create（可指定 itemId）；
    * 2) 等待 conversation.item.added + conversation.item.done；
-   * 3) 发送 response.create（携带 item_reference，可选绑定 stream）；
+   * 3) 发送 response.create（默认不携带 input，使用 IVI 内部上下文；可选显式绑定 item_reference）；
    * 4) 等待 response.created 并结束。
    */
   sendUserTextAndTriggerResponse(options) {
@@ -1711,12 +2159,13 @@ var IviRuntimeCoordinator = class {
         itemId,
         streamId: normalizedStreamId,
         response: options.response,
+        responseInput: options.responseInput ?? "context",
         callbacks: options.callbacks,
         responseRequested: false,
         resolve,
         reject
       });
-      this.client.sendConversationUserText(normalizedText, itemId).catch((error) => {
+      this.client.sendUserText(normalizedText, itemId).catch((error) => {
         this.pendingUserTextToResponseFlows.delete(itemId);
         reject(error instanceof Error ? error : new Error(String(error)));
       });
@@ -1747,6 +2196,10 @@ var IviRuntimeCoordinator = class {
         void this.deferredTrtcTakeCompleteAndTake(resolvedTrackId, track.next_source_id, sourceId, trackId);
         return;
       }
+      if (isVideoPlaybackSource(currentSource) && isLivekitPlaybackSource(nextSource)) {
+        void this.deferredLivekitTakeCompleteAndTake(resolvedTrackId, track.next_source_id, sourceId, trackId);
+        return;
+      }
       this.applyLocalTrackTake(resolvedTrackId);
       this.client.sendSessionSourcePlaybackCompleted(sourceId, trackId);
       this.sendSessionTrackTake(resolvedTrackId);
@@ -1757,6 +2210,9 @@ var IviRuntimeCoordinator = class {
   getTrtcSourceManager() {
     return this.trtcSourceManager;
   }
+  getLivekitSourceManager() {
+    return this.livekitSourceManager;
+  }
   onConnectionChange(connected) {
     if (connected || this.state.status === "idle") {
       return;
@@ -1796,6 +2252,7 @@ var IviRuntimeCoordinator = class {
     this.sourceManager.reset();
     this.streamManager.reset();
     this.trtcSourceManager.reset();
+    this.livekitSourceManager.reset();
     this.conversationManager.reset();
     this.reset();
     const nextStatus = this.config.syncStageOnSessionCreated !== false ? "syncing" : "running";
@@ -1836,6 +2293,7 @@ var IviRuntimeCoordinator = class {
     const nextStage = this.stageManager.getStage();
     this.sourceManager.syncWithTracks(this.trackManager.getAll());
     this.trtcSourceManager.syncRuntimeSources(this.sourceManager.getAll());
+    this.livekitSourceManager.syncRuntimeSources(this.sourceManager.getAll());
     this.setState({
       ...this.state,
       tracks: this.trackManager.getAll(),
@@ -1850,14 +2308,27 @@ var IviRuntimeCoordinator = class {
     this.trackManager.applyTrackTook(trackId);
     this.sourceManager.syncWithTracks(this.trackManager.getAll());
     this.trtcSourceManager.syncRuntimeSources(this.sourceManager.getAll());
+    this.livekitSourceManager.syncRuntimeSources(this.sourceManager.getAll());
     this.setState({
       ...this.state,
       tracks: this.trackManager.getAll(),
       sources: this.sourceManager.getAll()
     });
   }
-  async deferredTrtcTakeCompleteAndTake(trackId, nextSourceId, completedSourceId, completedTrackIdArg) {
-    const remoteVideoAvailable = await this.trtcSourceManager.waitForRemoteVideoAvailable(nextSourceId);
+  async deferredTrtcTakeCompleteAndTake(trackId, nextSourceId, completedSourceId, completedTrackIdArg) {
+    const remoteVideoAvailable = await this.trtcSourceManager.waitForRemoteVideoAvailable(nextSourceId);
+    if (!remoteVideoAvailable) return;
+    if (this.state.status !== "running") return;
+    const currentTrack = this.trackManager.getAll().get(trackId);
+    if (!currentTrack || currentTrack.next_source_id !== nextSourceId) {
+      return;
+    }
+    this.applyLocalTrackTake(trackId);
+    this.client.sendSessionSourcePlaybackCompleted(completedSourceId, completedTrackIdArg);
+    this.sendSessionTrackTake(trackId);
+  }
+  async deferredLivekitTakeCompleteAndTake(trackId, nextSourceId, completedSourceId, completedTrackIdArg) {
+    const remoteVideoAvailable = await this.livekitSourceManager.waitForRemoteVideoAvailable(nextSourceId);
     if (!remoteVideoAvailable) return;
     if (this.state.status !== "running") return;
     const currentTrack = this.trackManager.getAll().get(trackId);
@@ -1878,6 +2349,7 @@ var IviRuntimeCoordinator = class {
   onSourcesChanged(listRefreshed) {
     this.sourceManager.syncWithTracks(this.trackManager.getAll());
     this.trtcSourceManager.syncRuntimeSources(this.sourceManager.getAll());
+    this.livekitSourceManager.syncRuntimeSources(this.sourceManager.getAll());
     this.setState({
       ...this.state,
       sources: this.sourceManager.getAll()
@@ -1920,6 +2392,7 @@ var IviRuntimeCoordinator = class {
     this.sourceManager.reset();
     this.streamManager.reset();
     this.trtcSourceManager.reset();
+    this.livekitSourceManager.reset();
     this.conversationManager.reset();
     this.reset();
     this.setState({
@@ -1958,7 +2431,7 @@ var IviRuntimeCoordinator = class {
       return [];
     }
     const missing = /* @__PURE__ */ new Set();
-    stage.composition.forEach((item) => {
+    (stage.composition ?? []).forEach((item) => {
       if (!hasTrack(item.track_id)) {
         missing.add(item.track_id);
       }
@@ -1993,6 +2466,9 @@ var IviRuntimeCoordinator = class {
   }
   progressUserTextToResponseFlows(event) {
     if (event instanceof ReceiveConversationItemAddedEvent) {
+      if (!event.item.id) {
+        return;
+      }
       const flow = this.pendingUserTextToResponseFlows.get(event.item.id);
       if (!flow) {
         return;
@@ -2003,6 +2479,9 @@ var IviRuntimeCoordinator = class {
       return;
     }
     if (event instanceof ReceiveConversationItemDoneEvent) {
+      if (!event.item.id) {
+        return;
+      }
       const flow = this.pendingUserTextToResponseFlows.get(event.item.id);
       if (!flow) {
         return;
@@ -2038,7 +2517,11 @@ var IviRuntimeCoordinator = class {
       addedEvent: flow.addedEvent,
       doneEvent: flow.doneEvent
     });
-    this.client.sendResponseCreateByItemId(flow.itemId, flow.streamId, flow.response);
+    if (flow.responseInput === "item_reference") {
+      this.client.sendResponseCreateByItemId(flow.itemId, flow.streamId, flow.response);
+    } else {
+      this.client.sendResponseCreate(flow.streamId, flow.response);
+    }
     flow.responseRequested = true;
   }
   buildUserTextItemId() {
@@ -2051,13 +2534,18 @@ var IviRuntimeCoordinator = class {
 function isVideoPlaybackSource(source) {
   if (!source || source.status !== "ready" || !source.playback) return false;
   if (source.playback.type === "trtc") return false;
+  if (isLivekitSourcePlayback(source.playback)) return false;
   if (source.source.asset_type === "image") return false;
-  return Boolean(source.playback.url);
+  return source.playback.type === "url" && Boolean(source.playback.url);
 }
 function isTrtcPlaybackSource(source) {
   if (!source || !source.playback) return false;
   return source.playback.type === "trtc" && Boolean(source.playback.trtc);
 }
+function isLivekitPlaybackSource(source) {
+  if (!source || !source.playback) return false;
+  return isLivekitSourcePlayback(source.playback);
+}
 var IviFrontendSdk = class {
   createClient(config) {
     return new IviClient(config);
@@ -2144,14 +2632,14 @@ function IVIStageView(props) {
 }
 function buildSlotTrackMapFromState(state) {
   const map = /* @__PURE__ */ new Map();
-  state.stage?.composition.forEach((item) => {
+  (state.stage?.composition ?? []).forEach((item) => {
     map.set(item.slot, item.track_id);
   });
   return map;
 }
 function buildSlotBindingsFromState(state) {
   const bindings = [];
-  state.stage?.composition.forEach((item) => {
+  (state.stage?.composition ?? []).forEach((item) => {
     const track = state.tracks.get(item.track_id);
     const sourceId = track?.active_source_id ?? null;
     const source = sourceId ? state.sources.get(sourceId) : void 0;
@@ -2178,12 +2666,18 @@ function loadVolumePreferences() {
       return {
         trtc: clampVolume(parsed.trtc ?? DEFAULT_VOLUME),
         video: clampVolume(parsed.video ?? DEFAULT_VOLUME),
-        hls: clampVolume(parsed.hls ?? DEFAULT_VOLUME)
+        hls: clampVolume(parsed.hls ?? DEFAULT_VOLUME),
+        livekit: clampVolume(parsed.livekit ?? DEFAULT_VOLUME)
       };
     }
   } catch {
   }
-  return { trtc: DEFAULT_VOLUME, video: DEFAULT_VOLUME, hls: DEFAULT_VOLUME };
+  return {
+    trtc: DEFAULT_VOLUME,
+    video: DEFAULT_VOLUME,
+    hls: DEFAULT_VOLUME,
+    livekit: DEFAULT_VOLUME
+  };
 }
 function saveVolumePreferences(prefs) {
   try {
@@ -2441,101 +2935,133 @@ function useApplyVolumeToSlot(containerRef, volume, enabled, activeSourceId) {
     return () => observer.disconnect();
   }, [containerRef, volume, enabled, activeSourceId]);
 }
-function useSubtitleEntries(conversations, maxVisible, dismissAfterMs) {
-  const [visibleIds, setVisibleIds] = useState([]);
-  const timersRef = useRef(/* @__PURE__ */ new Map());
-  const seenRef = useRef(/* @__PURE__ */ new Set());
-  const dismissedRef = useRef(/* @__PURE__ */ new Set());
+function useIviSubtitles(runtime, options = {}) {
+  const roles = options.roles ?? "user";
+  const maxItems = normalizeMaxItems(options.maxItems);
+  const roleKey = Array.isArray(roles) ? roles.join("\0") : roles;
+  const roleSet = useMemo(
+    () => new Set(roleKey.split("\0")),
+    [roleKey]
+  );
+  const [subtitles, setSubtitles] = useState([]);
+  const seenIdsRef = useRef(/* @__PURE__ */ new Set());
   const initializedRef = useRef(false);
   useEffect(() => {
-    const seen = seenRef.current;
-    const dismissed = dismissedRef.current;
-    const timers = timersRef.current;
-    if (!initializedRef.current) {
-      initializedRef.current = true;
-      for (const item of conversations) {
-        if (item.lifecycle === "done" || !(item.text || item.transcript)) {
-          seen.add(item.id);
-          dismissed.add(item.id);
+    seenIdsRef.current = /* @__PURE__ */ new Set();
+    initializedRef.current = false;
+    setSubtitles([]);
+    if (!runtime) {
+      return;
+    }
+    const syncConversations = (conversations) => {
+      const now = Date.now();
+      const seenIds = seenIdsRef.current;
+      if (!initializedRef.current) {
+        initializedRef.current = true;
+        for (const item of conversations) {
+          if (item.lifecycle === "done" || !getDisplayText(item) || !roleSet.has(item.role)) {
+            seenIds.add(item.id);
+          }
         }
       }
-    }
-    const newIds = [];
-    for (const item of conversations) {
-      const displayText = item.text || item.transcript;
-      if (!displayText) continue;
-      if (!seen.has(item.id)) {
-        seen.add(item.id);
-        newIds.push(item.id);
-      }
-      if (item.lifecycle === "done" && !dismissed.has(item.id)) {
-        dismissed.add(item.id);
-        const timer = setTimeout(() => {
-          timers.delete(item.id);
-          setVisibleIds((prev) => prev.filter((id) => id !== item.id));
-        }, dismissAfterMs);
-        timers.set(item.id, timer);
-      }
-    }
-    if (newIds.length > 0) {
-      setVisibleIds((prev) => {
-        const next = [...prev, ...newIds];
-        while (next.length > maxVisible) {
-          const removedId = next.shift();
-          if (timers.has(removedId)) {
-            clearTimeout(timers.get(removedId));
-            timers.delete(removedId);
+      setSubtitles((previous) => {
+        const conversationMap = new Map(conversations.map((item) => [item.id, item]));
+        const nextById = /* @__PURE__ */ new Map();
+        for (const previousItem of previous) {
+          const conversation = conversationMap.get(previousItem.id);
+          if (!conversation || !roleSet.has(conversation.role) || !getDisplayText(conversation)) {
+            continue;
           }
-          dismissed.add(removedId);
+          nextById.set(
+            previousItem.id,
+            buildSubtitleItem(
+              conversation,
+              previousItem.timestamp,
+              hasSubtitleChanged(previousItem, conversation) ? now : previousItem.updatedAt
+            )
+          );
         }
-        return next;
+        for (const conversation of conversations) {
+          if (!roleSet.has(conversation.role) || !getDisplayText(conversation)) {
+            continue;
+          }
+          if (seenIds.has(conversation.id)) {
+            continue;
+          }
+          seenIds.add(conversation.id);
+          nextById.set(conversation.id, buildSubtitleItem(conversation, now, now));
+        }
+        const next = Array.from(nextById.values());
+        if (maxItems === 0) {
+          return [];
+        }
+        return next.length > maxItems ? next.slice(next.length - maxItems) : next;
       });
-    }
-  }, [conversations, maxVisible, dismissAfterMs]);
-  useEffect(() => {
-    const timers = timersRef.current;
-    return () => {
-      timers.forEach((t) => clearTimeout(t));
-      timers.clear();
     };
-  }, []);
-  const conversationMap = useMemo(() => {
-    const map = /* @__PURE__ */ new Map();
-    for (const item of conversations) {
-      map.set(item.id, item);
-    }
-    return map;
-  }, [conversations]);
-  return useMemo(() => {
-    return visibleIds.map((id) => {
-      const item = conversationMap.get(id);
-      if (!item) return null;
-      const text = item.text || item.transcript;
-      if (!text) return null;
-      return { id: item.id, role: item.role, text, lifecycle: item.lifecycle };
-    }).filter((entry) => entry !== null);
-  }, [visibleIds, conversationMap]);
+    syncConversations(runtime.getState().conversations);
+    return runtime.onEvent((event, state) => {
+      if (event.type === "session.ended") {
+        seenIdsRef.current = /* @__PURE__ */ new Set();
+        initializedRef.current = false;
+        setSubtitles([]);
+        return;
+      }
+      if (!isSubtitleRelatedEvent(event.type)) {
+        return;
+      }
+      syncConversations(state.conversations);
+    });
+  }, [runtime, roleSet, maxItems]);
+  return subtitles;
+}
+function normalizeMaxItems(maxItems) {
+  if (maxItems === void 0) {
+    return 2;
+  }
+  if (!Number.isFinite(maxItems)) {
+    return 2;
+  }
+  return Math.max(0, Math.floor(maxItems));
+}
+function getDisplayText(item) {
+  return item.text || item.transcript;
+}
+function buildSubtitleItem(item, timestamp, updatedAt) {
+  return {
+    id: item.id,
+    role: item.role,
+    lifecycle: item.lifecycle,
+    status: item.status,
+    text: item.text,
+    transcript: item.transcript,
+    displayText: getDisplayText(item),
+    content: item.content,
+    item: item.item,
+    timestamp,
+    updatedAt
+  };
+}
+function hasSubtitleChanged(previous, next) {
+  return previous.text !== next.text || previous.transcript !== next.transcript || previous.lifecycle !== next.lifecycle || previous.status !== next.status || previous.role !== next.role;
+}
+function isSubtitleRelatedEvent(type) {
+  return type.startsWith("conversation.") || type.startsWith("response.");
 }
 var BREATHE_KEYFRAMES = `@keyframes ivi-subtitle-breathe{0%,100%{opacity:1}50%{opacity:.55}}`;
 function IVISubtitleOverlay(props) {
   const {
-    conversations,
+    runtime,
     roles = "user",
-    maxVisible = 2,
-    dismissAfterMs = 5e3,
+    maxItems,
+    maxVisible,
     subtitleStyle,
     className,
     style
   } = props;
-  const roleSet = useMemo(
-    () => new Set(Array.isArray(roles) ? roles : [roles]),
-    [roles]
-  );
-  const filtered = useMemo(
-    () => conversations.filter((c) => roleSet.has(c.role)),
-    [conversations, roleSet]
-  );
-  const entries = useSubtitleEntries(filtered, maxVisible, dismissAfterMs);
+  const entries = useIviSubtitles(runtime, {
+    roles,
+    maxItems: maxItems ?? maxVisible
+  });
   if (entries.length === 0) return null;
   const fontFamily = subtitleStyle?.fontFamily ?? "system-ui, -apple-system, sans-serif";
   const fontSize = subtitleStyle?.fontSize ?? 14;
@@ -2573,7 +3099,7 @@ function IVISubtitleOverlay(props) {
               whiteSpace: "nowrap",
               animation: entry.lifecycle === "added" ? "ivi-subtitle-breathe 1.5s ease-in-out infinite" : void 0
             },
-            children: entry.text
+            children: entry.displayText
           },
           entry.id
         ))
@@ -2676,9 +3202,224 @@ function IVITrtcPlayer(props) {
     }
   );
 }
+var standaloneLivekitSourceManager = new LivekitSourceManager();
+function IVILivekitPlayer(props) {
+  const {
+    livekit,
+    sourceId,
+    runtime,
+    className,
+    style,
+    loadingFallback = null,
+    errorFallback = null,
+    muted = false
+  } = props;
+  const containerRef = useRef(null);
+  const viewIdRef = useRef(`livekit-view-${Math.random().toString(36).slice(2, 10)}`);
+  const manager = runtime?.getLivekitSourceManager() ?? standaloneLivekitSourceManager;
+  const resolvedSourceId = useMemo(
+    () => sourceId ?? `adhoc:${livekit.ws_url}:${describeLivekitRoom(livekit)}:${livekit.token}`,
+    [sourceId, livekit]
+  );
+  const shouldManageSourceLifecycle = !runtime || !sourceId;
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const mutedRef = useRef(muted);
+  mutedRef.current = muted;
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) {
+      return;
+    }
+    let disposed = false;
+    if (shouldManageSourceLifecycle) {
+      manager.upsertSource(resolvedSourceId, livekit);
+    }
+    const unsubscribe = manager.subscribe(resolvedSourceId, (snapshot) => {
+      if (disposed) {
+        return;
+      }
+      setLoading(snapshot.status === "idle" || snapshot.status === "connecting");
+      setError(snapshot.status === "error" ? snapshot.error ?? "LiveKit \u62C9\u6D41\u5931\u8D25" : null);
+    });
+    void manager.attachView(resolvedSourceId, viewIdRef.current, container, mutedRef.current).catch((caughtError) => {
+      if (disposed) {
+        return;
+      }
+      setError(caughtError instanceof Error ? caughtError.message : "LiveKit \u62C9\u6D41\u5931\u8D25");
+      setLoading(false);
+    });
+    return () => {
+      disposed = true;
+      unsubscribe();
+      manager.detachView(resolvedSourceId, viewIdRef.current);
+      if (shouldManageSourceLifecycle) {
+        manager.removeSource(resolvedSourceId);
+      }
+    };
+  }, [
+    manager,
+    resolvedSourceId,
+    shouldManageSourceLifecycle,
+    livekit.ws_url,
+    livekit.token,
+    livekit.room,
+    livekit.identity
+  ]);
+  useEffect(() => {
+    manager.updateViewMuted(resolvedSourceId, viewIdRef.current, muted);
+  }, [manager, muted, resolvedSourceId]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className,
+      style: {
+        width: "100%",
+        height: "100%",
+        minWidth: 0,
+        minHeight: 0,
+        backgroundColor: "#000",
+        position: "relative",
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ jsx("div", { ref: containerRef, style: { width: "100%", height: "100%" } }),
+        loading ? loadingFallback : null,
+        error ? errorFallback ?? /* @__PURE__ */ jsx("div", { children: error }) : null
+      ]
+    }
+  );
+}
+var loadModulesPromise = null;
+async function loadXgplayerModules() {
+  if (!loadModulesPromise) {
+    loadModulesPromise = (async () => {
+      try {
+        await import('xgplayer/dist/index.min.css');
+      } catch (err) {
+        console.warn("[IVIFlvVideo] \u52A0\u8F7D xgplayer \u6837\u5F0F\u5931\u8D25\uFF0C\u64AD\u653E\u5668\u63A7\u4EF6\u53EF\u80FD\u663E\u793A\u5F02\u5E38", err);
+      }
+      const [playerMod, flvMod] = await Promise.all([import('xgplayer'), import('xgplayer-flv')]);
+      const playerModule = playerMod;
+      const flvModule = flvMod;
+      const Player = playerModule.default ?? playerModule.Player;
+      const FlvPlugin = flvModule.default ?? flvModule.FlvPlugin;
+      if (!Player || !FlvPlugin) {
+        throw new Error("xgplayer \u6216 xgplayer-flv \u6A21\u5757\u5BFC\u51FA\u65E0\u6548");
+      }
+      return { Player, FlvPlugin };
+    })().catch((err) => {
+      loadModulesPromise = null;
+      throw err;
+    });
+  }
+  return loadModulesPromise;
+}
+function IVIFlvVideo(props) {
+  const { url, videoProps, style, isLive = true, paused = false } = props;
+  const containerRef = useRef(null);
+  const playerRef = useRef(null);
+  const pausedRef = useRef(paused);
+  const videoPropsRef = useRef(videoProps);
+  videoPropsRef.current = videoProps;
+  const reactId = useId();
+  const containerId = `ivi-flv-${reactId.replace(/:/g, "")}`;
+  useEffect(() => {
+    pausedRef.current = paused;
+    const player = playerRef.current;
+    if (!player) return;
+    if (paused) {
+      player.pause();
+    } else {
+      Promise.resolve(player.play()).catch((err) => {
+        console.warn(
+          "[IVIFlvVideo] paused\u2192active \u5207\u6362\u65F6 play() \u88AB\u6D4F\u89C8\u5668\u62D2\u7EDD\uFF08\u591A\u534A\u53D7\u81EA\u52A8\u64AD\u653E\u7B56\u7565\u9650\u5236\uFF09",
+          err
+        );
+      });
+    }
+  }, [paused]);
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    let disposed = false;
+    let endedHandler = null;
+    let errorHandler = null;
+    const setup = async () => {
+      try {
+        const { Player, FlvPlugin } = await loadXgplayerModules();
+        if (disposed || !containerRef.current) return;
+        playerRef.current?.destroy();
+        playerRef.current = null;
+        container.innerHTML = "";
+        const shouldAutoplay = !pausedRef.current;
+        const currentVideoProps = videoPropsRef.current;
+        const muted = Boolean(currentVideoProps?.muted);
+        const player = new Player({
+          id: containerId,
+          el: containerRef.current,
+          url,
+          plugins: [FlvPlugin],
+          isLive,
+          autoplay: shouldAutoplay,
+          autoplayMuted: muted,
+          muted,
+          controls: currentVideoProps?.controls ?? true,
+          width: "100%",
+          height: "100%",
+          fluid: true,
+          videoFillMode: "contain",
+          flv: {
+            retryCount: Number.MAX_SAFE_INTEGER,
+            retryDelay: 500,
+            loadTimeout: 1e4
+          }
+        });
+        playerRef.current = player;
+        errorHandler = (...args) => {
+          console.warn("[IVIFlvVideo] \u64AD\u653E\u5668 error \u4E8B\u4EF6", { url, args });
+        };
+        player.on("error", errorHandler);
+        const onEnded = currentVideoProps?.onEnded;
+        if (onEnded) {
+          endedHandler = () => {
+            videoPropsRef.current?.onEnded?.({});
+          };
+          player.on("ended", endedHandler);
+        }
+        if (!pausedRef.current) {
+          Promise.resolve(player.play()).catch((err) => {
+            console.warn("[IVIFlvVideo] \u521D\u59CB play() \u88AB\u6D4F\u89C8\u5668\u62D2\u7EDD", err);
+          });
+        }
+      } catch (err) {
+        console.warn("[IVIFlvVideo] \u521D\u59CB\u5316 xgplayer-flv \u5931\u8D25", err);
+      }
+    };
+    void setup();
+    return () => {
+      disposed = true;
+      const player = playerRef.current;
+      if (player) {
+        if (endedHandler) player.off("ended", endedHandler);
+        if (errorHandler) player.off("error", errorHandler);
+        player.destroy();
+      }
+      playerRef.current = null;
+      if (containerRef.current) {
+        containerRef.current.innerHTML = "";
+      }
+    };
+  }, [url, isLive, containerId]);
+  return /* @__PURE__ */ jsx("div", { id: containerId, ref: containerRef, style: { width: "100%", height: "100%", ...style } });
+}
+function isFlvUrl(url) {
+  return /\.flv(?:$|[?#])/i.test(url);
+}
 var RETRY_DELAY_MS = 500;
 var UNLIMITED_RETRIES = Number.MAX_SAFE_INTEGER;
-function makeRetryConfig(label, kind) {
+var HLS_LOG_TAG = "[IVI-HLS]";
+function makeRetryConfig(label, kind, onLog) {
   return {
     maxNumRetry: UNLIMITED_RETRIES,
     retryDelayMs: RETRY_DELAY_MS,
@@ -2686,25 +3427,27 @@ function makeRetryConfig(label, kind) {
     backoff: "linear",
     shouldRetry: (_config, retryCount, isTimeout) => {
       const reason = kind === "timeout" || isTimeout ? "\u52A0\u8F7D\u8D85\u65F6" : "\u52A0\u8F7D\u5931\u8D25";
-      console.warn(
-        `[IVIHlsVideo] ${label} ${reason}\uFF0C${RETRY_DELAY_MS}ms \u540E\u8FDB\u884C\u7B2C ${retryCount + 1} \u6B21\u91CD\u8BD5\uFF08\u65E0\u4E0A\u9650\uFF09`
+      emitHlsLog(
+        onLog,
+        "warn",
+        `${label} ${reason}\uFF0C${RETRY_DELAY_MS}ms \u540E\u8FDB\u884C\u7B2C ${retryCount + 1} \u6B21\u91CD\u8BD5\uFF08\u65E0\u4E0A\u9650\uFF09`
       );
       return true;
     }
   };
 }
-function makeLoadPolicy(label) {
+function makeLoadPolicy(label, onLog) {
   return {
     default: {
       maxTimeToFirstByteMs: 1e4,
       maxLoadTimeMs: 2e4,
-      timeoutRetry: makeRetryConfig(label, "timeout"),
-      errorRetry: makeRetryConfig(label, "error")
+      timeoutRetry: makeRetryConfig(label, "timeout", onLog),
+      errorRetry: makeRetryConfig(label, "error", onLog)
     }
   };
 }
 function IVIHlsVideo(props) {
-  const { url, videoProps, style, aggressivePreload = false, paused = false } = props;
+  const { url, videoProps, style, aggressivePreload = false, paused = false, onLog } = props;
   const videoRef = useRef(null);
   const pausedRef = useRef(paused);
   useEffect(() => {
@@ -2715,13 +3458,15 @@ function IVIHlsVideo(props) {
       video.pause();
     } else {
       video.play().catch((err) => {
-        console.warn(
-          "[IVIHlsVideo] paused\u2192active \u5207\u6362\u65F6 play() \u88AB\u6D4F\u89C8\u5668\u62D2\u7EDD\uFF08\u591A\u534A\u53D7\u81EA\u52A8\u64AD\u653E\u7B56\u7565\u9650\u5236\uFF09",
+        emitHlsLog(
+          onLog,
+          "warn",
+          "paused\u2192active \u5207\u6362\u65F6 play() \u88AB\u6D4F\u89C8\u5668\u62D2\u7EDD\uFF08\u591A\u534A\u53D7\u81EA\u52A8\u64AD\u653E\u7B56\u7565\u9650\u5236\uFF09",
           err
         );
       });
     }
-  }, [paused]);
+  }, [onLog, paused]);
   useEffect(() => {
     const video = videoRef.current;
     if (!video) {
@@ -2739,7 +3484,7 @@ function IVIHlsVideo(props) {
     const onVideoError = () => {
       const el = videoRef.current;
       const mediaErr = el?.error;
-      console.warn("[IVIHlsVideo] <video> \u5143\u7D20\u62A5\u9519", {
+      emitHlsLog(onLog, "warn", "<video> \u5143\u7D20\u62A5\u9519", {
         code: mediaErr?.code,
         message: mediaErr?.message,
         currentSrc: el?.currentSrc,
@@ -2748,7 +3493,7 @@ function IVIHlsVideo(props) {
       });
     };
     const onVideoStalled = () => {
-      console.warn("[IVIHlsVideo] <video> stalled\uFF08\u7F13\u51B2\u505C\u6EDE\uFF09", {
+      emitHlsLog(onLog, "warn", "<video> stalled\uFF08\u7F13\u51B2\u505C\u6EDE\uFF09", {
         currentTime: videoRef.current?.currentTime,
         readyState: videoRef.current?.readyState
       });
@@ -2761,17 +3506,17 @@ function IVIHlsVideo(props) {
       const el = videoRef.current;
       if (!el) return;
       el.play().catch((err) => {
-        console.warn(
-          "[IVIHlsVideo] \u6062\u590D\u540E play() \u88AB\u6D4F\u89C8\u5668\u62D2\u7EDD\uFF08\u53EF\u80FD\u53D7\u81EA\u52A8\u64AD\u653E\u7B56\u7565\u9650\u5236\uFF09",
+        emitHlsLog(
+          onLog,
+          "warn",
+          "\u6062\u590D\u540E play() \u88AB\u6D4F\u89C8\u5668\u62D2\u7EDD\uFF08\u53EF\u80FD\u53D7\u81EA\u52A8\u64AD\u653E\u7B56\u7565\u9650\u5236\uFF09",
           err
         );
       });
     };
     const scheduleFullReload = (reason) => {
       if (disposed || fullReloadTimer) return;
-      console.warn(
-        `[IVIHlsVideo] ${reason}\uFF0C${RETRY_DELAY_MS}ms \u540E\u91CD\u65B0\u62C9\u53D6\u6E90\uFF08\u65E0\u9650\u91CD\u8BD5\uFF09`
-      );
+      emitHlsLog(onLog, "warn", `${reason}\uFF0C${RETRY_DELAY_MS}ms \u540E\u91CD\u65B0\u62C9\u53D6\u6E90\uFF08\u65E0\u9650\u91CD\u8BD5\uFF09`);
       fullReloadTimer = setTimeout(() => {
         fullReloadTimer = null;
         if (disposed || !hlsInstance || !videoRef.current) return;
@@ -2781,7 +3526,7 @@ function IVIHlsVideo(props) {
           hlsInstance.startLoad();
           resumePlayback();
         } catch (err) {
-          console.warn("[IVIHlsVideo] \u91CD\u65B0\u62C9\u53D6\u6E90\u629B\u51FA\u5F02\u5E38\uFF0C\u7EE7\u7EED\u91CD\u8BD5", err);
+          emitHlsLog(onLog, "warn", "\u91CD\u65B0\u62C9\u53D6\u6E90\u629B\u51FA\u5F02\u5E38\uFF0C\u7EE7\u7EED\u91CD\u8BD5", err);
           scheduleFullReload("\u91CD\u65B0\u62C9\u53D6\u6E90\u5F02\u5E38");
         }
       }, RETRY_DELAY_MS);
@@ -2797,8 +3542,10 @@ function IVIHlsVideo(props) {
         const events = hlsModule.Events ?? Hls.Events ?? {};
         const errorTypes = hlsModule.ErrorTypes ?? Hls.ErrorTypes ?? {};
         if (!Hls.isSupported()) {
-          console.warn(
-            "[IVIHlsVideo] \u5F53\u524D\u73AF\u5883\u4E0D\u652F\u6301 hls.js\uFF0C\u964D\u7EA7\u5230\u539F\u751F HLS\uFF08\u5931\u8D25\u5C06\u7531 <video> error \u4E8B\u4EF6\u6253\u5370\uFF09",
+          emitHlsLog(
+            onLog,
+            "warn",
+            "\u5F53\u524D\u73AF\u5883\u4E0D\u652F\u6301 hls.js\uFF0C\u964D\u7EA7\u5230\u539F\u751F HLS\uFF08\u5931\u8D25\u5C06\u7531 <video> error \u4E8B\u4EF6\u4E0A\u62A5\uFF09",
             { url }
           );
           videoRef.current.src = url;
@@ -2820,9 +3567,9 @@ function IVIHlsVideo(props) {
           capLevelToPlayerSize: true,
           // 以下三项是核心：列表与分片的拉取全部使用 hls.js 内置重试，
           // 无上限次数、间隔上限 0.5s、每次重试通过 shouldRetry 打印警告。
-          manifestLoadPolicy: makeLoadPolicy("manifest \u4E3B\u5217\u8868"),
-          playlistLoadPolicy: makeLoadPolicy("level \u5B50\u7801\u7387\u5217\u8868"),
-          fragLoadPolicy: makeLoadPolicy("fragment \u5A92\u4F53\u5206\u7247")
+          manifestLoadPolicy: makeLoadPolicy("manifest \u4E3B\u5217\u8868", onLog),
+          playlistLoadPolicy: makeLoadPolicy("level \u5B50\u7801\u7387\u5217\u8868", onLog),
+          fragLoadPolicy: makeLoadPolicy("fragment \u5A92\u4F53\u5206\u7247", onLog)
         });
         hlsInstance = instance;
         const errorEvent = events.ERROR ?? "hlsError";
@@ -2830,52 +3577,38 @@ function IVIHlsVideo(props) {
         const mediaErrorType = errorTypes.MEDIA_ERROR ?? "mediaError";
         instance.on(errorEvent, (_eventName, data) => {
           if (!data) {
-            console.warn("[IVIHlsVideo] HLS ERROR \u4E8B\u4EF6 data \u4E3A\u7A7A");
+            emitHlsLog(onLog, "warn", "HLS ERROR \u4E8B\u4EF6 data \u4E3A\u7A7A");
             return;
           }
           if (!data.fatal) {
             if (data.type !== networkErrorType) {
-              console.warn(
-                "[IVIHlsVideo] HLS \u975E\u81F4\u547D\u9519\u8BEF\uFF08\u4E0D\u8D70\u5185\u7F6E\u91CD\u8BD5\uFF09",
-                data.type,
-                data.details
-              );
+              emitHlsLog(onLog, "warn", "HLS \u975E\u81F4\u547D\u9519\u8BEF\uFF08\u4E0D\u8D70\u5185\u7F6E\u91CD\u8BD5\uFF09", data.type, data.details);
             }
             return;
           }
           switch (data.type) {
             case networkErrorType:
-              console.warn(
-                "[IVIHlsVideo] HLS \u81F4\u547D\u7F51\u7EDC\u9519\u8BEF\uFF0C\u8C03\u7528 startLoad() \u91CD\u542F\u62C9\u6D41",
-                data.details
-              );
+              emitHlsLog(onLog, "warn", "HLS \u81F4\u547D\u7F51\u7EDC\u9519\u8BEF\uFF0C\u8C03\u7528 startLoad() \u91CD\u542F\u62C9\u6D41", data.details);
               try {
                 hlsInstance?.startLoad();
                 resumePlayback();
               } catch (err) {
-                console.warn("[IVIHlsVideo] startLoad() \u5F02\u5E38\uFF0C\u8D70\u515C\u5E95\u91CD\u8F7D", err);
+                emitHlsLog(onLog, "warn", "startLoad() \u5F02\u5E38\uFF0C\u8D70\u515C\u5E95\u91CD\u8F7D", err);
                 scheduleFullReload("startLoad \u5F02\u5E38");
               }
               break;
             case mediaErrorType:
-              console.warn(
-                "[IVIHlsVideo] HLS \u81F4\u547D\u5A92\u4F53\u9519\u8BEF\uFF0C\u8C03\u7528 recoverMediaError() \u6062\u590D",
-                data.details
-              );
+              emitHlsLog(onLog, "warn", "HLS \u81F4\u547D\u5A92\u4F53\u9519\u8BEF\uFF0C\u8C03\u7528 recoverMediaError() \u6062\u590D", data.details);
               try {
                 hlsInstance?.recoverMediaError();
                 resumePlayback();
               } catch (err) {
-                console.warn("[IVIHlsVideo] recoverMediaError() \u5F02\u5E38\uFF0C\u8D70\u515C\u5E95\u91CD\u8F7D", err);
+                emitHlsLog(onLog, "warn", "recoverMediaError() \u5F02\u5E38\uFF0C\u8D70\u515C\u5E95\u91CD\u8F7D", err);
                 scheduleFullReload("recoverMediaError \u5F02\u5E38");
               }
               break;
             default:
-              console.warn(
-                "[IVIHlsVideo] HLS \u5176\u4ED6\u81F4\u547D\u9519\u8BEF\uFF0C\u51C6\u5907\u91CD\u65B0\u62C9\u53D6\u6E90",
-                data.type,
-                data.details
-              );
+              emitHlsLog(onLog, "warn", "HLS \u5176\u4ED6\u81F4\u547D\u9519\u8BEF\uFF0C\u51C6\u5907\u91CD\u65B0\u62C9\u53D6\u6E90", data.type, data.details);
               scheduleFullReload("\u5176\u4ED6\u81F4\u547D\u9519\u8BEF");
               break;
           }
@@ -2883,8 +3616,10 @@ function IVIHlsVideo(props) {
         instance.loadSource(url);
         instance.attachMedia(videoRef.current);
       } catch (err) {
-        console.warn(
-          "[IVIHlsVideo] \u52A8\u6001\u52A0\u8F7D hls.js \u5931\u8D25\uFF0C\u964D\u7EA7\u5230\u539F\u751F HLS\uFF08\u5931\u8D25\u5C06\u7531 <video> error \u4E8B\u4EF6\u6253\u5370\uFF09",
+        emitHlsLog(
+          onLog,
+          "warn",
+          "\u52A8\u6001\u52A0\u8F7D hls.js \u5931\u8D25\uFF0C\u964D\u7EA7\u5230\u539F\u751F HLS\uFF08\u5931\u8D25\u5C06\u7531 <video> error \u4E8B\u4EF6\u4E0A\u62A5\uFF09",
           err
         );
         if (disposed || !videoRef.current) return;
@@ -2900,7 +3635,7 @@ function IVIHlsVideo(props) {
       hlsInstance?.destroy();
       hlsInstance = null;
     };
-  }, [url, aggressivePreload]);
+  }, [url, aggressivePreload, onLog]);
   return /* @__PURE__ */ jsx(
     "video",
     {
@@ -2916,159 +3651,16 @@ function IVIHlsVideo(props) {
 function isM3u8Url(url) {
   return /\.m3u8(?:$|[?#])/i.test(url);
 }
-function resolveBlurMode(bg) {
-  if (bg === "blur") return "live";
-  if (typeof bg === "object" && "blur" in bg) return bg.blur;
-  return false;
-}
-function TrackSlotBlurLayer(props) {
-  const { source, mode, children } = props;
-  return /* @__PURE__ */ jsxs("div", { style: CONTAINER_STYLE, children: [
-    /* @__PURE__ */ jsx("div", { style: BG_LAYER_STYLE, children: /* @__PURE__ */ jsx(BlurBackgroundLayer, { source, mode }) }),
-    /* @__PURE__ */ jsx("div", { style: MAIN_LAYER_STYLE, children })
-  ] });
-}
-function BlurBackgroundLayer({
-  source,
-  mode
-}) {
-  const { playback } = source;
-  if (source.source.asset_type === "image" && playback.url) {
-    return /* @__PURE__ */ jsx("img", { src: playback.url, alt: "", style: BLUR_MEDIA_STYLE });
-  }
-  if (playback.type === "trtc") {
-    return /* @__PURE__ */ jsx(SlotVideoBlurCanvas, { staticOnly: mode === "static" });
-  }
-  const url = playback.url;
-  if (!url) return null;
-  if (mode === "static") {
-    return isM3u8Url(url) ? /* @__PURE__ */ jsx(HlsStaticBlurFrame, { url }) : /* @__PURE__ */ jsx(StaticBlurFrame, { url });
-  }
-  if (isM3u8Url(url)) {
-    return /* @__PURE__ */ jsx(
-      IVIHlsVideo,
-      {
-        url,
-        videoProps: { muted: true, autoPlay: true, playsInline: true },
-        style: BLUR_MEDIA_STYLE,
-        paused: false
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx(
-    "video",
-    {
-      src: url,
-      muted: true,
-      autoPlay: true,
-      playsInline: true,
-      style: BLUR_MEDIA_STYLE
-    }
-  );
-}
-function SlotVideoBlurCanvas({ staticOnly }) {
-  const canvasRef = useRef(null);
-  useEffect(() => {
-    const canvas = canvasRef.current;
-    if (!canvas) return;
-    const container = canvas.closest("[data-ivi-source-id]");
-    if (!container) return;
-    let animId;
-    let lastDrawTime = 0;
-    let captured = false;
-    const intervalMs = 1e3 / 5;
-    const draw = (time) => {
-      if (staticOnly && captured) return;
-      animId = requestAnimationFrame(draw);
-      if (time - lastDrawTime < intervalMs) return;
-      lastDrawTime = time;
-      const video = container.querySelector("video");
-      if (!video || video.readyState < 2) return;
-      const ctx = canvas.getContext("2d");
-      if (!ctx) return;
-      if (canvas.width !== video.videoWidth || canvas.height !== video.videoHeight) {
-        canvas.width = video.videoWidth || 640;
-        canvas.height = video.videoHeight || 360;
-      }
-      ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
-      captured = true;
-    };
-    animId = requestAnimationFrame(draw);
-    return () => cancelAnimationFrame(animId);
-  }, [staticOnly]);
-  return /* @__PURE__ */ jsx("canvas", { ref: canvasRef, style: BLUR_MEDIA_STYLE });
-}
-function StaticBlurFrame({ url }) {
-  const canvasRef = useRef(null);
-  useEffect(() => {
-    const canvas = canvasRef.current;
-    if (!canvas) return;
-    const video = document.createElement("video");
-    video.muted = true;
-    video.playsInline = true;
-    video.preload = "auto";
-    video.crossOrigin = "anonymous";
-    video.src = url;
-    const onReady = () => {
-      const ctx = canvas.getContext("2d");
-      if (!ctx) return;
-      canvas.width = video.videoWidth || 640;
-      canvas.height = video.videoHeight || 360;
-      ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
-      cleanup();
-    };
-    const cleanup = () => {
-      video.removeEventListener("loadeddata", onReady);
-      video.pause();
-      video.removeAttribute("src");
-      video.load();
-    };
-    video.addEventListener("loadeddata", onReady);
-    video.load();
-    return cleanup;
-  }, [url]);
-  return /* @__PURE__ */ jsx("canvas", { ref: canvasRef, style: BLUR_MEDIA_STYLE });
-}
-function HlsStaticBlurFrame({ url }) {
-  return /* @__PURE__ */ jsx(
-    IVIHlsVideo,
-    {
-      url,
-      videoProps: { muted: true, autoPlay: true, playsInline: true },
-      style: BLUR_MEDIA_STYLE,
-      paused: true
-    }
-  );
+function emitHlsLog(onLog, level, message, ...extra) {
+  const args = [HLS_LOG_TAG, message, ...extra];
+  onLog?.({
+    level,
+    tag: HLS_LOG_TAG,
+    message: `${HLS_LOG_TAG} ${message}`,
+    args,
+    data: extra.length > 0 ? { message, extra } : { message }
+  });
 }
-var CONTAINER_STYLE = {
-  width: "100%",
-  height: "100%",
-  position: "relative",
-  overflow: "hidden"
-};
-var BG_LAYER_STYLE = {
-  position: "absolute",
-  top: 0,
-  left: 0,
-  width: "100%",
-  height: "100%",
-  zIndex: 0,
-  overflow: "hidden"
-};
-var MAIN_LAYER_STYLE = {
-  position: "relative",
-  zIndex: 1,
-  width: "100%",
-  height: "100%"
-};
-var BLUR_MEDIA_STYLE = {
-  width: "100%",
-  height: "100%",
-  objectFit: "cover",
-  filter: "blur(20px)",
-  transform: "scale(1.15)",
-  display: "block"
-};
 function toReadyRuntimeSource(source) {
   if (!source || source.status !== "ready" || !source.playback) {
     return null;
@@ -3082,9 +3674,10 @@ function supportsSubtitleOverlay(source) {
 }
 function detectMediaVolumeType(source) {
   if (!source) return null;
-  if (source.playback.type === "trtc") return "trtc";
+  if (getPlaybackType(source.playback) === "trtc") return "trtc";
+  if (isLivekitSourcePlayback(source.playback)) return "livekit";
   if (source.source.asset_type === "image") return null;
-  const url = source.playback.url;
+  const url = getPlaybackUrl(source.playback);
   if (!url) return null;
   return isM3u8Url(url) ? "hls" : "video";
 }
@@ -3097,13 +3690,15 @@ function TrackSlotMediaContent(props) {
     isActive,
     runtime,
     renderTrtc,
+    renderLivekit,
     renderMedia,
     imageProps,
     videoProps,
     trtcPlayerProps,
+    livekitPlayerProps,
     adaptToSourceSize,
     fitStrategy,
-    background
+    onLog
   } = props;
   const renderContext = {
     slot: slot ?? "",
@@ -3111,17 +3706,18 @@ function TrackSlotMediaContent(props) {
     source,
     isPreloading: !isActive
   };
-  const mediaStyle = buildAdaptiveMediaStyle(source, adaptToSourceSize, fitStrategy, background);
+  const mediaStyle = buildAdaptiveMediaStyle(adaptToSourceSize, fitStrategy);
   const shouldMute = !isActive;
   if (renderMedia) return renderMedia(renderContext);
-  if (source.playback.type === "trtc") {
-    if (!source.playback.trtc) return null;
+  if (getPlaybackType(source.playback) === "trtc") {
+    const trtc = getTrtcPlayback(source.playback);
+    if (!trtc) return null;
     if (renderTrtc) return renderTrtc(renderContext);
     const trtcMuted = shouldMute || Boolean(trtcPlayerProps?.muted);
     return /* @__PURE__ */ jsx(
       IVITrtcPlayer,
       {
-        trtc: source.playback.trtc,
+        trtc,
         sourceId: source.source.source_id,
         runtime,
         ...trtcPlayerProps,
@@ -3132,18 +3728,37 @@ function TrackSlotMediaContent(props) {
       }
     );
   }
+  if (isLivekitSourcePlayback(source.playback)) {
+    if (renderLivekit) return renderLivekit(renderContext);
+    const livekitMuted = shouldMute || Boolean(livekitPlayerProps?.muted);
+    return /* @__PURE__ */ jsx(
+      IVILivekitPlayer,
+      {
+        livekit: source.playback.livekit,
+        sourceId: source.source.source_id,
+        runtime,
+        ...livekitPlayerProps,
+        muted: livekitMuted,
+        loadingFallback: isActive ? livekitPlayerProps?.loadingFallback : null,
+        errorFallback: isActive ? livekitPlayerProps?.errorFallback : null,
+        style: { ...mediaStyle, ...livekitPlayerProps?.style ?? {} }
+      }
+    );
+  }
   if (source.source.asset_type === "image") {
+    const imageUrl = getPlaybackUrl(source.playback);
+    if (!imageUrl) return null;
     return /* @__PURE__ */ jsx(
       "img",
       {
-        src: source.playback.url,
+        src: imageUrl,
         alt: "",
         ...imageProps,
         style: { ...mediaStyle, ...imageProps?.style ?? {} }
       }
     );
   }
-  const playbackUrl = source.playback.url;
+  const playbackUrl = getPlaybackUrl(source.playback);
   if (!playbackUrl) return null;
   const videoStyle = { ...mediaStyle, ...videoProps?.style ?? {} };
   const mergedVideoProps = {
@@ -3157,15 +3772,32 @@ function TrackSlotMediaContent(props) {
     ) : void 0
   };
   const shouldPause = !isActive;
-  return isM3u8Url(playbackUrl) ? /* @__PURE__ */ jsx(
-    IVIHlsVideo,
-    {
-      url: playbackUrl,
-      videoProps: mergedVideoProps,
-      style: videoStyle,
-      paused: shouldPause
-    }
-  ) : /* @__PURE__ */ jsx(
+  if (isM3u8Url(playbackUrl)) {
+    return /* @__PURE__ */ jsx(
+      IVIHlsVideo,
+      {
+        url: playbackUrl,
+        videoProps: mergedVideoProps,
+        style: videoStyle,
+        paused: shouldPause
+      }
+    );
+  }
+  if (isFlvUrl(playbackUrl)) {
+    return /* @__PURE__ */ jsx(
+      IVIFlvVideo,
+      {
+        url: playbackUrl,
+        videoProps: {
+          ...mergedVideoProps,
+          controls: isActive ? videoProps?.controls ?? true : false
+        },
+        style: videoStyle,
+        paused: shouldPause
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
     SlotVideo,
     {
       src: playbackUrl,
@@ -3180,7 +3812,7 @@ function TrackSlotMediaContent(props) {
     }
   );
 }
-function buildAdaptiveMediaStyle(source, adaptToSourceSize, fitStrategy, background) {
+function buildAdaptiveMediaStyle(adaptToSourceSize, fitStrategy) {
   const objectFitStyle = fitStrategy === "auto" ? {} : {
     objectFit: fitStrategy ?? "contain"
   };
@@ -3191,20 +3823,23 @@ function buildAdaptiveMediaStyle(source, adaptToSourceSize, fitStrategy, backgro
     width: "100%",
     height: "100%",
     display: "block",
-    ...objectFitStyle,
-    backgroundColor: resolveBackgroundColor(background)
+    ...objectFitStyle
   };
 }
-function resolveBackgroundColor(bg) {
-  if (!bg || bg === "black") return "#000";
-  if (bg === "white") return "#fff";
-  if (bg === "transparent") return "transparent";
-  if (bg === "blur") return "transparent";
-  if (typeof bg === "object") {
-    if ("color" in bg) return bg.color;
-    if ("blur" in bg) return "transparent";
+function getPlaybackType(playback) {
+  const type = playback.type;
+  return typeof type === "string" ? type : void 0;
+}
+function getPlaybackUrl(playback) {
+  const url = playback.url;
+  return typeof url === "string" ? url : void 0;
+}
+function getTrtcPlayback(playback) {
+  const trtc = playback.trtc;
+  if (typeof trtc !== "object" || trtc === null) {
+    return null;
   }
-  return "#000";
+  return trtc;
 }
 function createAutoTakeOnEndedHandler(runtime, sourceId, trackId, userOnEnded) {
   return (event) => {
@@ -3266,19 +3901,26 @@ function IVITrackSlot(props) {
     style,
     emptyFallback = null,
     renderTrtc,
+    renderLivekit,
     renderMedia,
     videoProps,
     imageProps,
     adaptToSourceSize = true,
     fitStrategy = "contain",
     trtcPlayerProps,
+    livekitPlayerProps,
     showVolumeControl,
     volumeControlProps,
     showSubtitle,
     subtitleProps,
-    background = "black"
+    onLog
   } = props;
   const context = useIviStageView();
+  const fallbackLogCallback = useCallback(
+    (entry) => context.runtime?.emitLog(entry),
+    [context.runtime]
+  );
+  const mediaLogCallback = onLog ?? fallbackLogCallback;
   const containerRef = useRef(null);
   const resolvedTrackId = trackId ?? (slot ? context.slotTrackMap.get(slot) : void 0);
   const track = resolvedTrackId ? context.state.tracks.get(resolvedTrackId) : void 0;
@@ -3300,7 +3942,6 @@ function IVITrackSlot(props) {
     minHeight: 0,
     ...style ?? {}
   };
-  const blurMode = resolveBlurMode(background);
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -3313,33 +3954,33 @@ function IVITrackSlot(props) {
         !activeSource && emptyFallback,
         preloadEntries.map((entry) => {
           const isActive = entry.isActive;
-          const showBlur = blurMode !== false && isActive;
-          const content = /* @__PURE__ */ jsx(
-            TrackSlotMediaContent,
-            {
-              slot,
-              track,
-              source: entry.source,
-              slotSourceId: entry.sourceId,
-              isActive,
-              runtime: context.runtime,
-              renderTrtc,
-              renderMedia,
-              imageProps,
-              videoProps,
-              trtcPlayerProps,
-              adaptToSourceSize,
-              fitStrategy,
-              background
-            }
-          );
           return /* @__PURE__ */ jsx(
             "div",
             {
               style: isActive ? ACTIVE_SLOT_STYLE : STANDBY_SLOT_STYLE,
               "data-ivi-source-id": entry.sourceId,
               "data-ivi-slot-role": isActive ? "active" : "standby",
-              children: /* @__PURE__ */ jsx("div", { style: SLOT_CONTENT_STYLE, children: showBlur ? /* @__PURE__ */ jsx(TrackSlotBlurLayer, { source: entry.source, mode: blurMode, children: content }) : content })
+              children: /* @__PURE__ */ jsx("div", { style: SLOT_CONTENT_STYLE, children: /* @__PURE__ */ jsx(
+                TrackSlotMediaContent,
+                {
+                  slot,
+                  track,
+                  source: entry.source,
+                  slotSourceId: entry.sourceId,
+                  isActive,
+                  runtime: context.runtime,
+                  renderTrtc,
+                  renderLivekit,
+                  renderMedia,
+                  imageProps,
+                  videoProps,
+                  trtcPlayerProps,
+                  livekitPlayerProps,
+                  adaptToSourceSize,
+                  fitStrategy,
+                  onLog: mediaLogCallback
+                }
+              ) })
             },
             entry.sourceId
           );
@@ -3347,7 +3988,7 @@ function IVITrackSlot(props) {
         showSubtitle && activeSource && supportsSubtitleOverlay(activeSource) && /* @__PURE__ */ jsx("div", { style: SUBTITLE_OVERLAY_STYLE, children: /* @__PURE__ */ jsx(
           IVISubtitleOverlay,
           {
-            conversations: context.state.conversations,
+            runtime: context.runtime,
             ...subtitleProps
           }
         ) }),
@@ -3409,17 +4050,16 @@ function useManagedIviRuntime(config) {
     onRuntimeInitError,
     onLog
   } = config;
-  const { url, sessionId } = clientConfig;
   const runtime = useMemo(() => {
-    if (typeof window === "undefined" || !sessionId) {
+    if (typeof window === "undefined") {
       return null;
     }
-    if (!url) {
-      throw new Error("useManagedIviRuntime: `url` is required when `sessionId` is provided.");
+    if (!clientConfig.transport) {
+      return null;
     }
     const mergedClientConfig = {
       ...clientConfig,
-      url: normalizeUrlToWsUrl(url),
+      transport: clientConfig.transport,
       onLog: (entry) => {
         onLog?.(normalizeClientLogEntry(entry));
         clientConfig.onLog?.(entry);
@@ -3434,7 +4074,7 @@ function useManagedIviRuntime(config) {
       }
     };
     return new IviRuntimeCoordinator(client, mergedRuntimeConfig);
-  }, [url, sessionId, clientConfig, runtimeConfig, onLog]);
+  }, [clientConfig, runtimeConfig, onLog]);
   useEffect(() => {
     if (!autoStart || !runtime) {
       return;
@@ -3457,19 +4097,6 @@ function useManagedIviRuntime(config) {
   }, [autoStart, runtime, onRuntimeInitError]);
   return runtime;
 }
-function normalizeUrlToWsUrl(url) {
-  if (/^wss?:\/\//.test(url)) {
-    return url;
-  }
-  if (/^https?:\/\//.test(url)) {
-    const normalized = new URL(url);
-    normalized.protocol = normalized.protocol === "https:" ? "wss:" : "ws:";
-    return normalized.toString();
-  }
-  throw new Error(
-    `useManagedIviRuntime: invalid url "${url}". Expected a ws://, wss://, http://, or https:// URL.`
-  );
-}
 function normalizeClientLogEntry(entry) {
   const tag = getClientLogTag(entry.category);
   return {
@@ -3495,11 +4122,11 @@ function normalizeRuntimeLogEntry(entry) {
 }
 function getClientLogTag(category) {
   if (category === "send") return "[IVI-SEND]";
-  if (category === "ws") return "[IVI-WS]";
+  if (category === "transport") return "[IVI-TRANSPORT]";
   if (category === "reconnect") return "[IVI-RECONNECT]";
   return "[IVI-CLIENT]";
 }
 
-export { EMPTY_RUNTIME_STATE, IVIStageView, IVITrackSlot, IviFrontendSdk, IviRuntimeCoordinator, IviRuntimeDispatcher, useIviStageView, useManagedIviRuntime, useRuntimeState };
+export { EMPTY_RUNTIME_STATE, IVILivekitPlayer, IVIStageView, IVISubtitleOverlay, IVITrackSlot, IVITrtcPlayer, IviFrontendSdk, IviRuntimeCoordinator, IviRuntimeDispatcher, LivekitSourceManager, TrtcSourceManager, isLivekitSourcePlayback, isReadyLivekitRuntimeSource, isSameLivekitConfig, useIviStageView, useIviSubtitles, useManagedIviRuntime, useRuntimeState };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map