diff --git a/examples/ui/audio_player/js/example.js b/examples/ui/audio_player/js/example.js
index 91d736d8..e089f1fe 100644
--- a/examples/ui/audio_player/js/example.js
+++ b/examples/ui/audio_player/js/example.js
@@ -12,31 +12,71 @@ Ox.load('UI', function() {
{
album: 'The Grey Album',
artist: 'Danger Mouse',
- duration: 160417,
- src: 'mp3/03 Encore.mp3',
+ bitrate: 128,
+ checked: true,
+ disc: 1,
+ duration: 160.417,
+ file: 'mp3/Danger Mouse/2004 The Grey Album/03 Encore.mp3',
+ genre: 'Hip-Hop',
+ playing: false,
+ size: 2556502,
title: 'Encore',
+ track: 3,
year: '2004'
},
{
- album: 'The Grey Album',
- artist: 'Danger Mouse',
- duration: 214961,
- src: 'mp3/04 December 4th.mp3',
- title: 'December 4th',
- year: '2004'
+ album: 'No Love Deep Web',
+ artist: 'Death Grips',
+ bitrate: 128,
+ checked: true,
+ disc: 1,
+ duration: 303.960,
+ file: 'mp3/Death Grips/2012 No Love Deep Web/03 No Love.mp3',
+ genre: 'Electronic',
+ playing: false,
+ size: 4863327,
+ title: 'No Love',
+ track: 3,
+ year: '2012'
},
{
- album: 'The Grey Album',
- artist: 'Danger Mouse',
- duration: 246857,
- src: 'mp3/05 99 Problems.mp3',
- title: '99 Problems',
- year: '2004'
+ album: 'No Love Deep Web',
+ artist: 'Death Grips',
+ bitrate: 128,
+ checked: true,
+ disc: 1,
+ duration: 138.370,
+ file: 'mp3/Death Grips/2012 No Love Deep Web/09 Deep Web.mp3',
+ genre: 'Electronic',
+ playing: false,
+ size: 2214303,
+ title: 'Deep Web',
+ track: 9,
+ year: '2012'
}
],
$toolbar = Ox.Bar({size: 39}),
+ $audioPlayer = Ox.AudioPlayer({
+ audio: tracks,
+ paused: true,
+ width: window.innerWidth - 205
+ })
+ .css({left: '4px', top: '4px'})
+ .bindEvent({
+ paused: function(data) {
+ paused = data.paused;
+ },
+ track: function(data) {
+ $list.value(tracks[track].file, 'playing', false);
+ track = data.track;
+ $list.value(tracks[track].file, 'playing', true);
+ }
+ })
+ .appendTo($toolbar)
+ .gainFocus(),
+
$viewLabel = Ox.Label({
textAlign: 'center',
title: 'Tracks',
@@ -44,7 +84,7 @@ Ox.load('UI', function() {
})
.css({
position: 'absolute',
- left: '4px',
+ right: '136px',
top: '4px',
paddingTop: '1px',
borderBottomLeftRadius: 0,
@@ -67,7 +107,7 @@ Ox.load('UI', function() {
})
.css({
position: 'absolute',
- left: '4px',
+ right: '136px',
top: '19px'
})
.bindEvent({
@@ -77,25 +117,6 @@ Ox.load('UI', function() {
})
.appendTo($toolbar),
- $audioPlayer = Ox.AudioPlayer({
- audio: tracks,
- paused: true,
- width: window.innerWidth - 205
- })
- .css({left: '69px', top: '4px'})
- .bindEvent({
- paused: function(data) {
- paused = data.paused;
- },
- track: function(data) {
- $list.value(tracks[track].src, 'playing', false);
- track = data.track;
- $list.value(tracks[track].src, 'playing', true);
- }
- })
- .appendTo($toolbar)
- .gainFocus(),
-
$findSelect = Ox.Select({
items: [
{id: 'all', title: 'Find: All'},
@@ -150,25 +171,58 @@ Ox.load('UI', function() {
columns: [
{
format: function(value) {
- if (value) {
- return Ox.Element('![]()
')
+ return value
+ ? Ox.Element('![]()
')
.addClass('playing')
.attr({src: Ox.UI.getImageURL(
paused ? 'symbolUnmute' : 'symbolMute'
)})
- } else {
- return Ox.Element();
- }
+ : Ox.Element();
},
id: 'playing',
+ removable: false,
title: 'Playing',
titleImage: 'mute',
visible: true,
width: 16
},
+ {
+ format: function(value) {
+ return value
+ ? Ox.Element('![]()
')
+ .addClass('playing')
+ .attr({src: Ox.UI.getImageURL(
+ 'symbolCheck'
+ )})
+ : Ox.Element();
+ },
+ id: 'checked',
+ removable: false,
+ title: 'Checked',
+ titleImage: 'check',
+ visible: true,
+ width: 16
+ },
+ {
+ align: 'right',
+ id: 'disc',
+ operator: '+',
+ title: 'Disc',
+ titleImage: 'circle',
+ width: 32
+ },
+ {
+ align: 'right',
+ id: 'track',
+ operator: '+',
+ title: 'Track',
+ titleImage: 'square',
+ width: 32
+ },
{
id: 'title',
operator: '+',
+ removable: false,
title: 'Title',
visible: true,
width: 192
@@ -176,6 +230,7 @@ Ox.load('UI', function() {
{
id: 'artist',
operator: '+',
+ removable: false,
title: 'Artist',
visible: true,
width: 192
@@ -183,6 +238,7 @@ Ox.load('UI', function() {
{
id: 'album',
operator: '+',
+ removable: false,
title: 'Album',
visible: true,
width: 192
@@ -198,35 +254,72 @@ Ox.load('UI', function() {
{
align: 'right',
format: function(value) {
- return Ox.formatDuration(value / 1000).substr(4);
+ return Ox.formatDuration(value).substr(4);
},
id: 'duration',
operator: '-',
title: 'Time',
visible: true,
width: 64
+ },
+ {
+ align: 'right',
+ format: function(value) {
+ return Ox.formatValue(value, 'B');
+ },
+ id: 'size',
+ operator: '-',
+ title: 'Size',
+ visible: true,
+ width: 64
+ },
+ {
+ align: 'right',
+ format: function(value) {
+ return Math.round(value) + ' kbps'
+ },
+ id: 'bitrate',
+ operator: '-',
+ title: 'Bitrate',
+ visible: true,
+ width: 64
+ },
+ {
+ id: 'genre',
+ operator: '+',
+ title: 'Genre',
+ visible: true,
+ width: 128
}
],
+ columnsMovable: true,
+ columnsRemovable: true,
+ columnsResizable: true,
columnsVisible: true,
items: tracks,
max: 1,
- sort: [{key: 'artist', operator: '+'}],
- unique: 'src'
+ sort: [
+ {key: 'artist', operator: '+'},
+ {key: 'year', operator: '+'},
+ {key: 'disc', operator: '+'},
+ {key: 'track', operator: '+'}
+ ],
+ unique: 'file'
})
.bindEvent({
open: function(data) {
- var src = data.ids[0],
+ var file = data.ids[0],
index = Ox.indexOf(tracks, function(track) {
- return track.src == src;
+ return track.file == file;
});
if (index == track) {
- $list.value(tracks[track].src, 'playing', true);
+ $list.value(tracks[track].file, 'playing', true);
$audioPlayer.options({paused: false, position: 0});
} else {
- $list.value(tracks[track].src, 'playing', false);
+ $list.value(tracks[track].file, 'playing', false);
track = index;
$audioPlayer.options({paused: false, track: track});
- $list.value(tracks[track].src, 'playing', true);
+ $list.value(tracks[track].file, 'playing', true);
}
},
openpreview: function(data) {
diff --git a/examples/ui/audio_player/mp3/03 Encore.mp3 b/examples/ui/audio_player/mp3/03 Encore.mp3
deleted file mode 100644
index 2eb72e0c..00000000
Binary files a/examples/ui/audio_player/mp3/03 Encore.mp3 and /dev/null differ
diff --git a/examples/ui/audio_player/mp3/04 December 4th.mp3 b/examples/ui/audio_player/mp3/04 December 4th.mp3
deleted file mode 100644
index af42f652..00000000
Binary files a/examples/ui/audio_player/mp3/04 December 4th.mp3 and /dev/null differ
diff --git a/examples/ui/audio_player/mp3/05 99 Problems.mp3 b/examples/ui/audio_player/mp3/05 99 Problems.mp3
deleted file mode 100644
index bf2e995a..00000000
Binary files a/examples/ui/audio_player/mp3/05 99 Problems.mp3 and /dev/null differ
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/03 Encore.mp3
new file mode 100644
index 00000000..f97b7e09
Binary files /dev/null and b/examples/ui/audio_player/mp3/Danger Mouse/2004 The Grey Album/03 Encore.mp3 differ
diff --git a/examples/ui/audio_player/mp3/Danger Mouse/2004 The Grey Album/artwork.png b/examples/ui/audio_player/mp3/Danger Mouse/2004 The Grey Album/artwork.png
new file mode 100644
index 00000000..e33b5dfb
Binary files /dev/null and b/examples/ui/audio_player/mp3/Danger Mouse/2004 The Grey Album/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/03 No Love.mp3
new file mode 100644
index 00000000..9c24e0db
Binary files /dev/null and b/examples/ui/audio_player/mp3/Death Grips/2012 No Love Deep Web/03 No Love.mp3 differ
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/09 Deep Web.mp3
new file mode 100644
index 00000000..4b485c41
Binary files /dev/null and b/examples/ui/audio_player/mp3/Death Grips/2012 No Love Deep Web/09 Deep Web.mp3 differ
diff --git a/examples/ui/audio_player/mp3/Death Grips/2012 No Love Deep Web/artwork.png b/examples/ui/audio_player/mp3/Death Grips/2012 No Love Deep Web/artwork.png
new file mode 100644
index 00000000..f6589539
Binary files /dev/null and b/examples/ui/audio_player/mp3/Death Grips/2012 No Love Deep Web/artwork.png differ