Add basic playback functionality.

tkem · Jan 9, 2015 · 2728242 · 2728242
1 parent 5641592
commit 2728242
Show file tree

Hide file tree

Showing 3 changed files with 87 additions and 39 deletions.
diff --git a/www/js/controllers.js b/www/js/controllers.js
@@ -46,24 +46,51 @@ var dirmap = {
 angular.module('app.controllers', [])
 
 .controller('PlaybackCtrl', function($scope, Mopidy) {
-    $scope.state = 'init';
+  function formatTime(ms) {
+    var sec = parseInt(ms / 1000) % 60;
+    var min = parseInt(ms / 60000);
+    return min + ':' + (sec < 10 ? '0' : '') + sec;
+  }
+
+  $scope.state = 'init';
+  // TODO
+  $scope.timePos = '0:00';
+  $scope.timeEnd = 'n/a';
+
+  $scope.track = {};
+  $scope.play = function() {
+    Mopidy.playback.play();
+  };
+  $scope.pause = function() {
+    Mopidy.playback.pause();
+  };
+  $scope.stop = function() {
+    Mopidy.playback.stop();
+  };
+  $scope.next = function() {
+    Mopidy.playback.next();
+  };
+  $scope.previous = function() {
+    Mopidy.playback.previous();
+  };
+  Mopidy.on('state:online', function() {
+    $scope.state = 'online';
+    $scope.$apply();
+  });
+  Mopidy.on('state:offline', function() {
+    $scope.state = 'offline';
+    $scope.$apply();
+  });
+  Mopidy.on('event:trackPlaybackStarted', function(event) {
+    $scope.track = event.tl_track.track;
+    $scope.timeEnd = formatTime(event.tl_track.track.length);
+    $scope.$apply();
+  });
+  Mopidy.on('event:trackPlaybackEnded', function() {
     $scope.track = {};
-    Mopidy.on('state:online', function() {
-        $scope.state = 'online';
-        $scope.$apply();
-    });
-    Mopidy.on('state:offline', function() {
-        $scope.state = 'offline';
-        $scope.$apply();
-    });
-    Mopidy.on('event:trackPlaybackStarted', function(event) {
-        $scope.track = event.tl_track.track;
-        $scope.$apply();
-    });
-    Mopidy.on('event:trackPlaybackEnded', function() {
-        $scope.track = {};
-        $scope.$apply();
-    });
+    $scope.timeEnd = 'n/a';
+    $scope.$apply();
+  });
 })
 
 .controller('TracklistCtrl', function($scope) {

diff --git a/www/js/services.js b/www/js/services.js
@@ -18,23 +18,17 @@ angular.module('app.services', [])
 .provider('Mopidy', function() {
   var provider = this;
   provider.settings = {};
-
-  function isMopidyWebExtension() {
-    // TODO: better way?
+  provider.isWebExtension = function() {
     var scripts = window.document.scripts;
     for (var i = 0; i != scripts.length; ++i) {
-      var src = scripts[i].src || '';
-      if (/lib\/mopidy\/.*mopidy\.(min\.)?js$/.test(src)) {
-        return false;
-      } else if (/mopidy\.(min\.)?js$/.test(src)) {
+      if (/\/mopidy\/mopidy\.(min\.)?js$/.test(scripts[i].src || '')) {
         return true;
       }
     }
     return false;
-  }
-
+  };
   provider.$get = function($log) {
-    if (!isMopidyWebExtension() && !provider.settings.webSocketUrl) {
+    if (!provider.settings.webSocketUrl && !provider.isWebExtension()) {
       // TODO: handle via settings
       provider.settings.webSocketUrl = window.prompt(
         'Mopidy WebSocket URL',

diff --git a/www/templates/playback.html b/www/templates/playback.html
@@ -1,27 +1,54 @@
+<style>
+  .trackview {
+  text-align: center;
+  }
+  .trackview img {
+  width: 75%;
+  height: 75%;
+  }
+</style>
+
+
 <ion-view hide-nav-bar="true" view-title="Playback">
   <ion-header-bar class="range">
-    0:43
+    {{timePos}}
     <input type="range" name="time">
-    1:15:42
+    {{timeEnd}}
   </ion-header-bar>
 
   <ion-content class="has-subfooter">
-    <div style="text-align: center">
+    <div class="trackview">
+      <p>
+        <img ng-src="{{track.album.images[0]}}">
+      </p>
+      <p>
+        <strong>{{track.name || 'Nothing playing'}}</strong>
+        <br>
+        {{track.artists[0].name}}
+        <br>
+        {{track.album.name}}
+      </p>
       {{state}}
-      <h2>{{track.name || 'Nothing playing'}}</h2>
-      <h3>{{track.artists[0].name}}</h3>
-      <p>{{track.album.name}}</p>
-      <img ng-src="{{track.album.images[0]}}">
     </div>
   </ion-content>
 
   <ion-footer-bar class="bar-subfooter">
     <div class="button-bar">
-      <button class="button button-icon icon ion-skip-backward"></button>
-      <button class="button button-icon icon ion-play"></button>
-      <button class="button button-icon icon ion-pause"></button>
-      <button class="button button-icon icon ion-stop"></button>
-      <button class="button button-icon icon ion-skip-forward"></button>
+      <button class="button button-icon icon ion-skip-backward"
+              ng-click="previous()">
+      </button>
+      <button class="button button-icon icon ion-play"
+              ng-click="play()">
+      </button>
+      <button class="button button-icon icon ion-pause"
+              ng-click="pause()">
+      </button>
+      <button class="button button-icon icon ion-stop"
+              ng-click="stop()">
+      </button>
+      <button class="button button-icon icon ion-skip-forward"
+              ng-click="next()">
+      </button>
     </div>
   </ion-footer-bar>