260 lines
8.9 KiB
PHTML
260 lines
8.9 KiB
PHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
|
|
<head>
|
|
<link rel="stylesheet" href="<?php echo $this->css?>" type="text/css">
|
|
<script src="<?php echo $this->mrp_js?>" type="text/javascript"></script>
|
|
<script src="<?php echo $this->jquery?>" type="text/javascript"></script>
|
|
<script type="text/javascript">
|
|
|
|
var MusesPlayer = function() {
|
|
this.mobileDetect = this.mobileDetect();
|
|
this.availableMobileStreamQueue = <?php echo $this->availableMobileStreams?>;
|
|
this.availableDesktopStreamQueue = <?php echo $this->availableDesktopStreams?>;
|
|
this.playerMode = "<?php echo $this->playerMode ?>";
|
|
|
|
if (this.playerMode == "manual") {
|
|
MRP.insert({
|
|
'url': "<?php echo $this->streamURL ?>",
|
|
'codec': "<?php echo $this->codec ?>",
|
|
'volume': 100,
|
|
'jsevents': true,
|
|
'autoplay': false,
|
|
'buffering': 5,
|
|
'title': 'test',
|
|
'bgcolor': '#FFFFFF',
|
|
'skin': 'mcclean',
|
|
'width': 180,
|
|
'height': 60
|
|
});
|
|
} else if (this.playerMode == "auto") {
|
|
var stream = this.getNextAvailableStream();
|
|
MRP.insert({
|
|
'url': stream["url"],
|
|
'codec': stream["codec"],
|
|
'volume': 100,
|
|
'jsevents': true,
|
|
'autoplay': false,
|
|
'buffering': 5,
|
|
'title': 'test',
|
|
'bgcolor': '#FFFFFF',
|
|
'skin': 'mcclean',
|
|
'width': 180,
|
|
'height': 60
|
|
});
|
|
}
|
|
|
|
$("p.station_name").html("<?php echo $this->station_name?>");
|
|
|
|
this.flashDetect = FlashDetect.versionAtLeast(10, 1) ? true : false;
|
|
|
|
getMetadata();
|
|
};
|
|
|
|
MusesPlayer.prototype.mobileDetect = function() {
|
|
if ( screen.width <= 760) {
|
|
return true;
|
|
} else {
|
|
return false;
|
|
}
|
|
}
|
|
|
|
MusesPlayer.prototype.getNextAvailableStream = function() {
|
|
if (this.mobileDetect && this.availableMobileStreamQueue.length > 0) {
|
|
return this.getNextAvailableMobileStream();
|
|
}
|
|
|
|
if (!this.mobileDetect && this.availableDesktopStreamQueue.length > 0) {
|
|
return this.getNextAvailableDesktopStream();
|
|
}
|
|
|
|
//if we get to this point there are no available streams for the
|
|
//type of device the client has connected with so just return
|
|
//the next available stream - first we'll try the desktop streams
|
|
var desktopStream = this.getNextAvailableDesktopStream();
|
|
if (desktopStream) {
|
|
return desktopStream;
|
|
} else {
|
|
return this.getNextAvailableMobileStream();
|
|
}
|
|
|
|
}
|
|
|
|
MusesPlayer.prototype.getNextAvailableMobileStream = function() {
|
|
var stream = this.availableMobileStreamQueue.shift();
|
|
//add to end of queue
|
|
this.availableMobileStreamQueue.push(stream);
|
|
return stream;
|
|
}
|
|
|
|
MusesPlayer.prototype.getNextAvailableDesktopStream = function() {
|
|
var stream = this.availableDesktopStreamQueue.shift();
|
|
//add to end of queue
|
|
this.availableDesktopStreamQueue.push(stream);
|
|
return stream;
|
|
}
|
|
|
|
MusesPlayer.prototype.play = function() {
|
|
this.flashDetect ? MRP.play() : musesHTMLPlayClick();
|
|
togglePlayStopButton();
|
|
};
|
|
|
|
MusesPlayer.prototype.stop = function() {
|
|
this.flashDetect ? MRP.stop() : musesHTMLStopClick();
|
|
togglePlayStopButton();
|
|
};
|
|
|
|
MusesPlayer.prototype.setVolume = function(value) {
|
|
//this.flashDetect ? MRP.setVolume(value) : null;
|
|
};
|
|
|
|
MusesPlayer.prototype.setURL = function() {
|
|
//TODO
|
|
};
|
|
|
|
function musesCallback(event,value){
|
|
switch (event) {
|
|
case "loadComplete":
|
|
// no source URL is set
|
|
if (value === "0") {
|
|
console.log("loadComplete failed");
|
|
}
|
|
case "ioError":
|
|
// connection limit reached or problem connecting to stream
|
|
if (value === "0") {
|
|
console.log("ioError");
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* This is a hack to trigger the play button in HTML5 mode
|
|
*/
|
|
function musesHTMLPlayClick() {
|
|
//child nodes
|
|
var cn = document.getElementById("MusesRadioPlayer-HTML5-player-1").childNodes;
|
|
var playDiv = cn[4];
|
|
playDiv.onclick();
|
|
}
|
|
|
|
/**
|
|
* This is a hack to trigger the stop button in HTML5 mode
|
|
*/
|
|
function musesHTMLStopClick() {
|
|
//child nodes
|
|
var cn = document.getElementById("MusesRadioPlayer-HTML5-player-1").childNodes;
|
|
var stopDiv = cn[5];
|
|
stopDiv.onclick();
|
|
}
|
|
|
|
function togglePlayStopButton() {
|
|
document.getElementById("play_button").classList.toggle("hide_button");
|
|
document.getElementById("stop_button").classList.toggle("hide_button");
|
|
}
|
|
|
|
// default how often to fetch metadata to 20 seconds
|
|
var time_to_next_track_starts = 20000;
|
|
|
|
function getMetadata(){
|
|
$.ajax({url: "<?php echo $this->metadata_api_url?>",
|
|
data: {type:"interval",limit:"5"},
|
|
dataType: "jsonp",
|
|
success: function(data) {
|
|
//console.log("hello");
|
|
|
|
if (data.current === null) {
|
|
$("p.now_playing").html("Offline");
|
|
} else {
|
|
var artist = data.current.name.split(" - ")[0];
|
|
var track = data.current.name.split(" - ")[1];
|
|
$("p.now_playing").html(artist + "<span>" + track + "</span>");
|
|
|
|
var current_track_end_time = new Date(data.current.ends);
|
|
var current_time = new Date();
|
|
//convert current_time to UTC to match the timezone of time_to_next_track_starts
|
|
current_time = new Date(current_time.getTime() + current_time.getTimezoneOffset() * 60 * 1000);
|
|
//TODO stop the first settimeout from executing!!
|
|
time_to_next_track_starts = current_track_end_time - current_time;
|
|
//console.log((time_to_next_track_starts/1000)/60);
|
|
// maybe we should set time_to_next_track_starts to
|
|
// (10 || 20 || etc.) minutes if its greater than that
|
|
// in case of on-the-fly schedule changes
|
|
|
|
|
|
}
|
|
|
|
if (data.next === null) {
|
|
$("ul.schedule_list").find("li").html("Nothing scheduled");
|
|
} else {
|
|
$("ul.schedule_list").find("li").html(data.next.name);
|
|
}
|
|
|
|
}
|
|
});
|
|
setTimeout(getMetadata, time_to_next_track_starts);
|
|
}
|
|
|
|
</script>
|
|
|
|
<style type="text/css">
|
|
#muses_skin{width:1px; height:1px; overflow-x: hidden; overflow-y: hidden;}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div class="airtime_player">
|
|
|
|
<div class="airtime_header">
|
|
<p class="station_name">fff</p>
|
|
<a class="airtime_pro" href="#"><span>airtime.pro</span><img src="http://localhost/css/embed-player-images/airtime_logo.png"></a>
|
|
</div>
|
|
|
|
<div class="airtime_box">
|
|
|
|
<div class="airtime_button">
|
|
<span id="play_button" class="play_button" onclick="musesPlayer.play()"></span>
|
|
<span id="stop_button" class="stop_button hide_button" onclick="musesPlayer.stop()"></span>
|
|
</div>
|
|
<p class="now_playing"></p>
|
|
|
|
</div>
|
|
|
|
<div class="airtime_volume">
|
|
|
|
<div class="volume_control">
|
|
<span class="mute"></span>
|
|
</div>
|
|
|
|
<div class="airtime_volume_bar">
|
|
<div class="airtime_volume_bar_value" style="width: 80%;"></div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="airtime_schedule">
|
|
<p class="airtime_next">Next</p>
|
|
<ul class="schedule_list">
|
|
<li></li>
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div id="muses_skin">
|
|
<script type="text/javascript">
|
|
var musesPlayer = new MusesPlayer();
|
|
</script>
|
|
</div>
|
|
|
|
<!--
|
|
<div id="custom_muses_play" onclick="musesPlayer.play()">
|
|
<a href="#">play</a>
|
|
</div>
|
|
<div id="custom_muses_stop" onclick="musesPlayer.stop()">
|
|
<a href="#">stop</a>
|
|
</div>
|
|
-->
|
|
|
|
</body>
|
|
</html>
|