Permalink
Find file
Fetching contributors…
Cannot retrieve contributors at this time
91 lines (83 sloc) 2.15 KB
<!DOCTYPE html>
<html>
<head>
<title>ToobDesk</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="util.js"></script>
<script src="notify/rend.js"></script>
<link href="style.css" rel="stylesheet" />
<script>
$(document).ready(function(){
// Listen to "player state" Events
message.listen('toobifyRemote', function(data){
if(data.title)
$('h1').html(data.title);
$('.state').html(['ended','playing','paused','buffering','','video cued'][data.state] || '...');
if(data.img)
$('body').css({ backgroundImage : 'url('+data.img+')'});
$('button.play')[data.state===1?'hide':'show']();
$('button.pause')[data.state!==1?'hide':'show']();
});
// Trigger an empty toobifyState
// This requests the current state.
message.send('toobifyState');
// Add events to the button
$('button').click(function(){
var o = {
'play' : {state:1},
'pause' : {state:2},
'prev' : {prev:true},
'next' : {next:true}
};
message.send('toobifyState', o[this.className]);// play
});
message.listen('hello', function(data){
if(data.question==='whoareyou'){
message.send('hello',{reply:'remote'});
}
});
});
</script>
<style>
body{
background-color:#222;
background-repeat:no-repeat;
background-position:center center;
background-size:100%;
height:100px;
position:relative;
text-align:center;
}
header,
header h1{
position:relative;
width:auto;
}
header h1{
position:relative;
font-size:16px;
width:auto;
left:0;
right:0;
}
p{
position:absolute;
bottom:0;
left:0;
right:0;
text-align:center;
font-style:italic;
opacity:0.7;
background-color:#222;
margin:0;
}
button{
background-color:rgba(40,40,40,0.8);
}
</style>
</head>
<body>
<header><h1>Toobify</h1></header>
<button class="prev" title="Previous">&#9664;&#9664;</button> <button class="play" title="Play">&#9658;</button> <button class="pause" title="Pause">&#9646;&#9646;</button> <button class="next" title="Next">&#9658;&#9658;</button> <p class="state"></p>
</body>
</html>