added support for bitrate selection. This closes #9

index.html

@@ -38,7 +38,9 @@
                         <option value="30">30fps</option>
                         <option value="60">60fps</option>
                     </select>
+                    <output id='bitrateField'>15Mbps</output>
                 </div>
+                <input id="bitrateSlider" class="mdl-slider mdl-js-slider" type="range" min="0" max="100" step="0.5" value="15">
             </div>
 
             <div id="hostSettings">

main.cpp

@@ -162,11 +162,13 @@ void MoonlightInstance::handleStartStream(std::string startStreamMessage) {
     PostMessage(response);
     response = ("Setting stream host to: " + splitString.at(1));
     PostMessage(response);
+    response = ("Setting stream bitrate to: " + splitString.at(5));
+    PostMessage(response);
     // Populate the stream configuration
     m_StreamConfig.width = stoi(splitString.at(2));
     m_StreamConfig.height = stoi(splitString.at(3));
     m_StreamConfig.fps = stoi(splitString.at(4));
-    m_StreamConfig.bitrate = 15000; // kilobits per second
+    m_StreamConfig.bitrate = stoi(splitString.at(5)); // kilobits per second
     m_StreamConfig.packetSize = 1024;
     m_StreamConfig.streamingRemotely = 0;
     m_StreamConfig.audioConfiguration = AUDIO_CONFIGURATION_STEREO;

static/css/style.css

@@ -7,6 +7,11 @@
 main {
 	padding: 50px 100px;
 }
+#bitrateField {
+  text-align: center;
+  display: block;
+  padding-top: 15px;
+}
 #hostSettings {
 	padding: 5px 10px;
 	border: 1px dashed;

static/js/index.js

@@ -9,9 +9,24 @@ function attachListeners() {
     document.getElementById('showAppsButton').addEventListener('click', showAppsPushed);
     document.getElementById('selectResolution').addEventListener('change', saveResolution);
     document.getElementById('selectFramerate').addEventListener('change', saveFramerate);
+    document.getElementById('bitrateSlider').addEventListener('input', updateBitrateField); // input occurs every notch you slive
+    document.getElementById('bitrateSlider').addEventListener('change', saveBitrate); // change occurs once the mouse lets go.
     window.addEventListener("resize", fullscreenNaclModule);
 }
 
+function updateBitrateField() {
+    document.getElementById('bitrateField').innerHTML = document.getElementById('bitrateSlider').value + " Mbps"
+}
+
+function saveBitrate() {
+    storeData('bitrate', document.getElementById('bitrateSlider').value, null);
+}
+
+function loadBitrate(previousValue) {
+    document.getElementById('bitrateSlider').MaterialSlider.change(previousValue.bitrate != null ? previousValue.bitrate : '15');
+    updateBitrateField();
+}
+
 function moduleDidLoad() {
     console.log("NaCl module loaded.");
 }
@@ -65,8 +80,10 @@ function startPushed() {
     }
     var frameRate = document.getElementById('selectFramerate').value;
     var resolution = document.getElementById('selectResolution').value;
+    // we told the user it was in Mbps. We're dirty liars and use Kbps behind their back.
+    var bitrate = parseInt(document.getElementById('bitrateSlider').value) * 1024;
     console.log('startRequest:' + target + ":" + resolution + ":" + frameRate);
-    common.naclModule.postMessage('startRequest:' + target + ":" + resolution + ":" + frameRate + ":");
+    common.naclModule.postMessage('startRequest:' + target + ":" + resolution + ":" + frameRate + ":" + bitrate + ":");
     // we just finished the gameSelection section. only expose the NaCl section
     playGameMode();
 }
@@ -171,11 +188,12 @@ function loadHosts(previousValue) {
 }
 
 function onWindowLoad(){
-    // document.getElementById('streamSettings').style.display = 'none';
     document.getElementById('gameSelection').style.display = 'none';
+    $("#bitrateField").addClass("bitrateField");
     readData('resolution', loadResolution);
     readData('frameRate', loadFramerate);
     readData('hosts', loadHosts);
+    readData('bitrate', loadBitrate);
 }
 
 window.onload = onWindowLoad;