Browse Source

aggiunto supporto playlisti cose al volume, torna al live e altre cose

encrypt 2 years ago
parent
commit
2939f0426b
3 changed files with 254 additions and 56 deletions
  1. 34 0
      icons/volume_off.svg
  2. 160 44
      index.html
  3. 60 12
      player.css

+ 34 - 0
icons/volume_off.svg

@@ -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>

+ 160 - 44
index.html

@@ -7,21 +7,46 @@
     <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="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 class="tabs">
+	  <div id="other-radios" class="tags">	 
 	  </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 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>
+	      <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">
+		<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>
@@ -46,32 +71,39 @@
 	</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" />
+	    <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>
 	</div>
       </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>

+ 60 - 12
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;
@@ -107,12 +142,25 @@
     width: 200px;
     height: 200px;
     word-wrap:  break-word;
-    font-size: 9pt;
-    margin-left: 20px;
+    font-size: 9pt;    
     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 {
-    margin-top: 20px;
-    margin-left: 20px
+    color: #fff;
+    margin-top: 20px;    
 }
 
 .live {