|
|
@@ -0,0 +1,222 @@
|
|
|
+<html lang="en">
|
|
|
+ <head>
|
|
|
+ <meta charset="utf-8">
|
|
|
+ <meta name="theme-color" content="#ffffff">
|
|
|
+ <title>Test player</title>
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <link rel="stylesheet" type="text/css" href="/player.css">
|
|
|
+ </head>
|
|
|
+ <body>
|
|
|
+ <audio id="radio"></audio>
|
|
|
+ <div id="player">
|
|
|
+ <div id="contents" hidden>
|
|
|
+ <div id="altreRadio" class="tags">
|
|
|
+ </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>
|
|
|
+ <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>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div id="controls" class="controls">
|
|
|
+ <div class="controlBlock controlLeft">
|
|
|
+ <div class="info-content">
|
|
|
+ <span id="radio-name">Radio Spore</span>
|
|
|
+ <br/>
|
|
|
+ <span id="program-name">Un programma a caso</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="controlBlock controlCenter">
|
|
|
+ <span id="prev" class="prev-step control">
|
|
|
+ <img alt="Indietro di 15 secondi" src="/icons/15_sec_prima.svg">
|
|
|
+ </span>
|
|
|
+ <span id="play" class="play-pause control" label="Premi per iniziare la riproduzione del player">
|
|
|
+ <img alt="Ascolta la diretta" src="/icons/playIcon.svg">
|
|
|
+ </span>
|
|
|
+ <span id="next" class="prev-step control">
|
|
|
+ <img alt="Avanti di 15 secondi" src="/icons/15_sec_dopo.svg">
|
|
|
+ </span>
|
|
|
+ </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" />
|
|
|
+ <img id="contents-button" class="arrow-up" alt="Apri il player" src="/icons/ico-arrow.png" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <script>
|
|
|
+ const 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 currentStatus
|
|
|
+ async function playPauseRadio() {
|
|
|
+ try {
|
|
|
+ if(radio.paused) {
|
|
|
+ await radio.play();
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ await radio.pause();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ catch(err) {
|
|
|
+ console.log(err);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ function onVolumeChange(e) {
|
|
|
+ console.log(e.target)
|
|
|
+ radio.volume = e.target.value;
|
|
|
+ }
|
|
|
+ function setupPlayer() {
|
|
|
+ playButton.addEventListener("click", playPauseRadio, false);
|
|
|
+ prevButton.addEventListener("click",(e) => {
|
|
|
+ radio.setCurrentTicurrentTime -= 15;
|
|
|
+ }, false)
|
|
|
+ nextButton.addEventListener("click",(e) => {
|
|
|
+ radio.setCurrentTicurrentTime += 15;
|
|
|
+ }, false)
|
|
|
+ volume.addEventListener('change', onVolumeChange);
|
|
|
+ contentsButton.addEventListener("click", (e) => {
|
|
|
+ contents.hidden = !contents.hidden;
|
|
|
+ e.target.classList.toggle("arrow-up");
|
|
|
+ })
|
|
|
+ }
|
|
|
+ function setupRadios() {
|
|
|
+ for(r of leRadio) {
|
|
|
+ let el = document.createElement("span")
|
|
|
+ el.innerHTML = r.name;
|
|
|
+ document.getElementById("altreRadio").appendChild(el)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ function setupShowButtons() {
|
|
|
+ let scrollFwd = (el) => {
|
|
|
+ let scrollAmount = 0;
|
|
|
+ let timer = setInterval( () => {
|
|
|
+ el.scrollLeft += 10;
|
|
|
+ scrollAmount += 10;
|
|
|
+ if(scrollAmount >= 100){
|
|
|
+ window.clearInterval(timer);
|
|
|
+ }
|
|
|
+ }, 25);
|
|
|
+
|
|
|
+ }
|
|
|
+ let scrollBack = (el) => {
|
|
|
+ let scrollAmount = 0;
|
|
|
+ let timer = setInterval( () => {
|
|
|
+ el.scrollLeft -= 10;
|
|
|
+ scrollAmount -= 10;
|
|
|
+ if(scrollAmount <= -100){
|
|
|
+ window.clearInterval(timer);
|
|
|
+ }
|
|
|
+ }, 25);
|
|
|
+ }
|
|
|
+ document.getElementById("prev-show").addEventListener("click", (e) => {
|
|
|
+ scrollBack(showListEl)
|
|
|
+ })
|
|
|
+ document.getElementById("next-show").addEventListener("click", (e) => {
|
|
|
+ scrollFwd(showListEl)
|
|
|
+ })
|
|
|
+ document.getElementById("next-show-card").addEventListener("click", (e) => {
|
|
|
+ scrollFwd(showContentsEl.querySelector("div.content-box:not(.hidden)"))
|
|
|
+ })
|
|
|
+ document.getElementById("prev-show-card").addEventListener("click", (e) => {
|
|
|
+ scrollBack(showContentsEl.querySelector("div.content-box:not(.hidden)"))
|
|
|
+ })
|
|
|
+
|
|
|
+ }
|
|
|
+ async function setupProgrammi() {
|
|
|
+ const res = await fetch("https://www.arkiwi.org/path64/cmFkaW9zcG9yZQ/shows");
|
|
|
+ const shows = Array.from(await new window.DOMParser().parseFromString(await res.text(), "text/xml").getElementsByTagName("show"));
|
|
|
+ programmi = shows.map(show => Array.from(show.childNodes).reduce((data, node) => {
|
|
|
+ if(node.localName) {
|
|
|
+ data[node.localName] = node.textContent // + ( node.localName == 'feed' ? '?limit=6' : '')
|
|
|
+ }
|
|
|
+ return data;
|
|
|
+ }, {}))
|
|
|
+
|
|
|
+ for(let p of programmi) {
|
|
|
+ let el = document.createElement("span")
|
|
|
+ el.innerHTML = p.name;
|
|
|
+ el.addEventListener('click', (e) => {
|
|
|
+ const id = p.name.replaceAll(/[\W_]+/g," ").replaceAll(' ','-');
|
|
|
+ for(let box of document.getElementById("programmi-content").getElementsByClassName("content-box")) {
|
|
|
+ if(box.id != id) {
|
|
|
+ box.classList.add("hidden");
|
|
|
+ }
|
|
|
+ }
|
|
|
+ document.getElementById(id).classList.toggle("hidden");
|
|
|
+ })
|
|
|
+ showListEl.appendChild(el)
|
|
|
+ fetch(p.feed)
|
|
|
+ .then(res => res.text())
|
|
|
+ .then(res => new window.DOMParser().parseFromString(res, "text/xml"))
|
|
|
+ .then(xml => {
|
|
|
+ let data = Array.from(xml.getElementsByTagName("item")).
|
|
|
+ map(item => Array.from(item.childNodes)
|
|
|
+ .reduce((data, node) => {
|
|
|
+ if(node.localName) {
|
|
|
+ if(node.prefix){
|
|
|
+ if(!data[node.prefix]) {
|
|
|
+ data[node.prefix] = {}
|
|
|
+ }
|
|
|
+ data[node.prefix][node.localName] = node.textContent
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ data[node.localName] = node.textContent
|
|
|
+ // if(localName == "pubDate") {
|
|
|
+ // data[node.localName] = new Date(data[node.localName])
|
|
|
+ // }
|
|
|
+ }}
|
|
|
+ return data;
|
|
|
+ }, {}))
|
|
|
+ let programma = document.createElement("div")
|
|
|
+ programma.setAttribute("id", p.name.replaceAll(/[\W_]+/g," ").replaceAll(' ', '-'));
|
|
|
+ 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")
|
|
|
+ let keywords = ''
|
|
|
+ if(data[a]['itunes'] && data[a].itunes.keywords) {
|
|
|
+ data[a]['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)
|
|
|
+ programma.appendChild(puntata)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ setupPlayer();
|
|
|
+ setupRadios();
|
|
|
+ setupShowButtons();
|
|
|
+ setupProgrammi();
|
|
|
+ </script>
|
|
|
+ </body>
|
|
|
+</html>
|
