@digitalsamba/embedded-sdk 0.0.21 → 0.0.25

package/dist/demo/managed-state.html

@@ -8,6 +8,8 @@
   <!--  <script src="https://unpkg.com/@digitalsamba/embedded-sdk"></script>-->
   <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>
 
@@ -96,6 +98,7 @@
 
       // load samba frame
       sambaEmbedded.load();
+      logRoomLoad();
 
       addJoiningHint(ROOM_URL);
       initializeParticipantList();
@@ -228,6 +231,67 @@
           }
         }
 
+        if(sambaEmbedded.featureEnabled('pin')) {
+          const pinControl = document.createElement('button');
+          pinControl.innerHTML = 'pin';
+          pinControl.style.margin = '0 4px';
+          pinControl.className = 'pin-' + user.id;
+
+          pinControl.onclick = () => {
+            sambaEmbedded.pinUser(user.id)
+          }
+
+          row.appendChild(pinControl);
+        }
+
+         if(sambaEmbedded.featureEnabled('fullScreen')) {
+          const fsControl = document.createElement('button');
+          fsControl.innerHTML = 'maximize';
+          fsControl.style.margin = '0 4px';
+          fsControl.className = 'fs-' + user.id;
+
+          fsControl.onclick = () => {
+            sambaEmbedded.maximizeUser(user.id)
+          }
+
+          row.appendChild(fsControl);
+        }
+
+        const ssControls = document.createElement('div');
+        ssControls.className = 'screenshare-buttons-' + user.id;
+        ssControls.style.opacity = 0;
+
+        row.appendChild(ssControls);
+
+        if(sambaEmbedded.featureEnabled('screenshare')) {
+          if(sambaEmbedded.featureEnabled('pin')) {
+            const ssPinControl = document.createElement('button');
+            ssPinControl.innerHTML = 'pin screenshare';
+            ssPinControl.style.margin = '0 4px';
+            ssPinControl.className = 'ss-pin-' + user.id;
+
+            ssPinControl.onclick = () => {
+              sambaEmbedded.pinUser(user.id, 'screenshare')
+            }
+
+            ssControls.appendChild(ssPinControl);
+          }
+
+          if(sambaEmbedded.featureEnabled('fullScreen')) {
+            const ssFsControl = document.createElement('button');
+            ssFsControl.innerHTML = 'maximize screenshare';
+            ssFsControl.style.margin = '0 4px';
+            ssFsControl.className = 'ss-fs-' + user.id;
+
+            ssFsControl.onclick = () => {
+              sambaEmbedded.maximizeUser(user.id, 'screenshare')
+            }
+
+            ssControls.appendChild(ssFsControl);
+          }
+        }
+
+
         const raisedHandControl = document.createElement('button');
         raisedHandControl.id = 'lower-hand-' + user.id;
         raisedHandControl.innerHTML = 'lower hand'
@@ -271,6 +335,89 @@
         }
       }
     });
+
+    const resetButtons = () => {
+      const pinButton = document.querySelector(`.pin-${exposedUser}`);
+      const ssPinButton = document.querySelector(`.ss-pin-${exposedUser}`);
+      const fsButton = document.querySelector(`.fs-${exposedUser}`);
+      const ssFsButton = document.querySelector(`.ss-fs-${exposedUser}`);
+
+      if(pinButton) {
+        pinButton.innerHTML = 'pin'
+        const uid = exposedUser;
+        pinButton.onclick = () => sambaEmbedded.pinUser(uid);
+      }
+      if(ssPinButton) {
+        ssPinButton.innerHTML = 'pin screenshare'
+        const uid = exposedUser;
+        ssPinButton.onclick = () => sambaEmbedded.pinUser(uid, 'screenshare');
+      }
+
+      if(fsButton) {
+        fsButton.innerHTML = 'maximize';
+        const uid = exposedUser;
+        fsButton.onclick = () => sambaEmbedded.maximizeUser(uid);
+      }
+      if(ssFsButton) {
+        ssFsButton.innerHTML = 'maximize screenshare'
+        const uid = exposedUser;
+        ssFsButton.onclick = () => sambaEmbedded.maximizeUser(uid, 'screenshare');
+      }
+
+      exposedUser = '';
+    }
+
+
+    let exposedUser = '';
+
+    sambaEmbedded.on('userMaximized', ({ data }) => {
+      resetButtons();
+
+      const pinButton = document.querySelector(data.type === 'media' ? `.pin-${data.userId}`: `.ss-pin-${data.userId}`);
+      const fsButton = document.querySelector(data.type === 'media' ? `.fs-${data.userId}`: `.ss-fs-${data.userId}`);
+      exposedUser = data.userId;
+
+
+      if(data.mode === 'pin') {
+        if(pinButton) {
+          pinButton.innerHTML = data.type === 'media' ? 'unpin' :'unpin screenshare'
+          pinButton.onclick = sambaEmbedded.minimizeUser;
+        }
+
+        if(fsButton) {
+          fsButton.innerHTML = data.type === 'media'  ? 'maximize' : 'maximize screenshare'
+          fsButton.onclick = () => sambaEmbedded.maximizeUser(data.userId, data.type);
+        }
+      } else {
+        if(pinButton) {
+          pinButton.innerHTML = data.type === 'media'  ? 'pin' : 'pin screnshare'
+          pinButton.onclick = () => sambaEmbedded.pinUser(data.userId, data.type);
+        }
+
+        if(fsButton) {
+          fsButton.innerHTML = data.type === 'media'  ? 'minimize' : 'minimize screenshare'
+          fsButton.onclick = sambaEmbedded.minimizeUser
+        }
+      }
+    })
+
+    sambaEmbedded.on('userMinimized', resetButtons)
+
+    sambaEmbedded.on('screenshareStarted', ({data}) => {
+      const ssControls = document.querySelector('.screenshare-buttons-' + data.user.id);
+
+      if(ssControls) {
+        ssControls.style.opacity = 1;
+      }
+    })
+
+    sambaEmbedded.on('screenshareStopped', ({data}) => {
+      const ssControls = document.querySelector('.screenshare-buttons-' + data.user.id);
+
+      if(ssControls) {
+        ssControls.style.opacity = 0;
+      }
+    })
   }
 
 </script>

package/dist/demo/style.css

@@ -204,23 +204,41 @@ a {
   flex-direction: column;
 }
 .room-content {
-  flex-grow: 1;
-  align-items: flex-start;
   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 {
-  padding-left: 15px;
-  flex-grow: 1;
-  max-width: calc(100vw - 1055px);
+  grid-column: span 5 / span 5;
+}
+
+@media (max-width: 1023px) {
+  .frame-area {
+    grid-column: 1 / -1;
+  }
+
+  .sidebar {
+    grid-column: 1 / -1;
+  }
 }
 
 .sidebar-block {
@@ -266,11 +284,16 @@ a {
   font-weight: 700;
 }
 
-.frame-controls {
+.branding-controls {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.frame-controls, .branding-controls {
   margin-top: 15px;
 }
 
-.frame-controls button {
+.frame-controls button, .branding-controls button {
   border-radius: 8px;
   padding: 8px 16px;
   background: #fff;
@@ -303,3 +326,8 @@ a {
   font-weight: 700;
   color: rgb(55, 113, 224);
 }
+
+.branding-control-parent.disabled {
+  opacity: .5;
+  pointer-events:  none;
+}

package/dist/demo/videoroom.html

@@ -7,6 +7,8 @@
   <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>
 
@@ -46,6 +48,62 @@
           <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>
@@ -58,7 +116,9 @@
   let ROOM_URL = 'https://localhost:3000/Public';
 
   var sambaEmbedded;
+  var brandingConfig = {
 
+  }
   // if room is predefined in search params, skip room URL field;
   checkDynamicRoomURL();
 
@@ -83,7 +143,7 @@
       // 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} },
+        { url: ROOM_URL, root: parent, roomSettings: {showToolbar: false } },
         {reportErrors: true}
       );
 
@@ -95,6 +155,7 @@
 
       // load samba frame
       sambaEmbedded.load();
+      logRoomLoad();
 
       addJoiningHint(ROOM_URL);
       initializeLogs();
@@ -132,6 +193,20 @@
       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>;
@@ -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;

package/dist/esm/index.js

@@ -162,6 +162,23 @@ export class DigitalSambaEmbedded extends EventEmitter {
                     enabled: false,
                 };
             });
+            this.on('localTileMinimized', () => {
+                this.stored.roomState.layout.localTileMinimized = true;
+            });
+            this.on('localTileMaximized', () => {
+                this.stored.roomState.layout.localTileMinimized = false;
+            });
+            this.on('userMaximized', ({ data }) => {
+                this.stored.roomState.layout.content = {
+                    userId: data.userId,
+                    type: data.type,
+                };
+                this.stored.roomState.layout.contentMode = data.mode;
+            });
+            this.on('userMinimized', () => {
+                this.stored.roomState.layout.content = undefined;
+                this.stored.roomState.layout.contentMode = undefined;
+            });
         };
         this._emit = (eventName, ...args) => {
             this.emit('*', ...args);
@@ -171,12 +188,14 @@ export class DigitalSambaEmbedded extends EventEmitter {
             const message = event.DSPayload;
             switch (message.type) {
                 case 'roomJoined': {
-                    const { users, roomState, activeSpeaker, permissionsMap } = message.data;
+                    const { users, roomState, activeSpeaker, permissionsMap, features } = message.data;
                     this.stored.users = Object.assign(Object.assign({}, this.stored.users), users);
                     this.stored.roomState = createWatchedProxy(Object.assign({}, roomState), this.emitRoomStateUpdated);
                     this.stored.activeSpeaker = activeSpeaker;
+                    this.stored.features = createWatchedProxy(Object.assign({}, features), this.emitFeatureSetUpdated);
                     this.permissionManager.permissionsMap = permissionsMap;
                     this.emitUsersUpdated();
+                    this.emitFeatureSetUpdated();
                     this.emitRoomStateUpdated();
                     this._emit('roomJoined', { type: 'roomJoined' });
                     break;
@@ -192,6 +211,12 @@ export class DigitalSambaEmbedded extends EventEmitter {
         this.emitRoomStateUpdated = () => {
             this._emit('roomStateUpdated', { type: 'roomStateUpdated', data: { state: this.roomState } });
         };
+        this.emitFeatureSetUpdated = () => {
+            this._emit('featureSetUpdated', {
+                type: 'featureSetUpdated',
+                data: { state: this.stored.features },
+            });
+        };
         this.setFrameSrc = () => {
             let url = this.savedIframeSrc;
             const { team, room, token } = this.initOptions;
@@ -307,6 +332,12 @@ export class DigitalSambaEmbedded extends EventEmitter {
             this.stored.roomState.layout.showToolbar = false;
             this.sendMessage({ type: 'hideToolbar' });
         };
+        this.changeToolbarPosition = (side) => {
+            this.sendMessage({ type: 'changeToolbarPosition', data: side });
+        };
+        this.changeBrandingOptions = (brandingOptionsConfig) => {
+            this.sendMessage({ type: 'changeBrandingOptions', data: brandingOptionsConfig });
+        };
         this.changeLayoutMode = (mode) => {
             this.roomSettings.layoutMode = mode;
             this.sendMessage({ type: 'changeLayoutMode', data: mode });
@@ -413,6 +444,50 @@ export class DigitalSambaEmbedded extends EventEmitter {
             this.roomSettings.virtualBackground = undefined;
             this.sendMessage({ type: 'disableVirtualBackground' });
         };
+        this.muteFrame = () => {
+            this.roomSettings.muteFrame = true;
+            this.stored.roomState.frameMuted = true;
+            this.sendMessage({ type: 'muteFrame' });
+        };
+        this.unmuteFrame = () => {
+            this.roomSettings.muteFrame = false;
+            this.stored.roomState.frameMuted = false;
+            this.sendMessage({ type: 'unmuteFrame' });
+        };
+        this.toggleMuteFrame = (mute) => {
+            if (typeof mute === 'undefined') {
+                this.roomSettings.muteFrame = !this.roomSettings.muteFrame;
+                this.stored.roomState.frameMuted = !this.stored.roomState.frameMuted;
+                this.sendMessage({ type: 'toggleMuteFrame' });
+            }
+            else if (mute) {
+                this.muteFrame();
+            }
+            else {
+                this.unmuteFrame();
+            }
+        };
+        this.minimizeLocalTile = () => {
+            this.sendMessage({ type: 'minimizeLocalTile' });
+        };
+        this.maximizeLocalTile = () => {
+            this.sendMessage({ type: 'maximizeLocalTile' });
+        };
+        this.pinUser = (userId, tile = 'media') => {
+            this.sendMessage({ type: 'pinUser', data: { tile, userId } });
+        };
+        this.unpinUser = () => {
+            this.minimizeContent();
+        };
+        this.maximizeUser = (userId, tile = 'media') => {
+            this.sendMessage({ type: 'maximizeUser', data: { tile, userId } });
+        };
+        this.minimizeUser = () => {
+            this.minimizeContent();
+        };
+        this.minimizeContent = () => {
+            this.sendMessage({ type: 'minimizeContent' });
+        };
         if (!window.isSecureContext) {
             this.logError(INSECURE_CONTEXT);
         }
@@ -458,6 +533,12 @@ export class DigitalSambaEmbedded extends EventEmitter {
     get localUser() {
         return this.stored.users[this.stored.userId];
     }
+    get features() {
+        return this.stored.features;
+    }
+    featureEnabled(feature) {
+        return !!this.stored.features[feature];
+    }
 }
 _a = DigitalSambaEmbedded;
 DigitalSambaEmbedded.createControl = (initOptions, instanceProperties = {}) => new _a(initOptions, instanceProperties, false);