Merged SleepTimer patch

Merged SleepTimer patch from
d5b6649fee

For supporting from server side required SleepTimer patch for mopidy
d28715fb84

mopidy_musicbox_webclient/static/index.html

@@ -93,6 +93,31 @@
                        value="0" max="100"/>
             </div>
         </li>
+	<li id="navsleeptimer" data-icon="false" style="display: none;">
+            <div>
+                <label for="sleeptimer" >Sleep timer</label>
+                <select id="sleeptimer" >
+                    <option value="Off">Off</option>
+		    <!-- for testing -->
+                    <!-- option value="5" >5 s</option -->
+                    <!-- option value="60" >1 min</option -->
+                    <!-- option value="120" >2 min</option -->
+                    <!--  -->
+                    <option value="300" >5 min</option>
+                    <option value="600" >10 min</option>
+                    <option value="900" >15 min</option>
+                    <option value="1800" >30 min</option>
+                    <option value="2700" >45 min</option>
+                    <option value="3600" >1 hr</option>
+                    <option value="5400" >1.5 hr</option>
+                    <option value="7200" >2 hr</option>
+                </select>
+            </div>
+            <div id="sleeptimer_status" class="hidden">
+                Time left: <span id="sleeptimer_timeleft"></span>
+            </div>
+        </li>
+
         <li data-icon="false">
             <div class="hostInfo">
                 {% if hostname == serverIP %}
@@ -552,6 +577,7 @@
 <script type="text/javascript" src="js/library.js"></script>
 <script type="text/javascript" src="js/functionsvars.js"></script>
 <script type="text/javascript" src="js/process_ws.js"></script>
+<script type="text/javascript" src="js/sleeptimer.js"></script>
 
 <!-- use lastfm -->
 <script type="text/javascript" src="vendors/lastfm/lastfm.api.md5.js"></script>

mopidy_musicbox_webclient/static/js/sleeptimer.js

@@ -0,0 +1,141 @@
+
+(function() {
+  var sleeptimerNav,
+      dropdown,
+      statusArea,
+      timeLeftDisplay;
+      running = false;
+
+  function init() {
+    sleeptimerNav = $('#navsleeptimer');
+    dropdown = $('#sleeptimer');
+    statusArea = $('#sleeptimer_status');
+    timeLeftDisplay = $('#sleeptimer_timeleft');
+
+    dropdown.on('change', function(){
+      var val = this.value;
+
+      if (val == 'Off') {
+        if (running) {
+          mopidy.sleeptimer.cancel();
+        }
+      }
+      else {
+        var duration = parseInt(val, 10);
+        start(duration);
+      }
+    });
+
+
+    // Using a timer for now as the mopidy object created in gui.js isn't available yet
+    // and really don't want to have two websocket connections.
+    // Perhaps gui.js needs a way for additional modules to register.
+
+    window.setTimeout(function() {
+//      mopidy.on('state:online', function() {
+{
+//        if (!!mopidy.sleeptimer) {
+
+          mopidy.on('event:sleeptimerStarted', onServerStart);
+          mopidy.on('event:sleeptimerTick', onServerTick);
+          mopidy.on('event:sleeptimerExpired', onServerTimerExpired);
+          mopidy.on('event:sleeptimerCancelled', onServerCancel);
+
+          sleeptimerNav.show();
+          // initialise with current state
+          mopidy.sleeptimer.getState().done(function(state) {
+            if (state.running) {
+              onServerStart(state);
+            }
+          })
+        }
+//      });
+    }, 200);
+  }
+
+  function start(duration) {
+    renderTimeLeft(duration * 1000);
+    statusArea.show();
+    running = true;
+    mopidy.sleeptimer.start({'duration': duration});
+  }
+
+  // pretty sure there's a library function somewhere to do this
+  function formatDigits(n, numDigits) {
+    s = n.toString();
+
+    if (numDigits > 12) {
+      numDigits = 12;
+    }
+
+    if (s.length < numDigits) {
+      s = '000000000000'.substr(12 - (numDigits - s.length)) + s;
+    }
+
+    return s;
+  }
+
+  // and this
+  function milliSecondsToHMS(dur) {
+    var h, m, s;
+
+    // round to nearest second
+    var ms = dur % 1000;
+
+    if (ms < 500) {
+      dur -= ms;
+    }
+    else {
+      dur += (1000 - ms);
+    }
+
+    dur = Math.floor(dur /1000);
+
+    s = dur % 60;
+    dur = Math.floor(dur/60);
+    m = dur % 60;
+    h = Math.floor(dur/60);
+
+    return formatDigits(h, 2) + ':' + formatDigits(m, 2) + ':' + formatDigits(s, 2);
+  }
+
+  function renderTimeLeft(milliseconds) {
+    timeLeftDisplay.html(milliSecondsToHMS(milliseconds));
+  }
+
+  function resetDisplay() {
+    dropdown.val('Off');
+    dropdown.trigger('change');
+    statusArea.hide();
+  }
+
+  function onServerStart(state) {
+    dropdown.val(state.duration);
+    dropdown.selectmenu('refresh', true);
+    onServerTick(state);
+    statusArea.show();
+  }
+
+  function onServerTick(data) {
+    var milliseconds = Math.floor((parseFloat(data.seconds_left) + 0.5) * 1000);
+    var displayTime = milliSecondsToHMS(milliseconds);
+    timeLeftDisplay.html(displayTime);
+  }
+
+  function onServerTimerExpired() {
+    running = false;
+    timeLeftDisplay.html('Ended');
+    dropdown.val('Off');
+    dropdown.trigger('change');
+  }
+
+  function onServerCancel() {
+    running = false;
+    resetDisplay();
+  }
+
+  // OK, let's go
+  $(document).ready(init);
+
+}
+)();