Skip to content

Replace Working Hours with Retro Music Player Card - #22

Merged
Chintanpatel24 merged 1 commit into
mainfrom
feature/music-player-card-18373486311561233713
Jun 10, 2026
Merged

Replace Working Hours with Retro Music Player Card#22
Chintanpatel24 merged 1 commit into
mainfrom
feature/music-player-card-18373486311561233713

Conversation

@Chintanpatel24

Copy link
Copy Markdown
Owner

This change replaces the "Working Hours" card with a new "Music Player" card. The new card allows users to showcase what they are listening to on their GitHub profile using various retro-styled player interfaces.

Key features:

  • Four styles: 90s (Winamp style), ipod, cassette, and boombox.
  • Interactive elements: Links to Spotify tracks and animated visuals.
  • Customization: Supports title, artist, track_id, and gif_url parameters.
  • No-auth: Works purely via URL parameters and SVG/CSS animations.

Documentation and the landing page have been updated to include usage examples for the new endpoint.


PR created automatically by Jules for task 18373486311561233713 started by @Chintanpatel24

- Removed `api/working-hours.js` and `src/svg-working-hours.js`
- Added `api/music.js` and `src/svg-music.js`
- Implemented four retro player styles: Winamp (90s), iPod, Cassette, and Boombox
- Added CSS animations for equalizers and spinning reels
- Supported custom song metadata (title, artist), Spotify links, and GIF overlays
- Updated README and landing page with documentation and examples

Co-authored-by: Chintanpatel24 <216989679+Chintanpatel24@users.noreply.github.com>
@google-labs-jules

Copy link
Copy Markdown
Contributor

👋 Jules, reporting for duty! I'm here to lend a hand with this pull request.

When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down.

I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job!

For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with @jules. You can find this option in the Pull Request section of your global Jules UI settings. You can always switch back!

New to Jules? Learn more at jules.google/docs.


For security, I will only act on instructions from the user who triggered this task.

Copilot AI review requested due to automatic review settings June 10, 2026 08:01
@vercel

vercel Bot commented Jun 10, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
gitlyy Ready Ready Preview, Comment Jun 10, 2026 8:02am

@Chintanpatel24
Chintanpatel24 merged commit 5a9b38a into main Jun 10, 2026
6 checks passed

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR replaces the deprecated “Working Hours” card/endpoint with a new retro-themed “Music Player” card that is configured entirely via URL parameters and rendered as an SVG.

Changes:

  • Removed the /api/working-hours endpoint and its SVG renderer.
  • Added a new /api/music endpoint and src/svg-music.js renderer supporting 90s, ipod, cassette, and boombox styles.
  • Updated documentation and the landing page to showcase and link to the new music card.

Reviewed changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 3 comments.

Show a summary per file
File Description
src/svg-working-hours.js Removed the Working Hours SVG generator.
api/working-hours.js Removed the Working Hours API endpoint implementation.
src/svg-music.js Added Music Player SVG generator with multiple retro UI styles and optional GIF support.
api/music.js Added Music Player API endpoint that applies theme overrides and returns the generated SVG.
README.md Replaced Working Hours docs with Music Player usage and parameters.
public/index.html Updated landing page examples to display the new music card in multiple styles.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment thread api/music.js
Comment on lines +33 to +45
try {
let colors = getTheme(theme);
colors = applyColorOverrides(colors, { bg_color, title_color, text_color, border_color });

const svg = generateMusicSVG({
player: player || "90s",
title: title || "Not Playing",
artist: artist || "Unknown Artist",
track_id: track_id || "",
gif_url: gif_url || "",
colors,
hideBorder: hide_border === "true",
});
Comment thread src/svg-music.js
Comment on lines +19 to +22
const accentColor = (colors && colors.accent_color) || "58a6ff";
const bgColor = (colors && colors.bg_color) || "0d1117";
const titleColor = (colors && colors.title_color) || accentColor;
const textColor = (colors && colors.text_color) || "8b949e";
Comment thread README.md
Comment on lines +168 to +172
### 9. Music Player Card

- Calculates actual coding hours by analyzing commit timestamp gaps.

<img src="images/13.png">

**Formula:** `TWt = Σ (Ti+1 - Ti) for all i where (Ti+1 - Ti) < 5 hours`

Where:
- `TWt` = Total Working Time
- `Σ` = Sum of all
- `Ti` = Timestamp of commit i
- `Ti+1` = Timestamp of next commit
- **Threshold:** Only counts gaps < 5 hours (assumes longer gaps are breaks/sleep)
- A retro-style music player for your README.
- **Styles:** `90s` (Winamp), `ipod`, `cassette`, `boombox`.
- Supports custom song titles, artists, and Spotify track IDs.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants