New UI

[whyman]

There is an appetite for a modern UI, its high on the wish list.

In terms to technologies ideally for simplicity I would like a SPA that has no compilation requirement, BS4 is ideal, and uses jquery so perhaps that would be enough in terms of libraries for this case.

[elmodaddyb]

So far I have a simple UI running using the following:

• HTML 5
• jQuery 3.x
• Bootstrap 4

Server side is mocked through JSON responses based on the existing /content/interface

The app only supports login authorization at the moment. Once there is a substantial implementation, I can push a mock version to PCF for demonstration.

[whyman]

Any progress?

[elmodaddyb]

@v00d00 - I think I found a solution to the SessionManager.timerNofity mutex issue. This was holding up progress in getting responses from the server for front-end development. I should have a pull request for timer issue in the next day or two. Then likely be able to make progress on UI side.

A good MVP for review???

1. Add build flag -DWITH_NEW_WEBUI=1 to publish the new web UI.
2. Login/Logout
3. Show Database Tree
4. Show File system Tree

This could help to get some feedback on the code and user interface.

Let me know if you have suggestions. If anyone else has made progress on the UI don't wait for me!! 🥇

[elmodaddyb]

I made light progress on the infrastructure for the New UI.

https://github.com/elmodaddyb/gerbera/tree/jquery/gerbera-web

Includes, specs and e2e tests.

Capability - Login/Logout

** Next Task ** - Load the DB tree...this might take some time depending on how much can be adapted from the existing tree system.

[elmodaddyb]

Hello, I was able to get login/logout working consistently. Made progress on the tree view display, showing a simple tree view using bootstrap-treeview.

Updating to the newer frameworks is removing a lot of the boiler plate code in the current UI dealing with DOM manipulation.

Let me know what you think about using bootstrap-treeview versus re-using the nano-tree implementation?

[whyman]

I have no desire to keep any of the old code bootstrap treeview that's good to me! Especially like the counts against each item.

[elmodaddyb]

Hello,

A brief status on the jquery-based UI. I integrated bootstrap-treeview and the following items seems to be stable:

• Login/Logout
• Load initial database tree (parentId=0)
• Load initial filesystem tree (parentId=0)

The next tasks should be done rather soon

• On item selected, show child items
• On item expand, load child nodes

Here is the UI part of the branch so far:

https://github.com/elmodaddyb/gerbera/tree/jquery/gerbera-web

Any direction, suggestions, ideas, recommendations??

Only a few more items to get a MVP with Login/Logout & read-only.

[whyman]

Keep up the good work!

[elmodaddyb]

Sorry for the delay on this, I was disappointed when I found out 'bootstrap-treeview ' didn't support incremental loading of the tree. Killed the momentum I had.

I think I'll try a different approach and get something demonstrable in the next few days.

[whyman]

Great to hear you are still working on it!

[elmodaddyb]

I ended up dropping bootstrap-treeview in favor of a custom jquery widget. It's a lot simpler and should allow for the capability needed by the gerbera web ui. Hopefully should have a MVP cleaned up enough for demo in a few days. I'll post back as I progress.

[elmodaddyb]

Here's the progress so far on the new UI. Simple bootstrap basic theme, jQuery + JSON, with login in the header. Still some work needed to load child folders dynamically. This implementation requires no code changes on the server-side, only client changes.

Feedback encouraged.

[whyman]

Looking good!

Would it be possible for you to move your code into the same directory as the existing code? And to add an option to use the new UI instead (in config.xml for example)?

Then we can integrate this into the main repo

[elmodaddyb]

Yes, consolidating the code is a good idea. Giving the users ability to choose the UI will help with testing and feedback. All the files are named separately so that should be easy enough. I don't fully understand how index.html gets served up...since that file does have differences between the 2 UI's.

Will keep posting progress...

[elmodaddyb]

Looks like gerbera binds the <webroot> using the libupnp functionality....and internally libupnp will serve up the index.html file, if a directory path is given.

https://github.com/mrjimenez/pupnp/blob/da59c75b9a4c1d0fc62e99a445c8a1d1659fb453/upnp/src/genlib/net/http/webserver.c#L1177

As near as i can tell, there is not an easy way to differentiate the content of index.html, except to point <webroot> to a completely different folder...
Any thoughts?

[whyman]

We could have a new.html for the new page, then direct people to it for testing/feedback until its feature complete.

[elmodaddyb]

Yea, good idea. I will cleanup the code and move the new resources into /web/

Once it's landed there, we could open a 'project' to track the new features.

[elmodaddyb]

I migrated the new gerbera-ui over to default <webroot> named as gerbera.html. I kept the /gerbera-web folder as it contains a suite of unit tests, e2e tests, mock server...which is used to validate the UI component TDD for the win.

I will try to get basic read-only of items and directories working and then submit a pull request.

What are your thoughts about running UI tests during the Travis CI?
http://karma-runner.github.io/0.8/plus/Travis-CI.html

[elmodaddyb]

More progress on the jQuery User Interface...I completed the initial MVP

• Login + Logout
• Show Database Tree
• Show Filesystem Tree
• Expand + Collapse tree hierarchy
• Show Items in each folder

There are a few items from usability that still need improvement

• Highlight selection
• Enter key for login form
• Scrollbars for long lists

I will keep you posted on the progress.

[elmodaddyb]

Great News, I found a way to utilize the FFMPEG Thumbnail content handler on the web UI interface. We can now load the list of movies, including the thumbnails!! This should bring a new dimension to the web UI.

[whyman]

Looking forward to seeing it 👍

[elmodaddyb]

With HTML5 <video> we can embed the video in the browser, streaming it from the server!!!
A simple test proves this to work OK. Just need to figure out how to identify the type of video. type=video/mp4 etc...

[whyman]

Im hoping to release 1.1 in the next few weeks, do you think a preview would be ready to be included?

[elmodaddyb]

@v00d00, that is a great idea to include in v1.1. The new UI lives alongside existing, so it should work OK. I will try an install workflow to confirm the new components land in the right spot. Then open a PR. The current feature set is:

• login/logout
• Database Items
• Filesystem Items
• Automated unit test using Jasmine/Karma
• Automated e2e tests using Mocha/wedriverjs
• thumbnails for movies ( very early )
• embedded movie player ( very early )

I think we should exclude the thumbnails and movie player until it's fully tested.

[whyman]

Okay great, I look forward to a pull request 👍

[elmodaddyb]

@v00d00 - I have the new UI squared away with the following features:

Base Functionality

• Login/Logout
• Database Items
• Filesystem Items
• Gerbera Tree Expand/Collapse
• Gerbera Items Download

Experimental

Disabled via front-end configuration

• Thumbnails for videos
• Movie Player in browser

I provided a Report an Issue menu link. I also included a Intro page that lists the above features.

I would like to further document the architecture, and features. What do you recommend? Should we create a docs folder at the root of the repository to support GitHub Pages?

Should I post some documentation to https://github.com/v00d00/gerbera.io

Let me know what you suggest.

Thanks,

E

[whyman]

I think a UI README.md in the web folder would be a good place for more dev focused info (how do set up an dev environment, data flows etc)

I'm not overly keen on using github pages, so pulls on the site repo would be better.

[elmodaddyb]

OK, sounds good. I tested the installation and runtime side/by/side....worked successfully.

I plan to cleanup the code a bit including some documentation and provide the PR in the next few days.

[elmodaddyb]

@v00d00 - Just a heads up. I am done with documentation and working to submit the PR. I think it would be good to have a few people test out the front-end interface prior to v1.1. To help avoid any works-for-me scenarios.

You can expect the PR in the next day.

[elmodaddyb]

I made progress on Edit, Delete, Download for the Gerbera Items. Here are a few screenshots.

[whyman]

Nice, you probably wouldnt want people editing the Class or mimetype though! Item is also an internal concept, so that should probably not be there either.

[elmodaddyb]

I agree with you on the editable'ness. Presently the server sends back a list of fields, their values, and whether they are editable (true/false). I lifted the same logic from existing system. 👎 Another 1-2 iterations we should have full CRUD and we can customize.

[whyman]

We should fix that on the server side too, then.

[elmodaddyb]

So, the add capability can potentially trigger a server-side scan of many files. Ye ol' mediatomb uses a skull with red eyes when the long-polling mechanism is active on the client to show server side progress.

Any ideas for long polling notification? Here are some ideas I had:

1. The gerbera icon spins (might get annoying)
2. A toast message at the top right that is closable ...Scanning in progress...

Anyone have suggestions?

Thanks,

E

[elmodaddyb]

The Web UI ADD seems to have a plethora of capabilities tied to it. So far I've found:

1. Add individual file system item - adds to PC Directory Tree
2. Add folder file system item - adds to PC Directory tree + Video/Music Tree
3. Add autoscan file system item
4. Add Database Item -- Adds custom item to relative database path location.

So far #1 and #2 are done....currently working on 3,4. #3 requires some type of long polling mechanism. 💯

[elmodaddyb]

I am making steady progress on the CRUD operations for the new UI. Here is a breakdown.

• Add filesystem item —> DONE
• Add filesystem item from breadcrumb —> DONE
• Delete database item —> DONE
• Delete database item from breadcrumb —> DONE
• Edit database item —> DONE
• Add custom database item from breadcrumb —> PENDING
• Add autoscan filesystem item from breadcrumb —> PENDING
• Edit autoscan filesystem item from breadcrumb —> PENDING

Most of the heavy lifting is done with component architecture breaking into 2 parts

1. A logical behavior module (standard JS module pattern)
2. A user interface rendering module (jQuery widget pattern) where necessary

The components so far are:

1. Gerbera Tree
2. Gerbera Items
3. Gerbera Trail (breadcrumb)
4. Gerbera Menu
5. Gerbera App
6. Gerbera Auth

There will likely be 2 more components added after CRUD is complete.

1. Gerbera Updates - an async manager/alerting for long polling tasks
2. Gerbera Player - video and audio player components.

[whyman]

Sounds good, what is your ETA for CRUD completion? I want to release 1.1 on the 1st Oct.

[elmodaddyb]

@v00d00 - I don't think the CRUD capability will be done by Oct 1, since i really can only focus on it during the weekends. My guess, 2 more weeks it'll be done. I would not delay 1.1 for CRUD, as it still needs to be put through some tests.

[elmodaddyb]

Making steady progress on UI CRUD capability. There is a new Editor Overlay module which manages the behavior for the Gerbera Item Add/Edit/Save. I refactored a lot of code to clean up the architecture. I would guess another week and should have the following:

1. Add, Edit, Delete, Delete All (from Trail)
2. Add new virtual item (every type...item, container, activeItem, external_url, internal_url)
3. Add new file item (individual item and auto scan)
4. Edit autoscan

This covers the bulk of CRUD with only the long-polling updates to take care of.

[elmodaddyb]

Good News - All the Add/Edit scenarios are done and working....except for AutoScan item

Edit/Add Autoscan should be done in the next day (excluding long polling mechanism).

Aside from functionality there are a few areas that need usability improvement.

1. Server Errors do not pop a message
2. Add Item and Add AutoScan do not provide status after submit.

After autoscan is complete, the CRUD operations are totally done. I plan to create a few journey specifications that verify data persistance BEFORE/AFTER the UI changes.

Long story short....should have UI ready for next PR in about a week.

[elmodaddyb]

Here's the Autoscan overlay, nearly complete.

[whyman]

Looks great!

I do wonder why there is "none" an autoscan option. What does that even do? 😆

We probably don't need to show the autoscan ID either, Im not sure if that's useful to the user.

[elmodaddyb]

Hello All,

Its been a while since last update.

Great news! All the basic features of the existing UI are now complete in the new UI!!!

The long polling updates are not yet done 👎 , but should be done soon.

All the automated tests pass, but there is still a few usability issues with clicking, navigating to resolve.

I should have a PR request to the new gerbera-ui in the next week or so.

[whyman]

Awesome news!

[elmodaddyb]

Hello All,

The paging support is complete in the new UI. Only remaining items are below:

• Edit existing autoscan item
• Long polling for updates

After these 2 1 item is complete, a bit of refactoring would be desirable before a PR. I hope to have features done by next week sometime, with a PR soon after.

Thanks,
E

[elmodaddyb]

Long polling updates are complete!! These means all major capability for the new UI is DONE!!

There are a few edge cases to cleanup like:

• Expired Session Error not yet handled
• Proper refresh of Database tree when tasks complete (add,delete,autoscan, etc)

Pull Request in the near future. 👍

[elmodaddyb]

@v00d00 - I am organizing the source code for next PR of the New UI.

Any ideas how to handle license in each file?

I was thinking to just copy existing license, as most of the code logic flow is same in new code.

What do you think?

[whyman]

That seems most sensible to me.

[elmodaddyb]

I am organizing the code for PR, adding license and seeing if there is a way to document the behavior in some easy way.

PR expected soon.

[whyman]

Closing as per #184