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

allow messaging while call is in progress (same topic only for now)

Browse Source
This commit is contained in:
or-else
2025-10-08 16:49:45 +03:00
parent abf5b19758
commit 1085d1caf6
9 changed files with 382 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/base.css
+130 -9
View File
@@ -4,6 +4,9 @@
/* Size of text in message bubbles */
--message-text-size: 10pt;
/* Height of caption panel */
--caption-panel-height: 4rem;
/* Core Palette */
--clr-bright: light-dark(#fff, #181818);
--clr-dark: light-dark(#000, #fff);
@@ -48,7 +51,7 @@
/* Semantic Colors: Danger, Warning, Success, Info */
--clr-danger-text: light-dark(#d33131, #931f1f); /* Danger text, invalid label */
--clr-danger-text-hover: light-dark(#f44034, #cc1100); /* Hover for danger text */
--clr-error-text-muted: light-dark(hsl(0, 50%, 60%), hsl(0, 50%, 40%)); /* For less critical errors like invalid in-place edit icon/text */
--clr-error-text-muted: light-dark(#cc6666, #993333); /* For less critical errors like invalid in-place edit icon/text */
--clr-error-bg-light: light-dark(#ffccd1, #ff6675); /* Info box error bg */
--clr-error-border-light: light-dark(#ffbdc6, #ff334e); /* Info box error border */
--clr-error-text-dark: light-dark(#b51c1c, #de2323); /* Info box error text, icon */
@@ -1092,7 +1095,7 @@ table.permission-editor td.checkbox {
align-items: center;
flex: none;
padding: 0.5rem;
height: 4rem;
height: var(--caption-panel-height);
white-space: nowrap;
box-shadow: 0 1px 2px var(--clr-shadow-gray-strong);
overflow-x: hidden;
@@ -1934,7 +1937,7 @@ img.channel {
line-height: 2rem;
flex-shrink: 0;
flex-grow: 0;
height: 4rem;
height: var(--caption-panel-height);
padding: 1rem 0.75rem 0 0.75rem;
z-index: 3;
}
@@ -1997,22 +2000,44 @@ img.channel {
background-color: var(--clr-overlay-white-strong);
}
.controls {
#video-container.minimized {
left: auto;
top: 1rem;
right: 1rem;
width: 18rem;
height: 18rem;
background-color: unset;
user-select: none;
cursor: grab;
box-shadow: 0.15rem 0.15rem 1.5rem var(--clr-shadow-dialog);
border-radius: 0.5rem;
}
#controls {
position: absolute;
display: flex;
column-gap: 1rem;
align-items: center;
align-self: center;
justify-content: center;
width: 100%;
bottom: 2.5rem;
z-index: 1;
}
.incoming-call .controls {
#controls.minimized {
column-gap: 0.5rem;
bottom: 1.75rem;
}
.incoming-call #controls {
bottom: 1rem;
}
.controls button {
#controls button {
position: relative;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
width: 4rem;
height: 4rem;
@@ -2020,6 +2045,53 @@ img.channel {
box-shadow: 0 3px 6px 0 var(--clr-shadow-button);
}
#controls.minimized button {
width: 2.75rem;
height: 2.75rem;
box-shadow: 0 2px 4px 0 var(--clr-shadow-button);
}
#controls button .material-icons {
font-size: 1.8rem;
}
#controls.minimized button .material-icons {
font-size: 1.4rem;
}
button.full-screen {
position: absolute;
top: 2rem;
left: 2rem;
z-index: 1;
width: 2.5rem;
height: 2.5rem;
border-radius: 0.5rem;
padding: 0;
box-shadow: none;
background-color: transparent;
min-width: unset;
}
.minimized button.full-screen {
top: 1rem;
left: 1rem;
width: 2rem;
height: 2rem;
}
button.full-screen:hover:not([disabled]), button:active:not([disabled]) {
color: var(--clr-text-secondary);
}
button.full-screen .material-icons {
font-size: x-large;
}
.minimized button.full-screen .material-icons {
font-size: large;
}
#video-container-panel {
position: relative;
height: 100%;
@@ -2034,7 +2106,11 @@ img.channel {
}
.call-party:hover {
border: 2px solid var(--clr-primary-accent);
border-color: var(--clr-primary-accent);
}
.minimized .call-party {
border-width: 1px;
}
.call-party.peer {
@@ -2046,6 +2122,13 @@ img.channel {
z-index: 1;
}
.minimized .call-party.peer {
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.call-party.self {
position: absolute;
right: 0.5rem;
@@ -2101,6 +2184,12 @@ video {
line-height: 1.6;
}
.minimized .caller-card .avatar-box {
width: 6rem;
height: 6rem;
font-size: 3.6rem;
}
/* Badge with "You" for current user or peer's name. */
.call-party .caller-name {
max-width: 12rem;
@@ -2108,7 +2197,7 @@ video {
border-radius: 0.35rem;
z-index: 1;
text-shadow: 0 0 1px var(--clr-bright);
background-color: rgba(255, 255, 255, 0.7); /* Specific rgba, could be a variable if reused */
background-color: var(--clr-background-off-white);
text-overflow: ellipsis;
overflow-x: hidden;
white-space: nowrap;
@@ -2137,6 +2226,12 @@ video {
margin: 0 auto;
}
.minimized .caller-name {
padding: 0.1rem 0.35rem;
border-radius: 0.25rem;
font-weight: lighter;
}
.incoming-call {
position: relative;
background-color: var(--clr-bright);
@@ -2305,6 +2400,7 @@ video {
padding: 0.5rem 0.5rem 0.5rem 0.5rem;
background-color: var(--clr-bubble-meta-date-bg);
text-transform: uppercase;
user-select: none;
}
/* Left triangle placed bottom left flush. */
@@ -2822,6 +2918,7 @@ ul.tabbar li.active > a {
line-height: 1;
vertical-align: middle;
text-align: center;
user-select: none;
}
.material-icons.small {
font-size: 1rem;
@@ -3580,7 +3677,31 @@ div.toast.show {
width: unset;
}
#video-container.minimized {
flex-direction: row;
left: 0;
top: var(--caption-panel-height);
width: 100%;
height: 11rem;
border-radius: unset;
box-shadow: 0 0 0.5rem var(--clr-shadow-gray-strong);
}
#controls.minimized {
flex-direction: column;
row-gap: 0.5rem;
bottom: auto;
column-gap: unset;
right: 1rem;
}
.minimized .call-party {
border-radius: unset;
box-shadow: unset;
}
.call-party.self {
bottom: 8.5rem;
border-radius: unset;
}
}
css/base.min.css
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
src/views/messages-view.jsx
+39 -20
View File
@@ -157,6 +157,7 @@ class MessagesView extends React.Component {
this.handleInfoReceipt = this.handleInfoReceipt.bind(this);
this.handleExpandMedia = this.handleExpandMedia.bind(this);
this.handleClosePreview = this.handleClosePreview.bind(this);
this.handleCallPanelToggle = this.handleCallPanelToggle.bind(this);
this.handleFormResponse = this.handleFormResponse.bind(this);
this.handleContextClick = this.handleContextClick.bind(this);
this.handleShowMessageContextMenu = this.handleShowMessageContextMenu.bind(this);
@@ -344,6 +345,7 @@ class MessagesView extends React.Component {
videoPreview: null,
videoPostview: null,
rtcPanel: null,
minimizedCallPanel: false,
typingIndicator: false,
scrollPosition: 0,
fetchingMessages: false,
@@ -370,6 +372,7 @@ class MessagesView extends React.Component {
videoPreview: null,
videoPostview: null,
rtcPanel: null,
minimizedCallPanel: false,
typingIndicator: false,
scrollPosition: 0,
fetchingMessages: false,
@@ -1106,6 +1109,10 @@ class MessagesView extends React.Component {
this.props.onCallHangup(topic, seq);
}
handleCallPanelToggle() {
this.setState({minimizedCallPanel: !this.state.minimizedCallPanel});
}
// sendImageAttachment sends the image bits as Drafty message.
sendImageAttachment(caption, blob) {
const mime = this.state.imagePreview.mime;
@@ -1487,7 +1494,33 @@ class MessagesView extends React.Component {
serverAddress={this.props.serverAddress} />
);
} else {
let callPanel = null;
if (this.state.rtcPanel) {
// P2P call.
callPanel = (
<CallPanel
topic={this.state.topic}
seq={this.props.callSeq}
callState={this.props.callState}
callAudioOnly={this.props.callAudioOnly}
tinode={this.props.tinode}
title={this.state.title}
avatar={this.state.avatar || true}
minimized={this.state.minimizedCallPanel}
onError={this.props.onError}
onHangup={this.handleCallHangup}
onToggleMinimize={this.handleCallPanelToggle}
onInvite={this.props.onCallInvite}
onSendOffer={this.props.onCallSendOffer}
onIceCandidate={this.props.onCallIceCandidate}
onSendAnswer={this.props.onCallSendAnswer} />
);
}
let component2;
let overlay = null;
if (this.state.imagePreview) {
// Preview image before sending.
component2 = (
@@ -1538,26 +1571,12 @@ class MessagesView extends React.Component {
onClose={this.handleClosePreview}
onSendMessage={this.sendFileAttachment} />
);
} else if (this.state.rtcPanel) {
// P2P call.
component2 = (
<CallPanel
topic={this.state.topic}
seq={this.props.callSeq}
callState={this.props.callState}
callAudioOnly={this.props.callAudioOnly}
tinode={this.props.tinode}
title={this.state.title}
avatar={this.state.avatar || true}
onError={this.props.onError}
onHangup={this.handleCallHangup}
onInvite={this.props.onCallInvite}
onSendOffer={this.props.onCallSendOffer}
onIceCandidate={this.props.onCallIceCandidate}
onSendAnswer={this.props.onCallSendAnswer} />
);
} else if (callPanel && !this.state.minimizedCallPanel) {
component2 = callPanel;
} else {
if (callPanel) {
overlay = callPanel;
}
const topic = this.props.tinode.getTopic(this.state.topic);
const isChannel = topic.isChannelType() || topic.chan;
const groupTopic = topic.isGroupType() && !isChannel;
@@ -1829,7 +1848,7 @@ class MessagesView extends React.Component {
</>
);
}
component = <div id="topic-view" ref={this.mountDnDEvents}>{component2}</div>
component = <div id="topic-view" ref={this.mountDnDEvents}>{component2}{overlay}</div>
}
return component;
}
src/widgets/call-incoming.jsx
+1 -1
View File
@@ -130,7 +130,7 @@ export default class CallIncoming extends React.Component {
<div className="caller-name">{truncateString(this.state.fullName, MAX_PEER_TITLE_LENGTH)}
<BadgeList short={true} trustedBadges={this.state.trustedBadges} /></div>
</div>
<div className="controls">
<div id="controls">
{this.props.callState == CALL_STATE_INCOMING_RECEIVED ?
<>
<button className="danger" onClick={this.handleRejectCall}>
src/widgets/call-panel.jsx
+106 -41
View File
@@ -52,8 +52,10 @@ class CallPanel extends React.PureComponent {
};
this.isOutgoingCall = props.callState == CALL_STATE_OUTGOING_INITATED;
this.containerRef = React.createRef();
this.localRef = React.createRef();
this.remoteRef = React.createRef();
// Cache for remote ice candidates until initial setup gets completed.
this.remoteIceCandidatesCache = [];
@@ -100,6 +102,53 @@ class CallPanel extends React.PureComponent {
this.handleDataChannelMessage = this.handleDataChannelMessage.bind(this);
this.handleDataChannelOpen = this.handleDataChannelOpen.bind(this);
this.handleDataChannelClose = this.handleDataChannelClose.bind(this);
this.bounds = {};
this.dragStart = (event) => {
if (!event.target.classList.contains('draggable')) {
// Prevent dragging when clicking on buttons or other non-draggable elements.
return;
}
if (window.matchMedia('(width<=640px)')) {
// No dragging on small screens.
return;
}
if (this.props.minimized && this.containerRef) {
event.stopPropagation();
this.containerRef.current.setPointerCapture(event.pointerId);
this.containerRef.current.style.cursor = 'grabbing';
this.bounds.left = this.containerRef.current.offsetLeft;
this.bounds.top = this.containerRef.current.offsetTop;
this.bounds.width = this.containerRef.current.offsetWidth;
this.bounds.height = this.containerRef.current.offsetHeight;
const parent = this.containerRef.current.offsetParent;
this.bounds.maxX = parent.offsetWidth;
this.bounds.maxY = parent.offsetHeight;
}
};
this.drag = (event) => {
event.stopPropagation();
const el = this.containerRef.current;
if (this.props.minimized && this.containerRef && el.hasPointerCapture(event.pointerId)) {
// Calculate new position. Restrict to the visible area of the parent element.
this.bounds.left = Math.min(Math.max(this.bounds.left + event.movementX, 0),
this.bounds.maxX - this.bounds.width);
this.bounds.top = Math.min(Math.max(this.bounds.top + event.movementY, 0),
this.bounds.maxY - this.bounds.height);
el.style.left = `${this.bounds.left}px`;
el.style.top = `${this.bounds.top}px`;
}
};
this.dragEnd = (event) => {
event.stopPropagation();
if (this.props.minimized && this.containerRef) {
this.containerRef.current.releasePointerCapture(event.pointerId);
this.containerRef.current.style.cursor = 'grab';
}
};
}
componentDidMount() {
@@ -110,12 +159,24 @@ class CallPanel extends React.PureComponent {
this.props.callState == CALL_STATE_IN_PROGRESS) && this.localRef.current) {
this.start();
}
if (this.containerRef) {
this.containerRef.current.addEventListener('pointerdown', this.dragStart);
this.containerRef.current.addEventListener('pointermove', this.drag);
this.containerRef.current.addEventListener('pointerup', this.dragEnd);
}
}
componentWillUnmount() {
const topic = this.props.tinode.getTopic(this.props.topic);
topic.onInfo = this.previousOnInfo;
this.stop();
if (this.containerRef) {
this.containerRef.current.removeEventListener('pointerdown', this.dragStart);
this.containerRef.current.removeEventListener('pointermove', this.drag);
this.containerRef.current.removeEventListener('pointerup', this.dragEnd);
}
}
handleVideoCallAccepted(info) {
@@ -595,52 +656,56 @@ class CallPanel extends React.PureComponent {
}
}
const minimizedClass = this.props.minimized ? 'minimized' : null;
const fullScreen = this.props.minimized ? 'fullscreen' : 'fullscreen_exit';
return (
<>
<div id="video-container">
<div id="video-container-panel">
<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={!remoteActive}>
{remoteActive ?
<>
<video ref={this.remoteRef} autoPlay playsInline />
<div className="caller-name inactive">{peerTitle}</div>
</> :
<>
<audio ref={this.remoteRef} autoPlay />
<div className={`caller-card${pulseAnimation}`}>
<div className="avatar-box">
<LetterTile
tinode={this.props.tinode}
avatar={this.props.avatar}
topic={this.props.topic}
title={this.props.title} />
</div>
<div className="caller-name">{peerTitle}</div>
</div>
</>
}
<div id="video-container" className={minimizedClass} ref={this.containerRef}>
<div id="video-container-panel">
<div className="call-party self" disabled={this.state.audioOnly || this.props.minimized}>
<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="controls">
<button className="danger" onClick={this.handleCloseClick}>
<i className="material-icons">call_end</i>
</button>
<button className="secondary" onClick={this.handleToggleCameraClick} disabled={disabled}>
<i className="material-icons">{videoIcon}</i>
</button>
<button className="secondary" onClick={this.handleToggleMicClick} disabled={disabled}>
<i className="material-icons">{audioIcon}</i>
</button>
<div className="call-party peer" disabled={!remoteActive}>
{remoteActive ?
<>
<video ref={this.remoteRef} autoPlay playsInline />
<div className="caller-name inactive">{peerTitle}</div>
</> :
<>
<audio ref={this.remoteRef} autoPlay />
<div className={`caller-card${pulseAnimation} draggable`}>
<div className="avatar-box">
<LetterTile
tinode={this.props.tinode}
avatar={this.props.avatar}
topic={this.props.topic}
title={this.props.title} />
</div>
<div className="caller-name">{peerTitle}</div>
</div>
</>
}
</div>
</div>
</>
<button className="full-screen" onClick={this.props.onToggleMinimize}>
<i className="material-icons">{fullScreen}</i>
</button>
<div id="controls" className={minimizedClass}>
<button className="danger" onClick={this.handleCloseClick}>
<i className="material-icons">call_end</i>
</button>
<button className="secondary" onClick={this.handleToggleCameraClick} disabled={disabled}>
<i className="material-icons">{videoIcon}</i>
</button>
<button className="secondary" onClick={this.handleToggleMicClick} disabled={disabled}>
<i className="material-icons">{audioIcon}</i>
</button>
</div>
</div>
);
}
};
umd/index.dev.js
+102 -25
View File
@@ -9753,6 +9753,7 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
this.handleInfoReceipt = this.handleInfoReceipt.bind(this);
this.handleExpandMedia = this.handleExpandMedia.bind(this);
this.handleClosePreview = this.handleClosePreview.bind(this);
this.handleCallPanelToggle = this.handleCallPanelToggle.bind(this);
this.handleFormResponse = this.handleFormResponse.bind(this);
this.handleContextClick = this.handleContextClick.bind(this);
this.handleShowMessageContextMenu = this.handleShowMessageContextMenu.bind(this);
@@ -9910,6 +9911,7 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
videoPreview: null,
videoPostview: null,
rtcPanel: null,
minimizedCallPanel: false,
typingIndicator: false,
scrollPosition: 0,
fetchingMessages: false,
@@ -9935,6 +9937,7 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
videoPreview: null,
videoPostview: null,
rtcPanel: null,
minimizedCallPanel: false,
typingIndicator: false,
scrollPosition: 0,
fetchingMessages: false,
@@ -10589,6 +10592,11 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
});
this.props.onCallHangup(topic, seq);
}
handleCallPanelToggle() {
this.setState({
minimizedCallPanel: !this.state.minimizedCallPanel
});
}
sendImageAttachment(caption, blob) {
const mime = this.state.imagePreview.mime;
const width = this.state.imagePreview.width;
@@ -10909,7 +10917,28 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
serverAddress: this.props.serverAddress
});
} else {
let callPanel = null;
if (this.state.rtcPanel) {
callPanel = react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_widgets_call_panel_jsx__WEBPACK_IMPORTED_MODULE_3__["default"], {
topic: this.state.topic,
seq: this.props.callSeq,
callState: this.props.callState,
callAudioOnly: this.props.callAudioOnly,
tinode: this.props.tinode,
title: this.state.title,
avatar: this.state.avatar || true,
minimized: this.state.minimizedCallPanel,
onError: this.props.onError,
onHangup: this.handleCallHangup,
onToggleMinimize: this.handleCallPanelToggle,
onInvite: this.props.onCallInvite,
onSendOffer: this.props.onCallSendOffer,
onIceCandidate: this.props.onCallIceCandidate,
onSendAnswer: this.props.onCallSendAnswer
});
}
let component2;
let overlay = null;
if (this.state.imagePreview) {
component2 = react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_widgets_image_preview_jsx__WEBPACK_IMPORTED_MODULE_9__["default"], {
content: this.state.imagePreview,
@@ -10950,23 +10979,12 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
onClose: this.handleClosePreview,
onSendMessage: this.sendFileAttachment
});
} else if (this.state.rtcPanel) {
component2 = react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_widgets_call_panel_jsx__WEBPACK_IMPORTED_MODULE_3__["default"], {
topic: this.state.topic,
seq: this.props.callSeq,
callState: this.props.callState,
callAudioOnly: this.props.callAudioOnly,
tinode: this.props.tinode,
title: this.state.title,
avatar: this.state.avatar || true,
onError: this.props.onError,
onHangup: this.handleCallHangup,
onInvite: this.props.onCallInvite,
onSendOffer: this.props.onCallSendOffer,
onIceCandidate: this.props.onCallIceCandidate,
onSendAnswer: this.props.onCallSendAnswer
});
} else if (callPanel && !this.state.minimizedCallPanel) {
component2 = callPanel;
} else {
if (callPanel) {
overlay = callPanel;
}
const topic = this.props.tinode.getTopic(this.state.topic);
const isChannel = topic.isChannelType() || topic.chan;
const groupTopic = topic.isGroupType() && !isChannel;
@@ -11253,7 +11271,7 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
component = react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
id: "topic-view",
ref: this.mountDnDEvents
}, component2);
}, component2, overlay);
}
return component;
}
@@ -15034,7 +15052,7 @@ class CallIncoming extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
short: true,
trustedBadges: this.state.trustedBadges
}))), react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
className: "controls"
id: "controls"
}, this.props.callState == _constants_js__WEBPACK_IMPORTED_MODULE_4__.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: "danger",
onClick: this.handleRejectCall
@@ -15210,6 +15228,7 @@ class CallPanel extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCompon
video: !props.callAudioOnly
};
this.isOutgoingCall = props.callState == _constants_js__WEBPACK_IMPORTED_MODULE_4__.CALL_STATE_OUTGOING_INITATED;
this.containerRef = react__WEBPACK_IMPORTED_MODULE_0___default().createRef();
this.localRef = react__WEBPACK_IMPORTED_MODULE_0___default().createRef();
this.remoteRef = react__WEBPACK_IMPORTED_MODULE_0___default().createRef();
this.remoteIceCandidatesCache = [];
@@ -15247,6 +15266,44 @@ class CallPanel extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCompon
this.handleDataChannelMessage = this.handleDataChannelMessage.bind(this);
this.handleDataChannelOpen = this.handleDataChannelOpen.bind(this);
this.handleDataChannelClose = this.handleDataChannelClose.bind(this);
this.bounds = {};
this.dragStart = event => {
if (!event.target.classList.contains('draggable')) {
return;
}
if (window.matchMedia('(width<=640px)')) {
return;
}
if (this.props.minimized && this.containerRef) {
event.stopPropagation();
this.containerRef.current.setPointerCapture(event.pointerId);
this.containerRef.current.style.cursor = 'grabbing';
this.bounds.left = this.containerRef.current.offsetLeft;
this.bounds.top = this.containerRef.current.offsetTop;
this.bounds.width = this.containerRef.current.offsetWidth;
this.bounds.height = this.containerRef.current.offsetHeight;
const parent = this.containerRef.current.offsetParent;
this.bounds.maxX = parent.offsetWidth;
this.bounds.maxY = parent.offsetHeight;
}
};
this.drag = event => {
event.stopPropagation();
const el = this.containerRef.current;
if (this.props.minimized && this.containerRef && el.hasPointerCapture(event.pointerId)) {
this.bounds.left = Math.min(Math.max(this.bounds.left + event.movementX, 0), this.bounds.maxX - this.bounds.width);
this.bounds.top = Math.min(Math.max(this.bounds.top + event.movementY, 0), this.bounds.maxY - this.bounds.height);
el.style.left = `${this.bounds.left}px`;
el.style.top = `${this.bounds.top}px`;
}
};
this.dragEnd = event => {
event.stopPropagation();
if (this.props.minimized && this.containerRef) {
this.containerRef.current.releasePointerCapture(event.pointerId);
this.containerRef.current.style.cursor = 'grab';
}
};
}
componentDidMount() {
const topic = this.props.tinode.getTopic(this.props.topic);
@@ -15255,11 +15312,21 @@ class CallPanel extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCompon
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();
}
if (this.containerRef) {
this.containerRef.current.addEventListener('pointerdown', this.dragStart);
this.containerRef.current.addEventListener('pointermove', this.drag);
this.containerRef.current.addEventListener('pointerup', this.dragEnd);
}
}
componentWillUnmount() {
const topic = this.props.tinode.getTopic(this.props.topic);
topic.onInfo = this.previousOnInfo;
this.stop();
if (this.containerRef) {
this.containerRef.current.removeEventListener('pointerdown', this.dragStart);
this.containerRef.current.removeEventListener('pointermove', this.drag);
this.containerRef.current.removeEventListener('pointerup', this.dragEnd);
}
}
handleVideoCallAccepted(info) {
RING_SOUND.pause();
@@ -15682,13 +15749,17 @@ class CallPanel extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCompon
remoteActive = t.enabled && t.readyState == 'live';
}
}
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: "video-container"
const minimizedClass = this.props.minimized ? 'minimized' : null;
const fullScreen = this.props.minimized ? 'fullscreen' : 'fullscreen_exit';
return react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
id: "video-container",
className: minimizedClass,
ref: this.containerRef
}, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
id: "video-container-panel"
}, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
className: "call-party self",
disabled: this.state.audioOnly
disabled: this.state.audioOnly || this.props.minimized
}, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("video", {
ref: this.localRef,
autoPlay: true,
@@ -15715,7 +15786,7 @@ class CallPanel extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCompon
ref: this.remoteRef,
autoPlay: true
}), react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
className: `caller-card${pulseAnimation}`
className: `caller-card${pulseAnimation} draggable`
}, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
className: "avatar-box"
}, react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_letter_tile_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], {
@@ -15725,8 +15796,14 @@ class CallPanel extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCompon
title: this.props.title
})), react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
className: "caller-name"
}, peerTitle))))), react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
className: "controls"
}, peerTitle))))), react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", {
className: "full-screen",
onClick: this.props.onToggleMinimize
}, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", {
className: "material-icons"
}, fullScreen)), react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
id: "controls",
className: minimizedClass
}, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", {
className: "danger",
onClick: this.handleCloseClick
@@ -15744,7 +15821,7 @@ class CallPanel extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCompon
disabled: disabled
}, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", {
className: "material-icons"
}, audioIcon)))));
}, audioIcon))));
}
}
;
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