playlist-extension/2025-05-31-codemcp-feat-add-visual-styling-for-non-contiguous-done-vi.md

2025-05-31 - Feature: Add visual styling for non-contiguous done videos

User Request

in the popup menu, there may be videos that are marked as "done" that come after videos that are not marked as done. even though they are not truncated with the contiguous "done" videos, they should be visually marked somehow. grey them out (very slightly) in the main view and in the individual playlist view. leave everything else the same.

Implementation Summary

Added visual styling for videos that are marked as "done" but appear after non-done videos in the playlist. These non-contiguous done videos are now visually distinguished with subtle greying.

Changes Made

1. JavaScript Logic (popup/popup.js):

   • Added isNonContiguousDone(playlistName, videoIndex) method to identify done videos that come after non-done videos
   • Updated updatePlaylistsForDisplay() to include isNonContiguousDone property in visible videos
   • Updated updateCurrentPlaylistVideos() to include isNonContiguousDone property in current playlist videos
   • Modified videoItemClass binding to apply non-contiguous-done-video CSS class

2. CSS Styling (popup/popup.css):

   • Added .non-contiguous-done-video class with subtle opacity reduction (0.7) and light grey background
   • Added .non-contiguous-done-video .video-title with greyed text color (#666)

Technical Details

The isNonContiguousDone method checks if:

1. The video at the given index is marked as "done"
2. There exists at least one non-done video before it in the playlist

This ensures only truly non-contiguous done videos are styled, maintaining the existing behavior for contiguous done videos at the beginning of playlists.

The styling is applied in both:

• Main playlists view (truncated display)
• Individual playlist view (full display)

Files Modified

• popup/popup.js - Added logic for identifying non-contiguous done videos
• popup/popup.css - Added subtle visual styling for non-contiguous done videos