The current Jangouts UI is limiting us when thinking about adding new features. Some examples:
- This (using the whole thumbnail to pin a participant) was implemented, but the result is far from optimal (I have not even deployed it in production).
- The underlying part of this (participant name change) were also implemented, but we were not able to find a way to make it fit in the current UI.
- If somebody decides to implement this (per-user volume), they will have the same problem.
- I also have in mind a "local mute" feature, but once again I wouldn't know where to place that button.
Moreover, there are some usability problems we keep hitting all the time:
- The button to mute yourself can move if somebody else than you enters the room.
- The name of the room is not displayed.
Last but not least, the current UI kind of works in mobile devices, but it's not 100% mobile friendly (buttons are too small and it relies too much in hover buttons).
I already have other projects for this Hackweek, so I'm not sure how much time I will have to work on this. But if some javascript or UX expert wants to jump in, I will help as much as possible.
Final result
Cynthia already did some visual modifications (available only in her fork for the time being). She is also working in some mock-ups more oriented to functionality and UX. Stay tuned.
Ancor did progresses in the Angular2 porting and improved the unit tests there. He also updated the janus-gateway packages in OBS and renewed the Let's Encrypt's certificate for jangouts.tk. Last but not least, he debugged some connection problems with Firefox 38.4.0 (included in non-updated SLED12-SP1). The problem should be fixed now.
Looking for hackers with the skills:
This project is part of:
Hack Week 14
Activity
Comments
-
over 8 years ago by ancorgs | Reply
As a first step, I'm taking a closer look to our experimental Angular2 version (GSoC) since I want to develop the new UI on top of that.
I'm finding it to be quite daunting for a beginner (a lot of warnings due to the WIP, some lack of documentation...). I'll try to fix that first.
-
over 8 years ago by ancorgs | Reply
Still working in improving the Angular2 branch, specially improving the tests and the developer's experience. Learning a lot about typescript and jasmine in the process.
Cynthia is working in some mock ups for the interface. Most likely we will not be able to implement them as part of this Hack Week, but at least we will end up in a good position to do it in the future (with test cases for the existing code, at least).
-
over 8 years ago by ancorgs | Reply
Cynthia is already modifying the look&feel (she even created a motto!). Everything looking nicer so far. We were also discussing some stuff more related to the user experience than to the look&feel. She is working on some mock-ups on how to fix it.
Meantime, I'm using this project as an excuse to do jangouts-related pending stuff, like learning Angular2 and typescript. Helping our GSoC student to create meaningful and DRY unit tests, trying to reproduce some problems reported by a SLED12 user with an old Firefox, updating the janus package and so on.
Similar Projects
Editor mode at Agama web interface by ancorgs
Description
Agama is a new Linux installer that will be very likely used for SLES 16.
It takes a configuration (in JSON format) as input. And offers several interfaces to build that configuration in an easy and interactive way.
I was considering the possibility to add to the web interface a "text editor" mode similar to the XML editor available at virt-manager. That could be used to see how the changes in the UI translate into changes on the configuration.
Goals
- Refresh my knowledge about UI development for Agama, since there was a major overhaul recently (adopting TanStack Query) and I need to learn the new way to do things.
- Please hackers who always want to know how things work internally. :-)
Agama installer on-line demo by lslezak
Description
The Agama installer provides a quite complex user interface. We have some screenshots on the web page but as it is basically a web application it would be nice to have some on-line demo where users could click and check it live.
The problem is that the Agama server directly accesses the hardware (storage probing) and loads installation repositories. We cannot easily mock this in the on-line demo so the easiest way is to have just a read-only demo. You could explore the configuration options but you could not change anything, all changes would be ignored.
The read-only demo would be a bit limited but I still think it would be useful for potential users get the feeling of the new Agama installer and get familiar with it before using in a real installation.
As a proof of concept I already created this on-line demo.
The implementation basically builds Agama in two modes - recording mode where it saves all REST API responses and replay mode where it for the REST API requests returns the previously recorded responses. Recording in the browser is inconvenient and error prone, there should be some scripting instead (see below).
Goals
- Create an Agama on-line demo which can be easily tested by users
- The Agama installer is still in alpha phase and in active development, the online demo needs to be easily rebuilt with the latest Agama version
- Ideally there should be some automation so the demo page is rebuilt automatically without any developer interactions (once a day or week?)
TODO
- Use OpenAPI to get all Agama REST API endpoints, write a script which queries all the endpoints automatically and saves the collected data to a file (see this related PR).
- Write a script for starting an Agama VM (use libvirt/qemu?), the script should ensure we always use the same virtual HW so if we need to dump the latest REST API state we get the same (or very similar data). This should ensure the demo page does not change much regarding the storage proposal etc...
- Fix changing the product, currently it gets stuck after clicking the "Select" button.
- Move the mocking data (the recorded REST API responses) outside the Agama sources, it's too big and will be probably often updated. To avoid messing the history keep it in a separate GitHub repository
- Allow changing the UI language
- Display some note (watermark) in the page so it is clear it is a read-only demo (probably with some version or build date to know how old it is)
- Automation for building new demo page from the latest sources. There should be some check which ensures the recorded data still matches the OpenAPI specification.
Changing the UI language
This will be quite tricky because selecting the proper translation file is done on the server side. We would probably need to completely re-implement the logic in the browser side and adapt the server for that.
Also some REST API responses contain translated texts (storage proposal, pattern names in software). We would need to query the respective endpoints in all supported languages and return the correct response in runtime according to the currently selected language.
Resources
- Agama sources
- Experimental proof of concept demo
- The respective source code change
Design the new UI for storage configuration at Agama by ancorgs
Description
We are in the process of re-designing the web user interface to configure storage at Agama. We expected to have a clear idea of what we wanted before starting Hack Week. But the idea is still not that clear. So I will use use my Hack Week time to try several prototypes since I really want this to be done.
Goals
Have a prototype using Patternfly components and addressing all the use-cases we want to cover. Easy for the easy cases. Capable for the complex ones.
obs-service-vendor_node_modules by cdimonaco
Description
When building a javascript package for obs, one option is to use https://github.com/openSUSE/obs-service-node_modules as source service to get the project npm dependencies available for package bulding.
obs-service-vendornodemodules aims to be a source service that vendors npm dependencies, installing them with npm install (optionally only production ones) and then creating a tar package of the installed dependencies.
The tar will be used as source in the package building definitions.
Goals
- Create an obs service package that vendors the npm dependencies as tar archive.
- Maybe add some macros to unpack the vendor package in the specfiles
Resources
Agama Expert Partitioner by joseivanlopez
Description
Agama is a new Linux installer that will be very likely used for SLES 16.
It offers an UI for configuring the target system (language, patterns, network, etc). One of the more complex sections is the storage configuration, which is going to be revamped. This project consists on exploring the possibility of having something similar to the YaST Expert Partitioner for Agama.
Goals
- Explore different approaches for the storage UI in Agama.