Winamp.js - It really rips off the llama's ass

commit f5c0dca37d03bd69a826cd0236385b2b875686c9 Author: Jordan Eldredge Date: Mon Nov 3 18:51:47 2014 -0800 Initial commit diff --git a/README.md b/README.md new file mode 100755 index 00000000..6ee2f5ac --- /dev/null +++ b/README.md @@ -0,0 +1,61 @@ +# Winamp.js + +A reimplementation of Winamp 2.x in jQuery and css. We use the actual skin +assets so it *should* be compatible with other themes. + +It comes preloaded with one track, but you can click to "eject" button to +select your own mp3 file. + +Looks the most polished in Chrome but works fine in modern versions of Safari +and Firefox. Only tested on OS X. + +## TODO + +- Investigate real space text +- Blog post +- Test on IE 10 +- Handle "working" icon +- Minimized "shade" view +- Better presentation around it +- Test other themes +- Tool for selecting a theme + - Maybe http://gildas-lormeau.github.io/zip.js/demos/demo2.html +- Control loading state so it's not visible until it's loaded +- Marquee effect when the title is too long +- Check native app for behavior + - When you load a track, do we auto-play? Do we update the time? + - What does the scrubber do when we fastforward + - Does it pause when we scrub? + - What does the scrubber do when we get to the end of the file? + - What does the top left button do? + - What are the visualizer options? + - What is the line graph version? + - What is the bar graph version? + - What do the clutter bar letters do? + +## Someday Maybe + +- Playlist window +- Visualizer? (http://w-labs.at/experiments/audioviz/) +- Actually read header info +- Actually get kbps and khz +- Actually get streo/mono +- Drag and drop file selection +- Make the window draggable +- Responsive css so it looks reasonable on my phone + +## Currently Impossible + +- Equalizer and balance? + +## Tested in modern versions of + +- Chrome (OS X, Ubuntu) - Perfect +- Firefox (OS X) - Perfect +- Safari (OS X), Chrome & Safari (iOS) - Small glitch with the position handle + +## Thanks to + +- [skinspecs.pdf](http://members.xoom.it/skinart/tutorial/skinspecs..pdf) +- After I started, I found someone else who did the same thing in 2002(!). + Doesn't seem to work play in my modern browsers. http://forums.winamp.com/showthread.php?threadid=91850 diff --git a/index.html b/index.html new file mode 100755 index 00000000..c9bc4b83 --- /dev/null +++ b/index.html @@ -0,0 +1,63 @@ + + + + Winamp.js - It really rips off the llama's ass + + + +

+ + +

+ +

+ + + + diff --git a/skins/default/AVS.BMP b/skins/default/AVS.BMP new file mode 100755 index 00000000..1dc2473a Binary files /dev/null and b/skins/default/AVS.BMP differ diff --git a/skins/default/BALANCE.BMP b/skins/default/BALANCE.BMP new file mode 100755 index 00000000..3ce036e9 Binary files /dev/null and b/skins/default/BALANCE.BMP differ diff --git a/skins/default/CBUTTONS.BMP b/skins/default/CBUTTONS.BMP new file mode 100755 index 00000000..5abf0d4b Binary files /dev/null and b/skins/default/CBUTTONS.BMP differ diff --git a/skins/default/CLOSE.CUR b/skins/default/CLOSE.CUR new file mode 100755 index 00000000..5fef131b Binary files /dev/null and b/skins/default/CLOSE.CUR differ diff --git a/skins/default/EQCLOSE.CUR b/skins/default/EQCLOSE.CUR new file mode 100755 index 00000000..5fef131b Binary files /dev/null and b/skins/default/EQCLOSE.CUR differ diff --git a/skins/default/EQMAIN.BMP b/skins/default/EQMAIN.BMP new file mode 100755 index 00000000..513302dc Binary files /dev/null and b/skins/default/EQMAIN.BMP differ diff --git a/skins/default/EQNORMAL.CUR b/skins/default/EQNORMAL.CUR new file mode 100755 index 00000000..692447c3 Binary files /dev/null and b/skins/default/EQNORMAL.CUR differ diff --git a/skins/default/EQSLID.CUR b/skins/default/EQSLID.CUR new file mode 100755 index 00000000..d86a9b8e Binary files /dev/null and b/skins/default/EQSLID.CUR differ diff --git a/skins/default/EQTITLE.CUR b/skins/default/EQTITLE.CUR new file mode 100755 index 00000000..f33a03d3 Binary files /dev/null and b/skins/default/EQTITLE.CUR differ diff --git a/skins/default/EQ_EX.BMP b/skins/default/EQ_EX.BMP new file mode 100755 index 00000000..42b4605e Binary files /dev/null and b/skins/default/EQ_EX.BMP differ diff --git a/skins/default/MAIN.BMP b/skins/default/MAIN.BMP new file mode 100755 index 00000000..9d8a58a4 Binary files /dev/null and b/skins/default/MAIN.BMP differ diff --git a/skins/default/MAINMENU.CUR b/skins/default/MAINMENU.CUR new file mode 100755 index 00000000..692447c3 Binary files /dev/null and b/skins/default/MAINMENU.CUR differ diff --git a/skins/default/MB.BMP b/skins/default/MB.BMP new file mode 100755 index 00000000..62d3a2f0 Binary files /dev/null and b/skins/default/MB.BMP differ diff --git a/skins/default/MIN.CUR b/skins/default/MIN.CUR new file mode 100755 index 00000000..ac55955c Binary files /dev/null and b/skins/default/MIN.CUR differ diff --git a/skins/default/MONOSTER.BMP b/skins/default/MONOSTER.BMP new file mode 100755 index 00000000..c9f500ab Binary files /dev/null and b/skins/default/MONOSTER.BMP differ diff --git a/skins/default/NORMAL.CUR b/skins/default/NORMAL.CUR new file mode 100755 index 00000000..692447c3 Binary files /dev/null and b/skins/default/NORMAL.CUR differ diff --git a/skins/default/NUMBERS.BMP b/skins/default/NUMBERS.BMP new file mode 100755 index 00000000..3e5df250 Binary files /dev/null and b/skins/default/NUMBERS.BMP differ diff --git a/skins/default/PCLOSE.CUR b/skins/default/PCLOSE.CUR new file mode 100755 index 00000000..5fef131b Binary files /dev/null and b/skins/default/PCLOSE.CUR differ diff --git a/skins/default/PLAYPAUS.BMP b/skins/default/PLAYPAUS.BMP new file mode 100755 index 00000000..3d697050 Binary files /dev/null and b/skins/default/PLAYPAUS.BMP differ diff --git a/skins/default/PLEDIT.BMP b/skins/default/PLEDIT.BMP new file mode 100755 index 00000000..f739475c Binary files /dev/null and b/skins/default/PLEDIT.BMP differ diff --git a/skins/default/PLEDIT.TXT b/skins/default/PLEDIT.TXT new file mode 100755 index 00000000..a6120155 --- /dev/null +++ b/skins/default/PLEDIT.TXT @@ -0,0 +1,6 @@ +[Text] +Normal=#00FF00 +Current=#FFFFFF +NormalBG=#000000 +SelectedBG=#0000FF +Font=Arial diff --git a/skins/default/PNORMAL.CUR b/skins/default/PNORMAL.CUR new file mode 100755 index 00000000..692447c3 Binary files /dev/null and b/skins/default/PNORMAL.CUR differ diff --git a/skins/default/POSBAR.BMP b/skins/default/POSBAR.BMP new file mode 100755 index 00000000..be84d5c5 Binary files /dev/null and b/skins/default/POSBAR.BMP differ diff --git a/skins/default/POSBAR.CUR b/skins/default/POSBAR.CUR new file mode 100755 index 00000000..e55759f1 Binary files /dev/null and b/skins/default/POSBAR.CUR differ diff --git a/skins/default/PSIZE.CUR b/skins/default/PSIZE.CUR new file mode 100755 index 00000000..107a4636 Binary files /dev/null and b/skins/default/PSIZE.CUR differ diff --git a/skins/default/PTBAR.CUR b/skins/default/PTBAR.CUR new file mode 100755 index 00000000..f33a03d3 Binary files /dev/null and b/skins/default/PTBAR.CUR differ diff --git a/skins/default/PVSCROLL.CUR b/skins/default/PVSCROLL.CUR new file mode 100755 index 00000000..d86a9b8e Binary files /dev/null and b/skins/default/PVSCROLL.CUR differ diff --git a/skins/default/PWINBUT.CUR b/skins/default/PWINBUT.CUR new file mode 100755 index 00000000..692447c3 Binary files /dev/null and b/skins/default/PWINBUT.CUR differ diff --git a/skins/default/PWSNORM.CUR b/skins/default/PWSNORM.CUR new file mode 100755 index 00000000..692447c3 Binary files /dev/null and b/skins/default/PWSNORM.CUR differ diff --git a/skins/default/PWSSIZE.CUR b/skins/default/PWSSIZE.CUR new file mode 100755 index 00000000..e55759f1 Binary files /dev/null and b/skins/default/PWSSIZE.CUR differ diff --git a/skins/default/REGION.TXT b/skins/default/REGION.TXT new file mode 100755 index 00000000..b08c2299 --- /dev/null +++ b/skins/default/REGION.TXT @@ -0,0 +1,105 @@ +; I stole this from the Complex skin, cause hey I thought it was cool :) +; (and cause I'm too lazy to document it myself. :) +; The original author is Adam Kennedy +; +; Hope you don't mind Adam :) +; +; +; -Justin +; +; +; P.S. you can use the section names [WindowShade] and [Equalizer] +; for obvious purposes =) +; +; +; REGION.TXT STRUCTURE FOR DEFINING SKIN MASKS +; +;The region information comes without any supporting documentation +;so I thought I might as well make some. +; +;The region.txt in WinAmp 1.92 allows us to some interesting things with transparencies +;But how does it work? +; +;Well, basically, it lets you define a set of polygons. Anything inside a polygon is drawn. Anything not in a polygon is not drawn. Simple heh? +;For how to define it have a look below at the first block. Un-comment it now. Don't worry about commenting the actual one lower down, if WinAmp finds multiple definitions, it only does the first and ignores the rest +; +;How to make a mask +;1. Type [Normal]. Real simple that one. (My guess is it is just for forward compatibility) +;2. Just type the NumPoints= and leave the number blank, we'll fill it in later +;3. OK, now for the fun part. +; The co-ordinates you should type in are the OUTSIDE pixel co-ordinates in x,y format. +; Start at the top lefthand corner and work your way CLOCKWISE around you polygon. +; Now WinAmp ONLY accepts the PointList as one line of comma seperated variables. +; You can use spaces, but DONT GO ONTO A NEW LINE. Clear? Good. :) +; One last thing, don't type the first position again at the end, WinAmp joins them. +; Putting a space between each pair is simply common sense, right? +;4. Once your done, count the number of co-ords, and fill in that number for NumPoints. +; +;Oh, as a side note, the x variables go from 0 to 275, and the y from 0 to 116. +;So if you look at the first example you can see I've gone across the second top line, gone down a bit, ducked in one pixel, gone down to the bottom, and across and back up the other side, putting another ledge on the other side. + +;This does the outside border, and chops some bits out on the top and edges +;[Normal] +;NumPoints=8 ;Do this LAST! +;PointList=0,1, 275,1, 275,14, 274,14, 274,115, 1,115, 1,14, 0,14 + +;Cool heh? Very subtle effect. Now lets try a more complex one, with multiple polygons +;For your first hard(ish) mask, I suggest defining each element as a seperate mask. +;It makes them a bit easier to think about. + +;First, lets define an area that JUST does the titlebar. +;[Normal] +;NumPoints=4 +;PointList=0,1, 275,1, 275,14, 0,14 + +;Simple as can be :) +;Go ahead, uncomment it and have a look. Just remember to recomment everything above it +;Doing your areas one at a time does speed the process up a bit + +;Now lets define JUST the area sort of inside the outer ring +;[Normal] +;NumPoints = 4 +;PointList = 3,15, 272,15, 272,113, 3,113 + +;Right, so say we want a mask that has, the titlebar AND the main area. +;We just add them together +; [Normal] +; NumPoints = 4, 4 ;Make sure to get the order right(although it doesnt matter here =P ) +; PointList = 0,1, 275,1, 275,14, 0,14, 3,15, 272,15, 272,113, 3,113 + +;Dont forget to add that extra comma after the first set. +; Having that bigger gap that lets you "keep it in your head" easier, it's a good idea + +;OK, now lets try something tricky. We are going to make a mask for just one green line around the outside of the skin +;This introduces the other "big thing" with masks. Have a look at the first three co-ordinates below. You can see the first two moves we make are to go one to the side and then go down to the bottom. Looking at the last co-ordinate you can see we will come back up at the end, making a line two wide, right? +;WRONG!! Here comes the big important phrase. +;IF YOU ARNT FOLLOWING THE OUTSIDE EDGE, YOUR CO-ORDINATES MARK TRANSPARENT SPACE LIMITS +;That's right. Because I don't make a square, because I have to turn "inside" the box, I am only marking space, and what I end up with is a mask with one green line. +;WARNING: Leave your skins dialog open when you do this one. :) +;[Normal] +;NumPoints = 8 +;PointList = 1,14, 2,14, 2,114, 273,114, 273,14, 274,14, 274,115, 1,115 + +;OK, as the final touch lets add lets the border we just made to the other two. +;You should be able to work this out on your own +;[Normal] +;NumPoints = 4, 4, 8 +;PointList = 0,1, 275,1, 275,14, 0,14, 3,15, 272,15, 272,113, 3,113, 1,14, 2,14, 2,114, 273,114, 273,14, 274,14, 274,115, 1,115 + +;hmm... that still looks a bit tacky down the bottom right +;So I'm going to modify it a bit +;See if you can work out what I've had to alter just by looking at the display of it +;[Normal] +;NumPoints = 4, 4, 8 +;PointList = 0,1, 275,1, 275,14, 0,14, 3,15, 272,15, 272,80, 3,80, 1,14, 2,14, 2,81, 273,81, 273,14, 274,14, 274,115, 1,115 + + +; Justin's whacked trans skin :) in one, big lame messy line +; [Normal] +; NumPoints=20,4,4,4,8,4,4,6,6,4,4,4,4 +; PointList=0,0,19,0,19,11,114,11,114,0,156,0,156,11,243,11,243,0,275,0,275,13,266,13,266,22,264,22,264,13,111,13,111,22,109,22,109,13,0,13, 109,22,266,22,266,36,109,36, 16,88,130,88,130,105,16,105, 136,89,157,89,157,104,136,104, 22,13,22,62,102,62,102,13,100,13,100,24,24,24,24,13, 0,0,275,0,275,3,0,3, 16,72,264,72,264,81,16,81, 0,13,0,78,16,78,16,75,4,75,4,13, 275,13,275,78,264,78,264,75,272,75,272,13, 14,78,16,78,16,105,14,105, 130,81,132,81,132,105,130,105, 146,81,146,89,148,89,148,81, 130,96,136,96,136,98,130,98 + +;THE END +; +;Post-Script +;The other good thing about doing your mask in bits and pieces like this is that can make multiple versions so you can change as your whims change diff --git a/skins/default/SHUFREP.BMP b/skins/default/SHUFREP.BMP new file mode 100755 index 00000000..a1afdc10 Binary files /dev/null and b/skins/default/SHUFREP.BMP differ diff --git a/skins/default/SONGNAME.CUR b/skins/default/SONGNAME.CUR new file mode 100755 index 00000000..e55759f1 Binary files /dev/null and b/skins/default/SONGNAME.CUR differ diff --git a/skins/default/TEXT.BMP b/skins/default/TEXT.BMP new file mode 100755 index 00000000..bc17f4c8 Binary files /dev/null and b/skins/default/TEXT.BMP differ diff --git a/skins/default/TITLEBAR.BMP b/skins/default/TITLEBAR.BMP new file mode 100755 index 00000000..190ff69b Binary files /dev/null and b/skins/default/TITLEBAR.BMP differ diff --git a/skins/default/TITLEBAR.CUR b/skins/default/TITLEBAR.CUR new file mode 100755 index 00000000..f33a03d3 Binary files /dev/null and b/skins/default/TITLEBAR.CUR differ diff --git a/skins/default/VISCOLOR.TXT b/skins/default/VISCOLOR.TXT new file mode 100755 index 00000000..5871ad89 --- /dev/null +++ b/skins/default/VISCOLOR.TXT @@ -0,0 +1,24 @@ +0,0,0, // color 0 = black +24,33,41, // color 1 = grey for dots +239,49,16, // color 2 = top of spec +206,41,16, // 3 +214,90,0, // 4 +214,102,0, // 5 +214,115,0, // 6 +198,123,8, // 7 +222,165,24, // 8 +214,181,33, // 9 +189,222,41, // 10 +148,222,33, // 11 +41,206,16, // 12 +50,190,16, // 13 +57,181,16, // 14 +49,156,8, // 15 +41,148,0, // 16 +24,132,8, // 17 = bottom of spec +255,255,255, // 18 = osc 1 +214,214,222, // 19 = osc 2 (slightly dimmer) +181,189,189, // 20 = osc 3 +160,170,175, // 21 = osc 4 +148,156,165, // 22 = osc 4 +150, 150, 150, // 23 = analyzer peak dots diff --git a/skins/default/VOLBAL.CUR b/skins/default/VOLBAL.CUR new file mode 100755 index 00000000..e55759f1 Binary files /dev/null and b/skins/default/VOLBAL.CUR differ diff --git a/skins/default/VOLBAR.CUR b/skins/default/VOLBAR.CUR new file mode 100755 index 00000000..e55759f1 Binary files /dev/null and b/skins/default/VOLBAR.CUR differ diff --git a/skins/default/VOLUME.BMP b/skins/default/VOLUME.BMP new file mode 100755 index 00000000..deb7e924 Binary files /dev/null and b/skins/default/VOLUME.BMP differ diff --git a/skins/default/WINBUT.CUR b/skins/default/WINBUT.CUR new file mode 100755 index 00000000..692447c3 Binary files /dev/null and b/skins/default/WINBUT.CUR differ diff --git a/skins/default/WSCLOSE.CUR b/skins/default/WSCLOSE.CUR new file mode 100755 index 00000000..5fef131b Binary files /dev/null and b/skins/default/WSCLOSE.CUR differ diff --git a/skins/default/WSMIN.CUR b/skins/default/WSMIN.CUR new file mode 100755 index 00000000..692447c3 Binary files /dev/null and b/skins/default/WSMIN.CUR differ diff --git a/skins/default/WSNORMAL.CUR b/skins/default/WSNORMAL.CUR new file mode 100755 index 00000000..692447c3 Binary files /dev/null and b/skins/default/WSNORMAL.CUR differ diff --git a/skins/default/WSPOSBAR.CUR b/skins/default/WSPOSBAR.CUR new file mode 100755 index 00000000..e55759f1 Binary files /dev/null and b/skins/default/WSPOSBAR.CUR differ diff --git a/skins/default/WSWINBUT.CUR b/skins/default/WSWINBUT.CUR new file mode 100755 index 00000000..692447c3 Binary files /dev/null and b/skins/default/WSWINBUT.CUR differ diff --git a/winamp.css b/winamp.css new file mode 100755 index 00000000..5479cbca --- /dev/null +++ b/winamp.css @@ -0,0 +1,461 @@ +/* Range input css reset */ +input[type=range]{ -webkit-appearance: none; margin: 0; padding: 0; background: none; } +input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; border: none; border-radius: 0; background: none; } +input[type=range]::-moz-range-thumb { border: none; border-radius: 0; background: none; } +input[type=range]::-moz-range-track { border: none; background: none; } +input[type=range]:focus { outline: none; } +input[type=range]::-moz-focus-outer { border: 0; } + +#winamp { + position: relative; + background-image: url('skins/default/MAIN.BMP'); + height: 116px; + width: 275px; + cursor:url('skins/default/MAINMENU.CUR'), auto; +} + +.actions { + position: absolute; + top: 88px; + left: 16px; + height: 18px; + width: 114px; +} + +#title-bar { + position: absolute; + top: 0; + left: 0; + height: 14px; + width: 275px; + background-image: url('skins/default/TITLEBAR.BMP'); + background-position: -27px -14px; + cursor:url('skins/default/TITLEBAR.CUR'), auto; +} + +#title-bar.selected { + background-position: -27px 0px; +} + +.llama #title-bar { + background-position: -27px -61px; +} + +.llama #title-bar.selected { + background-position: -27px -57px; +} + +#title-bar div { + position: absolute; + height: 9px; + width: 9px; + top: 3px; + cursor:url('skins/default/MAINMENU.CUR'), auto; +} + +#title-bar #option { + left: 6px; + background-image: url('skins/default/TITLEBAR.BMP'); +} +#title-bar #option:active { + background-position: 0 -9px; +} + +#title-bar #minimize { + left: 244px; + background-image: url('skins/default/TITLEBAR.BMP'); + background-position: -9px 0; +} +#title-bar #minimize:active { + background-position: -9px -9px; +} + +#title-bar #shade { + left: 254px; + background-image: url('skins/default/TITLEBAR.BMP'); + background-position: 0px -18px; +} +#title-bar #shade:active { + background-position: -9px -18px; +} + +#title-bar #close { + left: 264px; + background-image: url('skins/default/TITLEBAR.BMP'); + background-position: -18px 0px; + cursor:url('skins/default/CLOSE.CUR'), auto; +} +#title-bar #close:active { + background-position: -18px -9px; +} + +.status #clutter-bar { + position: absolute; + top: 22px; + left: 10px; + height: 43px; + width: 8px; + background-image: url('skins/default/TITLEBAR.BMP'); + background-position: -304px 0; +} + +.status #clutter-bar.disabled { + background-position: -312px 0; +} + +.status #play-pause { + position: absolute; + top: 28px; + left: 24px; + height: 9px; + width: 9px; + background-image: url('skins/default/PLAYPAUS.BMP'); +} + +.status #play-pause.play #work-indicator { + position: absolute; + top: 0px; + left: 0px; + height: 9px; + width: 3px; + background-image: url('skins/default/PLAYPAUS.BMP'); + background-position: -39px 0; +} +.status #play-pause.play #work-indicator.selected { + background-position: -36px 0; +} + +.status #play-pause.play { } +.status #play-pause.pause { background-position: -9px 0; } +.status #play-pause.stop { background-position: -18px 0; } +.status #time { + position: absolute; + left: 48px; + left: 40px; + top: 26px; + /* Just to make it clickable */ + height: 13px; + width: 59px; +} +.status #time #minus-sign { + position: absolute; + top: 6px; + background-color: red; + width: 5px; + height: 1px; + background-image: url('skins/default/NUMBERS.BMP'); + background-position: -9px -6px; +} +.status #time.countdown #minus-sign { + background-position: -20px -6px; +} + +.status #time #minute-first-digit { + position: absolute; + left: 8px; + height: 13px; + width: 9px; +} +.status #time #minute-second-digit { + position: absolute; + left: 20px; + height: 13px; + width: 9px; +} +.status #time #second-first-digit { + position: absolute; + left: 38px; + height: 13px; + width: 9px; +} +.status #time #second-second-digit { + position: absolute; + left: 50px; + height: 13px; + width: 9px; +} + +.media-info #song-title { + position: absolute; + left: 112px; + top: 27px; + width: 152px; + height: 6px; + overflow: hidden; +} + +.media-info #kbps { + position: absolute; + left: 111px; + top: 43px; + width: 15px; + height: 6px; + overflow: hidden; +} + +.media-info #khz { + position: absolute; + left: 156px; + top: 43px; + width: 10px; + height: 6px; + overflow: hidden; +} + +.media-info .mono-stereo { + position: absolute; + left: 212px; + top: 41px; + width: 57px; + height: 12px; +} + +.media-info .mono-stereo div { + position: absolute; + height: 12px; + background-image: url('skins/default/MONOSTER.BMP'); +} + +.media-info .mono-stereo #mono { + width: 29px; + background-position: -29px -12px; +} +.media-info .mono-stereo #mono.selected { + background-position: -29px 0; +} + +.media-info .mono-stereo #stereo { + left: 27px; + width: 29px; + background-position: 0 -12px; +} +.media-info .mono-stereo #stereo.selected { + background-position: 0 0; +} + +#volume { + position: absolute; + left: 107px; + top: 57px; + height: 13px; + width: 68px; + background-image: url('skins/default/VOLUME.BMP'); + background-position: 0 0; +} +#volume::-webkit-slider-thumb { + margin-top: 1px; + height: 11px; + width: 14px; + background-image: url('skins/default/VOLUME.BMP'); + background-position: -15px -422px; + cursor:url('skins/default/VOLBAR.CUR'), auto; +} +#volume::-moz-range-thumb { + margin-top: 1px; + height: 11px; + width: 14px; + background-image: url('skins/default/VOLUME.BMP'); + background-position: -15px -422px; + cursor:url('skins/default/VOLBAR.CUR'), auto; +} +#volume:active::-webkit-slider-thumb { + background-position: 0 -422px; +} +#volume:active::-moz-range-thumb { + background-position: 0 -422px; +} + +#balance { + position: absolute; + left: 177px; + top: 57px; + height: 13px; + width: 38px; + background-image: url('skins/default/BALANCE.BMP'); + background-position: -9px 0; +} + +#balance::-webkit-slider-thumb { + top: 1px; + height: 11px; + width: 14px; + background-image: url('skins/default/VOLUME.BMP'); + background-position: -15px -422px; + cursor:url('skins/default/POSBAR.CUR'), auto; +} +#balance::-moz-range-thumb { + top: 1px; + height: 11px; + width: 14px; + background-image: url('skins/default/VOLUME.BMP'); + background-position: -15px -422px; + cursor:url('skins/default/POSBAR.CUR'), auto; +} + +#balance:active::-webkit-slider-thumb { + background-position: 0 -422px; +} +#balance:active::-moz-range-thumb { + background-position: 0 -422px; +} + +.windows { + position: absolute; + left: 219px; + top: 58px; + width: 46px; + height: 13px; +} + +.windows div { + position: absolute; + width: 23px; + height: 13px; + background-image: url('skins/default/SHUFREP.BMP'); +} + +.windows #equalizer { + left: 0; + background-position: 0 -61px; +} +.windows #equalizer:active { + background-position: -46px -61px; +} + +.windows #playlist { + left: 23px; + background-position: -23px -61px; +} +.windows #playlist:active { + background-position: -69px -61px; +} + +#position { + position: absolute; + left: 16px; + top: 72px; + width: 248px; + height: 10px; + background-image: url('skins/default/POSBAR.BMP'); +} + +#position::-webkit-slider-thumb { + height: 10px; + width: 29px; + background-position: -248px 0; + background-image: url('skins/default/POSBAR.BMP'); + cursor:url('skins/default/POSBAR.CUR'), auto; +} +#position::-moz-range-thumb { + height: 10px; + width: 29px; + background-position: -248px 0; + background-image: url('skins/default/POSBAR.BMP'); + cursor:url('skins/default/POSBAR.CUR'), auto; +} +#position:active::-webkit-slider-thumb { + background-position: -278px 0; +} +#position:active::-moz-range-thumb { + background-position: -278px 0; +} + +.actions div { + background-image: url('skins/default/CBUTTONS.BMP'); + height: 18px; + width: 23px; + float: left; +} + +.actions #previous { background-position: 0 0; } +.actions #previous:active { background-position: 0 -18px; } +.actions #play { background-position: -23px 0; } +.actions #play:active { background-position: -23px -18px; } +.actions #pause { background-position: -46px 0; } +.actions #pause:active { background-position: -46px -18px; } +.actions #stop { background-position: -69px 0; } +.actions #stop:active { background-position: -69px -18px; } +.actions #next { background-position: -92px 0; width: 22px; } +.actions #next:active { background-position: -92px -18px; } + +#eject { + position: absolute; + top: 88px; + left: 136px; + background-image: url('skins/default/CBUTTONS.BMP'); + height: 16px; + width: 22px; +} +#eject { background-position: -114px 0; } +#eject:active { background-position: -114px -16px; } + +.shuffle-repeat { + position: absolute; + top: 89px; + left: 164px; + width: 74px; +} + +.shuffle-repeat div { + position: absolute; + height: 15px; + background-image: url('skins/default/SHUFREP.BMP'); +} + +.shuffle-repeat #shuffle { + width: 47px; + background-position: -28px 0; +} +.shuffle-repeat #shuffle:active { + background-position: -28px -15px; +} + +.shuffle-repeat #shuffle.selected { + background-position: -28px -30px; +} +.shuffle-repeat #shuffle.selected:active { + background-position: -28px -45px; +} + +.shuffle-repeat #repeat { + left: 47px; + width: 28px; +} +.shuffle-repeat #repeat:active { + background-position: 0 -15px; +} + +.shuffle-repeat #repeat.selected { + background-position: 0 -30px; +} +.shuffle-repeat #repeat.selected:active { + background-position: 0 -45px; +} + +#about { + position: absolute; + top: 91px; + left: 253px; + height: 15px; + width: 13px; +} + +.character { + display: block; + float: left; /* Safari does not do inline-block well */ + width: 5px; + height: 6px; + background-image: url('skins/default/TEXT.BMP'); + text-indent: -9999px; + +} + +.digit { + display: inline-block; + width: 9px; + height: 13px; + background-image: url('skins/default/NUMBERS.BMP'); + text-indent: -9999px; +} + +#file-input { display: none; } diff --git a/winamp.js b/winamp.js new file mode 100755 index 00000000..61ca29e5 --- /dev/null +++ b/winamp.js @@ -0,0 +1,309 @@ +/* Helpful wrapper for the native