diff --git a/lib/desktop_capturer.js b/lib/desktop_capturer.js index 31321f0ad0b8a30c02a0e344d30d891514bc582a..76ae2b0d0275052507b49d55b6c78ab47a5242db 100644 --- a/lib/desktop_capturer.js +++ b/lib/desktop_capturer.js @@ -1,691 +1,694 @@ -const {desktopCapturer} = require('electron'); -const ipcRendererShareScreen = require('electron').ipcRenderer; - -var key = ''; - -//used to manage/handle screen share start / stop --> -let init = true; -let isDef = false; -var desktopSharing = false; -var desktopSharingOptions = false; -var desktopSharingScreenId = ''; -let defaultFnGetDisplayMedia = navigator.mediaDevices.getDisplayMedia; -let localStream; -var isSharing = true; - -let streamPromiseFnReject = null; -let streamPromiseFnResolve = null; - -ipcRendererShareScreen.on('share-screen', function (event, message) { - var msgJSON = JSON.parse(message); - console.log('[DT] share-screen IPC_RENDERER', message); - - key = msgJSON.key; - switch (msgJSON.key) { - case 'sources1': - case 'sources2': - case 'sources3': - case 'sources': - printL('[DT] ipcRendererShareScreen.on(share-screen > desktopSharing: ', desktopSharing); - printL('ipcRendererShareScreen.on(share-screen > desktopSharingOptions: ', desktopSharingOptions); - printL('ipcRendererShareScreen.on(share-screen > desktopSharingScreenId: ', desktopSharingScreenId); - printL('ipcRendererShareScreen.on(share-screen > CONDITION: ', (!desktopSharing || !desktopSharingOptions || desktopSharingScreenId === '')); - init = false; - if (!desktopSharing || !desktopSharingOptions || desktopSharingScreenId === '') { - printL('ipcRendererShareScreen.on(share-screen > isSharing: ', isSharing); - if (isSharing) { - showSourcesToMain().then(function (sources) { - window.document.getElementById('screen-share-box').setAttribute("style", ""); - - manageTabs(); - console.log('showSourcesToMain', sources); - sources.map(function (s, i) { - addSource(s); - if ((i + 1) === sources.length) { - overrideGetDisplayMedia(); - } - return s; - }); - }); - } else { - } - } else { - //toggle(desktopSharingScreenId); - } - break; - // ipcRendererShareScreen.send('share-screen',{'sources':sources}); - } -}); - -function overrideGetDisplayMedia() { - printL('[DT] overrideGetDisplayMedia: ', 'new Promise'); - document.getElementById('buttonCancel').onclick = function (e) { - printL('[DT] overrideGetDisplayMedia: ', 'new Promise > button Cancel > click'); - desktopSharing = false; - desktopSharingOptions = false; - desktopSharingScreenId = ''; - var els = document.getElementsByName('screen'); - for (var i = 0; i < els.length; i++) { - if (els[i].checked) { - els[i].checked = false; - } - } - isSharing = true; - window.document.getElementById('screen-share-box').setAttribute("style", "display: none;"); - window.document.getElementById('applicationTabContainer').innerHTML = ''; - if (streamPromiseFnReject) { - streamPromiseFnReject(); - streamPromiseFnReject = null; - streamPromiseFnResolve = null; - } - } - document.getElementById('buttonShare').onclick = function (e) { - printL('[DT] overrideGetDisplayMedia: ', 'new Promise > button Share > click'); - var els = document.getElementsByName('screen'); - for (var i = 0; i < els.length; i++) { - //console.log(els[i].checked, els[i].value) - if (els[i].checked) { - //console.log('Button Share Clicked', 'Selected Screen'+els[i].value); - printL('[DT] overrideGetDisplayMedia: ', 'new Promise > button Share > screen selected: ' + els[i].value); - desktopSharing = true; - //desktopSharingOptions = true; - desktopSharingScreenId = els[i].value; - window.document.getElementById('screen-share-box').setAttribute("style", "display: none;"); - window.document.getElementById('applicationTabContainer').innerHTML = ''; - //toggle(els[i].value); - printL('[DT] overrideGetDisplayMedia: ', 'new Promise > button Share > promise resolve: '); - isSharing = false; - - if (streamPromiseFnResolve) { - navigator.mediaDevices.getUserMedia({ - audio: false, - video: { - mandatory: { - chromeMediaSource: 'desktop', - chromeMediaSourceId: desktopSharingScreenId, - minWidth: 1280, - maxWidth: 1280, - minHeight: 720, - maxHeight: 720 - } - } - }).then(function (stream) { - printL('[DT] overrideGetDisplayMedia: ', 'new Promise > button Share > promise resolve: Stream resolved'); - - streamPromiseFnResolve(stream); - streamPromiseFnReject = null; - streamPromiseFnResolve = null; - }).catch(function (e) { - console.log(e); - streamPromiseFnReject(); - streamPromiseFnReject = null; - streamPromiseFnResolve = null; - }); - } - } - } - } -} - -navigator.mediaDevices.getDisplayMedia = () => { - console.log('[DT] navigator.mediaDevices.getDisplayMedia'); - defaultFnGetDisplayMedia.call(navigator.mediaDevices); - if (streamPromiseFnReject) { - streamPromiseFnReject(); - streamPromiseFnReject = null; - streamPromiseFnResolve = null; - } - - const streamPromise = new Promise((resolve, reject) => { - streamPromiseFnReject = reject; - streamPromiseFnResolve = resolve; - }); - return streamPromise; -}; - -//navigator.mediaDevices.getDisplayMedia = () => { -// -// console.log('navigator.mediaDevices.getDisplayMedia ',key+": "+desktopSharingScreenId); -// console.log('navigator.mediaDevices.getDisplayMedia: !desktopSharing', (!desktopSharing)); -// console.log('navigator.mediaDevices.getDisplayMedia: !desktopSharingOptions', (!desktopSharingOptions)); -// console.log('navigator.mediaDevices.getDisplayMedia: desktopSharingScreenId===\'\'', (desktopSharingScreenId==='')); -// if(!init){ -// if(!desktopSharing || !desktopSharingOptions || desktopSharingScreenId===''){ -// console.log('Show Sharing screen options window:'); -// showScreenOptions(); -// return null; -// } -// } -// console.log('id available return stream: ',desktopSharingScreenId) -// return (((!init)||(!desktopSharing || !desktopSharingOptions || desktopSharingScreenId===''))?default_fn:navigator.mediaDevices.getUserMedia({ -// audio: false, -// video: { -// mandatory: { -// chromeMediaSource: 'desktop', -// chromeMediaSourceId: desktopSharingScreenId, -// minWidth: 1280, -// maxWidth: 1280, -// minHeight: 720, -// maxHeight: 720 -// } -// } -// })); -/// return navigator.mediaDevices.getUserMedia({ -/// audio: false, -/// video: { -/// mandatory: { -/// chromeMediaSource: 'desktop', -/// chromeMediaSourceId: desktopSharingScreenId, -/// minWidth: 1280, -/// maxWidth: 1280, -/// minHeight: 720, -/// maxHeight: 720 -/// } -/// } -/// }); -//}; -document.addEventListener('electron-open-pdf', function (e) { - console.log(''); - console.log('----------------------------'); - console.log('electron-open-pdf', e); - console.log('data',e.data) - console.log('----------------------------'); - console.log(''); - ipcRendererShareScreen.send('electron-open-pdf',{'url':e.data.url}); -}); -document.addEventListener('call-media-ss-update', function (e) { - console.log(''); - console.log('----------------------------'); - console.log(key + ' call-media-ss-update', e); - console.log(e.data.started) - console.log('----------------------------'); - console.log(''); - if (e.data.started) { - //screen-share started - console.log('screen-share started'); - isSharing = false; - } else { - isSharing = true; - //screen-share stoped - console.log('screen-share stopped'); - console.log('desktopSharing: ' + desktopSharing); - //if (desktopSharing) { - var els = document.getElementsByName('screen'); - for (var i = 0; i < els.length; i++) { - - if (els[i].checked) { - console.log('Selected Shared screen', '' + els[i].value); - key = ''; - desktopSharing = false; - desktopSharingOptions = false; - desktopSharingScreenId = ''; - els[i].checked = false; - window.document.getElementById('screen-share-box').setAttribute("style", "display: none;"); - //navigator.mediaDevices.getDisplayMedia = default_fn; - - } - } - toggle(); - //} - } -}); -document.addEventListener('call-update-hangup', function (e) { - console.log('[DT] '); - console.log('[DT] ----------------------------'); - console.log('[DT] ' + key + ' call-update-hangup', e); - console.log('[DT] ----------------------------'); - console.log('[DT] '); - isSharing = true; - //screen-share stoped - console.log('screen-share stopped'); - console.log('desktopSharing: ' + desktopSharing); - //if (desktopSharing) { - var els = document.getElementsByName('screen'); - for (var i = 0; i < els.length; i++) { - - if (els[i].checked) { - console.log('Selected Shared screen', '' + els[i].value); - key = ''; - desktopSharing = false; - desktopSharingOptions = false; - desktopSharingScreenId = ''; - els[i].checked = false; - window.document.getElementById('screen-share-box').setAttribute("style", "display: none;"); - //navigator.mediaDevices.getDisplayMedia = default_fn; - - } - } - toggle(); -}) - -function showScreenOptions() { - showSourcesToMain().then(function (sources) { - window.document.getElementById('screen-share-box').setAttribute("style", ""); - manageTabs(); - //console.log('showSourcesToMain', sources); - sources.map(function (s, i) { - addSource(s); - return s; - }); - }); -} - -function refresh() { - console.log('[DT] refresh'); - //if wants to use some plugin to refresh thumbnail images - document.getElementById('buttonCancel').onclick = function (e) { - desktopSharing = false; - desktopSharingOptions = false; - desktopSharingScreenId = ''; - var els = document.getElementsByName('screen'); - for (var i = 0; i < els.length; i++) { - if (els[i].checked) { - els[i].checked = false; - } - } - window.document.getElementById('screen-share-box').setAttribute("style", "display: none;"); - window.document.getElementById('applicationTabContainer').innerHTML = ''; - } - document.getElementById('buttonShare').onclick = function (e) { - console.log('[DT] Button Share Clicked'); - var els = document.getElementsByName('screen'); - for (var i = 0; i < els.length; i++) { - console.log('[DT] buttonShare', els[i].checked, els[i].value); - if (els[i].checked) { - console.log('[DT] Button Share Clicked', 'Selected Screen' + els[i].value); - //desktopSharing = true; - //desktopSharingOptions = true; - desktopSharingScreenId = els[i].value; - window.document.getElementById('screen-share-box').setAttribute("style", "display: none;"); - window.document.getElementById('applicationTabContainer').innerHTML = ''; - toggle(els[i].value); - - } - } - } -} - -function addSource(source) { - console.log('[DT] addSource', source); - var id = source.id;//.split(":").join(""); - var name = source.name; - var imgDataURL = source.thumbnail.toDataURL(); - //add details to any tag - console.log('[DT] source', id,name,(name === 'Entire screen')); - if (name === 'Entire Screen') { - window.document.getElementById('entireImage').src = imgDataURL; - window.document.getElementById('entireRadio').value = id; - window.document.getElementById('entireRadio').checked = false; - window.document.getElementById('entireLabel').innerHTML = name; - } else { - var screens = window.document.getElementById('applicationTabContainer') - var div = window.document.createElement('div') - - var input = window.document.createElement('input') - input.type = 'radio'; - input.checked = false; - input.className = 'radio'; - input.name = 'screen'; - input.value = id; - - var img = window.document.createElement('img') - img.src = imgDataURL; - img.className = 'img'; - var div2 = window.document.createElement('div') - div2.className = 'border'; - var label = window.document.createElement('label') - label.innerHTML = name; - label.style = 'text-overflow: ellipsis; word-break: break-word;'; - - div.appendChild(input); - div.appendChild(img); - div.appendChild(div2); - div.appendChild(label); - screens.appendChild(div); - - } - //console.log(screens) - //refresh(); -} - -//Get all sources available as window or screens -function showSources() { - console.log('[DT] showSources'); - desktopCapturer.getSources({types: ['window', 'screen']}, function (error, sources) { - console.log(sources) - for (let source of sources) { - console.log("[DT] Name: " + source.name); - addSource(source); - } - }); -} - -async function showSourcesToMain() { - console.log('[DT] showSourcesToMain'); - return await desktopCapturer.getSources({types: ['window', 'screen']}); - // , function(error, sources) {console.log(sources) - // for (let source of sources) { - // console.log("Name: " + source.name); - // addSource(source); - // } - // }); -} - - -function toggle(id) { - console.log('[DT] fn:toggle', id); - console.log('[DT] if:desktopSharing', desktopSharing); - if (!desktopSharing) { - // var id = ($('select').val()).replace(/window|screen/g, function(match) { return match + ":"; }); - onAccessApproved(id); - } else { - desktopSharing = false; - - if (localStream) - localStream.getTracks()[0].stop(); - localStream = null; - - // document.querySelector('button').innerHTML = "Enable Capture"; - - // $('select').empty(); - // window.document.getElementById('screens').innerHTML = ''; - // showSources(); - // refresh(); - } -} - -function onAccessApproved(desktop_id) { - console.log('[DT] fn:onAccessApproved', desktop_id); - console.log('[DT] if:(!desktop_id)', desktop_id); - if (!desktop_id) { - console.log('[DT] Desktop Capture access rejected.'); - return; - } - desktopSharing = true; - desktopSharingOptions = true; - - console.log("[DT] Desktop sharing started.. desktop_id:" + desktop_id); - //console.log('key', key); - // navigator.webkitGetUserMedia({ - // audio: false, - // video: { - // mandatory: { - // chromeMediaSource: 'desktop', - // chromeMediaSourceId: desktop_id, - // minWidth: 1280, - // maxWidth: 1280, - // minHeight: 720, - // maxHeight: 720 - // } - // } - // }, gotStream, getUserMediaError); - try { - // navigator.mediaDevices.getUserMedia({audio: false, - // video: { - // mandatory: { - // chromeMediaSource: 'desktop', - // chromeMediaSourceId: desktop_id, - // minWidth: 1280, - // maxWidth: 1280, - // minHeight: 720, - // maxHeight: 720 - // } - // }}).then(streamId => { return streamId;}) - if (key === 'sorces1') { - - // var media = navigator.mediaDevices.getDisplayMedia({audio: false, video: {cursor: "always"}}).then(function (media) { - // return media; - // }) - // .catch(err => { - // console.error("Error:" + err); - // return null; - // }); - // console.log(''); - // console.log('-------------'); - // console.log(media); - // console.log('-------------'); - // console.log(''); - } else if (key === 'sources2') { - console.log('[DT] Sources2: elseif') - navigator.mediaDevices.getDisplayMedia = function () { - console.log('[DT] navigator.mediaDevices.getDisplayMedia ', 'sources2: ' + desktop_id); - if (!desktopSharing) { - return null; - } - return navigator.mediaDevices.getUserMedia({ - audio: false, - video: { - mandatory: { - chromeMediaSource: 'desktop', - chromeMediaSourceId: desktop_id, - minWidth: 1280, - maxWidth: 1280, - minHeight: 720, - maxHeight: 720 - } - } - }); - }; - - - } else if (key === 'sources1') { - - console.log('[DT] Sources1: elseif') - navigator.mediaDevices.getDisplayMedia = () => { - console.log('navigator.mediaDevices.getDisplayMedia ', 'sources1: ' + desktop_id); - if (!desktopSharing) { - return null; - } - return navigator.mediaDevices.getUserMedia({ - audio: false, - video: { - mandatory: { - chromeMediaSource: 'desktop', - chromeMediaSourceId: desktop_id, - minWidth: 1280, - maxWidth: 1280, - minHeight: 720, - maxHeight: 720 - } - } - }).then((stream) => { - console.log('[DT] navigator.mediaDevices.getDisplayMedia ', 'THEN'); - stream.onremovetrack = () => { - //stream.addEventListener('removetrack', function(){ - //stream.getVideoTracks()[0].addEventListener('removetrack', () => { - console.log('---------------------------------'); - console.log('Screen Share Stopped'); - console.log('---------------------------------'); - if (desktopSharing) { - toggle(); - } - }; - return stream; - }).catch((e) => { - console.log(e); - return null; - }); - }; - } else if (key === 'sources3') { - console.log('[DT] sources3'); - if (navigator.mediaDevices.getDisplayMedia === default_fn) { - - } else { - - } - navigator.mediaDevices.getDisplayMedia = () => { - //navigator.mediaDevices.getDisplayMedia = async () => { - - console.log('[DT] navigator.mediaDevices.getDisplayMedia ', key + ": " + desktop_id); - console.log('navigator.mediaDevices.getDisplayMedia: !desktopSharing', (!desktopSharing)); - console.log('navigator.mediaDevices.getDisplayMedia: !desktopSharingOptions', (!desktopSharingOptions)); - console.log('navigator.mediaDevices.getDisplayMedia: desktop_id===\'\'', (desktop_id === '')); - - console.log('[DT] id available return stream: ', desktopSharingScreenId) - //return ((!desktopSharing || !desktopSharingOptions || desktopSharingScreenId==='')?default_fn:navigator.mediaDevices.getUserMedia({ - //return ((!desktopSharing || !desktopSharingOptions || desktop_id==='')?default_fn:navigator.mediaDevices.getUserMedia({ - //return await getScreenId(); - return navigator.mediaDevices.getUserMedia({ - audio: false, - video: { - mandatory: { - chromeMediaSource: 'desktop', - chromeMediaSourceId: desktopSharingScreenId, - minWidth: 1280, - maxWidth: 1280, - minHeight: 720, - maxHeight: 720 - } - } - }).then(function (stream) { - console.log('Stream resolved'); - return stream; - }).catch(function (e) { - console.log(e) - }); - } - //navigator.mediaDevices.getDisplayMedia(); - } else {//if(key==='sources') - - console.log('[DT] ' + key + ': else') - console.log('[DT] desktop_id : ' + desktop_id) - - - //navigator.mediaDevices.getDisplayMedia = () => { - // console.log('navigator.mediaDevices.getDisplayMedia ',key+": "+desktop_id); - // if(!desktopSharing){return null;} - // return navigator.mediaDevices.getUserMedia({ - // audio: false, - // video: { - // mandatory: { - // chromeMediaSource: 'desktop', - // chromeMediaSourceId: desktop_id, - /// minWidth: 1280, - // maxWidth: 1280, - // minHeight: 720, - /// maxHeight: 720 - // } - // } - // }); - //}; - // const stream = await navigator.mediaDevices.getUserMedia({ - // audio: false, - // video: { - // mandatory: { - // chromeMediaSource: 'desktop', - // chromeMediaSourceId: desktop_id, - // minWidth: 1280, - // maxWidth: 1280, - // minHeight: 720, - // maxHeight: 720 - // } - // } - // }) - // handleStream(stream) - // gotStream(stream) - } - } catch (e) { - // handleError(e) - getUserMediaError(e) - } - // return -} - -function gotStream(stream) { - //console.log('gotStream',stream); - //console.log('gotStream',stream.getVideoTracks()); - //console.log('gotStream',document.querySelector('video').srcObject); - localStream = stream; - // document.querySelector('video').src = window.URL.createObjectURL(stream); - document.querySelector('video').srcObject = stream; - stream.onended = function () { - if (desktopSharing) { - toggle(); - } - }; -} - -function getUserMediaError(e) { - console.log(e) - console.log('[DT] getUserMediaError: ' + JSON.stringify(e, null, '---')); -} - -function manageTabs() { - console.log('[DT] manageTabs'); - var entireTab = document.getElementById("entireTab"); - var applicationTab = document.getElementById("applicationTab"); - var entireTabContainer = document.getElementById("entireTabContainer"); - var applicationTabContainer = document.getElementById("applicationTabContainer"); - - entireTab.parentElement.className = "active" - applicationTab.parentElement.className = ""; - - entireTabContainer.style.display = "flex"; - applicationTabContainer.style.display = "none"; - - var entireTab = document.getElementById("entireTab"); - var applicationTab = document.getElementById("applicationTab"); - var entireTabContainer = document.getElementById("entireTabContainer"); - var applicationTabContainer = document.getElementById("applicationTabContainer"); - entireTabContainer.style.display = "flex" - applicationTabContainer.style.display = "none"; - entireTab.onclick = function () { - entireTab.parentElement.className = "active" - applicationTab.parentElement.className = ""; - - entireTabContainer.style.display = "flex" - applicationTabContainer.style.display = "none"; - } - applicationTab.onclick = function () { - entireTab.parentElement.className = "" - applicationTab.parentElement.className = "active"; - - entireTabContainer.style.display = "none" - applicationTabContainer.style.display = "flex"; - - } -} - -var interval; - -async function getScreenId() { - console.log('[DT] getScreenId ') - return new Promise((res, rej) => { - interval = setInterval(() => { - console.log('[DT] getScreenId ', interval) - if (desktopSharingScreenId !== '') { - clearInterval(interval); - console.log('[DT] getScreenId resolve', interval) - //res(desktopSharingScreenId) - res(navigator.mediaDevices.getUserMedia({ - audio: false, - video: { - mandatory: { - chromeMediaSource: 'desktop', - chromeMediaSourceId: desktopSharingScreenId, - minWidth: 1280, - maxWidth: 1280, - minHeight: 720, - maxHeight: 720 - } - } - })); - } - if (window.document.getElementById('screen-share-box').getAttribute("style") === "display: none;") { - clearInterval(interval); - console.log('[DT] getScreenId reject', interval) - rej(null); - } - }, 1000) - }); - - -} - -function printL(a, b) { - console.log('[DT]'); - console.log('[DT] ---------------------------------------'); - console.log(a, b); - console.log('[DT] ---------------------------------------'); - console.log('[DT]'); -} +const {desktopCapturer} = require('electron'); +const ipcRendererShareScreen = require('electron').ipcRenderer; + +var key = ''; + +//used to manage/handle screen share start / stop --> +let init = true; +let isDef = false; +var desktopSharing = false; +var desktopSharingOptions = false; +var desktopSharingScreenId = ''; +let defaultFnGetDisplayMedia = navigator.mediaDevices.getDisplayMedia; +let localStream; +var isSharing = true; + +let streamPromiseFnReject = null; +let streamPromiseFnResolve = null; + +ipcRendererShareScreen.on('share-screen', function (event, message) { + var msgJSON = JSON.parse(message); + console.log('[DT] share-screen IPC_RENDERER', message); + + key = msgJSON.key; + switch (msgJSON.key) { + case 'sources1': + case 'sources2': + case 'sources3': + case 'sources': + printL('[DT] ipcRendererShareScreen.on(share-screen > desktopSharing: ', desktopSharing); + printL('ipcRendererShareScreen.on(share-screen > desktopSharingOptions: ', desktopSharingOptions); + printL('ipcRendererShareScreen.on(share-screen > desktopSharingScreenId: ', desktopSharingScreenId); + printL('ipcRendererShareScreen.on(share-screen > CONDITION: ', (!desktopSharing || !desktopSharingOptions || desktopSharingScreenId === '')); + init = false; + if (!desktopSharing || !desktopSharingOptions || desktopSharingScreenId === '') { + printL('ipcRendererShareScreen.on(share-screen > isSharing: ', isSharing); + if (isSharing) { + showSourcesToMain().then(function (sources) { + window.document.getElementById('screen-share-box').setAttribute("style", ""); + + manageTabs(); + console.log('showSourcesToMain', sources); + sources.map(function (s, i) { + addSource(s); + if ((i + 1) === sources.length) { + overrideGetDisplayMedia(); + } + return s; + }); + }); + } else { + } + } else { + //toggle(desktopSharingScreenId); + } + break; + // ipcRendererShareScreen.send('share-screen',{'sources':sources}); + } +}); + +function overrideGetDisplayMedia() { + printL('[DT] overrideGetDisplayMedia: ', 'new Promise'); + document.getElementById('buttonCancel').onclick = function (e) { + printL('[DT] overrideGetDisplayMedia: ', 'new Promise > button Cancel > click'); +// desktopSharing = false; + desktopSharingOptions = false; + desktopSharingScreenId = ''; + var els = document.getElementsByName('screen'); + for (var i = 0; i < els.length; i++) { + if (els[i].checked) { + els[i].checked = false; + } + } + isSharing = true; + window.document.getElementById('screen-share-box').setAttribute("style", "display: none;"); + window.document.getElementById('applicationTabContainer').innerHTML = ''; + if (streamPromiseFnReject) { + streamPromiseFnReject(); + streamPromiseFnReject = null; + streamPromiseFnResolve = null; + } + toggle(); + } + document.getElementById('buttonShare').onclick = function (e) { + printL('[DT] overrideGetDisplayMedia: ', 'new Promise > button Share > click'); + var els = document.getElementsByName('screen'); + for (var i = 0; i < els.length; i++) { + //console.log(els[i].checked, els[i].value) + if (els[i].checked) { + //console.log('Button Share Clicked', 'Selected Screen'+els[i].value); + printL('[DT] overrideGetDisplayMedia: ', 'new Promise > button Share > screen selected: ' + els[i].value); + desktopSharing = true; + //desktopSharingOptions = true; + desktopSharingScreenId = els[i].value; + window.document.getElementById('screen-share-box').setAttribute("style", "display: none;"); + window.document.getElementById('applicationTabContainer').innerHTML = ''; + //toggle(els[i].value); + printL('[DT] overrideGetDisplayMedia: ', 'new Promise > button Share > promise resolve: '); + isSharing = false; + + if (streamPromiseFnResolve) { + navigator.mediaDevices.getUserMedia({ + audio: false, + video: { + mandatory: { + chromeMediaSource: 'desktop', + chromeMediaSourceId: desktopSharingScreenId, + minWidth: 1280, + maxWidth: 1280, + minHeight: 720, + maxHeight: 720 + } + } + }).then(function (stream) { + printL('[DT] overrideGetDisplayMedia: ', 'new Promise > button Share > promise resolve: Stream resolved'); + + streamPromiseFnResolve(stream); + streamPromiseFnReject = null; + streamPromiseFnResolve = null; + }).catch(function (e) { + console.log(e); + streamPromiseFnReject(); + streamPromiseFnReject = null; + streamPromiseFnResolve = null; + }); + } + } + } + } +} + +navigator.mediaDevices.getDisplayMedia = () => { + console.log('[DT] navigator.mediaDevices.getDisplayMedia'); + defaultFnGetDisplayMedia.call(navigator.mediaDevices); + if (streamPromiseFnReject) { + console.log('[DT] if streamPromiseFnReject true: stream Promise Reject');//15:20 + streamPromiseFnReject(); + streamPromiseFnReject = null; + streamPromiseFnResolve = null; + } + +console.log('[DT] Created: stream Promise Reject');//15:20 + const streamPromise = new Promise((resolve, reject) => { + streamPromiseFnReject = reject; + streamPromiseFnResolve = resolve; + }); + return streamPromise; +}; + +//navigator.mediaDevices.getDisplayMedia = () => { +// +// console.log('navigator.mediaDevices.getDisplayMedia ',key+": "+desktopSharingScreenId); +// console.log('navigator.mediaDevices.getDisplayMedia: !desktopSharing', (!desktopSharing)); +// console.log('navigator.mediaDevices.getDisplayMedia: !desktopSharingOptions', (!desktopSharingOptions)); +// console.log('navigator.mediaDevices.getDisplayMedia: desktopSharingScreenId===\'\'', (desktopSharingScreenId==='')); +// if(!init){ +// if(!desktopSharing || !desktopSharingOptions || desktopSharingScreenId===''){ +// console.log('Show Sharing screen options window:'); +// showScreenOptions(); +// return null; +// } +// } +// console.log('id available return stream: ',desktopSharingScreenId) +// return (((!init)||(!desktopSharing || !desktopSharingOptions || desktopSharingScreenId===''))?default_fn:navigator.mediaDevices.getUserMedia({ +// audio: false, +// video: { +// mandatory: { +// chromeMediaSource: 'desktop', +// chromeMediaSourceId: desktopSharingScreenId, +// minWidth: 1280, +// maxWidth: 1280, +// minHeight: 720, +// maxHeight: 720 +// } +// } +// })); +/// return navigator.mediaDevices.getUserMedia({ +/// audio: false, +/// video: { +/// mandatory: { +/// chromeMediaSource: 'desktop', +/// chromeMediaSourceId: desktopSharingScreenId, +/// minWidth: 1280, +/// maxWidth: 1280, +/// minHeight: 720, +/// maxHeight: 720 +/// } +/// } +/// }); +//}; +document.addEventListener('electron-open-pdf', function (e) { + console.log(''); + console.log('----------------------------'); + console.log('electron-open-pdf', e); + console.log('data', e.data) + console.log('----------------------------'); + console.log(''); + ipcRendererShareScreen.send('electron-open-pdf', {'url': e.data.url}); +}); +document.addEventListener('call-media-ss-update', function (e) { + console.log(''); + console.log('----------------------------'); + console.log(key + ' call-media-ss-update', e); + console.log(e.data.started) + console.log('----------------------------'); + console.log(''); + if (e.data.started) { + //screen-share started + console.log('screen-share started'); + isSharing = false; + } else { + isSharing = true; + //screen-share stoped + console.log('screen-share stopped'); + console.log('desktopSharing: ' + desktopSharing); + //if (desktopSharing) { + var els = document.getElementsByName('screen'); + for (var i = 0; i < els.length; i++) { + + if (els[i].checked) { + console.log('Selected Shared screen', '' + els[i].value); + key = ''; +//15:20 desktopSharing = false; + desktopSharingOptions = false; + desktopSharingScreenId = ''; + els[i].checked = false; + window.document.getElementById('screen-share-box').setAttribute("style", "display: none;"); + //navigator.mediaDevices.getDisplayMedia = default_fn; + + } + } + toggle(); + //} + } +}); +document.addEventListener('call-update-hangup', function (e) { + console.log('[DT] '); + console.log('[DT] ----------------------------'); + console.log('[DT] ' + key + ' call-update-hangup', e); + console.log('[DT] ----------------------------'); + console.log('[DT] '); + isSharing = true; + //screen-share stoped + console.log('screen-share stopped'); + console.log('desktopSharing: ' + desktopSharing); + //if (desktopSharing) { +//15:20 var els = document.getElementsByName('screen'); +//15:20 for (var i = 0; i < els.length; i++) { +//15:20 +//15:20 if (els[i].checked) { +//15:20 console.log('Selected Shared screen', '' + els[i].value); + key = ''; +//15:20 desktopSharing = false; + desktopSharingOptions = false; + desktopSharingScreenId = ''; +//15:20 els[i].checked = false; + window.document.getElementById('screen-share-box').setAttribute("style", "display: none;"); + //navigator.mediaDevices.getDisplayMedia = default_fn; + +//15:20 } +//15:20 } + toggle(); +}) + +function showScreenOptions() { + showSourcesToMain().then(function (sources) { + window.document.getElementById('screen-share-box').setAttribute("style", ""); + manageTabs(); + //console.log('showSourcesToMain', sources); + sources.map(function (s, i) { + addSource(s); + return s; + }); + }); +} + +function refresh() { + console.log('[DT] refresh'); + //if wants to use some plugin to refresh thumbnail images + document.getElementById('buttonCancel').onclick = function (e) { + desktopSharing = false; + desktopSharingOptions = false; + desktopSharingScreenId = ''; + var els = document.getElementsByName('screen'); + for (var i = 0; i < els.length; i++) { + if (els[i].checked) { + els[i].checked = false; + } + } + window.document.getElementById('screen-share-box').setAttribute("style", "display: none;"); + window.document.getElementById('applicationTabContainer').innerHTML = ''; + } + document.getElementById('buttonShare').onclick = function (e) { + console.log('[DT] Button Share Clicked'); + var els = document.getElementsByName('screen'); + for (var i = 0; i < els.length; i++) { + console.log('[DT] buttonShare', els[i].checked, els[i].value); + if (els[i].checked) { + console.log('[DT] Button Share Clicked', 'Selected Screen' + els[i].value); + //desktopSharing = true; + //desktopSharingOptions = true; + desktopSharingScreenId = els[i].value; + window.document.getElementById('screen-share-box').setAttribute("style", "display: none;"); + window.document.getElementById('applicationTabContainer').innerHTML = ''; + toggle(els[i].value); + + } + } + } +} + +function addSource(source) { + console.log('[DT] addSource', source); + var id = source.id;//.split(":").join(""); + var name = source.name; + var imgDataURL = source.thumbnail.toDataURL(); + //add details to any tag + console.log('[DT] source', id, name, (name === 'Entire screen')); + if (name === 'Entire Screen') { + window.document.getElementById('entireImage').src = imgDataURL; + window.document.getElementById('entireRadio').value = id; + window.document.getElementById('entireRadio').checked = false; + window.document.getElementById('entireLabel').innerHTML = name; + } else { + var screens = window.document.getElementById('applicationTabContainer') + var div = window.document.createElement('div') + + var input = window.document.createElement('input') + input.type = 'radio'; + input.checked = false; + input.className = 'radio'; + input.name = 'screen'; + input.value = id; + + var img = window.document.createElement('img') + img.src = imgDataURL; + img.className = 'img'; + var div2 = window.document.createElement('div') + div2.className = 'border'; + var label = window.document.createElement('label') + label.innerHTML = name; + label.style = 'text-overflow: ellipsis; word-break: break-word;'; + + div.appendChild(input); + div.appendChild(img); + div.appendChild(div2); + div.appendChild(label); + screens.appendChild(div); + + } + //console.log(screens) + //refresh(); +} + +//Get all sources available as window or screens +function showSources() { + console.log('[DT] showSources'); + desktopCapturer.getSources({types: ['window', 'screen']}, function (error, sources) { + console.log(sources) + for (let source of sources) { + console.log("[DT] Name: " + source.name); + addSource(source); + } + }); +} + +async function showSourcesToMain() { + console.log('[DT] showSourcesToMain'); + return await desktopCapturer.getSources({types: ['window', 'screen']}); + // , function(error, sources) {console.log(sources) + // for (let source of sources) { + // console.log("Name: " + source.name); + // addSource(source); + // } + // }); +} + + +function toggle(id) { + console.log('[DT] fn:toggle', id); + console.log('[DT] if:desktopSharing', desktopSharing); + if (!desktopSharing) { + // var id = ($('select').val()).replace(/window|screen/g, function(match) { return match + ":"; }); + onAccessApproved(id); + } else { + desktopSharing = false; + + if (localStream) + localStream.getTracks()[0].stop(); + localStream = null; + + // document.querySelector('button').innerHTML = "Enable Capture"; + + // $('select').empty(); + // window.document.getElementById('screens').innerHTML = ''; + // showSources(); + // refresh(); + } +} + +function onAccessApproved(desktop_id) { + console.log('[DT] fn:onAccessApproved', desktop_id); + console.log('[DT] if:(!desktop_id)', desktop_id); + if (!desktop_id) { + console.log('[DT] Desktop Capture access rejected.'); + return; + } + desktopSharing = true; + desktopSharingOptions = true; + + console.log("[DT] Desktop sharing started.. desktop_id:" + desktop_id); + //console.log('key', key); + // navigator.webkitGetUserMedia({ + // audio: false, + // video: { + // mandatory: { + // chromeMediaSource: 'desktop', + // chromeMediaSourceId: desktop_id, + // minWidth: 1280, + // maxWidth: 1280, + // minHeight: 720, + // maxHeight: 720 + // } + // } + // }, gotStream, getUserMediaError); + try { + // navigator.mediaDevices.getUserMedia({audio: false, + // video: { + // mandatory: { + // chromeMediaSource: 'desktop', + // chromeMediaSourceId: desktop_id, + // minWidth: 1280, + // maxWidth: 1280, + // minHeight: 720, + // maxHeight: 720 + // } + // }}).then(streamId => { return streamId;}) + if (key === 'sorces1') { + + // var media = navigator.mediaDevices.getDisplayMedia({audio: false, video: {cursor: "always"}}).then(function (media) { + // return media; + // }) + // .catch(err => { + // console.error("Error:" + err); + // return null; + // }); + // console.log(''); + // console.log('-------------'); + // console.log(media); + // console.log('-------------'); + // console.log(''); + } else if (key === 'sources2') { + console.log('[DT] Sources2: elseif') + navigator.mediaDevices.getDisplayMedia = function () { + console.log('[DT] navigator.mediaDevices.getDisplayMedia ', 'sources2: ' + desktop_id); + if (!desktopSharing) { + return null; + } + return navigator.mediaDevices.getUserMedia({ + audio: false, + video: { + mandatory: { + chromeMediaSource: 'desktop', + chromeMediaSourceId: desktop_id, + minWidth: 1280, + maxWidth: 1280, + minHeight: 720, + maxHeight: 720 + } + } + }); + }; + + + } else if (key === 'sources1') { + + console.log('[DT] Sources1: elseif') + navigator.mediaDevices.getDisplayMedia = () => { + console.log('navigator.mediaDevices.getDisplayMedia ', 'sources1: ' + desktop_id); + if (!desktopSharing) { + return null; + } + return navigator.mediaDevices.getUserMedia({ + audio: false, + video: { + mandatory: { + chromeMediaSource: 'desktop', + chromeMediaSourceId: desktop_id, + minWidth: 1280, + maxWidth: 1280, + minHeight: 720, + maxHeight: 720 + } + } + }).then((stream) => { + console.log('[DT] navigator.mediaDevices.getDisplayMedia ', 'THEN'); + stream.onremovetrack = () => { + //stream.addEventListener('removetrack', function(){ + //stream.getVideoTracks()[0].addEventListener('removetrack', () => { + console.log('---------------------------------'); + console.log('Screen Share Stopped'); + console.log('---------------------------------'); + if (desktopSharing) { + toggle(); + } + }; + return stream; + }).catch((e) => { + console.log(e); + return null; + }); + }; + } else if (key === 'sources3') { + console.log('[DT] sources3'); + if (navigator.mediaDevices.getDisplayMedia === default_fn) { + + } else { + + } + navigator.mediaDevices.getDisplayMedia = () => { + //navigator.mediaDevices.getDisplayMedia = async () => { + + console.log('[DT] navigator.mediaDevices.getDisplayMedia ', key + ": " + desktop_id); + console.log('navigator.mediaDevices.getDisplayMedia: !desktopSharing', (!desktopSharing)); + console.log('navigator.mediaDevices.getDisplayMedia: !desktopSharingOptions', (!desktopSharingOptions)); + console.log('navigator.mediaDevices.getDisplayMedia: desktop_id===\'\'', (desktop_id === '')); + + console.log('[DT] id available return stream: ', desktopSharingScreenId) + //return ((!desktopSharing || !desktopSharingOptions || desktopSharingScreenId==='')?default_fn:navigator.mediaDevices.getUserMedia({ + //return ((!desktopSharing || !desktopSharingOptions || desktop_id==='')?default_fn:navigator.mediaDevices.getUserMedia({ + //return await getScreenId(); + return navigator.mediaDevices.getUserMedia({ + audio: false, + video: { + mandatory: { + chromeMediaSource: 'desktop', + chromeMediaSourceId: desktopSharingScreenId, + minWidth: 1280, + maxWidth: 1280, + minHeight: 720, + maxHeight: 720 + } + } + }).then(function (stream) { + console.log('Stream resolved'); + return stream; + }).catch(function (e) { + console.log(e) + }); + } + //navigator.mediaDevices.getDisplayMedia(); + } else {//if(key==='sources') + + console.log('[DT] ' + key + ': else') + console.log('[DT] desktop_id : ' + desktop_id) + + + //navigator.mediaDevices.getDisplayMedia = () => { + // console.log('navigator.mediaDevices.getDisplayMedia ',key+": "+desktop_id); + // if(!desktopSharing){return null;} + // return navigator.mediaDevices.getUserMedia({ + // audio: false, + // video: { + // mandatory: { + // chromeMediaSource: 'desktop', + // chromeMediaSourceId: desktop_id, + /// minWidth: 1280, + // maxWidth: 1280, + // minHeight: 720, + /// maxHeight: 720 + // } + // } + // }); + //}; + // const stream = await navigator.mediaDevices.getUserMedia({ + // audio: false, + // video: { + // mandatory: { + // chromeMediaSource: 'desktop', + // chromeMediaSourceId: desktop_id, + // minWidth: 1280, + // maxWidth: 1280, + // minHeight: 720, + // maxHeight: 720 + // } + // } + // }) + // handleStream(stream) + // gotStream(stream) + } + } catch (e) { + // handleError(e) + getUserMediaError(e) + } + // return +} + +function gotStream(stream) { + //console.log('gotStream',stream); + //console.log('gotStream',stream.getVideoTracks()); + //console.log('gotStream',document.querySelector('video').srcObject); + localStream = stream; + // document.querySelector('video').src = window.URL.createObjectURL(stream); + document.querySelector('video').srcObject = stream; + stream.onended = function () { + if (desktopSharing) { + toggle(); + } + }; +} + +function getUserMediaError(e) { + console.log(e) + console.log('[DT] getUserMediaError: ' + JSON.stringify(e, null, '---')); +} + +function manageTabs() { + console.log('[DT] manageTabs'); + var entireTab = document.getElementById("entireTab"); + var applicationTab = document.getElementById("applicationTab"); + var entireTabContainer = document.getElementById("entireTabContainer"); + var applicationTabContainer = document.getElementById("applicationTabContainer"); + + entireTab.parentElement.className = "active" + applicationTab.parentElement.className = ""; + + entireTabContainer.style.display = "flex"; + applicationTabContainer.style.display = "none"; + + var entireTab = document.getElementById("entireTab"); + var applicationTab = document.getElementById("applicationTab"); + var entireTabContainer = document.getElementById("entireTabContainer"); + var applicationTabContainer = document.getElementById("applicationTabContainer"); + entireTabContainer.style.display = "flex" + applicationTabContainer.style.display = "none"; + entireTab.onclick = function () { + entireTab.parentElement.className = "active" + applicationTab.parentElement.className = ""; + + entireTabContainer.style.display = "flex" + applicationTabContainer.style.display = "none"; + } + applicationTab.onclick = function () { + entireTab.parentElement.className = "" + applicationTab.parentElement.className = "active"; + + entireTabContainer.style.display = "none" + applicationTabContainer.style.display = "flex"; + + } +} + +var interval; + +async function getScreenId() { + console.log('[DT] getScreenId ') + return new Promise((res, rej) => { + interval = setInterval(() => { + console.log('[DT] getScreenId ', interval) + if (desktopSharingScreenId !== '') { + clearInterval(interval); + console.log('[DT] getScreenId resolve', interval) + //res(desktopSharingScreenId) + res(navigator.mediaDevices.getUserMedia({ + audio: false, + video: { + mandatory: { + chromeMediaSource: 'desktop', + chromeMediaSourceId: desktopSharingScreenId, + minWidth: 1280, + maxWidth: 1280, + minHeight: 720, + maxHeight: 720 + } + } + })); + } + if (window.document.getElementById('screen-share-box').getAttribute("style") === "display: none;") { + clearInterval(interval); + console.log('[DT] getScreenId reject', interval) + rej(null); + } + }, 1000) + }); + + +} + +function printL(a, b) { + console.log('[DT]'); + console.log('[DT] ---------------------------------------'); + console.log(a, b); + console.log('[DT] ---------------------------------------'); + console.log('[DT]'); +} \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 453f0231dadf191aed7aa7afc28be1c07280fe58..d814d0d3fb7b7fefa889f7e5f0fb7dbfdc6bb94c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2786,9 +2786,9 @@ "dev": true }, "@types/node": { - "version": "10.5.5", - "resolved": "http://artifactory.amz.mtmemgmt.com:80/artifactory/api/npm/npm-tmg-local/@types/node/-/node-10.5.5.tgz?dl=https://registry.npmjs.org/@types/node/-/node-10.5.5.tgz", - "integrity": "sha1-joTSTols13sNT3PfJ0An4xSewro=", + "version": "13.5.3", + "resolved": "https://registry.npmjs.org/@types/node/-/node-13.5.3.tgz", + "integrity": "sha512-ZPnWX9PW992w6DUsz3JIXHaSb5v7qmKCVzC3km6SxcDGxk7zmLfYaCJTbktIa5NeywJkkZDhGldKqDIvC5DRrA==", "dev": true }, "@types/react": { @@ -4006,6 +4006,16 @@ "integrity": "sha1-RqoXUftqL5PuXmibsQh9SxTGwgU=", "dev": true }, + "bindings": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz", + "integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==", + "dev": true, + "optional": true, + "requires": { + "file-uri-to-path": "1.0.0" + } + }, "blob": { "version": "0.0.5", "resolved": "https://registry.npmjs.org/blob/-/blob-0.0.5.tgz", @@ -5848,18 +5858,18 @@ "dev": true }, "compressible": { - "version": "2.0.17", - "resolved": "https://registry.npmjs.org/compressible/-/compressible-2.0.17.tgz", - "integrity": "sha512-BGHeLCK1GV7j1bSmQQAi26X+GgWcTjLr/0tzSvMCl3LH1w1IJ4PFSPoV5316b30cneTziC+B1a+3OjoSUcQYmw==", + "version": "2.0.18", + "resolved": "https://registry.npmjs.org/compressible/-/compressible-2.0.18.tgz", + "integrity": "sha512-AF3r7P5dWxL8MxyITRMlORQNaOA2IkAFaTr4k7BUumjPtRpGDTZpl0Pb1XCO6JeDCBdp126Cgs9sMxqSjgYyRg==", "dev": true, "requires": { - "mime-db": ">= 1.40.0 < 2" + "mime-db": ">= 1.43.0 < 2" }, "dependencies": { "mime-db": { - "version": "1.42.0", - "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.42.0.tgz", - "integrity": "sha512-UbfJCR4UAVRNgMpfImz05smAXK7+c+ZntjaA26ANtkXLlOe947Aag5zdIcKQULAiF9Cq4WxBi9jUs5zkA84bYQ==", + "version": "1.43.0", + "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.43.0.tgz", + "integrity": "sha512-+5dsGEEovYbT8UY9yD7eE4XTc4UwJ1jBYlgaQQF38ENsKR3wj/8q8RFZrF9WIZpB2V1ArTVFUva8sAul1NzRzQ==", "dev": true } } @@ -8567,6 +8577,13 @@ "integrity": "sha1-JXoHg4TR24CHvESdEH1SpSZyuek=", "dev": true }, + "file-uri-to-path": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz", + "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==", + "dev": true, + "optional": true + }, "filename-regex": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/filename-regex/-/filename-regex-2.0.1.tgz", @@ -13079,9 +13096,9 @@ "dev": true }, "loglevel": { - "version": "1.6.4", - "resolved": "https://registry.npmjs.org/loglevel/-/loglevel-1.6.4.tgz", - "integrity": "sha512-p0b6mOGKcGa+7nnmKbpzR6qloPbrgLcnio++E+14Vo/XffOGwZtRpUhr8dTH/x2oCMmEoIU0Zwm3ZauhvYD17g==", + "version": "1.6.6", + "resolved": "https://registry.npmjs.org/loglevel/-/loglevel-1.6.6.tgz", + "integrity": "sha512-Sgr5lbboAUBo3eXCSPL4/KoVz3ROKquOjcctxmHIt+vol2DrqTQe3SwkKKuYhEiWB5kYa13YyopJ69deJ1irzQ==", "dev": true }, "longest": { @@ -17671,9 +17688,9 @@ "dev": true }, "readable-stream": { - "version": "3.4.0", - "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.4.0.tgz", - "integrity": "sha512-jItXPLmrSR8jmTRmRWJXCnGJsfy85mB3Wd/uINMXA65yrnFo0cPClFIUWzo2najVNSl+mx7/4W8ttlLWJe99pQ==", + "version": "3.5.0", + "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.5.0.tgz", + "integrity": "sha512-gSz026xs2LfxBPudDuI41V1lka8cxg64E66SGe78zJlsUofOg/yqwezdIcdfwik6B4h8LFmWPA9ef9X3FiNFLA==", "dev": true, "requires": { "inherits": "^2.0.3", @@ -21297,9 +21314,9 @@ } }, "webpack-dev-server": { - "version": "3.9.0", - "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-3.9.0.tgz", - "integrity": "sha512-E6uQ4kRrTX9URN9s/lIbqTAztwEPdvzVrcmHE8EQ9YnuT9J8Es5Wrd8n9BKg1a0oZ5EgEke/EQFgUsp18dSTBw==", + "version": "3.10.1", + "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-3.10.1.tgz", + "integrity": "sha512-AGG4+XrrXn4rbZUueyNrQgO4KGnol+0wm3MPdqGLmmA+NofZl3blZQKxZ9BND6RDNuvAK9OMYClhjOSnxpWRoA==", "dev": true, "requires": { "ansi-html": "0.0.7", @@ -21317,7 +21334,7 @@ "ip": "^1.1.5", "is-absolute-url": "^3.0.3", "killable": "^1.0.1", - "loglevel": "^1.6.4", + "loglevel": "^1.6.6", "opn": "^5.5.0", "p-retry": "^3.0.1", "portfinder": "^1.0.25", @@ -21667,14 +21684,15 @@ } }, "fsevents": { - "version": "1.2.9", - "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.9.tgz", - "integrity": "sha512-oeyj2H3EjjonWcFjD5NvZNE9Rqe4UW+nQBU2HNeKw0koVLEFIhtyETyAakeAM3de7Z/SW5kcA+fZUait9EApnw==", + "version": "1.2.11", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.11.tgz", + "integrity": "sha512-+ux3lx6peh0BpvY0JebGyZoiR4D+oYzdPZMKJwkZ+sFkNJzpL7tXc/wehS49gUAxg3tmMHPHZkA8JU2rhhgDHw==", "dev": true, "optional": true, "requires": { + "bindings": "^1.5.0", "nan": "^2.12.1", - "node-pre-gyp": "^0.12.0" + "node-pre-gyp": "*" }, "dependencies": { "abbrev": { @@ -21722,7 +21740,7 @@ } }, "chownr": { - "version": "1.1.1", + "version": "1.1.3", "bundled": true, "dev": true, "optional": true @@ -21752,7 +21770,7 @@ "optional": true }, "debug": { - "version": "4.1.1", + "version": "3.2.6", "bundled": true, "dev": true, "optional": true, @@ -21779,12 +21797,12 @@ "optional": true }, "fs-minipass": { - "version": "1.2.5", + "version": "1.2.7", "bundled": true, "dev": true, "optional": true, "requires": { - "minipass": "^2.2.1" + "minipass": "^2.6.0" } }, "fs.realpath": { @@ -21810,7 +21828,7 @@ } }, "glob": { - "version": "7.1.3", + "version": "7.1.6", "bundled": true, "dev": true, "optional": true, @@ -21839,7 +21857,7 @@ } }, "ignore-walk": { - "version": "3.0.1", + "version": "3.0.3", "bundled": true, "dev": true, "optional": true, @@ -21858,7 +21876,7 @@ } }, "inherits": { - "version": "2.0.3", + "version": "2.0.4", "bundled": true, "dev": true, "optional": true @@ -21900,7 +21918,7 @@ "optional": true }, "minipass": { - "version": "2.3.5", + "version": "2.9.0", "bundled": true, "dev": true, "optional": true, @@ -21910,12 +21928,12 @@ } }, "minizlib": { - "version": "1.2.1", + "version": "1.3.3", "bundled": true, "dev": true, "optional": true, "requires": { - "minipass": "^2.2.1" + "minipass": "^2.9.0" } }, "mkdirp": { @@ -21928,24 +21946,24 @@ } }, "ms": { - "version": "2.1.1", + "version": "2.1.2", "bundled": true, "dev": true, "optional": true }, "needle": { - "version": "2.3.0", + "version": "2.4.0", "bundled": true, "dev": true, "optional": true, "requires": { - "debug": "^4.1.0", + "debug": "^3.2.6", "iconv-lite": "^0.4.4", "sax": "^1.2.4" } }, "node-pre-gyp": { - "version": "0.12.0", + "version": "0.14.0", "bundled": true, "dev": true, "optional": true, @@ -21959,7 +21977,7 @@ "rc": "^1.2.7", "rimraf": "^2.6.1", "semver": "^5.3.0", - "tar": "^4" + "tar": "^4.4.2" } }, "nopt": { @@ -21973,13 +21991,22 @@ } }, "npm-bundled": { - "version": "1.0.6", + "version": "1.1.1", + "bundled": true, + "dev": true, + "optional": true, + "requires": { + "npm-normalize-package-bin": "^1.0.1" + } + }, + "npm-normalize-package-bin": { + "version": "1.0.1", "bundled": true, "dev": true, "optional": true }, "npm-packlist": { - "version": "1.4.1", + "version": "1.4.7", "bundled": true, "dev": true, "optional": true, @@ -22050,7 +22077,7 @@ "optional": true }, "process-nextick-args": { - "version": "2.0.0", + "version": "2.0.1", "bundled": true, "dev": true, "optional": true @@ -22091,7 +22118,7 @@ } }, "rimraf": { - "version": "2.6.3", + "version": "2.7.1", "bundled": true, "dev": true, "optional": true, @@ -22118,7 +22145,7 @@ "optional": true }, "semver": { - "version": "5.7.0", + "version": "5.7.1", "bundled": true, "dev": true, "optional": true @@ -22171,18 +22198,18 @@ "optional": true }, "tar": { - "version": "4.4.8", + "version": "4.4.13", "bundled": true, "dev": true, "optional": true, "requires": { "chownr": "^1.1.1", "fs-minipass": "^1.2.5", - "minipass": "^2.3.4", - "minizlib": "^1.1.1", + "minipass": "^2.8.6", + "minizlib": "^1.2.1", "mkdirp": "^0.5.0", "safe-buffer": "^5.1.2", - "yallist": "^3.0.2" + "yallist": "^3.0.3" } }, "util-deprecate": { @@ -22207,7 +22234,7 @@ "optional": true }, "yallist": { - "version": "3.0.3", + "version": "3.1.1", "bundled": true, "dev": true, "optional": true @@ -22344,9 +22371,9 @@ } }, "kind-of": { - "version": "6.0.2", - "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.2.tgz", - "integrity": "sha512-s5kLOcnH0XqDO+FvuaLX8DDjZ18CGFk7VygH40QoKPUQhW4e2rvM0rwUq0t8IQDOwYSeLK01U90OjzBTme2QqA==", + "version": "6.0.3", + "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz", + "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==", "dev": true }, "lcid": { @@ -22423,9 +22450,9 @@ } }, "p-limit": { - "version": "2.2.1", - "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.2.1.tgz", - "integrity": "sha512-85Tk+90UCVWvbDavCLKPOLC9vvY8OwEX/RtKF+/1OADJMVlFfEHOiMTPVyxg7mk/dKa+ipdHm0OUkTvCpMTuwg==", + "version": "2.2.2", + "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.2.2.tgz", + "integrity": "sha512-WGR+xHecKTr7EbUEhyLSh5Dube9JtdiG78ufaeLxTgpudf/20KqyMioIUZJAezlTIi6evxuoUs9YXc11cU+yzQ==", "dev": true, "requires": { "p-try": "^2.0.0" @@ -22479,9 +22506,9 @@ }, "dependencies": { "glob": { - "version": "7.1.5", - "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.5.tgz", - "integrity": "sha512-J9dlskqUXK1OeTOYBEn5s8aMukWMwWfs+rPTn/jn50Ux4MNXVhubL1wu/j2t+H4NVI+cXEcCaYellqaPVGXNqQ==", + "version": "7.1.6", + "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz", + "integrity": "sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==", "dev": true, "requires": { "fs.realpath": "^1.0.0", diff --git a/package.json b/package.json index de465c424c3670e96351c98a57f746f6a093a465..1350fcad9247c19dd4f9ed38467951ba2a2ddb4c 100644 --- a/package.json +++ b/package.json @@ -159,7 +159,7 @@ "webpack-concat-plugin": "^3.0.0", "webpack-cyclic-dependency-checker": "0.0.1", "webpack-dev-middleware": "^3.7.2", - "webpack-dev-server": "^3.8.1", + "webpack-dev-server": "^3.10.1", "webpack-hot-middleware": "^2.25.0", "webpack-md5-hash": "0.0.6" }, diff --git a/src/assets/css/emoji-mart-light.css b/src/assets/css/emoji-mart-light.css new file mode 100644 index 0000000000000000000000000000000000000000..6b65259316acd6a7c41c6f918a086870ced0fed1 --- /dev/null +++ b/src/assets/css/emoji-mart-light.css @@ -0,0 +1,444 @@ +.emoji-mart, +.emoji-mart * { + box-sizing: border-box; + line-height: 1.15; +} + +.emoji-mart { + font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif; + font-size: 16px; + display: inline-block; + color: #24262b; + border: 1px solid #d7d7d7; + border-radius: 5px; + background: #fff; + box-shadow: 0 8px 13px 0 rgba(0,0,0,0.60) +} + +.emoji-mart .emoji-mart-emoji { + padding: 6px; +} + +.emoji-mart-bar { + border: 0 solid #d7d7d7; +} +.emoji-mart-bar:first-child { + border-bottom-width: 1px; + border-top-left-radius: 5px; + border-top-right-radius: 5px; +} +.emoji-mart-bar:last-child { + border-top-width: 1px; + border-bottom-left-radius: 5px; + border-bottom-right-radius: 5px; +} + +.emoji-mart-anchors { + display: flex; + flex-direction: row; + justify-content: space-between; + padding: 0 6px; + color: #1b1c20; + line-height: 0; +} + +.emoji-mart-anchor { + position: relative; + display: block; + flex: 1 1 auto; + text-align: center; + padding: 12px 4px; + overflow: hidden; + transition: color .1s ease-out; + margin: 0; + box-shadow: none; + background: none; + border: none; +} +.emoji-mart-anchor-selected { + color: #464646; +} + +.emoji-mart-anchor:hover{ + background: #61b8c1; + +} + +.emoji-mart-anchor-selected .emoji-mart-anchor-bar { + bottom: 0; +} + +.emoji-mart-anchor-bar { + position: absolute; + bottom: -3px; left: 0; + width: 100%; height: 3px; + background-color: #464646; +} + +.emoji-mart-anchors i { + display: inline-block; + width: 100%; + max-width: 22px; +} + +.emoji-mart-anchors svg { + fill: #27292E; + height: 18px; + width: 18px; +} + +.emoji-mart-anchors img { + fill: #27292E; + height: 22px; + width: 22px; + margin: 0 auto; +} + +.emoji-mart-scroll { + overflow-y: scroll; + height: 270px; + padding: 0 6px 6px 6px; + will-change: transform; /* avoids "repaints on scroll" in mobile Chrome */ +} + +::-webkit-scrollbar { + width: 8px; + min-height: 20px; +} + +::-webkit-scrollbar-track { + display: none; +} + +::-webkit-scrollbar-thumb { + border-radius: 8px; + box-shadow: inset 0 0 6px rgba(0,0,0,0.5); + background-color: '#1B1C20', +} + +.emoji-mart-search { + margin-top: 6px; + padding: 0 6px; + position: relative; +} + +.emoji-mart-search input { + font-size: 16px; + display: block; + width: 100%; + padding: 5px 25px 6px 10px; + border-radius: 5px; + border: 1px solid #d9d9d9; + outline: 0; + margin-bottom: 5px; +} + +.emoji-mart-search input, +.emoji-mart-search input::-webkit-search-decoration, +.emoji-mart-search input::-webkit-search-cancel-button, +.emoji-mart-search input::-webkit-search-results-button, +.emoji-mart-search input::-webkit-search-results-decoration { + /* remove webkit/blink styles for + * via https://stackoverflow.com/a/9422689 */ + -webkit-appearance: none; +} + +.emoji-mart-search-icon { + position: absolute; + top: 7px; + right: 11px; + z-index: 2; + padding: 2px 5px 1px; + border: none; + background: none; +} + +.emoji-mart-category .emoji-mart-emoji span { + z-index: 1; + position: relative; + text-align: center; + cursor: default; +} + +.emoji-mart-category .emoji-mart-emoji:hover:before { + z-index: 0; + content: ""; + position: absolute; + top: 0; left: 0; + width: 100%; height: 100%; + background-color: #d7d7d7; + border-radius: 100%; +} + +.emoji-mart-category-label { + z-index: 2; + position: relative; + position: -webkit-sticky; + position: sticky; + top: 0; +} + +.emoji-mart-category-label span { + display: block; + font-weight: 500; + padding: 5px 6px; + background-color: #fff; + background-color: rgba(255, 255, 255, .95); + margin-right: -5px; + margin-left: -5px; +} + +.emoji-mart-category-list { + margin: 0; + padding: 0; +} + +.emoji-mart-category-list li { + list-style: none; + margin: 0; + padding: 0; + display: inline-block; +} + +.emoji-mart-emoji { + position: relative; + display: inline-block; + font-size: 0; + margin: 0; + padding: 0; + border: none; + background: none; + box-shadow: none; +} + +.emoji-mart-emoji-native { + font-family: "Segoe UI Emoji", "Segoe UI Symbol", "Segoe UI", "Apple Color Emoji", "Twemoji Mozilla", "Noto Color Emoji", "EmojiOne Color", "Android Emoji"; +} + +.emoji-mart-no-results { + font-size: 14px; + text-align: center; + padding-top: 70px; + color: #858585; +} +.emoji-mart-no-results-img { + display: block; + margin-left: auto; + margin-right: auto; + width: 50%; +} +.emoji-mart-no-results .emoji-mart-category-label { + display: none; +} +.emoji-mart-no-results .emoji-mart-no-results-label { + margin-top: .2em; +} +.emoji-mart-no-results .emoji-mart-emoji:hover:before { + content: none; +} + +.emoji-mart-preview { + position: relative; + height: 70px; +} + +.emoji-mart-preview-emoji, +.emoji-mart-preview-data, +.emoji-mart-preview-skins { + position: absolute; + top: 50%; + transform: translateY(-50%); +} + +.emoji-mart-preview-emoji { + left: 12px; +} + +.emoji-mart-preview-data { + left: 68px; right: 12px; + word-break: break-all; +} + +.emoji-mart-preview-skins { + right: 30px; + text-align: right; +} + +.emoji-mart-preview-skins.custom { + right: 10px; + text-align: right; +} + +.emoji-mart-preview-name { + font-size: 14px; +} + +.emoji-mart-preview-shortname { + font-size: 12px; + color: #888; +} +.emoji-mart-preview-shortname + .emoji-mart-preview-shortname, +.emoji-mart-preview-shortname + .emoji-mart-preview-emoticon, +.emoji-mart-preview-emoticon + .emoji-mart-preview-emoticon { + margin-left: .5em; +} + +.emoji-mart-preview-emoticon { + font-size: 11px; + color: #bbb; +} + +.emoji-mart-title span { + display: inline-block; + vertical-align: middle; +} + +.emoji-mart-title .emoji-mart-emoji { + padding: 0; +} + +.emoji-mart-title-label { + color: #999A9C; + font-size: 26px; + font-weight: 300; +} + +.emoji-mart-skin-swatches { + font-size: 0; + padding: 2px 0; + border: 1px solid #d9d9d9; + border-radius: 12px; + background-color: #fff; +} + +.emoji-mart-skin-swatches.custom { + font-size: 0; + border: none; + background-color: #fff; +} + +.emoji-mart-skin-swatches.opened .emoji-mart-skin-swatch { + width: 16px; + padding: 0 2px; +} + +.emoji-mart-skin-swatches.opened .emoji-mart-skin-swatch.selected:after { + opacity: .75; +} + +.emoji-mart-skin-swatch { + display: inline-block; + width: 0; + vertical-align: middle; + transition-property: width, padding; + transition-duration: .125s; + transition-timing-function: ease-out; +} + +.emoji-mart-skin-swatch:nth-child(1) { transition-delay: 0s } +.emoji-mart-skin-swatch:nth-child(2) { transition-delay: .03s } +.emoji-mart-skin-swatch:nth-child(3) { transition-delay: .06s } +.emoji-mart-skin-swatch:nth-child(4) { transition-delay: .09s } +.emoji-mart-skin-swatch:nth-child(5) { transition-delay: .12s } +.emoji-mart-skin-swatch:nth-child(6) { transition-delay: .15s } + +.emoji-mart-skin-swatch.selected { + position: relative; + width: 16px; + padding: 0 2px; +} + +.emoji-mart-skin-swatch.selected:after { + content: ""; + position: absolute; + top: 50%; left: 50%; + width: 4px; height: 4px; + margin: -2px 0 0 -2px; + background-color: #fff; + border-radius: 100%; + pointer-events: none; + opacity: 0; + transition: opacity .2s ease-out; +} + +.emoji-mart-skin-swatch.custom { + display: inline-block; + width: 0; + height: 38px; + overflow: hidden; + vertical-align: middle; + transition-property: width, height; + transition-duration: .125s; + transition-timing-function: ease-out; + cursor: default; +} + +.emoji-mart-skin-swatch.custom.selected { + position: relative; + width: 36px; + height: 38px; + padding: 0 2px 0 0; +} + +.emoji-mart-skin-swatch.custom.selected:after { + content: ""; + width: 0; + height: 0; +} + +.emoji-mart-skin-swatches.custom .emoji-mart-skin-swatch.custom:hover { + background-color: #f4f4f4; + border-radius: 10%; +} + +.emoji-mart-skin-swatches.custom.opened .emoji-mart-skin-swatch.custom { + width: 36px; + height: 38px; + padding: 0 2px 0 0; +} + +.emoji-mart-skin-swatches.custom.opened .emoji-mart-skin-swatch.custom.selected:after { + opacity: .75; +} + +.emoji-mart-skin-text.opened { + display: inline-block; + vertical-align: middle; + text-align: left; + color: #888; + font-size: 11px; + padding: 5px 2px; + width: 95px; + height: 40px; + border-radius: 10%; + background-color: #fff; +} + +.emoji-mart-skin { + display: inline-block; + width: 100%; + padding-top: 100%; + max-width: 12px; + border-radius: 100%; +} + +.emoji-mart-skin-tone-1 { background-color: #ffc93a } +.emoji-mart-skin-tone-2 { background-color: #fadcbc } +.emoji-mart-skin-tone-3 { background-color: #e0bb95 } +.emoji-mart-skin-tone-4 { background-color: #bf8f68 } +.emoji-mart-skin-tone-5 { background-color: #9b643d } +.emoji-mart-skin-tone-6 { background-color: #594539 } + +/* For screenreaders only, via https://stackoverflow.com/a/19758620 */ +.emoji-mart-sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + border: 0; +} + + diff --git a/src/assets/css/global.css b/src/assets/css/global.css index 2169f34dc0b28ae657f4450653e86aa9abca93e6..bbaa19a9ded54a569284c9a20e79363c3f652522 100644 --- a/src/assets/css/global.css +++ b/src/assets/css/global.css @@ -231,7 +231,6 @@ i[class*="icon-"] { width: 17px; height: 76px; color: #ffffff; - background: url('../img/drag_bg.svg'); } .drag--right { -webkit-transform: rotate(180deg); diff --git a/src/assets/helpers/help.js b/src/assets/helpers/help.js index c1cd44be38bf7bbe1bfa51bc6e3296ae7469935a..ac08e48aef2ef230902b212cd6474d31d9ea3fc9 100644 --- a/src/assets/helpers/help.js +++ b/src/assets/helpers/help.js @@ -126,6 +126,9 @@ const timeToAMPM = (hours, timeMode) => { * @returns {Object} */ const validateScheduleTime = (date, hours, minutes, timeZone, timeMode) => { + if (!date || !hours || !minutes || !timeZone || !timeMode) { + return { isDateValid: false, timeStamp: 0 }; + } const [day, month, year] = date.split(' '); const newHours = Number(timeToAMPM(hours, timeMode)); const savedHours = newHours <= 9 ? `0${newHours}` : newHours; diff --git a/src/assets/img/avatar.svg b/src/assets/img/avatar.svg index dcb8a56cf8b463753e931338afcf0634327ccf47..6f12084deee115a39f7827de5c142174d14c5934 100644 --- a/src/assets/img/avatar.svg +++ b/src/assets/img/avatar.svg @@ -6,7 +6,7 @@ - + diff --git a/src/assets/img/drag_bg_light.svg b/src/assets/img/drag_bg_light.svg new file mode 100644 index 0000000000000000000000000000000000000000..8ea7d1156c3da1b80b359de462a840335d9876a6 --- /dev/null +++ b/src/assets/img/drag_bg_light.svg @@ -0,0 +1,12 @@ + + + + Fill 1 + Created with Sketch. + + + + + + + \ No newline at end of file diff --git a/src/assets/img/icons/ic_checkbox_unchecked.svg b/src/assets/img/icons/ic_checkbox_unchecked.svg index e71248dee262f217b21f6736f3c07b9375589b57..58dd6f2e4e3d0501f8889a3717f330e1540338fc 100644 --- a/src/assets/img/icons/ic_checkbox_unchecked.svg +++ b/src/assets/img/icons/ic_checkbox_unchecked.svg @@ -5,7 +5,7 @@ Created with Sketch. - + diff --git a/src/assets/languages/en.json b/src/assets/languages/en.json index 444a5bd13c4e27b6490510f1be5eb1fcb21b5b80..40622726fd0fd19b189289546a0a1a6a5c2eb448 100644 --- a/src/assets/languages/en.json +++ b/src/assets/languages/en.json @@ -104,7 +104,7 @@ "noAnswer": "No answer", "permissionsWarning": "Allow access from the menu above", "permissionsWarningVideo": "Allow camera access from the menu above", - "pleaseWaitConfStart": "This conference has not been started yet. Please wait for the conference to be started.", + "pleaseWaitConfStart": "This conference has not started yet. Please wait for the conference to be started.", "pleaseWaitConfStart2": "You can leave this screen and you will be notified when the conference starts", "conferenceStarted": "The conference has started", "portToPhone": "Port Out to Phone", @@ -112,7 +112,7 @@ "ringing": "Ringing", "waiting": "Waiting", "screenShare": "Screen Share", - "screenShareFailed": "Sorry it did not work out. Try using Google Chrome.", + "screenShareFailedPermissionDenied": "Permission denied", "screenShareStartTitle": "Start Screen Sharing", "screenShareStopTitle": "Stop Screen Sharing", "sendMessage": "Send Message", @@ -547,7 +547,7 @@ }, "displayClearHistoryModal": { "cancel": "Cancel", - "description": "Do you want to clear all the message history in this group chat? This cannot bew undone.", + "description": "Do you want to clear all the message history in this group chat? This cannot be undone.", "discard": "Clear History" }, "displayDeleteAndClearHistoryModal": { @@ -772,7 +772,8 @@ "shortcuts": "Shortcuts Settings | NYNJA", "starred": "Starred | NYNJA", "timeline": "Timeline | NYNJA", - "timelineSettings": "Timeline Settings | NYNJA" + "timelineSettings": "Timeline Settings | NYNJA", + "themeSettings": "Theme Settings | NYNJA" }, "history": "History", "historyCleared": "Message history was deleted.", @@ -1198,8 +1199,9 @@ }, "selectedCalendarIntergation": "Selected calendar intergation", "selectedTheme": "Selected Theme", - "lightTheme": "Light Theme", - "darkTheme": "Dark Theme", + "lightTheme": "Stairway to Heaven", + "darkTheme": "Back in Black", + "currentTheme": " (current theme)", "selectedMembers": { "memberSelected": "Caller Selected", "membersSelected": "Callers Selected", diff --git a/src/assets/languages/es.json b/src/assets/languages/es.json index b47897c0e16dce0d624dd5066109ba2578200d4b..9bc6faf6d1a638e86e7eaa5df0910799600fa31d 100644 --- a/src/assets/languages/es.json +++ b/src/assets/languages/es.json @@ -102,7 +102,6 @@ "removeMember": "Remover de la llamada", "ringing": "Sonando", "screenShare": "Compartir pantalla", - "screenShareFailed": "Lo sentimos, no funcionó. Intente usar Google Chrome.", "screenShareStartTitle": "Iniciar uso compartido de pantalla", "screenShareStopTitle": "Detener el uso compartido de pantalla", "sendMessage": "Enviar mensaje", diff --git a/src/assets/languages/ko.json b/src/assets/languages/ko.json index e1c62fbffc81bdf08736f1af4905b420b612c4cf..1a22d8ae4f586f44b885d939e5be4acc19d97e6c 100644 --- a/src/assets/languages/ko.json +++ b/src/assets/languages/ko.json @@ -101,7 +101,6 @@ "portToPhone": "전화로 포트 아웃", "removeMember": "호출에서 제거", "screenShare": "화면 공유", - "screenShareFailed": "문제가 해결되지 않아 죄송합니다. Chrome을 사용해보십시오.", "screenShareStartTitle": "화면 공유 시작", "screenShareStopTitle": "화면 공유 정지", "sendMessage": "메시지 보내기", diff --git a/src/assets/languages/zh.json b/src/assets/languages/zh.json index c51c3fabaa2d23009aff212900b7662c6bf64c67..5900dee8769cc95bd6d288416ff50222c9f3cf4d 100644 --- a/src/assets/languages/zh.json +++ b/src/assets/languages/zh.json @@ -102,7 +102,6 @@ "removeMember": "从通话中移除", "ringing": "响铃中", "screenShare": "屏幕共享", - "screenShareFailed": "对不起,问题没有解决。请尝试使用Google Chrome。", "screenShareStartTitle": "开始屏幕共享", "screenShareStopTitle": "停止屏幕共享", "sendMessage": "发送信息", diff --git a/src/componets/AudioVideo/AudioVideo.js b/src/componets/AudioVideo/AudioVideo.js index cd155055e84da250e636788b91c34c58fec2d90a..aa5d01e36581140716618f49c8453d4fc456fb5f 100644 --- a/src/componets/AudioVideo/AudioVideo.js +++ b/src/componets/AudioVideo/AudioVideo.js @@ -154,7 +154,7 @@ class AudioVideo extends Component { console.log('[AV] handleClose'); if (!this.props.callData.conferenceId && (this.props.callData.waitingRoom || this.props.roomToJoin)) { this.props.audioVideoActions.endCall( - {roomId: this.props.callData.waitingRoom ? this.props.callData.waitingRoom.roomId : this.props.roomToJoin}); + { roomId: this.props.callData.waitingRoom ? this.props.callData.waitingRoom.roomId : this.props.roomToJoin }); } else if (this.props.callData.isAdmin && this.state.callInProgress) { this.setState({ askEnd: true }); } else { @@ -337,8 +337,6 @@ class AudioVideo extends Component { warningMessage: this.props.t('screenShareWarning').replace('$1', callData.screenSharer.displayName ? callData.screenSharer.displayName : callData.screenSharer) }); } - this.props.actions.openMessageModalDuration( - { text: this.props.t('callInProgress.screenShareFailed'), duration: 2000 }); } if (callData.initGroupCallData && callData.initGroupCallData.members && callData.initGroupCallData.replaceCallId === callData.conferenceId && !this.props.callData.initGroupCallData.members) { @@ -353,9 +351,9 @@ class AudioVideo extends Component { this.startP2pCall(callData.p2pMember, callData.video); } } else if (newProps.roomToJoin && !this.props.roomToJoin - || (this.state.callInProgress && this.props.callData.waitingRoom - && newProps.roomsInfo && newProps.roomsInfo[this.props.callData.waitingRoom.roomId] && - !(this.props.roomsInfo && this.props.roomsInfo[this.props.callData.waitingRoom.roomId]))) { + || (this.state.callInProgress && this.props.callData.waitingRoom + && newProps.roomsInfo && newProps.roomsInfo[this.props.callData.waitingRoom.roomId] && + !(this.props.roomsInfo && this.props.roomsInfo[this.props.callData.waitingRoom.roomId]))) { this.setState({ open: false, callInProgress: true }); this.handleEnterRoom(this.props.callData.waitingRoom ? this.props.callData.waitingRoom.roomId : newProps.roomToJoin, this.props.callData.waitingRoom ? this.props.callData.waitingRoom.roomName : newProps.roomToJoinName); @@ -610,7 +608,7 @@ class AudioVideo extends Component { }; setFullScreen = (full) => { - this.setState({fullScreen: !!full}); + this.setState({ fullScreen: !!full }); }; render() { @@ -693,19 +691,19 @@ class AudioVideo extends Component { }
{!!hasRemoteScreenSharing && - - this.setFullScreen(true)} aria-label={t('maximize')}> - {t('maximize')}/ + + this.setFullScreen(true)} aria-label={t('maximize')}> + {t('maximize')} + + + } + + this.handleMinimize(true)} + className={`${!!anonymousUser ? classes.hidden : ''}`} aria-label={t('minimize')}> + {t('minimize')} - } - - this.handleMinimize(true)} - className={`${!!anonymousUser ? classes.hidden : ''}`} aria-label={t('minimize')}> - {t('minimize')} - - -
+ {!permissionsWarning && !permissionsWarningVideo && !isWaiting && } {isWaiting && -
- {t('callInProgress.pleaseWaitConfStart')} -
- {t('callInProgress.pleaseWaitConfStart2')} -
+
+ {t('callInProgress.pleaseWaitConfStart')} +
+ {t('callInProgress.pleaseWaitConfStart2')} +
} {permissionsWarning && !isWaiting && -
- {permissionsWarning} -
+
+ {permissionsWarning} +
} {permissionsWarningVideo &&
@@ -802,7 +800,7 @@ class AudioVideo extends Component {
{callData.p2p && callData.video && - + this.handleAccept(callData.conferenceId, true)} @@ -811,7 +809,7 @@ class AudioVideo extends Component { } - + this.handleAccept(callData.conferenceId, false)} @@ -819,7 +817,7 @@ class AudioVideo extends Component { - + ({ }, hidden: { visibility: 'hidden' + }, + tooltip: { + color: theme.palette.themeColors.tooltip.color, + background: theme.palette.themeColors.tooltip.background, } }); diff --git a/src/componets/AudioVideo/AudioVideoControls/AudioVideoControls.js b/src/componets/AudioVideo/AudioVideoControls/AudioVideoControls.js index 47226b9841b14abfdf321533872941ef908f31ee..d657cd45fc9a1ccbba9237ae4f4ec358e96f18d6 100644 --- a/src/componets/AudioVideo/AudioVideoControls/AudioVideoControls.js +++ b/src/componets/AudioVideo/AudioVideoControls/AudioVideoControls.js @@ -61,7 +61,9 @@ class AudioVideoControls extends Component {
{!minimized &&
- +
+ title={t('callInProgress.inviteByLink')} + classes={{ tooltip: classes.tooltip }}>
@@ -84,7 +87,8 @@ class AudioVideoControls extends Component {
} + title={t(screenSharing ? 'callInProgress.screenShareStopTitle' : 'callInProgress.screenShareStartTitle')} + classes={{ tooltip: classes.tooltip }}>
@@ -94,29 +98,29 @@ class AudioVideoControls extends Component {
{p2p && - + {video ? () : ()} } - + {speakerMuted ? () : ()} - + {muted ? () : ()} - +
- +
- {p2p && - -
- - {t('callInProgress.screenShare')} - -
-
- } - + +
+ + {t('callInProgress.screenShare')} + +
+
+ {muted ? () : ()} - + @@ -156,7 +159,7 @@ class AudioVideoControls extends Component { {p2p && - + {video ? () : ( @@ -164,12 +167,12 @@ class AudioVideoControls extends Component { } - + - + diff --git a/src/componets/AudioVideo/AudioVideoControls/AudioVideoControls.styles.js b/src/componets/AudioVideo/AudioVideoControls/AudioVideoControls.styles.js index 8cb250760e8787f24a5e678e423b9dc223d466bf..cae771a0b1ac20fbd98c3f0cb499e9b69b3baf2d 100644 --- a/src/componets/AudioVideo/AudioVideoControls/AudioVideoControls.styles.js +++ b/src/componets/AudioVideo/AudioVideoControls/AudioVideoControls.styles.js @@ -16,7 +16,10 @@ export default theme => ({ display: 'flex', justifyContent: 'space-between', alignItems: 'center', - padding: '0 24px' + padding: '0 24px', + '& [class*="icon-link"]': { + color: theme.palette.themeColors.audioVideo.audioVideoControls.controlsIconColor, + } }, controlsLineMobile: { padding: '0 14px' @@ -55,5 +58,9 @@ export default theme => ({ }, hidden: { visibility: 'hidden' + }, + tooltip: { + color: theme.palette.themeColors.tooltip.color, + background: theme.palette.themeColors.tooltip.background, } }) diff --git a/src/componets/AudioVideo/AudioVideoJoinBanner/AudioVideoJoinBanner.js b/src/componets/AudioVideo/AudioVideoJoinBanner/AudioVideoJoinBanner.js index d727756572f624d368e24e107736f874c64c2afe..270f7c14b6068757721e61690fc31d0a38e77dba 100644 --- a/src/componets/AudioVideo/AudioVideoJoinBanner/AudioVideoJoinBanner.js +++ b/src/componets/AudioVideo/AudioVideoJoinBanner/AudioVideoJoinBanner.js @@ -4,7 +4,7 @@ import ic_ongoing_call from '../../../assets/img/icons/ic_ongoing_call.svg' import icAccept from "../../../assets/img/icons/ic_accept_call.svg"; import ElapsedTime from "../ElapsedTime/ElapsedTime"; import connect from "react-redux/es/connect/connect"; -import {audioVideoActions, callLinkActions} from "../../../core/resource/audioVideo"; +import { audioVideoActions, callLinkActions } from "../../../core/resource/audioVideo"; import { bindActionCreators } from "redux"; import PropTypes from "prop-types"; import ConfirmDialog from "../../Modals/ConfirmDialog/ConfirmDialog"; @@ -60,7 +60,7 @@ class AudioVideoJoinBanner extends Component {
}
- +
this.setState({ ask: true })} disabled={disabled} aria-label={t('callJoinBanner.joinCall')}> diff --git a/src/componets/AudioVideo/AudioVideoJoinBanner/AudioVideoJoinBanner.styles.js b/src/componets/AudioVideo/AudioVideoJoinBanner/AudioVideoJoinBanner.styles.js index 05ed5006d6c50d47cd57c780d30165b6e295299b..5e09e4b82af7a18eda617d009fecab81413b947f 100644 --- a/src/componets/AudioVideo/AudioVideoJoinBanner/AudioVideoJoinBanner.styles.js +++ b/src/componets/AudioVideo/AudioVideoJoinBanner/AudioVideoJoinBanner.styles.js @@ -33,4 +33,8 @@ export default theme => ({ textAlign: 'left', lineHeight: '17px', }, + tooltip: { + color: theme.palette.themeColors.tooltip.color, + background: theme.palette.themeColors.tooltip.background, + } }); \ No newline at end of file diff --git a/src/componets/AudioVideo/AudioVideoMember/AudioVideoMember.js b/src/componets/AudioVideo/AudioVideoMember/AudioVideoMember.js index dbb8c944c7dcfb8c874c91f5dbd361a9f4db6fa1..5c7e78bfdc340d744b2d858fcdb7c1253d43e76e 100644 --- a/src/componets/AudioVideo/AudioVideoMember/AudioVideoMember.js +++ b/src/componets/AudioVideo/AudioVideoMember/AudioVideoMember.js @@ -71,17 +71,18 @@ class AudioVideoMember extends Component { ? `${member.displayName.substring(0, 27)}...` : member.displayName : ''; + const isInactiveInConf = !isSelf && !p2p && !member.isActive && !member.isRinging; return ( -
- {!member.video && + {!member.video && !isInactiveInConf && { this.toggleFullScreen(true) }} /> } @@ -92,7 +93,7 @@ class AudioVideoMember extends Component { }
- {!member.isActive && !isGone && + {!member.isActive && !isGone && (p2p || member.isRinging) &&
@@ -111,9 +112,9 @@ class AudioVideoMember extends Component { {(!isSelf || p2p) && member.isActive &&
- + + size="small"> {isFullScreen ? : } diff --git a/src/componets/AudioVideo/AudioVideoMember/AudioVideoMember.styles.js b/src/componets/AudioVideo/AudioVideoMember/AudioVideoMember.styles.js index f89f51a4e2d1be63339de3eb9afa6f9eecb5f718..8cd8c09584e85e93c25bf0035fd62d391dc6f5c7 100644 --- a/src/componets/AudioVideo/AudioVideoMember/AudioVideoMember.styles.js +++ b/src/componets/AudioVideo/AudioVideoMember/AudioVideoMember.styles.js @@ -33,8 +33,11 @@ export default theme => ({ width: '50% !important', height: '50% !important' }, + ringingMember: { + opacity: '0.2', + }, inactiveMember: { - opacity: '0.2' + background: theme.palette.themeColors.audioVideo.audioVideoMember.disconnected, }, memberName: { left: 0, @@ -109,5 +112,9 @@ export default theme => ({ "& 60%": { opacity: 1 } + }, + tooltip: { + color: theme.palette.themeColors.tooltip.color, + background: theme.palette.themeColors.tooltip.background, } }); diff --git a/src/componets/AudioVideo/AudioVideoMembersView/AudioVideoMembersView.js b/src/componets/AudioVideo/AudioVideoMembersView/AudioVideoMembersView.js index 5bb4b75b4b66f51606be21303b61b5c1baa6fe7e..03b0587e0f0b0516e2b846e1413ff4ec9884c2ba 100644 --- a/src/componets/AudioVideo/AudioVideoMembersView/AudioVideoMembersView.js +++ b/src/componets/AudioVideo/AudioVideoMembersView/AudioVideoMembersView.js @@ -1,5 +1,5 @@ import React, { PureComponent } from 'react'; -import { Grid, IconButton, Tooltip, withStyles } from '@material-ui/core'; +import { Grid, IconButton, withStyles } from '@material-ui/core'; import { KeyboardArrowLeft, KeyboardArrowRight } from '@material-ui/icons'; import PropTypes from 'prop-types'; import stylesFunc from './AudioVideoMembersView.styles'; diff --git a/src/componets/BaseHeader/BaseHeader.js b/src/componets/BaseHeader/BaseHeader.js index 85e1c3c572cfa2aa5ca7c9fb6934ae5be173739e..4aa91266c0b960b914017ff439656b2003530317 100644 --- a/src/componets/BaseHeader/BaseHeader.js +++ b/src/componets/BaseHeader/BaseHeader.js @@ -20,7 +20,7 @@ class BaseHeader extends Component { const { classes, children, className, router, params, location, routes, ...otherProps } = this.props; let cls = `${classes.mainAreaHeader} ${className || ''}`; - if (router.params.mode === 'options' || router.params.mode === 'language') { + if (router.params.mode === 'options' || router.params.mode === 'language' || router.params.mode === 'details') { cls = `${classes.mainAreaHeader} ${className || ''} groupOptionsHeader`; } diff --git a/src/componets/ChatComponents/ChatBottomAttachList/ChatBottomAttachList.styles.js b/src/componets/ChatComponents/ChatBottomAttachList/ChatBottomAttachList.styles.js index 7712be72ddb050dd2ca15ab32064e5b261b81662..20fed3a0cc5989710df668059c4e0ef176cdb49c 100644 --- a/src/componets/ChatComponents/ChatBottomAttachList/ChatBottomAttachList.styles.js +++ b/src/componets/ChatComponents/ChatBottomAttachList/ChatBottomAttachList.styles.js @@ -32,8 +32,8 @@ export default (theme, bubbleSmileIcon) => ({ borderRadius: '50%', background: theme.palette.themeColors.chatBottomAttachList.addButton.background, '&:hover': { - color: theme.palette.themeColors.chatBottomAttachList.addButton.background, - background: theme.palette.themeColors.chatBottomAttachList.addButton.color, + color: theme.palette.themeColors.chatBottomAttachList.addButton.hoverColor, + background: theme.palette.themeColors.chatBottomAttachList.addButton.hoverBackground, } } }); diff --git a/src/componets/ChatComponents/ChatMsgBlocks/AudioCallType/TransformCallTypeMessage.js b/src/componets/ChatComponents/ChatMsgBlocks/AudioCallType/TransformCallTypeMessage.js index d7af36357456eae41b5dfc7dcb7b7cadb50fd3cd..5a10c2a9166760d917a5e274c8b083e074d8db32 100644 --- a/src/componets/ChatComponents/ChatMsgBlocks/AudioCallType/TransformCallTypeMessage.js +++ b/src/componets/ChatComponents/ChatMsgBlocks/AudioCallType/TransformCallTypeMessage.js @@ -25,7 +25,7 @@ class TransformCallTypeMessage extends Component { const { data, message, currentUserId } = props; return getCallStateFromProps(data, message, currentUserId); - } + }; render() { const { data, message, currentUserId, classes, t } = this.props; @@ -81,6 +81,7 @@ class TransformCallTypeMessage extends Component { ); } + return null; } } diff --git a/src/componets/ChatComponents/ChatMsgBlocks/ImageType/ImageType.styles.js b/src/componets/ChatComponents/ChatMsgBlocks/ImageType/ImageType.styles.js index 4e2b7f0f5a466f197049a53ff2c63311002cfb9c..c9bd4591724db1a6026937a512c0c77b50818d0c 100644 --- a/src/componets/ChatComponents/ChatMsgBlocks/ImageType/ImageType.styles.js +++ b/src/componets/ChatComponents/ChatMsgBlocks/ImageType/ImageType.styles.js @@ -124,7 +124,7 @@ export default (theme, scrollWidth, avatarPic) => ({ marginTop: 2, marginLeft: 2, fontSize: 12, - color: theme.palette.themeColors.messageTypes.messageTimeImageColor, + color: theme.palette.themeColors.messageTypes.messageStats.color, textAlign: 'right', '& [class*="icon-read"]': { color: theme.palette.themeColors.messageTypes.iconReadColor, diff --git a/src/componets/ChatComponents/ChatMsgBlocks/LocationType/LocationType.styles.js b/src/componets/ChatComponents/ChatMsgBlocks/LocationType/LocationType.styles.js index 8411d2a606e1d55aaa018f7778096399f7233864..4d296c3a039463f847061c588898b5ba800b69fa 100644 --- a/src/componets/ChatComponents/ChatMsgBlocks/LocationType/LocationType.styles.js +++ b/src/componets/ChatComponents/ChatMsgBlocks/LocationType/LocationType.styles.js @@ -104,7 +104,7 @@ export default (theme, scrollWidth, avatarPic) => ({ messageTime: { marginTop: 8, fontSize: 12, - color: theme.palette.themeColors.messageTypes.messageTimeColor, + color: theme.palette.themeColors.messageTypes.messageTimeImageColor, textAlign: 'right', '& [class*="icon-read"]': { color: theme.palette.themeColors.messageTypes.iconReadColor, @@ -130,7 +130,7 @@ export default (theme, scrollWidth, avatarPic) => ({ right: 65, fontSize: 12, marginRight: 4, - color: theme.palette.themeColors.messageTypes.messageTimeColor, + color: theme.palette.themeColors.messageTypes.messageTimeImageColor, }, repliesLocation: { color: theme.palette.themeColors.messageTypes.messageTimeImageColor, @@ -254,7 +254,7 @@ export default (theme, scrollWidth, avatarPic) => ({ placeBox: { marginRight: 8, marginBottom: 3, - background: theme.palette.themeColors.messageTypes.placeBoxBackground, + //background: theme.palette.themeColors.messageTypes.placeBoxBackground, }, placeInfo: { marginTop: 10, diff --git a/src/componets/ChatComponents/ChatMsgBlocks/VideoType/VideoType.js b/src/componets/ChatComponents/ChatMsgBlocks/VideoType/VideoType.js index 3739621bd6392cfffcebe943a59a98c30f47e7ec..b8f593de861339cbe050f39df22a1dc920510952 100644 --- a/src/componets/ChatComponents/ChatMsgBlocks/VideoType/VideoType.js +++ b/src/componets/ChatComponents/ChatMsgBlocks/VideoType/VideoType.js @@ -39,7 +39,7 @@ class VideoType extends Component { } VideoType = () => { - const { data, classes, t, user, status, type, message, handleDownload, percentage, progress } = this.props; + const { data, classes, t, user, status, type, message, handleDownload, percentage, progress, theme } = this.props; const ids = Object.keys(data); let thumb, video, sizeToMB; @@ -71,7 +71,10 @@ class VideoType extends Component { videoStyle = { maxWidth: 245 }; } - infoStyle = { background: "#787878", color: "#d7d7d7" }; + infoStyle = { + background: theme.palette.themeColors.messageTypes.messageStats.background, + color: theme.palette.themeColors.messageTypes.messageStats.color + }; const caption = video ? video.CAPTION ? video.CAPTION.value : video.caption ? video.caption : '' : ''; const fileName = video.FILENAME ? video.FILENAME.value : ''; @@ -156,4 +159,4 @@ class VideoType extends Component { const withAWS = withAWSDownload(VideoType); -export default withStyles(styles)(withAWS); +export default withStyles(styles, { withTheme: true })(withAWS); diff --git a/src/componets/ChatComponents/ChatMsgBlocks/VideoType/VideoType.styles.js b/src/componets/ChatComponents/ChatMsgBlocks/VideoType/VideoType.styles.js index ac82fd35cf0cd81110e14e6ad23086192a0bc3d4..4a1867ac7cec8befdef334b941319c4ee5018906 100644 --- a/src/componets/ChatComponents/ChatMsgBlocks/VideoType/VideoType.styles.js +++ b/src/componets/ChatComponents/ChatMsgBlocks/VideoType/VideoType.styles.js @@ -122,7 +122,7 @@ export default (theme, scrollWidth, avatarPic) => ({ marginLeft: 2, display: 'inline-block', fontSize: 12, - color: theme.palette.themeColors.messageTypes.messageTimeColor, + color: theme.palette.themeColors.messageTypes.messageTimeImageColor, textAlign: 'right', '& [class*="icon-read"]': { color: theme.palette.themeColors.messageTypes.iconReadColor, diff --git a/src/componets/ChatComponents/ChatReplyPanel/ChatReplyPanel.styles.js b/src/componets/ChatComponents/ChatReplyPanel/ChatReplyPanel.styles.js index 14bf4f331b2161dde190431eecf5cc93a802d9d4..e82a0766e9b329fe39f0183d3083193af2b6b700 100644 --- a/src/componets/ChatComponents/ChatReplyPanel/ChatReplyPanel.styles.js +++ b/src/componets/ChatComponents/ChatReplyPanel/ChatReplyPanel.styles.js @@ -20,6 +20,10 @@ export default theme => ({ paddingTop: 6, paddingLeft: 16, color: theme.palette.themeColors.chatMessagePanels.titleColor, + maxWidth: '95%', + overflow: 'hidden', + textOverflow: 'ellipsis', + whiteSpace: 'nowrap', }, closeButton: { background: theme.palette.themeColors.chatMessagePanels.closeButtonColor, diff --git a/src/componets/ChatFeaturesMenu/ChatFeaturesMenu.styles.js b/src/componets/ChatFeaturesMenu/ChatFeaturesMenu.styles.js index d56930f54e5b6c40c6dc925156c15af4d8ac377b..fe0b6ea3579906c952011f6fe1dd74ae300862f8 100644 --- a/src/componets/ChatFeaturesMenu/ChatFeaturesMenu.styles.js +++ b/src/componets/ChatFeaturesMenu/ChatFeaturesMenu.styles.js @@ -27,7 +27,8 @@ export default theme => ({ alignItems: 'center', padding: '2px 7px 1px !important', width: '100%', - height: 45, + height: 46, + marginTop: '-1px', fontSize: 12, lineHeight: 1.2, color: theme.palette.themeColors.rightMenu.itemColor, diff --git a/src/componets/ChatListItem/ChatListItem.styles.js b/src/componets/ChatListItem/ChatListItem.styles.js index 1a34096d9318eb7a4b4c79d3ebfaca07a39ef1c0..3baf162452b96b8876a392ad9bea05f54826eb5b 100644 --- a/src/componets/ChatListItem/ChatListItem.styles.js +++ b/src/componets/ChatListItem/ChatListItem.styles.js @@ -59,13 +59,12 @@ export default (theme, avatar) => ({ } }, listItem: { - padding: '5px 15px 5px 16px', + padding: '2px 15px 2px 16px', borderBottom: '1px solid ' + theme.palette.themeColors.chatListItem.listItemBorder }, avatar: { width: 46, height: 46, - // background: `url(${avatar}) 0 no-repeat`, backgroundSize: 'cover' }, statusBox: { @@ -85,8 +84,8 @@ export default (theme, avatar) => ({ }, itemText: { paddingLeft: 16, - marginTop: 4, - marginBottom: 4, + marginTop: 3, + marginBottom: 3, '& span, & p': { fontSize: 14 }, diff --git a/src/componets/CodeInput/CodeInput.styles.js b/src/componets/CodeInput/CodeInput.styles.js index d628afec47bf7c36dca6cde6a69c598839c8186a..c26177d6bbb33c9c5296c131d86ae3df2d191364 100644 --- a/src/componets/CodeInput/CodeInput.styles.js +++ b/src/componets/CodeInput/CodeInput.styles.js @@ -8,9 +8,9 @@ export default theme => ({ width: 40, background: 'none', border: 'none', - borderBottom: '2px solid ' + theme.palette.themeColors.colors.border14, + borderBottom: '2px solid ' + theme.palette.themeColors.auth.selectTextColor, textAlign: 'center', - color: theme.palette.themeColors.colors.text14, + color: theme.palette.themeColors.auth.selectTextColor, fontSize: 18, marginLeft: 10, '.focused &': { diff --git a/src/componets/ContactComponents/ContactItem/ContactItem.js b/src/componets/ContactComponents/ContactItem/ContactItem.js index 869a29912ecce533bb67f07b03607d6625f9b338..dff04f5f0a0dd49869ee590838c2455e0890add1 100644 --- a/src/componets/ContactComponents/ContactItem/ContactItem.js +++ b/src/componets/ContactComponents/ContactItem/ContactItem.js @@ -59,7 +59,7 @@ class ContactItem extends Component { renderRequestAction = (item, classes, handleAcceptRequest, handleIgnoreRequest, t) => { return (
-
} - {Object.keys(filteredContacts).length === 0 &&

diff --git a/src/componets/GroupCallEdit/GroupCallEdit.styles.js b/src/componets/GroupCallEdit/GroupCallEdit.styles.js index 42b39d63fe13aa167d92bfa6a27076b8d8837ef8..682db18bd4c2540873769770107f3064af61e6e8 100644 --- a/src/componets/GroupCallEdit/GroupCallEdit.styles.js +++ b/src/componets/GroupCallEdit/GroupCallEdit.styles.js @@ -41,6 +41,7 @@ export default (theme) => ({ width: '289px', padding: '15px', marginLeft: 5, + position: 'relative', backgroundColor: theme.palette.themeColors.groupCallEdit.slideBackground }, noResultsLabel: { diff --git a/src/componets/GroupListItem/GroupListItem.styles.js b/src/componets/GroupListItem/GroupListItem.styles.js index b1ab8e62b6582743dfe90b8d615a15237d2ebafa..71ff6cdfe365b33dfbbd09d6ffde9ca4ab1c39be 100644 --- a/src/componets/GroupListItem/GroupListItem.styles.js +++ b/src/componets/GroupListItem/GroupListItem.styles.js @@ -63,19 +63,18 @@ export default (theme, avatar) => ({ } }, listItem: { - padding: '6px 15px 6px 16px', + padding: '2px 15px 2px 16px', borderBottom: '1px solid ' + theme.palette.themeColors.chatListItem.listItemBorder }, avatar: { width: 46, height: 46, - // background: `url(${avatar}) 0 no-repeat`, backgroundSize: 'cover' }, itemText: { paddingLeft: 16, - marginTop: 4, - marginBottom: 4, + marginTop: 3, + marginBottom: 3, '& span, & p': { display: 'inline-block', fontSize: 14, @@ -85,10 +84,12 @@ export default (theme, avatar) => ({ textOverflow: 'ellipsis' }, '& p': { + marginTop: '-3px', overflow: 'hidden', width: 250, whiteSpace: 'nowrap', textOverflow: 'ellipsis' + } }, btnHolder: { diff --git a/src/componets/Modals/ChatBottomAttachMenu/ChatBottomAttachMenu.styles.js b/src/componets/Modals/ChatBottomAttachMenu/ChatBottomAttachMenu.styles.js index 36258db07f5801e24f272d270573814a4ca6bf96..266f9882272b8cd7ffa9d9452636da5894f35bf9 100644 --- a/src/componets/Modals/ChatBottomAttachMenu/ChatBottomAttachMenu.styles.js +++ b/src/componets/Modals/ChatBottomAttachMenu/ChatBottomAttachMenu.styles.js @@ -10,15 +10,15 @@ export default theme => ({ padding: '0 15px 0 18px', fontSize: 14, lineHeight: '32px', - color: theme.palette.themeColors.colors.text14, + color: theme.palette.themeColors.chatBottomAttachMenu.color, whiteSpace: 'nowrap', - background: theme.palette.themeColors.colors.background7, + background: theme.palette.themeColors.chatBottomAttachMenu.background, cursor: 'pointer', - borderBottom: '1px solid ' + theme.palette.themeColors.colors.border3, + borderBottom: '1px solid ' + theme.palette.themeColors.chatBottomAttachMenu.borderColor, transition: 'background 0.2s ease-out', '&.dp-block': { display: 'block', - background: theme.palette.themeColors.colors.background7 + background: theme.palette.themeColors.chatBottomAttachMenu.background, }, '&:first-child': { paddingTop: 2, @@ -30,7 +30,7 @@ export default theme => ({ borderRadius: '0 0 8px 8px', borderBottom: '1px solid transparent', '&:hover:after': { - borderTopColor: theme.palette.themeColors.colors.border5 + borderTopColor: theme.palette.themeColors.chatBottomAttachMenu.hoverBackground }, '&:after': { position: 'absolute', @@ -43,16 +43,16 @@ export default theme => ({ } }, '&:hover': { - background: theme.palette.themeColors.colors.background5 + background: theme.palette.themeColors.chatBottomAttachMenu.hoverBackground }, '& i': { marginRight: 7, fontSize: 18, verticalAlign: 'middle', - color: theme.palette.themeColors.colors.text10, + color: theme.palette.themeColors.chatBottomAttachMenu.iconColor, } }, itemlabel: { - color: theme.palette.themeColors.colors.text14 + color: theme.palette.themeColors.chatBottomAttachMenu.color } }); diff --git a/src/componets/Modals/ChatDeleteModal/ChatDeleteModal.styles.js b/src/componets/Modals/ChatDeleteModal/ChatDeleteModal.styles.js index 7d842a49150feab90765961f7536b6225daec3ad..07031479958e7b56eea8ea261277615fd6237585 100644 --- a/src/componets/Modals/ChatDeleteModal/ChatDeleteModal.styles.js +++ b/src/componets/Modals/ChatDeleteModal/ChatDeleteModal.styles.js @@ -10,7 +10,7 @@ export default theme => ({ maxWidth: '400px !important', fontSize: 0, borderRadius: 8, - background: theme.palette.themeColors.colors.background3 + ' !important', + background: theme.palette.themeColors.modal.background + ' !important', boxShadow: '0 5px 20px 5px rgba(0, 0, 0, 0.2) !important' }, logo: { @@ -28,18 +28,18 @@ export default theme => ({ dscr: { fontSize: 14, lineHeight: 1.4, - color: theme.palette.themeColors.colors.text14 + color: theme.palette.themeColors.modal.textColor }, btnsBox: { display: 'flex', justifyContent: 'flex-end', margin: '0 -32px 0 -24px', padding: '10px 32px 11px', - background: theme.palette.themeColors.colors.background4, + background: theme.palette.themeColors.modal.buttonBackground, '& button': { height: 30, font: '14px/30px noto_sansregular', - color: theme.palette.themeColors.colors.text14, + color: theme.palette.themeColors.modal.textColor, transition: 'color 0.2s ease-out', '&:hover': { color: theme.palette.themeColors.colors.text16, diff --git a/src/componets/Modals/ConfirmDialog/ConfirmDialog.js b/src/componets/Modals/ConfirmDialog/ConfirmDialog.js index 808eb5cd81980a96e739f57e00c6db66f6f4ed50..45651f923653093b10f04665cf92c0544b7940d4 100644 --- a/src/componets/Modals/ConfirmDialog/ConfirmDialog.js +++ b/src/componets/Modals/ConfirmDialog/ConfirmDialog.js @@ -31,7 +31,7 @@ const styles = theme => ({ }, divider: { - backgroundColor: theme.palette.themeColors.modal.textColor, + backgroundColor: theme.palette.themeColors.modal.border, } }); diff --git a/src/componets/Modals/ContactModals/ContactBlockUserModal/ContactBlockUserModal.styles.js b/src/componets/Modals/ContactModals/ContactBlockUserModal/ContactBlockUserModal.styles.js index 822d74e1d8c99d6f99436ec28aef3149fece7612..79e885cc179dc0423bab8bb376627fa25feff7df 100644 --- a/src/componets/Modals/ContactModals/ContactBlockUserModal/ContactBlockUserModal.styles.js +++ b/src/componets/Modals/ContactModals/ContactBlockUserModal/ContactBlockUserModal.styles.js @@ -10,7 +10,7 @@ export default theme => ({ width: '400px !important', fontSize: 0, borderRadius: 8, - background: theme.palette.themeColors.colors.background3 + ' !important', + background: theme.palette.themeColors.modal.background + ' !important', boxShadow: '0 5px 20px 5px rgba(0, 0, 0, 0.2) !important' }, logo: { @@ -28,18 +28,18 @@ export default theme => ({ dscr: { fontSize: 14, lineHeight: 1.4, - color: theme.palette.themeColors.colors.text14 + color: theme.palette.themeColors.modal.textColor }, btnsBox: { display: 'flex', justifyContent: 'flex-end', margin: '0 -32px 0 -24px', padding: '10px 32px 11px', - background: theme.palette.themeColors.colors.background4, + background: theme.palette.themeColors.modal.buttonBackground, '& button': { height: 30, font: '14px/30px noto_sansregular', - color: theme.palette.themeColors.colors.text14, + color: theme.palette.themeColors.modal.textColor, transition: 'color 0.2s ease-out', '&:hover': { color: theme.palette.themeColors.colors.text16, diff --git a/src/componets/Modals/ContactModals/ContactClearChatHistoryModal/ContactClearChatHistoryModal.styles.js b/src/componets/Modals/ContactModals/ContactClearChatHistoryModal/ContactClearChatHistoryModal.styles.js index dc364f201106c30da3e685bd8ddbe2f809b775e2..3903dba065edc08483a0ef462a1e34fe60d7d048 100644 --- a/src/componets/Modals/ContactModals/ContactClearChatHistoryModal/ContactClearChatHistoryModal.styles.js +++ b/src/componets/Modals/ContactModals/ContactClearChatHistoryModal/ContactClearChatHistoryModal.styles.js @@ -10,7 +10,7 @@ export default theme => ({ width: '400px !important', fontSize: 0, borderRadius: 8, - background: theme.palette.themeColors.colors.background3 + ' !important', + background: theme.palette.themeColors.modal.background + ' !important', boxShadow: '0 5px 20px 5px rgba(0, 0, 0, 0.2) !important' }, logo: { @@ -28,18 +28,18 @@ export default theme => ({ dscr: { fontSize: 14, lineHeight: 1.4, - color: theme.palette.themeColors.colors.text14, + color: theme.palette.themeColors.modal.textColor, }, btnsBox: { display: 'flex', justifyContent: 'flex-end', margin: '0 -32px 0 -24px', padding: '10px 32px 11px', - background: theme.palette.themeColors.colors.background4, + background: theme.palette.themeColors.modal.buttonBackground, '& button': { height: 30, font: '14px/30px noto_sansregular', - color: theme.palette.themeColors.colors.text14, + color: theme.palette.themeColors.modal.textColor, transition: 'color 0.2s ease-out', '&:hover': { color: theme.palette.themeColors.colors.text16, diff --git a/src/componets/Modals/PreviewModals/AudioFilePreview/AudioFilePreview.styles.js b/src/componets/Modals/PreviewModals/AudioFilePreview/AudioFilePreview.styles.js index 31b1d84c6107b5f035e19f34d0592663c198d083..3dc7e41dabf19312693d95ea415751d5fb4c993a 100644 --- a/src/componets/Modals/PreviewModals/AudioFilePreview/AudioFilePreview.styles.js +++ b/src/componets/Modals/PreviewModals/AudioFilePreview/AudioFilePreview.styles.js @@ -42,7 +42,7 @@ export default theme => ({ zIndex: 1, position: 'absolute', fontSize: 16, - background: theme.palette.themeColors.colors.background1, + background: theme.palette.themeColors.modal.textColor, borderRadius: '50%', '& [class="icon-channels"]': { lineHeight: 1.5 @@ -57,14 +57,14 @@ export default theme => ({ zIndex: 1, position: 'absolute', fontSize: 16, - background: theme.palette.themeColors.colors.background1, + background: theme.palette.themeColors.modal.textColor, borderRadius: '50%', '& [class="icon-channels"]': { lineHeight: 1.5 } }, time: { - color: theme.palette.themeColors.colors.text14, + color: theme.palette.themeColors.modal.textColor, position: 'absolute', left: '75%', fontSize: 13, @@ -74,7 +74,7 @@ export default theme => ({ position: 'absolute', width: '63%', height: 3, - background: theme.palette.themeColors.colors.background1, + background: theme.palette.themeColors.modal.textColor, left: 40, top: 14 }, @@ -120,39 +120,5 @@ export default theme => ({ modalTextWrapp: { padding: '0 20px', borderBottom: '1px solid ' + theme.palette.themeColors.colors.border9, - }, - fileName: { - padding: '10px 0', - fontSize: 14, - color: theme.palette.themeColors.colors.text14, - whiteSpace: 'nowrap', - overflow: 'hidden', - textOverflow: 'ellipsis' - }, - fileProps: { - padding: '10px 0', - fontSize: 12, - paddingTop: 0, - color: theme.palette.themeColors.colors.text11, - }, - btn: { - padding: '0px 15px', - fontSize: 14, - color: theme.palette.themeColors.colors.text14, - lineHeight: '52px', - float: 'right' - }, - photoReTakeBtn: { - color: theme.palette.themeColors.colors.text14 - }, - txtFile: { - padding: 10 - }, - progressBarFile: { - position: 'absolute', - bottom: 70, - width: '93%', - height: 3, - background: theme.palette.themeColors.colors.background1, - }, + } }); diff --git a/src/componets/Modals/PreviewModals/FilePreview/FilePreview.styles.js b/src/componets/Modals/PreviewModals/FilePreview/FilePreview.styles.js index ff2fbaa50edb0ecdc2cc0099cc960fb6b3a0d71f..9ed962ead24d74dfcc5f367593714ef66a810830 100644 --- a/src/componets/Modals/PreviewModals/FilePreview/FilePreview.styles.js +++ b/src/componets/Modals/PreviewModals/FilePreview/FilePreview.styles.js @@ -8,7 +8,7 @@ export default theme => ({ maxWidth: '80vw !important', fontSize: 12, borderRadius: 8, - background: theme.palette.themeColors.colors.background3 + ' !important', + background: theme.palette.themeColors.modal.background + ' !important', boxShadow: '0 5px 20px 5px rgba(0, 0, 0, 0.2) !important', whiteSpace: 'pre-wrap', // padding: 5 @@ -33,7 +33,7 @@ export default theme => ({ txtFile: { width: '45vw', height: '70vh', - color: theme.palette.themeColors.colors.text14, + color: theme.palette.themeColors.modal.textColor, padding: 10 }, audioWrapper: { @@ -44,7 +44,7 @@ export default theme => ({ btn: { padding: '0px 15px', fontSize: 14, - color: theme.palette.themeColors.colors.text14, + color: theme.palette.themeColors.modal.textColor, lineHeight: '52px', float: 'right' }, diff --git a/src/componets/Modals/PreviewModals/MediaPreview/MediaPreview.styles.js b/src/componets/Modals/PreviewModals/MediaPreview/MediaPreview.styles.js index 6863ee0b12c7a6794289a6b95be428ad0f4dfcbd..99fd146e03e0f3f5817eb27a5fe2ff01d5b25d90 100644 --- a/src/componets/Modals/PreviewModals/MediaPreview/MediaPreview.styles.js +++ b/src/componets/Modals/PreviewModals/MediaPreview/MediaPreview.styles.js @@ -8,7 +8,7 @@ export default theme => ({ maxWidth: '80vw !important', fontSize: 12, borderRadius: 8, - background: theme.palette.themeColors.colors.background3 + ' !important', + background: theme.palette.themeColors.modal.background + ' !important', boxShadow: '0 5px 20px 5px rgba(0, 0, 0, 0.2) !important', whiteSpace: 'pre-wrap', // padding: 5, @@ -41,7 +41,7 @@ export default theme => ({ '& div': { width: '45vw', height: '70vh', - color: theme.palette.themeColors.colors.text14, + color: theme.palette.themeColors.modal.textColor, }, }, loader: { @@ -94,7 +94,7 @@ export default theme => ({ position: 'absolute', width: '63%', height: 3, - background: theme.palette.themeColors.colors.background1, + background: theme.palette.themeColors.modal.textColor, left: 40, top: 14 }, @@ -139,12 +139,12 @@ export default theme => ({ }, modalTextWrapp: { padding: '0 20px', - borderBottom: '1px solid ' + theme.palette.themeColors.colors.border9, + borderBottom: '1px solid ' + theme.palette.themeColors.modal.border, }, fileName: { padding: '10px 0', fontSize: 14, - color: theme.palette.themeColors.colors.text14, + color: theme.palette.themeColors.modal.textColor, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' @@ -158,12 +158,12 @@ export default theme => ({ btn: { padding: '0px 15px', fontSize: 14, - color: theme.palette.themeColors.colors.text14, + color: theme.palette.themeColors.modal.textColor, lineHeight: '52px', float: 'right' }, photoReTakeBtn: { - color: theme.palette.themeColors.colors.text14 + color: theme.palette.themeColors.modal.textColor, }, txtFile: { padding: 10 diff --git a/src/componets/Modals/ProfileAvatarModal/ProfileAvatarModal.styles.js b/src/componets/Modals/ProfileAvatarModal/ProfileAvatarModal.styles.js index 4ab50766bc71a0e20522c361e07d070f28b8479a..741991b9a50e446866b0298bbfb0dab25e3b57c4 100644 --- a/src/componets/Modals/ProfileAvatarModal/ProfileAvatarModal.styles.js +++ b/src/componets/Modals/ProfileAvatarModal/ProfileAvatarModal.styles.js @@ -14,7 +14,7 @@ export default theme => ({ height: 'auto', fontSize: 0, borderRadius: 8, - background: theme.palette.themeColors.colors.background3 + ' !important', + background: theme.palette.themeColors.modal.background + ' !important', boxShadow: '0 5px 20px 5px rgba(0, 0, 0, 0.2) !important' }, selectImageText: { @@ -33,7 +33,7 @@ export default theme => ({ // padding: '0 32px', padding: 15, fontSize: 14, - color: theme.palette.themeColors.colors.text14, + color: theme.palette.themeColors.modal.textColor, lineHeight: '52px', float: 'right' }, @@ -49,7 +49,7 @@ export default theme => ({ // position: 'absolute', // bottom: 32, // fontSize: 14, - color: theme.palette.themeColors.colors.text14 + color: theme.palette.themeColors.modal.textColor, } // preview: { // position: 'relative' diff --git a/src/componets/Modals/ReleaseNotes/ReleaseNotes.styles.js b/src/componets/Modals/ReleaseNotes/ReleaseNotes.styles.js index 84669234db952e9bd5cf7d0f06415217fb88cb2a..998df5bf5c00d077c8f19e31cc138dfcc21f8371 100644 --- a/src/componets/Modals/ReleaseNotes/ReleaseNotes.styles.js +++ b/src/componets/Modals/ReleaseNotes/ReleaseNotes.styles.js @@ -8,12 +8,12 @@ export default theme => ({ maxWidth: '80vw !important', fontSize: 14, borderRadius: 8, - background: theme.palette.themeColors.colors.background3 + ' !important', + background: theme.palette.themeColors.modal.background + ' !important', boxShadow: '0 5px 20px 5px rgba(0, 0, 0, 0.2) !important', whiteSpace: 'pre-wrap', }, notesContainer: { - color: theme.palette.themeColors.colors.text14, + color: theme.palette.themeColors.modal.textColor, maxWidth: 500, maxHeight: 500, }, @@ -34,7 +34,7 @@ export default theme => ({ btn: { padding: '0px 15px', fontSize: 14, - color: theme.palette.themeColors.colors.text14, + color: theme.palette.themeColors.modal.textColor, lineHeight: '52px', float: 'right' }, diff --git a/src/componets/Modals/ShareModal/ShareModal.js b/src/componets/Modals/ShareModal/ShareModal.js index 79523b7767271c8a075bfa6d9efe6e0fc50506c3..55856f447ffeac27442ba542022bb57d74dbfe55 100644 --- a/src/componets/Modals/ShareModal/ShareModal.js +++ b/src/componets/Modals/ShareModal/ShareModal.js @@ -114,7 +114,7 @@ class ShareModal extends Component {

this.handleCopy(emailBody)} + onClick={() => this.handleCopy(urlToShow)} >
copy-icon diff --git a/src/componets/Modals/ShareModal/ShareModal.styles.js b/src/componets/Modals/ShareModal/ShareModal.styles.js index e6ea5601671ab7a4166e1ff78502f8bd6a13c6ac..99a7f59a02ae7d2ed3162cf609e96aa3a9e0f20e 100644 --- a/src/componets/Modals/ShareModal/ShareModal.styles.js +++ b/src/componets/Modals/ShareModal/ShareModal.styles.js @@ -8,7 +8,7 @@ export default theme => ({ padding: '0 !important', maxWidth: '80vw !important', borderRadius: 8, - background: theme.palette.themeColors.colors.background3 + ' !important', + background: theme.palette.themeColors.modal.background + ' !important', boxShadow: '0 5px 20px 5px rgba(0, 0, 0, 0.2) !important', overflow: 'hidden', }, @@ -23,8 +23,8 @@ export default theme => ({ }, modalTextWrapp: { padding: '0 20px', - borderBottom: '1px solid ' + theme.palette.themeColors.colors.border9, - color: theme.palette.themeColors.colors.text14, + borderBottom: '1px solid ' + theme.palette.themeColors.modal.border, + color: theme.palette.themeColors.modal.textColor, }, modalTitle: { lineHeight: '50px', @@ -37,12 +37,12 @@ export default theme => ({ cursor: 'pointer', }, buttonWrapper: { - borderTop: '1px solid ' + theme.palette.themeColors.colors.border9, + borderTop: '1px solid ' + theme.palette.themeColors.modal.border, }, btn: { padding: '0px 15px', fontSize: 14, - color: theme.palette.themeColors.colors.text14, + color: theme.palette.themeColors.modal.textColor, lineHeight: '52px', float: 'right', }, @@ -55,5 +55,7 @@ export default theme => ({ }, tooltip: { marginTop: 2, + color: theme.palette.themeColors.tooltip.color, + background: theme.palette.themeColors.tooltip.background, }, }); diff --git a/src/componets/Modals/UploadModals/CameraUpload/CameraUpload.styles.js b/src/componets/Modals/UploadModals/CameraUpload/CameraUpload.styles.js index 8ea018ccf88f11006b460c1d232931966e531fb2..6cdc25b7ae12d5bb4547d1a823bf7122fb0f43a8 100644 --- a/src/componets/Modals/UploadModals/CameraUpload/CameraUpload.styles.js +++ b/src/componets/Modals/UploadModals/CameraUpload/CameraUpload.styles.js @@ -10,12 +10,12 @@ export default theme => ({ maxWidth: '400px !important', fontSize: 0, borderRadius: 8, - background: theme.palette.themeColors.colors.background3 + ' !important', + background: theme.palette.themeColors.modal.background + ' !important', boxShadow: '0 5px 20px 5px rgba(0, 0, 0, 0.2) !important' }, modalTextWrapp: { textAlign: 'center', - borderBottom: '1px solid ' + theme.palette.themeColors.colors.border9, + borderBottom: '1px solid ' + theme.palette.themeColors.modal.border, '& p': { padding: '10px 0', fontSize: 14, @@ -27,7 +27,7 @@ export default theme => ({ // padding: '0 32px', padding: '0px 15px', fontSize: 14, - color: theme.palette.themeColors.colors.text14, + color: theme.palette.themeColors.modal.textColor, lineHeight: '52px', float: 'right' }, diff --git a/src/componets/Modals/UploadModals/FileUpload/FileUpload.styles.js b/src/componets/Modals/UploadModals/FileUpload/FileUpload.styles.js index 80ee74668d69e8c7740b636d3513034981b83db3..7b09bdf0fee5eaa740319d21112b20f7999f449c 100644 --- a/src/componets/Modals/UploadModals/FileUpload/FileUpload.styles.js +++ b/src/componets/Modals/UploadModals/FileUpload/FileUpload.styles.js @@ -9,7 +9,7 @@ export default theme => ({ maxWidth: '80vw !important', fontSize: 0, borderRadius: 8, - background: theme.palette.themeColors.colors.background3 + ' !important', + background: theme.palette.themeColors.modal.background + ' !important', boxShadow: '0 5px 20px 5px rgba(0, 0, 0, 0.2) !important' }, fileBox: { @@ -83,13 +83,13 @@ export default theme => ({ btn: { padding: '0px 15px', fontSize: 14, - color: theme.palette.themeColors.colors.text14, + color: theme.palette.themeColors.modal.textColor, lineHeight: '52px', float: 'right' }, modalTextWrapp: { marginTop: '30px', - borderBottom: '1px solid ' + theme.palette.themeColors.colors.border9, + borderBottom: '1px solid ' + theme.palette.themeColors.modal.border, }, removeFileBtn: { cursor: 'pointer' diff --git a/src/componets/Modals/UploadModals/LocationUpload/LocationUpload.styles.js b/src/componets/Modals/UploadModals/LocationUpload/LocationUpload.styles.js index 075c1f384535e32fb6a9c40475149a56c1ca2188..947596e963a1a9fa99cd632de6855751aa6753f4 100644 --- a/src/componets/Modals/UploadModals/LocationUpload/LocationUpload.styles.js +++ b/src/componets/Modals/UploadModals/LocationUpload/LocationUpload.styles.js @@ -8,7 +8,7 @@ export default theme => ({ padding: '0 !important', maxWidth: '80vw !important', borderRadius: 8, - background: theme.palette.themeColors.colors.background3 + ' !important', + background: theme.palette.themeColors.modal.background + ' !important', boxShadow: '0 5px 20px 5px rgba(0, 0, 0, 0.2) !important', }, locationWrapper: { @@ -30,20 +30,20 @@ export default theme => ({ width: '100%', cursor: 'pointer', '&:hover': { - backgroundColor: theme.palette.themeColors.colors.background1, + backgroundColor: theme.palette.themeColors.contactStorage.hoverBackground, }, }, placeItem: { position: 'relative', padding: '8px 16px 5px 0px', marginLeft: 16, - borderBottom: '1px solid black', + borderBottom: '1px solid' + theme.palette.themeColors.modal.border, }, placeInfo: { width: '84%', display: 'inline-block', lineHeight: 1.2, - color: theme.palette.themeColors.colors.text14, + color: theme.palette.themeColors.modal.textColor, verticalAlign: 'top', '& p': { width: '100%', @@ -68,7 +68,7 @@ export default theme => ({ height: 39, fontSize: 12, lineHeight: '36px', - color: theme.palette.themeColors.colors.text14, + color: theme.palette.themeColors.modal.textColor, backgroundColor: theme.palette.themeColors.colors.background14, textTransform: 'uppercase', textAlign: 'center', @@ -76,7 +76,7 @@ export default theme => ({ borderRadius: 4, }, infoLabel: { - color: theme.palette.themeColors.colors.text14, + color: theme.palette.themeColors.modal.textColor, marginTop: 15, textAlign: 'center', }, @@ -90,7 +90,7 @@ export default theme => ({ btn: { padding: 15, fontSize: 14, - color: theme.palette.themeColors.colors.text14, + color: theme.palette.themeColors.modal.textColor, lineHeight: '52px', float: 'right', cursor: 'pointer', diff --git a/src/componets/Modals/UploadModals/MediaMultipleUpload/MediaMultipleUpload.styles.js b/src/componets/Modals/UploadModals/MediaMultipleUpload/MediaMultipleUpload.styles.js index 8d5456b510b884d789f7c9533cd2907212f47267..f3637ff2b1408b9bdc2a2e61f61b70e9a067fb3d 100644 --- a/src/componets/Modals/UploadModals/MediaMultipleUpload/MediaMultipleUpload.styles.js +++ b/src/componets/Modals/UploadModals/MediaMultipleUpload/MediaMultipleUpload.styles.js @@ -10,7 +10,7 @@ export default theme => ({ maxHeight: '80vh !important', fontSize: 0, borderRadius: 8, - background: theme.palette.themeColors.colors.background3 + ' !important', + background: theme.palette.themeColors.modal.background + ' !important', boxShadow: '0 5px 20px 5px rgba(0, 0, 0, 0.2) !important' }, imageWrapper: { @@ -44,7 +44,7 @@ export default theme => ({ // }, modalTextWrapp: { textAlign: 'center', - borderBottom: '1px solid ' + theme.palette.themeColors.colors.border9, + borderBottom: '1px solid ' + theme.palette.themeColors.modal.border, '& p': { padding: '10px 0', fontSize: 14, @@ -71,7 +71,7 @@ export default theme => ({ // padding: '0 32px', padding: '0px 12px', fontSize: 14, - color: theme.palette.themeColors.colors.text14, + color: theme.palette.themeColors.modal.textColor, lineHeight: '52px', float: 'right' }, @@ -87,13 +87,13 @@ export default theme => ({ // position: 'absolute', // bottom: 32, // fontSize: 14, - color: theme.palette.themeColors.colors.text14 + color: theme.palette.themeColors.modal.textColor }, fileBox: { position: 'relative', overflow: 'hidden', - padding: 10, - borderRfileBoxadius: '0 5px 5px 5px' + padding: '10px 20px 10px 10px', + borderRadius: '0 5px 5px 5px' }, extensionBox: { overflow: 'hidden', diff --git a/src/componets/Modals/UploadModals/MediaUpload/MediaUpload.styles.js b/src/componets/Modals/UploadModals/MediaUpload/MediaUpload.styles.js index ab7f7402de83600e04260978f41d132611a812e3..bf4cf0c92e6797da15ffe609e8bc852ef8d002fc 100644 --- a/src/componets/Modals/UploadModals/MediaUpload/MediaUpload.styles.js +++ b/src/componets/Modals/UploadModals/MediaUpload/MediaUpload.styles.js @@ -10,7 +10,7 @@ export default theme => ({ maxWidth: '80vw !important', fontSize: 0, borderRadius: 8, - background: theme.palette.themeColors.colors.background3 + ' !important', + background: theme.palette.themeColors.modal.background + ' !important', boxShadow: '0 5px 20px 5px rgba(0, 0, 0, 0.2) !important' }, imageWrapper: { @@ -73,7 +73,7 @@ export default theme => ({ // padding: '0 32px', padding: '0px 15px', fontSize: 14, - color: theme.palette.themeColors.colors.text14, + color: theme.palette.themeColors.modal.textColor, lineHeight: '52px', float: 'right' }, @@ -89,6 +89,6 @@ export default theme => ({ // position: 'absolute', // bottom: 32, // fontSize: 14, - color: theme.palette.themeColors.colors.text14 + color: theme.palette.themeColors.modal.textColor } }); diff --git a/src/componets/Notification/Notification.js b/src/componets/Notification/Notification.js index 8eeb62383f4668de192adbb00694e90dbd9c7c29..33dc33df36ab628983789faf21ef0cab674968dc 100644 --- a/src/componets/Notification/Notification.js +++ b/src/componets/Notification/Notification.js @@ -9,8 +9,8 @@ import { notificationSelector } from 'Resource/notification/index'; const styles = theme => ({ notification: { '& > div': { - background: theme.palette.themeColors.colors.background1, - color: theme.palette.themeColors.colors.text14, + background: theme.palette.themeColors.notification.background, + color: theme.palette.themeColors.notification.textColor, } } }); diff --git a/src/componets/PaperWithDrop/PaperWithDrop.styles.js b/src/componets/PaperWithDrop/PaperWithDrop.styles.js index b61ae4f3f902bd3459083640971cc36b21055917..d3df16d0922ca378b729492b901c1d6b2a4b762a 100644 --- a/src/componets/PaperWithDrop/PaperWithDrop.styles.js +++ b/src/componets/PaperWithDrop/PaperWithDrop.styles.js @@ -3,7 +3,7 @@ export default theme => ({ marginBottom: 16, }, item: { - borderRadius: '8px', + borderRadius: '0 0 8px 8px', }, itemWrap: { //height: '250px' diff --git a/src/componets/PersonalChatsListItem/PersonalChatsListItem.styles.js b/src/componets/PersonalChatsListItem/PersonalChatsListItem.styles.js index de69d510c651365941f473b708f0b077109f6233..d74ec9cd7eee1d2579c133cd8b12d00bad55c101 100644 --- a/src/componets/PersonalChatsListItem/PersonalChatsListItem.styles.js +++ b/src/componets/PersonalChatsListItem/PersonalChatsListItem.styles.js @@ -120,7 +120,7 @@ export default (theme, avatarPic) => ({ userUnreadBulletsBox: { position: 'absolute', fontSize: 11, - right: 12, + right: 14, bottom: 5, marginLeft: 2 }, diff --git a/src/componets/ScheduledMessages/ScheduledMessages.styles.js b/src/componets/ScheduledMessages/ScheduledMessages.styles.js index 8a031cdf29093b1c7c365eb7772d8a88f7baee99..5db96b0869b12e23a12bbccb39b9779b5a34d109 100644 --- a/src/componets/ScheduledMessages/ScheduledMessages.styles.js +++ b/src/componets/ScheduledMessages/ScheduledMessages.styles.js @@ -83,9 +83,12 @@ export default (theme, avatar) => ({ font: '12px/17px noto_sansregular', textAlign: 'left', width: 255, - '@media screen and (min-width:1000px) and (max-width:1765px)': { + '@media screen and (min-width:1000px) and (max-width:1600px)': { width: 155, }, + '@media screen and (min-width:1600px) and (max-width:1765px)': { + width: 185, + }, }, scheduledDate: { marginBottom: 2, diff --git a/src/componets/StarredMessages/StarredMessages.styles.js b/src/componets/StarredMessages/StarredMessages.styles.js index cb9d7bd5171e0e16e3e00978c4f1b4ea03fee955..157ea6a1acf1340041f9a4000c11dcf765f716df 100644 --- a/src/componets/StarredMessages/StarredMessages.styles.js +++ b/src/componets/StarredMessages/StarredMessages.styles.js @@ -97,7 +97,7 @@ export default (theme, avatar) => ({ } }, listItem: { - padding: '4px 15px 4px 16px', + padding: '2px 15px 2px 16px', borderBottom: '1px solid ' + theme.palette.themeColors.starred.listItemBorder, }, avatar: { @@ -197,7 +197,7 @@ export default (theme, avatar) => ({ margin: 0, width: '100%', '&:hover': { - backgroundColor: theme.palette.themeColors.colors.background1, + backgroundColor: theme.palette.themeColors.starred.listItemBorder, }, cursor: 'pointer', }, @@ -239,7 +239,7 @@ export default (theme, avatar) => ({ width: '88%', display: 'inline-grid', lineHeight: 1.2, - color: theme.palette.themeColors.colors.text14, + color: theme.palette.themeColors.starred.personNameColor, verticalAlign: 'top', '& p': { width: '100%', @@ -277,9 +277,9 @@ export default (theme, avatar) => ({ minWidth: '50px', fontSize: 12, lineHeight: 1, - color: theme.palette.themeColors.colors.text13, + color: theme.palette.themeColors.messageTypes.sizeBox.color, borderRadius: 4, - background: theme.palette.themeColors.colors.background8, + background: theme.palette.themeColors.messageTypes.sizeBox.background, opacity: '.7', '& span': { opacity: '1' @@ -324,7 +324,7 @@ export default (theme, avatar) => ({ display: 'inline-block', fontSize: 14, lineHeight: 1.2, - color: theme.palette.themeColors.colors.text14, + color: theme.palette.themeColors.starred.personNameColor, whiteSpace: 'nowrap', verticalAlign: 'top', '& p': { diff --git a/src/componets/UserActonButtons/UserActionButtons.js b/src/componets/UserActonButtons/UserActionButtons.js index 24ffc9a8297212d12f6655fd5d172bb5702dedc6..bf2f0691226fdd72cc4ea4c92f9533a378c45745 100644 --- a/src/componets/UserActonButtons/UserActionButtons.js +++ b/src/componets/UserActonButtons/UserActionButtons.js @@ -25,8 +25,12 @@ const stylesFunc = (theme) => { }, disabledBtn: { color: '#777', - background: '#34373C', + background: theme.palette.themeColors.contact.disabledBtnBackground + '!important', cursor: 'default', + }, + tooltip: { + color: theme.palette.themeColors.tooltip.color, + background: theme.palette.themeColors.tooltip.background, } }; }; @@ -68,7 +72,7 @@ const UserActionButtons = (props) => { return (
- + loadChat(phone_id)} @@ -76,13 +80,13 @@ const UserActionButtons = (props) => { {sendMessageTxt} - + - +