diff --git a/index.html b/index.html index c82b7089..0400595d 100755 --- a/index.html +++ b/index.html @@ -50,9 +50,6 @@
-
-
-
@@ -95,6 +92,7 @@ + diff --git a/multi-display.js b/multi-display.js new file mode 100644 index 00000000..1472e7f9 --- /dev/null +++ b/multi-display.js @@ -0,0 +1,64 @@ +// Single line text display that can animate and hold multiple registers +MultiDisplay = { + node: null, // The DOM node of the display + registers: {}, + init: function(font, node) { + this.font = font; + this.node = node; + this._marqueeLoop(); + return this; + }, + addRegister: function(key) { + // Create element node + var register = document.createElement("div"); + register.style.display = 'none'; + + this.node.appendChild(register); + this.registers[key] = { + node: register, + text: '', + marquee: false + }; + }, + setRegisterText: function(register, text) { + // Set text of register + this.font.setNodeToString(this.registers[register].node, text); + }, + hideAllRegisters: function() { + for(var key in this.registers) { + this.registers[key].node.style.display = 'none'; + } + }, + showRegister: function(key) { + this.hideAllRegisters(); + // Show the one register + this.registers[key].node.style.display = 'block'; + }, + startRegisterMarquee: function(key) { + this.registers[key].marquee = true; + }, + pauseRegisterMarquee: function(key) { + this.registers[key].marquee = false; + }, + _marqueeLoop: function() { + var self = this; + setTimeout(function () { + for(var key in self.registers) { + // Check every register to see if it needs to be marqueed + if(self.registers[key].marquee) { + var text = self.registers[key].node.firstChild; + // Only scroll if the text is too long + if(text && text.childNodes.length > 30) { + var characterNode = text.firstChild; + text.removeChild(characterNode); + text.appendChild(characterNode); + } + } + } + self._marqueeLoop(); + }, 220); + } +} + + + diff --git a/winamp.css b/winamp.css index b8a4272e..ccf937e1 100755 --- a/winamp.css +++ b/winamp.css @@ -302,21 +302,6 @@ body { display: block; } -.setting-volume #song-title { display: none; } -.setting-volume #balance-message { display: none; } -.setting-volume #position-message { display: none; } -.setting-volume #volume-message { display: block; } - -.setting-balance #song-title { display: none; } -.setting-balance #volume-message { display: none; } -.setting-balance #position-message { display: none; } -.setting-balance #balance-message { display: block; } - -.setting-position #song-title { display: none; } -.setting-position #volume-message { display: none; } -.setting-position #balance-message { display: none; } -.setting-position #position-message { display: block; } - .media-info #kbps { position: absolute; left: 111px; diff --git a/winamp.js b/winamp.js index f02bcdb2..364f7582 100755 --- a/winamp.js +++ b/winamp.js @@ -38,6 +38,18 @@ function Winamp () { 'titleBar': document.getElementById('title-bar'), }; + this.textDisplay = MultiDisplay.init(Font, this.nodes.songTitle); + this.textDisplay.addRegister('songTitle'); + this.textDisplay.addRegister('position'); + this.textDisplay.addRegister('volume'); + this.textDisplay.addRegister('balance'); + this.textDisplay.addRegister('message'); // General purpose + + this.textDisplay.showRegister('songTitle'); + + this.textDisplay.startRegisterMarquee('songTitle'); + + // Make window dragable this.nodes.titleBar.addEventListener('mousedown',function(e){ if(e.target !== this) { @@ -199,11 +211,11 @@ function Winamp () { } this.nodes.volume.onmousedown = function() { - self.nodes.winamp.classList.add('setting-volume'); + self.textDisplay.showRegister('volume'); } this.nodes.volume.onmouseup = function() { - self.nodes.winamp.classList.remove('setting-volume'); + self.textDisplay.showRegister('songTitle'); } this.nodes.volume.oninput = function() { @@ -212,13 +224,13 @@ function Winamp () { this.nodes.position.onmousedown = function() { if(!self.nodes.winamp.classList.contains('stop')){ + self.textDisplay.showRegister('position'); self.nodes.winamp.classList.add('setting-position'); } } this.nodes.position.onmouseup = function() { - // This should only even be needed when we are stopped, but better safe - // than sorry + self.textDisplay.showRegister('songTitle'); self.nodes.winamp.classList.remove('setting-position'); } @@ -228,7 +240,7 @@ function Winamp () { var newElapsed = self._timeString(self.media.duration() * newFractionComplete); var duration = self._timeString(self.media.duration()); var message = "Seek to: " + newElapsed + "/" + duration + " (" + newPercentComplete + "%)"; - self.skin.font.setNodeToString(self.nodes.positionMessage, message); + self.textDisplay.setRegisterText('position', message); } this.nodes.position.onchange = function() { @@ -238,11 +250,11 @@ function Winamp () { } this.nodes.balance.onmousedown = function() { - self.nodes.winamp.classList.add('setting-balance'); + self.textDisplay.showRegister('balance'); } this.nodes.balance.onmouseup = function() { - self.nodes.winamp.classList.remove('setting-balance'); + self.textDisplay.showRegister('songTitle'); } this.nodes.balance.oninput = function() { @@ -282,8 +294,8 @@ function Winamp () { self.media.setVolume(percent); self.nodes.volume.style.backgroundPosition = '0 -' + offset + 'px'; - string = 'Volume: ' + volume + '%'; - self.skin.font.setNodeToString(self.nodes.volumeMessage, string); + var message = 'Volume: ' + volume + '%'; + self.textDisplay.setRegisterText('volume', message); // This shouldn't trigger an infinite loop with volume.onchange(), // since the value will be the same @@ -300,7 +312,7 @@ function Winamp () { } else { string = 'Balance: ' + Math.abs(balance) + '% Left'; } - self.skin.font.setNodeToString(self.nodes.balanceMessage, string); + self.textDisplay.setRegisterText('balance', string); self.media.setBalance(balance); balance = Math.abs(balance) / 100 @@ -415,7 +427,7 @@ function Winamp () { this._setTitle = function() { var duration = self._timeString(self.media.duration()); var name = self.fileName + ' (' + duration + ') *** '; - self.skin.font.setNodeToString(document.getElementById('song-title'), name); + this.textDisplay.setRegisterText('songTitle', name); } this._setMetaData = function() { @@ -457,21 +469,6 @@ function Winamp () { var timeObject = self._timeObject(time); return timeObject[0] + timeObject[1] + ':' + timeObject[2] + timeObject[3]; } - - this.marqueeLoop = function() { - setTimeout(function () { - var text = self.nodes.songTitle.firstChild; - // Only scroll if the text is too long - if(text && text.childNodes.length > 30) { - var characterNode = text.firstChild; - text.removeChild(characterNode); - text.appendChild(characterNode); - self.marqueeLoop(); - } - - }, 220) - } - } keylog = []; @@ -544,5 +541,4 @@ file = 'https://cdn.rawgit.com/captbaritone/llama/master/llama-2.91.mp3'; fileName = "1. DJ Mike Llama - Llama Whippin' Intro"; winamp.loadFromUrl(file, fileName); -winamp.marqueeLoop(); winamp.skin.setSkinByUrl('https://cdn.rawgit.com/captbaritone/winamp2-js/master/skins/base-2.91.wsz');