-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.phtml
106 lines (99 loc) · 4.28 KB
/
index.phtml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<html>
<head>
<title>Stardisk PHP Radio</title>
<style>
.block{
width: 300px;
border: 1px solid #aaa;
background: #ccc;
margin: 20px 0;
padding: 5px;
}
</style>
</head>
<body>
<h1>Stardisk PHP Radio</h1>
<a href="?playlist" download="listen.m3u">Download file for media players</a>
<div class="block" id="info">
<p>Now playing: <span class="nowPlaying"><?=$_RESPONSE['nowPlaying']?></span></p>
<?php if($this->debug):?>
<p>File: <span class="File"><?=$_RESPONSE['File']?></span></p>
<p>Chunk: <span class="Chunk"><?=$_RESPONSE['Chunk']?></span> of <span class="TotalChunks"><?=$_RESPONSE['TotalChunks']?></span></p>
<p>Last updated: <span class="LastUpdated"><?=$_RESPONSE['LastUpdated']?></span></p>
<p>Current Time: <span class="CurrentTime"><?=$_RESPONSE['CurrentTime']?></span></p>
<?php endif;?>
</div>
<div class="block">
<button id="play">Play</button>
<span class="playing"></span>
</div>
<div class="block">
<h3>Playing history</h3>
<ul id="history">
<?php if(is_array($_RESPONSE['History'])): ?>
<?php foreach($_RESPONSE['History'] as $item):?>
<li><?=$item?></li>
<?php endforeach;?>
<?php else:?>
<li>[history is empty]</li>
<?php endif;?>
</ul>
</div>
<script>
var playButton = document.getElementById('play');
var audio = new Audio();
var updateTimeInterval;
audio.addEventListener('canplay', function(){ this.play();});
audio.addEventListener('error', function(e){
alert('error'); console.log(e); console.log(e.name, e.message); playButton.style.display = '';
});
playButton.onclick = function(){
if(!this.classList.contains('stop')){
audio.src = '/radio/?play';
this.classList.add('stop');
this.textContent = 'Stop';
getStatus();
var playingTime = document.querySelector('.playing');
updateTimeInterval = setInterval(function(){
playingTime.innerText = addZeros(Math.floor(audio.currentTime / 60), 3)+':'+addZeros(Math.floor(audio.currentTime % 60),2);
},1000);
}
else{
audio.pause();
clearInterval(updateTimeInterval);
location.reload();
}
};
var xhr = new XMLHttpRequest(), info = document.getElementById('info');
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
var response = JSON.parse(xhr.responseText);
for(var key in response){
if(key == 'History' && response[key]){
var history = document.getElementById('history'), html = '';
response[key].forEach(function(historyItem){
html +='<li>'+historyItem+'</li>';
});
history.innerHTML = html;
}
else{
info.querySelector('.'+key).textContent = response[key];
}
}
}
};
if(location.search === '?often'){ setInterval(getStatus, 1000);}
else{ setInterval(getStatus, 5000);}
function addZeros(number, lengthWithZeros){
var numberAsString = String(number);
var requiredZeros = lengthWithZeros - numberAsString.length;
if(requiredZeros > 0){ return '0'.repeat(requiredZeros) + numberAsString;}
else{ return numberAsString;}
}
function getStatus(){
xhr.open('GET','/radio/?json');
xhr.send();
}
</script>
</body>
</html>