unserver-unify/src/app/course/homepractice.html

<div class="theme_red_container theme_asia">
  <div class="tag-box theme_red">
    <div class="row">
      <div class="pull-right" ng-if="ctrl.course.assessment">
      </div>
      <div class="col-md-5 col-sm-5">
        <div class="media_container relative">
          <div class="ribbon big" ng-if="ctrl.course.info && ctrl.course.info.required"><span>Required</span></div>
          <div class="ribbon blue big" ng-if="ctrl.course.info && !ctrl.course.info.required"><span>Elective</span></div>
          <!-- show photo if don't have video -->
          <img ng-if="!ctrl.course.video && !ctrl.course.youtube" ng-src="{{ ctrl.course.photo ? ctrl.coursePhotoUrl + ctrl.course.photo : ctrl.imgdefault }}" style="width:100%" title="{{ ctrl.course.name }}" />
          <!-- show video if video available-->
          <div class="videogular-container" ng-if="ctrl.course.video">
            <videogular vg-theme="ctrl.outlinemp4config.theme">
              <vg-media vg-src="ctrl.outlinemp4config.sources">
              </vg-media>
              <vg-controls vg-autohide="true" vg-autohide-time="1000">
                <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>
                <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-fullscreen-button>
                </vg-fullscreen-button>
              </vg-controls>
              <!--vg-poster vg-url='ctrl.config.plugins.poster.url'></vg-poster-->
              <vg-buffering>
              </vg-buffering>
              <vg-overlay-play>
              </vg-overlay-play>
            </videogular>
          </div>
          <div class="videoWrapper" ng-if="ctrl.course.youtube">
            <iframe ng-src="{{youtubeUrl}}">
            </iframe>
            <!--     <youtube-video video-url="youtubeUrl"></youtube-video> -->
          </div>
        </div>
      </div>
      <div class="col-md-7 col-sm-7">
        <div class="forum">
          <div class="content_heading_sec">
            <div class="margin-bottom-10 clearfix blog-info">
              <strong>
                {{ ctrl.course.name }} 
                <span ng-if="videoItems.length > 0" class="cursor-pointer badge badge-danger blink" uib-tooltip="{{'Click to Join'| translate}}" style="letter-spacing: 1px;" ng-click="scrollTo('livecourse')" translate="">Live now</span>
              </strong>
              <span class="pull-right">
                <mybookmark ng-if="!currentSchool.apiOptions.hdbftp"></mybookmark>&nbsp;
                <a ng-if="!currentSchool.apiOptions.hdbftp" class="share_icon" ng-click="ctrl.shareCourse()">
                  <i class="fa fa-share-alt" aria-hidden="true">&nbsp;</i>{{'Share' | translate }}
                </a>
              </span>
            </div>
            <div class="clearfix"></div>
            <span class="date_sml_aln" title="Submit">
              <span class="clr_chng" translate="">
                Last Update
              </span> : {{ ctrl.course.update||ctrl.course.created | date: 'yyyy-MM-dd' }}
            </span>
            <span>
              <span class="color-blue">{{'Views' | translate}}:</span>
              {{ ctrl.visitercounter }}&nbsp;&nbsp;
              <span ng-if="loginService.subDomain != 'caregiverasia'">
              <span class="color-blue">{{'Enrolled Students' | translate}}:</span>
                {{ ctrl.course.enrolledcounter||0 }}&nbsp;&nbsp;
              </span>
              <span ng-if="ctrl.course.info&&ctrl.course.info.score">
                <span class="color-blue">{{'Credit' | translate}}:</span>
                  {{ ctrl.course.info.score }}&nbsp;&nbsp;
              </span>
            </span>
            <!--span>&nbsp;355 students Learned</span-->
            <div class="margin-bottom-20" ng-if="ctrl.inspectorFlag"></div>
            <span class="avrg_aln" ng-if="ctrl.inspectorFlag">
              <div class="average" ng-if="averageRating">
                <average-star-rating max="5" rating-value="averageRating">
                </average-star-rating>
                <span>
                  {{ averageRating }}/5
                </span>
                <span class="list_reviews ng-binding">
                  <a ng-click="ctrl.getAssessmentResult()">
                    ({{ ctrl.course.ratingcounter }} {{ 'reviews'|translate }})
                  </a>
                </span>
              </div>
              <span class="average dummy_avg" ng-if="!averageRating" ng-click="ctrl.review()">
                <div class="average-rating-container">
                  <ul class="rating background">
                    <li class="star">
                      <i class="fa fa-star">
                      </i>
                    </li>
                    <li class="star">
                      <i class="fa fa-star">
                      </i>
                    </li>
                    <li class="star">
                      <i class="fa fa-star">
                      </i>
                    </li>
                    <li class="star">
                      <i class="fa fa-star">
                      </i>
                    </li>
                    <li class="star">
                      <i class="fa fa-star">
                      </i>
                    </li>
                  </ul>
                </div>
                <span class="list_reviews ng-binding">
                  <a ng-click="ctrl.getAssessmentResult()">
                    (0 {{ 'reviews'|translate }})
                  </a>
                </span>
              </span>
              <a class="btn btn-u rev_but" ng-click="ctrl.review()" ng-if="ctrl.showassessment&&!ctrl.editable" translate="">
                Review
              </a>
            </span>
            <div class="margin-bottom-20" ng-if="ctrl.course.price"></div>
            <div class="product_price detail" ng-if="ctrl.course.price">&yen; {{ctrl.course.price| number:2}}</div>
            <div class="margin-bottom-10"></div>
            <!-- <a class="btn btn-u rev_but" href="/admin/#/courses/info/{{ ctrl.course._id }}/0" ng-if="ctrl.editable">
              <i class="fa fa-pencil">
              </i>
              <span translate="">
                Edit
              </span>
            </a> -->
            <p class="unformat" ng-bind-html="ctrl.course.detail"></p>
            <div class="margin-bottom-20"></div>
            <a class="btn btn-info" ui-sref=".result({courseParam:ctrl.course})" ng-if="!ctrl.editable" translate>
              Progress
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>