Merge branch 'master' of https://github.com/MediaBrowser/MediaBrowser

ApiClient.js

@@ -95,6 +95,10 @@ MediaBrowser.ApiClient = function ($, navigator, JSON, WebSocket, setTimeout) {
             return name;
         }());
 
+        function encodeName(name) {
+            return encodeURIComponent(name).replace("'", '%27');
+        }
+
         /**
          * Wraps around jQuery ajax methods to add additional info to the request.
          */
@@ -867,7 +871,7 @@ MediaBrowser.ApiClient = function ($, navigator, JSON, WebSocket, setTimeout) {
                 throw new Error("null name");
             }
 
-            var url = self.getUrl("Studios/" + name);
+            var url = self.getUrl("Studios/" + encodeName(name));
 
             return self.ajax({
                 type: "GET",
@@ -885,7 +889,7 @@ MediaBrowser.ApiClient = function ($, navigator, JSON, WebSocket, setTimeout) {
                 throw new Error("null name");
             }
 
-            var url = self.getUrl("Genres/" + name);
+            var url = self.getUrl("Genres/" + encodeName(name));
 
             return self.ajax({
                 type: "GET",
@@ -921,7 +925,7 @@ MediaBrowser.ApiClient = function ($, navigator, JSON, WebSocket, setTimeout) {
                 throw new Error("null name");
             }
 
-            var url = self.getUrl("Persons/" + name);
+            var url = self.getUrl("Persons/" + encodeName(name));
 
             return self.ajax({
                 type: "GET",
@@ -1047,7 +1051,7 @@ MediaBrowser.ApiClient = function ($, navigator, JSON, WebSocket, setTimeout) {
 
             };
 
-            var url = "Persons/" + name + "/Images/" + options.type;
+            var url = "Persons/" + encodeName(name) + "/Images/" + options.type;
 
             if (options.index != null) {
                 url += "/" + options.index;
@@ -1117,7 +1121,7 @@ MediaBrowser.ApiClient = function ($, navigator, JSON, WebSocket, setTimeout) {
 
             };
 
-            var url = "Genres/" + name + "/Images/" + options.type;
+            var url = "Genres/" + encodeName(name) + "/Images/" + options.type;
 
             if (options.index != null) {
                 url += "/" + options.index;
@@ -1131,7 +1135,7 @@ MediaBrowser.ApiClient = function ($, navigator, JSON, WebSocket, setTimeout) {
         };
 
         /**
-         * Constructs a url for a genre image
+         * Constructs a url for a studio image
          * @param {String} name
          * @param {Object} options
          * Options supports the following properties:
@@ -1152,7 +1156,7 @@ MediaBrowser.ApiClient = function ($, navigator, JSON, WebSocket, setTimeout) {
 
             };
 
-            var url = "Studios/" + name + "/Images/" + options.type;
+            var url = "Studios/" + encodeName(name) + "/Images/" + options.type;
 
             if (options.index != null) {
                 url += "/" + options.index;
@@ -1739,7 +1743,7 @@ MediaBrowser.ApiClient = function ($, navigator, JSON, WebSocket, setTimeout) {
                 throw new Error("null name");
             }
 
-            var url = self.getUrl("Users/" + userId + "/ItemsByName/Favorites/" + name);
+            var url = self.getUrl("Users/" + userId + "/ItemsByName/Favorites/" + encodeName(name));
 
             var method = isFavorite ? "POST" : "DELETE";
 
@@ -1766,7 +1770,7 @@ MediaBrowser.ApiClient = function ($, navigator, JSON, WebSocket, setTimeout) {
                 throw new Error("null name");
             }
 
-            var url = self.getUrl("Users/" + userId + "/ItemsByName/" + name + "/Rating", {
+            var url = self.getUrl("Users/" + userId + "/ItemsByName/" + encodeName(name) + "/Rating", {
                 likes: likes
             });
 
@@ -1791,7 +1795,7 @@ MediaBrowser.ApiClient = function ($, navigator, JSON, WebSocket, setTimeout) {
                 throw new Error("null name");
             }
 
-            var url = self.getUrl("Users/" + userId + "/ItemsByName/" + name + "/Rating");
+            var url = self.getUrl("Users/" + userId + "/ItemsByName/" + encodeName(name) + "/Rating");
 
             return self.ajax({
                 type: "DELETE",
@@ -1815,7 +1819,7 @@ MediaBrowser.ApiClient = function ($, navigator, JSON, WebSocket, setTimeout) {
                 throw new Error("null name");
             }
 
-            var url = self.getUrl("Users/" + userId + "/ItemsByName/" + name + "/UserData");
+            var url = self.getUrl("Users/" + userId + "/ItemsByName/" + encodeName(name) + "/UserData");
 
             return self.ajax({
                 type: "GET",

dashboard-ui/css/librarybrowser.css

@@ -20,7 +20,7 @@
 }
 
 .libraryPage, .itemListContent {
-    background: #494949 url(images/bgflip.png) repeat-x!important;
+    background: #262626!important;
     background-attachment: fixed!important;
 }
 
@@ -28,8 +28,8 @@
         color: #fff;
     }
 
-.listPage {
+.type-home {
-    background: #262626!important;
+    background: #494949 url(images/bgflip.png) repeat-x!important;
 }
 
 .listHeader {

dashboard-ui/itemlist.html

@@ -7,100 +7,8 @@
     <div id="itemListPage" data-role="page" class="page libraryPage" data-theme="a">
         <div data-role="content" class="itemListContent">
 
-
+            <h1 id="itemName" class="listHeader" style="margin-top: .5em;"></h1>
-            <h1 class="listHeader" style="margin-top: 0;">
+            <div id="items"></div>
-                <span id="itemName" style="margin-right: 30px;"></span>
-            </h1>
-            <div style="float: right; margin-top: -60px;">
-                <button id="btnOptions" type="button" data-mini="true" data-inline="true" data-icon="grid" onclick="$('#optionsPanel', $.mobile.activePage).panel( 'toggle' );">View</button>
-            </div>
-
-            <div id="listItems" style="clear: both;"></div>
-
-        </div>
-        <div data-role="panel" id="optionsPanel" data-position="right" data-display="overlay" data-theme="b" data-position-fixed="true">
-
-            <div data-role="controlgroup" data-type="horizontal">
-                <a id="btnViewPanel" href="#" data-role="button" data-theme="a" data-mini="true" onclick="ItemListPage.showViewPanel();">View</a>
-                <a id="btnSortPanel" href="#" data-role="button" data-theme="c" data-mini="true" onclick="ItemListPage.showSortPanel();">Sort</a>
-                <a id="btnFilterPanel" href="#" data-role="button" data-theme="c" data-mini="true" onclick="ItemListPage.showFilterPanel();">Filter</a>
-                <a id="btnIndexPanel" href="#" data-role="button" data-theme="c" data-mini="true" onclick="ItemListPage.showIndexPanel();">Index</a>
-            </div>
-
-            <form>
-                <div id="viewpanel" style="display: none;"></div>
-                <div id="sortpanel" style="display: none;">
-                    <fieldset data-role="controlgroup">
-                        <legend>
-                            <h3>Sort By:</h3>
-                        </legend>
-
-                        <input class="radioSortBy" data-theme="c" type="radio" name="radioSortBy" id="radioSortName" value="on" checked="checked">
-                        <label for="radioSortName" onclick="ItemListPage.sortBy('SortName');">Name</label>
-
-                        <input class="radioSortBy" data-theme="c" type="radio" name="radioSortBy" id="radioCommunityRating" value="other">
-                        <label for="radioCommunityRating" onclick="ItemListPage.sortBy('CommunityRating');">Community Rating</label>
-
-                        <input class="radioSortBy" data-theme="c" type="radio" name="radioSortBy" id="radioDateCreated" value="other">
-                        <label for="radioDateCreated" onclick="ItemListPage.sortBy('DateCreated');">Date Added</label>
-
-                        <input class="radioSortBy" data-theme="c" type="radio" name="radioSortBy" id="radioDatePlayed" value="other">
-                        <label for="radioDatePlayed" onclick="ItemListPage.sortBy('DatePlayed');">Date Played</label>
-
-                        <input class="radioSortBy" data-theme="c" type="radio" name="radioSortBy" id="radioPremiereDate" value="other">
-                        <label for="radioPremiereDate" onclick="ItemListPage.sortBy('PremiereDate');">Date Released</label>
-
-                        <input class="radioSortBy" data-theme="c" type="radio" name="radioSortBy" id="radioPlayCount" value="off">
-                        <label for="radioPlayCount" onclick="ItemListPage.sortBy('PlayCount');">Play Count</label>
-
-                        <input class="radioSortBy" data-theme="c" type="radio" name="radioSortBy" id="radioRandom" value="off">
-                        <label for="radioRandom" onclick="ItemListPage.sortBy('Random');">Random</label>
-
-                        <input class="radioSortBy" data-theme="c" type="radio" name="radioSortBy" id="radioRuntime" value="off">
-                        <label for="radioRuntime" onclick="ItemListPage.sortBy('Runtime');">Runtime</label>
-                    </fieldset>
-
-                    <fieldset data-role="controlgroup">
-                        <legend>
-                            <h3>Sort Order:</h3>
-                        </legend>
-
-                        <input class="radioSortOrder" data-theme="c" type="radio" name="radioSortOrder" id="radioAscending" value="on" checked="checked">
-                        <label for="radioAscending" onclick="ItemListPage.sortOrder('Ascending');">Ascending</label>
-
-                        <input class="radioSortOrder" data-theme="c" type="radio" name="radioSortOrder" id="radioDescending" value="other">
-                        <label for="radioDescending" onclick="ItemListPage.sortOrder('Descending');">Descending</label>
-                    </fieldset>
-                </div>
-                <div id="filterpanel" style="display: none;">
-
-                    <fieldset data-role="controlgroup">
-                        <legend>
-                            <h3>Filters:</h3>
-                        </legend>
-                        <input type="checkbox" name="chkPlayed" id="chkPlayed" onchange="ItemListPage.filter('IsPlayed', this.checked);" data-theme="c">
-                        <label for="chkPlayed">Played</label>
-
-                        <input type="checkbox" name="chkUnplayed" id="chkUnplayed" onchange="ItemListPage.filter('IsUnplayed', this.checked);" data-theme="c">
-                        <label for="chkUnplayed">Unplayed</label>
-
-                        <input type="checkbox" name="chkIsFavorite" id="chkIsFavorite" onchange="ItemListPage.filter('IsFavorite', this.checked);" data-theme="c">
-                        <label for="chkIsFavorite">Favorites</label>
-
-                        <input type="checkbox" name="chkLikes" id="chkLikes" onchange="ItemListPage.filter('Likes', this.checked);" data-theme="c">
-                        <label for="chkLikes">Likes</label>
-
-                        <input type="checkbox" name="chkDislikes" id="chkDislikes" onchange="ItemListPage.filter('Dislikes', this.checked);" data-theme="c">
-                        <label for="chkDislikes">Dislikes</label>
-
-                        <input type="checkbox" name="chkResumable" id="chkResumable" onchange="ItemListPage.filter('IsResumable', this.checked);" data-theme="c">
-                        <label for="chkResumable">Resumable</label>
-                    </fieldset>
-
-                </div>
-                <div id="indexpanel" style="display: none;"></div>
-
-            </form>
         </div>
     </div>
 </body>

dashboard-ui/moviegenres.html

@@ -4,7 +4,7 @@
     <title>Media Browser</title>
 </head>
 <body>
-    <div id="movieGenresPage" data-role="page" class="page libraryPage noLogoPage listPage" data-theme="a">
+    <div id="movieGenresPage" data-role="page" class="page libraryPage noLogoPage" data-theme="a">
         <h1 class="libraryPageHeader"><a href="index.html" class="imageLink">
             <img src="css/images/home.png"></a>Movies</h1>
         <div data-role="content">

dashboard-ui/moviepeople.html

@@ -4,7 +4,7 @@
     <title>Media Browser</title>
 </head>
 <body>
-    <div id="moviePeoplePage" data-role="page" class="page libraryPage noLogoPage listPage" data-theme="a">
+    <div id="moviePeoplePage" data-role="page" class="page libraryPage noLogoPage" data-theme="a">
         <h1 class="libraryPageHeader"><a href="index.html" class="imageLink">
             <img src="css/images/home.png"></a>Movies</h1>
         <div data-role="content">

dashboard-ui/movies.html

@@ -4,7 +4,7 @@
     <title>Media Browser</title>
 </head>
 <body>
-    <div id="moviesPage" data-role="page" class="page libraryPage noLogoPage listPage" data-theme="a">
+    <div id="moviesPage" data-role="page" class="page libraryPage noLogoPage" data-theme="a">
         <h1 class="libraryPageHeader"><a href="index.html" class="imageLink">
             <img src="css/images/home.png"></a>Movies</h1>
         <div data-role="content">

dashboard-ui/moviestudios.html

@@ -4,7 +4,7 @@
     <title>Media Browser</title>
 </head>
 <body>
-    <div id="movieStudiosPage" data-role="page" class="page libraryPage noLogoPage listPage" data-theme="a">
+    <div id="movieStudiosPage" data-role="page" class="page libraryPage noLogoPage" data-theme="a">
         <h1 class="libraryPageHeader"><a href="index.html" class="imageLink">
             <img src="css/images/home.png"></a>Movies</h1>
         <div data-role="content">

dashboard-ui/scripts/Itemdetailpage.js

@@ -421,7 +421,7 @@
     function renderCast(page, item) {
         var html = '';
 
-        var casts = item.People || {};
+        var casts = item.People || [];
 
         for (var i = 0, length = casts.length; i < length; i++) {
 

dashboard-ui/scripts/itemlistpage.js

@@ -1,190 +1,67 @@
-var ItemListPage = {
+(function ($, document) {
 
-    onPageShow: function () {
+    // The base query options
+    var query = {
 
-        ItemListPage.reload();
+        SortBy: "SortName",
-    },
+        SortOrder: "Ascending",
+        Fields: "PrimaryImageAspectRatio,UserData,DisplayMediaType,ItemCounts,DateCreated",
+        Limit: LibraryBrowser.getDetaultPageSize(),
+        StartIndex: 0
+    };
 
-    reload: function () {
+    function reloadItems(page) {
-
-        var page = $.mobile.activePage;
-
-        var parentId = getParameterByName('parentId');
-
-        var query = {
-            Fields: "PrimaryImageAspectRatio",
-            Recursive: getParameterByName('Recursive') == 'true'
-        };
-
-        var filters = [];
-
-        if (getParameterByName('IsResumable') == 'true') {
-            filters.push("IsResumable");
-            $('#chkResumable', page).checked(true).checkboxradio("refresh");
-        }
-
-        if (getParameterByName('IsFavorite') == 'true') {
-            filters.push("IsFavorite");
-            $('#chkIsFavorite', page).checked(true).checkboxradio("refresh");
-        }
-
-        if (getParameterByName('IsRecentlyAdded') == 'true') {
-            filters.push("IsRecentlyAdded");
-            $('#chkRecentlyAdded', page).checked(true).checkboxradio("refresh");
-        }
-
-        var sortBy = getParameterByName('SortBy') || 'SortName';
-        query.SortBy = sortBy;
-        $('.radioSortBy', page).checked(false).checkboxradio("refresh");
-        $('#radio' + sortBy, page).checked(true).checkboxradio("refresh");
-
-        var order = getParameterByName('SortOrder') || 'Ascending';
-
-        query.SortOrder = order;
-        $('.radioSortOrder', page).checked(false).checkboxradio("refresh");
-        $('#radio' + order, page).checked(true).checkboxradio("refresh");
-
-        query.Filters = filters.join(',');
-        //query.limit = 100;
-
-        if (parentId) {
-            query.parentId = parentId;
-
-            ApiClient.getItem(Dashboard.getCurrentUserId(), parentId).done(ItemListPage.renderTitle);
-        }
-        else {
-            $('#itemName', page).html(getParameterByName('Title') || "Media Library");
-        }
-
-        ItemListPage.refreshItems(query);
-    },
-
-    refreshItems: function (query) {
 
         Dashboard.showLoadingMsg();
 
-        var page = $.mobile.activePage;
+        var userId = Dashboard.getCurrentUserId();
 
-        page.itemQuery = query;
+        ApiClient.getItems(userId, query).done(function (result) {
 
-        ApiClient.getItems(Dashboard.getCurrentUserId(), query).done(ItemListPage.renderItems);
+            var html = '';
-    },
 
-    renderItems: function (result) {
+            var showPaging = result.TotalRecordCount > query.Limit;
 
-        var items = result.Items;
+            if (showPaging) {
+                html += LibraryBrowser.getPagingHtml(query, result.TotalRecordCount, true);
+            }
 
-        var query = $.mobile.activePage.itemQuery;
+            html += LibraryBrowser.getPosterDetailViewHtml({
+                items: result.Items,
+                useAverageAspectRatio: true
+            });
 
-        var renderOptions = {
+            if (showPaging) {
+                html += LibraryBrowser.getPagingHtml(query, result.TotalRecordCount);
+            }
 
-            items: items,
+            var elem = $('#items', page).html(html).trigger('create');
-            useAverageAspectRatio: query.Recursive !== true,
-            showTitle: query.Recursive
-        };
 
-        var html = LibraryBrowser.getPosterViewHtml(renderOptions);
+            $('select', elem).on('change', function () {
+                query.StartIndex = (parseInt(this.value) - 1) * query.Limit;
+                reloadItems(page);
+            });
 
-        $('#listItems', $.mobile.activePage).html(html);
+            Dashboard.hideLoadingMsg();
+        });
 
-        Dashboard.hideLoadingMsg();
+        ApiClient.getItem(userId, query.ParentId).done(function (item) {
-    },
 
-    renderTitle: function (item) {
+            $('#itemName', page).html(item.Name);
 
-
+        });
-        $('#itemName', $.mobile.activePage).html(item.Name);
-    },
-
-    sortBy: function (sortBy) {
-
-        var query = $.mobile.activePage.itemQuery;
-        query.SortBy = sortBy;
-        ItemListPage.refreshItems(query);
-    },
-
-    sortOrder: function (order) {
-
-        var query = $.mobile.activePage.itemQuery;
-        query.SortOrder = order;
-        ItemListPage.refreshItems(query);
-    },
-
-    filter: function(name, add)
-    {
-        var query = $.mobile.activePage.itemQuery;
-        var filters = query.Filters || "";
-
-        filters = (',' + filters).replace(',' + name, '').substring(1);
-
-        if (add) {
-            filters = filters ? (filters + ',' + name) : name;
-        }
-
-        query.Filters = filters;
-
-        ItemListPage.refreshItems(query);
-    },
-
-    showSortPanel: function () {
-
-        var page = $.mobile.activePage;
-
-        $('#viewpanel', page).hide();
-        $('#filterpanel', page).hide();
-        $('#indexpanel', page).hide();
-        $('#sortpanel', page).show();
-
-        $('#btnViewPanel', page).buttonMarkup({ theme: "c" });
-        $('#btnSortPanel', page).buttonMarkup({ theme: "a" });
-        $('#btnIndexPanel', page).buttonMarkup({ theme: "c" });
-        $('#btnFilterPanel', page).buttonMarkup({ theme: "c" });
-    },
-
-    showViewPanel: function () {
-
-        var page = $.mobile.activePage;
-
-        $('#viewpanel', page).show();
-        $('#filterpanel', page).hide();
-        $('#indexpanel', page).hide();
-        $('#sortpanel', page).hide();
-
-        $('#btnViewPanel', page).buttonMarkup({ theme: "a" });
-        $('#btnSortPanel', page).buttonMarkup({ theme: "c" });
-        $('#btnIndexPanel', page).buttonMarkup({ theme: "c" });
-        $('#btnFilterPanel', page).buttonMarkup({ theme: "c" });
-    },
-
-    showIndexPanel: function () {
-
-        var page = $.mobile.activePage;
-
-        $('#viewpanel', page).hide();
-        $('#filterpanel', page).hide();
-        $('#indexpanel', page).show();
-        $('#sortpanel', page).hide();
-
-        $('#btnViewPanel', page).buttonMarkup({ theme: "c" });
-        $('#btnSortPanel', page).buttonMarkup({ theme: "c" });
-        $('#btnIndexPanel', page).buttonMarkup({ theme: "a" });
-        $('#btnFilterPanel', page).buttonMarkup({ theme: "c" });
-    },
-
-    showFilterPanel: function () {
-
-        var page = $.mobile.activePage;
-
-        $('#viewpanel', page).hide();
-        $('#filterpanel', page).show();
-        $('#indexpanel', page).hide();
-        $('#sortpanel', page).hide();
-
-        $('#btnViewPanel', page).buttonMarkup({ theme: "c" });
-        $('#btnSortPanel', page).buttonMarkup({ theme: "c" });
-        $('#btnIndexPanel', page).buttonMarkup({ theme: "c" });
-        $('#btnFilterPanel', page).buttonMarkup({ theme: "a" });
     }
-};
 
-$(document).on('pageshow', "#itemListPage", ItemListPage.onPageShow);
+    $(document).on('pageinit', "#itemListPage", function () {
+
+
+    }).on('pagebeforeshow', "#itemListPage", function () {
+
+        query.ParentId = getParameterByName('parentId');
+        reloadItems(this);
+
+    }).on('pageshow', "#itemListPage", function () {
+
+    });
+
+})(jQuery, document);

dashboard-ui/scripts/librarybrowser.js

@@ -81,7 +81,11 @@
                 }
                 else if (item.MediaType == "Game") {
 
+<<<<<<< HEAD
 	                html += "<img class='posterDetailViewImage' style='background:" + LibraryBrowser.getMetroColor(item.Id) + ";' src='css/images/items/list/game.png' />";
+=======
+                    html += "<img class='posterDetailViewImage' style='background:" + LibraryBrowser.getMetroColor(item.Id) + ";' src='css/images/items/list/game.png' />";
+>>>>>>> 103dcc97e4c89de41919ec2ab1025f8df30e87fb
                 }
                 else {
 

dashboard-ui/tvgenres.html

@@ -4,7 +4,7 @@
     <title>Media Browser</title>
 </head>
 <body>
-    <div id="tvGenresPage" data-role="page" class="page libraryPage noLogoPage listPage" data-theme="a">
+    <div id="tvGenresPage" data-role="page" class="page libraryPage noLogoPage" data-theme="a">
         <h1 class="libraryPageHeader"><a href="index.html" class="imageLink">
             <img src="css/images/home.png"></a>TV Shows</h1>
         <div data-role="content">

dashboard-ui/tvpeople.html

@@ -4,7 +4,7 @@
     <title>Media Browser</title>
 </head>
 <body>
-    <div id="tvPeoplePage" data-role="page" class="page libraryPage noLogoPage listPage" data-theme="a">
+    <div id="tvPeoplePage" data-role="page" class="page libraryPage noLogoPage" data-theme="a">
         <h1 class="libraryPageHeader"><a href="index.html" class="imageLink">
             <img src="css/images/home.png"></a>TV Shows</h1>
         <div data-role="content">

dashboard-ui/tvshows.html

@@ -4,7 +4,7 @@
     <title>Media Browser</title>
 </head>
 <body>
-    <div id="tvShowsPage" data-role="page" class="page libraryPage noLogoPage listPage" data-theme="a">
+    <div id="tvShowsPage" data-role="page" class="page libraryPage noLogoPage" data-theme="a">
         <h1 class="libraryPageHeader"><a href="index.html" class="imageLink">
             <img src="css/images/home.png"></a>TV Shows</h1>
         <div data-role="content">

dashboard-ui/tvstudios.html

@@ -4,7 +4,7 @@
     <title>Media Browser</title>
 </head>
 <body>
-    <div id="tvStudiosPage" data-role="page" class="page libraryPage noLogoPage listPage" data-theme="a">
+    <div id="tvStudiosPage" data-role="page" class="page libraryPage noLogoPage" data-theme="a">
         <h1 class="libraryPageHeader"><a href="index.html" class="imageLink">
             <img src="css/images/home.png"></a>TV Shows</h1>
         <div data-role="content">

packages.config

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <packages>
-  <package id="MediaBrowser.ApiClient.Javascript" version="3.0.76" targetFramework="net45" />
+  <package id="MediaBrowser.ApiClient.Javascript" version="3.0.77" targetFramework="net45" />
   <package id="ServiceStack.Common" version="3.9.43" targetFramework="net45" />
   <package id="ServiceStack.Text" version="3.9.43" targetFramework="net45" />
 </packages>