@digitalsamba/embedded-sdk 0.0.19 → 0.0.21

package/dist/demo/style.css

@@ -0,0 +1,305 @@
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+button {
+  cursor: pointer;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+  display: block;
+}
+body {
+  color: rgb(50, 63, 102);
+  line-height: 1;
+}
+ol, ul {
+  list-style: none;
+}
+blockquote, q {
+  quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+  content: '';
+  content: none;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+body {
+ background: #f4f5f8;
+  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+}
+
+.topbar {
+  background: #fff;
+  box-shadow: 0 8px 16px rgba(34,35,38,.05), 0 4px 8px rgba(34,35,38,.05);
+}
+
+a {
+  font-size: 16px;
+  color: rgb(55, 113, 224);
+  text-decoration: none;
+}
+
+.user-list-row {
+  display: flex;
+  margin: 12px 0 8px;
+  align-items: center;
+}
+
+.user-list-avatar {
+  width: 24px;
+  height: 24px;
+  display: block;
+  border-radius: 50%;
+  margin-right: 8px;
+  text-align: center;
+  font-size: 20px;
+  line-height: 1;
+  color: #fff;
+}
+
+.speaker-indicator {
+  width: 8px;
+  height: 8px;
+  display: block;
+  border-radius: 50%;
+  margin-right: 8px;
+  background: #4cd964;
+  opacity: 0;
+  margin-left: 8px;
+}
+
+.speaker-indicator.show {
+  opacity: 1
+}
+
+.container {
+  padding: 0 15px;
+  display: flex;
+  flex-grow: 1;
+  flex-wrap: wrap;
+}
+
+.topbar .container {
+  padding: 7.5px 15px;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.logo {
+  width: 327px;
+  border-width: 0px;
+  border: 0px;
+  height: auto;
+  max-width: 100%;
+  vertical-align: middle;
+}
+
+.room-content {
+  display: flex;
+}
+
+.screen {
+  display: none;
+  min-height: calc(100vh - 75px);
+}
+
+.screen.show {
+  display: flex;
+}
+
+.room-url-field .container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.room-url-field label {
+  margin-bottom: 10px;
+  display: block;
+}
+.room-url-field label b {
+  font-size: 18px;
+
+  display: block;
+  margin-bottom: 5px;
+  font-weight: 700;
+}
+
+.checkbox-label {
+  display: flex;
+  align-items: center;
+  margin-right: 15px;
+}
+
+.room-url-field label.radio-label {
+  margin: 0;
+  margin-right: 8px;
+}
+
+.init-settings-title {
+  font-size: 18px;
+  font-weight: 700;
+  margin-bottom: 5px;
+}
+
+.room-url-field input[type=text] {
+  border: 2px solid rgb(50, 63, 102);
+  margin-bottom: 10px;
+  border-radius: 8px;
+  width: 420px;
+  padding: 8px;
+  font-size: 14px;
+}
+
+.room-url-field select {
+  border: 2px solid rgb(50, 63, 102);
+  margin-bottom: 10px;
+  border-radius: 8px;
+  padding: 8px;
+  font-size: 14px;
+}
+
+.room-url-error {
+  color: crimson;
+}
+
+.room-url-field button {
+  margin-bottom: 10px;
+  border-radius: 8px;
+  padding: 8px 16px;
+  background: rgb(55, 113, 224);
+  border: 2px solid rgb(55, 113, 224);
+  color: #fff;
+  font-size: 14px;
+  text-transform: uppercase;
+}
+
+.room-url-field .vertical {
+  display: flex;
+  flex-direction: column;
+}
+.room-content {
+  flex-grow: 1;
+  align-items: flex-start;
+  max-width: 100%;
+}
+
+.room-frame {
+  align-items: flex-start;
+}
+
+.room-frame .container {
+  padding: 15px 15px;
+}
+
+.sidebar {
+  padding-left: 15px;
+  flex-grow: 1;
+  max-width: calc(100vw - 1055px);
+}
+
+.sidebar-block {
+  border: 1px solid #dfdfdf;
+  background: #fff;
+  padding: 15px;
+  border-radius: 8px;
+  margin-bottom: 15px;
+}
+.hint-title {
+  margin-bottom: 10px;
+}
+.hint-link-url {
+  font-size: 18px;
+  font-weight: 700;
+  margin-bottom: 10px;
+  word-wrap: break-word;
+  line-height: 1.25;
+}
+
+.logs-toggle {
+  background: none;
+  border: none;
+  color: rgb(55, 113, 224);
+  margin-bottom: 7.5px;
+}
+
+.log-list {
+  max-height: 60vh;
+  overflow-y: auto;
+  word-wrap: break-word;
+}
+
+.log-list div {
+  max-width: 90%;
+}
+
+.log-list p {
+  font-size: 14px;
+  margin-bottom: 4px;
+}
+.log-list b {
+  font-weight: 700;
+}
+
+.frame-controls {
+  margin-top: 15px;
+}
+
+.frame-controls button {
+  border-radius: 8px;
+  padding: 8px 16px;
+  background: #fff;
+  border: 2px solid rgb(55, 113, 224);
+  color: rgb(55, 113, 224);
+  font-size: 14px;
+  text-transform: uppercase;
+  margin-right: 8px;
+}
+
+.vb-value {
+  display: none;
+}
+.vb-value.show {
+  display: block;
+}
+
+.participants {
+  display: none;
+}
+.participants.show {
+  display: block
+}
+
+.user-list-row button {
+  margin: 0px 4px;
+  font-size: 14px;
+  border: none;
+  background: none;
+  font-weight: 700;
+  color: rgb(55, 113, 224);
+}

package/dist/demo/videoroom.html

@@ -0,0 +1,137 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Simple videoroom</title>
+  <script src="./index.js"></script>
+  <script src="./helper.js"></script>
+  <link rel="stylesheet" href="./style.css">
+</head>
+
+<body>
+<nav class="topbar">
+  <div class="container">
+    <img class="logo" src="logo.png" alt="DigitalSamba">
+    <a href="https://github.com/digitalsamba/embedded-sdk" target="_blank" rel="noopener nofollow">View on GitHub</a>
+  </div>
+</nav>
+
+
+<div class="screen room-url-field show">
+    <div class="container">
+      <div class="vertical">
+        <label for="custom-room-url">
+          <span><b>Room URL</b></span>
+          <span>Can be found in <a href="https://dashboard.digitalsamba.com/" target="_blank" rel="noopener nofollow">dashboard</a></span>.
+        </label>
+        <div>
+          <input type="text" id="custom-room-url" name="custom-room-url" onkeydown="onURLChange()">
+          <!-- kicks off loading -->
+          <button onclick="loadCustomRoom()">load room</button>
+        </div>
+        <p class="room-url-error"></p>
+      </div>
+    </div>
+</div>
+<div class="screen room-frame">
+  <div class="container">
+    <div class="room-content">
+      <div class="frame-area">
+        <div class="frame-parent">
+          <!-- our frame will load here -->
+        </div>
+        <div class="frame-controls" style="display: none">
+          <button onclick="sambaEmbedded.toggleVideo()">toggle video</button>
+          <button onclick="sambaEmbedded.toggleAudio()">toggle audio</button>
+          <button onclick="sambaEmbedded.toggleToolbar()">toggle toolbar</button>
+        </div>
+      </div>
+      <div class="sidebar"></div>
+    </div>
+  </div>
+
+</div>
+
+<script async defer>
+  let ROOM_URL = 'https://localhost:3000/Public';
+
+  var sambaEmbedded;
+
+  // if room is predefined in search params, skip room URL field;
+  checkDynamicRoomURL();
+
+  function loadCustomRoom() {
+    const input = document.querySelector('#custom-room-url');
+
+    if(input.value) {
+      ROOM_URL = input.value;
+      loadRoom();
+    } else {
+      updateError('Please enter room URL')
+    }
+  }
+
+  function loadRoom() {
+    try {
+      const parent = document.querySelector('.frame-parent');
+      parent.innerHTML = null;
+
+      // create pre-configured controller instance using given URL;
+      // if no frame specified, this pre-creates a frame but doesn't load it yet;
+      // other init strategies are available, along with more detailed customization
+      // see https://docs.digitalsamba.com/reference/sdk/digitalsambaembedded-class
+      sambaEmbedded = DigitalSambaEmbedded.createControl(
+        { url: ROOM_URL, root: parent, roomSettings: {showToolbar: false} },
+        {reportErrors: true}
+      );
+
+      // controller instance exposes the frame, so we can customize it a little bit
+      sambaEmbedded.frame.width = 1000;
+      sambaEmbedded.frame.height = 700;
+      sambaEmbedded.frame.style.border = '5px solid #f06859';
+      sambaEmbedded.frame.style.borderRadius = '8px';
+
+      // load samba frame
+      sambaEmbedded.load();
+
+      addJoiningHint(ROOM_URL);
+      initializeLogs();
+
+      // after loading, controller will start emitting events
+      // event listeners can be set up prior to loading;
+      setupCustomEventListeners();
+
+      showScreen('.room-frame');
+    } catch (e) {
+      updateError(e.message)
+    }
+  }
+
+  function setupCustomEventListeners() {
+    // catch all events. Useful for logging or debugging;
+    sambaEmbedded.on('*', (data) => {
+      const logList = document.querySelector('.log-list');
+
+      if(logList) {
+        logList.innerHTML += `<div>
+            <p>[${(new Date).toLocaleTimeString()}] event: <b>${data?.type}</b></p>
+            ${data.data ? `<p>payload: ${JSON.stringify(data.data)}</p>` : ''}
+          </div>`;
+
+        logList.scrollTop = logList.scrollHeight;
+      }
+    })
+
+    // `roomJoined` is fired when local user has joined the room
+    // this listener is used to display media device controls after joining
+    sambaEmbedded.on('roomJoined', () => {
+      const controls = document.querySelector('.frame-controls');
+
+      controls.style.display = 'flex';
+    })
+  }
+</script>
+</body>
+</html>

package/dist/esm/index.d.ts

@@ -14,7 +14,7 @@ export declare class DigitalSambaEmbedded extends EventEmitter implements Embedd
     stored: Stored;
     permissionManager: PermissionManager;
     constructor(options?: Partial<InitOptions>, instanceProperties?: Partial<InstanceProperties>, loadImmediately?: boolean);
-    static createControl: (initOptions: InitOptions) => DigitalSambaEmbedded;
+    static createControl: (initOptions: Partial<InitOptions>, instanceProperties?: InstanceProperties) => DigitalSambaEmbedded;
     private mountFrame;
     load: (instanceProperties?: InstanceProperties) => void;
     private onMessage;
@@ -66,3 +66,4 @@ export declare class DigitalSambaEmbedded extends EventEmitter implements Embedd
     enableVirtualBackground: (options: VirtualBackgroundOptions) => void;
     disableVirtualBackground: () => void;
 }
+export default DigitalSambaEmbedded;

package/dist/esm/index.js

@@ -3,7 +3,7 @@ import EventEmitter from 'events';
 import { PermissionManager } from './utils/PermissionManager';
 import { CONNECT_TIMEOUT, defaultStoredState, internalEvents, } from './utils/vars';
 import { createWatchedProxy } from './utils/proxy';
-import { ALLOW_ATTRIBUTE_MISSING, INVALID_CONFIG, INVALID_URL, UNKNOWN_TARGET, } from './utils/errors';
+import { ALLOW_ATTRIBUTE_MISSING, INVALID_CONFIG, INVALID_URL, INSECURE_CONTEXT, UNKNOWN_TARGET, } from './utils/errors';
 export class DigitalSambaEmbedded extends EventEmitter {
     constructor(options = {}, instanceProperties = {}, loadImmediately = true) {
         super();
@@ -31,7 +31,11 @@ export class DigitalSambaEmbedded extends EventEmitter {
             }
             if (url || (this.frame.src && this.frame.src !== window.location.href)) {
                 try {
-                    const frameSrc = new URL(url || this.frame.src).toString();
+                    let origString = url || this.frame.src;
+                    if (!origString.includes('https://')) {
+                        origString = 'https://' + origString;
+                    }
+                    const frameSrc = new URL(origString).toString();
                     this.frame.src = frameSrc;
                     this.savedIframeSrc = frameSrc;
                 }
@@ -206,7 +210,9 @@ export class DigitalSambaEmbedded extends EventEmitter {
                 this.frame.src = url;
             }
             else {
-                this.logError(INVALID_CONFIG);
+                if (!this.initOptions.url) {
+                    this.logError(INVALID_CONFIG);
+                }
                 return;
             }
             const allowedURL = new URL(this.frame.src);
@@ -220,6 +226,9 @@ export class DigitalSambaEmbedded extends EventEmitter {
             if (this.reportErrors) {
                 throw error;
             }
+            else {
+                console.error(error);
+            }
         };
         this.applyFrameProperties = (instanceProperties) => {
             if (instanceProperties.frameAttributes) {
@@ -344,18 +353,14 @@ export class DigitalSambaEmbedded extends EventEmitter {
         this.getUser = (userId) => { var _b; return (_b = this.stored.users) === null || _b === void 0 ? void 0 : _b[userId]; };
         this.showCaptions = () => {
             this.roomSettings.showCaptions = true;
-            this.stored.roomState.captionsState.showCaptions = true;
             this.sendMessage({ type: 'showCaptions' });
         };
         this.hideCaptions = () => {
             this.roomSettings.showCaptions = false;
-            this.stored.roomState.captionsState.showCaptions = false;
             this.sendMessage({ type: 'hideCaptions' });
         };
         this.toggleCaptions = (show) => {
             if (typeof show === 'undefined') {
-                this.stored.roomState.captionsState.showCaptions =
-                    !this.stored.roomState.captionsState.showCaptions;
                 this.sendMessage({ type: 'toggleCaptions' });
             }
             else if (show) {
@@ -401,15 +406,16 @@ export class DigitalSambaEmbedded extends EventEmitter {
                     optionsToState.value = options[value];
                 }
             });
-            this.stored.roomState.virtualBackground = optionsToState;
             this.sendMessage({ type: 'configureVirtualBackground', data: options || {} });
         };
         this.enableVirtualBackground = (options) => this.configureVirtualBackground(options);
         this.disableVirtualBackground = () => {
             this.roomSettings.virtualBackground = undefined;
-            this.stored.roomState.virtualBackground = { enabled: false };
             this.sendMessage({ type: 'disableVirtualBackground' });
         };
+        if (!window.isSecureContext) {
+            this.logError(INSECURE_CONTEXT);
+        }
         this.initOptions = options;
         this.roomSettings = options.roomSettings || {};
         this.reportErrors = instanceProperties.reportErrors || false;
@@ -454,4 +460,5 @@ export class DigitalSambaEmbedded extends EventEmitter {
     }
 }
 _a = DigitalSambaEmbedded;
-DigitalSambaEmbedded.createControl = (initOptions) => new _a(initOptions, {}, false);
+DigitalSambaEmbedded.createControl = (initOptions, instanceProperties = {}) => new _a(initOptions, instanceProperties, false);
+export default DigitalSambaEmbedded;