Timeline UI

[salah-walid]

Fixes: #326

@gBillal don't be alarmed by the amount of changed files 😆, mostly node package.lock and migrate some packages (heroicon) to use npm packages

[gBillal]

Thanks @salah-walid for the PR.
I'll start with one thing because I think you misunderstood the issue that you linked in the PR. That issue (or schedule component) is not for dashboard (streaming videos) it's just a schedule to select dates to use for example in selecting the dates when the nvr should record videos or get snapshots (like in admin)

For the video interface I have a different UI in mind, however I'll accept a simple one like a mini version of @halimb timeline in dashboard. Just a straight line that you can scroll and zoom in both directions.

Btw if you want an inspiration on the timeline for video, you should check Giraffe or NxWitness UI.

[gBillal]

@salah-walid please rebase this branch on master.

[halimb]

@gBillal @salah-walid for a V1 of the schedule picker, an HTML table + some JS can do the trick

table.mp4

[gBillal]

@halimb I discussed with @salah-walid about the timeline, we're good with this PR. So once we have the timeline working with vue3 we'll merge it.

[gBillal]

• When there's no runs

• When there's a new recording, the timeline update itself to a predefined destination, it doesn't respect the position where you are which is a little bit annoying.
• When hovering over the green bar it shows the start date and end date of that run, it would be nice to see also the timestamp of the cursor so to click exactly on the time you want.
• The space between the timeline and the player is unnecessary (at least it seems that way to me)

[gBillal]

@salah-walid some issues that needs a fix:

• When clicking on the green bar it sends the wrong time for streaming (it sends a time without timezone, either convert to UTC and sent it or send a datetime with timezone)
• When there's a new recording, the timeline update itself however it'll not stay in your current position. Is there a way to lock it.
• When I start recording for a new camera in a timezone other than utc (for example Africa/Algiers), it'll zoom in the date time in UTC and no green bar is shown until you zoom out.
• When hovering around the green bar, don't show the run start date and end date (not interesting tbh), show the date time.