diff --git a/materialious/src/lib/components/Player.svelte b/materialious/src/lib/components/Player.svelte index a5b8ead6..aaf773df 100644 --- a/materialious/src/lib/components/Player.svelte +++ b/materialious/src/lib/components/Player.svelte @@ -95,6 +95,7 @@ let playerTimelineTimeHover: number = $state(0); let playerTimelineMouseX: number = $state(0); let playerTimelineLastUpdate: number = 0; + let playerVideoEndTimePretty: string = $state(''); let clickCount = $state(0); // eslint-disable-next-line no-undef @@ -804,9 +805,18 @@ playerCurrentTime = playerElement.currentTime ?? 0; if (playerMaxKnownTime === 0 || playerCurrentTime > playerMaxKnownTime) { - playerMaxKnownTime = Number(playerElement?.currentTime); + playerMaxKnownTime = Number(playerElement.currentTime); } + const remainingTime = playerMaxKnownTime - playerElement.currentTime; + const videoEnds = new Date(Date.now() + remainingTime * 1000); + + playerVideoEndTimePretty = videoEnds.toLocaleTimeString([], { + hour: '2-digit', + minute: '2-digit', + hour12: true + }); + const buffered = playerElement.buffered; if (buffered.length > 0 && bufferBar) { @@ -1030,13 +1040,18 @@ {/if} {#if !hideControls} -
- {#if data.video.liveNow} - {$_('thumbnail.live')} - {:else} - {videoLength(playerCurrentTime)} / {videoLength(data.video.lengthSeconds)} - {/if} -
++ {#if data.video.liveNow} + {$_('thumbnail.live')} + {:else} + {videoLength(playerCurrentTime)} / {videoLength(data.video.lengthSeconds)} + {/if} +
++ {playerVideoEndTimePretty} +
+