openfun / jitsi-magnify Goto Github PK
View Code? Open in Web Editor NEWAn authentication and room management system for Jitsi built with Django/React
License: MIT License
An authentication and room management system for Jitsi built with Django/React
License: MIT License
Problematic behavior
When a user go to home page for the 1st time. The page is in english even if the language is configured in French in the configuration.
As soon as I login, the interface is changed in French as configured in our settings.py.
And then when I logout the home page is now in French.
The issue remains when it is the first time we access magnify.
Expected behavior/code
We expect to get the home page in the language configured in settings.py even before login for the first time.
Steps to Reproduce
Environment
I stay available if you need more information.
Regards
Nathan
Is your feature request related to a problem or unsupported use case? Please describe.
Now, the frontend is only presentational, but soon we will need to connect to the api, and so we will need a clean way to call the backend routes
Describe the solution you'd like
We can inject an instance of a singleton through a context to the whole app. This instance would implement an interface specifying the methods of the API. This way, it can be easily overrided, for testing purposes or customization.
Describe alternatives you've considered
We can also use directly requests in the components, but it would be harder to test and mock
Discovery, Documentation, Adoption, Migration Strategy
This abstraction may export followings:
Do you want to work on it through a Pull Request?
Yes, I intend to.
Is your feature request related to a problem or unsupported use case? Please describe.
Currently, frontend errors are not logged. In other project, we are using @sentry/dsk to achieve that.
Describe the solution you'd like
Create an error handler module which log frontend errors into sentry if sentry has been configured, otherwise just log error in console.
Discovery, Documentation, Adoption, Migration Strategy
There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.
Location: renovate.json
Error type: Invalid JSON (parsing failed)
Message: Syntax error near ]
Problematic behavior
Increasing text size in MeetingRow
make the "Join" button and the meeting name overlap, even if there is still enough space for both (see screenshots).
The problem may appear sooner with long meeting names
Expected behavior/code
No overlapping
Steps to Reproduce
See the storybook !
Is your feature request related to a problem or unsupported use case? Please describe.
We would like to be able to set connection information when we click on the 3 dots, next to the meeting name as shown below:
When clicking on button we could get :
Describe the solution you'd like
To do so, we will need to connect to conf mapper, for example voxapi.
The solution would be to set up an environment variable to give the domain of the confmapper
Then if this variable exist, the button show up to bring the connection information.
Let me know if this is not clear enough.
Regards,
Nathan
Is your feature request related to a problem or unsupported use case? Please describe.
As Magnify aim is to be broadly used every time Jitsi's stateless characteristics are too limiting, external tools like the Jitsi Box should be able to connect to Magnify instead of Jitsi.
Discovery, Documentation, Adoption, Migration Strategy
To do
Is your feature request related to a problem or unsupported use case? Please describe.
Currently, there is no possiblity to create a new group.
Describe the solution you'd like
A popup form that looks like the other forms of magnify
Discovery, Documentation, Adoption, Migration Strategy
This form would be linked to the "add group" button in the /groups page.
Do you want to work on it through a Pull Request?
yes
Is your feature request related to a problem or unsupported use case? Please describe.
Our overall goal is to bring the project's frontend closer to the DSFR (Design Système de l'Etat Français) in order to deploy the project in French official organisations.
Describe the solution you'd like
In this issue our goal is not to be completely compatible with the DSFR but only to be closer.
Upon discussion this would imply for example:
Discovery, Documentation, Adoption, Migration Strategy
If you agree with the feature request it could be implemented at least in two ways.
CustomCard.tsx
const CustomStyledCard = styled('div')`
padding: 20px;
background: white;
border: 10px;
gap: 10px;
display: flex;
flex-direction: column;
border-radius: 12px;
box-shadow: 0px 2px 4px rgb(0 0 0 / 20%);
`;
Do you want to work on it through a Pull Request?
Sure !
Is your feature request related to a problem or unsupported use case? Please describe.
The name jitsi_magnify is good for the project, less for the app everywhere inside the code?
Describe the solution you'd like
Django projects are commonly called django-{something} but the code inside only uses "something".
For example django-parler
but the folder inside the project is parler
: https://github.com/django-parler/django-parler
So I suggest to do the same here with jitsi
and rename the folder to just magnify
Is your feature request related to a problem or unsupported use case? Please describe.
Currently groups and meetings cannot be added in the room overview page.
Describe the solution you'd like
A button using the onAdd
functionality of the list, that fetches the groups a user created, to add them in the list.
Dialogs are already created, so it's just a matter of wiring.
Do you want to work on it through a Pull Request?
yes
Problematic behavior
Even if we declare strings in the code, and circle ci seems to run the i18n scripts, both on backend and frontend, we can't see the strings in crowdin.
Expected behavior/code
We should see the strings to translate in crowdin. The files django.po
and frontend/magnify/i18n/frontend.json
should be updated
Steps to Reproduce
Is your feature request related to a problem or unsupported use case? Please describe.
With a front end and a back end, documentation of the API is crucial and we need a way to develop on the front end with ease
Describe the solution you'd like
We should implement a swagger page accessible in browser.
Do you want to work on it through a Pull Request?
I might work on it quite soon
Is your feature request related to a problem or unsupported use case? Please describe.
Currently, this repository is built around a single django infrastructure. As we might want to add a frontend and to extract some logic to libraries, we would need a more open structure.
Describe the solution you'd like
I suggest to create a monorepo structure, with at least 6 parts:
/documentation
: documentation/src/lib/backend-lib
: django libraries (with exported generic apps)/src/demo/backend-fun
: django demo backend (adapted to FUN needs, and as an example for any other developer willing to build upon)/src/lib/frontend-lib
: react library (that exports reusable components, interfaces, ...)/src/demo/frontend-fun
: react demo frontend (adapted to FUN needs, and as an example for any other developer willing to build upon)For the javascript part, we can use yarn workspace feature to declare, import, and manage libraries without using too much relative links.
Describe alternatives you've considered
Another possible solution would be to create 4 different repository. It would allow clearer separation between libs and demos, and between python and javascript code, but would slightly slow down the development process, as it would need to split it through 4 different repositories, with potentially delays between them.
Discovery, Documentation, Adoption, Migration Strategy
The whole structure would be explained in a documentation in the /documentation
folder
Do you want to work on it through a Pull Request?
Yes
Points of discussion
backend-lib
? Same for react. We can create a single lib with all reusable code, or split it with data-access
lib, components
lib, or even module specific lib. The right level of granularity remains to find.Tools
As this issue is a kind of "init project" one, it should include installation and setup of tools. For the front-end, I suggest to start with
Problematic behavior
Error whil making bootstrap of the project on Windows
Expected behavior/code
The project should bootsrap correctly
Steps to Reproduce
git clone
the projectcd jitsi-magnify
make boostrap
Environment
Additional context/Screenshots
Here are the logs:
$ make bootstrap
Pulling node (node:16.15)...
16.15: Pulling from library/node
Digest: sha256:a13d2d2aec7f0dae18a52ca4d38b592e45a45cc4456ffab82e5ff10d8a53d042
Status: Downloaded newer image for node:16.15
Creating jitsi-magnify_node_run ...
Creating jitsi-magnify_node_run ... error
ERROR: for jitsi-magnify_node_run Cannot create container for service node: the working directory 'C:/Program Files/Git/app/src/frontend' is invalid, it needs to be an absolute path
ERROR: for node Cannot create container for service node: the working directory 'C:/Program Files/Git/app/src/frontend' is invalid, it needs to be an absolute path
Encountered errors while bringing up the project.
make: *** [Makefile:115: build-front] Error 1
Problematic behavior
Currently the npm
ci job does not work.
Expected behavior/code
The npm
ci job should work.
Steps to Reproduce
npm
ci jobEnvironment
N/A
Possible Solution
Fix the npm
ci job by updating the path to the frontend package.
- command: npm publish src/frontend/magnify
+ command: npm publish src/frontend/magnify/
Additional context/Screenshots
We encount this error on richie repository.
https://app.circleci.com/pipelines/github/openfun/richie/4559/workflows/a3380db8-8c15-4668-963b-c3b747f965f8/jobs/145546
Problematic behavior
The icon creation scripts added on PR #31 does not create the icon in the right place due to changes in the structure.
It creates the icon in components/svgIcons
.
Expected behavior/code
It should create the icon in components/design-system/svg-icons
.
Steps to Reproduce
cd src/frontend
yarn scripts:new-icon Whatever
Is your feature request related to a problem or unsupported use case? Please describe.
If a user has no avatar, it renders a blank space.
Describe the solution you'd like
We may display first letters of the user name, like "JD" for "John Doe".
Describe alternatives you've considered
We also may display a gravatar
Discovery, Documentation, Adoption, Migration Strategy
Do you want to work on it through a Pull Request?
Yes
Problem:
Currently, when a user wants to leave the room's settings page, he/she has to click on the browser back button or on the "Salles" link in the breadcrumb. While this works well, adding a more explicit way to get back could improve the UX.
Solution
I propose to add a cross btn on the right side of the page. The screenshots were done with a grommet
icon as it is already installed.
Do you want to work on it through a Pull Request?
Sure !
The auth system should go beyond a simple token provider and store more about the users. Ideally, one could create and plan meetings. A meeting would be defined at a certain time on a certain url. It is planned for a group of guests (registered on the auth or identified by their emails) or can be open to anybody. Each user can also create and manage user groups that will be useful during meetings.
The solution would be a postgresql database created using django's model system. It implements all the features described earlier.
A stateless app was thought of but it clearly limits the possibilities of the app.
The model is to be laid down on paper as to be implemented later using django's models.
Most probably yes, in a very near future
Unsupported use case : meetings and physical rooms management tools in Magnify.
Frontend :
Backend :
Set up an API for meetings management :
POST /meetings/ [meetings_create]
DELETE /meetings/{id}/ [meetings_delete]
magnify_meeting_user_access
and the attribute is_administrator
).GET /meetings/ [meetings_list]
Add a new table magnify_place
to store data about physical rooms. Physical rooms are a special kind of users.
Yes.
Is your feature request related to a problem or unsupported use case? Please describe.
The magnify interface needs an access to all different pages.
Describe the solution you'd like
A sidebar with buttons for different pages. The sidebar should be easily expandable and must be able to be added to any existing or future page.
Describe alternatives you've considered
A top bar, a floating menu, etc.
Discovery, Documentation, Adoption, Migration Strategy
This sidebar will follow this design.
Do you want to work on it through a Pull Request?
Yes
Problematic behavior
The first toggles are not aligned properly
Expected behavior/code
They should align horizontally.
Steps to Reproduce
Possible Solution
It's a small grid bug, I added a box container and did not check whether or not it would affect the grid structure.
Is your feature request related to a problem or unsupported use case? Please describe.
As an admin of a room, I must be able to change somme settings.
Describe the solution you'd like
Some key setting components like switches, buttons, presented in a view. Requests must be made to the API when changing settings.
Discovery, Documentation, Adoption, Migration Strategy
Here is a design.
Do you want to work on it through a Pull Request?
Yup
Is your feature request related to a problem or unsupported use case? Please describe.
When creating frontend components for example, a huge part of the code is very similar from one component to another. Finding a way to automate folder and files creation could be useful.
Describe the solution you'd like
Some scripts, for example in src/frontend/scripts/
, that can be executed to add components.
Describe alternatives you've considered
Keeping on doing it by hand, but it's not very convenient.
Discovery, Documentation, Adoption, Migration Strategy
You should be able, in src/frontend
folder, to execute a script like yarn add-icon
that could give you all necessary files in the right place in the magnify
folder, and updates export references and stories.
Do you want to work on it through a Pull Request?
Yes.
Problematic behavior
By using development scripts as described in #31, a file Component.tests.tsx
is created, instead of Component.test.tsx
Expected behavior/code
File should be Component.test.tsx
.
Steps to Reproduce
cd src/frontend
yarn scripts:new-component MyComponent
Possible Solution
Small fix.
Feature
The feature request is about making the main page's left side image customizable.
Suggested implementation
Currently, the front image is made of a linear background color and two SVGs. To make it totally customizable, I suggest allowing to set a CUSTOM_HOME_IMAGE_URL
env in config.json
that points to a custom file (svg or regular image) that would replace the trio of components.
Things would look like this in SimpleLayout
:
export const SimpleLayout = ...
...
const leftSide = window.conf.CUSTOM_HOME_IMAGE_URL
? <Image height="100%" width="100%" src={window.conf.CUSTOM_HOME_IMAGE_URL} />
: (
<Stack fill>
<Box
background={'linear-gradient(45deg, #ffbdc9 0%, #687fc9 100%)'}
height="100%"
width="100%"
/>
<Box direction="column" height="100%" justify="between">
<Box flex={{ grow: 1 }} height={{ max: '33vh' }} justify="center" margin="auto 25%">
<Image alt="logo" src={urlLogo} />
</Box>
<Box flex={{ grow: 2 }} height={{ max: '66vh' }} justify={'end'}>
<Image alt="illustration" src={cover} width="100%" />
</Box>
</Box>
</Stack>
)
...
What I'm not sure of is where the admin would put the actual file.
A suggestion would be to add a new folder /src/frontend/magnify/apps/magnify-sites/public/custom-assets/
whose content would be ignored in .gitignore
.
WDYT ?
Do you want to work on it through a Pull Request?
Sure !
Problematic behavior
In settings I setup lobby room but when I join as guest, there is not lobby room at all.
Expected behavior/code
We should arrive in lobby when lobby's parameters is set up.
Steps to Reproduce
Thank in advance for your help.
Regards,
Nathan
Problematic behavior
When I create a username firstname.lastname I get an error message :
Moreover we don't have the icon with initials of user.
Expected behavior/code
We should be able to create rooms and see initials
Steps to Reproduce
Create user with username settings to firstname.lastname :
Environment
Thanks in advance for your help and feedback.
Regards,
Nathan
Problematic behavior
When running make bootstrap
on a fresh clone on the project on linux, the yarn install
step fails with a "permission denied"
Expected behavior/code
It should pass and install all dependencies
Steps to Reproduce
make bootstrap
Environment
Logs
cp env.d/development/crowdin.dist env.d/development/crowdin
Preparing media volume...
Preparing secure media volume...
Preparing static volume...
Creating network "jitsi-magnify-bootstrap_default" with the default driver
Creating jitsi-magnify-bootstrap_node_run ... done
yarn install v1.22.19
[1/4] Resolving packages...
[2/4] Fetching packages...
warning Pattern ["[email protected]"] is trying to unpack in the same destination "/tmp/.cache/yarn/v6/npm-stream-3.0.0-22b0a2850cdf6503e73085da1fc7b7d0c2122f2f-integrity/node_modules/stream" as pattern ["stream@npm:stream-browserify"]. This could result in non-deterministic behavior, skipping.
[3/4] Linking dependencies...
...
...
...
error Could not write file "/app/src/frontend/yarn-error.log": "EACCES: permission denied, open '/app/src/frontend/yarn-error.log'"
error An unexpected error occurred: "EACCES: permission denied, mkdir '/app/src/frontend/node_modules'".
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
ERROR: 1
make: *** [Makefile:115: build-front] Error 1
Is your feature request related to a problem or unsupported use case? Please describe.
Currently the app is described in the browser as "React App" with a React Icon.
Describe the solution you'd like
Change the title, and add a unique icon for Jitsi Magnify :)
Is your feature request related to a problem or unsupported use case? Please describe.
We need to display the groups made by the user. Each group can have multiple users
Describe the solution you'd like
We may create 2 main components:
Discovery, Documentation, Adoption, Migration Strategy
See the design at https://app.abstract.com/share/cb3c4b94-209e-4e33-920b-fccd88615034?collectionId=5d0c9d2a-58b6-4a13-83a2-30a646170cb2&collectionLayerId=e4d4414c-7a68-4fac-bc09-b9ff84196d71&present=true&preview=false&sha=3b00cb92611274e864d8d67b718dee3cbc5d8271
Do you want to work on it through a Pull Request?
I'm on it.
Is your feature request related to a problem or unsupported use case? Please describe.
One must be able to add someone in groups they created.
Describe the solution you'd like
A new action in the drop-down menu in the /groups page, like "Rename", that would enable to add people. This action would lead to a popup window to add them.
Describe alternatives you've considered
A dedicated button. It would be nicer but not consistent with the design.
Do you want to work on it through a Pull Request?
Is your feature request related to a problem or unsupported use case? Please describe.
Currently, some generic config is in the code of the demo
Describe the solution you'd like
We may want to extract some configuration from the demo env variables
Describe alternatives you've considered
Leave it into the demo if anyone using the solution create his own demo
Discovery, Documentation, Adoption, Migration Strategy
We may extract
/j
right now)Is your feature request related to a problem or unsupported use case? Please describe.
Currently, there is only a sidebar. This is not something we want for mobile devices.
Describe alternatives you've considered
Either a sidebar layer, or a burger.
Discovery, Documentation, Adoption, Migration Strategy
Design to do :)
Is your feature request related to a problem or unsupported use case? Please describe.
Currently, users are using django auth system. To enable Magnify to be easy to access, even for newcomers, we could add other auth features.
Describe the solution you'd like
Discovery, Documentation, Adoption, Migration Strategy
To do !
Problematic behavior
On Windows, it is not currently possible to run tests with yarn test
, nor run test with yarn jest src/path/to/component
if the said component relies on time zones.
The problem is that TZ=UTC jest
does not work on Windows, and removing it isn't a solution since some tests need a specified time zone to work.
Expected behavior/code
You should be able to run tests. I guess you could ignore Windows developers, since this is not the most preferred platform to program, but it's a shame in my opinion.
Steps to Reproduce
cd src/frontend/magnify
yarn test
TZ
"Environment
Possible Solution
Maybe set the timezone in a dedicated config file. See this (I have not tested it yet)
Problematic behavior
In settings, we can choose if participants arrive in conference muted or not.
I try to activate and deactivate it but in both case the participant arrives with microphone open.
Expected behavior/code
Everybody should arrive muted when the button is activated.
Steps to Reproduce
Thanks in advance for your help.
Regards,
Nathan
Problematic behavior
The production build is currently broken until we disable rollup treeshaking (#156).
The <ThemeContext.Extend />
module is implied within the error. This module override globally the ThemeContext
provided by styled-components
so this is a side effects. It seems rollup removes this module from the bundle during tree shaking... Grommet had previously a similar issue with Webpack (grommet/grommet#2669) but seems to fix that by adding a sideEffects
attribute within its package.json
. Right now, it seems that is this specific attribute that generate bundle error with rollup... (If we remove this attribute, all is working well...).
Expected behavior/code
The production build should work with rollup treeshaking enable.
Steps to Reproduce
yarn build
magnify-site
package directoryyarn preview
http://localhost:4173
Toggle
ComponentEnvironment
Possible Solution
Additional context/Screenshots
Is your feature request related to a problem or unsupported use case? Please describe.
Right now, there is no actual link between backend and frontend, but we provide tools to create one. Soon, we may want to create a default link to link the frontend to the current django backend
What exists ? What does not ?
We provide in the front-lib an interface giving the prototypes of each and every method used by the frontend to fetch or mutate data. This interface is implemented by a few classes, the MockController, the LogController. The DefaultController follows the same model and still need to be implemented
Discovery, Documentation, Adoption, Migration Strategy
For instance, in the interface, we may have this method:
abstract getMyRooms(): Promise<Room[]>;
So the DefaultController may implement
async getMyRooms(): Promise<Room[]> {
const res = await axios.get("/rooms");
return res.data;
}
Other considerations
One of the difficulties would be to handle refreshing the token. Please see how the LogController fails on the first request, then do another one to refresh the token, and then retry. This may be achieved using axios interceptors if you want to use them
Once the default controller works, to use it in the demo, please update the controller creation in index.tsx
Do you want to work on it through a Pull Request?
We don't have the time to do it.
Is your feature request related to a problem or unsupported use case? Please describe.
Meetings are listed in dedicated pages and in the room page. However, this is not an easy way to see meetings. A much more user-friendly feature would be a way to connect the meetings to a calendar.
Describe alternatives you've considered
Some design exploration must be done. But two solutions stood out from the work we did:
Discovery, Documentation, Adoption, Migration Strategy
To do :)
Problematic behavior
When running yarn storybook
in src/frontend/magnify
, an error occurs at the "loading presets" phase.
Expected behavior/code
The storybook should run. Actually it used to run correctly before the migration.
Steps to Reproduce
git clone
the project (or make sure not to have old node_modules
folders)cd src/frontend
yarn
cd magnify
yarn storybook
Solution
After a lot of investigation, the problem seems to come from the storybook package. The refactor commit seems to have downgraded storybook subpackages from 6.5.8 to 6.5.7.
Upgrading storybook package by running npx sb upgrade
fixes the issue.
Is your feature request related to a problem or unsupported use case? Please describe.
We need to create components for the profile page
Describe the solution you'd like
We need components for
Discovery, Documentation, Adoption, Migration Strategy
Do you want to work on it through a Pull Request?
Yes
Is your feature request related to a problem or unsupported use case? Please describe.
At the moment as soon as we create a meeting, this meeting is private. If you are not in the member list and registered to magnify you cannot join the meeting. This is great for VIP but in some cases we need to invite people from outside to join as guest via magnify but we have this :
Describe the solution you'd like
What we would like is to get the possibility to make the room private or public. That way a public meeting can also be protected with a password etc..
Here is some ideas :
when it is public
When it is private
What do you think about the feature ?
I stay available if you need more information.
Regards,
Nathan
It would be nice if people could connect to their account to access to routes depending on what they are allowed to see and do
Describe the solution you'd like
Well django packages auth pretty nively, let's use it !
Discovery, Documentation, Adoption, Migration Strategy
If you can, explain how users will be able to use this and possibly write out a version the docs (if applicable).
Maybe a screenshot or design?
Do you want to work on it through a Pull Request?
If you ask so nicely ;)
The front end includes buttons that don't do anything, which is not a good thing :(
Describe the solution you'd like
We should code routes to :
Do you want to work on it through a Pull Request?
I might..
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.