@digitalsamba/embedded-sdk 0.0.7 → 0.0.11

package/README.md

@@ -6,25 +6,25 @@ Digital Samba Embedded SDK - control easily with JS your iframe integration.
 
 Add it to dependency list using your preferred package manager:
 
-```npm install @digitalsamba/embedded-sdk```
+`npm install @digitalsamba/embedded-sdk`
 
 or
 
-```yarn install @digitalsamba/embedded-sdk```
+`yarn install @digitalsamba/embedded-sdk`
 
 After installation, use it in your application code using provided import:
 
 ```js
-const DigitalSambaEmbedded = require('@digitalsamba/embedded-sdk')
+const DigitalSambaEmbedded = require('@digitalsamba/embedded-sdk');
 
 // or, using imports
-import DigitalSambaEmbedded from '@digitalsamba/embedded-sdk'
+import DigitalSambaEmbedded from '@digitalsamba/embedded-sdk';
 ```
 
 This package is written in TypeScript, so type definitions are also available:
 
-```ts 
-import { SendMessageType, ReceiveMessageType, /* ...etc */} from '@digitalsamba/embedded-sdk'
+```ts
+import { SendMessageType, ReceiveMessageType /* ...etc */ } from '@digitalsamba/embedded-sdk';
 ```
 
 ### Initialization
@@ -44,33 +44,33 @@ const api = DigitalSambaEmbedded.createControl(InitOptions);
 
 // ...
 // when necessary, load the frame:
-api.load(InstanceProperties /* optional */)
+api.load(InstanceProperties /* optional */);
 ```
 
 ### InitOptions
 
 `InitOptions` has the following fields:
 
-* `root` - HTMLElement. If specified, target frame will be created within it.
-* `frame` - HTMLIFrameElement to be wrapped.
-* `url` - full URL to be applied as frame src. Must include protocol and `token` query param for private rooms;
-* `team` - team name string
-* `room` - room identifier string
-* `token` - optional string for authentication, mainly for private rooms
+- `root` - HTMLElement. If specified, target frame will be created within it.
+- `frame` - HTMLIFrameElement to be wrapped.
+- `url` - full URL to be applied as frame src. Must include protocol and `token` query param for private rooms;
+- `team` - team name string
+- `room` - room identifier string
+- `token` - optional string for authentication, mainly for private rooms
 
 To successfully initialize an instance of the wrapper one of following combinations needs to be used:
 
-* `root + team + room` - will create a controlled frame inside `root` element
-* `frame + team + room` - will attach to existing frame
-* `frame` - will attach to existing frame (assuming you've manually specified correct frame src)
-* `root + url` - will create a frame inside `root` element
+- `root + team + room` - will create a controlled frame inside `root` element
+- `frame + team + room` - will attach to existing frame
+- `frame` - will attach to existing frame (assuming you've manually specified correct frame src)
+- `root + url` - will create a frame inside `root` element
 
 Remember to always specify `allow="camera; microphone; display-capture; autoplay;"` and `allowFullscreen="true"` attributes on iframe if you want to wrap around an existing iframe.
 
 ### InstanceProperties
 
-* `frameAttributes` - list of attributes to be applied to target iframe
-* `reportErrors` - boolean, false by default. Whether to report misconfiguration or runtime errors to console
+- `frameAttributes` - list of attributes to be applied to target iframe
+- `reportErrors` - boolean, false by default. Whether to report misconfiguration or runtime errors to console
 
 ### Usage
 
@@ -84,13 +84,30 @@ api.on('userJoined', (data) => {
 api.on('userLeft', (data) => {
   // ...
 });
+```
 
-// you can also listen to all events simultaneously 
-api.on('*', (data) => {
-  console.log(data)
+Error event can provide useful details:
+```js
+api.on('appError', (error) => {
+  console.log(error);
+
+  /* outputs  {
+      name: 'recording-not-allowed',
+      message:
+        'Recording disabled. You’ll need to edit this room’s properties to record sessions in this room',
+    }
+  */
 });
+```
+
 
+For debugging purposes, you can also listen to all events simultaneously
+```js
+api.on('*', (data) => {
+  console.log(data);
+});
 ```
+
 Also see `dist/index.html` for more examples.
 
 To send commands, api instance provides handy utilities:
@@ -104,24 +121,34 @@ api.disableAudio();
 ---
 
 ### Available events:
-
-* `connected`
-* `userJoined`
-* `userLeft`
-* `videoEnabled`
-* `videoDisabled`
-* `audioEnabled`
-* `audioDisabled`
-* `screenshareStarted`
-* `screenshareStopped`
+- `appError`
+- `userJoined`
+- `userLeft`
+- `videoEnabled`
+- `videoDisabled`
+- `audioEnabled`
+- `audioDisabled`
+- `screenshareStarted`
+- `screenshareStopped`
+- `recordingStarted`
+- `recordingStopped`
+- `recordingFailed`
+- `layoutModeChanged`
+- `activeSpeakerChanged`
 
 ### Available commands:
 
-* `enableVideo()`
-* `disableVideo()`
-* `toggleVideo(newState?: boolean)`
-* `enableAudio()`
-* `disableAudio()`
-* `toggleAudio(newState?: boolean)`
-* `startScreenshare()`
-* `stopScreenshare()`
+- `enableVideo()`
+- `disableVideo()`
+- `toggleVideo(newState?: boolean)`
+- `enableAudio()`
+- `disableAudio()`
+- `toggleAudio(newState?: boolean)`
+- `startScreenshare()`
+- `stopScreenshare()`
+- `startRecording()`
+- `stopRecording()`
+- `showToolbar()`
+- `hideToolbar()`
+- `toggleToolbar(newState?: boolean)`
+- `changeLayoutMode(mode: 'tiled' | 'auto')`

package/dist/cjs/index.d.ts

@@ -1,54 +1,17 @@
-export interface InitOptions {
-    root: HTMLElement;
-    frame: HTMLIFrameElement;
-    url: string;
-    team: string;
-    room: string;
-    token?: string;
-}
-export declare type FrameAttributes = {
-    align: string;
-    allow: string;
-    allowFullscreen: boolean;
-    frameBorder: string;
-    height: string;
-    longDesc: string;
-    marginHeight: string;
-    marginWidth: string;
-    name: string;
-    referrerPolicy: ReferrerPolicy;
-    scrolling: string;
-    src: string;
-    srcdoc: string;
-    width: string;
-} & HTMLElement;
-export interface InstanceProperties {
-    frameAttributes?: Partial<FrameAttributes>;
-    reportErrors?: boolean;
-}
-export declare type SendMessageType = "connect" | "enableVideo" | "enableAudio" | "disableVideo" | "disableAudio" | "toggleVideo" | "toggleAudio" | "startScreenshare" | "stopScreenshare";
-export declare type ReceiveMessageType = "connected" | "userJoined" | "userLeft" | "videoEnabled" | "videoDisabled" | "audioEnabled" | "audioDisabled" | "screenshareStarted" | "screenshareStopped";
-export interface SendMessage<P> {
-    type: SendMessageType;
-    payload?: P;
-}
-export interface ReceiveMessage {
-    type: ReceiveMessageType;
-    payload: unknown;
-}
-export declare class DigitalSambaEmbedded {
+/// <reference types="node" />
+import { InitOptions, InstanceProperties, LayoutMode } from './types';
+import EventEmitter from 'events';
+export declare class DigitalSambaEmbedded extends EventEmitter {
     initOptions: Partial<InitOptions>;
     savedIframeSrc: string;
     allowedOrigin: string;
     connected: boolean;
     frame: HTMLIFrameElement;
-    eventHandlers: Partial<Record<ReceiveMessageType | "*", (payload: any) => void>>;
     reportErrors: boolean;
     constructor(options?: Partial<InitOptions>, instanceProperties?: Partial<InstanceProperties>, loadImmediately?: boolean);
     static createControl: (initOptions: InitOptions) => DigitalSambaEmbedded;
     private mountFrame;
     load: (instanceProperties?: InstanceProperties) => void;
-    on: (type: ReceiveMessageType, handler: (payload: any) => void) => void;
     private onMessage;
     private setFrameSrc;
     private checkTarget;
@@ -63,4 +26,10 @@ export declare class DigitalSambaEmbedded {
     toggleAudio: (enable?: boolean) => void;
     startScreenshare: () => void;
     stopScreenshare: () => void;
+    startRecording: () => void;
+    stopRecording: () => void;
+    showToolbar: () => void;
+    hideToolbar: () => void;
+    changeLayoutMode: (mode: LayoutMode) => void;
+    toggleToolbar: (show?: boolean) => void;
 }

package/dist/cjs/index.js

@@ -1,218 +1,214 @@
 "use strict";
-var __read = (this && this.__read) || function (o, n) {
-    var m = typeof Symbol === "function" && o[Symbol.iterator];
-    if (!m) return o;
-    var i = m.call(o), r, ar = [], e;
-    try {
-        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
-    }
-    catch (error) { e = { error: error }; }
-    finally {
-        try {
-            if (r && !r.done && (m = i["return"])) m.call(i);
-        }
-        finally { if (e) throw e.error; }
-    }
-    return ar;
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
 };
+var _a;
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DigitalSambaEmbedded = void 0;
-var errors_1 = require("./utils/errors");
-var CONNECT_TIMEOUT = 5000;
+const errors_1 = require("./utils/errors");
+const events_1 = __importDefault(require("events"));
+const CONNECT_TIMEOUT = 10000;
 function isFunction(func) {
     return func instanceof Function;
 }
-var DigitalSambaEmbedded = /** @class */ (function () {
-    function DigitalSambaEmbedded(options, instanceProperties, loadImmediately) {
-        if (options === void 0) { options = {}; }
-        if (instanceProperties === void 0) { instanceProperties = {}; }
-        if (loadImmediately === void 0) { loadImmediately = true; }
-        var _this = this;
-        this.savedIframeSrc = "";
-        this.allowedOrigin = "*";
+class DigitalSambaEmbedded extends events_1.default {
+    constructor(options = {}, instanceProperties = {}, loadImmediately = true) {
+        super();
+        this.savedIframeSrc = '';
+        this.allowedOrigin = '*';
         this.connected = false;
-        this.frame = document.createElement("iframe");
-        this.eventHandlers = {};
+        this.frame = document.createElement('iframe');
         this.reportErrors = false;
-        this.mountFrame = function (loadImmediately) {
-            var _b = _this.initOptions, url = _b.url, frame = _b.frame, root = _b.root;
+        this.mountFrame = (loadImmediately) => {
+            const { url, frame, root } = this.initOptions;
             if (root) {
-                root.appendChild(_this.frame);
+                root.appendChild(this.frame);
             }
             else if (frame) {
-                _this.frame = frame;
+                this.frame = frame;
                 if (!frame.allow) {
-                    _this.logError(errors_1.ALLOW_ATTRIBUTE_MISSING);
+                    this.logError(errors_1.ALLOW_ATTRIBUTE_MISSING);
                 }
             }
             else {
-                document.body.appendChild(_this.frame);
+                document.body.appendChild(this.frame);
             }
-            if (url || (_this.frame.src && _this.frame.src !== window.location.href)) {
+            if (url || (this.frame.src && this.frame.src !== window.location.href)) {
                 try {
-                    var frameSrc = new URL(url || _this.frame.src).toString();
-                    _this.frame.src = frameSrc;
-                    _this.savedIframeSrc = frameSrc;
+                    const frameSrc = new URL(url || this.frame.src).toString();
+                    this.frame.src = frameSrc;
+                    this.savedIframeSrc = frameSrc;
                 }
-                catch (_c) {
-                    _this.logError(errors_1.INVALID_URL);
+                catch (_b) {
+                    this.logError(errors_1.INVALID_URL);
                 }
             }
             if (!loadImmediately) {
-                _this.savedIframeSrc = _this.frame.src;
-                _this.frame.src = "";
-            }
-        };
-        this.load = function (instanceProperties) {
-            if (instanceProperties === void 0) { instanceProperties = {}; }
-            _this.reportErrors = instanceProperties.reportErrors || false;
-            _this.setFrameSrc();
-            _this.applyFrameProperties(instanceProperties);
-            _this.frame.style.display = "block";
-        };
-        this.on = function (type, handler) {
-            _this.eventHandlers[type] = handler;
-        };
-        this.onMessage = function (event) {
-            //     if (event.origin !== this.allowedOrigin) {
-            //       // ignore messages from other sources;
-            //       return;
-            //     }
-            if (typeof _this.eventHandlers["*"] === "function") {
-                _this.eventHandlers["*"](event.data);
-            }
-            if (event.data.type) {
-                var callback = _this.eventHandlers[event.data.type];
-                if (isFunction(callback)) {
-                    callback(event.data);
-                }
+                this.savedIframeSrc = this.frame.src;
+                this.frame.src = '';
             }
         };
-        this.setFrameSrc = function () {
-            var url = _this.savedIframeSrc;
-            var _b = _this.initOptions, team = _b.team, room = _b.room, token = _b.token;
+        this.load = (instanceProperties = {}) => {
+            this.reportErrors = instanceProperties.reportErrors || false;
+            this.setFrameSrc();
+            this.applyFrameProperties(instanceProperties);
+            this.frame.style.display = 'block';
+        };
+        this.onMessage = (event) => {
+            if (event.origin !== this.allowedOrigin) {
+                // ignore messages from other sources;
+                return;
+            }
+            const message = event.data.DSPayload;
+            if (!message) {
+                return;
+            }
+            this.emit('*', message);
+            if (message.type) {
+                this.emit(message.type, message);
+            }
+        };
+        this.setFrameSrc = () => {
+            let url = this.savedIframeSrc;
+            const { team, room, token } = this.initOptions;
             if (team && room) {
-                url = "https://".concat(team, ".digitalsamba.com/").concat(room);
+                url = `https://${team}.digitalsamba.com/${room}`;
             }
             if (url && token) {
-                var urlObj = new URL(url);
-                urlObj.searchParams.append("token", token);
-                url = urlObj.toString(); //`${urlObj.origin}${urlObj.pathname}?${params}`;
+                const urlObj = new URL(url);
+                urlObj.searchParams.append('token', token);
+                url = urlObj.toString();
             }
             if (url) {
-                _this.frame.src = url;
+                this.frame.src = url;
             }
             else {
-                _this.logError(errors_1.INVALID_CONFIG);
+                this.logError(errors_1.INVALID_CONFIG);
                 return;
             }
-            var allowedURL = new URL(_this.frame.src);
-            _this.allowedOrigin = allowedURL.origin;
-            _this.frame.onload = function () { return _this.checkTarget(); };
+            const allowedURL = new URL(this.frame.src);
+            this.allowedOrigin = allowedURL.origin;
+            this.frame.onload = () => this.checkTarget();
         };
-        this.logError = function (error) {
-            if (_this.reportErrors) {
+        this.logError = (error) => {
+            if (this.reportErrors) {
                 throw error;
             }
         };
-        this.applyFrameProperties = function (instanceProperties) {
+        this.applyFrameProperties = (instanceProperties) => {
             if (instanceProperties.frameAttributes) {
                 // TODO: only allow specific attrs here; This is a heck to support
-                Object.entries(instanceProperties.frameAttributes).forEach(function (_b) {
-                    var _c = __read(_b, 2), attr = _c[0], value = _c[1];
-                    if (value !== null && typeof value !== "undefined") {
-                        _this.frame.setAttribute(attr, value.toString());
+                Object.entries(instanceProperties.frameAttributes).forEach(([attr, value]) => {
+                    if (value !== null && typeof value !== 'undefined') {
+                        this.frame.setAttribute(attr, value.toString());
                     }
                     else {
-                        _this.frame.removeAttribute(attr);
+                        this.frame.removeAttribute(attr);
                     }
                 });
             }
             if (instanceProperties.reportErrors) {
-                _this.reportErrors = true;
+                this.reportErrors = true;
             }
         };
         // commands
-        this.enableVideo = function () {
-            _this.sendMessage({ type: "enableVideo" });
+        this.enableVideo = () => {
+            this.sendMessage({ type: 'enableVideo' });
         };
-        this.disableVideo = function () {
-            _this.sendMessage({ type: "disableVideo" });
+        this.disableVideo = () => {
+            this.sendMessage({ type: 'disableVideo' });
         };
-        this.toggleVideo = function (enable) {
-            if (typeof enable === "undefined") {
-                _this.sendMessage({ type: "toggleVideo" });
+        this.toggleVideo = (enable) => {
+            if (typeof enable === 'undefined') {
+                this.sendMessage({ type: 'toggleVideo' });
+            }
+            else if (enable) {
+                this.enableVideo();
             }
             else {
-                if (enable) {
-                    _this.enableVideo();
-                }
-                else {
-                    _this.disableVideo();
-                }
+                this.disableVideo();
             }
         };
-        this.enableAudio = function () {
-            _this.sendMessage({ type: "enableAudio" });
+        this.enableAudio = () => {
+            this.sendMessage({ type: 'enableAudio' });
         };
-        this.disableAudio = function () {
-            _this.sendMessage({ type: "disableAudio" });
+        this.disableAudio = () => {
+            this.sendMessage({ type: 'disableAudio' });
         };
-        this.toggleAudio = function (enable) {
-            if (typeof enable === "undefined") {
-                _this.sendMessage({ type: "toggleAudio" });
+        this.toggleAudio = (enable) => {
+            if (typeof enable === 'undefined') {
+                this.sendMessage({ type: 'toggleAudio' });
+            }
+            else if (enable) {
+                this.enableAudio();
             }
             else {
-                if (enable) {
-                    _this.enableAudio();
-                }
-                else {
-                    _this.disableAudio();
-                }
+                this.disableAudio();
             }
         };
-        this.startScreenshare = function () {
-            _this.sendMessage({ type: "startScreenshare" });
+        this.startScreenshare = () => {
+            this.sendMessage({ type: 'startScreenshare' });
+        };
+        this.stopScreenshare = () => {
+            this.sendMessage({ type: 'stopScreenshare' });
+        };
+        this.startRecording = () => {
+            this.sendMessage({ type: 'startRecording' });
         };
-        this.stopScreenshare = function () {
-            _this.sendMessage({ type: "stopScreenshare" });
+        this.stopRecording = () => {
+            this.sendMessage({ type: 'stopRecording' });
+        };
+        this.showToolbar = () => {
+            this.sendMessage({ type: 'showToolbar' });
+        };
+        this.hideToolbar = () => {
+            this.sendMessage({ type: 'hideToolbar' });
+        };
+        this.changeLayoutMode = (mode) => {
+            this.sendMessage({ type: 'changeLayoutMode', data: mode });
+        };
+        this.toggleToolbar = (show) => {
+            if (typeof show === 'undefined') {
+                this.sendMessage({ type: 'toggleToolbar' });
+            }
+            else if (show) {
+                this.showToolbar();
+            }
+            else {
+                this.hideToolbar();
+            }
         };
         this.initOptions = options;
         this.reportErrors = instanceProperties.reportErrors || false;
-        this.frame.allow = "camera; microphone; display-capture; autoplay;";
-        this.frame.setAttribute("allowFullscreen", "true");
+        this.frame.allow = 'camera; microphone; display-capture; autoplay;';
+        this.frame.setAttribute('allowFullscreen', 'true');
         this.mountFrame(loadImmediately);
         if (loadImmediately) {
             this.load(instanceProperties);
         }
         else {
-            this.frame.style.display = "none";
+            this.frame.style.display = 'none';
         }
-        window.addEventListener("message", this.onMessage);
+        window.addEventListener('message', this.onMessage);
     }
-    DigitalSambaEmbedded.prototype.checkTarget = function () {
-        var _this = this;
-        this.sendMessage({ type: "connect" });
-        var confirmationTimeout = window.setTimeout(function () {
-            _this.logError(errors_1.UNKNOWN_TARGET);
+    checkTarget() {
+        this.sendMessage({ type: 'connect' });
+        const confirmationTimeout = window.setTimeout(() => {
+            this.logError(errors_1.UNKNOWN_TARGET);
         }, CONNECT_TIMEOUT);
-        this.on("connected", function () {
-            _this.connected = true;
+        this.on('connected', () => {
+            this.connected = true;
             clearTimeout(confirmationTimeout);
         });
-    };
-    DigitalSambaEmbedded.prototype.sendMessage = function (message) {
+    }
+    sendMessage(message) {
         if (this.frame.contentWindow) {
             this.frame.contentWindow.postMessage(message, {
                 targetOrigin: this.allowedOrigin,
             });
         }
-    };
-    var _a;
-    _a = DigitalSambaEmbedded;
-    DigitalSambaEmbedded.createControl = function (initOptions) {
-        return new _a(initOptions, {}, false);
-    };
-    return DigitalSambaEmbedded;
-}());
+    }
+}
 exports.DigitalSambaEmbedded = DigitalSambaEmbedded;
+_a = DigitalSambaEmbedded;
+DigitalSambaEmbedded.createControl = (initOptions) => new _a(initOptions, {}, false);