npm - @digitalsamba/embedded-sdk - Versions diffs - 0.0.19 → 0.0.21 - Mend

@digitalsamba/embedded-sdk 0.0.19 → 0.0.21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (32) hide show

package/README.md +32 -57
package/dist/cjs/index.d.ts +2 -1
package/dist/cjs/index.js +16 -9
package/dist/cjs/tsconfig.cjs.tsbuildinfo +1 -1
package/dist/cjs/types.d.ts +1 -1
package/dist/cjs/utils/errors.d.ts +1 -0
package/dist/cjs/utils/errors.js +6 -2
package/dist/demo/helper.js +116 -0
package/dist/demo/index.js +1 -0
package/dist/demo/initial-config.html +286 -0
package/dist/demo/logo.png +0 -0
package/dist/demo/managed-state.html +278 -0
package/dist/demo/style.css +305 -0
package/dist/demo/videoroom.html +137 -0
package/dist/esm/index.d.ts +2 -1
package/dist/esm/index.js +17 -10
package/dist/esm/tsconfig.esm.tsbuildinfo +1 -1
package/dist/esm/types.d.ts +1 -1
package/dist/esm/utils/errors.d.ts +1 -0
package/dist/esm/utils/errors.js +5 -1
package/dist/types/index.d.ts +2 -1
package/dist/types/tsconfig.types.tsbuildinfo +1 -1
package/dist/types/types.d.ts +1 -1
package/dist/types/utils/errors.d.ts +1 -0
package/dist/umd/index.js +1 -1
package/package.json +4 -3
package/dist/index.d.ts +0 -67
package/dist/index.html +0 -318
package/dist/initial-config-demo.html +0 -303
package/dist/permissions-demo.html +0 -289
package/dist/tsconfig.tsbuildinfo +0 -1
package/dist/virtual-background-demo.html +0 -290

package/dist/index.html DELETED Viewed

@@ -1,318 +0,0 @@
-<!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: 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 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 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>
-<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');
-  // 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});
-  var api = DigitalSambaEmbedded.createControl({ url: ROOM_URL, root: parent });
-  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: '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>`
-  });
-  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('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>
-</html>

package/dist/initial-config-demo.html DELETED Viewed

@@ -1,303 +0,0 @@
-<!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: "",
-      audioEnabled: false,
-      videoEnabled: 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: 'audioEnabled', label: 'Microphone enabled  by default'},
-    {control: 'videoEnabled', 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>