<div class="body-bg"></div>
<div class="player-border">
  <div class="vocabulary-container">
    <div class="content-wrap">
      <div class="top-line">
        <img class="star" src="assets/vocabulary/star.png" alt="" size="20">
        <h1 class="vocabulary" [ngClass]="{'animated bounce infinite': vocabularyPlaying}"
            (click)="playVocabularyAudio()">
          <span class="star"></span>{{data.contentObj.vocabulary}}
        </h1>
        <h2 class="type">
          {{data.contentObj.vocabularyType}}
        </h2>
        <div class="audio-button" [ngClass]="{'animated zoomIn slow infinite': definitionPlaying}"
            (click)="playDefinitionAudio()"></div>
        <div class="show-text" (click)="showSentence()"></div>
      </div>
      <div class="sentence" [style.visibility]="show">
        {{data.contentObj.definition}}
      </div>
      <div class="img-wrap">
        <img [src]="data.contentObj.pic_id" alt="" (dragstart)="false;$event.preventDefault();"/>
      </div>
    </div>
  </div>
</div>