nostr/iris-messenger
1
0
Fork 0
mirror of https://github.com/irislib/iris-messenger.git synced 2024-10-18 14:13:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

video call icon and tooltip

Browse Source
This commit is contained in:
Martti Malmi 2020-04-09 20:34:48 +03:00
parent c8b8f850f6
commit 48008846bc
3 changed files with 53 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
src/css/style.css
View File

@ -622,3 +622,50 @@ small {
.add-friend:hover, .add-friend:active, .add-friend:focus {
background-color: hsla(194, 55%, 80%, 1);;
}
/* Tooltip container */
.tooltip {
position: relative;
display: inline-block;
}
/* Tooltip text */
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: var(--day-separator-bg);
color: var(--day-separator-color);
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* Position the tooltip text */
position: absolute;
z-index: 1;
left: -125%;
top: 100%;
margin-left: -60px;
/* Fade in tooltip */
opacity: 0;
transition: opacity 0.3s;
}
/* Tooltip arrow */
/*
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: -10px;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: rgb(25,25,25) transparent transparent transparent;
}*/
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}

8
src/js/app.js
View File

@ -730,10 +730,10 @@ function addUserToHeader(pub) {
textEl.append($('<small>').addClass('typing-indicator').text('typing...'));
$("#header-content").append(textEl);
textEl.on('click', () => showProfile(pub));
var videoCallBtn = $('<button>video</button>').attr('id', 'start-video-call');
videoCallBtn.click(() => callingInterval ? stopCalling(pub) : callUser(pub));
var voiceCallBtn = $('<button>voice</button>');
voiceCallBtn.click(() => callUser(pub, false));
var videoCallBtn = $(`<a class="tooltip"><span class="tooltiptext">Video call</span><svg enable-background="new 0 0 50 50" id="Layer_1" version="1.1" viewBox="0 0 50 50" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><rect fill="none" style="height:24px;width:24px"/><polygon fill="none" points="49,14 36,21 36,29 49,36 " stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="4"/><path d="M36,36c0,2.209-1.791,4-4,4 H5c-2.209,0-4-1.791-4-4V14c0-2.209,1.791-4,4-4h27c2.209,0,4,1.791,4,4V36z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="4"/></svg></a>`).attr('id', 'start-video-call').css({width:24, height:24});
videoCallBtn.click(() => callingInterval ? null : callUser(pub));
var voiceCallBtn = $('<a><svg enable-background="new 0 0 50 50" style="height:20px;width:20px" id="Layer_1" version="1.1" viewBox="0 0 50 50" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><rect fill="none" height="50" width="50"/><path d="M30.217,35.252c0,0,4.049-2.318,5.109-2.875 c1.057-0.559,2.152-0.7,2.817-0.294c1.007,0.616,9.463,6.241,10.175,6.739c0.712,0.499,1.055,1.924,0.076,3.32 c-0.975,1.396-5.473,6.916-7.379,6.857c-1.909-0.062-9.846-0.236-24.813-15.207C1.238,18.826,1.061,10.887,1,8.978 C0.939,7.07,6.459,2.571,7.855,1.595c1.398-0.975,2.825-0.608,3.321,0.078c0.564,0.781,6.124,9.21,6.736,10.176 c0.419,0.66,0.265,1.761-0.294,2.819c-0.556,1.06-2.874,5.109-2.874,5.109s1.634,2.787,7.16,8.312 C27.431,33.615,30.217,35.252,30.217,35.252z" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="4"/></svg></a>').css({width:20, height:20, 'margin-right': 20});
voiceCallBtn.click(() => callingInterval ? stopCalling(pub) : callUser(pub));
//$("#header-content").append(voiceCallBtn);
$("#header-content").append(videoCallBtn);
$("#header-content").css({cursor: 'pointer'});

4
src/js/videocall.js
View File

@ -24,7 +24,7 @@ function onCallMessage(pub, call) {
var incomingCallEl = $('<div>')
.attr('id', 'incoming-call')
.text(`Incoming call from ${chats[pub].name}`)
.css({position:'fixed', right:0, bottom: 0, height:200, width: 200, 'text-align': 'center', background: '#000', color: '#fff', padding: 15});
.css({position:'fixed', right:0, bottom: 0, height:300, width: 200, 'text-align': 'center', background: '#000', color: '#fff', padding: '15px 0'});
var answer = $('<button>').text('answer').css({display:'block',margin: '15px auto'});
var reject = $('<button>').text('reject').css({display:'block',margin: '15px auto'});
answer.click(() => answerCall(pub, call));
@ -148,7 +148,7 @@ function stopCalling(pub) {
clearTimeout(callSoundTimeout);
callSound.currentTime = 0;
$('#outgoing-call').remove();
$('#start-video-call').text('video');
$('#start-video-call').attr('disabled', false);
clearInterval(callingInterval);
callingInterval = null;
chats[pub].put('call', null);