kashire/lainchan
4
0
Fork 0
Code Issues 18 Pull Requests Releases Wiki Activity

Updates to radio theme / extension in order to support channel selection dropdown and the various other new radio features. Uses both twig variables and JavaScript in attempt to failback correctly when javascript isn't loaded. Adding support for the Options css theme selector from radio page.

Browse Source
This commit is contained in:
Benjamin Southall 2017-04-28 01:14:58 +09:00
parent b3ffae8705
commit d020ecc1b5
2 changed files with 105 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
templates/themes/radio/info.php
View File

@ -19,30 +19,40 @@ $theme = array(
'type' => 'text',
'default' => 'radio.html'),
array('title' => 'HTTP Prefix',
'name' => 'httpprefix',
'type' => 'text',
'default' => ''),
array('title' => 'Radio Status URL',
'name' => 'radiostatus',
'type' => 'text',
'default' => '/radio_assets/status.xsl'),
array('title' => 'Radio MP3 Playlist',
'name' => 'radiomp3playlist',
array('title' => 'Radio Prefix',
'name' => 'radioprefix',
'type' => 'text',
'default' => ''),
array('title' => 'Radio OGG Playlist',
'name' => 'radiooggplaylist',
'type' => 'text',
'default' => ''),
array('title' => 'Radio MP3 Source',
'name' => 'radiomp3source',
array('title' => 'Filelist Prefix',
'name' => 'filelistprefix',
'type' => 'text',
'default' => ''),
array('title' => 'Radio OGG Source',
'name' => 'radiooggsource',
array('title' => 'Channels',
'name' => 'channels',
'type' => 'text',
'default' => ''),
'default' => 'everything cyberia swing'),
array('title' => 'Default Channel',
'name' => 'defaultchannel',
'type' => 'text',
'default' => 'everything'),
array('title' => 'formats',
'name' => 'formats',
'type' => 'text',
'default' => 'mp3 ogg'),
),
'build_function' => 'radio_build');
?>

107
templates/themes/radio/radio.html
View File

@ -1,29 +1,63 @@
{% filter remove_whitespace %}
<!DOCTYPE html>
<html style="height:100vh; width:100%;">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>{{ settings.title }}</title>
<link rel="shortcut icon" href="/favicon.png">
<link rel="stylesheet" media="screen" href="/stylesheets/style.css"/>
<script type="text/javascript">
var active_page = "radio";
</script>
{% include 'header.html' %}
<link rel="stylesheet" media="screen" href="/stylesheets/dark.css"/>
<link rel="stylesheet" media="screen" href="/stylesheets/cyberpunk.css"/>
<link rel="stylesheet" href="/stylesheets/font-awesome/css/font-awesome.min.css">
<script src="https://lainchan.org/js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
check_status();
setInterval(check_status, 15000);
});
function check_status(){
$.get("{{ settings.radiostatus }}", function(data){
var el = $( '<div></div>' );
el.html(data.getElementsByTagName('html')[0].innerHTML);
var sd = el.find(".streamstats");
$(".nowplaying").text("Now playing: " + sd[5].textContent);
$(".currentlisteners").text("Current listeners: " + (parseInt(sd[2].textContent) + parseInt(sd[8].textContent)));
var channel = $("#channel").val();
var nowplaying = el.find(".roundbox").has("h3:contains("+channel+")").find('td:contains("Current")').first().next().text();
var currentlisteners = 0;
el.find(".roundbox").has("h3:contains("+channel+")").find('td:contains("current")').next().each(function() {
currentlisteners += parseInt(this.firstChild.nodeValue, 10);
});
$(".nowplaying").text("Now playing: " + nowplaying);
$(".currentlisteners").text("Current listeners: " + currentlisteners );
});}
function change_channel(e) {
let audio = document.getElementById("player");
let paused = audio.paused;
channel = e.value;
{% set formatlist = settings.formats|split(' ') %}
{% for format in formatlist %}
let {{ "source" ~ format }} = document.getElementById("{{format ~ "source"}}");
{{ "source" ~ format }}.src ="{{ settings.httpprefix ~ settings.radioprefix }}" + channel + ".{{ format }}";
{% endfor %}
audio.load();
if(!paused) {
audio.play();
}
{% for format in formatlist %}
document.getElementById("{{ format }}playlist").href = "{{ settings.httpprefix ~ settings.radioprefix }}" + channel + ".{{ format ~ ".m3u" }}";
{% endfor %}
document.getElementById("fileslink").href = "{{ settings.httpprefix ~ settings.filelistprefix }}" + channel + ".html";
check_status();
}
$(document).ready(function(){
$("#stylesheet").remove();
check_status();
setInterval(check_status, 15000);
});
</script>
</head>
<body style=" background: url(/bg.php) no-repeat center center fixed;
@ -45,31 +79,56 @@ el.html(data.getElementsByTagName('html')[0].innerHTML);
<img alt="mascot" src="static/lain_is_cute_datass_small.png" style="display: block; margin: 0 auto;"/>
<div class="ban" style="margin-top: 0px!important; background-color: black; text-align: left!important;">
<h2>WELCOME TO CYBERIA</h2>
<h2 style="text-align:center;">WELCOME TO CYBERIA</h2>
<p>Welcome to lainchan's radio stream.
<p style="text-align:center;">Welcome to lainchan's radio stream.
</p>
<noscript><p>Radio statistics will be not be updated without JavaScript, please visit {{ settings.radiostatus }} to see them directly.</p></noscript>
<p class="inlineheading" style="text-align:center;" >Channel:
<select style="float:none;" id="channel" onchange="change_channel(this)">
{% set channellist = settings.channels|split(' ') %}
{% for channel in channellist %}
{% if channel == settings.defaultchannel %}
<option value="{{ channel }}" selected>{{ channel }}</option>
{% else %}
<option value="{{ channel }}">{{ channel }}</option>
{% endif %}
{% endfor %}
</select> <p>
<p style="text-align:center;"> File list is <a id="fileslink" href="{{ settings.httpprefix ~ settings.filelistprefix ~ settings.defaultchannel ~ ".html" }}"> is here</a></p>
<noscript><p style="text-align:center;">Radio statistics and channel switching will be not be updated without JavaScript, please visit {{ settings.radiostatus }} to see them directly.</p></noscript>
<p class="nowplaying"> Now playing:
<p class="nowplaying" style="text-align:center;"> Now playing:
</p>
<p class="currentlisteners"> Current listeners:
<p class="currentlisteners" style="text-align:center;"> Current listeners:
</p>
<ul>
<ul style="list-style-type: none;-webkit-padding-start: 0px;">
<li><a href="{{ settings.radiooggplaylist }}">Vorbis M3U Playlist</a></li>
<li><a href="{{ settings.radiomp3playlist }}">MP3 M3U Playlist</a></li>
{% set formatlist = settings.formats|split(' ') %}
{% for format in formatlist %}
<li style="text-align:center;"><a id="{{ format }}playlist" href="{{ settings.httpprefix ~ settings.radioprefix ~ settings.defaultchannel ~ "." ~ format ~ ".m3u" }}"> {{ format|upper }} M3U Playlist</a></li>
{% endfor %}
XSPF considered harmful.
</ul>
<p style="text-align:center;">XSPF considered harmful.</p>
<audio controls preload="none" style="margin: 0 5% 20px 5%; width: 90%; box-shadow: 0px 0px 5px black;">
<source src="{{ settings.radiooggsource }}" type="audio/ogg">
<source src="{{ settings.radiomp3source }}" type="audio/mpeg">
<audio id="player" controls autoplay preload="none" style="margin: 0 5% 20px 5%; width: 90%; box-shadow: 0px 0px 5px black;">
{% for format in formatlist %}
{% if format == "mp3" %}
<source id="{{format}}source" src="{{ settings.httpprefix ~ settings.radioprefix ~ settings.defaultchannel ~ "." ~ format }}" type="audio/mpeg">
{% else %}
<source id="{{format}}source" src="{{ settings.httpprefix ~ settings.radioprefix ~ settings.defaultchannel ~ "." ~ format }}" type="audio/{{ format }}">
{% endif %}
{% endfor %}
<em>Your browser lacks support for OGG Vorbis files. Please open the M3U file or XSPF file in a multimedia player.</em>
</audio>
<p style="text-align:center;"> To upload a voice-over to radio click <a href="{{ settings.httpprefix ~ 'voice.html'}}" >here </a> </p>
</div>
<div class="pages"></div>
<script type="text/javascript">{% raw %}
ready();
{% endraw %}</script>
</body>
</html>
{% endfilter %}