add audio player example
This commit is contained in:
rolux
parent
074b658814
commit
626201894b
6 changed files with 272 additions and 0 deletions
5
examples/ui/audio_player/css/example.css
Normal file
5
examples/ui/audio_player/css/example.css
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
.OxTableList .OxItem .OxCell > img.playing {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
margin: 2px 0 0 -1px;
|
||||
}
|
||||
14
examples/ui/audio_player/index.html
Normal file
14
examples/ui/audio_player/index.html
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Audio Player</title>
|
||||
<meta http-equiv="Keywords" content="UI"/>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<link rel="shortcut icon" type="image/png" href="../../../source/Ox.UI/themes/classic/png/icon16.png"/>
|
||||
<link rel="stylesheet" type="text/css" href="css/example.css"/>
|
||||
<script type="text/javascript" src="../../../build/Ox.js"></script>
|
||||
<script type="text/javascript" src="js/example.js"></script>
|
||||
<script>window.addEventListener('message', function(e) { e.origin == window.location.origin && eval(e.data); });</script>
|
||||
</head>
|
||||
<body></body>
|
||||
</html>
|
||||
253
examples/ui/audio_player/js/example.js
Normal file
253
examples/ui/audio_player/js/example.js
Normal file
|
|
@ -0,0 +1,253 @@
|
|||
/*
|
||||
...
|
||||
*/
|
||||
|
||||
'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});
|
||||
|
||||
});
|
||||
BIN
examples/ui/audio_player/mp3/03 Encore.mp3
Normal file
BIN
examples/ui/audio_player/mp3/03 Encore.mp3
Normal file
Binary file not shown.
BIN
examples/ui/audio_player/mp3/04 December 4th.mp3
Normal file
BIN
examples/ui/audio_player/mp3/04 December 4th.mp3
Normal file
Binary file not shown.
BIN
examples/ui/audio_player/mp3/05 99 Problems.mp3
Normal file
BIN
examples/ui/audio_player/mp3/05 99 Problems.mp3
Normal file
Binary file not shown.
Loading…
Reference in a new issue