@digitalsamba/embedded-sdk 0.0.12 → 0.0.17

package/dist/esm/utils/PermissionManager/index.js

@@ -0,0 +1,70 @@
+export class PermissionManager {
+    constructor(parent) {
+        this.permissionsMap = {};
+        this.lookupDynamicPermission = (permission, dynamicPermissions) => {
+            if (!dynamicPermissions) {
+                return false;
+            }
+            return dynamicPermissions.includes(permission);
+        };
+        this.lookupPermission = (options) => {
+            const { permissionsMap, permission, targetRole, role, dynamicPermissions } = options;
+            if (dynamicPermissions) {
+                const granted = this.lookupDynamicPermission(permission, dynamicPermissions);
+                if (granted) {
+                    return true;
+                }
+            }
+            if (permissionsMap[role][permission]) {
+                return true;
+            }
+            return Boolean(permissionsMap[role][`${permission}_${targetRole}`]);
+        };
+        this.checkPermissions = ({ permissions, targetRole, permissionsMap, role, dynamicPermissions, }) => {
+            if (Array.isArray(permissions)) {
+                return permissions.some((permission) => this.lookupPermission({ permission, targetRole, role, permissionsMap, dynamicPermissions }));
+            }
+            return this.lookupPermission({
+                permission: permissions,
+                targetRole,
+                role,
+                permissionsMap,
+                dynamicPermissions,
+            });
+        };
+        this.refinePermissions = (permissions, { targetRole, role, userId, users, permissionsMap, localUser }) => {
+            const options = {
+                permissionsMap,
+                permissions,
+                targetRole,
+                role: localUser.role,
+                dynamicPermissions: localUser.dynamicPermissions,
+            };
+            if (role) {
+                options.role = role;
+                options.dynamicPermissions = undefined;
+            }
+            if (userId && users) {
+                options.role = users[userId].role;
+                options.dynamicPermissions = users[userId].dynamicPermissions;
+            }
+            return this.checkPermissions(options);
+        };
+        this.hasPermissions = (permissions, { targetRole, role, userId } = {}) => {
+            const users = this.parent.stored.users;
+            const localUser = this.parent.localUser;
+            if (!localUser) {
+                return false;
+            }
+            return this.refinePermissions(permissions, {
+                permissionsMap: this.permissionsMap,
+                role,
+                targetRole,
+                users,
+                userId,
+                localUser,
+            });
+        };
+        this.parent = parent;
+    }
+}

package/dist/esm/utils/PermissionManager/types.d.ts

@@ -0,0 +1,23 @@
+import { User, UserId } from '../../types';
+import { PermissionTypes } from '../vars';
+export type PermissionsMap = Record<string, Record<string, boolean>>;
+export interface HasPermissionsOptions {
+    targetRole?: string;
+    role?: string;
+    userId?: UserId;
+}
+export interface RefinePermissionsOptions extends HasPermissionsOptions {
+    permissionsMap: PermissionsMap;
+    localUser: User;
+    users?: Record<UserId, User>;
+}
+export interface LookupPermissionOptions {
+    permissionsMap: PermissionsMap;
+    permission: PermissionTypes;
+    role: string;
+    targetRole?: string;
+    dynamicPermissions?: PermissionTypes[];
+}
+export interface CheckPermissionsOptions extends Omit<LookupPermissionOptions, 'permission'> {
+    permissions: PermissionTypes | PermissionTypes[];
+}

package/dist/esm/utils/PermissionManager/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/utils/proxy.d.ts

@@ -0,0 +1 @@
+export declare const createWatchedProxy: <G>(initialState: G, onChange: (newState: G) => void) => any;

package/dist/esm/utils/proxy.js

@@ -0,0 +1,17 @@
+const createHandler = (onChange) => {
+    const handler = {
+        get(target, key) {
+            if (typeof target[key] === 'object' && target[key] !== null) {
+                return new Proxy(target[key], handler);
+            }
+            return target[key];
+        },
+        set(target, prop, value) {
+            target[prop] = value;
+            onChange(target);
+            return target;
+        },
+    };
+    return handler;
+};
+export const createWatchedProxy = (initialState, onChange) => new Proxy(initialState, createHandler(onChange));

package/dist/esm/utils/vars.d.ts

@@ -0,0 +1,23 @@
+import { Stored } from '../types';
+export declare const CONNECT_TIMEOUT = 10000;
+export declare const internalEvents: Record<string, boolean>;
+export declare enum LayoutMode {
+    tiled = "tiled",
+    auto = "auto"
+}
+export declare enum PermissionTypes {
+    broadcast = "broadcast",
+    manageBroadcast = "manage_broadcast",
+    endSession = "end_session",
+    startSession = "start_session",
+    removeParticipant = "remove_participant",
+    screenshare = "screenshare",
+    manageScreenshare = "manage_screenshare",
+    recording = "recording",
+    generalChat = "general_chat",
+    remoteMuting = "remote_muting",
+    askRemoteUnmute = "ask_remote_unmute",
+    raiseHand = "raise_hand",
+    manageRoles = "manage_roles"
+}
+export declare const defaultStoredState: Stored;

package/dist/esm/utils/vars.js

@@ -0,0 +1,45 @@
+export const CONNECT_TIMEOUT = 10000;
+export const internalEvents = {
+    roomJoined: true,
+};
+export var LayoutMode;
+(function (LayoutMode) {
+    LayoutMode["tiled"] = "tiled";
+    LayoutMode["auto"] = "auto";
+})(LayoutMode || (LayoutMode = {}));
+export var PermissionTypes;
+(function (PermissionTypes) {
+    PermissionTypes["broadcast"] = "broadcast";
+    PermissionTypes["manageBroadcast"] = "manage_broadcast";
+    PermissionTypes["endSession"] = "end_session";
+    PermissionTypes["startSession"] = "start_session";
+    PermissionTypes["removeParticipant"] = "remove_participant";
+    PermissionTypes["screenshare"] = "screenshare";
+    PermissionTypes["manageScreenshare"] = "manage_screenshare";
+    PermissionTypes["recording"] = "recording";
+    PermissionTypes["generalChat"] = "general_chat";
+    PermissionTypes["remoteMuting"] = "remote_muting";
+    PermissionTypes["askRemoteUnmute"] = "ask_remote_unmute";
+    PermissionTypes["raiseHand"] = "raise_hand";
+    PermissionTypes["manageRoles"] = "manage_roles";
+})(PermissionTypes || (PermissionTypes = {}));
+export const defaultStoredState = {
+    userId: '',
+    roomState: {
+        media: {
+            micEnabled: false,
+            cameraEnabled: false,
+        },
+        layout: {
+            mode: LayoutMode.tiled,
+            showToolbar: true,
+            toolbarPosition: 'left',
+        },
+        captionsState: {
+            showCaptions: false,
+            spokenLanguage: 'en',
+            fontSize: 'medium',
+        },
+    },
+    users: {},
+};

package/dist/index.html

@@ -7,68 +7,106 @@
   <title>Document</title>
   <!--  <script src="https://unpkg.com/@digitalsamba/embedded-sdk"></script>-->
   <script src="./umd/index.js"></script>
+  <style>
+    .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;
+    }
+
+    .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
+    }
+
+
+    .log p {
+      font-size: 14px;
+      line-height: 1;
+      margin: 0 0 4px
+    }
+
+    .buttons button, .captions-buttons button {
+      margin: 2px;
+    }
+  </style>
 </head>
 <body>
-<div class="ifp" style="display: flex">
-
-  <div class="log">
+<div style="display: flex">
+  <div class="ifp">
 
   </div>
+  <div style="min-width: 300px ; padding: 0 16px">
+    <h3>Room users:</h3>
+    <div class="participants">
 
+    </div>
+    <h3>Room state</h3>
+    <div class="state">
+
+    </div>
+  </div>
 </div>
-<div class="div" style=" border: 1px solid yellow">
+<div class="div buttons" style=" border: 1px solid yellow">
   <button class="c0" style="margin-right: 15px; border: 2px solid blue">LOAD</button>
-  <button class="c1">toggleVideo</button>
-  <button class="c2">enableVideo</button>
-  <button class="c3">disableVideo</button>
-  <button class="c4">toggleAudio</button>
-  <button class="c5">enableAudio</button>
-  <button class="c6">disableAudio</button>
-  <button class="c7">startScreenshare</button>
-  <button class="c8">stopScreenshare</button>
-  <button class="c9">startRecording</button>
-  <button class="c10">stopRecording</button>
-  <button class="c11">showToolbar</button>
-  <button class="c12">hideToolbar</button>
-  <button class="c13">toggleToolbar</button>
-  <button class="c14">auto layout</button>
-  <button class="c15">tiled layout</button>
-  <button class="c16">leave session</button>
-  <button class="c17">end session</button>
+
+</div>
+<div class="div captions-buttons" style=" border: 1px solid yellow">
+  <p>captions controls</p>
+
+</div>
+
+<div class="log">
+
 </div>
 
 <script async defer>
   const parent = document.querySelector('.ifp');
   const frame = document.querySelector('.if');
+  const buttonsParent = document.querySelector('.buttons');
+  const captionsButtonsParent = document.querySelector('.captions-buttons');
+  const participantList = document.querySelector('.participants');
+
   const btn0 = document.querySelector('.c0');
-  const btn1 = document.querySelector('.c1');
-  const btn2 = document.querySelector('.c2');
-  const btn3 = document.querySelector('.c3');
-  const btn4 = document.querySelector('.c4');
-  const btn5 = document.querySelector('.c5');
-  const btn6 = document.querySelector('.c6');
-  const btn7 = document.querySelector('.c7');
-  const btn8 = document.querySelector('.c8');
-  const btn9 = document.querySelector('.c9');
-  const btn10 = document.querySelector('.c10');
-  const btn11 = document.querySelector('.c11');
-  const btn12 = document.querySelector('.c12');
-  const btn13 = document.querySelector('.c13');
-  const btn14 = document.querySelector('.c14');
-  const btn15 = document.querySelector('.c15');
-  const btn16 = document.querySelector('.c16');
-  const btn17 = document.querySelector('.c17');
+
 
   // change these values to connect to your room
   const TEAM = 'some-team';
   const ROOM = 'some-room';
-  const ROOM_URL = 'https://localhost:3000/Public'
+  let ROOM_URL = 'https://localhost:3000/Public'
+
+  if(window.location.search) {
+    const params = new URLSearchParams(window.location.search);
+    const dynamicRoomUrl = params.get('roomUrl');
+    if(dynamicRoomUrl) {
+      ROOM_URL = dynamicRoomUrl
+    }
+  }
 
   //const api = new DigitalSambaEmbedded({ root: parent, team: TEAM, room: ROOM});
   // const api = new DigitalSambaEmbedded({ frame});
   //const api = new DigitalSambaEmbedded({ url: ROOM_URL}, {reportErrors: true});
 
-  const api = DigitalSambaEmbedded.createControl({  url: ROOM_URL});
+
+  var api = DigitalSambaEmbedded.createControl({ url: ROOM_URL, root: parent });
 
   const log = document.querySelector('.log');
 
@@ -76,29 +114,60 @@
   api.frame.height = 700;
 
   btn0.onclick = () => {api.load({ frameAttributes: {style: "border: 5px solid red"}, reportErrors: true })}
-  btn1.onclick = () => {api.toggleVideo()}
-  btn2.onclick = () => {api.enableVideo()}
-  btn3.onclick = () => {api.disableVideo()}
-  btn4.onclick = () => {api.toggleAudio()}
-  btn5.onclick = () => {api.enableAudio()}
-  btn6.onclick = () => {api.disableAudio()}
-  btn7.onclick = () => {api.startScreenshare()}
-  btn8.onclick = () => {api.stopScreenshare()}
-  btn9.onclick = () => {api.startRecording()}
-  btn10.onclick = () => {api.stopRecording()}
-  btn11.onclick = () => {api.showToolbar()}
-  btn12.onclick = () => {api.hideToolbar()}
-  btn13.onclick = () => {api.toggleToolbar()}
-  btn14.onclick = () => {api.changeLayoutMode('auto')}
-  btn15.onclick = () => {api.changeLayoutMode('tiled')}
-  btn16.onclick = () => {api.leaveSession()}
-  btn17.onclick = () => {api.endSession()}
+
+  const baseControls = [
+    {command: 'toggleVideo', label: 'toggle video' },
+    {command: 'enableVideo', label: 'enable video' },
+    {command: 'disableVideo', label: 'disable video' },
+    {command: 'toggleAudio', label: 'toggle audio' },
+    {command: 'enableAudio', label: 'enable audio' },
+    {command: 'disableAudio', label: 'disable audio' },
+    {command: 'startScreenshare', label: 'start screenshare' },
+    {command: 'stopScreenshare', label: 'stop screenshare' },
+    {command: 'raiseHand', label: 'raise hand' },
+    {command: 'startRecording', label: 'start recording' },
+    {command: 'stopRecording', label: 'stop recording' },
+    {command: 'showToolbar', label: 'show toolbar' },
+    {command: 'hideToolbar', label: 'hide toolbar' },
+    {command: 'toggleToolbar', label: 'toggle toolbar' },
+    {command: 'changeLayoutMode', label: 'auto layout', args: ['auto'] },
+    {command: 'changeLayoutMode', label: 'tiled layout', args: ['tiled'] },
+    {command: 'showCaptions', label: 'show captions'},
+    {command: 'hideCaptions', label: 'hide captions'},
+    {command: 'toggleCaptions', label: 'toggle captions'},
+    {command: 'leaveSession', label: 'leave session' },
+    {command: 'endSession', label: 'end session' },
+  ]
+
+  baseControls.forEach(control => {
+    const button = document.createElement("button");
+    button.innerHTML = control.label;
+    button.onclick = () => api[control.command](...(control.args || []))
+
+    buttonsParent.appendChild(button);
+  })
+
+  const captionsControls = [
+    {command: 'configureCaptions', label: 'set font size - small', args: [{fontSize: 'small'}] },
+    {command: 'configureCaptions', label: 'set font size - medium', args: [{fontSize: 'medium'}] },
+    {command: 'configureCaptions', label: 'set font size - large', args: [{fontSize: 'large'}] },
+    {command: 'configureCaptions', label: 'set spoken language - english', args: [{spokenLanguage: 'en'}] },
+    {command: 'configureCaptions', label: 'set spoken language - french', args: [{spokenLanguage: 'fr'}] },
+    {command: 'configureCaptions', label: 'set spoken language - spanish', args: [{spokenLanguage: 'es'}] },
+  ]
+
+  captionsControls.forEach(control => {
+    const button = document.createElement("button");
+    button.innerHTML = control.label;
+    button.onclick = () => api[control.command](...(control.args || []))
+
+    captionsButtonsParent.appendChild(button);
+  })
 
   api.on('*', (data) => {
-    log.innerHTML += `<p>${Number(new Date)}: ev(${data.type}): ${JSON.stringify(data)}</p>`
+    log.innerHTML += `<p>${Number(new Date)}: ev(${data?.type}): ${JSON.stringify(data)}</p>`
   });
 
-
   api.on('userJoined', (data) => {
     log.innerHTML += `<p>${Number(new Date)}: USER JOINED: ${JSON.stringify(data)}</p>`
   });
@@ -107,6 +176,142 @@
     log.innerHTML += `<p>${Number(new Date)}: USER LEFT: ${JSON.stringify(data)}</p>`
   });
 
+  api.on('permissionsChanged', ({ data }) => {
+    if(data.broadcast !== undefined){
+      if(data.broadcast) {
+        alert('You were granted broadcast permission')
+      } else {
+        alert('Your permission to broadcast was rejected')
+      }
+    }
+
+    if(data.screenshare !== undefined){
+      if(data.screenshare) {
+        alert('You were granted screenshare permission')
+      } else {
+        alert('Your permission to screenshare was rejected')
+      }
+    }
+  });
+
+  api.on('handRaised', ({data}) => {
+    const control = document.querySelector('#lower-hand-'+data.userId);
+
+    if(control) {
+      control.style.display = 'inline'
+    }
+  })
+
+  api.on('handLowered', ({data}) => {
+    const id = data.user;
+
+    const control = document.querySelector('#lower-hand-'+ id );
+
+    if(control) {
+      control.style.display = 'none'
+    }
+  })
+
+  const stateBlock = document.querySelector('.state');
+
+  api.on('roomStateUpdated', ({data}) => {
+    stateBlock.innerHTML = JSON.stringify(data);
+  })
+
+  api.on('usersUpdated', ({data: {users}}) => {
+    participantList.innerHTML = '';
+
+    users.forEach(user => {
+      const row = document.createElement('div');
+      row.className = 'user-list-row';
+      const subButtons = document.createElement('div')
+      row.appendChild(subButtons);
+
+      const avatar = document.createElement('span');
+      avatar.className = 'user-list-avatar';
+      avatar.style.background = user.avatarColor;
+      row.appendChild(avatar);
+
+
+      const name = document.createElement('span');
+      name.className = 'user-list-name';
+      name.innerText = user.name;
+      row.appendChild(name);
+
+      const speakerIndicator = document.createElement('span')
+      speakerIndicator.className = `speaker-indicator speaker-indicator-${user.id}`;
+      row.appendChild(speakerIndicator);
+
+
+      if(user.kind === 'local') {
+        const label = document.createElement('span');
+        label.className = 'user-list-label';
+        label.innerText = '(you)'
+        label.style.color = '#777';
+        row.appendChild(label);
+      } else {
+        const micControl = document.createElement('button');
+        micControl.innerHTML = 'toggle mic'
+        micControl.style.margin = '0 4px';
+        micControl.onclick = () => {api.requestToggleAudio(user.id)}
+        row.appendChild(micControl);
+
+        const kickControl = document.createElement('button');
+        kickControl.innerHTML = 'kick'
+        kickControl.style.margin = '0 4px';
+        kickControl.onclick = () => {api.removeUser(user.id)}
+        row.appendChild(kickControl);
+
+        const allowBroadcastControl = document.createElement('button');
+        allowBroadcastControl.innerHTML = 'allow broadcast'
+        allowBroadcastControl.style.margin = '0 4px';
+        allowBroadcastControl.onclick = () => {api.allowBroadcast(user.id)}
+        subButtons.appendChild(allowBroadcastControl);
+
+        const disallowBroadcastControl = document.createElement('button');
+        disallowBroadcastControl.innerHTML = 'disallow broadcast'
+        disallowBroadcastControl.style.margin = '0 4px';
+        disallowBroadcastControl.onclick = () => {api.disallowBroadcast(user.id)}
+        subButtons.appendChild(disallowBroadcastControl);
+
+        const allowScreenshareControl = document.createElement('button');
+        allowScreenshareControl.innerHTML = 'allow screenshare'
+        allowScreenshareControl.style.margin = '0 4px';
+        allowScreenshareControl.onclick = () => {api.allowScreenshare(user.id)}
+        subButtons.appendChild(allowScreenshareControl);
+
+        const disallowScreenshareControl = document.createElement('button');
+        disallowScreenshareControl.innerHTML = 'disallow screenshare'
+        disallowScreenshareControl.style.margin = '0 4px';
+        disallowScreenshareControl.onclick = () => {api.disallowScreenshare(user.id)}
+        subButtons.appendChild(disallowScreenshareControl);
+      }
+
+      const raisedHandControl = document.createElement('button');
+      raisedHandControl.id = 'lower-hand-'+user.id;
+      raisedHandControl.innerHTML = 'lower hand'
+      raisedHandControl.style.margin = '0 4px';
+      raisedHandControl.style.display = 'none';
+      raisedHandControl.onclick = () => {api.lowerHand(user.id)}
+      row.appendChild(raisedHandControl);
+
+      participantList.appendChild(row);
+      participantList.appendChild(subButtons);
+
+    })
+  })
+
+  api.on('activeSpeakerChanged', ({data}) => {
+    const currentIndicator = document.querySelector('.speaker-indicator.show')
+    if(currentIndicator) {
+      currentIndicator.className = currentIndicator.className.replace(' show', '');
+
+    }
+
+    const newIndicator = document.querySelector(`.speaker-indicator-${data.user.id}`);
+    newIndicator.className = newIndicator.className + ' show'
+  })
+
 </script>
 
 </body>