feat: highlight/show currently running session

Fixes #1

Author: coderbyheart

e2e-tests/browserWithFixedTime.ts

@@ -0,0 +1,24 @@
+import { BrowserContext, chromium } from '@playwright/test'
+import path from 'path'
+import sinon from 'sinon'
+
+export const browserWithFixedTime = async (): Promise<BrowserContext> => {
+	const browser = await chromium.launch()
+	const context = await browser.newContext({
+		locale: 'no-NO',
+		timezoneId: 'Europe/Berlin',
+	})
+	// See https://github.com/microsoft/playwright/issues/6347#issuecomment-965887758
+	await context.addInitScript({
+		path: path.join(process.cwd(), 'node_modules/sinon/pkg/sinon.js'),
+	})
+	// Auto-enable sinon right away
+	// and enforce our "current" date
+	await context.addInitScript(() => {
+		const clock = sinon.useFakeTimers()
+		clock.setSystemTime(new Date('2022-03-11T12:00:00Z'))
+		;(window as any).__clock = clock
+	})
+
+	return context
+}

e2e-tests/highlight-ongoing-session.spec.ts

@@ -0,0 +1,15 @@
+import { expect, test } from '@playwright/test'
+import { browserWithFixedTime } from './browserWithFixedTime.js'
+
+test.describe('Highlight ongoing session', () => {
+	test('the currently ongoing session should be highlighted', async () => {
+		const context = await browserWithFixedTime()
+		const page = await context.newPage()
+		await page.goto('http://localhost:8080/')
+		await expect(
+			page.locator('td:has-text("Lunch Break") >> xpath=ancestor::tr'),
+		).toHaveClass('ongoing')
+		// There should only be one highlighted row
+		await expect(page.locator('tr.ongoing')).toHaveCount(1)
+	})
+})

e2e-tests/example.spec.ts renamed to e2e-tests/session-in-local-time.spec.ts

@@ -1,26 +1,10 @@
-import { BrowserContext, chromium, expect, test } from '@playwright/test'
-import path from 'path'
-import sinon from 'sinon'
+import { BrowserContext, expect, test } from '@playwright/test'
+import { browserWithFixedTime } from './browserWithFixedTime.js'
 
 test.describe('Adding an item', () => {
 	let context: BrowserContext
 	test.beforeAll(async () => {
-		const browser = await chromium.launch() // Or 'firefox' or 'webkit'.
-		context = await browser.newContext({
-			locale: 'no-NO',
-			timezoneId: 'Europe/Berlin',
-		})
-		// See https://github.com/microsoft/playwright/issues/6347#issuecomment-965887758
-		await context.addInitScript({
-			path: path.join(process.cwd(), 'node_modules/sinon/pkg/sinon.js'),
-		})
-		// Auto-enable sinon right away
-		// and enforce our "current" date
-		await context.addInitScript(() => {
-			const clock = sinon.useFakeTimers()
-			clock.setSystemTime(new Date('2022-03-11T12:00:00Z'))
-			;(window as any).__clock = clock
-		})
+		context = await browserWithFixedTime()
 	})
 
 	test('should allow me to add todo items', async () => {

public/theme.css

@@ -7,6 +7,7 @@ html[data-theme="dark"] {
   --color-countdownWarning: #ff5e007a;
   --color-borderColor: #7d7d7d;
   --filter-calendar-picker-indicator: invert(1);
+  --color-ongoing: #007500;
 }
 
 html[data-theme="light"] {
@@ -17,6 +18,7 @@ html[data-theme="light"] {
   --color-delete: #dc2000;
   --color-countdownWarning: #ff000052;
   --color-borderColor: #a7a7a7;
+  --color-ongoing: #7cff7c;
 }
 
 body {

src/Schedule.tsx

@@ -15,9 +15,9 @@ const diff = (startTime: Date, conferenceDate: Date) => {
 		// If difference is > 1 day
 		// show distance in days to conference start, so all entries have the same difference
 		const daysDistance = differenceInCalendarDays(conferenceDate, now)
-		return daysDistance > 1 ? `about ${daysDistance} days` : 'about 1 day'
+		return daysDistance > 1 ? `${daysDistance} days` : '1 day'
 	}
-	return formatDistance(startTime, now)
+	return formatDistance(startTime, now).replace('about ', '')
 }
 
 const startsInMinutes = (startTime: Date) => {
@@ -78,6 +78,16 @@ export const Schedule = ({
 	const eventTime = toEventTime({ conferenceDate, userTimeZone })
 	const userTime = toUserTime({ conferenceDate, eventTimezoneName })
 	const userFormat = formatUserTime({ userTimeZone })
+	const [currentTime, setCurrentTime] = useState<Date>(new Date())
+
+	useEffect(() => {
+		const i = setInterval(() => {
+			setCurrentTime(new Date())
+		}, 60 * 1000)
+		return () => {
+			clearInterval(i)
+		}
+	}, [])
 
 	return (
 		<table className={tableStyles.Table}>
@@ -91,7 +101,9 @@ export const Schedule = ({
 					<th>
 						Your Time
 						<br />
-						<small>{formatTimezone(userTimeZone)}</small>
+						<small>
+							{formatTimezone(userTimeZone)} ({userFormat(currentTime)})
+						</small>
 					</th>
 					<th>Starts in</th>
 					<th>Session</th>
@@ -104,24 +116,44 @@ export const Schedule = ({
 							!hidePastSessions ||
 							startsInMinutes(userTime(time as unknown as number)) > 0,
 					)
-					.map(([time, name]) => (
-						<tr key={time}>
-							<td className={'time'}>
-								{formatEventTime(eventTime(time as unknown as number))}
-							</td>
-							<td className={'time'}>
-								{userFormat(userTime(time as unknown as number))}
-							</td>
-							<Countdown
-								key={conferenceDate}
-								conferenceDate={userTime(0)}
-								startTime={userTime(time as unknown as number)}
-							/>
-							<td>
-								<SessionName name={name} />
-							</td>
-						</tr>
-					))}
+					.map(([time, name], i, sessions) => {
+						const nextIsOngoing =
+							sessions[i + 1] !== undefined
+								? startsInMinutes(
+										userTime(sessions[i + 1][0] as unknown as number),
+								  ) < 0
+								: false
+
+						const isOngoing =
+							startsInMinutes(userTime(time as unknown as number)) < 0 &&
+							!nextIsOngoing
+
+						return (
+							<tr key={time} className={isOngoing ? 'ongoing' : ''}>
+								<td className={'time'}>
+									{formatEventTime(eventTime(time as unknown as number))}
+								</td>
+								<td className={'time'}>
+									{userFormat(userTime(time as unknown as number))}
+								</td>
+								{isOngoing && (
+									<td>
+										<em>ongoing</em>
+									</td>
+								)}
+								{!isOngoing && (
+									<Countdown
+										key={conferenceDate}
+										conferenceDate={userTime(0)}
+										startTime={userTime(time as unknown as number)}
+									/>
+								)}
+								<td>
+									<SessionName name={name} />
+								</td>
+							</tr>
+						)
+					})}
 			</tbody>
 		</table>
 	)

src/Table.module.css

@@ -57,3 +57,7 @@
 .Table a {
   color: var(--color-text);
 }
+
+.Table tr:global(.ongoing) {
+  background-color: var(--color-ongoing);
+}