FS-8045 [Verto-Communicator] Make the folder structure compliant with AngularJS best practices and adjust build system.

html5/verto/verto_communicator/src/partials/angular-prompt.html

@@ -0,0 +1,33 @@
+<div>
+    <div class="modal-header">
+        <button type="button" class="close pull-right" ng-click="$dismiss()" aria-hidden="true">×</button>
+        <h4 class="modal-title">{{options.title}}</h4>
+    </div>
+    <div class="modal-body">
+
+        <p ng-if="options.message">
+            {{options.message}}
+        </p>
+
+        <form id="cgPromptForm" name="cgPromptForm" ng-if="options.input" ng-submit="submit()">
+            <div class="form-group" ng-class="{'has-error':cgPromptForm.$invalid && changed}">
+                <label for="cgPromptInput">{{options.label}}</label>
+                <input id="cgPromptInput" type="text" class="form-control"  placeholder="{{options.label}}" ng-model="input.name" required ng-change="changed=true" ng-if="!options.values || options.values.length === 0"/ autofocus="autofocus">
+                <div class="input-group" ng-if="options.values">
+                    <input id="cgPromptInput" type="text" class="form-control" placeholder="{{options.label}}" ng-model="input.name" required ng-change="changed=true" autofocus="autofocus"/>
+
+                    <div class="input-group-btn" dropdown>
+                        <button type="button" class="btn btn-default dropdown-toggle" dropdown-toggle data-toggle="dropdown"><span class="caret"></span></button>
+                        <ul class="dropdown-menu pull-right">
+                            <li ng-repeat="value in options.values"><a href="" ng-click="input.name = value">{{value}}</a></li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+         </form>
+
+    </div>
+    <div class="modal-footer">
+        <button ng-repeat="button in options.buttons track by button.label" class="btn btn-default {{button.class}}" ng-class="{'btn-primary':button.primary}" ng-click="buttonClicked(button)">{{button.label}}</button>
+    </div>
+</div>

html5/verto/verto_communicator/src/partials/browser_upgrade.html

@@ -0,0 +1,27 @@
+<div class="centered-block-frame" id="browser_upgrade">
+  <div class="col-md-6 centered-block">
+    <div class="card">
+      <div class="card-body text-center">
+        <h2>Sorry, your browser is not supported.</h2>
+        <h3>Use one of the following supported browsers.</h3>
+        <ul class="browsers-supported">
+          <li>
+            <a href="https://www.google.com/chrome" target="_blank">
+              <img src="images/browser-logos/chrome_128x128.png" title="Chrome" alt="chrome" />
+            </a>
+          </li>
+          <li>
+            <a href="https://www.mozilla.org/en-US/firefox/new/" target="_blank">
+              <img src="images/browser-logos/firefox_128x128.png" title="Firefox" alt="firefox" />
+            </a>
+          </li>
+          <li>
+            <a href="http://www.opera.com/" target="_blank">
+              <img src="images/browser-logos/opera_128x128.png" title="Opera" alt="opera" />
+            </a>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</div>

html5/verto/verto_communicator/src/partials/chat.html

@@ -0,0 +1,120 @@
+<div id="incall-pane" class="sidebar-nav" ng-controller="ChatController">
+  <ul class="nav nav-tabs" role="tablist" ng-init="activePane = 'members'">
+    <li role="presentation" ng-class="{'active': activePane == 'members'}">
+      <a ng-click="activePane = 'members'" href="">
+        Members
+      </a>
+    </li>
+    <li role="presentation" ng-class="{'active': activePane == 'chat'}">
+      <a ng-click="activePane = 'chat'" href="">
+        Chat
+      </a>
+    </li>
+  </ul>
+
+  <div class="chat-members" ng-show="activePane == 'members'">
+    <div ng-show="!members.length">
+      <p class="text-center text-muted">There are no members to show.</p>
+    </div>
+
+    <div ng-repeat="member in members" class="chat-member-item">
+      <span class="chat-members-avatar">
+        <img gravatar-size="40" gravatar-src-once="member.email" class="img-circle" ng-class="{'chat-member-talking': member.status.audio.talking, 'chat-member-muted': member.status.audio.muted}" />
+      </span>
+      <h4 class="chat-members-name">{{ member.name }}</h4>
+      <div class="pull-right action-buttons chat-members-action" ng-show="verto.data.confRole == 'moderator'">
+        <div class="btn-group">
+          <button type="button" class="btn btn-xs dropdown-toggle" data-toggle="dropdown">
+            <i class="mdi-navigation-more-vert" style="margin-right: 0px;"></i>
+          </button>
+          <ul class="dropdown-menu slidedown pull-right">
+            <li>
+              <a href="" ng-click="confKick(member.id)">
+                <span class="mdi-fw mdi-av-not-interested"></span>
+                Kick
+              </a>
+            </li>
+            <li>
+              <a href="" ng-click="confMuteMic(member.id)">
+                <span class="mdi-fw mdi-av-mic-off"></span>
+                Mute/Unmute Mic
+              </a>
+            </li>
+            <li>
+              <a href="" ng-click="confMuteVideo(member.id)">
+                <span class="mdi-fw mdi-av-videocam-off"></span>
+                Mute/Unmute Video
+              </a>
+            </li>
+            <li>
+              <a href="" ng-click="confPresenter(member.id)">
+                <span class="mdi-fw mdi-action-picture-in-picture"></span>
+                Presenter
+              </a>
+            </li>
+            <li>
+              <a href="" ng-click="confVideoFloor(member.id)">
+                <span class="mdi-fw mdi-action-aspect-ratio"></span>
+                Video Floor
+              </a>
+            </li>
+            <li>
+              <a href="" ng-click="confBanner(member.id)">
+                <span class="mdi-fw mdi-av-subtitles"></span>
+                Banner
+              </a>
+            </li>
+            <li>
+              <a href="" ng-click="confVolumeDown(member.id)">
+                <span class="mdi-fw mdi-av-volume-down"></span>
+                Vol –
+              </a>
+            </li>
+            <li>
+              <a href="" ng-click="confVolumeUp(member.id)">
+                <span class="mdi-fw mdi-av-volume-up"></span>
+                Vol +
+              </a>
+            </li>
+            <li>
+              <a href="" ng-click="confTransfer(member.id)">
+                <span class="mdi-fw mdi-communication-call-made"></span>
+                Transfer
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
+
+      <span class="chat-members-status pull-right">
+        <i class="in-use" ng-class="{'mdi-av-mic': !member.status.audio.muted, 'mdi-av-mic-off': member.status.audio.muted, 'mic_talking': member.status.audio.talking}"></i>
+        <i ng-class="{'mdi-av-videocam': !member.status.video.muted, 'mdi-av-videocam-off': member.status.video.muted, 'in-use': (member.status.video && !member.status.video.muted), 'disabled': !member.status.video}"></i>
+      </span>
+    </div>
+  </div>
+
+  <div class="chat-history" ng-show="activePane == 'chat'">
+    <div class="chat-messages">
+      <div class="chat-message" ng-show="!messages.length">
+        <p class="text-center text-muted">There are no messages to show.</p>
+      </div>
+      <div class="chat-message" ng-repeat="message in messages" title="Sent at {{ message.created_at|date }}.">
+        <div class="chat-message-metadata">{{ message.from }}:</div>
+        <p class="chat-message-body">{{ message.body }}</p>
+      </div>
+      <div id="chat-message-bottom"></div>
+    </div>
+
+    <div class="chat-message-input">
+      <form ng-submit="send()" >
+        <div class="chat-message-input-group">
+          <textarea ng-model="message" ng-keyup="($event.keyCode == 13 && $event.shiftKey !== true) && send()" required="required" class="form-control input-sm" placeholder="Type your message here..."></textarea>
+          <button class="btn btn-success btn-sm" type="submit">
+            Send
+            <span class="mdi-navigation-arrow-forward chat-message-input-group-icon-button"></span>
+          </button>
+        </div>
+      </form>
+    </div>
+  </div>
+</div>

html5/verto/verto_communicator/src/partials/contributors.html

@@ -0,0 +1,23 @@
+<div class="modal-header">
+  <h3 class="modal-title">Contributors</h3>
+</div>
+<div class="modal-body">
+  <ul class="contributors">
+    <li ng-repeat="contributor in contributors">
+      <div class="contributor-avatar">
+        <img gravatar-src="contributor.email" gravatar-size="75"/>
+      </div>
+    
+      <div class="contributor-info">
+        <h3>{{ contributor.name }}</h3>
+        <h5>{{ contributor.email }}</h5>
+      </div>
+
+      <div class="clearfix"></div>
+    </li>
+  </ul>
+
+</div>
+<div class="modal-footer">
+</div>
+

html5/verto/verto_communicator/src/partials/dialpad.html

@@ -0,0 +1,143 @@
+<div class="centered-block-frame" id="dialpad">
+  <div id="call-history-wrapper">
+    <div id="call_history" class="shadow-z-2 panel">
+      <div class="panel-heading">
+        <div class="panel-title">
+            Call History
+
+            <span class="pull-right pull-right-margin dropdown">
+              <a href="" class="dropdown-toggle" data-target="#" data-toggle="dropdown" aria-expanded="true">
+                <i class="mdi-navigation-more-vert"></i>
+              </a>
+              <ul class="dropdown-menu">
+                  <li><a href="" ng-click="clearCallHistory()">Clear History</a></li>
+              </ul>
+            </span>
+        </div>
+      </div>
+      <ul class="call-history">
+        <div ng-show="!storage.data.call_history.length">
+          <p class="text-center text-muted">No history calls.</p>
+        </div>
+
+        <li ng-repeat="call in storage.data.call_history">
+          <a ng-show="call.number" href="" ng-dblclick="$parent.call()" ng-click="$parent.fillDialpadNumber(call.number)">
+            <i ng-show="call.direction == 'inbound'" ng-class="{'mdi-communication-call-missed': !call.status,'mdi-communication-call-received': call.status}"></i>
+            <i ng-show="call.direction == 'outbound'" class="mdi-communication-call-made"></i>
+            <h2 class="dialpad-number dialpad-number-limited">{{ call.number }}</h2>
+            <br/>
+            <span class="dialpad-alpha">{{ call.call_start }}</span>
+          </a>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <div class="col-md-4 col-sm-12 col-xs-12 centered-block">
+    <div class="panel panel-default shadow-z-2" ng-class="{'shadow-z-4': call_history, 'shadow-z-2': !call_history}">
+      <form name="form">
+        <div class="input-group dialpad-display">
+          <span class="input-group-btn-left">
+            <a href="" ng-click="toggleCallHistory()">
+              <i class="mdi-action-settings-phone"></i>
+            </a>
+          </span>
+          <input name="dialpadnumber" type="text" class="form-control text-center" placeholder="Enter an extension" ng-model="dialpadNumber" autofocus/>
+          <span class="input-group-btn">
+            <a href="" ng-click="backspace()">
+              <i class="mdi-content-backspace"></i>
+            </a>
+          </span>
+        </div>
+        <div class="panel-body">
+          <div class="dialpad-numbers">
+            <div class="row">
+              <div class="col-md-4 col-xs-4">
+                <a class="btn btn-block" href="" ng-click="dtmf(1)">
+                  <h2 class="dialpad-number">1</h2>
+                  <span class="dialpad-alpha">./@</span>
+                </a>
+              </div>
+              <div class="col-md-4 col-xs-4">
+                <a class="btn btn-block" href="" ng-click="dtmf(2)">
+                  <h2 class="dialpad-number">2</h2>
+                  <span class="dialpad-alpha">ABC</span>
+                </a>
+              </div>
+              <div class="col-md-4 col-xs-4">
+                <a class="btn btn-block" href="" ng-click="dtmf(3)">
+                  <h2 class="dialpad-number">3</h2>
+                  <span class="dialpad-alpha">DEF</span>
+                </a>
+              </div>
+            </div>
+            <div class="row">
+              <div class="col-md-4 col-xs-4">
+                <a class="btn btn-block" href="" ng-click="dtmf(4)">
+                  <h2 class="dialpad-number">4</h2>
+                  <span class="dialpad-alpha">GHI</span>
+                </a>
+              </div>
+              <div class="col-md-4 col-xs-4">
+                <a class="btn btn-block" href="" ng-click="dtmf(5)">
+                  <h2 class="dialpad-number">5</h2>
+                  <span class="dialpad-alpha">JKL</span>
+                </a>
+              </div>
+              <div class="col-md-4 col-xs-4">
+                <a class="btn btn-block" href="" ng-click="dtmf(6)">
+                  <h2 class="dialpad-number">6</h2>
+                  <span class="dialpad-alpha">MNO</span>
+                </a>
+              </div>
+            </div>
+            <div class="row">
+              <div class="col-md-4 col-xs-4">
+                <a class="btn btn-block" href="" ng-click="dtmf(7)">
+                  <h2 class="dialpad-number">7</h2>
+                  <span class="dialpad-alpha">PQRS</span>
+                </a>
+              </div>
+              <div class="col-md-4 col-xs-4">
+                <a class="btn btn-block" href="" ng-click="dtmf(8)">
+                  <h2 class="dialpad-number">8</h2>
+                  <span class="dialpad-alpha">TUV</span>
+                </a>
+              </div>
+              <div class="col-md-4 col-xs-4">
+                <a class="btn btn-block" href="" ng-click="dtmf(9)">
+                  <h2 class="dialpad-number">9</h2>
+                  <span class="dialpad-alpha">WXYZ</span>
+                </a>
+              </div>
+            </div>
+            <div class="row">
+              <div class="col-md-4 col-xs-4">
+                <a class="btn btn-block" href="" ng-click="dtmf('*')">
+                  <h2 class="dialpad-number dialpad-star">*</h2>
+                  <span class="dialpad-alpha"></span>
+                </a>
+              </div>
+              <div class="col-md-4 col-xs-4">
+                <a class="btn btn-block" href="" ng-click="dtmf(0)">
+                  <h2 class="dialpad-number">0</h2>
+                  <span class="dialpad-alpha">+</span>
+                </a>
+              </div>
+              <div class="col-md-4 col-xs-4">
+                <a class="btn btn-block" href="" ng-click="dtmf('#')">
+                  <h2 class="dialpad-number dialpad-pound">#</h2>
+                  <span class="dialpad-alpha"></span>
+                </a>
+              </div>
+            </div>
+          </div>
+          <div class="form-group text-center">
+            <button type="submit" class="btn btn-success btn-fab" ng-click="call(dialpadNumber)" title="Call Extension">
+              <i class="mdi-communication-call"></i>
+            </button>
+          </div>
+        </div>
+      </form>
+    </div>
+  </div>
+</div>

html5/verto/verto_communicator/src/partials/dialpad_widget.html

@@ -0,0 +1,111 @@
+<div class="panel panel-default shadow-z-2" ng-class="{'shadow-z-4': call_history, 'shadow-z-2': !call_history}">
+      <form name="form">
+        <div class="input-group dialpad-display">
+          <span ng-show="!incall" class="input-group-btn-left">
+            <a href="" ng-click="toggleCallHistory()">
+              <i class="mdi-action-settings-phone"></i>
+            </a>
+          </span>
+          <input name="dialpadnumber" type="text" class="form-control text-center" placeholder="Enter an extension" ng-model="dialpadNumber" />
+          <span class="input-group-btn">
+            <a href="" ng-click="backspace()">
+              <i class="mdi-content-backspace"></i>
+            </a>
+          </span>
+        </div>
+        <div class="panel-body">
+          <div class="dialpad-numbers">
+            <div class="row">
+              <div class="col-md-4 col-xs-4">
+                <a class="btn btn-block" href="" ng-click="dtmf(1)">
+                  <h2 class="dialpad-number">1</h2>
+                  <span class="dialpad-alpha">./@</span>
+                </a>
+              </div>
+              <div class="col-md-4 col-xs-4">
+                <a class="btn btn-block" href="" ng-click="dtmf(2)">
+                  <h2 class="dialpad-number">2</h2>
+                  <span class="dialpad-alpha">ABC</span>
+                </a>
+              </div>
+              <div class="col-md-4 col-xs-4">
+                <a class="btn btn-block" href="" ng-click="dtmf(3)">
+                  <h2 class="dialpad-number">3</h2>
+                  <span class="dialpad-alpha">DEF</span>
+                </a>
+              </div>
+            </div>
+            <div class="row">
+              <div class="col-md-4 col-xs-4">
+                <a class="btn btn-block" href="" ng-click="dtmf(4)">
+                  <h2 class="dialpad-number">4</h2>
+                  <span class="dialpad-alpha">GHI</span>
+                </a>
+              </div>
+              <div class="col-md-4 col-xs-4">
+                <a class="btn btn-block" href="" ng-click="dtmf(5)">
+                  <h2 class="dialpad-number">5</h2>
+                  <span class="dialpad-alpha">JKL</span>
+                </a>
+              </div>
+              <div class="col-md-4 col-xs-4">
+                <a class="btn btn-block" href="" ng-click="dtmf(6)">
+                  <h2 class="dialpad-number">6</h2>
+                  <span class="dialpad-alpha">MNO</span>
+                </a>
+              </div>
+            </div>
+            <div class="row">
+              <div class="col-md-4 col-xs-4">
+                <a class="btn btn-block" href="" ng-click="dtmf(7)">
+                  <h2 class="dialpad-number">7</h2>
+                  <span class="dialpad-alpha">PQRS</span>
+                </a>
+              </div>
+              <div class="col-md-4 col-xs-4">
+                <a class="btn btn-block" href="" ng-click="dtmf(8)">
+                  <h2 class="dialpad-number">8</h2>
+                  <span class="dialpad-alpha">TUV</span>
+                </a>
+              </div>
+              <div class="col-md-4 col-xs-4">
+                <a class="btn btn-block" href="" ng-click="dtmf(9)">
+                  <h2 class="dialpad-number">9</h2>
+                  <span class="dialpad-alpha">WXYZ</span>
+                </a>
+              </div>
+            </div>
+            <div class="row">
+              <div class="col-md-4 col-xs-4">
+                <a class="btn btn-block" href="" ng-click="dtmf('*')">
+                  <h2 class="dialpad-number dialpad-star">*</h2>
+                  <span class="dialpad-alpha"></span>
+                </a>
+              </div>
+              <div class="col-md-4 col-xs-4">
+                <a class="btn btn-block" href="" ng-click="dtmf(0)">
+                  <h2 class="dialpad-number">0</h2>
+                  <span class="dialpad-alpha">+</span>
+                </a>
+              </div>
+              <div class="col-md-4 col-xs-4">
+                <a class="btn btn-block" href="" ng-click="dtmf('#')">
+                  <h2 class="dialpad-number dialpad-pound">#</h2>
+                  <span class="dialpad-alpha"></span>
+                </a>
+              </div>
+            </div>
+          </div>
+          <div class="form-group text-center">
+            <button type="submit" class="btn btn-success btn-fab" ng-click="call(); ok()" title="Call Extension">
+              <i class="mdi-communication-call"></i>
+            </button>
+            &nbsp;&nbsp;
+            <button type="submit" class="btn btn-primary btn-fab" ng-click="transfer(); ok()" title="Transfer">
+              <i class="mdi-notification-phone-forwarded"></i>
+            </button>
+
+          </div>
+        </div>
+      </form>
+    </div>

html5/verto/verto_communicator/src/partials/incall.html

@@ -0,0 +1,5 @@
+<div class="centered-block-frame" id="incall">
+  <div class="col-md-12 centered-block" ng-class="{'video-call': storage.data.videoCall, 'phone-call': !storage.data.videoCall}">
+    <div class="slide-animate height100" ng-include="callTemplate"></div>
+  </div>
+</div>

html5/verto/verto_communicator/src/partials/login.html

@@ -0,0 +1,56 @@
+<div class="centered-block-frame" id="login">
+  <div class="col-md-4 col-xs-12 col-sm-12 centered-block">
+    <div class="panel panel-default shadow-z-2">
+      <div class="panel-body">
+        <h3>Login</h3>
+
+        <div ng-show="form.$submitted && form.$invalid" class="alert alert-danger">
+          <p>Verify the fields bellow and try again.</p>
+        </div>
+
+        <form name="form" class="css-form" novalidate ng-init="advanced = false">
+          <div class="form-group {{ (((!form.name.$pristine || form.$submitted) && !form.name.$valid) ? 'has-error': '') }}">
+            <label class="control-label" for="login-name">Name</label>
+            <input type="text" name="name" class="form-control" id="login-name" placeholder="Your name" required="" ng-model="verto.data.name" autofocus>
+          </div>
+          <div class="form-group {{ (((!form.email.$pristine || form.$submitted) && !form.email.$valid) ? 'has-error': '') }}">
+            <label class="control-label" for="login-email">Email</label>
+            <input type="email" name="email" class="form-control" id="login-email" placeholder="Your email" required="" ng-model="verto.data.email" ng-model-options="{debounce: 250}">
+          </div>
+
+          <div class="form-group" ng-hide="!advanced">
+              <label class="control-label" for="login-user">User</label>
+            <input type="text" class="form-control" id="login-user" placeholder="User" ng-model="verto.data.login">
+          </div>
+          <div class="form-group" ng-hide="!advanced">
+            <label class="control-label" for="login-password">Password</label>
+            <input type="password" class="form-control" id="login-password" placeholder="Password" ng-model="verto.data.password">
+          </div>
+
+          <div class="form-group" ng-hide="!advanced">
+            <label class="control-label" for="login-hostname">Hostname</label>
+            <input type="text" class="form-control" id="login-hostname" placeholder="Hostname" ng-model="verto.data.hostname">
+          </div>
+          <div class="form-group" ng-hide="!advanced">
+            <label class="control-label" for="login-wsurl">Websocket URL</label>
+            <input type="text" class="form-control" id="login-wsurl" placeholder="Websocket URL" ng-model="verto.data.wsURL">
+          </div>
+
+          <div class="form-group hide">
+            <label for="login-login">Login</label>
+            <input type="text" class="form-control" id="login-login" placeholder="Login" ng-model="verto.data.login">
+          </div>
+          <div class="form-group hide">
+            <label for="login-password">Password</label>
+            <input type="text" class="form-control" id="login-password" placeholder="Password" ng-model="verto.data.password">
+          </div>
+
+          <div class="form-group text-right">
+            <a style="margin-top: 13px;" href="" ng-click="advanced = !advanced" class="pull-left">Settings</a>
+            <button type="submit" class="btn btn-success" ng-click="(form.$valid && login())">Login</button>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
+</div>

html5/verto/verto_communicator/src/partials/menu.html

@@ -0,0 +1,69 @@
+<nav ng-controller="MenuController" class="navbar navbar-fixed-top navbar-material-blue-900">
+  <div class="container-fluid">
+    <div class="https-untrusted navbar-center" ng-show="!safeProtocol">
+      <div class="https-message">
+        This Connection is Untrusted.
+      </div>
+    </div>
+
+    <div class="navbar-header">
+      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
+        <span class="sr-only">Toggle navigation</span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+      </button>
+      <a class="navbar-brand" href="#/">
+        Verto Communicator
+      </a>
+    </div>
+    <div id="navbar" class="navbar-collapse collapse">
+      <ul class="nav navbar-nav navbar-right">
+        <li>
+          <a href="">
+              <i class="mdi-toggle-radio-button-on" user-status condition="storage.data.userStatus"></i>
+          </a>
+        </li>
+        <li>
+          <a href="" class="incall-number" ng-show="storage.data.called_number">
+              {{ storage.data.called_number && storage.data.userStatus == 'connecting' ? 'Last Call: ' : 'In Call: '  }} {{ storage.data.called_number  }}
+          </a>
+        </li>
+
+        <li class="navbar-item-icon" ng-show="verto.data.connected">
+          <a href="" ng-click="openModal('partials/modal_settings.html', 'ModalSettingsController')">
+            <i class="mdi-action-settings"></i>
+          </a>
+        </li>
+        <li class="navbar-item-icon" ng-show="verto.data.call && storage.data.videoCall">
+          <a href="" ng-click="toggleChat()">
+            <i class="mdi-communication-chat"></i>
+            <div ng-show="chat_counter" class="chat-notification-badge">
+                <div class="chat-notification">{{ chat_counter }}</div>
+            </div>
+          </a>
+        </li>
+        <li class="navbar-item-icon">
+          <a ng-show="!verto.data.connected" href="#/login">
+            <i class="mdi-social-person"></i>
+          </a>
+          <a ng-show="verto.data.connected" href="" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
+            <i class="mdi-social-person"></i>
+            <span class="caret"></span>
+          </a>
+          <ul class="dropdown-menu" role="menu">
+            <li><a href="" ng-click="openModal('partials/modal_logininfo.html', 'ModalLoginInformationController')">Change Login Information</a></li>
+            <!--<li><a href="#">View Device Settings</a></li>-->
+            <li><a href="" ng-click="logout()">Logout</a></li>
+          </ul>
+        </li>
+        <li class="navbar-item-icon">
+          <a href="" ng-click="showContributors()">
+            <i class="mdi-action-loyalty"></i>
+          </a>
+        </li>
+
+      </ul>
+    </div>
+  </div>
+</nav>

html5/verto/verto_communicator/src/partials/modal_logininfo.html

@@ -0,0 +1,31 @@
+<div class="modal-header">
+  <h3 class="modal-title">Login Information</h3>
+</div>
+<div class="modal-body">
+
+  <div class="form-group">
+    <label for="name">Name:</label>
+    <input type="text" name="name" class="form-control" ng-model="storage.data.name" ng-value="storage.data.name"/>
+  </div>
+  
+  <div class="form-group">
+    <label for="email">Email:</label>
+    <input type="text" name="email" class="form-control" ng-model="storage.data.email" ng-value="storage.data.email"/>
+  </div>
+
+  <div class="form-group">
+    <label class="control-label" for="user">User</label>
+    <input type="text" class="form-control" id="user" placeholder="User" ng-model="storage.data.login">
+  </div>
+  
+  <div class="form-group">
+    <label class="control-label" for="password">Password</label>
+    <input type="password" class="form-control" id="password" placeholder="Password" ng-model="verto.data.password">
+  </div>
+
+
+</div>
+<div class="modal-footer">
+  <!-- <button class="btn btn-primary" ng-click="cancel()">Cancel</button> -->
+  <button class="btn btn-primary" ng-click="ok()">Save Login Information</button>
+</div>

html5/verto/verto_communicator/src/partials/modal_settings.html

@@ -0,0 +1,95 @@
+<div class="modal-header">
+  <h3 class="modal-title">Device Settings</h3>
+</div>
+<div class="modal-body">
+
+  <div class="form-group" ng-show="verto.data.useVideo">
+    <label for="settings-camera">Camera:</label>
+    <select name="camera" id="settings-camera" class="form-control"
+            ng-model="verto.data.selectedVideo" ng-options="item.id as item.label for item in verto.data.videoDevices">
+    </select>
+  </div>
+
+  <div class="form-group" ng-show="verto.data.useVideo">
+    <label for="settings-share-device">Share device:</label>
+    <select name="share-device" id="settings-share-device" class="form-control"
+            ng-model="verto.data.selectedShare" ng-options="item.id as item.label for item in verto.data.shareDevices">
+    </select>
+  </div>
+
+  <div class="form-group">
+    <label for="settings-microphone">Microphone:</label>
+    <select name="microphone" id="settings-microphone" class="form-control"
+            ng-model="verto.data.selectedAudio" ng-options="item.id as item.label for item in verto.data.audioDevices">
+    </select>
+
+    <a class="btn btn-primary" href="" ng-click="refreshDeviceList()">Refresh device list</a>
+  </div>
+
+  <div class="form-group">
+    <label for="settings-microphone">General settings:</label>
+    <div class="checkbox">
+      <label>
+        <input type="checkbox" name="use_video" value="verto.data.useVideo" ng-model="verto.data.useVideo">
+        Use Video
+      </label>
+    </div>
+    <div class="checkbox">
+      <label>
+        <input type="checkbox" name="use_stereo_audio" ng-value="verto.data.useStereo" ng-model="verto.data.useStereo">
+        Stereo Audio
+      </label>
+    </div>
+    <div class="checkbox">
+      <label>
+        <input type="checkbox" name="use_stun" ng-value="verto.data.useSTUN" ng-model="verto.data.useSTUN">
+        Use STUN
+      </label>
+    </div>
+    <div class="checkbox">
+      <label>
+        <input type="checkbox" name="use_dedenc" ng-value="verto.data.useDedenc" ng-model="verto.data.useDedenc">
+        Use Dedicated Remote Encoder
+      </label>
+    </div>
+    <div class="checkbox">
+      <label>
+        <input type="checkbox" name="mirror_input" ng-value="verto.data.mirrorInput" ng-model="verto.data.mirrorInput">
+        Scale Remote Video To Match Camera Resolution
+      </label>
+    </div>
+    <div class="checkbox">
+      <label>
+        <input type="checkbox" name="ask_recover_call" ng-value="storage.data.askRecoverCall" ng-model="storage.data.askRecoverCall">
+        Ask before recovering call
+      </label>
+    </div>
+
+  </div>
+
+  <div class="form-group">
+    <label for="video-quality">Video quality:</label>
+    <select name="video_quality" id="video-quality" class="form-control"
+            ng-model="verto.data.vidQual"
+            ng-options="item.id as item.label for item in verto.videoQuality"></select>
+  </div>
+
+  <div class="form-group">
+    <label for="outgoing-bandwidth">Max outgoing bandwidth:</label>
+    <select name="outgoing_bandwidth" id="outgoing-bandwidth" class="form-control"
+            ng-model="verto.data.outgoingBandwidth"
+            ng-options="item.id as item.label for item in verto.bandwidth"></select>
+  </div>
+
+  <div class="form-group">
+    <label for="incoming-bandwidth">Max incoming bandwidth:</label>
+    <select name="incoming_bandwidth" id="incoming-bandwidth" class="form-control"
+            ng-model="verto.data.incomingBandwidth"
+            ng-options="item.id as item.label for item in verto.bandwidth"></select>
+  </div>
+
+</div>
+<div class="modal-footer">
+  <!-- <button class="btn btn-primary" ng-click="cancel()">Cancel</button> -->
+  <button class="btn btn-primary" ng-click="ok()">Save Device Settings</button>
+</div>

html5/verto/verto_communicator/src/partials/phone_call.html

@@ -0,0 +1,58 @@
+<div class="panel panel-default phone">
+  <div class="panel-body phone-body">
+    <div class="col-md-6">
+      <div class="avatar">
+        <img />
+      </div>
+      <div class="call-info">
+        <h2 class="dialed-number">{{ storage.data.called_number }}</h2>
+        <div ng-show="!storage.data.calling" class="video-timer">
+          <timer start-time="start_time" autostart="false" interval="1000">{{hhours}}:{{mminutes}}:{{sseconds}}</timer>
+        </div>
+        <div ng-show="storage.data.calling" class="">
+          <h3>Calling</h3>
+        </div>
+      </div>
+      <div class="clearfix"></div>
+    </div>
+    <div class="col-md-6 dialpad slide-animate-container">
+      <div class="slide-animate" ng-include="dialpadTemplate"></div>
+    </div>
+  </div>
+
+  <div class="panel-footer">
+    <div class="panel-center">
+      <div class="col-md-12">
+        <ul>
+          <li>
+            <button tooltips="" tooltip-title="Dialpad" tooltip-side="bottom" tooltip-lazy="false" class="btn btn-material-900" ng-click="toggleDialpad()">
+              <i class="big-icon mdi-communication-dialpad"></i>
+            </button>
+          </li>
+          <li>
+            <button tooltips="" tooltip-title="(un)Mute Mic" tooltip-side="bottom" tooltip-lazy="false" class="btn btn-material-900" ng-click="muteMic()">
+              <i class="big-icon" ng-class="{'mdi-av-mic': !verto.data.mutedMic, 'mdi-av-mic-off': verto.data.mutedMic}"></i>
+            </button>
+          </li>
+          <li>
+            <button tooltips="" tooltip-title="Hold" tooltip-side="bottom" tooltip-lazy="false" class="btn btn-material-900" ng-click="hold()">
+              <i class="big-icon" ng-class="{'mdi-av-pause':!storage.data.onHold, 'mdi-av-play-arrow': storage.data.onHold}"></i>
+            </button>
+          </li>
+          <!--<li>
+            <button tooltips="" tooltip-title="Video Call" tooltip-side="bottom" tooltip-lazy="false" class="btn btn-material-900" ng-click="videoCall()">
+              <i class="big-icon mdi-notification-voice-chat"></i>
+            </button>
+            </li>-->
+          <li class="hangup-button">
+            <button tooltips="" tooltip-title="Hangup" tooltip-side="bottom" tooltip-lazy="false" class="btn btn-danger btn-fab btn-raised mdi-communication-call-end" ng-click="hangup()">
+            </button>
+          </li>
+        </ul>
+      </div>
+
+      <div class="clearfix"></div>
+    </div>
+  </div>
+</div>
+ 

html5/verto/verto_communicator/src/partials/video_call.html

@@ -0,0 +1,72 @@
+<div class="panel panel-default shadow-z-0">
+  <div class="video-wrapper">
+    <div class="video-hover-buttons" ng-show="verto.data.callState == 'active'">
+      <div id="moderator-tools" ng-show="verto.data.confRole == 'moderator'">
+      <button tooltips="" tooltip-title="Play" tooltip-side="bottom" tooltip-lazy="false" class="btn btn-material-blue-900" ng-click="play()">
+        <i class="mdi-av-play-circle-outline"></i>
+      </button>
+      <button tooltips="" tooltip-title="Stop" tooltip-side="bottom" tooltip-lazy="false" class="btn btn-material-blue-900" ng-click="stop()">
+        <i class="mdi-av-stop"></i>
+      </button>
+      <button tooltips="" tooltip-title="Record" tooltip-side="bottom" tooltip-lazy="false" class="btn btn-material-blue-900" ng-click="record()">
+        <i class="mdi-toggle-radio-button-on"></i>
+      </button>
+      <button tooltips="" tooltip-title="Stop Record" tooltip-side="bottom" tooltip-lazy="false" class="btn btn-material-blue-900" ng-click="stopRecord()">
+        <i class="mdi-image-switch-camera"></i>
+      </button>
+      <button tooltips="" tooltip-title="Snapshot" tooltip-side="bottom" tooltip-lazy="false" class="btn btn-material-blue-900" ng-click="snapshot()">
+        <i class="mdi-image-photo-camera"></i>
+      </button>
+      <button tooltips="" tooltip-title="Screenshare" tooltip-side="bottom" tooltip-lazy="false" class="btn btn-material-blue-900" ng-click="screenshare()">
+        <i class="mdi-hardware-desktop-windows"></i>
+      </button>
+      <div class="btn-group">
+        <button tooltips="" tooltip-title="Video Mode" tooltip-side="bottom" tooltip-lazy="false" type="button" class="btn btn-material-blue-900 dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+          <i class="mdi-action-view-module"></i>
+          <span class="caret"></span>
+        </button>
+        <ul class="dropdown-menu">
+          <li ng-repeat="layout in verto.data.confLayouts">
+            <a ng-click="confChangeVideoLayout(layout)">{{ layout }}</a>
+          </li>
+        </ul>
+      </div>
+      </div>
+      <br/>
+      <button tooltips="" tooltip-title="(un)Mute Mic" tooltip-side="bottom" tooltip-lazy="false" class="btn btn-material-blue-900" ng-click="muteMic(cbMuteMic)">
+        <i class="" ng-class="{'mdi-av-mic': !verto.data.mutedMic, 'mdi-av-mic-off': verto.data.mutedMic}"></i>
+      </button>
+      <button tooltips="" tooltip-title="(un)Mute Video" tooltip-side="bottom" tooltip-lazy="false" class="btn btn-material-blue-900" ng-click="muteVideo(cbMuteVideo)">
+        <i class="" ng-class="{'mdi-av-videocam': !verto.data.mutedVideo, 'mdi-av-videocam-off': verto.data.mutedVideo}"></i>
+      </button>
+      <button tooltips="" tooltip-title="Toggle Fullscreen Mode" tooltip-side="bottom" tooltip-lazy="false" class="btn btn-material-blue-900" ng-click="goFullscreen()">
+        <i class="" ng-class="{'mdi-navigation-fullscreen': !fullscreenEnabled, 'mdi-navigation-fullscreen-exit': fullscreenEnabled}"></i>
+      </button>
+      <button tooltips="" tooltip-title="Open/Close Chat" tooltip-side="right" tooltip-lazy="false" class="btn btn-material-blue-900" ng-click="toggleChat()" ng-show="fullscreenEnabled">
+        <i class="mdi-communication-chat"></i>
+      </button>
+    </div>
+    <div class="video-tag-wrapper" id="video-tag-wrapper" ng-dblclick="goFullscreen()" show-controls>
+      <video-tag ng-class="{'invisible': (verto.data.callState != 'active')}"></video-tag>
+      <svg ng-show="verto.data.callState != 'active'" class="spinner" width="65px" height="65px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
+        <circle class="path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
+      </svg>
+    </div>
+    <div class="video-footer panel-body">
+      <div class="row">
+        <div class="col-md-6 col-xs-6 text-left">
+          <div class="video-timer">
+            <timer start-time="start_time" autostart="false" interval="1000">{{hhours}}:{{mminutes}}:{{sseconds}}</timer>
+          </div>
+        </div>
+        <div class="col-md-6 col-xs-6 text-right">
+          <button class="btn btn-danger" ng-click="hangup()">
+            <i class="mdi-communication-call-end"></i>
+            End Call
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+