Skip to content

Comments

feat(search): enhance playlist search with type filtering and badge styles#203

Open
sreeshanth-soma wants to merge 3 commits intoopenbroadcaster:5.5-developfrom
sreeshanth-soma:add-playlist-type
Open

feat(search): enhance playlist search with type filtering and badge styles#203
sreeshanth-soma wants to merge 3 commits intoopenbroadcaster:5.5-developfrom
sreeshanth-soma:add-playlist-type

Conversation

@sreeshanth-soma
Copy link
Member

@sreeshanth-soma sreeshanth-soma commented Feb 17, 2026

Closes #118

Summary

Adds playlist-type aware search in the sidebar and introduces a visual type indicator for playlist search results.

Changes

Backend

  • core/models/playlists_model.php
    • Enhanced playlist search query handling to recognize type aliases and map them to playlist types:
      • basic, b, pl b, playlist basic -> standard
      • advanced, a, pl a, playlist advanced -> advanced
      • live assist, liveassist, live_assist, la, pl la, playlist live assist -> live_assist
    • Type matching is additive to existing name/description search.

Frontend

  • public/js/sidebar.js
    • Added playlist type badge rendering in sidebar rows:
      • PL + B for standard/basic
      • PL + A for advanced
      • PL + LA for live assist
    • Added row data-type assignment for playlist results.
    • Added runtime style injection for badges to ensure visual indicators appear consistently across themes/build states.
  • public/scss/_sidebar.scss
    • Added badge styles for playlist type indicators (layout, pill styling, and per-type colors).

Behavior

  • Searching playlist sidebar with type terms (e.g. basic, advanced, LA) now returns matching playlist types.
  • Playlist result rows now show compact type badges as a visual indicator.

Verification

  • In sidebar playlist search, query basic, advanced, and la.
  • Confirm matching playlists appear for each type term.
  • Confirm each result shows visible type badges (PL + B/A/LA) next to playlist name.
Screenshot 2026-02-17 at 10 09 02 AM Screenshot 2026-02-17 at 10 09 53 AM

I chose subtle color-coded PL/B/A/LA badges to improve visual scanability in the playlist sidebar while keeping explicit text labels for clarity and accessibility.

@sreeshanth-soma sreeshanth-soma changed the title feat: enhance playlist search with type filtering and badge styles feat(search): enhance playlist search with type filtering and badge styles Feb 17, 2026
@sreeshanth-soma
Copy link
Member Author

Updated the sidebar type indicator to ensure proper display across themes, including the default Tanzanite theme.

Removed the redundant "PL" prefix so only a single type marker (B, A, LA) remains.

Also aligned the visuals with existing UI patterns and avoided static icon assets.

Attaching updated screenshot for reference:

image

@radiorob
Copy link
Member

Use dynamic icons from Font Awesome whenever possible https://fontawesome.com/search?q=live&ic=free-collection

Add standard/playlist standard search aliases, consolidate badge styles into SCSS
@sreeshanth-soma
Copy link
Member Author

Thanks for the suggestion. I’ve updated the playlist badges to use Font Awesome icons and moved the badge styling into _sidebar.scss for consistency.

Standard/Basic → fa-list (green)
Advanced → fa-cogs (blue)
Live Assist → fa-microphone (orange)

Also added the missing search alias for “standard”.
Screenshot 2026-02-22 at 9 50 55 AM

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Development

Successfully merging this pull request may close these issues.

2 participants