pro/im_webapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

making call UI prettier

Browse Source
This commit is contained in:
or-else
2022-05-26 18:36:11 -07:00
parent 203612b421
commit d78dc0e22a
8 changed files with 148 additions and 173 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/base.css
+98 -71
View File
@@ -154,6 +154,22 @@ button.outline:focus, button.outline:hover, button.outline:active {
background-color: #e8eaf6; /* indigo 50 */
}
button.danger {
background-color: #ec6560;
color: white;
}
button.danger:focus, button.danger:hover, button.danger:active {
background-color: #f77;
}
button.positive {
background-color: #9de39b;
color: white;
}
button.positive:focus, button.positive:hover, button.positive:active {
background-color: #7f7;
}
textarea, input {
font-family: inherit;
font-size: 1.1rem;
@@ -1562,6 +1578,88 @@ img.channel {
font-size: 6rem;
}
/* Video-call related styles */
#video-container {
position: absolute;
display: flex;
flex-direction: column;
justify-content: space-between;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255,255,255,0.90);
}
#video-container-controls {
display: flex;
align-items: center;
justify-content: center;
height: 3.2rem;
z-index: 1;
background-color: #eceff1;
box-shadow: 0px -2px 3px -1px rgba(0,0,0,0.1); /* Faint shadow above panel */
}
#video-container-panel {
position: relative;
display: flex;
flex-direction: row;
align-items: center;
height: 100%;
width: 100%;
}
.video-elem {
width: 50%;
position: relative;
background-color: #eee;
border-radius: 0.5rem;
border: 1px solid #ccc;
margin: 0.25rem;
box-sizing: content-box;
}
.video-elem:hover {
border: 2px solid #2196f3;
}
video {
width: 100%;
}
/* "You" badge. */
.video-title {
position: absolute;
bottom: 0.25rem;
right: 0.25rem;
padding: 0.15rem 0.5rem;
border-radius: 0.35rem;
z-index: 1;
text-shadow: 0 0 1px white;
background-color: rgba(255, 255, 255, 0.7);
}
.video-call-accept {
border-radius: 10px;
background-color: green;
}
.incoming-call-title {
text-align: center;
padding: 10px;
}
.incoming-call-badges {
text-align: center;
}
.incoming-call-actions {
text-align: center;
padding: 20px;
}
/* Talk bubbles */
.chat-box {
list-style: none;
@@ -2737,74 +2835,3 @@ ul.tabbar li.active > a {
opacity: 0.3;
}
}
#video-container {
display: flex;
flex-direction: column;
justify-content: center;
height: 100%!important;
width: 85%;
margin: auto;
height: 80%;
}
video {
width:100%;
}
.video-container-panel {
-ms-flex-align: center!important;
align-items: center!important;
margin-top: 10%;
position:relative;
}
.video-elem {
width:50%;
float:left;
position:relative;
z-index:0;
}
.video-title {
position:absolute;
bottom: 0;
right: 0;
z-index: 1;
background-color: white;
}
#video-container-controls {
display: flex;
justify-content: center;
padding: 20px;
}
.video-call-accept {
border-radius: 10px;
background-color: green;
}
.video-call-hangup {
border-radius: 10px;
background-color: red;
}
.video-call-toggle-media {
border-radius: 10px;
background-color: gray;
}
.incoming-call-title {
text-align: center;
padding: 10px;
}
.incoming-call-badges {
text-align: center;
}
.incoming-call-actions {
text-align: center;
padding: 20px;
}
css/base.min.css
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
src/views/incoming-call-view.jsx
+2 -2
View File
@@ -148,10 +148,10 @@ export default class IncomingCallView extends React.Component {
<div id="actions" className="group incoming-call-actions">
{this.props.callState == CALL_STATE_INCOMING_RECEIVED ?
<>
<button className="video-call-hangup" onClick={this.handleRejectCall}>
<button className="danger" onClick={this.handleRejectCall}>
<i className="material-icons">call_end</i>
</button>
<button className="video-call-accept" onClick={this.handleAcceptCall}>
<button className="positive" onClick={this.handleAcceptCall}>
<i className="material-icons">call</i>
</button>
</>
src/widgets/call-panel.jsx
+20 -42
View File
@@ -30,6 +30,7 @@ export default class CallPanel extends React.PureComponent {
this.onInfo = this.onInfo.bind(this);
this.start = this.start.bind(this);
this.stop = this.stop.bind(this);
this.createPeerConnection = this.createPeerConnection.bind(this);
@@ -48,7 +49,6 @@ export default class CallPanel extends React.PureComponent {
this.reportError = this.reportError.bind(this);
this.handleGetUserMediaError = this.handleGetUserMediaError.bind(this);
this.stop = this.stop.bind(this);
this.stopTracks = this.stopTracks.bind(this);
this.handleCloseClick = this.handleCloseClick.bind(this);
@@ -60,6 +60,21 @@ export default class CallPanel extends React.PureComponent {
this.handleVideoCallAccepted = this.handleVideoCallAccepted.bind(this);
}
componentDidMount() {
const topic = this.props.topic;
this.previousOnInfo = topic.onInfo;
topic.onInfo = this.onInfo;
if ((this.props.callState == CALL_STATE_OUTGOING_INITATED ||
this.props.callState == CALL_STATE_IN_PROGRESS) && this.localRef.current) {
this.start();
}
}
componentWillUnmount() {
this.props.topic.onInfo = this.previousOnInfo;
this.stop();
}
handleVideoCallAccepted(info) {
const pc = this.createPeerConnection();
const stream = this.state.localStream;
@@ -91,21 +106,6 @@ export default class CallPanel extends React.PureComponent {
}
}
componentDidMount() {
const topic = this.props.topic;
this.previousOnInfo = topic.onInfo;
topic.onInfo = this.onInfo;
if ((this.props.callState == CALL_STATE_OUTGOING_INITATED ||
this.props.callState == CALL_STATE_IN_PROGRESS) && this.localRef.current) {
this.start();
}
}
componentWillUnmount() {
this.props.topic.onInfo = this.previousOnInfo;
this.stop();
}
start() {
if (this.state.localStream) {
console.log("You can't start a call because you already have one open!");
@@ -328,30 +328,8 @@ export default class CallPanel extends React.PureComponent {
return (
<>
<div id="topic-caption-panel" className="caption-panel">
{this.props.displayMobile ?
<a href="#" id="hide-message-view" onClick={(e) => {e.preventDefault(); this.props.onHideMessagesView();}}>
<i className="material-icons">arrow_back</i>
</a>
:
null}
<div className="avatar-box">
<LetterTile
tinode={this.props.tinode}
avatar={this.props.avatar}
topic={this.props.topic}
title={this.props.title} />
</div>
<div id="topic-title-group">
<div id="topic-title" className="panel-title">{
this.props.title ||
<i><FormattedMessage id="unnamed_topic" defaultMessage="Unnamed"
description="Title shown when the topic has no name" /></i>
}</div>
</div>
</div>
<div id="video-container">
<div className="video-container-panel">
<div id="video-container-panel">
<div className="video-elem">
<video id="localVideo" ref={this.localRef} autoPlay muted playsInline></video>
<div className="video-title">
@@ -368,11 +346,11 @@ export default class CallPanel extends React.PureComponent {
</div>
</div>
<div id="video-container-controls">
<button className="video-call-hangup" onClick={this.handleCloseClick}>
<button className="danger" onClick={this.handleCloseClick}>
<i className="material-icons">call_end</i>
</button>
<button className="video-call-toggle-media" onClick={this.handleToggleCameraClick}><i className="material-icons">{videoIcon}</i></button>
<button className="video-call-toggle-media" onClick={this.handleToggleMicClick}><i className="material-icons">{audioIcon}</i></button>
<button className="secondary" onClick={this.handleToggleCameraClick}><i className="material-icons">{videoIcon}</i></button>
<button className="secondary" onClick={this.handleToggleMicClick}><i className="material-icons">{audioIcon}</i></button>
</div>
</div>
</>
umd/index.dev.js
+22 -52
View File
@@ -4557,12 +4557,12 @@ class IncomingCallView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Com
id: "actions",
className: "group incoming-call-actions"
}, this.props.callState == _constants_js__WEBPACK_IMPORTED_MODULE_6__.CALL_STATE_INCOMING_RECEIVED ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", {
className: "video-call-hangup",
className: "danger",
onClick: this.handleRejectCall
}, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", {
className: "material-icons"
}, "call_end")), react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", {
className: "video-call-accept",
className: "positive",
onClick: this.handleAcceptCall
}, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", {
className: "material-icons"
@@ -11147,6 +11147,7 @@ class CallPanel extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCompon
this.remoteRef = react__WEBPACK_IMPORTED_MODULE_0___default().createRef();
this.onInfo = this.onInfo.bind(this);
this.start = this.start.bind(this);
this.stop = this.stop.bind(this);
this.createPeerConnection = this.createPeerConnection.bind(this);
this.handleNegotiationNeededEvent = this.handleNegotiationNeededEvent.bind(this);
this.handleICECandidateEvent = this.handleICECandidateEvent.bind(this);
@@ -11160,7 +11161,6 @@ class CallPanel extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCompon
this.handleNewICECandidateMsg = this.handleNewICECandidateMsg.bind(this);
this.reportError = this.reportError.bind(this);
this.handleGetUserMediaError = this.handleGetUserMediaError.bind(this);
this.stop = this.stop.bind(this);
this.stopTracks = this.stopTracks.bind(this);
this.handleCloseClick = this.handleCloseClick.bind(this);
this.handleToggleCameraClick = this.handleToggleCameraClick.bind(this);
@@ -11170,6 +11170,21 @@ class CallPanel extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCompon
this.handleVideoCallAccepted = this.handleVideoCallAccepted.bind(this);
}
componentDidMount() {
const topic = this.props.topic;
this.previousOnInfo = topic.onInfo;
topic.onInfo = this.onInfo;
if ((this.props.callState == _constants_js__WEBPACK_IMPORTED_MODULE_4__.CALL_STATE_OUTGOING_INITATED || this.props.callState == _constants_js__WEBPACK_IMPORTED_MODULE_4__.CALL_STATE_IN_PROGRESS) && this.localRef.current) {
this.start();
}
}
componentWillUnmount() {
this.props.topic.onInfo = this.previousOnInfo;
this.stop();
}
handleVideoCallAccepted(info) {
const pc = this.createPeerConnection();
const stream = this.state.localStream;
@@ -11206,21 +11221,6 @@ class CallPanel extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCompon
}
}
componentDidMount() {
const topic = this.props.topic;
this.previousOnInfo = topic.onInfo;
topic.onInfo = this.onInfo;
if ((this.props.callState == _constants_js__WEBPACK_IMPORTED_MODULE_4__.CALL_STATE_OUTGOING_INITATED || this.props.callState == _constants_js__WEBPACK_IMPORTED_MODULE_4__.CALL_STATE_IN_PROGRESS) && this.localRef.current) {
this.start();
}
}
componentWillUnmount() {
this.props.topic.onInfo = this.previousOnInfo;
this.stop();
}
start() {
if (this.state.localStream) {
console.log("You can't start a call because you already have one open!");
@@ -11431,39 +11431,9 @@ class CallPanel extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCompon
const audioIcon = this.state.localStream != null && this.state.localStream.getAudioTracks()[0].enabled ? 'mic' : 'mic_off';
const videoIcon = this.state.localStream != null && this.state.localStream.getVideoTracks()[0].enabled ? 'videocam' : 'videocam_off';
return react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
id: "topic-caption-panel",
className: "caption-panel"
}, this.props.displayMobile ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
href: "#",
id: "hide-message-view",
onClick: e => {
e.preventDefault();
this.props.onHideMessagesView();
}
}, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", {
className: "material-icons"
}, "arrow_back")) : null, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
className: "avatar-box"
}, react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_widgets_letter_tile_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], {
tinode: this.props.tinode,
avatar: this.props.avatar,
topic: this.props.topic,
title: this.props.title
})), react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
id: "topic-title-group"
}, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
id: "topic-title",
className: "panel-title"
}, this.props.title || react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", null, react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_intl__WEBPACK_IMPORTED_MODULE_1__.FormattedMessage, {
id: "unnamed_topic",
defaultMessage: [{
"type": 0,
"value": "Unnamed"
}]
}))))), react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
id: "video-container"
}, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
className: "video-container-panel"
id: "video-container-panel"
}, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
className: "video-elem"
}, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("video", {
@@ -11492,17 +11462,17 @@ class CallPanel extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCompon
}, (0,_lib_utils_js__WEBPACK_IMPORTED_MODULE_5__.clipStr)(this.props.title, _config_js__WEBPACK_IMPORTED_MODULE_3__.MAX_TITLE_LENGTH)) : null)), react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
id: "video-container-controls"
}, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", {
className: "video-call-hangup",
className: "danger",
onClick: this.handleCloseClick
}, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", {
className: "material-icons"
}, "call_end")), react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", {
className: "video-call-toggle-media",
className: "secondary",
onClick: this.handleToggleCameraClick
}, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", {
className: "material-icons"
}, videoIcon)), react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", {
className: "video-call-toggle-media",
className: "secondary",
onClick: this.handleToggleMicClick
}, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", {
className: "material-icons"
umd/index.dev.js.map
+1 -1
View File
File diff suppressed because one or more lines are too long
umd/index.prod.js
+1 -1
View File
File diff suppressed because one or more lines are too long
umd/index.prod.js.map
+1 -1
View File
File diff suppressed because one or more lines are too long