')
+ .addClass('itemTitle')
+ .css({width: width - 36 + 'px'})
+ .html(data.name ? data.name : '')
+ .appendTo($item);
+ $('
')
+ .addClass('itemInfo OxLight')
+ .css({width: width - 36 + 'px'})
+ .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: 'albums',
+ item: function(data, width) {
+ data.artwork = data.artwork || '';
+ data.tracks = data.tracks || [{duration: 0}];
+ data.year = data.year || '????';
+ var $item = $('
')
+ .addClass('item')
+ .css({width: width + 'px'});
+ $('![]()
')
+ .addClass('itemIcon')
+ .attr({src: data.artwork})
+ .appendTo($item);
+ $('
')
+ .addClass('itemTitle')
+ .css({width: width - 36 + 'px'})
+ .html(data.title ? data.title : '')
+ .appendTo($item);
+ $('
')
+ .addClass('itemInfo OxLight')
+ .css({width: width - 36 + 'px'})
+ .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: 'tracks',
+ item: function(data, width) {
+ var $item = $('
')
+ .addClass('item')
+ .css({width: width + 'px'});
+ $('![]()
')
+ .addClass('itemIcon')
+ .attr({src: data.artwork})
+ .appendTo($item);
+ $('
')
+ .addClass('itemTitle')
+ .css({width: width - 36 + 'px'})
+ .html(data.title ? data.title : '')
+ .appendTo($item);
+ $('
')
+ .addClass('itemInfo OxLight')
+ .css({width: width - 36 + 'px'})
+ .html(
+ [
+ Ox.formatDuration(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: app.data.artists,
+ list: 'custom',
+ width: window.innerWidth - app.user.ui.sidebarSize - 1
+ })
+ .bindEvent({
+ resize: function(data) {
+ $panel.options({width: data.size})
+ },
+ select: function(data) {
+ Ox.print('SELECT::', data)
+ app.UI.set(
+ 'selected' + Ox.toTitleCase(data.id.slice(0, -1)),
+ data.ids
+ );
+ }
+ });
+ };
+
+ app.ui.statusbar = function() {
+ return Ox.Bar({size: 16})
+ .append(app.$ui.statusText = app.ui.statusText());
+ };
+
+ app.ui.statusText = function() {
+ var $element = Ox.Element().attr({id: 'statusText'});
+ $element.update = function(data) {
+ return $element.html(
+ data ? [
+ Ox.formatCount(data.items, 'track'),
+ Ox.formatDuration(data.duration),
+ Ox.formatValue(data.size, 'B')
+ ].join(' — ') : 'Loading...'
+ );
+ };
+ return $element.update();
+ };
+
+ app.utils.getAlbums = function() {
var albums = []
- artists.forEach(function(artist) {
+ app.data.artists.forEach(function(artist) {
artist.items.forEach(function(album) {
albums.push(Ox.extend(album, {artist: artist.name}));
});
});
return albums;
- }
+ };
- function getArtists(tracks) {
+ app.utils.getArtists = function() {
var artists = [], tree = {};
- tracks.forEach(function(track, index) {
+ app.data.tracks.forEach(function(track, index) {
var artist = track.artist,
album = track.year + ' ' + track.album,
title = Ox.pad(track.disc, 2) + '\n' + Ox.pad(track.track, 2)
@@ -513,7 +1055,7 @@ Ox.load('UI', function() {
duration: Ox.values(tracks).reduce(function(r, v, i) {
return r + v.duration;
}, 0),
- id: [year, title].join('\n'),
+ id: [artist.id, year + ' ' + title].join('\n'),
items: [],
size: Ox.values(tracks).reduce(function(r, v, i) {
return r + v.size;
@@ -555,345 +1097,33 @@ Ox.load('UI', function() {
artists.push(artist);
});
return artists;
- }
+ };
- function musicPanel(view) {
- var $panel;
- if (view == 'tracks') {
- var $trackAlbumList = trackAlbumList();
- $musicList = Ox.TableList({
- columns: columns,
- columnsMovable: true,
- columnsRemovable: true,
- columnsResizable: true,
- columnsVisible: true,
- items: tracks,
- max: 1,
- scrollbarVisible: true,
- sort: Ox.clone(sort, true),
- unique: 'file'
- })
- .bindEvent({
- open: function(data) {
- var file = data.ids[0],
- index = Ox.indexOf(tracks, function(track) {
- return track.file == file;
- });
- if (index == track) {
- $musicList.value(tracks[track].file, 'playing', true);
- $audioPlayer.options({paused: false, position: 0});
- } else {
- $musicList.value(tracks[track].file, 'playing', false);
- track = index;
- $audioPlayer.options({paused: false, track: track});
- $musicList.value(tracks[track].file, 'playing', true);
- }
- },
- openpreview: function(data) {
- paused = !paused;
- $audioPlayer.options({paused: paused});
- $musicList.closePreview();
- }
- });
- $panel = Ox.SplitPanel({
- elements: [
- {
- collapsible: true,
- element: $trackAlbumList,
- size: 112 + Ox.UI.SCROLLBAR_SIZE
- },
- {
- element: $musicList
- }
- ],
- orientation: 'vertical'
- });
- } else if (view == 'albums') {
- $musicList = 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,
- pageLength: 120,
- query: {conditions: [], operator: '&'},
- selected: [],
- size: 128,
- sort: Ox.clone(sort, true),
- unique: 'id'
- })
- .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') {
- $panel = Ox.ColumnList({
- columns: [
- {
- id: 'artist',
- item: function(data, width) {
- data.artwork = data.artwork || '';
- data.years = data.years || [];
- var $item = $('
')
- .css({width: width + 'px', height: '32px'});
- $('![]()
')
- .attr({src: data.artwork})
- .css({
- position: 'relative',
- left: '2px',
- top: '2px',
- width: '28px',
- height: '28px',
- borderRadius: '7px'
- })
- .appendTo($item);
- $('
')
- .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);
- $('
')
- .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',
- item: function(data, width) {
- data.artwork = data.artwork || '';
- data.tracks = data.tracks || [{duration: 0}];
- data.year = data.year || '????';
- var $item = $('
')
- .css({width: width + 'px', height: '32px'});
- $('![]()
')
- .attr({src: data.artwork})
- .css({
- position: 'relative',
- left: '2px',
- top: '2px',
- width: '28px',
- height: '28px'
- })
- .appendTo($item);
- $('
')
- .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);
- $('
')
- .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',
- item: function(data, width) {
- var $item = $('
')
- .css({width: width + 'px', height: '32px'});
- $('![]()
')
- .attr({src: data.artwork})
- .css({
- position: 'relative',
- left: '2px',
- top: '2px',
- width: '28px',
- height: '28px'
- })
- .appendTo($item);
- $('
')
- .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);
- $('
')
- .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({
- 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'),
+ app.utils.getTrackAlbums = function(callback) {
+ app.$ui.trackList.api({
+ keys: ['id'],
+ query: app.user.ui.query,
+ sort: app.user.ui.sort
+ }, function(result) {
+ callback(result.data.items.reduce(function(r, v, i) {
+ var albumId = v.id.split('\n').slice(0, 2).join('\n'),
+ last = Ox.last(r);
+ return last && last.albumId == albumId ? r : r.concat(
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'
+ Ox.clone(Ox.getObjectById(app.data.albums, albumId)),
+ {albumId: albumId, id: v.id, index: r.length}
+ )
+ );
+ }, []));
});
- }
+ };
+
+ app.utils.resizeWindow = function() {
+
+ };
+
+ app.load();
+
+ window.app = app;
});
diff --git a/examples/ui/audio_player/mp3/Danger Mouse/2004 The Grey Album/03 Encore.mp3 b/examples/ui/audio_player/mp3/Danger Mouse/2004 The Grey Album/01-03 Encore.mp3
similarity index 100%
rename from examples/ui/audio_player/mp3/Danger Mouse/2004 The Grey Album/03 Encore.mp3
rename to examples/ui/audio_player/mp3/Danger Mouse/2004 The Grey Album/01-03 Encore.mp3
diff --git a/examples/ui/audio_player/mp3/Danger Mouse/artwork.png b/examples/ui/audio_player/mp3/Danger Mouse/artwork.png
new file mode 100644
index 00000000..61c12fa2
Binary files /dev/null and b/examples/ui/audio_player/mp3/Danger Mouse/artwork.png differ
diff --git a/examples/ui/audio_player/mp3/Death Grips/2012 No Love Deep Web/03 No Love.mp3 b/examples/ui/audio_player/mp3/Death Grips/2012 No Love Deep Web/01-03 No Love.mp3
similarity index 100%
rename from examples/ui/audio_player/mp3/Death Grips/2012 No Love Deep Web/03 No Love.mp3
rename to examples/ui/audio_player/mp3/Death Grips/2012 No Love Deep Web/01-03 No Love.mp3
diff --git a/examples/ui/audio_player/mp3/Death Grips/2012 No Love Deep Web/09 Deep Web.mp3 b/examples/ui/audio_player/mp3/Death Grips/2012 No Love Deep Web/01-09 Deep Web.mp3
similarity index 100%
rename from examples/ui/audio_player/mp3/Death Grips/2012 No Love Deep Web/09 Deep Web.mp3
rename to examples/ui/audio_player/mp3/Death Grips/2012 No Love Deep Web/01-09 Deep Web.mp3
diff --git a/examples/ui/audio_player/mp3/Death Grips/artwork.png b/examples/ui/audio_player/mp3/Death Grips/artwork.png
new file mode 100644
index 00000000..48e6d15a
Binary files /dev/null and b/examples/ui/audio_player/mp3/Death Grips/artwork.png differ