encrypt/generic-webradio-player
1
0
Fork 1
Code Issues Pull requests Releases Wiki Activity

ho fatto cose ma al momento non hanno molta importanza

Browse source
This commit is contained in:
encrypt 2021-11-16 17:57:18 +01:00
parent d4448b72d7
commit 9e4eb625b8
3 changed files with 25 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
index.html
View file

@ -7,10 +7,10 @@
<link rel="stylesheet" type="text/css" href="/player.css"> <link rel="stylesheet" type="text/css" href="/player.css">
</head> </head>
<body> <body>
<audio id="radio" controls></audio> <audio id="radio"></audio>
<div id="player"> <div id="player">
<div id="contents" hidden> <div id="contents" hidden>
<div id="menu" class="tags"> <div id="menu">
<input type="radio" name="tab-selector" id="tab-other-radios" checked/> <input type="radio" name="tab-selector" id="tab-other-radios" checked/>
<label for="tab-other-radios"> Altre Radio</label> <label for="tab-other-radios"> Altre Radio</label>
<input type="radio" name="tab-selector" id="tab-programmi"/> <input type="radio" name="tab-selector" id="tab-programmi"/>
@ -19,7 +19,7 @@
<label for="tab-playlist"> Playlist</label> <label for="tab-playlist"> Playlist</label>
</div> </div>
<div class="tabs"> <div class="tabs">
<div id="other-radios" class="tags"> <div id="other-radios" class="show-list">
</div> </div>
<div id="programmi" class="hidden"> <div id="programmi" class="hidden">
<div class="show-list"> <div class="show-list">
@ -28,7 +28,7 @@
<img id="next-show" class="arrow arrow-right" alt="Scorri a destra" src="/icons/ico-arrow.png" /> <img id="next-show" class="arrow arrow-right" alt="Scorri a destra" src="/icons/ico-arrow.png" />
</div> </div>
<div class="show-content"> <div class="show-content">
<img id="prev-show-card" class="arrow arrow-left" alt="Scorri a sinistra" src="/icons/ico-arrow.png"/> <img id="prev-show-card" class="arrow arrow-left hidden" alt="Scorri a sinistra" src="/icons/ico-arrow.png"/>
<div id="programmi-content"> <div id="programmi-content">
<template id="show-card-template"> <template id="show-card-template">
<div class="show-card"> <div class="show-card">
@ -42,14 +42,16 @@
</div> </div>
</template> </template>
</div> </div>
<img id="next-show-card" class="arrow arrow-right" alt="Scorri a destra" src="/icons/ico-arrow.png"/> <img id="next-show-card" class="arrow arrow-right hidden" alt="Scorri a destra" src="/icons/ico-arrow.png"/>
</div> </div>
</div> </div>
<div id="playlist" class="hidden"> <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> Qui ci va la playlist, ancora non puoi riprodurla, però puoi scaricarle l'<span onclick="downloadPlaylist()"><b>m3u 📥</b></span>
</div> </div>
</div> </div>
</div> </div>
<div id="progress-bar">
</div>
<div id="controls" class="controls"> <div id="controls" class="controls">
<div class="controlBlock controlLeft"> <div class="controlBlock controlLeft">
<div class="info-content"> <div class="info-content">

17
player.css
View file

@ -1,3 +1,14 @@
.hidden {
display: none !important;
}
#progress-bar {
background-color: #42414d;
width: 4%;
margin-left: 0px !important;
height: 4px;
}
#player { #player {
/* background-color: #0c0c0d;*/ /* background-color: #0c0c0d;*/
background-color: #1c1b22; background-color: #1c1b22;
@ -20,7 +31,7 @@
overflow: hidden; overflow: hidden;
} }
#programmi-lista > span{ #programmi-lista > span, #other-radios > span{
border-radius: 5px 15px; border-radius: 5px 15px;
/* background: #38383d; */ /* background: #38383d; */
border: solid 1px #fff; border: solid 1px #fff;
@ -168,10 +179,6 @@
overflow: hidden; overflow: hidden;
} }
.hidden {
display: none;
}
#contents > div { #contents > div {
margin-top: 5px; margin-top: 5px;

8
player.js
View file

@ -184,13 +184,15 @@ async function setupProgrammi() {
el.innerHTML = p.name; el.innerHTML = p.name;
el.addEventListener('click', (e) => { el.addEventListener('click', (e) => {
const id = p.name.replaceAll(/[\W_]+/g," ").replaceAll(' ','-'); const id = p.name.replaceAll(/[\W_]+/g," ").replaceAll(' ','-');
for(let box of document.getElementById("programmi-content").getElementsByClassName("content-box")) { for(let box of document.querySelectorAll("#programmi-content > .content-box")) {
if(box.id != id) { if(box.id != id) {
box.classList.add("hidden"); box.classList.add("hidden");
} }
} }
console.log(id) document.getElementById(id).classList.toggle("hidden");
document.getElementById(id).classList.toggle("hidden"); document.querySelectorAll("#programmi > .show-content > .arrow").forEach((el) => {
el.classList.remove("hidden")
})
}) })
showListEl.appendChild(el) showListEl.appendChild(el)
fetch(p.feed) fetch(p.feed)