Merge pull request #636 from SuperViz/beta

Introducing V6 - New realtime 🎉

.esbuild/build.js

@@ -6,7 +6,23 @@ const config = Object.assign({}, baseConfig, {
 });
 
 require('esbuild')
-  .build(config)
+  .build({
+    ...config,
+    platform: 'node', // for CJS
+    outfile: 'lib/index.js',
+  })
+  .catch((error) => {
+    console.error(error);
+    process.exit(1);
+  });
+
+require('esbuild')
+  .build({
+    ...config,
+    platform: 'neutral', // for ESM
+    format: 'esm',
+    outfile: 'lib/index.esm.js',
+  })
   .catch((error) => {
     console.error(error);
     process.exit(1);

.esbuild/config.js

@@ -1,16 +1,12 @@
 require('dotenv').config();
 const { style } = require('./plugins/style-loader');
+const { dependencies } = require('../package.json');
 
 const entries = Object.entries(process.env).filter((key) => key[0].startsWith('SDK_'));
 const env = Object.fromEntries(entries);
 
 module.exports = {
-  entryPoints: [
-    './src/index.ts',
-    './src/core/index.ts',
-    './src/components/index.ts',
-    './src/web-components/index.ts',
-  ],
+  entryPoints: ['./src/index.ts'],
   loader: {
     '.png': 'file',
     '.svg': 'file',
@@ -23,7 +19,7 @@ module.exports = {
   bundle: true,
   target: 'es6',
   format: 'esm',
-  outdir: 'lib',
+  external: Object.keys(dependencies),
   define: {
     'process.env': JSON.stringify(env),
   },

.esbuild/watch.js

@@ -2,11 +2,26 @@ const baseConfig = require('./config');
 
 const config = Object.assign({}, baseConfig, {
   watch: true,
-  outdir: 'dist',
 });
 
 require('esbuild')
-  .build(config)
+  .build({
+    ...config,
+    platform: 'node', // for CJS
+    outfile: 'dist/index.js',
+  })
+  .catch((error) => {
+    console.error(error);
+    process.exit(1);
+  });
+
+require('esbuild')
+  .build({
+    ...config,
+    platform: 'neutral', // for ESM
+    format: 'esm',
+    outfile: 'dist/index.esm.js',
+  })
   .catch((error) => {
     console.error(error);
     process.exit(1);

.github/workflows/checks.yml

@@ -6,11 +6,11 @@ on:
       - opened
       - synchronize
 jobs:
-  delete-comments: 
+  delete-comments:
     runs-on: ubuntu-latest
     steps:
       - uses: izhangzhihao/delete-comment@master
-        with: 
+        with:
           github_token: ${{ secrets.GITHUB_TOKEN }}
           delete_user_name: SuperViz-Dev
           issue_number: ${{ github.event.number }}
@@ -28,7 +28,7 @@ jobs:
           touch .version.js && echo "echo \"export const version = 'test'\" > .version.js" | bash -
       - name: Create a .remote-config.js file
         run: |
-          touch .remote-config.js && echo "echo \"export default { apiUrl: 'https://localhost:3000', conferenceLayerUrl: 'https://localhost:8080' }\" > .remote-config.js" | bash -
+          touch .remote-config.js && echo "echo \"module.exports = { remoteConfig: { apiUrl: 'https://dev.nodeapi.superviz.com', conferenceLayerUrl: 'https://video-frame.superviz.com/lab/index.html'}};\" > .remote-config.js" | bash -
       - name: Run tests
         run: yarn test:unit:ci --coverage
       - name: Code Coverage Report
@@ -70,6 +70,6 @@ jobs:
           touch .version.js && echo "echo \"export const version = 'test'\" > .version.js" | bash -
       - name: Create a .remote-config.js file
         run: |
-          touch .remote-config.js && echo "echo \"export default { apiUrl: 'https://localhost:3000', conferenceLayerUrl: 'https://localhost:8080' }\" > .remote-config.js" | bash -
+          touch .remote-config.js && echo "echo \"module.exports = { remoteConfig: { apiUrl: 'https://dev.nodeapi.superviz.com', conferenceLayerUrl: 'https://video-frame.superviz.com/lab/index.html'}};\" > .remote-config.js" | bash -
       - name: Build
         run: yarn build

.github/workflows/publish-beta-release.yml

@@ -19,7 +19,7 @@ jobs:
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
       - name: Create a .remote-config.js file
         run: |
-          touch .remote-config.js && echo "echo \"export default { apiUrl: 'https://localhost:3000', conferenceLayerUrl: 'https://localhost:8080' }\" > .remote-config.js" | bash -
+          touch .remote-config.js && echo "echo \"module.exports = { remoteConfig: { apiUrl: 'https://dev.nodeapi.superviz.com', conferenceLayerUrl: 'https://video-frame.superviz.com/lab/index.html'}};\" > .remote-config.js" | bash -
       - run: git config --global user.name SuperViz
       - run: git config --global user.email ci@superviz.com
       - name: Publish npm package

.github/workflows/publish-lab-release.yml

@@ -19,7 +19,7 @@ jobs:
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
       - name: Create a .remote-config.js file
         run: |
-          touch .remote-config.js && echo "echo \"export default { apiUrl: 'https://localhost:3000', conferenceLayerUrl: 'https://localhost:8080' }\" > .remote-config.js" | bash -
+          touch .remote-config.js && echo "echo \"module.exports = { remoteConfig: { apiUrl: 'https://dev.nodeapi.superviz.com', conferenceLayerUrl: 'https://video-frame.superviz.com/lab/index.html'}};\" > .remote-config.js" | bash -
       - run: git config --global user.name SuperViz
       - run: git config --global user.email ci@superviz.com
       - name: Publish npm package

.github/workflows/publish-prod-release.yml

@@ -19,7 +19,7 @@ jobs:
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
       - name: Create a .remote-config.js file
         run: |
-          touch .remote-config.js && echo "echo \"export default { apiUrl: 'https://localhost:3000', conferenceLayerUrl: 'https://localhost:8080' }\" > .remote-config.js" | bash -
+          touch .remote-config.js && echo "echo \"module.exports = { remoteConfig: { apiUrl: 'https://dev.nodeapi.superviz.com', conferenceLayerUrl: 'https://video-frame.superviz.com/lab/index.html'}};\" > .remote-config.js" | bash -
       - run: git config --global user.name SuperViz
       - run: git config --global user.email ci@superviz.com
       - name: Publish npm package

.remote-config.d.ts

@@ -0,0 +1,4 @@
+export namespace remoteConfig {
+    let apiUrl: string;
+    let conferenceLayerUrl: string;
+}

.version.d.ts

@@ -0,0 +1 @@
+export const version: "lab";

__mocks__/io.mock.ts

@@ -0,0 +1,32 @@
+import { jest } from '@jest/globals';
+import * as Socket from '@superviz/socket-client';
+
+export const MOCK_IO = {
+  Realtime: class {
+    public connection: {
+      on: (state: string) => void;
+      off: () => void;
+    };
+
+    constructor(apiKey: string, environment: string, participant: any) {
+      this.connection = {
+        on: jest.fn(),
+        off: jest.fn(),
+      };
+    }
+
+    public connect() {
+      return {
+        on: jest.fn(),
+        off: jest.fn(),
+        emit: jest.fn(),
+        presence: {
+          on: jest.fn(),
+          off: jest.fn(),
+        },
+      };
+    }
+
+    public destroy() {}
+  },
+};

__mocks__/realtime.mock.ts

@@ -29,7 +29,6 @@ export const ABLY_REALTIME_MOCK: AblyRealtimeService = {
   setDrawing: jest.fn(),
   freezeSync: jest.fn(),
   setParticipantData: jest.fn(),
-  setSyncProperty: jest.fn(),
   setKickParticipant: jest.fn(),
   setTranscript: jest.fn(),
   start: jest.fn(),
@@ -39,13 +38,6 @@ export const ABLY_REALTIME_MOCK: AblyRealtimeService = {
   setGatherWIOParticipant: jest.fn(),
   domainWhitelisted: true,
   isDomainWhitelisted: jest.fn().mockReturnValue(true),
-  fetchSyncClientProperty: jest.fn((key?: string) => {
-    if (key) {
-      return createRealtimeMessage(key);
-    }
-
-    return createRealtimeHistory();
-  }),
   getSlotColor: jest.fn().mockReturnValue({
     color: MeetingColorsHex[0],
     name: MeetingColors[0],
@@ -61,7 +53,6 @@ export const ABLY_REALTIME_MOCK: AblyRealtimeService = {
   participantsObserver: MOCK_OBSERVER_HELPER,
   participantJoinedObserver: MOCK_OBSERVER_HELPER,
   participantLeaveObserver: MOCK_OBSERVER_HELPER,
-  syncPropertiesObserver: MOCK_OBSERVER_HELPER,
   kickAllParticipantsObserver: MOCK_OBSERVER_HELPER,
   kickParticipantObserver: MOCK_OBSERVER_HELPER,
   authenticationObserver: MOCK_OBSERVER_HELPER,

jest.config.js

@@ -20,5 +20,10 @@ module.exports = {
     '/e2e/',
     '/src/web-components',
   ],
+  transformIgnorePatterns: ['node_modules/(?!@superviz/socket-client)'],
+  transform: {
+    '^.+\\.ts$': 'ts-jest',
+    '^.+\\.js$': 'ts-jest',
+  },
   setupFiles: ['<rootDir>/jest.setup.js'],
 };

package.json

@@ -3,17 +3,18 @@
   "version": "0.0.0-development",
   "description": "SuperViz SDK",
   "main": "./lib/index.js",
+  "module": "./lib/index.esm.js",
   "types": "./lib/index.d.ts",
   "files": [
     "lib"
   ],
   "scripts": {
     "prepare": "husky install",
     "build": "node ./.esbuild/build.js",
-    "postbuild": "./node_modules/typescript/bin/tsc --emitDeclarationOnly --declaration",
+    "postbuild": "./node_modules/typescript/bin/tsc",
     "watch": "concurrently -n code,types \"yarn watch:code\" \"yarn watch:types\"",
     "watch:code": "node ./.esbuild/watch.js",
-    "watch:types": "./node_modules/typescript/bin/tsc --watch --outDir dist",
+    "watch:types": "./node_modules/typescript/bin/tsc --watch --outDir ./dist",
     "test:unit": "jest",
     "test:unit:watch": "jest --watch",
     "test:unit:coverage": "jest --coverage",
@@ -71,12 +72,13 @@
     "jest-fetch-mock": "^3.0.3",
     "rimraf": "^5.0.5",
     "semantic-release": "^22.0.5",
-    "ts-jest": "^29.1.1",
+    "ts-jest": "^29.1.2",
     "tsc": "^2.0.4",
     "typescript": "^5.2.2",
     "yargs": "^17.7.2"
   },
   "dependencies": {
+    "@superviz/socket-client": "1.2.2",
     "ably": "^1.2.45",
     "bowser": "^2.11.0",
     "bowser-jr": "^1.0.6",
@@ -86,6 +88,7 @@
     "lodash.debounce": "^4.0.8",
     "lodash.isequal": "^4.5.0",
     "luxon": "^3.4.3",
+    "rxjs": "^7.8.1",
     "semantic-release-version-file": "^1.0.2"
   },
   "config": {

src/common/styles/global.css

@@ -1,4 +1,4 @@
-@import url('https://unpkg.com/@superviz/sv-icons@0.8.12/css/style.css');
+@import url('https://unpkg.com/@superviz/sv-icons@0.8.13/css/style.css');
 @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;700&family=Roboto:wght@400;500;700&display=swap');
 
 :root {
@@ -17,7 +17,7 @@ html, body {
   margin: 0;
   padding: 0;
   overflow: hidden;
-  z-index: 5;
+  z-index: 1000;
 }
 
 #sv-video-wrapper iframe.sv-video-frame--right {
@@ -75,5 +75,5 @@ html, body {
   position: absolute;
   display: block;
   z-index: 2;
-  transition: all 300ms ease-in-out;
+  transition: all 150ms linear, opacity 100s ease-in;
 }

src/common/types/participant.types.ts

@@ -6,11 +6,20 @@ export enum ParticipantType {
   AUDIENCE = 'audience',
 }
 
+export type Slot = {
+  index: number;
+  color: string;
+  textColor: string;
+  colorName: string;
+  timestamp: number;
+};
+
 export interface Participant {
   id: string;
   name?: string;
   type?: ParticipantType;
   color?: string;
+  slot?: Slot;
   avatar?: Avatar;
   isHost?: boolean;
   // @NOTE - this is a hack to make the participant info work with the 3D avatar