mirror of
https://github.com/captbaritone/webamp.git
synced 2026-07-25 19:13:54 +00:00
Switch to a CSS solution to hiding meta info
This commit is contained in:
Jordan Eldredge
parent
3065748d8c
commit
e2be096441
3 changed files with 36 additions and 33 deletions
|
|
@ -6,7 +6,7 @@
|
|||
<link rel='stylesheet' type='text/css' href='winamp.css' />
|
||||
</head>
|
||||
<body>
|
||||
<div id='winamp'>
|
||||
<div id='winamp' class='stop'>
|
||||
<audio id='player'></audio>
|
||||
<div id='title-bar' class='selected'>
|
||||
<div id='option'></div>
|
||||
|
|
@ -23,7 +23,7 @@
|
|||
</div>
|
||||
<div class='status'>
|
||||
<div id='clutter-bar' class='disabled'></div>
|
||||
<div id='play-pause' class='stop'>
|
||||
<div id='play-pause'>
|
||||
<div id='work-indicator'></div>
|
||||
</div>
|
||||
<div id='time'>
|
||||
|
|
|
|||
40
winamp.css
40
winamp.css
|
|
@ -8,7 +8,6 @@ input[type=range]::-moz-focus-outer { border: 0; }
|
|||
a:focus { outline: none; }
|
||||
|
||||
#shade-time {
|
||||
display: none;
|
||||
cursor:url('cursors/MAINMENU.CUR'), auto;
|
||||
}
|
||||
|
||||
|
|
@ -133,7 +132,7 @@ a:focus { outline: none; }
|
|||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.status #play-pause.play #work-indicator {
|
||||
.play .status #play-pause #work-indicator {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
|
|
@ -142,15 +141,14 @@ a:focus { outline: none; }
|
|||
/* background-image: PLAYPAUS.BMP via Javascript */
|
||||
background-position: -36px 0;
|
||||
}
|
||||
.status #play-pause.play #work-indicator.selected {
|
||||
.play .status #play-pause #work-indicator.selected {
|
||||
background-position: -39px 0;
|
||||
}
|
||||
|
||||
.status #play-pause.play { }
|
||||
.status #play-pause.pause { background-position: -9px 0; }
|
||||
.status #play-pause.stop { background-position: -18px 0; }
|
||||
.play .status #play-pause { }
|
||||
.pause .status #play-pause { background-position: -9px 0; }
|
||||
.stop .status #play-pause { background-position: -18px 0; }
|
||||
.status #time {
|
||||
display:none;
|
||||
position: absolute;
|
||||
left: 48px;
|
||||
left: 40px;
|
||||
|
|
@ -159,6 +157,9 @@ a:focus { outline: none; }
|
|||
height: 13px;
|
||||
width: 59px;
|
||||
}
|
||||
|
||||
.stop .status #time { display:none; }
|
||||
|
||||
.status #time #minus-sign {
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
|
|
@ -219,7 +220,6 @@ a:focus { outline: none; }
|
|||
.setting-balance #balance-message { display: block; }
|
||||
|
||||
.media-info #kbps {
|
||||
display: none;
|
||||
position: absolute;
|
||||
left: 111px;
|
||||
top: 43px;
|
||||
|
|
@ -228,8 +228,9 @@ a:focus { outline: none; }
|
|||
overflow: hidden;
|
||||
}
|
||||
|
||||
.stop .media-info #kbps { display: none; }
|
||||
|
||||
.media-info #khz {
|
||||
display: none;
|
||||
position: absolute;
|
||||
left: 156px;
|
||||
top: 43px;
|
||||
|
|
@ -238,6 +239,8 @@ a:focus { outline: none; }
|
|||
overflow: hidden;
|
||||
}
|
||||
|
||||
.stop .media-info #khz { display: none; }
|
||||
|
||||
.media-info .mono-stereo {
|
||||
position: absolute;
|
||||
left: 212px;
|
||||
|
|
@ -246,6 +249,8 @@ a:focus { outline: none; }
|
|||
height: 12px;
|
||||
}
|
||||
|
||||
.stop .media-info .mono-stero { display: none; }
|
||||
|
||||
.media-info .mono-stereo div {
|
||||
position: absolute;
|
||||
height: 12px;
|
||||
|
|
@ -279,6 +284,7 @@ a:focus { outline: none; }
|
|||
background-position: 0 0;
|
||||
}
|
||||
#volume::-webkit-slider-thumb {
|
||||
display: block;
|
||||
margin-top: 1px;
|
||||
height: 11px;
|
||||
width: 14px;
|
||||
|
|
@ -367,7 +373,6 @@ a:focus { outline: none; }
|
|||
}
|
||||
|
||||
#position {
|
||||
display: none;
|
||||
position: absolute;
|
||||
left: 16px;
|
||||
top: 72px;
|
||||
|
|
@ -391,14 +396,19 @@ a:focus { outline: none; }
|
|||
-webkit-box-sizing: border-box;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#position::-moz-range-thumb {
|
||||
height: 10px;
|
||||
width: 29px;
|
||||
background-position: -248px 0;
|
||||
/* background-image: POSBAR.BMP via Javascript */
|
||||
background-repeat: no-repeat;
|
||||
cursor:url('cursors/POSBAR.CUR'), auto;
|
||||
}
|
||||
|
||||
/* For some reason, we can't use display: none here */
|
||||
.stop #position::-webkit-slider-thumb { visibility: hidden; }
|
||||
.stop #position::-moz-range-thumb { visibility: hidden; }
|
||||
|
||||
#position:active::-webkit-slider-thumb {
|
||||
background-position: -278px 0;
|
||||
}
|
||||
|
|
@ -606,12 +616,14 @@ a:focus { outline: none; }
|
|||
background-position: -20px -36px;
|
||||
/* background-image: TITLEBAR.BMP via Javascript */
|
||||
}
|
||||
|
||||
.shade #position::-moz-range-thumb {
|
||||
height: 7px;
|
||||
width: 3px;
|
||||
background-position: -20px -36px;
|
||||
/* background-image: TITLEBAR.BMP via Javascript */
|
||||
}
|
||||
|
||||
.shade #position.left::-webkit-slider-thumb {
|
||||
background-position: -17px -36px;
|
||||
}
|
||||
|
|
@ -625,6 +637,10 @@ a:focus { outline: none; }
|
|||
background-position: -23px -36px;
|
||||
}
|
||||
|
||||
#shade-time {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.shade #shade-time {
|
||||
display: block;
|
||||
position: absolute;
|
||||
|
|
@ -634,6 +650,8 @@ a:focus { outline: none; }
|
|||
width: 25px;
|
||||
}
|
||||
|
||||
.stop.shade #shade-time { display:none; }
|
||||
|
||||
.shade #shade-time .character {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
|
|
|||
25
winamp.js
25
winamp.js
|
|
@ -185,7 +185,6 @@ function Winamp () {
|
|||
});
|
||||
|
||||
this.media.addEventListener('ended', function() {
|
||||
self.hideMetaInfo();
|
||||
self.stopBlinkTime();
|
||||
self.setStatus('stop');
|
||||
});
|
||||
|
|
@ -218,7 +217,6 @@ function Winamp () {
|
|||
}
|
||||
|
||||
this.nodes.play.onclick = function() {
|
||||
self.showMetaInfo();
|
||||
self.stopBlinkTime();
|
||||
self.media.play();
|
||||
self.setStatus('play');
|
||||
|
|
@ -234,7 +232,6 @@ function Winamp () {
|
|||
self.media.stop();
|
||||
self.setStatus('stop');
|
||||
self.stopBlinkTime();
|
||||
self.hideMetaInfo();
|
||||
}
|
||||
|
||||
this.nodes.next.onclick = function() {
|
||||
|
|
@ -293,20 +290,6 @@ function Winamp () {
|
|||
}
|
||||
|
||||
/* Functions */
|
||||
this.showMetaInfo = function() {
|
||||
this.nodes.khz.style.display='block';
|
||||
this.nodes.kbps.style.display='block';
|
||||
this.nodes.position.style.display='block';
|
||||
this.nodes.time.style.display='block';
|
||||
};
|
||||
|
||||
this.hideMetaInfo = function() {
|
||||
this.nodes.khz.style.display='';
|
||||
this.nodes.kbps.style.display='';
|
||||
this.nodes.position.style.display='';
|
||||
this.nodes.time.style.display='';
|
||||
};
|
||||
|
||||
this.startBlinkTime = function(){
|
||||
self.nodes.time.classList.add('blink');
|
||||
self.nodes.shadeTime.classList.add('blink');
|
||||
|
|
@ -318,8 +301,11 @@ function Winamp () {
|
|||
|
||||
|
||||
this.setStatus = function(className) {
|
||||
self.nodes.playPause.removeAttribute("class");
|
||||
self.nodes.playPause.classList.add(className);
|
||||
var statusOptions = ['play', 'stop', 'pause'];
|
||||
for(var i = 0; i < statusOptions.length; i++) {
|
||||
self.nodes.winamp.classList.remove(statusOptions[i]);
|
||||
}
|
||||
self.nodes.winamp.classList.add(className);
|
||||
}
|
||||
|
||||
// From 0-100
|
||||
|
|
@ -438,7 +424,6 @@ function Winamp () {
|
|||
|
||||
this.startFile = function(file, fileName) {
|
||||
self.loadFile(file, fileName);
|
||||
self.showMetaInfo();
|
||||
self.media.play();
|
||||
self.setStatus('play');
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue