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

<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="">
        {{ 'CHAT_TITLE_MEMBERS' | translate}}
      </a>
    </li>
    <li role="presentation" ng-class="{'active': activePane == 'chat'}">
      <a ng-click="activePane = 'chat'" href="">
        {{ 'CHAT_TITLE' | translate }}
      </a>
    </li>
  </ul>

  <div class="chat-members" ng-show="activePane == 'members'">
    <div ng-show="!members.length">
      <p class="text-center text-muted">{{ 'CHAT_NO_MEMBERS' | translate }}</p>
    </div>

    <div ng-repeat="member in members" class="chat-member-item" ng-class="{ opened: $index == openId }">
      <span class="chat-members-avatar">
        <img gravatar-size="40" gravatar-src="::member.email" class="img-circle" ng-class="{'chat-member-talking': member.status.audio.talking, 'chat-member-muted': member.status.audio.muted}" />
      </span>
      <!-- FIXME(italo): Put this whole block in a flex box to avoid defining fixed width.-->
      <h4 class="chat-members-name" ng-class="{ 'clickable': verto.data.confRole == 'moderator' }" ng-click="toggleModMenu($index)">
        <div class="ellipsis members-name">{{ member.name }}</div>
	<small class="ellipsis members-number">({{ member.number }})</small>

	<div class="members-badges">
   	  <div ng-if="member.status.video.floor" class="label badge-floor" ng-class="{'label-danger': member.status.video.floorLocked, 'label-info': !member.status.video.floorLocked}"><i class="mdi mdi-action-https lock-floor" ng-if="member.status.video.floorLocked"></i> <span>Floor</span></div>
          <div class="label label-info text-capitalize">{{ member.status.video.reservationID }}</div>
          <div ng-if="member.status.video.screenShare" class="label label-info">Screen Share</div>
	</div>
      </h4>

      <div class="pull-right resevartion-menu chat-members-action" ng-show="verto.data.confRole == 'moderator' && resIDs.length > 0">
        <div class="btn-group">
          <button type="button" class="btn btn-xs dropdown-toggle" data-toggle="dropdown">
            <i class="mdi-action-picture-in-picture icon" style="margin-right: 0px;"></i>
          </button>
          <ul class="dropdown-menu slidedown pull-right">
            <li ng-repeat="resID in resIDs">
              <a href="" class="text-capitalize" ng-class="{ 'selected': resID == member.status.video.reservationID }" ng-click="confResID(member.id, resID)">
                {{ resID }}
              </a>
            </li>
          </ul>
        </div>
      </div>

      <span class="chat-members-status pull-right">
        <i ng-click="confMuteMic(member.id)" class="in-use" ng-class="{'clickable': verto.data.confRole == 'moderator', 'mdi-av-mic': !member.status.audio.muted, 'mdi-av-mic-off': member.status.audio.muted, 'mic_talking': member.status.audio.talking}"></i>
        <i ng-click="confMuteVideo(member.id)" ng-class="{'clickable': verto.data.confRole == 'moderator', '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 class="admin-controls" ng-if="verto.data.confRole == 'moderator'" ng-show="$index == $parent.openId">
        <div>
          <div class="col-md-6 ctrl-section">
            <h3>{{ 'CHAT_GENERAL' | translate }}</h3>
            <div class="group btn-group-justified">
              <a href="" class="btn btn-xs" ng-click="confKick(member.id)" title="{{ 'CHAT_TITLE_KICK' | translate }}">
                <i class="mdi-fw mdi-av-not-interested"></i>
                {{ 'CHAT_KICK' | translate }}
              </a>
              <a href="" class="btn btn-xs" ng-click="confVideoFloor(member.id)" title="{{ 'CHAT_TITLE_VIDEO_FLOOR' | translate }}">
                <i class="mdi-fw mdi-action-aspect-ratio"></i>
                {{ 'CHAT_FLOOR' | translate }}
              </a>
              <a href="" class="btn btn-xs" ng-click="confTransfer(member.id)" title="{{ 'CHAT_TITLE_TRANSFER' | translate }}">
                <i class="mdi-fw mdi-communication-call-made"></i>
                <span style="margin-left: -9px">{{ 'CHAT_TRANSFER' | translate }}</span>
              </a>
            </div>
          </div>

          <div class="col-md-6 ctrl-section">
            <h3>{{ 'CHAT_BANNER' | translate }}</h3>
            <div class="group btn-group-justified">
              <a href="" class="btn btn-xs" ng-click="confBanner(member.id)" title="{{ 'CHAT_TITLE_SET' | translate }}">
                <i class="mdi-fw mdi-toggle-radio-button-on"></i>
                {{ 'CHAT_SET' | translate }}
              </a>
              <a href="" class="btn btn-xs" ng-click="confResetBanner(member.id)" title="{{ 'CHAT_TITLE_RESET' | translate }}">
                <i class="mdi-fw mdi-content-clear"></i>
                {{ 'CHAT_RESET' | translate }}
              </a>
            </div>
          </div>
        </div>

        <div>
          <div class="col-md-6 ctrl-section" ng-if="conf.canvasCount > 1">
            <h3>{{ 'CHAT_CANVAS' | translate }}</h3>
            <div class="group btn-group-justified">
              <a href="" class="btn btn-xs" ng-click="confCanvasIn(member.id, 'prev')" title="{{ 'CHAT_CANVAS_IN' | translate }}">
                <i class="mdi-fw mdi-action-open-in-browser"></i>
                {{ 'CHAT_PREV' | translate }}
              </a>
              <a href="" class="btn btn-xs" ng-click="confCanvasIn(member.id)" title="{{ 'CHAT_CANVAS_IN' | translate }}">
                <i class="mdi-fw mdi-action-open-in-browser"></i>
                Id
              </a>
              <a href="" class="btn btn-xs" ng-click="confCanvasIn(member.id, 'next')" title="{{ 'CHAT_CANVAS_IN' | translate }}">
                <i class="mdi-fw mdi-action-open-in-browser"></i>
                {{ 'CHAT_NEXT' | translate }}
              </a>
            </div>
            <div class="group btn-group-justified">
              <a href="" class="btn btn-xs" ng-click="confCanvasOut(member.id, 'prev')" title="{{ 'CHAT_CANVAS_OUT' | translate }}">
                <i class="mdi-fw mdi-fw mdi-action-system-update-tv"></i>
                {{ 'CHAT_PREV' | translate }}
              </a>
              <a href="" class="btn btn-xs" ng-click="confCanvasOut(member.id)" title="{{ 'CHAT_CANVAS_OUT' | translate }}">
                <i class="mdi-fw mdi-fw mdi-action-system-update-tv"></i>
                Id
              </a>
              <a href="" class="btn btn-xs" ng-click="confCanvasOut(member.id, 'next')" title="{{ 'CHAT_CANVAS_OUT' | translate }}">
                <i class="mdi-fw mdi-fw mdi-action-system-update-tv"></i>
                {{ 'CHAT_NEXT' | translate }}
              </a>
            </div>
            <div class="group btn-group-justified">
              <a href="" class="btn btn-xs" ng-click="confLayer(member.id, 'prev')" title="{{ 'CHAT_LAYER' | translate }}">
                <i class="mdi-fw mdi-action-view-carousel"></i>
                {{ 'CHAT_PREV' | translate }}
              </a>
              <a href="" class="btn btn-xs" ng-click="confLayer(member.id)" title="{{ 'CHAT_LAYER' | translate }}">
                <i class="mdi-fw mdi-action-view-carousel"></i>
                Id
              </a>
              <a href="" class="btn btn-xs" ng-click="confLayer(member.id, 'next')" title="{{ 'CHAT_LAYER' | translate }}">
                <i class="mdi-fw mdi-action-view-carousel"></i>
                {{ 'CHAT_NEXT' | translate }}
              </a>
            </div>
          </div>

          <div class="col-md-6 ctrl-section">
            <h3>{{ 'CHAT_AUDIO_VIDEO' | translate }}</h3>
            <div class="group btn-group-justified">
              <a href="" class="btn btn-xs" ng-click="confMuteMic(member.id)" title="{{ 'CHAT_TITLE_MUTE_UNMUTE_MIC' | translate }}">
                <i class="mdi-fw" ng-class="member.status.audio.muted ? 'mdi-av-mic-off' : 'mdi-av-mic'"></i>
                {{ member.status.audio.muted ? 'CHAT_UNMUTE_MIC' : 'CHAT_MUTE_MIC' | translate }}
              </a>
              <a href="" ng-class="{ 'disabled': !member.status.video }" class="btn btn-xs" ng-click="confMuteVideo(member.id)" title="{{ 'CHAT_TITLE_MUTE_UNMUTE_VIDEO' | translate }}">
                <i class="mdi-fw" ng-class="member.status.video.muted ? 'mdi-av-videocam-off' : 'mdi-av-videocam'"></i>
                {{ member.status.video.muted ? 'CHAT_UNMUTE_MIC' : 'CHAT_MUTE_MIC' | translate }}
              </a>
            </div>
            <div class="group btn-group-justified">
              <a href="" class="btn btn-xs" ng-click="confVolumeDown(member.id)" title="{{ 'CHAT_TITLE_VOL_MINUS' | translate }}">
                <i class="mdi-fw mdi-av-volume-down"></i>
                {{ 'CHAT_VOL_MINUS' | translate }}
              </a>
              <a href="" class="btn btn-xs" ng-click="confVolumeUp(member.id)" title="{{ 'CHAT_TITLE_VOL_MINUS' | translate }}">
                <i class="mdi-fw mdi-av-volume-up"></i>
                {{ 'CHAT_VOL_PLUS' | translate }}
              </a>
            </div>
            <div class="group btn-group-justified">
              <a href="" class="btn btn-xs" ng-click="confGainDown(member.id)" title="{{ 'CHAT_TITLE_VOL_MINUS' | translate }}">
                <i class="mdi-fw mdi-av-volume-down"></i>
                {{ 'CHAT_GAIN_MINUS' | translate }}
              </a>
              <a href="" class="btn btn-xs" ng-click="confGainUp(member.id)" title="{{ 'CHAT_TITLE_VOL_MINUS' | translate }}">
                <i class="mdi-fw mdi-av-volume-up"></i>
                {{ 'CHAT_GAIN_PLUS' | translate }}
              </a>
            </div>
          </div>
        </div>
      </div>
    </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">{{ 'CHAT_NO_MESSAGES' | translate }}</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" ng-bind-html="message.body | linky:'_blank' | picturify:150:3 "></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-keydown="($event.keyCode == 13 && $event.shiftKey !== true) && send($event)" required="required" class="form-control input-sm" placeholder="{{ 'CHAT_TYPE_MESSAGE' | translate }}"
          ng-focus="disableOnKeydownDtmf()" ng-blur="enableOnKeydownDtmf()"></textarea>
          <button class="btn btn-success btn-sm" type="submit">
            {{ 'CHAT_SEND_MESSAGE' | translate }}
            <span class="mdi-navigation-arrow-forward chat-message-input-group-icon-button"></span>
          </button>
        </div>
      </form>
    </div>
  </div>
</div>