Commit Graph

22 Commits

Author SHA1 Message Date
Calinteodor 7c523f3250
language(typescript) actionTypes.js -> actionTypes.ts (#10940)
* language(typescript) first ts component, added ts configurations, actionTypes.js are now ts files
2022-04-08 15:24:58 +03:00
robertpin 7aca5e71b9 refactor(participants-pane) Refactored with reusable components
Created Reusable components for:
- ListItem - used by participants list and lobby participants list
- ContextMenu - used by participant context menu and advanced moderation context menu
- Quick action button - used by quick action buttons on participant list items

Moved participants custom theme to base/components/themes

Created reusable button component for all participants pane buttons (Invite, Mute All, More)

Moved web components to web folder

Moved all styles from Styled Components to JSS

Fixed accessibility labels for some buttons

Removed unused code

Updated all styles to use theme tokens
2021-11-01 08:54:13 +02:00
Horatiu Muresan b801e0115d
fix(context-menus) Fix participant context menus/toolbar overflow menu
- on ipads, long touch open dialog now opens the context menu to the left of the thumbnail as expected
- on ipads, now we close context menus on tap out
- fix case when participant context menu's height > tileview videos' height causing scroll on videos pane
- keep toolbox open while the overflow menu is shown
- keep remote participant video thumbnail in filmstrip visible even if toolbox is hidden, if context menu is opened
- Fix bug where toolbox could be completely disabled
2021-09-14 10:43:52 +03:00
vp8x8 07d023968a
feat(responsive-ui): Keep aspect ratio for filmstrip self view on mobile web (#9848)
* feat(responsive-ui): Keep aspect ratio for filmstrip self view on mobile web

Right now filmstrip displays self view in landscape mode.
With these changes the aspect ratio of the self view will be maintained
so on portrait mode the thumbnail will be displayed vertically.
Of course this makes sense only on mobile web.

* Code review

* Fix height
2021-09-09 16:14:09 +03:00
Hristo Terezov 7dd43d93b6 feat(filmstrip-pagination): mobile support. 2021-08-30 11:32:16 -05:00
Avram Tudor abc984f83b
fix(css) fix various layout issues on small screen sizes (#9464) 2021-06-30 12:01:47 +03:00
Gabriel Imre d014a52ab3
feat(participants-pane) implement participants pane 2021-04-21 15:48:05 +02:00
Mihai-Andrei Uscat 911aaed052
fix: Refactor client width computation.
* Unify chat open/close size changes and move them to redux.
* Fix responsive columns not accounting for chat.
2021-03-23 14:06:43 +02:00
Saúl Ibarra Corretgé 6e679f952f redux: refactor loading of middlewares and reducers
Up until now we relied on implicit loading of middlewares and reducers, through
having imports in each feature's index.js.

This leads to many complex import cycles which result in (sometimes) hard to fix
bugs in addition to (often) breaking mobile because a web-only feature gets
imported on mobile too, thanks to the implicit loading.

This PR changes that to make the process explicit. Both middlewares and reducers
are imported in a single place, the app entrypoint. They have been divided into
3 categories: any, web and native, which represent each of the platforms
  respectively.

Ideally no feature should have an index.js exporting actions, action types and
components, but that's a larger ordeal, so this is just the first step in
getting there. In order to both set example and avoid large cycles the app
feature has been refactored to not have an idex.js itself.
2020-06-16 11:24:15 +02:00
Saúl Ibarra Corretgé d740752522 rn,responsive-ui: refactor dimensions detection
Use a dimensions detecting root component. The Dimensions module does not
measure the app's view size, but the Window, which may not be the same, for
example on iOS when PiP is used.

Also refactor the aspect ratio wrap component since it can be taken directly
from the store.

Last, remove the use of DimensionsDetector on LargeVideo and TileView since they
occupy the full-screen anyway.

Fixes PiP mode on iOS.
2020-06-02 16:54:28 +02:00
Bettenbuk Zoltan 0598e7369b ref: eslint-config-jitsi@1.0.3 2020-05-20 17:14:29 +02:00
Hristo Terezov 31d9fb12c8
ref(Filmstrip): Optimize resizes. (#4992)
* ref(Filmstrip): Optimize resizes.

* fix(thumbnails): resize.

* fix(thumbnails): Issue with height 0, width 0.

* doc(Filmstrip): Improve JSDoc.
2020-01-24 16:28:47 +00:00
Saúl Ibarra Corretgé fe2b1f3d9f rn: refactor aspect ratio and reduced UI detectors 2019-11-15 12:54:44 +01:00
Bettenbuk Zoltan 2a5adfc601 Remove some Flow annotations 2019-03-25 13:53:08 +01:00
Saúl Ibarra Corretgé c025c7e132 flow: tame the beast
🔥🔥🔥
2019-03-21 14:47:55 +01:00
Saúl Ibarra Corretgé 0e92e73789 chore: use strings as action types
Using anything non-serializable for action types is discouraged:
https://redux.js.org/faq/actions#actions

In fact, this is the Flow definition for dispatching actions:

declare export type DispatchAPI<A> = (action: A) => A;
declare export type Dispatch<A: { type: $Subtype<string> }> = DispatchAPI<A>;

Note how the `type` field is defined as a subtype of string, which Symbol isn’t.
2019-03-21 14:47:55 +01:00
Leonard Kim 486e8e35d9 ref: move all prop type declaration to flow
For the most part the changes are taking the "static propTypes" declaration off
of components and declaring them as Flow types. Sometimes to support flow some
method signatures had to be added. There are some exceptions in which more had
to be done to tame the beast:
- AbstractVideoTrack: put in additional truthy checks for videoTrack.
- Video: add truthy checks for the _videoElement ref.
- shouldRenderVideoTrack function: Some component could pass null for the
  videoTrack argument and Flow wanted that called out explicitly.
- DisplayName: Add a truthy check for the input ref before acting on it.
- NumbersList: Move array checks inline for Flow to comprehend array methods
  could be called. Add type checks in the Object.entries loop as the value is
  assumed to be a mixed type by Flow.
- AbstractToolbarButton: add additional truthy check for passed in type.
2018-11-07 17:38:10 +01:00
Saúl Ibarra Corretgé 0817482b9c flow: tame the beast 2018-06-04 16:05:48 -05:00
Daniel Ornelas 7822155e5e Fix iPad rotation related issue when in PiP 2018-03-22 16:40:17 -04:00
Lyubo Marinov e2cf7a788d [RN] Make full-screen more resilient on Android (Coding style: consistency) 2018-02-14 12:28:22 -06:00
Saúl Ibarra Corretgé 5305557ce5 [RN] Add a "reduced UI" mode
It's detected based on a size threshold.
2018-02-06 15:53:52 -06:00
Lyubo Marinov c9d8b5c827 Finally! Let there be... responsive-ui!
We started on the way to responsive UI and its design with aspect ratio
and keeping the filmstrip on the short side of the app's visible
rectangle.

Shortly, we're going to introduce reduced UI for Picture-in-Picture. And
that's where we'll need another dimensions-based detector akin to the
aspect ratio detector.

While the AspectRatioDetector, the up-and-coming ReducedUIDetector, and
their base DimensionsDetector are definitely separate abstractions and
implementations not mixed for the purposes of easy extensibility and
maintenance, the three of them are our building blocks on top of which
we'll build our responsive UI.
2018-02-06 15:53:27 -06:00