Make UI Clip API aware

[ceyhun-o]

Summary

Adds support for the Clip API (player.clip.startTime / player.clip.endTime).

When a clip is set, the player keeps duration at the full stream length and currentTime as an absolute stream position. Only seekable narrows to the clip window. The seek bar already follows seekable, so it was clipped correctly. The time displays, seek button and seek bar aria text were not clip-aware. For example, a 30–40s clip of a 9:56 stream showed 00:35 / 09:56 instead of 00:05 / 00:10.

Changes

@theoplayer/web-ui

• Add getClipEndTime(player) in src/util/ClipUtils.ts, which returns min(player.duration, player.clip.endTime).
• DurationDisplay: show the clip length.
• TimeDisplay: show the current time and the total relative to the clip start.
• PreviewTimeDisplay: show the hover time relative to the clip start.
• SeekButton: clamp seeking to the clip window instead of [0, duration].
• TimeRange: make the aria value text clip-relative.
• The four time components above (DurationDisplay, TimeDisplay, PreviewTimeDisplay, TimeRange) also update when player.clip fires change.

@theoplayer/react-ui

• The React components wrap the elements above, so they pick up the changes without code changes.
• Add a useClip hook that returns the clip's { startTime, endTime } and updates when the clip changes. Without a clip it returns { startTime: 0, endTime: Infinity }.
• The useDuration and useCurrentTime hooks still return raw player values, so they are not relative to the clip.

Chapters, ad markers, preview thumbnails and stream type detection stay on absolute stream time, so they are unchanged. The TimeRange preview event also stays absolute.

This follows the approach in the VJS-based UI, which also uses the clip end for the duration and listens to clip change.

Testing

• npm run test:typecheck, npm run build, npm run test:unit and Prettier pass, in the root package and in react/.
• Manually checked in Chrome and Safari (also for React).

[changeset-bot]

🦋 Changeset detected

Latest commit: 21cc64f

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@theoplayer/web-ui	Minor
@theoplayer/react-ui	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[MattiasBuelens]

For React, should we also add a useClip hook to get the clip start and end times?

[ceyhun-o]

For React, should we also add a useClip hook to get the clip start and end times?

Added it. I was thinking it would be more complicated than this.