Commit Graph

505 Commits

Author SHA1 Message Date
Leonard Kim 52ee8fd473 ref(small-video): remove some global jquery dom querying
Create a reference to the jquery element instead of querying for
it globally. This is to better encapsulate the small video
component.
2017-08-22 10:27:34 -05:00
Leonard Kim 670d575bcb ref(remote-video): set inner html instead of creating elements
This better mimics declarative jsx.
2017-08-22 10:27:34 -05: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
Leonard Kim ec22329408 ref(local-video): generate html instead of hardcoding in filmstrip
This would better mimic React behavior where each component has
its own markup, instead of relying on markup existing elsewhere.
2017-08-22 10:27:34 -05:00
Leonard Kim 38e2443ab7 feat(small-video): use AtlasKit tooltip 2017-08-21 15:16:09 -05:00
Leonard Kim 27deb97c5c ref(filmstrip): hook filmstrip to redux for 1-on-1 mode
- Remove non-redux paths for hiding and showing remote videos.
- Hook web filmstrip to redux to know when to hide remote videos.
  This works, even though VideoLayout is handling RemoteVideo
  appending, because react is only monitoring filmstrip's declared
  JSX which does not change except for attributes (css classes).
2017-08-17 17:27:30 -05:00
hristoterezov 378a8d014e feat(remotecontrol): Prevent multiple remote control sessions (#1875) 2017-08-17 09:43:22 -07:00
Lyubo Marinov ba61876b13 Log an error using less scary words 2017-08-16 16:38:07 -05:00
Lyubo Marinov f54e87d975 Coding style 2017-08-16 16:36:46 -05:00
Leonard Kim 995a25ee15 fix(video-quality-label): adjust z-indexing clashes with filmstrip
With AtlasKit InlineDialog, the filmstrip z-index in vertical
filmstrip mode was adjusted as it had to be set to fixed position
for the dialogs to automagically be position fixed. This left
behind a regression where the filmstrip z-index was the same as
the video quality label, but came later in the dom, so the label
was not clickable. This commit modifies the z-index of the
vertical filmstrip to account for clicking of the video quality
label.
2017-08-14 15:12:06 -05:00
virtuacoplenny 725d39ddcd feat(jitsipopover): convert to InlineDialog (#1804)
* feat(small-video): use InlineDialog for stats and remote menu

- Remove JitsiPopover and use InlineDialog instead.
- Bring the remote menu icon into react.
- Make vertical filmstrip position:fixed so popper (AtlasKit
  dependency) sets InlineDialogs and eventually tooltips to
  position:fixed.

* ref(remote-menu): hook KickButton to redux

* ref(remote-menu): hook MuteButton to redux

* modify padding, toggle dialogs

* pixel push margins to align dialogs, adjust padding of dialogs

* add comment about margin for dialog, add file I forgot

* modify indicator markup so the icon can be moved down while trigger stays at top of toolbar
2017-08-14 10:02:58 -05: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
virtuacoplenny d8cd3e75b4 feat(quality-slider): initial implementation (#1817)
* 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
2017-08-09 14:40:03 -05:00
virtuacoplenny c04ef05058 feat(presence): display status in thumbnail and large video (#1828)
* 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
2017-07-31 18:33:22 -05: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
virtuacoplenny 244de8096f feat(local-video): convert to react (#1705)
* feat(local-video): convert to react

- Create a VideoTrack component for displaying a video element.
  This mirrors native also having a VideoTrack component.
- The VideoTrack component does not let React update it to prevent
  the video element from re-rendering, which could cause flickers
  and would not work with temasys's overriding of the video element.
- VideoTrack extends AbstractVideoTrack to mirror native
  implementation and to get the dispatch of the onplaying event.
- Remove the onclick handler on the video element. Honestly, I
  didn't get it to work, and did not try, but it is also unnecessary
  because another handler already exists on the video wrapper.

* ref(device-selection): VideoInputPreview uses VideoTrack to show video

* squash into conversion: change css selectors

* squash into conversion: mix in abstract props

* squash into conversion: change shouldComponentUpdate check

* squash: update comment about why triggerOnPlayingUpdate is used
2017-07-14 14:22:27 -05:00
virtuacoplenny 37328b3995 Merge pull request #1757 from jitsi/rc_dialog_to_notification
fix(remotecontrol): Replace info dialogs with notifications.
2017-07-14 11:32:54 -07:00
hristoterezov b8d3e82ae7 fix(remotecontrol): Replace info dialogs with notifications. 2017-07-14 12:58:37 -05:00
yanas 2e2b1d47c0 Changes video thumbnail menu icon 2017-07-12 17:22:07 -05: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
virtuacoplenny 0481e4cf00 feat(indicators): move the "top toolbar" indicators to react (#1699)
* feat(indicators): move the "top toolbar" indicators to react

* wrap baseindicator
2017-07-10 17:29:44 -05:00
Leonard Kim 152427e01b feat(small-video): convert the "toolbar" to react
Move display of audio muted, video muted, and moderator icons,
which make up the elements of the small video toolbar, into React
Components.
2017-06-30 14:21:44 -05:00
virtuacoplenny 0de032ebd7 feat(avatar): SmallVideo uses the existing Avatar component. (#1712)
* feat(avatar): SmallVideo uses the existing Avatar component.
2017-06-29 13:21:03 -05:00
virtuacoplenny 928181cd7a feat(display-name): convert to React (#1672)
* feat(display-name): convert to React

- Create a new React Component for displaying and updating display
  names on small videos
- The updating of the Component is defined in the parent class
  SmallVideo, which children will get access to through prototype
  copying
- Create a new actionType and middleware so name changes that occur
  in DisplayName can be propogated to outside redux
- Update the local video's DisplayName when a conference is joined
  or else the component may keep an undefined user id

* squash: query for the container, not the el owned by react
2017-06-28 22:35:43 -05: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
Leonard Kim 4a1efed4a8 feat(audio-level): convert SmallVideo AudioLevelIndicator to React 2017-06-22 11:14:41 -05:00
hristoterezov 486d0802a8 fix(largevideo): show the background video only for video container type 2017-06-21 16:19:30 -05:00
hristoterezov c250da59d5 fix(videolayout): Resize calculations 2017-06-21 16:19:30 -05:00
Ilya Daynatovich 0aee5e5b48 Add blurring effect 2017-06-21 16:19:30 -05:00
Ilya Daynatovich 292c1689ba Add maximum zooming coefficient 2017-06-21 16:19:30 -05:00
Leonard Kim 0a1bd5a0c7 feat(popover): do not remove the popover on every update
With popover usage now only passing in React Components, the
logic of removing the popover and recreating its html with
every update is not necessary. Instead allow React to update
the popover contents.

Because of this change, mouse event handlers are not recreated
on each update, so it is possible for mouseleave to fire after
the size of the popover shrinks when collapsing to hide more stats,
forcing the mouse out of the popover. To prevent this, padding has
been added to the top of the popover so on resize the mouse will
still be over the popover. The padding has the added bonus of
fixing an issue where the popover would not close until mouseenter
was triggered after size collapse, but it adds the drawback of
requiring more upward mouse travel to close the popover.
2017-06-20 13:49:02 -05:00
Leonard Kim e0d641a787 feat(connection-stats): convert connection stats display to react
Move all logic related to displaying a table of connection stats to a React
Component. The actual parsing logic was modified as little as possible as the
focus is moving display to React.
2017-06-20 13:49:02 -05:00
Leonard Kim 5d1087e464 fix(vertical-filmstrip): prevent scaling based on video count
Vertical filmstrip has a scrollbar to scroll through all remote
video thumbnails instead of scaling width and height to force all
thumbnails to display on screen. The scaling is not necessary in
vertical filmstrip mode and instead causes some UI spacing issues
with the video status label.

Also addressed a typo in "removeVideoWidth" near the area of the
changed logic.
2017-06-13 15:17:55 -05:00
Leonard Kim da99f3b939 feat(remote-video): convert remote video menu to react
- Create new React Components for RemoteVideoMenu and its
  buttons
- Remove existing menu creation from RemoteVideo
- Refactor RemoteVideo so all function binding happens once in
  the constructor, removing the need to rebind when updating
  the RemoteVideoMenu
- Allow popover to append and remove React Components from itself
- Refactor popover so post-popover creation calls are broken out and
  popover removal behavior is all done in one function.
2017-06-13 14:54:19 -05:00
Leonard Kim 73dd7440d0 fix(remote-video): update remote video menu if it exists
In RemoteVideo, creation of the RemoteVideoMenu (popover) is
skipped if in filmstrip only mode. However, updateRemoteVideoMenu
is called by other components, and that tries to access popover
and will error.

Add a defensive check for now as filmstrip is being rewritten
for react.
2017-06-13 14:54:03 -05:00
Leonard Kim 2e08815644 fix(video): use onplaying to ensure video height and width are set
When using onplay in firefox, the event fires before data is flowing,
which can cause videoHeight and videoWidth to be 0 during resizing.
By using onplaying, there is some assurance data is being received,
so videoHeight and videoWidth should be set.
2017-06-07 10:44:05 -05:00
paweldomas 2c002c875d fix(SmallVideo): remove invalid character
Removes ' character which should not be there.
2017-06-06 11:15:39 -05:00
paweldomas e38dd0e9d3 ref(LargeVideoManager): remove unused method
'_isConnectionActive' is not used anymore
2017-06-06 11:13:02 -05:00
paweldomas a2a2a583de doc(LargeVideoManager): invalid default
The default for 'show' argument of 'showRemoteConnectionMessage' is
undefined (unspecified).
2017-06-06 11:13:02 -05:00
paweldomas a3ba28f507 ref(LargeVideoManager): simplify
Simplify 'updateParticipantConnStatusIndication' by getting rid of
'showMessage' argument.
2017-06-06 11:13:02 -05:00
paweldomas 6865b03338 fix(RemoteVideo): broken grey avatar
Also moves the logic about participant connection status from SmallVideo
to RemoteVideo, because it doesn't make sense for local videos.
2017-06-06 11:13:02 -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