346 lines
12 KiB
JavaScript
346 lines
12 KiB
JavaScript
/*
|
|
...
|
|
*/
|
|
|
|
'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});
|
|
|
|
});
|