Player Page
The player page (/player) is the core of Braincandy — a full-screen media playback experience with multiple screens, real-time controls, and interactive features.
Layout Overview
The player page fills the entire browser window and consists of three main areas:
- Top Bar (Controls) — Pause/resume, timers, settings bar, and end session button
- Media Grid — The main content area with 1–12 media cells
- Beat Meter (optional) — A vertical metronome on the right side
A small watermark at the bottom center reads "braincandy.fapstats.com".
When the player page loads, a short audio clip plays automatically.
Player Controls (Top Bar)
The top bar adapts to your screen size:
Desktop Layout
On larger screens, the controls are displayed in a single horizontal row:
| Left Side | Right Side |
|---|---|
| Pause/Resume button | End Session button |
| Total elapsed time | |
| Active time | |
| Paused time |
Mobile Layout
On smaller screens, the layout simplifies to:
| Left | Center | Right |
|---|---|---|
| Pause/Resume button | Logo (on tablets) | End Session button |
Timers are hidden on mobile to save space.
Timer Display
Three timers are shown in the desktop controls:
| Timer | Description |
|---|---|
| Total | Total wall-clock time since the session started |
| Active | Time spent actively watching (total minus paused time) |
| Paused | Cumulative time spent paused |
Timers update every 200 milliseconds for smooth display. The format adapts based on duration:
- Under 60 seconds:
X seconds - Under 60 minutes:
X minutes - Over 60 minutes:
X hours, Y minutes
Pause & Resume
You can pause and resume the session in two ways:
- Button — Click the Pause/Resume button in the top bar
- Spacebar — Press the spacebar on your keyboard to toggle pause/resume
When paused:
- All auto-advance timers stop — images and GIFs won't change
- All playing videos pause
- The pause timer starts accumulating
- The Beat Meter animation stops
When resumed:
- All timers restart from where they left off
- Paused videos continue playing
- The Beat Meter animation resumes
- The accumulated pause duration is added to the total paused time
Settings Bar
The settings bar is a row of 5 icon buttons in the top bar (between the timers and the end session button) that let you adjust session settings live without leaving the player. Each button opens a modal dialog.
| Button | Icon | Modal Contents |
|---|---|---|
| Screens | 🖥️ | Screen pattern selector — change the grid layout (1–12 screens) live |
| Speed | ⏱️ | Speed slider — adjust the auto-advance interval (1–60 seconds) |
| Pixelation | 🔲 | Pixelation toggle and level slider — enable/disable and adjust the pixel level |
| Beat Meter | 🥁 | Beat meter toggle, beep sound toggle, and BPM range slider |
| Media Types | 🎬 | Toggle switches for each media type (Images, GIFs, Videos, Redgifs) |
Live Adjustment Behavior
All changes take effect immediately when modified:
- Screens: The grid layout updates instantly. If you reduce the number of screens, excess screens are removed. If you increase, new screens are populated from the media pool.
- Speed: The new interval applies to the next auto-advance cycle for each screen.
- Pixelation: The pixelation effect is applied or removed from all media cells in real-time. The level slider updates the pixel resolution immediately.
- Beat Meter: Enabling/disabling toggles the beat meter visibility. Changing the BPM range causes the beat meter component to re-mount with the new settings.
- Media Types: Changing which types are allowed filters out excluded items. The last remaining enabled type cannot be disabled.
The settings bar makes it easy to experiment during playback — increase screens for variety, slow down the speed when you find something interesting, or toggle pixelation on and off.
Media Grid
The media grid is the central playback area. It displays media in the grid layout you selected during configuration.
Grid Layouts
| Screens | CSS Grid |
|---|---|
| 1 | grid-cols-1 grid-rows-1 |
| 2 | grid-cols-2 grid-rows-1 |
| 3 | grid-cols-3 grid-rows-1 |
| 4 | grid-cols-2 grid-rows-2 |
| 6 | grid-cols-3 grid-rows-2 |
| 8 | grid-cols-4 grid-rows-2 |
| 9 | grid-cols-3 grid-rows-3 |
| 12 | grid-cols-4 grid-rows-3 |
All cells are arranged on a black background with small gaps between them.
Media Cell
Each cell in the grid is an independent media player. Every cell has:
Media Display
| Media Type | Display Method |
|---|---|
| Image | <img> tag with object-contain fitting |
| GIF | <img> tag (animated) with object-contain fitting |
| Video | <video> tag with custom controls (click-to-play/pause, progress bar, volume slider) |
| Redgifs | <video> tag loaded via Redgifs API v2 (direct MP4 URL with poster image), same custom controls as regular videos |
When pixelation is enabled, all media types (images, GIFs, videos, and Redgifs) are rendered via a <canvas> element with the pixelation effect applied. Videos and Redgifs use requestAnimationFrame for real-time pixelated rendering.
Custom Video Controls
Videos and Redgifs use custom-built controls instead of native browser controls:
| Control | Description |
|---|---|
| Click to play/pause | Click anywhere on the video area to toggle playback |
| Progress bar | A thin bar at the bottom showing the current playback position |
| Volume slider | A horizontal slider to adjust the video volume (0–100%) |
| Volume icon | Shows 🔊 (high), 🔉 (medium), 🔈 (low), or 🔇 (muted) based on the current level |
The custom controls overlay is transparent and non-intrusive — it appears over the video without obscuring the content.
Cell Buttons
Each cell has three buttons overlaid in the top-right corner:
| Button | Icon | Position | Description |
|---|---|---|---|
| Back | ⏪ | Top-right (leftmost) | Go back to the previous media item for this screen |
| Favorite | ❤️ | Top-right (middle) | Toggle favorite status for the current media |
| Skip | ⏩ | Top-right (rightmost) | Skip to the next media item for this screen |
Back Button
- Navigates backward through the media history for that specific screen
- Each screen maintains its own independent history
- The button is disabled when you are at the beginning of the history (no previous items)
- Going back does not increment the skip counter
Favorite Button
- Click to add the current media item to your favorites
- The heart icon turns red and the button background turns white when favorited
- Click again to remove from favorites
- Favorites are stored in the session store and shown on the statistics page after the session ends
Skip Button
- Advances to the next media item for that screen
- Increments the skip counter in the session statistics
- Shows a loading spinner while the next item is being prepared
Auto-Advance Logic
Each screen has its own independent timer:
| Media Type | Advance Behavior |
|---|---|
| Image | Advances after the configured speed interval (e.g., 10 seconds) |
| GIF | Advances after the configured speed interval |
| Video | Plays until it naturally ends, then advances automatically |
| Redgifs | Plays until it naturally ends, then advances automatically (same as regular videos) |
If a media item fails to load (error event), the screen automatically advances to the next item.
Media Pool Algorithm
The media pool works as follows:
- All collected media (from Reddit, local files, playlists) is shuffled and stored in the
mediaPool - When a screen needs the next item, it shifts (removes) the first item from
mediaPool - The displayed item is moved to
usedMediaafter being replaced - When
mediaPoolis empty, it is refilled fromusedMedia— this means all items will be shown before any repeats usedMediais then cleared to prevent immediate repetition
This ensures:
- No immediate repeats — Every item is shown before the cycle restarts
- Full coverage — All loaded media will eventually be displayed
- Infinite playback — The pool recycles indefinitely
Per-Screen History
Each screen maintains its own history:
- Every new media item is appended to the screen's history array
- The history index tracks the current position
- The Back button decrements the index (replaying a previous item)
- The Skip/Next button either moves forward in history or fetches a new item from the pool
- This allows you to revisit past media for any individual screen without affecting other screens
Beat Meter
The beat meter appears as a vertical component fixed to the right side of the screen (vertically centered). It is only visible when enabled in the configuration.
Visual Component
The beat meter consists of:
- A vertical track (thin bar)
- An animated dot that bounces up and down at the current BPM rate
- A mute/unmute button at the bottom
Sound
When sound is enabled, a short 440 Hz sine wave beep (0.1 seconds, low volume) plays on each beat. The beep is generated using the Web Audio API (AudioContext, OscillatorNode).
You can toggle the sound directly from the beat meter component during playback by clicking the speaker icon button.
BPM Progression Algorithm
The beat meter follows a sophisticated progression over time:
Phase 1: Warm-Up (0–30 seconds)
The BPM is fixed at the minimum value from your configured range.
Phase 2: Slow Build (30 seconds – 10 minutes)
The BPM varies between the minimum and the midpoint of your range. Changes happen every ~30 seconds, moving in steps of 20 BPM (up or down) within the slow-to-mid range.
Phase 3: Event (at 10 minutes)
A special event is triggered:
- 10 seconds at maximum BPM — full intensity
- 10 seconds at 0 BPM — complete rest (animation stops)
- 30 seconds of cooldown — slow BPM in the lower range
This event repeats every 10 minutes after the initial trigger (at 10 min, 20 min, 30 min, etc.).
Phase 4: Full Range (10–15 minutes)
After the event cooldown, the BPM uses the full range from minimum to maximum, changing every ~30 seconds in steps of 20 BPM.
Phase 5: Escalation (after 15 minutes)
The full range is used permanently. Additionally, after 20 minutes, the effective minimum BPM increases by 20 BPM for every additional minute, gradually pushing the floor higher and higher.
Ending a Session
Click the "End Session" button in the top bar to finish the session. When you end:
- All timers are stopped
- A final stats snapshot is taken (elapsed time, paused time, media counts, skip count, favorites)
- The
sessionEndedflag is set - You are redirected to the Session Statistics page
There is no confirmation dialog. Clicking "End Session" immediately ends the session and navigates away.
Session Guard
If you try to access the player page directly (e.g., by typing /player in the URL) without an active session, you will be automatically redirected back to the configuration page. The guard checks for:
- An active session flag
- A non-empty media pool
- At least one current media item
Next: Learn about the post-session statistics in the Session Statistics guide.