See multiple participants on stage
Pin and unpin to stage
Automatic selection of participants to be displayed on the stage filmstrip based on dominant speaker changes
Make Filmstrip a reusable component. Used by MainFilmstrip (old functionality) and the new StageFilmstrip
Rename DominantSpeakerName to StageParticipantNameLabel
Active border now showed only for the dominant speaker (no longer for the pinned participant)
Hide video from the vertical filmstrip for the participants on stage
Update video constraints
Updated pinned indicator
Move label to LargeVideo so that's it's centred in the view instead of the whole screen
Move vertical filmstrip max width calculation to a function and use it to set the large video width
Make conference info and toolbar appear on top of the filmstrip
After a breakpoint, filmstrip pushes over the stage view instead of appearing on top
On user resize make tiles wider; after a breakpoint show grid view in the filmstrip
On filmstrip visibility toggle animate stage view resize
Added config for filmstrip with disableResizableFilmstrip
* ref(web): removes video blur when ICE is disconnected.
Removes the blur effect from the large video and stops showing
the network connectivity issues message when ICE disconnects.
The feature has been considered too disruptive and there's a plan to
have it replaced with a more subtle indication.
* remove RECONNECTING key from main.json
This adds an option to disable video autoplay that will be used mostly with maleus (our selenium-based load testing tool for testing the new bridge). Disabling video rendering lowers the resource utilisation of the selenium nodes.
* fix(large-video): do not show avatar if no url
By default the large video dominant speaker avatar
has an empty src, which will result in a broken
image displaying. There is also disconnect with
non-react code trying to set an undefined src.
To prevent such until local avatar generation
work is done in the future, just don't show the
avatar.
* fix(conference): set the room instance earlier
Set the room instance on APP.conference before triggering
a redux update of the conference being set,, because
middleware can then fire and call methods on APP.conference
that depend on the room being set.
* get local participant directly from store instead of from global
* feat(tile-view): initial implementation for tile view
- Modify the classname on the app root so layout can adjust
depending on the desired layout mode--vertical filmstrip,
horizontal filmstrip, and tile view.
- Create a button for toggling tile view.
- Add a StateListenerRegistry to automatically update the
selected participant and max receiver frame height on tile
view toggle.
- Rezise thumbnails when switching in and out of tile view.
- Move the local video when switching in and out of tile view.
- Update reactified pieces of thumbnails when switching in and
out of tile view.
- Cap the max receiver video quality in tile view based on tile
size.
- Use CSS to hide UI components that should not display in tile
view.
- Signal follow me changes.
* change local video id for tests
* change approach: leverage more css
* squash: fix some formatting
* squash: prevent pinning, hide pin border in tile view
* squash: change logic for maxReceiverQuality due to sidestepping resizing logic
* squash: fix typo, columns configurable, remove unused constants
* squash: resize with js again
* squash: use yana's math for calculating tile size
* Show subtitles when Jigasi sends transcription results in JSON
* fix: Import PropTypes from prop-types.
* apply feedback on initial PR
* Changed Object to Map, alphabetic ordering fixes ,css changes in transcription subtitles
* Sends Map of transcriptMessages as prop to Component
* Documentation fixes and uses config in redux state
* Minor doc fix
* rename feature 'transcription' to 'subtitles'
* Moves subtitles config to interfaceConfig and minor fixes
* minor lint fix
* feat(recording): frontend logic can support live streaming and recording
Instead of either live streaming or recording, now both can live together. The
changes to facilitate such include the following:
- Killing the state storing in Recording.js. Instead state is stored in the lib
and updated in redux for labels to display the necessary state updates.
- Creating a new container, Labels, for recording labels. Previously labels were
manually created and positioned. The container can create a reasonable number
of labels and only the container itself needs to be positioned with CSS. The
VideoQualityLabel has been shoved into the container as well because it moves
along with the recording labels.
- The action for updating recording state has been modified to enable updating
an array of recording sessions to support having multiple sessions.
- Confirmation dialogs for stopping and starting a file recording session have
been created, as they previously were jquery modals opened by Recording.js.
- Toolbox.web displays live streaming and recording buttons based on
configuration instead of recording availability.
- VideoQualityLabel and RecordingLabel have been simplified to remove any
positioning logic, as the Labels container handles such.
- Previous recording state update logic has been moved into the RecordingLabel
component. Each RecordingLabel is in charge of displaying state for a
recording session. The display UX has been left alone.
- Sipgw availability is no longer broadcast so remove logic depending on its
state. Some moving around of code was necessary to get around linting errors
about the existing code being too deeply nested (even though I didn't touch
it).
* work around lib-jitsi-meet circular dependency issues
* refactor labels to use html base
* pass in translation keys to video quality label
* add video quality classnames for torture tests
* break up, rearrange recorder session update listener
* add comment about disabling startup resize animation
* rename session to sessionData
* chore(deps): update to latest lib for recording changes
* ref(large-video): reactify background
This is pre-requisite work for disabling the background on
certain browsers, namely Firefox. By moving the component
to react, and in general encapsulating background logic,
selectively disabling the background will be easier.
The component was left for LargeVideo to update so it can
continue to coordinate update timing with the actual large
video display. If the background were moved completely into
react and redux with LargeVideo, then background updates would
occur before large video updates causing visual jank.
* fix(large-video): do not show background for Firefox and temasys
Firefox has performance issues with adding filter effects on
animated elements. On temasys, the background videos weren't
really displaying anyway.
* some props refactoring
Instead of passing in classes to LargeVideoBackground, rely on
explicit props. At some point LargeVideo will have to be reactified
and the relationsihp between it and LargeVideoBackground might
change, so for now make use of props to be explicit about
how LargeVideoBackground can be modified.
Also, set the jitsiTrack to display on LargeVideoBackground to
null if the background is not displayed. This was an existing
optimization, although previously done with pausing and playing.
* squash: use newly exposed RTCBrowserType
* squash: rebase and use new lib browser util
* squash: move hiding logic all into LargeVideo
* squash: remove hiding of background on stream change. hopefully doesnt break anything
* ref(recording): convert recording label to react
- Create a RecordingLabel component for displaying the current
recording state, as reflected in the redux store. This is
needed for 1-on-1 mode to be completely in redux.
- Update the store with the recording state so RecordingLabel
can update itself.
- Remove previous logic for updating the non-react label, which
includes event emitting for filmstrip visibility changes,
as RecordingLabel is hooked into redux updates.
* ref(recording): use status and type constants from lib
* make label really dumb, move logic back to Recording
* feat(quality-slider): initial implementation
- Add new menu button with an Inline Dialog slider for
selecting received video quality.
- Place P2P status in redux store for the Inline Dialog
to display a warning about not respecting video quality
selection.
- Respond to data channel open events by setting receive
video quality. This is for lonely call cases where a
setting is set before the data channel is open.
- Remove dropdown menu from video status label and clean
up related js and css.
* first pass at addressing feedback
- Move VideoStatusLabel to video-quality directory.
- Rename VideoStatusLabel to VideoQualityLabel.
- Open VideoQualitydialog from VideoQualityLabel.
- New CSS for making VideoQualityLabel display properly.
- Do not render VideoQualityLabel in filmstrip only instead of hiding with css.
- Remove tooltip from VideoQualityLabel.
- Show LD, SD, HD labels in VideoQualityLabel.
- Remove action SET_LARGE_VIDEO_HD_STATUS from conference.
- Create new action UPDATE_KNOWN_LARGE_VIDEO_RESOLUTION in large-video.
- Move VideoQualityButton into video-quality directory.
- General renaming (medium -> standard, menu -> dialog).
- Render P2P message between title and slider.
- Add padding to slider for displacement caused by P2P message's new placement.
- Fix display issue with VideoQualityButton displaying out of line in the
primary toolbar.
* second pass at addressing feedback
- Fix p2p inline message color
- Force labels to break on words
- Resolve rebase issues, including only dispatching quality
update on change. Before there was double calling of dispatch
produced by an IE11 workaround. This breaks now when setting
audio only mode to true twice.
- Rename some instances of quality to definition
* rename to data channel opened
* do not show p2p in audio only
* stop toggle audio only icon automatically
* remove fixme about toolbar button
* find closest resolution for label
* toggle dialog on button click
* redo last commit for both button and label
* feat(presence): display status in thumbnail and large video
- Create a React Component for displaying presence. It currently
connects to the store for participant updates but in the future
should not be as smart once more reactification occurs.
- Modify filmstrip css so the presence status displays horizontal
center and below the avatar.
- Modify videolayout css so the presence status displays horizontal
centered and with a rounded background.
- Dispatch presence updates so the participant state can be update.
- Update message position on large video update to ensure message
positioning is correct.
* squash: do not show presence message if connection message is displayed
We've had Filmstrip & LargeVideo React Components on mobile/React Native
from the start. We didn't have them on Web (because the rewrite in React
is not complete yet). However, that led to differences in the React
Component Conference on Web and mobile. In an effort to get closer to
merging the React Component Conference on Web and mobile, introduce the
React Components Filmstrip & LargeVideo on Web even if a minimal
render-only form at this time.
Rokixy
apetrus20
Robert Pintilii
Saúl Ibarra Corretgé
Vlad Piersec
Steffen Kolmer
Tudor-Ovidiu Avram
hmuresan
Mihai-Andrei Uscat
Mihai Uscat
Bettenbuk Zoltan
Jaya Allamsetty
Paweł Domas
George Politis
virtuacoplenny
virtuacoplenny
Nik
hristoterezov
Ilya Daynatovich
Lyubo Marinov