Adding Profiles support to the XBMC default web interface.

4 files changed, 99 insertions, 7 deletions

diff --git a/addons/webinterface.default/addon.xml b/addons/webinterface.default/addon.xml
index c70f1850ab..f6476bece6 100644
--- a/addons/webinterface.default/addon.xml
+++ b/addons/webinterface.default/addon.xml
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <addon
   id="webinterface.default"
-  version="2.1.11"
+  version="2.2.0"
   name="Default"
   provider-name="Team XBMC">
   <requires>
diff --git a/addons/webinterface.default/css/core.css b/addons/webinterface.default/css/core.css
index df44c4ab81..c9814cfef9 100755
--- a/addons/webinterface.default/css/core.css
+++ b/addons/webinterface.default/css/core.css
@@ -75,7 +75,8 @@ body {
 	padding: 10px 10px 15px 10px;
 	}
 
-.floatableMovieCover {
+.floatableMovieCover,
+.floatableProfileThumb {
 	float: left;
 	width: 130px;
 	height: 200px;
@@ -84,7 +85,8 @@ body {
 
 .floatableAlbum:hover,
 .floatableTVShowCover:hover,
-.floatableMovieCover:hover {
+.floatableMovieCover:hover,
+.floatableProfileThumb:hover {
 	background: #aeaeae;
 	}
 
@@ -119,12 +121,14 @@ body {
 
 #libraryContainer .floatableAlbum,
 #movieLibraryContainer .floatableMovieCover,
+#profilesContainer .floatableProfileThumb,
 #tvshowLibraryContainer .floatableTVShowCover {
 	cursor: pointer;
 	}
 
 .floatableAlbum div.imgWrapper,
 .floatableMovieCover div.imgWrapper,
+.floatableProfileThumb div.imgWrapper,
 .floatableTVShowCover div.imgWrapper {
 	width: 130px;
 	height: 130px;
@@ -147,7 +151,9 @@ div.imgWrapper div.inner {
 	}
 
 .floatableMovieCover div.imgWrapper,
-.floatableMovieCover div.imgWrapper div.inner {
+.floatableMovieCover div.imgWrapper div.inner,
+.floatableProfileThumb div.imgWrapper,
+.floatableProfileThumb div.imgWrapper div.inner {
 	height: 190px;
 	}
 
@@ -176,12 +182,14 @@ div.imgWrapper div.inner {
 	width: 130px;
 	}
 
-.floatableMovieCover img {
+.floatableMovieCover img,
+.floatableProfileThumb img {
 	height: 180px;
 	}
 
 .floatableAlbum p.album,
-.floatableMovieCover p.album {
+.floatableMovieCover p.album,
+.floatableProfileThumb p.album {
 	font-size: 12px;
 	font-weight: 700;
 	color: #000;
@@ -194,7 +202,8 @@ div.imgWrapper div.inner {
 	}
 
 .floatableAlbum p.artist,
-.floatableMovieCover p.artist {
+.floatableMovieCover p.artist,
+.floatableProfileThumb p.artist {
 	font-size: 11px;
 	color: #777;
 	text-align: center;
diff --git a/addons/webinterface.default/index.html b/addons/webinterface.default/index.html
index 9b3a7be117..df3a5618ed 100755
--- a/addons/webinterface.default/index.html
+++ b/addons/webinterface.default/index.html
@@ -17,6 +17,7 @@
       <div id="commsErrorPanel" style="display: none;"></div>
       <div id="navigation">
         <ul>
+          <li id="profiles">Profiles</li>
           <li id="remoteControl">Remote</li>
           <li id="movieLibrary">Movies</li>
           <li id="tvshowLibrary">TV Shows</li>
diff --git a/addons/webinterface.default/js/MediaLibrary.js b/addons/webinterface.default/js/MediaLibrary.js
index 5731eb3e9a..916c418794 100755
--- a/addons/webinterface.default/js/MediaLibrary.js
+++ b/addons/webinterface.default/js/MediaLibrary.js
@@ -32,6 +32,7 @@ MediaLibrary.prototype = {
     $('#tvshowLibrary').click(jQuery.proxy(this.tvshowLibraryOpen, this));
     $('#pictureLibrary').click(jQuery.proxy(this.pictureLibraryOpen, this));
     $('#remoteControl').click(jQuery.proxy(this.remoteControlOpen, this));
+    $('#profiles').click(jQuery.proxy(this.profilesOpen, this));
     $('#overlay').click(jQuery.proxy(this.hideOverlay, this));
     $(window).resize(jQuery.proxy(this.updatePlayButtonLocation, this));
     $(document).on('keydown', jQuery.proxy(this.handleKeyPress, this));
@@ -43,6 +44,7 @@ MediaLibrary.prototype = {
     $('#tvshowLibrary').removeClass('selected');
     $('#remoteControl').removeClass('selected');
     $('#pictureLibrary').removeClass('selected');
+    $('#profilesLibrary').removeClass('selected');
     this.hideOverlay();
   },
   replaceAll: function (haystack, needle, thread) {
@@ -329,6 +331,10 @@ MediaLibrary.prototype = {
         className = 'floatableAlbum';
         code = '<p class="album" title="' + title + '">' + showTitle + '</p>';
         break;
+      case 'profile':
+        className = 'floatableProfileThumb';
+        code = '<p class="album" title="' + title + '">' + showTitle + '</p>';
+        break;
     }
     return floatableAlbum.addClass(className).html('<div class="imgWrapper"><div class="inner"><img src="' + path + '" alt="' + title + '" /></div></div>' + code);
   },
@@ -747,6 +753,15 @@ MediaLibrary.prototype = {
       }
     });
   },
+  loadProfile: function (event) {
+    return xbmc.rpc.request({
+      'context': this,
+      'method': 'Profiles.LoadProfile',
+        'params': {
+          'profile': event.data.profile.label
+        }
+    });
+  },
   movieLibraryOpen: function () {
     this.resetPage();
     $('#movieLibrary').addClass('selected');
@@ -891,6 +906,73 @@ MediaLibrary.prototype = {
       libraryContainer.trigger('scroll');
     }
   },
+  profilesOpen: function () {
+    this.resetPage();
+    $('#profiles').addClass('selected');
+    $('.contentContainer').hide();
+    var libraryContainer = $('#profilesContainer');
+    if (!libraryContainer || libraryContainer.length == 0) {
+      $('#spinner').show();
+      var currentProfile = "";
+      xbmc.rpc.request({
+          'method': 'Profiles.GetCurrentProfile',
+              'params': {
+                  'properties': [
+                      'lockmode'
+                   ]
+               },
+          'success': function (data) {
+              if (data)
+                  if (data.result)
+                      currentProfile = data.result.label;
+          }
+      });
+      xbmc.rpc.request({
+        'context': this,
+        'method': 'Profiles.GetProfiles',
+        'params': {
+          'limits': {
+            'start': 0
+          },
+          'properties': [
+            'thumbnail'
+          ],
+          'sort': {
+            'method': 'sorttitle',
+            'ignorearticle': true
+          }
+        },
+        'success': function (data) {
+          if (data && data.result && data.result.profiles) {
+            libraryContainer = $('<div>');
+            libraryContainer.attr('id', 'profilesContainer')
+                      .addClass('contentContainer');
+            $('#content').append(libraryContainer);
+          } else {
+            libraryContainer.html('');
+          }
+          $.each($(data.result.profiles), jQuery.proxy(function (i, item) {
+            var itemLabel = item.label;
+            if (currentProfile == itemLabel)
+            {
+              itemLabel = itemLabel + "*";
+            }
+            var floatableProfileThumb = this.generateThumb('profile', item.thumbnail, itemLabel);
+            floatableProfileThumb.bind('click', { profile: item }, jQuery.proxy(this.loadProfile, this));
+            libraryContainer.append(floatableProfileThumb);
+          }, this));
+          libraryContainer.append($('<div>').addClass('footerPadding'));
+          $('#spinner').hide();
+          libraryContainer.bind('scroll', { activeLibrary: libraryContainer }, jQuery.proxy(this.updateScrollEffects, this));
+          libraryContainer.trigger('scroll');
+          myScroll = new iScroll('profilesContainer');
+        }
+      });
+    } else {
+      libraryContainer.show();
+      libraryContainer.trigger('scroll');
+    }
+  },
   updateScrollEffects: function (event) {
     if (event.data.activeLibrary && $(event.data.activeLibrary).scrollTop() > 0) {
       $('#topScrollFade').fadeIn();