From 2cfbf0fc5faa0ea8ecfb772f9b305352511b55bf Mon Sep 17 00:00:00 2001 From: Dan Barber Date: Tue, 15 May 2007 14:27:13 +0000 Subject: [PATCH] + Added track progress bar to the control screen. The javascript is untested in Pocket IE. - Removed spurious styles.css file in the root directory. --- config/config.inc.php | 2 +- lib/javascript.js | 31 ++++++++++++++++++ lib/page.php | 7 ++++ styles.css | 59 ---------------------------------- templates/default/control.html | 5 ++- templates/default/index.html | 14 +++++--- templates/default/styles.css | 17 ++++++++++ 7 files changed, 69 insertions(+), 66 deletions(-) create mode 100644 lib/javascript.js delete mode 100644 styles.css diff --git a/config/config.inc.php b/config/config.inc.php index 96a46f8..d017463 100644 --- a/config/config.inc.php +++ b/config/config.inc.php @@ -6,7 +6,7 @@ /* Config relating to the display of CD covers */ /* music_directory must match you MPD music_directory config */ - $_CONFIG['music_directory'] = '/home/media/data/audio'; + $_CONFIG['music_directory'] = '/home/danbee/Music'; $_CONFIG['album_cover_name'] = 'folder.jpg'; $_CONFIG['album_cover_size'] = 130; diff --git a/lib/javascript.js b/lib/javascript.js new file mode 100644 index 0000000..028d382 --- /dev/null +++ b/lib/javascript.js @@ -0,0 +1,31 @@ + + song_length = {$song_length}; + song_position = {$song_position}; + + mpd_state = '{$mpd_state}'; + + {literal} + + function update_progress() { + + progressbar = document.getElementById('progressbar'); + + new_margin = Math.round(200 - ((song_position / song_length) * 200)); + + new_margin_string = new_margin + 'px'; + + progressbar.style.marginRight = new_margin_string; + + //alert(progressbar.style.marginRight + ' - ' + new_margin_string); + + if (song_position < song_length) { + song_position = song_position + 1; + } + + } + + if (mpd_state == 'play') { + update_int = setInterval('update_progress()', 1000); + } + + {/literal} diff --git a/lib/page.php b/lib/page.php index c911485..a2e365c 100644 --- a/lib/page.php +++ b/lib/page.php @@ -25,6 +25,9 @@ $smarty->assign('current_album', $current_track['Album']); $smarty->assign('current_artist', $current_track['Artist']); $smarty->assign('current_file', $current_track['file']); + $smarty->assign('song_length', $mympd->current_track_length); + $smarty->assign('song_position', $mympd->current_track_position); + $smarty->assign('mpd_state', $mympd->state); $cover_link = $_CONFIG['music_directory'] . '/' . substr($current_track['file'], 0, strrpos($current_track['file'], '/') + 1) @@ -37,6 +40,10 @@ $time_left = (($mympd->current_track_length - $mympd->current_track_position) + 2) * 1000; + $initialprogress = round(200 - (($mympd->current_track_position / $mympd->current_track_length) * 200)); + + $smarty->assign('initialprogress', $initialprogress); + //echo $time_left / 1000; if ($mympd->state == MPD_STATE_PLAYING) { diff --git a/styles.css b/styles.css deleted file mode 100644 index 80150ea..0000000 --- a/styles.css +++ /dev/null @@ -1,59 +0,0 @@ -{literal} -* { - margin: 0px; - padding: 0px; -} -img { - border: 0; -} -a { - text-decoration: none; - color: #fff; -} -body { - background: #000; - color: #fff; - font: 10px verdana,sans-serif; -} -#menu { - background: #000; - /* position: fixed; */ - width: 219px; - padding: 2px; - z-index: 1; -} -#menu a { - background: #444; - padding: 1px 0px 3px; - float: left; - margin-left: 2px; - display: block; - width: 32%; - text-align: center; - font-weight: bold; -} -#menu a:hover { - background: #666; -} -#menu a:active { - background: #ccc; - color: #000; -} -#page { - position: absolute; - top: 15px; - padding: 10px; - clear: left; -} -#page ul { - list-style-type: none; - width: 200px; -} -#page ul li { - padding: 0px 1px 1px; - border-bottom: 1px solid #666; -} -#page ul img { - margin: 2px 2px -1px 2px; -} -{/literal} \ No newline at end of file diff --git a/templates/default/control.html b/templates/default/control.html index 5548700..cf5b07d 100644 --- a/templates/default/control.html +++ b/templates/default/control.html @@ -1,5 +1,8 @@
{if $current_title}{$current_track_no+1|string_format:"%02d"}. {$current_title}
{$current_artist} {if $current_album}{/if}{elseif $current_file}{$current_file}{else}
[Nothing playing]{/if}
- {if $coverimage}
{/if} + {if $coverimage}
{/if} + + +
 
PreviousPlayPauseStopNext
diff --git a/templates/default/index.html b/templates/default/index.html index b93bf80..01b1d2c 100644 --- a/templates/default/index.html +++ b/templates/default/index.html @@ -3,19 +3,21 @@ - Neo MPC {$version} + NeoMPC {$version} - + + - {$refresh} - + + {include file="default/menu.html"}
@@ -24,6 +26,8 @@
+ {$refresh} + diff --git a/templates/default/styles.css b/templates/default/styles.css index 65efa58..b4ff2e5 100644 --- a/templates/default/styles.css +++ b/templates/default/styles.css @@ -134,6 +134,23 @@ img.button { } li.playing { background: #444; +} +#progress { + border: 1px solid #666; + padding: 2px; + width: 200px; + height: 6px; + margin-top: 3px; + margin-left: auto; + margin-right: auto; + text-align: left; +} +#progressbar { + font-size: 1px; + background: #ddd; + height: 6px; + margin: 0px; + padding: 0px; } img#cover { border: 1px solid #666;