Commit Graph

256 Commits

Author SHA1 Message Date
lebaudantoine
66350b8fb5 🐛(frontend) pass participant's name while creating a room
Fixed an issue where users' chosen usernames were not
being included when creating a room.
2024-08-08 14:34:18 +02:00
lebaudantoine
378cc3a651 (frontend) persist local participant name on updates
Utilized local storage to persist the updated name. After careful
consideration, persisting all user choices in the backend was deemed overly
complex and unnecessary for the value it would provide.

Opted for a single responsibility approach by leveraging local storage to manage
user choices, aligning with LiveKit's default implementation.
2024-08-08 14:34:18 +02:00
lebaudantoine
37eea16a50 (frontend) allow local participant to update her name
The user name is initially set by the backend when generating the LiveKit access
token. By default, if the frontend has not provided a username, the backend uses
the user's email address. This approach isn't ideal, as some users prefer using
their first name.

This update allows local participant to change their username in real-time
during a session. However, these changes are not yet persisted for
future meetings. This persistence feature will be added in upcoming commits.
2024-08-08 14:34:18 +02:00
lebaudantoine
671aa68804 ♻️(frontend) restore User Information in Settings Dialog
Reintroduced user information in the settings dialog. This change allows
users to see the account they are logged into, which is important for
account management. An additional feature to update usernames will be
added soon. Apologies to @manuhabitela for the oversight.
2024-08-08 14:34:18 +02:00
lebaudantoine
6449aaf7ea ♻️(frontend) remove header from video conference
Removed the header when inside a room to maximize space for the camera
gallery. Settings are now accessible via the options menu.

It aligns the design with common video conference tools as meet,
or jitsi. @manuhabitela was aligned with this change.
2024-08-08 14:34:18 +02:00
lebaudantoine
f8fff3dbdf ♻️(frontend) allow opening Settings dialog in a controlled way
I am not hundred percent sure it respects @manuhabitela's guidelines,
but for the options menu, I would need to trigger a dialog in a controlled way.

I tried to have the minimal impact on the existing settings dialog.
2024-08-08 14:34:18 +02:00
lebaudantoine
1715ec10dd (frontend) introduce a menu with more actions
Replaced the existing settings button with a new `OptionsButton` component.
This new component integrates a menu for more actions, providing an
extensible and accessible interface.

Refactoring will follow to enhance code maintainability.

A legacy style was introduced to keep visual coherence with the other controls
from the controls bar. It's temporary, until we redesign the whole bar.
It doesn't match pixel-perfect the legacy styles.

A new public Tchap chan was created. All users, and not only beta users,
can now join it using the link in the menu, and reach us.
2024-08-08 14:34:18 +02:00
lebaudantoine
8c7aed4b00 ♻️(frontend) simplify the controls component
As we duplicated the code, we don't need anymore to configure
the available controls from the video conference.
2024-08-08 14:34:18 +02:00
lebaudantoine
217b19e42a 🌐(frontend) internationalize video conference controls
Localized video conference controls to match the selected language.

Previously, controls were always in English, causing confusion for French users.
A full refactor of the controls is planned soon.
2024-08-08 14:34:18 +02:00
lebaudantoine
bd26a0abc1 💩(frontend) duplicate Controls bar
Same approach as the previous commit. Few elements were not exposed
by the LiveKit package, and I had to duplicate them. Let's see if
we can asap get rid off all this complexity.
2024-08-08 14:34:18 +02:00
lebaudantoine
abb708aa49 💩(frontend) duplicate VideoConference component
Basically, duplicate LiveKit code to start iterating on their
components, not sure wether it's the optimal strategy, but at least
we will be more agile, shipping small features which are lacking.
2024-08-08 14:34:18 +02:00
lebaudantoine
5d35161ae3 👷(frontend) add linting and formatting checks for frontend
Added CI job to run linting and formatting checks in the frontend
codebase. Please note, we should cache frontend dependencies,
to avoid re-installing them. Future improvement!
2024-08-06 12:25:22 +02:00
lebaudantoine
0b6f58bf9c 🚨(frontend) run Prettier on the codebase
Ran Prettier on the entire codebase to fix formatting issues. My IDE was
previously misconfigured, causing most of these errors. The IDE configuration
has been corrected.
2024-08-06 12:25:22 +02:00
lebaudantoine
79519fef26 🔧(frontend) configure Prettier and ESLint
Set up Prettier with minimal configuration. Installed eslint-config-prettier to
prevent conflicts between ESLint and Prettier.
2024-08-06 12:25:22 +02:00
lebaudantoine
e7dc54d6c5 🔖(minor) bump release to 0.1.3 2024-08-05 23:01:26 +02:00
lebaudantoine
9a07fba991 💄(frontend) center the feedback screen text
Align the screen with the mockup, and the recent added error screen.
2024-08-05 22:28:45 +02:00
lebaudantoine
ca3b1f0297 (frontend) center error screen body
Added a new props on Text primitive to allow centering
the text if needed. It's align the design with the mockup.
2024-08-05 22:28:45 +02:00
lebaudantoine
01390b12fb (frontend) allow customization of error title and description
Enhanced the error screen to support customizable titles and descriptions.

Allows for more detailed and informative error messages for users.
By default, the error screen displays a standard heading. You can
now pass custom title and body content to provide additional context
and clarity.
2024-08-05 22:28:45 +02:00
lebaudantoine
df1eca7c34 (frontend) support get or create room while accessing a room
Attempt to create a room using a mutation if the fetch query fails.
If the mutation succeeds, update the fetch query data to ensure
it is up-to-date.

I tried to reproduce kind of a ‘get or create’ mechanism.

Due to the removal of the 'onError' prop in React Query, it is recommended
to use useEffect for handling such event propagation.

Regarding status handling, the fetch status takes priority over the mutation.
The mutation should only be called if the fetch has failed.
2024-08-05 22:28:45 +02:00
lebaudantoine
b529e9c848 ♻️(frontend) extract query key in a variable
I'll need this key to sync data when the mutation responds successfully.
This is a preliminary refactoring; the mutation will be added
in upcoming commits.
2024-08-05 22:28:45 +02:00
lebaudantoine
23a2d3bcac ♻️(frontend) support mutation status in QueryAware component
useMutation has one more possible status, 'idle'. I was forced
to add it to avoid any Typescript error.
2024-08-05 22:28:45 +02:00
lebaudantoine
55749a9565 ♻️(frontend) extract queryClient definition
It will be necessary to access the client in other components for manually
discarding or setting data in the central data store.
2024-08-05 22:28:45 +02:00
lebaudantoine
8115a39538 🐛(frontend) make link in the chat clickable
This is based on LiveKit demo app.
Used the LiveKit default chat messages formatter to make the link
clickable by any user.
2024-08-05 22:28:45 +02:00
lebaudantoine
2416ca1127 🔥(frontend) remove default username
Backend defaults username to the user's email, if the frontend
haven't pass an username value.

Remove this useless check.
2024-08-05 22:28:45 +02:00
lebaudantoine
1971f594cf 🔇(frontend) remove LiveKit logs in production
Enabling logs by default in clients during production feels insecure.
Therefore, I have silenced all LiveKit logs.

This might pose a challenge if we need to debug a user in the future,
but currently, we don’t require these logs.

Additionally, my utils file and function work as intended,
though there is room for improvement.
2024-08-05 22:28:45 +02:00
lebaudantoine
fb0ee9e8f6 (frontend) create room in db when creating a new room
With unregistered rooms being now forbidden, we need to call create a room
in our Django db to get an access token.

Clicking on the 'Create room' will create a new entry using a Post request.
The output serialized already contains an access token to the LiveKit server,
thus we won't need to run the useQuery hook when navigating to the room.

/!\ this modification now prevent authenticated users to create rooms
by simply navigating to it. It'll be fixed in the upcoming commits.
2024-08-05 22:28:45 +02:00
lebaudantoine
63c6f5a8a1 🐛(frontend) add unique key to 'popover' items
Close issue #91. Each <li> element in a list should have a unique key
to avoid React warnings.

Added unique keys to 'popover' items. Although the 'lang' keys are generated
by i18n dependencies and are expected to be unique, this implementation
ensures keys are unique and not based on indexes.
2024-08-04 23:59:41 +02:00
lebaudantoine
1970a4d6b1 ✏️(frontend) fix minor typo in i18n hook
Oupsi, found a typo and fixed it.
2024-08-04 23:59:41 +02:00
Emmanuel Pelletier
1f57adc4da ♻️(frontend) rework how we handle screens and layout code
Previously each route rendered its whole layout from a to z.
Now each route updates a single common wrapper when the layout changes
between pages.

Also the Loading, Error, UserFetched, QueryAware code is more explicit
and understandable.

This introduces valtio as dependency, allowing us to deal with global
state easily in a svelte/vue way (reactive mutable state). This limits
the boilerplaty-ness of immutable state lib approaches, while keeping
rendering optimization better than homemade react contexts.
2024-07-30 16:26:24 +02:00
Emmanuel Pelletier
952e6970f0 🐛(room) do not show feedback info when reloading room page
the livekit prefab component doesn't expose what we want, rely on the
dom for now until we redo the component from scratch
2024-07-30 01:47:03 +02:00
Emmanuel Pelletier
af0746eac1 ️(frontend) dont endlessly query user info
we query user at load and keep info for a while, way less than user
session anyway. will need to check if we could get de-sync (like loading
the frontend with backend user session ending in 30 minutes while we
don't check user state until an hour)
2024-07-30 01:37:20 +02:00
Emmanuel Pelletier
62492d1411 🔖(minor) bump release to 0.1.2 2024-07-29 10:19:58 +02:00
Emmanuel Pelletier
34e21b77b5 🩹(loading) fix header doubled when loading room
the whole screen wrapper thing is not that great… needs improvements to
prevent that kind of stuff
2024-07-29 10:11:31 +02:00
Emmanuel Pelletier
9edb9c2f57 💄(button) center button texts
this is definitely an oversight, button texts should be centered
2024-07-29 08:48:44 +02:00
Emmanuel Pelletier
ee1abbed04 🚸(feedback) remember the user about feedback form on call end
add a new route that just tells the user about the feedback form
2024-07-29 08:48:44 +02:00
Emmanuel Pelletier
ed52123733 💄(header) better feedback integration
- small screens are now usable (not that great but better than before)
- spacing is more consistent between left and right
2024-07-29 08:48:44 +02:00
Emmanuel Pelletier
a7739efb70 🚸(feedback) better wording
"on Meet" was misleading, it was like, "give us feedback by going on
'meet'. Let's be straightforward
2024-07-29 08:48:44 +02:00
Emmanuel Pelletier
72ef3c8bb0 🎨(locales) fix locale strings order
we should definitely have something that crashes on CI if running
i18n:extract makes a diff… oh well
2024-07-29 08:48:44 +02:00
Emmanuel Pelletier
e9ef2bc4ae 🐛(home) fix invite form that didn't work with actual meeting urls
it worked with codes but not full urls!
2024-07-29 08:16:50 +02:00
Emmanuel Pelletier
8587574fcd (rooms) show an invite dialog when creating a room
for now the dialog appears as a regular dialog with an overlay and all,
would be better as less intrusive. but good as is as a first step
2024-07-29 08:16:50 +02:00
Emmanuel Pelletier
c3617fc005 🚸(home) skip the join screen when creating a room
at the cost of a not-changeable username, logged in users who create
rooms now skip the join page. I think it's good to have this to test
this way, even if the username choice is not there yet.
2024-07-29 08:16:50 +02:00
Emmanuel Pelletier
8f81318ecf ♻️(frontend) trying out cleaner way to handle routes
it was a bit cumbersome to navigate by paths accross the app as if one
path changes a tiny bit we have to make sure we updated everything
everywhere and it's kind of error-prone and cumbersome to build paths by
hand.

now we have a routes file that describes everything: what is the path to
each route, and how to navigate to them.

We use a new navigateTo helper that helps us. It could be better typed
but i'm a newbie.
2024-07-29 08:16:50 +02:00
Emmanuel Pelletier
afd2f9a299 (frontend) new feedback link in header
this is just a link to an external url that is, for now, hardcoded as
our deploys dont have frontend env vars right now
2024-07-28 02:49:14 +02:00
Emmanuel Pelletier
fdff5092b0 🐛(sso) prevent flash when trying to autologin
the issue was we return the fetchUser promise to react query too early
(before the browser reloaded the page). now we make sure react query
doesn't get the info
2024-07-25 22:34:18 +02:00
lebaudantoine
234116163a (frontend) try silent login every one hour
This commit is totally work in progress.
@manuhabitela the floor is yours.

If the user is logged-out, try silently log-in her every hour,
to avoid any manual login on her side.

The one hour value has been discussed with @manuhabitela, but there
is no real logic behind it. Could definitely be shorter or longer.

It needs at least to be longer than the average silent login flow
to avoid locking the user-agent in an infinite redirection loop.
2024-07-25 22:34:18 +02:00
lebaudantoine
2a8027deb0 (frontend) support 'silent' and 'returnTo' params in authUrl
Enhanced the authentication URL generation to support 'silent'
and 'returnTo' query parameters.

This allows initiating a silent login and specifying a custom
return URL after auth.
2024-07-25 22:34:18 +02:00
lebaudantoine
dbd9ac6eea 🩹(frontend) fix ignored pre-join options
Closes #50.

Adopted LiveKit demo app approach for passing
configurations to LiveKitRoom.

Introduced roomOptions for future customizations (e.g.,
video quality, e2e, codec).

DeviceId is persisted in local storage despite boolean flag.
2024-07-25 18:54:19 +02:00
Emmanuel Pelletier
a35a4ffbec 🚸(room) prevent user from misclicking out of a meeting
now clicking on the header homepage link asks for confirmation when on
the route page.

this is quick and dirty, using browser confirm ui, and not making a
difference between join page and conference page, but it'll do for now
2024-07-25 15:05:06 +02:00
Emmanuel Pelletier
668523aa8b 🚸(frontend) follow antoine's remarks on homepage and header
- show the header on homepage. Not sure we want any header on this app
actually but I guess he's right since we have one it feels more
consistent to have it everywhere
- show logged in email in header. ditched it because i didn't quite get
the value of showing it all the time in this app but i guess it's better
than nothing
- remove user info from settings. Since they are back in the header, no
need
2024-07-25 14:46:00 +02:00
Emmanuel Pelletier
d15fb0a19b 💄(frontend) fix loading screen not visually centered
the loading word was sticked to top left without any padding
2024-07-25 14:46:00 +02:00