|
@@ -7,21 +7,46 @@
|
|
|
<link rel="stylesheet" type="text/css" href="/player.css">
|
|
|
</head>
|
|
|
<body>
|
|
|
- <audio id="radio"></audio>
|
|
|
+ <audio id="radio" controls></audio>
|
|
|
<div id="player">
|
|
|
<div id="contents" hidden>
|
|
|
- <div id="altreRadio" class="tags">
|
|
|
+ <div id="menu" class="tags">
|
|
|
+ <input type="radio" name="tab-selector" id="tab-other-radios" checked/>
|
|
|
+ <label for="tab-other-radios"> Altre Radio</label>
|
|
|
+ <input type="radio" name="tab-selector" id="tab-programmi"/>
|
|
|
+ <label for="tab-programmi"> Programmi</label>
|
|
|
+ <input type="radio" name="tab-selector" id="tab-playlist"/>
|
|
|
+ <label for="tab-playlist"> Playlist</label>
|
|
|
</div>
|
|
|
- <div id="programmi">
|
|
|
- <div class="show-list">
|
|
|
- <img id="prev-show" class="arrow arrow-left" alt="Scorri a sinistra" src="/icons/ico-arrow.png" />
|
|
|
- <div id="programmi-lista"></div>
|
|
|
- <img id="next-show" class="arrow arrow-right" alt="Scorri a destra" src="/icons/ico-arrow.png" />
|
|
|
+ <div class="tabs">
|
|
|
+ <div id="other-radios" class="tags">
|
|
|
</div>
|
|
|
- <div class="show-content">
|
|
|
- <img id="prev-show-card" class="arrow arrow-left" alt="Scorri a sinistra" src="/icons/ico-arrow.png"/>
|
|
|
- <div id="programmi-content"></div>
|
|
|
- <img id="next-show-card" class="arrow arrow-right" alt="Scorri a destra" src="/icons/ico-arrow.png"/>
|
|
|
+ <div id="programmi" class="hidden">
|
|
|
+ <div class="show-list">
|
|
|
+ <img id="prev-show" class="arrow arrow-left" alt="Scorri a sinistra" src="/icons/ico-arrow.png" />
|
|
|
+ <div id="programmi-lista"></div>
|
|
|
+ <img id="next-show" class="arrow arrow-right" alt="Scorri a destra" src="/icons/ico-arrow.png" />
|
|
|
+ </div>
|
|
|
+ <div class="show-content">
|
|
|
+ <img id="prev-show-card" class="arrow arrow-left" alt="Scorri a sinistra" src="/icons/ico-arrow.png"/>
|
|
|
+ <div id="programmi-content">
|
|
|
+ <template id="show-card-template">
|
|
|
+ <div class="show-card">
|
|
|
+ <span class="title"></span>
|
|
|
+ <div class="small-tags"></div><br>
|
|
|
+ <div class="description"></div>
|
|
|
+ <div class="controls">
|
|
|
+ <img src="/icons/plus.png" class="add-to-playlist">
|
|
|
+ <img src="/icons/playIcon.svg" class="play-pause">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ <img id="next-show-card" class="arrow arrow-right" alt="Scorri a destra" src="/icons/ico-arrow.png"/>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div id="playlist" class="hidden">
|
|
|
+ Qui ci va la playlist, ancora non puoi riprodurla, però puoi scaricarle l'<span onclick="downloadPlaylist"><b>m3u 📥</b></span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -46,32 +71,39 @@
|
|
|
</div>
|
|
|
<div class="controlBlock controlRight">
|
|
|
<div>
|
|
|
- <span class="live">· LIVE</span>
|
|
|
- <span class="live">TORNA AL LIVE</span>
|
|
|
- <img id="volume-button" src="/icons/volume.svg" />
|
|
|
- <input id="volume" type="range" min="0" max="1" step="0.01" value="1" />
|
|
|
+ <span class="is-live live">· LIVE</span>
|
|
|
+ <span class="back-to-live live hidden">TORNA AL LIVE</span>
|
|
|
+ <img id="volume-on" src="/icons/volume.svg" />
|
|
|
+ <img id="volume-off" src="/icons/volume_off.svg" class="hidden"/>
|
|
|
+ <input id="volume" type="range" min="0" max="1" step="0.01" value="1" />
|
|
|
<img id="contents-button" class="arrow-up" alt="Apri il player" src="/icons/ico-arrow.png" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<script>
|
|
|
- const leRadio = [
|
|
|
+ let leRadio = [
|
|
|
{ "name": "Radio Spore", "stream": "https://stream.radiospore.oziosi.org:8003/spore.ogg" },
|
|
|
{ "name": "Radio Wombat", "stream": "https://s.streampunk.cc/wombat.ogg"},
|
|
|
{ "name": "RadioGramma", "stream": "https://stream.radiospore.oziosi.org:8003/radiogramma.ogg"},
|
|
|
{ "name": "RadioForte", "stream": "http://stream.s.streampunk.cc/player/RadioForte.ogg"},
|
|
|
{ "name": "RadioEustachio", "stream": "https://stream.radiospore.oziosi.org:8003/radioeustachio.ogg"}]
|
|
|
- let playlist = {}
|
|
|
- let radio = document.getElementById("radio");
|
|
|
- radio.src = leRadio[0]["stream"] + "?" + Math.floor((Math.random() * 10000) + 1) ;
|
|
|
- const playButton = document.getElementById("play")
|
|
|
- const nextButton = document.getElementById("next")
|
|
|
- const prevButton = document.getElementById("prev")
|
|
|
- const contents = document.getElementById("contents")
|
|
|
- const contentsButton = document.getElementById("contents-button")
|
|
|
- const showContentsEl = document.getElementById("programmi-content")
|
|
|
- const showListEl = document.getElementById("programmi-lista")
|
|
|
+ let playlist = []
|
|
|
+ let radio = document.querySelector("#radio");
|
|
|
+ leRadio = leRadio.map((r) => {
|
|
|
+ r.stream += "?" + Math.floor((Math.random() * 10000) + 1)
|
|
|
+ return r
|
|
|
+ });
|
|
|
+ radio.src = leRadio[0].stream
|
|
|
+ const playButton = document.querySelector("#play")
|
|
|
+ const nextButton = document.querySelector("#next")
|
|
|
+ const prevButton = document.querySelector("#prev")
|
|
|
+ const contents = document.querySelector("#contents")
|
|
|
+ const contentsButton = document.querySelector("#contents-button")
|
|
|
+ const volumeOn = document.querySelector("#volume-on")
|
|
|
+ const volumeOff = document.querySelector("#volume-off")
|
|
|
+ const showContentsEl = document.querySelector("#programmi-content")
|
|
|
+ const showListEl = document.querySelector("#programmi-lista")
|
|
|
let currentStatus
|
|
|
async function playPauseRadio() {
|
|
|
try {
|
|
@@ -87,28 +119,102 @@
|
|
|
}
|
|
|
}
|
|
|
function onVolumeChange(e) {
|
|
|
- console.log(e.target)
|
|
|
+ if(e.target.value == 0) {
|
|
|
+ volumeOn.classList.add("hidden");
|
|
|
+ volumeOff.classList.remove("hidden")
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ volumeOff.classList.add("hidden");
|
|
|
+ volumeOn.classList.remove("hidden")
|
|
|
+ }
|
|
|
radio.volume = e.target.value;
|
|
|
}
|
|
|
+ function setupTabs() {
|
|
|
+ for(let el of document.querySelectorAll("#menu > input")){
|
|
|
+ console.log(el)
|
|
|
+ el.addEventListener('change', (e) => {
|
|
|
+ for(let ce of document.querySelectorAll("#menu > input")) {
|
|
|
+ if(ce.checked) {
|
|
|
+ document.querySelector("#"+ce.id.split('-').slice(1).join('-')).classList.remove("hidden")
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ document.querySelector("#"+ce.id.split('-').slice(1).join('-')).classList.add("hidden")
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
function setupPlayer() {
|
|
|
playButton.addEventListener("click", playPauseRadio, false);
|
|
|
- prevButton.addEventListener("click",(e) => {
|
|
|
- radio.setCurrentTicurrentTime -= 15;
|
|
|
- }, false)
|
|
|
- nextButton.addEventListener("click",(e) => {
|
|
|
- radio.setCurrentTicurrentTime += 15;
|
|
|
- }, false)
|
|
|
+ volumeOff.addEventListener("click", (e) => {
|
|
|
+ volume.disabled = false;
|
|
|
+ e.target.classList.add("hidden");
|
|
|
+ volumeOn.classList.remove("hidden");
|
|
|
+ radio.volume = volume.value;
|
|
|
+ });
|
|
|
+ volumeOn.addEventListener("click", (e) => {
|
|
|
+ volume.disabled = true;
|
|
|
+ e.target.classList.add("hidden");
|
|
|
+ volumeOff.classList.remove("hidden");
|
|
|
+ radio.volume = 0;
|
|
|
+ });
|
|
|
volume.addEventListener('change', onVolumeChange);
|
|
|
contentsButton.addEventListener("click", (e) => {
|
|
|
contents.hidden = !contents.hidden;
|
|
|
e.target.classList.toggle("arrow-up");
|
|
|
})
|
|
|
+ let showBackToLive = () => {
|
|
|
+ document.querySelector(".is-live").classList.add("hidden");
|
|
|
+ document.querySelector(".back-to-live").classList.remove("hidden");
|
|
|
+ }
|
|
|
+ prevButton.addEventListener("click",(e) => {
|
|
|
+ radio.currentTime -= 15;
|
|
|
+ showBackToLive()
|
|
|
+ }, false)
|
|
|
+ nextButton.addEventListener("click",(e) => {
|
|
|
+ radio.currentTime += 15;
|
|
|
+ showBackToLive()
|
|
|
+ }, false)
|
|
|
+
|
|
|
+ radio.addEventListener('pause', (e) => {
|
|
|
+ showBackToLive()
|
|
|
+ })
|
|
|
+ document.querySelector(".back-to-live").addEventListener('click', (e) => {
|
|
|
+ document.querySelector(".is-live").classList.remove("hidden")
|
|
|
+ e.target.classList.add("hidden")
|
|
|
+ radio.currentTime = radio.duration
|
|
|
+ radio.play()
|
|
|
+ })
|
|
|
+ }
|
|
|
+ function downloadPlaylist() {
|
|
|
+ let m3u = "#EXTM3U\n"
|
|
|
+ m3u = playlist.reduce((data, track) => {
|
|
|
+ data += `#EXTINF:${track.itunes.duration},${track.itunes.name} \n`
|
|
|
+ data += `${track.guid}\n`
|
|
|
+ return data
|
|
|
+ }, m3u)
|
|
|
+ console.log(m3u)
|
|
|
+ const blob = new Blob([m3u], { 'type': 'audio/x-mpegurl'});
|
|
|
+ const m3uFile = window.URL.createObjectURL(blob);
|
|
|
+ var a = document.createElement("a");
|
|
|
+ a.style = "display: none";
|
|
|
+ document.body.appendChild(a);
|
|
|
+ url = window.URL.createObjectURL(blob);
|
|
|
+ a.href = url;
|
|
|
+ a.download = "playlist.m3u";
|
|
|
+ a.click();
|
|
|
+ window.URL.revokeObjectURL(url);
|
|
|
}
|
|
|
function setupRadios() {
|
|
|
- for(r of leRadio) {
|
|
|
+ for(let r of leRadio) {
|
|
|
let el = document.createElement("span")
|
|
|
el.innerHTML = r.name;
|
|
|
- document.getElementById("altreRadio").appendChild(el)
|
|
|
+ el.addEventListener('click', (e) => {
|
|
|
+ radio.src = r.stream;
|
|
|
+ document.querySelector("#radio-name").textContent = r.name
|
|
|
+ radio.play()
|
|
|
+ })
|
|
|
+ document.querySelector("#other-radios").appendChild(el)
|
|
|
}
|
|
|
}
|
|
|
function setupShowButtons() {
|
|
@@ -167,6 +273,7 @@
|
|
|
box.classList.add("hidden");
|
|
|
}
|
|
|
}
|
|
|
+ console.log(id)
|
|
|
document.getElementById(id).classList.toggle("hidden");
|
|
|
})
|
|
|
showListEl.appendChild(el)
|
|
@@ -197,17 +304,25 @@
|
|
|
programma.classList.add("content-box");
|
|
|
programma.classList.add("hidden");
|
|
|
document.getElementById("programmi-content").append(programma);
|
|
|
- for( a in data) {
|
|
|
- let puntata = document.createElement("div")
|
|
|
- let playPause = document.createElement("img")
|
|
|
- playPause.src = '/icons/playIcon.svg'
|
|
|
- playPause.classList.add("play-pause")
|
|
|
+ for(let s of data) {
|
|
|
+ let template = document.querySelector("#show-card-template");
|
|
|
+ let puntata = template.content.cloneNode(true);
|
|
|
let keywords = ''
|
|
|
- if(data[a]['itunes'] && data[a].itunes.keywords) {
|
|
|
- data[a]['itunes']['keywords'].split(',').map((k) => `<span>${k}</span>`).join('')
|
|
|
+ if(s['itunes'] && s.itunes.keywords) {
|
|
|
+ s['itunes']['keywords'].split(',').map((k) => `<span>${k}</span>`).join('')
|
|
|
}
|
|
|
- puntata.innerHTML = `<span><b>${data[a].title}</b></span> <div class="small-tags">${keywords}</div> <br/> <br/><div>${data[a].description}</div>`;
|
|
|
- puntata.appendChild(playPause)
|
|
|
+ puntata.querySelector(".title").textContent = s.title;
|
|
|
+ puntata.querySelector(".description").textContent = s.description;
|
|
|
+ //puntata.innerHTML = `<span><b>${data[a].title}</b></span> <div class="small-tags">${keywordso}</div> <br/> <br/><div>${data[a].description}</div>`;
|
|
|
+ puntata.querySelector(".play-pause").addEventListener('click', (e) => {
|
|
|
+ radio.src = s.guid;
|
|
|
+ playPauseRadio();
|
|
|
+ document.querySelector("#radio-name").textContent = p.name;
|
|
|
+ document.querySelector("#program-name").textContent = s.title;
|
|
|
+ })
|
|
|
+ puntata.querySelector(".add-to-playlist").addEventListener('click', (e) => {
|
|
|
+ playlist.push(s)
|
|
|
+ })
|
|
|
programma.appendChild(puntata)
|
|
|
}
|
|
|
})
|
|
@@ -215,6 +330,7 @@
|
|
|
}
|
|
|
setupPlayer();
|
|
|
setupRadios();
|
|
|
+ setupTabs();
|
|
|
setupShowButtons();
|
|
|
setupProgrammi();
|
|
|
</script>
|