Created
June 19, 2020 15:30
-
-
Save NickGreen/5dd0b201d028192471a5dd69e31dffc3 to your computer and use it in GitHub Desktop.
SONOS API webpage
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <style> | |
| body { | |
| background:black; | |
| } | |
| #favorites_container { | |
| width:89%; | |
| display:inline-block; | |
| } | |
| .favorite { | |
| opacity:.8; | |
| background-size:cover; | |
| width:250px; | |
| height:250px; | |
| border:0 none; | |
| font-size: 0; | |
| cursor:pointer; | |
| } | |
| #controls { | |
| width:10%; | |
| height:100%; | |
| float:right; | |
| } | |
| #controls input { | |
| font-size:35px; | |
| color:white; | |
| position: relative; | |
| display: inline-block; | |
| padding: 15px 25px; | |
| background-color: #333; | |
| width:90%; | |
| height:100px; | |
| margin:10px; | |
| border:none; | |
| border-radius:10px; | |
| } | |
| #controls input:hover{ | |
| cursor:pointer; | |
| } | |
| #volume_display { | |
| color:#ddd; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="favorites_container"></div> | |
| <div id="controls"> | |
| <h5>Controls</h5> | |
| <input id="playpause" type="submit" value="Play" onclick="playpause()"> | |
| <span id="volume_display"></span></br> | |
| <input type="submit" value="🔊" onclick="volume('+5')"> | |
| <input type="submit" value="🔈" onclick="volume('-5')"> | |
| </div> | |
| <script type="text/javascript"> | |
| const room_name = "TV%20soundbar"; | |
| function playpause() { | |
| switch( document.getElementById("playpause").value ) { | |
| case "Pause": | |
| var input_value = "Play"; | |
| var command = "pause"; | |
| break; | |
| default: | |
| var input_value = "Pause"; | |
| var command = "play"; | |
| } | |
| var xhr = new XMLHttpRequest(); | |
| xhr.onreadystatechange = function () { | |
| if (xhr.readyState === 4) { | |
| document.getElementById("playpause").value = input_value; | |
| } | |
| } | |
| xhr.open('get', 'http://localhost:5005/' + room_name + '/' + command, true); | |
| xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8'); | |
| xhr.send(); | |
| } | |
| function get_volume() { | |
| var xhr = new XMLHttpRequest(); | |
| xhr.onreadystatechange = function () { | |
| if (xhr.readyState === 4) { | |
| var response = JSON.parse( this.responseText ); | |
| var volume_span = document.getElementById( "volume_display" ); | |
| var volume_percent = document.createTextNode( "Volume: " + response.volume + "%" ); | |
| volume_span.innerHTML = ''; | |
| unfade( volume_span ); | |
| volume_span.appendChild( volume_percent ); | |
| fade( volume_span ); | |
| } | |
| } | |
| xhr.open('get', 'http://localhost:5005/' + room_name + '/state', true); | |
| xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8'); | |
| xhr.send(); | |
| } | |
| function volume( value ) { | |
| var xhr = new XMLHttpRequest(); | |
| xhr.onreadystatechange = function () { | |
| if (xhr.readyState === 4) { | |
| get_volume(); | |
| } | |
| } | |
| xhr.open('get', 'http://localhost:5005/' + room_name + '/volume/' + value, true); | |
| xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8'); | |
| xhr.send(); | |
| } | |
| function play_favorite() { | |
| input_value = event.target.value; | |
| var xhr = new XMLHttpRequest(); | |
| xhr.onreadystatechange = function () { | |
| if (xhr.readyState === 4) { | |
| document.getElementById("playpause").value = "Pause"; | |
| } | |
| } | |
| xhr.open('get', 'http://localhost:5005/' + room_name + '/favorite/' + input_value, true); | |
| xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8'); | |
| xhr.send(); | |
| } | |
| function fade(element) { | |
| var op = 1; // initial opacity | |
| var timer = setInterval(function () { | |
| if (op <= 0.1){ | |
| clearInterval(timer); | |
| element.style.display = 'none'; | |
| } | |
| element.style.opacity = op; | |
| element.style.filter = 'alpha(opacity=' + op * 100 + ")"; | |
| op -= op * 0.1; | |
| }, 50); | |
| } | |
| function unfade(element) { | |
| var op = 0.1; // initial opacity | |
| element.style.display = 'inline-block'; | |
| var timer = setInterval(function () { | |
| if (op >= 1){ | |
| clearInterval(timer); | |
| } | |
| element.style.opacity = op; | |
| element.style.filter = 'alpha(opacity=' + op * 100 + ")"; | |
| op += op * 0.1; | |
| }, 1); | |
| } | |
| // load all the favorites after everything else is rendered | |
| window.addEventListener("load", function() { | |
| var xhr = new XMLHttpRequest(); | |
| xhr.onreadystatechange = function () { | |
| if ( xhr.readyState === 4 ) { | |
| document.getElementById( "favorites_container" ).innerHTML = ''; | |
| var favorites = ""; | |
| var response = JSON.parse( this.responseText ); | |
| response.forEach( function render_favorite( favorite ) { | |
| if ( "Gigi" == favorite.title.substring( 0, 4 ) ) { | |
| var favorite_div = '<input type="submit" value="' + favorite.title + '" class="favorite" style="background-image: url(' + favorite.albumArtUri + ');" onclick="play_favorite()"></div>'; | |
| favorites = favorites.concat( favorite_div ); | |
| } | |
| } ); | |
| document.getElementById( "favorites_container" ).innerHTML = favorites; | |
| } | |
| } | |
| xhr.open('get', 'http://localhost:5005/' + room_name + '/favorites/detailed', true); | |
| xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8'); | |
| xhr.send(); | |
| }); | |
| </script> | |
| </body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment