#762 - Marking unwatched doesn't update display

dashboard-ui/css/librarybrowser.css

@@ -782,7 +782,7 @@ a.itemTag:hover {
     background: rgba(248, 58, 34, .8);
 }
 
-.unplayedIndicator {
+.unplayedIndicator, .playedIndicator {
     display: block;
     position: absolute;
     top: 5px;
@@ -798,7 +798,7 @@ a.itemTag:hover {
     background: rgba(82, 181, 75, .8);
 }
 
-    .unplayedIndicator div:after {
+    .unplayedIndicator div:after, .playedIndicator div:after {
         background-color: transparent !important;
     }
 

dashboard-ui/scripts/librarybrowser.js

@@ -339,7 +339,7 @@
         closePlayMenu: function () {
             $('.playFlyout').popup("close").remove();
         },
-        
+
         getHref: function (item, context) {
 
             var href = LibraryBrowser.getHrefInternal(item);
@@ -737,6 +737,10 @@
 
                 var href = options.linkItem === false ? '#' : LibraryBrowser.getHref(item, options.context);
 
+                if (item.UserData) {
+                    cssClass += ' posterItemUserData' + item.UserData.Key;
+                }
+
                 html += '<a data-itemid="' + item.Id + '" class="' + cssClass + '" data-mediasourcecount="' + mediaSourceCount + '" href="' + href + '">';
 
                 var style = "";
@@ -793,7 +797,7 @@
                 if (!options.overlayText) {
 
                     if (progressHtml) {
-                        html += '<div class="posterItemTextOverlay">';
+                        html += '<div class="posterItemTextOverlay posterItemProgressContainer">';
                         html += "<div class='posterItemProgress miniPosterItemProgress'>";
                         html += progressHtml;
                         html += "</div>";
@@ -854,7 +858,7 @@
                 if (options.overlayText) {
 
                     if (progressHtml) {
-                        html += "<div class='posterItemText posterItemProgress'>";
+                        html += "<div class='posterItemText posterItemProgress posterItemProgressContainer'>";
                         html += progressHtml || "&nbsp;";
                         html += "</div>";
                     }
@@ -1053,14 +1057,8 @@
                     return '<div class="unplayedIndicator">' + item.RecursiveUnplayedItemCount + '</div>';
                 }
 
-                if (item.PlayedPercentage == 100) {
+                if (item.PlayedPercentage == 100 || (item.UserData && item.UserData.Played)) {
-                    return '<div class="unplayedIndicator"><div class="ui-icon-check ui-btn-icon-notext"></div></div>';
+                    return '<div class="playedIndicator"><div class="ui-icon-check ui-btn-icon-notext"></div></div>';
-                }
-
-                var userData = item.UserData || {};
-
-                if (userData.Played) {
-                    return '<div class="unplayedIndicator"><div class="ui-icon-check ui-btn-icon-notext"></div></div>';
                 }
             }
 

dashboard-ui/scripts/librarylist.js

@@ -320,7 +320,7 @@
                 Dashboard.showLoadingMsg();
 
                 $.ajax({
-                    
+
                     type: "POST",
                     url: ApiClient.getUrl("Videos/MergeVersions", { Ids: selection.join(',') })
 
@@ -335,9 +335,9 @@
             }
         });
     }
-    
+
     function addToCollection(page) {
-        
+
         var selection = getSelectedItems(page);
 
         if (selection.length < 1) {
@@ -377,4 +377,48 @@
 
     });
 
+    function renderUserDataChanges(posterItem, userData) {
+
+        if (userData.Played) {
+
+            if (!$('.playedIndicator', posterItem).length) {
+
+                var html = '<div class="unplayedIndicator"><div class="ui-icon-check ui-btn-icon-notext"></div></div>';
+
+                $(html).insertAfter($('.posterItemOverlayTarget', posterItem));
+            }
+            
+        } else {
+            $('.playedIndicator', posterItem).remove();
+        }
+        
+        // TODO: Handle progress bar
+        // $('.posterItemProgressContainer').remove();
+    }
+
+    function onUserDataChanged(userData) {
+
+        $('.posterItemUserData' + userData.Key).each(function () {
+            renderUserDataChanges(this, userData);
+        });
+    }
+
+    function onWebSocketMessage(e, data) {
+
+        var msg = data;
+
+        if (msg.MessageType === "UserDataChanged") {
+
+            if (msg.Data.UserId == Dashboard.getCurrentUserId()) {
+
+                for (var i = 0, length = msg.Data.UserDataList.length; i < length; i++) {
+                    onUserDataChanged(msg.Data.UserDataList[i]);
+                }
+            }
+        }
+
+    }
+
+    $(ApiClient).on('websocketmessage', onWebSocketMessage);
+
 })(jQuery, document, window);