Add watched/unwatched information to Playlists and Collection pages

scripts/collections.js

@@ -595,6 +595,34 @@
         activePage.dataset.collectionSortingAdded = 'true';
     }
 
+    /**
+     * Update collection page by adding the played item count to the page
+     * @param {Object} item - Collection item (BoxSet)
+     */
+    async function updateCollectionPage(item) {
+        const unplayedItemCount = item.UserData?.UnplayedItemCount || 0;
+        const totalItemCount = item.RecursiveItemCount || item.ChildCount || 0;
+        const playedItemCount = totalItemCount - unplayedItemCount;
+
+        const isVideoCollection = document.querySelector('.libraryPage:not(.hide) .collectionItems:has(.card[data-mediatype="Video"])').length > 0;
+        const progressText = isVideoCollection ? 'watched' : 'complete';
+        const incompleteText = isVideoCollection ? 'unwatched' : 'incomplete';
+
+        const itemMiscInfoPrimary = document.querySelector('.libraryPage:not(.hide) .itemMiscInfo-primary');
+        if (itemMiscInfoPrimary && unplayedItemCount > 0) {
+            const mediaInfoItem = document.createElement('div');
+            mediaInfoItem.className = 'mediaInfoItem';
+            mediaInfoItem.textContent = `${playedItemCount} ${progressText}`;
+            itemMiscInfoPrimary.appendChild(mediaInfoItem);
+
+            const mediaInfoItemIncomplete = document.createElement('div');
+            mediaInfoItemIncomplete.className = 'mediaInfoItem';
+            mediaInfoItemIncomplete.textContent = `${unplayedItemCount} ${incompleteText}`;
+            itemMiscInfoPrimary.appendChild(mediaInfoItemIncomplete);
+        }
+
+    }
+
     /**
      * Initialize collections hook
      */
@@ -619,7 +647,8 @@
                 // Small delay to ensure details DOM is ready
                 setTimeout(async () => {
                     if (item && item.Id && item.Type === 'BoxSet') {
-                        await addCollectionSorting(item);
+                        addCollectionSorting(item);
+                        updateCollectionPage(item);
                     }
                 }, 100);
             },

scripts/playlist.js

@@ -914,6 +914,31 @@
             itemsContainer: playlistItemsContainer
         });
 
+        // Updated played item count
+        const playedItemCount = children.filter(item => item.UserData?.Played === true).length;
+
+        const itemMiscInfoPrimary = document.querySelector('.libraryPage:not(.hide) .itemMiscInfo-primary');
+        if (itemMiscInfoPrimary && playedItemCount > 0) {
+            const isAudioPlaylist = children.every(item => item.MediaType === 'Audio');
+            const isBookPlaylist = children.every(item => item.MediaType === 'Book');
+            const progressText = isAudioPlaylist ? 'played' : isBookPlaylist ? 'read' : 'watched';
+            const incompleteText = isAudioPlaylist ? 'unplayed' : isBookPlaylist ? 'unread' : 'unwatched';
+
+            // Add CSS Var --played-item-count
+            itemMiscInfoPrimary.dataset.playedItemCount = playedItemCount;
+            itemMiscInfoPrimary.dataset.totalItemCount = children.length;
+
+            const mediaInfoItem = document.createElement('div');
+            mediaInfoItem.className = 'mediaInfoItem';
+            mediaInfoItem.textContent = `${playedItemCount} ${progressText}`;
+            itemMiscInfoPrimary.appendChild(mediaInfoItem);
+
+            const mediaInfoItemIncomplete = document.createElement('div');
+            mediaInfoItemIncomplete.className = 'mediaInfoItem';
+            mediaInfoItemIncomplete.textContent = `${children.length - playedItemCount} ${incompleteText}`;
+            itemMiscInfoPrimary.appendChild(mediaInfoItemIncomplete);
+        }
+
         // Add sort button (only if it doesn't exist)
         if (!sortButton) {
             addSortButton(detailButtons, playlistId);