Better socket handling.

bower.json

@@ -0,0 +1,16 @@
+{
+  "name": "storypalette-player",
+  "devDependencies": {
+    "angular-mocks": "v1.3.0-beta.3"
+  },
+  "dependencies": {
+    "lodash": "~2.4.1",
+    "angular": "v1.3.0-beta.3",
+    "angular-animate": "v1.3.0-beta.3",
+    "bootstrap": "~3.1.0",
+    "howler": "~1.1.17",
+    "angular-ui-router": "~0.2.10",
+    "angular-socket-io": "~0.6.0",
+    "angular-bootstrap": "~0.11.0"
+  }
+}

build.config.js

@@ -33,6 +33,7 @@ module.exports = {
       'vendor/angular-animate/angular-animate.js',
       'vendor/angular-ui-router/release/angular-ui-router.js',
       'vendor/angular-bootstrap/ui-bootstrap-tpls.js',
+      'vendor/angular-socket-io/socket.js',
       'vendor/howler/howler.js'
     ],
     css: [],
@@ -50,7 +51,7 @@ module.exports = {
   shared_files: {
     js: [
       // Uses shared_dir
-      ['src/common/uiSocket/**/*.js', '!src/common/uiSocket/**/*.spec.js'],
+      ['src/common/spConnection/**/*.js', '!src/common/spConnection/**/*.spec.js'],
       ['src/common/spUtils/**/*.js', '!src/common/spUtils/**/*.spec.js'],
       ['src/common/uiAuth/**/*.js', '!src/common/uiAuth/**/*.spec.js'],
       ['src/common/uiImagePlayer/**/*.js', '!src/common/uiImagePlayer/**/*.spec.js'],

src/app/app.js

@@ -11,20 +11,19 @@ angular.module('sp.player', [
 
   'uiAuth', 
   'spUtils', 
-  'uiSocket', 
+  'spConnection', 
 
   'ui.router',
   'ui.bootstrap'
 ])
 
-.config(function($locationProvider, $urlRouterProvider, config, socketProvider, authProvider, $stateProvider, authConfigProvider) {
+.config(function($locationProvider, $urlRouterProvider, config, authProvider, $stateProvider, authConfigProvider) {
   // Route configuration
   $locationProvider.html5Mode(true);  // no hash-urls
 
   // Redirect to connecting state.
   $urlRouterProvider.when('/', '/waiting');
 
-
   // Abstract state for different access levels
   $stateProvider.state('user', {
     abstract: true,
@@ -38,19 +37,24 @@ angular.module('sp.player', [
           return auth.requireUser(); 
         }
       },
-      socketInfo: function(user, socket, utils, auth) {
+      socket: function(user, connection, utils, auth) {
         var ns = utils.getSocketNamespace(user);
-        var token = auth.getToken(); 
         var room = user.roomId;
-        return socketProvider.requireAuthenticatedConnection(socket, ns, room, token);
+        var token = auth.getToken(); 
+        return connection.requireRoomConnection(ns, room, token);
       }
     }
   });
 
   authConfigProvider.setTokenKey('spPlayerToken'); 
   authConfigProvider.setApiBase(config.apiBase); 
+})
 
-
+.run(function($rootScope) {
+  $rootScope.$on('$stateChangeError', 
+function(event, toState, toParams, fromState, fromParams, error){ 
+    console.warn('$stateChangeError', error); 
+  });
 })
 
 .controller('AppCtrl', function() {

src/app/common/palettes.js

@@ -16,7 +16,6 @@ angular.module('sp.player.common.palettes', [
     // Returns a promise
     // TODO: Clean up
     one: function(id) {
-      console.log('Get palette with id: ' + id);
       // TODO: what is returned here?
       return $http.get(apiBase + id)
         .then(function (response) {

src/app/play/lightPlayer.js

@@ -0,0 +1,25 @@
+angular.module('sp.player.play.lightPlayer', [])
+
+.factory('lightPlayer', function() {
+    // connect to socket server
+  //var room = room;
+  var dmxSocket;
+
+  return {
+    init: function(room) {
+      console.log('connecting to dmxplayer...');
+      dmxSocket = io('http://localhost:8891');
+      dmxSocket.on('connect', function() {
+        console.log('connected to dmxplayer!');
+        dmxSocket.emit('init', {room: room});
+      });
+
+    },
+    play: function(value) {
+      console.log('lightPlayer.play() colour', value.colour);  
+      dmxSocket.emit('onValueUpdate', value);
+    }  
+  };
+})
+;
+

src/app/play/play.js

@@ -1,4 +1,6 @@
 angular.module('sp.player.play', [
+  'sp.player.play.lightPlayer',
+
   'sp.player.common.palettes',
 
   'uiImagePlayer', 
@@ -24,7 +26,7 @@ angular.module('sp.player.play', [
   });
 })
 
-.controller('PlayCtrl', function($scope, $location, socket, $stateParams,audioPlayer, imagePlayer, palette, config) {
+.controller('PlayCtrl', function($scope, $state, $location, socket, audioPlayer, imagePlayer, lightPlayer, palette, config, user) {
   console.log('\n**** PlayCtrl ****');
 
   var resetPlayers = function() {
@@ -33,6 +35,9 @@ angular.module('sp.player.play', [
     //initProgress();
   };
 
+  var room = _.find(user.organisation.rooms, {id: user.roomId});
+  lightPlayer.init(room);
+
   $scope.progress = {
     audio: {done: true},
     image: {done: true},
@@ -62,12 +67,26 @@ angular.module('sp.player.play', [
       // Change location to refresh the route and load the new palette
       socket.emit('activePalette', $scope.palette);
 
-      resetPlayers();
-      socket.removeListeners();  // Avoid duplicate event listeners
-
+      disconnect();
       $location.path('/play/' + paletteId);
     }
   });
+
+  var disconnect = function() {
+    resetPlayers();
+    socket.removeAllListeners();  // Avoid duplicate event listeners
+  };
+
+  $scope.$on('$destroy', function() {
+    console.log('playCtrl scope destroyed');
+  });
+
+  // Performer disconnected.
+  socket.on('onDisconnect', function(numClientsLeft) {
+    console.log('performer disconnected'); 
+    disconnect(); 
+    $state.go('user.waiting');
+  });
 
   imagePlayer.on(['add','progress'], function(progress) {
     $scope.progress.image = progress;
@@ -86,7 +105,7 @@ angular.module('sp.player.play', [
     $scope.progress.done = $scope.progress.image.done && $scope.progress.audio.done;
 
     if ($scope.progress.audio.done) {
-      audioPlayer.printSounds();
+      //audioPlayer.printSounds();
     }
 
     if (!$scope.$$phase) {
@@ -100,20 +119,9 @@ angular.module('sp.player.play', [
   $scope.valueUpdate = false;
   $scope.imageOpacity = {};
 
-  // Notify Performer if we navigate away (no palette active)
-  $scope.$on('$locationChangeStart', function(event, next, current) {
-    console.log('>>> PlayCtrl: on $locationChangestart');
-    //socket.emit('paletteDeactivate');
-  });
-
-  // Reset audio and images when back button is pressed
-  $scope.$on('$routeChangeStart', function(next, current) {
-    console.log('>>> PlayCtrl: on $routeChangeStart');
-  });
-
   // Palette.value has been updated by Performer
   socket.on('onValueUpdate', function (data) {
-    console.log('PlayCtrl.onValueUpdate: ', data);
+    //console.log('PlayCtrl.onValueUpdate: ', data);
     if (data.assetId === null) {
       return;
     }
@@ -125,7 +133,6 @@ angular.module('sp.player.play', [
     switch(asset.type) {
       case 'image':
         $scope.imageOpacity = {'opacity': asset.value.opacity};
-        console.log('opacity: ', $scope.imageOpacity);
 
         //$scope.imageClass = asset.value.visible ? 'show' : 'hide';
         $scope.imageUrl = imagePlayer.getImageUrl(asset, config.apiBase);
@@ -144,10 +151,7 @@ angular.module('sp.player.play', [
         }
         break;
       case 'light':
-        console.log('onValueUpdate light: colour=', asset.value.colou);
-
-        // Convert message to dmxpro format
-        // Send info to dmxpro... somehow!
+        lightPlayer.play(asset.value);
         break;
     }
   });

src/app/waiting/waiting.js

@@ -7,18 +7,15 @@ angular.module('sp.player.waiting', [
     url: '/waiting',
     templateUrl: 'waiting/waiting.tpl.html',
     controller: 'WaitingCtrl',
-
   });
 })
 
 // Waiting for palette
 .controller('WaitingCtrl', function($scope, socket, $location, user) {
-    console.log('WaitingCtrl ' +  user.username);
-
     $scope.user = user;
 
     socket.on('onRequestPalette', function(paletteId) {
-      console.log('requestPalette', paletteId);
+      console.log('onRequestPalette', paletteId);
       $location.path('/play/' + paletteId);
     });
 })

src/app/waiting/waiting.tpl.html

@@ -4,5 +4,5 @@ <h1>Connection: {{connectionStatus}}</h1>
 </div>
 -->
 
-<p style="color:white">Väntar på palett.. {{user}}</p>
+<p style="color:white">Väntar på palett...</p>
 

vendor/angular-bootstrap/.bower.json

@@ -3,22 +3,22 @@
     "name": "https://github.com/angular-ui/bootstrap/graphs/contributors"
   },
   "name": "angular-bootstrap",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "main": [
     "./ui-bootstrap-tpls.js"
   ],
   "dependencies": {
     "angular": ">=1"
   },
   "homepage": "https://github.com/angular-ui/bootstrap-bower",
-  "_release": "0.10.0",
+  "_release": "0.11.0",
   "_resolution": {
     "type": "version",
-    "tag": "0.10.0",
-    "commit": "f486d33d6f4c60d905ed0792eacbba2456a32b87"
+    "tag": "0.11.0",
+    "commit": "75b302f82c1a3b0647695a3dfeacab0a153ea8a0"
   },
   "_source": "git://github.com/angular-ui/bootstrap-bower.git",
-  "_target": "~0.10.0",
+  "_target": "~0.11.0",
   "_originalSource": "angular-bootstrap",
   "_direct": true
 }

vendor/angular-bootstrap/bower.json

@@ -3,7 +3,7 @@
         "name": "https://github.com/angular-ui/bootstrap/graphs/contributors"
     },
     "name": "angular-bootstrap",
-    "version": "0.10.0",
+    "version": "0.11.0",
     "main": ["./ui-bootstrap-tpls.js"],
     "dependencies": {
         "angular": ">=1"