@digitalsamba/embedded-sdk 0.0.1

package/.editorconfig

@@ -0,0 +1,10 @@
+root = true
+
+[*]
+end_of_line = lf
+insert_final_newline = true
+
+[*.{js,json,yml}]
+charset = utf-8
+indent_style = space
+indent_size = 2

package/.github/workflows/main.yml

@@ -0,0 +1,32 @@
+name: Publish Package to npmjs
+
+on:
+  push:
+    branches:
+      - release
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+    - name: Clone repository
+      uses: actions/checkout@v3
+
+    - name: Setup .npmrc file to publish to npm
+      uses: actions/setup-node@v3
+      with:
+        node-version: '16'
+        registry-url: 'https://registry.npmjs.org'
+
+    - name: Setup git identity
+      run: |
+        git config --global user.email "github@digitalsamba.com"
+        git config --global user.name "Digital Samba"
+
+    - name: execute yarn
+      run: yarn
+
+    - name: yarn publish
+      run: yarn publish
+      env:
+        NODE_AUTH_TOKEN: ${{ secrets.EMBEDDED_SDK_NPM_TOKEN }}

package/LICENSE

@@ -0,0 +1,22 @@
+
+MIT License
+
+Copyright (c) 2022 Digital Samba
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,122 @@
+## Description
+
+Digital Samba Embedded SDK - control easily with JS your iframe integration.
+
+### Usage with NPM
+
+Add it to dependency list using your preferred package manager:
+
+```npm install @digitalsamba/embedded-sdk```
+
+or
+
+```yarn install @digitalsamba/embedded-sdk```
+
+After installation, use it in your application code using provided import:
+
+```js
+const DigitalSambaEmbedded = require('@digitalsamba/embedded-sdk')
+
+// or, using imports
+import DigitalSambaEmbedded from '@digitalsamba/embedded-sdk'
+```
+
+This package is written in TypeScript, so type defintitions are also available:
+
+```ts 
+import { SendMessageType, ReceiveMessageType, /* ...etc */} from '@digitalsamba/embedded-sdk'
+```
+
+### Initialization
+
+Library provides alternative initialization styles. Using the class constructor you can configure it and load the frame
+in one call:
+
+```js
+const api = new DigitalSambaEmbedded(InitOptions, InstanceProperties /* optional */);
+```
+
+or you can pre-configure the instance and then load it on-demand:
+
+```js
+// notice `createControl` vs constructor call
+const api = DigitalSambaEmbedded.createControl(InitOptions);
+
+// ...
+// when necessary, load the frame:
+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 private rooms
+
+To successfuly 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
+
+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
+
+### Usage
+
+To listen for events, attach listener for any of supported events:
+
+```js
+api.on('*', (data) => {
+  console.log(data)
+});
+
+
+api.on('userJoined', (data) => {
+  // ...
+});
+```
+Also see `dist/index.html` for more examples.
+
+To send commands, api instance provides handy utilities:
+
+```js
+api.toggleVideo();
+// ...
+api.disableAudio();
+```
+
+---
+
+### Available events:
+
+* `connected`
+* `userJoined`
+* `userLeft`
+* `videoEnabled`
+* `videoDisabled`
+* `audioEnabled`
+* `audioDisabled`
+* `screenshareStarted`
+* `screenshareStopped`
+
+### Available commands:
+
+* `enableVideo()`
+* `disableVideo()`
+* `toggleVideo(newState?: boolean)`
+* `enableAudio()`
+* `disableAudio()`
+* `toggleAudio(newState?: boolean)`
+* `startScreenshare()`
+* `stopScreenshare()`

package/config/tsconfig.cjs.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../tsconfig",
+  "compilerOptions": {
+    "module": "commonjs",
+    "outDir": "../dist/cjs"
+  }
+}

package/config/tsconfig.esm.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../tsconfig",
+  "compilerOptions": {
+    "module": "ESNext",
+    "outDir": "../dist/esm"
+  }
+}

package/config/tsconfig.types.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../tsconfig",
+  "compilerOptions": {
+    "declaration": true,
+    "emitDeclarationOnly": true,
+    "outDir": "../dist/types"
+  }
+}

package/config/tsconfig.umd.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../tsconfig",
+  "compilerOptions": {
+    "module": "commonjs",
+    "declaration": false
+  }
+}

package/config/webpack.config.js

@@ -0,0 +1,30 @@
+const path = require("path");
+
+module.exports = {
+  mode: "production",
+  entry: "./src/umd.ts",
+  output: {
+    path: path.resolve(__dirname, "../dist/umd"),
+    filename: "index.js",
+    library: "DigitalSambaEmbedded",
+    libraryTarget: "umd",
+    globalObject: "this",
+  },
+  module: {
+    rules: [
+      {
+        test: /\.ts(x*)?$/,
+        exclude: /node_modules/,
+        use: {
+          loader: "ts-loader",
+          options: {
+            configFile: "config/tsconfig.umd.json",
+          },
+        },
+      },
+    ],
+  },
+  resolve: {
+    extensions: [".ts", ".js", ".tsx", ".jsx"],
+  },
+};

package/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "@digitalsamba/embedded-sdk",
+  "packageManager": "yarn@3.1.0",
+  "version": "0.0.1",
+  "license" : "BSD-2-Clause",
+  "scripts": {
+    "build": "npm run build:cjs && npm run build:esm && npm run build:umd && npm run build:types",
+    "build:cjs": "node tools/cleanup cjs && tsc -p config/tsconfig.cjs.json",
+    "build:esm": "node tools/cleanup esm && tsc -p config/tsconfig.esm.json",
+    "build:umd": "node tools/cleanup umd && webpack --config config/webpack.config.js",
+    "build:types": "node tools/cleanup types && tsc -p config/tsconfig.types.json"
+  },
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "umd:main": "dist/umd/index.js",
+  "types": "dist/types/index.d.js",
+  "devDependencies": {
+    "ts-loader": "^9.4.1",
+    "typescript": "^4.8.3",
+    "webpack": "^5.74.0",
+    "webpack-cli": "^4.10.0"
+  }
+}

package/src/index.ts

@@ -0,0 +1,307 @@
+import {
+  ALLOW_ATTRIBUTE_MISSING,
+  INVALID_CONFIG,
+  INVALID_URL,
+  RichError,
+  UNKNOWN_TARGET,
+} from "./utils/errors";
+
+export interface InitOptions {
+  root: HTMLElement;
+  frame: HTMLIFrameElement;
+
+  url: string;
+  team: string;
+  room: string;
+  token?: string;
+}
+
+export 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;
+}
+
+const CONNECT_TIMEOUT = 5000;
+
+export type SendMessageType =
+  | "connect"
+  | "enableVideo"
+  | "enableAudio"
+  | "disableVideo"
+  | "disableAudio"
+  | "toggleVideo"
+  | "toggleAudio"
+  | "startScreenshare"
+  | "stopScreenshare";
+
+export 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;
+}
+
+function isFunction(func: any): func is (payload: any) => void {
+  return func instanceof Function;
+}
+
+export class DigitalSambaEmbedded {
+  initOptions: Partial<InitOptions>;
+
+  savedIframeSrc: string = "";
+
+  allowedOrigin: string = "*";
+
+  connected: boolean = false;
+
+  frame: HTMLIFrameElement = document.createElement("iframe");
+
+  eventHandlers: Partial<
+    Record<ReceiveMessageType | "*", (payload: any) => void>
+  > = {};
+
+  reportErrors: boolean = false;
+
+  constructor(
+    options: Partial<InitOptions> = {},
+    instanceProperties: Partial<InstanceProperties> = {},
+    loadImmediately = true
+  ) {
+    this.initOptions = options;
+
+    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";
+    }
+
+    window.addEventListener("message", this.onMessage);
+  }
+
+  static createControl = (initOptions: InitOptions) => {
+    return new this(initOptions, {}, false);
+  };
+
+  private mountFrame = (loadImmediately: boolean) => {
+    const { url, frame, root } = this.initOptions;
+
+    if (root) {
+      root.appendChild(this.frame);
+    } else if (frame) {
+      this.frame = frame;
+
+      if (!frame.allow) {
+        this.logError(ALLOW_ATTRIBUTE_MISSING);
+      }
+    } else {
+      document.body.appendChild(this.frame);
+    }
+
+    if (url) {
+      try {
+        const frameSrc = new URL(url).toString();
+
+        this.frame.src = frameSrc;
+        this.savedIframeSrc = frameSrc;
+      } catch {
+        this.logError(INVALID_URL);
+      }
+    }
+
+    if (!loadImmediately) {
+      this.savedIframeSrc = this.frame.src;
+      this.frame.src = "";
+    }
+  };
+
+  load = (instanceProperties: InstanceProperties = {}) => {
+    this.reportErrors = instanceProperties.reportErrors || false;
+
+    this.setFrameSrc();
+
+    this.applyFrameProperties(instanceProperties);
+
+    this.frame.style.display = "block";
+  };
+
+  on = (type: ReceiveMessageType, handler: (payload: any) => void) => {
+    this.eventHandlers[type] = handler;
+  };
+
+  private onMessage = (event: MessageEvent<ReceiveMessage>) => {
+    //     if (event.origin !== this.allowedOrigin) {
+    //       // ignore messages from other sources;
+    //       return;
+    //     }
+
+    if (typeof this.eventHandlers["*"] === "function") {
+      this.eventHandlers["*"](event.data);
+    }
+
+    if (event.data.type) {
+      const callback = this.eventHandlers[event.data.type];
+
+      if (isFunction(callback)) {
+        callback(event.data);
+      }
+    }
+  };
+
+  private setFrameSrc = () => {
+    let url = this.savedIframeSrc;
+    const { team, room, token } = this.initOptions;
+
+    if (team && room) {
+      url = `https://${team}.digitalsamba.com/${room}`;
+      if (token) {
+        const params = new URLSearchParams({ token });
+
+        url = `${url}?${params}`;
+      }
+
+      this.frame.src = url;
+    } else {
+      this.logError(INVALID_CONFIG);
+      return;
+    }
+
+    const allowedURL = new URL(this.frame.src);
+
+    this.allowedOrigin = allowedURL.origin;
+
+    this.frame.onload = () => this.checkTarget();
+  };
+
+  private checkTarget() {
+    this.sendMessage({ type: "connect" });
+
+    const confirmationTimeout = window.setTimeout(() => {
+      this.logError(UNKNOWN_TARGET);
+    }, CONNECT_TIMEOUT);
+
+    this.on("connected", () => {
+      this.connected = true;
+      clearTimeout(confirmationTimeout);
+    });
+  }
+
+  private sendMessage<G>(message: SendMessage<G>) {
+    if (this.frame.contentWindow) {
+      this.frame.contentWindow.postMessage(message, {
+        targetOrigin: this.allowedOrigin,
+      });
+    }
+  }
+
+  private logError = (error: RichError) => {
+    if (this.reportErrors) {
+      throw error;
+    }
+  };
+
+  private applyFrameProperties = (
+    instanceProperties: Partial<InstanceProperties>
+  ) => {
+    if (instanceProperties.frameAttributes) {
+      // TODO: only allow specific attrs here; This is a heck to support
+      Object.entries(instanceProperties.frameAttributes).forEach(
+        ([attr, value]) => {
+          if (value !== null && typeof value !== "undefined") {
+            this.frame.setAttribute(attr, value.toString());
+          } else {
+            this.frame.removeAttribute(attr);
+          }
+        }
+      );
+    }
+
+    if (instanceProperties.reportErrors) {
+      this.reportErrors = true;
+    }
+  };
+
+  // commands
+  enableVideo = () => {
+    this.sendMessage({ type: "enableVideo" });
+  };
+
+  disableVideo = () => {
+    this.sendMessage({ type: "disableVideo" });
+  };
+
+  toggleVideo = (enable?: boolean) => {
+    if (typeof enable === "undefined") {
+      this.sendMessage({ type: "toggleVideo" });
+    } else {
+      if (enable) {
+        this.enableVideo();
+      } else {
+        this.disableVideo();
+      }
+    }
+  };
+
+  enableAudio = () => {
+    this.sendMessage({ type: "enableAudio" });
+  };
+
+  disableAudio = () => {
+    this.sendMessage({ type: "disableAudio" });
+  };
+
+  toggleAudio = (enable?: boolean) => {
+    if (typeof enable === "undefined") {
+      this.sendMessage({ type: "toggleAudio" });
+    } else {
+      if (enable) {
+        this.enableAudio();
+      } else {
+        this.disableAudio();
+      }
+    }
+  };
+
+  startScreenshare = () => {
+    this.sendMessage({ type: "startScreenshare" });
+  };
+
+  stopScreenshare = () => {
+    this.sendMessage({ type: "stopScreenshare" });
+  };
+}

package/src/umd.ts

@@ -0,0 +1,4 @@
+import {DigitalSambaEmbedded} from './index';
+
+// compatibility with script tag
+module.exports = DigitalSambaEmbedded

package/src/utils/errors.ts

@@ -0,0 +1,30 @@
+export class RichError extends Error {
+  constructor(error: { name: string; message: string }) {
+    super(error.message);
+
+    this.name = error.name;
+  }
+}
+
+export const UNKNOWN_TARGET = new RichError({
+  name: "UNKNOWN_TARGET",
+  message:
+    "Could not verify the identity of target frame. Commands may not work",
+});
+
+export const INVALID_CONFIG = new RichError({
+  name: "INVALID_INIT_CONFIG",
+  message: "Initializations options are invalid. Missing team name or room ID",
+});
+
+export const ALLOW_ATTRIBUTE_MISSING = new RichError({
+  name: "ALLOW_ATTRIBUTE_MISSING",
+  message:
+    "You've provided a frame that is mising 'allow' attribute. Some functionality may not work.",
+});
+
+
+export const INVALID_URL = new RichError({
+    name: "INVALID_URL",
+    message: "Invalid frame url specified"
+})

package/tools/cleanup.js

@@ -0,0 +1,29 @@
+/* eslint-disable */
+const fs = require("fs");
+const Path = require("path");
+/* eslint-enable */
+
+const deleteFolderRecursive = (path) => {
+  if (fs.existsSync(path)) {
+    fs.readdirSync(path).forEach((file) => {
+      const curPath = Path.join(path, file);
+      if (fs.lstatSync(curPath).isDirectory()) {
+        deleteFolderRecursive(curPath);
+      } else {
+        fs.unlinkSync(curPath);
+      }
+    });
+    fs.rmdirSync(path);
+  }
+};
+
+const folder = process.argv.slice(2)[0];
+
+if (folder) {
+  deleteFolderRecursive(Path.join(__dirname, "../dist", folder));
+} else {
+  deleteFolderRecursive(Path.join(__dirname, "../dist/cjs"));
+  deleteFolderRecursive(Path.join(__dirname, "../dist/esm"));
+  deleteFolderRecursive(Path.join(__dirname, "../dist/umd"));
+  deleteFolderRecursive(Path.join(__dirname, "../dist/types"));
+}

package/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "declaration": true,
+    "allowJs": true,
+    "incremental": true,
+    "downlevelIteration": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "commonjs",
+    "resolveJsonModule": true,
+    "isolatedModules": false,
+    "jsx": "react-jsx",
+    "noImplicitAny": true,
+    "outDir": "./dist",
+    "esModuleInterop": true,
+    "moduleResolution": "node",
+  },
+  "include": ["./src/**/*"],
+  "exclude": ["node_modules"]
+}