Home Explore Help
Sign In
brwong
/
playlist-extension
Watch 1
Star 0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Branch: master
Branches Tags
playlist-ext...
/
2025-05-31-codemcp-feat-add-done-status-toggle-to-video-action-menus.md

2025-05-31-codemcp-feat-add-done-status-toggle-to-video-action-menus.md 2.4 KB
Permalink History Raw

2025-05-31 CodeMCP: Add Done Status Toggle to Video Action Menus

User Request

in the popup menu, in the main view, each video has an actions menu. add an option to mark that video as "done" (if it's anything other than "done"), or to remove the status if it is "done". add this option to the sub-menus of the playlist-specific view as well.

Implementation Summary

Added functionality to toggle the "done" status of videos in both the main playlist view and the individual playlist view. The implementation includes:

Changes Made

  1. Added toggleVideoDoneStatus method in popup/popup.js:

    • Toggles video status between "done" and undefined (not done)
    • Updates playlist data in browser storage
    • Refreshes display after changes

  2. Added isVideoDone helper method in popup/popup.js:

    • Checks if a specific video has "done" status

  3. Added toggleVideoDoneButton handler in popup/popup.js:

    • Click handler that calls toggleVideoDoneStatus and closes menus
    • CSP-compliant event binding

  4. Updated updatePlaylistsForDisplay and updateCurrentPlaylistVideos methods:

    • Pre-compute doneButtonText property for CSP compliance
    • Avoids JavaScript expressions in HTML templates

  5. Updated HTML templates in popup/popup.html:

    • Added done toggle button to both main view and playlist-specific view more menus
    • Used pre-computed doneButtonText property instead of JavaScript expressions
    • Maintains CSP compliance by avoiding expressions like video.status === 'done' ? ... : ...

Key Features

  • Toggle Functionality: Videos can be marked as "done" or have their done status removed
  • Dual View Support: Available in both truncated main view and full playlist view
  • CSP Compliance: All Alpine.js code follows CSP restrictions with no JavaScript expressions in HTML
  • Consistent UI: Integrates seamlessly with existing more menu system
  • Storage Integration: Persists changes to browser storage and updates all views

Technical Details

The done status is stored as a status: "done" property on video objects. When removing done status, the property is deleted rather than set to a different value, maintaining consistency with the existing codebase logic that checks for video.status === "done".

The implementation maintains full CSP compliance by pre-computing button text in JavaScript methods rather than using expressions in HTML attributes.