SAAS-1156: Podcast episode playback and download from Radio Page

Playback is working in HTML5 mode and integrated with player bar
This commit is contained in:
drigato 2015-10-28 16:28:56 -04:00
parent 05f51a9a2d
commit 3065d56018
2 changed files with 53 additions and 11 deletions

View File

@ -175,9 +175,18 @@
};
MusesPlayer.prototype.setURL = function(url) {
MRP.setUrl(url);
this.flashDetect ? MRP.setUrl(url) : musesHTMLSetURL(url);
// update musesPlayer object
musesPlayer.settings.url = url;
};
MusesPlayer.prototype.setCodec = function(codec) {
console.log(codec);
//this.flashDetect ? MRP.setCodec(codec) : musesHTMLSetCodec(codec);
musesPlayer.settings.codec = codec;
}
/** Retry playback after a few seconds (used to throttle attempts to reconnect/play). */
MusesPlayer.prototype.deferredPlay = function(streamUrl, delayMSec) {
if (!this.flashDetect) {
@ -196,6 +205,15 @@
}
};
MusesPlayer.prototype.playPodcastTrack = function(url, codec) {
this.setCodec(codec);
this.setURL(url);
musesPlayer.play();
if ($('.play').hasClass("pause") === false) {
$('.play').addClass("pause");
}
}
// detects errors in FLASH mode
function musesCallback(event,value) {
switch (event) {
@ -233,12 +251,7 @@
// Triggers the play function on the Muses player object in HTML5 mode
function musesHTMLPlayClick() {
/*if (MRP.html === undefined) {
console.log("inserting player");
MRP.insert(musesPlayer.settings);
}*/
MRP.html.audio.src = MRP.html.src;
MRP.html.audio.src = musesPlayer.settings.url;
MRP.html.audio.play();
}
@ -250,6 +263,18 @@
//delete MRP.html;
}
function musesHTMLSetURL(url)
{
MRP.html.audio.src = url;
//MRP.html.audio.play();
//musesPlayer.play();
}
function musesHTMLSetCodec(codec) {
MRP.html.audio.codec = codec;
}
function togglePlayStopButton() {
document.getElementById("play_button").classList.toggle("hide_button");
document.getElementById("stop_button").classList.toggle("hide_button");
@ -329,6 +354,17 @@
// Add 3 seconds to the timeout so Airtime has time to update the metadata before we fetch it
metadataTimer = setTimeout(attachStreamMetadataToPlayer, time_to_next_track_starts+3000);
}
function detachStreamMetadataFromPlayer() {
clearTimeout(metadataTimer);
}
function attachFileMetadataToPlayer(artist, title) {
//TODO escape strings
$("p.now_playing").html(artist+"<span>"+title+"</span>");
}

View File

@ -57,18 +57,25 @@ document.getElementById(id).width= (newwidth) + "px";
<div id="tab-4" class="station_rss tab_content">
<script type="text/javascript">
$.each(<?php echo $this->episodes ?>, function(index, value){
console.log(value.track_metadata.track_title);
$("#tab-4").append("<div>"+value.track_metadata.artist_name+" - "+value.track_metadata.track_title+
" <a id='rss-download-link' href='"+value.download_url+"'>Download</a>" +
" <a id='rss-play-link' data-streamurl='"+value.download_url+"' data-streamcodec='mp3' href='#'>Play</a></div>");
" <a id='rss-play-link' data-metaartist='"+value.track_metadata.artist_name+"' data-metatitle='"+value.track_metadata.track_title+"' data-streamurl='"+value.download_url+"' data-streamcodec='mp3' href='#'>Play</a></div>");
});
$("a#rss-play-link").click(function() {
var file_url = $(this).attr("data-streamurl");
var file_codec = $(this).attr("data-streamcodec");
var artist_name = $(this).attr("data-metaartist");
var track_title = $(this).attr("data-metatitle");
console.log(track_title);
var new_src='<?php echo $this->stationUrl ?>'+"embed/player?stream=file&file_url="+file_url+"&file_codec="+file_codec+"&style=premium";
//var new_src='<?php echo $this->stationUrl ?>'+"embed/player?stream=file&file_url="+file_url+"&file_codec="+file_codec+"&style=premium";
$("#player_iframe").attr("src", new_src);
document.getElementById("player_iframe").contentWindow.musesPlayer.playPodcastTrack(file_url, file_codec);
document.getElementById("player_iframe").contentWindow.detachStreamMetadataFromPlayer();
document.getElementById("player_iframe").contentWindow.attachFileMetadataToPlayer(artist_name, track_title);
//console.log(document.getElementById("player_iframe").contentWindow.musesPlayer);
});
</script>
</div>
@ -82,7 +89,6 @@ document.getElementById(id).width= (newwidth) + "px";
<script type="text/javascript">
$(document).ready(function(){
$("#player_iframe").load(function () {
// FIXME: Should we hide this somehow when the station is set to private?
$("#player_iframe").contents().find('.bottom_bar').append("<div class='station_rss_btn button' data-tab='tab-4'></div>");