Added scrobbler support. (#346)

* Initial checkin of the last.fm scrobbler service.

* Added the conversion of the data.

* Fixed conversion issue: now it is converted in the service.
Added the call to the voice command.
Updated the translations. (this has to be fixed for other languages.

* Some updates:
- Show on the bottom left
- No voice command
- Dealing with error cases

config.example.js

@@ -115,6 +115,11 @@ var config = {
       autoWake: '07:00:00', // When to automatically wake the screen up (7:00AM)
       'wake_cmd': '/opt/vc/bin/tvservice -p', // The binary and arguments used on your system to wake the screen
       'sleep_cmd': '/opt/vc/bin/tvservice -o', // The binary and arguments used on your system to sleep the screen
+    },
+    lastfm: {
+      key: "", // Your last.fm api key
+      user: "", // Your last.fm username
+      refreshInterval : 0.6 // Number of minutes between checks for playing track
     }
 };
 

css/main.css

@@ -114,13 +114,21 @@ dt {
     margin-bottom: 20px;
 }
 
-.bottom-left {
+.bottom-left, .bottom-right {
     font-family: 'Open Sans', sans-serif;
     position: absolute;
-    bottom: 20px;
+    bottom: 50px;
+    width: 50%;
+}
+
+.bottom-left {
     left: 20px;
 }
 
+.bottom-right {
+    right: 20px;
+}
+
 .commands {
     width: 450px;
     text-align: left;
@@ -250,6 +258,11 @@ ul.calendar {
     width: 450px;
 }
 
+.playing-track img {
+    float: left;
+    margin-right: 5px;
+}
+
 .traffic-information, .stock-information {
     text-align: right;
     margin-top: 10px;
@@ -478,7 +491,6 @@ ul.calendar {
 }
 
 .news {
-    height: 75px;
     margin-bottom: 5px;
 }
 
@@ -492,4 +504,4 @@ ul.calendar {
     font-family: 'Open Sans', sans-serif;
     font-size: 20px;
     margin-bottom: 55px;
-}
+}

index.html

@@ -41,6 +41,7 @@
     <script src="js/services/rss.js"></script>
     <script src="js/services/autosleep.js"></script>
     <script src="js/services/stock.js"></script>
+    <script src="js/services/scrobbler.js"></script>
     <script src="js/controller.js"></script>
 
     <!-- Styles and Resources -->
@@ -112,14 +113,12 @@
             <span><i class="fa fa-rss fade" style="margin-right: 5px";></i></span>
             <span fade>{{quote.resource.fields.issuer_name}}: ${{quote.resource.fields.price  | number : 3}}</span>
           </div>
-        </div>        
+        </div>
       </div>
     </div>
     <div class="container" ng-class="(listening == true)?'listening':'not-listening'">
       <div class="middle-center">
         <h1>{{greeting}}</h1>
-        <h3 ng-show="!(user.name === undefined)">{{user.name}}</h3>
-        <!-- <div class="listening" ng-show="listening">Ready: {{focus}}</div> -->
         <div class="contents-box video-container animate-grow" ng-show="focus == 'video'">
           <iframe class="video animate-grow" ng-src="{{video}}"/></iframe>
         </div>
@@ -190,8 +189,8 @@ <h2>{{ 'commands.title' | translate }}</h2>
         <div class="error" ng-bind="speechError" ng-show="speechError"></div>
         <div class="interim-result" ng-bind="interimResult" ng-hide="speechError"></div>
       </div>
-      <div class="bottom-left" ng-show="fitbitEnabled">
-        <div>
+      <div class="bottom-left">
+        <div class="fitbit" ng-show="fitbitEnabled">
           <div><span class="fitbit-title">{{'fitbit.statsFor' | translate}} {{fbDailyAverage.fullName}}</span></div>
           <div><span class="fitbit-item">{{'fitbit.averageSteps' | translate}}: {{fbDailyAverage.averageDailySteps}}</span></div>
           <div><span class="fitbit-item">{{'fitbit.todaysSteps' | translate}}: {{fbToday.summary.steps}}</span></div>
@@ -220,6 +219,16 @@ <h2>{{ 'commands.title' | translate }}</h2>
             </div>
           </div>
         </div>
+        <div class="playing-track">
+          <img ng-src="{{track.cover}}" />
+          <div>{{track.artist}}</div>
+          <div>{{track.title}}</div>
+          <div>{{track.album}}</div>
+          <div class="nowplaying" ng-show="track.playing">Playing</div>
+        </div>
+      </div>
+      <div class="bottom-right">
+        <!-- Someday something will live here -->
       </div>
       <div class="colors animate-grow" ng-show="focus == 'colors'">
         <div class="color-block" ng-repeat="color in colors" style="background-color:{{color}}"></div>

js/controller.js

@@ -19,6 +19,7 @@
             SoundCloudService,
             RssService,
             StockService,
+            ScrobblerService,
             $rootScope, $scope, $timeout, $interval, tmhDynamicLocale, $translate) {
 
         // Local Scope Vars
@@ -252,6 +253,16 @@
                 registerRefreshInterval(updateNews, 2);
             }
 
+            var getScrobblingTrack = function(){
+                ScrobblerService.getCurrentTrack().then(function(track) {
+                    $scope.track = track;
+                });
+            }
+
+            if(typeof config.lastfm.key !== 'undefined' && config.lastfm.user !== 'undefined'){
+                registerRefreshInterval(getScrobblingTrack, config.lastfm.refreshInterval || 0.6)
+            }
+
             var addCommand = function(commandId, commandFunction){
                 var voiceId = 'commands.'+commandId+'.voice';
                 var textId = 'commands.'+commandId+'.text';

js/services/scrobbler.js

@@ -0,0 +1,40 @@
+(function(annyang) {
+    'use strict';
+
+    function ScrobblerService($http, $q) {
+      var service = {};
+
+      service.getCurrentTrack = function () {
+        var deferred = $q.defer();
+        if (config.lastfm.user && config.lastfm.key) {
+          var url = "http://ws.audioscrobbler.com/2.0/?method=user.getrecenttracks&user="+config.lastfm.user+"&api_key="+config.lastfm.key+"&limit=1&format=json";
+
+          $http.get(url).then(function(response) {
+            if (response.data.error){
+              // If there is an error with the request (excluding network errors)
+              console.log("Scrobbler Error: ", response.data.message);
+              deferred.reject(response);
+            } else if (typeof response.data.recenttracks.track[0]["@attr"] == "object"){
+              // If there is a track currently playing
+              var track  = response.data.recenttracks.track[0];
+              deferred.resolve({
+                title: track.name,
+                artist: track.artist["#text"] || "Unknown",
+                album: track.album["#text"] || "",
+                cover: track.image[1]["#text"],
+              });
+            } else {
+              // Either there was a network error or there is no song currently playing
+              deferred.reject(response);
+            }
+          });
+        }
+        return deferred.promise;
+      }
+
+      return service;
+    }
+
+    angular.module('SmartMirror')
+        .factory('ScrobblerService', ScrobblerService);
+}(window.annyang));