Commit Graph

230 Commits

Author SHA1 Message Date
Hristo Terezov f7b930409b feat(toolbox): Redesign. 2019-02-21 00:42:13 +00:00
Leonard Kim a045353e6e ref(tooltbox): use componentDidUpdate to trigger more changes 2018-11-21 08:08:44 -08: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
Pratik Shah b7b43e8d9c feat(chat): convert to use React
- Change "features/chat" to support listening for new chat messages
  and storing them, removing that logic from conference.js.
- Combine chat.scss and side_toolbar_container.css, and remove unused
  scss files. Chat is the only side panel so the two concepts have
  been merged.
- Remove direct access to the chat feature from non-react and non-redux
  flows.
- Modify the i18n translate function to take in an options object.
  By default the option "wait" is set to true, but that causes
  components to mount after the parent has been notified of
  an update, which means autoscrolling down to the latest rendered
  messages does not work. With "wait" set to false, the children
  will mount and then the parent will trigger componentDidUpdate.
- Create react components for chat. Chat is the side panel
  plus the entiren chat feature. ChatInput is a child of Chat and
  is used for composing messages. ChatMessage displays one message
  and extends PureComponent to limit re-renders.
- Fix a bug where the toolbar was not showing automatically when
  chat is closed and a new message is received.
- Import react-transition-group to time the animation of the
  side panel showing/hiding and unmounting the Chat component.
  This gets around the issue of having to control autofocus if the
  component were always mounted and visibility toggled, but
  introduces not being able to store previous scroll state
  (without additional work or re-work).
2018-09-26 14:48:10 -05:00
paweldomas ee9f304345 fix(RN): show the CC button only when transcribing is available 2018-09-07 16:48:16 -05:00
bgrozev b8179102c5
Merge pull request #3396 from nikvaessen/pr_independend_subtitles_cherry
independently display subtitles based on participants choice
2018-08-24 12:38:11 -05:00
linkmauve c23c798f7a Display the correct display name in the menu (#3388)
The current code was splitting it on a space, which made nicknames such as “Link Mauve” appear as “Link”, whereas it gets displayed correctly everywhere else in the UI.
2018-08-22 12:35:48 -07:00
Nik 3c27d2ee54 independently display subtitles based on participants choice 2018-08-22 19:49:58 +02:00
Ritwik Heda 1d99abc4a4 removes need for `eslint-disable-next-line react/jsx-wrap-multilines` and `eslint-diable-line no extra-parens` 2018-08-12 17:06:35 -05:00
Boris Grozev 195462a1a8 Merge branch 'master' into pr/3223 2018-08-08 15:35:40 -05:00
virtuacoplenny c353e9377f feat(tile-view): initial implementation for tile view (#3317)
* 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
2018-08-08 13:48:23 -05:00
Radium Zheng cc38fcc5d0 register shortcuts in the middleware 2018-08-08 09:18:16 +10:00
Radium Zheng a277421ecb WIP: Convert inline dialog to modal dialog 2018-08-08 09:18:16 +10:00
Radium Zheng 2f2e69a6f5 Add keyboard shortcuts for LocalRecordingInfoDialog
Which key should we use? Using "L" for now.
2018-08-08 09:18:16 +10:00
Radium Zheng 3241c7a929 guard LocalRecordingButton with _shouldShowButton 2018-08-08 09:18:16 +10:00
Radium Zheng 9c769a650e fix a missing doc string in Toolbox.js; reorder props alphabetically 2018-08-08 09:18:16 +10:00
Radium Zheng 07bc70c2f5 Implement local recording
index.js of local recording

local-recording(ui): recording button

local-recording(encoding): flac support with libflac.js

Fixes in RecordingController; integration with UI

local-recording(controller): coordinate recording on different clients

local-recording(controller): allow recording on remote participants

local-recording(controller): global singleton

local-recording(controller): use middleware to init LocalRecording

cleanup and documentation in RecordingController

local-recording(refactor): "Delegate" -> "Adapter"

code style

stop eslint and flow from complaining

temp save: client status

fix linter issues

fix some docs; remove global LocalRecording instance

use node.js packaging for libflac.js; remove vendor/ folder

code style: flacEncodeWorker.js

use moment.js to do time diff

remove the use of console.log

code style: flac related files

remove excessive empty lines; and more docs

remove the use of clockTick for UI updates

initalize flacEncodeWorker properly, to avoid premature audio data transmission

move the realization of recordingController events
from LocalRecordingButton to middleware

i18n strings

minor markup changes in LocalRecordingInfoDialog

fix documentation
2018-08-08 09:18:16 +10:00
Nik b8daf0a9f9 [WEB] add UI for transcription (#3213)
* [WEB] add UI for transcription

* add analytics event for button, do not use global APP object

* use props instead of state, use local conference to kick participant

* put imports in alphabetical order

* add translation for TranscribingLabel

* fix merge conflict

* add closed caption button

* purge OverFlowMenuItem which starts and stops Transcription

* readd closed caption icon and fix small issues due to purge

* delete unused icon in _font.scss
2018-07-26 09:33:40 -07:00
Bettenbuk Zoltan 5aee082bf9 [RN] Implement streaming on mobile 2018-07-11 15:13:16 -05:00
Bettenbuk Zoltan b48c897d9b [WEB] Move RecordButton to the new ToolBox abstraction layer 2018-07-03 11:08:37 +01:00
Leonard Kim f035861617 ref(toolbar): allow OverflowMenuItem to show beta tag 2018-06-22 15:53:35 -05:00
Hristo Terezov 1f8fa3b6d4 Refactor settings modal (#3121)
* feat(settings): setting dialog

- Move device selection, profile edit, language select, moderator
  options, and server auth into one modal with tabs.
- Remove side panel profile and settings and logic used to update
  them.
- Pipe server auth status into redux to display in the settings
  dialog.
- Change filmstrip only device selection popup to use the new
  stateless settings dialog component.

* squash: do not show profile tab if not guest

* squash: profile button not clickable if no profile to show

* squash: nits

* ref: Settings dialog.
2018-06-20 13:19:53 -07:00
Дамян Минков ac834326e7
Token based features (#3075)
* Adds an option to disable features based on token data.

Reverts changes from b84e910086, removes disableDesktopSharing option and an interface_config option.

* Disable recording button based on token features data.

Hide recording if local participant isGuest and roles based on token.
When enableUserRolesBasedOnToken is enabled we were not hiding the record button for guests.

* Adds filtering of jibri iqs and rayo based on features.

Moves feature checking in separate utility function.
Renames utility method.

* Adds a footer text when outbound-call is not feature enabled.

* Fixes comments.
2018-06-15 13:10:22 -05:00
Guus der Kinderen ccf0c8a363 fix(i18n) Accessiblity labels translations (#3071)
* fix(toolbar): accessibilityLabel should be translatable.

This commit adds a helper property to get the accessibilityLabel of an item,
providing a translation if one is available. This mimics the behavior of
label and tooltip.

* fix(toolbar) 'hangup' button accessibilityLabel i18n

* fix(toolbar) 'mute' button accessibilityLabel i18n

* fix(toolbar) 'videomute' button accessibilityLabel i18n

* fix(toolbar) 'moreActions' button accessibilityLabel i18n

* fix(toolbar) 'shareRoom' button accessibilityLabel i18n

* fix(toolbar) 'audioRoute' button accessibilityLabel i18n

* fix(toolbar) 'toggleCamera' button accessibilityLabel i18n

* fix(toolbar) 'audioOnly' button accessibilityLabel i18n

* fix(toolbar) 'roomLock' button accessibilityLabel i18n

* fix(toolbar) 'pip' button accessibilityLabel i18n

* fix(toolbar) 'invite' button accessibilityLabel i18n

* fix(toolbar) 'raiseHand' button accessibilityLabel i18n

* fix(toolbar) 'chat' button accessibilityLabel i18n

* fix(toolbar) 'shareYourScreen' button accessibilityLabel i18n

* fix(toolbar) 'fullScreen' button accessibilityLabel i18n

* fix(toolbar) 'sharedvideo' button accessibilityLabel i18n

* fix(toolbar) 'document' button accessibilityLabel i18n

* fix(toolbar) 'speakerStats' button accessibilityLabel i18n

* fix(toolbar) 'feedback' button accessibilityLabel i18n

* fix(toolbar) 'shortcuts' button accessibilityLabel i18n

* fix(toolbar) 'recording' button accessibilityLabel i18n

* fix(toolbar) 'settings' button accessibilityLabel i18n

* fix(welcomepage) accessibilityLabels i18n

* fix(toolbar) 'info' button accessibilityLabel i18n

* fix(i18n): Add translation to various aria-label property values.

* fix(i18n): Differentiate between overflow menu and button.
2018-06-07 13:32:18 -07:00
virtuacoplenny 84f303dd3c ref(toolbar): show recording features based on explicit configs (#3080)
* ref(toolbar): show recording features based on explicit configs

* squash: bring back button configs, use final config names

* squash: update interfaceConfig comment, remove unused config whitelist

* squash: change order of button enabled checks to reduce diff

* squash: fileRecording -> fileRecordings
2018-06-05 22:19:28 -07:00
Lyubo Marinov 771d60f954 Associate remote participant w/ JitsiConference (_UPDATED)
The commit message of "Associate remote participant w/ JitsiConference
(_JOINED)" explains the motivation for this commit.

Practically, _JOINED and _LEFT combined with "Remove remote participants
who are no longer of interest" should alleviate the problem with
multiplying remote participants to an acceptable level of annoyance.

Technically though, a remote participant cannot be identified by an ID
only. The ID is (somewhat) "unique" in the context of a single
JitsiConference instance. So in order to not have to scratch our heads
over an obscure corner, racing case, it's better to always identify
remote participants by the pair id-conference. Unfortunately, that's a
bit of a high order given the existing source code. So I've implemented
the cases which are the easiest so that new source code written with
participantUpdated is more likely to identify a remote participant with
the pair id-conference.

Additionally, the commit "Reduce direct read access to the
features/base/participants redux state" brings more control back to the
functions of the feature base/participants so that one day we can (if we
choose to) do something like, for example:

If getParticipants is called with a conference, it returns the
participants from features/base/participants who are associated with the
specified conference. If no conference is specified in the function
call, then default to the conference which is the primary focus of the
app at the time of the function call. Added to the above, this should
allow us to further reduce the cases in which we're identifying remote
participants by id only and get us even closer to a more "predictable"
behavior in corner, racing cases.
2018-05-23 09:46:15 -05:00
virtuacoplenny f608ad4e5e
feat(toolbar): add beta tag to live streaming button (#3007)
* feat(toolbar): add beta tag to live streaming button

* tweak colors and border radius
2018-05-21 15:16:38 -07:00
virtuacoplenny ee74f11c3d
feat(recording): frontend logic can support live streaming and recording (#2952)
* 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
2018-05-16 07:00:16 -07:00
Lyubo Marinov 447035c8b2 Coding style 2018-05-15 14:12:39 -05:00
Lyubo Marinov 3aff4967f1 Keep buttons in their associated features
Contributing all buttons in one place goes against the designs that we
set out at the beginning of the project's rewrite and that multiple of
us have been following since then.
2018-05-15 14:12:38 -05:00