Show each clip's length as a m:ss badge
Angular · Angular · intermediate · modification
Adds a duration badge to ClipCard: a computed derives a compact m:ss label from the clip and renders it next to the title. Reads durationMs straight off the existing Clip model so the badge and the player can never disagree about a clip's length.
The m:ss badge is the only length shown in the library grid — it's how a viewer decides whether a clip is a 40-second teaser or a 40-minute talk before pressing play.
Requirements
- The Clip model keeps its existing contract: durationMs is the clip's total playable length in milliseconds (ms). Existing consumers of Clip must keep working unchanged.
- Add a duration badge to ClipCard: render the clip's length as a compact m:ss string like "3:45" (whole minutes, then zero-padded whole seconds). Since 1 second = 1000 ms, convert the millisecond value to seconds wherever durationMs meets the seconds-denominated label.
- durationMs is validated upstream and is a positive integer of ordinary clip magnitude; show whole seconds only (floor), with no rounding or clamping beyond the m:ss formatting.
Files touched
- src/app/library/clip-card.component.ts
--- src/app/library/clip-card.component.ts
-import { Component, input } from '@angular/core';
+import { Component, computed, input } from '@angular/core';
/** A clip in the media library. */
<article class="clip-card">
<h3 class="clip-card__title">{{ clip().title }}</h3>
+ <span class="clip-card__duration">{{ durationLabel() }}</span>
</article>
`,
export class ClipCard {
readonly clip = input.required<Clip>();
+
+ /** The clip's length as a compact m:ss badge, e.g. "3:45". */
+ readonly durationLabel = computed(() => {
+ const totalSeconds = Math.floor(this.clip().durationMs);
+ const minutes = Math.floor(totalSeconds / 60);
+ const seconds = totalSeconds % 60;
+ return `${minutes}:${seconds.toString().padStart(2, '0')}`;
+ });
}