mirrors/mostlymatter
1
0
Форкнуть 0
Код Задачи Запросы на слияние Действия Пакеты Проекты Релизы Вики Активность

PLT-4316 - Webrtc improvements (#4525)

Просмотр исходного кода
Этот коммит содержится в:
Asaad Mahmood
2016-11-11 18:23:43 +05:00
коммит произвёл Joram Wilander
родитель c0a631000e
Коммит 7c1fe7a765
7 изменённых файлов: 72 добавлений и 93 удалений
Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

41
webapp/components/channel_header.jsx
Просмотреть файл

@@ -300,6 +300,13 @@ export default class ChannelHeader extends React.Component {
if (isOffline || busy) {
circleClass = 'offline';
webrtcMessage = (
<FormattedMessage
id='channel_header.webrtc.offline'
defaultMessage='The user is offline'
/>
);
if (busy) {
webrtcMessage = (
<FormattedMessage
@@ -317,6 +324,10 @@ export default class ChannelHeader extends React.Component {
);
}
const webrtcTooltip = (
<Tooltip id='webrtcTooltip'>{webrtcMessage}</Tooltip>
);
webrtc = (
<div className='webrtc__header'>
<a
@@ -324,28 +335,18 @@ export default class ChannelHeader extends React.Component {
onClick={() => this.initWebrtc(contact.id, !isOffline)}
disabled={isOffline}
>
<svg
id='webrtc-btn'
className='webrtc__button'
xmlns='http://www.w3.org/2000/svg'
<OverlayTrigger
delayShow={Constants.WEBRTC_TIME_DELAY}
placement='bottom'
overlay={webrtcTooltip}
>
<circle
className={circleClass}
cx='16'
cy='16'
r='18'
<div
id='webrtc-btn'
className={'webrtc__button ' + circleClass}
>
<title>
{webrtcMessage}
</title>
</circle>
<path
className='off'
transform='scale(0.4), translate(17,16)'
d='M40 8H8c-2.21 0-4 1.79-4 4v24c0 2.21 1.79 4 4 4h32c2.21 0 4-1.79 4-4V12c0-2.21-1.79-4-4-4zm-4 24l-8-6.4V32H12V16h16v6.4l8-6.4v16z'
fill='white'
/>
</svg>
<span dangerouslySetInnerHTML={{__html: Constants.VIDEO_ICON}}/>
</div>
</OverlayTrigger>
</a>
</div>
);

43
webapp/components/user_profile.jsx
Просмотреть файл

@@ -11,7 +11,7 @@ import Constants from 'utils/constants.jsx';
const UserStatuses = Constants.UserStatuses;
const PreReleaseFeatures = Constants.PRE_RELEASE_FEATURES;
import {Popover, OverlayTrigger} from 'react-bootstrap';
import {Popover, OverlayTrigger, Tooltip} from 'react-bootstrap';
import {FormattedMessage} from 'react-intl';
import React from 'react';
@@ -111,8 +111,19 @@ export default class UserProfile extends React.Component {
defaultMessage='New call unavailable until your existing call ends'
/>
);
} else {
webrtcMessage = (
<FormattedMessage
id='user_profile.webrtc.offline'
defaultMessage='The user is offline'
/>
);
}
const webrtcTooltip = (
<Tooltip id='webrtcTooltip'>{webrtcMessage}</Tooltip>
);
webrtc = (
<div
className='webrtc__user-profile'
@@ -123,28 +134,18 @@ export default class UserProfile extends React.Component {
onClick={() => this.initWebrtc()}
disabled={!isOnline}
>
<svg
id='webrtc-btn'
className='webrtc__button'
xmlns='http://www.w3.org/2000/svg'
<OverlayTrigger
delayShow={Constants.WEBRTC_TIME_DELAY}
placement='top'
overlay={webrtcTooltip}
>
<circle
className={circleClass}
cx='16'
cy='16'
r='18'
<div
id='webrtc-btn'
className={'webrtc__button ' + circleClass}
>
<title>
{webrtcMessage}
</title>
</circle>
<path
className='off'
transform='scale(0.4), translate(17,16)'
d='M40 8H8c-2.21 0-4 1.79-4 4v24c0 2.21 1.79 4 4 4h32c2.21 0 4-1.79 4-4V12c0-2.21-1.79-4-4-4zm-4 24l-8-6.4V32H12V16h16v6.4l8-6.4v16z'
fill='white'
/>
</svg>
<span dangerouslySetInnerHTML={{__html: Constants.VIDEO_ICON}}/>
</div>
</OverlayTrigger>
</a>
</div>
);

2
webapp/i18n/en.json
Просмотреть файл

@@ -998,6 +998,7 @@
"channel_header.viewMembers": "View Members",
"channel_header.webrtc.call": "Start Video Call",
"channel_header.webrtc.unavailable": "New call unavailable until your existing call ends",
"channel_header.webrtc.offline": "The user is offline",
"channel_info.about": "About",
"channel_info.close": "Close",
"channel_info.header": "Header:",
@@ -2055,6 +2056,7 @@
"user_list.notFound": "No users found",
"user_profile.webrtc.call": "Start Video Call",
"user_profile.webrtc.unavailable": "New call unavailable until your existing call ends",
"user_profile.webrtc.offline": "The user is offline",
"view_image.loading": "Loading ",
"view_image_popover.download": "Download",
"view_image_popover.file": "File {count} of {total}",

6
webapp/sass/components/_tooltip.scss
Просмотреть файл

@@ -8,3 +8,9 @@
word-break: break-word;
}
}
#webrtcTooltip {
.tooltip-inner {
word-break: normal;
}
}

11
webapp/sass/components/_webrtc.scss
Просмотреть файл

@@ -2,10 +2,14 @@
.webrtc__user-profile {
@include webrtc-button;
position: absolute;
right: 7px;
text-align: center;
top: 5px;
#webrtc-btn {
display: inherit;
height: 23px;
width: 23px;
}
}
@@ -15,6 +19,11 @@
margin-right: 10px;
position: relative;
top: 13px;
svg {
position: relative;
width: 20px;
}
}
.webrtc__notification--rhs {

61
webapp/sass/utils/_mixins.scss
Просмотреть файл

@@ -32,68 +32,27 @@
@mixin webrtc-button {
.webrtc__button {
@include border-radius(50px);
background: $button--ready;
display: block;
height: 32px;
width: 32px;
height: 33px;
text-align: center;
width: 33px;
&.on,
&:hover {
background: darken($button--ready, 5%);
}
&:hover circle {
fill: darken($button--ready, 5%);
}
&.offline {
background: $video-circle-offline;
circle {
fill: $button--ready;
&.offline {
fill: $video-circle-offline;
&:hover {
background: $video-circle-offline;
}
}
path {
.on {
display: none;
}
.off {
display: block;
}
}
&.on {
path {
.on {
display: block;
}
.off {
display: none;
}
}
circle {
fill-opacity: 0;
}
}
}
a {
&[disabled] {
.webrtc__button {
&:hover {
background: none;
box-shadow: none;
}
&:hover {
circle {
fill: $video-circle-offline;
}
}
}
svg {
fill: $white;
}
}
}

1
webapp/utils/constants.jsx
Просмотреть файл

@@ -373,6 +373,7 @@ export const Constants = {
COMMENT_ICON: "<svg version='1.1' id='Layer_2' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px'width='15px' height='15px' viewBox='1 1.5 15 15' enable-background='new 1 1.5 15 15' xml:space='preserve'> <g> <g> <path fill='#211B1B' d='M14,1.5H3c-1.104,0-2,0.896-2,2v8c0,1.104,0.896,2,2,2h1.628l1.884,3l1.866-3H14c1.104,0,2-0.896,2-2v-8 C16,2.396,15.104,1.5,14,1.5z M15,11.5c0,0.553-0.447,1-1,1H8l-1.493,2l-1.504-1.991L5,12.5H3c-0.552,0-1-0.447-1-1v-8 c0-0.552,0.448-1,1-1h11c0.553,0,1,0.448,1,1V11.5z'/> </g> </g> </svg>",
REPLY_ICON: "<svg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px'viewBox='-158 242 18 18' style='enable-background:new -158 242 18 18;' xml:space='preserve'> <path d='M-142.2,252.6c-2-3-4.8-4.7-8.3-4.8v-3.3c0-0.2-0.1-0.3-0.2-0.3s-0.3,0-0.4,0.1l-6.9,6.2c-0.1,0.1-0.1,0.2-0.1,0.3 c0,0.1,0,0.2,0.1,0.3l6.9,6.4c0.1,0.1,0.3,0.1,0.4,0.1c0.1-0.1,0.2-0.2,0.2-0.4v-3.8c4.2,0,7.4,0.4,9.6,4.4c0.1,0.1,0.2,0.2,0.3,0.2 c0,0,0.1,0,0.1,0c0.2-0.1,0.3-0.3,0.2-0.4C-140.2,257.3-140.6,255-142.2,252.6z M-150.8,252.5c-0.2,0-0.4,0.2-0.4,0.4v3.3l-6-5.5 l6-5.3v2.8c0,0.2,0.2,0.4,0.4,0.4c3.3,0,6,1.5,8,4.5c0.5,0.8,0.9,1.6,1.2,2.3C-144,252.8-147.1,252.5-150.8,252.5z'/> </svg>",
SCROLL_BOTTOM_ICON: "<svg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px'viewBox='-239 239 21 23' style='enable-background:new -239 239 21 23;' xml:space='preserve'> <path d='M-239,241.4l2.4-2.4l8.1,8.2l8.1-8.2l2.4,2.4l-10.5,10.6L-239,241.4z M-228.5,257.2l8.1-8.2l2.4,2.4l-10.5,10.6l-10.5-10.6 l2.4-2.4L-228.5,257.2z'/> </svg>",
VIDEO_ICON: "<svg width='55%'height='100%'viewBox='0 0 13 8'> <g transform='matrix(1,0,0,1,-507,-146)'> <g transform='matrix(0.0133892,0,0,0.014499,500.635,142.838)'> <path d='M1158,547.286L1158,644.276C1158,684.245 1125.55,716.694 1085.58,716.694L579.341,716.694C539.372,716.694 506.922,684.245 506.922,644.276L506.922,306.322C506.922,266.353 539.371,233.904 579.341,233.903L1085.58,233.903C1125.55,233.904 1158,266.353 1158,306.322L1158,402.939L1359.75,253.14C1365.83,248.362 1373.43,245.973 1382.56,245.973C1386.61,245.973 1390.83,246.602 1395.22,247.859C1408.4,252.134 1414.99,259.552 1414.99,270.113L1414.99,680.485C1414.99,691.046 1408.4,698.464 1395.22,702.739C1390.83,703.996 1386.61,704.624 1382.56,704.624C1373.43,704.624 1365.83,702.236 1359.75,697.458L1158,547.286Z'/> </g> </g> </svg>",
UPDATE_TYPING_MS: 5000,
THEMES: {
default: {