user24 341 Posted March 21 Posted March 21 Hi, Presently the music Included In section on the individual Artist pages shows both Collections and Playlists. Ideally, I would like them both shown on their own separate rows, but was wondering, as a first step, if there was a simple way to just hide the Playlists using CSS? When looking at the CSS of the div.appearsOnLIstsSection, it seems that an underlying Collection and Playlist have an identical structure, so it doesnt seem possible to differentiate and target just Playlists? Is there anything obvious/easy that I am missing or do I need other method beyond CSS? Thanks!
GrimReaper 4873 Posted March 22 Posted March 22 (edited) On 3/21/2026 at 2:52 AM, user24 said: was wondering, as a first step, if there was a simple way to just hide the Playlists using CSS? Is there anything obvious/easy that I am missing or do I need other method beyond CSS? As you've already surmised, it can't be done by CSS alone, you'd need to do it via js script (though it shouldn't take more than a few minutes to set that up). Note that you'd have to repeat that on each server update (not that often/tedious either, I have several scripts of my own, for different purposes). Edit: If you wanna play with it, place the script in your server's \system\dashboard-ui folder; in the same folder, edit index.html and add a line at the very bottom: script src="hide_playlists.js"></script> Hard-refresh browser (Ctrl+F5) or restart server. Edited March 22 by GrimReaper Script removed 1
GrimReaper 4873 Posted March 22 Posted March 22 (edited) On 3/21/2026 at 2:52 AM, user24 said: Ideally, I would like them both shown on their own separate rows Updated version. playlist_row.js Edited March 22 by GrimReaper 1
user24 341 Posted March 22 Author Posted March 22 @GrimReaper Thanks for the script... I played around with it for a bit. With a simple 1 Collection, 1 Playlist it works perfectly, but with more Collections there seems to be SPA/DOM timing issues??? Here are some results: C P works well C C C C P P works, though the spacing between all cards, in the new Playlists row only, is much wider than normal C C C C C C C C P P P P P P only the first P appears in the new Playlists row, the rest remain in the new Collections row, with a one card 'missing' gap from C to P (picure below) C C C C C C C C C C C C C C C C P P P P P P P P everything remains in the new Collections row I'm not asking/wanting you to troubleshoot it for me (unless you want to for yourself). Just reporting on what I found and it was worth trying. I also have some additional complications when using this with my unrelated custom CSS that massively rearranges 'everything'. Anyway, this has at least got me started and I now have a couple of new ideas to try next: Hide the 8 playlists, that are annoying me right now, with CSS by targeting their specific IDs (short-term, not scalable) Use API to target Collections and Playlists for separating them (long-term, hopefully a viable solution) Thanks again for your help!
GrimReaper 4873 Posted March 22 Posted March 22 (edited) Try this version, it should handle larger number of items better: 1 hour ago, user24 said: C C C C P P works, though the spacing between all cards, in the new Playlists row only, is much wider than normal 1 hour ago, user24 said: C C C C C C C C P P P P P P only the first P appears in the new Playlists row, the rest remain in the new Collections row, with a one card 'missing' gap from C to P (picure below) 1 hour ago, user24 said: C C C C C C C C C C C C C C C C P P P P P P P P everything remains in the new Collections row playlist_row.js Edited March 22 by GrimReaper 1
user24 341 Posted Thursday at 01:24 PM Author Posted Thursday at 01:24 PM @GrimReaper This version works much better. Just had to fine-tune a couple of things. Needed my local server number in place of yours and had to change the 202px spacing to 145px. Not sure why (????) as DevTools showed 202px. Also played around a bit with CSS for hiding individual selected Playlists as follows (e.g.) /* 1970s */ .appearsOnListsSection .virtualScrollItem:has(img[src*="/Items/688474/"]) { display: none !important; } But, then the hidden items need to be sorted to the end of all Playlists, otherwise blank spaces occur. Probably not a problem for me though, as my Playlists and Collections are sorted into sub-categories anyway and would only ever be shown or hidden as a set, according to these categories. There's probably some combination of splitting the row into two and hiding selected items on certain pages that will end up being useful. Thanks and Cheers !! 1
GrimReaper 4873 Posted Thursday at 01:49 PM Posted Thursday at 01:49 PM 24 minutes ago, user24 said: Also played around a bit with CSS for hiding individual selected Playlists as follows (e.g.) /* 1970s */ .appearsOnListsSection .virtualScrollItem:has(img[src*="/Items/688474/"]) { display: none !important; } But, then the hidden items need to be sorted to the end of all Playlists, otherwise blank spaces occur. Yeah, you cant can't reflow the remaining items with CSS since they use absolute positioning with hardcoded inset values; the only way you could close the gaps is with js again; you could add those playlist IDs to an exclusion list in the same script?
user24 341 Posted Thursday at 09:33 PM Author Posted Thursday at 09:33 PM Hmmm... I'm going to pause this for the moment, as what I have now is ok and probably not worth finessing any further just yet. BUT your revised script has indirectly given me a really interesting new idea that I wouldn't otherwise have thought of myself. You essentailly duplicated the "Included In" row and then repopulated both rows based on Boxsets and Playlists filtering, and it's functional. I'm wondering if it's possible to take the same approach elsewhere, on whole grid sections, and use Tag filtering instead... ??? This is a much larger new project though...!!!
GrimReaper 4873 Posted Friday at 04:01 AM Posted Friday at 04:01 AM 6 hours ago, user24 said: I'm wondering if it's possible to take the same approach elsewhere, on whole grid sections, and use Tag filtering instead... ??? You'll have to elaborate on that a bit, as in maybe a mockup of end-result, just to get an idea of what would you like to achieve?
user24 341 Posted Friday at 05:41 AM Author Posted Friday at 05:41 AM (edited) 3 hours ago, GrimReaper said: You'll have to elaborate on that a bit I've been wanting to group Artist Albums into sub-categories for quite a while. So this is related to the detail Album pages which, in primary view, show one group of albums in a grid (e.g.) So rather than one whole block of Albums, there woud be two possible new groups, split into sections: Release Type (Studio Albums, Live Albums, etc.) Decades (1950s, 1960s, etc.) Release Type has been asked for by myself and others in various topics. E.g. group albums into Studio Albums, Live Albums, Compilations, Singles & EPs (or whatever main categories you want). There is an embedded metadata field for this, but I was thinking just to use Emby Tags on Albums because album-only tags cannot be imported. It may take me 6+ months to tag all of my albums like this in Emby, but waiting for a Feature Request to possibly eventuate could take a lot longer! Decades could possibly be determined by the Year tag, but decade album tags could be used if Years didn't work. Decade groupings, etc has also been asked for elsewhere, across all media, but I don't think anyone has yet discussed both Release Type AND Decades together as alternative Album groupings. If Emby were to implement this, then ideally, to match the current UI and how Collections can group now, there would be a Group By button in the menu and you would be able to select: None (default) Release Type Decade Anyway, that's the basic idea. Beyond that, I've recently re-purposed the row under the Artist name on the Artist pages: The Community Rating star field now shows Albums count and links to the Albums page (usinig a workaround + JavaScipt) The Tracks count now links to the Songs page (using Javascript) Discography (in the Genre field) now links to the Albums page (using JavaScript) Timeline (in the Genre field) now links to the Albums page (using JavaScipt) That's about the limit of my progress (and knowledge) so far. The next step would be to somehow achieve: Albums links to standard Album page grouped by None (but perhaps with an "All Releases" heading) Discography links to Album page grouped by Release Type (with relevant headings) Timeline links to Album page grouped by Decade (with relevant headings) I have no idea yet whether or not this is even possible, I only just thought of this linking and grouping possibility because your script worked for spliitng the "Included In" row! Hopefully that explains the idea well enough? Perhaps you would know what may be technically feasible or not? Or other ways to potentially achieve the same end result? Let me know if you want any more info... and, as before, help is not expected, but always appreciated! Edited Friday at 07:10 AM by user24 Changed "All Albums" to "All Releases" 1
user24 341 Posted yesterday at 10:01 AM Author Posted yesterday at 10:01 AM On 3/27/2026 at 2:31 PM, GrimReaper said: maybe a mockup of end-result Rather than just thinking about it, I tried to see if I could actually make it for real - image below is rough webpage made by fetching an Artist's albums from the Emby API and grouping them according to user-defined "release type" tags. The styling is just placeholder and I guess I'll be finessing the Sections once I try some more Artists, but at least this proves the grouping can be done. The goal though is to have this Discography view (and a Timeline/Decades view) integrated into Emby - that could be the difficult part???
GrimReaper 4873 Posted yesterday at 10:36 AM Posted yesterday at 10:36 AM Gimme few hours, I should have something working. 1
GrimReaper 4873 Posted 20 hours ago Posted 20 hours ago (edited) On 3/27/2026 at 6:41 AM, user24 said: I've been wanting to group Artist Albums into sub-categories for quite a while. So this is related to the detail Album pages which, in primary view, show one group of albums in a grid (e.g.) So rather than one whole block of Albums, there woud be two possible new groups, split into sections: Release Type (Studio Albums, Live Albums, etc.) Decades (1950s, 1960s, etc.) Release Type has been asked for by myself and others in various topics. E.g. group albums into Studio Albums, Live Albums, Compilations, Singles & EPs (or whatever main categories you want). There is an embedded metadata field for this, but I was thinking just to use Emby Tags on Albums because album-only tags cannot be imported. It may take me 6+ months to tag all of my albums like this in Emby, but waiting for a Feature Request to possibly eventuate could take a lot longer! Decades could possibly be determined by the Year tag, but decade album tags could be used if Years didn't work. Decade groupings, etc has also been asked for elsewhere, across all media, but I don't think anyone has yet discussed both Release Type AND Decades together as alternative Album groupings. If Emby were to implement this, then ideally, to match the current UI and how Collections can group now, there would be a Group By button in the menu and you would be able to select: None (default) Release Type Decade Give this one a spin; Release Type grouping is based on user-added Album tags, Decade grouping is automatic based on Album Year from metadata. P.S. Note that I have no music on Emby (nor anywhere else, for that matter), all tests were done on a miniscule test library, bugs and quirks are not only expected but very probable. Edited 16 hours ago by GrimReaper Script removed 1
GrimReaper 4873 Posted 16 hours ago Posted 16 hours ago (edited) v2 Added Sections sorting: Release Type: Ascending/Descending alphabetically (no Tag/Other items always at the bottom/last) Decade: Ascending/Descending chronologically (no year/Unknown items always at the bottom/last) Edited 11 hours ago by GrimReaper Script removed 1
GrimReaper 4873 Posted 11 hours ago Posted 11 hours ago (edited) v3 Reworked dropdown menu Replaced button icon Refined drawing logic Edited 1 hour ago by GrimReaper Script removed 1
user24 341 Posted 11 hours ago Author Posted 11 hours ago Wow - the screenshots look really great!!! Exactly as I was imagining. You must also be a mind reader because the addition of the item counts would have been next on my list of refinements. I'll try it out and report back when I have some results to share... 1
user24 341 Posted 9 hours ago Author Posted 9 hours ago @GrimReaper Initial quick feedback is that it runs from installation, without any problems at all. Two very minor styling issues: 1. I have my overall Emby grid size set as: Smaller which gives 8 albums across the screen. Group by None still retains this, however the alternative Release Type and Decade views have a larger size, giving 7 albums across. I haven't really looked at the code yet to see if there is a card size setting to adjust??? 2. I run custom CSS that makes the album corners square. As the default Emby has them slightly rounded, I guess the custom CSS runs first and then the script runs and just uses Emby default. Therefore perhaps I need CSS in the script??? A possible functional quirk that I need to investigate further though and look at more Artist examples and edge-cases. Decade sorting ascending and descending works fine. But the Release Type sorting seems to give some strange results. I know that is very vague, but I'll follow up later with more specific details... Overall though, it is working very well!!!
user24 341 Posted 4 hours ago Author Posted 4 hours ago (edited) 5 hours ago, user24 said: Two very minor styling issues: Managed to nearly get these figured out - card radius changed from 4 to 0 was easy. I need W =122.5 to get an exact card size match - it then throws out the card spacing a tiny bit, but I haven't solved that just yet... The other "weirdness" was mostly me figuring how it works and also finding out I probably gave a bad specification to begin with: Decades works well and I think the Release Type needs to follow the same method. i.e. when there is no Year then the Albums get grouped into Unknown and are relegated to the bottom section. But my Release Type of: Other Releases | Bootlegs | Ungrouped should really have been specified as Other Releases | Bootlegs - which is a valid Release Tag for albums that don't fit elsewhere, but have still been tagged. Then Unknown needs to be used for any Albums that have not been tagged at all with a Release Type. (I reconfigured my Tag names - changed "Other" to "Miscellaneous" - to oversome this while testing - refer to image below). Also, as I have other Album Tags that are not Release Type (e.g. CDs, DVDs) these tags of course show up in the Groupings. So we essentailly have a function that is not a narrow "Group by Release Type" but a much wider "Group by Tag". This is not necessarily bad, and may give good flexibilty - but then it all comes down to the Tag sorting - ascending/descending based upon alphabetical order. "Release Type" tags need to be kept together in a preferred order, but Emby has no Sort Title field for Tags - so that means being creative! (refer to image below, again). (Note: I personally prefer Group by Release Type as the key function, and may therefore turn my other Album Tags into Collections, so they dont pollute the view.) So I think that just allowing "Other" to be a valid Tag and separating the untagged Albums away from this will solve my "weirdness" issue. Nothing wrong with your coding, just my specifying!!! The rest is just how Emby works. Hope I am making sense? Edited 3 hours ago by user24
GrimReaper 4873 Posted 1 hour ago Posted 1 hour ago (edited) v4 Default grouping image size honored Image corners squared Renamed untagged category to Unknown, Others is now regular/sortable tag Added third Release Type sorting (Custom) and made it default (on first click), which sorts by user-added Tags containing predefined list of specific words/terms in specific order: studio album/live album/compilation/studio ep/other/miscellaneous/cd/dvd - case-insensitive (so it cycles on each click Custom>Desc.>Asc.>Custom etc.); any other tag which does not contain the term that is amongst the predefined ones gets sorted alphabetically below DVDs and before Unknown: albums_groupby.js Edited 36 minutes ago by GrimReaper
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now