BETA: DVR web UI framework upgrade

The latest DVR pre-release (v2020.09.14.2302) contains an update to the web framework we use for the admin UI. If you use the web UI regularly, we could use your help testing it!

This change is mostly under-the-hood, so the web UI looks and works the same way as before. If you notice something isn't working or not working like it did before, please let us know in the comments below.

Just found out both of my installs updated to the new release 2020.09.14.2100.

Does this mean any pre-release version 2020.09.14.2302 and higher uses this new DVR web UI framework?

Kind of vaque on the changes. Are you just looking for things that might have broke or don't work as expected? Has the video player been updated, anything new you can share?

That's a new stable release, for everyone.

Correct. Current and future pre-releases look like they're slated to use the new backend.

Yes. As the OP stated, the functionality should be the same; things that don't work as expected should be reported.

There is no "video player", per se. The videos played through the web UI are using your browser's native video controls. The support and quality of the video player is dependent upon your browser, not Channels.

(Edit: After perusing the page source, it looks like Channels is using video.js for their player.)

Maybe a newer version hls.js? Didn't realize you were part of the dev team.

Just upgraded to 2020.09.14.2346 and now I get the below when I open browser to go to DVR config page. Refreshing just instantaneously brings me back to the error. It is running, I can watch TV, but cannot get to settings to check for update or anything.

A Javascript error has occurred!

Please refresh the browser after reporting this issue onChannels Community or to[email protected].

system is not defined
ReferenceError: system is not defined
at http://127.0.0.1:8089/bundle.js:377:152767
at Array.map (anonymous)
at P (http://127.0.0.1:8089/bundle.js:377:150572)
at Xo (http://127.0.0.1:8089/bundle.js:407:57930)
at Bi (http://127.0.0.1:8089/bundle.js:407:66791)
at gs (http://127.0.0.1:8089/bundle.js:407:105388)
at cl (http://127.0.0.1:8089/bundle.js:407:96717)
at sl (http://127.0.0.1:8089/bundle.js:407:96642)
at $s (http://127.0.0.1:8089/bundle.js:407:93672)
at http://127.0.0.1:8089/bundle.js:407:45314

Apparently, the video playback is handled by video.js, and I have corrected the previous comment. No, I am not a dev.

(The script bundle.js included at the head of the web UI pages includes the code/references to the video.js player.)

Are you able to load other pages like http://x:8089/admin/troubleshooting

Where is your dvr running and what browser are you using?

Not able to load that page. DVR is running on a laptop, HP Intel Core i7, Win 8.1. Using Chrome version 85

SOLVED: Remove Norton Firewall. Windows firewall = no issue.

cross-posting...

Browsers can only play video using the built-in <video /> tag. We use video.js for the UI around the web player, and hls.js to talk to the transcoder on browsers which don't support hls natively.

The web UI framework change is primarily an upgrade from bootstrap 3 to bootstrap 4. This makes use of new HTML/CSS features such as display: flex and display: grid to power the web UI layout.

We've been working on this for a couple weeks, and fixed a lot of the bugs and differences already before releasing it to pre-release. The few bugs reported since have also been fixed now, and these changes have been merged into our mainline development for all future dvr releases.

1 Like

I just upgraded to 2020.09.15.2006 and in the Movie section when I click on a Movie I get Javascript error below. I'm using Microsoft Edge browser. I've tried in Google Chrome and get the same error.

**************************************************************************************************
#### A Javascript error has occurred!

Please refresh the browser after reporting this issue on [Channels Community](https://community.getchannels.com/) or to [[email protected]](mailto:[email protected]).

Badge is not defined

ReferenceError: Badge is not defined at http://192.168.1.92:8089/bundle.js:115:68469 at Array.map (<anonymous>) at t.render (http://192.168.1.92:8089/bundle.js:115:68427) at Yi (http://192.168.1.92:8089/bundle.js:407:69876) at Ui (http://192.168.1.92:8089/bundle.js:407:69671) at gs (http://192.168.1.92:8089/bundle.js:407:105470) at cl (http://192.168.1.92:8089/bundle.js:407:96717) at sl (http://192.168.1.92:8089/bundle.js:407:96642) at $s (http://192.168.1.92:8089/bundle.js:407:93672) at http://192.168.1.92:8089/bundle.js:407:45314

Confirmed here too.

Fixed in v2020.09.15.2207

Confirmed the latest build fixed the movie JavaScript error. Thank you!

Updated.
Looks like a minor refresh with the font and borders etc.
looks sleeker. sharper, easier to read

First time looking at the snappy new web UI. Thought I should point out the Initial Setup mentions only iPhone/iPad and no other clients.

1 Like

Seems the bug in the new DVR UI is keeping me from changing settings.
Until it's resolved, how can I toggle comskip?
Do I need to revert to an older version or is there a curl command to use?

SHOULD BE

CURRENTLY IS

As a workaround you can start guide refresh, then close the initial setup dialog that shows up during guide download.

Txs, worked.
Found current setting here b4 U replied

http://x.x.x.x:8089/settings/comskip.disabled
"true"

Not sure if this is related to the framework update...
running v2020.09.22.0105
web UI DVR > Schedule page. Refresh from the gear dropdown in the upper right doesn't. Refresh that is.
Have to refresh/reload the web page.
Have a recording in progress, but it still shows as Queued until I refresh the web page, so not sure what the gear dropdown Refresh is supposed to do?

Inspecting Network shows GET's to subscribe, programs and jobs.
I do see the response to programs including the job that's currently recording
"EP035914630002": "recording-1600909200-356"

P.S. Mozilla Firefox 81.0 (64-bit) in case it matters