New Version

2021-12-21 17:59:54 +01:00 · 2021-12-21 17:59:54 +01:00 · efc076a44d
parent e52464bacf
commit efc076a44d
5 changed files with 271 additions and 47 deletions
--- a/chain.svg
+++ b/chain.svg
@ -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>
--- a/favicon.png
+++ b/favicon.png
--- a/index.html
+++ b/index.html
@ -2,98 +2,132 @@
 <html lang=ca>
 	<head>
 		<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"/>
 		<title>Duskin' Radio</title>
+		<link rel="icon" type="image/png" href="favicon.png"/>
 	</head>

 	<body>
 		<img alt="Logo: Duskin' Radio" src="logo.png" id="logo"/>
 		<h2>Cadenes</h2>
 		<hr/>
+		<button id="refresh">Refrescar Metadades</button>
 		<div class="container">
 		<div class="cadena" id="dancin">
 			<h3>Dancin'</h3>
 			<p>Nu Disco, House, Synthpop, Dance</p>	
+			<p class="playing"></p>
 			<audio preload="metadata">
 				<source src="dancin.mp3" type="audio/mpeg"/>
 				Audio tag not supported
 			</audio>
+			<div>
 				<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="funkin">
 			<h3>Funkin'</h3>
 			<p>Funk, Disco, R&amp;B</p>
+			<p class="playing"></p>
 			<audio preload="metadata">
 				<source src="funkin.mp3" type="audio/mpeg"/>
 				Audio tag not supported
 			</audio>
+			<div>
 			<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="gazin">
 			<h3>Gazin'</h3>
 			<p>Rock Alternatiu, Shoegaze</p>
+			<p class="playing"></p>
 			<audio preload="metadata">
 				<source src="gazin.mp3" type="audio/mpeg"/>
 				Audio tag not supported
 			</audio>
+			<div>
 			<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="doomin">
 			<h3>Doomin'</h3>
 			<p>Post Punk, Cold Wave</p>
+			<p class="playing"></p>
 			<audio preload="metadata">
 				<source src="doomin.mp3" type="audio/mpeg"/>
 				Audio tag not supported
 			</audio>
+			<div>
 			<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>

-		<script>
-			document.addEventListener("DOMContentLoaded", () => {
-				let playButtons = [...document.querySelectorAll('.play')]
-				playButtons.map((x) => x.addEventListener('click', () => playButtonAction(x)))
-				let cadenaDivs = [...document.querySelectorAll('.cadena')]
-				cadenaDivs.map((x) => x.addEventListener('click', () => copyLink(x)))
-			})
-		    							
-			function playButtonAction(x) {
-				let audio = x.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.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>
+		<footer id="bottom">
+			<p>Copia els enllaços per a escoltar en un client!</p>
+			<p>Clients recomanats:</p>
+			<div class="flist">
+			<ul type="square">
+				<li>MPV</li>
+				<li>VLC</li>
+				<li>Goodvibes (Linux)</li>
+				<li>URL Radio (Android).</li>
+			</ul>
+			</div>
+			<p>Enllaços:</p>
+			<div class="flist">
+			<ul>
+			<li>radio.dusk.fai.su:5080/dancin.mp3</li>
+			<li>radio.dusk.fai.su:5080/funkin.mp3</li>
+			<li>radio.dusk.fai.su:5080/gazin.mp3</li>
+			<li>radio.dusk.fai.su:5080/doomin.mp3</li>
+			<li>radio.dusk.fai.su:5080/dreamin.mp3</li>
+			</ul>
+			</div>
+		</footer>
+		<img id="funnygif" src="alunya_dance.gif"/>
 	</body>
 </html>

--- a/script.js
+++ b/script.js
@ -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)
+		}
+
+
+				
--- a/style.css
+++ b/style.css
@ -51,9 +51,6 @@ hr {
 .cadena {
 	border: 5px solid #d6d6d6;
 	text-shadow: rgba(0, 0, 0, 0.75) 0px 0px 10px;
-	min-width: 500px;
-	
-	
 }
 #dancin {
 	background-color: rgba(240, 180, 255, 0.25);
@ -76,16 +73,26 @@ hr {
 	background-color: rgba(10, 25, 25, 0.75);
 }
 #gazin {
+	color: #e2c5a1;
 	background-color: rgba(174, 133, 81, 0.5);
 }
 #gazin:hover {
 	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 {
 	width: 80px;
 }
 .play {
 	max-width: 10%;
+	margin-right: 10px;
 	margin-bottom: 30px;
 }
 .play:hover {
@ -97,11 +104,19 @@ hr {
@media only screen and (max-width: 1250px) {
 	.container {
 		grid-template-columns: auto;
+		max-width: 80%;
+}
+    .cadena {
+		font-size: 0.75em;
+	}
+    #logo {
+    	max-height: 250px; 
 }


 }
 .link {
+	display: none;
 	background-color:	transparent;
 	border: 0px solid transparent;
 	color: transparent;
@ -109,3 +124,36 @@ hr {
 	width: 0px;
 	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;
+}