danbarber/neompc
1
0
Fork 0
mirror of https://github.com/danbee/neompc synced 2025-03-04 08:39:10 +00:00
Code Issues Releases Wiki Activity

~ Volume control works now! Still some tweaking to be done.

Browse Source
This commit is contained in:
Dan Barber 2010-01-13 18:15:57 +00:00
parent db27ac9573
commit 20f5bb09cf
7 changed files with 109 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
control.php
View File

@ -33,6 +33,11 @@
$repeat = ($mympd->repeat == 0 ? 1 : 0); $repeat = ($mympd->repeat == 0 ? 1 : 0);
$mympd->SetRepeat($repeat); $mympd->SetRepeat($repeat);
break; break;
case 'volume':
$volume = $_GET['value'];
$mympd->SetVolume($volume);
die();
break;
} }
echo mpd_info(); echo mpd_info();

70
lib/js/neompc.js
View File

@ -3,6 +3,7 @@ template = '{:$template:}';
volume_min = {:$volume_min:}; volume_min = {:$volume_min:};
volume_max = {:$volume_max:}; volume_max = {:$volume_max:};
vol_orientation = '{:$volume_orientation:}' vol_orientation = '{:$volume_orientation:}'
vol_offset = 0;
String.prototype.pad = function(l, s){ String.prototype.pad = function(l, s){
return (l -= this.length) > 0 ? (s = new Array(Math.ceil(l / s.length) + 1).join(s)).substr(0, s.length) + this + s.substr(0, l - s.length) : this; return (l -= this.length) > 0 ? (s = new Array(Math.ceil(l / s.length) + 1).join(s)).substr(0, s.length) + this + s.substr(0, l - s.length) : this;
@ -14,41 +15,46 @@ function seconds_to_time(seconds) {
} }
function volume_to_pos(volume) { function volume_to_pos(volume) {
pos = volume_min + (volume / 100) * (volume_max - volume_min); pos = Math.round(volume_min + ((volume / 100) * (volume_max - volume_min)));
return pos; return pos;
} }
function pos_to_volume(pos) { function pos_to_volume(pos) {
volume = Math.round(((pos - volume_min) / (volume_max - volume_min)) * 100);
return volume;
} }
function ajax_control(action) { function ajax_control(action, value) {
// this function will fire an AJAX call with the appropriate action. // this function will fire an AJAX call with the appropriate action.
// or it will simply fire an AJAX call to get the current status. // or it will simply fire an AJAX call to get the current status.
$.getJSON('control.php', {action: action}, $.getJSON('control.php', {action: action, value: value},
function(data){ function(data){
// this is where we update the page. // this is where we update the page.
if (data.state == 'play') { if (data != null) {
$('#playpause_button').addClass('pause'); if (data.state == 'play') {
$('#playpause_button').addClass('pause');
}
else {
$('#playpause_button').removeClass('pause');
}
$('#pos').text((data.track_no > -1 ? data.track_no+'.' : ''));
$('#artist').text(data.artist || '');
$('#album').text(data.album || '');
$('#title').text(data.title || '');
$('#cover').attr('src', (data.coverimage ? data.coverimage : 'templates/'+template+'/images/default_cover.png'));
$('#current').text((data.position > -1 ? seconds_to_time(data.position) : '--:--'));
if (data.repeat == 1) {
$('#repeat_button').addClass('selected');
}
else {
$('#repeat_button').removeClass('selected');
}
if ($('#volume_slider').attr('rel') != '1') {
$('#volume_slider').css((vol_orientation == 'h' ? 'left' : 'top'), volume_to_pos(data.volume)+'px');
}
update_progress(data.position, data.length);
} }
else {
$('#playpause_button').removeClass('pause');
}
$('#pos').text((data.track_no > -1 ? data.track_no+'.' : ''));
$('#artist').text(data.artist || '');
$('#album').text(data.album || '');
$('#title').text(data.title || '');
$('#cover').attr('src', (data.coverimage ? data.coverimage : 'templates/'+template+'/images/default_cover.png'));
$('#current').text((data.position > -1 ? seconds_to_time(data.position) : '--:--'));
if (data.repeat == 1) {
$('#repeat_button').addClass('selected');
}
else {
$('#repeat_button').removeClass('selected');
}
$('#volume_slider').css('top', volume_to_pos(data.volume)+'px');
update_progress(data.position, data.length);
}); });
} }
@ -85,8 +91,6 @@ function show_volume() {
$(document).ready(function(){ $(document).ready(function(){
update_int = null;
$('.control_button').click(function(event){ $('.control_button').click(function(event){
ajax_control(this.rel); ajax_control(this.rel);
this.blur(); this.blur();
@ -98,11 +102,25 @@ $(document).ready(function(){
return false; return false;
}); });
$('#volume_container').click(function(event){ $('#volume_hide').click(function(event){
hide_volume(); hide_volume();
return false; return false;
}); });
$('#volume_slider').draggable({
axis: 'y',
containment: 'parent',
opacity: 0.5,
start: function() {
this.rel = '1';
},
stop: function() {
pos = parseInt($('#volume_slider').css('top'));
ajax_control('volume', pos_to_volume(pos));
this.rel = '';
}
});
ajax_control(); ajax_control();
ajax_int = setInterval('ajax_control()', 1000); ajax_int = setInterval('ajax_control()', 1000);

72
smarty/templates_c/%%FD^FD6^FD689738%%neompc.js.php
View File

@ -1,4 +1,4 @@
<?php /* Smarty version 2.6.26, created on 2010-01-12 20:03:58 <?php /* Smarty version 2.6.26, created on 2010-01-13 17:13:45
compiled from ../lib/js/neompc.js */ ?> compiled from ../lib/js/neompc.js */ ?>
progressbar_width = <?php echo $this->_tpl_vars['progressbar_width']; ?> progressbar_width = <?php echo $this->_tpl_vars['progressbar_width']; ?>
; ;
@ -10,6 +10,7 @@ volume_max = <?php echo $this->_tpl_vars['volume_max']; ?>
; ;
vol_orientation = '<?php echo $this->_tpl_vars['volume_orientation']; ?> vol_orientation = '<?php echo $this->_tpl_vars['volume_orientation']; ?>
' '
vol_offset = 0;
String.prototype.pad = function(l, s){ String.prototype.pad = function(l, s){
return (l -= this.length) > 0 ? (s = new Array(Math.ceil(l / s.length) + 1).join(s)).substr(0, s.length) + this + s.substr(0, l - s.length) : this; return (l -= this.length) > 0 ? (s = new Array(Math.ceil(l / s.length) + 1).join(s)).substr(0, s.length) + this + s.substr(0, l - s.length) : this;
@ -21,41 +22,46 @@ function seconds_to_time(seconds) {
} }
function volume_to_pos(volume) { function volume_to_pos(volume) {
pos = volume_min + (volume / 100) * (volume_max - volume_min); pos = Math.round(volume_min + ((volume / 100) * (volume_max - volume_min)));
return pos; return pos;
} }
function pos_to_volume(pos) { function pos_to_volume(pos) {
volume = Math.round(((pos - volume_min) / (volume_max - volume_min)) * 100);
return volume;
} }
function ajax_control(action) { function ajax_control(action, value) {
// this function will fire an AJAX call with the appropriate action. // this function will fire an AJAX call with the appropriate action.
// or it will simply fire an AJAX call to get the current status. // or it will simply fire an AJAX call to get the current status.
$.getJSON('control.php', {action: action}, $.getJSON('control.php', {action: action, value: value},
function(data){ function(data){
// this is where we update the page. // this is where we update the page.
if (data.state == 'play') { if (data != null) {
$('#playpause_button').addClass('pause'); if (data.state == 'play') {
$('#playpause_button').addClass('pause');
}
else {
$('#playpause_button').removeClass('pause');
}
$('#pos').text((data.track_no > -1 ? data.track_no+'.' : ''));
$('#artist').text(data.artist || '');
$('#album').text(data.album || '');
$('#title').text(data.title || '');
$('#cover').attr('src', (data.coverimage ? data.coverimage : 'templates/'+template+'/images/default_cover.png'));
$('#current').text((data.position > -1 ? seconds_to_time(data.position) : '--:--'));
if (data.repeat == 1) {
$('#repeat_button').addClass('selected');
}
else {
$('#repeat_button').removeClass('selected');
}
if ($('#volume_slider').attr('rel') != '1') {
$('#volume_slider').css((vol_orientation == 'h' ? 'left' : 'top'), volume_to_pos(data.volume)+'px');
}
update_progress(data.position, data.length);
} }
else {
$('#playpause_button').removeClass('pause');
}
$('#pos').text((data.track_no > -1 ? data.track_no+'.' : ''));
$('#artist').text(data.artist || '');
$('#album').text(data.album || '');
$('#title').text(data.title || '');
$('#cover').attr('src', (data.coverimage ? data.coverimage : 'templates/'+template+'/images/default_cover.png'));
$('#current').text((data.position > -1 ? seconds_to_time(data.position) : '--:--'));
if (data.repeat == 1) {
$('#repeat_button').addClass('selected');
}
else {
$('#repeat_button').removeClass('selected');
}
$('#volume_slider').css('top', volume_to_pos(data.volume)+'px');
update_progress(data.position, data.length);
}); });
} }
@ -92,8 +98,6 @@ function show_volume() {
$(document).ready(function(){ $(document).ready(function(){
update_int = null;
$('.control_button').click(function(event){ $('.control_button').click(function(event){
ajax_control(this.rel); ajax_control(this.rel);
this.blur(); this.blur();
@ -105,11 +109,25 @@ $(document).ready(function(){
return false; return false;
}); });
$('#volume_container').click(function(event){ $('#volume_hide').click(function(event){
hide_volume(); hide_volume();
return false; return false;
}); });
$('#volume_slider').draggable({
axis: 'y',
containment: 'parent',
opacity: 0.5,
start: function() {
this.rel = '1';
},
stop: function() {
pos = parseInt($('#volume_slider').css('top'));
ajax_control('volume', pos_to_volume(pos));
this.rel = '';
}
});
ajax_control(); ajax_control();
ajax_int = setInterval('ajax_control()', 1000); ajax_int = setInterval('ajax_control()', 1000);

4
templates/default/config.inc.php
View File

@ -7,7 +7,7 @@
$_CONFIG['progress_bar_width'] = 276; $_CONFIG['progress_bar_width'] = 276;
$_CONFIG['volume_orientation'] = 'v'; $_CONFIG['volume_orientation'] = 'v';
$_CONFIG['volume_max'] = 5; $_CONFIG['volume_max'] = 0;
$_CONFIG['volume_min'] = 105; $_CONFIG['volume_min'] = 100;
?> ?>

8
templates/default/control.html
View File

@ -17,7 +17,7 @@
<div id="album_info"><p id="artist"></p><p id="album"></p></div> <div id="album_info"><p id="artist"></p><p id="album"></p></div>
<div id="tracktime"><span id="current">--:--</span></div> <div id="tracktime"><span id="current">--:--</span><span id="volume_display"></span></div>
<div id="progress"><div id="progressbar" style="margin-right: 100%;">&nbsp;</div></div> <div id="progress"><div id="progressbar" style="margin-right: 100%;">&nbsp;</div></div>
@ -37,8 +37,10 @@
</ul> </ul>
<div id="volume_repeat"> <div id="volume_repeat">
<div id="volume_container"> <div id="volume_container">
<a id="volume_slider"></a> <div id="slider_container">
<a id="volume_hide" href="index.php?action=hide_volume"></a> <a id="volume_slider"></a>
<a id="volume_hide" href="index.php?action=hide_volume"></a>
</div>
</div> </div>
<a rel="volume" id="volume_button" href="index.php?action=show_volume"></a> <a rel="volume" id="volume_button" href="index.php?action=show_volume"></a>
<a rel="repeat" id="repeat_button" class="control_button" href="index.php?action=repeat"></a> <a rel="repeat" id="repeat_button" class="control_button" href="index.php?action=repeat"></a>

1
templates/default/index.html
View File

@ -11,6 +11,7 @@
</style> </style>
<script type="text/javascript" src="lib/js/jquery-min.js"></script> <script type="text/javascript" src="lib/js/jquery-min.js"></script>
<script type="text/javascript" src="lib/js/jquery-ui-custom-min.js"></script>
<script type="text/javascript"> <script type="text/javascript">
{:include file="../lib/js/neompc.js":} {:include file="../lib/js/neompc.js":}
</script> </script>

8
templates/default/styles.css
View File

@ -231,6 +231,12 @@ img.button {
height: 160px; height: 160px;
width: 30px; width: 30px;
} }
#volume_container #slider_container {
position: absolute;
top: 5px;
height: 130px;
width: 28px;
}
#volume_container a#volume_hide { #volume_container a#volume_hide {
position: absolute; position: absolute;
top: 140px; top: 140px;
@ -238,7 +244,7 @@ img.button {
width: 30px; width: 30px;
height: 20px; height: 20px;
} }
#volume_container a#volume_slider { #volume_container #volume_slider {
background: url(templates/{:$template:}/images/volume_slider.png) center center no-repeat; background: url(templates/{:$template:}/images/volume_slider.png) center center no-repeat;
position: absolute; position: absolute;
top: 5px; top: 5px;