update user data icons

dashboard-ui/css/site.css

@@ -750,6 +750,16 @@ progress {
     background-position: right center;
 }
 
+.imgUserItemRating {
+    height: 24px;
+    margin-right: 1em;
+    cursor: pointer;
+}
+
+.imgUserItemRating:hover {
+    opacity: .5;
+}
+
 @media all and (min-width: 650px) {
     .itemImageBlock {
         display: inline-block;
@@ -822,13 +832,20 @@ progress {
     position: relative;
     width: 270px;
 }
+
 #nowPlayingBar #mediaInfo, #nowPlayingBar #mediaInfo div {
     margin-left: 10px;
     display: inline-block;
 }
-#nowPlayingBar #mediaInfo {display:none;}
+
+#nowPlayingBar #mediaInfo {
+    display: none;
+}
+
 @media all and (min-width: 650px) {
-    #nowPlayingBar #mediaInfo {display:inline-block;}
+    #nowPlayingBar #mediaInfo {
+        display: inline-block;
+    }
 }
 
 .mediaButton img {
@@ -882,6 +899,7 @@ progress {
     background: none;
     border: 0;
 }
+
     .vjs-default-skin .vjs-menu-button.vjs-stop-button div {
         background: url("images/media/stop.png");
         height: 26px;

dashboard-ui/index.html

@@ -18,12 +18,12 @@
                 <div id="divResumableItems"></div>
             </div>
 
-            <h1>My Library <a href="#" class="imageLink">
+            <h1>My Library <a href="itemlist.html" class="imageLink">
                 <img src="css/images/rightarrow.png" /></a></h1>
 
             <div id="divMyLibrary"></div>
 
-            <h1>Collections <a href="#" class="imageLink">
+            <h1>Collections <a href="itemlist.html" class="imageLink">
                 <img src="css/images/rightarrow.png" /></a></h1>
 
             <div id="divCollections"></div>

dashboard-ui/itemdetails.html

@@ -34,6 +34,9 @@
 
                     <p id="itemStudios">
                     </p>
+
+                    <p id="itemRatings">
+                    </p>
                 </div>
             </div>
 

dashboard-ui/scripts/Itemdetailpage.js

@@ -717,29 +717,33 @@
         var html = '';
         var page = $.mobile.activePage;
 
-        if (typeof(item.UserData.Likes) == "undefined") {
-            html += '<img src="css/images/userdata/thumbs_down_off.png" alt="Set Did Not Like" title="Set Did Not Like" onclick="ItemDetailPage.setDislike();" />';
-            html += '<img src="css/images/userdata/thumbs_up_off.png" alt="Set Liked" title="Set Liked" onclick="ItemDetailPage.setLike();" />';
-        } else if (item.UserData.Likes) {
-            html += '<img src="css/images/userdata/thumbs_down_off.png" alt="Set Did Not Like" title="Set Did Not Like" onclick="ItemDetailPage.setDislike();" />';
-            html += '<img src="css/images/userdata/thumbs_up_on.png" alt="Liked" title="Liked" onclick="ItemDetailPage.clearLike();" />';
+        var userData = item.UserData || {};
+
+        if (typeof userData.Likes == "undefined") {
+            html += '<img class="imgUserItemRating" src="css/images/userdata/thumbs_down_off.png" alt="Dislike" title="Dislike" onclick="ItemDetailPage.setDislike();" />';
+            html += '<img class="imgUserItemRating" src="css/images/userdata/thumbs_up_off.png" alt="Like" title="Like" onclick="ItemDetailPage.setLike();" />';
+        } else if (userData.Likes) {
+            html += '<img class="imgUserItemRating" src="css/images/userdata/thumbs_down_off.png" alt="Dislike" title="Dislike" onclick="ItemDetailPage.setDislike();" />';
+            html += '<img class="imgUserItemRating" src="css/images/userdata/thumbs_up_on.png" alt="Liked" title="Like" onclick="ItemDetailPage.clearLike();" />';
         } else {
-            html += '<img src="css/images/userdata/thumbs_down_on.png" alt="Did Not Like" title="Did Not Like" onclick="ItemDetailPage.clearLike();" />';
-            html += '<img src="css/images/userdata/thumbs_up_off.png" alt="Set Liked" title="Set Liked" onclick="ItemDetailPage.setLike();" />';
+            html += '<img class="imgUserItemRating" src="css/images/userdata/thumbs_down_on.png" alt="Dislike" title="Dislike" onclick="ItemDetailPage.clearLike();" />';
+            html += '<img class="imgUserItemRating" src="css/images/userdata/thumbs_up_off.png" alt="Like" title="Like" onclick="ItemDetailPage.setLike();" />';
         }
 
-        if (item.UserData.IsFavorite) {
-            html += '<img class="favorite" src="css/images/userdata/heart_on.png" alt="Make Not Favorite" title="Make Not Favorite" onclick="ItemDetailPage.setFavorite();" />';
+        if (userData.IsFavorite) {
+            html += '<img class="imgUserItemRating" src="css/images/userdata/heart_on.png" alt="Remove favorite" title="Remove favorite" onclick="ItemDetailPage.setFavorite();" />';
         } else {
-            html += '<img class="favorite" src="css/images/userdata/heart_off.png" alt="Make Favorite" title="Make Favorite" onclick="ItemDetailPage.setFavorite();" />';
+            html += '<img class="imgUserItemRating" src="css/images/userdata/heart_off.png" alt="Mark favorite" title="Mark favorite" onclick="ItemDetailPage.setFavorite();" />';
         }
 
-        $('#itemFav', page).html(html);
+        $('#itemRatings', page).html(html);
     },
 
     setFavorite: function () {
         var item = ItemDetailPage.item;
 
+        item.UserData = item.UserData || {};
+
         var setting = !item.UserData.IsFavorite;
         item.UserData.IsFavorite = setting;
 
@@ -749,8 +753,11 @@
     },
 
     setLike: function () {
+
         var item = ItemDetailPage.item;
 
+        item.UserData = item.UserData || {};
+
         item.UserData.Likes = true;
 
         ApiClient.updateUserItemRating(Dashboard.getCurrentUserId(), item.Id, true);
@@ -759,9 +766,12 @@
     },
 
     clearLike: function () {
+
         var item = ItemDetailPage.item;
 
-        delete item.UserData.Likes;
+        item.UserData = item.UserData || {};
+
+        item.UserData.Likes = undefined;
 
         ApiClient.clearUserItemRating(Dashboard.getCurrentUserId(), item.Id);
 
@@ -771,6 +781,8 @@
     setDislike: function () {
         var item = ItemDetailPage.item;
 
+        item.UserData = item.UserData || {};
+
         item.UserData.Likes = false;
 
         ApiClient.updateUserItemRating(Dashboard.getCurrentUserId(), item.Id, false);

dashboard-ui/scripts/itemlistpage.js

@@ -18,6 +18,8 @@
             query.parentId = parentId;
 
             ApiClient.getItem(Dashboard.getCurrentUserId(), parentId).done(ItemListPage.renderTitle);
+        } else {
+            $('#itemName', $.mobile.activePage).html("Media Library");
         }
 
         ItemListPage.refreshItems(query);