Comments (50)
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.
from gerbera.
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:
- Add, Edit, Delete, Delete All (from Trail)
- Add new virtual item (every type...item, container, activeItem, external_url, internal_url)
- Add new file item (individual item and auto scan)
- Edit autoscan
This covers the bulk of CRUD with only the long-polling updates to take care of.
from gerbera.
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.
from gerbera.
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.
from gerbera.
Any progress?
from gerbera.
@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???
- Add build flag
-DWITH_NEW_WEBUI=1
to publish the new web UI. - Login/Logout
- Show Database Tree
- 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!! 🥇
from gerbera.
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.
from gerbera.
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?
from gerbera.
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.
from gerbera.
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.
from gerbera.
Keep up the good work!
from gerbera.
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.
from gerbera.
Great to hear you are still working on it!
from gerbera.
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.
from gerbera.
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.
from gerbera.
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
from gerbera.
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...
from gerbera.
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.
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?
from gerbera.
We could have a new.html
for the new page, then direct people to it for testing/feedback until its feature complete.
from gerbera.
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.
from gerbera.
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
from gerbera.
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.
from gerbera.
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.
from gerbera.
Looking forward to seeing it 👍
from gerbera.
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...
from gerbera.
Im hoping to release 1.1 in the next few weeks, do you think a preview would be ready to be included?
from gerbera.
@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.
from gerbera.
Okay great, I look forward to a pull request 👍
from gerbera.
@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
from gerbera.
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.
from gerbera.
@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.
from gerbera.
I made progress on Edit, Delete, Download for the Gerbera Items. Here are a few screenshots.
from gerbera.
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.
from gerbera.
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.
from gerbera.
We should fix that on the server side too, then.
from gerbera.
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:
- The gerbera icon spins (might get annoying)
- A toast message at the top right that is closable
...Scanning in progress...
Anyone have suggestions?
Thanks,
E
from gerbera.
The Web UI ADD seems to have a plethora of capabilities tied to it. So far I've found:
- Add individual file system item - adds to
PC Directory Tree
- Add folder file system item - adds to
PC Directory tree
+Video/Music Tree
- Add autoscan file system item
- 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. 💯
from gerbera.
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
- A logical behavior module (standard JS module pattern)
- A user interface rendering module (jQuery widget pattern) where necessary
The components so far are:
- Gerbera Tree
- Gerbera Items
- Gerbera Trail (breadcrumb)
- Gerbera Menu
- Gerbera App
- Gerbera Auth
There will likely be 2 more components added after CRUD is complete.
- Gerbera Updates - an async manager/alerting for long polling tasks
- Gerbera Player - video and audio player components.
from gerbera.
Sounds good, what is your ETA for CRUD completion? I want to release 1.1 on the 1st Oct.
from gerbera.
@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.
from gerbera.
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.
- Server Errors do not pop a message
- 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.
from gerbera.
Here's the Autoscan overlay, nearly complete.
from gerbera.
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.
from gerbera.
Awesome news!
from gerbera.
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
from gerbera.
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. 👍
from gerbera.
@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?
from gerbera.
That seems most sensible to me.
from gerbera.
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.
from gerbera.
Closing as per #184
from gerbera.
Related Issues (20)
- gerbrea 2.0: Crash on initial import after first playlist HOT 10
- JFROG artifactory disabled HOT 2
- Install gerbera HOT 1
- Samsung tv not playing files HOT 7
- Apt update fails because jfrog subscription de-activated HOT 1
- Issue: "JFrog's Free-Tier subscription has been deactivated." HOT 14
- ToDo: Renew Docker OSS Subscription HOT 4
- firewall advice needed in documentation HOT 1
- Common.js Box Setup for Dates Uses Config Parameter Video/allYears HOT 1
- SIGSEGV while AutoScan HOT 2
- debian gerbera build -> undefined symbol HOT 6
- Gerbera 2.0 error: Failed to read /home/user/.mpdascache: No such file or directory HOT 12
- Gerbera 2.0 autoscan in config.xml does not work HOT 2
- Debian 12: ./build-deb.sh fails to complet due to unbound variable
- Box Layout settings without effect with "builtin" virtual-layout HOT 5
- No video content is showing under database > Video > [all subfolders] HOT 4
- Album artist tags ignored HOT 2
- [Bug] Unexpected crash when adding recursive autoscanning to folder. HOT 6
- Renew Jetbrains OSS licences
- How to get old structured layout back on Gerbera 2.0? HOT 6
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from gerbera.