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

<div class="panel panel-default shadow-z-0">
  <div class="video-wrapper">
    <div class="video-hover-buttons" ng-show="verto.data.callState == 'active' && !watcher">
      <div id="moderator-tools" ng-show="verto.data.confRole == 'moderator'">
        <button tooltip-placement="bottom" tooltip-title="{{'MESSAGE_PLAY' | translate}}"  uib-tooltip="{{'MESSAGE_PLAY' | translate}}"
                class="btn btn-material-blue-900" ng-click="play()">
        <i class="mdi-av-play-circle-outline"></i>
      </button>
      <button tooltip-placement="bottom" tooltip-title="{{'MESSAGE_STOP' | translate}}" uib-tooltip="{{'MESSAGE_STOP' | translate}}"
              class="btn btn-material-blue-900" ng-click="stop()">
        <i class="mdi-av-stop"></i>
      </button>
      <button tooltip-placement="bottom" tooltip-title="{{'MESSAGE_RECORD' | translate}}" uib-tooltip="{{'MESSAGE_RECORD' | translate}}"
              class="btn btn-material-blue-900" ng-click="record()">
        <i class="mdi-toggle-radio-button-on"></i>
      </button>
      <button tooltip-placement="bottom" tooltip-title="{{'MESSAGE_STOP_RECORD' | translate}}" uib-tooltip="{{'MESSAGE_STOP_RECORD' | translate}}"
              class="btn btn-material-blue-900" ng-click="stopRecord()">
        <i class="mdi-image-switch-camera"></i>
      </button>
      <button tooltip-placement="bottom" tooltip-title="{{'MESSAGE_SNAPSHOT' | translate}}" uib-tooltip="{{'MESSAGE_SNAPSHOT' | translate}}"
              tooltip-lazy="false" class="btn btn-material-blue-900" ng-click="snapshot()">
        <i class="mdi-image-photo-camera"></i>
      </button>
      <div class="btn-group">
        <button tooltip-placement="bottom" tooltip-title="{{'MESSAGE_VIDEO_MODE' | translate}}" uib-tooltip="{{'MESSAGE_VIDEO_MODE' | translate}}"
                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)" ng-class="{ 'selected': layout == videoLayout }">{{ layout }}</a>
          </li>
        </ul>
      </div>
      </div>
      <div class="user-tools">
        <button tooltip-placement="bottom" tooltip-title="{{'MESSAGE_MUTE_MIC' | translate}}" uib-tooltip="{{'MESSAGE_MUTE_MIC' | translate}}"
                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 tooltip-placement="bottom" tooltip-title="{{'MESSAGE_MUTE_VIDEO' | translate}}" uib-tooltip="{{'MESSAGE_MUTE_VIDEO' | translate}}"
                class="btn btn-material-blue-900" ng-click="muteVideo(cbMuteVideo)" ng-if="verto.data.canVideo">
          <i class="" ng-class="{'mdi-av-videocam': !verto.data.mutedVideo, 'mdi-av-videocam-off': verto.data.mutedVideo}"></i>
        </button>
        <button tooltip-placement="bottom" tooltip-title="{{'MESSAGE_FULLSCREEN' | translate}}" uib-tooltip="{{'MESSAGE_FULLSCREEN' | translate}}"
                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 tooltip-placement="bottom" tooltip-title="{{'MESSAGE_SCREENSHARE' | translate}}" uib-tooltip="{{'MESSAGE_SCREENSHARE' | translate}}"
                class="btn btn-material-blue-900" ng-click="screenshare()">
          <i class="mdi-hardware-desktop-windows"></i>
        </button>
        <button tooltip-placement="bottom" tooltip-title="{{'MESSAGE_OPEN_CLOSE_CHAT' | translate}}" uib-tooltip="{{'MESSAGE_OPEN_CLOSE_CHAT' | translate}}"
                class="btn btn-material-blue-900" ng-click="toggleChat()" ng-show="fullscreenEnabled">
          <i class="mdi-communication-chat"></i>
        </button>
        <div class="btn-group">
          <button tooltip-placement="bottom" tooltip-title="{{'MESSAGE_SPEAKER' | translate}}" uib-tooltips="{{'MESSAGE_SPEAKER' | translate}}" type="button" class="btn btn-material-blue-900 dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <i class="mdi-hardware-headset"></i>
            <span class="caret"></span>
          </button>
          <ul class="dropdown-menu">
            <li ng-repeat="speaker in verto.data.speakerDevices">
              <a ng-click="confChangeSpeaker(speaker.id)">{{ speaker.label }}</a>
            </li>
          </ul>
        </div>
        <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>
        <div class="btn-group" ng-show="conf.canvasCount > 1">
          <button tooltip-placement="bottom" tooltip-title="{{'MESSAGE_POPUP' | translate}}" uib-tooltips="{{'MESSAGE_POPUP' | translate}}" type="button" class="btn btn-material-blue-900 dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <i class="mdi-image-filter-none"></i>
            <span class="caret"></span>
          </button>
          <ul class="dropdown-menu">
            <li ng-repeat="canvas in canvases">
              <a ng-click="confPopup(canvas.id)">{{ canvas.name }}</a>
            </li>
          </ul>
        </div>
      </div>
    </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">
            <span ng-show="watcher" style="font-size: 18px">Room {{ extension }} - Canvas {{ canvasID }}</span>
            <timer start-time="start_time" autostart="false" interval="1000" ng-if="!watcher">{{hhours}}:{{mminutes}}:{{sseconds}}</timer>
          </div>
        </div>
        <div class="col-md-6 col-xs-6 text-right">
          <button class="btn btn-danger" ng-click="hangup()" translate>
            <i class="mdi-communication-call-end"></i>
            {{ watcher ? 'BUTTON_CLOSE' : 'BUTTON_END_CALL' }}
          </button>
        </div>
      </div>
    </div>
  </div>
</div>