<ng-container [ngSwitch]="status.running_status">
  <div class="status-display" *ngSwitchCase="RunningStatus.RECORDING">
    <p class="status-bar recording">
      <span
        class="status-indicator"
        nz-tooltip
        nzTooltipTitle="正在录制"
        nzTooltipPlacement="top"
      >
        <i></i>
      </span>
      <span
        class="time-elapsed"
        nz-tooltip
        nzTooltipTitle="录制用时"
        nzTooltipPlacement="top"
      >
        {{ status.rec_elapsed | duration }}
      </span>
      <span
        class="data-rate"
        nz-tooltip
        nzTooltipTitle="录制速度"
        nzTooltipPlacement="top"
      >
        {{ status.rec_rate | datarate: { spacer: "" } }}
      </span>
      <span
        class="data-count"
        nz-tooltip
        nzTooltipTitle="录制总计"
        nzTooltipPlacement="top"
      >
        {{ status.rec_total | filesize: { spacer: "" } }}
      </span>
      <span
        class="danmu-count"
        nz-tooltip
        nzTooltipTitle="弹幕总计：{{ status.danmu_total | number: '1.0-0' }}"
        nzTooltipPlacement="top"
      >
        {{ status.danmu_total | number: "1.0-0" }}
      </span>
      <span
        class="quality"
        nz-tooltip
        nzTooltipTitle="录制画质"
        nzTooltipPlacement="leftTop"
      >
        {{
          status.real_quality_number
            ? (status.real_quality_number | quality)
            : ""
        }}
      </span>
    </p>
  </div>

  <div class="status-display" *ngSwitchCase="RunningStatus.INJECTING">
    <p
      class="status-bar injecting"
      nz-tooltip
      nzTooltipTitle="正在添加元数据：{{
        status.postprocessing_path ?? '' | filename
      }}"
      nzTooltipPlacement="top"
    >
      {{ status.postprocessing_path ?? "" | filename }}
    </p>
    <nz-progress
      [nzType]="'line'"
      [nzShowInfo]="false"
      [nzStrokeLinecap]="'square'"
      [nzStrokeWidth]="2"
      [nzPercent]="
        status.postprocessing_progress === null
          ? 0
          : (status.postprocessing_progress | progress)
      "
    ></nz-progress>
  </div>

  <div class="status-display" *ngSwitchCase="RunningStatus.REMUXING">
    <p
      class="status-bar remuxing"
      nz-tooltip
      nzTooltipTitle="正在转封装：{{
        status.postprocessing_path ?? '' | filename
      }}"
      nzTooltipPlacement="top"
    >
      {{ status.postprocessing_path ?? "" | filename }}
    </p>
    <nz-progress
      [nzType]="'line'"
      [nzShowInfo]="false"
      [nzStrokeLinecap]="'square'"
      [nzStrokeWidth]="2"
      [nzPercent]="
        status.postprocessing_progress === null
          ? 0
          : (status.postprocessing_progress | progress)
      "
    ></nz-progress>
  </div>
</ng-container>
