ALERT - Major UI Changes - Work in Progress

[dougmccrary]

Looks good, although I didn't check actual functionality of *every* button.
On desktop. Seems to be working - an archive status indicator might be nice.
The top left group goes vertical on a small screen (iPhone, firefox, chrome). Maybe break that into two horizontal lines?

[knight-of-ni]

On desktop. Seems to be working - an archive status indicator might be nice.

Not sure that makes sense in the watch (live) view, but over the weekend I added the Archived and Emailed statuses to the stats in the recorded event view, which now appear to the left of the image.

[dougmccrary]

On desktop. Seems to be working - an archive status indicator might be nice.

Not sure that makes sense in the watch (live) view, but over the weekend I added the Archived and Emailed statuses to the stats in the recorded event view, which now appear to the left of the image.

Yes, I could have been more clear - that's what I intended.
I've gotten used to not having to clear cookies the past month or so, and found I had to this round to get the playback working again, if that's of any interest...Only on the iPhone, it worked on the desktop.

[knight-of-ni]

Yeah, having to clear cookies seems to be an unfortunate side effect, following changes made to the underlying bootstrap-table logic. I don't expect the end user to have to do this with our releases.

Note that I plan to upgrade the bootstrap table library to 18.1 release next week, so you will need to clear cookies another time. Hopefully it will be the last. I am nearly done with all the planned changes to the UI and have switched to testing and cleanup.

[DVB Hardware]

FYI
Some fields in the camera settings are way too long and some to short to way too short etc
Some marked with yellow X

Screenshot_2.jpg (144.61 KiB) Viewed 31959 times

Screenshot_3.jpg (58.76 KiB) Viewed 31959 times

Jimmy

[knight-of-ni]

HEADS UP: In the quest to replace mootools with jQuery, I made a ton of changes to the JavaScript that supports the (single) event playback view. Please test. If something does not appear to work correctly, I need know to what errors appear in the web browser console.

[michoid]

sorry if someonelse wrote this - I updated to 1.35.16 and Web UI doesn`t work well in Safari on macOS - the previous version (1.34.x) worked...

I can see the ui, I can click for example on camera source ip to config it, I see General tab and when I click on other tab (Source, Storage, etc.) nothing happens, it stays on General...

In other browser - Chrome, Firefox - everything is ok

[dougmccrary]

Jumping from 1.34 to a 1,35, you might need to clear cookies, if you didn't already.

[michoid]

Jumping from 1.34 to a 1,35, you might need to clear cookies, if you didn't already.

omg, you are right, I cleared coockies and it works, thanks

[knight-of-ni]

HEADS UP: For the past several months, not only have I been updating the UI, but I have also been gradually replacing the Mootools methods and properties with JQuery or plain JS. I've been running w/o Mootools for about a week and this morning I finally removed it completely from the project. There were a lot of changes behind the scenes to make this happen. If all goes as planned, you won't notice a difference. If there is still a Mootools method hanging around however, you will get an error in the browser log, claiming the method does not exist. These must be reported so they can be fixed.

[dougmccrary]

Not sure this is "yours" but I just noticed when playing back in "gapless events" I have to hit play every time.
This has been the norm on iPhone with firefox, but not on desktop.
Chrome is OK, plays clips automatically.

[knight-of-ni]

Not sure.

I primarily use Chromium for my development, which is probably why I have not seen any issues with any of the playback modes. I need to see the contents of your browser log, containing the moment when the playback mode was set to gapless and the moment when playback reached the end of the clip.

[dougmccrary]

K. RE: autoplay fail - I hope this is what you wanted from firefox. running 1.35.16~20210122121212-focal

Code: Select all

# this came up when I set replay to none

Content Security Policy: This site (http://192.168.29.247) has a Report-Only policy without a report URI. CSP will not block and cannot report violations of this policy.
zoomrotate: Start videojs.zoomrotate.js:1:9
zoomrotate: Init defaults videojs.zoomrotate.js:5:13
zoomrotate: Init Extend videojs.zoomrotate.js:10:13
zoomrotate: End videojs.zoomrotate.js:72:9
unreachable code after return statement skins_classic_views_js_event-dark-1611335532.js:447:4
unreachable code after return statement skins_classic_views_js_event-dark-1611335532.js:475:4
Autoplay is only allowed when approved by the user, the site is activated by the user, or media is muted. video.js:1096:9
Autoplay is only allowed when approved by the user, the site is activated by the user, or media is muted. video.js:6901:48
zoomrotate: Register init videojs.zoomrotate.js:34:17
zoomrotate: [object CSS2Properties] videojs.zoomrotate.js:43:17
zoomrotate: [object CSS2Properties] videojs.zoomrotate.js:44:17
zoomrotate: undefined videojs.zoomrotate.js:45:17
zoomrotate: 1 videojs.zoomrotate.js:46:17
zoomrotate: Register end videojs.zoomrotate.js:68:17
Uncaught (in promise) DOMException: The play method is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.
Cannot play media. No decoders for requested formats: video/mp4, video/mp4, video/mp4 index.php
downloadable font: OS/2: Bad sTypoLineGap, setting it to 0: -64 (font-family: "VideoJS" style:normal weight:400 stretch:100 src index:1) source: http://192.168.29.247/zm/skins/classic/js/font/vjs.woff
Source map error: Error: NetworkError when attempting to fetch resource.
Resource URL: moz-extension://744fe0d9-711c-4d55-984d-dc25f3c879d9/js/lib/purify.min.js
Source Map URL: purify.min.js.map
downloadable font: OS/2: Bad sTypoLineGap, setting it to 0: -64 (font-family: "VideoJS" style:normal weight:400 stretch:100 src index:1) source: http://192.168.29.247/zm/skins/classic/js/font/vjs.woff
MouseEvent.mozPressure is deprecated. Use PointerEvent.pressure instead. video.js:486:10

Code: Select all

# this is setting gapless events

Content Security Policy: This site (http://192.168.29.247) has a Report-Only policy without a report URI. CSP will not block and cannot report violations of this policy.
zoomrotate: Start videojs.zoomrotate.js:1:9
zoomrotate: Init defaults videojs.zoomrotate.js:5:13
zoomrotate: Init Extend videojs.zoomrotate.js:10:13
zoomrotate: End videojs.zoomrotate.js:72:9
unreachable code after return statement skins_classic_views_js_event-dark-1611335532.js:447:4
unreachable code after return statement skins_classic_views_js_event-dark-1611335532.js:475:4
Autoplay is only allowed when approved by the user, the site is activated by the user, or media is muted. video.js:1096:9
Autoplay is only allowed when approved by the user, the site is activated by the user, or media is muted. video.js:6901:48
zoomrotate: Register init videojs.zoomrotate.js:34:17
zoomrotate: [object CSS2Properties] videojs.zoomrotate.js:43:17
zoomrotate: [object CSS2Properties] videojs.zoomrotate.js:44:17
zoomrotate: undefined videojs.zoomrotate.js:45:17
zoomrotate: 1 videojs.zoomrotate.js:46:17
zoomrotate: Register end videojs.zoomrotate.js:68:17
Uncaught (in promise) DOMException: The play method is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.
downloadable font: OS/2: Bad sTypoLineGap, setting it to 0: -64 (font-family: "VideoJS" style:normal weight:400 stretch:100 src index:1) source: http://192.168.29.247/zm/skins/classic/js/font/vjs.woff
Cannot play media. No decoders for requested formats: video/mp4, video/mp4, video/mp4 index.php
Source map error: Error: NetworkError when attempting to fetch resource.
Resource URL: moz-extension://744fe0d9-711c-4d55-984d-dc25f3c879d9/js/lib/purify.min.js
Source Map URL: purify.min.js.map
downloadable font: OS/2: Bad sTypoLineGap, setting it to 0: -64 (font-family: "VideoJS" style:normal weight:400 stretch:100 src index:1) source: http://192.168.29.247/zm/skins/classic/js/font/vjs.woff
MouseEvent.mozPressure is deprecated. Use PointerEvent.pressure instead. video.js:486:10

Code: Select all

# this is at the end of the video. the next video in sequence is showing with play button overlaid.

unreachable code after return statement skins_classic_views_js_event-dark-1611335532.js:475:4
Content Security Policy: This site (http://192.168.29.247) has a Report-Only policy without a report URI. CSP will not block and cannot report violations of this policy. 2
Content Security Policy: This site (http://192.168.29.247) has a Report-Only policy without a report URI. CSP will not block and cannot report violations of this policy. 2
zoomrotate: Start videojs.zoomrotate.js:1:9
zoomrotate: Init defaults videojs.zoomrotate.js:5:13
zoomrotate: Init Extend videojs.zoomrotate.js:10:13
zoomrotate: End videojs.zoomrotate.js:72:9
unreachable code after return statement skins_classic_views_js_event-dark-1611335532.js:447:4
unreachable code after return statement skins_classic_views_js_event-dark-1611335532.js:475:4
Autoplay is only allowed when approved by the user, the site is activated by the user, or media is muted. video.js:6901:48
zoomrotate: Register init videojs.zoomrotate.js:34:17
zoomrotate: [object CSS2Properties] videojs.zoomrotate.js:43:17
zoomrotate: [object CSS2Properties] videojs.zoomrotate.js:44:17
zoomrotate: undefined videojs.zoomrotate.js:45:17
zoomrotate: 1 videojs.zoomrotate.js:46:17
zoomrotate: Register end videojs.zoomrotate.js:68:17
Uncaught (in promise) DOMException: The play method is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.
Cannot play media. No decoders for requested formats: video/mp4, video/mp4, video/mp4, video/mp4 index.php
Autoplay is only allowed when approved by the user, the site is activated by the user, or media is muted. index.php
Source map error: Error: NetworkError when attempting to fetch resource.
Resource URL: moz-extension://744fe0d9-711c-4d55-984d-dc25f3c879d9/js/lib/purify.min.js
Source Map URL: purify.min.js.map
MouseEvent.mozPressure is deprecated. Use PointerEvent.pressure instead. video.js:486:10

[knight-of-ni]

Steve G mentioned a few weeks ago he was testing the latest version of videojs player. I've reached out to him to see if he succeeded. The version we use currently is quite old and it makes sense to modernize it for the 1.36 release.

I was able to duplicate the errors and warnings you posted, using Firefox on my desktop pc.
I did notice that by default Firefox was blocking autoplay of video & audio. I had to enable it by clicking just to the left of the URL as shown in the screenshot:

firefox_perms.png (64.5 KiB) Viewed 31289 times

I don't know how to make this change in Firefox on your iPhone, however. I'll leave that up to you. Enable both video and audio, even if your camera does support audio.

Also, can you try a different browser on your iPhone? How does Safari perform?

[dougmccrary]

OK. Got that on the desktop.
but I don't see a way to enable/disable autoplay on chrome or safari on iPhone, either.
But it is Apple, so maybe it's buried in the data settings or something..

I'll keep looking and maybe even bug apple about it.

Thanks for the help and your work.