diff --git a/examples/ui/audio_player/js/example.js b/examples/ui/audio_player/js/example.js index 960e662d..dbc2e90a 100644 --- a/examples/ui/audio_player/js/example.js +++ b/examples/ui/audio_player/js/example.js @@ -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('') + .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 = $('
') + .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', - width: 256 + 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' + 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({ - - }); - $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 = $('
') - .css({width: '256px', 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: '220px', - fontSize: '13px', - textOverflow: 'ellipsis' - }) - .html(data.title ? data.title : '') - .appendTo($item); - $('
') - .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' + }); + } + });