You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
297 lines
8.5 KiB
297 lines
8.5 KiB
<!-- If you're reading this...this was a weekend project...please don't judge -->
|
|
<!DOCTYPE HTML>
|
|
<html>
|
|
<head>
|
|
<title>radio.jerryaldrichiii.com</title>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
|
<meta name="Description" content="radio.jerryaldrichiii.com"><Paste>
|
|
<style>
|
|
* {
|
|
background: black;
|
|
background-color: black;
|
|
}
|
|
a, a:hover, a:active, a:visited {
|
|
color: #00FF00;
|
|
}
|
|
body {
|
|
background: black;
|
|
background-color: black;
|
|
color: #00FF00;
|
|
text-align: center;
|
|
overflow-y: scroll;
|
|
display: inline;
|
|
font: calc(0.40em + 1vmin) monospace;
|
|
}
|
|
#stream-info {
|
|
width: 60ch;
|
|
margin: auto;
|
|
margin-bottom: 1ch;
|
|
}
|
|
#controls {
|
|
display: inline-flex;
|
|
justify-content: space-between;
|
|
width: 60ch;
|
|
}
|
|
button {
|
|
background-color: black;
|
|
color: #00FF00;
|
|
border: none;
|
|
cursor: pointer;
|
|
outline: none;
|
|
padding: 0px 0px 0px 0px;
|
|
font-size: inherit;
|
|
}
|
|
#volume-container > * {
|
|
vertical-align: middle;
|
|
}
|
|
#volume {
|
|
-webkit-appearance: none;
|
|
-webkit-transition: .2s;
|
|
background: black;
|
|
outline: auto;
|
|
outline-color: #00FF00;
|
|
opacity: 0.7;
|
|
transition: opacity .2s;
|
|
vertical-align: middle;
|
|
}
|
|
#volume:hover {
|
|
opacity: 1;
|
|
}
|
|
#volume::-webkit-slider-thumb {
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
height: .5em;
|
|
width: .5em;
|
|
background: #00FF00;
|
|
cursor: pointer;
|
|
}
|
|
#volume::-moz-range-thumb, .volume::-webkit-slider-thumb {
|
|
background: black;
|
|
width: .5em;
|
|
cursor: pointer;
|
|
}
|
|
select {
|
|
background: black;
|
|
border-color: #00FF00;
|
|
color: #00FF00;
|
|
cursor: pointer;
|
|
font-size: inherit;
|
|
}
|
|
select:focus{
|
|
outline:none;
|
|
}
|
|
</style>
|
|
</head>
|
|
<audio id="player" src=""></audio>
|
|
<body>
|
|
<div>
|
|
<pre id="stream-info"></pre>
|
|
<div id="controls">
|
|
<select id="streamSelection">
|
|
<option value="" disabled selected style="display:none;">Select a Stream</option>
|
|
</select>
|
|
<button id="playButton">Play</button>
|
|
<div id="volume-container">
|
|
<label for="volume" style="vertical-align: middle">Volume: </label>
|
|
<input id="volume" type="range" min="0" max="100" value="100">
|
|
</div>
|
|
<button id="muteButton">Mute</button>
|
|
</div>
|
|
</div>
|
|
<body>
|
|
<script>
|
|
function loadStreamChoices(data) {
|
|
var selectItem = document.getElementById('streamSelection')
|
|
streams = data["streams"]
|
|
for(let i in streams) {
|
|
var opt = document.createElement('option')
|
|
if(data.https_streams == true) {
|
|
opt.value = "https://"
|
|
} else {
|
|
opt.value = "http://"
|
|
}
|
|
opt.value = opt.value + data.hostname + ":" + data.port + streams[i]["local_mount"]
|
|
opt.innerHTML = streams[i]["name"]
|
|
selectItem.appendChild(opt)
|
|
}
|
|
}
|
|
|
|
var configXMLHTTP = new XMLHttpRequest();
|
|
configXMLHTTP.onreadystatechange = function() {
|
|
if (this.readyState == 4 && this.status == 200) {
|
|
var data = JSON.parse(this.responseText);
|
|
loadStreamChoices(data)
|
|
}
|
|
};
|
|
configXMLHTTP.open("GET", "/config.json", true);
|
|
configXMLHTTP.send();
|
|
</script>
|
|
<script>
|
|
var UPDATE_INTERVAL = window.setInterval(renderStreamInfo, 10000)
|
|
|
|
function buildTitleLine(width, title) {
|
|
width = width - 2 // Subtracting 2 here to account for "|"
|
|
spacing = Math.floor((width - title.length)/2)
|
|
line = "|" + " ".repeat(spacing) + title + " ".repeat(spacing)
|
|
if(spacing + title.length + spacing != width) {
|
|
line = line + " |" // Handle title not being even
|
|
} else {
|
|
line = line + "|"
|
|
}
|
|
return line
|
|
}
|
|
|
|
function getSourceInfo(data) {
|
|
sources = data["icestats"]["source"]
|
|
for(let i in sources) {
|
|
selectedStream = document.getElementById('streamSelection').value.replace(/^.*[\\\/]/, '')
|
|
icecastStream = sources[i]["listenurl"].replace(/^.*[\\\/]/, '')
|
|
if(selectedStream == icecastStream) {
|
|
sources[i]["streamurl"] = document.getElementById('streamSelection').value
|
|
return sources[i]
|
|
}
|
|
}
|
|
}
|
|
|
|
function fetchText(statusData, key) {
|
|
text = ""
|
|
streamInfo = getSourceInfo(statusData)
|
|
if(streamInfo && streamInfo[key]) {
|
|
text = String(streamInfo[key])
|
|
}
|
|
return text
|
|
}
|
|
|
|
|
|
// This is so bad...but special chars mess up '.length'
|
|
function badThing(text) {
|
|
text = text.replace(/[^\x00-\x7F]/g, '')
|
|
return text
|
|
}
|
|
|
|
function buildLine(width, text, prefix) {
|
|
text = badThing(text)
|
|
prefix = "|" + prefix
|
|
spacing = (width - prefix.length - text.length - 2) // Subtract 2 for " |"
|
|
if(spacing < 0) {
|
|
spacing = 0
|
|
}
|
|
line = prefix + text + " ".repeat(spacing) + " |"
|
|
// Trim line if too long
|
|
if(line.length > width) {
|
|
end = (width - line.length)
|
|
start = width - 2 // Subtract 2 for " |"
|
|
line = line.substring(end, start) + " |"
|
|
}
|
|
return line
|
|
}
|
|
|
|
function buildDownloadLine(width, url) {
|
|
line = "| Download: "
|
|
if (url != "") {
|
|
line = line + "<a href='" + url + ".m3u" + "'>M3U</a>"
|
|
line = line + "/"
|
|
line = line + "<a href='" + url + ".xspf" + "'>XSPF</a>"
|
|
line = line + " ".repeat(width - 24) + " |"
|
|
} else {
|
|
line = line + " ".repeat(width) + " |"
|
|
}
|
|
return line
|
|
}
|
|
|
|
function updateStreamInfo() {
|
|
var statusXMLHTTP = new XMLHttpRequest();
|
|
statusXMLHTTP.onreadystatechange = function() {
|
|
if (this.readyState == 4 && this.status == 200) {
|
|
var streamData = JSON.parse(this.responseText);
|
|
title = streamData["icestats"]["host"]
|
|
songName = fetchText(streamData, "title")
|
|
listeners = fetchText(streamData, "listeners")
|
|
streamURL = fetchText(streamData, "streamurl")
|
|
renderStreamInfo(title, songName, listeners, streamURL)
|
|
}
|
|
};
|
|
statusXMLHTTP.open("GET", "/status-json.xsl", true);
|
|
statusXMLHTTP.send();
|
|
}
|
|
|
|
function renderStreamInfo(title="", songName="", listeners="", streamURL="") {
|
|
width = 60
|
|
titleLine = buildTitleLine(width, title)
|
|
songNameLine = buildLine(width, songName, " Song Title: ")
|
|
listenersLine = buildLine(width, listeners, " Listeners: ")
|
|
downloadLine = buildDownloadLine(width, streamURL)
|
|
|
|
var streamLines = []
|
|
streamLines.push("/" + "-".repeat(width - 2) + "\\")
|
|
streamLines.push(titleLine)
|
|
streamLines.push("|" + " ".repeat(width - 2) + "|")
|
|
streamLines.push(songNameLine)
|
|
streamLines.push(listenersLine)
|
|
streamLines.push(downloadLine)
|
|
streamLines.push("|" + " ".repeat(width - 2) + "|")
|
|
streamLines.push("\\" + "-".repeat(width - 2) + "/")
|
|
|
|
document.getElementById("stream-info").innerHTML = streamLines.join("\n")
|
|
}
|
|
|
|
function setUpdateInterval(interval) {
|
|
window.clearInterval(UPDATE_INTERVAL)
|
|
UPDATE_INTERVAL = window.setInterval(updateStreamInfo, interval)
|
|
updateStreamInfo()
|
|
}
|
|
|
|
window.onload = function(){
|
|
updateStreamInfo()
|
|
}
|
|
|
|
streamSelection.onchange = function() {
|
|
player.src = this.value
|
|
document.title = this.options[this.selectedIndex].text
|
|
player.load()
|
|
player.play()
|
|
}
|
|
|
|
player.onwaiting = function() {
|
|
updateStreamInfo()
|
|
setUpdateInterval(100)
|
|
playButton.innerHTML = "Loading..."
|
|
return;
|
|
}
|
|
player.onplaying = function() {
|
|
updateStreamInfo()
|
|
setUpdateInterval(10000)
|
|
playButton.innerHTML = "Pause"
|
|
return;
|
|
}
|
|
player.onpause = function() {
|
|
updateStreamInfo()
|
|
setUpdateInterval(60000)
|
|
playButton.innerHTML = "Play"
|
|
return;
|
|
}
|
|
|
|
playButton.onclick = function() {
|
|
if(player.paused) {
|
|
player.play();
|
|
} else {
|
|
player.pause();
|
|
}
|
|
}
|
|
|
|
muteButton.onclick = function() {
|
|
if(player.muted) {
|
|
player.muted = false;
|
|
this.innerHTML = "Mute"
|
|
} else {
|
|
player.muted = true;
|
|
this.innerHTML = "Muted"
|
|
}
|
|
}
|
|
|
|
volume.oninput = function() {
|
|
player.volume = this.value/100;
|
|
}
|
|
</script>
|
|
</html>
|
|
|