зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1184559 - Implement the refreshed design for the Loop conversation toolbar. r=Standard8
This commit is contained in:
Marina Rodriguez Iglesias
Родитель
8c9cca4fc0
Коммит
77d2be2e2d
|
|
@ -698,14 +698,15 @@ loop.conversationViews = (function(mozL10n) {
|
|||
screenSharePosterUrl: null,
|
||||
screenShareVideoObject: this.state.screenShareVideoObject,
|
||||
showContextRoomName: false,
|
||||
useDesktopPaths: true}),
|
||||
React.createElement(loop.shared.views.ConversationToolbar, {
|
||||
audio: this.props.audio,
|
||||
dispatcher: this.props.dispatcher,
|
||||
edit: { visible: false, enabled: false},
|
||||
hangup: this.hangup,
|
||||
publishStream: this.publishStream,
|
||||
video: this.props.video})
|
||||
useDesktopPaths: true},
|
||||
React.createElement(loop.shared.views.ConversationToolbar, {
|
||||
audio: this.props.audio,
|
||||
dispatcher: this.props.dispatcher,
|
||||
edit: { visible: false, enabled: false},
|
||||
hangup: this.hangup,
|
||||
publishStream: this.publishStream,
|
||||
video: this.props.video})
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
|
@ -802,13 +803,13 @@ loop.conversationViews = (function(mozL10n) {
|
|||
}
|
||||
case CALL_STATES.ONGOING: {
|
||||
return (React.createElement(OngoingConversationView, {
|
||||
audio: {enabled: !this.state.audioMuted},
|
||||
audio: { enabled: !this.state.audioMuted, visible: true},
|
||||
conversationStore: this.getStore(),
|
||||
dispatcher: this.props.dispatcher,
|
||||
mediaConnected: this.state.mediaConnected,
|
||||
remoteSrcVideoObject: this.state.remoteSrcVideoObject,
|
||||
remoteVideoEnabled: this.state.remoteVideoEnabled,
|
||||
video: {enabled: !this.state.videoMuted}})
|
||||
video: { enabled: !this.state.videoMuted, visible: true}})
|
||||
);
|
||||
}
|
||||
case CALL_STATES.FINISHED: {
|
||||
|
|
|
|||
|
|
@ -698,14 +698,15 @@ loop.conversationViews = (function(mozL10n) {
|
|||
screenSharePosterUrl={null}
|
||||
screenShareVideoObject={this.state.screenShareVideoObject}
|
||||
showContextRoomName={false}
|
||||
useDesktopPaths={true} />
|
||||
<loop.shared.views.ConversationToolbar
|
||||
audio={this.props.audio}
|
||||
dispatcher={this.props.dispatcher}
|
||||
edit={{ visible: false, enabled: false }}
|
||||
hangup={this.hangup}
|
||||
publishStream={this.publishStream}
|
||||
video={this.props.video} />
|
||||
useDesktopPaths={true}>
|
||||
<loop.shared.views.ConversationToolbar
|
||||
audio={this.props.audio}
|
||||
dispatcher={this.props.dispatcher}
|
||||
edit={{ visible: false, enabled: false }}
|
||||
hangup={this.hangup}
|
||||
publishStream={this.publishStream}
|
||||
video={this.props.video} />
|
||||
</sharedViews.MediaLayoutView>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -802,13 +803,13 @@ loop.conversationViews = (function(mozL10n) {
|
|||
}
|
||||
case CALL_STATES.ONGOING: {
|
||||
return (<OngoingConversationView
|
||||
audio={{enabled: !this.state.audioMuted}}
|
||||
audio={{ enabled: !this.state.audioMuted, visible: true }}
|
||||
conversationStore={this.getStore()}
|
||||
dispatcher={this.props.dispatcher}
|
||||
mediaConnected={this.state.mediaConnected}
|
||||
remoteSrcVideoObject={this.state.remoteSrcVideoObject}
|
||||
remoteVideoEnabled={this.state.remoteVideoEnabled}
|
||||
video={{enabled: !this.state.videoMuted}} />
|
||||
video={{ enabled: !this.state.videoMuted, visible: true }} />
|
||||
);
|
||||
}
|
||||
case CALL_STATES.FINISHED: {
|
||||
|
|
|
|||
|
|
@ -743,6 +743,15 @@ loop.roomViews = (function(mozL10n) {
|
|||
screenShareVideoObject: this.state.screenShareVideoObject,
|
||||
showContextRoomName: false,
|
||||
useDesktopPaths: true},
|
||||
React.createElement(sharedViews.ConversationToolbar, {
|
||||
audio: {enabled: !this.state.audioMuted, visible: true},
|
||||
dispatcher: this.props.dispatcher,
|
||||
edit: { visible: this.state.contextEnabled, enabled: !this.state.showEditContext},
|
||||
hangup: this.leaveRoom,
|
||||
onEditClick: this.handleEditContextClick,
|
||||
publishStream: this.publishStream,
|
||||
screenShare: screenShareData,
|
||||
video: {enabled: !this.state.videoMuted, visible: true}}),
|
||||
React.createElement(DesktopRoomInvitationView, {
|
||||
dispatcher: this.props.dispatcher,
|
||||
error: this.state.error,
|
||||
|
|
@ -762,16 +771,7 @@ loop.roomViews = (function(mozL10n) {
|
|||
roomData: roomData,
|
||||
savingContext: this.state.savingContext,
|
||||
show: !shouldRenderInvitationOverlay && shouldRenderEditContextView})
|
||||
),
|
||||
React.createElement(sharedViews.ConversationToolbar, {
|
||||
audio: {enabled: !this.state.audioMuted, visible: true},
|
||||
dispatcher: this.props.dispatcher,
|
||||
edit: { visible: this.state.contextEnabled, enabled: !this.state.showEditContext},
|
||||
hangup: this.leaveRoom,
|
||||
onEditClick: this.handleEditContextClick,
|
||||
publishStream: this.publishStream,
|
||||
screenShare: screenShareData,
|
||||
video: {enabled: !this.state.videoMuted, visible: true}})
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -743,6 +743,15 @@ loop.roomViews = (function(mozL10n) {
|
|||
screenShareVideoObject={this.state.screenShareVideoObject}
|
||||
showContextRoomName={false}
|
||||
useDesktopPaths={true}>
|
||||
<sharedViews.ConversationToolbar
|
||||
audio={{enabled: !this.state.audioMuted, visible: true}}
|
||||
dispatcher={this.props.dispatcher}
|
||||
edit={{ visible: this.state.contextEnabled, enabled: !this.state.showEditContext }}
|
||||
hangup={this.leaveRoom}
|
||||
onEditClick={this.handleEditContextClick}
|
||||
publishStream={this.publishStream}
|
||||
screenShare={screenShareData}
|
||||
video={{enabled: !this.state.videoMuted, visible: true}} />
|
||||
<DesktopRoomInvitationView
|
||||
dispatcher={this.props.dispatcher}
|
||||
error={this.state.error}
|
||||
|
|
@ -763,15 +772,6 @@ loop.roomViews = (function(mozL10n) {
|
|||
savingContext={this.state.savingContext}
|
||||
show={!shouldRenderInvitationOverlay && shouldRenderEditContextView} />
|
||||
</sharedViews.MediaLayoutView>
|
||||
<sharedViews.ConversationToolbar
|
||||
audio={{enabled: !this.state.audioMuted, visible: true}}
|
||||
dispatcher={this.props.dispatcher}
|
||||
edit={{ visible: this.state.contextEnabled, enabled: !this.state.showEditContext }}
|
||||
hangup={this.leaveRoom}
|
||||
onEditClick={this.handleEditContextClick}
|
||||
publishStream={this.publishStream}
|
||||
screenShare={screenShareData}
|
||||
video={{enabled: !this.state.videoMuted, visible: true}} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -118,15 +118,15 @@ p {
|
|||
.btn-accept,
|
||||
.btn-success,
|
||||
.btn-accept + .btn-chevron {
|
||||
background-color: #5bc0a4;
|
||||
border: 1px solid #5bc0a4;
|
||||
background-color: #56b397;
|
||||
border: 1px solid #56b397;
|
||||
}
|
||||
|
||||
.btn-accept:hover,
|
||||
.btn-success:hover,
|
||||
.btn-accept + .btn-chevron:hover {
|
||||
background-color: #47b396;
|
||||
border: 1px solid #47b396;
|
||||
background-color: #50e3c2;
|
||||
border: 1px solid #50e3c2;
|
||||
}
|
||||
|
||||
.btn-accept:active,
|
||||
|
|
|
|||
|
|
@ -2,111 +2,135 @@
|
|||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
|
||||
|
||||
html {
|
||||
font-size: 10px;
|
||||
font-family: menu;
|
||||
}
|
||||
|
||||
/* Shared conversation window styles */
|
||||
.conversation {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.conversation-toolbar {
|
||||
z-index: 999; /* required to have it superimposed to the video element */
|
||||
border: 1px solid #5a5a5a;
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
background: rgba(0,0,0,.70);
|
||||
button::-moz-focus-inner {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/* desktop version */
|
||||
.fx-embedded .conversation-toolbar {
|
||||
/* required to have dropdowns float atop the .room-invitation-overlay: */
|
||||
z-index: 1020;
|
||||
.conversation-toolbar {
|
||||
z-index: 1020; /* required to have it superimposed to the video element */
|
||||
border: 0;
|
||||
left: 1.2rem;
|
||||
right: .7rem;
|
||||
height: 2.6rem;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
/* note that .room-invitation-overlay top matches this */
|
||||
height: 26px;
|
||||
bottom: 1.5rem;
|
||||
}
|
||||
|
||||
html[dir="rtl"] .conversation-toolbar {
|
||||
left: .7rem;
|
||||
right: 1.2rem;
|
||||
}
|
||||
|
||||
.idle {
|
||||
transition: opacity 1.5s;
|
||||
opacity: .75;
|
||||
}
|
||||
|
||||
/* standalone version */
|
||||
.standalone .conversation-toolbar {
|
||||
padding: 20px;
|
||||
height: 64px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.standalone .focus-stream {
|
||||
/* Set at maximum height, minus height of conversation toolbar */
|
||||
height: calc(100% - 64px);
|
||||
}
|
||||
|
||||
.standalone .in-call .focus-stream {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.conversation-toolbar > li {
|
||||
float: left;
|
||||
margin-right: .7rem;
|
||||
font-size: 0; /* prevents vertical bottom padding added to buttons in google
|
||||
chrome */
|
||||
}
|
||||
|
||||
.standalone .conversation-toolbar > li {
|
||||
/* XXX Might make sense to use relative units here.
|
||||
*/
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.btn-edit-entry {
|
||||
float: right !important;
|
||||
border-left: 1px solid #5a5a5a;
|
||||
html[dir="rtl"] .conversation-toolbar > li {
|
||||
float: right;
|
||||
margin-left: .7rem;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.conversation-toolbar-btn-box {
|
||||
border-right: 1px solid #5a5a5a;
|
||||
}
|
||||
|
||||
.standalone .conversation-toolbar-btn-box {
|
||||
/* overwrite the style for standalone
|
||||
* because we reuse the same component */
|
||||
border: none;
|
||||
}
|
||||
|
||||
.conversation-toolbar .btn {
|
||||
/* dimensions according to spec
|
||||
* https://people.mozilla.org/~dhenein/labs/loop-link-spec/#video-call */
|
||||
width: 32px;
|
||||
height: 24px;
|
||||
background-position: center;
|
||||
background-size: 40%;
|
||||
background-size: 28px;
|
||||
background-repeat: no-repeat;
|
||||
background-color: transparent;
|
||||
height: 28px;
|
||||
width: 33px;
|
||||
}
|
||||
|
||||
.standalone .media-control {
|
||||
width: 36px;
|
||||
.conversation-toolbar-media-btn-group-box {
|
||||
background-position: center;
|
||||
border-radius: 28px;
|
||||
background-repeat: no-repeat;
|
||||
background-color: transparent;
|
||||
background-image: url("../img/svg/media-group.svg");
|
||||
background-size: cover;
|
||||
height: 28px;
|
||||
width: 67px;
|
||||
}
|
||||
|
||||
.standalone-conversation-toolbar-media-btn:hover {
|
||||
background-color: rgba(255,255,255,.35);
|
||||
}
|
||||
.conversation-toolbar-media-btn-group-box > button:last-child:active,
|
||||
.conversation-toolbar-media-btn-group-box > button:last-child:hover {
|
||||
background-image: url("../img/svg/media-group-right-hover.svg");
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
html[dir="rtl"] .conversation-toolbar-media-btn-group-box > button:last-child:active,
|
||||
html[dir="rtl"] .conversation-toolbar-media-btn-group-box > button:last-child:hover {
|
||||
background-image: url("../img/svg/media-group-left-hover.svg");
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.conversation-toolbar-media-btn-group-box > button:first-child:active,
|
||||
.conversation-toolbar-media-btn-group-box > button:first-child:hover {
|
||||
background-image: url("../img/svg/media-group-left-hover.svg");
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
html[dir="rtl"] .conversation-toolbar-media-btn-group-box > button:first-child:active,
|
||||
html[dir="rtl"] .conversation-toolbar-media-btn-group-box > button:first-child:hover {
|
||||
background-image: url("../img/svg/media-group-right-hover.svg");
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.conversation-toolbar-media-btn-group-box > li {
|
||||
float: left;
|
||||
}
|
||||
|
||||
html[dir="rtl"] .conversation-toolbar-media-btn-group-box > li {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.conversation-toolbar-btn-box.btn-edit-entry {
|
||||
float: right;
|
||||
}
|
||||
|
||||
html[dir="rtl"] .conversation-toolbar-btn-box.btn-edit-entry {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.fx-embedded-answer-btn-text {
|
||||
vertical-align: bottom;
|
||||
/* always leave space for the icon (width and margin) */
|
||||
max-width: calc(100% - .8rem - .2rem);
|
||||
max-width: calc(100% - 24px - .2rem);
|
||||
height: 22px;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.fx-embedded-btn-icon-video,
|
||||
.fx-embedded-btn-icon-audio {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
width: .8rem;
|
||||
height: .8rem;
|
||||
background-repeat: no-repeat;
|
||||
cursor: pointer;
|
||||
background-position: center;
|
||||
background-size: 14px 14px;
|
||||
border-radius: 50%;
|
||||
-moz-margin-start: .2rem;
|
||||
}
|
||||
|
||||
/* conversationViews.jsx */
|
||||
|
||||
.fx-embedded-btn-icon-video,
|
||||
.fx-embedded-btn-video-small,
|
||||
.fx-embedded-tiny-video-icon {
|
||||
|
|
@ -124,113 +148,80 @@
|
|||
width: 26px;
|
||||
height: 26px;
|
||||
border-left: 1px solid rgba(255,255,255,.4);
|
||||
background-color: #56b397;
|
||||
border-top-right-radius: 2px;
|
||||
border-bottom-right-radius: 2px;
|
||||
background-color: #5bc0a4;
|
||||
background-position: center;
|
||||
background-size: 1rem;
|
||||
background-repeat: no-repeat;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.fx-embedded-btn-video-small:hover,
|
||||
.fx-embedded-btn-audio-small:hover {
|
||||
background-color: #6cb23e;
|
||||
background-color: #50e3c2;
|
||||
}
|
||||
|
||||
@media (min-resolution: 2dppx) {
|
||||
.fx-embedded-btn-audio-small {
|
||||
background-image: url("../img/audio-inverse-14x14@2x.png");
|
||||
}
|
||||
.fx-embedded-btn-video-small {
|
||||
background-image: url("../img/video-inverse-14x14@2x.png");
|
||||
}
|
||||
}
|
||||
|
||||
.standalone .btn-hangup {
|
||||
width: auto;
|
||||
font-size: 12px;
|
||||
border-radius: 2px;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.fx-embedded .conversation-toolbar .btn-hangup {
|
||||
background-image: url(../img/hangup-inverse-14x14.png);
|
||||
}
|
||||
@media (min-resolution: 2dppx) {
|
||||
.fx-embedded .conversation-toolbar .btn-hangup {
|
||||
background-image: url(../img/hangup-inverse-14x14@2x.png);
|
||||
}
|
||||
}
|
||||
|
||||
/* Common media control buttons behavior */
|
||||
.conversation-toolbar .transparent-button {
|
||||
background-color: transparent;
|
||||
opacity: 1;
|
||||
}
|
||||
.conversation-toolbar .transparent-button:hover,
|
||||
.conversation-toolbar .transparent-button.menu-showing {
|
||||
background-color: rgba(255,255,255,.35);
|
||||
opacity: 1;
|
||||
}
|
||||
.conversation-toolbar .media-control.muted {
|
||||
background-color: #0096DD;
|
||||
opacity: 1;
|
||||
.conversation-toolbar .btn-hangup {
|
||||
background-image: url("../img/svg/exit.svg");
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/* Audio mute button */
|
||||
.btn-mute-audio {
|
||||
background-image: url(../img/audio-inverse-14x14.png);
|
||||
.btn-mute-audio:after {
|
||||
content: url("../img/svg/audio.svg");
|
||||
}
|
||||
.btn-mute-audio.muted {
|
||||
background-image: url(../img/mute-inverse-14x14.png);
|
||||
|
||||
.btn-mute-audio.muted:after {
|
||||
content: url("../img/svg/audio-mute.svg");
|
||||
}
|
||||
@media (min-resolution: 2dppx) {
|
||||
.btn-mute-audio {
|
||||
background-image: url(../img/audio-inverse-14x14@2x.png);
|
||||
}
|
||||
.btn-mute-audio.muted {
|
||||
background-image: url(../img/mute-inverse-14x14@2x.png);
|
||||
}
|
||||
.btn-mute-audio:hover:after,
|
||||
.btn-mute-audio:active:after {
|
||||
content: url("../img/svg/audio-hover.svg");
|
||||
}
|
||||
|
||||
.btn-mute-audio.muted:hover:after,
|
||||
.btn-mute-audio.muted:active:after {
|
||||
content: url("../img/svg/audio-mute-hover.svg");
|
||||
}
|
||||
|
||||
/* Video mute button */
|
||||
.btn-mute-video {
|
||||
background-image: url(../img/video-inverse-14x14.png);
|
||||
}
|
||||
.btn-mute-video.muted {
|
||||
background-image: url(../img/facemute-14x14.png);
|
||||
}
|
||||
@media (min-resolution: 2dppx) {
|
||||
.btn-mute-video {
|
||||
background-image: url(../img/video-inverse-14x14@2x.png);
|
||||
}
|
||||
.btn-mute-video.muted {
|
||||
background-image: url(../img/facemute-14x14@2x.png);
|
||||
}
|
||||
.btn-mute-video:after {
|
||||
content: url("../img/svg/video.svg");
|
||||
}
|
||||
|
||||
/* Screen share button */
|
||||
.btn-mute-edit,
|
||||
.btn-screen-share {
|
||||
position: relative;
|
||||
background-image: url(../img/icons-10x10.svg#edit-white);
|
||||
background-size: 16px 16px;
|
||||
.btn-mute-video:active:after,
|
||||
.btn-mute-video:hover:after {
|
||||
content: url("../img/svg/video-hover.svg");
|
||||
}
|
||||
|
||||
.btn-mute-video.muted:after {
|
||||
content: url("../img/svg/video-mute.svg");
|
||||
}
|
||||
|
||||
.btn-mute-video.muted:hover:after,
|
||||
.btn-mute-video.muted:active:after {
|
||||
content: url("../img/svg/video-mute-hover.svg");
|
||||
}
|
||||
|
||||
.btn-mute-edit {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
background-size: 28px;
|
||||
background-image: url("../img/svg/settings.svg");
|
||||
}
|
||||
|
||||
.btn-mute-edit:hover,
|
||||
.btn-mute-edit:active {
|
||||
background-image: url("../img/svg/settings-hover.svg");
|
||||
}
|
||||
|
||||
.btn-screen-share {
|
||||
background-image: url(../img/icons-16x16.svg#screen-white);
|
||||
width: 42px;
|
||||
background-image: url("../img/svg/sharing.svg");
|
||||
}
|
||||
|
||||
/* Make room for the chevron. */
|
||||
.conversation-toolbar .btn-screen-share:not(.active) {
|
||||
background-position: 5px center;
|
||||
}
|
||||
|
||||
.btn-screen-share.active {
|
||||
background-image: url(../img/icons-16x16.svg#screenmute-white);
|
||||
background-color: #6CB23E;
|
||||
.btn-screen-share:hover,
|
||||
.btn-screen-share:active {
|
||||
background-image: url("../img/svg/sharing-hover.svg");
|
||||
}
|
||||
|
||||
.btn-mute-edit.muted,
|
||||
|
|
@ -239,21 +230,7 @@
|
|||
}
|
||||
|
||||
.btn-screen-share.disabled {
|
||||
background-image: url(../img/icons-16x16.svg#screen-disabled);
|
||||
}
|
||||
|
||||
.btn-screen-share .chevron {
|
||||
background-image: url(../img/icons-10x10.svg#dropdown-white);
|
||||
background-size: 10px 10px;
|
||||
position: absolute;
|
||||
right: 2px;
|
||||
top: 8px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.btn-screen-share.disabled .chevron {
|
||||
background-image: url(../img/icons-10x10.svg#dropdown-disabled);
|
||||
background-image: url("../img/svg/sharing-mute.svg");
|
||||
}
|
||||
|
||||
.fx-embedded .remote_wrapper {
|
||||
|
|
@ -398,9 +375,13 @@
|
|||
background-color: #111;
|
||||
}
|
||||
|
||||
.conversation-window-dropdown {
|
||||
bottom: 4rem;
|
||||
}
|
||||
|
||||
.conversation-window-dropdown > li {
|
||||
padding: 2px;
|
||||
font-size: .7rem;
|
||||
padding: .2rem;
|
||||
font-size: 1rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
|
|
@ -535,7 +516,8 @@
|
|||
/*
|
||||
* Used to center the loading spinner
|
||||
*/
|
||||
.focus-stream, .remote {
|
||||
.focus-stream,
|
||||
.media-wrapper:not(.receiving-screen-share) > .remote {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
|
@ -620,19 +602,18 @@
|
|||
}
|
||||
|
||||
.fx-embedded-call-detail {
|
||||
padding-top: 1.2em;
|
||||
padding-top: 0.6em;
|
||||
}
|
||||
|
||||
.fx-embedded-tiny-video-icon {
|
||||
margin: 0 0.8em;
|
||||
margin: 0 .8em;
|
||||
}
|
||||
|
||||
.fx-embedded-tiny-audio-icon,
|
||||
.fx-embedded-tiny-video-icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background-size: 12px 12px;
|
||||
background-color: #4ba6e7;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background-color: #00a9dc;
|
||||
display: inline-block;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
|
|
@ -799,15 +780,14 @@ html[dir="rtl"] .room-conversation-wrapper header a {
|
|||
}
|
||||
|
||||
.fx-embedded .room-conversation .conversation-toolbar .btn-hangup {
|
||||
background-image: url("../img/icons-16x16.svg#leave");
|
||||
background-image: url("../img/icons-14x14.svg#exit-white");
|
||||
}
|
||||
|
||||
.room-invitation-overlay {
|
||||
position: absolute;
|
||||
background: rgba(0,0,0,.6);
|
||||
/* This matches .fx-embedded .conversation toolbar height */
|
||||
top: 26px;
|
||||
height: calc(100% - 26px);
|
||||
background: rgba(255, 255, 255, 0.6);
|
||||
top: 0;
|
||||
height: 100%;
|
||||
right: 0;
|
||||
left: 0;
|
||||
text-align: center;
|
||||
|
|
@ -835,7 +815,7 @@ html[dir="rtl"] .room-conversation-wrapper header a {
|
|||
}
|
||||
|
||||
.room-invitation-overlay .btn-group {
|
||||
padding: 0 0 1em 0;
|
||||
padding: 0 0 5rem 0;
|
||||
}
|
||||
|
||||
.room-invitation-addcontext {
|
||||
|
|
@ -915,9 +895,7 @@ body[platform="win"] .share-service-dropdown.overflow > .dropdown-menu-item {
|
|||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
/* Stretch to the maximum available space whilst not covering the conversation
|
||||
toolbar (26px). */
|
||||
height: calc(100% - 26px);
|
||||
height: 100%;
|
||||
font-size: .9em;
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
|
|
@ -1060,8 +1038,8 @@ html[dir="rtl"] .room-context-btn-close {
|
|||
}
|
||||
|
||||
.standalone-room-wrapper > .media-layout {
|
||||
/* 50px is the header, 64px for toolbar, 3em is the footer. */
|
||||
height: calc(100% - 50px - 64px - 3em);
|
||||
/* 50px is the header, 3em is the footer. */
|
||||
height: calc(100% - 50px - 3em);
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
|
|
@ -1109,6 +1087,10 @@ html[dir="rtl"] .room-context-btn-close {
|
|||
height: calc(100% - 150px);
|
||||
}
|
||||
|
||||
.media-wrapper.showing-local-streams.receiving-screen-share {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.media-wrapper.showing-local-streams.receiving-screen-share > .text-chat-view {
|
||||
/* When we're displaying the local streams, then we need to make the text
|
||||
chat view a bit shorter to give room. */
|
||||
|
|
@ -1117,10 +1099,7 @@ html[dir="rtl"] .room-context-btn-close {
|
|||
|
||||
.desktop-call-wrapper > .media-layout > .media-wrapper > .text-chat-view,
|
||||
.desktop-room-wrapper > .media-layout > .media-wrapper > .text-chat-view {
|
||||
/* Account for height of .conversation-toolbar on desktop */
|
||||
/* When we change the toolbar in bug 1184559 we can remove this. */
|
||||
margin-top: 26px;
|
||||
height: calc(100% - 150px - 26px);
|
||||
height: calc(100% - 150px);
|
||||
}
|
||||
|
||||
/* Temporarily slaved from .media-wrapper until we use it in more places
|
||||
|
|
@ -1199,6 +1178,11 @@ html[dir="rtl"] .room-context-btn-close {
|
|||
height: 100%;
|
||||
}
|
||||
|
||||
.media-wrapper > .focus-stream > .local ~ .conversation-toolbar {
|
||||
/* 22px are the margins, 120px is for the local video area. */
|
||||
max-width: calc(100% - 22px - 120px);
|
||||
}
|
||||
|
||||
.media-wrapper > .focus-stream > .local {
|
||||
/* Position over the remote video */
|
||||
position: absolute;
|
||||
|
|
@ -1206,6 +1190,7 @@ html[dir="rtl"] .room-context-btn-close {
|
|||
z-index: 2;
|
||||
margin: 3px;
|
||||
right: 0;
|
||||
left:auto;
|
||||
/* 29px is (30% of 50px high header) + (height toolbar (38px) +
|
||||
height footer (25px) - height header (50px)) */
|
||||
bottom: 0;
|
||||
|
|
@ -1213,6 +1198,12 @@ html[dir="rtl"] .room-context-btn-close {
|
|||
height: 120px;
|
||||
}
|
||||
|
||||
html[dir="rtl"] .media-wrapper > .focus-stream > .local {
|
||||
right: auto;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
|
||||
.standalone-room-wrapper > .media-layout > .media-wrapper > .local {
|
||||
/* Add 10px for the margin on standalone */
|
||||
right: 10px;
|
||||
|
|
@ -1239,9 +1230,6 @@ html[dir="rtl"] .room-context-btn-close {
|
|||
|
||||
.desktop-call-wrapper > .media-layout > .media-wrapper > .text-chat-view,
|
||||
.desktop-room-wrapper > .media-layout > .media-wrapper > .text-chat-view {
|
||||
/* When we change the toolbar in bug 1184559 we can remove this. */
|
||||
/* Reset back to 0 for .conversation-toolbar override on desktop */
|
||||
margin-top: 0;
|
||||
/* This is temp, to echo the .media-wrapper > .text-chat-view above */
|
||||
height: 30%;
|
||||
}
|
||||
|
|
@ -1293,9 +1281,15 @@ html[dir="rtl"] .room-context-btn-close {
|
|||
flex-flow: column nowrap;
|
||||
}
|
||||
|
||||
.media-wrapper > .focus-stream > .local ~ .conversation-toolbar {
|
||||
max-width: calc(75% - 22px);
|
||||
}
|
||||
|
||||
.media-wrapper > .focus-stream > .local {
|
||||
position: absolute;
|
||||
display:fixed;
|
||||
right: 0;
|
||||
left: auto;
|
||||
/* 30% is the height of the text chat. As we have a margin,
|
||||
we don't need to worry about any offset for a border */
|
||||
bottom: 0;
|
||||
|
|
@ -1307,6 +1301,11 @@ html[dir="rtl"] .room-context-btn-close {
|
|||
height: 25%;
|
||||
}
|
||||
|
||||
html[dir="rtl"] .media-wrapper > .focus-stream > .local {
|
||||
left: 0;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
.media-wrapper:not(.showing-remote-streams) > .focus-stream > .no-video {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -1322,6 +1321,10 @@ html[dir="rtl"] .room-context-btn-close {
|
|||
background-color: black;
|
||||
}
|
||||
|
||||
.media-wrapper:not(.showing-remote-streams) > .focus-stream > .local ~ .conversation-toolbar {
|
||||
max-width: calc(100% - 22px);
|
||||
}
|
||||
|
||||
.media-wrapper > .focus-stream {
|
||||
flex: 1 1 auto;
|
||||
height: auto;
|
||||
|
|
@ -1339,7 +1342,6 @@ html[dir="rtl"] .room-context-btn-close {
|
|||
height: 100%;
|
||||
background: #000;
|
||||
}
|
||||
|
||||
.standalone .room-conversation-wrapper .video-layout-wrapper {
|
||||
/* 50px = height of header, 3em = height of footer */
|
||||
/* XXX This is currently wrong for narrow/mobile display,
|
||||
|
|
@ -1709,11 +1711,6 @@ html[dir="rtl"] .text-chat-entry.received .text-chat-arrow {
|
|||
.standalone .room-conversation .video_wrapper.remote_wrapper.not-joined {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.standalone .conversation-toolbar {
|
||||
height: 38px;
|
||||
padding: 8px;
|
||||
}
|
||||
.standalone .conversation .focus-stream {
|
||||
/* Set at maximum height, minus height of conversation toolbar */
|
||||
height: 100%;
|
||||
|
|
@ -1734,20 +1731,14 @@ html[dir="rtl"] .text-chat-entry.received .text-chat-arrow {
|
|||
max-height: 160px;
|
||||
/* 60px min-height of .text-chat-entries plus 40px of .text-chat-box */
|
||||
min-height: 100px;
|
||||
/* The !important is to override the values defined above which have more
|
||||
specificity when we fix bug 1184559, we should be able to remove it,
|
||||
but this should be tested first. */
|
||||
height: auto !important;
|
||||
height: auto;
|
||||
/* Let the view be the minimum size it needs to be - don't flex to take up
|
||||
more. */
|
||||
flex: 0 0 auto !important;
|
||||
}
|
||||
|
||||
.text-chat-entries {
|
||||
/* The !important is to override the values defined above which have more
|
||||
specificity when we fix bug 1184559, we should be able to remove it,
|
||||
but this should be tests first. */
|
||||
flex: 1 1 auto !important;
|
||||
flex: 1 1 auto;
|
||||
max-height: 120px;
|
||||
min-height: 60px;
|
||||
}
|
||||
|
|
@ -1834,7 +1825,7 @@ html[dir="rtl"] .text-chat-entry.received .text-chat-arrow {
|
|||
/* Make sure the loading spinner always gets the same background */
|
||||
.loading-background {
|
||||
background: black;
|
||||
position: absolute;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,28 +14,30 @@
|
|||
fill: #444;
|
||||
}
|
||||
use[id$="-active"] {
|
||||
fill: #0095dd;
|
||||
fill: #5cccee;
|
||||
}
|
||||
use[id$="-still"] {
|
||||
fill: #00a9dc;
|
||||
}
|
||||
use[id$="-white"] {
|
||||
fill: #fff;
|
||||
fill: #ffffff;
|
||||
}
|
||||
use[id$="-grey"] {
|
||||
fill: #4a4a4a;
|
||||
}
|
||||
</style>
|
||||
<defs>
|
||||
<path id="audio-shape" fill-rule="evenodd" d="M9.571,6.143v1.714c0,1.42-1.151,2.571-2.571,2.571 c-1.42,0-2.571-1.151-2.571-2.571V6.143H3.571v1.714c0,1.597,1.093,2.935,2.571,3.316v0.97H5.714c-0.56,0-1.034,0.358-1.211,0.857 h4.993c-0.177-0.499-0.651-0.857-1.211-0.857H7.857v-0.97c1.478-0.381,2.571-1.719,2.571-3.316V6.143H9.571z M7,10 c1.183,0,2.143-0.959,2.143-2.143V3.143C9.143,1.959,8.183,1,7,1C5.817,1,4.857,1.959,4.857,3.143v4.714C4.857,9.041,5.817,10,7,10 z"/>
|
||||
<g id="facemute-shape">
|
||||
<path fill-rule="evenodd" d="M12.174,3.551L9.568,5.856V5.847L3.39,11.49h5.066 c0.613,0,1.111-0.533,1.111-1.19V8.526l2.606,2.304C12.4,11.071,12.71,11.142,13,11.078V3.302C12.71,3.239,12.4,3.309,12.174,3.551 z"/>
|
||||
<path fill-rule="evenodd" d="M12.395,2.617l-0.001-0.001l-0.809-0.884l-2.102,1.92 C9.316,3.221,8.919,2.918,8.457,2.918H2.111C1.498,2.918,1,3.451,1,4.109v6.191c0,0.318,0.118,0.607,0.306,0.821l-0.288,0.263 l0.809,0.884l0.001,0.001l0.853-0.779l6.887-6.29L12.395,2.617z"/>
|
||||
</g>
|
||||
<path id="hangup-shape" fill-rule="evenodd" d="M13,11.732c-0.602,0.52-1.254,0.946-1.941,1.267 c-1.825-0.337-4.164-1.695-6.264-3.795C2.696,7.106,1.339,4.769,1,2.945c0.321-0.688,0.748-1.341,1.268-1.944l2.528,2.855 C4.579,4.153,4.377,4.454,4.209,4.759L4.22,4.77C3.924,5.42,4.608,6.833,5.889,8.114c1.281,1.28,2.694,1.965,3.343,1.669 l0.011,0.011c0.305-0.168,0.606-0.37,0.904-0.587L13,11.732z"/>
|
||||
<path id="incoming-shape" fill-rule="evenodd" d="M2.745,7.558l0.637,0.669c0.04,0.041,0.085,0.073,0.134,0.1 l3.249,3.313c0.38,0.393,0.915,0.478,1.197,0.186l0.638-0.676c0.281-0.292,0.2-0.848-0.18-1.244L7.097,8.558h3.566 c0.419,0,0.759-0.34,0.759-0.759V6.28c0-0.419-0.34-0.759-0.759-0.759H7.059l1.42-1.443c0.381-0.392,0.461-0.945,0.18-1.234 l-0.637-0.67C7.74,1.883,7.204,1.966,6.824,2.359L3.55,5.688C3.487,5.717,3.43,5.755,3.381,5.806L2.745,6.482 c-0.131,0.137-0.183,0.332-0.162,0.54C2.562,7.229,2.613,7.423,2.745,7.558z"/>
|
||||
<path id="link-shape" fill-rule="evenodd" d="M7.359,6.107c0.757-0.757,0.757-1.995,0-2.752 L5.573,1.568c-0.757-0.757-1.995-0.757-2.752,0L1.568,2.82c-0.757,0.757-0.757,1.995,0,2.752l1.787,1.787 c0.757,0.757,1.995,0.757,2.752,0L6.266,7.2L6.8,7.734L6.641,7.893c-0.757,0.757-0.757,1.995,0,2.752l1.787,1.787 c0.757,0.757,1.995,0.757,2.752,0l1.253-1.253c0.757-0.757,0.757-1.995,0-2.752l-1.787-1.787c-0.757-0.757-1.995-0.757-2.752,0 L7.734,6.8L7.2,6.266L7.359,6.107z M9.87,7.868l1.335,1.335c0.294,0.294,0.294,0.774,0,1.068l-0.934,0.934 c-0.294,0.294-0.774,0.294-1.068,0L7.868,9.87c-0.294-0.294-0.294-0.774,0-1.068L8.13,9.064c0.294,0.294,0.744,0.324,1.001,0.067 C9.388,8.874,9.358,8.424,9.064,8.13L8.802,7.868C9.096,7.574,9.577,7.574,9.87,7.868z M4.13,6.132L2.795,4.797 c-0.294-0.294-0.294-0.774,0-1.068l0.934-0.934c0.294-0.294,0.774-0.294,1.068,0L6.132,4.13c0.294,0.294,0.294,0.774,0,1.068 L5.86,4.926C5.567,4.632,5.116,4.602,4.859,4.859C4.602,5.116,4.632,5.567,4.926,5.86l0.272,0.272 C4.904,6.426,4.423,6.426,4.13,6.132z"/>
|
||||
<g id="mute-shape">
|
||||
<path fill-rule="evenodd" d="M5.186,9.492L5.49,9.188l3.822-3.822l2.354-2.354l-0.848-0.848 L9.312,3.669V3.142C9.312,1.959,8.352,1,7.169,1C5.986,1,5.026,1.959,5.026,3.142v4.715c0,0.032,0.001,0.064,0.002,0.096 L4.643,8.338c-0.03-0.156-0.046-0.317-0.046-0.481V6.142H3.741v1.715c0,0.414,0.073,0.81,0.208,1.176l-1.615,1.615l0.848,0.848 l1.398-1.398v0L5.186,9.492z"/>
|
||||
<path fill-rule="evenodd" d="M9.312,7.857V6.045L5.829,9.528C6.196,9.824,6.662,10,7.169,10 C8.352,10,9.312,9.04,9.312,7.857z"/>
|
||||
<path fill-rule="evenodd" d="M9.741,7.857c0,1.42-1.151,2.572-2.572,2.572 c-0.625,0-1.199-0.223-1.645-0.595l-0.605,0.605c0.395,0.344,0.87,0.599,1.393,0.734v0.97H5.884c-0.56,0-1.034,0.359-1.212,0.858 h4.994c-0.178-0.499-0.652-0.858-1.212-0.858H8.026v-0.97c1.478-0.38,2.572-1.718,2.572-3.316V6.142H9.741V7.857z"/>
|
||||
</g>
|
||||
<path id="pause-shape" fill-rule="evenodd" d="M4.75,1h-1.5C2.836,1,2.5,1.336,2.5,1.75v10.5 C2.5,12.664,2.836,13,3.25,13h1.5c0.414,0,0.75-0.336,0.75-0.75V1.75C5.5,1.336,5.164,1,4.75,1z M10.75,1h-1.5 C8.836,1,8.5,1.336,8.5,1.75v10.5C8.5,12.664,8.836,13,9.25,13h1.5c0.414,0,0.75-0.336,0.75-0.75V1.75C11.5,1.336,11.164,1,10.75,1 z"/>
|
||||
<path id="video-shape" d="M1.59247473,11.4075253 C1.9956945,11.7983901 2.46237364,12 3.02957694,12 L7.98333957,12 C8.53762636,12 9.01666043,11.7983901 9.40752527,11.4075253 C9.81130663,11.0043055 10,10.5376264 10,9.97042306 L10,8.81074504 L12.8360165,11.6467615 C12.9247473,11.7354923 13.0252714,11.7731187 13.1516286,11.7731187 C13.2145264,11.7731187 13.2650693,11.7607638 13.3279671,11.7354923 C13.517222,11.659678 13.6053912,11.5209659 13.6053912,11.319356 L13.6053912,3.66772744 C13.6053912,3.47903407 13.517222,3.34032198 13.3279671,3.25215275 C13.2650693,3.23923624 13.2145264,3.22688132 13.1516286,3.22688132 C13.0252714,3.22688132 12.9247473,3.26450768 12.8360165,3.3526769 L10,6.17633845 L10,5.01666043 C10,4.46181206 9.81130663,3.98333957 9.40752527,3.59247473 C9.01666043,3.18869337 8.53762636,3 7.98333957,3 L3.02957694,3 C2.46237364,3 1.9956945,3.18869337 1.59247473,3.59247473 C1.20160988,3.98333957 1,4.46181206 1,5.01666043 L1,9.97042306 C1,10.5376264 1.20160988,11.0043055 1.59247473,11.4075253" fill="#fff" fill-rule="evenodd"/>
|
||||
<path id="audio-shape" fill-rule="evenodd" d="M12,6.49959616 C12,6.22659966 11.7736696,5.99910258 11.4995064,5.99910258 C11.2265099,5.99910258 10.9990128,6.22543301 10.9990128,6.49959616 L10.9990128,7.49941667 C10.9990128,9.4290586 9.42869963,10.9993718 7.4990577,10.9993718 C5.56941578,10.9993718 3.99910258,9.4290586 3.99910258,7.49941667 L3.99910258,6.49959616 C3.99910258,6.22659966 3.77277214,5.99910258 3.49860899,5.99910258 C3.22561249,5.99910258 2.99811541,6.22543301 2.99811541,6.49959616 L2.99811541,7.49941667 C2.99811541,9.81172036 4.74809297,11.7180293 6.99856412,11.9676927 L6.99856412,12.9990128 L4.99892309,12.9990128 C4.72592659,12.9990128 4.49842951,13.2253433 4.49842951,13.4995064 C4.49842951,13.7725029 4.72475994,14 4.99892309,14 L9.99919232,14 C10.2721888,14 10.4996859,13.7736696 10.4996859,13.4995064 C10.4996859,13.2265099 10.2733555,12.9990128 9.99919232,12.9990128 L7.99955129,12.9990128 L7.99955129,11.9676927 C10.2500224,11.7180293 12,9.81172036 12,7.49941667 L12,6.49959616 L12,6.49959616 Z M10.000359,3.50013461 C10.000359,2.12465225 8.87570672,1 7.50022436,1 C6.12474199,1 5.00008974,2.12465225 5.00008974,3.50013461 L5.00008974,7.50058333 C5.00008974,8.87606569 6.12474199,10.0007179 7.50022436,10.0007179 C8.87570672,10.0007179 10.000359,8.87606569 10.000359,7.50058333 L10.000359,3.50013461 L10.000359,3.50013461 Z" />
|
||||
<path id="facemute-shape" fill-rule="evenodd" d="M3.5056409,12 L7.98333957,12 C8.53762636,12 9.01666043,11.7983901 9.40752527,11.4075253 C9.81130663,11.0043055 10,10.5376264 10,9.97042306 L10,8.81074504 L12.8360165,11.6467615 C12.9247473,11.7354923 13.0252714,11.7731187 13.1516286,11.7731187 C13.2145264,11.7731187 13.2650693,11.7607638 13.3279671,11.7354923 C13.517222,11.659678 13.6053912,11.5209659 13.6053912,11.319356 L13.6053912,3.66772744 C13.6053912,3.47903407 13.517222,3.34032198 13.3279671,3.25215275 C13.2650693,3.23923624 13.2145264,3.22688132 13.1516286,3.22688132 C13.0252714,3.22688132 12.9247473,3.26450768 12.8360165,3.3526769 L10,6.17633845 L10,5.5056409 L11.8301248,3.67551608 C11.8719395,3.63370139 11.900024,3.56380221 11.900024,3.49327892 C11.900024,3.43773404 11.8719395,3.36721075 11.8301248,3.32539606 L11.1860538,2.68132501 C11.1298848,2.62515602 11.0737158,2.59707153 11.0038166,2.59707153 C10.9339174,2.59707153 10.8777484,2.62515602 10.8215795,2.68132501 L1.16987518,12.318675 C1.12806049,12.374844 1.099976,12.431013 1.099976,12.5009121 C1.099976,12.5708113 1.12806049,12.6269803 1.16987518,12.6831493 L1.81394623,13.3272204 C1.87011522,13.3696591 1.92628421,13.3971195 1.99618339,13.3971195 C2.06670667,13.3971195 2.12225156,13.3696591 2.17842055,13.3272204 L3.5056409,12 Z M8.45401801,3.04996594 C8.30389858,3.01642927 8.14689515,3 7.98333957,3 L3.02957694,3 C2.46237364,3 1.9956945,3.18869337 1.59247473,3.59247473 C1.20160988,3.98333957 1,4.46181206 1,5.01666043 L1,9.97042306 C1,10.1358084 1.01714068,10.2926472 1.05111577,10.4418584 L8.45401801,3.04996594 L8.45401801,3.04996594 Z" />
|
||||
<path id="hangup-shape" fill-rule="evenodd" d="M13,11.732c-0.602,0.52-1.254,0.946-1.941,1.267 c-1.825-0.337-4.164-1.695-6.264-3.795C2.696,7.106,1.339,4.769,1,2.945c0.321-0.688,0.748-1.341,1.268-1.944l2.528,2.855 C4.579,4.153,4.377,4.454,4.209,4.759L4.22,4.77C3.924,5.42,4.608,6.833,5.889,8.114c1.281,1.28,2.694,1.965,3.343,1.669 l0.011,0.011c0.305-0.168,0.606-0.37,0.904-0.587L13,11.732z" />
|
||||
<path id="incoming-shape" fill-rule="evenodd" d="M2.745,7.558l0.637,0.669c0.04,0.041,0.085,0.073,0.134,0.1 l3.249,3.313c0.38,0.393,0.915,0.478,1.197,0.186l0.638-0.676c0.281-0.292,0.2-0.848-0.18-1.244L7.097,8.558h3.566 c0.419,0,0.759-0.34,0.759-0.759V6.28c0-0.419-0.34-0.759-0.759-0.759H7.059l1.42-1.443c0.381-0.392,0.461-0.945,0.18-1.234 l-0.637-0.67C7.74,1.883,7.204,1.966,6.824,2.359L3.55,5.688C3.487,5.717,3.43,5.755,3.381,5.806L2.745,6.482 c-0.131,0.137-0.183,0.332-0.162,0.54C2.562,7.229,2.613,7.423,2.745,7.558z" />
|
||||
<path id="link-shape" fill-rule="evenodd" d="M7.359,6.107c0.757-0.757,0.757-1.995,0-2.752 L5.573,1.568c-0.757-0.757-1.995-0.757-2.752,0L1.568,2.82c-0.757,0.757-0.757,1.995,0,2.752l1.787,1.787 c0.757,0.757,1.995,0.757,2.752,0L6.266,7.2L6.8,7.734L6.641,7.893c-0.757,0.757-0.757,1.995,0,2.752l1.787,1.787 c0.757,0.757,1.995,0.757,2.752,0l1.253-1.253c0.757-0.757,0.757-1.995,0-2.752l-1.787-1.787c-0.757-0.757-1.995-0.757-2.752,0 L7.734,6.8L7.2,6.266L7.359,6.107z M9.87,7.868l1.335,1.335c0.294,0.294,0.294,0.774,0,1.068l-0.934,0.934 c-0.294,0.294-0.774,0.294-1.068,0L7.868,9.87c-0.294-0.294-0.294-0.774,0-1.068L8.13,9.064c0.294,0.294,0.744,0.324,1.001,0.067 C9.388,8.874,9.358,8.424,9.064,8.13L8.802,7.868C9.096,7.574,9.577,7.574,9.87,7.868z M4.13,6.132L2.795,4.797 c-0.294-0.294-0.294-0.774,0-1.068l0.934-0.934c0.294-0.294,0.774-0.294,1.068,0L6.132,4.13c0.294,0.294,0.294,0.774,0,1.068 L5.86,4.926C5.567,4.632,5.116,4.602,4.859,4.859C4.602,5.116,4.632,5.567,4.926,5.86l0.272,0.272 C4.904,6.426,4.423,6.426,4.13,6.132z" />
|
||||
<path id="exit-shape" fill-rule="evenodd" d="M7.01905144,5.00017279 C7.01277908,5.00005776 7.0064926,5 7.00019251,5 L3.99980749,5 C3.44371665,5 3,5.44762906 3,5.99980749 L3,9.00019251 C3,9.55628335 3.44762906,10 3.99980749,10 L7.00019251,10 C7.00649341,10 7.01277988,9.99994253 7.01905144,9.99982809 L7.01905144,11.5391818 C7.01905144,12.078915 7.37554713,12.2645548 7.81530684,11.9314625 L12.8239665,8.13769619 C13.2653143,7.80340108 13.2637262,7.26455476 12.8239665,6.93146254 L7.81530684,3.13769619 C7.37395904,2.80340108 7.01905144,2.98023404 7.01905144,3.52997693 L7.01905144,5.00017279 Z M1,3 L6,3 L6,4 L2,4 L2,11 L6,11 L6,12.0100024 L1,12.0100021 L1,3 Z" />
|
||||
<path id="mute-shape" fill-rule="evenodd" d="M2.16990529,12.6831493 L2.81397634,13.3272204 C2.87014533,13.3696591 2.92631431,13.3971195 2.9962135,13.3971195 C3.06673678,13.3971195 3.12228167,13.3696591 3.17845065,13.3272204 L5.1537267,11.3382141 C5.72789857,11.6883341 6.34450922,11.8986558 7.00293457,11.968555 L7.00293457,13.0051848 L4.99957403,13.0051848 C4.85977567,13.0051848 4.74743769,13.0469995 4.64945402,13.1593375 C4.55147034,13.2573212 4.49530135,13.3696591 4.49530135,13.4957273 C4.49530135,13.6355257 4.55147034,13.7478637 4.64945402,13.8458473 C4.74743769,13.943831 4.85977567,14 4.99957403,14 L10.0004862,14 C10.1402845,14 10.2526225,13.943831 10.3506062,13.8458473 C10.4485899,13.7478637 10.5047589,13.6355257 10.5047589,13.4957273 C10.5047589,13.3696591 10.4485899,13.2573212 10.3506062,13.1593375 C10.2526225,13.0469995 10.1402845,13.0051848 10.0004862,13.0051848 L7.99712564,13.0051848 L7.99712564,11.968555 C9.13173918,11.8424868 10.0847397,11.3662986 10.8548789,10.5119059 C11.6256422,9.6568891 12.0038467,8.64834373 12.0038467,7.5 L12.0038467,6.50518483 C12.0038467,6.36538646 11.9476777,6.25304849 11.8496941,6.15506481 C11.7517104,6.05708113 11.6393724,6.00091215 11.5133042,6.00091215 C11.3735059,6.00091215 11.2611679,6.05708113 11.1631842,6.15506481 C11.0652005,6.25304849 11.0090315,6.36538646 11.0090315,6.50518483 L11.0090315,7.5 C11.0090315,8.46673068 10.6589115,9.29303889 9.97240169,9.97954873 C9.28589185,10.6660586 8.45958364,11.0018243 7.50720726,11.0018243 C6.93303539,11.0018243 6.40005411,10.8757561 5.89578143,10.6098896 L6.65281455,9.85348056 C6.93303539,9.95146423 7.21263212,10.0076332 7.50720726,10.0076332 C8.1937171,10.0076332 8.78161916,9.75549688 9.27216165,9.26495439 C9.76208004,8.77441191 10.0004862,8.18650984 10.0004862,7.5 L10.0004862,6.50518483 L12.8301549,3.67551608 C12.8719696,3.63370139 12.9000541,3.56380221 12.9000541,3.49327892 C12.9000541,3.43773404 12.8719696,3.36721075 12.8301549,3.32539606 L12.1860839,2.68132501 C12.1299149,2.62515602 12.0737459,2.59707153 12.0038467,2.59707153 C11.9339475,2.59707153 11.8777785,2.62515602 11.8216096,2.68132501 L2.16990529,12.318675 C2.1280906,12.374844 2.1000061,12.431013 2.1000061,12.5009121 C2.1000061,12.5708113 2.1280906,12.6269803 2.16990529,12.6831493 L2.16990529,12.6831493 Z M3.31887312,9.18070091 L4.10274254,8.3824772 C4.03284336,8.07417187 3.99102867,7.78022084 3.99102867,7.5 L3.99102867,6.50518483 C3.99102867,6.36538646 3.93485968,6.25304849 3.836876,6.15506481 C3.73889233,6.05708113 3.62655435,6.00091215 3.50048618,6.00091215 C3.36068781,6.00091215 3.24834984,6.05708113 3.15036616,6.15506481 C3.05238248,6.25304849 2.9962135,6.36538646 2.9962135,6.50518483 L2.9962135,7.5 C2.9962135,8.07417187 3.10855147,8.63461354 3.31887312,9.18070091 L3.31887312,9.18070091 Z M9.86068781,2.65324052 C9.67845065,2.16269803 9.37014533,1.77076332 8.95012612,1.46245799 C8.51575262,1.15415266 8.03956443,1 7.50720726,1 C6.80634312,1 6.21844105,1.23840614 5.72789857,1.72832453 C5.23798018,2.21886702 4.99957403,2.80739318 4.99957403,3.49327892 L4.99957403,7.5 L9.86068781,2.65324052 L9.86068781,2.65324052 Z" />
|
||||
<path id="pause-shape" fill-rule="evenodd" d="M4.75,1h-1.5C2.836,1,2.5,1.336,2.5,1.75v10.5 C2.5,12.664,2.836,13,3.25,13h1.5c0.414,0,0.75-0.336,0.75-0.75V1.75C5.5,1.336,5.164,1,4.75,1z M10.75,1h-1.5 C8.836,1,8.5,1.336,8.5,1.75v10.5C8.5,12.664,8.836,13,9.25,13h1.5c0.414,0,0.75-0.336,0.75-0.75V1.75C11.5,1.336,11.164,1,10.75,1 z" />
|
||||
<path id="video-shape" fill-rule="evenodd" d="M1.59247473,11.4075253 C1.9956945,11.7983901 2.46237364,12 3.02957694,12 L7.98333957,12 C8.53762636,12 9.01666043,11.7983901 9.40752527,11.4075253 C9.81130663,11.0043055 10,10.5376264 10,9.97042306 L10,8.81074504 L12.8360165,11.6467615 C12.9247473,11.7354923 13.0252714,11.7731187 13.1516286,11.7731187 C13.2145264,11.7731187 13.2650693,11.7607638 13.3279671,11.7354923 C13.517222,11.659678 13.6053912,11.5209659 13.6053912,11.319356 L13.6053912,3.66772744 C13.6053912,3.47903407 13.517222,3.34032198 13.3279671,3.25215275 C13.2650693,3.23923624 13.2145264,3.22688132 13.1516286,3.22688132 C13.0252714,3.22688132 12.9247473,3.26450768 12.8360165,3.3526769 L10,6.17633845 L10,5.01666043 C10,4.46181206 9.81130663,3.98333957 9.40752527,3.59247473 C9.01666043,3.18869337 8.53762636,3 7.98333957,3 L3.02957694,3 C2.46237364,3 1.9956945,3.18869337 1.59247473,3.59247473 C1.20160988,3.98333957 1,4.46181206 1,5.01666043 L1,9.97042306 C1,10.5376264 1.20160988,11.0043055 1.59247473,11.4075253" />
|
||||
<path id="screen-shape" fill-rule="evenodd" d="M10.001,4 L10.001,3.003 C10.001,2.438 9.554,2 9.003,2 L1.998,2 C1.447,2 1,2.449 1,3.003 L1,7.997 C1,8.562 1.447,9 1.998,9 L3,9 L3,5.003 C3,4.449 3.446,4 3.998,4 L10,4 L10.001,4 Z M4,6.00292933 C4,5.44902676 4.4463114,5 4.99754465,5 L12.0024554,5 C12.553384,5 13,5.43788135 13,6.00292933 L13,10.9970707 C13,11.5509732 12.5536886,12 12.0024554,12 L4.99754465,12 C4.44661595,12 4,11.5621186 4,10.9970707 L4,6.00292933 Z" />
|
||||
<path id="screenmute-shape" fill-rule="evenodd" d="M12.579,5.18 C12.416,5.066 12.218,5 12.004,5 L4.999,5 C4.448,5 4.001,5.449 4.001,6.003 L4.001,10.899 L12.579,5.18 L12.579,5.18 Z M13.001,6.1 L13.001,10.996 C13.001,11.55 12.555,11.999 12.003,11.999 L4.998,11.999 C4.784,11.999 4.585,11.933 4.423,11.819 L13.001,6.1 L13.001,6.1 Z M10.001,4 L10.001,3.003 C10.001,2.438 9.554,2 9.003,2 L1.998,2 C1.447,2 1,2.449 1,3.003 L1,7.997 C1,8.562 1.447,9 1.998,9 L3,9 L3,5.003 C3,4.449 3.446,4 3.998,4 L10,4 L10.001,4 Z" />
|
||||
<g id="volume-shape">
|
||||
<path fill-rule="evenodd" d="M3.513,4.404H1.896c-0.417,0-0.756,0.338-0.756,0.755v3.679 c0,0.417,0.338,0.755,0.756,0.755H3.51l2.575,2.575c0.261,0.261,0.596,0.4,0.938,0.422V1.409C6.682,1.431,6.346,1.57,6.085,1.831 L3.513,4.404z M8.555,5.995C8.619,6.32,8.653,6.656,8.653,7c0,0.344-0.034,0.679-0.098,1.004l0.218,0.142 C8.852,7.777,8.895,7.393,8.895,7c0-0.394-0.043-0.777-0.123-1.147L8.555,5.995z M12.224,3.6l-0.475,0.31 c0.359,0.962,0.557,2.003,0.557,3.09c0,1.087-0.198,2.128-0.557,3.09l0.475,0.31c0.41-1.054,0.635-2.201,0.635-3.4 C12.859,5.8,12.634,4.654,12.224,3.6z M10.061,5.012C10.25,5.642,10.353,6.308,10.353,7c0,0.691-0.103,1.358-0.293,1.987 l0.351,0.229C10.634,8.517,10.756,7.772,10.756,7c0-0.773-0.121-1.517-0.345-2.216L10.061,5.012z"/>
|
||||
<path d="M7.164,12.74l-0.15-0.009c-0.389-0.024-0.754-0.189-1.028-0.463L3.452,9.735H1.896 C1.402,9.735,1,9.333,1,8.838V5.16c0-0.494,0.402-0.896,0.896-0.896h1.558l2.531-2.531C6.26,1.458,6.625,1.293,7.014,1.269 l0.15-0.009V12.74z M1.896,4.545c-0.339,0-0.615,0.276-0.615,0.615v3.679c0,0.339,0.276,0.615,0.615,0.615h1.672l2.616,2.616 c0.19,0.19,0.434,0.316,0.697,0.363V1.568C6.619,1.615,6.375,1.741,6.185,1.931L3.571,4.545H1.896z M12.292,10.612l-0.714-0.467 l0.039-0.105C11.981,9.067,12.165,8.044,12.165,7c0-1.044-0.184-2.067-0.548-3.041l-0.039-0.105l0.714-0.467l0.063,0.162 C12.783,4.649,13,5.81,13,7s-0.217,2.351-0.645,3.451L12.292,10.612z M11.92,10.033l0.234,0.153 c0.374-1.019,0.564-2.09,0.564-3.186s-0.19-2.167-0.564-3.186L11.92,3.966C12.27,4.94,12.447,5.96,12.447,7 C12.447,8.04,12.27,9.059,11.92,10.033z M10.489,9.435L9.895,9.047l0.031-0.101C10.116,8.315,10.212,7.66,10.212,7 c0-0.661-0.096-1.316-0.287-1.947L9.895,4.952l0.594-0.388l0.056,0.176C10.779,5.471,10.897,6.231,10.897,7 c0,0.769-0.118,1.529-0.351,2.259L10.489,9.435z M10.225,8.926l0.106,0.069C10.52,8.348,10.615,7.677,10.615,7 c0-0.677-0.095-1.348-0.284-1.996l-0.106,0.07C10.403,5.699,10.494,6.347,10.494,7C10.494,7.652,10.403,8.3,10.225,8.926z M8.867,8.376L8.398,8.07l0.018-0.093C8.48,7.654,8.512,7.325,8.512,7S8.48,6.345,8.417,6.022L8.398,5.929l0.469-0.306l0.043,0.2 C8.994,6.211,9.036,6.607,9.036,7c0,0.393-0.042,0.789-0.126,1.176L8.867,8.376z"/>
|
||||
|
|
@ -43,16 +45,25 @@
|
|||
<path id="contacts-shape" fill-rule="evenodd" transform="translate(-79.000000, -59.000000)" d="M91.5000066,69.9765672 C91.5000066,68.2109401 91.0859436,65.4999994 88.7968783,65.4999994 C88.5546906,65.4999994 87.5312518,66.5859382 86,66.5859382 C84.4687482,66.5859382 83.4453095,65.4999994 83.2031217,65.4999994 C80.9140564,65.4999994 80.4999935,68.2109401 80.4999935,69.9765672 C80.4999935,71.2421938 81.3437445,72.0000072 82.5859334,72.0000072 L89.4140666,72.0000072 C90.6562555,72.0000072 91.5000066,71.2421938 91.5000066,69.9765672 L91.5000066,69.9765672 L91.5000066,69.9765672 Z M89.0000036,62.9999964 C89.0000036,61.3437444 87.656252,59.9999928 86,59.9999928 C84.343748,59.9999928 82.9999964,61.3437444 82.9999964,62.9999964 C82.9999964,64.6562484 84.343748,66 86,66 C87.656252,66 89.0000036,64.6562484 89.0000036,62.9999964 L89.0000036,62.9999964 L89.0000036,62.9999964 Z" />
|
||||
<path id="hello-shape" fill-rule="evenodd" transform="translate(-261.000000, -59.000000)" d="M268.273778,60 C264.809073,60 262,62.4730749 262,65.523237 C262,67.0417726 262.697086,68.4174001 263.822897,69.4155754 C263.627626,70.1061164 263.240356,71.0442922 262.474542,71.959559 C262.605451,72.1919211 264.761073,71.3737446 266.2807,70.7617485 C266.907968,70.946111 267.577782,71.046474 268.274868,71.046474 C271.740664,71.046474 274.549737,68.5733991 274.549737,65.523237 C274.549737,62.4730749 271.739573,60 268.274868,60 L268.273778,60 Z M270.15122,63.3119786 C270.609399,63.3119786 270.980306,63.6850671 270.980306,64.1432459 C270.980306,64.6036066 270.609399,64.9756042 270.15122,64.9756042 C269.693041,64.9756042 269.321044,64.6036066 269.321044,64.1432459 C269.321044,63.6850671 269.693041,63.3119786 270.15122,63.3119786 L270.15122,63.3119786 Z M266.36579,63.3119786 C266.823969,63.3119786 267.195966,63.6850671 267.195966,64.1432459 C267.195966,64.6036066 266.823969,64.9756042 266.36579,64.9756042 C265.907611,64.9756042 265.535613,64.6036066 265.535613,64.1432459 C265.535613,63.6850671 265.907611,63.3119786 266.36579,63.3119786 L266.36579,63.3119786 Z M268.283596,69.3675757 L268.258505,69.3664848 L268.233414,69.3675757 C266.557789,69.3675757 264.685801,68.2777646 264.254894,66.4428674 C265.38616,66.9675913 266.967968,67.1966807 268.258505,67.1966807 C269.549042,67.1966807 271.13085,66.9675913 272.262115,66.4428674 C271.8323,68.2777646 269.959221,69.3675757 268.283596,69.3675757 L268.283596,69.3675757 Z" />
|
||||
</defs>
|
||||
|
||||
<use id="audio" xlink:href="#audio-shape"/>
|
||||
<use id="audio-active" xlink:href="#audio-shape"/>
|
||||
<use id="audio-disabled" xlink:href="#audio-shape"/>
|
||||
<use id="audio-still" xlink:href="#audio-shape"/>
|
||||
<use id="audio-white" xlink:href="#audio-shape"/>
|
||||
<use id="contacts" xlink:href="#contacts-shape"/>
|
||||
<use id="contacts-hover" xlink:href="#contacts-shape"/>
|
||||
<use id="contacts-active" xlink:href="#contacts-shape"/>
|
||||
<use id="exit" xlink:href="#exit-shape"/>
|
||||
<use id="exit-active" xlink:href="#exit-shape"/>
|
||||
<use id="exit-white" xlink:href="#exit-shape"/>
|
||||
<use id="facemute" xlink:href="#facemute-shape"/>
|
||||
<use id="facemute-active" xlink:href="#facemute-shape"/>
|
||||
<use id="facemute-disabled" xlink:href="#facemute-shape"/>
|
||||
<use id="facemute-still" xlink:href="#facemute-shape"/>
|
||||
<use id="facemute-white" xlink:href="#facemute-shape"/>
|
||||
<use id="hangup" xlink:href="#hangup-shape"/>
|
||||
<use id="hangup-white" xlink:href="#hangup-shape"/>
|
||||
<use id="hangup-active" xlink:href="#hangup-shape"/>
|
||||
<use id="hangup-disabled" xlink:href="#hangup-shape"/>
|
||||
<use id="hello" xlink:href="#hello-shape"/>
|
||||
|
|
@ -67,13 +78,20 @@
|
|||
<use id="mute" xlink:href="#mute-shape"/>
|
||||
<use id="mute-active" xlink:href="#mute-shape"/>
|
||||
<use id="mute-disabled" xlink:href="#mute-shape"/>
|
||||
<use id="mute-still" xlink:href="#mute-shape"/>
|
||||
<use id="mute-white" xlink:href="#mute-shape"/>
|
||||
<use id="pause" xlink:href="#pause-shape"/>
|
||||
<use id="pause-active" xlink:href="#pause-shape"/>
|
||||
<use id="pause-disabled" xlink:href="#pause-shape"/>
|
||||
<use id="screen-white" xlink:href="#screen-shape"/>
|
||||
<use id="screen-hover" xlink:href="#screen-shape"/>
|
||||
<use id="screen-disabled" xlink:href="#screen-shape"/>
|
||||
<use id="screenmute-white" xlink:href="#screenmute-shape"/>
|
||||
<use id="video" xlink:href="#video-shape"/>
|
||||
<use id="video-white" xlink:href="#video-shape"/>
|
||||
<use id="video-active" xlink:href="#video-shape"/>
|
||||
<use id="video-disabled" xlink:href="#video-shape"/>
|
||||
<use id="video-still" xlink:href="#video-shape"/>
|
||||
<use id="volume" xlink:href="#volume-shape"/>
|
||||
<use id="volume-active" xlink:href="#volume-shape"/>
|
||||
<use id="volume-disabled" xlink:href="#volume-shape"/>
|
||||
|
|
|
|||
|
До Ширина: | Высота: | Размер: 12 KiB После Ширина: | Высота: | Размер: 19 KiB |
|
|
@ -14,7 +14,7 @@
|
|||
fill: #444;
|
||||
}
|
||||
use[id$="-active"] {
|
||||
fill: #0095dd;
|
||||
fill: #5cccee;
|
||||
}
|
||||
use[id$="-red"] {
|
||||
fill: #d74345
|
||||
|
|
@ -28,6 +28,9 @@
|
|||
use[id$="-disabled"] {
|
||||
fill: rgba(255,255,255,.6);
|
||||
}
|
||||
use[id$="-still"] {
|
||||
fill: #00a9dc;
|
||||
}
|
||||
</style>
|
||||
<defs>
|
||||
<polygon id="add-shape" points="16,6.4 9.6,6.4 9.6,0 6.4,0 6.4,6.4 0,6.4 0,9.6 6.4,9.6 6.4,16 9.6,16 9.6,9.6 16,9.6"/>
|
||||
|
|
@ -69,14 +72,6 @@
|
|||
<polygon fill="#fff" points="15.66816,7.77344 9.6,2.27456 9.6,5.6 3.68,5.6 3.68,9.92 9.6,9.92 9.6,13.27232"/>
|
||||
</g>
|
||||
<path id="tour-shape" fill="#5a5a5a" d="M8,0C4.831,0,2.262,2.674,2.262,5.972c0,1.393,1.023,3.398,2.206,5.249l0.571, 0.866C6.504,14.245,8,16,8,16 s1.496-1.755,2.961-3.912l0.571-0.866c1.182-1.852,2.206-3.856,2.206-5.249C13.738,2.674, 11.169,0,8,0z M8,7.645 c-0.603,0-1.146-0.262-1.534-0.681C6.098,6.566,5.87,6.025,5.87,5.428c0-1.224,0.954-2.217, 2.13-2.217s2.13,0.992,2.13,2.217 C10.13,6.653,9.177,7.645,8,7.645z"/>
|
||||
<g id="screen-shape">
|
||||
<path d="M12.199,3.915v-0.4c0-0.837-0.65-1.515-1.452-1.515H2.452C1.65,2,1,2.678,1,3.515v6.242 c0,0.837,0.65,1.515,1.452,1.515h0.514V5.431c0-0.837,0.65-1.515,1.452-1.515H12.199z"/>
|
||||
<path d="M13.548,4.727H5.253c-0.802,0-1.452,0.678-1.452,1.515v6.242c0,0.837,0.65,1.515,1.452, 1.515h8.294 C14.35,14,15,13.322,15,12.485V6.242C15,5.406,14.35,4.727,13.548,4.727z"/>
|
||||
</g>
|
||||
<g id="screenmute-shape">
|
||||
<path fill-rule="evenodd" d="M13.55,4.73h-0.54l-8.13,8.13L4.2,13.53 C4.46,13.82,4.84,14,5.25,14h8.3c0.8,0,1.45-0.68,1.45-1.52V6.24C15,5.41,14.35,4.73,13.55,4.73z"/>
|
||||
<path fill-rule="evenodd" d="M14.21,2.72l-0.99-0.99l-1.15,1.15C11.83,2.36,11.33,2,10.75,2 h-8.3C1.65,2,1,2.68,1,3.52v6.24c0,0.83,0.65,1.51,1.45,1.51h0.52V5.43c0-0.84,0.65-1.51,1.45-1.51h6.61l-0.81, 0.81H5.25 c-0.8,0-1.45,0.68-1.45,1.51v4.91l-1.89,1.89l0.99,0.99l1-1l8.3-8.3L14.21,2.72z"/>
|
||||
</g>
|
||||
<g id="delete-shape">
|
||||
<path fill="#ccc" d="M14.191,4.579c0-1.149-0.832-2.08-1.857-2.08h-0.902V1.997C11.432,0.894,10.633,0,9.648,0H6.352 C5.367,0,4.568,0.894,4.568,1.997v0.502H3.666c-1.026,0-1.857,0.932-1.857,2.08v1.389h1.064l0.785,8.416 C3.742,15.29,4.499,16,5.383,16h5.231c0.883,0,1.64-0.709,1.724-1.614l0.788-8.417h1.064V4.579z M5.535,2.218V2.065 c0-0.58,0.42-1.05,0.938-1.05h3.055c0.518,0,0.937,0.47,0.937,1.05v0.153c0,0.098-0.016,0.191-0.038,0.281H5.573 C5.55,2.409,5.535,2.316,5.535,2.218z M11.184,14.277c-0.029,0.305-0.29,0.562-0.57,0.562H5.383c-0.281,0-0.541-0.257-0.57-0.562 L4.038,5.969h7.924L11.184,14.277z"/>
|
||||
<rect x="7.612" y="7.291" fill="#ccc" width="0.774" height="6.191"/>
|
||||
|
|
@ -93,8 +88,6 @@
|
|||
<use id="add-hover" xlink:href="#add-shape"/>
|
||||
<use id="add-active" xlink:href="#add-shape"/>
|
||||
<use id="audio" xlink:href="#audio-shape"/>
|
||||
<use id="audio-hover" xlink:href="#audio-shape"/>
|
||||
<use id="audio-active" xlink:href="#audio-shape"/>
|
||||
<use id="block" xlink:href="#block-shape"/>
|
||||
<use id="block-red" xlink:href="#block-shape"/>
|
||||
<use id="block-hover" xlink:href="#block-shape"/>
|
||||
|
|
@ -124,12 +117,7 @@
|
|||
<use id="unblock-hover" xlink:href="#unblock-shape"/>
|
||||
<use id="unblock-active" xlink:href="#unblock-shape"/>
|
||||
<use id="video" xlink:href="#video-shape"/>
|
||||
<use id="video-hover" xlink:href="#video-shape"/>
|
||||
<use id="video-active" xlink:href="#video-shape"/>
|
||||
<use id="tour" xlink:href="#tour-shape"/>
|
||||
<use id="screen-white" xlink:href="#screen-shape"/>
|
||||
<use id="screen-disabled" xlink:href="#screen-shape"/>
|
||||
<use id="screenmute-white" xlink:href="#screenmute-shape"/>
|
||||
<use id="delete" xlink:href="#delete-shape"/>
|
||||
<use id="status-available" xlink:href="#status-available-shape"/>
|
||||
<use id="status-unavailable" xlink:href="#status-unavailable-shape"/>
|
||||
|
|
|
|||
|
До Ширина: | Высота: | Размер: 74 KiB После Ширина: | Высота: | Размер: 73 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg width="31" height="24" viewBox="0 0 31 24" xmlns="http://www.w3.org/2000/svg"><g fill="none"><path d="M19.002 11.5c0-.273-.226-.5-.5-.5-.273 0-.5.226-.5.5v1c0 1.93-1.57 3.5-3.5 3.5s-3.5-1.57-3.5-3.5v-1c0-.273-.226-.5-.5-.5-.273 0-.5.226-.5.5v1c0 2.312 1.75 4.219 4 4.468v1.031h-2c-.273 0-.5.226-.5.5 0 .273.226.5.5.5h5c.273 0 .5-.226.5-.5 0-.273-.226-.5-.5-.5h-2v-1.031c2.25-.25 4-2.156 4-4.468v-1zm-2-2.999c0-1.375-1.125-2.5-2.5-2.5s-2.5 1.125-2.5 2.5v4c0 1.375 1.125 2.5 2.5 2.5s2.5-1.125 2.5-2.5v-4z" fill="#fff"/></g></svg>
|
||||
|
После Ширина: | Высота: | Размер: 532 B |
|
|
@ -0,0 +1 @@
|
|||
<svg width="31" height="24" viewBox="0 0 31 24" xmlns="http://www.w3.org/2000/svg"><path d="M9.07 17.683l.644.644c.056.042.112.07.182.07.071 0 .126-.027.182-.07l1.975-1.989c.574.35 1.191.56 1.849.63v1.037h-2.003c-.14 0-.252.042-.35.154-.098.098-.154.21-.154.336 0 .14.056.252.154.35.098.098.21.154.35.154h5.001c.14 0 .252-.056.35-.154.098-.098.154-.21.154-.35 0-.126-.056-.238-.154-.336-.098-.112-.21-.154-.35-.154h-2.003v-1.037c1.135-.126 2.088-.602 2.858-1.457.771-.855 1.149-1.864 1.149-3.012v-.995c0-.14-.056-.252-.154-.35-.098-.098-.21-.154-.336-.154-.14 0-.252.056-.35.154-.098.098-.154.21-.154.35v.995c0 .967-.35 1.793-1.037 2.48-.687.687-1.513 1.022-2.465 1.022-.574 0-1.107-.126-1.611-.392l.757-.756c.28.098.56.154.854.154.687 0 1.274-.252 1.765-.743.49-.491.728-1.078.728-1.765v-.995l2.83-2.83c.042-.042.07-.112.07-.182 0-.056-.028-.126-.07-.168l-.644-.644c-.056-.056-.112-.084-.182-.084-.07 0-.126.028-.182.084l-9.652 9.637c-.042.056-.07.112-.07.182 0 .07.028.126.07.182zm1.149-3.502l.784-.798c-.07-.308-.112-.602-.112-.882v-.995c0-.14-.056-.252-.154-.35-.098-.098-.21-.154-.336-.154-.14 0-.252.056-.35.154-.098.098-.154.21-.154.35v.995c0 .574.112 1.135.323 1.681zm6.542-6.527c-.182-.491-.491-.882-.911-1.191-.434-.308-.911-.462-1.443-.462-.701 0-1.289.238-1.779.728-.49.491-.728 1.079-.728 1.765v4.007l4.861-4.847z" fill="#fff"/></svg>
|
||||
|
После Ширина: | Высота: | Размер: 1.3 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg width="31" height="24" viewBox="0 0 31 24" xmlns="http://www.w3.org/2000/svg"><g fill="none"><path d="M9.07 17.683l.644.644c.056.042.112.07.182.07.071 0 .126-.027.182-.07l1.975-1.989c.574.35 1.191.56 1.849.63v1.037h-2.003c-.14 0-.252.042-.35.154-.098.098-.154.21-.154.336 0 .14.056.252.154.35.098.098.21.154.35.154h5.001c.14 0 .252-.056.35-.154.098-.098.154-.21.154-.35 0-.126-.056-.238-.154-.336-.098-.112-.21-.154-.35-.154h-2.003v-1.037c1.135-.126 2.088-.602 2.858-1.457.771-.855 1.149-1.864 1.149-3.012v-.995c0-.14-.056-.252-.154-.35-.098-.098-.21-.154-.336-.154-.14 0-.252.056-.35.154-.098.098-.154.21-.154.35v.995c0 .967-.35 1.793-1.037 2.48-.687.687-1.513 1.022-2.465 1.022-.574 0-1.107-.126-1.611-.392l.757-.756c.28.098.56.154.854.154.687 0 1.274-.252 1.765-.743.49-.491.728-1.078.728-1.765v-.995l2.83-2.83c.042-.042.07-.112.07-.182 0-.056-.028-.126-.07-.168l-.644-.644c-.056-.056-.112-.084-.182-.084-.07 0-.126.028-.182.084l-9.652 9.637c-.042.056-.07.112-.07.182 0 .07.028.126.07.182zm1.149-3.502l.784-.798c-.07-.308-.112-.602-.112-.882v-.995c0-.14-.056-.252-.154-.35-.098-.098-.21-.154-.336-.154-.14 0-.252.056-.35.154-.098.098-.154.21-.154.35v.995c0 .574.112 1.135.323 1.681zm6.542-6.527c-.182-.491-.491-.882-.911-1.191-.434-.308-.911-.462-1.443-.462-.701 0-1.289.238-1.779.728-.49.491-.728 1.079-.728 1.765v4.007l4.861-4.847z" fill="#00A9DC"/></g></svg>
|
||||
|
После Ширина: | Высота: | Размер: 1.3 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg width="31" height="24" viewBox="0 0 31 24" xmlns="http://www.w3.org/2000/svg"><g fill="none"><path d="M19.002 11.5c0-.273-.226-.5-.5-.5-.273 0-.5.226-.5.5v1c0 1.93-1.57 3.5-3.5 3.5s-3.5-1.57-3.5-3.5v-1c0-.273-.226-.5-.5-.5-.273 0-.5.226-.5.5v1c0 2.312 1.75 4.219 4 4.468v1.031h-2c-.273 0-.5.226-.5.5 0 .273.226.5.5.5h5c.273 0 .5-.226.5-.5 0-.273-.226-.5-.5-.5h-2v-1.031c2.25-.25 4-2.156 4-4.468v-1zm-2-2.999c0-1.375-1.125-2.5-2.5-2.5s-2.5 1.125-2.5 2.5v4c0 1.375 1.125 2.5 2.5 2.5s2.5-1.125 2.5-2.5v-4z" fill="#00A9DC"/></g></svg>
|
||||
|
После Ширина: | Высота: | Размер: 535 B |
|
|
@ -0,0 +1,10 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg width="67px" height="28px" viewBox="0 0 67 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<defs></defs>
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<path d="M2,14 C2,7.372583 7.37049212,2 13.9962035,2 L52.9937982,2 C59.6191184,2 64.9900017,7.37112582 64.9900017,14 C64.9900017,20.627417 59.6195096,26 52.9937982,26 L13.9962035,26 C7.37088326,26 2,20.6288742 2,14 Z M32.994984,7.28907739 L32.994984,21.2024677 L33.9950177,21.2024677 L33.9950177,7.28907739 L32.994984,7.28907739 Z" id="Rectangle-1264" fill-opacity="0.95" fill="#FFFFFF"></path>
|
||||
<path d="M2,14 L2,14 C2,20.6288742 7.37173577,26 13.9981077,26 L53.0018923,26 C59.6286554,26 65,20.627417 65,14 L65,14 C65,7.37112582 59.6282642,2 53.0018923,2 L13.9981077,2 C7.37134457,2 2,7.372583 2,14 L2,14 Z M0,14 L0,14 C0,6.26795905 6.26682948,0 13.9981077,0 L53.0018923,0 C60.73337,0 67,6.26709264 67,14 C67,21.7320409 60.7331705,28 53.0018923,28 L13.9981077,28 C6.26662998,28 0,21.7329074 0,14 L0,14 Z" id="Shape" fill-opacity="0.2" fill="#000000"></path>
|
||||
<path d="M14.5056409,19.4029285 L18.9833396,19.4029285 C19.5376264,19.4029285 20.0166604,19.2013186 20.4075253,18.8104537 C20.8113066,18.407234 21,17.9405548 21,17.3733515 L21,16.2136735 L23.8360165,19.04969 C23.9247473,19.1384208 24.0252714,19.1760472 24.1516286,19.1760472 C24.2145264,19.1760472 24.2650693,19.1636922 24.3279671,19.1384208 C24.517222,19.0626065 24.6053912,18.9238944 24.6053912,18.7222845 L24.6053912,11.0706559 C24.6053912,10.8819625 24.517222,10.7432504 24.3279671,10.6550812 C24.2650693,10.6421647 24.2145264,10.6298098 24.1516286,10.6298098 C24.0252714,10.6298098 23.9247473,10.6674361 23.8360165,10.7556054 L21,13.5792669 L21,12.9085694 L22.8301248,11.0784446 C22.8719395,11.0366299 22.900024,10.9667307 22.900024,10.8962074 C22.900024,10.8406625 22.8719395,10.7701392 22.8301248,10.7283245 L22.1860538,10.0842535 C22.1298848,10.0280845 22.0737158,10 22.0038166,10 C21.9339174,10 21.8777484,10.0280845 21.8215795,10.0842535 L12.1698752,19.7216035 C12.1280605,19.7777724 12.099976,19.8339414 12.099976,19.9038406 C12.099976,19.9737398 12.1280605,20.0299088 12.1698752,20.0860778 L12.8139462,20.7301488 C12.8701152,20.7725876 12.9262842,20.800048 12.9961834,20.800048 C13.0667067,20.800048 13.1222516,20.7725876 13.1784205,20.7301488 L14.5056409,19.4029285 Z M19.454018,10.4528944 C19.3038986,10.4193577 19.1468952,10.4029285 18.9833396,10.4029285 L14.0295769,10.4029285 C13.4623736,10.4029285 12.9956945,10.5916218 12.5924747,10.9954032 C12.2016099,11.386268 12,11.8647405 12,12.4195889 L12,17.3733515 C12,17.5387368 12.0171407,17.6955757 12.0511158,17.8447868 L19.454018,10.4528944 L19.454018,10.4528944 Z" id="Fill-83-Copy-3" fill="#00A9DC"></path>
|
||||
<path d="M42.0698992,19.6831493 L42.7139702,20.3272204 C42.7701392,20.3696591 42.8263082,20.3971195 42.8962074,20.3971195 C42.9667307,20.3971195 43.0222756,20.3696591 43.0784446,20.3272204 L45.0537206,18.3382141 C45.6278925,18.6883341 46.2445031,18.8986558 46.9029285,18.968555 L46.9029285,20.0051848 L44.8995679,20.0051848 C44.7597696,20.0051848 44.6474316,20.0469995 44.5494479,20.1593375 C44.4514642,20.2573212 44.3952952,20.3696591 44.3952952,20.4957273 C44.3952952,20.6355257 44.4514642,20.7478637 44.5494479,20.8458473 C44.6474316,20.943831 44.7597696,21 44.8995679,21 L49.9004801,21 C50.0402784,21 50.1526164,20.943831 50.2506001,20.8458473 C50.3485838,20.7478637 50.4047528,20.6355257 50.4047528,20.4957273 C50.4047528,20.3696591 50.3485838,20.2573212 50.2506001,20.1593375 C50.1526164,20.0469995 50.0402784,20.0051848 49.9004801,20.0051848 L47.8971195,20.0051848 L47.8971195,18.968555 C49.0317331,18.8424868 49.9847336,18.3662986 50.7548728,17.5119059 C51.5256361,16.6568891 51.9038406,15.6483437 51.9038406,14.5 L51.9038406,13.5051848 C51.9038406,13.3653865 51.8476716,13.2530485 51.749688,13.1550648 C51.6517043,13.0570811 51.5393663,13.0009121 51.4132981,13.0009121 C51.2734998,13.0009121 51.1611618,13.0570811 51.0631781,13.1550648 C50.9651944,13.2530485 50.9090254,13.3653865 50.9090254,13.5051848 L50.9090254,14.5 C50.9090254,15.4667307 50.5589054,16.2930389 49.8723956,16.9795487 C49.1858857,17.6660586 48.3595775,18.0018243 47.4072012,18.0018243 C46.8330293,18.0018243 46.300048,17.8757561 45.7957753,17.6098896 L46.5528084,16.8534806 C46.8330293,16.9514642 47.112626,17.0076332 47.4072012,17.0076332 C48.093711,17.0076332 48.6816131,16.7554969 49.1721555,16.2649544 C49.6620739,15.7744119 49.9004801,15.1865098 49.9004801,14.5 L49.9004801,13.5051848 L52.7301488,10.6755161 C52.7719635,10.6337014 52.800048,10.5638022 52.800048,10.4932789 C52.800048,10.437734 52.7719635,10.3672108 52.7301488,10.3253961 L52.0860778,9.68132501 C52.0299088,9.62515602 51.9737398,9.59707153 51.9038406,9.59707153 C51.8339414,9.59707153 51.7777724,9.62515602 51.7216035,9.68132501 L42.0698992,19.318675 C42.0280845,19.374844 42,19.431013 42,19.5009121 C42,19.5708113 42.0280845,19.6269803 42.0698992,19.6831493 L42.0698992,19.6831493 Z M43.218867,16.1807009 L44.0027364,15.3824772 C43.9328373,15.0741719 43.8910226,14.7802208 43.8910226,14.5 L43.8910226,13.5051848 C43.8910226,13.3653865 43.8348536,13.2530485 43.7368699,13.1550648 C43.6388862,13.0570811 43.5265482,13.0009121 43.4004801,13.0009121 C43.2606817,13.0009121 43.1483437,13.0570811 43.0503601,13.1550648 C42.9523764,13.2530485 42.8962074,13.3653865 42.8962074,13.5051848 L42.8962074,14.5 C42.8962074,15.0741719 43.0085454,15.6346135 43.218867,16.1807009 L43.218867,16.1807009 Z M49.7606817,9.65324052 C49.5784446,9.16269803 49.2701392,8.77076332 48.85012,8.46245799 C48.4157465,8.15415266 47.9395583,8 47.4072012,8 C46.706337,8 46.1184349,8.23840614 45.6278925,8.72832453 C45.1379741,9.21886702 44.8995679,9.80739318 44.8995679,10.4932789 L44.8995679,14.5 L49.7606817,9.65324052 L49.7606817,9.65324052 Z" id="Fill-90-Copy-2" fill="#00A9DC"></path>
|
||||
</g>
|
||||
</svg>
|
||||
|
После Ширина: | Высота: | Размер: 5.8 KiB |
|
|
@ -0,0 +1,10 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg width="67px" height="28px" viewBox="0 0 67 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<defs></defs>
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="Rectangle-1264-+-Shape">
|
||||
<path d="M2,14 C2,7.372583 7.37049212,2 13.9962035,2 L52.9937982,2 C59.6191184,2 64.9900017,7.37112582 64.9900017,14 C64.9900017,20.627417 59.6195096,26 52.9937982,26 L13.9962035,26 C7.37088326,26 2,20.6288742 2,14 Z M32.994984,7.28907739 L32.994984,21.2024677 L33.9950177,21.2024677 L33.9950177,7.28907739 L32.994984,7.28907739 Z" id="Rectangle-1264" opacity="0.95" fill="#FFFFFF"></path>
|
||||
<path d="M2,14 L2,14 C2,20.6288742 7.37173577,26 13.9981077,26 L53.0018923,26 C59.6286554,26 65,20.627417 65,14 L65,14 C65,7.37112582 59.6282642,2 53.0018923,2 L13.9981077,2 C7.37134457,2 2,7.372583 2,14 L2,14 Z M0,14 L0,14 C0,6.26795905 6.26682948,0 13.9981077,0 L53.0018923,0 C60.73337,0 67,6.26709264 67,14 C67,21.7320409 60.7331705,28 53.0018923,28 L13.9981077,28 C6.26662998,28 0,21.7329074 0,14 L0,14 Z" id="Shape" fill-opacity="0.2" fill="#4A4A4A"></path>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
После Ширина: | Высота: | Размер: 1.2 KiB |
|
|
@ -0,0 +1,8 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg width="67px" height="28px" viewBox="0 0 67 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<defs></defs>
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<path d="M2,14 C2,7.372583 7.37049212,2 13.9962035,2 L52.9937982,2 C59.6191184,2 64.9900017,7.37112582 64.9900017,14 C64.9900017,20.627417 59.6195096,26 52.9937982,26 L13.9962035,26 C7.37088326,26 2,20.6288742 2,14 Z M32.994984,7.28907739 L32.994984,21.2024677 L33.9950177,21.2024677 L33.9950177,7.28907739 L32.994984,7.28907739 Z" id="Rectangle-1264" opacity="0.95" fill="#5CCCEE"></path>
|
||||
<path d="M2,14 L2,14 C2,20.6288742 7.37173577,26 13.9981077,26 L53.0018923,26 C59.6286554,26 65,20.627417 65,14 L65,14 C65,7.37112582 59.6282642,2 53.0018923,2 L13.9981077,2 C7.37134457,2 2,7.372583 2,14 L2,14 Z M0,14 L0,14 C0,6.26795905 6.26682948,0 13.9981077,0 L53.0018923,0 C60.73337,0 67,6.26709264 67,14 C67,21.7320409 60.7331705,28 53.0018923,28 L13.9981077,28 C6.26662998,28 0,21.7329074 0,14 L0,14 Z" id="Shape" fill-opacity="0.2" fill="#000000"></path>
|
||||
</g>
|
||||
</svg>
|
||||
|
После Ширина: | Высота: | Размер: 1.2 KiB |
|
|
@ -0,0 +1,9 @@
|
|||
<svg width="28" height="28" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
|
||||
|
||||
<g>
|
||||
<title>Layer 1</title>
|
||||
<rect rx="40" height="24" width="24" y="2.1" x="2" fill="#D74345" opacity="0.95" id="Rectangle-1264-Copy"/>
|
||||
<path fill="#000000" fill-opacity="0.2" id="Shape" d="m2,14.1l0,0c0,6.62887 5.37258,12 12,12l0,0c6.62887,0 12,-5.37258 12,-12l0,0c0,-6.62887 -5.37258,-12 -12,-12l0,0c-6.62887,0 -12,5.37258 -12,12l0,0zm-2,0l0,0c0,-7.73245 6.26702,-14 14,-14c7.73245,0 14,6.26702 14,14c0,7.73245 -6.267019,14 -14,14c-7.73245,0 -14,-6.267019 -14,-14l0,0z"/>
|
||||
<path fill="#FFFFFF" id="Shape" d="m14.726974,11.994536l-3.000204,0c-0.556093,0 -0.999815,0.451912 -0.999815,1.009375l0,1.98127c0,0.56602 0.447632,1.00937 0.999815,1.00937l3.000204,0l0,1.00297c0,0.543991 0.34978,0.717209 0.78125,0.37203l3.4375,-2.750002c0.43758,-0.350061 0.431469,-0.904824 0,-1.250006l-3.4375,-2.750013c-0.43758,-0.350061 -0.78125,-0.178611 -0.78125,0.372032l0,1.002975zm-6.000027,-2.00001l5.000022,0l0,1.000005l-4.000019,0l0,6.000019l4.000019,0l0,1.01l-5.000022,0l0,-8.010024z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
После Ширина: | Высота: | Размер: 1.1 KiB |
|
|
@ -0,0 +1,5 @@
|
|||
<svg width="34px" height="28px" viewBox="0 0 34 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<path fill="#5CCCEE" opacity="0.95" id="Rectangle-1264" d="m2,14c0,-6.62742 5.37049,-12 11.9962,-12l19.9976,0.1l-0.00368,12l0.00988,11.9l-20.0038,0c-6.62532,0 -11.9962,-5.37113 -11.9962,-12zm30.99498,-6.71092l0,13.91339l1.00004,0l0,-13.91339l-1.00004,0z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
После Ширина: | Высота: | Размер: 506 B |
|
|
@ -0,0 +1,5 @@
|
|||
<svg width="33px" height="28px" viewBox="0 0 33 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<path fill="#5CCCEE" opacity="0.95" id="Rectangle-1264" d="m0.00391,13l-0.0038,-11l19.9976,0c6.62532,0 11.99621,5.37113 11.99621,12c0,6.62742 -5.3705,12 -11.99621,12l-19.9976,0l0.0038,-13zm-0.00502,-5.71092l0,13.91339l1.00004,0l0,-13.91339l-1.00004,0z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
После Ширина: | Высота: | Размер: 498 B |
|
|
@ -0,0 +1,10 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg width="67px" height="28px" viewBox="0 0 67 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<defs></defs>
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="Rectangle-1264-+-Shape">
|
||||
<path d="M2,14 C2,7.372583 7.37049212,2 13.9962035,2 L52.9937982,2 C59.6191184,2 64.9900017,7.37112582 64.9900017,14 C64.9900017,20.627417 59.6195096,26 52.9937982,26 L13.9962035,26 C7.37088326,26 2,20.6288742 2,14 Z M32.994984,7.28907739 L32.994984,21.2024677 L33.9950177,21.2024677 L33.9950177,7.28907739 L32.994984,7.28907739 Z" id="Rectangle-1264" opacity="0.95" fill="#FFFFFF"></path>
|
||||
<path d="M2,14 L2,14 C2,20.6288742 7.37173577,26 13.9981077,26 L53.0018923,26 C59.6286554,26 65,20.627417 65,14 L65,14 C65,7.37112582 59.6282642,2 53.0018923,2 L13.9981077,2 C7.37134457,2 2,7.372583 2,14 L2,14 Z M0,14 L0,14 C0,6.26795905 6.26682948,0 13.9981077,0 L53.0018923,0 C60.73337,0 67,6.26709264 67,14 C67,21.7320409 60.7331705,28 53.0018923,28 L13.9981077,28 C6.26662998,28 0,21.7329074 0,14 L0,14 Z" id="Shape" fill-opacity="0.2" fill="#4A4A4A"></path>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
После Ширина: | Высота: | Размер: 1.2 KiB |
|
|
@ -0,0 +1,9 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg width="28px" height="28px" viewBox="0 0 28 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<defs></defs>
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<rect id="Rectangle-1264-Copy-2" opacity="0.95" fill="#5CCCEE" x="2" y="2" width="24" height="24" rx="40"></rect>
|
||||
<path d="M2,14 L2,14 C2,20.6288742 7.372583,26 14,26 L14,26 C20.6288742,26 26,20.627417 26,14 L26,14 C26,7.37112582 20.627417,2 14,2 L14,2 C7.37112582,2 2,7.372583 2,14 L2,14 Z M0,14 L0,14 C0,6.26754774 6.26702203,0 14,0 C21.7324523,0 28,6.26702203 28,14 C28,21.7324523 21.732978,28 14,28 C6.26754774,28 0,21.732978 0,14 L0,14 Z" id="Shape" fill-opacity="0.2" fill="#000000"></path>
|
||||
<path d="M16,14 C16,15.1015625 15.1015625,16 14,16 C12.8984375,16 12,15.1015625 12,14 C12,12.8984375 12.8984375,12 14,12 C15.1015625,12 16,12.8984375 16,14 L16,14 Z M20,13.1484375 C20,13.015625 19.90625,12.890625 19.7734375,12.8671875 L18.34375,12.6484375 C18.265625,12.390625 18.15625,12.1328125 18.0234375,11.8828125 C18.2890625,11.515625 18.578125,11.171875 18.84375,10.8125 C18.8828125,10.7578125 18.90625,10.703125 18.90625,10.6328125 C18.90625,10.5703125 18.890625,10.5078125 18.8515625,10.4609375 C18.5234375,10 17.9765625,9.515625 17.5625,9.1328125 C17.5078125,9.0859375 17.4375,9.0546875 17.3671875,9.0546875 C17.296875,9.0546875 17.2265625,9.078125 17.1796875,9.125 L16.0703125,9.9609375 C15.84375,9.84375 15.609375,9.75 15.3671875,9.671875 L15.1484375,8.234375 C15.1328125,8.1015625 15.0078125,8 14.8671875,8 L13.1328125,8 C12.9921875,8 12.8828125,8.09375 12.8515625,8.21875 C12.7265625,8.6875 12.6796875,9.1953125 12.625,9.671875 C12.3828125,9.75 12.140625,9.8515625 11.9140625,9.96875 L10.8359375,9.1328125 C10.7734375,9.0859375 10.703125,9.0546875 10.6328125,9.0546875 C10.3671875,9.0546875 9.3125,10.1953125 9.125,10.453125 C9.0859375,10.5078125 9.0546875,10.5625 9.0546875,10.6328125 C9.0546875,10.703125 9.0859375,10.765625 9.1328125,10.8203125 C9.421875,11.171875 9.703125,11.5234375 9.96875,11.8984375 C9.84375,12.1328125 9.7421875,12.3671875 9.6640625,12.6171875 L8.2109375,12.8359375 C8.09375,12.859375 8,13 8,13.1171875 L8,14.8515625 C8,14.984375 8.09375,15.109375 8.2265625,15.1328125 L9.65625,15.34375 C9.734375,15.609375 9.84375,15.8671875 9.9765625,16.1171875 C9.7109375,16.484375 9.421875,16.828125 9.15625,17.1875 C9.1171875,17.2421875 9.09375,17.296875 9.09375,17.3671875 C9.09375,17.4296875 9.109375,17.4921875 9.1484375,17.546875 C9.4765625,18 10.0234375,18.484375 10.4375,18.859375 C10.4921875,18.9140625 10.5625,18.9453125 10.6328125,18.9453125 C10.703125,18.9453125 10.7734375,18.921875 10.828125,18.875 L11.9296875,18.0390625 C12.15625,18.15625 12.390625,18.25 12.6328125,18.328125 L12.8515625,19.765625 C12.8671875,19.8984375 12.9921875,20 13.1328125,20 L14.8671875,20 C15.0078125,20 15.1171875,19.90625 15.1484375,19.78125 C15.2734375,19.3125 15.3203125,18.8046875 15.375,18.328125 C15.6171875,18.25 15.859375,18.1484375 16.0859375,18.03125 L17.1640625,18.875 C17.2265625,18.9140625 17.296875,18.9453125 17.3671875,18.9453125 C17.6328125,18.9453125 18.6875,17.796875 18.875,17.546875 C18.921875,17.4921875 18.9453125,17.4375 18.9453125,17.3671875 C18.9453125,17.296875 18.9140625,17.2265625 18.8671875,17.171875 C18.578125,16.8203125 18.296875,16.4765625 18.03125,16.09375 C18.15625,15.8671875 18.25,15.6328125 18.3359375,15.3828125 L19.78125,15.1640625 C19.90625,15.140625 20,15 20,14.8828125 L20,13.1484375 Z" id="-2-copy" fill="#FFFFFF"></path>
|
||||
</g>
|
||||
</svg>
|
||||
|
После Ширина: | Высота: | Размер: 3.5 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg width="28" height="28" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg"><g fill="none"><rect opacity=".95" fill="#fff" x="2" y="2" width="24" height="24" rx="40"/><path d="M2 14c0 6.629 5.373 12 12 12 6.629 0 12-5.373 12-12 0-6.629-5.373-12-12-12-6.629 0-12 5.373-12 12zm-2 0c0-7.732 6.267-14 14-14 7.732 0 14 6.267 14 14 0 7.732-6.267 14-14 14-7.732 0-14-6.267-14-14z" fill-opacity=".2" fill="#000"/><path d="M16 14c0 1.102-.898 2-2 2-1.102 0-2-.898-2-2 0-1.102.898-2 2-2 1.102 0 2 .898 2 2zm4-.852c0-.133-.094-.258-.227-.281l-1.43-.219c-.078-.258-.188-.516-.32-.766l.82-1.07c.039-.055.063-.109.063-.18 0-.063-.016-.125-.055-.172-.328-.461-.875-.945-1.289-1.328-.055-.047-.125-.078-.195-.078s-.141.023-.188.07l-1.109.836c-.227-.117-.461-.211-.703-.289l-.219-1.438c-.016-.133-.141-.234-.281-.234h-1.734c-.141 0-.25.094-.281.219-.125.469-.172.977-.227 1.453-.242.078-.484.18-.711.297l-1.078-.836c-.063-.047-.133-.078-.203-.078-.266 0-1.32 1.141-1.508 1.398-.039.055-.07.109-.07.18 0 .07.031.133.078.188.289.352.57.703.836 1.078-.125.234-.227.469-.305.719l-1.453.219c-.117.023-.211.164-.211.281v1.734c0 .133.094.258.227.281l1.43.211c.078.266.188.523.32.773l-.82 1.07c-.039.055-.063.109-.063.18 0 .063.016.125.055.18.328.453.875.938 1.289 1.313.055.055.125.086.195.086s.141-.023.195-.07l1.102-.836c.227.117.461.211.703.289l.219 1.438c.016.133.141.234.281.234h1.734c.141 0 .25-.094.281-.219.125-.469.172-.977.227-1.453.242-.078.484-.18.711-.297l1.078.844c.063.039.133.07.203.07.266 0 1.32-1.148 1.508-1.398.047-.055.07-.109.07-.18 0-.07-.031-.141-.078-.195-.289-.352-.57-.695-.836-1.078.125-.227.219-.461.305-.711l1.445-.219c.125-.023.219-.164.219-.281v-1.734z" fill="#4A4A4A"/></g></svg>
|
||||
|
После Ширина: | Высота: | Размер: 1.7 KiB |
|
|
@ -0,0 +1,10 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg width="28px" height="28px" viewBox="0 0 28 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<defs></defs>
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<rect id="Rectangle-1264-Copy" opacity="0.95" fill="#5CCCEE" x="2" y="2" width="24" height="24" rx="40"></rect>
|
||||
<path d="M2,14 L2,14 C2,20.6288742 7.372583,26 14,26 L14,26 C20.6288742,26 26,20.627417 26,14 L26,14 C26,7.37112582 20.627417,2 14,2 L14,2 C7.37112582,2 2,7.372583 2,14 L2,14 Z M0,14 L0,14 C0,6.26754774 6.26702203,0 14,0 C21.7324523,0 28,6.26702203 28,14 C28,21.7324523 21.732978,28 14,28 C6.26754774,28 0,21.732978 0,14 L0,14 Z" id="Shape" fill-opacity="0.2" fill="#000000"></path>
|
||||
<rect id="Rectangle-170-Copy-4" fill="#FFFFFF" x="11" y="12" width="9" height="7" rx="1"></rect>
|
||||
<path d="M17,11 L17,10.0029293 C17,9.43788135 16.553384,9 16.0024554,9 L8.99754465,9 C8.4463114,9 8,9.44902676 8,10.0029293 L8,14.9970707 C8,15.5621186 8.44661595,16 8.99754465,16 L10,16 L10,12.0029293 C10,11.4490268 10.4463114,11 10.9975446,11 L17,11 Z" id="Rectangle-170-Copy" fill="#FFFFFF"></path>
|
||||
</g>
|
||||
</svg>
|
||||
|
После Ширина: | Высота: | Размер: 1.2 KiB |
|
|
@ -0,0 +1,9 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg width="28px" height="28px" viewBox="0 0 28 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<defs></defs>
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<rect id="Rectangle-1264-Copy" opacity="0.95" fill="#FFFFFF" x="2" y="2" width="24" height="24" rx="40"></rect>
|
||||
<path d="M2,14 L2,14 C2,20.6288742 7.372583,26 14,26 L14,26 C20.6288742,26 26,20.627417 26,14 L26,14 C26,7.37112582 20.627417,2 14,2 L14,2 C7.37112582,2 2,7.372583 2,14 L2,14 Z M0,14 L0,14 C0,6.26754774 6.26702203,0 14,0 C21.7324523,0 28,6.26702203 28,14 C28,21.7324523 21.732978,28 14,28 C6.26754774,28 0,21.732978 0,14 L0,14 Z" id="Shape" fill-opacity="0.2" fill="#000000"></path>
|
||||
<path d="M16.4994509,12 L11.9975446,12 C11.4463114,12 11,12.4490268 11,13.0029293 L11,17.491272 L16.4994509,12 Z M11.1367161,19.3689248 C11.1138915,19.40931 11.099976,19.4517095 11.099976,19.5009121 C11.099976,19.5708113 11.1280605,19.6269803 11.1698752,19.6831493 L11.8139462,20.3272204 C11.8701152,20.3696591 11.9262842,20.3971195 11.9961834,20.3971195 C12.0667067,20.3971195 12.1222516,20.3696591 12.1784205,20.3272204 L13.5056409,19 L19.0024554,19 C19.5536886,19 20,18.5509732 20,17.9970707 L20,13.0029293 C20,12.8551278 19.9694422,12.716027 19.9144529,12.591188 L21.8301248,10.6755161 C21.8719395,10.6337014 21.900024,10.5638022 21.900024,10.4932789 C21.900024,10.437734 21.8719395,10.3672108 21.8301248,10.3253961 L21.1860538,9.68132501 C21.1298848,9.62515602 21.0737158,9.59707153 21.0038166,9.59707153 C20.9339174,9.59707153 20.8777484,9.62515602 20.8215795,9.68132501 L19.8517551,10.6497071 C19.8450712,10.6591494 19.8378312,10.6678097 19.8301248,10.6755161 L11.1367161,19.3689248 Z M17.001,11 L17.001,10.003 C17.001,9.438 16.554,9 16.003,9 L8.998,9 C8.447,9 8,9.449 8,10.003 L8,14.997 C8,15.562 8.447,16 8.998,16 L10,16 L10,12.003 C10,11.449 10.446,11 10.998,11 L17,11 L17.001,11 Z" id="Shape-Copy-3" fill="#4A4A4A"></path>
|
||||
</g>
|
||||
</svg>
|
||||
|
После Ширина: | Высота: | Размер: 2.0 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg width="28" height="28" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg"><g fill="none"><rect opacity=".95" fill="#fff" x="2" y="2" width="24" height="24" rx="40"/><path d="M2 14c0 6.629 5.373 12 12 12 6.629 0 12-5.373 12-12 0-6.629-5.373-12-12-12-6.629 0-12 5.373-12 12zm-2 0c0-7.732 6.267-14 14-14 7.732 0 14 6.267 14 14 0 7.732-6.267 14-14 14-7.732 0-14-6.267-14-14z" fill-opacity=".2" fill="#000"/><rect fill="#4A4A4A" x="11" y="12" width="9" height="7" rx="1"/><path d="M17 11v-.997c0-.565-.447-1.003-.998-1.003h-7.005c-.551 0-.998.449-.998 1.003v4.994c0 .565.447 1.003.998 1.003h1.002v-3.997c0-.554.446-1.003.998-1.003h6.002z" fill="#4A4A4A"/></g></svg>
|
||||
|
После Ширина: | Высота: | Размер: 669 B |
|
|
@ -0,0 +1 @@
|
|||
<svg width="31" height="24" viewBox="0 0 31 24" xmlns="http://www.w3.org/2000/svg"><g fill="none"><path d="M11.592 16.408c.403.391.87.592 1.437.592h4.954c.554 0 1.033-.202 1.424-.592.404-.403.592-.87.592-1.437v-1.16l2.836 2.836c.089.089.189.126.316.126l.176-.038c.189-.076.277-.215.277-.416v-7.652c0-.189-.088-.327-.277-.416l-.176-.025c-.126 0-.227.038-.316.126l-2.836 2.824v-1.16c0-.555-.189-1.033-.592-1.424-.391-.404-.87-.592-1.424-.592h-4.954c-.567 0-1.034.189-1.437.592-.391.391-.592.869-.592 1.424v4.954c0 .567.202 1.034.592 1.437" fill="#fff"/></g></svg>
|
||||
|
После Ширина: | Высота: | Размер: 561 B |
|
|
@ -0,0 +1 @@
|
|||
<svg width="31" height="24" viewBox="0 0 31 24" xmlns="http://www.w3.org/2000/svg"><path d="M13.506 17.003h4.478c.554 0 1.033-.202 1.424-.592.404-.403.592-.87.592-1.437v-1.16l2.836 2.836c.089.089.189.126.316.126l.176-.038c.189-.076.277-.215.277-.416v-7.652c0-.189-.088-.327-.277-.416l-.176-.025c-.126 0-.227.038-.316.126l-2.836 2.824v-.671l1.83-1.83c.042-.042.07-.112.07-.182 0-.056-.028-.126-.07-.168l-.644-.644c-.056-.056-.112-.084-.182-.084-.07 0-.126.028-.182.084l-9.652 9.637c-.042.056-.07.112-.07.182 0 .07.028.126.07.182l.644.644c.056.042.112.07.182.07.071 0 .126-.027.182-.07l1.327-1.327zm4.948-8.95c-.15-.034-.307-.05-.471-.05h-4.954c-.567 0-1.034.189-1.437.592-.391.391-.592.869-.592 1.424v4.954c0 .165.017.322.051.471l7.403-7.392z" fill="#fff"/></svg>
|
||||
|
После Ширина: | Высота: | Размер: 762 B |
|
|
@ -0,0 +1 @@
|
|||
<svg width="31" height="24" viewBox="0 0 31 24" xmlns="http://www.w3.org/2000/svg"><g fill="none"><path d="M13.506 17.003h4.478c.554 0 1.033-.202 1.424-.592.404-.403.592-.87.592-1.437v-1.16l2.836 2.836c.089.089.189.126.316.126l.176-.038c.189-.076.277-.215.277-.416v-7.652c0-.189-.088-.327-.277-.416l-.176-.025c-.126 0-.227.038-.316.126l-2.836 2.824v-.671l1.83-1.83c.042-.042.07-.112.07-.182 0-.056-.028-.126-.07-.168l-.644-.644c-.056-.056-.112-.084-.182-.084-.07 0-.126.028-.182.084l-9.652 9.637c-.042.056-.07.112-.07.182 0 .07.028.126.07.182l.644.644c.056.042.112.07.182.07.071 0 .126-.027.182-.07l1.327-1.327zm4.948-8.95c-.15-.034-.307-.05-.471-.05h-4.954c-.567 0-1.034.189-1.437.592-.391.391-.592.869-.592 1.424v4.954c0 .165.017.322.051.471l7.403-7.392z" fill="#00A9DC"/></g></svg>
|
||||
|
После Ширина: | Высота: | Размер: 784 B |
|
|
@ -0,0 +1 @@
|
|||
<svg width="31" height="24" viewBox="0 0 31 24" xmlns="http://www.w3.org/2000/svg"><g fill="none"><path d="M11.592 16.408c.403.391.87.592 1.437.592h4.954c.554 0 1.033-.202 1.424-.592.404-.403.592-.87.592-1.437v-1.16l2.836 2.836c.089.089.189.126.316.126l.176-.038c.189-.076.277-.215.277-.416v-7.652c0-.189-.088-.327-.277-.416l-.176-.025c-.126 0-.227.038-.316.126l-2.836 2.824v-1.16c0-.555-.189-1.033-.592-1.424-.391-.404-.87-.592-1.424-.592h-4.954c-.567 0-1.034.189-1.437.592-.391.391-.592.869-.592 1.424v4.954c0 .567.202 1.034.592 1.437" fill="#00A9DC"/></g></svg>
|
||||
|
После Ширина: | Высота: | Размер: 564 B |
|
|
@ -194,6 +194,12 @@ loop.shared.views = (function(_, mozL10n) {
|
|||
};
|
||||
},
|
||||
|
||||
getInitialState: function() {
|
||||
return {
|
||||
idle: false
|
||||
};
|
||||
},
|
||||
|
||||
propTypes: {
|
||||
audio: React.PropTypes.object.isRequired,
|
||||
dispatcher: React.PropTypes.instanceOf(loop.Dispatcher).isRequired,
|
||||
|
|
@ -225,13 +231,83 @@ loop.shared.views = (function(_, mozL10n) {
|
|||
}
|
||||
},
|
||||
|
||||
componentDidMount: function() {
|
||||
this.userActivity = false;
|
||||
this.startIdleCountDown();
|
||||
document.body.addEventListener("mousemove", this._onBodyMouseMove);
|
||||
},
|
||||
|
||||
componentWillUnmount: function() {
|
||||
clearTimeout(this.inactivityTimeout);
|
||||
clearInterval(this.inactivityPollInterval);
|
||||
document.body.removeEventListener("mousemove", this._onBodyMouseMove);
|
||||
},
|
||||
|
||||
/**
|
||||
* If the conversation toolbar is idle, update its state and initialize the countdown
|
||||
* to return of the idle state. If the toolbar is active, only it's updated the userActivity flag.
|
||||
*/
|
||||
_onBodyMouseMove: function() {
|
||||
if (this.state.idle) {
|
||||
this.setState({idle: false});
|
||||
this.startIdleCountDown();
|
||||
} else {
|
||||
this.userActivity = true;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Instead of resetting the timeout for every mousemove (this event is called to many times,
|
||||
* when the mouse is moving, we check the flat userActivity every 4 seconds. If the flag is activated,
|
||||
* the user is still active, and we can restart the countdown for the idle state
|
||||
*/
|
||||
checkUserActivity: function() {
|
||||
this.inactivityPollInterval = setInterval(function() {
|
||||
if (this.userActivity) {
|
||||
this.userActivity = false;
|
||||
this.restartIdleCountDown();
|
||||
}
|
||||
}.bind(this), 4000);
|
||||
},
|
||||
|
||||
/**
|
||||
* Stop the execution of the current inactivity countdown and it starts a new one.
|
||||
*/
|
||||
restartIdleCountDown: function() {
|
||||
clearTimeout(this.inactivityTimeout);
|
||||
this.startIdleCountDown();
|
||||
},
|
||||
|
||||
/**
|
||||
* Launchs the process to check the user activity and the inactivity countdown to change
|
||||
* the toolbar to idle.
|
||||
* When the toolbar changes to idle, we remove the procces to check the user activity,
|
||||
* because the toolbar is going to be updated directly when the user moves the mouse.
|
||||
*/
|
||||
startIdleCountDown: function() {
|
||||
this.checkUserActivity();
|
||||
this.inactivityTimeout = setTimeout(function() {
|
||||
this.setState({idle: true});
|
||||
clearInterval(this.inactivityPollInterval);
|
||||
}.bind(this), 6000);
|
||||
},
|
||||
|
||||
_getHangupButtonLabel: function() {
|
||||
return this.props.hangupButtonLabel || mozL10n.get("hangup_button_caption2");
|
||||
},
|
||||
|
||||
render: function() {
|
||||
var cx = React.addons.classSet;
|
||||
var conversationToolbarCssClasses = cx({
|
||||
"conversation-toolbar": true,
|
||||
"idle": this.state.idle
|
||||
});
|
||||
var mediaButtonGroupCssClasses = cx({
|
||||
"conversation-toolbar-media-btn-group-box": true,
|
||||
"hide": (!this.props.video.visible && !this.props.audio.visible)
|
||||
});
|
||||
return (
|
||||
React.createElement("ul", {className: "conversation-toolbar"},
|
||||
React.createElement("ul", {className: conversationToolbarCssClasses},
|
||||
React.createElement("li", {className: "conversation-toolbar-btn-box btn-hangup-entry"},
|
||||
React.createElement("button", {className: "btn btn-hangup",
|
||||
disabled: !this.props.enableHangup,
|
||||
|
|
@ -241,16 +317,17 @@ loop.shared.views = (function(_, mozL10n) {
|
|||
)
|
||||
),
|
||||
React.createElement("li", {className: "conversation-toolbar-btn-box"},
|
||||
React.createElement(MediaControlButton, {action: this.handleToggleVideo,
|
||||
enabled: this.props.video.enabled,
|
||||
scope: "local", type: "video",
|
||||
visible: this.props.video.visible})
|
||||
),
|
||||
React.createElement("li", {className: "conversation-toolbar-btn-box"},
|
||||
React.createElement(MediaControlButton, {action: this.handleToggleAudio,
|
||||
enabled: this.props.audio.enabled,
|
||||
scope: "local", type: "audio",
|
||||
visible: this.props.audio.visible})
|
||||
React.createElement("div", {className: mediaButtonGroupCssClasses},
|
||||
React.createElement(MediaControlButton, {action: this.handleToggleVideo,
|
||||
enabled: this.props.video.enabled,
|
||||
scope: "local", type: "video",
|
||||
visible: this.props.video.visible}),
|
||||
React.createElement(MediaControlButton, {action: this.handleToggleAudio,
|
||||
enabled: this.props.audio.enabled,
|
||||
scope: "local", type: "audio",
|
||||
visible: this.props.audio.visible})
|
||||
|
||||
)
|
||||
),
|
||||
React.createElement("li", {className: "conversation-toolbar-btn-box"},
|
||||
React.createElement(ScreenShareControlButton, {dispatcher: this.props.dispatcher,
|
||||
|
|
@ -477,16 +554,18 @@ loop.shared.views = (function(_, mozL10n) {
|
|||
React.createElement("div", {className: "conversation in-call"},
|
||||
React.createElement("div", {className: "media nested"},
|
||||
React.createElement("div", {className: "video_wrapper remote_wrapper"},
|
||||
React.createElement("div", {className: "video_inner remote focus-stream"})
|
||||
React.createElement("div", {className: "video_inner remote focus-stream"},
|
||||
React.createElement(ConversationToolbar, {
|
||||
audio: this.state.audio,
|
||||
dispatcher: this.props.dispatcher,
|
||||
hangup: this.hangup,
|
||||
publishStream: this.publishStream,
|
||||
video: this.state.video})
|
||||
)
|
||||
),
|
||||
React.createElement("div", {className: localStreamClasses})
|
||||
),
|
||||
React.createElement(ConversationToolbar, {
|
||||
audio: this.state.audio,
|
||||
dispatcher: this.props.dispatcher,
|
||||
hangup: this.hangup,
|
||||
publishStream: this.publishStream,
|
||||
video: this.state.video})
|
||||
|
||||
)
|
||||
)
|
||||
)
|
||||
);
|
||||
|
|
@ -1064,6 +1143,7 @@ loop.shared.views = (function(_, mozL10n) {
|
|||
this.state.localMediaAboslutelyPositioned ?
|
||||
this.renderLocalVideo() : null,
|
||||
this.props.children
|
||||
|
||||
),
|
||||
React.createElement("div", {className: screenShareStreamClasses},
|
||||
React.createElement(MediaView, {displayAvatar: false,
|
||||
|
|
|
|||
|
|
@ -194,6 +194,12 @@ loop.shared.views = (function(_, mozL10n) {
|
|||
};
|
||||
},
|
||||
|
||||
getInitialState: function() {
|
||||
return {
|
||||
idle: false
|
||||
};
|
||||
},
|
||||
|
||||
propTypes: {
|
||||
audio: React.PropTypes.object.isRequired,
|
||||
dispatcher: React.PropTypes.instanceOf(loop.Dispatcher).isRequired,
|
||||
|
|
@ -225,13 +231,83 @@ loop.shared.views = (function(_, mozL10n) {
|
|||
}
|
||||
},
|
||||
|
||||
componentDidMount: function() {
|
||||
this.userActivity = false;
|
||||
this.startIdleCountDown();
|
||||
document.body.addEventListener("mousemove", this._onBodyMouseMove);
|
||||
},
|
||||
|
||||
componentWillUnmount: function() {
|
||||
clearTimeout(this.inactivityTimeout);
|
||||
clearInterval(this.inactivityPollInterval);
|
||||
document.body.removeEventListener("mousemove", this._onBodyMouseMove);
|
||||
},
|
||||
|
||||
/**
|
||||
* If the conversation toolbar is idle, update its state and initialize the countdown
|
||||
* to return of the idle state. If the toolbar is active, only it's updated the userActivity flag.
|
||||
*/
|
||||
_onBodyMouseMove: function() {
|
||||
if (this.state.idle) {
|
||||
this.setState({idle: false});
|
||||
this.startIdleCountDown();
|
||||
} else {
|
||||
this.userActivity = true;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Instead of resetting the timeout for every mousemove (this event is called to many times,
|
||||
* when the mouse is moving, we check the flat userActivity every 4 seconds. If the flag is activated,
|
||||
* the user is still active, and we can restart the countdown for the idle state
|
||||
*/
|
||||
checkUserActivity: function() {
|
||||
this.inactivityPollInterval = setInterval(function() {
|
||||
if (this.userActivity) {
|
||||
this.userActivity = false;
|
||||
this.restartIdleCountDown();
|
||||
}
|
||||
}.bind(this), 4000);
|
||||
},
|
||||
|
||||
/**
|
||||
* Stop the execution of the current inactivity countdown and it starts a new one.
|
||||
*/
|
||||
restartIdleCountDown: function() {
|
||||
clearTimeout(this.inactivityTimeout);
|
||||
this.startIdleCountDown();
|
||||
},
|
||||
|
||||
/**
|
||||
* Launchs the process to check the user activity and the inactivity countdown to change
|
||||
* the toolbar to idle.
|
||||
* When the toolbar changes to idle, we remove the procces to check the user activity,
|
||||
* because the toolbar is going to be updated directly when the user moves the mouse.
|
||||
*/
|
||||
startIdleCountDown: function() {
|
||||
this.checkUserActivity();
|
||||
this.inactivityTimeout = setTimeout(function() {
|
||||
this.setState({idle: true});
|
||||
clearInterval(this.inactivityPollInterval);
|
||||
}.bind(this), 6000);
|
||||
},
|
||||
|
||||
_getHangupButtonLabel: function() {
|
||||
return this.props.hangupButtonLabel || mozL10n.get("hangup_button_caption2");
|
||||
},
|
||||
|
||||
render: function() {
|
||||
var cx = React.addons.classSet;
|
||||
var conversationToolbarCssClasses = cx({
|
||||
"conversation-toolbar": true,
|
||||
"idle": this.state.idle
|
||||
});
|
||||
var mediaButtonGroupCssClasses = cx({
|
||||
"conversation-toolbar-media-btn-group-box": true,
|
||||
"hide": (!this.props.video.visible && !this.props.audio.visible)
|
||||
});
|
||||
return (
|
||||
<ul className="conversation-toolbar">
|
||||
<ul className={conversationToolbarCssClasses}>
|
||||
<li className="conversation-toolbar-btn-box btn-hangup-entry">
|
||||
<button className="btn btn-hangup"
|
||||
disabled={!this.props.enableHangup}
|
||||
|
|
@ -241,16 +317,17 @@ loop.shared.views = (function(_, mozL10n) {
|
|||
</button>
|
||||
</li>
|
||||
<li className="conversation-toolbar-btn-box">
|
||||
<MediaControlButton action={this.handleToggleVideo}
|
||||
enabled={this.props.video.enabled}
|
||||
scope="local" type="video"
|
||||
visible={this.props.video.visible} />
|
||||
</li>
|
||||
<li className="conversation-toolbar-btn-box">
|
||||
<MediaControlButton action={this.handleToggleAudio}
|
||||
enabled={this.props.audio.enabled}
|
||||
scope="local" type="audio"
|
||||
visible={this.props.audio.visible} />
|
||||
<div className={mediaButtonGroupCssClasses}>
|
||||
<MediaControlButton action={this.handleToggleVideo}
|
||||
enabled={this.props.video.enabled}
|
||||
scope="local" type="video"
|
||||
visible={this.props.video.visible}/>
|
||||
<MediaControlButton action={this.handleToggleAudio}
|
||||
enabled={this.props.audio.enabled}
|
||||
scope="local" type="audio"
|
||||
visible={this.props.audio.visible}/>
|
||||
|
||||
</div>
|
||||
</li>
|
||||
<li className="conversation-toolbar-btn-box">
|
||||
<ScreenShareControlButton dispatcher={this.props.dispatcher}
|
||||
|
|
@ -477,16 +554,18 @@ loop.shared.views = (function(_, mozL10n) {
|
|||
<div className="conversation in-call">
|
||||
<div className="media nested">
|
||||
<div className="video_wrapper remote_wrapper">
|
||||
<div className="video_inner remote focus-stream"></div>
|
||||
<div className="video_inner remote focus-stream">
|
||||
<ConversationToolbar
|
||||
audio={this.state.audio}
|
||||
dispatcher={this.props.dispatcher}
|
||||
hangup={this.hangup}
|
||||
publishStream={this.publishStream}
|
||||
video={this.state.video} />
|
||||
</div>
|
||||
</div>
|
||||
<div className={localStreamClasses}></div>
|
||||
|
||||
</div>
|
||||
<ConversationToolbar
|
||||
audio={this.state.audio}
|
||||
dispatcher={this.props.dispatcher}
|
||||
hangup={this.hangup}
|
||||
publishStream={this.publishStream}
|
||||
video={this.state.video} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
@ -1064,6 +1143,7 @@ loop.shared.views = (function(_, mozL10n) {
|
|||
{ this.state.localMediaAboslutelyPositioned ?
|
||||
this.renderLocalVideo() : null }
|
||||
{ this.props.children }
|
||||
|
||||
</div>
|
||||
<div className={screenShareStreamClasses}>
|
||||
<MediaView displayAvatar={false}
|
||||
|
|
|
|||
|
|
@ -58,6 +58,23 @@ browser.jar:
|
|||
content/browser/loop/shared/img/svg/glyph-signin-16x16.svg (content/shared/img/svg/glyph-signin-16x16.svg)
|
||||
content/browser/loop/shared/img/svg/glyph-signout-16x16.svg (content/shared/img/svg/glyph-signout-16x16.svg)
|
||||
content/browser/loop/shared/img/svg/glyph-help-16x16.svg (content/shared/img/svg/glyph-help-16x16.svg)
|
||||
content/browser/loop/shared/img/svg/exit.svg (content/shared/img/svg/exit.svg)
|
||||
content/browser/loop/shared/img/svg/audio.svg (content/shared/img/svg/audio.svg)
|
||||
content/browser/loop/shared/img/svg/audio-hover.svg (content/shared/img/svg/audio-hover.svg)
|
||||
content/browser/loop/shared/img/svg/audio-mute.svg (content/shared/img/svg/audio-mute.svg)
|
||||
content/browser/loop/shared/img/svg/audio-mute-hover.svg (content/shared/img/svg/audio-mute-hover.svg)
|
||||
content/browser/loop/shared/img/svg/video.svg (content/shared/img/svg/video.svg)
|
||||
content/browser/loop/shared/img/svg/video-hover.svg (content/shared/img/svg/video-hover.svg)
|
||||
content/browser/loop/shared/img/svg/video-mute.svg (content/shared/img/svg/video-mute.svg)
|
||||
content/browser/loop/shared/img/svg/video-mute-hover.svg (content/shared/img/svg/video-mute-hover.svg)
|
||||
content/browser/loop/shared/img/svg/settings.svg (content/shared/img/svg/settings.svg)
|
||||
content/browser/loop/shared/img/svg/settings-hover.svg (content/shared/img/svg/settings-hover.svg)
|
||||
content/browser/loop/shared/img/svg/sharing.svg (content/shared/img/svg/sharing.svg)
|
||||
content/browser/loop/shared/img/svg/sharing-hover.svg (content/shared/img/svg/sharing-hover.svg)
|
||||
content/browser/loop/shared/img/svg/sharing-mute.svg (content/shared/img/svg/sharing-mute.svg)
|
||||
content/browser/loop/shared/img/svg/media-group.svg (content/shared/img/svg/media-group.svg)
|
||||
content/browser/loop/shared/img/svg/media-group-left-hover.svg (content/shared/img/svg/media-group-left-hover.svg)
|
||||
content/browser/loop/shared/img/svg/media-group-right-hover.svg (content/shared/img/svg/media-group-right-hover.svg)
|
||||
content/browser/loop/shared/img/audio-call-avatar.svg (content/shared/img/audio-call-avatar.svg)
|
||||
content/browser/loop/shared/img/beta-ribbon.svg (content/shared/img/beta-ribbon.svg)
|
||||
content/browser/loop/shared/img/check.svg (content/shared/img/check.svg)
|
||||
|
|
|
|||
|
|
@ -519,19 +519,19 @@ loop.standaloneRoomViews = (function(mozL10n) {
|
|||
isFirefox: this.props.isFirefox,
|
||||
joinRoom: this.joinRoom,
|
||||
roomState: this.state.roomState,
|
||||
roomUsed: this.state.used})
|
||||
roomUsed: this.state.used}),
|
||||
React.createElement(sharedViews.ConversationToolbar, {
|
||||
audio: {enabled: !this.state.audioMuted,
|
||||
visible: this._roomIsActive()},
|
||||
dispatcher: this.props.dispatcher,
|
||||
edit: { visible: false, enabled: false},
|
||||
enableHangup: this._roomIsActive(),
|
||||
hangup: this.leaveRoom,
|
||||
hangupButtonLabel: mozL10n.get("rooms_leave_button_label"),
|
||||
publishStream: this.publishStream,
|
||||
video: {enabled: !this.state.videoMuted,
|
||||
visible: this._roomIsActive()}})
|
||||
),
|
||||
React.createElement(sharedViews.ConversationToolbar, {
|
||||
audio: {enabled: !this.state.audioMuted,
|
||||
visible: this._roomIsActive()},
|
||||
dispatcher: this.props.dispatcher,
|
||||
edit: { visible: false, enabled: false},
|
||||
enableHangup: this._roomIsActive(),
|
||||
hangup: this.leaveRoom,
|
||||
hangupButtonLabel: mozL10n.get("rooms_leave_button_label"),
|
||||
publishStream: this.publishStream,
|
||||
video: {enabled: !this.state.videoMuted,
|
||||
visible: this._roomIsActive()}}),
|
||||
React.createElement(loop.fxOSMarketplaceViews.FxOSHiddenMarketplaceView, {
|
||||
marketplaceSrc: this.state.marketplaceSrc,
|
||||
onMarketplaceMessage: this.state.onMarketplaceMessage}),
|
||||
|
|
|
|||
|
|
@ -520,18 +520,18 @@ loop.standaloneRoomViews = (function(mozL10n) {
|
|||
joinRoom={this.joinRoom}
|
||||
roomState={this.state.roomState}
|
||||
roomUsed={this.state.used} />
|
||||
<sharedViews.ConversationToolbar
|
||||
audio={{enabled: !this.state.audioMuted,
|
||||
visible: this._roomIsActive()}}
|
||||
dispatcher={this.props.dispatcher}
|
||||
edit={{ visible: false, enabled: false }}
|
||||
enableHangup={this._roomIsActive()}
|
||||
hangup={this.leaveRoom}
|
||||
hangupButtonLabel={mozL10n.get("rooms_leave_button_label")}
|
||||
publishStream={this.publishStream}
|
||||
video={{enabled: !this.state.videoMuted,
|
||||
visible: this._roomIsActive()}} />
|
||||
</sharedViews.MediaLayoutView>
|
||||
<sharedViews.ConversationToolbar
|
||||
audio={{enabled: !this.state.audioMuted,
|
||||
visible: this._roomIsActive()}}
|
||||
dispatcher={this.props.dispatcher}
|
||||
edit={{ visible: false, enabled: false }}
|
||||
enableHangup={this._roomIsActive()}
|
||||
hangup={this.leaveRoom}
|
||||
hangupButtonLabel={mozL10n.get("rooms_leave_button_label")}
|
||||
publishStream={this.publishStream}
|
||||
video={{enabled: !this.state.videoMuted,
|
||||
visible: this._roomIsActive()}} />
|
||||
<loop.fxOSMarketplaceViews.FxOSHiddenMarketplaceView
|
||||
marketplaceSrc={this.state.marketplaceSrc}
|
||||
onMarketplaceMessage={this.state.onMarketplaceMessage} />
|
||||
|
|
|
|||
|
|
@ -253,7 +253,7 @@ describe("loop.shared.views", function() {
|
|||
});
|
||||
|
||||
describe("ConversationToolbar", function() {
|
||||
var hangup, publishStream;
|
||||
var clock, hangup, publishStream;
|
||||
|
||||
function mountTestComponent(props) {
|
||||
props = _.extend({
|
||||
|
|
@ -266,6 +266,47 @@ describe("loop.shared.views", function() {
|
|||
beforeEach(function() {
|
||||
hangup = sandbox.stub();
|
||||
publishStream = sandbox.stub();
|
||||
clock = sinon.useFakeTimers();
|
||||
});
|
||||
|
||||
afterEach(function() {
|
||||
clock.restore();
|
||||
});
|
||||
|
||||
it("should start no idle", function() {
|
||||
var comp = mountTestComponent({
|
||||
hangupButtonLabel: "foo",
|
||||
hangup: hangup,
|
||||
publishStream: publishStream
|
||||
});
|
||||
expect(comp.getDOMNode().classList.contains("idle")).eql(false);
|
||||
});
|
||||
|
||||
it("should be on idle state after 6 seconds", function() {
|
||||
var comp = mountTestComponent({
|
||||
hangupButtonLabel: "foo",
|
||||
hangup: hangup,
|
||||
publishStream: publishStream
|
||||
});
|
||||
expect(comp.getDOMNode().classList.contains("idle")).eql(false);
|
||||
|
||||
clock.tick(6001);
|
||||
expect(comp.getDOMNode().classList.contains("idle")).eql(true);
|
||||
});
|
||||
|
||||
it("should remove idle state when the user moves the mouse", function() {
|
||||
var comp = mountTestComponent({
|
||||
hangupButtonLabel: "foo",
|
||||
hangup: hangup,
|
||||
publishStream: publishStream
|
||||
});
|
||||
|
||||
clock.tick(6001);
|
||||
expect(comp.getDOMNode().classList.contains("idle")).eql(true);
|
||||
|
||||
document.body.dispatchEvent(new CustomEvent("mousemove"));
|
||||
|
||||
expect(comp.getDOMNode().classList.contains("idle")).eql(false);
|
||||
});
|
||||
|
||||
it("should accept a hangupButtonLabel optional prop", function() {
|
||||
|
|
|
|||
|
|
@ -518,7 +518,7 @@
|
|||
"dropdown-white", "dropdown-active", "dropdown-disabled", "edit",
|
||||
"edit-active", "edit-disabled", "edit-white", "expand", "expand-active",
|
||||
"expand-disabled", "minimize", "minimize-active", "minimize-disabled",
|
||||
"settings-cog"
|
||||
"settings-cog-grey", "settings-cog-white"
|
||||
],
|
||||
"14x14": ["audio", "audio-active", "audio-disabled", "facemute",
|
||||
"facemute-active", "facemute-disabled", "hangup", "hangup-active",
|
||||
|
|
@ -928,76 +928,38 @@
|
|||
),
|
||||
|
||||
React.createElement(Section, {name: "ConversationToolbar"},
|
||||
React.createElement("h2", null, "Desktop Conversation Window"),
|
||||
React.createElement("div", null,
|
||||
React.createElement(FramedExample, {dashed: true,
|
||||
height: 26,
|
||||
height: 56,
|
||||
summary: "Default",
|
||||
width: 300},
|
||||
React.createElement("div", {className: "fx-embedded"},
|
||||
React.createElement(ConversationToolbar, {audio: {enabled: true},
|
||||
React.createElement(ConversationToolbar, {audio: { enabled: true, visible: true},
|
||||
hangup: noop,
|
||||
publishStream: noop,
|
||||
video: {enabled: true}})
|
||||
video: { enabled: true, visible: true}})
|
||||
)
|
||||
),
|
||||
React.createElement(FramedExample, {dashed: true,
|
||||
height: 26,
|
||||
height: 56,
|
||||
summary: "Video muted",
|
||||
width: 300},
|
||||
React.createElement("div", {className: "fx-embedded"},
|
||||
React.createElement(ConversationToolbar, {audio: {enabled: true},
|
||||
React.createElement(ConversationToolbar, {audio: { enabled: true, visible: true},
|
||||
hangup: noop,
|
||||
publishStream: noop,
|
||||
video: {enabled: false}})
|
||||
video: { enabled: false, visible: true}})
|
||||
)
|
||||
),
|
||||
React.createElement(FramedExample, {dashed: true,
|
||||
height: 26,
|
||||
height: 56,
|
||||
summary: "Audio muted",
|
||||
width: 300},
|
||||
React.createElement("div", {className: "fx-embedded"},
|
||||
React.createElement(ConversationToolbar, {audio: {enabled: false},
|
||||
React.createElement(ConversationToolbar, {audio: { enabled: false, visible: true},
|
||||
hangup: noop,
|
||||
publishStream: noop,
|
||||
video: {enabled: true}})
|
||||
)
|
||||
)
|
||||
),
|
||||
|
||||
React.createElement("h2", null, "Standalone"),
|
||||
React.createElement("div", {className: "standalone override-position"},
|
||||
React.createElement(FramedExample, {dashed: true,
|
||||
height: 26,
|
||||
summary: "Default",
|
||||
width: 300},
|
||||
React.createElement("div", {className: "fx-embedded"},
|
||||
React.createElement(ConversationToolbar, {audio: {enabled: true},
|
||||
hangup: noop,
|
||||
publishStream: noop,
|
||||
video: {enabled: true}})
|
||||
)
|
||||
),
|
||||
React.createElement(FramedExample, {dashed: true,
|
||||
height: 26,
|
||||
summary: "Video muted",
|
||||
width: 300},
|
||||
React.createElement("div", {className: "fx-embedded"},
|
||||
React.createElement(ConversationToolbar, {audio: {enabled: true},
|
||||
hangup: noop,
|
||||
publishStream: noop,
|
||||
video: {enabled: false}})
|
||||
)
|
||||
),
|
||||
React.createElement(FramedExample, {dashed: true,
|
||||
height: 26,
|
||||
summary: "Audio muted",
|
||||
width: 300},
|
||||
React.createElement("div", {className: "fx-embedded"},
|
||||
React.createElement(ConversationToolbar, {audio: {enabled: false},
|
||||
hangup: noop,
|
||||
publishStream: noop,
|
||||
video: {enabled: true}})
|
||||
video: { enabled: true, visible: true}})
|
||||
)
|
||||
)
|
||||
)
|
||||
|
|
@ -1057,14 +1019,14 @@
|
|||
width: 298},
|
||||
React.createElement("div", {className: "fx-embedded"},
|
||||
React.createElement(OngoingConversationView, {
|
||||
audio: {enabled: true},
|
||||
audio: { enabled: true, visible: true},
|
||||
conversationStore: conversationStores[0],
|
||||
dispatcher: dispatcher,
|
||||
localPosterUrl: "sample-img/video-screen-local.png",
|
||||
mediaConnected: true,
|
||||
remotePosterUrl: "sample-img/video-screen-remote.png",
|
||||
remoteVideoEnabled: true,
|
||||
video: {enabled: true}})
|
||||
video: { enabled: true, visible: true}})
|
||||
)
|
||||
),
|
||||
|
||||
|
|
@ -1075,14 +1037,14 @@
|
|||
width: 600},
|
||||
React.createElement("div", {className: "fx-embedded"},
|
||||
React.createElement(OngoingConversationView, {
|
||||
audio: {enabled: true},
|
||||
audio: { enabled: true, visible: true},
|
||||
conversationStore: conversationStores[1],
|
||||
dispatcher: dispatcher,
|
||||
localPosterUrl: "sample-img/video-screen-local.png",
|
||||
mediaConnected: true,
|
||||
remotePosterUrl: "sample-img/video-screen-remote.png",
|
||||
remoteVideoEnabled: true,
|
||||
video: {enabled: true}})
|
||||
video: { enabled: true, visible: true}})
|
||||
)
|
||||
),
|
||||
|
||||
|
|
@ -1092,14 +1054,14 @@
|
|||
width: 800},
|
||||
React.createElement("div", {className: "fx-embedded"},
|
||||
React.createElement(OngoingConversationView, {
|
||||
audio: {enabled: true},
|
||||
audio: { enabled: true, visible: true},
|
||||
conversationStore: conversationStores[2],
|
||||
dispatcher: dispatcher,
|
||||
localPosterUrl: "sample-img/video-screen-local.png",
|
||||
mediaConnected: true,
|
||||
remotePosterUrl: "sample-img/video-screen-remote.png",
|
||||
remoteVideoEnabled: true,
|
||||
video: {enabled: true}})
|
||||
video: { enabled: true, visible: true}})
|
||||
)
|
||||
),
|
||||
|
||||
|
|
@ -1110,14 +1072,14 @@
|
|||
width: 298},
|
||||
React.createElement("div", {className: "fx-embedded"},
|
||||
React.createElement(OngoingConversationView, {
|
||||
audio: {enabled: true},
|
||||
audio: { enabled: true, visible: true},
|
||||
conversationStore: conversationStores[3],
|
||||
dispatcher: dispatcher,
|
||||
localPosterUrl: "sample-img/video-screen-local.png",
|
||||
mediaConnected: true,
|
||||
remotePosterUrl: "sample-img/video-screen-remote.png",
|
||||
remoteVideoEnabled: true,
|
||||
video: {enabled: false}})
|
||||
video: { enabled: true, visible: true}})
|
||||
)
|
||||
),
|
||||
|
||||
|
|
@ -1128,14 +1090,14 @@
|
|||
width: 298},
|
||||
React.createElement("div", {className: "fx-embedded"},
|
||||
React.createElement(OngoingConversationView, {
|
||||
audio: {enabled: true},
|
||||
audio: { enabled: true, visible: true},
|
||||
conversationStore: conversationStores[4],
|
||||
dispatcher: dispatcher,
|
||||
localPosterUrl: "sample-img/video-screen-local.png",
|
||||
mediaConnected: true,
|
||||
remotePosterUrl: "sample-img/video-screen-remote.png",
|
||||
remoteVideoEnabled: false,
|
||||
video: {enabled: true}})
|
||||
video: { enabled: true, visible: true}})
|
||||
)
|
||||
)
|
||||
|
||||
|
|
@ -1628,7 +1590,7 @@
|
|||
|
||||
// This simulates the mocha layout for errors which means we can run
|
||||
// this alongside our other unit tests but use the same harness.
|
||||
var expectedWarningsCount = 16;
|
||||
var expectedWarningsCount = 10;
|
||||
var warningsMismatch = caughtWarnings.length !== expectedWarningsCount;
|
||||
if (uncaughtError || warningsMismatch) {
|
||||
$("#results").append("<div class='failures'><em>" +
|
||||
|
|
|
|||
|
|
@ -518,7 +518,7 @@
|
|||
"dropdown-white", "dropdown-active", "dropdown-disabled", "edit",
|
||||
"edit-active", "edit-disabled", "edit-white", "expand", "expand-active",
|
||||
"expand-disabled", "minimize", "minimize-active", "minimize-disabled",
|
||||
"settings-cog"
|
||||
"settings-cog-grey", "settings-cog-white"
|
||||
],
|
||||
"14x14": ["audio", "audio-active", "audio-disabled", "facemute",
|
||||
"facemute-active", "facemute-disabled", "hangup", "hangup-active",
|
||||
|
|
@ -928,76 +928,38 @@
|
|||
</Section>
|
||||
|
||||
<Section name="ConversationToolbar">
|
||||
<h2>Desktop Conversation Window</h2>
|
||||
<div>
|
||||
<FramedExample dashed={true}
|
||||
height={26}
|
||||
height={56}
|
||||
summary="Default"
|
||||
width={300}>
|
||||
<div className="fx-embedded">
|
||||
<ConversationToolbar audio={{enabled: true}}
|
||||
<ConversationToolbar audio={{ enabled: true, visible: true }}
|
||||
hangup={noop}
|
||||
publishStream={noop}
|
||||
video={{enabled: true}} />
|
||||
video={{ enabled: true, visible: true }} />
|
||||
</div>
|
||||
</FramedExample>
|
||||
<FramedExample dashed={true}
|
||||
height={26}
|
||||
height={56}
|
||||
summary="Video muted"
|
||||
width={300}>
|
||||
<div className="fx-embedded">
|
||||
<ConversationToolbar audio={{enabled: true}}
|
||||
<ConversationToolbar audio={{ enabled: true, visible: true }}
|
||||
hangup={noop}
|
||||
publishStream={noop}
|
||||
video={{enabled: false}} />
|
||||
video={{ enabled: false, visible: true }} />
|
||||
</div>
|
||||
</FramedExample>
|
||||
<FramedExample dashed={true}
|
||||
height={26}
|
||||
height={56}
|
||||
summary="Audio muted"
|
||||
width={300}>
|
||||
<div className="fx-embedded">
|
||||
<ConversationToolbar audio={{enabled: false}}
|
||||
<ConversationToolbar audio={{ enabled: false, visible: true }}
|
||||
hangup={noop}
|
||||
publishStream={noop}
|
||||
video={{enabled: true}} />
|
||||
</div>
|
||||
</FramedExample>
|
||||
</div>
|
||||
|
||||
<h2>Standalone</h2>
|
||||
<div className="standalone override-position">
|
||||
<FramedExample dashed={true}
|
||||
height={26}
|
||||
summary="Default"
|
||||
width={300}>
|
||||
<div className="fx-embedded">
|
||||
<ConversationToolbar audio={{enabled: true}}
|
||||
hangup={noop}
|
||||
publishStream={noop}
|
||||
video={{enabled: true}} />
|
||||
</div>
|
||||
</FramedExample>
|
||||
<FramedExample dashed={true}
|
||||
height={26}
|
||||
summary="Video muted"
|
||||
width={300}>
|
||||
<div className="fx-embedded">
|
||||
<ConversationToolbar audio={{enabled: true}}
|
||||
hangup={noop}
|
||||
publishStream={noop}
|
||||
video={{enabled: false}} />
|
||||
</div>
|
||||
</FramedExample>
|
||||
<FramedExample dashed={true}
|
||||
height={26}
|
||||
summary="Audio muted"
|
||||
width={300}>
|
||||
<div className="fx-embedded">
|
||||
<ConversationToolbar audio={{enabled: false}}
|
||||
hangup={noop}
|
||||
publishStream={noop}
|
||||
video={{enabled: true}} />
|
||||
video={{ enabled: true, visible: true }} />
|
||||
</div>
|
||||
</FramedExample>
|
||||
</div>
|
||||
|
|
@ -1057,14 +1019,14 @@
|
|||
width={298}>
|
||||
<div className="fx-embedded">
|
||||
<OngoingConversationView
|
||||
audio={{enabled: true}}
|
||||
audio={{ enabled: true, visible: true }}
|
||||
conversationStore={conversationStores[0]}
|
||||
dispatcher={dispatcher}
|
||||
localPosterUrl="sample-img/video-screen-local.png"
|
||||
mediaConnected={true}
|
||||
remotePosterUrl="sample-img/video-screen-remote.png"
|
||||
remoteVideoEnabled={true}
|
||||
video={{enabled: true}} />
|
||||
video={{ enabled: true, visible: true }} />
|
||||
</div>
|
||||
</FramedExample>
|
||||
|
||||
|
|
@ -1075,14 +1037,14 @@
|
|||
width={600}>
|
||||
<div className="fx-embedded">
|
||||
<OngoingConversationView
|
||||
audio={{enabled: true}}
|
||||
audio={{ enabled: true, visible: true }}
|
||||
conversationStore={conversationStores[1]}
|
||||
dispatcher={dispatcher}
|
||||
localPosterUrl="sample-img/video-screen-local.png"
|
||||
mediaConnected={true}
|
||||
remotePosterUrl="sample-img/video-screen-remote.png"
|
||||
remoteVideoEnabled={true}
|
||||
video={{enabled: true}} />
|
||||
video={{ enabled: true, visible: true }} />
|
||||
</div>
|
||||
</FramedExample>
|
||||
|
||||
|
|
@ -1092,14 +1054,14 @@
|
|||
width={800}>
|
||||
<div className="fx-embedded">
|
||||
<OngoingConversationView
|
||||
audio={{enabled: true}}
|
||||
audio={{ enabled: true, visible: true }}
|
||||
conversationStore={conversationStores[2]}
|
||||
dispatcher={dispatcher}
|
||||
localPosterUrl="sample-img/video-screen-local.png"
|
||||
mediaConnected={true}
|
||||
remotePosterUrl="sample-img/video-screen-remote.png"
|
||||
remoteVideoEnabled={true}
|
||||
video={{enabled: true}} />
|
||||
video={{ enabled: true, visible: true }} />
|
||||
</div>
|
||||
</FramedExample>
|
||||
|
||||
|
|
@ -1110,14 +1072,14 @@
|
|||
width={298}>
|
||||
<div className="fx-embedded">
|
||||
<OngoingConversationView
|
||||
audio={{enabled: true}}
|
||||
audio={{ enabled: true, visible: true }}
|
||||
conversationStore={conversationStores[3]}
|
||||
dispatcher={dispatcher}
|
||||
localPosterUrl="sample-img/video-screen-local.png"
|
||||
mediaConnected={true}
|
||||
remotePosterUrl="sample-img/video-screen-remote.png"
|
||||
remoteVideoEnabled={true}
|
||||
video={{enabled: false}} />
|
||||
video={{ enabled: true, visible: true }} />
|
||||
</div>
|
||||
</FramedExample>
|
||||
|
||||
|
|
@ -1128,14 +1090,14 @@
|
|||
width={298} >
|
||||
<div className="fx-embedded">
|
||||
<OngoingConversationView
|
||||
audio={{enabled: true}}
|
||||
audio={{ enabled: true, visible: true }}
|
||||
conversationStore={conversationStores[4]}
|
||||
dispatcher={dispatcher}
|
||||
localPosterUrl="sample-img/video-screen-local.png"
|
||||
mediaConnected={true}
|
||||
remotePosterUrl="sample-img/video-screen-remote.png"
|
||||
remoteVideoEnabled={false}
|
||||
video={{enabled: true}} />
|
||||
video={{ enabled: true, visible: true }} />
|
||||
</div>
|
||||
</FramedExample>
|
||||
|
||||
|
|
@ -1628,7 +1590,7 @@
|
|||
|
||||
// This simulates the mocha layout for errors which means we can run
|
||||
// this alongside our other unit tests but use the same harness.
|
||||
var expectedWarningsCount = 16;
|
||||
var expectedWarningsCount = 10;
|
||||
var warningsMismatch = caughtWarnings.length !== expectedWarningsCount;
|
||||
if (uncaughtError || warningsMismatch) {
|
||||
$("#results").append("<div class='failures'><em>" +
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче