@digitalsamba/embedded-sdk 0.0.20 → 0.0.25

package/dist/demo/style.css

@@ -0,0 +1,333 @@
+
+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 {
+  max-width: 100%;
+  display: grid;
+  grid-template-columns: repeat(12, minmax(0, 1fr));
+  gap: 30px;
+}
+
+.room-frame {
+  align-items: flex-start;
+}
+
+.frame-area {
+  justify-self: center;
+  grid-column: span 7 / span 7;
+}
+
+.room-frame .container {
+  padding: 15px 15px;
+}
+
+iframe {
+  max-width: 100%;
+}
+
+.sidebar {
+  grid-column: span 5 / span 5;
+}
+
+@media (max-width: 1023px) {
+  .frame-area {
+    grid-column: 1 / -1;
+  }
+
+  .sidebar {
+    grid-column: 1 / -1;
+  }
+}
+
+.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;
+}
+
+.branding-controls {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.frame-controls, .branding-controls {
+  margin-top: 15px;
+}
+
+.frame-controls button, .branding-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);
+}
+
+.branding-control-parent.disabled {
+  opacity: .5;
+  pointer-events:  none;
+}

package/dist/demo/videoroom.html

@@ -0,0 +1,212 @@
+<!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>
+  <script defer data-domain="digitalsamba.github.io" src="https://plausible.wbcnf.net/js/script.js"></script>
+  <script>window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }</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>
+          <button onclick="sambaEmbedded.changeToolbarPosition('left')">toolbar to left</button>
+          <button onclick="sambaEmbedded.changeToolbarPosition('right')">toolbar to right</button>
+          <button onclick="sambaEmbedded.changeToolbarPosition('bottom')">toolbar to bottom</button>
+        </div>
+        <div class="branding-controls">
+          <div style="display: flex; flex-grow: 1; margin-bottom: 20px">
+            <div>
+              <label class="checkbox-label" for="branding-palette">
+                <span>Custom palette</span>
+                <input type="checkbox" id="branding-palette" onchange="toggleBrandingOption('paletteMode')" />
+              </label>
+              <div  class="js--paletteMode-parent branding-control-parent disabled">
+                <label style="margin-right: 8px;" for="branding-paletteMode-input">Value</label>
+                <select name="branding-palette-mode" id="branding-paletteMode-input" onchange="brandingConfig.paletteMode = this.value">
+                  <option value="light">light</option>
+                  <option value="dark">dark</option>
+                </select>
+              </div>
+            </div>
+            <div>
+              <label class="checkbox-label" for="branding-primary-color">
+                <span>Custom primary color</span>
+                <input type="checkbox" id="branding-primary-color" onchange="toggleBrandingOption('primaryColor')" />
+              </label>
+              <div  class="js--primaryColor-parent branding-control-parent disabled">
+                <label for="branding-primaryColor-input">
+                  <span>Value</span>
+                  <input type="color" id="branding-primaryColor-input" onchange="brandingConfig.primaryColor = this.value">
+                </label>
+              </div>
+            </div>
+            <div>
+              <label class="checkbox-label" for="branding-toolbar-color">
+                <span>Custom toolbar color</span>
+                <input type="checkbox" id="branding-toolbar-color" onchange="toggleBrandingOption('toolbarColor')" />
+              </label>
+              <div  class="js--toolbarColor-parent branding-control-parent disabled">
+                <label for="branding-toolbarColor-input">
+                  <span>Value</span>
+                  <input type="color" id="branding-toolbarColor-input"  onchange="brandingConfig.toolbarColor = this.value">
+                </label>
+              </div>
+            </div>
+            <div>
+              <label class="checkbox-label" for="branding-room-bg-color">
+                <span>Custom room background</span>
+                <input type="checkbox" id="branding-room-bg-color" onchange="toggleBrandingOption('roomBackgroundColor')" />
+              </label>
+              <div  class="js--roomBackgroundColor-parent branding-control-parent disabled">
+                <label for="branding-roomBackgroundColor-input">
+                  <span>Value</span>
+                  <input type="color" id="branding-roomBackgroundColor-input" onchange="brandingConfig.roomBackgroundColor = this.value"></label>
+              </div>
+            </div>
+          </div>
+          <button onclick="sambaEmbedded.changeBrandingOptions(brandingConfig)">Apply custom branding</button>
+        </div>
+      </div>
+      <div class="sidebar"></div>
+    </div>
+  </div>
+
+</div>
+
+<script async defer>
+  let ROOM_URL = 'https://localhost:3000/Public';
+
+  var sambaEmbedded;
+  var brandingConfig = {
+
+  }
+  // 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();
+      logRoomLoad();
+
+      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';
+    })
+  }
+
+  function toggleBrandingOption(option) {
+    console.warn(option, brandingConfig[option]);
+    const controlParent = document.querySelector('.js--'+option+'-parent');
+
+    if(brandingConfig[option]) {
+      delete brandingConfig[option];
+      controlParent.className += ' disabled'
+    } else {
+      const input = document.getElementById('branding-'+option+'-input');
+      brandingConfig[option] = input.value;
+      controlParent.className =  controlParent.className.replace(' disabled', '');
+    }
+  }
+</script>
+</body>
+</html>

package/dist/esm/index.d.ts

@@ -2,7 +2,7 @@
 import EventEmitter from 'events';
 import { PermissionManager } from './utils/PermissionManager';
 import { LayoutMode } from './utils/vars';
-import { CaptionsOptions, EmbeddedInstance, InitialRoomSettings, InitOptions, InstanceProperties, Stored, UserId, VirtualBackgroundOptions } from './types';
+import { BrandingOptionsConfig, CaptionsOptions, EmbeddedInstance, FeatureFlag, InitialRoomSettings, InitOptions, InstanceProperties, Stored, UserId, UserTileType, VirtualBackgroundOptions } from './types';
 export declare class DigitalSambaEmbedded extends EventEmitter implements EmbeddedInstance {
     initOptions: Partial<InitOptions>;
     roomSettings: Partial<InitialRoomSettings>;
@@ -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: Partial<InitOptions>) => DigitalSambaEmbedded;
+    static createControl: (initOptions: Partial<InitOptions>, instanceProperties?: InstanceProperties) => DigitalSambaEmbedded;
     private mountFrame;
     load: (instanceProperties?: InstanceProperties) => void;
     private onMessage;
@@ -23,6 +23,7 @@ export declare class DigitalSambaEmbedded extends EventEmitter implements Embedd
     private handleInternalMessage;
     private emitUsersUpdated;
     private emitRoomStateUpdated;
+    private emitFeatureSetUpdated;
     private setFrameSrc;
     private checkTarget;
     private sendMessage;
@@ -30,6 +31,8 @@ export declare class DigitalSambaEmbedded extends EventEmitter implements Embedd
     private applyFrameProperties;
     get roomState(): import("./types").RoomState;
     get localUser(): import("./types").User;
+    get features(): import("./types").FeatureSet;
+    featureEnabled(feature: FeatureFlag): boolean;
     enableVideo: () => void;
     disableVideo: () => void;
     toggleVideo: (enable?: boolean) => void;
@@ -42,6 +45,8 @@ export declare class DigitalSambaEmbedded extends EventEmitter implements Embedd
     stopRecording: () => void;
     showToolbar: () => void;
     hideToolbar: () => void;
+    changeToolbarPosition: (side: 'left' | 'right' | 'bottom') => void;
+    changeBrandingOptions: (brandingOptionsConfig: Partial<BrandingOptionsConfig>) => void;
     changeLayoutMode: (mode: LayoutMode) => void;
     leaveSession: () => void;
     endSession: () => void;
@@ -65,5 +70,15 @@ export declare class DigitalSambaEmbedded extends EventEmitter implements Embedd
     configureVirtualBackground: (options: VirtualBackgroundOptions) => void;
     enableVirtualBackground: (options: VirtualBackgroundOptions) => void;
     disableVirtualBackground: () => void;
+    muteFrame: () => void;
+    unmuteFrame: () => void;
+    toggleMuteFrame: (mute?: boolean) => void;
+    minimizeLocalTile: () => void;
+    maximizeLocalTile: () => void;
+    pinUser: (userId: UserId, tile?: UserTileType) => void;
+    unpinUser: () => void;
+    maximizeUser: (userId: UserId, tile?: UserTileType) => void;
+    minimizeUser: () => void;
+    minimizeContent: () => void;
 }
 export default DigitalSambaEmbedded;