update audio player example

This commit is contained in:
rolux 2012-12-10 17:46:34 +01:00
parent c4cf3586df
commit 5e35de1aa2

View file

@ -146,6 +146,7 @@ Ox.load('UI', function() {
}
],
paused = true,
sidebarSize = 192,
sort = [
{key: 'artist', operator: '+'},
{key: 'year', operator: '+'},
@ -153,6 +154,7 @@ Ox.load('UI', function() {
{key: 'track', operator: '+'}
],
track = 0,
tracklistSize = 256,
tracks = [
{
album: 'The Grey Album',
@ -266,7 +268,7 @@ Ox.load('UI', function() {
change: function(data) {
view = data.value;
$viewLabel.options({title: Ox.toTitleCase(view)});
$listPanel.replaceElement(1, musicList(view));
$rightPanel.replaceElement(0, musicPanel(view));
}
})
.appendTo($toolbar),
@ -321,7 +323,7 @@ Ox.load('UI', function() {
})
.appendTo($toolbar),
$listList = Ox.TableList({
$listsList = Ox.TableList({
columns: [
{
format: function(value) {
@ -359,22 +361,94 @@ Ox.load('UI', function() {
max: 1,
selected: ['0'],
sort: [{key: 'index', operator: '+'}],
sortable: true,
unique: 'index'
}),
$artworkbar = Ox.Bar({size: 16}),
$artworkText = Ox.Element()
.css({
paddingTop: '1px',
textAlign: 'center'
})
.html('Selected Item')
.appendTo($artworkbar),
$artwork = Ox.Element('<img>')
.attr({src: tracks[0].artwork})
.css({
width: sidebarSize + 'px',
height: sidebarSize + 'px'
}),
$artworkPanel = Ox.SplitPanel({
elements: [
{element: $artworkbar, size: 16},
{element: $artwork}
],
orientation: 'vertical'
}),
$leftPanel = Ox.SplitPanel({
elements: [
{
element: $listsList
},
{
collapsible: true,
element: $artworkPanel,
size: sidebarSize + 16
}
],
orientation: 'vertical'
})
.bindEvent({
resize: function(data) {
sidebarSize = data.size;
$listsList.setColumnWidth('title', sidebarSize - 56);
$leftPanel.size(1, sidebarSize + 16);
$artwork.css({
width: sidebarSize + 'px',
height: sidebarSize + 'px'
});
//$musicList.size();
}
}),
$musicList,
$listPanel = Ox.SplitPanel({
$musicPanel = musicPanel(view),
$statusbar = Ox.Bar({size: 16}),
$status = Ox.Element().css({
paddingTop: '3px',
fontSize: '9px',
textAlign: 'center'
})
.html('Loading...')
.appendTo($statusbar),
$rightPanel = Ox.SplitPanel({
elements: [
{element: $musicPanel},
{element: $statusbar, size: 16}
],
orientation: 'vertical'
}),
$mainPanel = Ox.SplitPanel({
elements: [
{
collapsible: true,
element: $listList,
element: $leftPanel,
resizable: true,
resize: [128, 192, 256, 320, 384],
size: 192
size: sidebarSize
},
{
element: $musicList = musicList(view)
element: $rightPanel
}
],
orientation: 'horizontal'
@ -383,7 +457,7 @@ Ox.load('UI', function() {
$appPanel = Ox.SplitPanel({
elements: [
{element: $toolbar, size: 39},
{element: $listPanel}
{element: $mainPanel}
],
orientation: 'vertical'
})
@ -394,7 +468,7 @@ Ox.load('UI', function() {
$findInput.find('input').css({borderTopLeftRadius: 0, borderTopRightRadius: 0});
$findInput.find('.OxButton').css({borderTopRightRadius: 0});
Ox.print('ARTISTS', artists, 'ALBUMS', albums);
// Ox.print('ARTISTS', artists, 'ALBUMS', albums);
function getAlbums(artists) {
var albums = []
@ -426,11 +500,10 @@ Ox.load('UI', function() {
Ox.forEach(tree, function(albums, artist) {
artist = {
albums: Ox.len(albums),
artwork: 'mp3/' + artist + '/artwork.png',
id: artist,
items: [],
name: artist,
tracks: 0,
years: []
name: artist
};
Ox.forEach(albums, function(tracks, id) {
var title = id.substr(5),
@ -440,8 +513,11 @@ Ox.load('UI', function() {
duration: Ox.values(tracks).reduce(function(r, v, i) {
return r + v.duration;
}, 0),
id: [artist.name, year, title].join('\n'),
id: [year, title].join('\n'),
items: [],
size: Ox.values(tracks).reduce(function(r, v, i) {
return r + v.size;
}, 0),
title: title,
tracks: Ox.len(tracks),
year: year
@ -449,6 +525,7 @@ Ox.load('UI', function() {
Ox.forEach(tracks, function(track, id) {
artist.items[artist.items.length - 1].items.push({
artist: track.artist,
artwork: track.artwork,
bitrate: track.bitrate,
checked: track.checked,
disc: track.disc,
@ -462,15 +539,29 @@ Ox.load('UI', function() {
});
});
});
['duration', 'size', 'tracks'].forEach(function(key) {
artist[key] = artist.items.reduce(function(r, v, i) {
return r + v[key];
}, 0);
})
artist.years = Ox.unique(artist.items.map(function(item) {
return item.year;
})).sort();
artist.years = [artist.years[0]].concat(
artist.years.length > 1
? [artist.years[artist.years.length - 1]]
: []
);
artists.push(artist);
});
return artists;
}
function musicList(view) {
var $list;
function musicPanel(view) {
var $panel;
if (view == 'tracks') {
$list = Ox.TableList({
var $trackAlbumList = trackAlbumList();
$musicList = Ox.TableList({
columns: columns,
columnsMovable: true,
columnsRemovable: true,
@ -478,6 +569,7 @@ Ox.load('UI', function() {
columnsVisible: true,
items: tracks,
max: 1,
scrollbarVisible: true,
sort: Ox.clone(sort, true),
unique: 'file'
})
@ -488,23 +580,36 @@ Ox.load('UI', function() {
return track.file == file;
});
if (index == track) {
$list.value(tracks[track].file, 'playing', true);
$musicList.value(tracks[track].file, 'playing', true);
$audioPlayer.options({paused: false, position: 0});
} else {
$list.value(tracks[track].file, 'playing', false);
$musicList.value(tracks[track].file, 'playing', false);
track = index;
$audioPlayer.options({paused: false, track: track});
$list.value(tracks[track].file, 'playing', true);
$musicList.value(tracks[track].file, 'playing', true);
}
},
openpreview: function(data) {
paused = !paused;
$audioPlayer.options({paused: paused});
$list.closePreview();
$musicList.closePreview();
}
});
$panel = Ox.SplitPanel({
elements: [
{
collapsible: true,
element: $trackAlbumList,
size: 112 + Ox.UI.SCROLLBAR_SIZE
},
{
element: $musicList
}
],
orientation: 'vertical'
});
} else if (view == 'albums') {
$list = Ox.IconList({
$musicList = Ox.IconList({
fixedRatio: 1,
item: function(data, sort, size) {
var key = Ox.contains(['artist', 'title'], sort[0].key)
@ -532,33 +637,92 @@ Ox.load('UI', function() {
.bindEvent({
});
var $albumTrackList = albumTrackList();
$panel = Ox.SplitPanel({
elements: [
{
element: $musicList
},
{
element: $albumTrackList,
resizable: true,
resize: [192, 256, 320],
size: tracklistSize
}
],
orientation: 'horizontal'
});
} else if (view == 'artists') {
$list = Ox.ColumnList({
$panel = Ox.ColumnList({
columns: [
{
id: 'artist',
width: 256
item: function(data, width) {
data.artwork = data.artwork || '';
data.years = data.years || [];
var $item = $('<div>')
.css({width: width + 'px', height: '32px'});
$('<img>')
.attr({src: data.artwork})
.css({
position: 'relative',
left: '2px',
top: '2px',
width: '28px',
height: '28px',
borderRadius: '7px'
})
.appendTo($item);
$('<div>')
.css({
position: 'relative',
left: '34px',
top: '-28px',
width: width - 36 + 'px',
fontSize: '13px',
textOverflow: 'ellipsis',
cursor: 'default',
overflow: 'hidden'
})
.html(data.name ? data.name : '')
.appendTo($item);
$('<div>')
.addClass('OxLight')
.css({
position: 'relative',
left: '34px',
top: '-28px',
width: width - 36 + 'px',
height: '10px',
fontSize: '9px',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
cursor: 'default',
overflow: 'hidden'
})
.html(
[
data.years.join('-'),
Ox.formatCount(data.albums, 'album'),
Ox.formatCount(data.tracks, 'track'),
Ox.formatDuration(data.duration),
Ox.formatValue(data.size, 'B')
].join(' &mdash; ')
)
.appendTo($item);
return $item;
},
itemHeight: 32,
keys: ['albums', 'artwork', 'duration', 'name', 'size', 'tracks', 'years']
},
{
id: 'album',
width: 256
},
{
id: 'track'
}
]
})
.bindEvent({
});
$list = Ox.CustomList({
item: function(data) {
Ox.print('itemdata::', data)
item: function(data, width) {
data.artwork = data.artwork || '';
data.tracks = data.tracks || [{duration: 0}];
data.year = data.year || '????';
var $item = $('<div>')
.css({width: '256px', height: '32px'});
.css({width: width + 'px', height: '32px'});
$('<img>')
.attr({src: data.artwork})
.css({
@ -574,9 +738,11 @@ Ox.load('UI', function() {
position: 'relative',
left: '34px',
top: '-28px',
width: '220px',
width: width - 36 + 'px',
fontSize: '13px',
textOverflow: 'ellipsis'
textOverflow: 'ellipsis',
cursor: 'default',
overflow: 'hidden'
})
.html(data.title ? data.title : '')
.appendTo($item);
@ -586,32 +752,148 @@ Ox.load('UI', function() {
position: 'relative',
left: '34px',
top: '-28px',
width: '220px',
width: width - 36 + 'px',
fontSize: '9px',
textOverflow: 'ellipsis'
textOverflow: 'ellipsis',
cursor: 'default',
overflow: 'hidden'
})
.html(
[
data.year,
Ox.formatCount(data.tracks, 'track'),
Ox.formatDuration(data.duration)
Ox.formatDuration(data.duration),
Ox.formatValue(data.size, 'B')
].join(' &mdash; ')
)
.appendTo($item);
return $item;
},
itemHeight: 32,
items: albums,
itemWidth: 256,
keys: ['artwork', 'duration', 'title', 'tracks', 'year'],
max: 1,
scrollbarVisible: true
keys: ['artwork', 'duration', 'size', 'title', 'tracks', 'year']
},
{
id: 'track',
item: function(data, width) {
var $item = $('<div>')
.css({width: width + 'px', height: '32px'});
$('<img>')
.attr({src: data.artwork})
.css({
position: 'relative',
left: '2px',
top: '2px',
width: '28px',
height: '28px'
})
.appendTo($item);
$('<div>')
.css({
position: 'relative',
left: '34px',
top: '-28px',
width: width - 36 + 'px',
fontSize: '13px',
textOverflow: 'ellipsis',
cursor: 'default',
overflow: 'hidden'
})
.html(data.title ? data.title : '')
.appendTo($item);
$('<div>')
.addClass('OxLight')
.css({
position: 'relative',
left: '34px',
top: '-28px',
width: width - 36 + 'px',
fontSize: '9px',
textOverflow: 'ellipsis',
cursor: 'default',
overflow: 'hidden'
})
.html(
[
data.duration,
Ox.formatValue(data.size, 'B'),
Math.round(data.bitrate) + ' kbps'
].join(' &mdash; ')
)
.appendTo($item);
return $item;
},
itemHeight: 32,
keys: ['artwork', 'bitrate', 'checked', 'duration', 'playing', 'size', 'title']
}
],
items: artists,
list: 'custom',
width: window.innerWidth - sidebarSize - 1
})
.bindEvent({
resize: function(data) {
$panel.options({width: data.size})
}
});
}
return $panel;
}
function albumTrackList() {
var $list = Ox.TableList({
columns: [
Ox.getObjectById(columns, 'playing'),
Ox.getObjectById(columns, 'checked'),
Ox.extend(
Ox.getObjectById(columns, 'title'),
{width: tracklistSize - 96 - Ox.UI.SCROLLBAR_SIZE}
),
Ox.getObjectById(columns, 'duration')
],
items: tracks,
max: 1,
query: {conditions: [], operator: '&'},
scrollbarVisible: true,
selected: [],
sort: Ox.clone(sort, true),
unique: 'file'
})
.bindEvent({
resize: function(data) {
tracklistSize = data.size;
$list.setColumnWidth('title', tracklistSize - 96 - Ox.UI.SCROLLBAR_SIZE);
}
});
return $list;
}
function trackAlbumList() {
return Ox.IconList({
fixedRatio: 1,
item: function(data, sort, size) {
var key = Ox.contains(['artist', 'title'], sort[0].key)
? 'year' : sort[0].key,
column = Ox.getObjectById(columns, key),
info = (column.format || Ox.identity)(data[key]);
return {
height: size,
id: data.id,
info: info,
title: [data.artist, data.title].join(' &mdash; '),
url: data.artwork,
width: size
}
},
items: albums,
max: 1,
orientation: 'horizontal',
pageLength: 100,
query: {conditions: [], operator: '&'},
selected: [],
size: 64,
sort: Ox.clone(sort, true),
unique: 'id'
});
}
});