dusk
/
dusk-radio
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

New Version

This commit is contained in:
Dusk 2021-12-21 17:59:54 +01:00
parent e52464bacf
commit efc076a44d
5 changed files with 271 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
chain.svg Normal file
View File

@ -0,0 +1,72 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="30.173193mm"
height="28.396435mm"
viewBox="0 0 30.173193 28.396435"
version="1.1"
id="svg5"
inkscape:version="1.1.1 (3bf5ae0d25, 2021-09-20)"
sodipodi:docname="chain.svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview7"
pagecolor="#505050"
bordercolor="#eeeeee"
borderopacity="1"
inkscape:pageshadow="0"
inkscape:pageopacity="0"
inkscape:pagecheckerboard="0"
inkscape:document-units="mm"
showgrid="false"
inkscape:zoom="2.8284271"
inkscape:cx="-2.4748737"
inkscape:cy="2.298097"
inkscape:window-width="1920"
inkscape:window-height="1011"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="use2067" />
<defs
id="defs2">
<marker
style="overflow:visible"
id="Arrow1Lstart"
refX="0"
refY="0"
orient="auto"
inkscape:stockid="Arrow1Lstart"
inkscape:isstock="true">
<path
transform="matrix(0.8,0,0,0.8,10,0)"
style="fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt"
d="M 0,0 5,-5 -12.5,0 5,5 Z"
id="path3594" />
</marker>
</defs>
<g
inkscape:label="Capa 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-63.286163,-139.61049)">
<g
inkscape:label="Clip"
id="use2067">
<path
id="rect4222"
style="fill:none;stroke:#fffff5;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;paint-order:stroke fill markers;stroke-opacity:1"
d="m 77.59583,160.65655 -3.801325,4.944 c -1.006081,1.30851 -2.869457,1.55197 -4.177962,0.54589 l -3.924001,-3.01707 c -1.308505,-1.00608 -1.551974,-2.86945 -0.545892,-4.17796 l 7.291796,-9.48369 c 1.006081,-1.30851 2.86945,-1.55198 4.177955,-0.5459 l 3.924,3.01708"
sodipodi:nodetypes="cssssssc" />
<path
id="rect4222-3"
style="fill:none;stroke:#fffff5;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;paint-order:stroke fill markers;stroke-opacity:1"
d="m 79.559808,146.42748 3.391215,-4.41061 c 1.006081,-1.3085 2.869449,-1.55197 4.177954,-0.54589 l 3.924001,3.01707 c 1.308505,1.00608 1.551974,2.86945 0.545892,4.17796 l -7.291796,9.48369 c -1.006082,1.30851 -2.86945,1.55198 -4.177955,0.5459 l -3.924001,-3.01708"
sodipodi:nodetypes="ccsssssc" />
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.8 KiB

BIN
favicon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 944 B

122
index.html
View File

@ -2,98 +2,132 @@
<html lang=ca> <html lang=ca>
<head> <head>
<meta charset="utf-8"/> <meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/> <script src="script.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=0.75"/>
<link rel="stylesheet" href="style.css"/> <link rel="stylesheet" href="style.css"/>
<title>Duskin' Radio</title> <title>Duskin' Radio</title>
<link rel="icon" type="image/png" href="favicon.png"/>
</head> </head>
<body> <body>
<img alt="Logo: Duskin' Radio" src="logo.png" id="logo"/> <img alt="Logo: Duskin' Radio" src="logo.png" id="logo"/>
<h2>Cadenes</h2> <h2>Cadenes</h2>
<hr/> <hr/>
<button id="refresh">Refrescar Metadades</button>
<div class="container"> <div class="container">
<div class="cadena" id="dancin"> <div class="cadena" id="dancin">
<h3>Dancin'</h3> <h3>Dancin'</h3>
<p>Nu Disco, House, Synthpop, Dance</p> <p>Nu Disco, House, Synthpop, Dance</p>
<p class="playing"></p>
<audio preload="metadata"> <audio preload="metadata">
<source src="dancin.mp3" type="audio/mpeg"/> <source src="dancin.mp3" type="audio/mpeg"/>
Audio tag not supported Audio tag not supported
</audio> </audio>
<img class="play" alt="Play Button" src="./play.svg"/> <div>
<input class="link"></input> <img class="play" alt="Play Button" src="./play.svg"/>
<img class="linkButton" alt="Copy Link" src="./chain.svg"/>
</div>
<input class="link"/>
</div> </div>
<div class="cadena" id="funkin"> <div class="cadena" id="funkin">
<h3>Funkin'</h3> <h3>Funkin'</h3>
<p>Funk, Disco, R&amp;B</p> <p>Funk, Disco, R&amp;B</p>
<p class="playing"></p>
<audio preload="metadata"> <audio preload="metadata">
<source src="funkin.mp3" type="audio/mpeg"/> <source src="funkin.mp3" type="audio/mpeg"/>
Audio tag not supported Audio tag not supported
</audio> </audio>
<div>
<img class="play" alt="Play Button" src="./play.svg"/> <img class="play" alt="Play Button" src="./play.svg"/>
<input class="link"></input> <img class="linkButton" alt="Copy Link" src="./chain.svg"/>
</div>
<input class="link"/>
</div> </div>
<div class="cadena" id="gazin"> <div class="cadena" id="gazin">
<h3>Gazin'</h3> <h3>Gazin'</h3>
<p>Rock Alternatiu, Shoegaze</p> <p>Rock Alternatiu, Shoegaze</p>
<p class="playing"></p>
<audio preload="metadata"> <audio preload="metadata">
<source src="gazin.mp3" type="audio/mpeg"/> <source src="gazin.mp3" type="audio/mpeg"/>
Audio tag not supported Audio tag not supported
</audio> </audio>
<div>
<img class="play" alt="Play Button" src="./play.svg"/> <img class="play" alt="Play Button" src="./play.svg"/>
<input class="link"></input> <img class="linkButton" alt="Copy Link" src="./chain.svg"/>
</div>
<input class="link"/>
</div> </div>
<div class="cadena" id="doomin"> <div class="cadena" id="doomin">
<h3>Doomin'</h3> <h3>Doomin'</h3>
<p>Post Punk, Cold Wave</p> <p>Post Punk, Cold Wave</p>
<p class="playing"></p>
<audio preload="metadata"> <audio preload="metadata">
<source src="doomin.mp3" type="audio/mpeg"/> <source src="doomin.mp3" type="audio/mpeg"/>
Audio tag not supported Audio tag not supported
</audio> </audio>
<div>
<img class="play" alt="Play Button" src="./play.svg"/> <img class="play" alt="Play Button" src="./play.svg"/>
<input class="link"></input> <img class="linkButton" alt="Copy Link" src="./chain.svg"/>
</div>
<input class="link"/>
</div>
<div class="cadena" id="dreamin">
<h3>Dreamin'</h3>
<p>Indie, Dream Pop, Emo</p>
<p class="playing"></p>
<audio preload="metadata">
<source src="dreamin.mp3" type="audio/mpeg"/>
Audio tag not supported
</audio>
<div>
<img class="play" alt="Play Button" src="./play.svg"/>
<img class="linkButton" alt="Copy Link" src="./chain.svg"/>
</div>
<input class="link"/>
</div>
<div class="cadena" id="random">
<h3>Random Shit</h3>
<p>El que siga</p>
<p class="playing"></p>
<audio preload="metadata">
<source src="random.mp3" type="audio/mpeg"/>
Audio tag not supported
</audio>
<div>
<img class="play" alt="Play Button" src="./play.svg"/>
<img class="linkButton" alt="Copy Link" src="./chain.svg"/>
</div>
<input class="link"/>
</div> </div>
</div> </div>
<script> <footer id="bottom">
document.addEventListener("DOMContentLoaded", () => { <p>Copia els enllaços per a escoltar en un client!</p>
let playButtons = [...document.querySelectorAll('.play')] <p>Clients recomanats:</p>
playButtons.map((x) => x.addEventListener('click', () => playButtonAction(x))) <div class="flist">
let cadenaDivs = [...document.querySelectorAll('.cadena')] <ul type="square">
cadenaDivs.map((x) => x.addEventListener('click', () => copyLink(x))) <li>MPV</li>
}) <li>VLC</li>
<li>Goodvibes (Linux)</li>
function playButtonAction(x) { <li>URL Radio (Android).</li>
let audio = x.parentNode.querySelector('audio') </ul>
if (audio.paused) { </div>
audio.load() <p>Enllaços:</p>
audio.play() <div class="flist">
x.src="./stop.svg" <ul>
} <li>radio.dusk.fai.su:5080/dancin.mp3</li>
else { <li>radio.dusk.fai.su:5080/funkin.mp3</li>
let aux = audio.querySelector('source').src <li>radio.dusk.fai.su:5080/gazin.mp3</li>
audio.querySelector('source').src = "" <li>radio.dusk.fai.su:5080/doomin.mp3</li>
audio.pause() <li>radio.dusk.fai.su:5080/dreamin.mp3</li>
setTimeout(() => audio.load()) </ul>
x.src="./play.svg" </div>
audio.querySelector('source').src = aux </footer>
} <img id="funnygif" src="alunya_dance.gif"/>
}
function copyLink(x) {
let link = x.querySelector('source')
let pText = x.querySelector('.link')
pText.value = link.src
console.log(pText.value)
pText.select()
document.execCommand('copy')
}
</script>
<footer id="bottom">Copia els enllaços per a escoltar en un client! (Com per exemple, VLC o MPV)</footer>
</body> </body>
</html> </html>

70
script.js Normal file
View File

@ -0,0 +1,70 @@
document.addEventListener('DOMContentLoaded', () => {
setTimeout(initialize, 500)
})
function initialize() {
let playButtons = [...document.querySelectorAll('.play')]
playButtons.map((x) => x.addEventListener('click', () => playButtonAction(x)))
let cadenaLinks = [...document.querySelectorAll('.linkButton')]
cadenaLinks.map((x) => x.addEventListener('click', () => copyLink(x)))
var cadenaPlaying = [...document.querySelectorAll('.playing')]
cadenaPlaying.map((x) => actualitzar(x))
let refreshButton = document.querySelector('#refresh')
refreshButton.addEventListener('click', () => { cadenaPlaying.map((x) => actualitzar(x))})
}
function playButtonAction(x) {
let audio = x.parentNode.parentNode.querySelector('audio')
if (audio.paused) {
audio.load()
audio.play()
x.src="./stop.svg"
}
else {
let aux = audio.querySelector('source').src
audio.querySelector('source').src = ""
audio.pause()
setTimeout(() => audio.load())
x.src="./play.svg"
audio.querySelector('source').src = aux
}
}
function copyLink(x) {
let link = x.parentNode.parentNode.querySelector('source')
let pText = x.parentNode.parentNode.querySelector('.link')
console.log(link)
console.log(pText)
pText.style.display = "unset"
pText.value = link.src
console.log(pText.value)
pText.select()
document.execCommand('copy')
pText.style.display = "none"
}
function actualitzar(x) {
actualitzarIntern(x)
}
function actualitzarIntern(x) {
fetch("status-json.xsl").then((response) => response.json())
.then((json) => {
var link = x.parentNode.querySelector('source').src
var filename = basename(link)
var title = ""
var JSONArray = Array.from(json.icestats.source)
for (let i = 0; i < JSONArray.length; i++) {
if (basename(JSONArray[i].listenurl) === filename) {
title = "♪ " + JSONArray[i].title
}
}
x.parentNode.querySelector('.playing').innerHTML = title
})
}
function basename (str) {
return str.substring(str.lastIndexOf('/') + 1)
}

54
style.css
View File

@ -51,9 +51,6 @@ hr {
.cadena { .cadena {
border: 5px solid #d6d6d6; border: 5px solid #d6d6d6;
text-shadow: rgba(0, 0, 0, 0.75) 0px 0px 10px; text-shadow: rgba(0, 0, 0, 0.75) 0px 0px 10px;
min-width: 500px;
} }
#dancin { #dancin {
background-color: rgba(240, 180, 255, 0.25); background-color: rgba(240, 180, 255, 0.25);
@ -76,16 +73,26 @@ hr {
background-color: rgba(10, 25, 25, 0.75); background-color: rgba(10, 25, 25, 0.75);
} }
#gazin { #gazin {
color: #e2c5a1;
background-color: rgba(174, 133, 81, 0.5); background-color: rgba(174, 133, 81, 0.5);
} }
#gazin:hover { #gazin:hover {
background-color: rgba(174, 133, 81, 0.75); background-color: rgba(174, 133, 81, 0.75);
} }
#dreamin {
color: #cce0c3;
background-color: rgba(106, 167, 186, 0.5);
}
#dreamin:hover {
background-color: rgba(106, 167, 186, 0.75);
}
#controls { #controls {
width: 80px; width: 80px;
} }
.play { .play {
max-width: 10%; max-width: 10%;
margin-right: 10px;
margin-bottom: 30px; margin-bottom: 30px;
} }
.play:hover { .play:hover {
@ -97,11 +104,19 @@ hr {
@media only screen and (max-width: 1250px) { @media only screen and (max-width: 1250px) {
.container { .container {
grid-template-columns: auto; grid-template-columns: auto;
max-width: 80%;
}
.cadena {
font-size: 0.75em;
}
#logo {
max-height: 250px;
} }
} }
.link { .link {
display: none;
background-color: transparent; background-color: transparent;
border: 0px solid transparent; border: 0px solid transparent;
color: transparent; color: transparent;
@ -109,3 +124,36 @@ hr {
width: 0px; width: 0px;
outline: none; outline: none;
} }
.linkButton {
max-width: 12.5%;
margin-bottom: 30px;
margin-left: 20px;
}
.linkButton:hover {
opacity: 0.75;
}
.linkButton:active {
opacity: 0.5;
}
.flist {
text-align: left;
width: 500px;
display: inline-block;
}
#random {
background-color: #e66465;
color: #ffbdea;
}
#refresh {
border: #d6d6d6 solid;
background: #ffbffa;
font-family: "Gemunu-Libre", sans-serif;
font-size: inherit;
margin: inherit;
color: #090c17;
border-radius: 5px;
}
#refresh:active {
opacity: 0.75;
}