@signalwire/js 3.10.2 → 3.10.3-dev.202204201745.05bb3c3.0

package/dist/index.js

@@ -89,13 +89,13 @@ __export(chat_exports, {
   ChatMessage: () => ChatMessage,
   Client: () => Client2
 });
-var import_core13 = require("@signalwire/core");
+var import_core14 = require("@signalwire/core");
 
 // src/createClient.ts
-var import_core12 = require("@signalwire/core");
+var import_core13 = require("@signalwire/core");
 
 // src/Client.ts
-var import_core10 = require("@signalwire/core");
+var import_core11 = require("@signalwire/core");
 
 // src/features/mediaElements/mediaElementsSagas.ts
 var import_core3 = require("@signalwire/core");
@@ -103,7 +103,7 @@ var import_webrtc = require("@signalwire/webrtc");
 
 // src/utils/videoElement.ts
 var import_core = require("@signalwire/core");
-var _addSDKPrefix = (input) => {
+var addSDKPrefix = (input) => {
   return `sw-sdk-${input}`;
 };
 var buildVideo = () => {
@@ -149,38 +149,34 @@ var _buildLayer = ({ location }) => {
   layer.style.height = height;
   return layer;
 };
-var makeLayoutChangedHandler = ({
-  layerMap,
-  rootElement
-}) => (_0) => __async(void 0, [_0], function* ({ layout, myMemberId, localStream }) {
+var makeLayoutChangedHandler = ({ localOverlay, rootElement }) => (_0) => __async(void 0, [_0], function* ({ layout, myMemberId, localStream }) {
   (0, import_core.getLogger)().debug("Process layout.changed");
   try {
     const { layers = [] } = layout;
     const location = layers.find(({ member_id }) => member_id === myMemberId);
-    const myLayerKey = _addSDKPrefix(myMemberId);
-    let myLayer = layerMap.get(myLayerKey);
+    let myLayer = localOverlay.domElement;
     if (!location) {
       (0, import_core.getLogger)().debug("Location not found");
       if (myLayer) {
         (0, import_core.getLogger)().debug("Current layer not visible");
-        myLayer.style.display = "none";
+        localOverlay.hide();
       }
       return;
     }
     if (!myLayer) {
       (0, import_core.getLogger)().debug("Build myLayer");
       myLayer = _buildLayer({ location });
-      myLayer.id = myLayerKey;
+      myLayer.id = localOverlay.id;
       const localVideo = buildVideo();
       localVideo.srcObject = localStream;
       localVideo.style.width = "100%";
       localVideo.style.height = "100%";
       myLayer.appendChild(localVideo);
       const mcuLayers = rootElement.querySelector(".mcuLayers");
-      const exists = document.getElementById(myLayerKey);
+      const exists = mcuLayers == null ? void 0 : mcuLayers.querySelector(`#${myLayer.id}`);
       if (mcuLayers && !exists) {
         mcuLayers.appendChild(myLayer);
-        layerMap.set(myLayerKey, myLayer);
+        localOverlay.domElement = myLayer;
       }
       return;
     }
@@ -197,14 +193,6 @@ var makeLayoutChangedHandler = ({
     (0, import_core.getLogger)().error("Layout Changed Error", error);
   }
 });
-var makeDisplayChangeFn = (display) => {
-  return (domId) => {
-    const el = document.getElementById(_addSDKPrefix(domId));
-    if (el) {
-      el.style.display = display;
-    }
-  };
-};
 var cleanupElement = (rootElement) => {
   while (rootElement.firstChild) {
     rootElement.removeChild(rootElement.firstChild);
@@ -252,12 +240,39 @@ var makeVideoElementSaga = ({
     try {
       const layerMap = /* @__PURE__ */ new Map();
       const videoEl = buildVideo();
+      const localOverlay = {
+        get id() {
+          return addSDKPrefix(room.memberId);
+        },
+        get domElement() {
+          return layerMap.get(this.id);
+        },
+        set domElement(element) {
+          if (element) {
+            (0, import_core3.getLogger)().debug("Set localOverlay", element);
+            layerMap.set(this.id, element);
+          } else {
+            (0, import_core3.getLogger)().debug("Remove localOverlay");
+            layerMap.delete(this.id);
+          }
+        },
+        hide() {
+          if (!this.domElement) {
+            return (0, import_core3.getLogger)().warn("Missing localOverlay to hide");
+          }
+          this.domElement.style.display = "none";
+        },
+        show() {
+          if (!this.domElement) {
+            return (0, import_core3.getLogger)().warn("Missing localOverlay to show");
+          }
+          this.domElement.style.display = "block";
+        }
+      };
       const layoutChangedHandler = makeLayoutChangedHandler({
         rootElement,
-        layerMap
+        localOverlay
       });
-      const hideOverlay = makeDisplayChangeFn("none");
-      const showOverlay = makeDisplayChangeFn("block");
       room.on("layout.changed", (params) => {
         (0, import_core3.getLogger)().debug("Received layout.changed");
         if (room.peer.hasVideoSender && room.localStream) {
@@ -272,7 +287,7 @@ var makeVideoElementSaga = ({
         try {
           const { member } = params;
           if (member.id === room.memberId && "video_muted" in member) {
-            member.video_muted ? hideOverlay(member.id) : showOverlay(member.id);
+            member.video_muted ? localOverlay.hide() : localOverlay.show();
           }
         } catch (error) {
           (0, import_core3.getLogger)().error("Error handling video_muted", error);
@@ -621,6 +636,44 @@ var RoomSessionConnection = class extends import_webrtc4.BaseConnection {
   }
   getEmitterTransforms() {
     return /* @__PURE__ */ new Map([
+      [
+        ["video.room.joined"],
+        {
+          type: "roomSession",
+          instanceFactory: (payload) => {
+            return payload;
+          },
+          payloadTransform: (payload) => {
+            return payload;
+          },
+          nestedFieldsToProcess: () => {
+            return [
+              {
+                eventTransformType: "roomSessionPlayback",
+                process: (transformedPayload, instanceFactory) => {
+                  var _a, _b;
+                  if ((_b = (_a = transformedPayload.room_session) == null ? void 0 : _a.playbacks) == null ? void 0 : _b.length) {
+                    transformedPayload.room_session.playbacks = transformedPayload.room_session.playbacks.map(instanceFactory);
+                  }
+                  return transformedPayload;
+                },
+                processInstancePayload: (payload) => ({ member: payload })
+              },
+              {
+                eventTransformType: "roomSessionRecording",
+                process: (transformedPayload, instanceFactory) => {
+                  var _a, _b;
+                  if ((_b = (_a = transformedPayload.room_session) == null ? void 0 : _a.recordings) == null ? void 0 : _b.length) {
+                    transformedPayload.room_session.recordings = transformedPayload.room_session.recordings.map(instanceFactory);
+                  }
+                  return transformedPayload;
+                },
+                processInstancePayload: (payload) => ({ recording: payload })
+              }
+            ];
+          }
+        }
+      ],
       [
         [
           (0, import_core8.toLocalEvent)("video.recording.start"),
@@ -668,7 +721,9 @@ var RoomSessionConnection = class extends import_webrtc4.BaseConnection {
     ]);
   }
   getCompoundEvents() {
-    return new Map([...import_core8.MemberPosition.MEMBER_POSITION_COMPOUND_EVENTS]);
+    return new Map([
+      ...import_core8.MemberPosition.MEMBER_POSITION_COMPOUND_EVENTS
+    ]);
   }
   attachPreConnectWorkers() {
     this.setWorker("memberListUpdated", {
@@ -864,59 +919,83 @@ var createBaseRoomSessionObject = (params) => {
   return room;
 };
 
-// src/cantina/Cantina.ts
+// src/cantina/VideoManager.ts
+var import_core10 = require("@signalwire/core");
+
+// src/cantina/workers.ts
 var import_core9 = require("@signalwire/core");
-var CantinaAPI = class extends import_core9.BaseConsumer {
-  constructor() {
-    super(...arguments);
-    __publicField(this, "_eventsPrefix", "cantina-manager");
+var videoManagerWorker = function* (options) {
+  (0, import_core9.getLogger)().trace("videoManagerWorker started");
+  const { channels } = options;
+  const { swEventChannel, pubSubChannel } = channels;
+  while (true) {
+    const action = yield import_core9.sagaEffects.take(swEventChannel, (action2) => {
+      return action2.type.startsWith("video-manager.");
+    });
+    yield import_core9.sagaEffects.put(pubSubChannel, action);
+  }
+};
+
+// src/cantina/VideoManager.ts
+var VideoManagerAPI = class extends import_core10.BaseConsumer {
+  constructor(options) {
+    super(options);
+    __publicField(this, "_eventsPrefix", "video-manager");
+    this.setWorker("videoManagerWorker", {
+      worker: videoManagerWorker
+    });
+    this.attachWorkers();
   }
   getEmitterTransforms() {
     return /* @__PURE__ */ new Map([
       [
-        ["cantina-manager.rooms.subscribed"],
+        ["video-manager.rooms.subscribed"],
         {
           type: "roomSession",
-          instanceFactory: ({ rooms }) => ({
-            rooms: rooms.map((row) => (0, import_core9.toExternalJSON)(row))
+          instanceFactory: ({
+            rooms
+          }) => ({
+            rooms: rooms.map((row) => (0, import_core10.toExternalJSON)(row))
           }),
-          payloadTransform: ({ rooms }) => ({
-            rooms: rooms.map((row) => (0, import_core9.toExternalJSON)(row))
+          payloadTransform: ({
+            rooms
+          }) => ({
+            rooms: rooms.map((row) => (0, import_core10.toExternalJSON)(row))
           })
         }
       ],
       [
         [
-          "cantina-manager.room.started",
-          "cantina-manager.room.added",
-          "cantina-manager.room.updated",
-          "cantina-manager.room.ended",
-          "cantina-manager.room.deleted"
+          "video-manager.room.started",
+          "video-manager.room.added",
+          "video-manager.room.updated",
+          "video-manager.room.ended",
+          "video-manager.room.deleted"
         ],
         {
           type: "roomSession",
-          instanceFactory: (payload) => (0, import_core9.toExternalJSON)(payload),
-          payloadTransform: (payload) => (0, import_core9.toExternalJSON)(payload)
+          instanceFactory: (payload) => (0, import_core10.toExternalJSON)(payload),
+          payloadTransform: (payload) => (0, import_core10.toExternalJSON)(payload)
         }
       ]
     ]);
   }
 };
-var createCantinaObject = (params) => {
-  const cantina = (0, import_core9.connect)({
+var createVideoManagerObject = (params) => {
+  const manager = (0, import_core10.connect)({
     store: params.store,
-    Component: CantinaAPI,
+    Component: VideoManagerAPI,
     componentListeners: {
       errors: "onError",
       responses: "onSuccess"
     }
   })(params);
-  const proxy = new Proxy(cantina, {
+  const proxy = new Proxy(manager, {
     get(target, property, receiver) {
       if (property === "_eventsNamespace") {
         return "";
       } else if (property === "eventChannel") {
-        return "cantina-manager.rooms";
+        return "video-manager.rooms";
       }
       return Reflect.get(target, property, receiver);
     }
@@ -925,10 +1004,10 @@ var createCantinaObject = (params) => {
 };
 
 // src/Client.ts
-var ClientAPI = class extends import_core10.BaseClient {
+var ClientAPI = class extends import_core11.BaseClient {
   constructor() {
     super(...arguments);
-    __publicField(this, "_cantina");
+    __publicField(this, "_videoManager");
     __publicField(this, "_chat");
   }
   get rooms() {
@@ -988,44 +1067,44 @@ var ClientAPI = class extends import_core10.BaseClient {
   }
   get chat() {
     if (!this._chat) {
-      this._chat = import_core10.Chat.createBaseChatObject({
+      this._chat = import_core11.Chat.createBaseChatObject({
         store: this.store,
         emitter: this.options.emitter
       });
     }
     return this._chat;
   }
-  get cantina() {
-    if (!this._cantina) {
-      this._cantina = createCantinaObject(this.options);
+  get videoManager() {
+    if (!this._videoManager) {
+      this._videoManager = createVideoManagerObject(this.options);
     }
-    return this._cantina;
+    return this._videoManager;
   }
   reauthenticate(token) {
-    this.store.dispatch(import_core10.actions.reauthAction({ token }));
+    this.store.dispatch(import_core11.actions.reauthAction({ token }));
   }
 };
 
 // src/JWTSession.ts
-var import_core11 = require("@signalwire/core");
-var JWTSession = class extends import_core11.BaseJWTSession {
+var import_core12 = require("@signalwire/core");
+var JWTSession = class extends import_core12.BaseJWTSession {
   constructor() {
     super(...arguments);
     __publicField(this, "WebSocketConstructor", WebSocket);
-    __publicField(this, "agent", "@signalwire/js/3.10.2");
+    __publicField(this, "agent", "@signalwire/js/3.10.3-dev.202204201745.05bb3c3.0");
   }
 };
 
 // src/createClient.ts
 var createClient = (userOptions) => {
   const baseUserOptions = __spreadProps(__spreadValues({}, userOptions), {
-    emitter: (0, import_core12.getEventEmitter)()
+    emitter: (0, import_core13.getEventEmitter)()
   });
-  const store = (0, import_core12.configureStore)({
+  const store = (0, import_core13.configureStore)({
     userOptions: baseUserOptions,
     SessionConstructor: JWTSession
   });
-  const client = (0, import_core12.connect)({
+  const client = (0, import_core13.connect)({
     store,
     Component: ClientAPI,
     componentListeners: {
@@ -1065,8 +1144,8 @@ var Client2 = function(chatOptions) {
 };
 
 // src/chat/index.ts
-var ChatMember = import_core13.Chat.ChatMember;
-var ChatMessage = import_core13.Chat.ChatMessage;
+var ChatMember = import_core14.Chat.ChatMember;
+var ChatMessage = import_core14.Chat.ChatMessage;
 
 // src/video.ts
 var video_exports = {};
@@ -1078,7 +1157,7 @@ __export(video_exports, {
 });
 
 // src/createRoomObject.ts
-var import_core14 = require("@signalwire/core");
+var import_core15 = require("@signalwire/core");
 var VIDEO_CONSTRAINTS = {
   aspectRatio: { ideal: 16 / 9 }
 };
@@ -1117,10 +1196,10 @@ var createRoomObject = (roomOptions) => {
         rootElement = el;
       } else {
         rootElement = document.body;
-        (0, import_core14.getLogger)().warn(`We couldn't find an element with id: ${rootElementId}: using 'document.body' instead.`);
+        (0, import_core15.getLogger)().warn(`We couldn't find an element with id: ${rootElementId}: using 'document.body' instead.`);
       }
     }
-    const room = client.rooms.makeRoomObject({
+    const roomObject = client.rooms.makeRoomObject({
       audio,
       video: video === true ? VIDEO_CONSTRAINTS : video,
       negotiateAudio: true,
@@ -1132,9 +1211,31 @@ var createRoomObject = (roomOptions) => {
       stopMicrophoneWhileMuted,
       speakerId
     });
-    room.once("destroy", () => {
+    roomObject.once("destroy", () => {
       client.disconnect();
     });
+    const join = () => {
+      return new Promise((resolve2, reject2) => __async(void 0, null, function* () {
+        try {
+          roomObject.once("room.subscribed", (_payload) => {
+            resolve2(roomObject);
+          });
+          yield roomObject.join();
+        } catch (error) {
+          (0, import_core15.getLogger)().error("Join", error);
+          client.disconnect();
+          reject2(error);
+        }
+      }));
+    };
+    const room = new Proxy(roomObject, {
+      get(target, prop, receiver) {
+        if (prop === "join") {
+          return join;
+        }
+        return Reflect.get(target, prop, receiver);
+      }
+    });
     if (autoJoin) {
       try {
         yield room.join();
@@ -1156,7 +1257,7 @@ var joinRoom = (roomOptions) => {
 };
 
 // src/RoomSession.ts
-var import_core15 = require("@signalwire/core");
+var import_core16 = require("@signalwire/core");
 var VIDEO_CONSTRAINTS2 = {
   aspectRatio: { ideal: 16 / 9 }
 };
@@ -1237,7 +1338,8 @@ var RoomSession = function(roomOptions) {
         });
         yield room.join();
       } catch (error) {
-        (0, import_core15.getLogger)().error("RoomSession Join", error);
+        (0, import_core16.getLogger)().error("RoomSession Join", error);
+        client.disconnect();
         reject(error);
       }
     }));