Commit Graph

261 Commits

Author SHA1 Message Date
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
virtuacoplenny 590ad90cd1
ref(video-layout): resize thumbnails first when resizing video area (#3308) 2018-07-26 11:45:04 -07:00
virtuacoplenny afd2aea79c ref(large-video): combine selectParticipant logic from web (#3266)
* ref(large-video): combine selectParticipant logic from web

Currently native/middleware/redux has its own logic for selecting a participant
on the bridge. To have the logic web respect that logic, a few changes are
needed.
- Web no longer has its own call to selectParticipant.
- To keep in line with web logic selectParticipant action should act even when
  there is no track. This makes it so that when a participant does get a track
  that the bridge will send high quality. The bridge can already handle when the
  selected participant does not have a video track.
- The timing of web is such that on joining an existing conference, a
  participant joins and the participant's tracks get updated and then the
  conference is joined. The result is selectParticipant does not get fired
  because it no-ops when there is no conference. To avoid having to make
  uncertain changes (to be lazy), update the selected participant on conference
  join as well.

* squash: update comment, pass message to error handler
2018-07-20 13:19:26 -05:00
hristoterezov bd449be20d fix(VideoLayout): JS error if updateLargeVideo is called too early. 2018-07-09 20:22:43 -05:00
Leonard Kim 5dc2aca081 fix(video-layout): handle undefined video type for large video update
When replace track is called in JitsiConference, there is no
guarantee a videoType update will come in presence before
the track added event. This can lead to the situation in
LargeVideoManager where an update is called with a track
with an undefined videoType.
2018-07-02 21:54:16 -05:00
virtuacoplenny 9a06d2bf52 ref(video-layout): consolidate connection status update handling (#3185)
- Instead of having 4 listeners for local connection status
  updates and 1 for remote, remove two of the redundant listeners.
- Instead of calling into 4 separate VideoLayout methods to update a
  participant's connection status, expose one handler.
2018-06-25 10:44:12 -07:00
damencho 682169e44c Renames isBot -> isFakeParticipant. 2018-06-22 18:23:17 -05:00
Leonard Kim 91323ebfec ref(video-layout): add thumbnails on participant join action 2018-06-01 10:42:57 -07:00
Leonard Kim 60c68b624e ref(video-layout): local video does not call video layout directly on stream end 2018-06-01 10:42:57 -07:00
Leonard Kim 92414a346a ref(video-layout): remote thumbnail should not update large video directly 2018-06-01 10:42:57 -07:00
Leonard Kim 6f962be322 ref(video-layout): remove unused param in addParticipantContainer 2018-06-01 10:42:57 -07:00
Leonard Kim 1e3dc20b44 ref(video-layout): video layout controls own updating after user leave 2018-06-01 10:42:57 -07:00
Leonard Kim 05801711a7 ref(video-layout): get pinned ID directly from redux 2018-06-01 10:42:57 -07:00
Leonard Kim 57f7abc6dd ref(video-layout): get dominant speaker state from redux
Instead of keeping dominant speaker locally, get it from redux and be
updated when the dominant speaker changes. This is in an attempt to mimic
the video layout being reactified and connected to redux.
2018-06-01 10:42:57 -07:00
Leonard Kim 12d7ab9026 ref(layout): use css to make video layout containers fit window
Instead of using JS, just use CSS 100% width and height. This
also resolves a jitter that occurs on edge when a modal's
container appends to the body.
2018-05-18 15:34:40 -05: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
virtuacoplenny 907cb013a8 fix(hangup): ensure large video exists before getting displayed id (#2799)
On hangup while audio only, audio only is set to false on
conference leave to reset redux state on mobile. Large video will
update itself on conference leave, but large video has been cleaned
up by that time so trying to directly access the user ID on large
video will fail. Be defensive about this check, because its
callers are already defensive about its return value.
2018-04-12 14:23:03 -07:00
Leonard Kim 2ce3c2d459 ref(filmstirp): remove animate flag from resizeThumbnails
The flag is always false.
2018-04-10 16:18:45 -05:00
Leonard Kim 8363f3cfeb ref(toolbar): remove all jquery filmstrip animations
The animate flag is always being passed in as false, so
essentially the animation isn't needed, unless a setTimeout 0
behavior is for some reason required...
2018-04-10 16:18:45 -05:00
Leonard Kim 1eee20dd5a ref(toolbar): remove contact list 2018-04-10 09:34:52 +02:00
Leonard Kim c2f5afe9c2 fix(large-video): switch to dominant speaker with no video
On DOMINANT_SPEAKER_CHANGED events, switch to the new
dominant speaker regardless of if the speaker has video;
it's okay to show the speaker's avatar.
2017-11-21 15:06:30 -06:00
Leonard Kim fcb3ca836f fix(large-video): return to dominant speaker without video
Always switch to the dominant speaker after unpinning
instead of conditionally checking if the current dominant
speaker has video.
2017-11-21 15:06:30 -06:00
Leonard Kim 95fcc7702f fix(video-layout): contact list click behaves like thumbnail click
Checks exist when clicking a contact list to prevent the pinning
UI from updating if a remote thumbnail has not loaded video.
This was unexpected UX so instead go ahead and pin. This is
accomplished by having contact list clicks to more directly
trigger the flow of a thumbnail being clicked.
2017-11-15 14:56:59 -06:00
Дамян Минков 90070d9e9f Fixes a problem not showing remote video menu in case of all moderators. (#2130)
Removes hasRemoteVideoMenu from RemoteVideo.
In some cases where mod_muc_allowners is enabled we do not see the remote video menu. The problem was in the order of initialization of remote video component.
RemoteVideo#constructor -> Remotevideo#addaddRemoteVideoContainer -> Remotevideo#addRemoteVideoMenu  -> RemoteVideo#hasRemoteVideoMenu = true
Then in VideoLayout#showModeratorIndicator -> !remoteVideo.hasRemoteVideoMenu -> remoteVideo.addRemoteVideoMenu().
2017-11-02 12:07:31 -07:00
hristoterezov 969f5d67ab feat(eslint): Enable for non react files 2017-10-16 14:36:29 -05:00
hristoterezov a3a871d4b3 fix(lib-jitsi-meet): Use the exported constants 2017-10-13 09:50:48 -05:00
Lyubo Marinov dfebd692f3 eslint 4.8.0
ESLint 4.8.0 discovers a lot of error related to formatting. While I
tried to fix as many of them as possible, a portion of them actually go
against our coding style. In such a case, I've disabled the indent rule
which effectively leaves it as it was before ESLint 4.8.0.

Additionally, remove jshint because it's becoming a nuisance with its
lack of understanding of ES2015+.
2017-10-02 18:12:38 -05:00
Leonard Kim 21d419e517 fix(pinning): bind the callback for contact list clicking 2017-09-20 10:35:29 -07:00
Leonard Kim 16fbf90a00 ref(local-audio): remove rendering of local audio
The local audio stream is attached to an audio element that is
always muted. As such, local audio is not being rendered and
the attaching may just not be needed at all.
2017-08-22 10:27:34 -05:00
hristoterezov 378a8d014e feat(remotecontrol): Prevent multiple remote control sessions (#1875) 2017-08-17 09:43:22 -07:00
Leonard Kim d7bccd0c93 ref(pinning): remove pinnedId state from VideoLayout
Instead have VideoLayout reach into redux.
2017-08-11 10:43:35 +01:00
Leonard Kim f1f46e0af5 feat(pinning): move web pinning logic into redux
- Re-use the native redux pinning implementation for web
- Remove pinning logic from conference.js
- To the native pinning add a check for sharedVideo so
  youtube videos do not send a pin event
- Add shared videos as a participant to enable pinning and
  so they can eventually get added to the filmstrip
- Emit UIEvents.PINNED_ENDPOINT from middleware
2017-08-11 10:43:35 +01:00
Saúl Ibarra Corretgé 2525bb2805 Merge pull request #1802 from jitsi/start_in_audio_only
Start in audio only
2017-07-24 14:32:20 +02:00
paweldomas 00d3d3c09a fix(VideoLayout): muted for no tracks
Will make the UI display audio/video muted icon for remote participants
with no audio/video track.
2017-07-21 15:04:03 +02:00
George Politis 68d40b4fa4 Merge pull request #1738 from virtuacoplenny/lenny/connection-stats-pub-sub
ref(stats): process stats through one pub/sub
2017-07-21 12:22:55 +02:00
Leonard Kim 44bbd26c96 ref(stats): process stats through one pub/sub
Instead of passing stats through UI then VideoLayout then the
SmallVideo, pass stats directly to what uses it--ConnectionIndicator.
This also bypasses adding the stats to the store, as they do not
seem to be something that needs to be shared or stored app-wide
just yet.
2017-07-19 15:11:35 -07:00
Leonard Kim 364ab5431c fix(connection-indicator): rename calls to hiding the indicator 2017-07-18 13:27:48 -07:00
paweldomas de2eee2e61 ref(VideoLayout): reduce 'forceUpdate' usage 2017-07-12 10:29:18 -07:00
paweldomas badbedf0f5 ref(LargeVideoManager): getCurrentContainer
Remove duplication and direct access to kind of private 'state' field by
introducing 'getCurrentContainer' method.
2017-07-12 10:29:18 -07:00
paweldomas 751f27644f fix(VideoLayout): store userID in container
The container needs to store user's ID in order for the 'isOnLargeVideo'
logic to work correctly when user has no stream (previously it was
obtained from stream which can be null/undefined).
2017-07-12 10:29:18 -07:00
Leonard Kim 4ce5888b4c feat(connection-indicator): convert to react
- Create a new ConnectionIndicator component for displaying an
  icon for connection quality and for triggering a popover. The
  popover handling has been left in ConnectionIndicator for now,
  which follows the existing implementation.
- Remove the unused method "connectionIndicatorShowMore"
- Change the implementation of existing methods that update the
  connection indicator to call the same method which will rerender
  the indicator completely.
2017-06-27 15:58:00 -05:00
paweldomas 12d7e61362 feat(VideoLayout): add ninja icon
Add ninja icon which wil be displayed when user's connection status is
inactive.

Apply grey filter only for interrupted state.

Do not use isLastN directly, but check ParticipantConnectionStatus.
2017-06-06 11:13:02 -05:00
virtuacoplenny d1ea29beeb fix(large-video): ensure switch to local video when all others leave (#1607)
* fix(large-video): ensure switch to local video when all others leave

This handles the case where User A and B are in a call and B has
no audio or video. Then B leaves. User A would see User B left
on large video. Instead, User A should see self view on large.

* squash: always update large video if it is empty

* squash: add largeVideo check for filmstrip only mode
2017-06-05 18:47:26 -05:00
Leonard Kim 538da92eae fix(large-video): attempt to update large video on all connection updates
It is possible for a connection update to come during a large video update,
between its promises, which would result in the update NOT triggering another
large video update because an update is in progress. This can cause a state
where a connection status overlay is displayed over a video in a state that
does not match the actual video state, like the restoring overlay displaying
on active video.
2017-05-26 15:31:34 -05:00
virtuacoplenny 1da95d2e37 fix(large-video): trigger update after timeout for 1-on-1 calls (#1599)
* fix(large-video): trigger update after timeout for 1-on-1 calls

Currently no video switch happens if a user joins audio and video
muted. For example, User A is in a call and User B joins with no
mic and camera. User A will keep seeing local video on large video.
The fix is to set a timeout, of a somewhat arbitrary 3 seconds, to
show User B on large video.

* SQUASH: wrap videoElement access in if

* SQUASH: split out remoteVideoActive logic
2017-05-25 11:50:52 -05:00
virtuacoplenny d5b40280ab fix(vertical-filmstrip): different label animations for filmstrip states (#1596)
* fix(vertical-filmstrip): different label animations for filmstrip states

Instead of one timing for sliding the video status label left and right,
have different timings depending on the filmstrip state. To facilitate
triggering the different animations, add more classes to the labels
that need to move that specify the filmstrip state.

- Faster transition if focusing on self-view with videos present so
  the label does not overlap videos transitioning from 0 opacity.
- Transition delay when de-focusing on self-view with videos present
  so videos have time to go away before the label moves over them.
- Maintain no movement if there are no videos, regardless of
  filmstrip toggle state.
- Different delays for when the filmstrip is being toggled visible
  and hidden if there are remote videos visible.

* SQUASH: remove remote videos count

* SQUASH: add docs to scss
2017-05-24 20:57:55 -05:00
Leonard Kim 56b12bd969 fix(vertical-filmstrip): move video status labels back to top right
The video status labels, which include recording and hd status,
have been moved back to the top left while in vertical filmstrip
mode. The following had to be done:
- Remove styling to move the labels to the bottom left
- For VideoStatusLabel, move filmstrip remote video count, toggle
  state, and 1:1 state into redux.
- Use middleware to emit out to the Recording label when the
  filmstrip changes.
- Create an empty Filmstrip file for web and identify the existing
  Filmstrip component as native.
2017-05-23 13:28:27 -07:00
Leonard Kim 2333249b05 feat(1-on-1): Initial implementation
- Expose an api on Filmstrip to hide the remote videos container, which does so
  by adding a class
- Modify listeners for user join, leave, share video to call the api
- Hide the container when there is 1 or fewer remote participants
- Always show the container if self view is in focus
- Show the container if the number of remote thumbnails does not match the count
  of remote participants, such as the case of sharing a video
2017-05-23 13:28:27 -07:00
Leonard Kim a88409bbfa fix(video-label): Display based on video dimensions in LargeVideoManager
In its current implementation, the VideoStatusLabel shows HD based on peer
connection stats. These stats will be available on temasys browsers soon but
will remain unavailable on Firefox, which does not collect height/width stats.
To support VideoStatusLabel showing cross-browser, move the high-definition
detection out of stat sniffing and instead check the video element itself using
an interval in LargeVideoManager. (An interval was used because the temasys
video object does not support the onresize event.) Also, add a cleanup path from
conference.web to LargeVideoManager to remove the interval.
2017-05-17 11:54:22 -05:00
Leonard Kim ef9f145cb5 fix(video-layout): always honor local video changes
During the implementation of starting as video muted, a check
was put in place to update the local thumbnail view container's
known local track only if the track was not muted. This can
cause the container to become desynced with the current local
track.(Ideally in the future all state would be in redux so this
manual syncing would not be needed.) Removing the if-muted
check seems to cause no side-effects and makes implementation of
device-switch-while-audio-only a lot simpler because new tracks
can be muted and used immediately.
2017-05-05 09:27:59 -07:00