Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feat: Viewing recorded events on Montage page #4140

Open
wants to merge 48 commits into
base: master
Choose a base branch
from

Conversation

IgorA100
Copy link
Contributor

@IgorA100 IgorA100 commented Sep 18, 2024

This PR should be considered as an Alpha Beta version for now. There are many comments here, including some NOT in English. There is also debugging information.
It's easier for me to finish this project.
Naturally, I will gradually put the code in order.
Isaac, I hope you don't mind?

Known issues at the moment:
- Double click does not work on mobile devices
- If the last recorded event is recorded incorrectly, then nothing will be displayed. That is, you need to add an analysis
- "command:CMD_MAXFPS" does not work for playable events
- "If you pause Event, the static image disappears after a while. The same thing happens on the Event page. Probably, you need to send some command (except CMD_QUERY) with some frequency.

Closed #4036

@connortechnology
Copy link
Member

I have concerns about this vis.js based stuff... mainly about it not being maintained. Are we sure this is the right library to go with? I've done timelines with apexcharts and chart.js.

@IgorA100
Copy link
Contributor Author

  1. I have been testing vis-timeline for a long time and I have not found any critical problems. It suits our tasks well enough and is flexibly configurable. I have been looking for a good Timeline for a long time, but I could not find anything better. vis-timeline has very good time navigation (zooming) that allows you to select the start moment with an accuracy of seconds.
  2. A few months ago I wrote that I was planning to use vis-timeline https://forums.zoneminder.com/viewtopic.php?t=33288 but I did not see a warning about its use.

@IgorA100
Copy link
Contributor Author

@connortechnology
Ready for testing.
Please, check please
I hope I have made all the changes in this PR.

@IgorA100 IgorA100 marked this pull request as ready for review September 20, 2024 13:49
@IgorA100
Copy link
Contributor Author

There's no point in paying attention to ESLint right now.
If you're happy with it, Isaac, I'll be grateful and clean up the code.
If you're categorically unhappy with my PR, well, that means I was very wrong...

@connortechnology
Copy link
Member

There is something wrong... live works but in recording doesn't. The video goes away leaving just the timeline.
I would add some margin space to right and left of the timeline.
The speed control is a duplicate of the Rate in the header
Not sure what the difference is between the stop and pause buttons.
Not sure about purple for the timeline indicator... I think one of the already in use colours might be better.

@IgorA100
Copy link
Contributor Author

IgorA100 commented Sep 20, 2024

There is something wrong... live works but in recording doesn't. The video goes away leaving just the timeline.

There are no errors in the console?
Could you take a video of the problem?

I would add some margin space to right and left of the timeline.

These are small things... I'll add 5px

The speed control is a duplicate of the Rate in the header

Not quite so....
"Rate:" in the header - used for live viewing. (When viewing a recording, it should probably be hidden)
"Speed" under Timeline - for viewing in a recording.

Not sure what the difference is between the stop and pause buttons.

"pause" - pauses playback (sends the CMD_PAUSE command). When you click "Play" - playback starts immediately without delay
"stop" - It was assumed that the CMD_STOP command would be sent, but it does not work yet.
In addition, the division into "pause" and "stop" is used in other algorithms.

Not sure about purple for the timeline indicator... I think one of the already in use colours might be better.

purple - this is essentially the event frame.
The event itself is green.
The frame is needed for visual control where one event ends and another begins.
Archived events are orange and have a red frame.
Events longer than 20 minutes have a red background. As a rule, these are some "frozen events". I decided to highlight them. Why did I choose 20 minutes? I don't know, probably based on the fact that no one will write events for more than 10-15 minutes. This is all discussed.....

TimeLine scaling - "Shift + mouse wheel. I did not create buttons. I don't know if they are needed?
TimeLine panning - grab with the mouse and drag up, down, left, right....
If you click on an event on TimeLine while holding "Ctrl", a new window will open with a view of the recorded event.
If you double-click on TimeLine, the playback of events will start from the place where you clicked.

"Ctrl" + double click on TimeLine - will create a time marker at the click location. It can be moved. When you press the "Play" button, playback will start from the place where the marker was. When you pause, a marker will also appear that can be moved.

@IgorA100
Copy link
Contributor Author

I think one of the already in use colours might be better.

This is all up for discussion.

I didn't really choose the colors on TimeLine, I used relatively contrasting colors.

I'm most interested in the fundamental question of this PR. Will you like this PR or not.

@IgorA100
Copy link
Contributor Author

There is something wrong... live works but in recording doesn't. The video goes away leaving just the timeline.

Very strange.
I tried to apply this PR on another server of mine and everything worked fine.
I made a small fix 705115c but it should not affect the disappearance of the video.

@IgorA100
Copy link
Contributor Author

I would add some margin space to right and left of the timeline.

Done 873d715

@IgorA100
Copy link
Contributor Author

IgorA100 commented Oct 2, 2024

Are there any errors in the console?

@IgorA100
Copy link
Contributor Author

IgorA100 commented Oct 2, 2024

#monitors is empty.

The thing is that it is filled in the same way for both modes (Live & in Recording)
blockMonitors.html(data.monitors);
data.monitors is generated via AJAX

@connortechnology
Copy link
Member

Nothing relevant. Just failed ajax status requests.

@IgorA100
Copy link
Contributor Author

IgorA100 commented Oct 2, 2024

Just failed ajax status requests.

Is there a bug in the console or did you find the reason?

@IgorA100
Copy link
Contributor Author

IgorA100 commented Oct 2, 2024

@connortechnology
Try pressing "InRecording" and then refresh the page "Ctrl+R"

@connortechnology
Copy link
Member

No difference after reload.
No errors in console but:
initTimeline_monitors=>
[]
length
:
0
[[Prototype]]
:
Array(0)

@IgorA100
Copy link
Contributor Author

IgorA100 commented Oct 2, 2024

Got it, it's strange, very strange...
I'm stupefied...
I'll add debugging information tomorrow.

@IgorA100
Copy link
Contributor Author

IgorA100 commented Oct 3, 2024

Are there any errors in PHP logs?
What version of PHP do you have?

@connortechnology
Copy link
Member

2024/10/03 06:59:23.439920 web_php[3898773].ERR [192.168.9.211] [SQL-ERR 'SQLSTATE[42000]: Syntax error or access violation: 1140 In aggregated query without GROUP BY, expression #1 of SELECT list contains nonaggregated column 'zm.E.MonitorId'; this is incompatible with sql_mode=only_full_group_by', statement was 'SELECT E.MonitorId, MIN(E.StartDateTime) AS minData FROM Events AS E WHERE 1=1' params:] at includes/database.php line 161
2024/10/03 06:59:23.445243 web_php[3898773].ERR [192.168.9.211] [SQL-ERR dbFetchAll no result, statement was 'SELECT E.MonitorId, MIN(E.StartDateTime) AS minData FROM Events AS E WHERE 1=1'] at includes/database.php line 195

@IgorA100
Copy link
Contributor Author

IgorA100 commented Oct 3, 2024

I fixed the problem.
Please check it.

@IgorA100
Copy link
Contributor Author

IgorA100 commented Oct 3, 2024

I hope everything will work for you now.

@IgorA100
Copy link
Contributor Author

IgorA100 commented Oct 4, 2024

Instead of the inscription "No Event" (when the event is not played), I should probably write something else, for example "Stop", or not write anything at all....
What is the best way to do it?

@connortechnology
Copy link
Member

No recording for this time

@IgorA100
Copy link
Contributor Author

IgorA100 commented Oct 4, 2024

No recording for this time

Is this text not very long?
Does this PR work for you?

@connortechnology
Copy link
Member

Yeah it works now

@IgorA100
Copy link
Contributor Author

IgorA100 commented Oct 4, 2024

Yeah it works now

Phew...
I'm waiting for your decision on approval or rejection.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Feature Todo list: Montage Review
2 participants