circuit-call-button.js

const template = document.createElement('template');
template.innerHTML = `
<style>
* {
  box-sizing: border-box
}

:host {
  display: inline-block;
  cursor: pointer;
  border-radius: 5px;
  background:#88c541;
  color: white;
  padding: 2px 6px;
}
:host([inprogress]) {
  background:#c22026;
}

:host([disabled]) button {
  cursor: not-allowed;
}

button {
  cursor: pointer;
  outline: none;
  background: inherit;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  font-family: inherit;
  border: inherit;
  border-radius: inherit;
  padding: inherit;
  margin: inherit;
}

</style>

<button></button>
<audio id="ringback" autoplay></audio>
<audio id="audio" autoplay></audio>
`;

export class CircuitCallButton extends HTMLElement {
  // Attributes we care about getting change notifications for
  static get observedAttributes() {
    return ['video', 'target', 'guestToken'];
  }

  get connected() {
    return this.hasAttribute('connected');
  }

  set _connected(isConnected) {
    if (isConnected) {
      this.setAttribute('connected', '');
    } else {
      this.removeAttribute('connected');
    }
  }

  set target(value) {
    this._direct = this._validateEmail(value);
    this._target = value;
    // Reflect to attribute
    this.setAttribute('target', value);
  }

  get target() {
    return this._target;
  }

  set guestToken(value) {
    this._guestToken = value;
    // Reflect to attribute
    this.setAttribute('guestToken', value);
  }

  get guestToken() {
    return this._guestToken;
  }
  
  set firstName(value) {
    this._firstName = value;
    // Reflect to attribute
    this.setAttribute('firstName', value);
  }

  get firstName() {
    return this._firstName;
  }

  set lastName(value) {
    this._lastName = value;
    // Reflect to attribute
    this.setAttribute('lastName', value);
  }

  get lastName() {
    return this._lastName;
  }

  get client() {
    return this._client;
  }

  constructor() {
    super();
    this.EMAIL_REGEX = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    this._client = null;
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.appendChild(template.content.cloneNode(true));
    this._click = this._click.bind(this);
  }

  _validateTarget() {
    this._direct = this.EMAIL_REGEX.test(String(this._target).toLowerCase());
  }

  // Delay Circuit initialization to speed up page load. This way the SDK
  // can be loaded with 'async'
  async _init() {
    Circuit.logger.setLevel(1);

    if (this._guestToken) {
      // Use the guest SDK instead
      this._client = Circuit.GuestClient({
        domain: this._domain,
        client_id: this._clientId
      });
    } else {
      this._client = Circuit.Client({
        domain: this._domain,
        client_id: this._clientId
      });      
    }

    this._client.addEventListener('connectionStateChanged', e => {
      this._connected = e.state === 'Connected';
    });

    this._client.addEventListener('callStatus', e => {
      this.call = e.call;

      // Update 'inprogress' attribute and button text
      if (e.call.state === 'Initiated') {
        this.removeAttribute('inprogress');
        this._btn.textContent = this._callingText;
      } else if (e.call.state === 'Started') {
        // Another user has started the conference
        this._btn.textContent = this._joinText;
        this.removeAttribute('inprogress'); // remote call is in progress, but not the local call 
      } else if (e.call.state === 'ActiveRemote') {
        // User has joined the conference on another device
        // TODO: Offer pulling the call
        this.removeAttribute('inprogress');
        this._btn.textContent = this._callingText;
      } else {
        this.setAttribute('inprogress', '');
        this._btn.textContent = this._hangupText;
        this.removeAttribute('disabled', '');
      }

      // Set/clear ringback tone
      const ringbackEl = this.shadowRoot.querySelector('#ringback');
      if (e.call.state === 'Delivered') {
        ringbackEl.src = this._ringbackTone;
      } else {
        ringbackEl.removeAttribute('src');
        ringbackEl.load();
      }

      // Set remote audio stream
      this.shadowRoot.querySelector('#audio').srcObject = e.call.remoteAudioStream;

      this.dispatchEvent(new CustomEvent('callchange', { detail: e.call }));
    });

    this._client.addEventListener('callEnded', e => {
      this.call = null;
      this.removeAttribute('inprogress');
      this._btn.textContent = this._defaultText;

      const ringbackEl = this.shadowRoot.querySelector('#ringback');
      ringbackEl.removeAttribute('src');
      ringbackEl.load();

      // Raise without a call object as parameter
      this.dispatchEvent(new CustomEvent('callchange'));

      // Wait a bit to ensure call is successfully terminated, then logout
      // Comment out for now due to a presence bug.
      //setTimeout(this._client.logout, 200);
    });

    this.dispatchEvent(new CustomEvent('initialized', { detail: this.client }));
  }

  async _getCredentials() {
    let res = await fetch(`${this._poolUrl}?clientId=${this._clientId}&domain=${this._domain}`);
    res = await res.json();
    if (!res || !res.token) {
      throw Error('No pool users found');
    }
    const cred = atob(res.token).split(':');
    this._client.setOauthConfig({client_id: cred[2]});
    return {
      username: cred[0],
      password: cred[1]
    };
  }

  async _connect() {
    if (!Circuit) {
      throw Error('circuit-sdk is not loaded');
    }
    !this._client && this._init();

    try {
      if (this._client.connectionState === 'Connected') {
        return;
      } else if (this._client.connectionState === 'Disconnected') {
        if (this._poolUrl) {
          const cred = await this._getCredentials();
          await this._client.logon(cred);
        } else if (!this._guestToken) {
          await this._client.logon();
        }
      } else {
        await this._waitForConnected(5000);
      }
    } catch (err) {
      console.error('Error connecting to Circuit', err);
      throw new Error('Error connecting to Circuit');
    }
  }

  async _waitForConnected(timeoutms) {
    return new Promise((resolve, reject) => {
      const check = () => {
        if (this._client.connectionState === 'Connected') {
          resolve();
        } else if ((timeoutms -= 100) < 0) {
          reject('timed out');
        } else {
          setTimeout(check, 100);
        }
      }
      setTimeout(check, 100);
    });
  }

  async _click() {
    if (this.getAttribute('disabled') !== null) {
      return;
    }

    if (this.call) {
      if (this._direct) {
        await this._hangup();
      } else {
        await this._client.leaveConference(this.call.callId);
      }
    } else {
      if (this._direct) {
        await this._makeCall();
      } else if (this._guestToken) {
        await this._joinConference();
      } else {
        await this._startConference();
      }
    }
  }

  async _waitingRoom(token) {
    try {
      this._waiting = true;
      this.setAttribute('waiting', this._waiting);
      this.dispatchEvent(new CustomEvent('waitingchange', { detail: this._waiting }));
      await this._client.monitorSession(token);
    } finally {
      this._waiting = false;
      this.setAttribute('waiting', this._waiting);
      this.dispatchEvent(new CustomEvent('waitingchange', { detail: this._waiting }));
    }
  }

  async _joinConference() {
    if (this._waiting) {
      this._client.cancelMonitor();
      return;
    }

    // For better user feedback change call to inprogress before call
    // state is 'Initiated'
    const origText = this._btn.textContent;
    this._btn.textContent = this._callingText;
    this.setAttribute('disabled', '');
    try {
      await this._connect();
      await this._waitingRoom(this._guestToken);
      this.call = await this._client.joinConference({
        token: this._guestToken,
        firstName: this._firstName || 'unknown',
        lastName: this._lastName || 'unknown'
      }, { audio: true, video: this._sendVideo });
    } catch (err) {
      this.removeAttribute('disabled');
      this._btn.textContent = origText;
    }
  }

  async _startConference() {
    // For better user feedback change call to inprogress before call
    // state is 'Initiated'
    const origText = this._btn.textContent;
    this._btn.textContent = this._callingText;
    this.setAttribute('disabled', '');
    try {
      await this._connect();
      const startedCalls = await this._client.getStartedCalls();
      const remoteCall = startedCalls && startedCalls.find(c => c.convId === this._target);
      if (remoteCall) {
        await this._client.joinConference(remoteCall.callId, { audio: true, video: this._sendVideo });
      } else {
        this.call = await this._client.startConference(this._target, { audio: true, video: this._sendVideo });
      }
    } catch (err) {
      this.removeAttribute('disabled');
      this._btn.textContent = origText;
    }
  }

  async _makeCall() {
    // For better user feedback change call to inprogress before call
    // state is 'Initiated'
    const origText = this._btn.textContent;
    this._btn.textContent = this._callingText;
    this.setAttribute('disabled', '');
    try {
      await this._connect();
      this.call = await this._client.makeCall(this._target, {audio: true, video: this._sendVideo}, true);
    } catch (err) {
      this.removeAttribute('disabled');
      this._btn.textContent = origText;
    }
  }

  async _hangup() {
    await this._client.endCall(this.call.callId);
  }

  // Lifecycle hooks
  connectedCallback() {
    this._btn = this.shadowRoot.querySelector('button');
    this._defaultText = this.textContent && this.textContent.replace(/^\s+|\s+$/g, '') || 'Call';
    this._btn.textContent = this._defaultText;
    this._btn.addEventListener('click', this._click);

    this._clientId = this.getAttribute('clientId');
    this._domain = this.getAttribute('domain') || 'circuitsandbox.net';
    this._poolUrl = this.getAttribute('poolUrl');
    this._target = this.getAttribute('target');
    this._validateTarget();
    this._guestToken = this.getAttribute('guestToken');
    this._waiting = false;
    this._firstName = this.getAttribute('firstName');
    this._lastName = this.getAttribute('lastName');
    this._sendVideo = this.getAttribute('video') !== null;
    this._callingText = this.getAttribute('callingText') || 'Calling...';
    this._joinText = this.getAttribute('joinText') || 'Join';
    this._hangupText = this.getAttribute('hangupText') || 'Hangup';
    this._ringbackTone = this.getAttribute('ringbackTone') || 'https://upload.wikimedia.org/wikipedia/commons/c/cd/US_ringback_tone.ogg';
  }

  disconnectedCallback() {
    if (!this._btn) {
      return;
    }
    this._btn.removeEventListener('click', this._click);
  }

  attributeChangedCallback(attrName, oldValue, newValue) {
    switch (attrName) {
      case 'video':
      // Send video if attribute is present
      newValue = newValue !== null;
      if (this._sendVideo !== !!newValue) {
        this._sendVideo = !!newValue;
        this._client && this.call && this._client.toggleVideo(this.call.callId)
          .catch(console.error);
      }
      break;

      case 'target':
      this._target = newValue;
      this._validateTarget();
      break;

      case 'guestToken':
      this._guestToken = newValue;
      break;
    }
  }
}

customElements.define('circuit-call-button', CircuitCallButton);