chore: update demo page

index.html

@@ -219,7 +219,7 @@ <h4 class="modal-title">Call In Progress</h4>
 </script>
 <script type="text/html" id="template-incoming">
   <div class="modal fade" tabindex="-1" role="dialog">
-      <div class="modal-dialog">
+      <div class="modal-dialog modal-lg">
           <div class="modal-content">
               <div class="modal-header">
                 <h4 class="modal-title">Incoming Call</h4>
@@ -254,6 +254,18 @@ <h4 class="modal-title">Incoming Call</h4>
                     </div>
                   </div>
                 </form>
+                <hr/>
+                <form class="answer-form">
+                  <div class="form-group row">
+                    <label class="col-sm-3 col-form-label">Answer</label>
+                    <div class="col-sm-5">
+                      <select class="form-control" name="device" required></select>
+                    </div>
+                    <div class="col-sm-4">
+                        <button class="btn btn-primary" type="submit">Answer</button>
+                    </div>
+                  </div>
+                </form>
               </div>
               <div class="modal-footer before-answer">
                 <button class="btn btn-warning toVoicemail">To Voicemail</button>
@@ -270,7 +282,7 @@ <h4 class="modal-title">Incoming Call</h4>
 <script type="text/javascript" src="https://unpkg.com/whatwg-fetch@latest/dist/fetch.umd.js"></script>
 <script type="text/javascript" src="https://unpkg.com/@ringcentral/sdk@latest/dist/ringcentral.js"></script>
 <script type="text/javascript" src="https://unpkg.com/@ringcentral/subscriptions@latest/dist/ringcentral-subscriptions.js"></script>
-<script type="text/javascript" src="https://unpkg.com/[email protected].8/build/index.js"></script>
+<script type="text/javascript" src="https://unpkg.com/[email protected].9/build/index.js"></script>
 <script src="./index.js"></script>
 </body>
 </html>

index.js

@@ -29,21 +29,9 @@ $(function() {
 
   function initCallControl() {
     subscription = subscriptions.createSubscription();
-    var cachedSubscriptionData = rcsdk.cache().getItem('rc-call-control-subscription-key');
-    if (cachedSubscriptionData) {
-      try {
-        subscription.setSubscription(cachedSubscriptionData); // use the cache
-      } catch (e) {
-        console.warn('Cannot set subscription from cache data', e);
-        subscription.setEventFilters([
-          '/restapi/v1.0/account/~/extension/~/telephony/sessions',
-        ]);
-      }
-    } else {
-      subscription.setEventFilters([
-        '/restapi/v1.0/account/~/extension/~/telephony/sessions',
-      ]);
-    }
+    subscription.setEventFilters([
+      '/restapi/v1.0/account/~/extension/~/telephony/sessions',
+    ]);
     subscription.on([subscription.events.subscribeSuccess, subscription.events.renewSuccess], function() {
       rcsdk.cache().setItem(cacheKey, subscription.subscription());
     });
@@ -337,7 +325,31 @@ $(function() {
         $modal.modal('hide');
         showCallControlModal(session);
       }
-    })
+    });
+    var $deviceSelect = $modal.find('select[name=device]').eq(0);
+    $deviceSelect.empty();
+    var devices = rcCallControl.devices.filter(function(d) { return d.status === 'Online' });
+
+    devices.forEach(function (device) {
+      $deviceSelect.append('<option value="' + device.id + '">' + device.name + '</option>')
+    });
+    var $answerForm = $modal.find('.answer-form').eq(0);
+    $answerForm.on('submit', function (e) {
+      e.preventDefault();
+      e.stopPropagation();
+      var deviceId = $deviceSelect.val();
+      if (!deviceId) {
+        throw new Error('No device selected');
+      }
+      session.answer({
+        deviceId: deviceId,
+      }).then(function () {
+        console.log('answered');
+        $modal.modal('hide');
+      }).catch(function(e) {
+        console.error('answer failed', e.stack || e);
+      });
+    });
   }
 
   function onLoginSuccess(server, clientId) {