twilio-client-b2b.html

<link rel="import" href="../polymer/polymer.html">
<link href="../font-roboto/roboto.html" rel="import">
<link href="../core-icon/core-icon.html" rel="import">
<link href="../core-icons/core-icons.html" rel="import">
<link rel="import" href="../paper-button/paper-button.html">
<link rel="import" href="../core-drawer-panel/core-drawer-panel.html">
<link rel="import" href="../core-header-panel/core-header-panel.html">
<link rel="import" href="../core-toolbar/core-toolbar.html">
<link rel="import" href="../core-icon-button/core-icon-button.html">
<link rel="import" href="../core-menu/core-menu.html">
<link rel="import" href="../core-scaffold/core-scaffold.html">
<link rel="import" href="../core-image/core-image.html">
<link rel="import" href="../core-animated-pages/core-animated-pages.html">
<link rel="import" href="twilio-client.html">


<script src="utils/namesgenerator.js"></script>

<polymer-element name="twilio-client-b2b">
  <template>
    <link href="twilio-client-b2b.css" type="text/css" rel="stylesheet"/>

    <style>
      core-icon-button {
        color: white;
      }
    </style>

    <core-media-query query="max-width: 640px"
                      queryMatches="{{phoneScreen}}"></core-media-query>
    <twilio-client capabilityTokenUrl="/capability"></twilio-client>

    <core-scaffold>
      <nav>
        <core-toolbar>
          <span>Clients list</span>
        </core-toolbar>
        <core-menu>
          <div class="usersList" layout vertical>
            <template repeat="{{pres in twilioClient.available}}">
              <paper-button class="clientButton" data-client-name="{{pres.from}}" raised on-click="{{callClient}}"
                            disabled?="{{!pres.available}}">
                {{pres.from}}
                <core-icon icon="radio-button-on"
                           class="{{ {green: pres.available, grey: !pres.available} | tokenList}}"></core-icon>
              </paper-button>
            </template>
          </div>
        </core-menu>
      </nav>

      <core-toolbar tool flex>
        <a href="demo.html">
          <core-icon-button icon="arrow-back">Go Back</core-icon-button>
        </a>
      </core-toolbar>

      <div layout vertical center-center>
        <h3>Browser to Browser</h3>

        <div class="descriptionContainer">
          <p>Demo presenting a possible browser to browser connection between two separate twilio clients. To test this
            demo, open two windows of the same page, or another window with <a href="bic-demo.html">Browser Incoming Call</a> demo.</p>

          <p>Each page will generate its own unique client name. The name of this client is displayed below. On the
            right
            hand side, is a list of available clients.</p>

          <p>If any other client will be available, it will be presented in that list. Just click on the client name to
            make
            a connection to this client.</p>

          <p>To pick up a call, wait for an incoming connection information in the log message box, and press the 'Pick
            Up'
            button.</p>

          <p>To hand up a call, press the 'Hang Up' button.</p>

          <p>With twilio demo account, it is sometimes necessary to press 'Any Key', in order to continue with the call.
            There is a button for this as well.</p>

          <p>Client Name: <strong>{{clientName}}</strong></p>
        </div>

        <div layout vertical?="{{phoneScreen}}" horizontal?="{{!phoneScreen}}" center-justified style="width: 95%;">
          <paper-button raised on-click="{{pickUp}}">
            <core-icon icon="perm-phone-msg"></core-icon>
            Pick Up
          </paper-button>

          <paper-button raised on-click="{{hangUp}}">
            <core-icon icon="cancel"></core-icon>
            Hang Up
          </paper-button>

          <paper-button raised on-click="{{anyKey}}">
            <core-icon icon="input"></core-icon>
            Any Key
          </paper-button>
        </div>

        <div id="log">{{log}}</div>
      </div>
    </core-scaffold>
  </template>

  <script>
    (function () {
      var self;

      Polymer({
        log: 'Loading pigeons...',

        ready: function () {
          self = this;

          self.clientName = utils.namesgenerator();
          self.twilioClient = self.shadowRoot.querySelector('twilio-client');
          self.twilioClient.clientName = self.clientName;
          self.twilioClient.auto = true;

          // Set up event listeners for custom events.
          self.twilioClient.addEventListener('device-ready', function () {
            self.log = "Ready";
          });

          self.twilioClient.addEventListener('device-error', function (e) {
            self.log = "Error: " + e.detail.error.message;
          });

          self.twilioClient.addEventListener('device-connect', function () {
            self.log = "Successfully established call";
          });

          self.twilioClient.addEventListener('device-disconnect', function () {
            self.log = "Call ended";
          });

          self.twilioClient.addEventListener('device-incoming', function (e) {
            self.log = "Incoming connection from " + e.detail.connection.parameters.From;
          });
        },

        callClient: function (event, detail, sender) {
          self.twilioClient.call(sender.dataset.clientName);
        },

        pickUp: function () {
          self.twilioClient.acceptConnection();
        },

        hangUp: function () {
          self.twilioClient.hangUp();
        },

        anyKey: function () {
          self.twilioClient.hangUp();
        }
      });
    })();
  </script>
</polymer-element>