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

audio-only calls kind of work

Browse Source
This commit is contained in:
or-else
2023-01-07 14:56:07 -08:00
parent 8690ae6a1b
commit 89f9821255
7 changed files with 31 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/tinode-web.jsx
+1 -1
View File
@@ -1737,7 +1737,7 @@ class TinodeWeb extends React.Component {
switch (callState) {
case CALL_STATE_OUTGOING_INITATED:
const head = { webrtc: CALL_HEAD_STARTED, aonly: !!audioOnly };
this.handleSendMessage(Drafty.videoCall(), undefined, undefined, head)
this.handleSendMessage(Drafty.videoCall(audioOnly), undefined, undefined, head)
.then(ctrl => {
if (ctrl.code < 200 || ctrl.code >= 300 || !ctrl.params || !ctrl.params.seq) {
this.handleCallClose();
src/widgets/call-panel.jsx
+11 -12
View File
@@ -34,11 +34,10 @@ class CallPanel extends React.PureComponent {
previousOnInfo: undefined,
waitingForPeer: false,
// If true, the client has received a remote SDP from the peer and has sent a local SDP to the peer.
callInitialSetupComplete: false
callInitialSetupComplete: false,
audioOnly: props.callAudioOnly,
};
console.log("CallPanel", props.callAudioOnly);
this.localStreamConstraints = {
audio: true,
video: !props.callAudioOnly
@@ -148,7 +147,7 @@ class CallPanel extends React.PureComponent {
if (this.props.callState == CALL_STATE_IN_PROGRESS) {
// We apparently just accepted the call.
this.props.onInvite(this.props.topic, this.props.seq, this.props.callState, this.props.callAudioOnly);
this.props.onInvite(this.props.topic, this.props.seq, CALL_STATE_IN_PROGRESS, this.props.callAudioOnly);
return;
}
@@ -404,6 +403,7 @@ class CallPanel extends React.PureComponent {
handleToggleCameraClick() {
this.toggleMedia('video');
this.setState({audioOnly: !this.state.audioOnly});
}
handleToggleMicClick() {
@@ -412,10 +412,9 @@ class CallPanel extends React.PureComponent {
render() {
const remoteActive = this.remoteRef.current && this.remoteRef.current.srcObject;
const noVideo = this.props.callAudioOnly;
const audioTracks = this.state.localStream && this.state.localStream.getAudioTracks();
const videoTracks = !noVideo && this.state.localStream && this.state.localStream.getVideoTracks();
const enabled = !!(audioTracks && audioTracks[0]);
const videoTracks = !this.state.audioOnly && this.state.localStream && this.state.localStream.getVideoTracks();
const disabled = !(audioTracks && audioTracks[0]);
const audioIcon = audioTracks && audioTracks[0] && audioTracks[0].enabled ? 'mic' : 'mic_off';
const videoIcon = videoTracks && videoTracks[0] && videoTracks[0].enabled ? 'videocam' : 'videocam_off';
const peerTitle = clipStr(this.props.title, MAX_PEER_TITLE_LENGTH);
@@ -425,16 +424,16 @@ class CallPanel extends React.PureComponent {
<>
<div id="video-container">
<div id="video-container-panel">
<div className="call-party self" disabled={noVideo}>
<div className="call-party self" disabled={this.state.audioOnly}>
<video ref={this.localRef} autoPlay muted playsInline />
<div className="caller-name inactive">
<FormattedMessage id="calls_you_label"
defaultMessage="You" description="Shown over the local video screen" />
</div>
</div>
<div className="call-party peer" disabled={noVideo}>
<div className="call-party peer" disabled={this.state.audioOnly}>
<video ref={this.remoteRef} autoPlay playsInline />
{remoteActive ?
{remoteActive && !this.state.audioOnly ?
<div className="caller-name inactive">{peerTitle}</div> :
<div className={`caller-card${pulseAnimation}`}>
<div className="avatar-box">
@@ -453,10 +452,10 @@ class CallPanel extends React.PureComponent {
<button className="danger" onClick={this.handleCloseClick}>
<i className="material-icons">call_end</i>
</button>
<button className="secondary" onClick={this.handleToggleCameraClick} disabled={!enabled}>
<button className="secondary" onClick={this.handleToggleCameraClick} disabled={disabled}>
<i className="material-icons">{videoIcon}</i>
</button>
<button className="secondary" onClick={this.handleToggleMicClick} disabled={!enabled}>
<button className="secondary" onClick={this.handleToggleMicClick} disabled={disabled}>
<i className="material-icons">{audioIcon}</i>
</button>
</div>
src/widgets/call-status.jsx
+1 -1
View File
@@ -28,7 +28,7 @@ export default class CallStatus extends React.PureComponent {
duration = <FormattedMessage id="call_disconnected" defaultMessage="disconnected" description="Label for disconnected call" />;
break;
}
} else if (this.props.callState == 'started' && !this.props.duration) {
} else if (['accepted', 'started'].includes(this.props.callState) && !this.props.duration) {
duration = <FormattedMessage id="call_in_progress" defaultMessage="in progress" description="Label for call in progress" />
} else {
duration = <span>{secondsToTime(this.props.duration / 1000)}</span>;
umd/index.dev.js
+15 -13
View File
@@ -9244,7 +9244,7 @@ class TinodeWeb extends (react__WEBPACK_IMPORTED_MODULE_0___default().Component)
webrtc: _constants_js__WEBPACK_IMPORTED_MODULE_13__.CALL_HEAD_STARTED,
aonly: !!audioOnly
};
this.handleSendMessage(tinode_sdk__WEBPACK_IMPORTED_MODULE_4__.Drafty.videoCall(), undefined, undefined, head).then(ctrl => {
this.handleSendMessage(tinode_sdk__WEBPACK_IMPORTED_MODULE_4__.Drafty.videoCall(audioOnly), undefined, undefined, head).then(ctrl => {
if (ctrl.code < 200 || ctrl.code >= 300 || !ctrl.params || !ctrl.params.seq) {
this.handleCallClose();
return;
@@ -10706,9 +10706,9 @@ class CallPanel extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCompon
pc: undefined,
previousOnInfo: undefined,
waitingForPeer: false,
callInitialSetupComplete: false
callInitialSetupComplete: false,
audioOnly: props.callAudioOnly
};
console.log("CallPanel", props.callAudioOnly);
this.localStreamConstraints = {
audio: true,
video: !props.callAudioOnly
@@ -10799,7 +10799,7 @@ class CallPanel extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCompon
return;
}
if (this.props.callState == _constants_js__WEBPACK_IMPORTED_MODULE_4__.CALL_STATE_IN_PROGRESS) {
this.props.onInvite(this.props.topic, this.props.seq, this.props.callState, this.props.callAudioOnly);
this.props.onInvite(this.props.topic, this.props.seq, _constants_js__WEBPACK_IMPORTED_MODULE_4__.CALL_STATE_IN_PROGRESS, this.props.callAudioOnly);
return;
}
navigator.mediaDevices.getUserMedia(this.localStreamConstraints).then(stream => {
@@ -11009,16 +11009,18 @@ class CallPanel extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCompon
}
handleToggleCameraClick() {
this.toggleMedia('video');
this.setState({
audioOnly: !this.state.audioOnly
});
}
handleToggleMicClick() {
this.toggleMedia('audio');
}
render() {
const remoteActive = this.remoteRef.current && this.remoteRef.current.srcObject;
const noVideo = this.props.callAudioOnly;
const audioTracks = this.state.localStream && this.state.localStream.getAudioTracks();
const videoTracks = !noVideo && this.state.localStream && this.state.localStream.getVideoTracks();
const enabled = !!(audioTracks && audioTracks[0]);
const videoTracks = !this.state.audioOnly && this.state.localStream && this.state.localStream.getVideoTracks();
const disabled = !(audioTracks && audioTracks[0]);
const audioIcon = audioTracks && audioTracks[0] && audioTracks[0].enabled ? 'mic' : 'mic_off';
const videoIcon = videoTracks && videoTracks[0] && videoTracks[0].enabled ? 'videocam' : 'videocam_off';
const peerTitle = (0,_lib_utils_js__WEBPACK_IMPORTED_MODULE_5__.clipStr)(this.props.title, _config_js__WEBPACK_IMPORTED_MODULE_3__.MAX_PEER_TITLE_LENGTH);
@@ -11029,7 +11031,7 @@ class CallPanel extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCompon
id: "video-container-panel"
}, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
className: "call-party self",
disabled: noVideo
disabled: this.state.audioOnly
}, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("video", {
ref: this.localRef,
autoPlay: true,
@@ -11045,12 +11047,12 @@ class CallPanel extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCompon
}]
}))), react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
className: "call-party peer",
disabled: noVideo
disabled: this.state.audioOnly
}, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("video", {
ref: this.remoteRef,
autoPlay: true,
playsInline: true
}), remoteActive ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
}), remoteActive && !this.state.audioOnly ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
className: "caller-name inactive"
}, peerTitle) : react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
className: `caller-card${pulseAnimation}`
@@ -11073,13 +11075,13 @@ class CallPanel extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCompon
}, "call_end")), react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", {
className: "secondary",
onClick: this.handleToggleCameraClick,
disabled: !enabled
disabled: disabled
}, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", {
className: "material-icons"
}, videoIcon)), react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", {
className: "secondary",
onClick: this.handleToggleMicClick,
disabled: !enabled
disabled: disabled
}, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", {
className: "material-icons"
}, audioIcon)))));
@@ -11149,7 +11151,7 @@ class CallStatus extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCompo
});
break;
}
} else if (this.props.callState == 'started' && !this.props.duration) {
} else if (['accepted', 'started'].includes(this.props.callState) && !this.props.duration) {
duration = react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_intl__WEBPACK_IMPORTED_MODULE_1__.FormattedMessage, {
id: "call_in_progress",
defaultMessage: [{
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