feat: Timeline UI — First Iteration

[johnmarksilly]

Timeline UI

Created a new "experimental" UI for viewing events and live camera views

To be completed before PR is ready

• Investigate using the recordings framework for faster loading (load segments instead)
• Add config for using new UI
• Update docs
• Handle no events for today
• Load first timeline entry (most recent) and scroll to that event
• Play/Pause + disable arrows on end indices
• Placeholder sizing while video is loading to reduce "buggy" looking element + missing image
• Move timeline while video plays (timeline will be disabled while video is playing)
• Add global padding back to pages (except new route)
• Make sure change complies with dark mode

For the history books: #2633

[johnmarksilly]

@blakeblackshear I think this is ready to re-run

[blakeblackshear]

I am going to go ahead and merge this in. I decided to overhaul a bunch of the frontend in another branch, so I will fixup any issues I find when rebasing.

[jcastro]

How do I see this UI? I'm on 0.11 beta-2. I couldn't find anything on the docs either. Thanks!

[NickM-27]

How do I see this UI? I'm on 0.11 beta-2. I couldn't find anything on the docs either. Thanks!

You have to add

ui:
  use_experimental: true

In the config, then open a camera

[NickM-27]

@user897943 here are some screenshots from my dev setup

[NickM-27]

Good job anyway, can't wait to see how you improve that going forward :)

To give credit where credit is due, @johnmarksilly is the author of this feature as it is now, but I believe there will be improvements to it 👍

[jcastro]

@NickM-27 @johnmarksilly I gave it a try and looks like the video is not playing on the history tab, at least on Chrome and Firefox under macOS. It works okay on my iPhone using Chrome tho. Not sure if it's a known bug but just wanted to let you know

[BBaoVanC]

Just now tried out the 0.11.0 beta and I'm also having trouble playing video in the history tab.

Where it will play:

• Android, both Chrome & Firefox
• iPhone, Safari
• macOS, Safari

Where it won't play:

• Linux, both Chromium and Firefox
• macOS, both Firefox and Chromium

The error I get on the devices where it doesn't work is along the lines of (taken from Firefox on Linux for example):

Cannot play media. No decoders for requested formats: application/vnd.apple.mpegurl

[johnmarksilly]

Just now tried out the 0.11.0 beta and I'm also having trouble playing video in the history tab.

Where it will play:

• Android, both Chrome & Firefox
• iPhone, Safari
• macOS, Safari

Where it won't play:

• Linux, both Chromium and Firefox
• macOS, both Firefox and Chromium

The error I get on the devices where it doesn't work is along the lines of (taken from Firefox on Linux for example):

Cannot play media. No decoders for requested formats: application/vnd.apple.mpegurl

Fix PR is on the way:
#3298

[vertex-github]

👍 This looks (and works) great. Working really well on Windows 10 / Firefox with all my cameras. The only thing I would tweak would be to also show a long timeline activity timeline - the current view seems to show an hour - it would be helpful if I could get an at-a-glance overview of events for the last N days (perhaps displayed below the current play buttons). If I could click on that timeline to quick jump to different days it would be awesome.

Also, would be helpful if the log output acknowledged the experimental setting - I wasn't sure it had taken after I added that to my config and restarted.

[vertex-github]

One issue I just noticed: If I look at camera A in the history timeline, then select Camera B, the history timeline is not loaded correctly if there is no active event at the same point in time for Cam B. I have to click "Live" then back to "History" and then the history is loaded correctly and the control jumps/scrolls to the most recent activity marker

[eatoff8]

Just trying out this new experimental UI today. Doesnt work on chrome or edge on my PC, but works fine on my phone (I understand there is a fix coming).

The events work fine across all cameras, but it appears I can only view events. As in my cameras that are constantly recording - I cant view the full timeline using the experimental UI, I have to go through via the recordings to view that. Is that a bug or is this working as intended? It would be great if it could be used to view both.

[johnmarksilly]

Just trying out this new experimental UI today. Doesnt work on chrome or edge on my PC, but works fine on my phone (I understand there is a fix coming).

The events work fine across all cameras, but it appears I can only view events. As in my cameras that are constantly recording - I cant view the full timeline using the experimental UI, I have to go through via the recordings to view that. Is that a bug or is this working as intended? It would be great if it could be used to view both.

It is not a bug, but just not included. I also record 24/7 and my timeline works by pulling up the recording instead of the events individually. I haven't published this change yet because I haven't yet wrote the code to check if you have 24/7 recordings enabled or not.

There is an open pull request to merge in a fix for the other browsers.

[craigmdennis]

What happened to this? I see no reference of the experimental UI in the main repo anymore.

[NickM-27]

What happened to this? I see no reference of the experimental UI in the main repo anymore.

It's still in release-0.11 which is in RC and hasn't been merged to master yet

[craigmdennis]

Sometimes I wish there was a facepalm emoji reaction.

Thanks!

[Buster14]

+1 for this, wife really like milestone xprotect's android timeline, it's the only reason I keep my windows vm.
Really helpful for non-tech savvy people. Is there any plan to implement this to the android app?

[NickM-27]

Is there any plan to implement this to the android app?

There is no official android app, can't say about the community app.

[ericnotthered]

I'm sure I'm going to do a facepalm as well, but I'm running 0.11.1 and I don't see the "History" option. :(

This is using MS Edge on Windows 11.

Any guidance would be appreciated. I'm pretty new to Frigate, so please be gentle. :)

[NickM-27]

@ericnotthered this feature is experimental. You must enable it, see the 0.11 release notes on how to do so

[NickM-27]

If you enabled it and it's still not working, be sure to hard refresh the browser.

[ericnotthered]

Thanks for the help and the quick response. I just checked out the release notes but couldn't find the reference to how to enable it. It's ok though. If it's still experimental, I can wait until it matures.