From a4d4b73b2368b49ee6248dcf4b051603a7b262ea Mon Sep 17 00:00:00 2001
From: jay
Date: Fri, 6 Mar 2020 23:15:58 -0300
Subject: Arreglando errores en script y diseño
---
bairadio.css | 147 ++++++++++++++++++++++++++++++++++++++++++++++++++---------
bairadio.js | 137 ++++++++++++++++++++++++++-----------------------------
index.html | 80 ++++++++++++++++++++++++++++++++
radio.html | 76 ------------------------------
4 files changed, 270 insertions(+), 170 deletions(-)
create mode 100644 index.html
delete mode 100644 radio.html
diff --git a/bairadio.css b/bairadio.css
index 369c386..8b8c26d 100644
--- a/bairadio.css
+++ b/bairadio.css
@@ -3,7 +3,7 @@
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
word-wrap: break-word;
- cursor: url(data:image/x-win-bitmap;base64,AAACAAEAICAAAAAAAADoAgAAFgAAACgAAAAgAAAAQAAAAAEABAAAAAAAgAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAAACAAAAAgIAAgAAAAIAAgACAgAAAgICAAMDAwAAAAP8AAP8AAAD//wD/AAAA/wD/AP//AAD///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAB4gAAAAAAAAAAAAAAAAAAAf4AAAAAAAAAAAAAAAAAAB/gAAAAAAAAAAAAAAAAAAAf4AAAAAAAAAAAAAAAAcAB/gAAAAAAAAAAAAAAAAHgAf4AAAAAAAAAAAAAAAAB/gPgAAAAAAAAAAAAAAAAAf/gAAAAAAAAAAAAAAAAAAH//iIiAAAAAAAAAAAAAAAB//4iIAAAAAAAAAAAAAAAAf/iIgAAAAAAAAAAAAAAAAH/4iAAAAAAAAAAAAAAAAAB/iIAAAAAAAAAAAAAAAAAAf4gAAAAAAAAAAAAAAAAAAHiAAAAAAAAAAAAAAAAAAAB4AAAAAAAAAAAAAAAAAAAAcAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD//////////////////////////////////////////////////////////////////////j////w////8P///+H///3h///8w////EP///wH///8AH///AD///wB///8A////Af///wP///8H////D////x////8/////f////w==),auto;
+ cursor: url("data:image/x-win-bitmap;base64,AAACAAEAICAAAAAAAADoAgAAFgAAACgAAAAgAAAAQAAAAAEABAAAAAAAgAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAAACAAAAAgIAAgAAAAIAAgACAgAAAgICAAMDAwAAAAP8AAP8AAAD//wD/AAAA/wD/AP//AAD///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAB4gAAAAAAAAAAAAAAAAAAAf4AAAAAAAAAAAAAAAAAAB/gAAAAAAAAAAAAAAAAAAAf4AAAAAAAAAAAAAAAAcAB/gAAAAAAAAAAAAAAAAHgAf4AAAAAAAAAAAAAAAAB/gPgAAAAAAAAAAAAAAAAAf/gAAAAAAAAAAAAAAAAAAH//iIiAAAAAAAAAAAAAAAB//4iIAAAAAAAAAAAAAAAAf/iIgAAAAAAAAAAAAAAAAH/4iAAAAAAAAAAAAAAAAAB/iIAAAAAAAAAAAAAAAAAAf4gAAAAAAAAAAAAAAAAAAHiAAAAAAAAAAAAAAAAAAAB4AAAAAAAAAAAAAAAAAAAAcAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD//////////////////////////////////////////////////////////////////////j////w////8P///+H///3h///8w////EP///wH///8AH///AD///wB///8A////Af///wP///8H////D////x////8/////f////w=="),auto;
}
html, body {
@@ -17,17 +17,21 @@ html, body {
}
a, a:visited, a:hover {
- color: #3833a1;
+ color: #fff;
}
a:active {
- color: #f00;
+ color: #3833a1;
}
h1 {
margin: 16px 0;
}
+.sep {
+ display: block;
+}
+
.outer {
border: 1px solid #0d0d14;
background: #13141d;
@@ -87,6 +91,10 @@ h1 {
align-items: center;
}
+.collapse .boxtitle {
+ float: left;
+}
+
.collapse .content {
border: 0;
box-shadow: none;
@@ -98,19 +106,23 @@ h1 {
padding: 0;
}
-#box-history.collapse .content {
- width: 400px;
-}
-
.collapse #history {
height: 1.4em;
overflow-y: hidden;
}
+.collapse .pastsong {
+ display: none;
+}
+
.collapse .pastsong:hover {
background: none;
}
+.collapse .pastsong:last-child {
+ display: block;
+}
+
#main {
display: flex;
display: -moz-flex;
@@ -140,19 +152,13 @@ h1 {
width: 482px;
white-space: nowrap;
overflow: hidden;
- padding: 4px 2px;
+ padding: 4px 0 4px 4px;
}
#nowplaying-txt {
display: inline-block;
}
-#nowplaying-txt:hover {
- animation-play-state: paused;
- -moz-animation-play-state: paused;
- -webkit-animation-play-state: paused;
-}
-
#artist {
font-weight: bold;
}
@@ -166,12 +172,16 @@ h1 {
padding: 1px 2px;
}
+#server_name-cont .box {
+ margin: 0;
+}
+
#server_name {
- max-width: 450px;
+ max-width: 400px;
}
#volume {
- cursor: url(data:image/x-win-bitmap;base64,AAACAAEAICAAAAAAAADoAgAAFgAAACgAAAAgAAAAQAAAAAEABAAAAAAAgAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAAACAAAAAgIAAgAAAAIAAgACAgAAAwMDAAICAgAAAAP8AAP8AAAD//wD/AAAA/wD/AP//AAD///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACHcAAAAAAAAAAAAAAAAAAAj3AAAAAAAAAAAAAAAAAACPcAAHAAAAAHAAAAAAAAAAj3AAdwAHcAB3AAAAAAgACPcAAP8AD/AA/wAAAAAIcAj3AAAPAAAAAPAAAAAACPcPcAAAAAAAAAAAAAAAAAj/cAAAAAAAAAAAAAAAAAAI//d3dwAAAAAAAAAAAAAACP/3d3AAAAAAAAAAAAAAAAj/d3cAAAAAAAAAAAAAAAAI/3dwAAAAAAAAAAAAAAAACPd3AAAAAAAAAAAAAAAAAAj3cAAAAAAAAAAAAAAAAAAIdwAAAAAAAAAAAAAAAAAACHAAAAAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD//////////////////////////////////////////////////////////////////////j////w////8M/P/+GMx/3hCEP8wwhD/EOMx/wHz8/8AH///AD///wB///8A////Af///wP///8H////D////x////8/////f////w==),auto;
+ cursor: url("data:image/x-win-bitmap;base64,AAACAAEAICAAAAAAAADoAgAAFgAAACgAAAAgAAAAQAAAAAEABAAAAAAAgAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAAACAAAAAgIAAgAAAAIAAgACAgAAAwMDAAICAgAAAAP8AAP8AAAD//wD/AAAA/wD/AP//AAD///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACHcAAAAAAAAAAAAAAAAAAAj3AAAAAAAAAAAAAAAAAACPcAAHAAAAAHAAAAAAAAAAj3AAdwAHcAB3AAAAAAgACPcAAP8AD/AA/wAAAAAIcAj3AAAPAAAAAPAAAAAACPcPcAAAAAAAAAAAAAAAAAj/cAAAAAAAAAAAAAAAAAAI//d3dwAAAAAAAAAAAAAACP/3d3AAAAAAAAAAAAAAAAj/d3cAAAAAAAAAAAAAAAAI/3dwAAAAAAAAAAAAAAAACPd3AAAAAAAAAAAAAAAAAAj3cAAAAAAAAAAAAAAAAAAIdwAAAAAAAAAAAAAAAAAACHAAAAAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD//////////////////////////////////////////////////////////////////////j////w////8M/P/+GMx/3hCEP8wwhD/EOMx/wHz8/8AH///AD///wB///8A////Af///wP///8H////D////x////8/////f////w=="),auto;
}
#history {
@@ -246,6 +256,9 @@ h1 {
border-bottom: 1px solid #adb5c6;
color: #2f374d;
flex-shrink: 0;
+ -ms-flex-shrink: 0;
+ -moz-flex-shrink: 0;
+ -webkit-flex-shrink: 0;
font-size: 10px;
margin: 1px;
padding: 0 4px;
@@ -277,18 +290,50 @@ h1 {
width: 91px;
}
-#vis {
+#vis, #control {
display: block;
height: 85px;
width: 85px;
}
-#vis.show-play-btn {
- background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAZCAYAAADqrKTxAAABhGlDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw0AcxV9bS0VaBO0g4pChOrUgKuKoVShChVArtOpgcukXNGlIUlwcBdeCgx+LVQcXZ10dXAVB8APEydFJ0UVK/F9SaBHjwXE/3t173L0D/M0qU82ecUDVLCOTSgq5/KoQekUAQQwggrjETH1OFNPwHF/38PH1LsGzvM/9OSJKwWSATyCeZbphEW8QT29aOud94igrSwrxOXHcoAsSP3JddvmNc8lhP8+MGtnMPHGUWCh1sdzFrGyoxFPEMUXVKN+fc1nhvMVZrdZZ+578heGCtrLMdZojSGERSxAhQEYdFVRhIUGrRoqJDO0nPfzDjl8kl0yuChg5FlCDCsnxg//B727N4uSEmxROAsEX2/4YBUK7QKth29/Htt06AQLPwJXW8deawMwn6Y2OFjsC+reBi+uOJu8BlzvA0JMuGZIjBWj6i0Xg/Yy+KQ8M3gJ9a25v7X2cPgBZ6ip9AxwcAmMlyl73eHdvd2//nmn39wM5PnKQmgaw4AAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAAuIwAALiMBeKU/dgAAAHFJREFUOMud1EsOwCAIBNBx7n9nu7GNH5CZslLMi6hEoKPDDAKAC/mNDMhlJkIeGQEyzBaQ6coF8lpHAlmeOoCU7niDlF90grT6Z8D2v/ecaGh0gbfTADqagIY2UKMA3FECcnQBMSrAiQSwIhHYv9AbD4kSHCjuBbjMAAAAAElFTkSuQmCC) no-repeat center;
+#control {
+ position: absolute;
+ z-index: 9;
+}
+
+.stopped {
+ background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAABhGlDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw0AcxV9bpSIVBzOIOGSoulgQFemoVShChVArtOpgcukXNGlIUlwcBdeCgx+LVQcXZ10dXAVB8APEydFJ0UVK/F9SaBHjwXE/3t173L0Dgo0K06yuCUDTbTOdTIjZ3KoYfkUIYQgYQ1xmljEnSSn4jq97BPh6F+NZ/uf+HH1q3mJAQCSeZYZpE28Qz2zaBud9YoGVZJX4nHjcpAsSP3Jd8fiNc9HlIM8UzEx6nlggFosdrHQwK5ka8TRxVNV0yg9mPVY5b3HWKjXWuid/YSSvryxzneYwkljEEiSIUFBDGRXYiNGqk2IhTfsJH/+Q65fIpZCrDEaOBVShQXb94H/wu1urMDXpJUUSQPeL43yMAOFdoFl3nO9jx2meAKFn4Epv+6sNIP5Jer2tRY+A/m3g4rqtKXvA5Q4w+GTIpuxKIZrBQgF4P6NvygEDt0Dvmtdbax+nD0CGukrdAAeHwGiRstd93t3T2du/Z1r9/QCiCHK6f7dKfwAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAAuIwAALiMBeKU/dgAAACZJREFUSMftzUEBACAMAKHT/p23FPqCApym6bHbBxKJRCKRSCSSFqHqAjAKrwD1AAAAAElFTkSuQmCC") no-repeat center;
+}
+
+.playing {
+ background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAZCAYAAADqrKTxAAABhGlDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw0AcxV9bS0VaBO0g4pChOrUgKuKoVShChVArtOpgcukXNGlIUlwcBdeCgx+LVQcXZ10dXAVB8APEydFJ0UVK/F9SaBHjwXE/3t173L0D/M0qU82ecUDVLCOTSgq5/KoQekUAQQwggrjETH1OFNPwHF/38PH1LsGzvM/9OSJKwWSATyCeZbphEW8QT29aOud94igrSwrxOXHcoAsSP3JddvmNc8lhP8+MGtnMPHGUWCh1sdzFrGyoxFPEMUXVKN+fc1nhvMVZrdZZ+578heGCtrLMdZojSGERSxAhQEYdFVRhIUGrRoqJDO0nPfzDjl8kl0yuChg5FlCDCsnxg//B727N4uSEmxROAsEX2/4YBUK7QKth29/Htt06AQLPwJXW8deawMwn6Y2OFjsC+reBi+uOJu8BlzvA0JMuGZIjBWj6i0Xg/Yy+KQ8M3gJ9a25v7X2cPgBZ6ip9AxwcAmMlyl73eHdvd2//nmn39wM5PnKQmgaw4AAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAAuIwAALiMBeKU/dgAAAHFJREFUOMud1EsOwCAIBNBx7n9nu7GNH5CZslLMi6hEoKPDDAKAC/mNDMhlJkIeGQEyzBaQ6coF8lpHAlmeOoCU7niDlF90grT6Z8D2v/ecaGh0gbfTADqagIY2UKMA3FECcnQBMSrAiQSwIhHYv9AbD4kSHCjuBbjMAAAAAElFTkSuQmCC") no-repeat center;
+ animation: fade 1s ease-in 1;
+ -webkit-animation: fade 1s ease-in 1;
+ -moz-animation: fade 1s ease-in 1;
+ animation-fill-mode: forwards;
+ -webkit-animation-fill-mode: forwards;
+ -moz-animation-fill-mode: forwards;
+}
+
+@-webkit-keyframes fade {
+ 0% { opacity: 1; }
+ 100% { opacity: 0; }
+}
+@-moz-keyframes fade {
+ 0% { opacity: 1; }
+ 100% { opacity: 0; }
+}
+@keyframes fade {
+ 0% { opacity: 1; }
+ 100% { opacity: 0; }
+}
+
+.paused {
+ background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAABhGlDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw0AcxV9bpSIVBzOIOGSoulgQFemoVShChVArtOpgcukXNGlIUlwcBdeCgx+LVQcXZ10dXAVB8APEydFJ0UVK/F9SaBHjwXE/3t173L0Dgo0K06yuCUDTbTOdTIjZ3KoYfkUIYQgYQ1xmljEnSSn4jq97BPh6F+NZ/uf+HH1q3mJAQCSeZYZpE28Qz2zaBud9YoGVZJX4nHjcpAsSP3Jd8fiNc9HlIM8UzEx6nlggFosdrHQwK5ka8TRxVNV0yg9mPVY5b3HWKjXWuid/YSSvryxzneYwkljEEiSIUFBDGRXYiNGqk2IhTfsJH/+Q65fIpZCrDEaOBVShQXb94H/wu1urMDXpJUUSQPeL43yMAOFdoFl3nO9jx2meAKFn4Epv+6sNIP5Jer2tRY+A/m3g4rqtKXvA5Q4w+GTIpuxKIZrBQgF4P6NvygEDt0Dvmtdbax+nD0CGukrdAAeHwGiRstd93t3T2du/Z1r9/QCiCHK6f7dKfwAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAACtJREFUSMftzTEBAAAIhEC0f+e3gW5OEIArQtgr7tZH85CIiIiIiIiIiAgDN6QDMKZ8V40AAAAASUVORK5CYII=") no-repeat center;
}
#resize {
- background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAABhGlDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw0AcxV9bS0VaBO0g4pChOrUgKuKoVShChVArtOpgcukXNGlIUlwcBdeCgx+LVQcXZ10dXAVB8APEydFJ0UVK/F9SaBHjwXE/3t173L0D/M0qU82ecUDVLCOTSgq5/KoQekUAQQwggrjETH1OFNPwHF/38PH1LsGzvM/9OSJKwWSATyCeZbphEW8QT29aOud94igrSwrxOXHcoAsSP3JddvmNc8lhP8+MGtnMPHGUWCh1sdzFrGyoxFPEMUXVKN+fc1nhvMVZrdZZ+578heGCtrLMdZojSGERSxAhQEYdFVRhIUGrRoqJDO0nPfzDjl8kl0yuChg5FlCDCsnxg//B727N4uSEmxROAsEX2/4YBUK7QKth29/Htt06AQLPwJXW8deawMwn6Y2OFjsC+reBi+uOJu8BlzvA0JMuGZIjBWj6i0Xg/Yy+KQ8M3gJ9a25v7X2cPgBZ6ip9AxwcAmMlyl73eHdvd2//nmn39wM5PnKQmgaw4AAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAAuIwAALiMBeKU/dgAAAGFJREFUCNdlzMENAjEMRNGflLMXQCJ7xem/CM9UYg6bIAS+vj9uxzGhit8b56M6AK39gZX0VgtWsCElOsAOviFi0j+LcS9bSCZiYiW9KJ7nrWyjFK8IbF1vx9iQC64oYvIGzlo/pBk1ZaEAAAAASUVORK5CYII=) no-repeat center;
+ background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAABhGlDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw0AcxV9bS0VaBO0g4pChOrUgKuKoVShChVArtOpgcukXNGlIUlwcBdeCgx+LVQcXZ10dXAVB8APEydFJ0UVK/F9SaBHjwXE/3t173L0D/M0qU82ecUDVLCOTSgq5/KoQekUAQQwggrjETH1OFNPwHF/38PH1LsGzvM/9OSJKwWSATyCeZbphEW8QT29aOud94igrSwrxOXHcoAsSP3JddvmNc8lhP8+MGtnMPHGUWCh1sdzFrGyoxFPEMUXVKN+fc1nhvMVZrdZZ+578heGCtrLMdZojSGERSxAhQEYdFVRhIUGrRoqJDO0nPfzDjl8kl0yuChg5FlCDCsnxg//B727N4uSEmxROAsEX2/4YBUK7QKth29/Htt06AQLPwJXW8deawMwn6Y2OFjsC+reBi+uOJu8BlzvA0JMuGZIjBWj6i0Xg/Yy+KQ8M3gJ9a25v7X2cPgBZ6ip9AxwcAmMlyl73eHdvd2//nmn39wM5PnKQmgaw4AAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAAuIwAALiMBeKU/dgAAAGFJREFUCNdlzMENAjEMRNGflLMXQCJ7xem/CM9UYg6bIAS+vj9uxzGhit8b56M6AK39gZX0VgtWsCElOsAOviFi0j+LcS9bSCZiYiW9KJ7nrWyjFK8IbF1vx9iQC64oYvIGzlo/pBk1ZaEAAAAASUVORK5CYII=") no-repeat center;
float: right;
position: relative;
right: -10px;
@@ -297,7 +342,7 @@ h1 {
}
#resize:hover {
- cursor: url(data:image/x-win-bitmap;base64,AAACAAEAICAAAAAAAADoAgAAFgAAACgAAAAgAAAAQAAAAAEABAAAAAAAgAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAAACAAAAAgIAAgAAAAIAAgACAgAAAwMDAAICAgAAAAP8AAP8AAAD//wD/AAAA/wD/AP//AAD///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAPcAAAAAAAAAAAAAAAAAAA/3cAAAAAAAAAAAAACHcAAAAAAAAAAAAAAAAAAAj3AAAAAAAAAAAAAAAAAACPcAAAAAAAAAAAAAAAAAAAj3AAAA9wAAAAAAAAAAgACPcAAAAPcAAAAAAAAAAIcAj3AAAAAAAAAAAAAAAACPcPcAAAAAAAAAAAAAAAAAj/cAAAAAAAAAAAAAAAAAAI//d3dwAA/3cAAAAAAAAACP/3d3AAAA9wAAAAAAAAAAj/d3cAAAAAAAAAAAAAAAAI/3dwAAAAAAAAAAAAAAAACPd3AAAAAAAAAAAAAAAAAAj3cAAAAAAAAAAAAAAAAAAIdwAAAAAAAAAAAAAAAAAACHAAAAAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD////////////////////////////////////////////////////////////8////+H///jA///wwP//8P///+Hz//3h4f/8w+H//EPz//wH///8AED//ADA//wB4f/8A/P//Af///wP///8H////D////x////8/////f////w==),auto;
+ cursor: url("data:image/x-win-bitmap;base64,AAACAAEAICAAAAAAAADoAgAAFgAAACgAAAAgAAAAQAAAAAEABAAAAAAAgAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAAACAAAAAgIAAgAAAAIAAgACAgAAAwMDAAICAgAAAAP8AAP8AAAD//wD/AAAA/wD/AP//AAD///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAPcAAAAAAAAAAAAAAAAAAA/3cAAAAAAAAAAAAACHcAAAAAAAAAAAAAAAAAAAj3AAAAAAAAAAAAAAAAAACPcAAAAAAAAAAAAAAAAAAAj3AAAA9wAAAAAAAAAAgACPcAAAAPcAAAAAAAAAAIcAj3AAAAAAAAAAAAAAAACPcPcAAAAAAAAAAAAAAAAAj/cAAAAAAAAAAAAAAAAAAI//d3dwAA/3cAAAAAAAAACP/3d3AAAA9wAAAAAAAAAAj/d3cAAAAAAAAAAAAAAAAI/3dwAAAAAAAAAAAAAAAACPd3AAAAAAAAAAAAAAAAAAj3cAAAAAAAAAAAAAAAAAAIdwAAAAAAAAAAAAAAAAAACHAAAAAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD////////////////////////////////////////////////////////////8////+H///jA///wwP//8P///+Hz//3h4f/8w+H//EPz//wH///8AED//ADA//wB4f/8A/P//Af///wP///8H////D////x////8/////f////w=="),auto;
}
.outer, #footer {
@@ -311,3 +356,63 @@ h1 {
.bar {
fill: #0f0;
}
+
+@media(max-width:500px){
+body {
+ margin: 8px 0;
+ font-size: 14px;
+}
+
+h1, .sep {
+ display: none;
+}
+
+.outer {
+ display: block;
+ margin-bottom: 8px;
+ width: 100%;
+}
+
+#main {
+ flex-direction: column;
+ -moz-flex-direction: column;
+ -webkit-flex-direction: column;
+ text-align: center;
+}
+
+#vis-cont {
+ align-self: center;
+ -webkit-align-self: center;
+ margin-bottom: 4px;
+}
+
+#nowplaying {
+ width: 100%;
+}
+
+#server_name-cont {
+ display: flex;
+ display: -moz-flex;
+ display: -ms-flex;
+ display: -webkit-flex;
+}
+
+#server_name-cont span {
+ align-self: center;
+ -webkit-align-self: center;
+ padding-right: 2px;
+}
+
+#server_name {
+ max-width: 100%;
+ flex-grow: 1;
+ -ms-flex-grow: 1;
+ -moz-flex-grow: 1;
+ -webkit-flex-grow: 1;
+ width: 100%;
+ width: calc(100% - 50px);
+ width: -moz-calc(100% - 50px);
+ width: -webkit-calc(100% - 50px);
+}
+
+}
diff --git a/bairadio.js b/bairadio.js
index 2e1eafe..4ee1541 100644
--- a/bairadio.js
+++ b/bairadio.js
@@ -1,17 +1,24 @@
var radionum = 0;
-function updateSelect() {
+function update(first) {
+ var first = first || false;
+
var req = new XMLHttpRequest();
var url = "https://bienvenidoainternet.org:8443";
req.open("GET", url+"/status-json.xsl", true);
req.send();
req.onreadystatechange = function() {
if (this.readyState === 4 && this.status === 200) {
+ if (first) { document.getElementById("status").textContent = ""; }
+
var resp = JSON.parse(req.response);
resp = resp.icestats.source;
+ if (radionum > resp.length) { radionum = 0; }
+
var sel = document.getElementById("server_name");
- sel.innerHTML = "";
+ sel.textContent = "";
+
if (resp.length > 1) {
for (var i = -1; ++i < resp.length;) {
var o = document.createElement("option");
@@ -31,28 +38,9 @@ function updateSelect() {
if (resp.server_description) {
o.textContent += ": " + resp.server_description;
}
+ o.defaultSelected = true;
sel.appendChild(o);
}
- }
- }
-}
-
-function update(first) {
- var first = first || false;
-
- var req = new XMLHttpRequest();
- var url = "https://bienvenidoainternet.org:8443";
- req.open("GET", url+"/status-json.xsl", true);
- req.send();
- req.onreadystatechange = function() {
- if (this.readyState === 4 && this.status === 200) {
- if (first) { document.getElementById("status").textContent = ""; }
-
- var resp = JSON.parse(req.response);
- resp = resp.icestats.source;
- if (resp.length > 1) {
- resp = resp[radionum];
- }
var audio = document.getElementById("stream");
resp.listenurl = resp.listenurl.replace("http://bienvenidoainternet.org:8000", "https://bienvenidoainternet.org:8443");
@@ -63,53 +51,53 @@ function update(first) {
var current = document.getElementById("artist").textContent + document.getElementById("title").textContent;
+ var artist = document.getElementById("artist");
if (resp.artist) {
resp.artist = resp.artist.trim();
- var artist = document.getElementById("artist");
- if (!artist.textContent.startsWith(resp.artist)) {
+ if (artist.textContent.slice(0,-3) != resp.artist) {
artist.textContent = resp.artist + " - ";
}
} else {
- document.getElementById("artist").textContent = "";
+ artist.textContent = "";
}
+ var title = document.getElementById("title");
if (resp.title) {
- resp.title = resp.title.trim();
- var title = document.getElementById("title");
- if (title.textContent != resp.title) {
- if (title.textContent != "" && title.textContent != resp.title) {
- var history = document.getElementById("history");
- history.innerHTML += '<div class="pastsong">' + current + '</div>';
- history.scrollTop = history.scrollHeight;
- }
-
- title.textContent = resp.title;
- document.title = resp.title + ((resp.artist) ? (" - "+resp.artist) : "") + " @ Radio B.a.I.";
-
- checkLong();
- }
+ resp.title = String(resp.title).trim();
} else {
- document.getElementById("title").textContent = "(Sin título)";
- document.title = "(Sin título) @ Radio B.a.I.";
+ resp.title = "(Sin título)";
}
-
+ if (title.textContent != resp.title) {
+ var history = document.getElementById("history");
+ history.innerHTML += '<div class="pastsong">' + current + '</div>';
+ history.scrollTop = history.scrollHeight;
+
+ title.textContent = resp.title;
+ document.title = resp.title + " @ Radio B.a.I.";
+
+ checkLong();
+ }
+
if (resp.listeners) {
var listeners = document.getElementById("listeners");
if (listeners.textContent != resp.listeners) {
listeners.textContent = resp.listeners;
}
}
-
+
if (resp["ice-bitrate"]) {
var bitrate = document.getElementById("bitrate");
if (bitrate.textContent != resp["ice-bitrate"]) {
bitrate.textContent = resp["ice-bitrate"];
}
}
-
+
if (resp.audio_samplerate) {
var audio_samplerate = document.getElementById("audio_samplerate");
- audio_samplerate.textContent = Math.round(resp.audio_samplerate / 1000);
+ var khz = Math.round(resp.audio_samplerate / 1000);
+ if (audio_samplerate.textContent != khz) {
+ audio_samplerate.textContent = khz;
+ }
}
}
}
@@ -129,51 +117,55 @@ function startVisualization() {
anal.getByteFrequencyData(freq);
var vis = document.getElementById("vis");
- vis.innerHTML = "";
+ vis.textContent = "";
var div = 3;
+ var svgns = "http://www.w3.org/2000/svg";
for (var i = 0; i < 900; i += 20) {
var h = (freq[i] / div);
- vis.innerHTML += '<rect class="bar"' +
- 'height="' + h + '" ' +
- 'width="1"' +
- 'x="' + (i / 10) + '" ' +
- 'y="' + ((255 / div) - h) + '" />';
+ var rect = document.createElementNS(svgns, "rect");
+ rect.setAttributeNS(null, "x", (i / 10));
+ rect.setAttributeNS(null, "y", ((255 / div) - h));
+ rect.setAttributeNS(null, "height", h);
+ rect.setAttributeNS(null, "width", "1");
+ rect.setAttributeNS(null, "class", "bar");
+ vis.appendChild(rect);
}
}
-
+
renderVis();
}
function checkLong() {
+ var cont = document.getElementById("nowplaying");
var strip = document.getElementById("nowplaying-txt");
var marquee = document.getElementById("marqueeStyle");
if (marquee) marquee.parentElement.removeChild(marquee);
- if (strip.clientWidth > 480) { // #nowplaying width = 480px
- var travel = strip.clientWidth - 475;
+ var ws = strip.clientWidth;
+ var wc = cont.clientWidth
+ if (ws > wc) {
+ var travel = ws - (wc-5);
var style = document.createElement("style");
style.id = "marqueeStyle";
- style.textContent = "#nowplaying-txt {animation: marquee " + Math.round(travel/10) + "s linear infinite;}";
- style.textContent += "@keyframes marquee {";
- style.textContent += "10% { transform: translateX(0); }";
- style.textContent += "45% { transform: translateX(-" + travel + "px); }";
- style.textContent += "55% { transform: translateX(-" + travel + "px); }";
- style.textContent += "90% { transform: translateX(0); }";
- style.textContent += "}";
+ var dur = Math.round(travel/10);
+ if (dur < 3) { dur++; }
+ style.textContent = "#nowplaying-txt {\n -webkit-animation: marquee " + dur + "s linear infinite;\n animation: marquee " + dur + "s linear infinite;\n}\n";
+ style.textContent += "@-webkit-keyframes marquee {\n 10% { transform: translateX(0); }\n 45% { transform: translateX(-" + travel + "px); }\n 55% { transform: translateX(-" + travel + "px); }\n 90% { transform: translateX(0); }\n}\n";
+ style.textContent += "@keyframes marquee {\n 10% { transform: translateX(0); }\n 45% { transform: translateX(-" + travel + "px); }\n 55% { transform: translateX(-" + travel + "px); }\n 90% { transform: translateX(0); }\n}";
document.getElementsByTagName("head")[0].appendChild(style);
}
}
function playPause() {
var radio = document.getElementById("stream");
- var vis = document.getElementById("vis");
+ var stat = document.getElementById("control");
if (radio.paused) {
radio.play();
- vis.removeAttribute("class")
+ stat.setAttribute("class", "playing");
} else {
- vis.setAttribute("class", "show-play-btn");
+ stat.setAttribute("class", "paused");
radio.pause();
}
}
@@ -204,13 +196,15 @@ function changeVolume(e) {
function collapseHistory() {
var box = document.getElementById("box-history");
-
+ var cont = document.getElementById("history").parentElement;
if (box.className == "outer") {
box.classList.add("collapse");
+ cont.style.width = (box.clientWidth - document.getElementById("box-history-title").clientWidth - 14) + "px";
} else {
+ cont.removeAttribute("style");
box.classList.remove("collapse");
}
-
+ box.scrollTop = box.scrollHeight;
removeSel();
}
@@ -238,11 +232,10 @@ function removeSel() {
var chatConnected = false;
var antiFlood = false;
-const chatMaxChar = 80;
const chatFloodTime = 1100;
function connect() {
- sock = new WebSocket("wss://tv.bienvenidoainternet.org/daemon/");
+ sock = new WebSocket("wss://radio.bienvenidoainternet.org/daemon/");
sock.addEventListener("open", function(e) {
addMsg("Conectado al chat.");
chatConnected = true;
@@ -283,7 +276,7 @@ function checkSend(e) {
if (antiFlood) return;
var msgField = document.getElementById("msg_type");
- var msg = msgField.value.trim().substr(0, chatMaxChar);
+ var msg = msgField.value.trim();
if (!msg) return;
if (chatConnected) {
@@ -327,16 +320,14 @@ function addMsg(msg) {
}
document.addEventListener("DOMContentLoaded", function() {
- document.getElementById("vis").addEventListener("click", playPause);
+ document.getElementById("control").addEventListener("click", playPause);
document.getElementById("volume").addEventListener("mousedown", changeVolume);
document.getElementById("server_name").addEventListener("change", function(e) { radionum = this.value; });
document.getElementById("box-history-title").addEventListener("dblclick", collapseHistory);
document.getElementById("resize").addEventListener("mousedown", resizeChat);
update(true);
- updateSelect();
startVisualization();
- setInterval(update, 1000);
- setInterval(updateSelect, 10000);
+ setInterval(update, 1500);
connect();
});
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..c7b955d
--- /dev/null
+++ b/index.html
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html lang="es-ES">
+<head>
+ <meta charset="utf-8">
+ <title>Radio B.a.I.</title>
+ <meta name="description" content="La radio de Bienvenido a Internet." />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <link rel="shortcut icon" href="favicon.ico" />
+ <link rel="stylesheet" href="bairadio.css" title="Radio B.a.I." />
+ <script src="bairadio.js"></script>
+</head>
+<body>
+ <h1>Radio B.a.I.</h1>
+
+ <div id="box-main" class="outer">
+ <div class="inner">
+ <div id="main" class="content">
+ <div id="vis-cont" class="box">
+ <div id="control" class="stopped"></div>
+ <svg id="vis"></svg>
+ </div>
+ <div class="main-sep"></div>
+ <div id="main-cont">
+ <audio id="stream" src="https://bienvenidoainternet.org:8443/bai.ogg" crossorigin="anonymous"></audio>
+ <div class="line">
+ <div id="nowplaying" class="box">
+ <div id="nowplaying-txt"><span id="artist"></span><span id="title"></span><span id="status">*** La radio está OFFLINE ***</span></div>
+ </div>
+ </div>
+ <div id="details">
+ <div class="line">
+ <div id="server_name-cont" class="block"><span>Show:</span><select id="server_name" class="box"></select></div>
+ </div>
+ <div class="line">
+ <div class="block">Volumen:<span id="volume" class="box">100</span></div>
+ <div class="block">Bitrate:<span id="bitrate" class="box">--</span></div>
+ <div class="block">KHz:<span id="audio_samplerate" class="box">--</span></div>
+ <div class="block">Oyentes:<span id="listeners" class="box">0</span></div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div class="sep"></div>
+
+ <div id="box-history" class="outer">
+ <div class="inner">
+ <div id="box-history-title" class="boxtitle">Historial</div>
+ <div class="content">
+ <div id="history" class="box"></div>
+ </div>
+ </div>
+ </div>
+
+ <div class="sep"></div>
+
+ <div id="box-chat" class="outer chat">
+ <div class="inner">
+ <div id="box-chat-title" class="boxtitle">Chat<span id="chat-count"></span></div>
+ <div class="content">
+ <div id="chat-all" class="box"></div>
+ <form autocomplete="off" id="msg_cont">
+ <input id="msg_type" type="text" placeholder="Escribe un mensaje aquí" maxlength="256" autofocus="autofocus" />
+ <input id="msg_send" value="Enviar" type="submit" disabled="disabled" />
+ </form>
+ <span id="resize"></span>
+ </div>
+ </div>
+ </div>
+
+ <div class="sep"></div>
+
+ <div id="footer">
+ <a href="/bai.ogg.m3u" target="_blank">Archivo M3U</a> ★
+ <a href="/bai.ogg.xspf" target="_blank">Archivo XSPF</a> ★
+ <a href="https://bienvenidoainternet.org/" target="_blank">Bienvenido a Internet</a> ★ 2010-2020
+ </div>
+</body>
diff --git a/radio.html b/radio.html
deleted file mode 100644
index f24bfbc..0000000
--- a/radio.html
+++ /dev/null
@@ -1,76 +0,0 @@
-<!DOCTYPE html>
-<html lang="es-ES">
-<head>
- <meta charset="utf-8">
- <title>Radio @ Bienvenido a Internet</title>
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <link rel="shortcut icon" href="favicon.ico" />
- <link rel="stylesheet" href="bairadio.css" title="Radio B.a.I." />
- <script src="bairadio.js"></script>
-</head>
-<body>
- <h1>Radio B.a.I.</h1>
-
- <div id="box-main" class="outer">
- <div class="inner">
- <div id="main" class="content">
- <div id="vis-cont" class="box"><svg id="vis" class="show-play-btn"></svg></div>
- <div class="main-sep"></div>
- <div id="main-cont">
- <audio id="stream" src="https://bienvenidoainternet.org:8443/bai.ogg"></audio>
- <div class="line">
- <div id="nowplaying" class="box">
- <div id="nowplaying-txt"><span id="artist"></span><span id="title"></span><span id="status">*** La radio está OFFLINE ***</span></div>
- </div>
- </div>
- <div id="details">
- <div class="line">
- <div class="block">Show:<select id="server_name" class="box"></select></div>
- </div>
- <div class="line">
- <div class="block">Volumen:<span id="volume" class="box">100</span></div>
- <div class="block">Bitrate:<span id="bitrate" class="box">--</span></div>
- <div class="block">KHz:<span id="audio_samplerate" class="box">--</span></div>
- <div class="block">Oyentes:<span id="listeners" class="box">0</span></div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
-
- <br>
-
- <div id="box-history" class="outer">
- <div class="inner">
- <div id="box-history-title" class="boxtitle">Historial</div>
- <div class="content">
- <div id="history" class="box"></div>
- </div>
- </div>
- </div>
-
- <br>
-
- <div id="box-chat" class="outer chat">
- <div class="inner">
- <div id="box-chat-title" class="boxtitle">Chat<span id="chat-count"></span></div>
- <div class="content">
- <div id="chat-all" class="box"></div>
- <form autocomplete="off" id="msg_cont">
- <input id="msg_type" type="text" placeholder="Escribe un mensaje aquí" autofocus="autofocus" />
- <input id="msg_send" value="Enviar" type="submit" disabled="disabled" />
- </form>
- <span id="resize"></span>
- </div>
- </div>
- </div>
-
- <br>
-
- <div id="footer">
- <a href="/bai.ogg.m3u" target="_blank">Archivo M3U</a> ★
- <a href="/bai.ogg.xspf" target="_blank">Archivo XSPF</a> ★
- Bienvenido a Internet ★ 2010-2020
- </div>
-</body>
--
cgit v1.2.1-18-gbd029