This is a stop-gap approach to remove the AtlasKit notifications stack.

Instead of using a AK FlagGroup to render our notifications (Flag components)
in, create our own container and use a fake FlagGroupContext provider, which is
what FlagGroup uses to control what flags can be dismissed.

Since we now render all notifications, the web part has been refactored to make
sure all notifications get a timer.

Added animations

Renamed DrawerPortal to JitsiPortal

Redesigned notifications
Changed notification text and icons color and added collared ribbon

Updated participants list to:
- show Moderator label
- show correct status icons (red for force muted)
- show participants in the right order

Updated moderation to:
- show moderation menu at all times
- make moderation options functional

Updated notifications:
- fixed raise hand to show name
- display moderator rights granted

Updated mute/ stop video for all dialogs to include moderation toggles

Added ask to unmute button

Fix comments on ask to unmute

Co-authored-by: robertpin <robert.pin9@gmail.com>

Move DISABLE_FOCUS_INDICATOR from interface_config.js to config.js (disableModeratorIndicator).

* Update moderation in effect notifications

Only display one notification for each media type. Display notification for keyboard shortcuts as well

* Update muted remotely notification

Display name of moderator in the notification

* Fix indentation on moderation menu

* Update text for video moderation

* Added moderator label in participant pane

* Update microphone icon in participant list

For participants that speak, or are noisy, but aren't dominant speaker, the icon in the participant list will look the same as the dominant speaker icon but will not change their position in the list

* Added sound for asked to unmute notification

* Code review changes

* Code review changes

Use simple var instead of function for audio media state

* Move constants to constants file

* Moved constants from notifications to av-moderation

Co-authored-by: Vlad Piersec <vlad.piersec@8x8.com>

* feat(av-moderation) raised hand ask to unmute aria-label

* feat(av-moderation) fixed test

* feat(av-moderation) added id for notification buttons

* feat(av-moderation) fixed lint error

* feat(av-moderation) added id for non raised hand participant

* feat(av-moderation) added extra id naming for ask to unmute button and participant items

* feat(av-moderation) fixed lint errors

* feat(av-moderation) changed id to participantID

* feat(av-moderation) removed semicolon

* squash: Drop unused id for participantItem.

* squash: Drop unused fields for raisedHand.

Co-authored-by: Дамян Минков <damencho@jitsi.org>

- fix issue on error notification on invite contacts

* feat: Initial UI part for A/V moderation.

Based on https://github.com/jitsi/jitsi-meet/pull/7779

Co-authored-by: Gabriel Imre <gabriel.lucaci@8x8.com>

* feat: Hides context menu in p2p or only moderators in the meeting.

* feat: Show notifications on enable/disable.

* feat(moderation): Add buttons to participant list & notifications

* fix(moderation): Fix raised hand participant leaving

* feat(moderation): Add support for video moderation

* feat(moderation): Add mute all video to context menu

* feat(moderation): Redo participants list 'More menu'

* fix: Fixes clearing av_moderation table.

* fix: Start moderation context menu

* fix(moderation): Show notification if unapproved participant tries to start CS

Co-authored-by: Gabriel Imre <gabriel.lucaci@8x8.com>
Co-authored-by: Vlad Piersec <vlad.piersec@8x8.com>

- update lib-jitsi-meet to version with support for replacing participant

* Make Jitsi WCAG 2.1 compliant

* Fixed password form keypress handling

* Added keypress handler to name form

* Removed unneccessary dom query

* Fixed mouse hove style

* Removed obsolete css rules

* accessibilty background feature

* Merge remote-tracking branch 'upstream/master' into nic/fix/merge-conflicts

* fix error

* add german translation

* Fixed merge issue

* Add id prop back to device selection

* Fixed lockfile

Co-authored-by: AHMAD KADRI <52747422+ahmadkadri@users.noreply.github.com>

Found via `codespell -q 3 -S ./lang`

Features flags added:  
-tile-view.enabled
-filmstrip.enabled
-notifications.enabled
-toolbox.enabled

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.

* fix(thumbnail): Optimize status bar moderator icon

Moved all moderator functionality to react to optimize the number of
status bar updates.

* fix(RemoteVideoMenuTriggerButton): Use nullish coalescing

Co-Authored-By: Saúl Ibarra Corretgé <saghul@jitsi.org>

* ref(StatusBar): rename to StatusIndicators

* fix(RemoteVideoMenu): isModerator value.

* fix(notification): mobile.

Co-authored-by: Saúl Ibarra Corretgé <s@saghul.net>

Protectt ourselves against interfaceConfig being undeclared. typeof
interfaceConfig will return "undefined", but that's different than having some
window.interfaceConfig = undefined, even though the valus is the same. The
former will give a ReferenceError.

Join notifications are already supressed for the local
participant, so hide the left notification. For now
the notification is not being shown on mobile to keep
the same existing behavior and because a copy change
will be needed, but will be added once batching is
implemented.

* Fix detecting preferred audio output.

Fixes detecting when a new output device is found and we have stored user preference of using that device.

* Does not store which is the currently open device on save.

Does not save the currently opened device when saving settings dialog, this will be done once we successfully replace the tracks to use the new devices.

* Saves opened audio device after successfully changing it.

If we do it earlier _updateAudioDeviceId is using localAudio and can store wrong value.

* Adds notification for new non preferred devices.

A notification is shown which gives an option to the user to select and use the newly plugged devices.
Adding custom button and handler for the action to the notifications.

* Changes logic to search and handle all newly added devices from array.

* Moves some utility methods to features/base/devices.

Only one notification will be displayed at a time on mobile.

Adds 1 liner notifications to mobile. Only the title is displayed. In
case the title is missing there's a fallback to the description.

If user dismisses the not topmost notification the timeout will be
cleared and a new one will not be set, because the top notification
remained the same (see the if at line 90).

The docs of 'componentDidUpdate' say that it's not called for the
initial render. If the component is added to the DOM with 1 notification
already, then the update will not happen and timeout will never be set
which will effectively break the timeouts chain.

🔥🔥🔥

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.

The styles.actionColumn does not exist. It looks the same without the
extra View.

Moves NotificationContainer to the toolbox and filmstrip container, so
that there's no need to manually calculate the positions.

The outer container is not necessary if 'justifyContent: flex-end' is
used with the absolute fill on the main container.