Commit f1eebe9c authored by Jonas Haraldsson's avatar Jonas Haraldsson

player.tpl clean-up

Moved most js into player.js
Moved css into modern.css
Replaced jquery placeholdr plugin with html5 placeholder attribute
Display loading message while waiting for player to get ready
Display player problems box by default, hide it in js
parent cfb37e8f
......@@ -30,7 +30,6 @@ var playlist = [], current_song = 0;
var player_ready = false;
var playable_songs = false;
var streaming = false;
var example_tags = "e.g. guitar, violin, female vocals, piano";
var error_count = 0;
var base_url = base_url || "";
......@@ -60,7 +59,19 @@ function playerInit(list, sk, ws, rk, stationurl) {
}
return;
}
$("#fallbackembed").remove(); // Get rid of the fallback embed, otherwise some html5 browsers will play it in addition to the js player
// Get rid of the fallback embed, otherwise some html5 browsers will play it in addition to the js player
$("#fallbackembed").remove();
// Make "Player problems?" clickable and hide problems box
$('#toggleproblems').css({'text-decoration' : 'underline', 'cursor':'pointer'});
$('#toggleproblems').on('click', function() {
$('#player #problems').slideToggle(500);
});
$('#player #problems').hide();
// Display a message while waiting for player to get ready
$('#player #loading').text('Readying player and fetching playlist, this may take a while..');
if (streaming) {
// Logged in users need to tune to station
if(!rk && station) {
......@@ -89,25 +100,53 @@ function playerReady() {
audio.addEventListener("ended", songEnded, false);
audio.addEventListener("error", songError, false);
updateProgress();
/**
* Set initial element properties
*/
$('#skipback').on('click', skipBack);
$('#seekback').on('click', seekBack);
$('#seekback').fadeTo("normal", 0.5);
//$('#seekback').hide();
$('#seekforward').on('click', seekForward);
$('#seekforward').fadeTo("normal", 0.5);
//$('#seekforward').hide();
$('#skipforward').on('click', skipForward);
$('#showplaylist').on('click', togglePlaylist);
$('#playlist').hide();
$('#hideplaylist').on('click', togglePlaylist);
$('#hideplaylist').hide();
$('#scrobbled').hide();
$('#play').on('click', play);
$("#play").fadeTo("normal", 1);
$("#pause").fadeTo("normal", 1);
$('#pause').on('click', pause);
$("#pause").hide();
$("#ban").fadeTo("normal", 1);
$("#love").fadeTo("normal", 1);
$("#open_tag").fadeTo("normal", 1);
$('#volume').on('click', toggleVolume);
$("#volume").fadeTo("normal", 1);
$("#player > #interface").show();
$("#tags").placeholdr({placeholderText: example_tags});
$('#volume-box').hide();
$("#volume-slider").slider({range: "min", min: 0, max: 100, value: 60, slide: setVolume});
loadVolume();
$("#progress-slider").slider({
value:0, range: "min", min:0, max:100, slide: function(event, progress) {
setProgress(progress.value);
}
});
// If logged in, enable tune buttons
if(ws_key) {
$('#tracktags').show();
if (ws_key) {
// Logged in
$('#artistname').addClass('tunebutton');
$('#artistname').prop('title', 'Tune to artist station');
$('#artistname').on('click', function(event) {
......@@ -115,13 +154,44 @@ function playerReady() {
var artiststation = 'librefm://artist/' + artistname;
tune(artiststation);
});
$('#tracktags ul').on('click', 'li', function(event) {
var tagname = event.target.textContent;
var tagstation = 'librefm://globaltags/' + tagname;
tune(tagstation);
});
$("#ban").fadeTo("normal", 1);
$('#ban').on('click', ban);
$('#love').on('click', love);
$("#love").fadeTo("normal", 1);
$('#open_tag').on('click', toggleTag);
$("#open_tag").fadeTo("normal", 1);
$('#close_tag').on('click', toggleTag);
$('#close_tag').hide();
$('#tag_button').on('click', tag);
$('#tags').keyup(function(event) {
if(event.keyCode == 13) {
tag();
}
});
$('#tag_input').hide();
} else {
// Not logged in
$('#tracktags').remove();
$('#ban').remove();
$('#love').remove();
$('#close_tag').remove();
$('#open_tag').remove();
$('#tag_input').remove();
}
loadVolume();
$('#player #loading').remove();
$("#player > #interface").show();
player_ready = true;
}
......@@ -527,7 +597,7 @@ function toggleTag() {
function tag() {
var tags = $("#tags").val();
if (tags != example_tags && tags != "") {
if (tags != "") {
$.post(base_url + "/2.0/", {'method' : 'track.addtags', 'artist' : artist, 'track' : track, 'tags' : tags, 'sk' : ws_key}, function(data) {}, "text");
toggleTag();
$("#tags").val("");
......
......@@ -68,7 +68,7 @@ td { vertical-align: top; }
Author: Jonathan Verrecchia
=================================================== */
body{ font:16px/24px sans-serif; }
body{ font:12px/18px sans-serif; }
.wrapper{
width:90%;
......@@ -111,20 +111,21 @@ body{ font:16px/24px sans-serif; }
text-align: right;
width: 340px;
}
#playerproblems {
text-align: justify;
#player #fallbackembed {
width:200px;
height:50px;
}
#player > #interface {
border: 1px solid black;
border-radius: 8px 8px 8px 8px;
color: white;
color: black;
display: none;
padding: 10px 10px 0;
text-align: left;
width: 320px;
}
#player > #interface > #p_buttons a {
opacity: 0.5;
#player > #interface .btn {
cursor: pointer;
}
#player > #interface > #progress {
text-align: right;
......@@ -138,9 +139,6 @@ body{ font:16px/24px sans-serif; }
overflow: hidden;
padding: 3px 5px;
}
#trackinfo > #tracktags {
display:none;
}
#trackinfo > #tracktags ul {
display:inline;
padding:0px;
......@@ -159,7 +157,6 @@ body{ font:16px/24px sans-serif; }
}
#interface > #playlist {
border-radius: 8px;
display: none;
background-color: white;
border: 1px solid black;
margin-bottom:10px;
......@@ -177,12 +174,10 @@ body{ font:16px/24px sans-serif; }
margin-top: 2px;
}
#hideplaylist {
display: none;
float: right;
margin-top: 2px;
}
#scrobbled {
display: none;
float: left;
}
#volume-box {
......@@ -190,6 +185,19 @@ body{ font:16px/24px sans-serif; }
margin-bottom: 1em;
padding: 0;
}
#tag_input input {
width: 75%;
margin-top: 5px;
}
#tag_input #tag_button {
width: 20%;
margin-top: 4px;
float: right;
}
#player #problems {
width: 75%;
text-align: justify;
}
.ui-widget {
font-family: Verdana,Arial,sans-serif;
font-size: 1.1em;
......
......@@ -2,24 +2,19 @@
<audio id="audio" autobuffer>
{if $track->streamurl}
<object id="fallbackembed" style="width:200px;height:50px;" type="application/ogg" data="{$track->streamurl}"><a type="application/ogg" rel="enclosure" href="{$track->streamurl}">Listen to this track</a></object>
{elseif isset($radio_session)}
<p>{t escape=no}Player problems? The player currently works in <a href='http://www.chromium.org/Home'>Chromium</a> and <a href='http://www.gnu.org/software/gnuzilla/'>Icecat</a>/<a href='http://www.mozilla.org/en/firefox/'>Firefox</a> 3.5 or later &mdash; it may also work in Chrome and Opera, though we don't recommend them.</p><p>Firefox users may experience problems under Ubuntu due to <a href='https://bugs.launchpad.net/ubuntu/+source/firefox/+bug/450684'>bug #450684</a>.{/t}</p>
<object id="fallbackembed" type="application/ogg" data="{$track->streamurl}"><a type="application/ogg" rel="enclosure" href="{$track->streamurl}">Listen to this track</a></object>
{/if}
</audio>
<p id="loading"></p>
<div id="interface">
<div id="trackinfo">
<span id="artistname"></span> - <span id="trackname"></span> <span id="showplaylist"><a href="#" onclick="togglePlaylist(); return false;"><img src="{$img_url}/player/show-playlist.png" alt="{t}Show playlist{/t}" title="{t}Show playlist{/t}" /></a></span><span id="hideplaylist"><a href="#" onclick="togglePlaylist(); return false;"><img src="{$img_url}/player/hide-playlist.png" alt="{t}Hide playlist{/t}" title="{t}Hide playlist{/t}" /></a></span>
{if $logged_in}
<span id="artistname"></span> - <span id="trackname"></span><img id="showplaylist" class="btn" src="{$img_url}/player/show-playlist.png" alt="{t}Show playlist{/t}" title="{t}Show playlist{/t}" /><img id="hideplaylist" class="btn" src="{$img_url}/player/hide-playlist.png" alt="{t}Hide playlist{/t}" title="{t}Hide playlist{/t}" />
<div id="tracktags">
<ul>
</ul>
</div>
{/if}
</div>
<div id="progress">
......@@ -29,39 +24,26 @@
</div>
<div id="p_buttons">
{if $logged_in}
<a href="#" onclick="ban(); return false;" id="ban"><img src="{$img_url}/player/ban.png" alt="{t}Ban{/t}" title="{t}Ban{/t}" /></a>
{/if}
<a href="#" onclick="skipBack(); return false;" id="skipback"><img src="{$img_url}/player/skip-backward.png" alt="{t}Skip Backwards{/t}" title="{t}Skip Backwards{/t}" /></a>
<a href="#" onclick="seekBack(); return false;" id="seekback"><img src="{$img_url}/player/seek-backward.png" alt="{t}Seek Backwards{/t}" title="{t}Seek Backwards{/t}" /></a>
<a href="#" onclick="play(); return false;" id="play"><img src="{$img_url}/player/play.png" alt="{t}Play{/t}" title="{t}Play{/t}" /></a>
<a href="#" onclick="pause(); return false;" id="pause"><img src="{$img_url}/player/pause.png" alt="{t}Pause{/t}" title="{t}Pause{/t}" /></a>
<a href="#" onclick="seekForward(); return false;" id="seekforward"><img src="{$img_url}/player/seek-forward.png" alt="{t}Seek Forwards{/t}" title="{t}Seek Forwards{/t}" /></a>
<a href="#" onclick="skipForward(); return false;" id="skipforward"><img src="{$img_url}/player/skip-forward.png" alt="{t}Skip Forwards{/t}" title="{t}Skip Forwards{/t}" /></a>
{if $logged_in}
<a href="#" onclick="toggleTag(); return false;" id="open_tag"><img src="{$img_url}/player/open-tag.png" alt="{t}Tag{/t}" title="{t}Tag{/t}" /></a>
<a href="#" onclick="toggleTag(); return false;" id="close_tag" style='display: none;'><img src="{$img_url}/player/close-tag.png" alt="{t}Tag{/t}" title="{t}Tag{/t}" /></a>
<a href="#" onclick="love(); return false;" id="love"><img src="{$img_url}/player/love.png" alt="{t}Love{/t}" title="{t}Love{/t}" /></a>
{/if}
<a href="#" onclick="toggleVolume(); return false;" id="volume"><img src="{$img_url}/player/volume-medium.png" alt="{t}Volume{/t}" title="{t}Volume{/t}" /></a>
<img id="ban" class="btn" src="{$img_url}/player/ban.png" alt="{t}Ban{/t}" title="{t}Ban{/t}" />
<img id="skipback" class="btn" src="{$img_url}/player/skip-backward.png" alt="{t}Skip Backwards{/t}" title="{t}Skip Backwards{/t}" />
<img id="seekback" class="btn" src="{$img_url}/player/seek-backward.png" alt="{t}Seek Backwards{/t}" title="{t}Seek Backwards{/t}" />
<img id="play" class="btn" src="{$img_url}/player/play.png" alt="{t}Play{/t}" title="{t}Play{/t}" />
<img id="pause" class="btn" src="{$img_url}/player/pause.png" alt="{t}Pause{/t}" title="{t}Pause{/t}" />
<img id="seekforward" class="btn" src="{$img_url}/player/seek-forward.png" alt="{t}Seek Forwards{/t}" title="{t}Seek Forwards{/t}" />
<img id="skipforward" class="btn" src="{$img_url}/player/skip-forward.png" alt="{t}Skip Forwards{/t}" title="{t}Skip Forwards{/t}" />
<img id="open_tag" class="btn" src="{$img_url}/player/open-tag.png" alt="{t}Tag{/t}" title="{t}Tag{/t}" />
<img id="close_tag" class="btn" src="{$img_url}/player/close-tag.png" alt="{t}Tag{/t}" title="{t}Tag{/t}" />
<img id="love" class="btn" src="{$img_url}/player/love.png" alt="{t}Love{/t}" title="{t}Love{/t}" />
<img id="volume" class="btn" src="{$img_url}/player/volume-medium.png" alt="{t}Volume{/t}" title="{t}Volume{/t}" />
</div>
<div id="volume-box" style="display: none;">
<div id="volume-box">
<div id="volume-slider"></div>
</div>
<div id="tag_input" style="display: none;">
<div id="tag_input">
<p>{t}Enter a list of tags separated by commas:{/t}<br />
<input type='text' id='tags' name='tags' style='width: 75%; margin-top: 5px;' /><button id='tag_button' onclick="tag()" style='width: 20%; margin-top: 4px; float: right;'>{t}Tag{/t}</button></p>
{literal}
<script type="text/javascript">
$("#tags").keyup(function(event){
if(event.keyCode == 13){
tag();
}
});
</script>
{/literal}
<input type='text' id='tags' name='tags' placeholder="guitar, violin, female vocals, piano"/><button id='tag_button'>{t}Tag{/t}</button></p>
</div>
<div id="playlist">
......@@ -73,9 +55,9 @@
<br />
<a href='#' onclick='$("#playerproblems").toggle(1000)'>{t}Player problems?{/t}</a>
<div id='playerproblems' style='display: none;'>
<p>{t escape=no}The player currently works in <a href='http://www.chromium.org/Home'>Chromium</a> and <a href='http://www.gnu.org/software/gnuzilla/'>Icecat</a>/<a href='http://www.mozilla.com/en-US/firefox/'>Firefox</a> 3.5 or later &mdash; it may also work in Chrome and Opera, though we don't recommend them.{/t}</p>
<span id="toggleproblems">{t}Player problems?{/t}</span>
<div id="problems">
<p>{t escape=no}The player currently works in <a href='http://www.chromium.org/Home'>Chromium</a> and <a href='http://www.gnu.org/software/gnuzilla/'>Icecat</a>/<a href='http://www.mozilla.org/en/firefox/'>Firefox</a> 3.5 or later &mdash; it may also work in Chrome and Opera, though we don't recommend them.{/t}</p>
</div>
</div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment