<div *ngIf='videoList && videoList.length == 0' class="error-msg-container row">
        <span class="no-data-msg">No Videos Found</span>
</div>
<div *ngIf='videoList && videoList.length > 0' class="course-content-list">
       <!-- Changed By Vikas Lagad on 30-12-2019 [changed diplay order of Course Library]Star-->
        <video-playlist [courseCodeData]='curItemCourseCode' [currentItem]='currentItem' [videoList]='videoList'
                (onSelect)='selectVideo($event)'>
        </video-playlist>
        
        <div class="quesButtn">
                <button class="coursebutton" (click)="courseQuestionBtn(selectedCourse)">Course Question</button>
        </div>
        <span class="nextPrvoisButtn">
                <span *ngIf="this.currentIndex > 0" class="navPlayBtn navPlayBtn-prev" (click)="onClickOfPrevious()">
                        <i class="material-icons prevPlayIcn">keyboard_arrow_left</i>
                </span>
                <span [ngStyle]="{'display': this.currentIndex == this.videoList.length-1 ? 'none' : 'initial'}" class="navPlayBtn navPlayBtn-next"
                        (click)="onClickOfNext()">
                        <i class="material-icons nextPlayIcn">keyboard_arrow_right</i>
                </span>
                <div #scrollToMe>
                        <bb-video [videoItem]='currentItem' [crossOriginControlsFucnt]="false" (onReady)='onPlayerReady($event)'
                                (onPlayerClose)='logDocUsage($event)'></bb-video>
                </div>
        </span>
        <div class="categoryDescr">
                <span class="fullDescr">{{selectedCourse.descr}}</span>
                <span class="category">Category: {{selectedCourse.courseSubDescr}}</span>
        </div>
         <!-- Changed By Vikas Lagad on 30-12-2019[changed display order of Course Library]End-->
</div>

<ng-template cdk-portal>
        <div></div>
</ng-template>