ALERT - Major UI Changes - Work in Progress

Previous development branch now released as 1.36
dougmccrary
Posts: 1150
Joined: Sat Aug 31, 2019 7:35 am
Location: San Diego

Re: ALERT - Major UI Changes - Work in Progress

Post by 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?
User avatar
knight-of-ni
Posts: 2404
Joined: Thu Oct 18, 2007 1:55 pm
Location: Shiloh, IL

Re: ALERT - Major UI Changes - Work in Progress

Post by knight-of-ni »

dougmccrary wrote: Thu Dec 10, 2020 8:42 am 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.
Visit my blog for ZoneMinder related projects using the Raspberry Pi, Orange Pi, Odroid, and the ESP8266
All of these can be found at https://zoneminder.blogspot.com/
dougmccrary
Posts: 1150
Joined: Sat Aug 31, 2019 7:35 am
Location: San Diego

Re: ALERT - Major UI Changes - Work in Progress

Post by dougmccrary »

knight-of-ni wrote: Mon Dec 14, 2020 8:12 pm
dougmccrary wrote: Thu Dec 10, 2020 8:42 am 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.
User avatar
knight-of-ni
Posts: 2404
Joined: Thu Oct 18, 2007 1:55 pm
Location: Shiloh, IL

Re: ALERT - Major UI Changes - Work in Progress

Post by 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.
Visit my blog for ZoneMinder related projects using the Raspberry Pi, Orange Pi, Odroid, and the ESP8266
All of these can be found at https://zoneminder.blogspot.com/
DVB Hardware
Posts: 201
Joined: Thu Jan 01, 2015 5:12 pm
Location: Rhode Island

Re: ALERT - Major UI Changes - Work in Progress

Post by 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
Screenshot_2.jpg (144.61 KiB) Viewed 23400 times
Screenshot_3.jpg
Screenshot_3.jpg (58.76 KiB) Viewed 23400 times

Jimmy
Linux Mint 21 Cinnamon Mariadb 10.6.x using Master 1.37.x latest always

DVB stands for Digital VIdeo Broadcasting , retired satellite downlink supplier
User avatar
knight-of-ni
Posts: 2404
Joined: Thu Oct 18, 2007 1:55 pm
Location: Shiloh, IL

Re: ALERT - Major UI Changes - Work in Progress

Post by 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.
Visit my blog for ZoneMinder related projects using the Raspberry Pi, Orange Pi, Odroid, and the ESP8266
All of these can be found at https://zoneminder.blogspot.com/
michoid
Posts: 2
Joined: Mon Jan 11, 2021 7:23 am

Re: ALERT - Major UI Changes - Work in Progress

Post by 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
Posts: 1150
Joined: Sat Aug 31, 2019 7:35 am
Location: San Diego

Re: ALERT - Major UI Changes - Work in Progress

Post by dougmccrary »

Jumping from 1.34 to a 1,35, you might need to clear cookies, if you didn't already.
michoid
Posts: 2
Joined: Mon Jan 11, 2021 7:23 am

Re: ALERT - Major UI Changes - Work in Progress

Post by michoid »

dougmccrary wrote: Mon Jan 11, 2021 8:59 am 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 :roll:
User avatar
knight-of-ni
Posts: 2404
Joined: Thu Oct 18, 2007 1:55 pm
Location: Shiloh, IL

Re: ALERT - Major UI Changes - Work in Progress

Post by 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.
Visit my blog for ZoneMinder related projects using the Raspberry Pi, Orange Pi, Odroid, and the ESP8266
All of these can be found at https://zoneminder.blogspot.com/
dougmccrary
Posts: 1150
Joined: Sat Aug 31, 2019 7:35 am
Location: San Diego

Re: ALERT - Major UI Changes - Work in Progress

Post by 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.
User avatar
knight-of-ni
Posts: 2404
Joined: Thu Oct 18, 2007 1:55 pm
Location: Shiloh, IL

Re: ALERT - Major UI Changes - Work in Progress

Post by 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.
Visit my blog for ZoneMinder related projects using the Raspberry Pi, Orange Pi, Odroid, and the ESP8266
All of these can be found at https://zoneminder.blogspot.com/
dougmccrary
Posts: 1150
Joined: Sat Aug 31, 2019 7:35 am
Location: San Diego

Re: ALERT - Major UI Changes - Work in Progress

Post by 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
User avatar
knight-of-ni
Posts: 2404
Joined: Thu Oct 18, 2007 1:55 pm
Location: Shiloh, IL

Re: ALERT - Major UI Changes - Work in Progress

Post by 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
firefox_perms.png (64.5 KiB) Viewed 22730 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?
Visit my blog for ZoneMinder related projects using the Raspberry Pi, Orange Pi, Odroid, and the ESP8266
All of these can be found at https://zoneminder.blogspot.com/
dougmccrary
Posts: 1150
Joined: Sat Aug 31, 2019 7:35 am
Location: San Diego

Re: ALERT - Major UI Changes - Work in Progress

Post by 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.
Locked