diff options
| -rw-r--r-- | bairadio.css | 147 | ||||
| -rw-r--r-- | bairadio.js | 137 | ||||
| -rw-r--r-- | index.html (renamed from radio.html) | 22 |
3 files changed, 203 insertions, 103 deletions
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(); }); @@ -2,7 +2,8 @@ <html lang="es-ES"> <head> <meta charset="utf-8"> - <title>Radio @ Bienvenido a Internet</title> + <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." /> @@ -14,10 +15,13 @@ <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 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"></audio> + <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> @@ -25,7 +29,7 @@ </div> <div id="details"> <div class="line"> - <div class="block">Show:<select id="server_name" class="box"></select></div> + <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> @@ -39,7 +43,7 @@ </div> </div> - <br> + <div class="sep"></div> <div id="box-history" class="outer"> <div class="inner"> @@ -50,7 +54,7 @@ </div> </div> - <br> + <div class="sep"></div> <div id="box-chat" class="outer chat"> <div class="inner"> @@ -58,7 +62,7 @@ <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_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> @@ -66,11 +70,11 @@ </div> </div> - <br> + <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> ★ - Bienvenido a Internet ★ 2010-2020 + <a href="https://bienvenidoainternet.org/" target="_blank">Bienvenido a Internet</a> ★ 2010-2020 </div> </body> |