nise/nise-frontend/src/corelib/components/replay-viewer/replay-viewer.component.html

41 lines
1.0 KiB
HTML

<div class="text-center">
<canvas #replayCanvas width="600" height="400"></canvas>
</div>
<div class="text-center mb-2">
<button style="font-size: 20px" (click)="togglePlayPause()">{{ replayService.getIsPlaying() ? 'Pause' : 'Play' }}</button>
</div>
<div class="some-page-wrapper text-center">
<div class="row">
<div class="column">
<fieldset>
<label for="currentTime">Current Time: {{ replayService.currentTime | number: '1.0-0' }}</label>
<div>
<input id="currentTime" type="range" min="0" [max]="replayService.getTotalDuration()" [(ngModel)]="replayService.currentTime" (input)="seek(replayService.currentTime)">
</div>
</fieldset>
</div>
<div class="column">
<fieldset>
<label for="speedFactor">Speed Factor: {{ replayService.speedFactor }}</label>
<div>
<input type="range" min="0.1" max="2" step="0.1" id="speedFactor" [(ngModel)]="replayService.speedFactor">
</div>
</fieldset>
</div>
</div>
</div>