<div class="body-bg"></div>
<div class="player-border">
  <div class="question-player" style="position: relative">
    <div class="top-part">
      <img
        *ngIf="data.contentObj.pic_id"
        [src]="data.contentObj.pic_id "
        alt="cover"
        (dragstart)="false;$event.preventDefault();"
        (click)="onHandleZoomIn($event)"
        [@zoom]="zoomIn ? 'in' : 'none'"
      />
      <div class="title">{{data.contentObj.title}}</div>
    </div>
    <div class="opt-container">
      <div
        class="opt-wrap"
        *ngFor="let item of options; let i = index"
        [@tip-border]="item.state || 'none'"
        (click)="handleAnimation(item)"
      >
        <span class="opt-circle" [@tip-circle]="item.state || 'none'">{{transCharCode(i)}}</span>
        <div class="text" *ngIf="item.type === OPTION_TYPE.TEXT">{{item.text}}</div>
        <div class="audio" style="text-align: center" *ngIf="item.type === OPTION_TYPE.AUDIO" (click)="playAudio(item, $event)">
          <i class="anticon anticon-sound"></i>
        </div>
        <img *ngIf="item.type === OPTION_TYPE.PIC" [src]="item.pic_id" alt=""
             (dragstart)="false;$event.preventDefault();"/>
      </div>
    </div>
    <div (click)="playQuestionAudio($event)"
         style="width: 100px;height: 100px;position: absolute;bottom: 50px;right: 80px;">
      <img style="max-width: 100%;max-height: 100%;" *ngIf="!playerState.getValue().isPlaying" src="assets/question/play.png" alt="" (dragstart)="false;$event.preventDefault();">
      <img style="max-width: 100%;max-height: 100%;" *ngIf="playerState.getValue().isPlaying" src="assets/question/pause.png" alt="" (dragstart)="false;$event.preventDefault();">
    </div>
    <!--<img src="/assets/question/left.png" alt="ufo" class="left-ufo" (dragstart)="false;$event.preventDefault();">-->
    <!--<img src="/assets/question/right.png" alt="ufo" class="right-ufo" (dragstart)="false;$event.preventDefault();">-->
  </div>
</div>
