Merge pull request #60 from nextcloud/marionette-room-list

use backbone + marionette to render the list of rooms

bower.json

@@ -18,7 +18,7 @@
   ],
   "dependencies": {
     "backbone": "1.2.3",
-    "backbone.marionette": "^3.1.0",
+    "backbone.marionette": "3.0.0"
     "jquery": "^2.0"
   }
 }

js/app.js

@@ -26,20 +26,46 @@
 	OCA.SpreedMe = OCA.SpreedMe || {};
 
 	var App = Marionette.Application.extend({
+		/** @property {OCA.SpreedMe.Models.RoomCollection} _rooms  */
+		_rooms: null,
+		/** @property {OCA.SpreedMe.Views.RoomListView} _roomsView  */
+		_roomsView: null,
 		_registerPageEvents: function() {
+			var self = this;
+
 			$('#oca-spreedme-add-room').submit(function() {
 				return false;
 			});
 
 			// Create a new room
 			$('#oca-spreedme-add-room > button.icon-confirm').click(function() {
-				var roomname = $('#oca-spreedme-add-room > input[type="text"]').
-					val();
+				var roomname = $('#oca-spreedme-add-room > input[type="text"]').val();
 				if (roomname === "") {
 					return;
 				}
 
-				OCA.SpreedMe.Rooms.create(roomname);
+				self._rooms.create({
+					name: roomname
+				}, {
+					success: function(data) {
+						OCA.SpreedMe.Rooms.join(data.get('id'));
+					}, error: function(jqXHR, status, error) {
+						var message;
+						var editRoomname = $('#edit-roomname');
+						try {
+							message = JSON.parse(jqXHR.responseText).message;
+						} catch (e) {
+							// Ignore exception, received no/invalid JSON.
+						}
+						if (!message) {
+							message = jqXHR.responseText || error;
+						}
+						editRoomname.prop('title', message);
+						editRoomname.tooltip({placement: 'right', trigger: 'manual'});
+						editRoomname.tooltip('show');
+						editRoomname.addClass('error');
+					}
+				});
 			});
 
 			var videoHidden = false;
@@ -108,11 +134,17 @@
 				OCA.SpreedMe.Rooms.join();
 			}
 		},
+		_showRoomList: function() {
+			this._roomsView = new OCA.SpreedMe.Views.RoomListView({
+				el: '#app-navigation ul',
+				collection: this._rooms
+			});
+		},
 		_pollForRoomChanges: function() {
 			// Load the list of rooms all 10 seconds
-			OCA.SpreedMe.Rooms.list();
+			var self = this;
 			setInterval(function() {
-				OCA.SpreedMe.Rooms.list();
+				self.syncRooms();
 			}, 10000);
 		},
 		_startPing: function() {
@@ -122,11 +154,25 @@
 				OCA.SpreedMe.Rooms.ping();
 			}, 5000);
 		},
+		syncRooms: function() {
+			this._rooms.fetch();
+		},
 		onStart: function() {
 			console.log('Starting spreed …');
+			var self = this;
 
 			this._registerPageEvents();
 			this._onRegisterHashChange();
+
+			this._rooms = new OCA.SpreedMe.Models.RoomCollection();
+			this._showRoomList();
+			this._rooms.fetch({
+				success: function() {
+					$('#app-navigation').removeClass('icon-loading');
+					self._roomsView.render();
+				}
+			});
+
 			this._pollForRoomChanges();
 			this._startPing();
 		}

js/init.js

@@ -20,8 +20,8 @@
 
 (function(OCA, $) {
 	$(function() {
-		var app = new OCA.SpreedMe.App();
+		OCA.SpreedMe.app = new OCA.SpreedMe.App();
 		// Here we go!
-		app.start();
+		OCA.SpreedMe.app.start();
 	});
 })(OCA, $);

js/models/room.js

@@ -0,0 +1,37 @@
+/* global Backbone */
+
+/**
+ * @author Christoph Wurst <christoph@winzerhof-wurst.at>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+(function(OCA, Backbone) {
+	'use strict';
+
+	OCA.SpreedMe = OCA.SpreedMe || {};
+	OCA.SpreedMe.Models = OCA.SpreedMe.Models || {};
+
+	var Room = Backbone.Model.extend({
+		defaults: {
+			name: '',
+			count: 0
+		}
+	});
+
+	OCA.SpreedMe.Models.Room = Room;
+})(OCA, Backbone);

js/models/roomcollection.js

@@ -0,0 +1,35 @@
+/* global Backbone */
+
+/**
+ * @author Christoph Wurst <christoph@winzerhof-wurst.at>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+(function(OCA, Backbone) {
+
+	OCA.SpreedMe = OCA.SpreedMe || {};
+	OCA.SpreedMe.Models = OCA.SpreedMe.Models || {};
+
+	var RoomCollection = Backbone.Collection.extend({
+		model: OCA.SpreedMe.Models.Room,
+		comparator: 'name',
+		url: OC.generateUrl('/apps/spreed/api/room')
+	});
+
+	OCA.SpreedMe.Models.RoomCollection = RoomCollection;
+})(OCA, Backbone);

js/rooms.js

@@ -13,44 +13,6 @@ $(document).ready(function() {
 	var currentRoomId = 0;
 
 	OCA.SpreedMe.Rooms = {
-		create: function(roomName) {
-			$.post(
-				OC.generateUrl('/apps/spreed/api/room'),
-				{
-					roomName: roomName
-				},
-				function(data) {
-					var roomId = data.roomId;
-					OCA.SpreedMe.Rooms.join(roomId);
-				}
-			).fail(function(jqXHR, status, error) {
-				var message;
-				try {
-					message = JSON.parse(jqXHR.responseText).message;
-				} catch (e) {
-					// Ignore exception, received no/invalid JSON.
-				}
-				if (!message) {
-					message = jqXHR.responseText || error;
-				}
-				editRoomname.prop('title', message);
-				editRoomname.tooltip({placement: 'right', trigger: 'manual'});
-				editRoomname.tooltip('show');
-				editRoomname.addClass('error');
-			});
-		},
-		list: function() {
-			$.ajax({
-				url: OC.generateUrl('/apps/spreed/api/room'),
-				success: function(data) {
-					$('#app-navigation ul').html('');
-					data.forEach(function(element) {
-						$('#app-navigation ul').append('<li><a href="#'+escapeHTML(element['id'])+'">'+escapeHTML(element['name'])+' <span class="utils">' + escapeHTML(element['count']) + '</span></a></li>');
-					});
-					$('#app-navigation').removeClass('icon-loading');
-				}
-			});
-		},
 		join: function(roomId) {
 			$('#emptycontent').hide();
 			$('.videoView').addClass('hidden');

js/vendor/backbone.marionette/.bower.json

@@ -3,7 +3,7 @@
   "description": "The Backbone Framework",
   "homepage": "http://marionettejs.org",
   "main": "./lib/backbone.marionette.js",
-  "version": "3.1.0",
+  "version": "3.0.0",
   "keywords": [
     "backbone",
     "framework",
@@ -36,16 +36,15 @@
     "upgradeGuide.md"
   ],
   "dependencies": {
-    "backbone.radio": "^2.0.0"
+    "backbone.radio": "2.0.0-pre.1"
   },
-  "_release": "3.1.0",
+  "_release": "3.0.0",
   "_resolution": {
     "type": "version",
-    "tag": "v3.1.0",
-    "commit": "c1d41d73c60ad117b285fd7495b4c1801ca1873d"
+    "tag": "v3.0.0",
+    "commit": "d8bee8d66003f6935994f7f066235a8896f81d94"
   },
   "_source": "https://github.com/marionettejs/backbone.marionette.git",
-  "_target": "^3.1.0",
-  "_originalSource": "backbone.marionette",
-  "_direct": true
+  "_target": "3.0.0",
+  "_originalSource": "backbone.marionette"
 }

js/vendor/backbone.marionette/ISSUE_TEMPLATE.md

@@ -12,7 +12,6 @@ Tell us what you think should happen.
 ### Actual behavior
 
 If possible, please create a small demo that demonstrates the issue.
-You can fork https://jsfiddle.net/marionettejs/adhv48ky/ for quick demo setup.  
 Please refrain from giving code examples in altJS languages like CoffeeScript, etc. Marionette is written in plain-old JavaScript and is generally easier for all members in the community to read.
 
 ### Environment

js/vendor/backbone.marionette/bower.json

@@ -3,7 +3,7 @@
   "description": "The Backbone Framework",
   "homepage": "http://marionettejs.org",
   "main": "./lib/backbone.marionette.js",
-  "version": "3.1.0",
+  "version": "3.0.0",
   "keywords": [
     "backbone",
     "framework",
@@ -36,6 +36,6 @@
     "upgradeGuide.md"
   ],
   "dependencies": {
-    "backbone.radio": "^2.0.0"
+    "backbone.radio": "2.0.0-pre.1"
   }
 }

js/vendor/backbone.marionette/changelog.md

@@ -1,28 +1,3 @@
-### v3.1.0 [view commit logs](https://github.com/marionettejs/backbone.marionette/compare/v3.0.0...v3.1.0)
-
-#### General
-* Performance optimizations for `triggerMethod`, `mergeOptions` and other internal event handlers
-* Significant render and removal optimizations for CollectionView utilizing Backbone's `update` event
-
-#### Features
-* `Region.detachView` and `View.detachChildView` were added for removing a view from a region without destroying it. This is preferred to the now deprecated `preventDestroy` region show/empty option
-* `childViewEventPrefix: false` will disable auto-proxying of child events to the parent view
-* `Application` will now accept a region definition object literal as an instantiation option
-* Regions are now destroyed when removed from a View
-
-#### Fixes
-* Fixed an issue with Lodash 4 compatibility related to behavior events
-
-#### Deprecations
-* Region `empty`'s `preventDestroy` option was deprecated in favor of `detachView`
-* A region definition object literal's `selector` key was deprecated due to redundacy in favor of the existing key `el`
-
-#### Misc
-* Many documentation fixes for v3
-* Removed shouldReplace logic from `attachHtml` so overriding no longer breaks `replaceElement` functionality
-* Exposed `View.normalizeUIString` for external libraries
-* Improvements were made for Views initialized with existing DOM elements
-
 ### v3.0.0
 
 Version 3.0.0 of Marionette has arrived and contains many improvements over version

js/vendor/backbone.marionette/package.json

@@ -1,7 +1,7 @@
 {
   "name": "backbone.marionette",
   "description": "The Backbone Framework",
-  "version": "3.1.0",
+  "version": "3.0.0",
   "homepage": "https://github.com/marionettejs/backbone.marionette",
   "main": "lib/backbone.marionette.js",
   "keywords": [
@@ -45,11 +45,10 @@
     "underscore": "~1.8.3"
   },
   "devDependencies": {
-    "babel-core": "6.17.0",
+    "babel-core": "6.7.0",
     "babel-eslint": "6.0.4",
-    "babel-plugin-transform-regenerator": "6.16.1",
     "babel-polyfill": "6.6.1",
-    "babel-preset-es2015": "6.16.0",
+    "babel-preset-es2015": "6.3.13",
     "babel-preset-es2015-rollup": "1.1.1",
     "babel-register": "6.4.3",
     "backbone": "1.2.1 - 1.3.x",

js/vendor/backbone.radio/.bower.json

@@ -1,6 +1,6 @@
 {
   "name": "backbone.radio",
-  "version": "2.0.0",
+  "version": "2.0.0-pre.1",
   "homepage": "https://github.com/marionettejs/backbone.radio",
   "authors": [
     "Jmeas <jellyes2@gmail.com>"
@@ -26,13 +26,13 @@
     "test",
     "tests"
   ],
-  "_release": "2.0.0",
+  "_release": "2.0.0-pre.1",
   "_resolution": {
     "type": "version",
-    "tag": "v2.0.0",
-    "commit": "8d3c7deec61205daddbd49ce86dbac27afb1aaad"
+    "tag": "v2.0.0-pre.1",
+    "commit": "ae556624bd509fd96ab67fb92599655fc83b1ec8"
   },
   "_source": "https://github.com/marionettejs/backbone.radio.git",
-  "_target": "^2.0.0",
+  "_target": "2.0.0-pre.1",
   "_originalSource": "backbone.radio"
 }

js/vendor/backbone.radio/CHANGELOG.md

@@ -1,20 +1,3 @@
-### [2.0.0](https://github.com/marionettejs/backbone.radio/releases/tag/2.0.0)
-
-- Updated Backbone and Underscore version ranges.
-- Moved Backbone and Underscore to peerDependencies.
-
-### [2.0.0-pre.2](https://github.com/marionettejs/backbone.radio/releases/tag/2.0.0-pre.2)
-
-- Updated Backbone and Underscore version ranges.
-
-### [2.0.0-pre.1](https://github.com/marionettejs/backbone.radio/releases/tag/2.0.0-pre.1)
-
-- Moved Backbone and Underscore to peerDependencies.
-
-### [1.0.5](https://github.com/marionettejs/backbone.radio/releases/tag/1.0.5)
-
-- Updated Backbone dep to allow v1.3.3
-
 ### [1.0.4](https://github.com/marionettejs/backbone.radio/releases/tag/1.0.4)
 
 - **Bug fix**: The UMD generated from rollup was setting `global` to `undefined`.

js/vendor/backbone.radio/bower.json

@@ -1,6 +1,6 @@
 {
   "name": "backbone.radio",
-  "version": "2.0.0",
+  "version": "1.0.4",
   "homepage": "https://github.com/marionettejs/backbone.radio",
   "authors": [
     "Jmeas <jellyes2@gmail.com>"

js/vendor/backbone.radio/build/backbone.radio.js

@@ -1,4 +1,4 @@
-// Backbone.Radio v2.0.0
+// Backbone.Radio v2.0.0-pre.1
 
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('underscore'), require('backbone')) :
@@ -9,17 +9,19 @@
   _ = 'default' in _ ? _['default'] : _;
   Backbone = 'default' in Backbone ? Backbone['default'] : Backbone;
 
-  var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) {
+  var babelHelpers = {};
+  babelHelpers.typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) {
     return typeof obj;
   } : function (obj) {
     return obj && typeof Symbol === "function" && obj.constructor === Symbol ? "symbol" : typeof obj;
   };
+  babelHelpers;
 
   var previousRadio = Backbone.Radio;
 
   var Radio = Backbone.Radio = {};
 
-  Radio.VERSION = '2.0.0';
+  Radio.VERSION = '2.0.0-pre.1';
 
   // This allows you to run multiple instances of Radio on the same
   // webapp. After loading the new version, call `noConflict()` to
@@ -63,7 +65,7 @@
     var results = {};
 
     // Handle event maps.
-    if ((typeof name === 'undefined' ? 'undefined' : _typeof(name)) === 'object') {
+    if ((typeof name === 'undefined' ? 'undefined' : babelHelpers.typeof(name)) === 'object') {
       for (var key in name) {
         var result = obj[action].apply(obj, [key, name[key]].concat(rest));
         eventSplitter.test(key) ? _.extend(results, result) : results[key] = result;
@@ -145,7 +147,7 @@
   // This is to produce an identical function in both tuneIn and tuneOut,
   // so that Backbone.Events unregisters it.
   function _partial(channelName) {
-    return _logs[channelName] || (_logs[channelName] = _.bind(Radio.log, Radio, channelName));
+    return _logs[channelName] || (_logs[channelName] = _.partial(Radio.log, channelName));
   }
 
   _.extend(Radio, {
@@ -155,7 +157,7 @@
       if (typeof console === 'undefined') {
         return;
       }
-      var args = _.toArray(arguments).slice(2);
+      var args = _.drop(arguments, 2);
       console.log('[' + channelName + '] "' + eventName + '"', args);
     },
 
@@ -196,7 +198,7 @@
 
     // Make a request
     request: function request(name) {
-      var args = _.toArray(arguments).slice(1);
+      var args = _.rest(arguments);
       var results = Radio._eventsApi(this, 'request', name, args);
       if (results) {
         return results;
@@ -330,7 +332,7 @@
   _.each(systems, function (system) {
     _.each(system, function (method, methodName) {
       Radio[methodName] = function (channelName) {
-        args = _.toArray(arguments).slice(1);
+        args = _.rest(arguments);
         channel = this.channel(channelName);
         return channel[methodName].apply(channel, args);
       };
@@ -339,9 +341,7 @@
 
   Radio.reset = function (channelName) {
     var channels = !channelName ? this._channels : [this._channels[channelName]];
-    _.each(channels, function (channel) {
-      channel.reset();
-    });
+    _.invoke(channels, 'reset');
   };
 
   return Radio;

js/vendor/backbone.radio/build/backbone.radio.min.js

@@ -1,3 +1,3 @@
-// Backbone.Radio v2.0.0
-!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n(require("underscore"),require("backbone")):"function"==typeof define&&define.amd?define(["underscore","backbone"],n):(e.Backbone=e.Backbone||{},e.Backbone.Radio=n(e._,e.Backbone))}(this,function(e,n){"use strict";function t(e,n,t,r){var o=e[n];if(!(t&&t!==o.callback&&t!==o.callback._callback||r&&r!==o.context))return delete e[n],!0}function r(n,r,o,i){n||(n={});for(var s=r?[r]:e.keys(n),u=!1,c=0,a=s.length;c<a;c++)r=s[c],n[r]&&t(n,r,o,i)&&(u=!0);return u}function o(n){return l[n]||(l[n]=e.bind(c.log,c,n))}function i(n){return e.isFunction(n)?n:function(){return n}}e="default"in e?e["default"]:e,n="default"in n?n["default"]:n;var s="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol?"symbol":typeof e},u=n.Radio,c=n.Radio={};c.VERSION="2.0.0",c.noConflict=function(){return n.Radio=u,this},c.DEBUG=!1,c._debugText=function(e,n,t){return e+(t?" on the "+t+" channel":"")+': "'+n+'"'},c.debugLog=function(e,n,t){c.DEBUG&&console&&console.warn&&console.warn(c._debugText(e,n,t))};var a=/\s+/;c._eventsApi=function(n,t,r,o){if(!r)return!1;var i={};if("object"===("undefined"==typeof r?"undefined":s(r))){for(var u in r){var c=n[t].apply(n,[u,r[u]].concat(o));a.test(u)?e.extend(i,c):i[u]=c}return i}if(a.test(r)){for(var l=r.split(a),f=0,h=l.length;f<h;f++)i[l[f]]=n[t].apply(n,[l[f]].concat(o));return i}return!1},c._callHandler=function(e,n,t){var r=t[0],o=t[1],i=t[2];switch(t.length){case 0:return e.call(n);case 1:return e.call(n,r);case 2:return e.call(n,r,o);case 3:return e.call(n,r,o,i);default:return e.apply(n,t)}};var l={};e.extend(c,{log:function(n,t){if("undefined"!=typeof console){var r=e.toArray(arguments).slice(2);console.log("["+n+'] "'+t+'"',r)}},tuneIn:function(e){var n=c.channel(e);return n._tunedIn=!0,n.on("all",o(e)),this},tuneOut:function(e){var n=c.channel(e);return n._tunedIn=!1,n.off("all",o(e)),delete l[e],this}}),c.Requests={request:function(n){var t=e.toArray(arguments).slice(1),r=c._eventsApi(this,"request",n,t);if(r)return r;var o=this.channelName,i=this._requests;if(o&&this._tunedIn&&c.log.apply(this,[o,n].concat(t)),i&&(i[n]||i["default"])){var s=i[n]||i["default"];return t=i[n]?t:arguments,c._callHandler(s.callback,s.context,t)}c.debugLog("An unhandled request was fired",n,o)},reply:function(e,n,t){return c._eventsApi(this,"reply",e,[n,t])?this:(this._requests||(this._requests={}),this._requests[e]&&c.debugLog("A request was overwritten",e,this.channelName),this._requests[e]={callback:i(n),context:t||this},this)},replyOnce:function(n,t,r){if(c._eventsApi(this,"replyOnce",n,[t,r]))return this;var o=this,s=e.once(function(){return o.stopReplying(n),i(t).apply(this,arguments)});return this.reply(n,s,r)},stopReplying:function(e,n,t){return c._eventsApi(this,"stopReplying",e)?this:(e||n||t?r(this._requests,e,n,t)||c.debugLog("Attempted to remove the unregistered request",e,this.channelName):delete this._requests,this)}},c._channels={},c.channel=function(e){if(!e)throw new Error("You must provide a name for the channel.");return c._channels[e]?c._channels[e]:c._channels[e]=new c.Channel(e)},c.Channel=function(e){this.channelName=e},e.extend(c.Channel.prototype,n.Events,c.Requests,{reset:function(){return this.off(),this.stopListening(),this.stopReplying(),this}});var f,h,d=[n.Events,c.Requests];return e.each(d,function(n){e.each(n,function(n,t){c[t]=function(n){return h=e.toArray(arguments).slice(1),f=this.channel(n),f[t].apply(f,h)}})}),c.reset=function(n){var t=n?[this._channels[n]]:this._channels;e.each(t,function(e){e.reset()})},c});
+// Backbone.Radio v2.0.0-pre.1
+!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n(require("underscore"),require("backbone")):"function"==typeof define&&define.amd?define(["underscore","backbone"],n):(e.Backbone=e.Backbone||{},e.Backbone.Radio=n(e._,e.Backbone))}(this,function(e,n){"use strict";function t(e,n,t,r){var o=e[n];return t&&t!==o.callback&&t!==o.callback._callback||r&&r!==o.context?void 0:(delete e[n],!0)}function r(n,r,o,i){n||(n={});for(var s=r?[r]:e.keys(n),u=!1,a=0,c=s.length;c>a;a++)r=s[a],n[r]&&t(n,r,o,i)&&(u=!0);return u}function o(n){return l[n]||(l[n]=e.partial(a.log,n))}function i(n){return e.isFunction(n)?n:function(){return n}}e="default"in e?e["default"]:e,n="default"in n?n["default"]:n;var s={};s["typeof"]="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol?"symbol":typeof e};var u=n.Radio,a=n.Radio={};a.VERSION="2.0.0-pre.1",a.noConflict=function(){return n.Radio=u,this},a.DEBUG=!1,a._debugText=function(e,n,t){return e+(t?" on the "+t+" channel":"")+': "'+n+'"'},a.debugLog=function(e,n,t){a.DEBUG&&console&&console.warn&&console.warn(a._debugText(e,n,t))};var c=/\s+/;a._eventsApi=function(n,t,r,o){if(!r)return!1;var i={};if("object"===("undefined"==typeof r?"undefined":s["typeof"](r))){for(var u in r){var a=n[t].apply(n,[u,r[u]].concat(o));c.test(u)?e.extend(i,a):i[u]=a}return i}if(c.test(r)){for(var l=r.split(c),f=0,h=l.length;h>f;f++)i[l[f]]=n[t].apply(n,[l[f]].concat(o));return i}return!1},a._callHandler=function(e,n,t){var r=t[0],o=t[1],i=t[2];switch(t.length){case 0:return e.call(n);case 1:return e.call(n,r);case 2:return e.call(n,r,o);case 3:return e.call(n,r,o,i);default:return e.apply(n,t)}};var l={};e.extend(a,{log:function(n,t){if("undefined"!=typeof console){var r=e.drop(arguments,2);console.log("["+n+'] "'+t+'"',r)}},tuneIn:function(e){var n=a.channel(e);return n._tunedIn=!0,n.on("all",o(e)),this},tuneOut:function(e){var n=a.channel(e);return n._tunedIn=!1,n.off("all",o(e)),delete l[e],this}}),a.Requests={request:function(n){var t=e.rest(arguments),r=a._eventsApi(this,"request",n,t);if(r)return r;var o=this.channelName,i=this._requests;if(o&&this._tunedIn&&a.log.apply(this,[o,n].concat(t)),i&&(i[n]||i["default"])){var s=i[n]||i["default"];return t=i[n]?t:arguments,a._callHandler(s.callback,s.context,t)}a.debugLog("An unhandled request was fired",n,o)},reply:function(e,n,t){return a._eventsApi(this,"reply",e,[n,t])?this:(this._requests||(this._requests={}),this._requests[e]&&a.debugLog("A request was overwritten",e,this.channelName),this._requests[e]={callback:i(n),context:t||this},this)},replyOnce:function(n,t,r){if(a._eventsApi(this,"replyOnce",n,[t,r]))return this;var o=this,s=e.once(function(){return o.stopReplying(n),i(t).apply(this,arguments)});return this.reply(n,s,r)},stopReplying:function(e,n,t){return a._eventsApi(this,"stopReplying",e)?this:(e||n||t?r(this._requests,e,n,t)||a.debugLog("Attempted to remove the unregistered request",e,this.channelName):delete this._requests,this)}},a._channels={},a.channel=function(e){if(!e)throw new Error("You must provide a name for the channel.");return a._channels[e]?a._channels[e]:a._channels[e]=new a.Channel(e)},a.Channel=function(e){this.channelName=e},e.extend(a.Channel.prototype,n.Events,a.Requests,{reset:function(){return this.off(),this.stopListening(),this.stopReplying(),this}});var f,h,p=[n.Events,a.Requests];return e.each(p,function(n){e.each(n,function(n,t){a[t]=function(n){return h=e.rest(arguments),f=this.channel(n),f[t].apply(f,h)}})}),a.reset=function(n){var t=n?[this._channels[n]]:this._channels;e.invoke(t,"reset")},a});
 //# sourceMappingURL=backbone.radio.min.js.map

js/vendor/backbone.radio/gulpfile.babel.js

@@ -106,8 +106,8 @@ function build(done) {
       .pipe($.rename(exportFileName + '.min.js'))
       .pipe($.sourcemaps.init({ loadMaps: true }))
       .pipe($.uglify())
-      .pipe($.header(banner))
       .pipe($.sourcemaps.write('./'))
+      .pipe($.header(banner))
       .pipe(gulp.dest(destinationFolder))
       .on('end', done);
   }).catch(console.error);

js/vendor/backbone.radio/package.json

@@ -2,7 +2,7 @@
   "name": "backbone.radio",
   "description": "Messaging patterns for Backbone applications.",
   "homepage": "https://github.com/marionettejs/backbone.radio",
-  "version": "2.0.0",
+  "version": "2.0.0-pre.1",
   "main": "build/backbone.radio.js",
   "keywords": [
     "backbone",
@@ -41,48 +41,47 @@
   },
   "github": "https://github.com/marionettejs/backbone.radio",
   "peerDependencies": {
-    "backbone": "^1.3.3",
-    "underscore": "^1.8.3"
+    "backbone": "1.0.0 - 1.3.2",
+    "underscore": "1.4.4 - 1.8.3"
   },
   "devDependencies": {
-    "babel-core": "6.7.0",
-    "babel-eslint": "6.0.4",
-    "babel-loader": "6.2.0",
-    "babel-polyfill": "6.6.1",
-    "babel-preset-es2015": "6.3.13",
-    "babel-preset-es2015-rollup": "1.1.1",
-    "babel-register": "6.4.3",
-    "backbone": ">=1.3.3 <1.4.0",
-    "chai": "3.4.1",
-    "del": "2.2.0",
-    "eslint": "3.2.2",
-    "glob": "6.0.3",
-    "gulp": "3.9.0",
-    "gulp-eslint": "3.0.1",
-    "gulp-file": "0.2.0",
-    "gulp-filter": "3.0.0",
-    "gulp-header": "1.7.1",
-    "gulp-istanbul": "0.10.3",
-    "gulp-jscs": "3.0.0",
-    "gulp-livereload": "3.8.1",
-    "gulp-load-plugins": "1.1.0",
-    "gulp-mocha": "2.2.0",
-    "gulp-plumber": "1.0.1",
-    "gulp-rename": "1.2.2",
-    "gulp-sourcemaps": "1.6.0",
-    "gulp-uglify": "1.5.1",
-    "gulp-util": "3.0.7",
-    "isparta": "4.0.0",
-    "json-loader": "0.5.3",
-    "mkdirp": "0.5.1",
-    "mocha": "2.3.4",
-    "rollup": "0.25.4",
-    "rollup-plugin-babel": "2.4.0",
-    "sinon": "1.17.2",
-    "sinon-chai": "2.8.0",
-    "underscore": "1.8.3",
-    "webpack": "1.12.9",
-    "webpack-stream": "3.1.0"
+    "babel-core": "^6.3.26",
+    "babel-eslint": "^4.1.6",
+    "babel-loader": "^6.2.0",
+    "babel-polyfill": "^6.3.14",
+    "babel-preset-es2015": "^6.3.13",
+    "babel-preset-es2015-rollup": "^1.1.1",
+    "babel-register": "^6.3.13",
+    "backbone": "1.0.0 - 1.3.2",
+    "chai": "^3.4.1",
+    "del": "^2.2.0",
+    "glob": "^6.0.3",
+    "gulp": "^3.9.0",
+    "gulp-eslint": "^1.1.1",
+    "gulp-file": "^0.2.0",
+    "gulp-filter": "^3.0.0",
+    "gulp-header": "^1.7.1",
+    "gulp-istanbul": "^0.10.3",
+    "gulp-jscs": "^3.0.0",
+    "gulp-livereload": "^3.8.1",
+    "gulp-load-plugins": "^1.1.0",
+    "gulp-mocha": "^2.2.0",
+    "gulp-plumber": "^1.0.1",
+    "gulp-rename": "^1.2.2",
+    "gulp-sourcemaps": "^1.6.0",
+    "gulp-uglify": "^1.5.1",
+    "gulp-util": "^3.0.7",
+    "isparta": "^4.0.0",
+    "json-loader": "^0.5.3",
+    "mkdirp": "^0.5.1",
+    "mocha": "^2.3.4",
+    "rollup": "^0.25.4",
+    "rollup-plugin-babel": "^2.4.0",
+    "sinon": "^1.17.2",
+    "sinon-chai": "^2.8.0",
+    "underscore": "1.4.4 - 1.8.3",
+    "webpack": "^1.12.9",
+    "webpack-stream": "^3.1.0"
   },
   "babelBoilerplateOptions": {
     "entryFileName": "backbone.radio",

js/vendor/backbone.radio/src/backbone.radio.js

@@ -128,7 +128,7 @@ var _logs = {};
 // This is to produce an identical function in both tuneIn and tuneOut,
 // so that Backbone.Events unregisters it.
 function _partial(channelName) {
-  return _logs[channelName] || (_logs[channelName] = _.bind(Radio.log, Radio, channelName));
+  return _logs[channelName] || (_logs[channelName] = _.partial(Radio.log, channelName));
 }
 
 _.extend(Radio, {
@@ -136,7 +136,7 @@ _.extend(Radio, {
   // Log information about the channel and event
   log: function(channelName, eventName) {
     if (typeof console === 'undefined') { return; }
-    var args = _.toArray(arguments).slice(2);
+    var args = _.drop(arguments, 2);
     console.log('[' + channelName + '] "' + eventName + '"', args);
   },
 
@@ -175,7 +175,7 @@ Radio.Requests = {
 
   // Make a request
   request: function(name) {
-    var args = _.toArray(arguments).slice(1);
+    var args = _.rest(arguments);
     var results = Radio._eventsApi(this, 'request', name, args);
     if (results) {
       return results;
@@ -308,7 +308,7 @@ var channel, args, systems = [Backbone.Events, Radio.Requests];
 _.each(systems, function(system) {
   _.each(system, function(method, methodName) {
     Radio[methodName] = function(channelName) {
-      args = _.toArray(arguments).slice(1);
+      args = _.rest(arguments);
       channel = this.channel(channelName);
       return channel[methodName].apply(channel, args);
     };
@@ -317,7 +317,7 @@ _.each(systems, function(system) {
 
 Radio.reset = function(channelName) {
   var channels = !channelName ? this._channels : [this._channels[channelName]];
-  _.each(channels, function(channel) { channel.reset();});
+  _.invoke(channels, 'reset');
 };
 
 export default Radio;

js/views/roomlistview.js

@@ -0,0 +1,46 @@
+/* global Marionette, Handlebars */
+
+/**
+ * @author Christoph Wurst <christoph@winzerhof-wurst.at>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+(function(OCA, Marionette, Handlebars) {
+	'use strict';
+
+	OCA.SpreedMe = OCA.SpreedMe || {};
+	OCA.SpreedMe.Views = OCA.SpreedMe.Views || {};
+
+	var ITEM_TEMPLATE = '<a href="#{{id}}">{{name}} <span class="utils">{{count}}</span></a>';
+
+	var RoomItenView = Marionette.View.extend({
+		tagName: 'li',
+		modelEvents: {
+			change: 'render'
+		},
+		template: Handlebars.compile(ITEM_TEMPLATE)
+	});
+
+	var RoomListView = Marionette.CollectionView.extend({
+		tagName: 'ul',
+		childView: RoomItenView
+	});
+
+	OCA.SpreedMe.Views.RoomListView = RoomListView;
+
+})(OCA, Marionette, Handlebars);

js/webrtc.js

@@ -103,7 +103,7 @@ $(document).ready(function() {
 		$('#app-content').removeClass('icon-loading');
 		$('.videoView').removeClass('hidden');
 		openEventSource();
-		OCA.SpreedMe.Rooms.list();
+		OCA.SpreedMe.app.syncRooms();
 	});
 
 	webrtc.on('videoAdded', function (video, peer) {

lib/Controller/ApiController.php

@@ -129,15 +129,15 @@ class ApiController extends Controller {
 	/**
 	 * @NoAdminRequired
 	 *
-	 * @param string $roomName
+	 * @param string $name
 	 * @return JSONResponse
 	 */
-	public function createRoom($roomName) {
+	public function createRoom($name) {
 		$query = $this->dbConnection->getQueryBuilder();
 		$query->insert('spreedme_rooms')
 			->values(
 				[
-					'name' => $query->createNamedParameter($roomName),
+					'name' => $query->createNamedParameter($name),
 				]
 			);
 
@@ -151,11 +151,9 @@ class ApiController extends Controller {
 			);
 		}
 
-		return new JSONResponse(
-			[
-				'roomId' => $query->getLastInsertId(),
-			]
-		);
+		return new JSONResponse([
+				'id' => $query->getLastInsertId(),
+		]);
 	}
 
 	/**

templates/index.php

@@ -8,6 +8,9 @@ script(
 	[
 		'vendor/backbone.radio/build/backbone.radio.min',
 		'vendor/backbone.marionette/lib/backbone.marionette.min',
+		'models/room',
+		'models/roomcollection',
+		'views/roomlistview',
 		'simplewebrtc',
 		'xhrconnection',
 		'rooms',