Overhaul gallery to allow "infinite" events / recordings with filtering

[bagobones]

Is your feature request related to a problem? Please describe. On mobile I am finding the slide out drawers frustrating, the default left side doesn't work I always seem to touch the HA left menu and right is only a little better. The event drawer is also only as tall as the video and not detailed.

Describe the solution you'd like I would like a view that is just a detailed event list like the native Frigate UI has with date and tag filters. Just a long never ending list so I can scroll back through events and then quickly view, not a slide.

Something easy to navigate on mobile, and easy to launch a snapshot or video then flip back to the list where I left off.

Describe alternatives you've considered Figure out how to setup the proxy to expose the native frigate UI outside my network, but I would prefer to stick with the integration and custom card.

[dermotduffy]

Thanks for the feedback @bagobones .

On mobile I am finding the slide out drawers frustrating, the default left side doesn't work I always seem to touch the HA left menu and right is only a little better. The event drawer is also only as tall as the video and not detailed.

Yes, I think I should move the default position of the drawer to the right hand side. Also adding it above, or below, would presumably fix your issue?

I would like a view that is just a detailed event list like the native Frigate UI has with date and tag filters. Just a long never ending list so I can scroll back through events and then quickly view, not a slide.

How does this differ from the gallery view that is already in the card? Seems to be just the filters? If I'm missing something, please include a screenshot of what you think it should look like.

[bagobones]

Also adding it above, or below, would presumably fix your issue?

Creates some issues when viewing the card with the phone tilted to the side, also it is a really long swipe list when you are on the timeline view.

How does this differ from the gallery view that is already in the card? Seems to be just the filters? If I'm missing something, please include a screenshot of what you think it should look like.

In Short I would like a LONG scrolling list full screen like the frigate web UI events list, with the same filters. Not a short list to scroll right and left or a short list only as tall as the live view.

What is missing from the HASS card?

When viewing ALL cameras on the timeline view...

• Date (only time is displayed)
• Camera Name
• Zone names / tags

Have it appear as a full screen list like the frigate web UI list with filters, basically another view like timeline view but a list with all the details in order with filters.

[dermotduffy]

When viewing ALL cameras on the timeline view...

Sorry, I'm confused and don't see what this has to do with the timeline => Are you looking for this behavior in it's own view (like the gallery), or in the thumbnail drawer that we see in the timeline / media_player?

I think this is a path to get you what you want:

• Thumbnail drawers / carousels stay exactly as they are (short-list of most recent).
• Change the existing gallery view. Instead of being a list of the 50 most recent events + drilldowns, it's a dynamically-loading "forever-list" that will let the user keep loading events until there are none left.
• It has filters by camera, zone and label at the top.
• It shows label and zone per event.

Is that right? Please be extremely specific, or even better draw a picture ;-)

[bagobones]

Sorry, I'm confused and don't see what this has to do with the timeline => Are you looking for this behavior in it's own view (like the gallery), or in the thumbnail drawer that we see in the timeline / media_player?

The drawer shows events from ALL cameras in the timeline view thus the drawer not having the name of the camera kind of sucks. Also the drawer is only as tall as the card, IE https://github.com/dermotduffy/frigate-hass-card/issues/828 so the drawer never uses vertical space on a phone well.

I think this is a path to get you what you want:

• Thumbnail drawers / carousels stay exactly as they are (short-list of most recent).
• Change the existing gallery view. Instead of being a list of the 50 most recent events + drilldowns, it's a dynamically-loading "forever-list" that will let the user keep loading events until there are none left.
• It has filters by camera, zone and label at the top.
• It shows label and zone per event.

If the timeline view used all vertical space, had filters, and the drawer had dates zones etc, then yes that would probably work.

Is that right? Please be extremely specific, or even better draw a picture ;-) Give me a filterable detailed list that fills the vertical space on my phone so I can scroll though MANY event easily. I may try to make a mock up but that is basically it.

[dermotduffy]

If the timeline view used all vertical space, had filters, and the drawer had dates zones etc, then yes that would probably work.

Apologies, but this request continue to be insufficiently specified and/or contradictory to be confident I can implement what you want (e.g. my proposal specifically said the drawer would not change in any way, I never mentioned adding filters to the timeline view -- only the gallery, yet you refer to both above).

It would be much easier if you could provide a screenshot of the existing card, with how you want it to look drawn roughly on top. Thank you for understanding.

[bagobones]

It would be much easier if you could provide a screenshot of the existing card, with how you want it to look drawn roughly on top. Thank you for understanding.

No problem, also maybe i am missing something in the features the card already has that is closer to the what I want?

Your screen shot shows the "Snapshots Gallery" highlighted but with a list view? I only have a thumbs view?

I will go back and maybe try to visualise this. Unless you can explain in config terms

[bagobones]

Mobile optimized list:

• Uses full width of phone
• Used full height of phone
• small date and zone filters at the top to quickly jump to a specific day and then filter the relative events just like the frigate web UI event list but maybe more compact. (this stays always at the top the list scrolls under it)
• Each event contains the Object name/ DATE / TIME / Zone
• the cards menu (shown as bottom) is always on screen and not pushed off the bottom the list scrolls under it
• tapping on an item would switch to showing the video (similar to the current timeline view)
• There is also a download option for each event that doesn't take you away from the event

WHY? Sometimes events happen at a specific time but span several cameras, IE if I have a zone called front_stairs I might want to see all views that contain that zone and the events.

Also when things are busy on one camera MANY thumbnails / events can be generated, having a long list is sometimes just faster than watching the clips especially if the clip is long.

[bagobones]

This type of card view may also just be nice on a large desktop camera HA view, where you might want to put several HA cards of single cameras but have one card that is an all camera event list.

[dermotduffy]

This will be a significant overhaul of the gallery interface and underlying view system, including:

• Internal: Entirely removing dependency on the HA integration for event browsing (only websocket will be used).
• Internal: Allowing views to support a previous() and next() call to 'generate' more media to show, giving the appearance of an infinite list.
• Internal: Media and thumbnail carousel automatically showing when new media is being loaded.
• Internal: Support gaps in dataManager ranges (e.g. if the user skips back 1 month and shows 1 day, the dataManager should not load the entire month).
• Internal: Split dataManager by class, e.g. viewing the gallery of recordings should not require fetching the segments until the video are actually loaded outside the gallery.
• External: Filtering by type (event / snapshot / clip / recording), zone, label.
• External: Filtering by time (e.g. calendar interface).
• External: Improve the amount of information show on thumbnails.
• External: Add download button to thumbnail.

Upsides:

• Much more intuitive (keep scrolling back in time forever, use calendar to 'zoom' to the interesting time).
• Does away with dependency on the integration media_source (complex code).

Downsides:

• Gallery drilldown 'folders' will be gone (filters available instead).
• A lot of work.

[dermotduffy]

This is now substantially complete and will be in the next build.