localhots
/
oldhaven
1
0
Fork 0
Code Releases Activity

jPlayer integrated

This commit is contained in:
magnolia-fan 2011-06-24 02:49:18 +04:00
parent 41f0c782fa
commit ecb47b27e7
5 changed files with 49 additions and 200 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
public/css/search.html
View File

@ -1,13 +0,0 @@
<div id="search-container">
<form action="" method="post" id="search_form">
<input type="text" id="search_field"/>
<input type="submit" value="Search" id="search_button"/>
</form>
<img class="spinner" src="/images/loader.gif" alt=""/>
<div class="artist_loading">Artist info is loading for the first time now. Usually it takes less than a minute, please wait a bit.</div>
<div class="artist_pics"></div>
<div class="suggestions">
<div>Misspelled?</div>
<ul></ul>
</div>
</div>

32
public/css/settings.html
View File

@ -1,32 +0,0 @@
<div class="settings-container">
<div class="tabs">
<div class="left-space"></div>
<div class="tab" data-fieldset="account">Account</div>
<div class="middle-space"></div>
<div class="tab" data-fieldset="lastfm">Last.fm</div>
</div>
<div class="form-container"></div>
<div class="forms">
<div class="account">
<div class="form">
<div class="field">
<div class="label">Username:</div>
<div class="value"><input name="username" type="text"/></div>
</div>
<div class="field">
<div class="label">Email:</div>
<div class="value"><input name="email" type="text"/></div>
</div>
</div>
</div>
<div class="lastfm">
<div class="form">
<div class="field">
<div class="label">Username:</div>
<div class="value"><input name="username" type="text" disabled="disabled" value="Not connected" /></div>
<div class="action-button"><input type="button" class="lastfm-connect" value="Connect"/></div>
</div>
</div>
</div>
</div>
</div>

16
public/index.html
View File

@ -14,6 +14,7 @@
<script type="text/javascript" charset="utf-8" src="/js/jquery/jquery.autocomplete.js"></script> <script type="text/javascript" charset="utf-8" src="/js/jquery/jquery.autocomplete.js"></script>
<script type="text/javascript" charset="utf-8" src="/js/jquery/jquery.contentchange.js"></script> <script type="text/javascript" charset="utf-8" src="/js/jquery/jquery.contentchange.js"></script>
<script type="text/javascript" charset="utf-8" src="/js/jquery/jquery-ui/js/jquery-ui-1.8.13.custom.min.js"></script> <script type="text/javascript" charset="utf-8" src="/js/jquery/jquery-ui/js/jquery-ui-1.8.13.custom.min.js"></script>
<script type="text/javascript" charset="utf-8" src="/js/jquery/jquery.jplayer.js"></script>
<script type="text/javascript" charset="utf-8" src="/js/beathaven/layout.js"></script> <script type="text/javascript" charset="utf-8" src="/js/beathaven/layout.js"></script>
<script type="text/javascript" charset="utf-8" src="/js/beathaven/vkontakte.js"></script> <script type="text/javascript" charset="utf-8" src="/js/beathaven/vkontakte.js"></script>
<script type="text/javascript" charset="utf-8" src="/js/beathaven/session.js"></script> <script type="text/javascript" charset="utf-8" src="/js/beathaven/session.js"></script>
@ -21,16 +22,14 @@
<script type="text/javascript" charset="utf-8" src="/js/beathaven/search.js"></script> <script type="text/javascript" charset="utf-8" src="/js/beathaven/search.js"></script>
<script type="text/javascript" charset="utf-8" src="/js/beathaven/settings.js"></script> <script type="text/javascript" charset="utf-8" src="/js/beathaven/settings.js"></script>
<script type="text/javascript" charset="utf-8" src="/js/beathaven/pages.js"></script> <script type="text/javascript" charset="utf-8" src="/js/beathaven/pages.js"></script>
<script type="text/javascript" charset="utf-8" src="/js/beathaven/audio.js"></script>
<script type="text/javascript" charset="utf-8" src="/js/beathaven/player.js"></script> <script type="text/javascript" charset="utf-8" src="/js/beathaven/player.js"></script>
<script type="text/javascript" charset="windows-1251" src="http://vkontakte.ru/js/api/openapi.js"></script> <script type="text/javascript" charset="windows-1251" src="http://vkontakte.ru/js/api/openapi.js"></script>
</head> </head>
<body> <body>
<!-- START PLAYER -->
<div id="player-container"> <div id="player-container">
<div id="player"> <div id="player">
<div id="audiobox"></div> <div id="jplayer"></div>
<div class="now-playing">Add some music to playlist</div> <div class="now-playing">Add some music to playlist</div>
<div class="progress"> <div class="progress">
<div class="loaded"> <div class="loaded">
@ -48,9 +47,6 @@
<ul class="playlist-tracks"></ul> <ul class="playlist-tracks"></ul>
</div> </div>
</div> </div>
<!-- END PLAYER -->
<!-- START HEADER -->
<div id="header-container"> <div id="header-container">
<div class="hello"> <div class="hello">
<span class="greating"></span> <span class="greating"></span>
@ -64,17 +60,15 @@
<li class="vk_auth" id="vk_logout">Logout</li> <li class="vk_auth" id="vk_logout">Logout</li>
</ul> </ul>
</div> </div>
<!-- END HEADER -->
<!-- START DATA -->
<div id="data-container" class="css-scrollbar"> <div id="data-container" class="css-scrollbar">
<div class="inner"></div> <div class="inner"></div>
</div> </div>
<!-- END DATA -->
<div id="vk_api_transport"></div> <div id="vk_api_transport"></div>
<div class="auth_notice"><div class="arrow">&uarr;</div>Don't forget to log in, please. It's simple.</div> <div class="auth_notice"><div class="arrow">&uarr;</div>Don't forget to log in, please. It's simple.</div>
<!-- Yandex.Metrika counter --><script type="text/javascript">var yaParams = {};</script><div style="display:none;"><script type="text/javascript">(function(w, c) { (w[c] = w[c] || []).push(function() { try { w.yaCounter7596904 = new Ya.Metrika({id:7596904, enableAll: true,params:window.yaParams||{ }}); } catch(e) { } }); })(window, "yandex_metrika_callbacks");</script></div><script src="//mc.yandex.ru/metrika/watch.js" type="text/javascript" defer="defer"></script><noscript><div><img src="//mc.yandex.ru/watch/7596904" style="position:absolute; left:-9999px;" alt="" /></div></noscript><!-- /Yandex.Metrika counter --> <!-- Yandex.Metrika counter -->
<script type="text/javascript">var yaParams = {};</script><div style="display:none;"><script type="text/javascript">(function(w, c) { (w[c] = w[c] || []).push(function() { try { w.yaCounter7596904 = new Ya.Metrika({id:7596904, enableAll: true,params:window.yaParams||{ }}); } catch(e) { } }); })(window, "yandex_metrika_callbacks");</script></div><script src="//mc.yandex.ru/metrika/watch.js" type="text/javascript" defer="defer"></script><noscript><div><img src="//mc.yandex.ru/watch/7596904" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
<!-- /Yandex.Metrika counter -->
</body> </body>
</html> </html>

113
public/js/beathaven/audio.js
View File

@ -1,113 +0,0 @@
var Audio = {
audio: null,
tid: null,
tinterval: 300,
ttime: 0,
play: function() {
try {
this.audio.play();
} catch(e) {}
},
pause: function() {
try {
this.audio.pause();
} catch(e) {}
},
rewind: function() {
try {
this.audio.currentTime = 0;
} catch(e) {}
},
addTrack: function(id, url) {
if ($('#a'+ id).length == 0) {
$('#audiobox').html('<audio id="a'+ id +'" src="'+ url +'"></audio>')
}
},
setTrack: function(id) {
this.audio = document.getElementById('a'+ id);
$(this.audio).bind('play',function() {
$('#player .controls .play').hide();
$('#player .controls .pause').show();
}).bind('pause ended', function() {
$('#player .controls .pause').hide();
$('#player .controls .play').show();
});
this.ttime = 0;
},
getLoadedPercent: function() {
try {
return Audio.audio.buffered.end(0) / Audio.audio.duration;
} catch(e) {}
return 0;
},
getPlayedPercent: function() {
try {
return Audio.audio.currentTime / Audio.audio.duration;
} catch(e) {}
return 0;
},
getListenedPercent: function() {
try {
if (Audio.audio.duration < 30 || Audio.ttime < 0) {
return -1;
}
return Audio.ttime / 1000 / Audio.audio.duration;
} catch(e) {}
return -1;
},
setPlayedPercent: function(val) {
if (typeof(this.audio.duration) != undefined) {
this.audio.currentTime = Math.round(val * this.audio.duration / 100);
return true;
}
return false;
},
skipToPercent: function(val) {
try {
this.audio.currentTime = this.audio.duration * val;
} catch(e) {}
},
startListener: function() {
Audio.killListener();
Audio.tid = window.setTimeout(Audio.startListener, Audio.tinterval);
if (Audio.ttime !== -1) {
Audio.ttime += Audio.tinterval;
}
Player.updateUI(
Audio.getLoadedPercent(),
Audio.getPlayedPercent(),
Audio.getListenedPercent()
);
var pp = Audio.getPlayedPercent();
if (pp > 0.5) {
Audio.ttime = -1;
}
},
killListener: function() {
try {
window.clearTimeout(Audio.tid);
} catch(e) {}
}
}
$('#player .controls .play').live('click', function(){
Audio.play();
});
$('#player .controls .pause').live('click', function(){
Audio.pause();
});

73
public/js/beathaven/player.js
View File

@ -1,9 +1,43 @@
var Player = { var Player = {
bar_width: 330, bar_width: 330,
jp: null,
scrobbled: false,
getTrackUrl: function(data) { initJplayer: function() {
this.jp = $("#jplayer");
this.jp.jPlayer({
swfPath: "/js",
supplied: "mp3",
cssSelectorAncestor: "",
cssSelector: {
play: "#player .play",
pause: "#player .pause",
stop: "",
videoPlay: "",
seekBar: "",
playBar: "",
mute: "",
unmute: "",
volumeBar: "",
volumeBarValue: "",
currentTime: "",
duration: ""
}
});
this.jp.bind($.jPlayer.event.timeupdate, function(e){
data = e.jPlayer.status;
if (!Player.scrobbled && data.currentPercentAbsolute > 50) {
var tmp = $('#player .now-playing').text().split(' — ');
Player.scrobble(tmp[0], tmp[1]);
Player.scrobbled = true;
}
$('#player .progress .loaded').width(data.seekPercent * Player.bar_width / 100);
$('#player .progress .played').width(data.currentPercentAbsolute * Player.bar_width / 100);
});
this.jp.bind($.jPlayer.event.ended, function(e){
Player.setTrack(Player.nextTrack());
});
}, },
addTrack: function(artist, track, length) { addTrack: function(artist, track, length) {
@ -38,13 +72,8 @@ var Player = {
}, },
playSource: function(url) { playSource: function(url) {
var id = $('.playlist-tracks .now').attr('id').split('i')[1]; $('#jplayer').jPlayer('setMedia', {mp3: url}).jPlayer('play');
Audio.pause(); Player.scrobbled = false;
Audio.rewind();
Audio.addTrack(id, url);
Audio.setTrack(id);
Audio.play();
Audio.startListener();
}, },
nextTrack: function() { nextTrack: function() {
@ -67,26 +96,6 @@ var Player = {
} }
}, },
updateUI: function(buffered, played, listened) {
$('#player .loaded').width(Math.round(buffered * this.bar_width));
$('#player .played').width(Math.round(played * this.bar_width));
if (played == 1) {
Audio.killListener();
Player.setTrack(Player.nextTrack());
}
if (played > 0.5 && listened > 0) {
var tmp = $('#player .now-playing').text().split(' — ');
Player.scrobble(tmp[0], tmp[1]);
}
},
reset: function() {
Audio.pause();
Audio.killListener();
$('#player .loaded, #player .played').width(0);
$('#player .now-playing').text('Select track');
},
updateNowListening: function(artist, track) { updateNowListening: function(artist, track) {
Session.query('/lastfm/listening?r='+ Math.random(), {'artist': artist, 'track': track}) Session.query('/lastfm/listening?r='+ Math.random(), {'artist': artist, 'track': track})
}, },
@ -96,6 +105,10 @@ var Player = {
} }
} }
$(function(){
Player.initJplayer();
});
$('#player .controls .prev').live('click', function(){ $('#player .controls .prev').live('click', function(){
Player.setTrack(Player.prevTrack()); Player.setTrack(Player.prevTrack());
}); });
@ -150,5 +163,5 @@ $('.playlist-tracks li').live('dblclick', function(){
}); });
$('#player .progress').live('click', function(e){ $('#player .progress').live('click', function(e){
Audio.skipToPercent(e.offsetX / Player.bar_width); $('#jplayer').jPlayer('playHead', Math.round((e.offsetX / Player.bar_width) * 100));
}); });