Adding clip duration to Events View #4133
Conversation
There was a problem hiding this comment.
Happy to hear what others think, but my thoughts are:
- having the end and start time as well as duration in seconds is redundant.
- Maybe an option in the config could do one or the other so users have a choice
- Just doing seconds is fine for short events but when you have events for a parked car
6372sis not super intuitive, might be nice if it was broken into a separate function and formatted ash m s
Thanks for you fast reply!
|
|
I would rather not end up with a bunch of config options that modify the UI. Let's just show the start time and the duration. That should cover the vast majority of needs. |
|
Sounds good to me, @banthungprong in that case can also move the duration down to the other time fields since there won't be an end time 👍 |
|
I formatted it like this (hours/minutes only shown if not 0), using a new function clipLength(): |
web/src/routes/Events.jsx
Outdated
| if (hours == 0 && minutes == 0) { | ||
| length=`${seconds} Seconds` | ||
| } else { | ||
| length=`${minutes} Minutes ${seconds} Seconds` | ||
| } |
There was a problem hiding this comment.
What if we used abbreviations instead?
| if (hours == 0 && minutes == 0) { | |
| length=`${seconds} Seconds` | |
| } else { | |
| length=`${minutes} Minutes ${seconds} Seconds` | |
| } | |
| if (hours == 0 && minutes == 0) { | |
| length=`${seconds}s` | |
| } else { | |
| length=`${minutes}m ${seconds}s` | |
| } |
There was a problem hiding this comment.
I like that but I'm not 100% sure what that means for translations... Is m and s really international (thinking about Asian languages, etc)?
web/src/routes/Events.jsx
Outdated
| @@ -459,7 +474,7 @@ export default function Events({ path, ...props }) { | |||
| </div> | |||
| <div className="text-sm"> | |||
| {new Date(event.start_time * 1000).toLocaleDateString()}{' '} | |||
| {new Date(event.start_time * 1000).toLocaleTimeString()} | |||
| {new Date(event.start_time * 1000).toLocaleTimeString()} <span className="text-red-300">({clipLength(event.end_time - event.start_time)})</span> | |||
There was a problem hiding this comment.
I don't think we want to color the text here, the red doesn't mean anything but it could imply an error or some other meaning which isn't important as it is just the duration.
There was a problem hiding this comment.
- red: correct. Simply took the color from the original request. Will remove it.
- Abbreviations are ok for me here. But: In the Recordings View "Minutes"/"Seconds" are used (RecordingPlaylist.jsx). I assumed it would be better to use the same formatting in different views.
- in RecordingPlaylist.jsx functions from "date-fns" are used. So I will do the same here - stupid to implement something new if you get it for free...
- When a clip is new, the end time and duration is still "in progress". So I got negative Integer as results... The solution was already in the RecordingPlaylist.jsc.
✅ Deploy Preview for frigate-docs ready!
To edit notification comments on pull requests, go to your Netlify site settings. |
|
I found a "stupid" mistake. Switched start/end time in the function call. Found this when using a docker image based on this branch. |
banthungprong
changed the title
* Adding clip length in s to Events View * added function returning human readable length * switched to date-fns functions for formatting * fixed switched start/end time, changed length to duration
Issue #3813
(I'm not sure if this is the correct workflow, but I try...:
In the GitHub Docs it should be possible to manually link an issue to this pull request via the Development in the sidebar. Is not possible here).
Simply added the difference between end and start time as a span-Block.
And in the next div after the Start-Time the End-Time.