@digitalsamba/embedded-sdk 0.0.13 → 0.0.17

package/dist/index.html

@@ -10,7 +10,7 @@
   <style>
     .user-list-row {
       display: flex;
-      margin-bottom: 8px;
+      margin: 12px 0 8px;
       align-items: center;
     }
 
@@ -22,6 +22,22 @@
       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;
@@ -42,6 +58,10 @@
     <h3>Room users:</h3>
     <div class="participants">
 
+    </div>
+    <h3>Room state</h3>
+    <div class="state">
+
     </div>
   </div>
 </div>
@@ -85,7 +105,8 @@
   // const api = new DigitalSambaEmbedded({ frame});
   //const api = new DigitalSambaEmbedded({ url: ROOM_URL}, {reportErrors: true});
 
-  const api = DigitalSambaEmbedded.createControl({ url: ROOM_URL, root: parent });
+
+  var api = DigitalSambaEmbedded.createControl({ url: ROOM_URL, root: parent });
 
   const log = document.querySelector('.log');
 
@@ -103,6 +124,7 @@
     {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' },
@@ -172,14 +194,38 @@
     }
   });
 
+  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';
@@ -192,6 +238,11 @@
       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';
@@ -210,13 +261,57 @@
         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>

package/dist/initial-config-demo.html

@@ -0,0 +1,303 @@
+<!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>Document</title>
+  <!--  <script src="https://unpkg.com/@digitalsamba/embedded-sdk"></script>-->
+  <script src="./umd/index.js"></script>
+  <style>
+    .user-list-row {
+      display: flex;
+      margin-bottom: 8px;
+      align-items: center;
+    }
+
+    .user-list-avatar {
+      width: 24px;
+      height: 24px;
+      display: block;
+      border-radius: 50%;
+      margin-right: 8px;
+    }
+
+    .log p {
+      font-size: 14px;
+      line-height: 1;
+      margin: 0 0 4px
+    }
+
+    .buttons button, .captions-buttons button {
+      margin: 2px;
+    }
+  </style>
+  <script>
+    const initialRoomState = {
+      username: "",
+      micEnabled: false,
+      cameraEnabled: false,
+      showToolbar: false,
+      showCaptions: false,
+      layoutMode: 'auto'
+    }
+  </script>
+</head>
+<body>
+<div class="sdk-prep">
+  <h3>Initial settings</h3>
+
+  <label for="prep-username-input">
+    <p>Username:</p>
+    <input type="text" id="prep-username-input">
+  </label>
+  <div class="prep-checkboxes"></div>
+  <fieldset>
+    <legend>Layout mode:</legend>
+    <div>
+      <input type="radio" id="prep-layout-mode1" checked name="contact" value="auto" onchange="initialRoomState.layoutMode = 'auto'" />
+      <label for="prep-layout-mode1">Auto</label>
+
+      <input type="radio" id="contactChoice2" name="contact" value="tiled" onchange="initialRoomState.layoutMode = 'tiled'"/>
+      <label for="contactChoice2">Tiled</label>
+    </div>
+  </fieldset>
+  <div style="margin-top: 20px">
+    <button type="button" class="sdk-prep-submit">load</button>
+  </div>
+</div>
+<div class="sdk-ready" style="display: none">
+  <div style="display: flex">
+    <div class="ifp">
+
+    </div>
+    <div style="min-width: 300px ; padding: 0 16px">
+      <h3>Room users:</h3>
+      <div class="participants">
+
+      </div>
+    </div>
+  </div>
+  <div class="div buttons" style=" border: 1px solid yellow">
+    <button class="c0" style="margin-right: 15px; border: 2px solid blue">LOAD</button>
+
+  </div>
+  <div class="div captions-buttons" style=" border: 1px solid yellow">
+    <p>captions controls</p>
+
+  </div>
+
+  <div class="log">
+
+  </div>
+</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 prepButton = document.querySelector('.sdk-prep-submit');
+  const prepBlock = document.querySelector('.sdk-prep')
+  const controlsBlock = document.querySelector('.sdk-ready')
+  const prepUsernameInput = document.getElementById('prep-username-input')
+  const prepCheckboxesParent = document.querySelector('.prep-checkboxes')
+
+  // change these values to connect to your room
+  const TEAM = 'some-team';
+  const ROOM = 'some-room';
+  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 prepCheckboxes = [
+    {control: 'micEnabled', label: 'Microphone enabled  by default'},
+    {control: 'cameraEnabled', label: 'Camera enabled  by default'},
+    {control: 'showToolbar', label: 'Show toolbar'},
+    {control: 'showCaptions', label: 'Show captions'},
+  ];
+
+  prepCheckboxes.forEach(control => {
+    const label = document.createElement('label');
+    label.style.display = 'block'
+    label.htmlFor = 'prep-' + control.control;
+    label.innerHTML = '<span>' + control.label + '</span>'
+
+
+    const field = document.createElement('input');
+    field.type = 'checkbox';
+    field.id = 'prep-' + control.control;
+
+    field.onchange = (e) => {
+      initialRoomState[control.control] = e.target.checked
+    }
+
+    label.appendChild(field);
+    prepCheckboxesParent.appendChild(label)
+
+  })
+
+  prepButton.onclick = () => {
+    prepBlock.style.display = 'none'
+    controlsBlock.style.display = 'block'
+
+    createControl()
+  }
+
+  prepUsernameInput.onchange = (e) => {
+    initialRoomState.username = e.target.value
+
+    console.warn(initialRoomState, '.,s')
+  }
+
+
+  const createControl = () => {
+    const api = DigitalSambaEmbedded.createControl({ url: ROOM_URL, root: parent, roomSettings: initialRoomState });
+
+    const log = document.querySelector('.log');
+
+    api.frame.width = 900;
+    api.frame.height = 700;
+
+    btn0.onclick = () => {api.load({ frameAttributes: {style: "border: 5px solid red"}, reportErrors: true })}
+
+    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: '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>`
+    });
+
+    api.on('userJoined', (data) => {
+      log.innerHTML += `<p>${Number(new Date)}: USER JOINED: ${JSON.stringify(data)}</p>`
+    });
+
+    api.on('userLeft', (data) => {
+      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('usersUpdated', ({data: {users}}) => {
+      participantList.innerHTML = '';
+
+
+      users.forEach(user => {
+        const row = document.createElement('div');
+        row.className = 'user-list-row';
+
+        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);
+
+        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);
+        }
+
+        participantList.appendChild(row);
+
+      })
+    })
+  }
+
+</script>
+
+</body>
+</html>