update audio player example
This commit is contained in:
rolux
parent
c4cf3586df
commit
5e35de1aa2
1 changed files with 367 additions and 85 deletions
|
|
@ -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,86 +637,263 @@ 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(' — ')
|
||||
)
|
||||
.appendTo($item);
|
||||
return $item;
|
||||
},
|
||||
itemHeight: 32,
|
||||
keys: ['albums', 'artwork', 'duration', 'name', 'size', 'tracks', 'years']
|
||||
},
|
||||
{
|
||||
id: 'album',
|
||||
width: 256
|
||||
item: function(data, width) {
|
||||
data.artwork = data.artwork || '';
|
||||
data.tracks = data.tracks || [{duration: 0}];
|
||||
data.year = data.year || '????';
|
||||
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.year,
|
||||
Ox.formatCount(data.tracks, 'track'),
|
||||
Ox.formatDuration(data.duration),
|
||||
Ox.formatValue(data.size, 'B')
|
||||
].join(' — ')
|
||||
)
|
||||
.appendTo($item);
|
||||
return $item;
|
||||
},
|
||||
itemHeight: 32,
|
||||
keys: ['artwork', 'duration', 'size', 'title', 'tracks', 'year']
|
||||
},
|
||||
{
|
||||
id: 'track'
|
||||
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(' — ')
|
||||
)
|
||||
.appendTo($item);
|
||||
return $item;
|
||||
},
|
||||
itemHeight: 32,
|
||||
keys: ['artwork', 'bitrate', 'checked', 'duration', 'playing', 'size', 'title']
|
||||
}
|
||||
]
|
||||
],
|
||||
items: artists,
|
||||
list: 'custom',
|
||||
width: window.innerWidth - sidebarSize - 1
|
||||
})
|
||||
.bindEvent({
|
||||
|
||||
});
|
||||
$list = Ox.CustomList({
|
||||
item: function(data) {
|
||||
Ox.print('itemdata::', data)
|
||||
data.artwork = data.artwork || '';
|
||||
data.tracks = data.tracks || [{duration: 0}];
|
||||
data.year = data.year || '????';
|
||||
var $item = $('<div>')
|
||||
.css({width: '256px', 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: '220px',
|
||||
fontSize: '13px',
|
||||
textOverflow: 'ellipsis'
|
||||
})
|
||||
.html(data.title ? data.title : '')
|
||||
.appendTo($item);
|
||||
$('<div>')
|
||||
.addClass('OxLight')
|
||||
.css({
|
||||
position: 'relative',
|
||||
left: '34px',
|
||||
top: '-28px',
|
||||
width: '220px',
|
||||
fontSize: '9px',
|
||||
textOverflow: 'ellipsis'
|
||||
})
|
||||
.html(
|
||||
[
|
||||
data.year,
|
||||
Ox.formatCount(data.tracks, 'track'),
|
||||
Ox.formatDuration(data.duration)
|
||||
].join(' — ')
|
||||
)
|
||||
.appendTo($item);
|
||||
return $item;
|
||||
},
|
||||
itemHeight: 32,
|
||||
items: albums,
|
||||
itemWidth: 256,
|
||||
keys: ['artwork', 'duration', 'title', 'tracks', 'year'],
|
||||
max: 1,
|
||||
scrollbarVisible: true
|
||||
})
|
||||
.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(' — '),
|
||||
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'
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in a new issue