A tool for tagging Emby content

[VicMoore 552]

I just noticed a problem in the bulk edit.  The changes I made yesterday can cause the wrong data to be copied. So only use the tool on test data.

I agree that the bulk edits should be separated. 

Vic

[VicMoore 552]

Wow, that looks great.

Vic

[Hawkwinter 11]

6 hours ago, VicMoore said:

Wow, that looks great.

Vic

Thanks Vic!

Alright. Here's a usable version of it. Slight tweaks to the base file's html structure, and a bit to the manual styling generated via javascript as well.

I've also switched the commas for semicolons in the tag and genre separators, and put a space after each one.

I'm trying to give it a layout a bit familiar to that of Emby itself. The colors are the same colors I override my emby with - I can set them to the default emby colors later, right now my priority is getting everything laid out nicely and tidying up the css spaghetti code. But I'm pretty sure everything is working right.

CSS Sheets are separate because they're such a mess and because you're doing some big work on the functionality. It'll be easier to avoid breaking eachother's work if the CSS is all separate file for the moment. We can always bake it back in when it's tidier.

Give it a try and let me know what you think.

And of course, immediately after I post it, I open it on my old 4x3 monitor and notice the items in the grid are a bit too big all of a sudden, resulting in 3 items per row with blank space to the right instead of the intended 4 items per row. I'll figure out what caused that and fix it in a bit. It's a small visual 'bug', and it doesn't come up if you're running it fullscreen in 1080p or bigger.

colors.css

style.css emby_new_tool_21b.html

Edited April 11, 2022 by Hawkwinter

[Hawkwinter 11]

Oh!

Something that behaves differently: Now, to get the edit metadata window to pop up, rather than scrolling all the way down after you select stuff, you have to click the new edit button in the top right. Ideally the edit button should get a "display: none" property if nothing is selected so it's not clickable. If you click it right now with no items selected, it will just darken and blur the screen with the modal overlay that goes behind the edit window, until you click the screen again. And then if you select stuff and click it again, it'll actually bring you into edit mode.

Perhaps when the bulk edit functionality is separated out, the way to go will be to add a "batch" button to the top right as well that's only visible when multiple items are selected, and when clicked it can show a similar edit menu that's all batch edit functionality.

Edited April 11, 2022 by Hawkwinter

[Hawkwinter 11]

I think I may have found a small bug.

I have some shows that are in more than one folder. Some seasons are on one harddisk, and some seasons are on another. It *Appears* that when I use this tool to make an edit to those shows NFO files, it only saves the tvshow.nfo to one of the folders, whereas I would expect it would save over all of them. I plan to reorganize my data to put that stuff together when I get around to it, but I'm sure I'm not the only person whose files are a bit disorderly.

[MBSki 1009]

@VicMoore No rush on this feature request, but would it be possible to allow a bulk edit for parental rating? I use parental rating to make sure my kids don't see shows and movies they shouldn't. The problem is, I have to use the "Block items with no or unrecognized rating information". That's usually not a problem, except for sports. The Winter Olympics is a great example. I added a ton of the matches, games, etc, but my kids can't see any of them because I have to first set them to a G parental rating for them to see it. Ideally I could select them all and set G parental rating for everything within the selected folder and sub-items. Below is an example. I'd like to select all of these folders and have it provide a G parental rating for the folder (i.e. season) AND the episodes within each season. Is that possible to implement?

 

[VicMoore 552]

Hawkwinter, attached is a copy to test.  I completely changed the bulk edit.  I separated it as you suggested. Please give it a try and let me know how it works.

Mbarylski.. Yes I can add that feature.

 

I think the problems with the earlier version are fixed.  Only use test data until we are sure. 

Vic

 

Edit:   I corrected a few simple bugs. The new code is below.

 

 

 

emby_new_tool_22.html

Edited April 12, 2022 by VicMoore

[Hawkwinter 11]

10 hours ago, VicMoore said:

Hawkwinter, attached is a copy to test.  I completely changed the bulk edit.  I separated it as you suggested. Please give it a try and let me know how it works.

 

The bulk edit works to delete tags already. I like that it's separated out. Much better.

But after using it and hitting save, instead of reloading and just showing me the library I was working on, it showed me the library I was working on AND the list of my libraries. So, definitely a bug.

[VicMoore 552]

Yes, that's a bug.  It's simple to fix.  I will do it ASAP.

How does everything else work?

Vic.

[Hawkwinter 11]

12 minutes ago, VicMoore said:

Yes, that's a bug.  It's simple to fix.  I will do it ASAP.

How does everything else work?

Vic.

So far I haven't run into any issues other than the libraries un-hiding, which I expect is a very tiny bug from what I've skimmed of the page's JS.

Am now integrating it with the custom UI I made yesterday.

[VicMoore 552]

Using version 22 of the code, I have not been able to reproduce the bug you reported.  Can you give me more detail about it?

Yes, you are right.  The app is a single page app that hides and shows portions of the HTML and DOM to simulate multiple pages.

Vic

[VicMoore 552]

Mbarylski...  In version 22 of the code, the parental rating works on bulk edit.  Give it a try on a few shows to confirm I am right, before you apply it to your library.  Tell me if this satisfies your requirements.

Vic

emby_new_tool_22.html

[Hawkwinter 11]

10 minutes ago, VicMoore said:

I have not been able to reproduce the bug you reported.  Can you give me more detail about it?

I also haven't been able to reproduce the bug. It happened once, and then it hasn't since.

Okay. Here's where I'm at. I merged my UI from yesterday and your new functionality. Everything *seemed* to be working. But now bulkEditBtn.onclick isn't firing. It's been a while since I worked in JS, and I am not sure where I bugged it. Could you take a look and see, and then tell me what you think of it other than my hiccup of the onclick not firing?

Everything else is running as expected as far as I can tell. Before the onclick stopped responding, I was able to switch into bulk mode inside the edit window, as well. I'll continue to try to find out why the one button has stopped responding in a bit after I get back.

emby_new_tool_22b.html

[VicMoore 552]

Hawkwinter...  great stuff.  Your CSS skills are light years ahead of mine.  I would like to integrate you CSS into the main code in steps.  I want to learn from your work.

Vic

[Hawkwinter 11]

3 minutes ago, VicMoore said:

I want to learn from your work.

Hmm.

What if we were to include it sooner rather than later, and as I refactor and organize it I can break it down for you?

Merging it all with your work this morning was actually kindof a pain in the ass.

[Hawkwinter 11]

All the page-reorganizing, and removing "style" properties that were in the way, and re-adding new classes and whatnot.

Re-merging it all back every update and maintaining two versions of it (even if just for myself) would be impractical; and going to a "only CSS, no changes to the actual html file" approach until you decide you want to start merging things would highly limit what layouts are possible, require me to write messy css like using "[style*="font-size:25px"]" and the like as selectors, putting a "!important" tag on nearly everything to make it stick (stuff I was hoping to start taking out), and would require I basically start over. And then when the time came to finally integrate things, I'd have to start over again, or simply never integrate it and keep it as a separate thing, and just accept the crappier layout options (like no popup edit window for instance - unless I go full-hog and write a greasemonkey script to use javascript to rewrite the webpage from within my browser).

Whereas if the work I've done is added in now, I can start on refactoring to make the stylesheet clean and organized and readable and easy to update.

Like, if you don't want me to touch the html file, I can leave it be, but anything I make going forward after that would not be anything I would recommend merging in, it would all need to be redone after, at least as much as I redid yesterday - and significantly more to make it clean.

So, I would rather not go the "don't touch the html file" approach if you can be persuaded otherwise. CSS code that I write for override stylesheets to use in stylus (the "don't touch the html file" approach) are pretty hack-y compared to css you write when you actually have access to the html file. It's not entirely unlike writing a greasemonkey script to change someone else's webpage, vs editing the actual webpage yourself.

As for showing you how to do stuff in CSS, that sounds like fun, and I would be happy to show you what does what.

Edited April 12, 2022 by Hawkwinter

[VicMoore 552]

What I am suggesting is that your CSS be partitioned into three or four buckets.  We add the first bucket and determine what breaks.  I need to know what the CSS is doing so I can fix the code. Once everything is stable, then we can add the second bucket, and so on.  Otherwise, it's too hard for me to maintain the code and to add the new features others request. We also need to give everyone a chance to comment on what we are doing.  The code is theirs just as much as it is ours.  Many people have contributed, and we need to be fare with them. For example, I would like to hear comments from GrimReaper and Happy2Play.

Hawkwinter, you are an amazing CSS programmer.  I am looking forward to learning from you.

 

Vic

Edited April 12, 2022 by VicMoore

[VicMoore 552]

Hawkwinter, I have been reading your CSS and I am amazed that you could create so much code in a few days.  I am learning so much from you.  Thank you...

Vic

[Hawkwinter 11]

1 hour ago, VicMoore said:

What I am suggesting is that your CSS be partitioned into three or four buckets.  We add the first bucket and determine what breaks.  I need to know what the CSS is doing so I can fix the code. Once everything is stable, then we can add the second bucket, and so on.  Otherwise, it's too hard for me to maintain the code and to add the new features others request. We also need to give everyone a chance to comment on what we are doing.  The code is theirs just as much as it is ours.  Many people have contributed, and we need to be fare with them. For example, I would like to hear comments from GrimReaper and Happy2Play.

Hawkwinter, you are an amazing CSS programmer.  I am looking forward to learning from you.

 

Vic

Ah. That sounds more doable than what I thought you were suggesting, what was more of a "lets consider adding in some of your work in a couple months or something."

Most of the CSS is more layout than functionality. The main piece of 'functional css' is the stuff that makes a separate edit window rather than needing to scroll down to get to an edit window.

I can break down my work into a couple of buckets over the next couple days and tell you what the specific changes are in each I suppose. That would be doable.

Basically these are the rough categories of CSS I did thus far:

1. Replace the colors, put spaces between tags and genres in page.Area so they break more nicely, and make line breaks break between words rather than in the middle of words. Make CSS Variables, rather than duplicating the same sizes and colors over and over. Then you can change it in one place and it updates the whole page.
2. Dynamic sizing based on window / screen size + fewer items per row on smaller screens so they don't get too small.
3. Minor repositioning tweaks, make it so it's sections of the page that scroll rather than the whole page.
4. Restructure the page to allow for a more convenient popup edit screen (a label styled as a button, that when clicked, is hooked up to a checkbox, combined with a CSS style that shows a modal overlay and an edit window based on whether that checkbox is checked) and nicer layouts rather than either scrolldown or a 2 column layout, and then make the popup edit screen.
5. Add classes to some stuff so it could be selected more cleanly.
6. Start pulling out old overwritten CSS and inline styling and replace it with proper classes and ids, to try to make it less messy and easier to read and make sense of.
7. Replace some of the JS that added 'style' properties to dynamically generated elements with JS that added 'class' properties that could be styled instead.
8. Work 1-7 back into v22.
9. Change what gets hidden when clicking the bulk edit button so it doesn't rearrange the whole page, but just changes what's in the edit window. Make the 'single edit hide' function you wrote select by class instead of id, so it could hide more than one div, like you had already done for the bulk hide / show function.
10. A failed attempt this morning at trying to get the bulk edit and the edit button to hide when it wouldn't make sense to show them (no items selected / only one item selected).

4-7 are what I worked on yesterday. The button broke when I tried to make a javascript edit (#10) for user-friendliness, but I'm not sure where I broke it. And I thought I stripped out my javascript change, but I still have javascript not executing. My javascript is still clearly rusty. 1-9 worked perfectly.
 

1 hour ago, VicMoore said:

We also need to give everyone a chance to comment on what we are doing.  The code is theirs just as much as it is ours.  Many people have contributed, and we need to be fare with them. For example, I would like to hear comments from GrimReaper and Happy2Play.

That makes sense, but you don't want to have to wait for feedback on every single line of code, and all of what I've worked on could be summed up with two update comments:
1. New responsive scaling UI roughly inspired by the Emby web UI, with quick changeable colors & sizes.
2. Edit is now a popup screen rather than way at the bottom of the page.

I tried not to fiddle with the functionality much. It's not like I made a ton of wild changes to what it could do or how it did it. In no small part because it's been like 8 years since I worked with JS. Like. JS / PHP / CSS / SQL / HTML used to be my dayjob, but that was back in 2014. I never stopped using CSS because other people make webpage layouts I find hard to look at (like the bright eye-bleedingly bright palette of this forum that I've replaced with a variety of dark greys), and I have a habit of replacing them in my browser if I'm going to spend any time on their website. 

I will go back to your base v22, and redo this stuff sequentially piecemeal, uploading the re-styling updates in sections, for feedback and the like. 

Edited April 12, 2022 by Hawkwinter

[Hawkwinter 11]

Easy "Feature Requests":

The playlist and collection management features when you open the player. I havent tested them, but if they work - those seem like they would be handy features while you're in the metadata manager as well.

Likewise, seeing tags and genres while in the client might also be appreciated by people. It's definitely something that the official emby client doesn't do. The former I would make use of personally.

Edited April 13, 2022 by Hawkwinter

[VicMoore 552]

Hawkwinter, the playlist and collection elements of the simple Emby client do work, otherwise I would not have left them in the code.  I didn't include them in the editor because they were not part of the Emby metadata. 

The tool is divided into two parts.  The first, and most important part, is the metadata editor. This is the part that many people have contributed to and use.  The second part is a simple Emby client that's included just for fun.  It illustrates how to use many of the features in the Emby API, like using HLS to play videos, building playlists and collections, getting background images from tags, and much more. It's just a sandbox not a tool.

I appreciate your comments and suggestions.

Thanks, Vic

emby_new_tool_22.html

[VicMoore 552]

Hawkwinter, I studied your CSS yesterday and learned a great deal from it.  In your list of things to do, the first two would be a good place to start.

1) Replace the colors, put spaces between tags and genres in page.Area so they break more nicely, and make line breaks break between words rather than in the middle of words. Make CSS Variables, rather than duplicating the same sizes and colors over and over. Then you can change it in one place and it updates the whole page.

2) Dynamic sizing based on window / screen size + fewer items per row on smaller screens so they don't get too small.

By the way, the reason I allowed breaks within words is that some individual names were longer than the width allowed. When this happens the name runs over the adjacent item.

On another topic, I think that when you created the modal you changed the scope of the variables within it. Afterwards they could not be found by the outer code.  

Vic

[Hawkwinter 11]

2 hours ago, VicMoore said:

Hawkwinter, the playlist and collection elements of the simple Emby client do work, otherwise I would not have left them in the code.

There are a few things I've noticed say ("Not Implemented") next to them, and many features I haven't tried out yet, so I wasn't sure.

2 hours ago, VicMoore said:

I didn't include them in the editor because they were not part of the Emby metadata. 

The tool is divided into two parts.  The first, and most important part, is the metadata editor. This is the part that many people have contributed to and use.  The second part is a simple Emby client that's included just for fun.  It illustrates how to use many of the features in the Emby API, like using HLS to play videos, building playlists and collections, getting background images from tags, and much more. It's just a sandbox not a tool.

I get that. It wasn't a lack of understanding of how it's currently organized or a wild and crazy idea.

I was simply suggesting a slightly different perspective and division of the parts. Rather than separating out "Metadata Management" from everything else, grouping all of the "Library Management" functionality (which I think more people are interested in) together, rather than having the playlist and collection-based library management only on the "Emby Client". side.

2 hours ago, VicMoore said:

The second part is a simple Emby client that's included just for fun.  It illustrates how to use many of the features in the Emby API

It's kindof neat, but I would agree, more of a novelty than anything. I'm not dissatisfied with the emby web client (though I wish it featured tags and genres more openly, listing them under library items as your tool UI does).

2 hours ago, VicMoore said:

It's just a sandbox not a tool.

Mostly agree, but playlist and collection functionality is useful library management tool stuff. They'd also be great in the filter panel. I used to filter shit by collections while managing my metadata in Plex, it was handy. And being able to add and remove things from collection (less so playlists) would be convenient in the editor as well. Especially if it was like tags where it would give you a list of all the collections the item is in, something Emby doesn't really do very conveniently, you need to go inside each collection individually if an item is in several collections. I found many of my collections are all about library management (Those collections I put at the front), especially because they hide the item from the list. It's how I tend to mark parts of my library as needing work so I don't forget.

Examples of how I use Collections to mark things for library management tasks that need to be done (I had the library before I got Emby, and a lot of the Library is in disarray in Emby as a result, with lots of things to do):
(Note the invisible white spaces at the beginning which makes it sort first alphabetically. A useful trick. I used to start things with punctuation to make them sort first, but I like this better)
"Misfiled" collection, means it's in the wrong library and I need to move the folder.
"Broken Subtitles" collection , means I probably have to replace the srts, but there's something wrong.
"Fix Match" means Emby failed to detect the show, I need to do whatever I need to do to fix them. Maybe there's something wrong with the filenames. Or maybe I just need to run through identify.
"Missing Episodes" collection, means an item (generally a season) is missing episodes, or I'm missing a season.
"Out of Order" collection, means an item plays the episodes in the wrong order and I need to troubleshoot why.
"Broken Metdata" collection, means I've discovered the metadata didn't scrape right automatically even though the thing was properly identified, requiring me to troubleshoot.
"Maybe Delete" collection, stuff I'm seriously considering deleting.
"Mismatched Subtitles" collection, somehow it's playing subtitles for the wrong episode entirely.
"Wishlist" collection, some stuff I don't have (empty folders) that I want to give myself a reminder to get and add to the library.

[Hawkwinter 11]

... Chrome ate my damned post. So this will be a much shorter reply than the page of neatly organized paragraphs I had written the first time around.

2 hours ago, VicMoore said:

Hawkwinter, I studied your CSS yesterday and learned a great deal from it

Thanks! Glad to hear it was helpful.

 

2 hours ago, VicMoore said:

I think that when you created the modal you changed the scope of the variables within it. Afterwards they could not be found by the outer code.  

I had it working after I created the modal window. It broke when I tried to write some new code to auto hide elements that didn't apply based on the number of items selected. The edit button I made, the bulk edit button, and I stupidly didn't back up the file first. I suspect I added an extra bracket or deleted an extra bracket. Those are some of the most annoying errors to hunt down. But since I'm starting over now, there's no reason to try to hunt down where it broke.
 

2 hours ago, VicMoore said:

the reason I allowed breaks within words is that some individual names were longer than the width allowed. When this happens the name runs over the adjacent item.

I haven't tested it with really long tags yet, but I found it was never breaking between words, even after I added spaces. I'll be sure to test with some really long tags and see if I can come up with a solution that works well for both normal tags and tags that are a single really long string without spaces.

 

2 hours ago, VicMoore said:

the first two would be a good place to start.

Yep. Already have, and I came to the same conclusion. When I finish styling everything on the editor side in that basic way I will upload what I have. I've broken some convenient settings into a "settings.css" that the user can easily tweak without worrying about breaking functionality. They can pick the color palette, change the font size, and set a wallpaper image if they want.

 

Here's where I'm at in redoing the CSS from starting over.

I need to position the contents of the login panel better, but mostly good.

 

The main library view still needs some work but it's coming along.

 

I've also started playing with highlighting selected items using image filters rather than borders, and some other ideas. It's a start, but it needs more polish.

 

I haven't gotten to the metadata edit control panel again yet, aside from universal elements I covered when working on the login panel like the bugger buttons.

[VicMoore 552]

Looks good. I am looking forward to seeing your results.  One thing I noticed is that the white borders for selections was not as clear as the previous red borders.

Vic