Commit Graph

70 Commits

Author SHA1 Message Date
Leonard Kim 38e2443ab7 feat(small-video): use AtlasKit tooltip 2017-08-21 15:16:09 -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
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
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
yanas 2e2b1d47c0 Changes video thumbnail menu icon 2017-07-12 17:22:07 -05: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 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 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
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
Leonard Kim 346980308b fix(video-label): Show darker background on hover 2017-05-24 15:32:58 -07:00
Leonard Kim 27f968e753 fix(filmstrip-only): hide video label, always show remote thumbnails 2017-05-24 13:23:21 -07:00
Leonard Kim 3d0226ccd0 fix(video-label): modify z-index and cursor
- Change z-index so any tooltips that display over the label,
  particularly in vertical filmstrip mode, actually hide the label.
- Change the cursor to be a pointer so the label looks clickable.
- Remove unused audio-only-label styling.
2017-05-24 10:33:26 -07:00
Leonard Kim a1476c68f1 fix(audio-only): remove button from toolbar and set label cursor
Audio only mode will be toggleable only from the VideoStatusLabel,
so remove AudioOnlyButton from the toolbar and delete the component
itself. As a result of the button being removed, a truthy check in
VideoStatusLabel was also removed to ensure it will display as it
is now the only way to toggle audio only mode. Also set the cursor
on VideoStatusLabel to always be default, so it can never show the
text cursor.
2017-05-22 14:46:05 -05:00
Leonard Kim 80989147ad feat(video-label): Add dropdown for toggling audio only
Add a menu that displays when hovering over VideoStatusLabel. The menu's
display is controlled by CSS. As the existing AudioOnlyLabel no longer needs
needs its own tooltip, it has been removed and label display logic has been
moved into VideoStatusLabel.
2017-05-18 13:09:34 -05:00
Leonard Kim d24d5d95dd fix(audio-only): combine video status labels
Move the HD label into the newly renamed VideoStatusLabel
component. That way it cannot be possible for the audio only
label and the HD label to display simultaneously.
2017-05-05 09:27:59 -07:00
Saúl Ibarra Corretgé 9ba3a1c4ff feat(conference): add audio only mode
Audio only mode can be used to save bandwidth. In this mode local video is muted
and last N is set to 0, thus disabling all remote video.

When this mode is enabled avatars are shown.
2017-05-05 09:27:59 -07:00
virtuacoplenny 2301732e2d style: catalog all z-indexes and move toolbar down
All z-indexes found in css files have been moved into css
variables. If the z-index is used only once, the variable
name will be the same as the selector it is used in. If
the z-index is used multiple times, then the plain name
of $zindex# was used. This allowed a more confident
moving down of the toolbar so that the new modal dialog,
with z-index 500, could display on top of it.

#1436
2017-03-30 18:13:00 +01:00
yanas 23935d3d39 Fixes border radius. 2017-01-26 17:04:29 -06:00
yanas cd5e84e4ef Fixes network problem message position 2017-01-25 16:54:51 -06:00
yanas 1604fa6584 Fixes and adjustments of UI layout 2017-01-09 15:32:25 -06:00
Ilya Daynatovich 9bc24e1caa Fix aligning of indicator icon; Update logic for dynamically change of thumb indicators via font-size 2016-11-14 12:45:28 +02:00
Ilya Daynatovich 3bd4f1d5d8 Updated layout 2016-11-14 11:09:07 +02:00
Ilya Daynatovich f3dbeea091 Make filmstrip indicators to resize dynamically 2016-11-14 11:09:07 +02:00
Ilya Daynatovich f09a9be523 Fixed problem with resizing thumb avatars 2016-11-08 13:36:43 +02:00
Ilya Daynatovich 24169743e7 Clean up filmstrip styles 2016-11-03 17:07:48 +02:00
Ilya Daynatovich 02ae3b3053 Add wrapper 2016-11-03 16:26:56 +02:00
Ilya Daynatovich 30e717bd20 Rename classname; Refactor click on video method 2016-11-03 12:13:03 +02:00
Ilya Daynatovich d703271c96 Fix bug with resizing when using shortcut for switching btw videos 2016-11-03 11:48:48 +02:00
Maxim Voloshin dc93940bbd Filmstrip is extended with "Hide" button 2016-10-31 19:59:45 +02:00
Ilya Daynatovich d84d0b65ca Adjust alignment of remote video menu 2016-10-28 13:52:08 +03:00
Paweł Domas 2fe69d409b Merge pull request #1071 from jitsi/ongoing-work-video-thumbnails
Ongoing work video thumbnails
2016-10-27 17:13:27 -05:00
paweldomas e3d5bd3dfb fix(css): do not display avatar on top of the messages
Previously the z-index was introduced in order to have the avatar
visible on top of the black video element, but now we're always hiding
the video element when the avatar is displayed, so it's no longer
required.
2016-10-27 14:52:32 -05:00
damencho e3edef2999 Renames videocontainer overlay to hoverOverlay. 2016-10-27 14:32:22 -05:00
damencho 2807346bdf Makes decision what to show in avatar consistent (in updateView). 2016-10-27 13:17:17 -05:00
damencho 7acda03024 Adds an overlay to dim videos when showing displayname. 2016-10-26 15:51:09 -05:00
Ilya Daynatovich 69b79b7687 Fix icon styles 2016-10-26 15:51:09 -05:00
Ilya Daynatovich 698b3caeb8 fix styles in connection indicators 2016-10-26 15:51:09 -05:00
Ilya Daynatovich 323684c5fe fix conflicts after rebase 2016-10-26 15:51:09 -05:00
Ilya Daynatovich 09e3fb9917 Fixed hack with displayname margin 2016-10-26 15:51:09 -05:00
yanas a17a98991c Ongoing work on video thumbnail layout 2016-10-26 15:51:09 -05:00
yanas 3fe43abdea Move the display name to the center 2016-10-26 15:51:09 -05:00
yanas 3196ffd941 Merge pull request #1042 from m-voloshin/FEATURE-hd-label-relocation
Relocate "HD" label
2016-10-24 12:21:26 -05:00
paweldomas bf5a1d1f8e fix(videolayout css): reduce conn problem msg z-index
For small window sizes and many video thumbnails the message may go on
top of the thumbnails.
2016-10-21 14:03:34 -05:00
Maxim Voloshin d09a8b1896 Adjusted styles for "Live Streaming" indicator. 2016-10-21 13:38:12 +03:00
Maxim Voloshin 88be44b472 Relocated "HD" label 2016-10-21 13:38:12 +03:00
yanas 3bf8b7fbe2 Merge pull request #1007 from BeatC/connection-indicator-restyle
Connection indicator restyle
2016-10-20 11:08:51 -05:00
Ilya Daynatovich c09e10a584 updates in connection indicator styles 2016-10-19 17:57:16 +03:00