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

New UI #84

Closed
whyman opened this issue May 13, 2017 · 50 comments
Closed

New UI #84

whyman opened this issue May 13, 2017 · 50 comments

Comments

@whyman
Copy link
Member

@whyman whyman commented May 13, 2017

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.

@whyman whyman mentioned this issue May 13, 2017
@elmodaddyb
Copy link
Member

@elmodaddyb elmodaddyb commented May 21, 2017

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
Copy link
Member Author

@whyman whyman commented May 25, 2017

Any progress?

@elmodaddyb
Copy link
Member

@elmodaddyb elmodaddyb commented May 25, 2017

@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
Copy link
Member

@elmodaddyb elmodaddyb commented May 28, 2017

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
Copy link
Member

@elmodaddyb elmodaddyb commented Jun 4, 2017

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
Copy link
Member Author

@whyman whyman commented Jun 4, 2017

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
Copy link
Member

@elmodaddyb elmodaddyb commented Jun 11, 2017

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
Copy link
Member Author

@whyman whyman commented Jun 12, 2017

Keep up the good work!

@elmodaddyb
Copy link
Member

@elmodaddyb elmodaddyb commented Jul 27, 2017

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
Copy link
Member Author

@whyman whyman commented Jul 28, 2017

Great to hear you are still working on it!

@elmodaddyb
Copy link
Member

@elmodaddyb elmodaddyb commented Jul 30, 2017

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
Copy link
Member

@elmodaddyb elmodaddyb commented Jul 31, 2017

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.

gerbera-landing
gerbera-login
gerbera-items

@whyman
Copy link
Member Author

@whyman whyman commented Aug 1, 2017

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
Copy link
Member

@elmodaddyb elmodaddyb commented Aug 1, 2017

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
Copy link
Member

@elmodaddyb elmodaddyb commented Aug 1, 2017

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
Copy link
Member Author

@whyman whyman commented Aug 2, 2017

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

@elmodaddyb
Copy link
Member

@elmodaddyb elmodaddyb commented Aug 4, 2017

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
Copy link
Member

@elmodaddyb elmodaddyb commented Aug 6, 2017

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
Copy link
Member

@elmodaddyb elmodaddyb commented Aug 12, 2017

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
Copy link
Member

@elmodaddyb elmodaddyb commented Aug 13, 2017

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
Copy link
Member Author

@whyman whyman commented Aug 13, 2017

Looking forward to seeing it 👍

@elmodaddyb
Copy link
Member

@elmodaddyb elmodaddyb commented Aug 13, 2017

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
Copy link
Member Author

@whyman whyman commented Aug 22, 2017

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

@elmodaddyb
Copy link
Member

@elmodaddyb elmodaddyb commented Aug 23, 2017

@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
Copy link
Member Author

@whyman whyman commented Aug 23, 2017

Okay great, I look forward to a pull request 👍

@elmodaddyb
Copy link
Member

@elmodaddyb elmodaddyb commented Aug 27, 2017

@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
Copy link
Member Author

@whyman whyman commented Aug 27, 2017

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
Copy link
Member

@elmodaddyb elmodaddyb commented Aug 27, 2017

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
Copy link
Member

@elmodaddyb elmodaddyb commented Sep 2, 2017

@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
Copy link
Member

@elmodaddyb elmodaddyb commented Sep 9, 2017

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

gerbera-item-edit

gerbera-item-icons

@whyman
Copy link
Member Author

@whyman whyman commented Sep 10, 2017

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
Copy link
Member

@elmodaddyb elmodaddyb commented Sep 10, 2017

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
Copy link
Member Author

@whyman whyman commented Sep 10, 2017

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

@elmodaddyb
Copy link
Member

@elmodaddyb elmodaddyb commented Sep 16, 2017

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
Copy link
Member

@elmodaddyb elmodaddyb commented Sep 20, 2017

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
Copy link
Member

@elmodaddyb elmodaddyb commented Sep 25, 2017

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
Copy link
Member Author

@whyman whyman commented Sep 25, 2017

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

@elmodaddyb
Copy link
Member

@elmodaddyb elmodaddyb commented Sep 25, 2017

@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
Copy link
Member

@elmodaddyb elmodaddyb commented Oct 4, 2017

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
Copy link
Member

@elmodaddyb elmodaddyb commented Oct 7, 2017

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
Copy link
Member

@elmodaddyb elmodaddyb commented Oct 7, 2017

Here's the Autoscan overlay, nearly complete.

gerbera-autoscan

@whyman
Copy link
Member Author

@whyman whyman commented Oct 8, 2017

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
Copy link
Member

@elmodaddyb elmodaddyb commented Oct 21, 2017

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
Copy link
Member Author

@whyman whyman commented Oct 22, 2017

Awesome news!

@elmodaddyb
Copy link
Member

@elmodaddyb elmodaddyb commented Oct 29, 2017

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
Copy link
Member

@elmodaddyb elmodaddyb commented Nov 4, 2017

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
Copy link
Member

@elmodaddyb elmodaddyb commented Nov 5, 2017

@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
Copy link
Member Author

@whyman whyman commented Nov 5, 2017

That seems most sensible to me.

@elmodaddyb
Copy link
Member

@elmodaddyb elmodaddyb commented Nov 11, 2017

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
Copy link
Member Author

@whyman whyman commented Nov 12, 2017

Closing as per #184

@whyman whyman closed this Nov 12, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
2 participants
You can’t perform that action at this time.