oxjs/examples/ui/audio_player/js/example.js

/*
...
*/

'use strict';

Ox.load('UI', function() {

    var paused = true,
        track = 0,
        tracks = [
            {
                album: 'The Grey Album',
                artist: 'Danger Mouse',
                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: '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: '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',
                width: 61
            })
            .css({
                position: 'absolute',
                right: '136px',
                top: '4px',
                paddingTop: '1px',
                borderBottomLeftRadius: 0,
                borderBottomRightRadius: 0,
                fontSize: '10px'
            })
            .appendTo($toolbar),

        $viewButtons = Ox.ButtonGroup({
                buttons: [
                    {id: 'tracks', title: 'list', tooltip: 'View Tracks'},
                    {id: 'albums', title: 'iconlist', tooltip: 'View Albums'},
                    {id: 'grid', title: 'grid', tooltip: 'View Grid'},
                    {id: 'columns', title: 'columns', tooltip: 'View Columns'}
                ],
                max: 1,
                min: 1,
                selectable: true,
                type: 'image'
            })
            .css({
                position: 'absolute',
                right: '136px',
                top: '19px'
            })
            .bindEvent({
                change: function(data) {
                    $viewLabel.options({title: Ox.toTitleCase(data.value)});
                }
            })
            .appendTo($toolbar),

        $findSelect = Ox.Select({
                items: [
                    {id: 'all', title: 'Find: All'},
                    {id: 'tracks', title: 'Find: Tracks'},
                    {id: 'artists', title: 'Find: Artists'},
                    {id: 'albums', title: 'Find: Albums'}
                ],
                overlap: 'left',
                type: 'image'
            })
            .css({
                position: 'absolute',
                right: '4px',
                top: '4px',
                borderBottomRightRadius: 0
            })
            .bindEvent({
                change: function(data) {
                    $findLabel.options({title: data.title});
                }
            })
            .appendTo($toolbar),
        
        $findLabel = Ox.Label({
                title: 'Find: All',
                width: 112
            })
            .css({
                position: 'absolute',
                right: '20px',
                top: '4px',
                paddingTop: '1px',
                borderBottomLeftRadius: 0,
                borderBottomRightRadius: 0,
                fontSize: '10px'
            })
            .appendTo($toolbar),

        $findInput = Ox.Input({
                clear: true,
                width: 128
            })
            .css({
                position: 'absolute',
                right: '4px',
                top: '19px',
                borderTopLeftRadius: 0
            })
            .appendTo($toolbar),

        $list = Ox.TableList({
                columns: [
                    {
                        format: function(value) {
                            return value
                                ? Ox.Element('<img>')
                                    .addClass('playing')
                                    .attr({src: Ox.UI.getImageURL(
                                        paused ? 'symbolUnmute' : 'symbolMute'
                                    )})
                                : 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
                    },
                    {
                        id: 'artist',
                        operator: '+',
                        removable: false,
                        title: 'Artist',
                        visible: true,
                        width: 192
                    },
                    {
                        id: 'album',
                        operator: '+',
                        removable: false,
                        title: 'Album',
                        visible: true,
                        width: 192
                    },
                    {
                        align: 'right',
                        id: 'year',
                        operator: '+',
                        title: 'Year',
                        visible: true,
                        width: 64
                    },
                    {
                        align: 'right',
                        format: function(value) {
                            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: '+'},
                    {key: 'year', operator: '+'},
                    {key: 'disc', operator: '+'},
                    {key: 'track', operator: '+'}
                ],
                unique: 'file'
            })
            .bindEvent({
                open: function(data) {
                    var file = data.ids[0],
                        index = Ox.indexOf(tracks, function(track) {
                            return track.file == file;
                        });
                    if (index == track) {
                        $list.value(tracks[track].file, 'playing', true);
                        $audioPlayer.options({paused: false, position: 0});
                    } else {
                        $list.value(tracks[track].file, 'playing', false);
                        track = index;
                        $audioPlayer.options({paused: false, track: track});
                        $list.value(tracks[track].file, 'playing', true);
                    }
                },
                openpreview: function(data) {
                    paused = !paused;
                    $audioPlayer.options({paused: paused});
                    $list.closePreview();
                }
            }),

        $panel = Ox.SplitPanel({
                elements: [
                    {element: $toolbar, size: 39},
                    {element: $list}
                ],
                orientation: 'vertical'
            })
            .appendTo(Ox.$body);

    $($viewButtons.find('.OxButton')[0]).css({borderTopLeftRadius: 0});
    $($viewButtons.find('.OxButton')[3]).css({borderTopRightRadius: 0});
    $findInput.find('input').css({borderTopLeftRadius: 0, borderTopRightRadius: 0});
    $findInput.find('.OxButton').css({borderTopRightRadius: 0});

});