0x2620/oxjs
2
0
Fork 1
Code Issues 172 Pull requests Releases Wiki Activity

update audio player example

Browse source
This commit is contained in:
rolux 2012-12-10 17:46:34 +01:00
parent c4cf3586df
commit 5e35de1aa2
1 changed files with 367 additions and 85 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

452
examples/ui/audio_player/js/example.js
View file

@ -146,6 +146,7 @@ Ox.load('UI', function() {
} }
], ],
paused = true, paused = true,
sidebarSize = 192,
sort = [ sort = [
{key: 'artist', operator: '+'}, {key: 'artist', operator: '+'},
{key: 'year', operator: '+'}, {key: 'year', operator: '+'},
@ -153,6 +154,7 @@ Ox.load('UI', function() {
{key: 'track', operator: '+'} {key: 'track', operator: '+'}
], ],
track = 0, track = 0,
tracklistSize = 256,
tracks = [ tracks = [
{ {
album: 'The Grey Album', album: 'The Grey Album',
@ -266,7 +268,7 @@ Ox.load('UI', function() {
change: function(data) { change: function(data) {
view = data.value; view = data.value;
$viewLabel.options({title: Ox.toTitleCase(view)}); $viewLabel.options({title: Ox.toTitleCase(view)});
$listPanel.replaceElement(1, musicList(view)); $rightPanel.replaceElement(0, musicPanel(view));
} }
}) })
.appendTo($toolbar), .appendTo($toolbar),
@ -321,7 +323,7 @@ Ox.load('UI', function() {
}) })
.appendTo($toolbar), .appendTo($toolbar),
$listList = Ox.TableList({ $listsList = Ox.TableList({
columns: [ columns: [
{ {
format: function(value) { format: function(value) {
@ -359,22 +361,94 @@ Ox.load('UI', function() {
max: 1, max: 1,
selected: ['0'], selected: ['0'],
sort: [{key: 'index', operator: '+'}], sort: [{key: 'index', operator: '+'}],
sortable: true,
unique: 'index' 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, $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: [ elements: [
{ {
collapsible: true, collapsible: true,
element: $listList, element: $leftPanel,
resizable: true, resizable: true,
resize: [128, 192, 256, 320, 384], resize: [128, 192, 256, 320, 384],
size: 192 size: sidebarSize
}, },
{ {
element: $musicList = musicList(view) element: $rightPanel
} }
], ],
orientation: 'horizontal' orientation: 'horizontal'
@ -383,7 +457,7 @@ Ox.load('UI', function() {
$appPanel = Ox.SplitPanel({ $appPanel = Ox.SplitPanel({
elements: [ elements: [
{element: $toolbar, size: 39}, {element: $toolbar, size: 39},
{element: $listPanel} {element: $mainPanel}
], ],
orientation: 'vertical' orientation: 'vertical'
}) })
@ -394,7 +468,7 @@ Ox.load('UI', function() {
$findInput.find('input').css({borderTopLeftRadius: 0, borderTopRightRadius: 0}); $findInput.find('input').css({borderTopLeftRadius: 0, borderTopRightRadius: 0});
$findInput.find('.OxButton').css({borderTopRightRadius: 0}); $findInput.find('.OxButton').css({borderTopRightRadius: 0});
Ox.print('ARTISTS', artists, 'ALBUMS', albums); // Ox.print('ARTISTS', artists, 'ALBUMS', albums);
function getAlbums(artists) { function getAlbums(artists) {
var albums = [] var albums = []
@ -426,11 +500,10 @@ Ox.load('UI', function() {
Ox.forEach(tree, function(albums, artist) { Ox.forEach(tree, function(albums, artist) {
artist = { artist = {
albums: Ox.len(albums), albums: Ox.len(albums),
artwork: 'mp3/' + artist + '/artwork.png',
id: artist, id: artist,
items: [], items: [],
name: artist, name: artist
tracks: 0,
years: []
}; };
Ox.forEach(albums, function(tracks, id) { Ox.forEach(albums, function(tracks, id) {
var title = id.substr(5), var title = id.substr(5),
@ -440,8 +513,11 @@ Ox.load('UI', function() {
duration: Ox.values(tracks).reduce(function(r, v, i) { duration: Ox.values(tracks).reduce(function(r, v, i) {
return r + v.duration; return r + v.duration;
}, 0), }, 0),
id: [artist.name, year, title].join('\n'), id: [year, title].join('\n'),
items: [], items: [],
size: Ox.values(tracks).reduce(function(r, v, i) {
return r + v.size;
}, 0),
title: title, title: title,
tracks: Ox.len(tracks), tracks: Ox.len(tracks),
year: year year: year
@ -449,6 +525,7 @@ Ox.load('UI', function() {
Ox.forEach(tracks, function(track, id) { Ox.forEach(tracks, function(track, id) {
artist.items[artist.items.length - 1].items.push({ artist.items[artist.items.length - 1].items.push({
artist: track.artist, artist: track.artist,
artwork: track.artwork,
bitrate: track.bitrate, bitrate: track.bitrate,
checked: track.checked, checked: track.checked,
disc: track.disc, 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); artists.push(artist);
}); });
return artists; return artists;
} }
function musicList(view) { function musicPanel(view) {
var $list; var $panel;
if (view == 'tracks') { if (view == 'tracks') {
$list = Ox.TableList({ var $trackAlbumList = trackAlbumList();
$musicList = Ox.TableList({
columns: columns, columns: columns,
columnsMovable: true, columnsMovable: true,
columnsRemovable: true, columnsRemovable: true,
@ -478,6 +569,7 @@ Ox.load('UI', function() {
columnsVisible: true, columnsVisible: true,
items: tracks, items: tracks,
max: 1, max: 1,
scrollbarVisible: true,
sort: Ox.clone(sort, true), sort: Ox.clone(sort, true),
unique: 'file' unique: 'file'
}) })
@ -488,23 +580,36 @@ Ox.load('UI', function() {
return track.file == file; return track.file == file;
}); });
if (index == track) { if (index == track) {
$list.value(tracks[track].file, 'playing', true); $musicList.value(tracks[track].file, 'playing', true);
$audioPlayer.options({paused: false, position: 0}); $audioPlayer.options({paused: false, position: 0});
} else { } else {
$list.value(tracks[track].file, 'playing', false); $musicList.value(tracks[track].file, 'playing', false);
track = index; track = index;
$audioPlayer.options({paused: false, track: track}); $audioPlayer.options({paused: false, track: track});
$list.value(tracks[track].file, 'playing', true); $musicList.value(tracks[track].file, 'playing', true);
} }
}, },
openpreview: function(data) { openpreview: function(data) {
paused = !paused; paused = !paused;
$audioPlayer.options({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') { } else if (view == 'albums') {
$list = Ox.IconList({ $musicList = Ox.IconList({
fixedRatio: 1, fixedRatio: 1,
item: function(data, sort, size) { item: function(data, sort, size) {
var key = Ox.contains(['artist', 'title'], sort[0].key) var key = Ox.contains(['artist', 'title'], sort[0].key)
@ -532,86 +637,263 @@ Ox.load('UI', function() {
.bindEvent({ .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') { } else if (view == 'artists') {
$list = Ox.ColumnList({ $panel = Ox.ColumnList({
columns: [ columns: [
{ {
id: 'artist', 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', 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(' &mdash; ')
)
.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(' &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({ .bindEvent({
resize: function(data) {
}); $panel.options({width: data.size})
$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(' &mdash; ')
)
.appendTo($item);
return $item;
},
itemHeight: 32,
items: albums,
itemWidth: 256,
keys: ['artwork', 'duration', 'title', 'tracks', 'year'],
max: 1,
scrollbarVisible: true
})
.bindEvent({
}); });
} }
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; 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'
});
}
}); });