unserver-unify/src/app/audioplayback/mobile_detail.html

<div ng-controller="AudioPlaybackItemCtrl as ctrl" class="control_slide mbl_video audio_video">
  <div class="vclas_body">
    <div class="vclas_video">
      <div class="vclas_ppt slider" ng-if="ctrl.currentImg&&ctrl.currentImg">
        <img ng-src="{{ ctrl.picURL+ctrl.slides[ctrl.currentImg.pptId]['uid']+'/'+ctrl.slides[ctrl.currentImg.pptId]['ppts'][ctrl.currentImg.index]['pic'] }}" style="margin:auto;width:100%;max-height:300px" />
      </div>
    </div>
    <div class="vclas_message padding-left-0">
      <div class="clearfix"></div>
      <div class="tab-v1 vclas-peoplechat-box no_video_me">
        <ul class="nav nav-justified nav-tabs">
          <li class="active">
            <a data-toggle="tab" ng-click="ctrl.show('description')">
              {{"Description" | translate}}
            </a>
          </li>
          <li>
            <a data-toggle="tab" ng-click="ctrl.show('playback')">
              {{"Playback" | translate}}
            </a>
          </li>
          <li>
            <a data-toggle="tab" ng-click="ctrl.show('message')">
              {{"Chat" | translate}}
            </a>
          </li>
        </ul>
        <div class="tab-content" style="border-top:solid 1px #ccc; background: #fff; height: 100%">
          <!-- Description block starts -->
          <div class="tag-box" style="height: 100%; overflow: auto; margin-top:-10px;" ng-if="ctrl.showTab=='description'">
            <h4 style="margin-top:0" class="color-blue">{{ctrl.item.name}}</h4>
            <p>{{ ctrl.item.description }}</p>
          </div>
          <!-- Description block Ends -->
          <!-- playback block starts -->
          <div ng-if="ctrl.showTab=='playback'">
            <div class="chat_body">
              <div class="list-group vclas-groupchat-out" style="bottom: 0;">
                <div class="vclas_groupchat">
                  <div class="message_thread" ng-repeat="his in ctrl.history | filter:{type:'!=chat'}">
                    <div ng-switch="his.type" class="messages">                      
                      <img class="msg_prfl ng-scope" ng-if="his.type=='setPage'||his.type=='audioUrl'" ng-src="{{ ctrl.createrImg }}" >                      
                      <div ng-switch-when="audioUrl" class="message msg_aud">
                        <span>
                          <audio controls>
                            <source ng-src="{{ ctrl.audioURL+his.file }}" type="audio/mpeg" />
                          </audio>
                        </span>
                      </div>
                      <div ng-switch-when="setPage" class="message msg_img" ng-if="his.data&&ctrl.slides[his.data.pptId]">
                        <span ng-click="ctrl.setSlideImg(his)">
                          <img style="width:50px;height:50px" ng-src="{{ ctrl.picURL+ctrl.slides[his.data.pptId]['uid']+'/'+ctrl.slides[his.data.pptId]['ppts'][his.data.index]['pic'] }}" />
                        </span>
                      </div>
                      <div ng-switch-when="message">
                        <!-- <div class="message_time">
                          <span>
                            {{ his.time|date: 'yyyy-MM-dd HH:mm'}}
                          </span>
                        </div> -->
                        <div class="messages">
                          <img class="msg_prfl" style="width:50px;height:50px" ng-src="{{ his.data.avatarurl }}"/>
                          <div class="message">
                            <b>
                              {{his.data.fullname}}
                            </b>
                            <span>
                              {{his.file}}
                            </span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- playback block Ends -->
          <!-- Chat block starts -->
          <div ng-if="ctrl.showTab=='message'">
            <div class="chat_body">
              <div class="list-group vclas-groupchat-out">
                <div class="vclas_groupchat" >
                  <div class="message_thread" ng-repeat="item in ctrl.chatHistory">
                    <div>
                      <div class="message_time" ng-if="item.data.time">
                        <span>
                          {{item.data.time|date: 'yyyy-MM-dd HH:mm'}}
                        </span>
                      </div>
                      <div class="messages" ng-class="{'other':item.type=='chat'}">
                        <img class="msg_prfl" ng-if="item.type=='message'" ng-src="{{ item.data.avatarurl }}"/>
                        <div class="message">
                          <b>
                            {{item.data.fullname}}
                          </b>
                          <span>
                            {{item.file}}
                          </span>
                        </div>
                        <img class="msg_prfl" ng-if="item.type=='chat'" ng-src="{{ item.data.avatarurl }}"/>
                      </div>
                    </div>
                  </div>
                </div>                
              </div>
            </div>
          </div>
          <!-- Chat block Ends -->
        </div>
      </div>
    </div>
  </div>
</div>