feat: Implement Pomodoro Timer with reliable background audio#2
feat: Implement Pomodoro Timer with reliable background audio#2NeshJesse wants to merge 1 commit into
Conversation
- Complete HTML/CSS/JS implementation in single file - Web Audio API for reliable background notifications - Comprehensive permission handling with browser prompts - Accurate background timing immune to tab throttling - Full accessibility support and error handling - Addresses Issue AkongaLabs#1 requirements completely
WalkthroughA new single-file Pomodoro timer web application was introduced, implemented in HTML, CSS, and JavaScript. The app features accurate timer logic, custom audio and browser notifications, robust permission handling, accessibility enhancements, dynamic UI feedback, and modern responsive design. Documentation on browser-specific behaviors and performance considerations was also added. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant UI
participant TimerLogic
participant Audio
participant Notifications
User->>UI: Set duration/start/pause/resume
UI->>TimerLogic: Start or pause timer
TimerLogic->>UI: Update display/status
TimerLogic-->>Audio: On completion, play beep
TimerLogic-->>Notifications: On completion, show browser notification
Notifications->>User: Display notification
Audio->>User: Play sound
User->>UI: Interact (e.g., close notification, focus window)
Possibly related issues
Poem
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (7)
notes.md (1)
23-23: Add missing punctuation
The bullet “Generated audio: No audio file loading overhead” should end with a period for consistency.index.html (6)
5-5: Duplicate viewport meta tags
There are two<meta name="viewport">declarations at lines 5 and 18. Consolidate these into a single tag (e.g., includemaximum-scale=1.0, user-scalable=noin one).Also applies to: 18-18
272-275: Preferkeydownoverkeypress
The'keypress'event is deprecated for modern browsers. Switch tominutesInput.addEventListener('keydown', ...)for the Enter key to ensure better compatibility.
400-403: Specify radix inparseInt
UseparseInt(minutesInput.value, 10)to avoid potential octal parsing issues in legacy environments.
444-446: UnusedexpectedEndTime
The propertytimerState.expectedEndTimeis set but never read. Remove it or updateupdateTimer()to useexpectedEndTimefor more direct remaining-time calculation.
289-296: AwaittestContext.close()
testContext.close()returns a Promise that isn’t awaited. Consider usingawait testContext.close()(inside an async block) or handle the promise to ensure the context is properly closed.
375-388: Normalize indentation
TheplayNotificationSoundfunction has inconsistent indentation, making it harder to read. Align all lines with the surrounding code block’s style.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (5)
assets/decimalentry.pngis excluded by!**/*.pngassets/exceed.pngis excluded by!**/*.pngassets/favicon.icois excluded by!**/*.icoassets/favicon.jpegis excluded by!**/*.jpegassets/screenshot.pngis excluded by!**/*.png
📒 Files selected for processing (3)
codesumm.md(1 hunks)index.html(1 hunks)notes.md(1 hunks)
| - **Cross-browser compatibility**: Optimized specifically for Chrome as requested | ||
| - **Mobile considerations**: Desktop-focused implementation | ||
| - **Network dependency**: None (fully self-contained) |
There was a problem hiding this comment.
Documentation misstates network dependencies
The note “Network dependency: None (fully self-contained)” contradicts the implementation, which loads Google Fonts and external assets. Please update this limitation to reflect the real external network dependencies (e.g., Google Fonts, favicon downloads).
🤖 Prompt for AI Agents
In notes.md around lines 9 to 11, the documentation incorrectly states there is
no network dependency, but the implementation loads external assets like Google
Fonts and favicons. Update the note to accurately reflect these external network
dependencies by mentioning Google Fonts and favicon downloads as required
external resources.
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>Pomodoro Timer</title> | ||
| <script src="index.js" defer></script> |
There was a problem hiding this comment.
Incorrect code snippet/reference
This file references an external <script src="index.js"> and shows raw HTML without markdown fencing. There is no index.js in the PR; the main script is embedded inline in index.html. Please update or remove the snippet, wrap examples in proper markdown code fences, and ensure the summary aligns with the actual structure.
🤖 Prompt for AI Agents
In codesumm.md at line 7, the snippet incorrectly references an external script
"index.js" which does not exist in the PR; the main script is inline in
index.html. Remove or update this reference to reflect the actual inline script
usage, wrap all code examples in proper markdown code fences for clarity, and
revise the summary to accurately describe the current file structure and script
inclusion.
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>Pomodoro Timer</title> | ||
| <link rel="icon" href="assets/favicon.ico" type="image/x-icon"> |
There was a problem hiding this comment.
Favicon MIME type mismatch
The links for favicon.jpeg use type="image/png", which conflicts with the .jpeg extension—and you also declare a separate .ico icon. Please standardize your favicons. For example:
- <link rel="icon" type="image/png" sizes="32x32" href="assets/favicon.jpeg">
- <link rel="icon" type="image/png" sizes="16x16" href="assets/favicon.jpeg">
+ <link rel="icon" type="image/jpeg" sizes="32x32" href="assets/favicon.jpeg">
+ <link rel="icon" type="image/jpeg" sizes="16x16" href="assets/favicon.jpeg">Also applies to: 24-25
🤖 Prompt for AI Agents
In index.html at lines 7 and 24-25, the favicon links have a MIME type mismatch
where a .jpeg file is declared with type="image/png" and there is also a
separate .ico icon declared. To fix this, ensure the href file extension matches
the declared MIME type for each favicon link, and standardize on one favicon
format (preferably .ico) by updating the href and type attributes accordingly.
|
@NeshJesse You were expected to use the github "request for review to tag me." In future submissions. That lack of attention to detail is enough to render your submission null and void. |
|
I'm grateful 🙏🙏
Noted with thanks.
…On Mon, 23 Jun 2025, 7:31 am Adrian Murage, ***@***.***> wrote:
*adrianmurage* left a comment (AkongaLabs/OSS-bounties#2)
<#2 (comment)>
@NeshJesse <https://github.com/NeshJesse> You were expected to use the
github "request for review to tag me."
But given that this is the very first PR. I did it for you and will be
lenient.
In future submissions. That lack of attention to detail is enough to
render your submission null and void.
—
Reply to this email directly, view it on GitHub
<#2 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/A5AR5GRYLBVQT3YVDG6JYNT3E57J3AVCNFSM6AAAAAB74H5UZGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDSOJUHA4DCNJZGE>
.
You are receiving this because you were mentioned.Message ID:
***@***.***>
|
|
Turns out running a company takes a lot more than I anticipated. I apologize for not reviewing your work in the promised timeline. I assure you I haven't ignored or forgotten you. Founder duties to the company that is making all this possible have simply taken the # 1 priority. Because if the company fails, this program cannot exist. Thank you for understanding and I'll get back to you as soon as I possibly can. |
|
Days turned to years it seems |
2 participants
Bounty Solution Submission
Problem Statement
This bounty solves the challenge of creating a reliable Pomodoro timer web application with the critical requirement of background audio notifications that work even when the Chrome browser tab is minimized or in the background. The main technical challenge was overcoming Chrome's autoplay policies and background tab throttling to ensure consistent audio notifications during focus sessions.
Solution Approach
I implemented a single-file HTML application using Web Audio API instead of traditional HTML5 audio for superior background reliability. Key technical decisions included:
Date.now()timestamps to prevent timing drift during background tab throttlingTechnical Implementation
Testing Evidence
Test Coverage:
Test Results:
evidence via screenshots 'https://neshjesse.github.io/pomodoro/assets/exceed.png'
more evidence 'https://neshjesse.github.io/pomodoro/assets/decimalentry.png'
Critical Flows Tested:
Test Results: All core functionality verified working in Chrome desktop. Background audio notifications trigger reliably when tab is inactive, which was the primary technical challenge.
Demo Evidence
https://neshjesse.github.io/pomodoro/Setup Instructions
Step-by-step instructions to see how the code runs:
Database Setup
No database setup required - this is a client-side only application with no data persistence needs.
Architectural Decisions
1. Web Audio API over HTML5 Audio
2. Single HTML File Architecture
3. Programmatic Sound Generation
4. Absolute Timestamp Timing
5. Dual Notification System
Bun/Yarn Justification
Package manager not applicable - this solution uses vanilla HTML/CSS/JavaScript with no build process, dependencies, or compilation step required. The single-file architecture meets the bounty requirement for minimal external dependencies while ensuring maximum compatibility and ease of deployment.
Pre-submission Checklist:
I confirm this submission meets all requirements and is ready for review. @adrianmurage
Summary by CodeRabbit
New Features
Documentation