Merge pull request #766 from SuperViz/beta

Beta

.esbuild/build.js

@@ -6,12 +6,12 @@ const esbuild = require('esbuild');
     await Promise.all([
       esbuild.build({
         ...cjsConfig,
-        outfile: 'lib/index.cjs.js',
+        outfile: 'dist/index.cjs.js',
       }),
 
       esbuild.build({
         ...esmConfig,
-        outdir: 'lib',
+        outdir: 'dist',
       }),
     ]);
   } catch (error) {

__mocks__/config.mock.ts

@@ -6,7 +6,6 @@ import { LIMITS_MOCK } from './limits.mock';
 import { WATERMARK_MOCK } from './watermark.mock';
 
 export const MOCK_CONFIG: Configuration = {
-  ablyKey: 'unit-test-ably-key',
   apiKey: 'unit-test-api-key',
   apiUrl: 'http://unit-test-api-url',
   conferenceLayerUrl: 'https://unit-test-conference-layer-url',

__mocks__/io.mock.ts

@@ -1,5 +1,5 @@
 import { jest } from '@jest/globals';
-import { Room } from '../src/lib/socket';
+import { Room } from '@superviz/socket-client';
 
 export const MOCK_IO = {
   ClientState: {

jest.setup.js

@@ -36,4 +36,4 @@ global.DOMPoint = class {
   }
 };
 
-jest.mock('./src/lib/socket', () => MOCK_IO);
+jest.mock('@superviz/socket-client', () => MOCK_IO);

package.json

@@ -2,14 +2,14 @@
   "name": "@superviz/sdk",
   "version": "0.0.0-development",
   "description": "SuperViz SDK",
-  "main": "./lib/index.js",
-  "types": "./lib/index.d.ts",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "exports": {
-    "import": "./lib/index.js",
-    "require": "./lib/index.cjs.js"
+    "import": "./dist/index.js",
+    "require": "./dist/index.cjs.js"
   },
   "files": [
-    "lib"
+    "dist"
   ],
   "scripts": {
     "prepare": "husky install",
@@ -92,7 +92,7 @@
     "luxon": "^3.4.4",
     "rxjs": "^7.8.1",
     "semantic-release-version-file": "^1.0.2",
-    "socket.io-client": "^4.7.5",
+    "@superviz/socket-client": "^1.10.0",
     "zod": "^3.23.8"
   },
   "config": {

src/common/styles/global.css

@@ -5,7 +5,8 @@
   --sv-primary: 98, 16, 204;
 }
 
-html, body {
+html,
+body {
   width: 100%;
   height: 100%;
   overflow: hidden;
@@ -46,14 +47,14 @@ html, body {
   display: none;
 }
 
-
 /* Presence Mouse */
 
 .pointer-mouse {
   display: flex;
-  height: 17px;
-  width: 17px;
+  height: 15px;
+  width: 16px;
   background-image: url(https://production.cdn.superviz.com/static/pointers/0.svg);
+  background-repeat: no-repeat;
 }
 
 .mouse-user-name {
@@ -76,4 +77,4 @@ html, body {
   display: block;
   z-index: 2;
   transition: all 150ms linear, opacity 100s ease-in;
-}
+}

src/common/types/cdn.types.ts

@@ -1,4 +1,4 @@
-import {
+import type {
   CanvasPin,
   HTMLPin,
   Comments,
@@ -8,15 +8,18 @@ import {
   WhoIsOnline,
   FormElements,
 } from '../../components';
-import { RealtimeComponentEvent, RealtimeComponentState } from '../../components/realtime/types';
-import { LauncherFacade } from '../../core/launcher/types';
-import {
+import type {
+  RealtimeComponentEvent,
+  RealtimeComponentState,
+} from '../../components/realtime/types';
+import type { LauncherFacade } from '../../core/launcher/types';
+import type {
   CamerasPosition,
   LayoutMode,
   LayoutPosition,
 } from '../../services/video-conference-manager/types';
 
-import {
+import type {
   DeviceEvent,
   MeetingEvent,
   RealtimeEvent,
@@ -31,6 +34,10 @@ import {
 } from './events.types';
 import { ParticipantType } from './participant.types';
 import { SuperVizSdkOptions } from './sdk-options.types';
+import { StoreType } from '../types/stores.types';
+import { PresenceEvents } from '@superviz/socket-client';
+import { FieldEvents } from '../../components/form-elements/types';
+import { PinMode } from '../../web-components/comments/components/types';
 
 export interface SuperVizCdn {
   init: (apiKey: string, options: SuperVizSdkOptions) => Promise<LauncherFacade>;
@@ -59,4 +66,9 @@ export interface SuperVizCdn {
   FormElements: typeof FormElements;
   RealtimeComponentState: typeof RealtimeComponentState;
   RealtimeComponentEvent: typeof RealtimeComponentEvent;
+  StoreType: typeof StoreType;
+  PresenceEvents: typeof PresenceEvents;
+  FieldEvents: typeof FieldEvents;
+  PinMode: typeof PinMode;
+  Comment: typeof Comment;
 }

src/common/types/sdk-options.types.ts

@@ -11,8 +11,9 @@ export interface SuperVizSdkOptions {
   roomId: string;
   participant: {
     id: string;
-    name: string;
+    name?: string;
     avatar?: Avatar;
+    email?: string;
   };
   group: Group;
   customColors?: ColorsVariables;

src/components/base/index.ts

@@ -1,4 +1,4 @@
-import * as Socket from '../../lib/socket';
+import * as Socket from '@superviz/socket-client';
 
 import { ComponentLifeCycleEvent } from '../../common/types/events.types';
 import { Group } from '../../common/types/participant.types';

src/components/comments/index.test.ts

@@ -11,7 +11,7 @@ import ApiService from '../../services/api';
 import { IOC } from '../../services/io';
 import { Presence3DManager } from '../../services/presence-3d-manager';
 import { useGlobalStore } from '../../services/stores';
-import { CommentsFloatButton } from '../../web-components';
+import type { CommentsFloatButton } from '../../web-components/comments/components/float-button';
 import { ComponentNames } from '../types';
 
 import { PinAdapter, CommentsSide, Annotation, PinCoordinates } from './types';

src/components/comments/index.ts

@@ -5,7 +5,7 @@ import { Logger } from '../../common/utils';
 import ApiService from '../../services/api';
 import config from '../../services/config';
 import subject from '../../services/stores/subject';
-import type { Comments as CommentElement } from '../../web-components';
+import type { Comments as CommentElement } from '../../web-components/comments';
 import { CommentsFloatButton } from '../../web-components/comments/components/float-button';
 import { BaseComponent } from '../base';
 import { ComponentNames } from '../types';
@@ -152,6 +152,7 @@ export class Comments extends BaseComponent {
    * @returns {void}
    */
   protected start(): void {
+    if (typeof window === 'undefined') return;
     this.clientUrl = window.location.href;
 
     this.positionComments();

src/components/form-elements/index.ts

@@ -1,4 +1,4 @@
-import type { SocketEvent } from '../../lib/socket';
+import type { SocketEvent } from '@superviz/socket-client';
 
 import { Participant } from '../../common/types/participant.types';
 import { StoreType } from '../../common/types/stores.types';

src/components/form-elements/types.ts

@@ -1,4 +1,4 @@
-import { SocketEvent } from '../../lib/socket';
+import { SocketEvent } from '@superviz/socket-client';
 
 export type FormElementsProps = {
   fields?: string[] | string;

src/components/presence-mouse/canvas/index.ts

@@ -1,4 +1,4 @@
-import * as Socket from '../../../lib/socket';
+import * as Socket from '@superviz/socket-client';
 import { throttle } from 'lodash';
 
 import { RealtimeEvent } from '../../../common/types/events.types';

src/components/presence-mouse/html/index.ts

@@ -1,4 +1,4 @@
-import * as Socket from '../../../lib/socket';
+import * as Socket from '@superviz/socket-client';
 import { isEqual } from 'lodash';
 import { Subscription, fromEvent, throttleTime } from 'rxjs';
 
@@ -205,6 +205,8 @@ export class PointersHTML extends BaseComponent {
    * @returns {void}
    */
   private onMyParticipantMouseLeave = (event: MouseEvent): void => {
+    if (typeof window === 'undefined') return;
+
     const { left, top, right, bottom } = this.container.getBoundingClientRect();
     const isInsideContainer =
       event.x > left && event.y > top && event.x < right && event.y < bottom;

src/components/realtime/channel.test.ts

@@ -34,14 +34,14 @@ describe('Realtime Channel', () => {
       ChannelInstance['state'] = RealtimeChannelState.DISCONNECTED;
 
       const spy = jest.spyOn(ChannelInstance['logger'], 'log' as any);
-      ChannelInstance.publish('test');
+      ChannelInstance.publish('test', {});
 
       expect(spy).toHaveBeenCalled();
     });
 
     test('should publish an event', () => {
       const spy = jest.spyOn(ChannelInstance['channel'], 'emit' as any);
-      ChannelInstance.publish('test');
+      ChannelInstance.publish('test', {});
 
       expect(spy).toHaveBeenCalled();
     });

src/components/realtime/channel.ts

@@ -1,12 +1,20 @@
-import * as Socket from '../../lib/socket';
+import * as Socket from '@superviz/socket-client';
 import throttle from 'lodash/throttle';
 
-import { ComponentLifeCycleEvent } from '../../common/types/events.types';
 import { Participant } from '../../common/types/participant.types';
 import { Logger, Observable, Observer } from '../../common/utils';
 import { IOC } from '../../services/io';
 
-import { RealtimeChannelEvent, RealtimeChannelState, RealtimeData, RealtimeMessage } from './types';
+import {
+  RealtimeChannelEvent,
+  RealtimeChannelState,
+  RealtimeData,
+  RealtimeMessage,
+  RealtimePublish,
+  RealtimeChannelSubscribe,
+  Callback,
+} from './types';
+import { RealtimePresence } from './presence';
 
 export class Channel extends Observable {
   private name: string;
@@ -19,6 +27,7 @@ export class Channel extends Observable {
     event: string;
     callback: (data: unknown) => void;
   }> = [];
+  public participant: RealtimePresence;
 
   constructor(
     name: string,
@@ -36,6 +45,7 @@ export class Channel extends Observable {
 
     this.subscribeToRealtimeEvents();
     this.logger.log('started');
+    this.participant = new RealtimePresence(this.channel);
   }
 
   public async disconnect(): Promise<void> {
@@ -51,16 +61,11 @@ export class Channel extends Observable {
 
   /**
    * @function publish
-   * @description Publishes an event with optional data to the channel.
+   * @description Publishes an event with data to the channel.
    * @param event - The name of the event to publish.
-   * @param data - Optional data to be sent along with the event.
+   * @param data - Data to be sent along with the event.
    */
-  public publish = throttle((event: string, data?: unknown): void => {
-    if (Object.values(ComponentLifeCycleEvent).includes(event as ComponentLifeCycleEvent)) {
-      this.publishEventToClient(event, data);
-      return;
-    }
-
+  public publish: RealtimePublish = throttle((event: string, data): void => {
     if (this.state !== RealtimeChannelState.CONNECTED) {
       const message = `Realtime channel ${this.name} is not started yet. You can't publish event ${event} before start`;
       this.logger.log(message);
@@ -78,7 +83,10 @@ export class Channel extends Observable {
    * @param event - The name of the event to subscribe to.
    * @param callback - The callback function to handle the received data. It takes a parameter of type `RealtimeMessage` or `string`.
    */
-  public subscribe = (event: string, callback: (data: RealtimeMessage | string) => void): void => {
+  public subscribe: RealtimeChannelSubscribe = <T = unknown>(
+    event: string,
+    callback: Callback<T>,
+  ): void => {
     if (this.state !== RealtimeChannelState.CONNECTED) {
       this.callbacksToSubscribeWhenJoined.push({ event, callback });
       return;
@@ -97,13 +105,11 @@ export class Channel extends Observable {
    * @param event - The event to unsubscribe from.
    * @param callback - An optional callback function to be called when the event is unsubscribed.
    */
-  public unsubscribe = (
+  public unsubscribe: RealtimeChannelSubscribe = <T = unknown>(
     event: string,
-    callback?: (data: RealtimeMessage | string) => void,
+    callback?: Callback<T>,
   ): void => {
-    if (!this.observers[event]) return;
-
-    this.observers[event].unsubscribe(callback);
+    this.observers[event]?.unsubscribe(callback);
   };
 
   /**
@@ -116,7 +122,10 @@ export class Channel extends Observable {
     this.logger.log('realtime component @ changeState - state changed', state);
     this.state = state;
 
-    this.publishEventToClient(RealtimeChannelEvent.REALTIME_CHANNEL_STATE_CHANGED, this.state);
+    this.publishEventToClient<RealtimeChannelState>(
+      RealtimeChannelEvent.REALTIME_CHANNEL_STATE_CHANGED,
+      this.state,
+    );
   }
 
   private subscribeToRealtimeEvents(): void {
@@ -136,13 +145,13 @@ export class Channel extends Observable {
 
     this.channel.on<RealtimeData>(`message:${this.name}`, (event) => {
       this.logger.log('message received', event);
-      this.publishEventToClient(event.data.name, {
+      this.publishEventToClient<RealtimeMessage>(event.data.name, {
         data: event.data.payload,
-        participantId: event?.presence?.id || null,
+        participantId: event?.presence?.id ?? null,
         name: event.data.name,
         timestamp: event.timestamp,
         connectionId: event.connectionId,
-      } as RealtimeMessage);
+      });
     });
   }
 
@@ -214,11 +223,9 @@ export class Channel extends Observable {
    * @param data - data to publish
    * @returns {void}
    */
-  private publishEventToClient = (event: string, data?: unknown): void => {
+  private publishEventToClient = <T = unknown>(event: string, data?: T): void => {
     this.logger.log('realtime channel @ publishEventToClient', { event, data });
 
-    if (!this.observers[event]) return;
-
-    this.observers[event].publish(data);
+    this.observers[event]?.publish(data);
   };
 }