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',
                duration: 160417,
                src: 'mp3/03 Encore.mp3',
                title: 'Encore',
                year: '2004'
            },
            {
                album: 'The Grey Album',
                artist: 'Danger Mouse',
                duration: 214961,
                src: 'mp3/04 December 4th.mp3',
                title: 'December 4th',
                year: '2004'
            },
            {
                album: 'The Grey Album',
                artist: 'Danger Mouse',
                duration: 246857,
                src: 'mp3/05 99 Problems.mp3',
                title: '99 Problems',
                year: '2004'
            }
        ],
    
        $toolbar = Ox.Bar({size: 39}),

        $viewLabel = Ox.Label({
                textAlign: 'center',
                title: 'Tracks',
                width: 61
            })
            .css({
                position: 'absolute',
                left: '4px',
                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',
                left: '4px',
                top: '19px'
            })
            .bindEvent({
                change: function(data) {
                    $viewLabel.options({title: Ox.toTitleCase(data.value)});
                }
            })
            .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'},
                    {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) {
                            if (value) {
                                return Ox.Element('<img>')
                                    .addClass('playing')
                                    .attr({src: Ox.UI.getImageURL(
                                        paused ? 'symbolUnmute' : 'symbolMute'
                                    )})
                            } else {
                                return Ox.Element();
                            }
                        },
                        id: 'playing',
                        title: 'Playing',
                        titleImage: 'mute',
                        visible: true,
                        width: 16
                    },
                    {
                        id: 'title',
                        operator: '+',
                        title: 'Title',
                        visible: true,
                        width: 192
                    },
                    {
                        id: 'artist',
                        operator: '+',
                        title: 'Artist',
                        visible: true,
                        width: 192
                    },
                    {
                        id: 'album',
                        operator: '+',
                        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 / 1000).substr(4);
                        },
                        id: 'duration',
                        operator: '-',
                        title: 'Time',
                        visible: true,
                        width: 64
                    }
                ],
                columnsVisible: true,
                items: tracks,
                max: 1,
                sort: [{key: 'artist', operator: '+'}],
                unique: 'src'
            })
            .bindEvent({
                open: function(data) {
                    var src = data.ids[0],
                        index = Ox.indexOf(tracks, function(track) {
                            return track.src == src;
                        });
                    if (index == track) {
                        $list.value(tracks[track].src, 'playing', true);
                        $audioPlayer.options({paused: false, position: 0});
                    } else {
                        $list.value(tracks[track].src, 'playing', false);
                        track = index;
                        $audioPlayer.options({paused: false, track: track});
                        $list.value(tracks[track].src, '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});

});