unserver-unify/src/app/course/chapter/reading.html

<div class="reading_holder" ng-class="{'remove_sep':wctrl.chapter.lang=='eng'}">
  <div class="headline">
    <h3 translate="">
      {{ chapter.name }}
    </h3>
  </div>
  <div class="row">
    <div class="margin-bottom-40">
    </div>
    <h3 class="reading_subheader" style="width: 75%">
      {{ chapter.subtitle }}
    </h3>
    <div class="col-md-9 col-xs-9" ng-if="wctrl.chapter.photo">
      <div class="reading_img">
        <img ng-src="{{wctrl.readingImageUrl + wctrl.chapter.photo}}"/>
      </div>
    </div>
    <div class="col-md-12" ng-repeat="ppt in wctrl.chapter.ppts">
      <div class="row" ng-if="wctrl.chapter.lang=='eng'">
        <div class="col-md-12">
          <div class="reading_text" style="margin-bottom: 65px;">
            <span ng-click="wctrl.replay($index)" ng-repeat="text in wctrl.fullTexts track by $index" style="font-size:18px; color:{{$index==wctrl.currIndex? '#FF9800':'black'}};">
              {{text}}
              <br ng-if="ppt.displaySpacing||wctrl.chapter.lang=='eng'"/>
            </span>
            <videogular vg-auto-play="true" vg-cue-points="wctrl.mp4config.cuePoints" vg-player-ready="wctrl.onPlayerReady($API)">
              <vg-media vg-src="wctrl.mp4config.sources" vg-type="audio">
              </vg-media>
              <vg-controls>
                <vg-play-pause-button>
                </vg-play-pause-button>
                <vg-time-display>
                  {{ currentTime | date:'mm:ss' }}
                </vg-time-display>
                <vg-scrub-bar>
                  <vg-scrub-bar-current-time>
                  </vg-scrub-bar-current-time>
                  <vg-scrub-bar-cue-points vg-cue-points="wctrl.mp4config.cuePoints.textCues">
                  </vg-scrub-bar-cue-points>
                </vg-scrub-bar>
                <vg-time-display>
                  {{ totalTime | date:'mm:ss' }}
                </vg-time-display>
                <vg-volume>
                  <vg-mute-button>
                  </vg-mute-button>
                  <vg-volume-bar>
                  </vg-volume-bar>
                </vg-volume>
              </vg-controls>
              <vg-buffering>
              </vg-buffering>
            </videogular>
          </div>
        </div>
      </div>
      <div class="reading_text" ng-class="{'current':wctrl.currentIndex==$index}" ng-if="!wctrl.chapter.lang||wctrl.chapter.lang!='eng'">
        <div class="row">
          <div class="col-md-9 col-xs-9">
            <h2>
              {{ppt.text}} 
            </h2>
            <div class="clearfix"></div>
          </div>
          <div class="col-md-3 col-xs-3 padding-right-0 text-center">
            <div class="btn-group reading_button">
              <a class="btn btn-xs"  ng-class="{'btn-info':wctrl.audioStatus!='play'||wctrl.currentIndex!=$index,'btn-danger':wctrl.audioStatus=='play'&&wctrl.currentIndex==$index}" ng-click="wctrl.toggolePlay(ppt.audio,$index)"   >
                <i class="fa" ng-class="{'fa-play':wctrl.audioStatus!='play'||wctrl.currentIndex!=$index,'fa-stop':wctrl.audioStatus=='play'&&wctrl.currentIndex==$index}" uib-tooltip="{{'Read Sentance'| translate}}">
                </i>
              </a>
              <span class="btn_sep"></span>
              <a class="btn btn-danger btn-xs">
                <i class="fa fa-microphone" uib-tooltip="{{'Record'| translate}}" ng-click="wctrl.recordAudio(ppt)" ng-if="wctrl.mode!='recording'&&(!ppt.mode||ppt.mode!='recording')">
                </i>
                <i class="fa fa-stop" uib-tooltip="{{'Stop'| translate}}" ng-click="wctrl.stopRecording(ppt)" ng-if="ppt.mode=='recording'">
                </i>
              </a>
              <a class="btn btn-u btn-xs" ng-if="ppt.playbacksrc" ng-click="wctrl.toggoleRec(ppt,$index)">
                <i class="fa" ng-class="{'fa-play':wctrl.audioStatus!='playrec'||wctrl.currentRecIndex!=$index,'fa-stop':wctrl.audioStatus=='playrec'&&wctrl.currentRecIndex==$index}" uib-tooltip="{{'Play Recorded Voice'| translate}}">
                </i>
              </a>
              <div class="margin-bottom-5"></div>
              <div class="manditory font-12 blink" ng-if="ppt.mode=='recording'">
                ( <i class="fa fa-dot-circle-o">&nbsp;
                </i>
                Rec )
              </div>
            </div>
          </div>
        </div>
        <div class="clearfix">
        </div>
      </div>
    </div>
  </div>
</div>