From bf5921ebb2e3197b69038d351e1a29c6d5ef2f86 Mon Sep 17 00:00:00 2001
From: WardPearce <wardpearce@pm.me>
Date: Sun, 28 Dec 2025 15:43:19 +1300
Subject: [PATCH] Added end time to video

---
 materialious/src/lib/components/Player.svelte | 37 ++++++++++++++-----
 1 file changed, 28 insertions(+), 9 deletions(-)

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 @@
 		</div>
 	{/if}
 	{#if !hideControls}
-		<p id="mobile-time" class="chip secondary s">
-			{#if data.video.liveNow}
-				{$_('thumbnail.live')}
-			{:else}
-				{videoLength(playerCurrentTime)} / {videoLength(data.video.lengthSeconds)}
-			{/if}
-		</p>
+		<div id="mobile-time">
+			<p class="chip secondary s">
+				{#if data.video.liveNow}
+					{$_('thumbnail.live')}
+				{:else}
+					{videoLength(playerCurrentTime)} / {videoLength(data.video.lengthSeconds)}
+				{/if}
+			</p>
+			<p class="chip secondary">
+				{playerVideoEndTimePretty}
+			</p>
+		</div>
 	{/if}
 	<div id="player-center">
 		<div class="grid">
@@ -1389,11 +1404,15 @@
 		top: 0;
 		right: 0;
 		padding: 10px;
-		border: none;
 		opacity: 0;
 		transition: opacity 2s ease;
 	}
 
+	#mobile-time .chip {
+		border: none;
+		margin: 0;
+	}
+
 	#progress-slider > span {
 		transition: 0.25s;
 	}