update audio example

examples/ui/audio_player/js/example.js

@@ -12,31 +12,71 @@ Ox.load('UI', function() {
             {
                 album: 'The Grey Album',
                 artist: 'Danger Mouse',
-                duration: 160417,
+                bitrate: 128,
-                src: 'mp3/03 Encore.mp3',
+                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',
+                album: 'No Love Deep Web',
-                artist: 'Danger Mouse',
+                artist: 'Death Grips',
-                duration: 214961,
+                bitrate: 128,
-                src: 'mp3/04 December 4th.mp3',
+                checked: true,
-                title: 'December 4th',
+                disc: 1,
-                year: '2004'
+                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',
+                album: 'No Love Deep Web',
-                artist: 'Danger Mouse',
+                artist: 'Death Grips',
-                duration: 246857,
+                bitrate: 128,
-                src: 'mp3/05 99 Problems.mp3',
+                checked: true,
-                title: '99 Problems',
+                disc: 1,
-                year: '2004'
+                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 value
-                                return Ox.Element('<img>')
+                                ? Ox.Element('<img>')
                                     .addClass('playing')
                                     .attr({src: Ox.UI.getImageURL(
                                         paused ? 'symbolUnmute' : 'symbolMute'
                                     )})
-                            } else {
+                                : Ox.Element();
-                                return Ox.Element();
-                            }
                         },
                         id: 'playing',
+                        removable: false,
                         title: 'Playing',
                         titleImage: 'mute',
                         visible: true,
                         width: 16
                     },
+                    {
+                        format: function(value) {
+                            return value
+                                ? Ox.Element('<img>')
+                                    .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: '+'}],
+                sort: [
-                unique: 'src'
+                    {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) {