feat: merge feat/comments-review into lab

src/components/comments/canvas-pin-adapter/index.ts

@@ -41,6 +41,7 @@ export class CanvasPin implements PinAdapter {
     }
 
     this.canvasSides = this.canvas.getBoundingClientRect();
+
     document.body.style.position = 'relative';
     this.onPinFixedObserver = new Observer({ logger: this.logger });
     this.divWrapper = this.renderDivWrapper();

src/core/index.ts

@@ -92,19 +92,24 @@ const init = async (apiKey: string, options: SuperVizSdkOptions): Promise<Launch
     throw new Error('Failed to validate API key');
   }
 
-  const environment = await ApiService.fetchConfig(apiUrl, apiKey);
-  const limits = await ApiService.fetchLimits(apiUrl, apiKey);
-  const waterMark = await ApiService.fetchWaterMark(apiUrl, apiKey);
+  const [environment, limits, waterMark] = await Promise.all([
+    ApiService.fetchConfig(apiUrl, apiKey),
+    ApiService.fetchLimits(apiUrl, apiKey),
+    ApiService.fetchWaterMark(apiUrl, apiKey),
+  ]).catch(() => {
+    throw new Error('Failed to load configuration from server');
+  });
 
   if (!environment || !environment.ablyKey) {
     throw new Error('Failed to load configuration from server');
   }
 
   const { ablyKey } = environment;
+  const { participant, roomId } = options;
 
   const isEnteringTwice = await ApiService.validadeParticipantIsEnteringTwice(
-    options.participant,
-    options.roomId,
+    participant,
+    roomId,
     apiKey,
     ablyKey,
   );
@@ -126,6 +131,12 @@ const init = async (apiKey: string, options: SuperVizSdkOptions): Promise<Launch
     colors: options.customColors,
   });
 
+  ApiService.createOrUpdateParticipant({
+    name: participant.name,
+    participantId: participant.id,
+    avatar: participant.avatar?.imageUrl,
+  });
+
   return LauncherFacade(options);
 };
 

src/core/launcher/index.ts

@@ -21,7 +21,7 @@ export class Launcher extends Observable implements DefaultLauncher {
 
   private isDestroyed = false;
   private activeComponents: ComponentNames[] = [];
-  private activeComponentsInstances: BaseComponent[] = [];
+  private activeComponentsInstances: Partial<BaseComponent>[] = [];
   private participant: Participant;
   private group: Group;
 
@@ -59,7 +59,7 @@ export class Launcher extends Observable implements DefaultLauncher {
    * @param component - component to add
    * @returns {void}
    */
-  public addComponent = (component: BaseComponent): void => {
+  public addComponent = (component: Partial<BaseComponent>): void => {
     if (!this.canAddComponent(component)) return;
 
     component.attach({
@@ -75,11 +75,6 @@ export class Launcher extends Observable implements DefaultLauncher {
     this.realtime.updateMyProperties({ activeComponents: this.activeComponents });
 
     ApiService.sendActivity(this.participant.id, this.group.id, this.group.name, component.name);
-    ApiService.createOrUpdateParticipant({
-      name: this.participant?.name,
-      participantId: this.participant?.id,
-      avatar: this.participant?.avatar?.imageUrl,
-    });
   };
 
   /**
@@ -88,7 +83,7 @@ export class Launcher extends Observable implements DefaultLauncher {
    * @param component - component to remove
    * @returns {void}
    */
-  public removeComponent = (component: BaseComponent): void => {
+  public removeComponent = (component: Partial<BaseComponent>): void => {
     if (!this.activeComponents.includes(component.name)) {
       const message = `Component ${component.name} is not initialized yet.`;
       this.logger.log(message);
@@ -141,7 +136,7 @@ export class Launcher extends Observable implements DefaultLauncher {
    * @param component - component to be added
    * @returns {boolean}
    */
-  private canAddComponent = (component: BaseComponent): boolean => {
+  private canAddComponent = (component: Partial<BaseComponent>): boolean => {
     const isWhitelisted = this.realtime?.isDomainWhitelisted;
     const hasComponentLimit = LimitsService.checkComponentLimit(component.name);
     const isComponentActive = this.activeComponents.includes(component.name);
@@ -223,7 +218,7 @@ export class Launcher extends Observable implements DefaultLauncher {
   private onParticipantListUpdate = (participants: Record<string, AblyParticipant>): void => {
     this.logger.log('launcher service @ onParticipantListUpdate', participants);
 
-    const participantList = Object.values(participants).map((participant) => ({
+    const participantList: Participant[] = Object.values(participants).map((participant) => ({
       id: participant.data.id,
       name: participant.data?.name,
       type: participant.data?.type,

src/services/realtime/ably/index.ts

@@ -1464,6 +1464,8 @@ export default class AblyRealtimeService extends RealtimeService implements Ably
   };
 
   public updatePresence3D = throttle((data: ParticipantInfo): void => {
+    if (!data || !data.id) return;
+
     const participant = Object.assign({}, this.participantsOn3d[data.id]?.data ?? {}, data);
 
     this.participantsOn3d[data.id] = {