From aeb87a2cd0f0deca4b1b64012db547a7cb2300e4 Mon Sep 17 00:00:00 2001
From: AML - A Laycock <aml@lhs.lancs.sch.uk>
Date: Mon, 29 Jan 2024 19:38:59 +0000
Subject: [PATCH] feat: improve live stream selection page

---
 app/routes/live.tsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/app/routes/live.tsx b/app/routes/live.tsx
index f78221e..ee9233c 100644
--- a/app/routes/live.tsx
+++ b/app/routes/live.tsx
@@ -3,6 +3,7 @@ import {useLoaderData} from '@remix-run/react'
 import {useState, useEffect, useRef} from 'react'
 import dashjs from '~/lib/dash.client'
 import {type LiveStream} from '@prisma/client'
+import {formatDistance} from 'date-fns'
 
 import {getUPNFromHeaders, getUserFromUPN} from '~/lib/user.server'
 import {getConfigValue} from '~/lib/config.server'
@@ -41,7 +42,9 @@ const Live = () => {
   const {streamUrl, streams} = useLoaderData<typeof loader>()
 
   const [start, setStart] = useState<boolean>(false)
-  const [selectedStream, setSelectedStream] = useState<LiveStream | undefined>()
+  const [selectedStream, setSelectedStream] = useState<
+    Pick<LiveStream, 'id' | 'key'> | undefined
+  >()
 
   const videoRef = useRef(null)
   const playerRef = useRef<dashjs.MediaPlayerClass | null>(null)
@@ -97,6 +100,11 @@ const Live = () => {
               >
                 Join Stream
               </button>
+              <br />
+              <i>
+                Started {formatDistance(new Date(stream.updatedAt), new Date())}{' '}
+                ago
+              </i>
             </div>
           )
         })}