WMP-SVG

WMP-SVG is an attempt at recreating the graphics from Windows Media Player 11 and 12 using SVGs. WMP's original graphics were rasters, with SD and HD versions. The SVGs in this project were handwritten, using an image comparison slider (also handmade) to compare them with ripped rasters and online screenshots during editing, to get them as close to the originals as I could.

A JavaScript-based custom element also exists for using the SVGs on a web page. Try it out here. You can view the repo on GitHub.

Caveats

• The primary goal of this project was just the graphics, so the script only exists as a means to show them off; I didn't stress over trying to perfect it.
• Browsers may render certain parts of the UI incorrectly (i.e. you may see visible seams or occasional single-pixel misalignments) due to sub-pixel rounding issues that are impossible to reliably mitigate using CSS. A pure-SVG implementation (rather than using SVG-format assets within an HTML/CSS/JS implementation) would avoid these problems, but wouldn't be as flexible or feature-capable.
• When used with the default button layout and at 1x scale, the player must be at least 551px wide in order to avoid being cropped in its dark theme. When controls are overlaid or the non-dark theme is used, the player should be at least 500px wide.

Screenshots

Player at 2.5x scale (the HD original was 2x):

Remaining work

• The button to switch into and out of Now Playing view (i.e. the view wherein controls are overlaid on the playing media)
• In Library view (i.e. not Now Playing view), we're missing the glow effect that appears around the Play/Pause button on mouseover
• See also: `TODO.md`