lainchan/templates/themes/radio/radio.html

135 lines
5.8 KiB
HTML
Raw Normal View History

2014-09-28 15:43:15 -04:00
<!DOCTYPE html>
2016-09-23 09:40:55 -04:00
<html style="height:100vh; width:100%;">
2014-09-28 15:43:15 -04:00
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0">
2014-09-28 15:43:15 -04:00
<title>{{ settings.title }}</title>
<script type="text/javascript">
var active_page = "radio";
</script>
{% include 'header.html' %}
<link rel="stylesheet" media="screen" href="/stylesheets/dark.css"/>
2016-09-23 09:40:55 -04:00
<link rel="stylesheet" media="screen" href="/stylesheets/cyberpunk.css"/>
<script src="https://lainchan.org/js/jquery.min.js"></script>
2016-09-23 09:40:55 -04:00
<script type="text/javascript">
function check_status(){
$.get("{{ settings.radiostatus }}", function(data){
2016-09-23 09:40:55 -04:00
var el = $( '<div></div>' );
el.html(data.getElementsByTagName('html')[0].innerHTML);
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);
});
2016-09-23 09:40:55 -04:00
</script>
</head>
<body style=" background: url(/bg.php) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
">
<div class="bar top">
{{ boardlist.top }}
2014-11-12 19:31:00 -05:00
</div>
2014-09-28 15:43:15 -04:00
2016-09-23 09:40:55 -04:00
{% if config.url_banner %}<img class="board_image" src="{{ config.url_banner }}" {% if config.banner_width or config.banner_height %}style="{% if config.banner_width %}width:{{ config.banner_width }}px{% endif %};{% if config.banner_width %}height:{{ config.banner_height }}px{% endif %}" {% endif %}alt="" />{% endif %}
2014-09-28 15:43:15 -04:00
<header>
<h1 class="glitch" data-text="{{ settings.title }}"> {{ settings.title }}</h1>
2014-09-28 15:43:15 -04:00
<div class="subtitle">{{ settings.subtitle }}</div>
</header>
2016-09-23 09:40:55 -04:00
<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 style="text-align:center;">WELCOME TO CYBERIA</h2>
2016-09-23 09:40:55 -04:00
<p style="text-align:center;">Welcome to lainchan's radio stream.
2016-09-23 09:40:55 -04:00
</p>
<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>
2016-09-23 09:40:55 -04:00
<p class="nowplaying" style="text-align:center;"> Now playing:
2016-09-23 09:40:55 -04:00
</p>
<p class="currentlisteners" style="text-align:center;"> Current listeners:
2016-09-23 09:40:55 -04:00
</p>
<ul style="list-style-type: none;-webkit-padding-start: 0px;">
2016-09-23 09:40:55 -04:00
{% 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 %}
2016-09-23 09:40:55 -04:00
</ul>
<p style="text-align:center;">XSPF considered harmful.</p>
2014-09-28 15:43:15 -04:00
<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 %}
2016-09-23 09:40:55 -04:00
<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 / bump to radio click <a href="{{ settings.httpprefix ~ 'bump.html'}}" >here </a> </p>
2014-09-28 15:43:15 -04:00
</div>
<div class="pages"></div>
<script type="text/javascript">{% raw %}
ready();
{% endraw %}</script>
2014-09-28 15:43:15 -04:00
</body>
</html>