fix timer

playwright/e2e/timer.spec.ts

@@ -0,0 +1,94 @@
+/**
+ * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { expect } from '@playwright/test'
+import type { Page } from '@playwright/test'
+import { test } from '../support/fixtures/random-user'
+import {
+	createWhiteboard,
+	newLoggedInPage,
+	openFilesApp,
+	openWhiteboardFromFiles,
+} from '../support/utils'
+
+async function ensureTimerVisible(page: Page) {
+	// Use .timer selector instead of .timer-overlay because the overlay wrapper
+	// has zero dimensions (its child DraggableDialog uses position: fixed)
+	const timer = page.locator('.timer')
+	if (await timer.count()) {
+		await expect(timer).toBeVisible({ timeout: 15000 })
+		return timer
+	}
+
+	await page.getByTestId('main-menu-trigger').click()
+	const toggleItem = page.getByText(/Show timer|Hide timer/).first()
+	await expect(toggleItem).toBeVisible({ timeout: 15000 })
+	await toggleItem.click()
+
+	await expect(timer).toBeVisible({ timeout: 15000 })
+	return timer
+}
+
+async function waitForCollaboration(page: Page) {
+	await expect(page.locator('.network-status')).toHaveCount(0, { timeout: 30000 })
+}
+
+test.beforeEach(async ({ page }) => {
+	await openFilesApp(page)
+})
+
+test('timer can start, pause, resume, and reset', async ({ page }) => {
+	const boardName = `Timer board ${Date.now()}`
+
+	await createWhiteboard(page, { name: boardName })
+	await waitForCollaboration(page)
+
+	const timer = await ensureTimerVisible(page)
+
+	await timer.getByLabel('Minutes').fill('1')
+	await timer.getByLabel('Seconds').fill('0')
+	await timer.getByRole('button', { name: 'Start' }).click()
+
+	await expect(timer.getByText('Running')).toBeVisible({ timeout: 15000 })
+	await expect(timer.getByRole('button', { name: 'Pause' })).toBeVisible()
+
+	await timer.getByRole('button', { name: 'Pause' }).click()
+	await expect(timer.getByText('Paused')).toBeVisible({ timeout: 15000 })
+	await expect(timer.getByRole('button', { name: 'Resume' })).toBeVisible()
+
+	await timer.getByRole('button', { name: 'Resume' }).click()
+	await expect(timer.getByText('Running')).toBeVisible({ timeout: 15000 })
+
+	await timer.getByRole('button', { name: 'Reset' }).click()
+	await expect(timer.getByText('Ready')).toBeVisible({ timeout: 15000 })
+	await expect(timer.getByLabel('Minutes')).toHaveValue('0')
+	await expect(timer.getByLabel('Seconds')).toHaveValue('0')
+})
+
+test('timer state syncs across sessions', async ({ page, browser }) => {
+	test.setTimeout(90000)
+	const boardName = `Timer sync ${Date.now()}`
+
+	await createWhiteboard(page, { name: boardName })
+	await waitForCollaboration(page)
+
+	const timer = await ensureTimerVisible(page)
+	await timer.getByLabel('Minutes').fill('1')
+	await timer.getByRole('button', { name: 'Start' }).click()
+	await expect(timer.getByText('Running')).toBeVisible({ timeout: 15000 })
+
+	const viewerPage = await newLoggedInPage(page, browser)
+	await openWhiteboardFromFiles(viewerPage, boardName)
+	await waitForCollaboration(viewerPage)
+
+	const viewerTimer = await ensureTimerVisible(viewerPage)
+	await expect(viewerTimer.getByText('Running')).toBeVisible({ timeout: 20000 })
+	await viewerTimer.getByRole('button', { name: 'Pause' }).click()
+
+	await expect(viewerTimer.getByText('Paused')).toBeVisible({ timeout: 20000 })
+	await expect(timer.getByText('Paused')).toBeVisible({ timeout: 20000 })
+
+	await viewerPage.close()
+})

src/App.tsx

@@ -203,6 +203,30 @@ export default function App({
 	const presentationState = usePresentation({ fileId: normalizedFileId })
 	const timerState = useTimer({ fileId: normalizedFileId })
 	const [isTimerPinned, setIsTimerPinned] = useState(false)
+	const [isTimerDismissed, setIsTimerDismissed] = useState(false)
+	const isTimerActive = timerState.status !== 'idle'
+	const isTimerVisible = isTimerPinned || (isTimerActive && !isTimerDismissed)
+
+	useEffect(() => {
+		if (!isTimerActive) {
+			setIsTimerDismissed(false)
+		}
+	}, [isTimerActive])
+
+	const handleToggleTimer = useCallback(() => {
+		if (isTimerVisible) {
+			setIsTimerPinned(false)
+			if (isTimerActive) {
+				setIsTimerDismissed(true)
+			}
+			return
+		}
+
+		setIsTimerDismissed(false)
+		if (!isTimerActive) {
+			setIsTimerPinned(true)
+		}
+	}, [isTimerVisible, isTimerActive])
 
 	// Voting
 	const { startVoting, vote, endVoting } = useVoting()
@@ -556,8 +580,8 @@ export default function App({
 							fileNameWithoutExtension={fileNameWithoutExtension}
 							recordingState={recordingState}
 							presentationState={presentationState}
-							isTimerVisible={isTimerPinned || timerState.status !== 'idle'}
-							onToggleTimer={() => setIsTimerPinned(prev => !prev)}
+							isTimerVisible={isTimerVisible}
+							onToggleTimer={handleToggleTimer}
 							gridModeEnabled={gridModeEnabled}
 							onToggleGrid={() => setGridModeEnabled(!gridModeEnabled)}
 						/>
@@ -578,7 +602,7 @@ export default function App({
 						presentationState={presentationState}
 					/>
 				)}
-				{!isVersionPreview && (isTimerPinned || timerState.status !== 'idle') && (
+				{!isVersionPreview && isTimerVisible && (
 					<TimerOverlay
 						timer={timerState}
 					/>

src/components/Timer.scss

@@ -129,19 +129,50 @@
 	gap: 8px;
 }
 
+.timer__time-input-wrapper {
+	position: relative;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.timer__time-input-wrapper::after {
+	content: attr(data-label);
+	position: absolute;
+	top: -6px;
+	inset-inline-start: 50%;
+	transform: translateX(-50%);
+	padding: 0 2px;
+	font-size: 9px;
+	line-height: 1;
+	font-weight: 600;
+	color: var(--color-text-lighter);
+	background: transparent;
+	text-shadow: 0 0 2px var(--color-background-hover);
+	pointer-events: none;
+}
+
 .timer__time-input {
 	width: 54px;
 	padding: 6px 4px;
 	text-align: center;
 	font-size: 24px;
 	font-weight: 700;
+	appearance: textfield;
+	-moz-appearance: textfield;
 	border-radius: var(--border-radius);
 	border: 2px solid var(--color-border);
 	background: var(--color-main-background);
 	color: var(--color-main-text);
 	transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
 }
 
+.timer__time-input::-webkit-outer-spin-button,
+.timer__time-input::-webkit-inner-spin-button {
+	-webkit-appearance: none;
+	margin: 0;
+}
+
 .timer__time-input:focus {
 	outline: none;
 	border-color: var(--color-primary);
@@ -196,16 +227,18 @@
 	border: 1px solid var(--color-border);
 	background: var(--color-background-hover);
 	border-radius: 12px;
-	padding: 8px 6px;
+	padding: 6px 6px;
 	cursor: pointer;
 	transition: background-color 0.2s ease, border-color 0.2s ease;
 	font-weight: 700;
+	font-size: 12px;
 	text-align: center;
 	white-space: nowrap;
-	min-height: 40px;
+	min-height: 36px;
 	display: inline-flex;
 	align-items: center;
 	justify-content: center;
+	min-width: 0;
 }
 
 .timer__chip:hover:enabled {
@@ -232,28 +265,34 @@
 .timer__grid {
 	display: grid;
 	gap: 6px;
+	width: 100%;
 }
 
 .timer__grid--primary {
-	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+	grid-auto-flow: column;
+	grid-auto-columns: minmax(0, 1fr);
 }
 
 .timer__grid--presets {
-	grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
+	grid-auto-flow: column;
+	grid-auto-columns: minmax(0, 1fr);
 }
 
 .timer__button {
 	display: inline-flex;
 	align-items: center;
-	gap: 6px;
-	padding: 8px 10px;
+	gap: 4px;
+	padding: 6px 8px;
 	border-radius: var(--border-radius);
 	border: 1px solid var(--color-border);
 	background: var(--color-background-hover);
 	cursor: pointer;
 	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
-	min-height: 40px;
+	min-height: 36px;
 	font-weight: 700;
+	font-size: 12px;
+	min-width: 0;
+	white-space: nowrap;
 }
 
 .timer__button--start {
@@ -274,7 +313,7 @@
 }
 
 .timer__button-label {
-	font-size: 13px;
+	font-size: 12px;
 }
 
 .timer__button:hover:enabled {

src/components/Timer.tsx

@@ -18,6 +18,8 @@ import { t } from '@nextcloud/l10n'
 import './Timer.scss'
 
 const MAX_DURATION_MS = 4 * 60 * 60 * 1000
+const DIGIT_STRIP_RE = /[^\d]/g
+const LEADING_ZERO_RE = /^0+(?=\d)/
 
 function formatCountdown(ms: number) {
 	const totalSeconds = Math.max(0, Math.round(ms / 1000))
@@ -44,6 +46,10 @@ function splitDuration(ms: number) {
 	return { hours, minutes, seconds }
 }
 
+function normalizeTimeInput(value: string) {
+	return value.replace(DIGIT_STRIP_RE, '').replace(LEADING_ZERO_RE, '')
+}
+
 interface TimerOverlayProps {
 	timer: UseTimerResult
 }
@@ -73,11 +79,14 @@ export const TimerOverlay = memo(function TimerOverlay({ timer }: TimerOverlayPr
 		}
 	}, [timer.durationMs, timer.remainingMs, timer.status, setTimeFromMs])
 
-	const handleTimeChange = useCallback((part: keyof typeof timeInputs, value: number) => {
+	const handleTimeChange = useCallback((part: keyof typeof timeInputs, value: string) => {
+		const normalized = normalizeTimeInput(value)
+		const numericValue = normalized === '' ? 0 : Number(normalized)
+
 		setTimeInputs(prev => {
-			const hours = part === 'hours' ? value : prev.hours
-			const minutes = part === 'minutes' ? value : prev.minutes
-			const seconds = part === 'seconds' ? value : prev.seconds
+			const hours = part === 'hours' ? numericValue : prev.hours
+			const minutes = part === 'minutes' ? numericValue : prev.minutes
+			const seconds = part === 'seconds' ? numericValue : prev.seconds
 
 			return splitDuration((Math.max(0, Math.floor(hours)) * 3600
 				+ Math.max(0, Math.floor(minutes)) * 60
@@ -169,44 +178,47 @@ export const TimerOverlay = memo(function TimerOverlay({ timer }: TimerOverlayPr
 								)
 								: (
 									<div className="timer__time-inputs">
-										<input
-											id="timer-hours"
-											type="number"
-											inputMode="numeric"
-											min={0}
-											max={4}
-											value={timeInputs.hours}
-											onChange={(event) => handleTimeChange('hours', Number(event.target.value) || 0)}
-											disabled={!canControl}
-											aria-label={t('whiteboard', 'Hours')}
-											className="timer__time-input"
-										/>
+										<div className="timer__time-input-wrapper" data-label="hh">
+											<input
+												id="timer-hours"
+												type="text"
+												inputMode="numeric"
+												pattern="[0-9]*"
+												value={timeInputs.hours}
+												onChange={(event) => handleTimeChange('hours', event.target.value)}
+												disabled={!canControl}
+												aria-label={t('whiteboard', 'Hours')}
+												className="timer__time-input"
+											/>
+										</div>
 										<span className="timer__time-separator">:</span>
-										<input
-											id="timer-minutes"
-											type="number"
-											inputMode="numeric"
-											min={0}
-											max={59}
-											value={timeInputs.minutes}
-											onChange={(event) => handleTimeChange('minutes', Number(event.target.value) || 0)}
-											disabled={!canControl}
-											aria-label={t('whiteboard', 'Minutes')}
-											className="timer__time-input"
-										/>
+										<div className="timer__time-input-wrapper" data-label="mm">
+											<input
+												id="timer-minutes"
+												type="text"
+												inputMode="numeric"
+												pattern="[0-9]*"
+												value={timeInputs.minutes}
+												onChange={(event) => handleTimeChange('minutes', event.target.value)}
+												disabled={!canControl}
+												aria-label={t('whiteboard', 'Minutes')}
+												className="timer__time-input"
+											/>
+										</div>
 										<span className="timer__time-separator">:</span>
-										<input
-											id="timer-seconds"
-											type="number"
-											inputMode="numeric"
-											min={0}
-											max={59}
-											value={timeInputs.seconds}
-											onChange={(event) => handleTimeChange('seconds', Number(event.target.value) || 0)}
-											disabled={!canControl}
-											aria-label={t('whiteboard', 'Seconds')}
-											className="timer__time-input"
-										/>
+										<div className="timer__time-input-wrapper" data-label="ss">
+											<input
+												id="timer-seconds"
+												type="text"
+												inputMode="numeric"
+												pattern="[0-9]*"
+												value={timeInputs.seconds}
+												onChange={(event) => handleTimeChange('seconds', event.target.value)}
+												disabled={!canControl}
+												aria-label={t('whiteboard', 'Seconds')}
+												className="timer__time-input"
+											/>
+										</div>
 									</div>
 								)}
 						</div>