aggiunto supporto playlisti cose al volume, torna al live e altre cose
This commit is contained in:
parent
ddccba2bb3
commit
2939f0426b
3 changed files with 254 additions and 56 deletions
34
icons/volume_off.svg
Normal file
34
icons/volume_off.svg
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Livello_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
|
||||
<g>
|
||||
|
||||
<path fill="none" stroke="#FFFFFF" stroke-width="8.9597" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
|
||||
M20.3,38.3H7c-0.3,0-0.7,0.3-0.7,0.7v22.1c0,0.3,0.3,0.7,0.7,0.7h13.4l23.8,19.4c0.4,0.3,1.1,0.1,1.1-0.5V19.5
|
||||
c0-0.5-0.6-0.8-1.1-0.5L20.3,38.3z"/>
|
||||
|
||||
<path display="none" fill="none" stroke="#FFFFFF" stroke-width="8.9597" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
|
||||
M82.9,22.8c6.6,6.6,10.7,15.7,10.7,25.8s-4.1,19.2-10.7,25.8"/>
|
||||
|
||||
<path display="none" fill="none" stroke="#FFFFFF" stroke-width="8.9597" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
|
||||
M71.1,65.8c4.4-4.4,7.2-10.5,7.2-17.2s-2.8-12.8-7.2-17.2"/>
|
||||
|
||||
<path display="none" fill="none" stroke="#FFFFFF" stroke-width="8.9597" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
|
||||
M59.4,57.2C61.6,55,63,52,63,48.7s-1.3-6.4-3.6-8.6"/>
|
||||
|
||||
<path display="none" fill="none" stroke="#FFFFFF" stroke-width="8.9597" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
|
||||
M68.1,31.4"/>
|
||||
|
||||
<path display="none" fill="none" stroke="#FFFFFF" stroke-width="8.9597" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
|
||||
M78.6,22.8"/>
|
||||
</g>
|
||||
<g id="Livello_2_1_">
|
||||
<g id="Livello_1-2">
|
||||
|
||||
<line fill="none" stroke="#FFFFFF" stroke-width="8.9597" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="58.2" y1="35.1" x2="91.1" y2="67.9"/>
|
||||
|
||||
<line fill="none" stroke="#FFFFFF" stroke-width="8.9597" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="91.1" y1="35.1" x2="58.2" y2="67.9"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2 KiB |
188
index.html
188
index.html
|
|
@ -7,12 +7,21 @@
|
|||
<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="tabs">
|
||||
<div id="other-radios" class="tags">
|
||||
</div>
|
||||
<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>
|
||||
|
|
@ -20,10 +29,26 @@
|
|||
</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>
|
||||
<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>
|
||||
<div id="controls" class="controls">
|
||||
<div class="controlBlock controlLeft">
|
||||
|
|
@ -46,9 +71,10 @@
|
|||
</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" />
|
||||
<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>
|
||||
|
|
@ -56,22 +82,28 @@
|
|||
</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>
|
||||
|
|
|
|||
68
player.css
68
player.css
|
|
@ -1,11 +1,13 @@
|
|||
#player {
|
||||
background-color: #0c0c0d;
|
||||
/* background-color: #0c0c0d;*/
|
||||
background-color: #1c1b22;
|
||||
border-radius: 6px;
|
||||
color: #fff;
|
||||
padding-top:0px;
|
||||
font-family: -apple-system,system-ui,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;;
|
||||
}
|
||||
.show-list > .arrow {
|
||||
height: 40px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.show-list {
|
||||
|
|
@ -22,7 +24,6 @@
|
|||
border-radius: 5px 15px;
|
||||
/* background: #38383d; */
|
||||
border: solid 1px #fff;
|
||||
color: #fff;
|
||||
padding-top: 10px;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
|
|
@ -30,7 +31,8 @@
|
|||
}
|
||||
|
||||
#programmi-lista > span:hover {
|
||||
background: #4a4a4f;
|
||||
/*background: #4a4a4f;*/
|
||||
background: #42414d;
|
||||
}
|
||||
|
||||
#programmi-content {
|
||||
|
|
@ -43,10 +45,11 @@
|
|||
}
|
||||
|
||||
.show-content > .arrow{
|
||||
height: 50;
|
||||
height: 20;
|
||||
width: 50;
|
||||
}
|
||||
|
||||
|
||||
.play-pause {
|
||||
border: 2px solid beige;
|
||||
border-radius: 100%;
|
||||
|
|
@ -99,7 +102,39 @@
|
|||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.content-box> div {
|
||||
.show-card > .description {
|
||||
height: 70%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.show-card > .controls > img+img {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
#menu > input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#player > div {
|
||||
margin-left: 10px;
|
||||
}
|
||||
#menu > input:checked+label {
|
||||
background: #4a4a4f;
|
||||
}
|
||||
|
||||
#menu > input+label {
|
||||
border: solid 1px #fff;
|
||||
color: #fff;
|
||||
border-radius: 4px;
|
||||
font-size: 20px;
|
||||
padding: 2;
|
||||
}
|
||||
|
||||
.show-card + .show-card {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.show-card {
|
||||
/* background: #38383d; */
|
||||
border: solid 1px #fff;
|
||||
color: #fff;
|
||||
|
|
@ -108,11 +143,24 @@
|
|||
height: 200px;
|
||||
word-wrap: break-word;
|
||||
font-size: 9pt;
|
||||
margin-left: 20px;
|
||||
padding: 5px;
|
||||
flex: 0 0 200px;
|
||||
}
|
||||
|
||||
.show-card > .controls {
|
||||
display: flex;
|
||||
justify-content: right;
|
||||
}
|
||||
|
||||
.show-card > .controls > .play-pause {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.add-to-playlist {
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.content-box {
|
||||
margin-top: 20px;
|
||||
width: auto;
|
||||
|
|
@ -155,7 +203,7 @@
|
|||
height:87px;
|
||||
}
|
||||
|
||||
#volume-button {
|
||||
#volume-off, #volume-on {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
}
|
||||
|
|
@ -167,12 +215,12 @@
|
|||
|
||||
#contents-button {
|
||||
with: 43px;
|
||||
height: 43px;
|
||||
height: 17px;
|
||||
}
|
||||
|
||||
.info-content {
|
||||
color: #fff;
|
||||
margin-top: 20px;
|
||||
margin-left: 20px
|
||||
}
|
||||
|
||||
.live {
|
||||
|
|
|
|||
Loading…
Reference in a new issue