style(legacy): format (#2039)
This commit is contained in:
Jonas L
GitHub
parent
7082c9693d
commit
1550d44ac5
122 changed files with 18369 additions and 15819 deletions
|
|
@ -2,11 +2,11 @@
|
|||
<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->playerhtml5_js?>" type="text/javascript"></script>
|
||||
<script src="<?php echo $this->jquery?>" type="text/javascript"></script>
|
||||
<link rel="stylesheet" href="<?php echo $this->css ?>" type="text/css">
|
||||
<script src="<?php echo $this->playerhtml5_js ?>" type="text/javascript"></script>
|
||||
<script src="<?php echo $this->jquery ?>" type="text/javascript"></script>
|
||||
|
||||
<script src="<?php echo $this->jquery_i18n?>" type="text/javascript"></script>
|
||||
<script src="<?php echo $this->jquery_i18n ?>" type="text/javascript"></script>
|
||||
<script src="/locale/general-translation-table" type="text/javascript"></script>
|
||||
<link href='https://fonts.googleapis.com/css?family=Roboto:400,100,300,700' rel='stylesheet' type='text/css'>
|
||||
<script type="text/javascript">
|
||||
|
|
@ -15,15 +15,15 @@
|
|||
var MAX_MOBILE_SCREEN_WIDTH = 760;
|
||||
|
||||
var Html5Player = function() {
|
||||
var id_element=getRandomIdPlayer(3000);
|
||||
var id_element = getRandomIdPlayer(3000);
|
||||
this.mobileDetect = this.mobileDetect();
|
||||
this.playerMode = "<?php echo $this->playerMode ?>";
|
||||
this.settings = {
|
||||
'elementId': id_element, // leave alone
|
||||
'autoplay': false, // or true (only works on some browsers)
|
||||
'forceHTTPS': false, // or true if the stream is in SSL (beware of the listening port, usually 8000)
|
||||
'replacePort': false, // false for disabled or '8000' as the usual start port, forces to specify replacePortTo.
|
||||
'replacePortTo': '' // either '' to use the default port of the browser (80/http, 443/https) or '8443' to force the port of the stream.
|
||||
'elementId': id_element, // leave alone
|
||||
'autoplay': false, // or true (only works on some browsers)
|
||||
'forceHTTPS': false, // or true if the stream is in SSL (beware of the listening port, usually 8000)
|
||||
'replacePort': false, // false for disabled or '8000' as the usual start port, forces to specify replacePortTo.
|
||||
'replacePortTo': '' // either '' to use the default port of the browser (80/http, 443/https) or '8443' to force the port of the stream.
|
||||
};
|
||||
|
||||
if (this.playerMode == "manual") {
|
||||
|
|
@ -33,8 +33,8 @@
|
|||
this.settings.url = <?php echo $this->streamURL ?>;
|
||||
this.settings.codec = "<?php echo $this->codec ?>";
|
||||
} else if (this.playerMode == "auto") {
|
||||
this.availableMobileStreamQueue = <?php echo $this->availableMobileStreams?>;
|
||||
this.availableDesktopStreamQueue = <?php echo $this->availableDesktopStreams?>;
|
||||
this.availableMobileStreamQueue = <?php echo $this->availableMobileStreams ?>;
|
||||
this.availableDesktopStreamQueue = <?php echo $this->availableDesktopStreams ?>;
|
||||
var stream = this.getNextAvailableStream();
|
||||
this.settings.url = stream["url"];
|
||||
this.settings.codec = stream["codec"];
|
||||
|
|
@ -43,10 +43,10 @@
|
|||
// Create the Muses player object
|
||||
playerhtml5_insert(this.settings);
|
||||
playerhtml5_audio = document.getElementById(id_element);
|
||||
if(playerhtml5_audio.played==true) togglePlayStopButton();
|
||||
if (playerhtml5_audio.played == true) togglePlayStopButton();
|
||||
|
||||
// Configure player title
|
||||
var player_title = <?php echo $this->player_title?>;
|
||||
var player_title = <?php echo $this->player_title ?>;
|
||||
if (player_title === null) {
|
||||
$(".airtime_header").hide();
|
||||
$(".airtime_player").css('height', '150px');
|
||||
|
|
@ -119,13 +119,14 @@
|
|||
playerhtml5_audio.pause();
|
||||
togglePlayStopButton();
|
||||
};
|
||||
|
||||
function togglePlayStopButton() {
|
||||
document.getElementById("play_button").classList.toggle("hide_button");
|
||||
document.getElementById("stop_button").classList.toggle("hide_button");
|
||||
}
|
||||
|
||||
$(document).ready(function() {
|
||||
$(".play").click(function () {
|
||||
$(".play").click(function() {
|
||||
if ($(this).hasClass("pause")) {
|
||||
html5Player.stop();
|
||||
} else {
|
||||
|
|
@ -144,9 +145,13 @@
|
|||
// and attaches it to the player UI.
|
||||
//
|
||||
// The metadata is fetched when the current track is about to end.
|
||||
function attachStreamMetadataToPlayer(){
|
||||
$.ajax({url: "<?php echo $this->metadata_api_url?>",
|
||||
data: {type:"interval",limit:"5"},
|
||||
function attachStreamMetadataToPlayer() {
|
||||
$.ajax({
|
||||
url: "<?php echo $this->metadata_api_url ?>",
|
||||
data: {
|
||||
type: "interval",
|
||||
limit: "5"
|
||||
},
|
||||
dataType: "jsonp",
|
||||
success: function(data) {
|
||||
|
||||
|
|
@ -155,7 +160,7 @@
|
|||
//Master/show source have no current track but they do have a current show.
|
||||
$("p.now_playing").html($.i18n._("On Air") + "<span>" + data.currentShow[0].name + "</span>");
|
||||
} else {
|
||||
$("p.now_playing").html($.i18n._("Off Air") + "<span>"+ $.i18n._("Offline") + "</span>");
|
||||
$("p.now_playing").html($.i18n._("Off Air") + "<span>" + $.i18n._("Offline") + "</span>");
|
||||
}
|
||||
time_to_next_track_starts = 20000;
|
||||
} else {
|
||||
|
|
@ -197,12 +202,10 @@
|
|||
}
|
||||
|
||||
// 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);
|
||||
metadataTimer = setTimeout(attachStreamMetadataToPlayer, time_to_next_track_starts + 3000);
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style type="text/css">
|
||||
|
|
@ -212,59 +215,66 @@
|
|||
not work. It has to be "visible" on the page. As a hacky work around we
|
||||
set the height and width to 1px so users will not see it.
|
||||
*/
|
||||
#html5player_skin{width:0; height:0; overflow: hidden;}
|
||||
#html5player_skin {
|
||||
width: 0;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="player" <?php if ($this->player_style == "basic") echo "style='display:block;'"; else echo "style='display:none'"; ?>>
|
||||
<div class="airtime_player">
|
||||
<div id="player" <?php if ($this->player_style == "basic") echo "style='display:block;'";
|
||||
else echo "style='display:none'"; ?>>
|
||||
<div class="airtime_player">
|
||||
|
||||
<div class="airtime_header">
|
||||
<p class="station_name">fff</p>
|
||||
</div>
|
||||
|
||||
<div class="airtime_box">
|
||||
|
||||
<div class="airtime_button">
|
||||
<span id="play_button" class="play_button" onclick="html5Player.play()"></span>
|
||||
<span id="stop_button" class="stop_button hide_button" onclick="html5Player.stop()"></span>
|
||||
<div class="airtime_header">
|
||||
<p class="station_name">fff</p>
|
||||
</div>
|
||||
<p class="now_playing"></p>
|
||||
|
||||
</div>
|
||||
<div class="airtime_box">
|
||||
|
||||
<div style="clear:both"></div>
|
||||
<div class="airtime_button">
|
||||
<span id="play_button" class="play_button" onclick="html5Player.play()"></span>
|
||||
<span id="stop_button" class="stop_button hide_button" onclick="html5Player.stop()"></span>
|
||||
</div>
|
||||
<p class="now_playing"></p>
|
||||
|
||||
<div class="airtime_schedule">
|
||||
<p class="airtime_next"><?php echo _("Next") ?></p>
|
||||
<ul class="schedule_list">
|
||||
<li></li>
|
||||
</ul>
|
||||
</div>
|
||||
<a class="airtime_pro" target="_blank" href="<?php echo PRODUCT_SITE_URL; ?>"><?php printf(_('Powered by %s'), PRODUCT_NAME); ?></a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div style="clear:both"></div>
|
||||
|
||||
<div id="premium_player" <?php if ($this->player_style == "premium") echo "style='display:block;'"; else echo "style='display:none'"; ?>>
|
||||
<div class="bottom_bar">
|
||||
<div class="play cont_btn"></div>
|
||||
<div class="airtime_schedule">
|
||||
<p class="airtime_next"><?php echo _("Next") ?></p>
|
||||
<ul class="schedule_list">
|
||||
<li></li>
|
||||
</ul>
|
||||
</div>
|
||||
<a class="airtime_pro" target="_blank" href="<?php echo PRODUCT_SITE_URL; ?>"><?php printf(_('Powered by %s'), PRODUCT_NAME); ?></a>
|
||||
|
||||
<div class="on_air">
|
||||
<p class="now_playing"></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div id="premium_player" <?php if ($this->player_style == "premium") echo "style='display:block;'";
|
||||
else echo "style='display:none'"; ?>>
|
||||
<div class="bottom_bar">
|
||||
<div class="play cont_btn"></div>
|
||||
|
||||
<div id="html5player_skin">
|
||||
<script type="text/javascript">
|
||||
var html5Player = new Html5Player();
|
||||
</script>
|
||||
</div>
|
||||
<div class="on_air">
|
||||
<p class="now_playing"></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="html5player_skin">
|
||||
<script type="text/javascript">
|
||||
var html5Player = new Html5Player();
|
||||
</script>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -2,16 +2,16 @@
|
|||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
|
||||
<head>
|
||||
<link rel="stylesheet" href="<?php echo $this->css?>" type="text/css">
|
||||
<link rel="stylesheet" href="<?php echo $this->css ?>" type="text/css">
|
||||
<script src="<?php echo $this->jquery ?>" type="text/javascript"></script>
|
||||
<link href='https://fonts.googleapis.com/css?family=Roboto:400,100,300,700' rel='stylesheet' type='text/css'>
|
||||
<script src="/js/libs/handlebars.min.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="wpBody" class="schedule tab_content current">
|
||||
<script id="wpWidget" type="text/x-handlebars-template">
|
||||
<ul class="tabs">
|
||||
<div id="wpBody" class="schedule tab_content current">
|
||||
<script id="wpWidget" type="text/x-handlebars-template">
|
||||
<ul class="tabs">
|
||||
{{#each this}}
|
||||
<li>
|
||||
{{dayOfWeek}}<span>{{dayOfMonth}}</span>
|
||||
|
|
@ -40,65 +40,70 @@
|
|||
<a href="<?php echo PRODUCT_SITE_URL; ?>" target="_blank"><?php printf(_('Powered by %s'), PRODUCT_NAME); ?></a>
|
||||
</div>
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
let importSchedule = <?php echo $this->schedule_data; ?>; // Object prepared in JSON, w/o API call
|
||||
let cleanSchedule = [];
|
||||
<script type="text/javascript">
|
||||
let importSchedule = <?php echo $this->schedule_data; ?>; // Object prepared in JSON, w/o API call
|
||||
let cleanSchedule = [];
|
||||
|
||||
// Insert shows into correct locations in importShows array (work-around for API v.1)
|
||||
let importShows = importSchedule["shows"];
|
||||
importShows.forEach(element => {
|
||||
// Convert timestamps to JS (sec -> millisec)
|
||||
var start_date = new Date(element.starts_timestamp*1000);
|
||||
var end_date = new Date(element.ends_timestamp*1000);
|
||||
// Check date of show so we know where to assign it to
|
||||
var format_start_date = start_date.getFullYear() + "-" + (start_date.getMonth()+1) + "-" + start_date.getDate();
|
||||
// Assign show to correct location
|
||||
if (importSchedule["weekDays"][format_start_date] !== undefined) {
|
||||
importSchedule["weekDays"][format_start_date]["shows"].push(
|
||||
{
|
||||
"show_start_hour": start_date.toLocaleTimeString([], { hour: 'numeric', minute : 'numeric' }),
|
||||
"show_end_hour": end_date.toLocaleTimeString([], { hour: 'numeric', minute : 'numeric' }),
|
||||
// Insert shows into correct locations in importShows array (work-around for API v.1)
|
||||
let importShows = importSchedule["shows"];
|
||||
importShows.forEach(element => {
|
||||
// Convert timestamps to JS (sec -> millisec)
|
||||
var start_date = new Date(element.starts_timestamp * 1000);
|
||||
var end_date = new Date(element.ends_timestamp * 1000);
|
||||
// Check date of show so we know where to assign it to
|
||||
var format_start_date = start_date.getFullYear() + "-" + (start_date.getMonth() + 1) + "-" + start_date.getDate();
|
||||
// Assign show to correct location
|
||||
if (importSchedule["weekDays"][format_start_date] !== undefined) {
|
||||
importSchedule["weekDays"][format_start_date]["shows"].push({
|
||||
"show_start_hour": start_date.toLocaleTimeString([], {
|
||||
hour: 'numeric',
|
||||
minute: 'numeric'
|
||||
}),
|
||||
"show_end_hour": end_date.toLocaleTimeString([], {
|
||||
hour: 'numeric',
|
||||
minute: 'numeric'
|
||||
}),
|
||||
"name": element.name
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Re-arraying data into a Handlebars-friendly format
|
||||
for (var i = 0; i <= 6; i++) {
|
||||
cleanSchedule.push(Object.values(importSchedule.weekDays)[i]);
|
||||
}
|
||||
|
||||
// Checker
|
||||
Handlebars.registerHelper('noShowsCheck', function(obj){
|
||||
return obj.length == 0;
|
||||
});
|
||||
|
||||
// Templating with Handlebars.js
|
||||
var wpWidget = document.querySelector('#wpWidget').innerHTML;
|
||||
var wpTemplate = Handlebars.compile(wpWidget);
|
||||
var compiledHTML = wpTemplate(cleanSchedule);
|
||||
document.querySelector('#wpBody').innerHTML = compiledHTML;
|
||||
|
||||
// Tabs logic
|
||||
$(document).ready(function() {
|
||||
//initialize first day to active
|
||||
$('.tabs').find("li").first().addClass("active");
|
||||
$('.schedule_content').find('.schedule_item').first().addClass("active");
|
||||
|
||||
$('.tabs li').click(function(){
|
||||
//var tab_id = $(this).attr('data-tab');
|
||||
var tab_id = "day-"+$(this).find('span').text();
|
||||
|
||||
$('.tabs li').removeClass('active');
|
||||
$('.schedule_item').removeClass('active');
|
||||
|
||||
$(this).addClass('active');
|
||||
$("#"+tab_id).addClass('active');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
// Re-arraying data into a Handlebars-friendly format
|
||||
for (var i = 0; i <= 6; i++) {
|
||||
cleanSchedule.push(Object.values(importSchedule.weekDays)[i]);
|
||||
}
|
||||
|
||||
// Checker
|
||||
Handlebars.registerHelper('noShowsCheck', function(obj) {
|
||||
return obj.length == 0;
|
||||
});
|
||||
|
||||
// Templating with Handlebars.js
|
||||
var wpWidget = document.querySelector('#wpWidget').innerHTML;
|
||||
var wpTemplate = Handlebars.compile(wpWidget);
|
||||
var compiledHTML = wpTemplate(cleanSchedule);
|
||||
document.querySelector('#wpBody').innerHTML = compiledHTML;
|
||||
|
||||
// Tabs logic
|
||||
$(document).ready(function() {
|
||||
//initialize first day to active
|
||||
$('.tabs').find("li").first().addClass("active");
|
||||
$('.schedule_content').find('.schedule_item').first().addClass("active");
|
||||
|
||||
$('.tabs li').click(function() {
|
||||
//var tab_id = $(this).attr('data-tab');
|
||||
var tab_id = "day-" + $(this).find('span').text();
|
||||
|
||||
$('.tabs li').removeClass('active');
|
||||
$('.schedule_item').removeClass('active');
|
||||
|
||||
$(this).addClass('active');
|
||||
$("#" + tab_id).addClass('active');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue