Nativescript player template

Player template

<DockLayout class="pagerArea">
  <pager
    (onBack)="onBack($event)"
    (onNext)="onNext($event)"
    [isUlinc]="isUlinc"
  ></pager>
  <GridLayout rows="auto, 1*">
    <StackLayout>
      <playerheader
        row="0"
        [isUlinc]="isUlinc"
        (onOpenDrawer)="onOpenDrawer()"
        (onCloseDrawer)="onCloseDrawer()"
      ></playerheader>
    </StackLayout>
    <GridLayout rows="*" row="1">
      <Drawer #drawer class="drawer" [gestureHandlerOptions]="gsOptions">
        <GridLayout
          leftDrawer
          width="100%"
          backgroundColor="white"
          rows="auto, *"
        >
          <StackLayout
            #menuhead
            [ngClass]="isUlinc ? 'ulinc' : 'tu'"
            class="menu-head"
            row="0"
            padding="10"
          >
            <Button
              textAlignment="left"
              text="< Return to student center"
              class="return"
              (tap)="goClassList()"
            ></Button>
            <Label
              [text]="classDetail.className"
              fontWeight="bold"
              [visibility]="isBusy ? 'collapsed' : 'visible'"
              *ngIf="classDetail"
            ></Label>
            <Label
              [text]="classDetail.classDescription | unescape"
              *ngIf="classDetail"
            ></Label>
          </StackLayout>
          <ScrollView orientation="vertical" row="1">
            <lessonlist
              [isUlinc]="isUlinc"
              (onNav)="onNavigateFromList($event)"
              (onDrawerClose)="onCloseDrawer()"
            ></lessonlist>
          </ScrollView>
        </GridLayout>
        <StackLayout
          mainContent
          class="mainContent"
          margin="6"
          row="0"
          height="100%"
        >
          <FlexboxLayout class="lesson-notes">
            <Label
              [text]="'Lesson ' + currentNum"
              [ngClass]="isUlinc ? 'ulinc' : 'tu'"
              class="lessonNumber"
              [visibility]="isBusy ? 'collapsed' : 'visible'"
              *ngIf="classDetail"
            ></Label>
            <Label
              class="icon fa fa-notes notes-icon"
              text="&#xe202;"
              (tap)="openNotes()"
              [visibility]="isBusy ? 'collapsed' : 'visible'"
              *ngIf="!disableNotes"
              [ngClass]="isUlinc ? 'ulinc' : 'tu'"
            ></Label>
            <Button
              text="Complete Class"
              *ngIf="version === '4.0'"
              className="ulinc-btn"
              (tap)="completeUlincClass()"
            ></Button>
          </FlexboxLayout>
          <Label
            [text]="classDetail.className"
            class="title"
            [visibility]="isBusy ? 'collapsed' : 'visible'"
            *ngIf="classDetail"
            [ngClass]="isUlinc ? 'ulinc' : 'tu'"
          ></Label>
          <GridLayout rows="auto" columns="*,60" className="audiowrap">
            <audio-controls
              col="0"
              row="0"
              [hasAudio]="hasAudio"
              *ngIf="hasAudio"
              [visibility]="isBusy ? 'collapsed' : 'visible'"
            ></audio-controls>
            <Label
              col="1"
              row="0"
              class="icon fa voc fa-book-bookmark"
              text="&#xe0bb;"
              (tap)="openVocabList()"
              *ngIf="vocab"
              [ngClass]="isUlinc ? 'ulinc' : 'tu'"
            ></Label>
          </GridLayout>
          <FlexboxLayout
            id="activityLayout"
            class="mainContent"
            [visibility]="isBusy ? 'visible' : 'collapsed'"
          >
            <ActivityIndicator [busy]="isBusy"></ActivityIndicator>
          </FlexboxLayout>
          <Label *ngIf="errMsg" [text]="errMsg"></Label>
          <FlexboxLayout>
            <router-outlet></router-outlet>
          </FlexboxLayout>
        </StackLayout>
        <GridLayout
          topDrawer
          height="100%"
          backgroundColor="white"
          rows="auto "
          padding="25"
          [gestureHandlerOptions]="gsOptions"
        >
          <vocabpulldown
            row="0"
            [vocab]="vocab"
            (closeVocabDrawer)="onCloseVocabDrawer()"
          ></vocabpulldown>
        </GridLayout>
        <GridLayout
          rightDrawer
          height="100%"
          width="100%"
          backgroundColor="white"
          rows="auto "
          padding="25"
        >
          <notesdrawer
            row="0"
            [classId]="classId"
            (closeNotesDrawer)="onCloseNotesDrawer()"
          ></notesdrawer>
        </GridLayout>
      </Drawer>
    </GridLayout>
  </GridLayout>
</DockLayout>