@vivix-ai/ivi-frontend-sdk 0.3.7 → 0.3.8

package/dist/index.js

@@ -1105,6 +1105,8 @@ var ConversationManager = class {
 
 // src/runtime/managers/trtc-source-manager.ts
 var TAG = "[IVI-TRTC]";
+var TRTC_VIEW_ATTR = "data-ivi-trtc-view";
+var TRTC_MEDIA_STYLE_ID = "ivi-trtc-media-style";
 var DEFAULT_DENOISER_OPTIONS = {
   enabled: true,
   mode: "normal"
@@ -1266,6 +1268,8 @@ var TrtcSourceManager = class {
     if (!session) {
       throw new Error(`TRTC source session not found: ${sourceId}`);
     }
+    ensureTrtcMediaStyleSheet();
+    container.setAttribute(TRTC_VIEW_ATTR, "");
     session.views.set(viewId, {
       sourceId,
       container,
@@ -1288,6 +1292,7 @@ var TrtcSourceManager = class {
     }
     const binding = session.views.get(viewId);
     if (binding?.sourceId === sourceId) {
+      binding.container.removeAttribute(TRTC_VIEW_ATTR);
       session.views.delete(viewId);
     }
     void this.applyAudioPolicy(session);
@@ -1309,6 +1314,7 @@ var TrtcSourceManager = class {
     this.sourceSessionKeys.delete(sourceId);
     session.views.forEach((binding, viewId) => {
       if (binding.sourceId === sourceId) {
+        binding.container.removeAttribute(TRTC_VIEW_ATTR);
         session.views.delete(viewId);
       }
     });
@@ -1628,6 +1634,38 @@ var TrtcSourceManager = class {
     this.onTrtcEvent?.(event);
   }
 };
+function ensureTrtcMediaStyleSheet() {
+  if (typeof document === "undefined") {
+    return;
+  }
+  if (document.getElementById(TRTC_MEDIA_STYLE_ID)) {
+    return;
+  }
+  const style = document.createElement("style");
+  style.id = TRTC_MEDIA_STYLE_ID;
+  style.textContent = `
+[${TRTC_VIEW_ATTR}] [id^="player_"],
+[${TRTC_VIEW_ATTR}] [id^="video_"],
+[${TRTC_VIEW_ATTR}] [id^="audio_"],
+[${TRTC_VIEW_ATTR}] video,
+[${TRTC_VIEW_ATTR}] canvas {
+  width: 100% !important;
+  height: 100% !important;
+  max-width: 100% !important;
+  max-height: 100% !important;
+  background: transparent !important;
+  background-color: transparent !important;
+  background-image: none !important;
+}
+
+[${TRTC_VIEW_ATTR}] video,
+[${TRTC_VIEW_ATTR}] canvas {
+  object-fit: contain !important;
+  display: block !important;
+}
+`;
+  document.head.appendChild(style);
+}
 function isRuntimeTrtcSource(source) {
   return source.status === "ready" && source.playback?.type === "trtc" && typeof source.playback.trtc === "object" && source.playback.trtc !== null;
 }
@@ -1719,6 +1757,9 @@ function enforceContainMedia(container) {
     element.style.setProperty("max-height", "100%", "important");
     element.style.setProperty("object-fit", "contain", "important");
     element.style.setProperty("display", "block", "important");
+    element.style.setProperty("background", "transparent", "important");
+    element.style.setProperty("background-color", "transparent", "important");
+    element.style.setProperty("background-image", "none", "important");
   });
 }
 
@@ -3616,7 +3657,6 @@ function IVITrtcPlayer(props) {
         height: "100%",
         minWidth: 0,
         minHeight: 0,
-        backgroundColor: "#000",
         position: "relative",
         ...style
       },