mirror of
https://github.com/AzuraCast/AzuraCast.git
synced 2024-06-14 21:26:37 +00:00
569 lines
15 KiB
PHTML
569 lines
15 KiB
PHTML
<?
|
|
$this->headScript()
|
|
->appendFile(\DF\Url::content('jplayer/jquery.jplayer.min.js'))
|
|
->appendFile(\DF\Url::content('swfobject.js'));
|
|
|
|
$this->headLink()
|
|
->appendStylesheet(\DF\Url::content('player.css'), 'all');
|
|
?>
|
|
<div id="pvl-jplayer-controls-image" style="display: none;">
|
|
<div class="jp-type-single">
|
|
<div class="jp-gui jp-interface clearfix">
|
|
<a href="javascript:;" class="jp-mute" tabindex="1" title="mute"><i class="icon-volume-off"></i></a>
|
|
<a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute"><i class="icon-volume-down"></i></a>
|
|
|
|
<div class="jp-volume-bar progress">
|
|
<div class="jp-volume-bar-value bar"></div>
|
|
</div>
|
|
|
|
<a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume"><i class="icon-volume-up"></i></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="login_screen" style="display: none;">
|
|
<h2>Log In to Like Songs</h2>
|
|
|
|
<p>Want to let us know what your favorite songs are? Just click the button below to log in or create a new account on Ponyville Live! You can also sign in with your Twitter, Facebook, or other social media account.</p>
|
|
|
|
<div class="buttons">
|
|
<?=$this->button(array(
|
|
'type' => 'link',
|
|
'href' => $this->route(array('module' => 'default', 'controller' => 'account', 'action' => 'login')),
|
|
'text' => 'Log In to Ponyville Live!',
|
|
'icon' => 'icon-signin',
|
|
'class' => 'btn-large btn-primary',
|
|
)) ?>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="text/javascript">
|
|
var volume = <?=$this->volume ?>;
|
|
var nowplaying_song = '';
|
|
var original_window_title;
|
|
|
|
var nowplaying_last_run = 0;
|
|
var nowplaying_timeout;
|
|
var nowplaying_interval;
|
|
|
|
$(function() {
|
|
original_window_title = document.title;
|
|
|
|
$('.station-link,.station-history').hide();
|
|
|
|
$('.nowplaying-status').hide();
|
|
|
|
$('.station').click(function(e) {
|
|
e.preventDefault();
|
|
initNotifications();
|
|
|
|
if ($(this).data('popup'))
|
|
playInPopUp($(this).data('id'));
|
|
else
|
|
playStation($(this).attr('id'));
|
|
});
|
|
|
|
$('.station .station-player').click(function(e) {
|
|
e.stopPropagation();
|
|
});
|
|
|
|
// Toggle display of the "Playback History" pane.
|
|
$('.station .btn-show-history').click(function(e) {
|
|
e.preventDefault();
|
|
|
|
$(this).closest('.station').find('.station-history').slideToggle();
|
|
});
|
|
|
|
// "Like" links.
|
|
$('.station .btn-like').click(function(e) {
|
|
e.preventDefault();
|
|
|
|
var song_id = $(this).closest('.station').data('song_id');
|
|
var url = $(this).attr('href')+'/id/'+song_id;
|
|
var active_button = $(this);
|
|
|
|
jQuery.ajax({
|
|
'url': url,
|
|
'dataType': 'text'
|
|
}).done(function(return_code) {
|
|
console.log(return_code);
|
|
|
|
if (return_code == 'OK')
|
|
{
|
|
active_button.removeClass('btn-success').addClass('btn-disabled');
|
|
}
|
|
});
|
|
});
|
|
|
|
$('.station .btn-like-login-required').click(function(e) {
|
|
e.preventDefault();
|
|
|
|
$.fancybox($('#login_screen').html(), {
|
|
maxWidth : 500,
|
|
maxHeight : 300,
|
|
autoSize : true,
|
|
fitToView : true,
|
|
width : '50%',
|
|
height : '30%',
|
|
arrows : false,
|
|
closeClick : false,
|
|
closeBtn : true,
|
|
openEffect : 'none',
|
|
closeEffect : 'none'
|
|
});
|
|
});
|
|
|
|
// Social links.
|
|
$('.station .btn-share-station').click(function(e) {
|
|
e.preventDefault();
|
|
|
|
var shareLink = document.URL;
|
|
|
|
var nowplaying_title = $(this).closest('.station').find('.nowplaying-artist').text();
|
|
var nowplaying_artist = $(this).closest('.station').find('.nowplaying-title').text();
|
|
if (nowplaying_artist)
|
|
var shareTitle = '"'+nowplaying_title+'" by '+nowplaying_artist;
|
|
else
|
|
var shareTitle = '"'+nowplaying_title+'"';
|
|
|
|
var station_name = $(this).closest('.station').data('name');
|
|
shareTitle = 'I\'m tuned in to '+shareTitle+' on '+station_name+'. Check it out!';
|
|
|
|
var shareMedia = $(this).closest('.station').find('.station-image').prop('src');
|
|
|
|
if ($(this).hasClass('btn-share-facebook'))
|
|
{
|
|
window.open('//www.facebook.com/share.php?s=100&p[url]=' + encodeURIComponent(shareLink) + '&p[images][0]=' + encodeURIComponent(shareMedia) + '&p[title]=' + encodeURIComponent(shareTitle),'Facebook','menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');
|
|
}
|
|
else if ($(this).hasClass('btn-share-twitter'))
|
|
{
|
|
window.open('//twitter.com/home?status=' + encodeURIComponent(shareTitle) + '+' + encodeURIComponent(shareLink),'Twitter','menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');
|
|
}
|
|
});
|
|
|
|
$('#btn_browse_stations').click(function(e) {
|
|
playInPopUp(0);
|
|
e.preventDefault();
|
|
});
|
|
|
|
checkNowPlaying();
|
|
nowplaying_interval = setInterval('verifyNowPlaying()', 30000);
|
|
|
|
<? if ($this->station_id && $this->autoplay): ?>
|
|
playStation($('.station[data-id="<?=$this->station_id ?>"]').attr('id'));
|
|
<? endif; ?>
|
|
});
|
|
|
|
// Ensure now-playing is being checked, in spite of any interruptions.
|
|
function verifyNowPlaying()
|
|
{
|
|
var current_timestamp = getUnixTimestamp();
|
|
if (current_timestamp - nowplaying_last_run > 25)
|
|
{
|
|
checkNowPlaying();
|
|
}
|
|
}
|
|
|
|
function checkNowPlaying(force_update)
|
|
{
|
|
force_update = (typeof force_update !== 'undefined') ? force_update : false;
|
|
|
|
// Only run now-playing once every 10 seconds max.
|
|
var current_timestamp = getUnixTimestamp();
|
|
if (current_timestamp - nowplaying_last_run < 10 && !force_update)
|
|
return;
|
|
|
|
nowplaying_last_run = getUnixTimestamp();
|
|
|
|
jQuery.ajax({
|
|
cache: false,
|
|
url: '//static.ponyvillelive.com/api/nowplaying.json',
|
|
dataType: 'json'
|
|
}).done(function(data) {
|
|
var listener_total = 0;
|
|
var listeners_by_type = new Array();
|
|
|
|
for (var station_id in data)
|
|
{
|
|
var station_info = data[station_id];
|
|
var station = $('#station_'+station_id);
|
|
var station_exists = (station.length != 0);
|
|
|
|
if (station_exists)
|
|
{
|
|
// Format title.
|
|
if (!station_info.title)
|
|
{
|
|
station.find('.nowplaying-artist').text(station_info.text);
|
|
station.find('.nowplaying-title').text('');
|
|
}
|
|
else
|
|
{
|
|
station.find('.nowplaying-artist').text(station_info.title);
|
|
station.find('.nowplaying-title').text(station_info.artist);
|
|
}
|
|
|
|
// Trigger notification of song change.
|
|
if (station.hasClass('playing'))
|
|
{
|
|
if (station_info.text != nowplaying_song)
|
|
notify(station.data('image'), station_info.name, station_info.text);
|
|
|
|
nowplaying_song = station_info.text;
|
|
}
|
|
|
|
// Post listener count.
|
|
if (station_info.listeners)
|
|
{
|
|
listener_total += station_info.listeners;
|
|
|
|
if (typeof(listeners_by_type[station_info.category]) == 'undefined')
|
|
listeners_by_type[station_info.category] = 0;
|
|
|
|
listeners_by_type[station_info.category] += station_info.listeners;
|
|
|
|
station.find('.nowplaying-listeners').show().html('<i class="icon-user"></i> '+station_info.listeners);
|
|
}
|
|
else
|
|
{
|
|
station.find('.nowplaying-listeners').hide();
|
|
}
|
|
|
|
// Set station "live" status or "offline" status.
|
|
if (station_info.is_live == 'true')
|
|
{
|
|
station.find('.nowplaying-live').show();
|
|
station.removeClass('offline').addClass('live');
|
|
|
|
if (!station.is(':visible'))
|
|
station.show();
|
|
}
|
|
else if (station_info.text == 'Stream Offline')
|
|
{
|
|
station.find('.nowplaying-live').hide();
|
|
station.removeClass('live').addClass('offline');
|
|
|
|
if (station.data('inactive') == 'hide')
|
|
station.hide();
|
|
}
|
|
else
|
|
{
|
|
station.find('.nowplaying-live').hide();
|
|
station.removeClass('live offline');
|
|
|
|
if (!station.is(':visible'))
|
|
station.show();
|
|
}
|
|
|
|
// Set image, if supplied.
|
|
if (station.hasClass('playing'))
|
|
{
|
|
station.find('img.media-object').attr('src', station_info.image);
|
|
|
|
document.title = '\u25B6 '+station_info.name+' - '+station_info.text;
|
|
}
|
|
else
|
|
{
|
|
station.find('img.media-object').attr('src', station.data('image'));
|
|
}
|
|
|
|
// Set event data.
|
|
if (station_info.event)
|
|
{
|
|
var event_info = station_info.event;
|
|
|
|
if (station.is(':visible') && !station.find('.nowplaying-onair').is(':visible'))
|
|
notify(station.data('image'), 'Now On Air: '+event_info.title, 'Tune in now on '+station_info.name);
|
|
|
|
station.find('.nowplaying-onair').show().html('<i class="icon-star"></i> On Air: '+event_info.title);
|
|
}
|
|
else if (station_info.event_upcoming)
|
|
{
|
|
var event_info = station_info.event_upcoming;
|
|
|
|
station.find('.nowplaying-onair').show().html('<i class="icon-star"></i> In '+event_info.minutes_until+' mins: '+event_info.title);
|
|
}
|
|
else
|
|
{
|
|
station.find('.nowplaying-onair').empty().hide();
|
|
}
|
|
|
|
// Set station history.
|
|
if (station_info.song_history)
|
|
{
|
|
var history_block = '';
|
|
|
|
for (var j in station_info.song_history)
|
|
{
|
|
var song_num = parseInt(j)+1;
|
|
var history_row = station_info.song_history[j];
|
|
|
|
history_block += '<div>#'+song_num+": "+history_row.text+'</div>';
|
|
}
|
|
|
|
station.find('.station-history').html(history_block);
|
|
}
|
|
|
|
if (station_info.song_id)
|
|
{
|
|
// Detect a change in song.
|
|
var current_song_id = station.data('song_id');
|
|
if (station_info.song_id != current_song_id)
|
|
{
|
|
station.find('.btn-like').removeClass('btn-disabled').addClass('btn-success');
|
|
}
|
|
|
|
station.data('song_id', station_info.song_id);
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
for(type_name in listeners_by_type)
|
|
{
|
|
$('#nowplaying-listeners-'+type_name).html('<i class="icon-user"></i> '+listeners_by_type[type_name]);
|
|
}
|
|
$('#nowplaying-listeners-total').html('<i class="icon-user"></i> '+listener_total);
|
|
|
|
nowplaying_timeout = setTimeout('checkNowPlaying()', 20000);
|
|
});
|
|
}
|
|
|
|
function playStation(id)
|
|
{
|
|
var station = $('#'+id);
|
|
|
|
var stream_type = station.data('type');
|
|
var stream_url = station.data('stream');
|
|
|
|
var currently_playing = station.hasClass('playing');
|
|
|
|
if (currently_playing)
|
|
{
|
|
stopAllPlayers();
|
|
}
|
|
else
|
|
{
|
|
if (stream_url && stream_type)
|
|
{
|
|
stopAllPlayers();
|
|
|
|
if (stream_type == "stream")
|
|
{
|
|
window.open(stream_url, 'pvlive_stream', 'width=980,height=700,location=yes,menubar=yes,resizable=yes,scrollbars=yes,status=no,titlebar=yes,toolbar=no');
|
|
}
|
|
else
|
|
{
|
|
station.find('.station-player-container').append('<div id="pvl-jplayer"></div><div id="pvl-jplayer-controls"></div>');
|
|
$('#pvl-jplayer-controls').append($('#pvl-jplayer-controls-image').html());
|
|
|
|
$("#pvl-jplayer").jPlayer({
|
|
ready: function (event) {
|
|
ready = true;
|
|
startPlayer(stream_url);
|
|
},
|
|
pause: function() {
|
|
$(this).jPlayer("clearMedia");
|
|
},
|
|
error: function(event) {
|
|
var error_details = event.jPlayer.error;
|
|
console.log('Error: '+error_details.message+' - '+error_details.hint);
|
|
|
|
setTimeout(function() {
|
|
console.log('Retrying playback...');
|
|
startPlayer(stream_url);
|
|
}, 200);
|
|
},
|
|
volumechange: function(event) {
|
|
volume = Math.round(event.jPlayer.options.volume * 100);
|
|
},
|
|
swfPath: '/static/jplayer/jplayer.swf',
|
|
solution: (canPlayMp3()) ? 'html, flash' : 'flash',
|
|
supplied: 'mp3',
|
|
preload: 'none',
|
|
volume: (volume/100),
|
|
muted: false,
|
|
backgroundColor: '#000000',
|
|
cssSelectorAncestor: '#pvl-jplayer-controls',
|
|
errorAlerts: false,
|
|
warningAlerts: false
|
|
});
|
|
|
|
station.find('i.current-status').removeClass('icon-stop icon-play').addClass('icon-stop');
|
|
|
|
station.find('.station-link').show();
|
|
station.find('.station-player').show();
|
|
|
|
station.addClass('playing');
|
|
station.find('.station-play-button').html('<i class="icon-pause"></i>');
|
|
|
|
$('#tunein_player').data('current_station', station.data('id'));
|
|
|
|
// Trigger an immediate now-playing check.
|
|
checkNowPlaying(true);
|
|
}
|
|
|
|
// Log in Google Analytics
|
|
// _gaq.push(['_trackEvent', 'Station', 'Play', station.data('name') ]);
|
|
ga('send', 'event', 'Station', 'Play', station.data('name'));
|
|
}
|
|
else
|
|
{
|
|
$('#player').text('Error: This stream is not currently active. Please select another stream to continue.');
|
|
}
|
|
}
|
|
}
|
|
|
|
function startPlayer(stream_url)
|
|
{
|
|
var stream = {
|
|
title: "Ponyville Live!",
|
|
mp3: stream_url
|
|
};
|
|
|
|
$("#pvl-jplayer").jPlayer("setMedia", stream).jPlayer("play");
|
|
}
|
|
|
|
function stopAllPlayers()
|
|
{
|
|
if ($("#pvl-jplayer").length > 0)
|
|
{
|
|
try
|
|
{
|
|
$('#pvl-jplayer').jPlayer('stop');
|
|
}
|
|
catch(e) {}
|
|
|
|
try
|
|
{
|
|
$('#pvl-jplayer').jPlayer("clearMedia").jPlayer("destroy");
|
|
}
|
|
catch(e) {}
|
|
}
|
|
|
|
$('.station .station-player-container').empty();
|
|
|
|
$('i.current-status').removeClass('icon-stop icon-play').addClass('icon-play');
|
|
$('.nowplaying-status').hide();
|
|
|
|
$('.station-player,.station-link,.station-history').hide();
|
|
|
|
$('.station').removeClass('playing');
|
|
|
|
$('#tunein_player').removeData('current_station');
|
|
|
|
// Reset now-playing images.
|
|
$('.station').each(function() {
|
|
$(this).find('.station-play-button').html('<i class="icon-play"></i>');
|
|
$(this).find('img.media-object').attr('src', $(this).data('image'));
|
|
});
|
|
|
|
document.title = original_window_title;
|
|
}
|
|
|
|
function canPlayMp3()
|
|
{
|
|
if (isIE())
|
|
return false;
|
|
|
|
if (isSteam())
|
|
return false;
|
|
|
|
var a = document.createElement('audio');
|
|
var can_play_mp3 = !!(a.canPlayType && a.canPlayType('audio/mpeg;').replace(/no/, ''));
|
|
return can_play_mp3;
|
|
}
|
|
|
|
function isIE () {
|
|
var myNav = navigator.userAgent.toLowerCase();
|
|
return (myNav.indexOf('msie') != -1) ? parseInt(myNav.split('msie')[1]) : false;
|
|
}
|
|
|
|
function isSteam() {
|
|
var myNav = navigator.userAgent.toLowerCase();
|
|
return (myNav.indexOf('gameoverlay') != -1) ? true : false;
|
|
}
|
|
|
|
function playInPopUp(station_id) {
|
|
orig_url = "<?=$this->route(array('action' => 'tunein', 'origin' => 'home')) ?>";
|
|
|
|
var current_station = $('#tunein_player').data('current_station');
|
|
|
|
if (station_id == 'current')
|
|
station_id = current_station;
|
|
|
|
if (current_station)
|
|
stopAllPlayers();
|
|
|
|
if (station_id !== undefined)
|
|
orig_url += '/id/'+station_id;
|
|
|
|
window.open(orig_url, 'pvl_player', 'height=600,width=400,status=yes,scrollbars=yes', true);
|
|
}
|
|
|
|
function getUnixTimestamp()
|
|
{
|
|
return Math.round((new Date()).getTime() / 1000);
|
|
}
|
|
|
|
function initNotifications()
|
|
{
|
|
if (window.webkitNotifications)
|
|
{
|
|
var havePermission = window.webkitNotifications.checkPermission();
|
|
|
|
if (havePermission != 0) // 0 is PERMISSION_ALLOWED
|
|
{
|
|
window.webkitNotifications.requestPermission();
|
|
}
|
|
}
|
|
}
|
|
|
|
function notify(image, title, description)
|
|
{
|
|
if (window.webkitNotifications)
|
|
{
|
|
var havePermission = window.webkitNotifications.checkPermission();
|
|
|
|
if (havePermission == 0) // 0 is PERMISSION_ALLOWED
|
|
{
|
|
var notification = window.webkitNotifications.createNotification(image, title, description);
|
|
notification.onclick = function(x) {
|
|
window.focus();
|
|
this.cancel();
|
|
};
|
|
|
|
setTimeout(function() {
|
|
notification.cancel();
|
|
}, 5000);
|
|
notification.show();
|
|
}
|
|
}
|
|
else
|
|
{
|
|
try
|
|
{
|
|
Notification.requestPermission(function (perm)
|
|
{
|
|
console.log(perm);
|
|
|
|
if (perm == 'granted')
|
|
{
|
|
var notification = new Notification(title, {
|
|
body: description,
|
|
dir: 'auto',
|
|
lang: '',
|
|
tag: 'pvl_radio',
|
|
icon: image
|
|
});
|
|
|
|
notification.onclick = function(x) {
|
|
window.focus();
|
|
};
|
|
}
|
|
});
|
|
}
|
|
catch(e) { }
|
|
}
|
|
}
|
|
</script>
|