Video-hub-app: Manual Tagging!

[cal2195]

This issue is to discuss and implement the much requested feature - manual tags! 💯

Some implementation ideas I've had:

1) We can add a tags: attribute to the ImageElement object to save the tags with each file.

2) Special tags can be used for "Starred" videos etc. They can piggy back off this with a tag of starred.

Ideally it should be as easy as possible to add many tags, to many videos!

Feel free to add additional ideas/info below! 👍

[whyboris]

Great to have a public place to share thoughts on this large feature.

The biggest hurdle for me with tags has always been the _UI_ (user interface) -- adding tags to an _ImageElement_ in code is super simple; so is searching through tags. But getting a clean interface / process for adding tags is not obvious.

Some features that would be nice to have:

• auto-complete (in case a tag already exists, suggest it)
• drag-drop (move tag onto a video would add the tag

UI questions:

• removing tags (when / where / can you remove a tag from all videos or just one at a time?)
• viewing list of all available tags (maybe a horizontal tab at the bottom of the gallery?)
• adding tags (dragging? typing? can you apply a tag to all results shown on screen?)

Possible solutions:

• a special "edit tag" view (in addition to _filmstrip_ and _thumbnail_ views) - it would show all videos as the _thumbnail_ view does, but only show one video per row. The folder/title of the video would be on the right side of the thumbnail, as would be all the tags and other metadata (possibly "number of times viewed", "star rating", etc).

I'm happy to implement the "edit tag" view first as a place where all the tags can go (along with a rudimentary "add tag" field). Adding a filter (search) on the left bar that searches through tags is super simple (can be first done without auto-complete). All other pieces (and solutions to problems) can be added later.

Any thoughts on this rough outline of how to get started?

[cal2195]

That sounds like a very good initial implementation! 👍 We can improve things later on anyway!

One feature I'd really like is the "tagging all results on screen" - I'm already planning on adding features to move/delete/mark all files on screen, so being able to tag them too would be very nice!

One use case for this would be to search for all the files you want to move/delete using the excellent filtering system, tag them as "to delete", do it a few more times! Then show all "to delete" tagged files, and delete them!

It would also allow for tagging many files, that may be under a different name you want to change!

[cal2195]

Not sure how you're planning on implementing the tags, but this seems very flexible and has autocomplete/drag and drop features! 💡
https://www.npmjs.com/package/ngx-chips

[whyboris]

I'm loving the ngx-chips - would shave off many hours of coding 🎉 - I'll investigate 👍

[cal2195]

Some more thoughts:

1) User entered tags, and auto generated tags should be different colours (green and blue for example). Possibly with user entered tags first.

2) When displaying results, there should be the option to prioritise user entered tags (this can go with the more sorting options task). This would make the tags more useful for when you have lots of auto generated tags.

[whyboris]

It _would_ be simpler from the coding perspective to have two different views - the auto-tags and manually-added tags. It's hard to know which the users would prefer.

One option is to delay making any decisions until the tags are implemented (the location where the tags are stored in the .vha file isn't going to be different either way). The tag search will be added either way. And the auto-complete might make things good enough before we need a screen for all the tags.

I like the idea of having them intermixed with auto-generated tags, but I guess we can just experiment and see how it all works out later.

I had originally thought the manually-added tags would be in a slide-out tab from below (we're running out of user interface space 😛 ) which would allow for swift selection. But it depends on how many tags people intend to have. With few, this approach is good. With many, perhaps it would be better to be a part of a modal that takes up most of the screen.

Thank you for sharing ideas - the more people join in on this discussion the better 👍

[cal2195]

Just to confirm, are you talking about selecting tags for searching/adding, or tags displayed beside each video in the tag view? I was talking about the latter!

I can mock up the idea to bounce off! 😄

[cal2195]

This is along the lines of what I was thinking of!

Where yellow is a special tag, green are user added tags, and blue are the auto tags!

And display of these tags can be controlled with the same options as I mentioned in #13!

[whyboris]

I see what you mean! Cool! I was thinking you were recommending adding the manually-added tags to the view with all the auto-extracted tags.

I think in the first step the manually added tags will only appear in the special "details" view. Once it's there it will be easier to experiment and see how things look / behave / feel.

I don't want to come off reluctant - I like the discussion, I'm just unsure if at this stage I'd want to commit to any proposal. Since the choice to add this in later won't be affected by how we build the first feature, we can work in order.

Do feel free to add more ideas -- I like the approach of "yes and" rather than "no but" 👍

[whyboris]

I tried out ngx-chips - it's super easy to set up out of the box:

But we'll be doing certain things like drag-to-add (not drag-to-move) a tag which then might be a headache to hack into this library. I also prefer to have a typeahead rather than a dropdown list. So I'm going to try building everything custom (except perhaps the drag-drop feature which might work out well with ng2-dragula). I should have some time on Saturday to see how far I get on my own 😅

I'll keep the ngx-chips branch around for a bit in case my manual approach fails.

[whyboris]

Manual tagging seems pretty straight-forward -- manual-tags branch.

I'll work more Saturday 😄

[cal2195]

Looking great! 😄 Can't wait to try this out! 💯

[whyboris]

Got the first draft ready: #104 🎉

Unless you find bugs - it's a "release ready" feature, but it can be improved:

• alphabetize the tags list
• include a view of all current existing tags
• make clicking the tags actually search for the tags :trollface:

Once this lands you'll be able to update #73 -- sorry I've blocked it for so long 😓

[whyboris]

Since there are many things to work on - I'm going to call this feature mostly finished. The last few items before I close the issue:

• [x] make clicking on any of the tags add it to the tag filter and update the view (a super-simple change).
• [x] pick a better looking color for tags, and likely increase the size of all the tag elements (they are rather small to read, right?)
• [ ] add a tag filter that auto-completes (unlike the standard filters in the sidebar).
• [ ] _possibly_ allow drag-drop from the _tag tray_ onto a video file - but that's after the above 3 are done.

More can be done with tags, but I'll delay those initiatives until we've resolved the things that are definitely blocking the release and added other features we really want.

Please comment if you think I've forgotten anything, or there are other aspects of manual tags that we _should_ include in the release 👍

[whyboris]

I see above you had ideas about including _auto tags_ in the tags view. That's possible, but I would prefer that's left for later (after the release, or at the very least when the higher priority tasks are done).

The way things are set up at the moment, it would be much easier (as far as I can tell) to have auto-tags shown separately as its own list rather than intermixed.

[cal2195]

Regarding drag-drop tags, I personally don't see as much use for it compared to autocomplete when typing - I think it could be left for now anyway! 👍

And with the auto-tags in the tags view, I don't think it would be too much of a change, other than disabling the removal of the auto tags (for now) - clicking on them should have the same effect! I can experiment with the idea later anyway! 👍

Great work! 💯

[cal2195]

I have an idea for adding all the tags to the detail view:

Create a tag service, that you give an index, which will return:

• Manual tags, if enabled, with allowRemoval=true, colour eg. green
• Auto file tags, if enabled, with allowRemoval=false colour eg. blue
• Auto folder tags, if enabled, with allowRemoval=false colour eg. yellow

We then use these tags to populate the detail tag element! Click on any tag results in the same action - add it to the "tag filter"! 💡

Thoughts?

[whyboris]

The tag service & color coding seems doable.

I think because I have so many items to do before release (#102) I'm eager to polish everything off there first before adding yet another feature 😓
I have a day off on Monday so I'll have almost 3 days starting now to make some progress.
I've gunked up the code with a lot of quick hacks, so I'll spend some time decluttering it 😅 and after we could revisit.

Of course -- if this is a feature you'd really like I won't stop you from working on it. Always choose whatever task brings you the most joy 😁

ps - Have you heard of Marie Kondo and her approach to cleaning one's house? She recommends "look at each item and ask yourself _'Does this bring me joy?'_ and throw it away if not. Perhaps there's some good advice there for my code 😛

[whyboris]

@cal2195 you've done amazing work with #116 - I'll call this issue closed.

Let's create another ticket to track future discussions & ideas once we have them 👍