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

✨(frontend) add fullscreen mode on desktop #314

Open
wants to merge 2 commits into
base: main
Choose a base branch
from

Conversation

lebaudantoine
Copy link
Collaborator

Added an option allowing users to trigger the fullscreen mode while on desktop. Heavily inspired by the PR #279 from @sylvinus.

Yet, this option allow user to enable/disable the fullscreen mode on the whole ui, in the next iteration I'll add the same feature but for a given video track.

This is on purpose that the feature is available on desktop only. The hook code has been partially written by Claude and inspired by @sylvinus first suggestion.

@lebaudantoine
Copy link
Collaborator Author

Capture d’écran 2025-01-21 à 14 24 24

@NathanVss
Copy link
Collaborator

By default when I enter a room I have "exit full screen" button, which feels weird because I didn't set anything full screen before.

Is it only when we are alone in a room ?

Capture d’écran 2025-01-22 à 11 03 55

@NathanVss
Copy link
Collaborator

It also happen when there is > 1 people in the room.

Nothing happens when clicking on it.

Capture d’écran 2025-01-22 à 11 05 14

@NathanVss
Copy link
Collaborator

Enregistrement.de.l.ecran.2025-01-22.a.11.07.06_2_3.mov

Comment on lines 34 to 50
{isFullscreenAvailable && (
<MenuItem
onAction={() => toggleFullScreen()}
className={menuRecipe({ icon: true, variant: 'dark' }).item}
>
{isCurrentlyFullscreen ? (
<>
<RiFullscreenExitLine size={20} />
{t('fullscreen.exit')}
</>
) : (
<>
<RiFullscreenLine size={20} />
{t('fullscreen.enter')}
</>
)}
</MenuItem>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

WDYT about nesting this in a sub component ?

Copy link
Collaborator Author

@lebaudantoine lebaudantoine Jan 22, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would prefer having all the MenuItem at the same level, but if you feel it's necessary can totally do

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I try something

@lebaudantoine
Copy link
Collaborator Author

Expected behavior

Enregistrement.de.l.ecran.2025-01-22.a.13.52.27.mov

Added an option allowing users to trigger the fullscreen mode while on desktop.
Heavily inspired by the PR #279 from @sylvinus.

Yet, this option allow user to enable/disable the fullscreen mode on the whole
ui, in the next iteration I'll add the same feature but for a given video track.

This is on purpose that the feature is available on desktop only.
The hook code has been partially written by Claude and inspired by @sylvinus
first suggestion.
Each menu item is now a standalone component, improving:
- Code organization & reusability
- Maintainability by reducing OptionsMenuItems complexity

This breaks down large components.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants