Mirrors/webamp
1
0
Fork 0
mirror of https://github.com/captbaritone/webamp.git synced 2026-07-22 09:37:17 +00:00
Code Issues Projects Releases Wiki Activity

Add basic support for tracks and rezising windows

Browse source
This commit is contained in:
Jordan Eldredge 2015-01-19 22:28:28 -08:00
parent b630a57d94
commit efd1381144
6 changed files with 159 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

12
css/playlist.css
View file

@ -34,6 +34,10 @@
#playlist #tracks li {
white-space: nowrap;
color: lightgreen;
font-size: 8px;
}
#playlist #tracks li.selected {
background-color: red;
}
#playlist .top {
@ -135,3 +139,11 @@
width: 150px;
background-position: -126px -72px;
}
#playlist #playlist-resize-handle {
position: absolute;
width: 20px;
height: 20px;
bottom: 0px;
right: 0px;
}

18
index.html
View file

@ -104,18 +104,7 @@
<a id='about' target='_blank' href='https://github.com/captbaritone/winamp2-js'></a>
</div>
<div id='playlist' class='selected loading stop'>
<ul id='tracks'>
<li>1. track one is very long and if you don't cut it off it
causes some problems</li>
<li>2. track two</li>
<li>2. track two</li>
<li>2. track two</li>
<li>2. track two</li>
<li>2. track two</li>
<li>2. track two</li>
<li>2. track two</li>
<li>2. track two</li>
</ul>
<ul id='tracks'></ul>
<!-- These go first so that they end up below the .top div in the
z axis -->
<div class='left playlist-left-tile'></div>
@ -132,8 +121,9 @@
<div class='bottom playlist-bottom-tile'>
<div class='bottom-left'></div>
<div class='title'></div>
<div class='bottom-right'></div>
<div class='bottom-right'>
<div id='playlist-resize-handle'></div>
</div>
</div>
</div>
<div id='browser-compatibility'>

7
js/main-window.js
View file

@ -206,6 +206,8 @@ MainWindow = {
window.addEventListener('doubledModeToggled', function() { self.toggleDoubledMode(); });
window.addEventListener('repeatToggled', function() { self.toggleRepeat(); });
window.addEventListener('llamaToggled', function() { self.toggleLlama(); });
window.addEventListener('openPlaylist', function() { self.nodes.playlistButton.classList.add('selected'); });
window.addEventListener('closePlaylist', function() { self.nodes.playlistButton.classList.remove('selected'); });
this.nodes.window.addEventListener('dragenter', this.dragenter.bind(this));
this.nodes.window.addEventListener('dragover', this.dragover.bind(this));
@ -373,11 +375,6 @@ MainWindow = {
togglePlaylist: function() {
this.winamp.togglePlaylist();
if(this.winamp.playlistIsClosed()) {
this.nodes.playlistButton.classList.remove('selected');
} else {
this.nodes.playlistButton.classList.add('selected');
}
},
dragenter: function(e) {

45
js/playlist-window.js
View file

@ -5,13 +5,17 @@ PlaylistWindow = {
'window': document.getElementById('playlist'),
'top': document.querySelector('#playlist .top'),
'shade': document.getElementById('playlist-shade'),
'close': document.getElementById('playlist-close')
'close': document.getElementById('playlist-close'),
'tracks': document.getElementById('tracks'),
'resizeHandle': document.getElementById('playlist-resize-handle')
};
this.closed = this.nodes.window.classList.contains('closed');
this.handle = this.nodes.top;
this.body = this.nodes.window;
this.resizeHandle = this.nodes.resizeHandle;
this._registerListeners();
return this;
@ -20,9 +24,18 @@ PlaylistWindow = {
_registerListeners: function() {
var self = this;
window.addEventListener('openPlaylist', function() { self.open(); });
window.addEventListener('closePlaylist', function() { self.close(); });
window.addEventListener('tracksUpdated', function() { self.updateTracks(); });
window.addEventListener('currentTrackChanged', function() { self.updateCurrentTrack(); });
this.nodes.close.onclick = function() {
self.close();
self.winamp.closePlaylist();
}
this.nodes.window.addEventListener('dragenter', this.dragenter.bind(this));
this.nodes.window.addEventListener('dragover', this.dragover.bind(this));
this.nodes.window.addEventListener('drop', this.drop.bind(this));
},
close: function() {
@ -45,6 +58,32 @@ PlaylistWindow = {
}
},
updateTracks: function() {
var tracks = this.nodes.tracks;
while (tracks.firstChild) {
tracks.removeChild(tracks.firstChild);
}
for(i = 0; i < this.winamp.playlist.length; i++) {
var li = document.createElement('li');
li.innerHTML = "<li>" + (i+1) + ". " + this.winamp.playlist[i].name + "</li>";
tracks.appendChild(li);
}
this.updateCurrentTrack();
},
updateCurrentTrack: function() {
var tracks = this.nodes.tracks.children;
for(i = 0; i < tracks.length; i++) {
if(i == this.winamp.currentTrack) {
tracks[i].classList.add('selected');
} else {
tracks[i].classList.remove('selected');
}
}
},
dragenter: function(e) {
e.stopPropagation();
e.preventDefault();
@ -60,7 +99,7 @@ PlaylistWindow = {
e.preventDefault();
var dt = e.dataTransfer;
var file = dt.files[0];
this.winamp.loadFromFileReference(file);
this.winamp.enqueueFromFileReference(file, 0);
}
}

59
js/winamp.js
View file

@ -13,6 +13,9 @@ Winamp = {
this.mainWindow = MainWindow.init(this);
this.playlistWindow = PlaylistWindow.init(this);
this.playlist = [];
this.currentTrack = null;
this.events = {
timeUpdated: new Event('timeUpdated'),
startWaiting: new Event('startWaiting'),
@ -27,7 +30,11 @@ Winamp = {
balanceChanged: new Event('balanceChanged'),
doubledModeToggled: new Event('doubledModeToggled'),
repeatToggled: new Event('repeatToggled'),
llamaToggled: new Event('llamaToggled')
llamaToggled: new Event('llamaToggled'),
openPlaylist: new Event('openPlaylist'),
closePlaylist: new Event('closePlaylist'),
tracksUpdated: new Event('tracksUpdated'),
currentTrackChanged: new Event('currentTrackChanged')
};
this.setVolume(options.volume);
@ -117,8 +124,11 @@ Winamp = {
},
previous: function(num) {
// Jump back num tracks
// Not yet supported
if(this.currentTrack > 0) {
this.currentTrack = this.currentTrack - 1;
window.dispatchEvent(this.events.currentTrackChanged);
this.playFromFileReference(this.playlist[this.currentTrack]);
}
},
play: function() {
@ -139,14 +149,19 @@ Winamp = {
this.setState('pause');
}
},
stop: function() {
this.media.stop();
this.setState('stop');
},
next: function(num) {
// Jump back num tracks
// Not yet supported
this.currentTrack++;
if(this.currentTrack == this.playlist.length) {
this.currentTrack = 0;
}
window.dispatchEvent(this.events.currentTrackChanged);
this.playFromFileReference(this.playlist[this.currentTrack]);
},
// From 0-100
@ -203,12 +218,20 @@ Winamp = {
this.setState('stop'); // Currently unneeded
},
togglePlaylist: function() {
this.playlistWindow.toggle();
openPlaylist: function() {
window.dispatchEvent(this.events.openPlaylist);
},
playlistIsClosed: function() {
return this.playlistWindow.isClosed();
closePlaylist: function() {
window.dispatchEvent(this.events.closePlaylist);
},
togglePlaylist: function() {
if(this.playlistWindow.isClosed()) {
this.openPlaylist();
} else {
this.closePlaylist();
}
},
openFileDialog: function() {
@ -221,12 +244,24 @@ Winamp = {
if(new RegExp("(wsz|zip)$", 'i').test(fileReference.name)) {
this.skin.setSkinByFile(file);
} else {
this.media.autoPlay = true;
this.fileName = fileReference.name;
file.processBuffer(this._loadBuffer.bind(this));
this.playlist = [];
this.enqueueFromFileReference(fileReference);
this.currentTrack = 0;
this.playFromFileReference(this.playlist[0]);
}
},
playFromFileReference: function(fileReference) {
this.media.autoPlay = true;
this.fileName = fileReference.name;
this.fileManager.bufferFromFileReference(fileReference, this._loadBuffer.bind(this));
},
enqueueFromFileReference: function(fileReference, position) {
this.playlist.push(fileReference);
window.dispatchEvent(this.events.tracksUpdated);
},
// Used only for the initial load, since it must have a CORS header
loadFromUrl: function(url, fileName) {
this.fileName = fileName;

52
js/window-manager.js
View file

@ -2,6 +2,7 @@ WindowManager = {
registerWindow: function(win) {
var body = win.body;
var handle = win.handle;
var resizeHandle = win.resizeHandle;
// Make window dragable
handle.addEventListener('mousedown',function(e){
@ -54,5 +55,56 @@ WindowManager = {
window.addEventListener('mousemove',handleMove);
window.addEventListener('mouseup',handleUp);
});
if (typeof resizeHandle == 'undefined') return;
// Make window resizeable
resizeHandle.addEventListener('mousedown',function(e){
var winStartHeight = body.offsetHeight,
winStartWidth = body.offsetWidth;
// Get starting mouse position
var mouseStartLeft = e.clientX,
mouseStartTop = e.clientY;
// Mouse move handler function while mouse is down
function handleResize(e) {
// Get current mouse position
var mouseLeft = e.clientX,
mouseTop = e.clientY;
// Calculate difference offsets
var diffLeft = mouseLeft-mouseStartLeft,
diffTop = mouseTop-mouseStartTop;
var newWidth = (winStartWidth+diffLeft),
newHeight = (winStartHeight+diffTop);
// Enforce resizing by 25px
newWidth = Math.ceil(newWidth / 25.0) * 25;
newHeight = Math.ceil(newHeight / 29.0) * 29;
// Enforce minimum size
newWidth = Math.max(newWidth, 275);
newHeight = Math.max(newHeight, 116);
// Resize window
body.style.width = newWidth +"px";
body.style.height = newHeight +"px";
}
// Mouse button up
function handleUp() {
removeListeners();
}
function removeListeners() {
window.removeEventListener('mousemove',handleResize);
window.removeEventListener('mouseup',handleUp);
}
window.addEventListener('mousemove',handleResize);
window.addEventListener('mouseup',handleUp);
});
}
};