Release 0.0.50

CHANGELOG.md

@@ -2,6 +2,9 @@
 
 Historical list of changes in releases
 
+## [v0.0.50] - 2025-08-18
+* Add new methods for managing topbar ([#77c4ffbc](https://github.com/digitalsamba/embedded-sdk/commit/77c4ffbcf6e734d09e670707067ff859f7022caa)).
+
 ## [v0.0.49] - 2025-08-04
 * Improved device enumeration to avoid using getUserMedia when not required ([#7238a01f](https://github.com/digitalsamba/embedded-sdk/commit/7238a01fa8a802a5132db4c818f0e735efdd4e32)).
 

dist/cjs/index.d.ts

@@ -70,6 +70,9 @@ export declare class DigitalSambaEmbedded extends EventEmitter implements Embedd
     stopRecording: () => void;
     showToolbar: () => void;
     hideToolbar: () => void;
+    showTopbar: () => void;
+    hideTopbar: () => void;
+    toggleTopbar: (show?: boolean) => void;
     changeToolbarPosition: (side: 'left' | 'right' | 'bottom') => void;
     changeBrandingOptions: (brandingOptionsConfig: Partial<BrandingOptionsConfig>) => void;
     changeLayoutMode: (mode: LayoutMode) => void;

dist/cjs/index.js

@@ -574,6 +574,29 @@ class DigitalSambaEmbedded extends events_1.EventEmitter {
             this.stored.roomState.layout.showToolbar = false;
             this.sendMessage({ type: 'hideToolbar' });
         };
+        this.showTopbar = () => {
+            this.roomSettings.showTopbar = true;
+            this.stored.roomState.layout.showTopbar = true;
+            this.sendMessage({ type: 'showTopbar' });
+        };
+        this.hideTopbar = () => {
+            this.roomSettings.showTopbar = false;
+            this.stored.roomState.layout.showTopbar = false;
+            this.sendMessage({ type: 'hideTopbar' });
+        };
+        this.toggleTopbar = (show) => {
+            if (typeof show === 'undefined') {
+                this.roomSettings.showTopbar = !this.roomSettings.showTopbar;
+                this.stored.roomState.layout.showTopbar = !this.stored.roomState.layout.showTopbar;
+                this.sendMessage({ type: 'toggleTopbar' });
+            }
+            else if (show) {
+                this.showTopbar();
+            }
+            else {
+                this.hideTopbar();
+            }
+        };
         this.changeToolbarPosition = (side) => {
             this.sendMessage({ type: 'changeToolbarPosition', data: side });
         };

dist/cjs/types.d.ts

@@ -10,6 +10,7 @@ export interface InitialRoomSettings {
     initials: string;
     layoutMode: LayoutMode;
     showToolbar: boolean;
+    showTopbar?: boolean;
     showCaptions: boolean;
     virtualBackground: VirtualBackgroundOptions;
     virtualBackgrounds?: VirtualBackgroundItem[];
@@ -18,6 +19,7 @@ export interface InitialRoomSettings {
     muteFrame: boolean;
     mediaDevices?: MediaDeviceSettings;
     requireRemoveUserConfirmation: boolean;
+    baseDomain?: string;
 }
 export interface QueuedEventListener {
     operation: 'connectEventListener' | 'disconnectEventListener';
@@ -73,7 +75,7 @@ export interface InstanceProperties {
     frameAttributes?: Partial<FrameAttributes>;
     reportErrors?: boolean;
 }
-export type SendMessageType = 'connect' | 'setTemplateParams' | 'enableVideo' | 'enableAudio' | 'disableVideo' | 'disableAudio' | 'toggleVideo' | 'toggleAudio' | 'addImageToWhiteboard' | 'startScreenshare' | 'stopScreenshare' | 'startRecording' | 'stopRecording' | 'showToolbar' | 'hideToolbar' | 'toggleToolbar' | 'changeLayoutMode' | 'leaveSession' | 'endSession' | 'requestToggleAudio' | 'requestMute' | 'requestUnmute' | 'removeUser' | 'showCaptions' | 'hideCaptions' | 'toggleCaptions' | 'configureCaptions' | 'raiseHand' | 'lowerHand' | 'allowBroadcast' | 'disallowBroadcast' | 'allowScreenshare' | 'disallowScreenshare' | 'configureVirtualBackground' | 'disableVirtualBackground' | 'muteFrame' | 'unmuteFrame' | 'toggleMuteFrame' | 'changeToolbarPosition' | 'changeBrandingOptions' | 'minimizeLocalTile' | 'maximizeLocalTile' | 'pinUser' | 'maximizeUser' | 'minimizeContent' | 'connectEventListener' | 'disconnectEventListener' | 'connectUICallback' | 'disconnectUICallback' | 'changeRole' | 'addTileAction' | 'removeTileAction' | 'addCustomTile' | 'removeCustomTile' | 'sendMessageToCustomTile' | 'openLibraryFile' | 'closeLibraryFile' | 'toggleLibraryFile' | 'createWhiteboard' | 'openWhiteboard' | 'closeWhiteboard' | 'toggleWhiteboard' | 'applyMediaDevices';
+export type SendMessageType = 'connect' | 'setTemplateParams' | 'enableVideo' | 'enableAudio' | 'disableVideo' | 'disableAudio' | 'toggleVideo' | 'toggleAudio' | 'addImageToWhiteboard' | 'startScreenshare' | 'stopScreenshare' | 'startRecording' | 'stopRecording' | 'showToolbar' | 'hideToolbar' | 'toggleToolbar' | 'showTopbar' | 'hideTopbar' | 'toggleTopbar' | 'changeLayoutMode' | 'leaveSession' | 'endSession' | 'requestToggleAudio' | 'requestMute' | 'requestUnmute' | 'removeUser' | 'showCaptions' | 'hideCaptions' | 'toggleCaptions' | 'configureCaptions' | 'raiseHand' | 'lowerHand' | 'allowBroadcast' | 'disallowBroadcast' | 'allowScreenshare' | 'disallowScreenshare' | 'configureVirtualBackground' | 'disableVirtualBackground' | 'muteFrame' | 'unmuteFrame' | 'toggleMuteFrame' | 'changeToolbarPosition' | 'changeBrandingOptions' | 'minimizeLocalTile' | 'maximizeLocalTile' | 'pinUser' | 'maximizeUser' | 'minimizeContent' | 'connectEventListener' | 'disconnectEventListener' | 'connectUICallback' | 'disconnectUICallback' | 'changeRole' | 'addTileAction' | 'removeTileAction' | 'addCustomTile' | 'removeCustomTile' | 'sendMessageToCustomTile' | 'openLibraryFile' | 'closeLibraryFile' | 'toggleLibraryFile' | 'createWhiteboard' | 'openWhiteboard' | 'closeWhiteboard' | 'toggleWhiteboard' | 'applyMediaDevices';
 export declare const receiveMessagesTypes: readonly ["connected", "frameLoaded", "userJoined", "usersUpdated", "userLeft", "sessionEnded", "roomJoined", "videoEnabled", "videoDisabled", "audioEnabled", "audioDisabled", "screenshareStarted", "screenshareStopped", "recordingStarted", "recordingStopped", "recordingFailed", "layoutModeChanged", "activeSpeakerChanged", "speakerStoppedTalking", "appError", "captionsEnabled", "captionsDisabled", "captionsSpokenLanguageChanged", "captionsFontSizeChanged", "permissionsChanged", "handRaised", "handLowered", "virtualBackgroundChanged", "virtualBackgroundDisabled", "roomStateUpdated", "localTileMaximized", "localTileMinimized", "userMaximized", "internalMediaDeviceChanged", "mediaPermissionsFailed", "documentEvent", "UICallback", "appLanguageChanged", "roleChanged", "tileAction", "chatMessageReceived", "userLeftBatch"];
 export type ReceiveMessageType = typeof receiveMessagesTypes[number];
 export type UICallbackName = 'leaveSession';
@@ -150,6 +152,7 @@ export interface RoomState {
     layout: {
         mode: LayoutMode;
         showToolbar: boolean;
+        showTopbar: boolean;
         toolbarPosition: 'left' | 'right' | 'bottom';
         localTileMinimized: boolean;
         contentMode?: 'maximize' | 'pin';
@@ -250,6 +253,9 @@ export interface EmbeddedInstance {
     stopRecording: () => void;
     showToolbar: () => void;
     hideToolbar: () => void;
+    showTopbar: () => void;
+    hideTopbar: () => void;
+    toggleTopbar: (show?: boolean) => void;
     changeToolbarPosition: (side: 'left' | 'right' | 'bottom') => void;
     changeBrandingOptions: (brandingOptionsConfig: Partial<BrandingOptionsConfig>) => void;
     changeLayoutMode: (mode: LayoutMode) => void;

dist/cjs/utils/vars.d.ts

@@ -1,5 +1,5 @@
 import { Stored } from '../types';
-export declare const PACKAGE_VERSION = "0.0.49";
+export declare const PACKAGE_VERSION = "0.0.50";
 export declare const CONNECT_TIMEOUT = 10000;
 export declare const internalEvents: Record<string, boolean>;
 export declare enum LayoutMode {

dist/cjs/utils/vars.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getDefaultStoredState = exports.PermissionTypes = exports.LayoutMode = exports.internalEvents = exports.CONNECT_TIMEOUT = exports.PACKAGE_VERSION = void 0;
-exports.PACKAGE_VERSION = '0.0.49';
+exports.PACKAGE_VERSION = '0.0.50';
 exports.CONNECT_TIMEOUT = 10000;
 exports.internalEvents = {
     roomJoined: true,
@@ -49,6 +49,7 @@ const getDefaultStoredState = () => ({
         layout: {
             mode: LayoutMode.tiled,
             showToolbar: true,
+            showTopbar: true,
             toolbarPosition: 'left',
             localTileMinimized: false,
         },

dist/demo/initial-config.html

@@ -98,6 +98,12 @@
             <input type="checkbox" id="initial-settings-toolbar" onchange="initialSettings.showToolbar = !initialSettings.showToolbar"/>
           </label>
         </div>
+        <div>
+          <label class="checkbox-label" for="initial-settings-topbar">
+            <span>Show topbar</span>
+            <input type="checkbox" id="initial-settings-topbar" onchange="initialSettings.showTopbar = !initialSettings.showTopbar"/>
+          </label>
+        </div>
         <div>
           <label class="checkbox-label" for="initial-settings-muted">
             <span>Mute frame</span>
@@ -221,6 +227,7 @@
           <button onclick="sambaEmbedded.toggleVideo()">toggle video</button>
           <button onclick="sambaEmbedded.toggleAudio()">toggle audio</button>
           <button onclick="sambaEmbedded.toggleToolbar()">toggle toolbar</button>
+          <button onclick="sambaEmbedded.toggleTopbar()">toggle topbar</button>
           <button onclick="sambaEmbedded.muteFrame()">mute frame</button>
           <button onclick="sambaEmbedded.unmuteFrame()">unmute frame</button>
           <button onclick="sambaEmbedded.toggleMuteFrame()">toggle mute frame</button>
@@ -244,6 +251,7 @@
     audioEnabled: true,
     videoEnabled: true,
     showToolbar: false,
+    showTopbar: false,
     showCaptions: false,
     layoutMode: "auto",
     // virtualBackground: {

dist/demo/managed-state.html

@@ -55,6 +55,7 @@
           <button onclick="sambaEmbedded.toggleVideo()">toggle video</button>
           <button onclick="sambaEmbedded.toggleAudio()">toggle audio</button>
           <button onclick="sambaEmbedded.toggleToolbar()">toggle toolbar</button>
+          <button onclick="sambaEmbedded.toggleTopbar()">toggle topbar</button>
         </div>
       </div>
       <div class="sidebar">
@@ -100,7 +101,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, showTopbar: true } },
         { reportErrors: true }
       );
 

dist/demo/videoroom.html

@@ -57,6 +57,7 @@
           <button onclick="sambaEmbedded.toggleVideo()">toggle video</button>
           <button onclick="sambaEmbedded.toggleAudio()">toggle audio</button>
           <button onclick="sambaEmbedded.toggleToolbar()">toggle toolbar</button>
+          <button onclick="sambaEmbedded.toggleTopbar()">toggle topbar</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>
@@ -158,7 +159,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, showTopbar: true } },
         {reportErrors: true}
       );
 

dist/esm/index.d.ts

@@ -70,6 +70,9 @@ export declare class DigitalSambaEmbedded extends EventEmitter implements Embedd
     stopRecording: () => void;
     showToolbar: () => void;
     hideToolbar: () => void;
+    showTopbar: () => void;
+    hideTopbar: () => void;
+    toggleTopbar: (show?: boolean) => void;
     changeToolbarPosition: (side: 'left' | 'right' | 'bottom') => void;
     changeBrandingOptions: (brandingOptionsConfig: Partial<BrandingOptionsConfig>) => void;
     changeLayoutMode: (mode: LayoutMode) => void;

dist/esm/index.js

@@ -571,6 +571,29 @@ export class DigitalSambaEmbedded extends EventEmitter {
             this.stored.roomState.layout.showToolbar = false;
             this.sendMessage({ type: 'hideToolbar' });
         };
+        this.showTopbar = () => {
+            this.roomSettings.showTopbar = true;
+            this.stored.roomState.layout.showTopbar = true;
+            this.sendMessage({ type: 'showTopbar' });
+        };
+        this.hideTopbar = () => {
+            this.roomSettings.showTopbar = false;
+            this.stored.roomState.layout.showTopbar = false;
+            this.sendMessage({ type: 'hideTopbar' });
+        };
+        this.toggleTopbar = (show) => {
+            if (typeof show === 'undefined') {
+                this.roomSettings.showTopbar = !this.roomSettings.showTopbar;
+                this.stored.roomState.layout.showTopbar = !this.stored.roomState.layout.showTopbar;
+                this.sendMessage({ type: 'toggleTopbar' });
+            }
+            else if (show) {
+                this.showTopbar();
+            }
+            else {
+                this.hideTopbar();
+            }
+        };
         this.changeToolbarPosition = (side) => {
             this.sendMessage({ type: 'changeToolbarPosition', data: side });
         };

dist/esm/types.d.ts

@@ -10,6 +10,7 @@ export interface InitialRoomSettings {
     initials: string;
     layoutMode: LayoutMode;
     showToolbar: boolean;
+    showTopbar?: boolean;
     showCaptions: boolean;
     virtualBackground: VirtualBackgroundOptions;
     virtualBackgrounds?: VirtualBackgroundItem[];
@@ -18,6 +19,7 @@ export interface InitialRoomSettings {
     muteFrame: boolean;
     mediaDevices?: MediaDeviceSettings;
     requireRemoveUserConfirmation: boolean;
+    baseDomain?: string;
 }
 export interface QueuedEventListener {
     operation: 'connectEventListener' | 'disconnectEventListener';
@@ -73,7 +75,7 @@ export interface InstanceProperties {
     frameAttributes?: Partial<FrameAttributes>;
     reportErrors?: boolean;
 }
-export type SendMessageType = 'connect' | 'setTemplateParams' | 'enableVideo' | 'enableAudio' | 'disableVideo' | 'disableAudio' | 'toggleVideo' | 'toggleAudio' | 'addImageToWhiteboard' | 'startScreenshare' | 'stopScreenshare' | 'startRecording' | 'stopRecording' | 'showToolbar' | 'hideToolbar' | 'toggleToolbar' | 'changeLayoutMode' | 'leaveSession' | 'endSession' | 'requestToggleAudio' | 'requestMute' | 'requestUnmute' | 'removeUser' | 'showCaptions' | 'hideCaptions' | 'toggleCaptions' | 'configureCaptions' | 'raiseHand' | 'lowerHand' | 'allowBroadcast' | 'disallowBroadcast' | 'allowScreenshare' | 'disallowScreenshare' | 'configureVirtualBackground' | 'disableVirtualBackground' | 'muteFrame' | 'unmuteFrame' | 'toggleMuteFrame' | 'changeToolbarPosition' | 'changeBrandingOptions' | 'minimizeLocalTile' | 'maximizeLocalTile' | 'pinUser' | 'maximizeUser' | 'minimizeContent' | 'connectEventListener' | 'disconnectEventListener' | 'connectUICallback' | 'disconnectUICallback' | 'changeRole' | 'addTileAction' | 'removeTileAction' | 'addCustomTile' | 'removeCustomTile' | 'sendMessageToCustomTile' | 'openLibraryFile' | 'closeLibraryFile' | 'toggleLibraryFile' | 'createWhiteboard' | 'openWhiteboard' | 'closeWhiteboard' | 'toggleWhiteboard' | 'applyMediaDevices';
+export type SendMessageType = 'connect' | 'setTemplateParams' | 'enableVideo' | 'enableAudio' | 'disableVideo' | 'disableAudio' | 'toggleVideo' | 'toggleAudio' | 'addImageToWhiteboard' | 'startScreenshare' | 'stopScreenshare' | 'startRecording' | 'stopRecording' | 'showToolbar' | 'hideToolbar' | 'toggleToolbar' | 'showTopbar' | 'hideTopbar' | 'toggleTopbar' | 'changeLayoutMode' | 'leaveSession' | 'endSession' | 'requestToggleAudio' | 'requestMute' | 'requestUnmute' | 'removeUser' | 'showCaptions' | 'hideCaptions' | 'toggleCaptions' | 'configureCaptions' | 'raiseHand' | 'lowerHand' | 'allowBroadcast' | 'disallowBroadcast' | 'allowScreenshare' | 'disallowScreenshare' | 'configureVirtualBackground' | 'disableVirtualBackground' | 'muteFrame' | 'unmuteFrame' | 'toggleMuteFrame' | 'changeToolbarPosition' | 'changeBrandingOptions' | 'minimizeLocalTile' | 'maximizeLocalTile' | 'pinUser' | 'maximizeUser' | 'minimizeContent' | 'connectEventListener' | 'disconnectEventListener' | 'connectUICallback' | 'disconnectUICallback' | 'changeRole' | 'addTileAction' | 'removeTileAction' | 'addCustomTile' | 'removeCustomTile' | 'sendMessageToCustomTile' | 'openLibraryFile' | 'closeLibraryFile' | 'toggleLibraryFile' | 'createWhiteboard' | 'openWhiteboard' | 'closeWhiteboard' | 'toggleWhiteboard' | 'applyMediaDevices';
 export declare const receiveMessagesTypes: readonly ["connected", "frameLoaded", "userJoined", "usersUpdated", "userLeft", "sessionEnded", "roomJoined", "videoEnabled", "videoDisabled", "audioEnabled", "audioDisabled", "screenshareStarted", "screenshareStopped", "recordingStarted", "recordingStopped", "recordingFailed", "layoutModeChanged", "activeSpeakerChanged", "speakerStoppedTalking", "appError", "captionsEnabled", "captionsDisabled", "captionsSpokenLanguageChanged", "captionsFontSizeChanged", "permissionsChanged", "handRaised", "handLowered", "virtualBackgroundChanged", "virtualBackgroundDisabled", "roomStateUpdated", "localTileMaximized", "localTileMinimized", "userMaximized", "internalMediaDeviceChanged", "mediaPermissionsFailed", "documentEvent", "UICallback", "appLanguageChanged", "roleChanged", "tileAction", "chatMessageReceived", "userLeftBatch"];
 export type ReceiveMessageType = typeof receiveMessagesTypes[number];
 export type UICallbackName = 'leaveSession';
@@ -150,6 +152,7 @@ export interface RoomState {
     layout: {
         mode: LayoutMode;
         showToolbar: boolean;
+        showTopbar: boolean;
         toolbarPosition: 'left' | 'right' | 'bottom';
         localTileMinimized: boolean;
         contentMode?: 'maximize' | 'pin';
@@ -250,6 +253,9 @@ export interface EmbeddedInstance {
     stopRecording: () => void;
     showToolbar: () => void;
     hideToolbar: () => void;
+    showTopbar: () => void;
+    hideTopbar: () => void;
+    toggleTopbar: (show?: boolean) => void;
     changeToolbarPosition: (side: 'left' | 'right' | 'bottom') => void;
     changeBrandingOptions: (brandingOptionsConfig: Partial<BrandingOptionsConfig>) => void;
     changeLayoutMode: (mode: LayoutMode) => void;

dist/esm/utils/vars.d.ts

@@ -1,5 +1,5 @@
 import { Stored } from '../types';
-export declare const PACKAGE_VERSION = "0.0.49";
+export declare const PACKAGE_VERSION = "0.0.50";
 export declare const CONNECT_TIMEOUT = 10000;
 export declare const internalEvents: Record<string, boolean>;
 export declare enum LayoutMode {

dist/esm/utils/vars.js

@@ -1,4 +1,4 @@
-export const PACKAGE_VERSION = '0.0.49';
+export const PACKAGE_VERSION = '0.0.50';
 export const CONNECT_TIMEOUT = 10000;
 export const internalEvents = {
     roomJoined: true,
@@ -46,6 +46,7 @@ export const getDefaultStoredState = () => ({
         layout: {
             mode: LayoutMode.tiled,
             showToolbar: true,
+            showTopbar: true,
             toolbarPosition: 'left',
             localTileMinimized: false,
         },

dist/types/index.d.ts

@@ -70,6 +70,9 @@ export declare class DigitalSambaEmbedded extends EventEmitter implements Embedd
     stopRecording: () => void;
     showToolbar: () => void;
     hideToolbar: () => void;
+    showTopbar: () => void;
+    hideTopbar: () => void;
+    toggleTopbar: (show?: boolean) => void;
     changeToolbarPosition: (side: 'left' | 'right' | 'bottom') => void;
     changeBrandingOptions: (brandingOptionsConfig: Partial<BrandingOptionsConfig>) => void;
     changeLayoutMode: (mode: LayoutMode) => void;