diff --git a/css/base.css b/css/base.css index 10c791c8..9d7aef70 100644 --- a/css/base.css +++ b/css/base.css @@ -96,6 +96,7 @@ html input[disabled] { cursor: default; opacity: 0.65; box-shadow: none; + filter: grayscale(50%); } button.round { @@ -117,7 +118,7 @@ button.round.small { box-shadow: 0 2px 0.35rem 0 rgba(0, 0, 0, 0.25); } -button:focus, button:hover, button:active { +button:hover:not([disabled]), button:active:not([disabled]) { color: #fff; } button:active { @@ -131,7 +132,7 @@ button.primary { background-color: #1e88e5; /* blue 600 */ color: white; } -button.primary:focus, button.primary:hover, button.primary:active { +button.primary:hover:not([disabled]), button.primary:active:not([disabled]) { background-color: #2962ff; } @@ -139,7 +140,7 @@ button.secondary { background-color: #FFF; color: #2196f3; /* blue 500 */ } -button.secondary:focus, button.secondary:hover, button.secondary:active { +button.secondary:hover:not([disabled]), button.secondary:active:not([disabled]) { background-color: #e3f2fd; } @@ -149,7 +150,7 @@ button.outline { border: 1px solid silver; box-shadow: none; } -button.outline:focus, button.outline:hover, button.outline:active { +button.outline:hover:not([disabled]), button.outline:active:not([disabled]) { background-color: #e8eaf6; /* indigo 50 */ } @@ -157,7 +158,7 @@ button.danger { background-color: #ec6560; color: white; } -button.danger:focus, button.danger:hover, button.danger:active { +button.danger:hover:not([disabled]), button.danger:active:not([disabled]) { background-color: #f77; } @@ -165,7 +166,7 @@ button.positive { background-color: #71c46f; color: white; } -button.positive:focus, button.positive:hover, button.positive:active { +button.positive:hover:not([disabled]), button.positive:active:not([disabled]) { background-color: rgb(127, 237, 127); } @@ -1605,13 +1606,26 @@ img.channel { } .controls { + position: absolute; display: flex; + column-gap: 1rem; align-items: center; justify-content: center; - height: 3.2rem; + width: 100%; + bottom: 2.5rem; z-index: 1; - background-color: #eceff1; - box-shadow: 0px -2px 3px -1px rgba(0,0,0,0.1); /* Faint shadow above panel */ +} + +.incoming-call .controls { + bottom: 1rem; +} + +.controls button { + border-radius: 50%; + width: 4rem; + height: 4rem; + min-width: initial; + box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.25); } #video-container-panel { @@ -1649,6 +1663,10 @@ img.channel { z-index: 2; } +.call-party.self[disabled] { + display: none; +} + video { width: 100%; height: 100%; @@ -1659,6 +1677,10 @@ video { transform: scaleX(-1); } +.call-party[disabled] video { + display: none; +} + .caller-card { position: absolute; top: 0; @@ -1737,7 +1759,7 @@ video { left: initial; width: 100%; height: 100%; - padding: 5rem 3.5rem 2rem 3.5rem; + padding: 4rem 3.5rem 5.5rem 3.5rem; display: flex; align-items: center; justify-content: center; diff --git a/css/base.min.css b/css/base.min.css index 9c99b3a4..3f74220b 100644 --- a/css/base.min.css +++ b/css/base.min.css @@ -1 +1 @@ -*{box-sizing:border-box;font-family:Roboto,Arial,sans-serif;margin:0;padding:0;text-rendering:optimizeLegibility}body,html{background-color:silver;box-shadow:inset 0 10rem #3949ab;color:#666;font-size:10pt;height:100%;overflow:hidden;width:100%}tt{font-family:Roboto Mono,Courier,monospace}a{color:#2196f3;text-decoration:none}a:focus,a:hover{color:#0a6ebd;text-decoration:underline}a.danger{color:#d32f2f}a.danger:focus,a.danger:hover{color:#f44336}a.gray:focus,a.gray:hover{color:#999}form{line-height:1.5;padding:.5rem .75rem}form,label{font-size:1.1rem}label{margin-right:auto}label.small{color:#1e88e5;font-size:.95rem}img.avatar{border-radius:50%;height:100%;width:100%}button{border:1px solid #0000;border-radius:4px;box-shadow:0 1px 3px 0 #00000040;cursor:pointer;display:inline-block;font-family:inherit;font-size:1.05rem;font-weight:400;height:2.2rem;line-height:2.2rem;margin:0 .35rem;min-width:5rem;padding-left:1.2rem;padding-right:1.2rem;text-align:center;text-transform:uppercase;touch-action:manipulation;vertical-align:middle;white-space:nowrap}button[disabled],html input[disabled]{box-shadow:none;cursor:default;opacity:.65}button.round{border-radius:50%;box-shadow:0 2px .5rem 0 #00000040;height:3rem;line-height:3.5rem;margin:0;outline:none;padding:0;width:3rem;z-index:2}button.round.small{box-shadow:0 2px .35rem 0 #00000040;height:2rem;line-height:2rem;width:2rem}button:active,button:focus,button:hover{color:#fff}button:active{box-shadow:inset 0 3px .5rem rgba(0,0,0,.125)}button:active.round.small{box-shadow:inset 0 2px .35rem rgba(0,0,0,.125)}button.primary{background-color:#1e88e5;color:#fff}button.primary:active,button.primary:focus,button.primary:hover{background-color:#2962ff}button.secondary{background-color:#fff;color:#2196f3}button.secondary:active,button.secondary:focus,button.secondary:hover{background-color:#e3f2fd}button.outline{background-color:initial;border:1px solid silver;box-shadow:none;color:#2196f3}button.outline:active,button.outline:focus,button.outline:hover{background-color:#e8eaf6}button.danger{background-color:#ec6560;color:#fff}button.danger:active,button.danger:focus,button.danger:hover{background-color:#f77}button.positive{background-color:#71c46f;color:#fff}button.positive:active,button.positive:focus,button.positive:hover{background-color:#7fed7f}input,textarea{background:#0000;border:none;color:#666;font-family:inherit;font-size:1.1rem;margin:.25rem 0;outline:none;padding:0 .125rem}input[type=email],input[type=password],input[type=search],input[type=text],textarea{border-bottom:1px solid #ccc;box-shadow:0 1px 0 #0000001a;height:2.5rem;transition:all .1s ease-in-out}input[type=email],input[type=password],input[type=text],textarea{width:100%}input[type=email]:focus,input[type=password]:focus,input[type=search]:focus,input[type=text]:focus,textarea:focus{border-bottom:1px solid #2196f3;box-shadow:0 1px 0 #2196f340}input[type=email].invalid,input[type=password].invalid,input[type=search].invalid,input[type=text].invalid,textarea.invalid{border-bottom:1px solid #e57373;box-shadow:0 1px 0 #e5737340}input[type=email]::placeholder,input[type=password]::placeholder,input[type=search]::placeholder,input[type=text]::placeholder,textarea::placeholder{color:#bbb;font-weight:lighter}input[type=password].with-visibility,input[type=text].with-visibility{margin-right:-2rem;padding-right:2rem}textarea{padding-top:.45rem;resize:none}textarea.inplace-edit{font-size:unset;height:unset}::-webkit-scrollbar{width:.6rem}::-webkit-scrollbar-track{background-color:#ffffff1a;-webkit-box-shadow:inset 0 0 6px #0003;box-shadow:inset 0 0 6px #0003}::-webkit-scrollbar-thumb{background-color:#0000004d}*{scrollbar-color:silver;scrollbar-width:thin}ul.menu{background-color:#fff;border-radius:.2rem;box-shadow:0 1px 6px #00000073;list-style:none;padding-bottom:.35rem;padding-top:.35rem;position:absolute;width:12rem;z-index:4}ul.menu>li{cursor:pointer;padding:.75rem .75rem .75rem 1.25rem}ul.menu>li:hover{background-color:#f5f5f5}ul.menu>li.separator{height:1px;margin:2px;padding:0}ul.menu>li.separator,ul.menu>li.separator:hover{background-color:#ccc}li .menuTrigger{background-color:inherit;border-radius:.7rem;height:1.4rem;line-height:1.4rem;opacity:0;position:absolute;right:.25rem;text-align:center;top:.25rem;width:1.4rem}li:hover .menuTrigger{opacity:.9}li:hover .menuTrigger a{color:#757575}div.alert-container{align-items:center;background:#f0f0f0d9;display:flex;height:100%;justify-content:center;position:absolute;width:100%;z-index:3}div.alert{background-color:#fff;border-radius:.3rem;box-shadow:.15rem .15rem 1.5rem #00000073;margin:auto 2rem;max-width:24rem;min-width:16rem;padding:1rem;position:relative;width:fit-content}div.alert-container .title{color:#2196f3;font-size:1.2rem;font-weight:500;padding:0 0 .35rem;width:100%}div.alert-container .title.with-control{align-items:center;display:flex;flex:none;justify-content:space-between;padding:.5rem .5rem 0}div.alert-container .content{padding:.5rem 0}div.trusted-badge{margin:.25rem 0}.blue{color:#2196f3!important}.lt-blue{color:#64b5f6!important}.verified-color{color:#03a9f4!important}.staff-color{color:#689f38!important}.danger-color{color:#ffc107!important}.green{color:#388e3c}.white{color:#fff!important}.red{color:#d32f2f!important}.badge-inv{color:#fffd!important}.gray{color:#757575!important}.light-gray{color:#bbb!important}.large{font-size:120%}.small{font-size:90%}.float-right{position:absolute;right:.5rem}.hr{background-color:#f0f0f0;box-shadow:inset 0 .25rem .25rem -.25rem #00000026,inset 0 -.25rem .25rem -.25rem #00000026;display:block;height:.45rem;min-height:.3rem;width:100%}.hr.thin{height:.015rem}.ellipsized{overflow-x:hidden;text-overflow:ellipsis;white-space:nowrap}.flat-button{align-items:center;background-color:#fff;display:flex;font-weight:400;height:2em;line-height:2em;margin:.15rem .35rem;text-align:center;text-transform:uppercase;touch-action:manipulation;vertical-align:middle;white-space:nowrap;z-index:1}.flat-button:focus,.flat-button:hover{text-decoration:none}.flat-button.faux{background-color:#eee;border:1px solid #999;border-radius:3px;display:inline-block;height:1.4em;line-height:1.4em;margin:.15rem;padding:0 .35rem;text-transform:none}.action-button{background-color:#fafafa;border-radius:50%;bottom:1rem;box-shadow:0 2px .5rem 0 #00000040;color:#999;display:block;font-size:1.8rem;height:3.25rem;margin:0;min-height:unset;min-width:unset;outline:none;padding:0;position:absolute;right:1rem;transition:all .15s;width:3.25rem;z-index:2}.action-button:focus,.action-button:hover{background-color:#f0f0f0;color:#888}.action-button:active{background-color:#eee;color:#777}.action-button.hidden{bottom:2.625rem;font-size:1px;height:1px;line-height:1px;opacity:0;right:2.625rem;width:1px}.group-focus{outline:none}#mountPoint{height:100%;padding-bottom:1rem;padding-top:1rem}#noscript-message{background-color:#fff;border-radius:.25rem;box-shadow:1px 2px .3rem gray;display:flex;flex-direction:column;margin-left:auto;margin-right:auto;margin-top:5rem;max-width:30rem;overflow:hidden;position:relative}#noscript-title{background-color:#2196f3;color:#bbdefb;font-size:120%;font-weight:bolder;padding:1rem}#noscript-content{padding:1rem}#app-container{background-color:#fff;border-radius:.25rem;box-shadow:1px 2px .3rem gray;display:flex;height:100%;margin-left:auto;margin-right:auto;max-width:84rem;overflow:hidden;position:relative}#sidepanel{flex-grow:0;flex-shrink:0.3;min-width:18rem;width:24rem}#sidepanel,#topic-view{display:flex;flex-direction:column;height:100%;position:relative}#topic-view{overflow-x:hidden;width:100%}#info-view{display:flex;flex-direction:column;flex-grow:0;flex-shrink:0.3;height:100%;min-width:18rem;width:24rem}.center-medium-text{align-items:center;display:flex;font-size:1.4rem;height:100%;justify-content:center;text-align:center;width:100%}.nodisplay{display:none!important}.quoted{margin-left:1rem}.space-right{margin-right:.25rem}.rounded-container{background-color:#fafafa;border-radius:.1rem;margin:.25rem;padding:.25rem;position:relative}.in-place-edit{border-bottom:1px dashed #ddd;cursor:pointer;display:inline-block;font-family:inherit;font-size:1rem;margin:.25rem .125rem 0;vertical-align:initial;width:100%}.in-place-edit.short{font-size:1.1rem;height:2.5rem;line-height:2.25}.in-place-edit.disabled{border-bottom:none;color:#888;cursor:default}.in-place-edit.placeholder{color:#bbb}.in-place-edit span{display:inline-block}.in-place-edit.short span{display:block;overflow-x:hidden;text-overflow:ellipsis;white-space:nowrap}table.permission-editor{width:100%}table.permission-editor td{font-size:1.1rem;margin:.35rem 0;vertical-align:middle}table.permission-editor td.checkbox{color:#999;text-align:center}.permission-editor .material-icons{font-size:1.3rem;line-height:1.3rem}.material-icons.clickable{border-bottom:none;cursor:pointer}.clickable{border-bottom:1px dashed #ddd}.clean-clickable,.clickable,.image-clickable{cursor:pointer}.panel-title{font-size:1.4rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.panel-title.deleted{text-decoration:line-through}.caption-panel{align-items:center;box-shadow:0 1px 2px gray;display:flex;flex:none;height:4rem;overflow-x:hidden;padding:.5rem;white-space:nowrap;z-index:1}.dialog-buttons{display:flex;justify-content:flex-end;padding:.5rem}.dialog-buttons button{margin:0 .5rem}.avatar-box{flex-grow:0;flex-shrink:0;position:relative}.bot-form{display:flex;flex-direction:column;line-height:2rem;min-width:8rem;overflow:hidden}.bot-form div{min-height:2rem;vertical-align:middle}.bot-form button{background-color:#eef;color:#2196f3;display:inline-block;font-size:inherit;height:2rem;line-height:2rem;margin:.15rem;text-transform:none}.bot-form>div>button{width:auto}.bot-form button:active,.bot-form button:focus,.bot-form button:hover{background-color:#e3f2fd;outline:0}#side-caption-panel{background-color:#2196f3;color:#bbdefb}#side-caption-panel a{color:#bbdefb;line-height:1;padding-left:.5rem}#side-caption-panel :hover{color:#fff}#sidepanel-title{margin-left:.5rem;margin-right:auto}#self-avatar{border-radius:50%;flex:none;height:3rem;min-width:3rem;width:3rem}#self-avatar.avatar-box{font-size:1.8rem}#settings-form ul{list-style:none}#settings-form li{vertical-align:middle}#settings-form label{display:inline-block;padding-left:.5rem}input#host-name{width:100%}input.search{text-indent:1.4rem}i.search{left:.6rem;position:absolute}.info-box{display:none;overflow:hidden;padding:1rem 1.5rem .75rem .5rem;position:relative}.info-box>span{line-height:1.35rem}.info-box .cancel{position:absolute;right:.25rem;top:.5rem}.info-box.error{background-color:#ffcdd2;border-bottom:1px solid #ffbfc8;color:#b71c1c;display:flex}.info-box.warning{background-color:#fff9c4;border-bottom:1px solid #fff59d;color:#6d4c41;display:flex}.info-box.info{background-color:#e1f5fe;border-bottom:1px solid #b3e5fc;color:#0288d1;display:flex}.info-box .cancel .material-icons{color:#757575;font-size:1rem}.info-box.error .cancel .material-icons{color:#b71c1c}.info-box .icon{display:block;margin-right:.5rem}.info-box .icon .material-icons{font-size:1.5rem}.info-box.warning .icon .material-icons{color:#fbc02d}.info-box.error .icon .material-icons{color:#ef5350}.info-box.info .icon .material-icons{color:#0288d1}.flex-column{display:flex;flex-direction:column;height:100%;overflow-x:hidden}.flex-column.narrow{height:auto}.scrollable-panel{height:100%;margin-bottom:auto;margin-top:.25rem;overflow-x:hidden;overflow-y:auto;scroll-behavior:smooth}.contact-box{list-style:none;overflow-x:hidden}.contact-box>li{background:linear-gradient(90deg,#0000 3.5rem,#eee 1px,#eee) 0 100% /100% 1px no-repeat,#fff;cursor:pointer;display:flex;flex-grow:0;flex-shrink:0;min-height:3.75rem;overflow-x:hidden;padding:.35rem .25rem .5rem .35rem;position:relative}.contact-box.small>li{min-height:2.5rem;padding:.25rem .25rem .35rem .35rem}.contact-box>li:last-child{background:#fff}.contact-box>li:hover{background-color:#eceff1}.contact-box>li.selected{background-color:#cfd8dc}.contact-box>li.action{border-bottom:none;min-height:2.5rem}.contact-box .text-box{overflow-x:hidden}.contact-box .contact-title{font-size:1.05rem;overflow-x:hidden;text-overflow:ellipsis;white-space:nowrap}.contact-box .contact-title.deleted{opacity:.66;text-decoration:line-through;text-decoration-thickness:.5px}.contact-box .contact-comment{font-weight:lighter}.contact-box .contact-comment,.contact-box .contact-comment>span{overflow-x:hidden;text-overflow:ellipsis;white-space:nowrap}.contact-box .contact-comment b{font-weight:bolder}.contact-box .contact-comment .material-icons{color:#777;margin-bottom:.2rem}.contact-box .avatar-box{font-size:1.8rem;height:3rem;margin-right:.35rem;min-height:3rem;min-width:3rem;overflow:hidden;padding:0;position:relative;width:3rem}.contact-box .avatar{border-radius:50%;height:3rem;width:3rem}.contact-box.small .avatar-box{font-size:1.2rem;height:2rem;min-height:2rem;min-width:2rem;width:2rem}.contact-box.small .avatar{height:2rem;width:2rem}.avatar.deleted{filter:grayscale(1);opacity:.75}.contact-box .avatar-box>.material-icons{display:flex;flex-direction:column;font-size:2.4rem;justify-content:space-around;line-height:3rem}.contact-box.small .avatar-box>.material-icons{font-size:1.6rem;line-height:2rem}.contact-box .text-box{display:flex;flex-direction:column;justify-content:space-around}.contact-box .text-box>div{align-items:center;display:flex;flex-direction:row}.contact-box .action-text{cursor:pointer;font-size:.95rem;line-height:2.5rem;margin:0 auto;text-align:center}img.channel{height:1.25rem;margin-left:.3rem;vertical-align:middle;width:1.25rem}.large img.channel{height:1.45rem;margin-bottom:.15rem;margin-left:.5rem;width:1.45rem}.avatar-box .online,.offline{border-radius:50%;bottom:.1rem;flex-shrink:0;height:.75rem;min-height:.75rem;min-width:.75rem;position:absolute;right:0;width:.75rem}.avatar-box .online{background-color:#4caf50}.avatar-box .offline{background-color:silver}.online.typing{animation:typing .5s infinite}@keyframes typing{0%,to{transform:translateX(0)}50%{transform:translateX(-.3rem)}}.contact-box .checkmark.material-icons{border:0 solid #0000;color:#0097a7;overflow:visible;padding-left:.5px}.contact-box .checkmark.material-icons,.contact-box .deleted.material-icons{background-color:#fff;bottom:0;font-size:1.5rem;height:1.5rem;position:absolute;right:0;width:1.5rem}.contact-box .deleted.material-icons{color:#999}#add-topic{bottom:1rem;position:absolute;right:1rem}.panel-form{display:flex;flex-direction:column;padding:0;position:relative}.panel-form-row{align-items:center;flex-shrink:0}.panel-form-column,.panel-form-row{display:flex;flex-grow:0;line-height:1.5;padding:.5rem .75rem;position:relative}.panel-form-column{flex-direction:column;overflow-x:hidden}.panel-form-column>.panel-form-column,.panel-form-row>.panel-form-column{flex-grow:1;padding:0!important}.panel-form-column>.panel-form-row,.panel-form-row>.panel-form-row{padding:0!important}.panel-form-column>.group{margin-bottom:.25rem;margin-top:.25rem}.avatar-upload{display:flex;flex-direction:column;flex-shrink:0;font-size:4.5rem;height:10.5rem;padding:0;position:relative;width:10rem}.avatar-upload.read-only{height:auto}.avatar-upload .clear-avatar{background-image:radial-gradient(#fff 40%,#0000 75%);font-size:1rem;opacity:0;position:absolute;right:0;top:0}.avatar-upload:hover .clear-avatar{opacity:1}.avatar-upload .avatar-box{height:10rem;position:relative;width:10rem}.avatar-upload .avatar-box>.material-icons{font-size:4rem;line-height:10rem;position:relative;vertical-align:middle}.avatar-upload:after{clear:both;content:".";display:block;height:0;visibility:hidden}.avatar-upload .blank{border:1px dashed #999;color:#999;flex-shrink:0;font-size:1rem;line-height:10rem;text-align:center;vertical-align:middle}.avatar-upload .blank,.avatar-upload img.preview{border-radius:50%;height:10rem;overflow:hidden;width:10rem}.avatar-upload img.preview:before{background:50% no-repeat url(../img/broken_image.png);border-radius:50%;color:#666;content:" ";display:flex;font-size:.9rem;font-weight:lighter;height:10rem;justify-content:center;left:0;position:absolute;top:0;width:10rem}.avatar-upload .inputfile.hidden{height:.1px;opacity:0;overflow:hidden;position:absolute;width:.1px}.avatar-upload .inputfile+label.round{align-items:center;background-color:#fafafa;border-radius:50%;bottom:0;box-shadow:0 1px 4px #0006;cursor:pointer;display:flex;height:3rem;justify-content:center;line-height:3rem;position:absolute;right:0;width:3rem;z-index:1}.avatar-upload .inputfile:focus+label.round{outline:none}.avatar-upload .inputfile+label:hover,.avatar-upload .inputfile:focus+label{background-color:#e3f2fd;color:#42a5f5}#topic-caption-panel{background-color:#b0bec5}#topic-caption-panel a{color:#757575;text-decoration:none}#topic-caption-panel :hover{color:#000}#topic-caption-panel .avatar-box{font-size:1.8rem;height:3rem;margin-right:.35rem;min-width:3rem;position:relative;width:3rem}#topic-caption-panel .avatar-box>.material-icons{font-size:2.4rem;line-height:3rem}#topic-title-group{overflow-x:hidden}#hide-message-view{display:block;margin-right:.35rem}#topic-users{margin-left:auto;margin-right:1rem}#topic-users .avatar-box{display:inline-block;font-size:1rem;height:1.8rem;margin-right:.2rem;min-height:1.8rem;min-width:1.8rem;width:1.8rem}#topic-users .avatar-box>.material-icons{font-size:1.4rem;line-height:1.8rem}#topic-users>span{line-height:2rem;vertical-align:top}#messages-panel{background-color:#eceff1;background-image:url(../img/bg_messages.png);height:100%;overflow-y:scroll;padding:.75rem;position:relative}#messages-container{height:100%;overflow-y:hidden;position:relative}#write-only-background{background-image:repeating-linear-gradient(45deg,#ffffff80,#ffffff80 .5rem,#fffc 0,#fffc 1rem);height:100%;left:0;position:absolute;top:0;width:100%}#write-only-note{height:auto;top:50%;transform:translate(-50%,-50%);width:auto}#peer-messaging-disabled-note,#write-only-note{background-color:#fff;border-radius:.5rem;box-shadow:0 1px .5px #0000001f;color:#666;left:50%;line-height:2rem;padding:.75rem 1.25rem;position:absolute;text-align:center}#peer-messaging-disabled-note{bottom:4.3rem;transform:translate(-50%);width:fit-content}#send-message-panel{align-items:center;background-color:#eceff1;display:flex;flex:none;min-height:4rem;padding:.4rem .4rem .4rem .6rem;z-index:2}#send-message-panel #writing-disabled{font-size:1.2rem;text-align:center;width:100%}#send-message-wrapper{background-color:#eceff1;box-shadow:0 -2px 3px -1px #0000001a;z-index:2}#sendMessage{overflow:hidden;overflow-wrap:break-word}#send-message-panel .material-icons{font-size:1.6rem;min-width:2rem}#send-message-panel .material-icons.secondary,.material-icons.disabled{color:#999!important}#send-message-panel .material-icons.secondary:hover{color:#2196f3!important}.accept-invite-panel{background-color:#eceff1;box-shadow:0 -2px 3px -1px #0000001a;width:100%;z-index:1}.accept-invite-panel .title{font-size:1.2rem;padding:.75rem}.accept-invite-panel .footer{background-color:#fafafa;padding-bottom:.35rem;text-align:center;white-space:nowrap}.accept-invite-panel button{border:1px solid #0000;box-shadow:0 1px 2px 0 #00000040;font-size:1rem;height:2em;line-height:2em;margin:.25rem}#dummy-view{align-items:center;background-color:#e0f7fa;display:flex;height:100%;justify-content:center;width:100%}#dummy-view a{display:block;text-align:center;text-decoration:none}#image-preview{background-color:#ffffffe6;display:flex;flex-direction:column;height:100%;left:0;position:absolute;top:0;width:100%;z-index:2}#image-preview-caption-panel{background-color:#eceff1;box-shadow:0 1px 2px silver;display:flex;height:4.6rem;justify-content:space-between;line-height:2.5rem;padding:1rem .75rem 0;z-index:3}#image-preview-caption-panel a{color:#757575;text-decoration:none}#image-preview-caption-panel a:hover{color:#000}#image-preview-container{align-items:center;display:flex;height:100%;justify-content:space-around;overflow:hidden;width:100%}#image-preview-footer{background-color:#eceff1;box-shadow:0 -2px 3px -1px #0000001a;display:flex;height:3.2rem;justify-content:space-around;line-height:1.5rem}#image-preview-container .material-icons{font-size:6rem}#video-container{background-color:#ffffffe6;display:flex;flex-direction:column;height:100%;justify-content:space-between;left:0;position:absolute;top:0;width:100%}.controls{align-items:center;background-color:#eceff1;box-shadow:0 -2px 3px -1px #0000001a;display:flex;height:3.2rem;justify-content:center;z-index:1}#video-container-panel{height:100%;position:relative;width:100%}.call-party{background-color:#eee;border:2px solid #ccc;border-radius:.5rem;overflow:hidden}.call-party:hover{border:2px solid #2196f3}.call-party.peer{bottom:1rem;left:1rem;position:absolute;right:1rem;top:1rem;z-index:1}.call-party.self{bottom:.5rem;height:10rem;position:absolute;right:.5rem;width:10rem;z-index:2}video{height:100%;object-fit:contain;width:100%}.call-party.self video{transform:scaleX(-1)}.caller-card{align-items:center;display:flex;flex-direction:column;height:100%;justify-content:center;left:0;position:absolute;top:0;width:100%}.caller-card .avatar-box{font-size:6rem;height:10rem;width:10rem}.caller-card.pulse .lettertile,.caller-card.pulse img.avatar{animation:active-call 1.5s linear infinite}.caller-card .avatar-box .material-icons{font-size:6rem;line-height:1.6}.call-party .caller-name{background-color:#ffffffb3;border-radius:.35rem;padding:.15rem .5rem;text-shadow:0 0 1px #fff;z-index:1}.call-party.self .caller-name.inactive{bottom:.25rem;position:absolute;right:.25rem}.caller-card .caller-name{font-size:larger;margin-top:.5rem}.caller-card .trusted-badge{display:inline-block}.call-party.peer .caller-name.inactive{bottom:.5rem;font-size:larger;left:50%;margin:0 auto;position:absolute;transform:translateX(-50%)}.incoming-call{background-color:#fff;border-radius:.3rem;box-shadow:.15rem .15rem 1.5rem #00000073;margin:auto 2rem;max-width:24rem;min-width:16rem;position:relative;width:fit-content}.incoming-call .caller-card{align-items:center;display:flex;flex-direction:column;height:100%;justify-content:center;left:auto;padding:5rem 3.5rem 2rem;position:relative;top:auto;width:100%}.incoming-call .caller-name{background-color:#ffffffb3;border-radius:.35rem;padding:.15rem .5rem;text-shadow:0 0 1px #fff;z-index:1}.call-message{display:flex;flex-direction:row}.call-message .duration{font-weight:lighter}@keyframes active-call{0%{box-shadow:0 0 0 .1rem #2196f34d,0 0 0 .3rem #2196f34d,0 0 0 .5rem #2196f34d}to{box-shadow:0 0 0 .4rem #2196f34d,0 0 0 2rem #2196f300,0 0 0 3rem #2196f300}}.chat-box{list-style:none;margin:0 .5rem;padding:0 0 3.5rem;scroll-behavior:smooth}.chat-box.group{margin-left:-.4rem}.chat-box li{align-items:flex-end;display:flex;margin:0;padding:0}.chat-box .right{justify-content:flex-end}.bubble{border-radius:.5rem;box-shadow:0 1px .5px #0000001f;color:#212121;display:flex;height:auto;margin:0;max-width:36rem;min-width:9rem;padding:.75rem .5rem;position:relative;text-align:left;transition:background-color .5s ease-out;transition-delay:.3s}.chat-box li.single{margin-bottom:.75rem;margin-top:.25rem}.chat-box li.first{margin-bottom:.15rem;margin-top:.25rem}.chat-box li.middle{margin-bottom:.15rem;margin-top:.15rem}.chat-box li.last{margin-bottom:.75rem;margin-top:.15rem}.left .bubble{background-color:#c5e1a5;margin-right:.5rem}.left.flash .bubble{background-color:#94a97c}.left .bubble.tip{border-bottom-left-radius:0}.right .bubble{background-color:#fafafa;margin-left:1.75rem}.right.flash .bubble{background-color:#ccc}.right .bubble.tip{border-bottom-right-radius:0}.chat-box .meta{justify-content:center;margin-bottom:.5rem;margin-top:.5rem}.chat-box .meta .bubble{color:#666;min-width:unset}.meta .bubble.deleted{background-color:#e3f2fd;padding:.75rem .75rem .5rem}.meta .bubble.date{background-color:#f4f4f4a8;font-size:smaller;padding:.5rem;text-transform:uppercase}.left .bubble.tip:before{background-color:#c5e1a5;border-bottom-left-radius:.3rem;bottom:0;box-shadow:0 1px .5px #0000001f;clip-path:polygon(100% 0,0 110%,100% 110%);-webkit-clip-path:polygon(100% 0,0 110%,100% 110%);content:"";height:.85rem;left:-.8rem;position:absolute;-moz-transition:background-color .5s ease-out;transition:background-color .5s ease-out;transition-delay:.3s;width:.85rem}.left.flash .bubble.tip:before{background-color:#94a97c}.right .bubble.tip:before{background-color:#fafafa;border-bottom-right-radius:.3rem;bottom:0;box-shadow:0 1px .5px #0000001f;clip-path:polygon(0 0,100% 110%,0 110%);-webkit-clip-path:polygon(0 0,100% 110%,0 110%);content:"";height:.85rem;left:99.8%;position:absolute;-moz-transition:background-color .5s ease-out;transition:background-color .5s ease-out;transition-delay:.3s;width:.85rem}.right.flash .bubble.tip:before{background-color:#ccc}.chat-box .avatar-box{font-size:.8rem;height:1.4rem;margin-bottom:.8rem;margin-right:.8rem;min-height:1.4rem;min-width:1.4rem;position:relative;width:1.4rem}.bubble div.content-meta{width:100%}.bubble div.message-content{margin:0;max-width:36rem;overflow-wrap:anywhere;padding:0 .75rem;position:relative;width:100%}.bubble div.message-content:after{clear:both;content:".";display:block;height:0;visibility:hidden}.chat-box .timestamp-padding{display:inline-block;height:0;width:4rem}.chat-box .timestamp{float:right;position:relative;top:.35rem;user-select:none;white-space:nowrap}.chat-box .author,.chat-box .timestamp{color:#777;font-size:80%}.image-preview,.inline-image{border-radius:.1rem;overflow:hidden;position:relative}.inline-image{max-height:24rem;max-width:36rem}.inline-image>.rounded-container{border-left:.25rem solid #0000;border-right:.25rem solid #0000;bottom:2rem;margin:.25rem auto;position:relative}img.image-preview:before,img.inline-image:before{background:50% no-repeat #ccc url(../img/broken_image.png);color:#666;display:flex;font-size:.9rem;font-weight:lighter;height:100%;justify-content:center;left:0;position:absolute;top:0;width:100%}img.inline-image:before{background-size:3rem 3rem;content:attr(alt)}img.image-preview:before{background-size:10rem 10rem;content:" "}.inline-image.video>img.inline-image:before,img.image-preview.video:before{background:50% no-repeat #ccc url(../img/broken_video.png)}.inline-image.video>img.inline-image:before{background-size:3rem 3rem}.inline-video{align-items:center;display:flex;justify-content:center;position:relative}.inline-video>img.inline-image:before{background:#ccc}.inline-video .duration{background-color:#ffffff80;border-radius:.3rem;bottom:.25rem;color:#333;font-size:80%;left:.25rem;padding:.25rem .5rem;position:absolute}.inline-video .play-control{align-items:center;background-color:#0006;border-radius:50%;cursor:pointer;display:flex;height:4rem;justify-content:center;pointer-events:none;position:absolute;width:4rem}.attachment{display:flex}.attachment:last-of-type{margin-bottom:-.45rem}#info-caption-panel{background-color:#b0bec5}#info-caption-panel a{color:#757575;line-height:1;text-decoration:none}#info-caption-panel :hover{color:#000}#info-title{margin-right:auto}#group-manager{display:flex;flex-direction:column;height:100%;overflow-y:hidden;position:relative}#group-manager-buttons{background-color:#eceff1;border-left:1px solid #ccc;box-shadow:0 -1px #0000001a;display:flex;height:4rem;justify-content:space-around;padding:.4rem;z-index:2}ul.tabbar{background:#eee;display:flex;flex-grow:0;flex-shrink:0;list-style:none;margin:0;overflow:hidden;padding:0 0 0 1rem;width:100%}ul.tabbar>li{box-shadow:inset 0 -2px 2.5px -1px #00000040;height:2.4rem;position:relative}ul.tabbar li.active{background:#fff}ul.tabbar li:after{background:#ccc;bottom:0;content:"";height:.1rem;left:0;position:absolute;width:100%}ul.tabbar li.active:after{animation:tabbar-border-expand .2s cubic-bezier(.4,0,.4,1) 0s alternate forwards;background:#2196f3;bottom:0;content:"";height:.15rem;left:0;position:absolute}@keyframes tabbar-border-expand{0%{opacity:0;width:0}to{opacity:1;width:100%}}ul.tabbar>li>a{color:#2196f399;font-size:1.3rem;font-variant:small-caps;font-weight:400;line-height:2.4rem;overflow:hidden;padding-left:1rem;padding-right:1rem;position:relative;text-align:center;text-decoration:none}ul.tabbar li.active>a{color:#2196f3}.unread{background-color:#0097a7;border-radius:50%;color:#fff;display:inline-block;font-size:.75rem;font-weight:bolder;height:1.35rem;line-height:1.45rem;margin-left:.5rem;text-align:center;vertical-align:middle;width:1.35rem}.material-icons.as-badge{color:#aaa;font-size:1.15rem;padding-left:.2rem}.badge{align-self:flex-start;background-color:#e8e8e8;border:1px solid silver;border-radius:.2rem;color:#666;display:inline-block;font-family:Roboto Mono,Courier,monospace,sans-serif;font-size:.8rem;margin:.05rem .1rem;padding:.05rem .25rem}.badge.green{background-color:#efe;border-color:#aca;color:#383}.badge.yellow{background-color:#ffe;border-color:#cc9;color:#660}.badge.blue{background-color:#eef;border-color:#aad;color:#339}.badge.red{background-color:#fee;border-color:#c99;color:#933}.badge.magenta{background-color:#fef;border-color:#c9c;color:#939}.lettertile{border-radius:50%;padding-bottom:100%;width:100%}.lettertile>div{align-items:center;border-radius:50%;bottom:0;color:#fafafacc;display:flex;flex-grow:0;flex-shrink:0;justify-content:center;left:0;line-height:1;padding-top:.1em;position:absolute;right:0;text-align:center;text-transform:uppercase;top:0}.lettertile:hover{color:#fff}.lettertile.disabled{opacity:.5}.lt-bg-0{background-color:#ef9a9a}.lt-bg-1{background-color:#90caf9}.lt-bg-2{background-color:#b0bec5}.lt-bg-3{background-color:#b39ddb}.lt-bg-4{background-color:#ffab91}.lt-bg-5{background-color:#a5d6a7}.lt-bg-6{background-color:#eee}.lt-bg-7{background-color:#e6ee9c}.lt-bg-8{background-color:#c5e1a5}.lt-bg-9{background-color:#f0e57d}.lt-bg-10{background-color:#f48fb1}.lt-bg-11{background-color:#9fa8da}.lt-bg-12{background-color:#ffe082}.lt-bg-13{background-color:#bcaaa4}.lt-bg-14{background-color:#80deea}.lt-bg-15{background-color:#ce93d8}.dk-bg-0{background-color:#c62828}.dk-bg-1{background-color:#ad1457}.dk-bg-2{background-color:#6a1b9a}.dk-bg-3{background-color:#4527a0}.dk-bg-4{background-color:#283593}.dk-bg-5{background-color:#1565c0}.dk-bg-6{background-color:#0277bd}.dk-bg-7{background-color:#00838f}.dk-bg-8{background-color:#00695c}.dk-bg-9{background-color:#2e7d32}.dk-bg-10{background-color:#558b2f}.dk-bg-11{background-color:#9e9d24}.dk-bg-12{background-color:#f9a825}.dk-bg-13{background-color:#ff8f00}.dk-bg-14{background-color:#ef6c00}.dk-bg-15{background-color:#d84315}.lt-fg-0{color:#ef9a9a!important}.lt-fg-1{color:#90caf9!important}.lt-fg-2{color:#b0bec5!important}.lt-fg-3{color:#b39ddb!important}.lt-fg-4{color:#ffab91!important}.lt-fg-5{color:#a5d6a7!important}.lt-fg-6{color:#eee!important}.lt-fg-7{color:#e6ee9c!important}.lt-fg-8{color:#c5e1a5!important}.lt-fg-9{color:#f0e57d!important}.lt-fg-10{color:#f48fb1!important}.lt-fg-11{color:#9fa8da!important}.lt-fg-12{color:#ffe082!important}.lt-fg-13{color:#bcaaa4!important}.lt-fg-14{color:#80deea!important}.lt-fg-15{color:#ce93d8!important}.dk-fg-0{color:#c62828!important}.dk-fg-1{color:#ad1457!important}.dk-fg-2{color:#6a1b9a!important}.dk-fg-3{color:#4527a0!important}.dk-fg-4{color:#283593!important}.dk-fg-5{color:#1565c0!important}.dk-fg-6{color:#0277bd!important}.dk-fg-7{color:#00838f!important}.dk-fg-8{color:#00695c!important}.dk-fg-9{color:#2e7d32!important}.dk-fg-10{color:#558b2f!important}.dk-fg-11{color:#9e9d24!important}.dk-fg-12{color:#f9a825!important}.dk-fg-13{color:#ff8f00!important}.dk-fg-14{color:#ef6c00!important}.dk-fg-15{color:#d84315!important}.material-icons{font-size:1.4rem;line-height:1;text-align:center;vertical-align:middle}.material-icons.small{font-size:1rem}.material-icons.medium{font-size:1.2rem}.material-icons.big{font-size:2.2rem}.material-icons.bigger{font-size:3rem}.material-icons.huge{font-size:4rem}.composed-material{display:inline-block;position:relative}.composed-material i:nth-child(2){font-size:85%;font-weight:700;left:39%;position:absolute;top:7%}#self-avatar .material-icons{font-size:2.4rem;line-height:3rem}.avatar-box .material-icons{border-radius:50%;color:#fafafacc;height:inherit;width:inherit}.chip-input{align-items:center;background:#0000;border-bottom:1px solid #ccc;box-shadow:0 1px 0 #0000001a;color:#666;cursor:text;display:flex;flex-grow:1;flex-wrap:wrap;font-size:1.1rem;font-weight:400;justify-content:flex-start;margin:.25rem 0;max-height:10rem;min-height:4rem;outline:none;overflow-y:scroll;text-align:center;transition:all .1s ease-in-out}.chip-input.focused{border-bottom:1px solid #2196f3;box-shadow:0 1px 0 #2196f340}.chip-input>input[type=text]{border:none;box-shadow:none;display:inline-block;flex:1 0 auto;min-width:4rem;width:auto}.chip,.chip-input>input[type=text]{height:1.8rem;line-height:1.8;margin:.125rem}.chip{align-items:center;background-color:#eee;border-radius:.9rem;display:flex;flex:0 0 auto;font-size:90%;max-width:12rem;overflow:hidden}.chip,.chip>span{text-overflow:ellipsis;white-space:nowrap}.chip>span{overflow-x:hidden}.chip.invalid{background-color:#fee;color:#c66}.chip>a{background-color:#aaa;border-radius:50%;color:#eee;display:inline-block;height:1.175rem;line-height:1.15;margin:.3rem;min-width:1.175rem;text-decoration:none;width:1.175rem}.chip>a:focus,.chip>a:hover{background-color:#bbb;color:#fff;text-decoration:none}.chip .avatar-box{font-size:1rem;height:1.8rem;margin-right:.2rem;min-height:1.8rem;min-width:1.8rem;position:relative;width:1.8rem}.chip .avatar-box .material-icons{font-size:1.4rem;line-height:1.8rem}.chip .spacer{display:inline-block;height:1.175rem;margin:.3rem;width:.25rem}.load-spinner-box{--size-small:2.5rem;--size-large:4rem;background-color:#fff;border-radius:50%;box-shadow:.1rem .1rem .15rem 1px #00000040;height:var(--size-small);left:0;margin-left:auto;margin-right:auto;padding:.25rem;position:absolute;right:0;top:5rem;width:var(--size-small);z-index:2}.load-spinner-box.large{height:var(--size-large);width:var(--size-large)}.load-spinner-box.clear{background-color:#fff8;-x-box-shadow:none;box-shadow:.1rem .1rem .15rem 1px #0000001f}.load-spinner-box.centered{top:calc(var(--size-small)/2 - .25rem)}.load-spinner-box.large.centered{top:calc(var(--size-large)/2 - .25rem)}.loader-spinner{animation:spin 1.5s linear infinite;border:.35rem solid #f3f3f3;border-radius:50%;border-top-color:#1e88e5;height:2rem;width:2rem}.load-spinner-box.large .loader-spinner{height:3.5rem;width:3.5rem}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.uploader{display:flex}.uploader>div{background-color:#cfd8dc;border-radius:.1rem;height:.6rem;line-height:0;margin:.35rem;padding:.15rem;position:relative;width:6rem}.uploader>div>span{background-color:#1e88e5;border-radius:.08rem;display:inline-block;height:.3rem}.highlight{color:teal;font-weight:bolder}.highlight .preview{color:#5f9ea0;font-weight:inherit}.cropper{align-self:center;height:21rem;margin:1rem auto auto;transform:translateZ(0)}.cropper,.cropper .bounding-box{border-radius:.25rem;position:relative;width:18rem}.cropper .bounding-box{background-color:#999;border:2px solid #1e88e5;box-shadow:1px 1px 3px grey;height:18rem;overflow:hidden;z-index:1}.cropper .preview{max-height:none;max-width:none;position:absolute;z-index:-1}.cropper .cutout{border:1px dashed #999;bottom:0;box-shadow:0 0 150rem 150rem #e6f6ffa8;height:17rem;left:0;margin:auto;position:absolute;right:0;top:0;width:17rem;z-index:0}.cropper .cutout.circle{border-radius:50%}.cropper .overlay{cursor:move;position:absolute;touch-action:none;z-index:1}.cropper .zoom-wrapper{height:2rem;margin:1rem auto;text-align:center;width:80%}.cropper .zoom{box-shadow:none;pointer-events:none;z-index:2}.cropper .zoom:focus{outline:none}.reply-quote{border-left:.25rem solid #039be5;border-radius:.25rem;color:#666;cursor:pointer;font-weight:lighter;line-height:1.5em;padding:.15rem .5rem .25rem;position:relative}.chat-box .bubble .reply-quote{margin:.15rem -.75rem .3rem}.chat-box .bubble .reply-quote:first-child{margin-top:-.25rem}.chat-box .left .reply-quote{background-color:#fff6}.chat-box .right .reply-quote{background-color:#8080801f}.reply-quote .inline-image{margin-bottom:.1rem;vertical-align:middle}.reply-quote img.inline-image:before{content:""}#reply-quote-preview{align-items:center;display:flex}#reply-quote-preview .reply-quote{background-color:#fafafa;cursor:auto;margin:.35rem .5rem 0 0;width:100%}#reply-quote-preview .cancel{min-width:2.4rem;text-align:center}#reply-quote-preview .inline-image{background-color:#ccc}#reply-quote-preview img.inline-image:before{content:""}#send-message-panel #reply-quote-preview{width:100%}#send-message-panel #reply-quote-preview .reply-quote{margin-bottom:.35rem}.forwarding-quote{font-size:200%;line-height:200%}.mention{font-weight:500}.forward-dialog{background-color:#fff;border-radius:.3rem;box-shadow:.15rem .15rem 1.5rem #00000073;height:80%;margin:auto 1rem;overflow:hidden;padding:.5rem;position:relative;width:24rem}.forward-dialog .scrollable-panel{height:80%}.audio{align-items:center;background-color:#eee;border-radius:1.5rem;display:flex;flex:none;height:3rem;margin-left:auto}.audio canvas{height:2.6rem;margin-right:2rem;width:14rem}.audio canvas.playback{margin-right:0}.audio .duration{font-size:large}.audio-player{align-items:center;display:flex}.audio-player .material-icons.large{color:#667575cc;font-size:2.4rem}.audio-player .material-icons.disabled{color:#999c;cursor:default}.audio-player .playback{height:2.6rem;width:14rem}.audio-player canvas.playback{display:block}.audio-player div.playback{align-items:center;color:#757575cc;display:flex;font-size:small;justify-content:center}.audio-player .timer{color:#666c;font-size:smaller}.drag-n-drop{align-items:center;background-color:#fffffff2;border:.15rem dashed grey;border-radius:1rem;bottom:1.5rem;color:grey;display:flex;font-size:2rem;justify-content:center;left:1.5rem;outline:.5rem solid #fffffff2;position:absolute;right:1.5rem;top:1.5rem;z-index:3}@media (min-width:1440px){#app-container{max-width:114rem}}@media (max-width:960px){#mountPoint{padding:0}}@media (max-width:640px){#app-container{border-radius:0;box-shadow:none;width:100%}#info-view,#sidepanel{width:100%}.forward-dialog{border-radius:.3rem .3rem 0 0;margin:auto 0 0;width:100%}li .menuTrigger{opacity:.3}} \ No newline at end of file +*{box-sizing:border-box;font-family:Roboto,Arial,sans-serif;margin:0;padding:0;text-rendering:optimizeLegibility}body,html{background-color:silver;box-shadow:inset 0 10rem #3949ab;color:#666;font-size:10pt;height:100%;overflow:hidden;width:100%}tt{font-family:Roboto Mono,Courier,monospace}a{color:#2196f3;text-decoration:none}a:focus,a:hover{color:#0a6ebd;text-decoration:underline}a.danger{color:#d32f2f}a.danger:focus,a.danger:hover{color:#f44336}a.gray:focus,a.gray:hover{color:#999}form{line-height:1.5;padding:.5rem .75rem}form,label{font-size:1.1rem}label{margin-right:auto}label.small{color:#1e88e5;font-size:.95rem}img.avatar{border-radius:50%;height:100%;width:100%}button{border:1px solid #0000;border-radius:4px;box-shadow:0 1px 3px 0 #00000040;cursor:pointer;display:inline-block;font-family:inherit;font-size:1.05rem;font-weight:400;height:2.2rem;line-height:2.2rem;margin:0 .35rem;min-width:5rem;padding-left:1.2rem;padding-right:1.2rem;text-align:center;text-transform:uppercase;touch-action:manipulation;vertical-align:middle;white-space:nowrap}button[disabled],html input[disabled]{box-shadow:none;cursor:default;filter:grayscale(50%);opacity:.65}button.round{border-radius:50%;box-shadow:0 2px .5rem 0 #00000040;height:3rem;line-height:3.5rem;margin:0;outline:none;padding:0;width:3rem;z-index:2}button.round.small{box-shadow:0 2px .35rem 0 #00000040;height:2rem;line-height:2rem;width:2rem}button:active:not([disabled]),button:hover:not([disabled]){color:#fff}button:active{box-shadow:inset 0 3px .5rem rgba(0,0,0,.125)}button:active.round.small{box-shadow:inset 0 2px .35rem rgba(0,0,0,.125)}button.primary{background-color:#1e88e5;color:#fff}button.primary:active:not([disabled]),button.primary:hover:not([disabled]){background-color:#2962ff}button.secondary{background-color:#fff;color:#2196f3}button.secondary:active:not([disabled]),button.secondary:hover:not([disabled]){background-color:#e3f2fd}button.outline{background-color:initial;border:1px solid silver;box-shadow:none;color:#2196f3}button.outline:active:not([disabled]),button.outline:hover:not([disabled]){background-color:#e8eaf6}button.danger{background-color:#ec6560;color:#fff}button.danger:active:not([disabled]),button.danger:hover:not([disabled]){background-color:#f77}button.positive{background-color:#71c46f;color:#fff}button.positive:active:not([disabled]),button.positive:hover:not([disabled]){background-color:#7fed7f}input,textarea{background:#0000;border:none;color:#666;font-family:inherit;font-size:1.1rem;margin:.25rem 0;outline:none;padding:0 .125rem}input[type=email],input[type=password],input[type=search],input[type=text],textarea{border-bottom:1px solid #ccc;box-shadow:0 1px 0 #0000001a;height:2.5rem;transition:all .1s ease-in-out}input[type=email],input[type=password],input[type=text],textarea{width:100%}input[type=email]:focus,input[type=password]:focus,input[type=search]:focus,input[type=text]:focus,textarea:focus{border-bottom:1px solid #2196f3;box-shadow:0 1px 0 #2196f340}input[type=email].invalid,input[type=password].invalid,input[type=search].invalid,input[type=text].invalid,textarea.invalid{border-bottom:1px solid #e57373;box-shadow:0 1px 0 #e5737340}input[type=email]::placeholder,input[type=password]::placeholder,input[type=search]::placeholder,input[type=text]::placeholder,textarea::placeholder{color:#bbb;font-weight:lighter}input[type=password].with-visibility,input[type=text].with-visibility{margin-right:-2rem;padding-right:2rem}textarea{padding-top:.45rem;resize:none}textarea.inplace-edit{font-size:unset;height:unset}::-webkit-scrollbar{width:.6rem}::-webkit-scrollbar-track{background-color:#ffffff1a;-webkit-box-shadow:inset 0 0 6px #0003;box-shadow:inset 0 0 6px #0003}::-webkit-scrollbar-thumb{background-color:#0000004d}*{scrollbar-color:silver;scrollbar-width:thin}ul.menu{background-color:#fff;border-radius:.2rem;box-shadow:0 1px 6px #00000073;list-style:none;padding-bottom:.35rem;padding-top:.35rem;position:absolute;width:12rem;z-index:4}ul.menu>li{cursor:pointer;padding:.75rem .75rem .75rem 1.25rem}ul.menu>li:hover{background-color:#f5f5f5}ul.menu>li.separator{height:1px;margin:2px;padding:0}ul.menu>li.separator,ul.menu>li.separator:hover{background-color:#ccc}li .menuTrigger{background-color:inherit;border-radius:.7rem;height:1.4rem;line-height:1.4rem;opacity:0;position:absolute;right:.25rem;text-align:center;top:.25rem;width:1.4rem}li:hover .menuTrigger{opacity:.9}li:hover .menuTrigger a{color:#757575}div.alert-container{align-items:center;background:#f0f0f0d9;display:flex;height:100%;justify-content:center;position:absolute;width:100%;z-index:3}div.alert{background-color:#fff;border-radius:.3rem;box-shadow:.15rem .15rem 1.5rem #00000073;margin:auto 2rem;max-width:24rem;min-width:16rem;padding:1rem;position:relative;width:fit-content}div.alert-container .title{color:#2196f3;font-size:1.2rem;font-weight:500;padding:0 0 .35rem;width:100%}div.alert-container .title.with-control{align-items:center;display:flex;flex:none;justify-content:space-between;padding:.5rem .5rem 0}div.alert-container .content{padding:.5rem 0}div.trusted-badge{margin:.25rem 0}.blue{color:#2196f3!important}.lt-blue{color:#64b5f6!important}.verified-color{color:#03a9f4!important}.staff-color{color:#689f38!important}.danger-color{color:#ffc107!important}.green{color:#388e3c}.white{color:#fff!important}.red{color:#d32f2f!important}.badge-inv{color:#fffd!important}.gray{color:#757575!important}.light-gray{color:#bbb!important}.large{font-size:120%}.small{font-size:90%}.float-right{position:absolute;right:.5rem}.hr{background-color:#f0f0f0;box-shadow:inset 0 .25rem .25rem -.25rem #00000026,inset 0 -.25rem .25rem -.25rem #00000026;display:block;height:.45rem;min-height:.3rem;width:100%}.hr.thin{height:.015rem}.ellipsized{overflow-x:hidden;text-overflow:ellipsis;white-space:nowrap}.flat-button{align-items:center;background-color:#fff;display:flex;font-weight:400;height:2em;line-height:2em;margin:.15rem .35rem;text-align:center;text-transform:uppercase;touch-action:manipulation;vertical-align:middle;white-space:nowrap;z-index:1}.flat-button:focus,.flat-button:hover{text-decoration:none}.flat-button.faux{background-color:#eee;border:1px solid #999;border-radius:3px;display:inline-block;height:1.4em;line-height:1.4em;margin:.15rem;padding:0 .35rem;text-transform:none}.action-button{background-color:#fafafa;border-radius:50%;bottom:1rem;box-shadow:0 2px .5rem 0 #00000040;color:#999;display:block;font-size:1.8rem;height:3.25rem;margin:0;min-height:unset;min-width:unset;outline:none;padding:0;position:absolute;right:1rem;transition:all .15s;width:3.25rem;z-index:2}.action-button:focus,.action-button:hover{background-color:#f0f0f0;color:#888}.action-button:active{background-color:#eee;color:#777}.action-button.hidden{bottom:2.625rem;font-size:1px;height:1px;line-height:1px;opacity:0;right:2.625rem;width:1px}.group-focus{outline:none}#mountPoint{height:100%;padding-bottom:1rem;padding-top:1rem}#noscript-message{background-color:#fff;border-radius:.25rem;box-shadow:1px 2px .3rem gray;display:flex;flex-direction:column;margin-left:auto;margin-right:auto;margin-top:5rem;max-width:30rem;overflow:hidden;position:relative}#noscript-title{background-color:#2196f3;color:#bbdefb;font-size:120%;font-weight:bolder;padding:1rem}#noscript-content{padding:1rem}#app-container{background-color:#fff;border-radius:.25rem;box-shadow:1px 2px .3rem gray;display:flex;height:100%;margin-left:auto;margin-right:auto;max-width:84rem;overflow:hidden;position:relative}#sidepanel{flex-grow:0;flex-shrink:0.3;min-width:18rem;width:24rem}#sidepanel,#topic-view{display:flex;flex-direction:column;height:100%;position:relative}#topic-view{overflow-x:hidden;width:100%}#info-view{display:flex;flex-direction:column;flex-grow:0;flex-shrink:0.3;height:100%;min-width:18rem;width:24rem}.center-medium-text{align-items:center;display:flex;font-size:1.4rem;height:100%;justify-content:center;text-align:center;width:100%}.nodisplay{display:none!important}.quoted{margin-left:1rem}.space-right{margin-right:.25rem}.rounded-container{background-color:#fafafa;border-radius:.1rem;margin:.25rem;padding:.25rem;position:relative}.in-place-edit{border-bottom:1px dashed #ddd;cursor:pointer;display:inline-block;font-family:inherit;font-size:1rem;margin:.25rem .125rem 0;vertical-align:initial;width:100%}.in-place-edit.short{font-size:1.1rem;height:2.5rem;line-height:2.25}.in-place-edit.disabled{border-bottom:none;color:#888;cursor:default}.in-place-edit.placeholder{color:#bbb}.in-place-edit span{display:inline-block}.in-place-edit.short span{display:block;overflow-x:hidden;text-overflow:ellipsis;white-space:nowrap}table.permission-editor{width:100%}table.permission-editor td{font-size:1.1rem;margin:.35rem 0;vertical-align:middle}table.permission-editor td.checkbox{color:#999;text-align:center}.permission-editor .material-icons{font-size:1.3rem;line-height:1.3rem}.material-icons.clickable{border-bottom:none;cursor:pointer}.clickable{border-bottom:1px dashed #ddd}.clean-clickable,.clickable,.image-clickable{cursor:pointer}.panel-title{font-size:1.4rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.panel-title.deleted{text-decoration:line-through}.caption-panel{align-items:center;box-shadow:0 1px 2px gray;display:flex;flex:none;height:4rem;overflow-x:hidden;padding:.5rem;white-space:nowrap;z-index:1}.dialog-buttons{display:flex;justify-content:flex-end;padding:.5rem}.dialog-buttons button{margin:0 .5rem}.avatar-box{flex-grow:0;flex-shrink:0;position:relative}.bot-form{display:flex;flex-direction:column;line-height:2rem;min-width:8rem;overflow:hidden}.bot-form div{min-height:2rem;vertical-align:middle}.bot-form button{background-color:#eef;color:#2196f3;display:inline-block;font-size:inherit;height:2rem;line-height:2rem;margin:.15rem;text-transform:none}.bot-form>div>button{width:auto}.bot-form button:active,.bot-form button:focus,.bot-form button:hover{background-color:#e3f2fd;outline:0}#side-caption-panel{background-color:#2196f3;color:#bbdefb}#side-caption-panel a{color:#bbdefb;line-height:1;padding-left:.5rem}#side-caption-panel :hover{color:#fff}#sidepanel-title{margin-left:.5rem;margin-right:auto}#self-avatar{border-radius:50%;flex:none;height:3rem;min-width:3rem;width:3rem}#self-avatar.avatar-box{font-size:1.8rem}#settings-form ul{list-style:none}#settings-form li{vertical-align:middle}#settings-form label{display:inline-block;padding-left:.5rem}input#host-name{width:100%}input.search{text-indent:1.4rem}i.search{left:.6rem;position:absolute}.info-box{display:none;overflow:hidden;padding:1rem 1.5rem .75rem .5rem;position:relative}.info-box>span{line-height:1.35rem}.info-box .cancel{position:absolute;right:.25rem;top:.5rem}.info-box.error{background-color:#ffcdd2;border-bottom:1px solid #ffbfc8;color:#b71c1c;display:flex}.info-box.warning{background-color:#fff9c4;border-bottom:1px solid #fff59d;color:#6d4c41;display:flex}.info-box.info{background-color:#e1f5fe;border-bottom:1px solid #b3e5fc;color:#0288d1;display:flex}.info-box .cancel .material-icons{color:#757575;font-size:1rem}.info-box.error .cancel .material-icons{color:#b71c1c}.info-box .icon{display:block;margin-right:.5rem}.info-box .icon .material-icons{font-size:1.5rem}.info-box.warning .icon .material-icons{color:#fbc02d}.info-box.error .icon .material-icons{color:#ef5350}.info-box.info .icon .material-icons{color:#0288d1}.flex-column{display:flex;flex-direction:column;height:100%;overflow-x:hidden}.flex-column.narrow{height:auto}.scrollable-panel{height:100%;margin-bottom:auto;margin-top:.25rem;overflow-x:hidden;overflow-y:auto;scroll-behavior:smooth}.contact-box{list-style:none;overflow-x:hidden}.contact-box>li{background:linear-gradient(90deg,#0000 3.5rem,#eee 1px,#eee) 0 100% /100% 1px no-repeat,#fff;cursor:pointer;display:flex;flex-grow:0;flex-shrink:0;min-height:3.75rem;overflow-x:hidden;padding:.35rem .25rem .5rem .35rem;position:relative}.contact-box.small>li{min-height:2.5rem;padding:.25rem .25rem .35rem .35rem}.contact-box>li:last-child{background:#fff}.contact-box>li:hover{background-color:#eceff1}.contact-box>li.selected{background-color:#cfd8dc}.contact-box>li.action{border-bottom:none;min-height:2.5rem}.contact-box .text-box{overflow-x:hidden}.contact-box .contact-title{font-size:1.05rem;overflow-x:hidden;text-overflow:ellipsis;white-space:nowrap}.contact-box .contact-title.deleted{opacity:.66;text-decoration:line-through;text-decoration-thickness:.5px}.contact-box .contact-comment{font-weight:lighter}.contact-box .contact-comment,.contact-box .contact-comment>span{overflow-x:hidden;text-overflow:ellipsis;white-space:nowrap}.contact-box .contact-comment b{font-weight:bolder}.contact-box .contact-comment .material-icons{color:#777;margin-bottom:.2rem}.contact-box .avatar-box{font-size:1.8rem;height:3rem;margin-right:.35rem;min-height:3rem;min-width:3rem;overflow:hidden;padding:0;position:relative;width:3rem}.contact-box .avatar{border-radius:50%;height:3rem;width:3rem}.contact-box.small .avatar-box{font-size:1.2rem;height:2rem;min-height:2rem;min-width:2rem;width:2rem}.contact-box.small .avatar{height:2rem;width:2rem}.avatar.deleted{filter:grayscale(1);opacity:.75}.contact-box .avatar-box>.material-icons{display:flex;flex-direction:column;font-size:2.4rem;justify-content:space-around;line-height:3rem}.contact-box.small .avatar-box>.material-icons{font-size:1.6rem;line-height:2rem}.contact-box .text-box{display:flex;flex-direction:column;justify-content:space-around}.contact-box .text-box>div{align-items:center;display:flex;flex-direction:row}.contact-box .action-text{cursor:pointer;font-size:.95rem;line-height:2.5rem;margin:0 auto;text-align:center}img.channel{height:1.25rem;margin-left:.3rem;vertical-align:middle;width:1.25rem}.large img.channel{height:1.45rem;margin-bottom:.15rem;margin-left:.5rem;width:1.45rem}.avatar-box .online,.offline{border-radius:50%;bottom:.1rem;flex-shrink:0;height:.75rem;min-height:.75rem;min-width:.75rem;position:absolute;right:0;width:.75rem}.avatar-box .online{background-color:#4caf50}.avatar-box .offline{background-color:silver}.online.typing{animation:typing .5s infinite}@keyframes typing{0%,to{transform:translateX(0)}50%{transform:translateX(-.3rem)}}.contact-box .checkmark.material-icons{border:0 solid #0000;color:#0097a7;overflow:visible;padding-left:.5px}.contact-box .checkmark.material-icons,.contact-box .deleted.material-icons{background-color:#fff;bottom:0;font-size:1.5rem;height:1.5rem;position:absolute;right:0;width:1.5rem}.contact-box .deleted.material-icons{color:#999}#add-topic{bottom:1rem;position:absolute;right:1rem}.panel-form{display:flex;flex-direction:column;padding:0;position:relative}.panel-form-row{align-items:center;flex-shrink:0}.panel-form-column,.panel-form-row{display:flex;flex-grow:0;line-height:1.5;padding:.5rem .75rem;position:relative}.panel-form-column{flex-direction:column;overflow-x:hidden}.panel-form-column>.panel-form-column,.panel-form-row>.panel-form-column{flex-grow:1;padding:0!important}.panel-form-column>.panel-form-row,.panel-form-row>.panel-form-row{padding:0!important}.panel-form-column>.group{margin-bottom:.25rem;margin-top:.25rem}.avatar-upload{display:flex;flex-direction:column;flex-shrink:0;font-size:4.5rem;height:10.5rem;padding:0;position:relative;width:10rem}.avatar-upload.read-only{height:auto}.avatar-upload .clear-avatar{background-image:radial-gradient(#fff 40%,#0000 75%);font-size:1rem;opacity:0;position:absolute;right:0;top:0}.avatar-upload:hover .clear-avatar{opacity:1}.avatar-upload .avatar-box{height:10rem;position:relative;width:10rem}.avatar-upload .avatar-box>.material-icons{font-size:4rem;line-height:10rem;position:relative;vertical-align:middle}.avatar-upload:after{clear:both;content:".";display:block;height:0;visibility:hidden}.avatar-upload .blank{border:1px dashed #999;color:#999;flex-shrink:0;font-size:1rem;line-height:10rem;text-align:center;vertical-align:middle}.avatar-upload .blank,.avatar-upload img.preview{border-radius:50%;height:10rem;overflow:hidden;width:10rem}.avatar-upload img.preview:before{background:50% no-repeat url(../img/broken_image.png);border-radius:50%;color:#666;content:" ";display:flex;font-size:.9rem;font-weight:lighter;height:10rem;justify-content:center;left:0;position:absolute;top:0;width:10rem}.avatar-upload .inputfile.hidden{height:.1px;opacity:0;overflow:hidden;position:absolute;width:.1px}.avatar-upload .inputfile+label.round{align-items:center;background-color:#fafafa;border-radius:50%;bottom:0;box-shadow:0 1px 4px #0006;cursor:pointer;display:flex;height:3rem;justify-content:center;line-height:3rem;position:absolute;right:0;width:3rem;z-index:1}.avatar-upload .inputfile:focus+label.round{outline:none}.avatar-upload .inputfile+label:hover,.avatar-upload .inputfile:focus+label{background-color:#e3f2fd;color:#42a5f5}#topic-caption-panel{background-color:#b0bec5}#topic-caption-panel a{color:#757575;text-decoration:none}#topic-caption-panel :hover{color:#000}#topic-caption-panel .avatar-box{font-size:1.8rem;height:3rem;margin-right:.35rem;min-width:3rem;position:relative;width:3rem}#topic-caption-panel .avatar-box>.material-icons{font-size:2.4rem;line-height:3rem}#topic-title-group{overflow-x:hidden}#hide-message-view{display:block;margin-right:.35rem}#topic-users{margin-left:auto;margin-right:1rem}#topic-users .avatar-box{display:inline-block;font-size:1rem;height:1.8rem;margin-right:.2rem;min-height:1.8rem;min-width:1.8rem;width:1.8rem}#topic-users .avatar-box>.material-icons{font-size:1.4rem;line-height:1.8rem}#topic-users>span{line-height:2rem;vertical-align:top}#messages-panel{background-color:#eceff1;background-image:url(../img/bg_messages.png);height:100%;overflow-y:scroll;padding:.75rem;position:relative}#messages-container{height:100%;overflow-y:hidden;position:relative}#write-only-background{background-image:repeating-linear-gradient(45deg,#ffffff80,#ffffff80 .5rem,#fffc 0,#fffc 1rem);height:100%;left:0;position:absolute;top:0;width:100%}#write-only-note{height:auto;top:50%;transform:translate(-50%,-50%);width:auto}#peer-messaging-disabled-note,#write-only-note{background-color:#fff;border-radius:.5rem;box-shadow:0 1px .5px #0000001f;color:#666;left:50%;line-height:2rem;padding:.75rem 1.25rem;position:absolute;text-align:center}#peer-messaging-disabled-note{bottom:4.3rem;transform:translate(-50%);width:fit-content}#send-message-panel{align-items:center;background-color:#eceff1;display:flex;flex:none;min-height:4rem;padding:.4rem .4rem .4rem .6rem;z-index:2}#send-message-panel #writing-disabled{font-size:1.2rem;text-align:center;width:100%}#send-message-wrapper{background-color:#eceff1;box-shadow:0 -2px 3px -1px #0000001a;z-index:2}#sendMessage{overflow:hidden;overflow-wrap:break-word}#send-message-panel .material-icons{font-size:1.6rem;min-width:2rem}#send-message-panel .material-icons.secondary,.material-icons.disabled{color:#999!important}#send-message-panel .material-icons.secondary:hover{color:#2196f3!important}.accept-invite-panel{background-color:#eceff1;box-shadow:0 -2px 3px -1px #0000001a;width:100%;z-index:1}.accept-invite-panel .title{font-size:1.2rem;padding:.75rem}.accept-invite-panel .footer{background-color:#fafafa;padding-bottom:.35rem;text-align:center;white-space:nowrap}.accept-invite-panel button{border:1px solid #0000;box-shadow:0 1px 2px 0 #00000040;font-size:1rem;height:2em;line-height:2em;margin:.25rem}#dummy-view{align-items:center;background-color:#e0f7fa;display:flex;height:100%;justify-content:center;width:100%}#dummy-view a{display:block;text-align:center;text-decoration:none}#image-preview{background-color:#ffffffe6;display:flex;flex-direction:column;height:100%;left:0;position:absolute;top:0;width:100%;z-index:2}#image-preview-caption-panel{background-color:#eceff1;box-shadow:0 1px 2px silver;display:flex;height:4.6rem;justify-content:space-between;line-height:2.5rem;padding:1rem .75rem 0;z-index:3}#image-preview-caption-panel a{color:#757575;text-decoration:none}#image-preview-caption-panel a:hover{color:#000}#image-preview-container{align-items:center;display:flex;height:100%;justify-content:space-around;overflow:hidden;width:100%}#image-preview-footer{background-color:#eceff1;box-shadow:0 -2px 3px -1px #0000001a;display:flex;height:3.2rem;justify-content:space-around;line-height:1.5rem}#image-preview-container .material-icons{font-size:6rem}#video-container{background-color:#ffffffe6;flex-direction:column;height:100%;justify-content:space-between;left:0;top:0}#video-container,.controls{display:flex;position:absolute;width:100%}.controls{align-items:center;bottom:2.5rem;column-gap:1rem;justify-content:center;z-index:1}.incoming-call .controls{bottom:1rem}.controls button{border-radius:50%;box-shadow:0 3px 6px 0 #00000040;height:4rem;min-width:auto;width:4rem}#video-container-panel{height:100%;position:relative;width:100%}.call-party{background-color:#eee;border:2px solid #ccc;border-radius:.5rem;overflow:hidden}.call-party:hover{border:2px solid #2196f3}.call-party.peer{bottom:1rem;left:1rem;position:absolute;right:1rem;top:1rem;z-index:1}.call-party.self{bottom:.5rem;height:10rem;position:absolute;right:.5rem;width:10rem;z-index:2}.call-party.self[disabled]{display:none}video{height:100%;object-fit:contain;width:100%}.call-party.self video{transform:scaleX(-1)}.call-party[disabled] video{display:none}.caller-card{align-items:center;display:flex;flex-direction:column;height:100%;justify-content:center;left:0;position:absolute;top:0;width:100%}.caller-card .avatar-box{font-size:6rem;height:10rem;width:10rem}.caller-card.pulse .lettertile,.caller-card.pulse img.avatar{animation:active-call 1.5s linear infinite}.caller-card .avatar-box .material-icons{font-size:6rem;line-height:1.6}.call-party .caller-name{background-color:#ffffffb3;border-radius:.35rem;padding:.15rem .5rem;text-shadow:0 0 1px #fff;z-index:1}.call-party.self .caller-name.inactive{bottom:.25rem;position:absolute;right:.25rem}.caller-card .caller-name{font-size:larger;margin-top:.5rem}.caller-card .trusted-badge{display:inline-block}.call-party.peer .caller-name.inactive{bottom:.5rem;font-size:larger;left:50%;margin:0 auto;position:absolute;transform:translateX(-50%)}.incoming-call{background-color:#fff;border-radius:.3rem;box-shadow:.15rem .15rem 1.5rem #00000073;margin:auto 2rem;max-width:24rem;min-width:16rem;position:relative;width:fit-content}.incoming-call .caller-card{align-items:center;display:flex;flex-direction:column;height:100%;justify-content:center;left:auto;padding:4rem 3.5rem 5.5rem;position:relative;top:auto;width:100%}.incoming-call .caller-name{background-color:#ffffffb3;border-radius:.35rem;padding:.15rem .5rem;text-shadow:0 0 1px #fff;z-index:1}.call-message{display:flex;flex-direction:row}.call-message .duration{font-weight:lighter}@keyframes active-call{0%{box-shadow:0 0 0 .1rem #2196f34d,0 0 0 .3rem #2196f34d,0 0 0 .5rem #2196f34d}to{box-shadow:0 0 0 .4rem #2196f34d,0 0 0 2rem #2196f300,0 0 0 3rem #2196f300}}.chat-box{list-style:none;margin:0 .5rem;padding:0 0 3.5rem;scroll-behavior:smooth}.chat-box.group{margin-left:-.4rem}.chat-box li{align-items:flex-end;display:flex;margin:0;padding:0}.chat-box .right{justify-content:flex-end}.bubble{border-radius:.5rem;box-shadow:0 1px .5px #0000001f;color:#212121;display:flex;height:auto;margin:0;max-width:36rem;min-width:9rem;padding:.75rem .5rem;position:relative;text-align:left;transition:background-color .5s ease-out;transition-delay:.3s}.chat-box li.single{margin-bottom:.75rem;margin-top:.25rem}.chat-box li.first{margin-bottom:.15rem;margin-top:.25rem}.chat-box li.middle{margin-bottom:.15rem;margin-top:.15rem}.chat-box li.last{margin-bottom:.75rem;margin-top:.15rem}.left .bubble{background-color:#c5e1a5;margin-right:.5rem}.left.flash .bubble{background-color:#94a97c}.left .bubble.tip{border-bottom-left-radius:0}.right .bubble{background-color:#fafafa;margin-left:1.75rem}.right.flash .bubble{background-color:#ccc}.right .bubble.tip{border-bottom-right-radius:0}.chat-box .meta{justify-content:center;margin-bottom:.5rem;margin-top:.5rem}.chat-box .meta .bubble{color:#666;min-width:unset}.meta .bubble.deleted{background-color:#e3f2fd;padding:.75rem .75rem .5rem}.meta .bubble.date{background-color:#f4f4f4a8;font-size:smaller;padding:.5rem;text-transform:uppercase}.left .bubble.tip:before{background-color:#c5e1a5;border-bottom-left-radius:.3rem;bottom:0;box-shadow:0 1px .5px #0000001f;clip-path:polygon(100% 0,0 110%,100% 110%);-webkit-clip-path:polygon(100% 0,0 110%,100% 110%);content:"";height:.85rem;left:-.8rem;position:absolute;-moz-transition:background-color .5s ease-out;transition:background-color .5s ease-out;transition-delay:.3s;width:.85rem}.left.flash .bubble.tip:before{background-color:#94a97c}.right .bubble.tip:before{background-color:#fafafa;border-bottom-right-radius:.3rem;bottom:0;box-shadow:0 1px .5px #0000001f;clip-path:polygon(0 0,100% 110%,0 110%);-webkit-clip-path:polygon(0 0,100% 110%,0 110%);content:"";height:.85rem;left:99.8%;position:absolute;-moz-transition:background-color .5s ease-out;transition:background-color .5s ease-out;transition-delay:.3s;width:.85rem}.right.flash .bubble.tip:before{background-color:#ccc}.chat-box .avatar-box{font-size:.8rem;height:1.4rem;margin-bottom:.8rem;margin-right:.8rem;min-height:1.4rem;min-width:1.4rem;position:relative;width:1.4rem}.bubble div.content-meta{width:100%}.bubble div.message-content{margin:0;max-width:36rem;overflow-wrap:anywhere;padding:0 .75rem;position:relative;width:100%}.bubble div.message-content:after{clear:both;content:".";display:block;height:0;visibility:hidden}.chat-box .timestamp-padding{display:inline-block;height:0;width:4rem}.chat-box .timestamp{float:right;position:relative;top:.35rem;user-select:none;white-space:nowrap}.chat-box .author,.chat-box .timestamp{color:#777;font-size:80%}.image-preview,.inline-image{border-radius:.1rem;overflow:hidden;position:relative}.inline-image{max-height:24rem;max-width:36rem}.inline-image>.rounded-container{border-left:.25rem solid #0000;border-right:.25rem solid #0000;bottom:2rem;margin:.25rem auto;position:relative}img.image-preview:before,img.inline-image:before{background:50% no-repeat #ccc url(../img/broken_image.png);color:#666;display:flex;font-size:.9rem;font-weight:lighter;height:100%;justify-content:center;left:0;position:absolute;top:0;width:100%}img.inline-image:before{background-size:3rem 3rem;content:attr(alt)}img.image-preview:before{background-size:10rem 10rem;content:" "}.inline-image.video>img.inline-image:before,img.image-preview.video:before{background:50% no-repeat #ccc url(../img/broken_video.png)}.inline-image.video>img.inline-image:before{background-size:3rem 3rem}.inline-video{align-items:center;display:flex;justify-content:center;position:relative}.inline-video>img.inline-image:before{background:#ccc}.inline-video .duration{background-color:#ffffff80;border-radius:.3rem;bottom:.25rem;color:#333;font-size:80%;left:.25rem;padding:.25rem .5rem;position:absolute}.inline-video .play-control{align-items:center;background-color:#0006;border-radius:50%;cursor:pointer;display:flex;height:4rem;justify-content:center;pointer-events:none;position:absolute;width:4rem}.attachment{display:flex}.attachment:last-of-type{margin-bottom:-.45rem}#info-caption-panel{background-color:#b0bec5}#info-caption-panel a{color:#757575;line-height:1;text-decoration:none}#info-caption-panel :hover{color:#000}#info-title{margin-right:auto}#group-manager{display:flex;flex-direction:column;height:100%;overflow-y:hidden;position:relative}#group-manager-buttons{background-color:#eceff1;border-left:1px solid #ccc;box-shadow:0 -1px #0000001a;display:flex;height:4rem;justify-content:space-around;padding:.4rem;z-index:2}ul.tabbar{background:#eee;display:flex;flex-grow:0;flex-shrink:0;list-style:none;margin:0;overflow:hidden;padding:0 0 0 1rem;width:100%}ul.tabbar>li{box-shadow:inset 0 -2px 2.5px -1px #00000040;height:2.4rem;position:relative}ul.tabbar li.active{background:#fff}ul.tabbar li:after{background:#ccc;bottom:0;content:"";height:.1rem;left:0;position:absolute;width:100%}ul.tabbar li.active:after{animation:tabbar-border-expand .2s cubic-bezier(.4,0,.4,1) 0s alternate forwards;background:#2196f3;bottom:0;content:"";height:.15rem;left:0;position:absolute}@keyframes tabbar-border-expand{0%{opacity:0;width:0}to{opacity:1;width:100%}}ul.tabbar>li>a{color:#2196f399;font-size:1.3rem;font-variant:small-caps;font-weight:400;line-height:2.4rem;overflow:hidden;padding-left:1rem;padding-right:1rem;position:relative;text-align:center;text-decoration:none}ul.tabbar li.active>a{color:#2196f3}.unread{background-color:#0097a7;border-radius:50%;color:#fff;display:inline-block;font-size:.75rem;font-weight:bolder;height:1.35rem;line-height:1.45rem;margin-left:.5rem;text-align:center;vertical-align:middle;width:1.35rem}.material-icons.as-badge{color:#aaa;font-size:1.15rem;padding-left:.2rem}.badge{align-self:flex-start;background-color:#e8e8e8;border:1px solid silver;border-radius:.2rem;color:#666;display:inline-block;font-family:Roboto Mono,Courier,monospace,sans-serif;font-size:.8rem;margin:.05rem .1rem;padding:.05rem .25rem}.badge.green{background-color:#efe;border-color:#aca;color:#383}.badge.yellow{background-color:#ffe;border-color:#cc9;color:#660}.badge.blue{background-color:#eef;border-color:#aad;color:#339}.badge.red{background-color:#fee;border-color:#c99;color:#933}.badge.magenta{background-color:#fef;border-color:#c9c;color:#939}.lettertile{border-radius:50%;padding-bottom:100%;width:100%}.lettertile>div{align-items:center;border-radius:50%;bottom:0;color:#fafafacc;display:flex;flex-grow:0;flex-shrink:0;justify-content:center;left:0;line-height:1;padding-top:.1em;position:absolute;right:0;text-align:center;text-transform:uppercase;top:0}.lettertile:hover{color:#fff}.lettertile.disabled{opacity:.5}.lt-bg-0{background-color:#ef9a9a}.lt-bg-1{background-color:#90caf9}.lt-bg-2{background-color:#b0bec5}.lt-bg-3{background-color:#b39ddb}.lt-bg-4{background-color:#ffab91}.lt-bg-5{background-color:#a5d6a7}.lt-bg-6{background-color:#eee}.lt-bg-7{background-color:#e6ee9c}.lt-bg-8{background-color:#c5e1a5}.lt-bg-9{background-color:#f0e57d}.lt-bg-10{background-color:#f48fb1}.lt-bg-11{background-color:#9fa8da}.lt-bg-12{background-color:#ffe082}.lt-bg-13{background-color:#bcaaa4}.lt-bg-14{background-color:#80deea}.lt-bg-15{background-color:#ce93d8}.dk-bg-0{background-color:#c62828}.dk-bg-1{background-color:#ad1457}.dk-bg-2{background-color:#6a1b9a}.dk-bg-3{background-color:#4527a0}.dk-bg-4{background-color:#283593}.dk-bg-5{background-color:#1565c0}.dk-bg-6{background-color:#0277bd}.dk-bg-7{background-color:#00838f}.dk-bg-8{background-color:#00695c}.dk-bg-9{background-color:#2e7d32}.dk-bg-10{background-color:#558b2f}.dk-bg-11{background-color:#9e9d24}.dk-bg-12{background-color:#f9a825}.dk-bg-13{background-color:#ff8f00}.dk-bg-14{background-color:#ef6c00}.dk-bg-15{background-color:#d84315}.lt-fg-0{color:#ef9a9a!important}.lt-fg-1{color:#90caf9!important}.lt-fg-2{color:#b0bec5!important}.lt-fg-3{color:#b39ddb!important}.lt-fg-4{color:#ffab91!important}.lt-fg-5{color:#a5d6a7!important}.lt-fg-6{color:#eee!important}.lt-fg-7{color:#e6ee9c!important}.lt-fg-8{color:#c5e1a5!important}.lt-fg-9{color:#f0e57d!important}.lt-fg-10{color:#f48fb1!important}.lt-fg-11{color:#9fa8da!important}.lt-fg-12{color:#ffe082!important}.lt-fg-13{color:#bcaaa4!important}.lt-fg-14{color:#80deea!important}.lt-fg-15{color:#ce93d8!important}.dk-fg-0{color:#c62828!important}.dk-fg-1{color:#ad1457!important}.dk-fg-2{color:#6a1b9a!important}.dk-fg-3{color:#4527a0!important}.dk-fg-4{color:#283593!important}.dk-fg-5{color:#1565c0!important}.dk-fg-6{color:#0277bd!important}.dk-fg-7{color:#00838f!important}.dk-fg-8{color:#00695c!important}.dk-fg-9{color:#2e7d32!important}.dk-fg-10{color:#558b2f!important}.dk-fg-11{color:#9e9d24!important}.dk-fg-12{color:#f9a825!important}.dk-fg-13{color:#ff8f00!important}.dk-fg-14{color:#ef6c00!important}.dk-fg-15{color:#d84315!important}.material-icons{font-size:1.4rem;line-height:1;text-align:center;vertical-align:middle}.material-icons.small{font-size:1rem}.material-icons.medium{font-size:1.2rem}.material-icons.big{font-size:2.2rem}.material-icons.bigger{font-size:3rem}.material-icons.huge{font-size:4rem}.composed-material{display:inline-block;position:relative}.composed-material i:nth-child(2){font-size:85%;font-weight:700;left:39%;position:absolute;top:7%}#self-avatar .material-icons{font-size:2.4rem;line-height:3rem}.avatar-box .material-icons{border-radius:50%;color:#fafafacc;height:inherit;width:inherit}.chip-input{align-items:center;background:#0000;border-bottom:1px solid #ccc;box-shadow:0 1px 0 #0000001a;color:#666;cursor:text;display:flex;flex-grow:1;flex-wrap:wrap;font-size:1.1rem;font-weight:400;justify-content:flex-start;margin:.25rem 0;max-height:10rem;min-height:4rem;outline:none;overflow-y:scroll;text-align:center;transition:all .1s ease-in-out}.chip-input.focused{border-bottom:1px solid #2196f3;box-shadow:0 1px 0 #2196f340}.chip-input>input[type=text]{border:none;box-shadow:none;display:inline-block;flex:1 0 auto;min-width:4rem;width:auto}.chip,.chip-input>input[type=text]{height:1.8rem;line-height:1.8;margin:.125rem}.chip{align-items:center;background-color:#eee;border-radius:.9rem;display:flex;flex:0 0 auto;font-size:90%;max-width:12rem;overflow:hidden}.chip,.chip>span{text-overflow:ellipsis;white-space:nowrap}.chip>span{overflow-x:hidden}.chip.invalid{background-color:#fee;color:#c66}.chip>a{background-color:#aaa;border-radius:50%;color:#eee;display:inline-block;height:1.175rem;line-height:1.15;margin:.3rem;min-width:1.175rem;text-decoration:none;width:1.175rem}.chip>a:focus,.chip>a:hover{background-color:#bbb;color:#fff;text-decoration:none}.chip .avatar-box{font-size:1rem;height:1.8rem;margin-right:.2rem;min-height:1.8rem;min-width:1.8rem;position:relative;width:1.8rem}.chip .avatar-box .material-icons{font-size:1.4rem;line-height:1.8rem}.chip .spacer{display:inline-block;height:1.175rem;margin:.3rem;width:.25rem}.load-spinner-box{--size-small:2.5rem;--size-large:4rem;background-color:#fff;border-radius:50%;box-shadow:.1rem .1rem .15rem 1px #00000040;height:var(--size-small);left:0;margin-left:auto;margin-right:auto;padding:.25rem;position:absolute;right:0;top:5rem;width:var(--size-small);z-index:2}.load-spinner-box.large{height:var(--size-large);width:var(--size-large)}.load-spinner-box.clear{background-color:#fff8;-x-box-shadow:none;box-shadow:.1rem .1rem .15rem 1px #0000001f}.load-spinner-box.centered{top:calc(var(--size-small)/2 - .25rem)}.load-spinner-box.large.centered{top:calc(var(--size-large)/2 - .25rem)}.loader-spinner{animation:spin 1.5s linear infinite;border:.35rem solid #f3f3f3;border-radius:50%;border-top-color:#1e88e5;height:2rem;width:2rem}.load-spinner-box.large .loader-spinner{height:3.5rem;width:3.5rem}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.uploader{display:flex}.uploader>div{background-color:#cfd8dc;border-radius:.1rem;height:.6rem;line-height:0;margin:.35rem;padding:.15rem;position:relative;width:6rem}.uploader>div>span{background-color:#1e88e5;border-radius:.08rem;display:inline-block;height:.3rem}.highlight{color:teal;font-weight:bolder}.highlight .preview{color:#5f9ea0;font-weight:inherit}.cropper{align-self:center;height:21rem;margin:1rem auto auto;transform:translateZ(0)}.cropper,.cropper .bounding-box{border-radius:.25rem;position:relative;width:18rem}.cropper .bounding-box{background-color:#999;border:2px solid #1e88e5;box-shadow:1px 1px 3px grey;height:18rem;overflow:hidden;z-index:1}.cropper .preview{max-height:none;max-width:none;position:absolute;z-index:-1}.cropper .cutout{border:1px dashed #999;bottom:0;box-shadow:0 0 150rem 150rem #e6f6ffa8;height:17rem;left:0;margin:auto;position:absolute;right:0;top:0;width:17rem;z-index:0}.cropper .cutout.circle{border-radius:50%}.cropper .overlay{cursor:move;position:absolute;touch-action:none;z-index:1}.cropper .zoom-wrapper{height:2rem;margin:1rem auto;text-align:center;width:80%}.cropper .zoom{box-shadow:none;pointer-events:none;z-index:2}.cropper .zoom:focus{outline:none}.reply-quote{border-left:.25rem solid #039be5;border-radius:.25rem;color:#666;cursor:pointer;font-weight:lighter;line-height:1.5em;padding:.15rem .5rem .25rem;position:relative}.chat-box .bubble .reply-quote{margin:.15rem -.75rem .3rem}.chat-box .bubble .reply-quote:first-child{margin-top:-.25rem}.chat-box .left .reply-quote{background-color:#fff6}.chat-box .right .reply-quote{background-color:#8080801f}.reply-quote .inline-image{margin-bottom:.1rem;vertical-align:middle}.reply-quote img.inline-image:before{content:""}#reply-quote-preview{align-items:center;display:flex}#reply-quote-preview .reply-quote{background-color:#fafafa;cursor:auto;margin:.35rem .5rem 0 0;width:100%}#reply-quote-preview .cancel{min-width:2.4rem;text-align:center}#reply-quote-preview .inline-image{background-color:#ccc}#reply-quote-preview img.inline-image:before{content:""}#send-message-panel #reply-quote-preview{width:100%}#send-message-panel #reply-quote-preview .reply-quote{margin-bottom:.35rem}.forwarding-quote{font-size:200%;line-height:200%}.mention{font-weight:500}.forward-dialog{background-color:#fff;border-radius:.3rem;box-shadow:.15rem .15rem 1.5rem #00000073;height:80%;margin:auto 1rem;overflow:hidden;padding:.5rem;position:relative;width:24rem}.forward-dialog .scrollable-panel{height:80%}.audio{align-items:center;background-color:#eee;border-radius:1.5rem;display:flex;flex:none;height:3rem;margin-left:auto}.audio canvas{height:2.6rem;margin-right:2rem;width:14rem}.audio canvas.playback{margin-right:0}.audio .duration{font-size:large}.audio-player{align-items:center;display:flex}.audio-player .material-icons.large{color:#667575cc;font-size:2.4rem}.audio-player .material-icons.disabled{color:#999c;cursor:default}.audio-player .playback{height:2.6rem;width:14rem}.audio-player canvas.playback{display:block}.audio-player div.playback{align-items:center;color:#757575cc;display:flex;font-size:small;justify-content:center}.audio-player .timer{color:#666c;font-size:smaller}.drag-n-drop{align-items:center;background-color:#fffffff2;border:.15rem dashed grey;border-radius:1rem;bottom:1.5rem;color:grey;display:flex;font-size:2rem;justify-content:center;left:1.5rem;outline:.5rem solid #fffffff2;position:absolute;right:1.5rem;top:1.5rem;z-index:3}@media (min-width:1440px){#app-container{max-width:114rem}}@media (max-width:960px){#mountPoint{padding:0}}@media (max-width:640px){#app-container{border-radius:0;box-shadow:none;width:100%}#info-view,#sidepanel{width:100%}.forward-dialog{border-radius:.3rem .3rem 0 0;margin:auto 0 0;width:100%}li .menuTrigger{opacity:.3}} \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index e9dddcdd..c3239e38 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "tinode-webapp", - "version": "0.21.0-beta1", + "version": "0.21.0-beta2", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "tinode-webapp", - "version": "0.21.0-beta1", + "version": "0.21.0-beta2", "license": "Apache-2.0", "dependencies": { "firebase": "^9.14.0", @@ -68,25 +68,25 @@ } }, "node_modules/@babel/core": { - "version": "7.20.7", - "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.20.7.tgz", - "integrity": "sha512-t1ZjCluspe5DW24bn2Rr1CDb2v9rn/hROtg9a2tmd0+QYf4bsloYfLQzjG4qHPNMhWtKdGC33R5AxGR2Af2cBw==", + "version": "7.20.12", + "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.20.12.tgz", + "integrity": "sha512-XsMfHovsUYHFMdrIHkZphTN/2Hzzi78R08NuHfDBehym2VsPDL6Zn/JAD/JQdnRvbSsbQc4mVaU1m6JgtTEElg==", "dev": true, "dependencies": { "@ampproject/remapping": "^2.1.0", "@babel/code-frame": "^7.18.6", "@babel/generator": "^7.20.7", "@babel/helper-compilation-targets": "^7.20.7", - "@babel/helper-module-transforms": "^7.20.7", + "@babel/helper-module-transforms": "^7.20.11", "@babel/helpers": "^7.20.7", "@babel/parser": "^7.20.7", "@babel/template": "^7.20.7", - "@babel/traverse": "^7.20.7", + "@babel/traverse": "^7.20.12", "@babel/types": "^7.20.7", "convert-source-map": "^1.7.0", "debug": "^4.1.0", "gensync": "^1.0.0-beta.2", - "json5": "^2.2.1", + "json5": "^2.2.2", "semver": "^6.3.0" }, "engines": { @@ -170,9 +170,9 @@ } }, "node_modules/@babel/helper-create-class-features-plugin": { - "version": "7.20.7", - "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.20.7.tgz", - "integrity": "sha512-LtoWbDXOaidEf50hmdDqn9g8VEzsorMexoWMQdQODbvmqYmaF23pBP5VNPAGIFHsFQCIeKokDiz3CH5Y2jlY6w==", + "version": "7.20.12", + "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.20.12.tgz", + "integrity": "sha512-9OunRkbT0JQcednL0UFvbfXpAsUXiGjUk0a7sN8fUXX7Mue79cUSMjHGDRRi/Vz9vYlpIhLV5fMD5dKoMhhsNQ==", "dev": true, "dependencies": { "@babel/helper-annotate-as-pure": "^7.18.6", @@ -181,6 +181,7 @@ "@babel/helper-member-expression-to-functions": "^7.20.7", "@babel/helper-optimise-call-expression": "^7.18.6", "@babel/helper-replace-supers": "^7.20.7", + "@babel/helper-skip-transparent-expression-wrappers": "^7.20.0", "@babel/helper-split-export-declaration": "^7.18.6" }, "engines": { @@ -1698,9 +1699,9 @@ } }, "node_modules/@babel/traverse": { - "version": "7.20.10", - "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.20.10.tgz", - "integrity": "sha512-oSf1juCgymrSez8NI4A2sr4+uB/mFd9MXplYGPEBnfAuWmmyeVcHa6xLPiaRBcXkcb/28bgxmQLTVwFKE1yfsg==", + "version": "7.20.12", + "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.20.12.tgz", + "integrity": "sha512-MsIbFN0u+raeja38qboyF8TIT7K0BFzz/Yd/77ta4MsUsmP2RAnidIlwq7d5HFQrH/OZJecGV6B71C4zAgpoSQ==", "dev": true, "dependencies": { "@babel/code-frame": "^7.18.6", @@ -3018,9 +3019,9 @@ } }, "node_modules/ajv": { - "version": "8.11.2", - "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.2.tgz", - "integrity": "sha512-E4bfmKAhGiSTvMfL1Myyycaub+cUEU2/IvpylXkUu7CHBkBj1f/ikdzbD7YQ6FKUbixDxeYvB/xY4fvyroDlQg==", + "version": "8.12.0", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz", + "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==", "dev": true, "dependencies": { "fast-deep-equal": "^3.1.1", @@ -3096,9 +3097,9 @@ } }, "node_modules/babel-loader": { - "version": "9.1.0", - "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-9.1.0.tgz", - "integrity": "sha512-Antt61KJPinUMwHwIIz9T5zfMgevnfZkEVWYDWlG888fgdvRRGD0JTuf/fFozQnfT+uq64sk1bmdHDy/mOEWnA==", + "version": "9.1.2", + "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-9.1.2.tgz", + "integrity": "sha512-mN14niXW43tddohGl8HPu5yfQq70iUThvFL/4QzESA7GcZoC0eVOhvWdQ8+3UlSjaDE9MVtsW9mxDY07W7VpVA==", "dev": true, "dependencies": { "find-cache-dir": "^3.3.2", @@ -3301,9 +3302,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001441", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001441.tgz", - "integrity": "sha512-OyxRR4Vof59I3yGWXws6i908EtGbMzVUi3ganaZQHmydk1iwDhRnvaPG2WaR0KcqrDFKrxVZHULT396LEPhXfg==", + "version": "1.0.30001442", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001442.tgz", + "integrity": "sha512-239m03Pqy0hwxYPYR5JwOIxRJfLTWtle9FV8zosfV5pHg+/51uD4nxcUlM8+mWWGfwKtt8lJNHnD3cWw9VZ6ow==", "dev": true, "funding": [ { @@ -3935,9 +3936,9 @@ } }, "node_modules/fastq": { - "version": "1.14.0", - "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.14.0.tgz", - "integrity": "sha512-eR2D+V9/ExcbF9ls441yIuN6TI2ED1Y2ZcA5BmMtJsOkWOFRJQ0Jt0g1UwqXJJVAb+V+umH5Dfr8oh4EVP7VVg==", + "version": "1.15.0", + "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.15.0.tgz", + "integrity": "sha512-wBrocU2LCXXa+lWBt8RoIRD89Fi8OdABODa/kEnyeyjS5aZO5/GNvI5sEINADqP/h8M29UHTHUb53sUu5Ihqdw==", "dev": true, "dependencies": { "reusify": "^1.0.4" @@ -4869,9 +4870,9 @@ } }, "node_modules/postcss": { - "version": "8.4.20", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.20.tgz", - "integrity": "sha512-6Q04AXR1212bXr5fh03u8aAwbLxAQNGQ/Q1LNa0VfOI06ZAlhPHtQvE4OIdpj4kLThXilalPnmDSOD65DcHt+g==", + "version": "8.4.21", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.21.tgz", + "integrity": "sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==", "dev": true, "funding": [ { @@ -6392,9 +6393,9 @@ } }, "node_modules/webpack-cli/node_modules/commander": { - "version": "9.4.1", - "resolved": "https://registry.npmjs.org/commander/-/commander-9.4.1.tgz", - "integrity": "sha512-5EEkTNyHNGFPD2H+c/dXXfQZYa/scCKasxWcXJaWnNJ99pnQN9Vnmqow+p+PlFPE63Q6mThaZws1T+HxfpgtPw==", + "version": "9.5.0", + "resolved": "https://registry.npmjs.org/commander/-/commander-9.5.0.tgz", + "integrity": "sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ==", "dev": true, "engines": { "node": "^12.20.0 || >=14" @@ -6650,25 +6651,25 @@ "dev": true }, "@babel/core": { - "version": "7.20.7", - "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.20.7.tgz", - "integrity": "sha512-t1ZjCluspe5DW24bn2Rr1CDb2v9rn/hROtg9a2tmd0+QYf4bsloYfLQzjG4qHPNMhWtKdGC33R5AxGR2Af2cBw==", + "version": "7.20.12", + "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.20.12.tgz", + "integrity": "sha512-XsMfHovsUYHFMdrIHkZphTN/2Hzzi78R08NuHfDBehym2VsPDL6Zn/JAD/JQdnRvbSsbQc4mVaU1m6JgtTEElg==", "dev": true, "requires": { "@ampproject/remapping": "^2.1.0", "@babel/code-frame": "^7.18.6", "@babel/generator": "^7.20.7", "@babel/helper-compilation-targets": "^7.20.7", - "@babel/helper-module-transforms": "^7.20.7", + "@babel/helper-module-transforms": "^7.20.11", "@babel/helpers": "^7.20.7", "@babel/parser": "^7.20.7", "@babel/template": "^7.20.7", - "@babel/traverse": "^7.20.7", + "@babel/traverse": "^7.20.12", "@babel/types": "^7.20.7", "convert-source-map": "^1.7.0", "debug": "^4.1.0", "gensync": "^1.0.0-beta.2", - "json5": "^2.2.1", + "json5": "^2.2.2", "semver": "^6.3.0" } }, @@ -6729,9 +6730,9 @@ } }, "@babel/helper-create-class-features-plugin": { - "version": "7.20.7", - "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.20.7.tgz", - "integrity": "sha512-LtoWbDXOaidEf50hmdDqn9g8VEzsorMexoWMQdQODbvmqYmaF23pBP5VNPAGIFHsFQCIeKokDiz3CH5Y2jlY6w==", + "version": "7.20.12", + "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.20.12.tgz", + "integrity": "sha512-9OunRkbT0JQcednL0UFvbfXpAsUXiGjUk0a7sN8fUXX7Mue79cUSMjHGDRRi/Vz9vYlpIhLV5fMD5dKoMhhsNQ==", "dev": true, "requires": { "@babel/helper-annotate-as-pure": "^7.18.6", @@ -6740,6 +6741,7 @@ "@babel/helper-member-expression-to-functions": "^7.20.7", "@babel/helper-optimise-call-expression": "^7.18.6", "@babel/helper-replace-supers": "^7.20.7", + "@babel/helper-skip-transparent-expression-wrappers": "^7.20.0", "@babel/helper-split-export-declaration": "^7.18.6" } }, @@ -7771,9 +7773,9 @@ } }, "@babel/traverse": { - "version": "7.20.10", - "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.20.10.tgz", - "integrity": "sha512-oSf1juCgymrSez8NI4A2sr4+uB/mFd9MXplYGPEBnfAuWmmyeVcHa6xLPiaRBcXkcb/28bgxmQLTVwFKE1yfsg==", + "version": "7.20.12", + "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.20.12.tgz", + "integrity": "sha512-MsIbFN0u+raeja38qboyF8TIT7K0BFzz/Yd/77ta4MsUsmP2RAnidIlwq7d5HFQrH/OZJecGV6B71C4zAgpoSQ==", "dev": true, "requires": { "@babel/code-frame": "^7.18.6", @@ -8889,9 +8891,9 @@ "requires": {} }, "ajv": { - "version": "8.11.2", - "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.2.tgz", - "integrity": "sha512-E4bfmKAhGiSTvMfL1Myyycaub+cUEU2/IvpylXkUu7CHBkBj1f/ikdzbD7YQ6FKUbixDxeYvB/xY4fvyroDlQg==", + "version": "8.12.0", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz", + "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==", "dev": true, "requires": { "fast-deep-equal": "^3.1.1", @@ -8943,9 +8945,9 @@ } }, "babel-loader": { - "version": "9.1.0", - "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-9.1.0.tgz", - "integrity": "sha512-Antt61KJPinUMwHwIIz9T5zfMgevnfZkEVWYDWlG888fgdvRRGD0JTuf/fFozQnfT+uq64sk1bmdHDy/mOEWnA==", + "version": "9.1.2", + "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-9.1.2.tgz", + "integrity": "sha512-mN14niXW43tddohGl8HPu5yfQq70iUThvFL/4QzESA7GcZoC0eVOhvWdQ8+3UlSjaDE9MVtsW9mxDY07W7VpVA==", "dev": true, "requires": { "find-cache-dir": "^3.3.2", @@ -9082,9 +9084,9 @@ } }, "caniuse-lite": { - "version": "1.0.30001441", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001441.tgz", - "integrity": "sha512-OyxRR4Vof59I3yGWXws6i908EtGbMzVUi3ganaZQHmydk1iwDhRnvaPG2WaR0KcqrDFKrxVZHULT396LEPhXfg==", + "version": "1.0.30001442", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001442.tgz", + "integrity": "sha512-239m03Pqy0hwxYPYR5JwOIxRJfLTWtle9FV8zosfV5pHg+/51uD4nxcUlM8+mWWGfwKtt8lJNHnD3cWw9VZ6ow==", "dev": true }, "chalk": { @@ -9545,9 +9547,9 @@ "dev": true }, "fastq": { - "version": "1.14.0", - "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.14.0.tgz", - "integrity": "sha512-eR2D+V9/ExcbF9ls441yIuN6TI2ED1Y2ZcA5BmMtJsOkWOFRJQ0Jt0g1UwqXJJVAb+V+umH5Dfr8oh4EVP7VVg==", + "version": "1.15.0", + "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.15.0.tgz", + "integrity": "sha512-wBrocU2LCXXa+lWBt8RoIRD89Fi8OdABODa/kEnyeyjS5aZO5/GNvI5sEINADqP/h8M29UHTHUb53sUu5Ihqdw==", "dev": true, "requires": { "reusify": "^1.0.4" @@ -10234,9 +10236,9 @@ } }, "postcss": { - "version": "8.4.20", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.20.tgz", - "integrity": "sha512-6Q04AXR1212bXr5fh03u8aAwbLxAQNGQ/Q1LNa0VfOI06ZAlhPHtQvE4OIdpj4kLThXilalPnmDSOD65DcHt+g==", + "version": "8.4.21", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.21.tgz", + "integrity": "sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==", "dev": true, "requires": { "nanoid": "^3.3.4", @@ -11283,9 +11285,9 @@ }, "dependencies": { "commander": { - "version": "9.4.1", - "resolved": "https://registry.npmjs.org/commander/-/commander-9.4.1.tgz", - "integrity": "sha512-5EEkTNyHNGFPD2H+c/dXXfQZYa/scCKasxWcXJaWnNJ99pnQN9Vnmqow+p+PlFPE63Q6mThaZws1T+HxfpgtPw==", + "version": "9.5.0", + "resolved": "https://registry.npmjs.org/commander/-/commander-9.5.0.tgz", + "integrity": "sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ==", "dev": true } } diff --git a/package.json b/package.json index da2b3843..7dad8ea7 100644 --- a/package.json +++ b/package.json @@ -1,12 +1,13 @@ { "name": "tinode-webapp", "description": "Tinode messenger for the web", - "version": "0.21.0-beta1", + "version": "0.21.0-rc1", "repository": { "type": "git", "url": "https://github.com/tinode/example-react-js.git" }, "scripts": { + "start": "echo 'Read installation instructions'", "build": "npm run vers && npm run build:css && npm run extract && npm run build:i18n && npm run build:prod && npm run build:dev", "clean": "rm umd/* && rm css/base.min.css && rm i18n.min/*", "build:css": "postcss css/base.css > css/base.min.css", @@ -67,7 +68,7 @@ "react": "^18.2.0", "react-dom": "^18.2.0", "react-intl": "^6.2.1", - "tinode-sdk": "^0.21.0-beta1", + "tinode-sdk": "^0.21.0-rc1", "webm-duration-fix": "^1.0.4" }, "devDependencies": { diff --git a/service-worker.js b/service-worker.js index b771abcc..b69d4a6c 100644 --- a/service-worker.js +++ b/service-worker.js @@ -64,16 +64,16 @@ const fbMessaging = firebase.messaging(); // This method shows the push notifications while the window is in background. fbMessaging.onBackgroundMessage(payload => { - if (payload.data.silent == 'true') { - // TODO: if this is an 'msg', fetch the new message in the background. - return; - } - // Notify webapp that a message was received. if (webAppChannel) { webAppChannel.postMessage(payload.data); } + if (payload.data.silent == 'true') { + // No need to show anything. + return; + } + const titles = {'msg': 'new_message', 'sub': 'new_chat'}; const pushType = payload.data.what || 'msg'; const title = payload.data.title || self.i18nMessage(titles[pushType]); @@ -111,35 +111,35 @@ self.addEventListener('notificationclick', event => { event.waitUntil(self.clients.matchAll({ type: 'window', - includeUncontrolled: true - }).then(windowClients => { - let anyClient = null; - for (let i = 0; i < windowClients.length; i++) { - const url = new URL(windowClients[i].url); - if (url.hash.includes(data.topic)) { - // Found the Tinode tab with the right topic open. - return windowClients[i].focus(); - } else { - // This will be the least recently used tab. - anyClient = windowClients[i]; + includeUncontrolled: true}) + .then(windowClients => { + let anyClient = null; + for (let i = 0; i < windowClients.length; i++) { + const url = new URL(windowClients[i].url); + if (url.hash.includes(data.topic)) { + // Found the Tinode tab with the right topic open. + return windowClients[i].focus(); + } else { + // This will be the least recently used tab. + anyClient = windowClients[i]; + } } - } - // Found tab with Tinode on a different topic, - // navigate to the right topic. - if (anyClient) { - const url = new URL(anyClient.url); + // Found tab with Tinode on a different topic, + // navigate to the right topic. + if (anyClient) { + const url = new URL(anyClient.url); + url.hash = urlHash; + return anyClient.focus().then(thisClient => { + return thisClient.navigate(url); + }); + } + + // Did not find a Tinode browser tab. Open one. + const url = new URL(self.location.origin); url.hash = urlHash; - return anyClient.focus().then(thisClient => { - return thisClient.navigate(url); - }); - } - - // Did not find a Tinode browser tab. Open one. - const url = new URL(self.location.origin); - url.hash = urlHash; - return clients.openWindow(url); - })); + return clients.openWindow(url); + })); }); // This is needed for 'Add to Home Screen'. diff --git a/src/constants.js b/src/constants.js index 6fed4bf3..a5835439 100644 --- a/src/constants.js +++ b/src/constants.js @@ -4,5 +4,5 @@ export const CALL_STATE_OUTGOING_INITATED = 1; export const CALL_STATE_INCOMING_RECEIVED = 2; export const CALL_STATE_IN_PROGRESS = 3; -// Video call drafty headers representing call state. +// Video call message headers representing call state. export const CALL_HEAD_STARTED = 'started'; diff --git a/src/i18n.min/en.json b/src/i18n.min/en.json index b3d33a66..3ac8b0a8 100644 --- a/src/i18n.min/en.json +++ b/src/i18n.min/en.json @@ -1 +1 @@ -{"action_block_contact":"Block Contact","action_cancel":"cancel","action_clear_messages":"Clear Messages","action_delete_messages":"Clear Messages for All","action_leave_chat":"Leave Conversation","action_report_chat":"Report Conversation","archived_contacts":"Archived contacts ({count})","badge_danger":"Untrustworthy","badge_owner":"owner","badge_staff":"Staff-managed","badge_verified":"Verified/official","badge_you":"you","block_contact_warning":"Are you sure you want to block this contact?","blocked_contacts_link":"Blocked contacts ({count})","button_add_another":"Add another","button_add_members":"Add members","button_cancel":"Cancel","button_confirm":"Confirm","button_create":"Create","button_delete_account":"Delete account","button_edit":"Edit","button_logout":"Logout","button_ok":"OK","button_reset":"Reset","button_send_request":"Send request","button_sign_in":"Sign in","button_sign_up":"Sign up","button_subscribe":"Subscribe","button_update":"Update","cannot_initiate_file_upload":"Cannot initiate file upload.","channel":"channel","channel_prompt":"This is a channel","chat_invitation":"You are invited to start a new chat. What would you like to do?","chat_invitation_accept":"Accept","chat_invitation_block":"Block","chat_invitation_ignore":"Ignore","clear_messages_warning":"Are you sure you want to clear all messages? It cannot be undone.","code_doesnot_match":"Code does not match","contacts_not_found":"You have no chats
¯∖_(ツ)_/¯","contacts_not_found_short":"No contacts match ''{query}''","credential_email_prompt":"Your registration email","delete_account":"Delete account","delete_account_warning":"Are you sure you want to delete your account? It cannot be undone.","delete_messages_warning":"Are you sure you want to delete all messages for everyone? It cannot be undone.","download_action":"download","drafty_attachment":"Attachment","drafty_form":"Form:","drafty_image":"Picture","email_dative":"email","email_prompt":"Email, e.g. jdoe@example.com","enable_peers_messaging":"Enable","enter_confirmation_code_prompt":"Enter confirmation code sent to you by {method}:","error_invalid_id":"Invalid ID","file_attachment_too_large":"The file size {size} exceeds the {limit} limit.","forgot_password_link":"Forgot password?","full_name_prompt":"Full name, e.g. John Doe","granted_permissions":"Granted","group_has_no_members":"No members","group_user_id_prompt":"Group or User ID","image_caption_prompt":"Image caption","invalid_content":"invalid content","invalid_security_token":"Invalid security token","label_client":"Client:","label_content_type":"Content type:","label_default_access_mode":"Default access mode:","label_file_name":"File name:","label_group_members":"Group members:","label_incognito_mode":"Incognito mode:","label_message_sound":"Message sound:","label_muting_topic":"Muted:","label_other_user":"Other","label_password":"Password","label_permissions":"Permissions:","label_private":"Private comment","label_push_notifications":"Notification alerts:","label_push_notifications_disabled":"Notification alerts (requires HTTPS):","label_reset_password":"Send a password reset email:","label_sdk":"SDK:","label_server":"Server:","label_server_address":"Server address:","label_server_to_use":"Server to use:","label_size":"Size:","label_topic_name":"Name","label_user_contacts":"Contacts:","label_user_id":"ID:","label_wire_transport":"Wire transport:","label_you":"You:","label_your_name":"Your name","label_your_permissions":"Your permissions:","last_seen_timestamp":"Last seen","leave_chat_warning":"Are you sure you want to leave this conversation?","link_contact_us":"Contact Us","link_privacy_policy":"Privacy Policy","link_terms_of_service":"Terms of Service","login_prompt":"Login","menu_item_archive_topic":"Archive","menu_item_block":"Block","menu_item_clear_messages":"Clear messages","menu_item_clear_messages_for_all":"Clear for All","menu_item_delete":"Delete","menu_item_delete_for_all":"Delete for All","menu_item_delete_topic":"Delete","menu_item_edit_permissions":"Edit permissions","menu_item_info":"Info","menu_item_member_delete":"Remove","menu_item_mute":"Mute","menu_item_reply":"Reply","menu_item_restore_topic":"Restore","menu_item_send_retry":"Retry","menu_item_unblock":"Unblock","menu_item_unmute":"Unmute","message_sending":"sending...","message_sending_failed":"failed","messages_not_readable":"no access to messages","messaging_disabled_prompt":"Messaging disabled","more_online_members":"+{overflow} more","new_message_prompt":"New message","new_password_placeholder":"Enter new password","no_connection":"No connection","no_contacts":"You have no contacts :-(","numeric_confirmation_code_prompt":"Numbers only","online_now":"online now","password_prompt":"Password","password_unchanged_prompt":"Unchanged","peers_messaging_disabled":"Peer's messaging is disabled.","permission_admin":"Approve ({val})","permission_delete":"Delete ({val})","permission_join":"Join ({val})","permission_owner":"Owner ({val})","permission_pres":"Get notified ({val})","permission_read":"Read ({val})","permission_share":"Share ({val})","permission_write":"Write ({val})","phone_dative":"phone","private_editing_placeholder":"Visible to you only","push_init_failed":"Failed to initialize push notifications","reconnect_countdown":"Disconnected. Reconnecting in {seconds}…","reconnect_now":"Try now","reload_update":"Reload","report_chat_warning":"Are you sure you want to block and report this conversation?","requested_permissions":"Requested","save_attachment":"save","search_for_contacts":"Use search to find contacts","search_no_results":"Search returned no results","search_placeholder":"List like email:alice@example.com, tel:17025550003...","sidepanel_title_acc_notifications":"Notifications","sidepanel_title_acc_support":"Support","sidepanel_title_account_settings":"Account Settings","sidepanel_title_archive":"Archived Chats","sidepanel_title_blocked":"Blocked Chats","sidepanel_title_cred":"Confirm Credentials","sidepanel_title_login":"Sign In","sidepanel_title_newtpk":"Start New Chat","sidepanel_title_register":"Create Account","sidepanel_title_reset":"Reset Password","sidepanel_title_settings":"Settings","stay_logged_in":"Stay logged in","tabtitle_find_user":"find","tabtitle_group_by_id":"by id","tabtitle_new_group":"new group","tags_editor_no_tags":"Add some tags","tags_not_found":"No tags defined. Add some.","title_all_contacts":"All Contacts","title_group_members":"Group Members","title_manage_tags":"Manage","title_not_found":"Not found","title_permissions":"Permissions","title_tag_manager":"Tags (search & discovery)","topic_block_warning":"Are you sure you want to block this conversation?","topic_delete_warning":"Are you sure you want to delete this conversation?","topic_name_editing_placeholder":"Freeform name of the group","unnamed_topic":"Unnamed","update_available":"Update available.","upload_finishing":"finishing...","user_not_found":"Not found","validate_credential_action":"confirm","description_editing_placeholder":"Optional description","label_description":"Description","button_security":"Security","panel_title_crop":"Drag to Adjust","panel_title_general":"General","panel_title_members":"Members","panel_title_security":"Security","panel_title_info":"Info","permissions_anonymous":"Anonymous","permissions_authenticated":"Authenticated","topic_delete":"Delete Conversation","permissions_user":"User's Permissions","password_reset_email_sent":"An email has been sent to {email}. Follow the directions in the email to reset your password.","label_unarchive_topic":"Archived:","menu_item_forward":"Forward","forward_to":"Forward to","forward_to_search_placeholder":"Search contacts","label_new_password":"New password","drafty_unknown":"Unsupported","calls_incoming":"Incoming call","calls_outgoing":"Outgoing call","calls_you_label":"You","menu_item_video_call":"Video call","already_in_call":"You already in an ongoing call!","call_cancelled":"cancelled","call_missed":"missed","call_declined":"declined","call_disconnected":"disconnected","label_use_secure_connection":"Use secure connection","phone_or_email_prompt":"Phone number or email","cred_confirmed_successfully":"Confirmed successfully","menu_item_edit":"Edit","editing_message":"Editing","message_edited_marker":", edited","icon_title_add_image":"Add image","icon_title_attach_file":"Attach file","icon_title_delete":"Delete","icon_title_pause":"Pause","icon_title_play":"Play","icon_title_record_voice":"Record voice message","icon_title_resume":"Resume","icon_title_send":"Send message","drag_file":"Drag file here","drafty_video":"Video recording","call_in_progress":"in progress","unrecognized_video_format":"Format of this video is not recognized"} \ No newline at end of file +{"action_block_contact":"Block Contact","action_cancel":"cancel","action_clear_messages":"Clear Messages","action_delete_messages":"Clear Messages for All","action_leave_chat":"Leave Conversation","action_report_chat":"Report Conversation","archived_contacts":"Archived contacts ({count})","badge_danger":"Untrustworthy","badge_owner":"owner","badge_staff":"Staff-managed","badge_verified":"Verified/official","badge_you":"you","block_contact_warning":"Are you sure you want to block this contact?","blocked_contacts_link":"Blocked contacts ({count})","button_add_another":"Add another","button_add_members":"Add members","button_cancel":"Cancel","button_confirm":"Confirm","button_create":"Create","button_delete_account":"Delete account","button_edit":"Edit","button_logout":"Logout","button_ok":"OK","button_reset":"Reset","button_send_request":"Send request","button_sign_in":"Sign in","button_sign_up":"Sign up","button_subscribe":"Subscribe","button_update":"Update","cannot_initiate_file_upload":"Cannot initiate file upload.","channel":"channel","channel_prompt":"This is a channel","chat_invitation":"You are invited to start a new chat. What would you like to do?","chat_invitation_accept":"Accept","chat_invitation_block":"Block","chat_invitation_ignore":"Ignore","clear_messages_warning":"Are you sure you want to clear all messages? It cannot be undone.","code_doesnot_match":"Code does not match","contacts_not_found":"You have no chats
¯∖_(ツ)_/¯","contacts_not_found_short":"No contacts match ''{query}''","credential_email_prompt":"Your registration email","delete_account":"Delete account","delete_account_warning":"Are you sure you want to delete your account? It cannot be undone.","delete_messages_warning":"Are you sure you want to delete all messages for everyone? It cannot be undone.","download_action":"download","drafty_attachment":"Attachment","drafty_form":"Form:","drafty_image":"Picture","email_dative":"email","email_prompt":"Email, e.g. jdoe@example.com","enable_peers_messaging":"Enable","enter_confirmation_code_prompt":"Enter confirmation code sent to you by {method}:","error_invalid_id":"Invalid ID","file_attachment_too_large":"The file size {size} exceeds the {limit} limit.","forgot_password_link":"Forgot password?","full_name_prompt":"Full name, e.g. John Doe","granted_permissions":"Granted","group_has_no_members":"No members","group_user_id_prompt":"Group or User ID","image_caption_prompt":"Image caption","invalid_content":"invalid content","invalid_security_token":"Invalid security token","label_client":"Client:","label_content_type":"Content type:","label_default_access_mode":"Default access mode:","label_file_name":"File name:","label_group_members":"Group members:","label_incognito_mode":"Incognito mode:","label_message_sound":"Message sound:","label_muting_topic":"Muted:","label_other_user":"Other","label_password":"Password","label_permissions":"Permissions:","label_private":"Private comment","label_push_notifications":"Notification alerts:","label_push_notifications_disabled":"Notification alerts (requires HTTPS):","label_reset_password":"Send a password reset email:","label_sdk":"SDK:","label_server":"Server:","label_server_address":"Server address:","label_server_to_use":"Server to use:","label_size":"Size:","label_topic_name":"Name","label_user_contacts":"Contacts:","label_user_id":"ID:","label_wire_transport":"Wire transport:","label_you":"You:","label_your_name":"Your name","label_your_permissions":"Your permissions:","last_seen_timestamp":"Last seen","leave_chat_warning":"Are you sure you want to leave this conversation?","link_contact_us":"Contact Us","link_privacy_policy":"Privacy Policy","link_terms_of_service":"Terms of Service","login_prompt":"Login","menu_item_archive_topic":"Archive","menu_item_block":"Block","menu_item_clear_messages":"Clear messages","menu_item_clear_messages_for_all":"Clear for All","menu_item_delete":"Delete","menu_item_delete_for_all":"Delete for All","menu_item_delete_topic":"Delete","menu_item_edit_permissions":"Edit permissions","menu_item_info":"Info","menu_item_member_delete":"Remove","menu_item_mute":"Mute","menu_item_reply":"Reply","menu_item_restore_topic":"Restore","menu_item_send_retry":"Retry","menu_item_unblock":"Unblock","menu_item_unmute":"Unmute","message_sending":"sending...","message_sending_failed":"failed","messages_not_readable":"no access to messages","messaging_disabled_prompt":"Messaging disabled","more_online_members":"+{overflow} more","new_message_prompt":"New message","new_password_placeholder":"Enter new password","no_connection":"No connection","no_contacts":"You have no contacts :-(","numeric_confirmation_code_prompt":"Numbers only","online_now":"online now","password_prompt":"Password","password_unchanged_prompt":"Unchanged","peers_messaging_disabled":"Peer's messaging is disabled.","permission_admin":"Approve ({val})","permission_delete":"Delete ({val})","permission_join":"Join ({val})","permission_owner":"Owner ({val})","permission_pres":"Get notified ({val})","permission_read":"Read ({val})","permission_share":"Share ({val})","permission_write":"Write ({val})","phone_dative":"phone","private_editing_placeholder":"Visible to you only","push_init_failed":"Failed to initialize push notifications","reconnect_countdown":"Disconnected. Reconnecting in {seconds}…","reconnect_now":"Try now","reload_update":"Reload","report_chat_warning":"Are you sure you want to block and report this conversation?","requested_permissions":"Requested","save_attachment":"save","search_for_contacts":"Use search to find contacts","search_no_results":"Search returned no results","search_placeholder":"List like email:alice@example.com, tel:17025550003...","sidepanel_title_acc_notifications":"Notifications","sidepanel_title_acc_support":"Support","sidepanel_title_account_settings":"Account Settings","sidepanel_title_archive":"Archived Chats","sidepanel_title_blocked":"Blocked Chats","sidepanel_title_cred":"Confirm Credentials","sidepanel_title_login":"Sign In","sidepanel_title_newtpk":"Start New Chat","sidepanel_title_register":"Create Account","sidepanel_title_reset":"Reset Password","sidepanel_title_settings":"Settings","stay_logged_in":"Stay logged in","tabtitle_find_user":"find","tabtitle_group_by_id":"by id","tabtitle_new_group":"new group","tags_editor_no_tags":"Add some tags","tags_not_found":"No tags defined. Add some.","title_all_contacts":"All Contacts","title_group_members":"Group Members","title_manage_tags":"Manage","title_not_found":"Not found","title_permissions":"Permissions","title_tag_manager":"Tags (search & discovery)","topic_block_warning":"Are you sure you want to block this conversation?","topic_delete_warning":"Are you sure you want to delete this conversation?","topic_name_editing_placeholder":"Freeform name of the group","unnamed_topic":"Unnamed","update_available":"Update available.","upload_finishing":"finishing...","user_not_found":"Not found","validate_credential_action":"confirm","description_editing_placeholder":"Optional description","label_description":"Description","button_security":"Security","panel_title_crop":"Drag to Adjust","panel_title_general":"General","panel_title_members":"Members","panel_title_security":"Security","panel_title_info":"Info","permissions_anonymous":"Anonymous","permissions_authenticated":"Authenticated","topic_delete":"Delete Conversation","permissions_user":"User's Permissions","password_reset_email_sent":"An email has been sent to {email}. Follow the directions in the email to reset your password.","label_unarchive_topic":"Archived:","menu_item_forward":"Forward","forward_to":"Forward to","forward_to_search_placeholder":"Search contacts","label_new_password":"New password","drafty_unknown":"Unsupported","calls_incoming":"Incoming call","calls_outgoing":"Outgoing call","calls_you_label":"You","menu_item_video_call":"Video call","already_in_call":"You already in an ongoing call!","call_cancelled":"cancelled","call_missed":"missed","call_declined":"declined","call_disconnected":"disconnected","label_use_secure_connection":"Use secure connection","phone_or_email_prompt":"Phone number or email","cred_confirmed_successfully":"Confirmed successfully","menu_item_edit":"Edit","editing_message":"Editing","message_edited_marker":", edited","icon_title_add_image":"Add image","icon_title_attach_file":"Attach file","icon_title_delete":"Delete","icon_title_pause":"Pause","icon_title_play":"Play","icon_title_record_voice":"Record voice message","icon_title_resume":"Resume","icon_title_send":"Send message","drag_file":"Drag file here","drafty_video":"Video recording","call_in_progress":"in progress","menu_item_audio_call":"Call","unrecognized_video_format":"Format of this video is not recognized"} \ No newline at end of file diff --git a/src/i18n/de.json b/src/i18n/de.json index 9dbf5b4d..5cb1c7aa 100644 --- a/src/i18n/de.json +++ b/src/i18n/de.json @@ -1543,6 +1543,13 @@ "missing": false, "obsolete": false }, + "menu_item_audio_call": { + "translation": "", + "defaultMessage": "Call", + "description": "Start audio call", + "missing": true, + "obsolete": false + }, "unrecognized_video_format": { "translation": "Das Format dieses Videos wird nicht erkannt", "defaultMessage": "Format of this video is not recognized", diff --git a/src/i18n/en.json b/src/i18n/en.json index c8c44de5..68a6a540 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -1543,6 +1543,13 @@ "missing": false, "obsolete": false }, + "menu_item_audio_call": { + "translation": "Call", + "defaultMessage": "Call", + "description": "Start audio call", + "missing": false, + "obsolete": false + }, "unrecognized_video_format": { "translation": "Format of this video is not recognized", "defaultMessage": "Format of this video is not recognized", diff --git a/src/i18n/es.json b/src/i18n/es.json index 387f3087..350cd342 100644 --- a/src/i18n/es.json +++ b/src/i18n/es.json @@ -1543,6 +1543,13 @@ "missing": false, "obsolete": false }, + "menu_item_audio_call": { + "translation": "", + "defaultMessage": "Call", + "description": "Start audio call", + "missing": true, + "obsolete": false + }, "unrecognized_video_format": { "translation": "No se reconoce el formato de este video", "defaultMessage": "Format of this video is not recognized", diff --git a/src/i18n/ex/base-en.json b/src/i18n/ex/base-en.json index de71083b..0257ab98 100644 --- a/src/i18n/ex/base-en.json +++ b/src/i18n/ex/base-en.json @@ -500,6 +500,10 @@ "defaultMessage": "Archive", "description": "Move topic from the list of active chats to archive" }, + "menu_item_audio_call": { + "defaultMessage": "Call", + "description": "Start audio call" + }, "menu_item_block": { "defaultMessage": "Block", "description": "Block topic or user" diff --git a/src/i18n/fr.json b/src/i18n/fr.json index c5109fc7..b0ace8e1 100644 --- a/src/i18n/fr.json +++ b/src/i18n/fr.json @@ -1543,6 +1543,13 @@ "missing": false, "obsolete": false }, + "menu_item_audio_call": { + "translation": "", + "defaultMessage": "Call", + "description": "Start audio call", + "missing": true, + "obsolete": false + }, "unrecognized_video_format": { "translation": "Le format de cette vidéo n'est pas reconnu", "defaultMessage": "Format of this video is not recognized", diff --git a/src/i18n/ko.json b/src/i18n/ko.json index acfc2350..0cbd69be 100644 --- a/src/i18n/ko.json +++ b/src/i18n/ko.json @@ -1543,6 +1543,13 @@ "missing": false, "obsolete": false }, + "menu_item_audio_call": { + "translation": "", + "defaultMessage": "Call", + "description": "Start audio call", + "missing": true, + "obsolete": false + }, "unrecognized_video_format": { "translation": "이 동영상의 형식을 인식할 수 없습니다.", "defaultMessage": "Format of this video is not recognized", diff --git a/src/i18n/ro.json b/src/i18n/ro.json index dac7e185..eb9cb757 100644 --- a/src/i18n/ro.json +++ b/src/i18n/ro.json @@ -1543,6 +1543,13 @@ "missing": false, "obsolete": false }, + "menu_item_audio_call": { + "translation": "", + "defaultMessage": "Call", + "description": "Start audio call", + "missing": true, + "obsolete": false + }, "unrecognized_video_format": { "translation": "Formatul acestui videoclip nu este recunoscut", "defaultMessage": "Format of this video is not recognized", diff --git a/src/i18n/ru.json b/src/i18n/ru.json index 6271ed39..79e54fd1 100644 --- a/src/i18n/ru.json +++ b/src/i18n/ru.json @@ -1543,6 +1543,13 @@ "missing": false, "obsolete": false }, + "menu_item_audio_call": { + "translation": "", + "defaultMessage": "Call", + "description": "Start audio call", + "missing": true, + "obsolete": false + }, "unrecognized_video_format": { "translation": "Неизвестный формат видео файла", "defaultMessage": "Format of this video is not recognized", diff --git a/src/i18n/zh-TW.json b/src/i18n/zh-TW.json index 07758ee9..b1742cdd 100644 --- a/src/i18n/zh-TW.json +++ b/src/i18n/zh-TW.json @@ -1543,6 +1543,13 @@ "missing": false, "obsolete": false }, + "menu_item_audio_call": { + "translation": "", + "defaultMessage": "Call", + "description": "Start audio call", + "missing": true, + "obsolete": false + }, "unrecognized_video_format": { "translation": "無法識別此視頻的格式", "defaultMessage": "Format of this video is not recognized", diff --git a/src/i18n/zh.json b/src/i18n/zh.json index 3133ed94..eb832776 100644 --- a/src/i18n/zh.json +++ b/src/i18n/zh.json @@ -1543,6 +1543,13 @@ "missing": false, "obsolete": false }, + "menu_item_audio_call": { + "translation": "", + "defaultMessage": "Call", + "description": "Start audio call", + "missing": true, + "obsolete": false + }, "unrecognized_video_format": { "translation": "无法识别此视频的格式", "defaultMessage": "Format of this video is not recognized", diff --git a/src/version.js b/src/version.js index 16b82fb6..e8dc5f39 100644 --- a/src/version.js +++ b/src/version.js @@ -1,3 +1,3 @@ // This is a generated file. Don't edit. -export const PACKAGE_VERSION = "0.21.0-beta1"; +export const PACKAGE_VERSION = "0.21.0-rc1"; diff --git a/src/views/messages-view.jsx b/src/views/messages-view.jsx index 45fc9612..a890aed9 100644 --- a/src/views/messages-view.jsx +++ b/src/views/messages-view.jsx @@ -303,8 +303,6 @@ class MessagesView extends React.Component { scrollPosition: 0, fetchingMessages: false, showGoToLastButton: false, - forwardMessage: null, - reply: null, contentToEdit: null, dragging: false }; @@ -315,6 +313,8 @@ class MessagesView extends React.Component { content: nextProps.forwardMessage.preview, seq: null }; + } else { + nextState.reply = null; } if (topic) { @@ -1358,6 +1358,7 @@ class MessagesView extends React.Component { topic={this.state.topic} seq={this.props.callSeq} callState={this.props.callState} + callAudioOnly={this.props.callAudioOnly} tinode={this.props.tinode} title={this.state.title} avatar={this.state.avatar || true} diff --git a/src/views/tinode-web.jsx b/src/views/tinode-web.jsx index 523d5ab7..d07321ec 100644 --- a/src/views/tinode-web.jsx +++ b/src/views/tinode-web.jsx @@ -69,6 +69,11 @@ const messages = defineMessages({ defaultMessage: 'Info', description: 'Show extended topic information' }, + menu_item_audio_call: { + id: 'menu_item_audio_call', + defaultMessage: 'Call', + description: 'Start audio call' + }, menu_item_video_call: { id: 'menu_item_video_call', defaultMessage: 'Video call', @@ -158,6 +163,7 @@ class TinodeWeb extends React.Component { this.handleHideForwardDialog = this.handleHideForwardDialog.bind(this); this.handleStartVideoCall = this.handleStartVideoCall.bind(this); + this.handleStartAudioCall = this.handleStartAudioCall.bind(this); this.handleInfoMessage = this.handleInfoMessage.bind(this); this.handleDataMessage = this.handleDataMessage.bind(this); this.handleCallClose = this.handleCallClose.bind(this); @@ -233,6 +239,7 @@ class TinodeWeb extends React.Component { // Video calls. callTopic: undefined, callState: CALL_STATE_NONE, + callAudioOnly: undefined, // If true, call state should be transitioned to CALL_STATE_IN_PROGRESS upon // switching to the call topic. callShouldStart: false, @@ -299,11 +306,7 @@ class TinodeWeb extends React.Component { }).then(_ => { // Initialize desktop alerts. if (this.state.desktopAlertsEnabled) { - this.initFCMessaging().then(_ => { - if (this.state.desktopAlerts) { - this.tinode.setDeviceToken(this.state.firebaseToken); - } - }).catch(_ => { + this.initFCMessaging().catch(_ => { // do nothing: handled earlier. // catch needed to pervent unnecessary logging of error. }); @@ -370,20 +373,23 @@ class TinodeWeb extends React.Component { const onError = (msg, err) => { console.error(msg, err); this.handleError(formatMessage(messages.push_init_failed), 'err'); - this.setState({desktopAlertsEnabled: false, firebaseToken: null}); + this.setState({firebaseToken: null}); LocalStorageUtil.updateObject('settings', {desktopAlerts: false}); } try { this.fcm = firebaseGetMessaging(firebaseInitApp(FIREBASE_INIT, APP_NAME)); - return navigator.serviceWorker.register('/service-worker.js').then((reg) => { - this.checkForAppUpdate(reg); - reg.active.postMessage(JSON.stringify({locale: locale, version: PACKAGE_VERSION})); - return reg; - }).then((reg) => { + return navigator.serviceWorker.getRegistration('/service-worker.js').then(reg => { + return reg || navigator.serviceWorker.register('/service-worker.js').then(reg => { + this.checkForAppUpdate(reg); + return reg; + }); + }).then(reg => { + // Pass locale and version config to the service worker. + (reg.active || reg.installing).postMessage(JSON.stringify({locale: locale, version: PACKAGE_VERSION})); // Request token. return TinodeWeb.requestFCMToken(this.fcm, reg); - }).then((token) => { + }).then(token => { const persist = LocalStorageUtil.getObject('keep-logged-in'); if (token != this.state.firebaseToken) { this.tinode.setDeviceToken(token); @@ -399,7 +405,7 @@ class TinodeWeb extends React.Component { // Handhe FCM pushes // (a) for channels always, // (b) pushes when the app is in foreground but has no focus. - firebaseOnMessage(this.fcm, (payload) => { this.handlePushMessage(payload); }); + firebaseOnMessage(this.fcm, payload => { this.handlePushMessage(payload); }); }).catch(err => { // SW registration or FCM has failed :( onError(err); @@ -416,17 +422,17 @@ class TinodeWeb extends React.Component { return firebaseGetToken(fcm, { serviceWorkerRegistration: sw, vapidKey: FIREBASE_INIT.messagingVapidKey - }).then((token) => { + }).then(token => { if (token) { return token; } else { // Try to request permissions. - return Notification.requestPermission().then((permission) => { + return Notification.requestPermission().then(permission => { if (permission === 'granted') { return firebaseGetToken(fcm, { serviceWorkerRegistration: reg, vapidKey: FIREBASE_INIT.messagingVapidKey - }).then((token) => { + }).then(token => { if (token) { return token; } else { @@ -576,6 +582,12 @@ class TinodeWeb extends React.Component { this.handleError(err.message, 'err'); }); } + + if (this.state.desktopAlertsEnabled && !this.state.firebaseToken) { + // Firefox and Safari: "The Notification permission may only be requested from inside a + // short running user-generated event handler". + this.initFCMessaging(); + } } // Enable or disable saving the password and IndexedDB. @@ -712,20 +724,23 @@ class TinodeWeb extends React.Component { this.handleLoginSuccessful(); } }).catch(err => { + const autoLogin = err.code >= 500; // Connection or login failed, report error. this.setState({ loginDisabled: false, credMethod: undefined, credCode: undefined, loadSpinnerVisible: false, - autoLogin: false + autoLogin: autoLogin }); this.handleError(err.message, 'err'); console.warn("Login failed", err); - if (token) { - this.handleLogout(); + if (!autoLogin) { + if (token) { + this.handleLogout(); + } + HashNavigation.navigateTo(''); } - HashNavigation.navigateTo(''); }); } @@ -1584,6 +1599,10 @@ class TinodeWeb extends React.Component { title: this.props.intl.formatMessage(messages.menu_item_info), handler: this.handleShowInfoView } : null, + subscribed && Tinode.isP2PTopicName(topicName) && webrtc ? { + title: this.props.intl.formatMessage(messages.menu_item_audio_call), + handler: this.handleStartAudioCall + } : null, subscribed && Tinode.isP2PTopicName(topicName) && webrtc ? { title: this.props.intl.formatMessage(messages.menu_item_video_call), handler: this.handleStartVideoCall @@ -1709,15 +1728,24 @@ class TinodeWeb extends React.Component { handleStartVideoCall() { this.setState({ callTopic: this.state.topicSelected, - callState: CALL_STATE_OUTGOING_INITATED + callState: CALL_STATE_OUTGOING_INITATED, + callAudioOnly: false }); } - handleCallInvite(callTopic, callSeq, callState) { + handleStartAudioCall() { + this.setState({ + callTopic: this.state.topicSelected, + callState: CALL_STATE_OUTGOING_INITATED, + callAudioOnly: true + }); + } + + handleCallInvite(callTopic, callSeq, callState, audioOnly) { switch (callState) { case CALL_STATE_OUTGOING_INITATED: - let head = { webrtc: CALL_HEAD_STARTED }; - this.handleSendMessage(Drafty.videoCall(), undefined, undefined, head) + const head = { webrtc: CALL_HEAD_STARTED, aonly: !!audioOnly }; + this.handleSendMessage(Drafty.videoCall(audioOnly), undefined, undefined, head) .then(ctrl => { if (ctrl.code < 200 || ctrl.code >= 300 || !ctrl.params || !ctrl.params.seq) { this.handleCallClose(); @@ -1787,7 +1815,8 @@ class TinodeWeb extends React.Component { } this.setState({ callTopic: undefined, - callState: CALL_STATE_NONE + callState: CALL_STATE_NONE, + callAudioOnly: undefined }); } @@ -1820,7 +1849,8 @@ class TinodeWeb extends React.Component { this.setState({ callTopic: null, callState: CALL_STATE_NONE, - callSeq: null + callSeq: null, + callAudioOnly: undefined }); return; } @@ -1853,7 +1883,8 @@ class TinodeWeb extends React.Component { this.setState({ callTopic: data.topic, callState: CALL_STATE_INCOMING_RECEIVED, - callSeq: data.seq + callSeq: data.seq, + callAudioOnly: !!msg.head.aonly }); } else { // Another call is either in progress or being established. @@ -1909,10 +1940,11 @@ class TinodeWeb extends React.Component { {this.state.callTopic && this.state.callState == CALL_STATE_INCOMING_RECEIVED ? this.setState({alertVisible: false})) : null} - reject={this.state.alertParams.reject} - onConfirm={_ => {this.setState({alertVisible: false}); this.state.alertParams.onConfirm();}} - confirm={this.state.alertParams.confirm} - /> + {this.state.alertVisible ? + this.setState({alertVisible: false})) : null} + reject={this.state.alertParams.reject} + onConfirm={_ => {this.setState({alertVisible: false}); this.state.alertParams.onConfirm();}} + confirm={this.state.alertParams.confirm} + /> : null} -
-
{this.props.title}
-
{this.props.content}
-
- {this.props.onReject ? - - : - null - } - -
+ : + null + } +
- : - null; + } }; diff --git a/src/widgets/call-panel.jsx b/src/widgets/call-panel.jsx index d974ff61..b2d66001 100644 --- a/src/widgets/call-panel.jsx +++ b/src/widgets/call-panel.jsx @@ -15,6 +15,9 @@ const CALL_ENDED_SOUND = new Audio('audio/call-end.m4a'); CALL_ENDED_SOUND.loop = true; const DIALING_SOUND = new Audio('audio/dialing.m4a'); +const VIDEO_MUTED_EVENT = 'video:muted'; +const VIDEO_UNMUTED_EVENT = 'video:unmuted'; + const messages = defineMessages({ already_in_call: { id: 'already_in_call', @@ -30,16 +33,22 @@ class CallPanel extends React.PureComponent { this.state = { localStream: undefined, pc: undefined, + dataChannel: undefined, previousOnInfo: undefined, waitingForPeer: false, // If true, the client has received a remote SDP from the peer and has sent a local SDP to the peer. - callInitialSetupComplete: false + callInitialSetupComplete: false, + audioOnly: props.callAudioOnly, + // Video mute/unmute in progress. + videoToggleInProgress: false, + // Indicates if the remote peer has informed us that their camera is on. + remoteVideoLive: false, }; this.localStreamConstraints = { audio: true, - video: true + video: !props.callAudioOnly }; this.isOutgoingCall = props.callState == CALL_STATE_OUTGOING_INITATED; @@ -77,10 +86,19 @@ class CallPanel extends React.PureComponent { this.handleCloseClick = this.handleCloseClick.bind(this); this.handleToggleCameraClick = this.handleToggleCameraClick.bind(this); this.handleToggleMicClick = this.handleToggleMicClick.bind(this); - this.toggleMedia = this.toggleMedia.bind(this); this.handleRemoteHangup = this.handleRemoteHangup.bind(this); this.handleVideoCallAccepted = this.handleVideoCallAccepted.bind(this); + + this.muteVideo = this.muteVideo.bind(this); + this.unmuteVideo = this.unmuteVideo.bind(this); + this.emptyVideoTrack = this.emptyVideoTrack.bind(this); + + this.handleDataChannelEvent = this.handleDataChannelEvent.bind(this); + this.handleDataChannelError = this.handleDataChannelError.bind(this); + this.handleDataChannelMessage = this.handleDataChannelMessage.bind(this); + this.handleDataChannelOpen = this.handleDataChannelOpen.bind(this); + this.handleDataChannelClose = this.handleDataChannelClose.bind(this); } componentDidMount() { @@ -105,6 +123,13 @@ class CallPanel extends React.PureComponent { const stream = this.state.localStream; stream.getTracks().forEach(track => { pc.addTrack(track, stream); + + if (track.kind == 'video' && !this.localStreamConstraints.video) { + // This is an audio-only call. + // Remove dummy video track (placeholder remains). + track.stop(); + stream.removeTrack(track); + } }); } @@ -138,6 +163,16 @@ class CallPanel extends React.PureComponent { } } + // Creates an empty video track placeholder. + emptyVideoTrack() { + const width = 640; + const height = 480; + const canvas = Object.assign(document.createElement("canvas"), {width, height}); + canvas.getContext('2d').fillRect(0, 0, width, height); + const stream = canvas.captureStream(0); + return Object.assign(stream.getVideoTracks()[0], {enabled: false}); + } + start() { if (this.state.localStream) { this.props.onError(this.props.intl.formatMessage(messages.already_in_call), 'info'); @@ -146,7 +181,7 @@ class CallPanel extends React.PureComponent { if (this.props.callState == CALL_STATE_IN_PROGRESS) { // We apparently just accepted the call. - this.props.onInvite(this.props.topic, this.props.seq, this.props.callState); + this.props.onInvite(this.props.topic, this.props.seq, CALL_STATE_IN_PROGRESS, this.props.callAudioOnly); return; } @@ -154,13 +189,18 @@ class CallPanel extends React.PureComponent { // Start local video. navigator.mediaDevices.getUserMedia(this.localStreamConstraints) .then(stream => { + if (!this.localStreamConstraints.video) { + // Starting an audio-only call. Create a dummy video track + // (so video can be enabled during the call if the user desires). + stream.addTrack(this.emptyVideoTrack()); + } this.setState({localStream: stream, waitingForPeer: true}); this.localRef.current.srcObject = stream; DIALING_SOUND.play(); // Send call invitation. - this.props.onInvite(this.props.topic, this.props.seq, this.props.callState); + this.props.onInvite(this.props.topic, this.props.seq, this.props.callState, this.props.callAudioOnly); }) .catch(this.handleGetUserMediaError); } @@ -183,7 +223,11 @@ class CallPanel extends React.PureComponent { this.state.pc.onicegatheringstatechange = null; this.state.pc.onnegotiationneeded = null; this.state.pc.onicecandidateerror = null; + this.state.pc.ondatachannel = null; + if (this.state.dataChannel) { + this.state.dataChannel.close(); + } this.state.pc.close(); } this.setState({pc: null, waitingForPeer: false}); @@ -209,6 +253,42 @@ class CallPanel extends React.PureComponent { el.src = ''; } + handleDataChannelError(error) { + console.error('data channel error', error); + } + + handleDataChannelMessage(event) { + switch (event.data) { + case VIDEO_MUTED_EVENT: + this.setState({remoteVideoLive: false}); + break; + case VIDEO_UNMUTED_EVENT: + this.setState({remoteVideoLive: true}); + break; + default: + break; + } + } + + handleDataChannelOpen(event) { + if (!this.state.audioOnly) { + event.target.send(VIDEO_UNMUTED_EVENT); + } + } + + handleDataChannelClose() { + /* no action */ + } + + handleDataChannelEvent(event) { + const channel = event.channel; + channel.onerror = this.handleDataChannelError; + channel.onmessage = this.handleDataChannelMessage; + channel.onopen = this.handleDataChannelOpen; + channel.onclose = this.handleDataChannelClose; + this.setState({dataChannel: channel}); + } + createPeerConnection() { const iceServers = this.props.tinode.getServerParam('iceServers', null); const pc = iceServers ? new RTCPeerConnection({iceServers: iceServers}) : new RTCPeerConnection(); @@ -220,8 +300,17 @@ class CallPanel extends React.PureComponent { pc.onnegotiationneeded = this.handleNegotiationNeededEvent; pc.onicecandidateerror = this.handleIceCandidateErrorEvent; pc.ontrack = this.handleTrackEvent; + pc.ondatachannel = this.handleDataChannelEvent; + + // creating data channel events + const channel = pc.createDataChannel("events", {ordered: true}); + channel.onerror = this.handleDataChannelError; + channel.onmessage = this.handleDataChannelMessage; + channel.onopen = this.handleDataChannelOpen; + channel.onclose = this.handleDataChannelClose; this.setState({pc: pc, waitingForPeer: false}); + return pc; } @@ -233,7 +322,7 @@ class CallPanel extends React.PureComponent { .then(_ => { this.setState({ callInitialSetupComplete: true }, _ => this.drainRemoteIceCandidatesCache()); }) - .catch(this.reportError); + .catch(err => this.reportError(err)); } reportError(err) { @@ -244,17 +333,18 @@ class CallPanel extends React.PureComponent { return this.isOutgoingCall || this.state.callInitialSetupComplete; } - handleNegotiationNeededEvent() { + handleNegotiationNeededEvent(event) { + const pc = event.target; if (!this.canSendOffer()) { return; } - this.state.pc.createOffer().then(offer => { - return this.state.pc.setLocalDescription(offer); + pc.createOffer().then(offer => { + return pc.setLocalDescription(offer); }) .then(_ => { - this.props.onSendOffer(this.props.topic, this.props.seq, this.state.pc.localDescription.toJSON()); + this.props.onSendOffer(this.props.topic, this.props.seq, pc.localDescription.toJSON()); }) - .catch(this.reportError); + .catch(err => this.reportError(err)); } handleIceCandidateErrorEvent(event) { @@ -271,7 +361,12 @@ class CallPanel extends React.PureComponent { const candidate = new RTCIceCandidate(info.payload); if (this.state.callInitialSetupComplete) { this.state.pc.addIceCandidate(candidate) - .catch(this.reportError); + .catch(err => { + if (candidate.candidate) { + this.reportError(err); + } + console.warn("Error adding new ice candidate", candidate, err); + }); } else { this.remoteIceCandidatesCache.push(candidate); } @@ -280,7 +375,12 @@ class CallPanel extends React.PureComponent { drainRemoteIceCandidatesCache() { this.remoteIceCandidatesCache.forEach(candidate => { this.state.pc.addIceCandidate(candidate) - .catch(this.reportError); + .catch(err => { + if (candidate.candidate) { + this.reportError(err); + } + console.warn("Error adding cached ice candidate", candidate, err); + }); }); this.remoteIceCandidatesCache = []; } @@ -295,7 +395,7 @@ class CallPanel extends React.PureComponent { } handleSignalingStateChangeEvent(event) { - if (this.state.pc.signalingState == 'closed') { + if (event.target.signalingState == 'closed') { this.handleCloseClick(); } } @@ -307,23 +407,24 @@ class CallPanel extends React.PureComponent { handleTrackEvent(event) { // Remote video becomes available. this.remoteRef.current.srcObject = event.streams[0]; + // Make sure we display the title (peer's name) over the remote video. this.forceUpdate(); } handleGetUserMediaError(e) { + console.error("Error opening camera and/or microphone", e); switch(e.name) { case 'NotFoundError': // Cannot start the call b/c no camera and/or microphone found. - this.reportError(e.message); + this.reportError(e); break; case 'SecurityError': case 'PermissionDeniedError': // Do nothing; this is the same as the user canceling the call. break; default: - this.reportError(e.message); - console.error("Error opening your camera and/or microphone:", e.message); + this.reportError(e); break; } @@ -334,13 +435,20 @@ class CallPanel extends React.PureComponent { handleVideoOfferMsg(info) { let localStream = null; - const pc = this.createPeerConnection(); + const pc = this.state.pc ? this.state.pc : this.createPeerConnection(); const desc = new RTCSessionDescription(info.payload); pc.setRemoteDescription(desc).then(_ => { return navigator.mediaDevices.getUserMedia(this.localStreamConstraints); }) .then(stream => { + let dummyVideo; + if (!this.localStreamConstraints.video) { + // Starting an audio-only call. Create an empty video track so + // so the user can enable the video during the call. + dummyVideo = this.emptyVideoTrack(); + stream.addTrack(dummyVideo); + } localStream = stream; this.localRef.current.srcObject = stream; this.setState({localStream: stream}); @@ -348,6 +456,11 @@ class CallPanel extends React.PureComponent { localStream.getTracks().forEach(track => { pc.addTrack(track, localStream); }); + + if (dummyVideo) { + dummyVideo.stop(); + stream.removeTrack(dummyVideo); + } }) .then(_ => { return pc.createAnswer(); @@ -387,49 +500,103 @@ class CallPanel extends React.PureComponent { this.props.onHangup(this.props.topic, this.props.seq); } - // Mute/unmute audio/video (specified by kind). - toggleMedia(kind) { + // Ends video track and turns off the camera. + muteVideo() { + if (!this.state.pc || !this.state.dataChannel) { + return; + } + const stream = this.state.localStream; - stream.getTracks().forEach(track => { - if (track.kind != kind) { - return; + const t = stream.getVideoTracks()[0]; + t.enabled = false; + t.stop(); + + stream.removeTrack(t); + this.state.dataChannel.send(VIDEO_MUTED_EVENT); + this.setState({videoToggleInProgress: false}); + } + + unmuteVideo() { + if (!this.state.pc || !this.state.dataChannel) { + return; + } + navigator.mediaDevices.getUserMedia({ video: true }) + .then(stream => { + // Will extract video track from stream and throw stream away, + // and replace video track in the media sender. + this.localRef.current.srcObject = null; + const sender = this.state.pc.getSenders().find(s => s.track.kind == 'video'); + const track = stream.getVideoTracks()[0]; + // Remote track from new stream. + stream.removeTrack(track); + // Add this track to the existing local stream. + this.state.localStream.addTrack(track); + return sender.replaceTrack(track); + }) + .then(_ => { + this.localRef.current.srcObject = this.state.localStream; + this.state.dataChannel.send(VIDEO_UNMUTED_EVENT); + }) + .catch(err => this.handleGetUserMediaError(err)) + .finally(_ => { this.setState({videoToggleInProgress: false}); }); // Make sure we redraw the mute/unmute icons (e.g. camera -> camera_off). + } + + handleToggleCameraClick() { + if (this.state.videoToggleInProgress) { + // Toggle currently in progress. + return; + } + const tracks = this.state.localStream.getVideoTracks(); + this.setState({videoToggleInProgress: true}, _ => { + if (tracks && tracks.length > 0 && tracks[0].enabled && tracks[0].readyState == 'live') { + this.muteVideo(); + } else { + this.unmuteVideo(); } - track.enabled = !track.enabled; + this.setState({audioOnly: !this.state.audioOnly}); }); + } + + handleToggleMicClick() { + const stream = this.state.localStream; + const t = stream.getAudioTracks()[0]; + t.enabled = !t.enabled; // Make sure we redraw the mute/unmute icons (e.g. mic -> mic_off). this.forceUpdate(); } - handleToggleCameraClick() { - this.toggleMedia('video'); - } - - handleToggleMicClick() { - this.toggleMedia('audio'); - } - render() { - const remoteActive = this.remoteRef.current && this.remoteRef.current.srcObject; - const disabled = !(this.state.localStream && this.state.localStream.getTracks()); - const audioIcon = this.state.localStream && this.state.localStream.getAudioTracks()[0].enabled ? 'mic' : 'mic_off'; - const videoIcon = this.state.localStream && this.state.localStream.getVideoTracks()[0].enabled ? 'videocam' : 'videocam_off'; + const audioTracks = this.state.localStream && this.state.localStream.getAudioTracks(); + const videoTracks = !this.state.audioOnly && this.state.localStream && this.state.localStream.getVideoTracks(); + const disabled = !this.state.pc || !this.state.dataChannel || !(audioTracks && audioTracks[0]); + const audioIcon = audioTracks && audioTracks[0] && audioTracks[0].enabled ? 'mic' : 'mic_off'; + const videoIcon = videoTracks && videoTracks[0] && videoTracks[0].enabled && videoTracks[0].readyState == 'live' ? 'videocam' : 'videocam_off'; const peerTitle = clipStr(this.props.title, MAX_PEER_TITLE_LENGTH); const pulseAnimation = this.state.waitingForPeer ? ' pulse' : ''; + let removeActive = false; + if (this.remoteRef.current && this.remoteRef.current.srcObject && this.state.remoteVideoLive) { + const rstream = this.remoteRef.current.srcObject; + if (rstream.getVideoTracks().length > 0) { + const t = rstream.getVideoTracks()[0]; + removeActive = t.enabled && t.readyState == 'live'; + } + } + return ( <>
-
+
-
+