diff --git a/css/base.css b/css/base.css index d1019247..e3e97cd6 100644 --- a/css/base.css +++ b/css/base.css @@ -1791,6 +1791,15 @@ img.channel { z-index: 0; } +/* Dark mode wallpaper adjustments: image wallpaper */ +#messages-container.dark.wpimg::before { + filter: brightness(50%); +} +/* Dark mode wallpaper adjustments: pattern wallpaper */ +#messages-container.dark.wppatt::before { + filter: invert(1); +} + /* Scrollable panel where the messages are shown */ #messages-panel { position: relative; @@ -1799,18 +1808,6 @@ img.channel { height: 100%; } -/* Dark mode asigned by the OS */ -@media (prefers-color-scheme: dark) { - #messages-panel::before { - background-image: url("../img/bg_messages_dk.png"); - } -} - -/* Explicitly set dark mode */ -#messages-panel[color-scheme="dark"]::before { - background-image: url("../img/bg_messages_dk.png"); -} - #write-only-background { position: absolute; top: 0; diff --git a/css/base.min.css b/css/base.min.css index 83799dd5..a78a3499 100644 --- a/css/base.min.css +++ b/css/base.min.css @@ -1 +1 @@ -:root{color-scheme:light dark;--message-text-size:10pt;--caption-panel-height:4rem;--wallpaper-url:url(../img/bkg/a00.png);--wallpaper-repeat:repeat;--wallpaper-blur:0px;--wallpaper-invert:0;--wallpaper-size:contain;--wallpaper-position:center;--clr-bright:light-dark(#fff,#181818);--clr-dark:light-dark(#000,#fff);--clr-transparent:transparent;--clr-std-gray:grey;--clr-std-ltgray:light-dark(silver,#3f3f3f);--clr-std-teal:teal;--clr-std-grey:grey;--clr-std-orange:orange;--clr-primary-accent:light-dark(#2094f3,#0e6dba);--clr-primary-accent-hover:light-dark(#0a6ebd,#116ab4);--clr-primary-accent-focus-shadow:light-dark(rgba(33,150,243,.25),rgba(3,7,12,.25));--clr-primary-accent-transparent-medium:light-dark(rgba(33,150,243,.3),rgba(20,70,120,.3));--clr-primary-action:light-dark(#1e89e6,#1571c1);--clr-primary-action-hover:light-dark(#2962ff,#0037b8);--clr-secondary-accent:light-dark(#0097a8,#006570);--clr-primary-light-blue:light-dark(#bcdefb,#78a0be);--clr-light-blue-accent:light-dark(#0398e2,#0379b5);--clr-body-background:var(--clr-std-ltgray);--clr-text-primary:light-dark(#666,#999);--clr-text-secondary:light-dark(#757575,#8a8a8a);--clr-text-tertiary:light-dark(#999,#787878);--clr-text-tertiary-activated:#888;--clr-text-placeholder:light-dark(#bbb,#555);--clr-text-disabled:light-dark(#888,#777);--clr-border-light:light-dark(#ccc,#555);--clr-border-muted:light-dark(#ddd,#444);--clr-background-off-white:light-dark(#fafafa,#222);--clr-background-light-gray:light-dark(#f0f0f0,#0f0f0f);--clr-background-extra-light-gray:light-dark(#eee,#222);--clr-background-blue-gray-50:light-dark(#edf0f2,#202c33);--clr-background-blue-gray-75:light-dark(#e1e8eb,#182124);--clr-background-blue-gray-100:light-dark(#cfd8dc,#20272a);--clr-background-blue-gray-300:light-dark(#b0bec5,#354146);--clr-blue-wash-light:light-dark(#f0f0ff,#22222d);--clr-blue-wash-medium:light-dark(#d8e8ff,#123550);--clr-primary-wash:light-dark(#e3f2fd,#072f45);--clr-indigo-50:light-dark(#e8eaf6,#1a2c44);--clr-danger-text:light-dark(#d33131,#931f1f);--clr-danger-text-hover:light-dark(#f44034,#c10);--clr-error-text-muted:light-dark(#c66,#933);--clr-error-bg-light:light-dark(#ffccd1,#ff6675);--clr-error-border-light:light-dark(#ffbdc6,#ff334e);--clr-error-text-dark:light-dark(#b51c1c,#de2323);--clr-error-icon:light-dark(#ef5552,#d81b0e);--clr-warning-accent:light-dark(#ffc107,#808020);--clr-warning-bg-light:light-dark(#fff9c4,#00060c);--clr-warning-border-light:light-dark(#fff59d,#000a2b);--clr-warning-text-dark:light-dark(#6d4c41,#a08356);--clr-warning-icon:light-dark(#fbc02d,#b48204);--clr-info-bg-light:light-dark(#e1f5fe,#010a0e);--clr-info-border-light:light-dark(#b3e5fc,#001824);--clr-info-text-dark:light-dark(#0288d1,#00151f);--clr-header-stripe-bg:light-dark(#3949ab,#12152f);--clr-scrollbar-thumb:light-dark(rgba(0,0,0,.3),hsla(0,0%,100%,.3));--clr-scrollbar-track:light-dark(hsla(0,0%,100%,.1),rgba(0,0,0,.1));--clr-menu-item-hover-bg:light-dark(#f5f5f5,#0a0a0a);--clr-alert-overlay-bg:light-dark(hsla(0,0%,94%,.85),hsla(0,0%,6%,.85));--clr-verified-accent:light-dark(#02a6f2,#027db6);--clr-staff-accent:light-dark(#689f38,#598830);--clr-badge-inv:light-dark(#fffd,#cccd);--clr-cyan-50:light-dark(#e0f7fa,#2f3e43);--clr-overlay-white-strong:light-dark(hsla(0,0%,100%,.9),rgba(0,0,0,.9));--clr-gray-medium-bg:light-dark(#777,#444);--clr-toast-bg:#333;--clr-toast-text:light-dark(#eee,#aaa);--clr-online:#4caf50;--clr-offline:light-dark(#ccc,#999);--clr-shadow-input-underline:rgba(0,0,0,.1);--clr-shadow-hr-inset:rgba(0,0,0,.15);--clr-shadow-scrollbar-track-webkit:rgba(0,0,0,.2);--clr-shadow-button:rgba(0,0,0,.25);--clr-shadow-button-inset-active:rgba(0,0,0,.125);--clr-shadow-dialog:rgba(0,0,0,.45);--clr-shadow-panel-divider:rgba(0,0,0,.1);--clr-shadow-gray-strong:light-dark(var(--clr-std-gray),#333);--clr-shadow-silver-subtle:light-dark(var(--clr-std-ltgray),#333);--clr-shadow-bubble-drop:rgba(0,0,0,.3);--clr-button-primary-bg:var(--clr-primary-action);--clr-button-primary-text:var(--clr-bright);--clr-button-primary-hover-bg:var(--clr-primary-action-hover);--clr-button-secondary-bg:var(--clr-bright);--clr-button-secondary-text:var(--clr-primary-accent);--clr-button-secondary-hover-bg:var(--clr-primary-wash);--clr-button-outline-text:var(--clr-primary-accent);--clr-button-outline-border:var(--clr-std-ltgray);--clr-button-outline-hover-bg:var(--clr-indigo-50);--clr-button-danger-bg:light-dark(#ec645f,#d74742);--clr-button-danger-text:var(--clr-bright);--clr-button-danger-hover-bg:light-dark(#f77,#a55);--clr-button-positive-bg:light-dark(#71c46f,#0d1e0d);--clr-button-positive-text:var(--clr-bright);--clr-button-positive-hover-bg:light-dark(#7fed7f,#0a120a);--clr-input-text:var(--clr-text-primary);--clr-input-border:var(--clr-border-light);--clr-input-border-focus:var(--clr-primary-accent);--clr-input-shadow:var(--clr-shadow-input-underline);--clr-input-shadow-focus:var(--clr-primary-accent-focus-shadow);--clr-input-invalid-border:light-dark(#e57171,#561010);--clr-input-invalid-shadow:light-dark(hsla(0,69%,67%,.25),rgba(26,12,12,.25));--clr-input-placeholder-text:var(--clr-text-placeholder);--clr-bubble-left-bg:light-dark(#c4e0a3,#3e5c1f);--clr-bubble-left-bg-flash:light-dark(#94a97c,#2c4517);--clr-bubble-right-bg:var(--clr-background-off-white);--clr-bubble-right-bg-flash:var(--clr-border-light);--clr-bubble-text:light-dark(#212121,#bbc);--clr-bubble-meta-text:var(--clr-text-primary);--clr-bubble-meta-deleted-bg:var(--clr-primary-wash);--clr-bubble-meta-date-bg:light-dark(hsla(0,0%,100%,.8),rgba(40,40,40,.8));--clr-bubble-timestamp-text:light-dark(#777,#888);--clr-bubble-author-text:light-dark(#777,#666);--clr-reply-quote-border:var(--clr-light-blue-accent);--clr-reply-quote-text:var(--clr-text-primary);--clr-reply-quote-left-bg:light-dark(hsla(0,0%,100%,.4),rgba(0,0,0,.4));--clr-reply-quote-right-bg:light-dark(#8080801f,#c4c4c42e);--clr-reply-quote-preview-bg:var(--clr-background-off-white);--clr-badge-default-bg:light-dark(#e8e8e8,#171717);--clr-badge-default-text:var(--clr-text-primary);--clr-badge-default-border:var(--clr-std-ltgray);--clr-badge-green-bg:light-dark(#efe,#131);--clr-badge-green-text:light-dark(#383,#363);--clr-badge-green-border:light-dark(#aca,#242);--clr-badge-yellow-bg:light-dark(#ffe,#331);--clr-badge-yellow-text:light-dark(#660,#660);--clr-badge-yellow-border:light-dark(#cc9,#552);--clr-badge-blue-bg:light-dark(#f0f0ff,#224);--clr-badge-blue-text:light-dark(#339,#447);--clr-badge-blue-border:light-dark(#aad,#336);--clr-badge-red-bg:light-dark(#fee,#522);--clr-badge-red-text:light-dark(#933,#744);--clr-badge-red-border:light-dark(#c99,#633);--clr-badge-magenta-bg:light-dark(#fef,#535);--clr-badge-magenta-text:light-dark(#939,#747);--clr-badge-magenta-border:light-dark(#c9c,#636);--clr-chip-bg:var(--clr-background-extra-light-gray);--clr-chip-invalid-text:var(--clr-error-text-muted);--clr-chip-invalid-bg:var(--clr-badge-red-bg);--clr-chip-remove-icon-bg:light-dark(#aaa,#555);--clr-chip-remove-icon-text:var(--clr-background-extra-light-gray);--clr-chip-remove-icon-hover-bg:var(--clr-text-placeholder);--clr-chip-remove-icon-hover-text:var(--clr-bright);--clr-tabbar-bg:var(--clr-background-extra-light-gray);--clr-tabbar-inactive-text:light-dark(rgba(33,150,243,.6),#165aa0);--clr-tabbar-active-text:var(--clr-primary-accent);--clr-tabbar-inactive-border:var(--clr-border-light);--clr-tabbar-active-border:var(--clr-primary-accent);--clr-highlight-text:var(--clr-std-teal);--clr-highlight-preview-text:light-dark(#5f9ea0,#205e60);--clr-spinner-track:light-dark(#f3f3f3,#0c0c0c);--clr-spinner-active:var(--clr-primary-action);--clr-cropper-bounding-box-border:var(--clr-primary-action);--clr-cropper-bounding-box-bg:var(--clr-text-tertiary);--clr-cropper-cutout-border:var(--clr-text-tertiary);--clr-cropper-cutout-shadow:light-dark(rgba(230,246,255,.66),rgba(25,10,0,.66));--clr-audio-bg:var(--clr-background-extra-light-gray);--clr-audio-icon:light-dark(hsla(180,7%,43%,.8),hsla(0,7%,57%,.8));--clr-audio-icon-disabled:light-dark(hsla(0,0%,60%,.75),hsla(0,0%,40%,.75));--clr-audio-timer-text:light-dark(hsla(0,0%,40%,.75),hsla(0,0%,60%,.75));--clr-pinned-menu-bg:light-dark(#f8f8f8,#1a1a1a);--clr-drag-n-drop-border:var(--clr-std-grey);--clr-drag-n-drop-text:var(--clr-std-grey);--clr-drag-n-drop-bg:light-dark(hsla(0,0%,100%,.95),rgba(0,0,0,.95));--clr-drag-n-drop-outline:light-dark(hsla(0,0%,100%,.95),rgba(0,0,0,.95));--clr-lettertile-default-text:light-dark(#fafafacc,#dcdcdccc);--clr-lettertile-hover-text:var(--clr-bright);--clr-lt-bg-0:#ef9a9a;--clr-lt-bg-1:#90caf9;--clr-lt-bg-2:#b0bec4;--clr-lt-bg-3:#b49edb;--clr-lt-bg-4:#ffa98f;--clr-lt-bg-5:#a4d5a6;--clr-lt-bg-6:#ededed;--clr-lt-bg-7:#e6ee9b;--clr-lt-bg-8:#c4e0a3;--clr-lt-bg-9:#f0e57f;--clr-lt-bg-10:#f490b1;--clr-lt-bg-11:#a0a8da;--clr-lt-bg-12:#ffdf80;--clr-lt-bg-13:#bcaaa4;--clr-lt-bg-14:#80deea;--clr-lt-bg-15:#cd92d8;--clr-dk-bg-0:#c72929;--clr-dk-bg-1:#ad1457;--clr-dk-bg-2:#681b98;--clr-dk-bg-3:#4527a0;--clr-dk-bg-4:#293594;--clr-dk-bg-5:#1565c1;--clr-dk-bg-6:#0277bb;--clr-dk-bg-7:#00838f;--clr-dk-bg-8:#006b5f;--clr-dk-bg-9:#2f7f33;--clr-dk-bg-10:#54892f;--clr-dk-bg-11:#9e9e24;--clr-dk-bg-12:#f9a824;--clr-dk-bg-13:#ff9100;--clr-dk-bg-14:#f06c00;--clr-dk-bg-15:#d54215;--clr-lt-fg-0:var(--clr-lt-bg-0);--clr-lt-fg-1:var(--clr-lt-bg-1);--clr-lt-fg-2:var(--clr-lt-bg-2);--clr-lt-fg-3:var(--clr-lt-bg-3);--clr-lt-fg-4:var(--clr-lt-bg-4);--clr-lt-fg-5:var(--clr-lt-bg-5);--clr-lt-fg-6:var(--clr-lt-bg-6);--clr-lt-fg-7:var(--clr-lt-bg-7);--clr-lt-fg-8:var(--clr-lt-bg-8);--clr-lt-fg-9:var(--clr-lt-bg-9);--clr-lt-fg-10:var(--clr-lt-bg-10);--clr-lt-fg-11:var(--clr-lt-bg-11);--clr-lt-fg-12:var(--clr-lt-bg-12);--clr-lt-fg-13:var(--clr-lt-bg-13);--clr-lt-fg-14:var(--clr-lt-bg-14);--clr-lt-fg-15:var(--clr-lt-bg-15);--clr-dk-fg-0:var(--clr-dk-bg-0);--clr-dk-fg-1:var(--clr-dk-bg-1);--clr-dk-fg-2:var(--clr-dk-bg-2);--clr-dk-fg-3:var(--clr-dk-bg-3);--clr-dk-fg-4:var(--clr-dk-bg-4);--clr-dk-fg-5:var(--clr-dk-bg-5);--clr-dk-fg-6:var(--clr-dk-bg-6);--clr-dk-fg-7:var(--clr-dk-bg-7);--clr-dk-fg-8:var(--clr-dk-bg-8);--clr-dk-fg-9:var(--clr-dk-bg-9);--clr-dk-fg-10:var(--clr-dk-bg-10);--clr-dk-fg-11:var(--clr-dk-bg-11);--clr-dk-fg-12:var(--clr-dk-bg-12);--clr-dk-fg-13:var(--clr-dk-bg-13);--clr-dk-fg-14:var(--clr-dk-bg-14);--clr-dk-fg-15:var(--clr-dk-bg-15)}*{box-sizing:border-box;font-family:Roboto,Arial,sans-serif;margin:0;padding:0;scrollbar-color:var(--clr-scrollbar-thumb) var(--clr-scrollbar-track);scrollbar-width:thin;text-rendering:optimizeLegibility}body,html{background-color:var(--clr-body-background);box-shadow:inset 0 10rem var(--clr-header-stripe-bg);color:var(--clr-text-primary);font-size:10pt;height:100%;overflow:hidden;width:100%}tt{font-family:Roboto Mono,Courier,monospace}a{color:var(--clr-primary-accent);text-decoration:none}a:focus,a:hover{color:var(--clr-primary-accent-hover);text-decoration:underline}a.danger{color:var(--clr-danger-text)}a.danger:focus,a.danger:hover{color:var(--clr-danger-text-hover)}a.gray:focus,a.gray:hover{color:var(--clr-text-tertiary)}form{line-height:1.5;padding:.5rem .75rem}form,label{font-size:1.1rem}label{margin-right:auto}label.small{font-size:.95rem}label.large,label.small{color:var(--clr-primary-action)}label.large{font-size:1.1rem}label.invalid{color:var(--clr-danger-text)}img.avatar{border-radius:50%;height:100%;width:100%}img.avatar.self{padding:7%}button{border:1px solid var(--clr-transparent);border-radius:4px;box-shadow:0 1px 3px 0 var(--clr-shadow-button);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 var(--clr-shadow-button);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 var(--clr-shadow-button);height:2rem;line-height:2rem;width:2rem}button:active:not([disabled]),button:hover:not([disabled]){color:var(--clr-bright)}button:active{box-shadow:inset 0 3px .5rem var(--clr-shadow-button-inset-active)}button:active.round.small{box-shadow:inset 0 2px .35rem var(--clr-shadow-button-inset-active)}button.primary{background-color:var(--clr-button-primary-bg);color:var(--clr-button-primary-text)}button.primary:active:not([disabled]),button.primary:hover:not([disabled]){background-color:var(--clr-button-primary-hover-bg)}button.secondary{background-color:var(--clr-button-secondary-bg);color:var(--clr-button-secondary-text)}button.secondary:active:not([disabled]),button.secondary:hover:not([disabled]){background-color:var(--clr-button-secondary-hover-bg)}button.outline{background-color:var(--clr-transparent);border:1px solid var(--clr-button-outline-border);box-shadow:none;color:var(--clr-button-outline-text)}button.outline:active:not([disabled]),button.outline:hover:not([disabled]){background-color:var(--clr-button-outline-hover-bg);color:var(--clr-button-outline-text)}button.danger{background-color:var(--clr-button-danger-bg);color:var(--clr-button-danger-text)}button.danger:active:not([disabled]),button.danger:hover:not([disabled]){background-color:var(--clr-button-danger-hover-bg)}button.positive{background-color:var(--clr-button-positive-bg);color:var(--clr-button-positive-text)}button.positive:active:not([disabled]),button.positive:hover:not([disabled]){background-color:var(--clr-button-positive-hover-bg)}input,textarea{background:var(--clr-transparent);border:none;color:var(--clr-input-text);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=tel],input[type=text],textarea{border-bottom:1px solid var(--clr-input-border);box-shadow:0 1px 0 var(--clr-input-shadow);height:2.5rem;transition:all .1s ease-in-out,height 0s}input[type=email],input[type=password],input[type=tel],input[type=text],textarea{width:100%}input[type=email]:focus,input[type=password]:focus,input[type=search]:focus,input[type=tel]:focus,input[type=text]:focus,textarea:focus{border-bottom:1px solid var(--clr-input-border-focus);box-shadow:0 1px 0 var(--clr-input-shadow-focus)}input[type=email].invalid,input[type=password].invalid,input[type=search].invalid,input[type=tel].invalid,input[type=text].invalid,textarea.invalid{border-bottom:1px solid var(--clr-input-invalid-border);box-shadow:0 1px 0 var(--clr-input-invalid-shadow)}input[type=email]::placeholder,input[type=password]::placeholder,input[type=search]::placeholder,input[type=tel]::placeholder,input[type=text]::placeholder,textarea::placeholder{color:var(--clr-input-placeholder-text);font-weight:lighter}input[type=password].with-icon-right,input[type=text].with-icon-right{margin-right:-2rem;padding-right:2rem}input[type=password].with-icon-left,input[type=text].with-icon-left{margin-left:-1.45rem;padding-left:1.75rem}textarea{padding-top:.45rem;resize:none}input[type=range]{width:90%}option{padding:0}datalist{display:flex;flex-direction:row;justify-content:space-between;width:100%}::-webkit-scrollbar{width:.6rem}::-webkit-scrollbar-track{background-color:var(--clr-scrollbar-track);-webkit-box-shadow:inset 0 0 6px var(--clr-shadow-scrollbar-track-webkit);box-shadow:inset 0 0 6px var(--clr-shadow-scrollbar-track-webkit)}::-webkit-scrollbar-thumb{background-color:var(--clr-scrollbar-thumb)}ul.menu{background-color:var(--clr-bright);border-radius:.2rem;box-shadow:0 1px 6px var(--clr-shadow-dialog);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:var(--clr-menu-item-hover-bg)}ul.menu>li.separator{height:1px;margin:2px;padding:0}ul.menu>li.separator,ul.menu>li.separator:hover{background-color:var(--clr-border-light)}ul.menu>li.disabled{opacity:.6;pointer-events:none}.menuTrigger{background-color:inherit;border-radius:.7rem;height:1.4rem;line-height:1.4rem;opacity:0;position:absolute;right:.25rem;text-align:center;user-select:none;width:1.4rem}.menuTrigger a{color:var(--clr-text-secondary)}li .menuTrigger{top:.25rem}li:hover .menuTrigger{opacity:.9}li:hover .menuTrigger a{color:var(--clr-text-secondary)}div.alert-container{align-items:center;background:var(--clr-alert-overlay-bg);display:flex;height:100%;justify-content:center;overflow:hidden;padding:1rem;position:absolute;width:100%;z-index:3}div.alert{background-color:var(--clr-bright);border-radius:.3rem;box-shadow:.15rem .15rem 1.5rem var(--clr-shadow-dialog);height:min-content;margin:auto 2rem;max-height:40rem;max-width:24rem;min-width:16rem;overflow:hidden;padding:1rem;position:relative;width:fit-content}div.alert-container .title{color:var(--clr-primary-accent);font-size:1.2rem;font-weight:500;padding:0 0 .35rem;position:relative;width:100%}div.alert-container .title.with-control{align-items:center;display:flex;flex:none;justify-content:space-between;padding:.5rem .5rem 0;position:relative}div.alert-container .content{padding:.5rem 0;position:relative}div.trusted-badge{margin:.25rem 0}.blue{color:var(--clr-primary-accent)!important}.lt-blue{color:var(--clr-lt-fg-1)!important}.orange{color:var(--clr-std-orange)!important}.verified-color{color:var(--clr-verified-accent)!important}.staff-color{color:var(--clr-staff-accent)!important}.danger-color{color:var(--clr-warning-accent)!important}.green{color:light-dark(#388e3c,#1a9a1d)}.white{color:var(--clr-bright)!important}.red{color:var(--clr-danger-text)!important}.badge-inv{color:var(--clr-badge-inv)!important}.gray{color:var(--clr-text-secondary)!important}.light-gray{color:var(--clr-text-placeholder)!important}.large{font-size:120%}.small{font-size:90%}.float-right{position:absolute;right:.5rem}.hr{background-color:var(--clr-background-light-gray);box-shadow:inset 0 .25rem .25rem -.25rem var(--clr-shadow-hr-inset),inset 0 -.25rem .25rem -.25rem var(--clr-shadow-hr-inset);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:var(--clr-bright);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:var(--clr-background-extra-light-gray);border:1px solid var(--clr-text-tertiary);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:var(--clr-background-off-white);border-radius:50%;box-shadow:0 2px .5rem 0 var(--clr-shadow-button);color:var(--clr-text-secondary);display:block;font-size:1.8rem;height:3.25rem;margin:0;min-height:unset;min-width:unset;outline:none;padding:0;position:absolute;transition:all .15s;width:3.25rem;z-index:2}.action-button:focus,.action-button:hover{background-color:var(--clr-background-light-gray);color:var(--clr-text-tertiary-activated)}.action-button:active{background-color:var(--clr-background-extra-light-gray);color:var(--clr-text-tertiary-activated)}.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:var(--clr-bright);border-radius:.25rem;box-shadow:1px 2px .3rem var(--clr-shadow-gray-strong);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:var(--clr-primary-accent);color:var(--clr-primary-light-blue);font-size:120%;font-weight:bolder;padding:1rem}#noscript-content{padding:1rem}#app-container{background-color:var(--clr-bright);border-radius:.25rem;box-shadow:1px 2px .3rem var(--clr-shadow-gray-strong);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;position:relative;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:var(--clr-background-off-white);border-radius:.1rem;margin:.25rem;padding:.25rem;position:relative}div.in-place-edit,span.in-place-edit{border-bottom:1px dashed var(--clr-border-muted);cursor:pointer;display:inline-block;font-family:inherit;font-size:1rem;margin:.25rem .125rem 0;vertical-align:baseline;width:100%}.in-place-edit.short{align-items:center;display:inline-flex;font-size:1.1rem;height:2.5rem;line-height:2.25;white-space:nowrap}.in-place-edit.disabled{border-bottom:none;color:var(--clr-text-disabled);cursor:default}.in-place-edit.placeholder{color:var(--clr-text-placeholder)}.in-place-edit span{display:inline-block}.in-place-edit.short span{overflow-x:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.in-place-edit .material-icons{display:inline-block}.material-icons.invalid{color:var(--clr-error-text-muted)}textarea.in-place-edit{font-size:unset;height:unset}input.in-place-edit.invalid{color:var(--clr-error-text-muted)}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:var(--clr-text-tertiary);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 var(--clr-border-muted)}.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{box-shadow:0 1px 2px var(--clr-shadow-gray-strong);flex:none;height:var(--caption-panel-height);overflow-x:hidden;white-space:nowrap;z-index:1}.caption-panel,.dialog-buttons{align-items:center;display:flex;padding:.5rem}.dialog-buttons{justify-content:flex-end}.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:var(--clr-blue-wash-light);color:var(--clr-primary-accent);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:var(--clr-primary-wash);color:var(--clr-dk-fg-5);outline:0}#side-caption-panel{background-color:var(--clr-primary-accent);color:var(--clr-primary-light-blue)}#side-caption-panel a{color:var(--clr-primary-light-blue);line-height:1;padding-left:.5rem}#side-caption-panel :hover{color:var(--clr-bright)}#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:var(--clr-error-bg-light);border-bottom:1px solid var(--clr-error-border-light);color:var(--clr-error-text-dark);display:flex}.info-box.warning{background-color:var(--clr-warning-bg-light);border-bottom:1px solid var(--clr-warning-border-light);color:var(--clr-warning-text-dark);display:flex}.info-box.info{background-color:var(--clr-info-bg-light);border-bottom:1px solid var(--clr-info-border-light);color:var(--clr-info-text-dark);display:flex}.info-box .cancel .material-icons{color:var(--clr-text-secondary);font-size:1rem}.info-box.error .cancel .material-icons{color:var(--clr-error-text-dark)}.info-box .icon{display:block;margin-right:.5rem}.info-box .icon .material-icons{font-size:1.5rem}.info-box.warning .icon .material-icons{color:var(--clr-warning-icon)}.info-box.error .icon .material-icons{color:var(--clr-error-icon)}.info-box.info .icon .material-icons{color:var(--clr-info-text-dark)}.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(to right,var(--clr-transparent) 3.5rem,var(--clr-background-extra-light-gray) 1px,var(--clr-background-extra-light-gray) 100%) 0 100% /100% 1px no-repeat,var(--clr-bright);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:var(--clr-bright)}.contact-box>li:hover{background-color:var(--clr-background-blue-gray-50)}.contact-box>li.selected{background-color:var(--clr-background-blue-gray-100)}.contact-box>li.tpinned{background-color:var(--clr-background-blue-gray-75);border-right:1px solid var(--clr-secondary-accent)}.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:light-dark(#777,#666);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:var(--clr-online)}.avatar-box .offline{background-color:var(--clr-offline)}.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 var(--clr-transparent);color:var(--clr-secondary-accent);overflow:visible;padding-left:.5px}.contact-box .checkmark.material-icons,.contact-box .deleted.material-icons{background-color:var(--clr-bright);bottom:0;font-size:1.5rem;height:1.5rem;position:absolute;right:0;width:1.5rem}.contact-box .deleted.material-icons{color:var(--clr-text-tertiary)}#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:clip}.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;margin:.25rem;padding:0;position:relative;width:10rem}.avatar-upload.read-only{height:auto}.avatar-upload .clear-avatar{background-image:radial-gradient(var(--clr-bright) 40%,var(--clr-transparent) 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 var(--clr-text-tertiary);color:var(--clr-text-tertiary);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:var(--clr-text-primary);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:var(--clr-background-off-white);border-radius:50%;bottom:0;box-shadow:0 1px 4px var(--clr-shadow-dialog);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:var(--clr-primary-wash);color:var(--clr-primary-accent)}#topic-caption-panel{background-color:var(--clr-background-blue-gray-300)}#topic-caption-panel a{color:var(--clr-text-secondary);text-decoration:none}#topic-caption-panel :hover{color:var(--clr-dark)}#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;width:min-content}#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}.qr-code{align-self:center}#messages-container{height:100%;overflow-y:hidden;position:relative}#messages-container:before{background-color:var(--clr-background-blue-gray-50);background-image:var(--wallpaper-url);background-position:var(--wallpaper-position);background-repeat:var(--wallpaper-repeat);background-size:var(--wallpaper-size);content:"";filter:blur(var(--wallpaper-blur)) invert(var(--wallpaper-invert));height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%;z-index:0}#messages-panel{height:100%;overflow-y:scroll;padding:.75rem;position:relative}@media (prefers-color-scheme:dark){#messages-panel:before{background-image:url(../img/bg_messages_dk.png)}}#messages-panel[color-scheme=dark]:before{background-image:url(../img/bg_messages_dk.png)}#write-only-background{background-image:repeating-linear-gradient(45deg,hsla(0,0%,100%,.5),hsla(0,0%,100%,.5) .5rem,hsla(0,0%,100%,.8) 0,hsla(0,0%,100%,.8) 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:var(--clr-bright);border-radius:.5rem;box-shadow:0 1px .5px var(--clr-shadow-button-inset-active);color:var(--clr-text-primary);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:var(--clr-background-blue-gray-50);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:var(--clr-background-blue-gray-50);box-shadow:0 -2px 3px -1px var(--clr-shadow-panel-divider);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:var(--clr-text-tertiary)!important}#send-message-panel .material-icons.secondary:hover{color:var(--clr-primary-accent)!important}#send-message-input{max-height:6rem;min-height:2.5rem;overflow:hidden auto}.accept-invite-panel{background-color:var(--clr-background-blue-gray-50);box-shadow:0 -2px 3px -1px var(--clr-shadow-panel-divider);width:100%;z-index:1}.accept-invite-panel .title{font-size:1.2rem;padding:.75rem}.accept-invite-panel .footer{background-color:var(--clr-background-off-white);padding-bottom:.35rem;text-align:center;white-space:nowrap}.accept-invite-panel button{border:1px solid var(--clr-transparent);box-shadow:0 1px 2px 0 var(--clr-shadow-button);font-size:1rem;height:2em;line-height:2em;margin:.25rem}#dummy-view{align-items:center;background-color:var(--clr-cyan-50);display:flex;height:100%;justify-content:center;width:100%}#dummy-view a{display:block;text-align:center;text-decoration:none}#image-preview{background-color:var(--clr-overlay-white-strong);display:flex;flex-direction:column;height:100%;left:0;position:absolute;top:0;width:100%;z-index:2}#image-preview-caption-panel{background-color:var(--clr-background-blue-gray-50);box-shadow:0 1px 2px var(--clr-shadow-silver-subtle);display:flex;flex-grow:0;flex-shrink:0;height:var(--caption-panel-height);justify-content:space-between;line-height:2rem;padding:1rem .75rem 0;z-index:3}#image-preview-caption-panel a{color:var(--clr-text-secondary);text-decoration:none}#image-preview-caption-panel a:hover{color:var(--clr-dark)}#image-preview-container{align-items:center;background-color:var(--clr-gray-medium-bg);display:flex;height:100%;justify-content:space-around;overflow:hidden;width:100%}#image-preview-footer{background-color:var(--clr-background-blue-gray-50);box-shadow:0 -2px 3px -1px var(--clr-shadow-panel-divider);display:flex;flex-grow:0;flex-shrink:0;height:3.2rem;justify-content:space-around;line-height:1.5rem;z-index:1}#image-preview-container .material-icons{font-size:6rem}#image-preview-container .doc-card{background-color:var(--clr-std-ltgray);border-radius:.5rem;display:flex;flex-direction:column;overflow-x:hidden;padding:1rem}#video-container{background-color:var(--clr-overlay-white-strong);display:flex;flex-direction:column;height:100%;justify-content:space-between;left:0;position:absolute;top:0;width:100%}#video-container.minimized{background-color:unset;border-radius:.5rem;box-shadow:.15rem .15rem 1.5rem var(--clr-shadow-dialog);cursor:grab;height:18rem;left:auto;right:1rem;top:1rem;user-select:none;width:18rem}#controls{align-items:center;align-self:center;bottom:2.5rem;column-gap:1rem;display:flex;justify-content:center;position:absolute;z-index:1}#controls.minimized{bottom:1.75rem;column-gap:.5rem}.incoming-call #controls{bottom:1rem}#controls button{align-items:center;border-radius:50%;box-shadow:0 3px 6px 0 var(--clr-shadow-button);display:flex;height:4rem;justify-content:center;min-width:auto;position:relative;width:4rem}#controls.minimized button{box-shadow:0 2px 4px 0 var(--clr-shadow-button);height:2.75rem;width:2.75rem}#controls button .material-icons{font-size:1.8rem}#controls.minimized button .material-icons{font-size:1.4rem}button.full-screen{background-color:transparent;border-radius:.5rem;box-shadow:none;height:2.5rem;left:2rem;min-width:unset;padding:0;position:absolute;top:2rem;width:2.5rem;z-index:1}.minimized button.full-screen{height:2rem;left:1rem;top:1rem;width:2rem}button.full-screen:hover:not([disabled]),button:active:not([disabled]){color:var(--clr-text-secondary)}button.full-screen .material-icons{font-size:x-large}.minimized button.full-screen .material-icons{font-size:large}#video-container-panel{height:100%;position:relative;width:100%}.call-party{background-color:var(--clr-background-extra-light-gray);border:2px solid var(--clr-border-light);border-radius:.5rem;overflow:hidden}.call-party:hover{border-color:var(--clr-primary-accent)}.minimized .call-party{border-width:1px}.call-party.peer{bottom:1rem;left:1rem;position:absolute;right:1rem;top:1rem;z-index:1}.minimized .call-party.peer{bottom:0;left:0;right:0;top:0}.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}.minimized .caller-card .avatar-box{font-size:3.6rem;height:6rem;width:6rem}.call-party .caller-name{background-color:var(--clr-background-off-white);border-radius:.35rem;max-width:12rem;overflow-x:hidden;padding:.15rem .5rem;text-overflow:ellipsis;text-shadow:0 0 1px var(--clr-bright);white-space:nowrap;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:1rem;margin:0 auto;position:absolute}.minimized .caller-name{border-radius:.25rem;font-weight:lighter;padding:.1rem .35rem}.incoming-call{background-color:var(--clr-bright);border-radius:.3rem;box-shadow:.15rem .15rem 1.5rem var(--clr-shadow-dialog);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:hsla(0,0%,100%,.7);border-radius:.35rem;padding:.15rem .5rem;text-shadow:0 0 1px var(--clr-bright);z-index:1}.call-message{display:flex;flex-direction:row}.call-message .duration{font-weight:lighter}#go-to-latest{bottom:1rem;right:1.5rem}@keyframes active-call{0%{box-shadow:0 0 0 .1rem var(--clr-primary-accent-transparent-medium),0 0 0 .3rem var(--clr-primary-accent-transparent-medium),0 0 0 .5rem var(--clr-primary-accent-transparent-medium)}to{box-shadow:0 0 0 .4rem var(--clr-primary-accent-transparent-medium),0 0 0 2rem rgba(33,150,243,0),0 0 0 3rem rgba(33,150,243,0)}}.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;color:var(--clr-bubble-text);display:flex;filter:drop-shadow(.5px .5px .7px var(--clr-shadow-bubble-drop));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:var(--clr-bubble-left-bg);margin-right:.5rem}.left.flash .bubble{background-color:var(--clr-bubble-left-bg-flash)}.left .bubble.tip{border-bottom-left-radius:0}.right .bubble{background-color:var(--clr-bubble-right-bg);margin-left:1.75rem}.right.flash .bubble{background-color:var(--clr-bubble-right-bg-flash)}.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:var(--clr-bubble-meta-text);min-width:unset}.meta .bubble.deleted{background-color:var(--clr-bubble-meta-deleted-bg);padding:.75rem .75rem .5rem}.meta .bubble.date{background-color:var(--clr-bubble-meta-date-bg);font-size:smaller;padding:.5rem;text-transform:uppercase;user-select:none}.left .bubble.tip:before{background-color:var(--clr-bubble-left-bg);border-bottom-left-radius:.3rem;bottom:0;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;transition:background-color .5s ease-out;transition-delay:.3s;width:.85rem}.left.flash .bubble.tip:before{background-color:var(--clr-bubble-left-bg-flash)}.right .bubble.tip:before{background-color:var(--clr-bubble-right-bg);border-bottom-right-radius:.3rem;bottom:0;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;transition:background-color .5s ease-out;transition-delay:.3s;width:.85rem}.right.flash .bubble.tip:before{background-color:var(--clr-bubble-right-bg-flash)}.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{font-size:var(--message-text-size);margin:0;max-width:36rem;overflow-wrap:anywhere;padding:0 .75rem;position:relative;width:100%}.bubble div.message-content.emoji-1{font-size:300%}.bubble div.message-content.emoji-2{font-size:241%}.bubble div.message-content.emoji-3{font-size:193%}.bubble div.message-content.emoji-4{font-size:155%}.bubble div.message-content.emoji-5{font-size:125%}.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{color:var(--clr-bubble-timestamp-text);float:right;font-size:80%;position:relative;top:.35rem;user-select:none;white-space:nowrap}.chat-box .author{color:var(--clr-bubble-author-text);font-size:80%;max-width:12em;overflow-x:hidden;text-overflow:ellipsis;white-space:nowrap}.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 var(--clr-transparent);border-right:.25rem solid var(--clr-transparent);bottom:2rem;margin:.25rem auto;position:relative}img.image-preview:before,img.inline-image:before{background:center no-repeat var(--clr-border-light) url(../img/broken_image.png);color:var(--clr-text-primary);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:center no-repeat var(--clr-border-light) 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:var(--clr-border-light)}.inline-video .duration{background-color:hsla(0,0%,100%,.5);border-radius:.3rem;bottom:.25rem;color:var(--clr-toast-bg);font-size:80%;left:.25rem;padding:.25rem .5rem;position:absolute}.inline-video .play-control{align-items:center;background-color:rgba(0,0,0,.4);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:var(--clr-background-blue-gray-300)}#info-caption-panel a{color:var(--clr-text-secondary);line-height:1;text-decoration:none}#info-caption-panel :hover{color:var(--clr-dark)}#info-title{margin-right:auto}#group-manager{display:flex;flex-direction:column;height:100%;overflow-y:hidden;position:relative}#group-manager-buttons{background-color:var(--clr-background-blue-gray-50);border-left:1px solid var(--clr-border-light);box-shadow:0 -1px var(--clr-shadow-panel-divider);display:flex;height:4rem;justify-content:space-around;padding:.4rem;z-index:2}ul.tabbar{background:var(--clr-tabbar-bg);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 var(--clr-shadow-button);height:2.4rem;position:relative}ul.tabbar li.active{background:var(--clr-bright)}ul.tabbar li:after{background:var(--clr-tabbar-inactive-border);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:var(--clr-tabbar-active-border);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:var(--clr-tabbar-inactive-text);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:var(--clr-tabbar-active-text)}.unread{background-color:var(--clr-secondary-accent);border-radius:50%;color:var(--clr-bright);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:var(--clr-chip-remove-icon-bg);font-size:1.15rem;padding-left:.2rem}.badge{align-self:flex-start;background-color:var(--clr-badge-default-bg);border:1px solid var(--clr-badge-default-border);border-radius:.2rem;color:var(--clr-badge-default-text);display:inline-block;font-family:Roboto Mono,Courier,monospace,sans-serif;font-size:.8rem;margin:.05rem .1rem;padding:.05rem .25rem}.badge.green{background-color:var(--clr-badge-green-bg);border-color:var(--clr-badge-green-border);color:var(--clr-badge-green-text)}.badge.yellow{background-color:var(--clr-badge-yellow-bg);border-color:var(--clr-badge-yellow-border);color:var(--clr-badge-yellow-text)}.badge.blue{background-color:var(--clr-badge-blue-bg);border-color:var(--clr-badge-blue-border);color:var(--clr-badge-blue-text)}.badge.red{background-color:var(--clr-badge-red-bg);border-color:var(--clr-badge-red-border);color:var(--clr-badge-red-text)}.badge.magenta{background-color:var(--clr-badge-magenta-bg);border-color:var(--clr-badge-magenta-border);color:var(--clr-badge-magenta-text)}.lettertile{border-radius:50%;padding-bottom:100%;user-select:none;width:100%}.lettertile>div{align-items:center;border-radius:50%;bottom:0;color:var(--clr-lettertile-default-text);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:var(--clr-lettertile-hover-text)}.lettertile.disabled{opacity:.5}.lt-bg-0{background-color:var(--clr-lt-bg-0)}.lt-bg-1{background-color:var(--clr-lt-bg-1)}.lt-bg-2{background-color:var(--clr-lt-bg-2)}.lt-bg-3{background-color:var(--clr-lt-bg-3)}.lt-bg-4{background-color:var(--clr-lt-bg-4)}.lt-bg-5{background-color:var(--clr-lt-bg-5)}.lt-bg-6{background-color:var(--clr-lt-bg-6)}.lt-bg-7{background-color:var(--clr-lt-bg-7)}.lt-bg-8{background-color:var(--clr-lt-bg-8)}.lt-bg-9{background-color:var(--clr-lt-bg-9)}.lt-bg-10{background-color:var(--clr-lt-bg-10)}.lt-bg-11{background-color:var(--clr-lt-bg-11)}.lt-bg-12{background-color:var(--clr-lt-bg-12)}.lt-bg-13{background-color:var(--clr-lt-bg-13)}.lt-bg-14{background-color:var(--clr-lt-bg-14)}.lt-bg-15{background-color:var(--clr-lt-bg-15)}.dk-bg-0{background-color:var(--clr-dk-bg-0)}.dk-bg-1{background-color:var(--clr-dk-bg-1)}.dk-bg-2{background-color:var(--clr-dk-bg-2)}.dk-bg-3{background-color:var(--clr-dk-bg-3)}.dk-bg-4{background-color:var(--clr-dk-bg-4)}.dk-bg-5{background-color:var(--clr-dk-bg-5)}.dk-bg-6{background-color:var(--clr-dk-bg-6)}.dk-bg-7{background-color:var(--clr-dk-bg-7)}.dk-bg-8{background-color:var(--clr-dk-bg-8)}.dk-bg-9{background-color:var(--clr-dk-bg-9)}.dk-bg-10{background-color:var(--clr-dk-bg-10)}.dk-bg-11{background-color:var(--clr-dk-bg-11)}.dk-bg-12{background-color:var(--clr-dk-bg-12)}.dk-bg-13{background-color:var(--clr-dk-bg-13)}.dk-bg-14{background-color:var(--clr-dk-bg-14)}.dk-bg-15{background-color:var(--clr-dk-bg-15)}.lt-fg-0{color:var(--clr-lt-fg-0)!important}.lt-fg-1{color:var(--clr-lt-fg-1)!important}.lt-fg-2{color:var(--clr-lt-fg-2)!important}.lt-fg-3{color:var(--clr-lt-fg-3)!important}.lt-fg-4{color:var(--clr-lt-fg-4)!important}.lt-fg-5{color:var(--clr-lt-fg-5)!important}.lt-fg-6{color:var(--clr-lt-fg-6)!important}.lt-fg-7{color:var(--clr-lt-fg-7)!important}.lt-fg-8{color:var(--clr-lt-fg-8)!important}.lt-fg-9{color:var(--clr-lt-fg-9)!important}.lt-fg-10{color:var(--clr-lt-fg-10)!important}.lt-fg-11{color:var(--clr-lt-fg-11)!important}.lt-fg-12{color:var(--clr-lt-fg-12)!important}.lt-fg-13{color:var(--clr-lt-fg-13)!important}.lt-fg-14{color:var(--clr-lt-fg-14)!important}.lt-fg-15{color:var(--clr-lt-fg-15)!important}.dk-fg-0{color:var(--clr-dk-fg-0)!important}.dk-fg-1{color:var(--clr-dk-fg-1)!important}.dk-fg-2{color:var(--clr-dk-fg-2)!important}.dk-fg-3{color:var(--clr-dk-fg-3)!important}.dk-fg-4{color:var(--clr-dk-fg-4)!important}.dk-fg-5{color:var(--clr-dk-fg-5)!important}.dk-fg-6{color:var(--clr-dk-fg-6)!important}.dk-fg-7{color:var(--clr-dk-fg-7)!important}.dk-fg-8{color:var(--clr-dk-fg-8)!important}.dk-fg-9{color:var(--clr-dk-fg-9)!important}.dk-fg-10{color:var(--clr-dk-fg-10)!important}.dk-fg-11{color:var(--clr-dk-fg-11)!important}.dk-fg-12{color:var(--clr-dk-fg-12)!important}.dk-fg-13{color:var(--clr-dk-fg-13)!important}.dk-fg-14{color:var(--clr-dk-fg-14)!important}.dk-fg-15{color:var(--clr-dk-fg-15)!important}.material-icons{font-size:1.4rem;line-height:1;text-align:center;user-select:none;vertical-align:middle}.material-icons.small{font-size:1rem}.material-icons.medium{font-size:1.2rem}.material-icons.large{font-size:1.6rem}.material-icons.big{font-size:2.2rem}.material-icons.x-big{font-size:3rem}.material-icons.huge{font-size:4rem}.composed-material{display:inline-block;position:relative}.composed-material .second{font-size:85%;font-weight:700;left:39%;position:absolute;top:7%}.composed-material .second-small{font-size:62%;font-weight:700;left:30%;position:absolute;top:14%}.material-icons.outline{position:relative;text-shadow:-1px 1px var(--clr-bright),1px 1px var(--clr-bright),1px -1px var(--clr-bright),-1px -1px var(--clr-bright)}#self-avatar .material-icons{font-size:2.4rem;line-height:3rem}.avatar-box .material-icons{border-radius:50%;color:var(--clr-lettertile-default-text);height:inherit;width:inherit}.chip-input{align-items:center;background:var(--clr-transparent);border-bottom:1px solid var(--clr-input-border);box-shadow:0 1px 0 var(--clr-input-shadow);color:var(--clr-input-text);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 var(--clr-input-border-focus);box-shadow:0 1px 0 var(--clr-input-shadow-focus)}.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:var(--clr-chip-bg);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:var(--clr-chip-invalid-bg);color:var(--clr-chip-invalid-text)}.chip>a{background-color:var(--clr-chip-remove-icon-bg);border-radius:50%;color:var(--clr-chip-remove-icon-text);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:var(--clr-chip-remove-icon-hover-bg);color:var(--clr-chip-remove-icon-hover-text);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:var(--clr-bright);border-radius:50%;box-shadow:.1rem .1rem .15rem 1px var(--clr-shadow-button);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:hsla(0,0%,100%,.5);box-shadow:.1rem .1rem .15rem 1px var(--clr-shadow-button-inset-active)}.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-radius:50%;border-top:.35rem solid var(--clr-spinner-track);border:.35rem solid var(--clr-spinner-track);border-top-color:var(--clr-spinner-active);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:var(--clr-background-blue-gray-100);border-radius:.1rem;height:.6rem;line-height:0;margin:.35rem;padding:.15rem;position:relative;width:6rem}.uploader>div>span{background-color:var(--clr-primary-action);border-radius:.08rem;display:inline-block;height:.3rem}.highlight{color:var(--clr-highlight-text);font-weight:bolder}.highlight .preview{color:var(--clr-highlight-preview-text);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:var(--clr-cropper-bounding-box-bg);border:2px solid var(--clr-cropper-bounding-box-border);box-shadow:1px 1px 3px var(--clr-shadow-cropper-gray);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 var(--clr-cropper-cutout-border);bottom:0;box-shadow:0 0 150rem 150rem var(--clr-cropper-cutout-shadow);height:17.8rem;left:0;margin:auto;position:absolute;right:0;top:0;width:17.8rem;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 var(--clr-reply-quote-border);border-radius:.25rem;color:var(--clr-reply-quote-text);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:var(--clr-reply-quote-left-bg)}.chat-box .right .reply-quote{background-color:var(--clr-reply-quote-right-bg)}.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:var(--clr-reply-quote-preview-bg);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:var(--clr-border-light)}#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:var(--clr-bright);border-radius:.3rem;box-shadow:.15rem .15rem 1.5rem var(--clr-shadow-dialog);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:var(--clr-audio-bg);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:var(--clr-audio-icon);font-size:2.4rem}.audio-player .material-icons.disabled{color:var(--clr-audio-icon-disabled);cursor:default}.audio-player .playback{height:2.6rem;width:14rem}.audio-player canvas.playback{display:block}.audio-player div.playback{align-items:center;color:var(--clr-audio-icon);display:flex;font-size:small;justify-content:center}.audio-player .timer{color:var(--clr-audio-timer-text);font-size:smaller}#pinned-wrapper{margin-right:.5rem}#pinned-wrapper,.pinned{align-items:center;display:flex;height:100%;position:relative}.pinned{background-color:var(--clr-background-off-white);background-position:50%;border-radius:0 .25rem .25rem 0;color:var(--clr-text-primary);cursor:pointer;font-weight:lighter;min-width:0;padding:.15rem .5rem .25rem;transition:background .4s;width:24rem}.pinned>p{overflow-x:hidden;text-overflow:ellipsis;white-space:nowrap}.pinned:hover{background-color:var(--clr-bright)}.pinned:active{background-color:var(--clr-blue-wash-medium);transition:background 0s}.pinned-scroll{align-items:center;background-color:var(--clr-background-extra-light-gray);border-radius:.25rem 0 0 .25rem;display:flex;flex-direction:column;height:100%;justify-content:space-evenly;margin-left:.35rem;padding:.2rem;position:relative;user-select:none}.pinned-scroll .dot{background-color:var(--clr-text-tertiary);border-radius:50%;height:.3rem;user-select:none;width:.3rem}.pinned-scroll .adot{background-color:var(--clr-light-blue-accent);border-radius:50%;height:.45rem;user-select:none;width:.45rem}#pinned-wrapper:hover .menuTrigger{opacity:.9}#pinned-wrapper:hover .menuTrigger a{color:var(--clr-text-secondary)}.pinned-menu{background-color:var(--clr-pinned-menu-bg);border-radius:0 .25rem .25rem 0;bottom:0;display:flex;flex-direction:column;justify-content:space-evenly;position:absolute;right:0;top:0}.pinned-menu .menuTrigger{position:relative;right:0}.drag-n-drop{align-items:center;background-color:var(--clr-drag-n-drop-bg);border:.15rem dashed var(--clr-drag-n-drop-border);border-radius:1rem;bottom:1.5rem;color:var(--clr-drag-n-drop-text);display:flex;font-size:2rem;justify-content:center;left:1.5rem;outline:.5rem solid var(--clr-drag-n-drop-outline);position:absolute;right:1.5rem;top:1.5rem;z-index:3}.country-flag{display:inline-block;font-size:larger}.dial-code{cursor:pointer;display:inline-block;margin-bottom:.15rem;vertical-align:middle;white-space:nowrap}ul.phone-country-selector{list-style:none;overflow-x:hidden}ul.phone-country-selector>li{cursor:pointer;font-weight:lighter;padding:.25rem .5rem .15rem;position:relative;width:100%}ul.phone-country-selector>li:hover{background-color:var(--clr-background-blue-gray-50)}ul.phone-country-selector>li.selected{background-color:var(--clr-background-blue-gray-100)}ul.phone-country-selector .dial-code{color:var(--clr-primary-action);font-weight:400;position:absolute;right:.5rem}ul.phone-country-selector span{display:inline-block}ul.phone-country-selector span.country{overflow-x:hidden;text-overflow:ellipsis}.image-grid{display:grid;gap:.35rem;grid-template-columns:repeat(auto-fill,minmax(7rem,1fr));padding:.25rem;position:relative}.image-grid-cell{border:1.5px solid transparent;border-radius:.25rem;box-shadow:0 0 .2rem var( --clr-shadow-hr-inset);cursor:pointer;height:7rem;margin:0;overflow:hidden;padding:0;width:100%}.image-grid-cell img{object-fit:cover}.image-grid-cell.selected{border:1.5px solid var(--clr-secondary-accent)}div.toast{align-items:center;background-color:var(--clr-toast-bg);border-radius:.5rem;bottom:2rem;box-shadow:1px 2px .3rem var(--clr-shadow-gray-strong);color:var(--clr-toast-text);display:flex;font-weight:lighter;height:3rem;justify-content:center;left:50%;min-width:10rem;padding:.5rem 1rem;position:absolute;translate:-50%;visibility:hidden;z-index:3}div.toast.show{animation:fadein .5s,fadeout .5s 2.5s;visibility:visible}@keyframes fadein{0%{bottom:0;opacity:0}to{bottom:2rem;opacity:1}}@keyframes fadeout{0%{bottom:2rem;opacity:1}to{bottom:0;opacity:0}}@media (min-width:1440px){#app-container{max-width:114rem}}@media (max-width:960px){#mountPoint{padding:0}.pinned{width:16rem}}@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%}.menuTrigger{opacity:.3}#send-message-input{transition-property:-tinode-mobile}#pinned-wrapper{height:3.5rem;margin:.25rem}.pinned{width:unset}#video-container.minimized{border-radius:unset;box-shadow:0 0 .5rem var(--clr-shadow-gray-strong);flex-direction:row;height:11rem;left:0;top:var(--caption-panel-height);width:100%}#controls.minimized{bottom:auto;column-gap:unset;flex-direction:column;right:1rem;row-gap:.5rem}.minimized .call-party{border-radius:unset;box-shadow:unset}.call-party.self{border-radius:unset;bottom:8.5rem}} \ No newline at end of file +:root{color-scheme:light dark;--message-text-size:10pt;--caption-panel-height:4rem;--wallpaper-url:url(../img/bkg/a00.png);--wallpaper-repeat:repeat;--wallpaper-blur:0px;--wallpaper-invert:0;--wallpaper-size:contain;--wallpaper-position:center;--clr-bright:light-dark(#fff,#181818);--clr-dark:light-dark(#000,#fff);--clr-transparent:transparent;--clr-std-gray:grey;--clr-std-ltgray:light-dark(silver,#3f3f3f);--clr-std-teal:teal;--clr-std-grey:grey;--clr-std-orange:orange;--clr-primary-accent:light-dark(#2094f3,#0e6dba);--clr-primary-accent-hover:light-dark(#0a6ebd,#116ab4);--clr-primary-accent-focus-shadow:light-dark(rgba(33,150,243,.25),rgba(3,7,12,.25));--clr-primary-accent-transparent-medium:light-dark(rgba(33,150,243,.3),rgba(20,70,120,.3));--clr-primary-action:light-dark(#1e89e6,#1571c1);--clr-primary-action-hover:light-dark(#2962ff,#0037b8);--clr-secondary-accent:light-dark(#0097a8,#006570);--clr-primary-light-blue:light-dark(#bcdefb,#78a0be);--clr-light-blue-accent:light-dark(#0398e2,#0379b5);--clr-body-background:var(--clr-std-ltgray);--clr-text-primary:light-dark(#666,#999);--clr-text-secondary:light-dark(#757575,#8a8a8a);--clr-text-tertiary:light-dark(#999,#787878);--clr-text-tertiary-activated:#888;--clr-text-placeholder:light-dark(#bbb,#555);--clr-text-disabled:light-dark(#888,#777);--clr-border-light:light-dark(#ccc,#555);--clr-border-muted:light-dark(#ddd,#444);--clr-background-off-white:light-dark(#fafafa,#222);--clr-background-light-gray:light-dark(#f0f0f0,#0f0f0f);--clr-background-extra-light-gray:light-dark(#eee,#222);--clr-background-blue-gray-50:light-dark(#edf0f2,#202c33);--clr-background-blue-gray-75:light-dark(#e1e8eb,#182124);--clr-background-blue-gray-100:light-dark(#cfd8dc,#20272a);--clr-background-blue-gray-300:light-dark(#b0bec5,#354146);--clr-blue-wash-light:light-dark(#f0f0ff,#22222d);--clr-blue-wash-medium:light-dark(#d8e8ff,#123550);--clr-primary-wash:light-dark(#e3f2fd,#072f45);--clr-indigo-50:light-dark(#e8eaf6,#1a2c44);--clr-danger-text:light-dark(#d33131,#931f1f);--clr-danger-text-hover:light-dark(#f44034,#c10);--clr-error-text-muted:light-dark(#c66,#933);--clr-error-bg-light:light-dark(#ffccd1,#ff6675);--clr-error-border-light:light-dark(#ffbdc6,#ff334e);--clr-error-text-dark:light-dark(#b51c1c,#de2323);--clr-error-icon:light-dark(#ef5552,#d81b0e);--clr-warning-accent:light-dark(#ffc107,#808020);--clr-warning-bg-light:light-dark(#fff9c4,#00060c);--clr-warning-border-light:light-dark(#fff59d,#000a2b);--clr-warning-text-dark:light-dark(#6d4c41,#a08356);--clr-warning-icon:light-dark(#fbc02d,#b48204);--clr-info-bg-light:light-dark(#e1f5fe,#010a0e);--clr-info-border-light:light-dark(#b3e5fc,#001824);--clr-info-text-dark:light-dark(#0288d1,#00151f);--clr-header-stripe-bg:light-dark(#3949ab,#12152f);--clr-scrollbar-thumb:light-dark(rgba(0,0,0,.3),hsla(0,0%,100%,.3));--clr-scrollbar-track:light-dark(hsla(0,0%,100%,.1),rgba(0,0,0,.1));--clr-menu-item-hover-bg:light-dark(#f5f5f5,#0a0a0a);--clr-alert-overlay-bg:light-dark(hsla(0,0%,94%,.85),hsla(0,0%,6%,.85));--clr-verified-accent:light-dark(#02a6f2,#027db6);--clr-staff-accent:light-dark(#689f38,#598830);--clr-badge-inv:light-dark(#fffd,#cccd);--clr-cyan-50:light-dark(#e0f7fa,#2f3e43);--clr-overlay-white-strong:light-dark(hsla(0,0%,100%,.9),rgba(0,0,0,.9));--clr-gray-medium-bg:light-dark(#777,#444);--clr-toast-bg:#333;--clr-toast-text:light-dark(#eee,#aaa);--clr-online:#4caf50;--clr-offline:light-dark(#ccc,#999);--clr-shadow-input-underline:rgba(0,0,0,.1);--clr-shadow-hr-inset:rgba(0,0,0,.15);--clr-shadow-scrollbar-track-webkit:rgba(0,0,0,.2);--clr-shadow-button:rgba(0,0,0,.25);--clr-shadow-button-inset-active:rgba(0,0,0,.125);--clr-shadow-dialog:rgba(0,0,0,.45);--clr-shadow-panel-divider:rgba(0,0,0,.1);--clr-shadow-gray-strong:light-dark(var(--clr-std-gray),#333);--clr-shadow-silver-subtle:light-dark(var(--clr-std-ltgray),#333);--clr-shadow-bubble-drop:rgba(0,0,0,.3);--clr-button-primary-bg:var(--clr-primary-action);--clr-button-primary-text:var(--clr-bright);--clr-button-primary-hover-bg:var(--clr-primary-action-hover);--clr-button-secondary-bg:var(--clr-bright);--clr-button-secondary-text:var(--clr-primary-accent);--clr-button-secondary-hover-bg:var(--clr-primary-wash);--clr-button-outline-text:var(--clr-primary-accent);--clr-button-outline-border:var(--clr-std-ltgray);--clr-button-outline-hover-bg:var(--clr-indigo-50);--clr-button-danger-bg:light-dark(#ec645f,#d74742);--clr-button-danger-text:var(--clr-bright);--clr-button-danger-hover-bg:light-dark(#f77,#a55);--clr-button-positive-bg:light-dark(#71c46f,#0d1e0d);--clr-button-positive-text:var(--clr-bright);--clr-button-positive-hover-bg:light-dark(#7fed7f,#0a120a);--clr-input-text:var(--clr-text-primary);--clr-input-border:var(--clr-border-light);--clr-input-border-focus:var(--clr-primary-accent);--clr-input-shadow:var(--clr-shadow-input-underline);--clr-input-shadow-focus:var(--clr-primary-accent-focus-shadow);--clr-input-invalid-border:light-dark(#e57171,#561010);--clr-input-invalid-shadow:light-dark(hsla(0,69%,67%,.25),rgba(26,12,12,.25));--clr-input-placeholder-text:var(--clr-text-placeholder);--clr-bubble-left-bg:light-dark(#c4e0a3,#3e5c1f);--clr-bubble-left-bg-flash:light-dark(#94a97c,#2c4517);--clr-bubble-right-bg:var(--clr-background-off-white);--clr-bubble-right-bg-flash:var(--clr-border-light);--clr-bubble-text:light-dark(#212121,#bbc);--clr-bubble-meta-text:var(--clr-text-primary);--clr-bubble-meta-deleted-bg:var(--clr-primary-wash);--clr-bubble-meta-date-bg:light-dark(hsla(0,0%,100%,.8),rgba(40,40,40,.8));--clr-bubble-timestamp-text:light-dark(#777,#888);--clr-bubble-author-text:light-dark(#777,#666);--clr-reply-quote-border:var(--clr-light-blue-accent);--clr-reply-quote-text:var(--clr-text-primary);--clr-reply-quote-left-bg:light-dark(hsla(0,0%,100%,.4),rgba(0,0,0,.4));--clr-reply-quote-right-bg:light-dark(#8080801f,#c4c4c42e);--clr-reply-quote-preview-bg:var(--clr-background-off-white);--clr-badge-default-bg:light-dark(#e8e8e8,#171717);--clr-badge-default-text:var(--clr-text-primary);--clr-badge-default-border:var(--clr-std-ltgray);--clr-badge-green-bg:light-dark(#efe,#131);--clr-badge-green-text:light-dark(#383,#363);--clr-badge-green-border:light-dark(#aca,#242);--clr-badge-yellow-bg:light-dark(#ffe,#331);--clr-badge-yellow-text:light-dark(#660,#660);--clr-badge-yellow-border:light-dark(#cc9,#552);--clr-badge-blue-bg:light-dark(#f0f0ff,#224);--clr-badge-blue-text:light-dark(#339,#447);--clr-badge-blue-border:light-dark(#aad,#336);--clr-badge-red-bg:light-dark(#fee,#522);--clr-badge-red-text:light-dark(#933,#744);--clr-badge-red-border:light-dark(#c99,#633);--clr-badge-magenta-bg:light-dark(#fef,#535);--clr-badge-magenta-text:light-dark(#939,#747);--clr-badge-magenta-border:light-dark(#c9c,#636);--clr-chip-bg:var(--clr-background-extra-light-gray);--clr-chip-invalid-text:var(--clr-error-text-muted);--clr-chip-invalid-bg:var(--clr-badge-red-bg);--clr-chip-remove-icon-bg:light-dark(#aaa,#555);--clr-chip-remove-icon-text:var(--clr-background-extra-light-gray);--clr-chip-remove-icon-hover-bg:var(--clr-text-placeholder);--clr-chip-remove-icon-hover-text:var(--clr-bright);--clr-tabbar-bg:var(--clr-background-extra-light-gray);--clr-tabbar-inactive-text:light-dark(rgba(33,150,243,.6),#165aa0);--clr-tabbar-active-text:var(--clr-primary-accent);--clr-tabbar-inactive-border:var(--clr-border-light);--clr-tabbar-active-border:var(--clr-primary-accent);--clr-highlight-text:var(--clr-std-teal);--clr-highlight-preview-text:light-dark(#5f9ea0,#205e60);--clr-spinner-track:light-dark(#f3f3f3,#0c0c0c);--clr-spinner-active:var(--clr-primary-action);--clr-cropper-bounding-box-border:var(--clr-primary-action);--clr-cropper-bounding-box-bg:var(--clr-text-tertiary);--clr-cropper-cutout-border:var(--clr-text-tertiary);--clr-cropper-cutout-shadow:light-dark(rgba(230,246,255,.66),rgba(25,10,0,.66));--clr-audio-bg:var(--clr-background-extra-light-gray);--clr-audio-icon:light-dark(hsla(180,7%,43%,.8),hsla(0,7%,57%,.8));--clr-audio-icon-disabled:light-dark(hsla(0,0%,60%,.75),hsla(0,0%,40%,.75));--clr-audio-timer-text:light-dark(hsla(0,0%,40%,.75),hsla(0,0%,60%,.75));--clr-pinned-menu-bg:light-dark(#f8f8f8,#1a1a1a);--clr-drag-n-drop-border:var(--clr-std-grey);--clr-drag-n-drop-text:var(--clr-std-grey);--clr-drag-n-drop-bg:light-dark(hsla(0,0%,100%,.95),rgba(0,0,0,.95));--clr-drag-n-drop-outline:light-dark(hsla(0,0%,100%,.95),rgba(0,0,0,.95));--clr-lettertile-default-text:light-dark(#fafafacc,#dcdcdccc);--clr-lettertile-hover-text:var(--clr-bright);--clr-lt-bg-0:#ef9a9a;--clr-lt-bg-1:#90caf9;--clr-lt-bg-2:#b0bec4;--clr-lt-bg-3:#b49edb;--clr-lt-bg-4:#ffa98f;--clr-lt-bg-5:#a4d5a6;--clr-lt-bg-6:#ededed;--clr-lt-bg-7:#e6ee9b;--clr-lt-bg-8:#c4e0a3;--clr-lt-bg-9:#f0e57f;--clr-lt-bg-10:#f490b1;--clr-lt-bg-11:#a0a8da;--clr-lt-bg-12:#ffdf80;--clr-lt-bg-13:#bcaaa4;--clr-lt-bg-14:#80deea;--clr-lt-bg-15:#cd92d8;--clr-dk-bg-0:#c72929;--clr-dk-bg-1:#ad1457;--clr-dk-bg-2:#681b98;--clr-dk-bg-3:#4527a0;--clr-dk-bg-4:#293594;--clr-dk-bg-5:#1565c1;--clr-dk-bg-6:#0277bb;--clr-dk-bg-7:#00838f;--clr-dk-bg-8:#006b5f;--clr-dk-bg-9:#2f7f33;--clr-dk-bg-10:#54892f;--clr-dk-bg-11:#9e9e24;--clr-dk-bg-12:#f9a824;--clr-dk-bg-13:#ff9100;--clr-dk-bg-14:#f06c00;--clr-dk-bg-15:#d54215;--clr-lt-fg-0:var(--clr-lt-bg-0);--clr-lt-fg-1:var(--clr-lt-bg-1);--clr-lt-fg-2:var(--clr-lt-bg-2);--clr-lt-fg-3:var(--clr-lt-bg-3);--clr-lt-fg-4:var(--clr-lt-bg-4);--clr-lt-fg-5:var(--clr-lt-bg-5);--clr-lt-fg-6:var(--clr-lt-bg-6);--clr-lt-fg-7:var(--clr-lt-bg-7);--clr-lt-fg-8:var(--clr-lt-bg-8);--clr-lt-fg-9:var(--clr-lt-bg-9);--clr-lt-fg-10:var(--clr-lt-bg-10);--clr-lt-fg-11:var(--clr-lt-bg-11);--clr-lt-fg-12:var(--clr-lt-bg-12);--clr-lt-fg-13:var(--clr-lt-bg-13);--clr-lt-fg-14:var(--clr-lt-bg-14);--clr-lt-fg-15:var(--clr-lt-bg-15);--clr-dk-fg-0:var(--clr-dk-bg-0);--clr-dk-fg-1:var(--clr-dk-bg-1);--clr-dk-fg-2:var(--clr-dk-bg-2);--clr-dk-fg-3:var(--clr-dk-bg-3);--clr-dk-fg-4:var(--clr-dk-bg-4);--clr-dk-fg-5:var(--clr-dk-bg-5);--clr-dk-fg-6:var(--clr-dk-bg-6);--clr-dk-fg-7:var(--clr-dk-bg-7);--clr-dk-fg-8:var(--clr-dk-bg-8);--clr-dk-fg-9:var(--clr-dk-bg-9);--clr-dk-fg-10:var(--clr-dk-bg-10);--clr-dk-fg-11:var(--clr-dk-bg-11);--clr-dk-fg-12:var(--clr-dk-bg-12);--clr-dk-fg-13:var(--clr-dk-bg-13);--clr-dk-fg-14:var(--clr-dk-bg-14);--clr-dk-fg-15:var(--clr-dk-bg-15)}*{box-sizing:border-box;font-family:Roboto,Arial,sans-serif;margin:0;padding:0;scrollbar-color:var(--clr-scrollbar-thumb) var(--clr-scrollbar-track);scrollbar-width:thin;text-rendering:optimizeLegibility}body,html{background-color:var(--clr-body-background);box-shadow:inset 0 10rem var(--clr-header-stripe-bg);color:var(--clr-text-primary);font-size:10pt;height:100%;overflow:hidden;width:100%}tt{font-family:Roboto Mono,Courier,monospace}a{color:var(--clr-primary-accent);text-decoration:none}a:focus,a:hover{color:var(--clr-primary-accent-hover);text-decoration:underline}a.danger{color:var(--clr-danger-text)}a.danger:focus,a.danger:hover{color:var(--clr-danger-text-hover)}a.gray:focus,a.gray:hover{color:var(--clr-text-tertiary)}form{line-height:1.5;padding:.5rem .75rem}form,label{font-size:1.1rem}label{margin-right:auto}label.small{font-size:.95rem}label.large,label.small{color:var(--clr-primary-action)}label.large{font-size:1.1rem}label.invalid{color:var(--clr-danger-text)}img.avatar{border-radius:50%;height:100%;width:100%}img.avatar.self{padding:7%}button{border:1px solid var(--clr-transparent);border-radius:4px;box-shadow:0 1px 3px 0 var(--clr-shadow-button);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 var(--clr-shadow-button);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 var(--clr-shadow-button);height:2rem;line-height:2rem;width:2rem}button:active:not([disabled]),button:hover:not([disabled]){color:var(--clr-bright)}button:active{box-shadow:inset 0 3px .5rem var(--clr-shadow-button-inset-active)}button:active.round.small{box-shadow:inset 0 2px .35rem var(--clr-shadow-button-inset-active)}button.primary{background-color:var(--clr-button-primary-bg);color:var(--clr-button-primary-text)}button.primary:active:not([disabled]),button.primary:hover:not([disabled]){background-color:var(--clr-button-primary-hover-bg)}button.secondary{background-color:var(--clr-button-secondary-bg);color:var(--clr-button-secondary-text)}button.secondary:active:not([disabled]),button.secondary:hover:not([disabled]){background-color:var(--clr-button-secondary-hover-bg)}button.outline{background-color:var(--clr-transparent);border:1px solid var(--clr-button-outline-border);box-shadow:none;color:var(--clr-button-outline-text)}button.outline:active:not([disabled]),button.outline:hover:not([disabled]){background-color:var(--clr-button-outline-hover-bg);color:var(--clr-button-outline-text)}button.danger{background-color:var(--clr-button-danger-bg);color:var(--clr-button-danger-text)}button.danger:active:not([disabled]),button.danger:hover:not([disabled]){background-color:var(--clr-button-danger-hover-bg)}button.positive{background-color:var(--clr-button-positive-bg);color:var(--clr-button-positive-text)}button.positive:active:not([disabled]),button.positive:hover:not([disabled]){background-color:var(--clr-button-positive-hover-bg)}input,textarea{background:var(--clr-transparent);border:none;color:var(--clr-input-text);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=tel],input[type=text],textarea{border-bottom:1px solid var(--clr-input-border);box-shadow:0 1px 0 var(--clr-input-shadow);height:2.5rem;transition:all .1s ease-in-out,height 0s}input[type=email],input[type=password],input[type=tel],input[type=text],textarea{width:100%}input[type=email]:focus,input[type=password]:focus,input[type=search]:focus,input[type=tel]:focus,input[type=text]:focus,textarea:focus{border-bottom:1px solid var(--clr-input-border-focus);box-shadow:0 1px 0 var(--clr-input-shadow-focus)}input[type=email].invalid,input[type=password].invalid,input[type=search].invalid,input[type=tel].invalid,input[type=text].invalid,textarea.invalid{border-bottom:1px solid var(--clr-input-invalid-border);box-shadow:0 1px 0 var(--clr-input-invalid-shadow)}input[type=email]::placeholder,input[type=password]::placeholder,input[type=search]::placeholder,input[type=tel]::placeholder,input[type=text]::placeholder,textarea::placeholder{color:var(--clr-input-placeholder-text);font-weight:lighter}input[type=password].with-icon-right,input[type=text].with-icon-right{margin-right:-2rem;padding-right:2rem}input[type=password].with-icon-left,input[type=text].with-icon-left{margin-left:-1.45rem;padding-left:1.75rem}textarea{padding-top:.45rem;resize:none}input[type=range]{width:90%}option{padding:0}datalist{display:flex;flex-direction:row;justify-content:space-between;width:100%}::-webkit-scrollbar{width:.6rem}::-webkit-scrollbar-track{background-color:var(--clr-scrollbar-track);-webkit-box-shadow:inset 0 0 6px var(--clr-shadow-scrollbar-track-webkit);box-shadow:inset 0 0 6px var(--clr-shadow-scrollbar-track-webkit)}::-webkit-scrollbar-thumb{background-color:var(--clr-scrollbar-thumb)}ul.menu{background-color:var(--clr-bright);border-radius:.2rem;box-shadow:0 1px 6px var(--clr-shadow-dialog);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:var(--clr-menu-item-hover-bg)}ul.menu>li.separator{height:1px;margin:2px;padding:0}ul.menu>li.separator,ul.menu>li.separator:hover{background-color:var(--clr-border-light)}ul.menu>li.disabled{opacity:.6;pointer-events:none}.menuTrigger{background-color:inherit;border-radius:.7rem;height:1.4rem;line-height:1.4rem;opacity:0;position:absolute;right:.25rem;text-align:center;user-select:none;width:1.4rem}.menuTrigger a{color:var(--clr-text-secondary)}li .menuTrigger{top:.25rem}li:hover .menuTrigger{opacity:.9}li:hover .menuTrigger a{color:var(--clr-text-secondary)}div.alert-container{align-items:center;background:var(--clr-alert-overlay-bg);display:flex;height:100%;justify-content:center;overflow:hidden;padding:1rem;position:absolute;width:100%;z-index:3}div.alert{background-color:var(--clr-bright);border-radius:.3rem;box-shadow:.15rem .15rem 1.5rem var(--clr-shadow-dialog);height:min-content;margin:auto 2rem;max-height:40rem;max-width:24rem;min-width:16rem;overflow:hidden;padding:1rem;position:relative;width:fit-content}div.alert-container .title{color:var(--clr-primary-accent);font-size:1.2rem;font-weight:500;padding:0 0 .35rem;position:relative;width:100%}div.alert-container .title.with-control{align-items:center;display:flex;flex:none;justify-content:space-between;padding:.5rem .5rem 0;position:relative}div.alert-container .content{padding:.5rem 0;position:relative}div.trusted-badge{margin:.25rem 0}.blue{color:var(--clr-primary-accent)!important}.lt-blue{color:var(--clr-lt-fg-1)!important}.orange{color:var(--clr-std-orange)!important}.verified-color{color:var(--clr-verified-accent)!important}.staff-color{color:var(--clr-staff-accent)!important}.danger-color{color:var(--clr-warning-accent)!important}.green{color:light-dark(#388e3c,#1a9a1d)}.white{color:var(--clr-bright)!important}.red{color:var(--clr-danger-text)!important}.badge-inv{color:var(--clr-badge-inv)!important}.gray{color:var(--clr-text-secondary)!important}.light-gray{color:var(--clr-text-placeholder)!important}.large{font-size:120%}.small{font-size:90%}.float-right{position:absolute;right:.5rem}.hr{background-color:var(--clr-background-light-gray);box-shadow:inset 0 .25rem .25rem -.25rem var(--clr-shadow-hr-inset),inset 0 -.25rem .25rem -.25rem var(--clr-shadow-hr-inset);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:var(--clr-bright);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:var(--clr-background-extra-light-gray);border:1px solid var(--clr-text-tertiary);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:var(--clr-background-off-white);border-radius:50%;box-shadow:0 2px .5rem 0 var(--clr-shadow-button);color:var(--clr-text-secondary);display:block;font-size:1.8rem;height:3.25rem;margin:0;min-height:unset;min-width:unset;outline:none;padding:0;position:absolute;transition:all .15s;width:3.25rem;z-index:2}.action-button:active:not([disabled]),.action-button:focus,.action-button:hover,.action-button:hover:not([disabled]){background-color:var(--clr-background-light-gray);color:var(--clr-text-tertiary-activated)}.action-button:active{background-color:var(--clr-background-extra-light-gray);color:var(--clr-text-tertiary-activated)}.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:var(--clr-bright);border-radius:.25rem;box-shadow:1px 2px .3rem var(--clr-shadow-gray-strong);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:var(--clr-primary-accent);color:var(--clr-primary-light-blue);font-size:120%;font-weight:bolder;padding:1rem}#noscript-content{padding:1rem}#app-container{background-color:var(--clr-bright);border-radius:.25rem;box-shadow:1px 2px .3rem var(--clr-shadow-gray-strong);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;position:relative;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:var(--clr-background-off-white);border-radius:.1rem;margin:.25rem;padding:.25rem;position:relative}div.in-place-edit,span.in-place-edit{border-bottom:1px dashed var(--clr-border-muted);cursor:pointer;display:inline-block;font-family:inherit;font-size:1rem;margin:.25rem .125rem 0;vertical-align:baseline;width:100%}.in-place-edit.short{align-items:center;display:inline-flex;font-size:1.1rem;height:2.5rem;line-height:2.25;white-space:nowrap}.in-place-edit.disabled{border-bottom:none;color:var(--clr-text-disabled);cursor:default}.in-place-edit.placeholder{color:var(--clr-text-placeholder)}.in-place-edit span{display:inline-block}.in-place-edit.short span{overflow-x:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.in-place-edit .material-icons{display:inline-block}.material-icons.invalid{color:var(--clr-error-text-muted)}textarea.in-place-edit{font-size:unset;height:unset}input.in-place-edit.invalid{color:var(--clr-error-text-muted)}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:var(--clr-text-tertiary);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 var(--clr-border-muted)}.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{box-shadow:0 1px 2px var(--clr-shadow-gray-strong);flex:none;height:var(--caption-panel-height);overflow-x:hidden;white-space:nowrap;z-index:1}.caption-panel,.dialog-buttons{align-items:center;display:flex;padding:.5rem}.dialog-buttons{justify-content:flex-end}.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:var(--clr-blue-wash-light);color:var(--clr-primary-accent);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:var(--clr-primary-wash);color:var(--clr-dk-fg-5);outline:0}#side-caption-panel{background-color:var(--clr-primary-accent);color:var(--clr-primary-light-blue)}#side-caption-panel a{color:var(--clr-primary-light-blue);line-height:1;padding-left:.5rem}#side-caption-panel :hover{color:var(--clr-bright)}#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:var(--clr-error-bg-light);border-bottom:1px solid var(--clr-error-border-light);color:var(--clr-error-text-dark);display:flex}.info-box.warning{background-color:var(--clr-warning-bg-light);border-bottom:1px solid var(--clr-warning-border-light);color:var(--clr-warning-text-dark);display:flex}.info-box.info{background-color:var(--clr-info-bg-light);border-bottom:1px solid var(--clr-info-border-light);color:var(--clr-info-text-dark);display:flex}.info-box .cancel .material-icons{color:var(--clr-text-secondary);font-size:1rem}.info-box.error .cancel .material-icons{color:var(--clr-error-text-dark)}.info-box .icon{display:block;margin-right:.5rem}.info-box .icon .material-icons{font-size:1.5rem}.info-box.warning .icon .material-icons{color:var(--clr-warning-icon)}.info-box.error .icon .material-icons{color:var(--clr-error-icon)}.info-box.info .icon .material-icons{color:var(--clr-info-text-dark)}.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(to right,var(--clr-transparent) 3.5rem,var(--clr-background-extra-light-gray) 1px,var(--clr-background-extra-light-gray) 100%) 0 100% /100% 1px no-repeat,var(--clr-bright);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:var(--clr-bright)}.contact-box>li:hover{background-color:var(--clr-background-blue-gray-50)}.contact-box>li.selected{background-color:var(--clr-background-blue-gray-100)}.contact-box>li.tpinned{background-color:var(--clr-background-blue-gray-75);border-right:1px solid var(--clr-secondary-accent)}.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:light-dark(#777,#666);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:var(--clr-online)}.avatar-box .offline{background-color:var(--clr-offline)}.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 var(--clr-transparent);color:var(--clr-secondary-accent);overflow:visible;padding-left:.5px}.contact-box .checkmark.material-icons,.contact-box .deleted.material-icons{background-color:var(--clr-bright);bottom:0;font-size:1.5rem;height:1.5rem;position:absolute;right:0;width:1.5rem}.contact-box .deleted.material-icons{color:var(--clr-text-tertiary)}#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:clip}.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;margin:.25rem;padding:0;position:relative;width:10rem}.avatar-upload.read-only{height:auto}.avatar-upload .clear-avatar{background-image:radial-gradient(var(--clr-bright) 40%,var(--clr-transparent) 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 var(--clr-text-tertiary);color:var(--clr-text-tertiary);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:var(--clr-text-primary);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:var(--clr-background-off-white);border-radius:50%;bottom:0;box-shadow:0 1px 4px var(--clr-shadow-dialog);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:var(--clr-primary-wash);color:var(--clr-primary-accent)}#topic-caption-panel{background-color:var(--clr-background-blue-gray-300)}#topic-caption-panel a{color:var(--clr-text-secondary);text-decoration:none}#topic-caption-panel :hover{color:var(--clr-dark)}#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;width:min-content}#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}.qr-code{align-self:center}#messages-container{height:100%;overflow-y:hidden;position:relative}#messages-container:before{background-color:var(--clr-background-blue-gray-50);background-image:var(--wallpaper-url);background-position:var(--wallpaper-position);background-repeat:var(--wallpaper-repeat);background-size:var(--wallpaper-size);content:"";filter:blur(var(--wallpaper-blur)) invert(var(--wallpaper-invert));height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%;z-index:0}#messages-container.dark.wpimg:before{filter:brightness(50%)}#messages-container.dark.wppatt:before{filter:invert(1)}#messages-panel{height:100%;overflow-y:scroll;padding:.75rem;position:relative}#write-only-background{background-image:repeating-linear-gradient(45deg,hsla(0,0%,100%,.5),hsla(0,0%,100%,.5) .5rem,hsla(0,0%,100%,.8) 0,hsla(0,0%,100%,.8) 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:var(--clr-bright);border-radius:.5rem;box-shadow:0 1px .5px var(--clr-shadow-button-inset-active);color:var(--clr-text-primary);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:var(--clr-background-blue-gray-50);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:var(--clr-background-blue-gray-50);box-shadow:0 -2px 3px -1px var(--clr-shadow-panel-divider);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:var(--clr-text-tertiary)!important}#send-message-panel .material-icons.secondary:hover{color:var(--clr-primary-accent)!important}#send-message-input{max-height:6rem;min-height:2.5rem;overflow:hidden auto}.accept-invite-panel{background-color:var(--clr-background-blue-gray-50);box-shadow:0 -2px 3px -1px var(--clr-shadow-panel-divider);width:100%;z-index:1}.accept-invite-panel .title{font-size:1.2rem;padding:.75rem}.accept-invite-panel .footer{background-color:var(--clr-background-off-white);padding-bottom:.35rem;text-align:center;white-space:nowrap}.accept-invite-panel button{border:1px solid var(--clr-transparent);box-shadow:0 1px 2px 0 var(--clr-shadow-button);font-size:1rem;height:2em;line-height:2em;margin:.25rem}#dummy-view{align-items:center;background-color:var(--clr-cyan-50);display:flex;height:100%;justify-content:center;width:100%}#dummy-view a{display:block;text-align:center;text-decoration:none}#image-preview{background-color:var(--clr-overlay-white-strong);display:flex;flex-direction:column;height:100%;left:0;position:absolute;top:0;width:100%;z-index:2}#image-preview-caption-panel{background-color:var(--clr-background-blue-gray-50);box-shadow:0 1px 2px var(--clr-shadow-silver-subtle);display:flex;flex-grow:0;flex-shrink:0;height:var(--caption-panel-height);justify-content:space-between;line-height:2rem;padding:1rem .75rem 0;z-index:3}#image-preview-caption-panel a{color:var(--clr-text-secondary);text-decoration:none}#image-preview-caption-panel a:hover{color:var(--clr-dark)}#image-preview-container{align-items:center;background-color:var(--clr-gray-medium-bg);display:flex;height:100%;justify-content:space-around;overflow:hidden;width:100%}#image-preview-footer{background-color:var(--clr-background-blue-gray-50);box-shadow:0 -2px 3px -1px var(--clr-shadow-panel-divider);display:flex;flex-grow:0;flex-shrink:0;height:3.2rem;justify-content:space-around;line-height:1.5rem;z-index:1}#image-preview-container .material-icons{font-size:6rem}#image-preview-container .doc-card{background-color:var(--clr-std-ltgray);border-radius:.5rem;display:flex;flex-direction:column;overflow-x:hidden;padding:1rem}#video-container{background-color:var(--clr-overlay-white-strong);display:flex;flex-direction:column;height:100%;justify-content:space-between;left:0;position:absolute;top:0;width:100%}#video-container.minimized{background-color:unset;border-radius:.5rem;box-shadow:.15rem .15rem 1.5rem var(--clr-shadow-dialog);cursor:grab;height:18rem;left:auto;right:1rem;top:1rem;user-select:none;width:18rem}#controls{align-items:center;align-self:center;bottom:2.5rem;column-gap:1rem;display:flex;justify-content:center;position:absolute;z-index:1}#controls.minimized{bottom:1.75rem;column-gap:.5rem}.incoming-call #controls{bottom:1rem}#controls button{align-items:center;border-radius:50%;box-shadow:0 3px 6px 0 var(--clr-shadow-button);display:flex;height:4rem;justify-content:center;min-width:auto;position:relative;width:4rem}#controls.minimized button{box-shadow:0 2px 4px 0 var(--clr-shadow-button);height:2.75rem;width:2.75rem}#controls button .material-icons{font-size:1.8rem}#controls.minimized button .material-icons{font-size:1.4rem}button.full-screen{background-color:transparent;border-radius:.5rem;box-shadow:none;height:2.5rem;left:2rem;min-width:unset;padding:0;position:absolute;top:2rem;width:2.5rem;z-index:1}.minimized button.full-screen{height:2rem;left:1rem;top:1rem;width:2rem}button.full-screen:hover:not([disabled]),button:active:not([disabled]){color:var(--clr-text-secondary)}button.full-screen .material-icons{font-size:x-large}.minimized button.full-screen .material-icons{font-size:large}#video-container-panel{height:100%;position:relative;width:100%}.call-party{background-color:var(--clr-background-extra-light-gray);border:2px solid var(--clr-border-light);border-radius:.5rem;overflow:hidden}.call-party:hover{border-color:var(--clr-primary-accent)}.minimized .call-party{border-width:1px}.call-party.peer{bottom:1rem;left:1rem;position:absolute;right:1rem;top:1rem;z-index:1}.minimized .call-party.peer{bottom:0;left:0;right:0;top:0}.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}.minimized .caller-card .avatar-box{font-size:3.6rem;height:6rem;width:6rem}.call-party .caller-name{background-color:var(--clr-background-off-white);border-radius:.35rem;max-width:12rem;overflow-x:hidden;padding:.15rem .5rem;text-overflow:ellipsis;text-shadow:0 0 1px var(--clr-bright);white-space:nowrap;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:1rem;margin:0 auto;position:absolute}.minimized .caller-name{border-radius:.25rem;font-weight:lighter;padding:.1rem .35rem}.incoming-call{background-color:var(--clr-bright);border-radius:.3rem;box-shadow:.15rem .15rem 1.5rem var(--clr-shadow-dialog);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:hsla(0,0%,100%,.7);border-radius:.35rem;padding:.15rem .5rem;text-shadow:0 0 1px var(--clr-bright);z-index:1}.call-message{display:flex;flex-direction:row}.call-message .duration{font-weight:lighter}#go-to-latest{bottom:1rem;right:1.5rem}@keyframes active-call{0%{box-shadow:0 0 0 .1rem var(--clr-primary-accent-transparent-medium),0 0 0 .3rem var(--clr-primary-accent-transparent-medium),0 0 0 .5rem var(--clr-primary-accent-transparent-medium)}to{box-shadow:0 0 0 .4rem var(--clr-primary-accent-transparent-medium),0 0 0 2rem rgba(33,150,243,0),0 0 0 3rem rgba(33,150,243,0)}}.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;color:var(--clr-bubble-text);display:flex;filter:drop-shadow(.5px .5px .7px var(--clr-shadow-bubble-drop));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:var(--clr-bubble-left-bg);margin-right:.5rem}.left.flash .bubble{background-color:var(--clr-bubble-left-bg-flash)}.left .bubble.tip{border-bottom-left-radius:0}.right .bubble{background-color:var(--clr-bubble-right-bg);margin-left:1.75rem}.right.flash .bubble{background-color:var(--clr-bubble-right-bg-flash)}.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:var(--clr-bubble-meta-text);min-width:unset}.meta .bubble.deleted{background-color:var(--clr-bubble-meta-deleted-bg);padding:.75rem .75rem .5rem}.meta .bubble.date{background-color:var(--clr-bubble-meta-date-bg);font-size:smaller;padding:.5rem;text-transform:uppercase;user-select:none}.left .bubble.tip:before{background-color:var(--clr-bubble-left-bg);border-bottom-left-radius:.3rem;bottom:0;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;transition:background-color .5s ease-out;transition-delay:.3s;width:.85rem}.left.flash .bubble.tip:before{background-color:var(--clr-bubble-left-bg-flash)}.right .bubble.tip:before{background-color:var(--clr-bubble-right-bg);border-bottom-right-radius:.3rem;bottom:0;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;transition:background-color .5s ease-out;transition-delay:.3s;width:.85rem}.right.flash .bubble.tip:before{background-color:var(--clr-bubble-right-bg-flash)}.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{font-size:var(--message-text-size);margin:0;max-width:36rem;overflow-wrap:anywhere;padding:0 .75rem;position:relative;width:100%}.bubble div.message-content.emoji-1{font-size:300%}.bubble div.message-content.emoji-2{font-size:241%}.bubble div.message-content.emoji-3{font-size:193%}.bubble div.message-content.emoji-4{font-size:155%}.bubble div.message-content.emoji-5{font-size:125%}.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{color:var(--clr-bubble-timestamp-text);float:right;font-size:80%;position:relative;top:.35rem;user-select:none;white-space:nowrap}.chat-box .author{color:var(--clr-bubble-author-text);font-size:80%;max-width:12em;overflow-x:hidden;text-overflow:ellipsis;white-space:nowrap}.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 var(--clr-transparent);border-right:.25rem solid var(--clr-transparent);bottom:2rem;margin:.25rem auto;position:relative}img.image-preview:before,img.inline-image:before{background:center no-repeat var(--clr-border-light) url(../img/broken_image.png);color:var(--clr-text-primary);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:center no-repeat var(--clr-border-light) 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:var(--clr-border-light)}.inline-video .duration{background-color:hsla(0,0%,100%,.5);border-radius:.3rem;bottom:.25rem;color:var(--clr-toast-bg);font-size:80%;left:.25rem;padding:.25rem .5rem;position:absolute}.inline-video .play-control{align-items:center;background-color:rgba(0,0,0,.4);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:var(--clr-background-blue-gray-300)}#info-caption-panel a{color:var(--clr-text-secondary);line-height:1;text-decoration:none}#info-caption-panel :hover{color:var(--clr-dark)}#info-title{margin-right:auto}#group-manager{display:flex;flex-direction:column;height:100%;overflow-y:hidden;position:relative}#group-manager-buttons{background-color:var(--clr-background-blue-gray-50);border-left:1px solid var(--clr-border-light);box-shadow:0 -1px var(--clr-shadow-panel-divider);display:flex;height:4rem;justify-content:space-around;padding:.4rem;z-index:2}ul.tabbar{background:var(--clr-tabbar-bg);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 var(--clr-shadow-button);height:2.4rem;position:relative}ul.tabbar li.active{background:var(--clr-bright)}ul.tabbar li:after{background:var(--clr-tabbar-inactive-border);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:var(--clr-tabbar-active-border);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:var(--clr-tabbar-inactive-text);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:var(--clr-tabbar-active-text)}.unread{background-color:var(--clr-secondary-accent);border-radius:50%;color:var(--clr-bright);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:var(--clr-chip-remove-icon-bg);font-size:1.15rem;padding-left:.2rem}.badge{align-self:flex-start;background-color:var(--clr-badge-default-bg);border:1px solid var(--clr-badge-default-border);border-radius:.2rem;color:var(--clr-badge-default-text);display:inline-block;font-family:Roboto Mono,Courier,monospace,sans-serif;font-size:.8rem;margin:.05rem .1rem;padding:.05rem .25rem}.badge.green{background-color:var(--clr-badge-green-bg);border-color:var(--clr-badge-green-border);color:var(--clr-badge-green-text)}.badge.yellow{background-color:var(--clr-badge-yellow-bg);border-color:var(--clr-badge-yellow-border);color:var(--clr-badge-yellow-text)}.badge.blue{background-color:var(--clr-badge-blue-bg);border-color:var(--clr-badge-blue-border);color:var(--clr-badge-blue-text)}.badge.red{background-color:var(--clr-badge-red-bg);border-color:var(--clr-badge-red-border);color:var(--clr-badge-red-text)}.badge.magenta{background-color:var(--clr-badge-magenta-bg);border-color:var(--clr-badge-magenta-border);color:var(--clr-badge-magenta-text)}.lettertile{border-radius:50%;padding-bottom:100%;user-select:none;width:100%}.lettertile>div{align-items:center;border-radius:50%;bottom:0;color:var(--clr-lettertile-default-text);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:var(--clr-lettertile-hover-text)}.lettertile.disabled{opacity:.5}.lt-bg-0{background-color:var(--clr-lt-bg-0)}.lt-bg-1{background-color:var(--clr-lt-bg-1)}.lt-bg-2{background-color:var(--clr-lt-bg-2)}.lt-bg-3{background-color:var(--clr-lt-bg-3)}.lt-bg-4{background-color:var(--clr-lt-bg-4)}.lt-bg-5{background-color:var(--clr-lt-bg-5)}.lt-bg-6{background-color:var(--clr-lt-bg-6)}.lt-bg-7{background-color:var(--clr-lt-bg-7)}.lt-bg-8{background-color:var(--clr-lt-bg-8)}.lt-bg-9{background-color:var(--clr-lt-bg-9)}.lt-bg-10{background-color:var(--clr-lt-bg-10)}.lt-bg-11{background-color:var(--clr-lt-bg-11)}.lt-bg-12{background-color:var(--clr-lt-bg-12)}.lt-bg-13{background-color:var(--clr-lt-bg-13)}.lt-bg-14{background-color:var(--clr-lt-bg-14)}.lt-bg-15{background-color:var(--clr-lt-bg-15)}.dk-bg-0{background-color:var(--clr-dk-bg-0)}.dk-bg-1{background-color:var(--clr-dk-bg-1)}.dk-bg-2{background-color:var(--clr-dk-bg-2)}.dk-bg-3{background-color:var(--clr-dk-bg-3)}.dk-bg-4{background-color:var(--clr-dk-bg-4)}.dk-bg-5{background-color:var(--clr-dk-bg-5)}.dk-bg-6{background-color:var(--clr-dk-bg-6)}.dk-bg-7{background-color:var(--clr-dk-bg-7)}.dk-bg-8{background-color:var(--clr-dk-bg-8)}.dk-bg-9{background-color:var(--clr-dk-bg-9)}.dk-bg-10{background-color:var(--clr-dk-bg-10)}.dk-bg-11{background-color:var(--clr-dk-bg-11)}.dk-bg-12{background-color:var(--clr-dk-bg-12)}.dk-bg-13{background-color:var(--clr-dk-bg-13)}.dk-bg-14{background-color:var(--clr-dk-bg-14)}.dk-bg-15{background-color:var(--clr-dk-bg-15)}.lt-fg-0{color:var(--clr-lt-fg-0)!important}.lt-fg-1{color:var(--clr-lt-fg-1)!important}.lt-fg-2{color:var(--clr-lt-fg-2)!important}.lt-fg-3{color:var(--clr-lt-fg-3)!important}.lt-fg-4{color:var(--clr-lt-fg-4)!important}.lt-fg-5{color:var(--clr-lt-fg-5)!important}.lt-fg-6{color:var(--clr-lt-fg-6)!important}.lt-fg-7{color:var(--clr-lt-fg-7)!important}.lt-fg-8{color:var(--clr-lt-fg-8)!important}.lt-fg-9{color:var(--clr-lt-fg-9)!important}.lt-fg-10{color:var(--clr-lt-fg-10)!important}.lt-fg-11{color:var(--clr-lt-fg-11)!important}.lt-fg-12{color:var(--clr-lt-fg-12)!important}.lt-fg-13{color:var(--clr-lt-fg-13)!important}.lt-fg-14{color:var(--clr-lt-fg-14)!important}.lt-fg-15{color:var(--clr-lt-fg-15)!important}.dk-fg-0{color:var(--clr-dk-fg-0)!important}.dk-fg-1{color:var(--clr-dk-fg-1)!important}.dk-fg-2{color:var(--clr-dk-fg-2)!important}.dk-fg-3{color:var(--clr-dk-fg-3)!important}.dk-fg-4{color:var(--clr-dk-fg-4)!important}.dk-fg-5{color:var(--clr-dk-fg-5)!important}.dk-fg-6{color:var(--clr-dk-fg-6)!important}.dk-fg-7{color:var(--clr-dk-fg-7)!important}.dk-fg-8{color:var(--clr-dk-fg-8)!important}.dk-fg-9{color:var(--clr-dk-fg-9)!important}.dk-fg-10{color:var(--clr-dk-fg-10)!important}.dk-fg-11{color:var(--clr-dk-fg-11)!important}.dk-fg-12{color:var(--clr-dk-fg-12)!important}.dk-fg-13{color:var(--clr-dk-fg-13)!important}.dk-fg-14{color:var(--clr-dk-fg-14)!important}.dk-fg-15{color:var(--clr-dk-fg-15)!important}.material-icons{font-size:1.4rem;line-height:1;text-align:center;user-select:none;vertical-align:middle}.material-icons.small{font-size:1rem}.material-icons.medium{font-size:1.2rem}.material-icons.large{font-size:1.6rem}.material-icons.big{font-size:2.2rem}.material-icons.x-big{font-size:3rem}.material-icons.huge{font-size:4rem}.composed-material{display:inline-block;position:relative}.composed-material .second{font-size:85%;font-weight:700;left:39%;position:absolute;top:7%}.composed-material .second-small{font-size:62%;font-weight:700;left:30%;position:absolute;top:14%}.material-icons.outline{position:relative;text-shadow:-1px 1px var(--clr-bright),1px 1px var(--clr-bright),1px -1px var(--clr-bright),-1px -1px var(--clr-bright)}#self-avatar .material-icons{font-size:2.4rem;line-height:3rem}.avatar-box .material-icons{border-radius:50%;color:var(--clr-lettertile-default-text);height:inherit;width:inherit}.chip-input{align-items:center;background:var(--clr-transparent);border-bottom:1px solid var(--clr-input-border);box-shadow:0 1px 0 var(--clr-input-shadow);color:var(--clr-input-text);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 var(--clr-input-border-focus);box-shadow:0 1px 0 var(--clr-input-shadow-focus)}.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:var(--clr-chip-bg);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:var(--clr-chip-invalid-bg);color:var(--clr-chip-invalid-text)}.chip>a{background-color:var(--clr-chip-remove-icon-bg);border-radius:50%;color:var(--clr-chip-remove-icon-text);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:var(--clr-chip-remove-icon-hover-bg);color:var(--clr-chip-remove-icon-hover-text);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:var(--clr-bright);border-radius:50%;box-shadow:.1rem .1rem .15rem 1px var(--clr-shadow-button);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:hsla(0,0%,100%,.5);box-shadow:.1rem .1rem .15rem 1px var(--clr-shadow-button-inset-active)}.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-radius:50%;border-top:.35rem solid var(--clr-spinner-track);border:.35rem solid var(--clr-spinner-track);border-top-color:var(--clr-spinner-active);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:var(--clr-background-blue-gray-100);border-radius:.1rem;height:.6rem;line-height:0;margin:.35rem;padding:.15rem;position:relative;width:6rem}.uploader>div>span{background-color:var(--clr-primary-action);border-radius:.08rem;display:inline-block;height:.3rem}.highlight{color:var(--clr-highlight-text);font-weight:bolder}.highlight .preview{color:var(--clr-highlight-preview-text);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:var(--clr-cropper-bounding-box-bg);border:2px solid var(--clr-cropper-bounding-box-border);box-shadow:1px 1px 3px var(--clr-shadow-cropper-gray);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 var(--clr-cropper-cutout-border);bottom:0;box-shadow:0 0 150rem 150rem var(--clr-cropper-cutout-shadow);height:17.8rem;left:0;margin:auto;position:absolute;right:0;top:0;width:17.8rem;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 var(--clr-reply-quote-border);border-radius:.25rem;color:var(--clr-reply-quote-text);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:var(--clr-reply-quote-left-bg)}.chat-box .right .reply-quote{background-color:var(--clr-reply-quote-right-bg)}.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:var(--clr-reply-quote-preview-bg);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:var(--clr-border-light)}#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:var(--clr-bright);border-radius:.3rem;box-shadow:.15rem .15rem 1.5rem var(--clr-shadow-dialog);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:var(--clr-audio-bg);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:var(--clr-audio-icon);font-size:2.4rem}.audio-player .material-icons.disabled{color:var(--clr-audio-icon-disabled);cursor:default}.audio-player .playback{height:2.6rem;width:14rem}.audio-player canvas.playback{display:block}.audio-player div.playback{align-items:center;color:var(--clr-audio-icon);display:flex;font-size:small;justify-content:center}.audio-player .timer{color:var(--clr-audio-timer-text);font-size:smaller}#pinned-wrapper{margin-right:.5rem}#pinned-wrapper,.pinned{align-items:center;display:flex;height:100%;position:relative}.pinned{background-color:var(--clr-background-off-white);background-position:50%;border-radius:0 .25rem .25rem 0;color:var(--clr-text-primary);cursor:pointer;font-weight:lighter;min-width:0;padding:.15rem .5rem .25rem;transition:background .4s;width:24rem}.pinned>p{overflow-x:hidden;text-overflow:ellipsis;white-space:nowrap}.pinned:hover{background-color:var(--clr-bright)}.pinned:active{background-color:var(--clr-blue-wash-medium);transition:background 0s}.pinned-scroll{align-items:center;background-color:var(--clr-background-extra-light-gray);border-radius:.25rem 0 0 .25rem;display:flex;flex-direction:column;height:100%;justify-content:space-evenly;margin-left:.35rem;padding:.2rem;position:relative;user-select:none}.pinned-scroll .dot{background-color:var(--clr-text-tertiary);border-radius:50%;height:.3rem;user-select:none;width:.3rem}.pinned-scroll .adot{background-color:var(--clr-light-blue-accent);border-radius:50%;height:.45rem;user-select:none;width:.45rem}#pinned-wrapper:hover .menuTrigger{opacity:.9}#pinned-wrapper:hover .menuTrigger a{color:var(--clr-text-secondary)}.pinned-menu{background-color:var(--clr-pinned-menu-bg);border-radius:0 .25rem .25rem 0;bottom:0;display:flex;flex-direction:column;justify-content:space-evenly;position:absolute;right:0;top:0}.pinned-menu .menuTrigger{position:relative;right:0}.drag-n-drop{align-items:center;background-color:var(--clr-drag-n-drop-bg);border:.15rem dashed var(--clr-drag-n-drop-border);border-radius:1rem;bottom:1.5rem;color:var(--clr-drag-n-drop-text);display:flex;font-size:2rem;justify-content:center;left:1.5rem;outline:.5rem solid var(--clr-drag-n-drop-outline);position:absolute;right:1.5rem;top:1.5rem;z-index:3}.country-flag{display:inline-block;font-size:larger}.dial-code{cursor:pointer;display:inline-block;margin-bottom:.15rem;vertical-align:middle;white-space:nowrap}ul.phone-country-selector{list-style:none;overflow-x:hidden}ul.phone-country-selector>li{cursor:pointer;font-weight:lighter;padding:.25rem .5rem .15rem;position:relative;width:100%}ul.phone-country-selector>li:hover{background-color:var(--clr-background-blue-gray-50)}ul.phone-country-selector>li.selected{background-color:var(--clr-background-blue-gray-100)}ul.phone-country-selector .dial-code{color:var(--clr-primary-action);font-weight:400;position:absolute;right:.5rem}ul.phone-country-selector span{display:inline-block}ul.phone-country-selector span.country{overflow-x:hidden;text-overflow:ellipsis}.image-grid{display:grid;gap:.35rem;grid-template-columns:repeat(auto-fill,minmax(7rem,1fr));padding:.25rem;position:relative}.image-grid-cell{border:1.5px solid transparent;border-radius:.25rem;box-shadow:0 0 .2rem var( --clr-shadow-hr-inset);cursor:pointer;height:7rem;margin:0;overflow:hidden;padding:0;width:100%}.image-grid-cell img{object-fit:cover}.image-grid-cell.selected{border:1.5px solid var(--clr-secondary-accent)}div.toast{align-items:center;background-color:var(--clr-toast-bg);border-radius:.5rem;bottom:2rem;box-shadow:1px 2px .3rem var(--clr-shadow-gray-strong);color:var(--clr-toast-text);display:flex;font-weight:lighter;height:3rem;justify-content:center;left:50%;min-width:10rem;padding:.5rem 1rem;position:absolute;translate:-50%;visibility:hidden;z-index:3}div.toast.show{animation:fadein .5s,fadeout .5s 2.5s;visibility:visible}@keyframes fadein{0%{bottom:0;opacity:0}to{bottom:2rem;opacity:1}}@keyframes fadeout{0%{bottom:2rem;opacity:1}to{bottom:0;opacity:0}}@media (min-width:1440px){#app-container{max-width:114rem}}@media (max-width:960px){#mountPoint{padding:0}.pinned{width:16rem}}@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%}.menuTrigger{opacity:.3}#send-message-input{transition-property:-tinode-mobile}#pinned-wrapper{height:3.5rem;margin:.25rem}.pinned{width:unset}#video-container.minimized{border-radius:unset;box-shadow:0 0 .5rem var(--clr-shadow-gray-strong);flex-direction:row;height:11rem;left:0;top:var(--caption-panel-height);width:100%}#controls.minimized{bottom:auto;column-gap:unset;flex-direction:column;right:1rem;row-gap:.5rem}.minimized .call-party{border-radius:unset;box-shadow:unset}.call-party.self{border-radius:unset;bottom:8.5rem}} \ No newline at end of file diff --git a/src/config.js b/src/config.js index b82ccbd4..3f6093cc 100644 --- a/src/config.js +++ b/src/config.js @@ -150,7 +150,7 @@ export const SELF_AVATAR_URI = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS export const TOAST_DURATION = 3_000; // Initial/default color scheme. -export const DEFAULT_COLOR_SCHEME = 'light dark'; +export const DEFAULT_COLOR_SCHEME = 'auto'; // Default text size in points. export const DEFAULT_TEXT_SIZE = 10; diff --git a/src/views/acc-general-view.jsx b/src/views/acc-general-view.jsx index 0dade8c1..5a6d9f0f 100644 --- a/src/views/acc-general-view.jsx +++ b/src/views/acc-general-view.jsx @@ -7,7 +7,7 @@ export default class AccGeneralView extends React.PureComponent { super(props); this.state = { - colorSchema: props.colorSchema || 'light dark', + colorSchema: props.colorSchema || 'auto', textSize: (props.textSize * 10) || '100', sendOnEnter: props.sendOnEnter || 'plain', }; @@ -49,8 +49,8 @@ export default class AccGeneralView extends React.PureComponent {
}>\n \n :\n\n (view === 'general' || view === 'crop') ?\n :\n\n view === 'acc_general' ?\n :\n\n view === 'notif' ?\n :\n\n view === 'security' ?\n }>\n \n :\n\n view === 'support' ?\n :\n\n view === 'wallpapers' ?\n }>\n \n :\n\n (view === 'contacts' || view == 'archive' || view == 'blocked') ?\n :\n\n view === 'newtpk' ?\n :\n\n view === 'cred' ?\n :\n\n view === 'reset' ?\n }>\n \n :\n null}\n \n );\n }\n};\n\nexport default injectIntl(SidepanelView);\n","// The top-level class to hold all functionality together.\nimport React, { Suspense } from 'react';\nimport { FormattedMessage, defineMessages, injectIntl } from 'react-intl';\n\nimport { initializeApp as firebaseInitApp } from 'firebase/app';\nimport { getMessaging as firebaseGetMessaging, getToken as firebaseGetToken,\n deleteToken as firebaseDelToken, onMessage as firebaseOnMessage } from 'firebase/messaging';\n\nimport { Drafty, Tinode } from 'tinode-sdk';\n\nimport Alert from '../widgets/alert.jsx';\nimport ContextMenu from '../widgets/context-menu.jsx';\nimport ForwardDialog from '../widgets/forward-dialog.jsx';\nimport CallIncoming from '../widgets/call-incoming.jsx';\nconst PhoneCountrySelector = React.lazy(_ => import('../widgets/phone-country-selector.jsx'));\n\nconst InfoView = React.lazy(_ => import('./info-view.jsx'));\nimport MessagesView from './messages-view.jsx';\nimport SidepanelView from './sidepanel-view.jsx';\n\nimport { API_KEY, APP_NAME, DEFAULT_COLOR_SCHEME, DEFAULT_P2P_ACCESS_MODE, DEFAULT_TEXT_SIZE, FORWARDED_PREVIEW_LENGTH,\n LOGGING_ENABLED, MEDIA_BREAKPOINT, WAKE_UP_TICK, WAKE_UP_TIMEOUT } from '../config.js';\nimport { CALL_STATE_NONE, CALL_STATE_OUTGOING_INITATED,\n CALL_STATE_INCOMING_RECEIVED, CALL_STATE_IN_PROGRESS,\n CALL_HEAD_STARTED } from '../constants.js';\nimport { PACKAGE_VERSION } from '../version.js';\nimport { base64ReEncode, makeImageUrl } from '../lib/blob-helpers.js';\nimport { detectServerAddress, isLocalHost, isSecureConnection } from '../lib/host-name.js';\nimport LocalStorageUtil from '../lib/local-storage.js';\nimport HashNavigation from '../lib/navigation.js';\nimport { secondsToTime } from '../lib/strformat.js'\nimport { defaultWallpaper, updateFavicon } from '../lib/utils.js';\n\n// Sound to play on message received.\nconst POP_SOUND = new Audio('audio/msg.m4a');\n\nconst messages = defineMessages({\n reconnect_countdown: {\n id: 'reconnect_countdown',\n defaultMessage: 'Disconnected. Reconnecting in {seconds}…',\n description: 'Message shown when an app update is available.'\n },\n reconnect_now: {\n id: 'reconnect_now',\n defaultMessage: 'Try now',\n description: 'Prompt for reconnecting now'\n },\n push_init_failed: {\n id: 'push_init_failed',\n defaultMessage: 'Failed to initialize push notifications',\n description: 'Error message when push notifications have failed to initialize.'\n },\n invalid_security_token: {\n id: 'invalid_security_token',\n defaultMessage: 'Invalid security token',\n description: 'Error message when resetting password.'\n },\n no_connection: {\n id: 'no_connection',\n defaultMessage: 'No connection',\n description: 'Warning that the user is offline.'\n },\n code_doesnot_match: {\n id: 'code_doesnot_match',\n defaultMessage: 'Code does not match',\n description: 'Error message when the credential validation code is incorrect.'\n },\n menu_item_info: {\n id: 'menu_item_info',\n defaultMessage: 'Info',\n description: 'Show extended topic information'\n },\n menu_item_audio_call: {\n id: 'menu_item_audio_call',\n defaultMessage: 'Call',\n description: 'Start audio call'\n },\n menu_item_video_call: {\n id: 'menu_item_video_call',\n defaultMessage: 'Video call',\n description: 'Start video call'\n },\n cred_confirmed_successfully: {\n id: 'cred_confirmed_successfully',\n defaultMessage: 'Confirmed successfully',\n description: 'Notification message that the credential was successfully validated.'\n },\n password_reset_success: {\n id: 'password_reset_success',\n defaultMessage: 'Password reset successfully',\n description: 'Notification message that the password was successfully reset.'\n },\n select_country: {\n id: 'select_country',\n defaultMessage: 'Select country',\n description: 'Placeholder for the country selector'\n }\n});\n\nclass TinodeWeb extends React.Component {\n constructor(props) {\n super(props);\n\n this.selfRef = React.createRef();\n\n this.state = this.getBlankState();\n\n this.handleResize = this.handleResize.bind(this);\n this.handleHashRoute = this.handleHashRoute.bind(this);\n this.handleOnline = this.handleOnline.bind(this);\n this.handleColorSchemeChange = this.handleColorSchemeChange.bind(this);\n this.checkForAppUpdate = this.checkForAppUpdate.bind(this);\n this.handleVisibilityEvent = this.handleVisibilityEvent.bind(this);\n this.handleError = this.handleError.bind(this);\n this.handleLoginRequest = this.handleLoginRequest.bind(this);\n this.handlePersistenceChange = this.handlePersistenceChange.bind(this);\n this.handleConnected = this.handleConnected.bind(this);\n this.handleAutoreconnectIteration = this.handleAutoreconnectIteration.bind(this);\n this.doLogin = this.doLogin.bind(this);\n this.handleLoginSuccessful = this.handleLoginSuccessful.bind(this);\n this.handleDisconnect = this.handleDisconnect.bind(this);\n this.tnMeMetaDesc = this.tnMeMetaDesc.bind(this);\n this.tnMeContactUpdate = this.tnMeContactUpdate.bind(this);\n this.tnMeSubsUpdated = this.tnMeSubsUpdated.bind(this);\n this.resetContactList = this.resetContactList.bind(this);\n this.tnInitFind = this.tnInitFind.bind(this);\n this.tnFndSubsUpdated = this.tnFndSubsUpdated.bind(this);\n this.handleSearchContacts = this.handleSearchContacts.bind(this);\n this.handleTopicSelected = this.handleTopicSelected.bind(this);\n this.handleHideMessagesView = this.handleHideMessagesView.bind(this);\n this.handleSendMessage = this.handleSendMessage.bind(this);\n this.handleNewChatInvitation = this.handleNewChatInvitation.bind(this);\n this.handleNewAccount = this.handleNewAccount.bind(this);\n this.handleNewAccountRequest = this.handleNewAccountRequest.bind(this);\n this.handleUpdatePasswordRequest = this.handleUpdatePasswordRequest.bind(this);\n this.handleUpdateAccountTagsRequest = this.handleUpdateAccountTagsRequest.bind(this);\n this.handleToggleIncognitoMode = this.handleToggleIncognitoMode.bind(this);\n this.handleChangeColorSchema = this.handleChangeColorSchema.bind(this);\n this.handleChangeTextSize = this.handleChangeTextSize.bind(this);\n this.handleSendOnEnter = this.handleSendOnEnter.bind(this);\n this.handleSelectWallpapers = this.handleSelectWallpapers.bind(this);\n this.handleWallpaperSelected = this.handleWallpaperSelected.bind(this);\n this.handleSettings = this.handleSettings.bind(this);\n this.handleGlobalSettings = this.handleGlobalSettings.bind(this);\n this.handleShowArchive = this.handleShowArchive.bind(this);\n this.handleShowBlocked = this.handleShowBlocked.bind(this);\n this.handleToggleMessageSounds = this.handleToggleMessageSounds.bind(this);\n this.handleCredAdd = this.handleCredAdd.bind(this);\n this.handleCredDelete = this.handleCredDelete.bind(this);\n this.handleCredConfirm = this.handleCredConfirm.bind(this);\n this.initFCMessaging = this.initFCMessaging.bind(this);\n this.toggleFCMToken = this.toggleFCMToken.bind(this);\n this.handlePushMessage = this.handlePushMessage.bind(this);\n this.handleSidepanelCancel = this.handleSidepanelCancel.bind(this);\n this.handleStartTopicRequest = this.handleStartTopicRequest.bind(this);\n this.handleNewTopicCreated = this.handleNewTopicCreated.bind(this);\n this.handleTopicUpdateRequest = this.handleTopicUpdateRequest.bind(this);\n this.handleUnarchive = this.handleUnarchive.bind(this);\n this.handleChangePermissions = this.handleChangePermissions.bind(this);\n this.handleTagsUpdateRequest = this.handleTagsUpdateRequest.bind(this);\n this.handleLogout = this.handleLogout.bind(this);\n this.handleDeleteAccount = this.handleDeleteAccount.bind(this);\n this.handleDeleteTopicRequest = this.handleDeleteTopicRequest.bind(this);\n this.handleDeleteMessagesRequest = this.handleDeleteMessagesRequest.bind(this);\n this.handleLeaveUnsubRequest = this.handleLeaveUnsubRequest.bind(this);\n this.handleBlockTopicRequest = this.handleBlockTopicRequest.bind(this);\n this.handleReportTopic = this.handleReportTopic.bind(this);\n this.handleShowContextMenu = this.handleShowContextMenu.bind(this);\n this.defaultTopicContextMenu = this.defaultTopicContextMenu.bind(this);\n this.handleHideContextMenu = this.handleHideContextMenu.bind(this);\n this.handleShowAlert = this.handleShowAlert.bind(this);\n this.handleShowInfoView = this.handleShowInfoView.bind(this);\n this.handleMemberUpdateRequest = this.handleMemberUpdateRequest.bind(this);\n this.handleValidateCredentialsRequest = this.handleValidateCredentialsRequest.bind(this);\n this.handlePasswordResetRequest = this.handlePasswordResetRequest.bind(this);\n this.handleResetPassword = this.handleResetPassword.bind(this);\n this.handleContextMenuAction = this.handleContextMenuAction.bind(this);\n this.handleShowCountrySelector = this.handleShowCountrySelector.bind(this);\n\n this.handleShowForwardDialog = this.handleShowForwardDialog.bind(this);\n this.handleHideForwardDialog = this.handleHideForwardDialog.bind(this);\n\n this.handleStartVideoCall = this.handleStartVideoCall.bind(this);\n this.handleStartAudioCall = this.handleStartAudioCall.bind(this);\n this.handleInfoMessage = this.handleInfoMessage.bind(this);\n this.handleDataMessage = this.handleDataMessage.bind(this);\n this.handleCallClose = this.handleCallClose.bind(this);\n\n this.handleCallInvite = this.handleCallInvite.bind(this);\n this.handleCallRinging = this.handleCallRinging.bind(this);\n this.handleCallHangup = this.handleCallHangup.bind(this);\n this.handleCallSendOffer = this.handleCallSendOffer.bind(this);\n this.handleCallIceCandidate = this.handleCallIceCandidate.bind(this);\n this.handleCallSendAnswer = this.handleCallSendAnswer.bind(this);\n\n this.handleCallAccept = this.handleCallAccept.bind(this);\n\n this.sendMessageToTopic = this.sendMessageToTopic.bind(this);\n\n // FIXME: this is unused.\n this.callTimeoutTimer = null;\n }\n\n getBlankState() {\n const settings = LocalStorageUtil.getObject('settings') || {};\n const persist = !!LocalStorageUtil.getObject('keep-logged-in');\n\n return {\n connected: false,\n // Connected and subscribed to 'me'\n ready: false,\n // Try to re-login on new connection.\n autoLogin: false,\n transport: settings.transport || null,\n serverAddress: settings.serverAddress || detectServerAddress(),\n secureConnection: settings.secureConnection === undefined ?\n isSecureConnection() : settings.secureConnection,\n serverVersion: \"no connection\",\n // \"On\" is the default, so saving the \"off\" state.\n messageSounds: !settings.messageSoundsOff,\n incognitoMode: false,\n colorSchema: settings.colorSchema || DEFAULT_COLOR_SCHEME, // default: system default\n textSize: settings.textSize || DEFAULT_TEXT_SIZE, // default size: 10pt\n sendOnEnter: settings.sendOnEnter || 'plain', // default: 'plain' (just Enter)\n // Persistent request to enable alerts.\n desktopAlerts: persist && !!settings.desktopAlerts,\n // Enable / disable checkbox.\n desktopAlertsEnabled: (isSecureConnection() || isLocalHost()) &&\n (typeof firebaseInitApp != 'undefined') && (typeof navigator != 'undefined') &&\n (typeof FIREBASE_INIT != 'undefined'),\n firebaseToken: persist ? LocalStorageUtil.getObject('firebase-token') : null,\n\n applicationVisible: !document.hidden,\n\n errorText: '',\n errorLevel: null,\n errorAction: undefined,\n errorActionText: null,\n\n sidePanelSelected: 'login',\n sidePanelTitle: null,\n sidePanelAvatar: null,\n myTrustedBadges: [],\n loadSpinnerVisible: false,\n\n login: '',\n password: '',\n persist: persist,\n myUserId: null,\n liveConnection: navigator.onLine,\n topicSelected: '',\n topicSelectedOnline: false,\n topicSelectedAcs: null,\n newTopicParams: null,\n loginDisabled: false,\n displayMobile: (window.innerWidth <= MEDIA_BREAKPOINT),\n infoPanel: undefined,\n mobilePanel: 'sidepanel',\n\n // Video calls.\n callTopic: undefined,\n callState: CALL_STATE_NONE,\n callAudioOnly: undefined,\n // If true, call state should be transitioned to CALL_STATE_IN_PROGRESS upon\n // switching to the call topic.\n callShouldStart: false,\n\n contextMenuVisible: false,\n contextMenuBounds: null,\n contextMenuClickAt: null,\n contextMenuParams: null,\n contextMenuItems: [],\n\n forwardDialogVisible: false,\n forwardMessage: null,\n\n // Modal alert dialog.\n alertVisible: false,\n alertParams: {},\n\n // Chats as shown in the ContactsView\n chatList: [],\n // Contacts returned by a search query.\n searchResults: [],\n // Merged results of a search query and p2p chats.\n searchableContacts: [],\n // Credential validation.\n reqCredMethod: undefined,\n credMethod: undefined,\n credCode: undefined,\n credToken: undefined,\n // Topic to go to after login.\n requestedTopic: undefined\n };\n }\n\n componentDidMount() {\n window.addEventListener('resize', this.handleResize);\n this.handleOnlineOn = _ => { this.handleOnline(true); }\n window.addEventListener('online', this.handleOnlineOn);\n this.handleOnlineOff = _ => { this.handleOnline(false); }\n window.addEventListener('offline', this.handleOnlineOff);\n window.addEventListener('hashchange', this.handleHashRoute);\n window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', this.handleColorSchemeChange);\n\n // Window/tab visible or invisible for pausing timers.\n document.addEventListener('visibilitychange', this.handleVisibilityEvent);\n\n document.documentElement.style.colorScheme = this.state.colorSchema;\n document.documentElement.style.setProperty('--message-text-size', `${this.state.textSize}pt`);\n\n const settings = LocalStorageUtil.getObject('settings') || {};\n if (!settings.wallpaper) {\n const wallpaper = defaultWallpaper();\n settings.wallpaper = wallpaper.name || '';\n settings.wallpaperSize = wallpaper.size || 0;\n settings.wallpaperBlur = 0;\n }\n this.applyWallpaperSettings(settings.wallpaper, settings.wallpaperSize, settings.wallpaperBlur);\n\n // Process background notifications from the service worker.\n if (typeof BroadcastChannel == 'function') {\n const serviceWorkerChannel = new BroadcastChannel('tinode-sw');\n serviceWorkerChannel.addEventListener('message', this.handlePushMessage);\n } else {\n // Safari is broken by design.\n console.warn(\"Your browser does not support BroadcastChannel. Some features will not be available\");\n }\n\n // Detect if computer just woke up from sleep. Checks how much time has passed since the last tick.\n // If too much time has passed then the computer was asleep.\n this.lastWakeUpCheck = new Date().getTime();\n this.wakeUpTicker = setInterval(_ => {\n const now = new Date().getTime();\n if (now - this.lastWakeUpCheck > WAKE_UP_TIMEOUT) {\n // Trigger reconnect.\n this.handleOnlineOn();\n }\n this.lastWakeUpCheck = now;\n }, WAKE_UP_TICK);\n\n this.setState({\n viewportWidth: document.documentElement.clientWidth,\n viewportHeight: document.documentElement.clientHeight\n });\n\n new Promise((resolve, reject) => {\n this.tinode = TinodeWeb.tnSetup(this.state.serverAddress, isSecureConnection(), this.state.transport,\n this.props.intl.locale, this.state.persist, resolve);\n this.tinode.onConnect = this.handleConnected;\n this.tinode.onDisconnect = this.handleDisconnect;\n this.tinode.onAutoreconnectIteration = this.handleAutoreconnectIteration;\n this.tinode.onInfoMessage = this.handleInfoMessage;\n this.tinode.onDataMessage = this.handleDataMessage;\n }).then(_ => {\n // Initialize desktop alerts.\n if (this.state.desktopAlertsEnabled) {\n this.initFCMessaging().catch(_ => {\n // do nothing: handled earlier.\n // catch needed to pervent unnecessary logging of error.\n });\n }\n\n // Read contacts from cache.\n this.resetContactList();\n\n const token = this.state.persist ? LocalStorageUtil.getObject('auth-token') : undefined;\n if (token) {\n this.setState({autoLogin: true});\n\n // When reading from storage, date is returned as string.\n token.expires = new Date(token.expires);\n this.tinode.setAuthToken(token);\n this.tinode.connect().catch(err => {\n // Socket error\n this.handleError(err.message, 'err');\n });\n }\n\n // Parse the hash navigation params.\n const parsedNav = HashNavigation.parseUrlHash(window.location.hash);\n // Maybe navigate to home screen.\n if (!['cred', 'reset', 'register'].includes(parsedNav.path[0])) {\n // Save possible topic name.\n this.setState({requestedTopic: parsedNav.path[1]});\n const path = parsedNav.params && parsedNav.params.cred_done ?\n HashNavigation.addUrlParam('', 'cred_done', parsedNav.params.cred_done):\n '';\n HashNavigation.navigateTo(path);\n } else {\n this.handleHashRoute();\n }\n });\n }\n\n componentWillUnmount() {\n window.removeEventListener('resize', this.handleResize);\n window.removeEventListener('hashchange', this.handleHashRoute);\n window.removeEventListener('online', this.handleOnlineOn);\n window.removeEventListener('offline', this.handleOnlineOff);\n window.matchMedia('(prefers-color-scheme: dark)').removeEventListener('change', this.handleColorSchemeChange);\n document.removeEventListener('visibilitychange', this.handleVisibilityEvent);\n\n clearInterval(this.wakeUpTicker);\n }\n\n // Setup transport (usually websocket) and server address. This will terminate connection with the server.\n static tnSetup(serverAddress, secureConnection, transport, locale, persistentCache, onSetupCompleted) {\n const tinode = new Tinode({appName: APP_NAME, host: serverAddress, apiKey: API_KEY, transport: transport,\n secure: secureConnection, persist: persistentCache}, onSetupCompleted);\n tinode.setHumanLanguage(locale);\n tinode.enableLogging(LOGGING_ENABLED, true);\n return tinode;\n }\n\n // Tinode received a push notification from the server.\n handlePushMessage(payload) {\n this.tinode.oobNotification(payload.data || {});\n }\n\n initFCMessaging() {\n const {formatMessage, locale} = this.props.intl;\n const onError = (msg, err) => {\n console.error(msg, err);\n this.handleError(formatMessage(messages.push_init_failed), 'err');\n this.setState({firebaseToken: null});\n LocalStorageUtil.updateObject('settings', {desktopAlerts: false});\n }\n\n try {\n this.fcm = firebaseGetMessaging(firebaseInitApp(FIREBASE_INIT, APP_NAME));\n return navigator.serviceWorker.getRegistration('/service-worker.js').then(reg => {\n return reg || navigator.serviceWorker.register('/service-worker.js').then(reg => {\n this.checkForAppUpdate(reg);\n return reg;\n });\n }).then(reg => {\n // Pass locale and version config to the service worker.\n (reg.active || reg.installing).postMessage(JSON.stringify({locale: locale, version: PACKAGE_VERSION}));\n // Request token.\n return TinodeWeb.requestFCMToken(this.fcm, reg);\n }).then(token => {\n const persist = LocalStorageUtil.getObject('keep-logged-in');\n if (token != this.state.firebaseToken) {\n this.tinode.setDeviceToken(token);\n if (persist) {\n LocalStorageUtil.setObject('firebase-token', token);\n }\n }\n this.setState({firebaseToken: token, desktopAlerts: true});\n if (persist) {\n LocalStorageUtil.updateObject('settings', {desktopAlerts: true});\n }\n\n // Handhe FCM pushes\n // (a) for channels always,\n // (b) pushes when the app is in foreground but has no focus.\n firebaseOnMessage(this.fcm, payload => { this.handlePushMessage(payload); });\n }).catch(err => {\n // SW registration or FCM has failed :(\n onError(err);\n throw err;\n });\n } catch (err) {\n onError(err);\n return Promise.reject(err);\n }\n }\n\n // Google's FCM API is idiotic.\n static requestFCMToken(fcm, sw) {\n return firebaseGetToken(fcm, {\n serviceWorkerRegistration: sw,\n vapidKey: FIREBASE_INIT.messagingVapidKey\n }).then(token => {\n if (token) {\n return token;\n } else if (typeof Notification != 'undefined') {\n // Try to request permissions.\n return Notification.requestPermission().then(permission => {\n if (permission === 'granted') {\n return firebaseGetToken(fcm, {\n serviceWorkerRegistration: reg,\n vapidKey: FIREBASE_INIT.messagingVapidKey\n }).then(token => {\n if (token) {\n return token;\n } else {\n throw new Error(\"Failed to initialize notifications\");\n }\n });\n } else {\n throw new Error(\"No permission to send notifications: \" + permission);\n }\n });\n }\n throw new Error(\"Notifications are not supported\");\n });\n }\n\n handleResize() {\n const mobile = document.documentElement.clientWidth <= MEDIA_BREAKPOINT;\n this.setState({\n viewportWidth: document.documentElement.clientWidth,\n viewportHeight: document.documentElement.clientHeight\n });\n if (this.state.displayMobile != mobile) {\n this.setState({displayMobile: mobile});\n }\n }\n\n // Check if a newer version of TinodeWeb app is available at the server.\n checkForAppUpdate(reg) {\n reg.onupdatefound = _ => {\n const installingWorker = reg.installing;\n installingWorker.onstatechange = _ => {\n if (installingWorker.state == 'installed' && navigator.serviceWorker.controller) {\n const msg = <>\n \n \n .;\n this.handleError(msg, 'info');\n }\n }\n }\n }\n\n // Handle for hash navigation (hashchange) event: update state.\n handleHashRoute() {\n const hash = HashNavigation.parseUrlHash(window.location.hash);\n // Start with panel parameters.\n const newState = {\n infoPanel: hash.params.info,\n newTopicTabSelected: hash.params.tab\n };\n\n if (hash.path && hash.path.length > 0) {\n // Left-side panel selector.\n if (['acc_general','archive','blocked','contacts','cred','crop','edit','general',\n 'newtpk','notif','register','reset','security','settings','support','wallpapers',\n ''].includes(hash.path[0])) {\n newState.sidePanelSelected = hash.path[0];\n } else {\n console.warn(\"Unknown sidepanel view\", hash.path[0]);\n }\n\n // Topic for MessagesView selector.\n let topicName = hash.path[1] || null;\n if (topicName != this.state.topicSelected) {\n if (!Tinode.topicType(topicName)) {\n // Clear invalid topic name and hide messages view on mobile.\n topicName = null;\n newState.mobilePanel = 'sidepanel';\n } else {\n // Topic valid: show messages view on mobile.\n newState.mobilePanel = 'topic-view';\n }\n Object.assign(newState, {\n topicSelected: topicName,\n topicSelectedAcs: this.tinode.getTopicAccessMode(topicName)\n });\n }\n } else {\n // Empty hashpath\n Object.assign(newState, {sidePanelSelected: '', topicSelected: null});\n }\n\n // Save credential validation parameters, if available.\n if (hash.params.method) {\n newState.credMethod = hash.params.method;\n }\n if (hash.params.code) {\n newState.credCode = hash.params.code;\n }\n if (hash.params.token) {\n newState.credToken = hash.params.token;\n }\n\n // Show a message if validation was successful.\n if (hash.params.cred_done) {\n Object.assign(newState,\n TinodeWeb.stateForError(this.props.intl.formatMessage(messages.cred_confirmed_successfully), 'info'));\n }\n\n this.setState(newState);\n }\n\n handleOnline(online) {\n if (online) {\n this.handleError();\n clearInterval(this.reconnectCountdown);\n this.tinode.reconnect();\n } else {\n this.handleError(this.props.intl.formatMessage(messages.no_connection), 'warn');\n }\n this.setState({liveConnection: online});\n }\n\n handleVisibilityEvent() {\n this.setState({applicationVisible: !document.hidden});\n }\n\n static stateForError(err, level, action, actionText) {\n return {\n errorText: err,\n errorLevel: level,\n errorAction: action,\n errorActionText: actionText,\n callShouldStart: false,\n };\n }\n\n handleError(err, level, action, actionText) {\n this.setState(TinodeWeb.stateForError(err, level, action, actionText));\n }\n\n // User clicked Login button in the side panel.\n handleLoginRequest(login, password) {\n this.setState({\n loginDisabled: true,\n login: login,\n password: password,\n loadSpinnerVisible: true,\n autoLogin: true\n });\n this.handleError('', null);\n\n if (this.tinode.isConnected()) {\n this.doLogin(login, password, null, {meth: this.state.credMethod, resp: this.state.credCode});\n } else {\n this.tinode.connect().catch(err => {\n // Socket error\n this.setState({loginDisabled: false, autoLogin: false, loadSpinnerVisible: false});\n this.handleError(err.message, 'err');\n });\n }\n\n if (this.state.desktopAlertsEnabled && !this.state.firebaseToken) {\n // Firefox and Safari: \"The Notification permission may only be requested from inside a\n // short running user-generated event handler\".\n this.initFCMessaging();\n }\n }\n\n // Enable or disable saving the password and IndexedDB.\n handlePersistenceChange(persist) {\n if (persist) {\n this.tinode.initStorage().then(_ => {\n LocalStorageUtil.setObject('keep-logged-in', true);\n this.setState({persist: true});\n });\n } else {\n this.tinode.clearStorage().then(_ => {\n LocalStorageUtil.setObject('keep-logged-in', false);\n this.setState({persist: false});\n });\n }\n }\n\n // Connection succeeded.\n handleConnected() {\n // Just to be sure.\n clearInterval(this.reconnectCountdown);\n this.handleError();\n\n const params = this.tinode.getServerInfo();\n this.setState({\n serverVersion: params.ver + ' ' + (params.build ? params.build : 'none'),\n // \"reqCred\":{\"auth\":[\"email\"]}\n reqCredMethod: ((params.reqCred || {}).auth || [])[0] || 'email'\n });\n\n if (this.state.autoLogin) {\n this.doLogin(this.state.login, this.state.password, null,\n {meth: this.state.credMethod, resp: this.state.credCode});\n }\n }\n\n // Called for each auto-reconnect iteration.\n handleAutoreconnectIteration(sec, prom) {\n clearInterval(this.reconnectCountdown);\n\n if (sec < 0) {\n // Clear error\n this.handleError();\n return;\n }\n\n if (prom) {\n // Reconnecting now\n prom.then(_ => {\n // Reconnected: clear error\n this.handleError();\n }).catch(err => {\n this.handleError(err.message, 'err');\n });\n return;\n }\n\n const {formatMessage} = this.props.intl;\n let count = sec / 1000;\n count = count | count;\n this.reconnectCountdown = setInterval(_ => {\n if (count < -10) {\n // Count could go to negative if computer woke up from sleep.\n clearInterval(this.reconnectCountdown);\n this.tinode.reconnect();\n return;\n }\n\n const fmtTime = (count > 99) ? secondsToTime(count) : count;\n this.handleError(\n formatMessage(messages.reconnect_countdown, {seconds: fmtTime}),\n 'warn',\n _ => {\n clearInterval(this.reconnectCountdown);\n this.tinode.reconnect();\n },\n formatMessage(messages.reconnect_now)\n );\n count -= 1;\n }, 1000);\n }\n\n // Connection lost\n handleDisconnect(err) {\n this.setState({\n connected: false,\n ready: false,\n topicSelectedOnline: false,\n errorText: err && err.message ? err.message : \"Disconnected\",\n errorLevel: err && err.message ? 'err' : 'warn',\n loginDisabled: false,\n contextMenuVisible: false,\n forwardDialogVisible: false,\n serverVersion: \"no connection\"\n });\n }\n\n doLogin(login, password, tmpToken, cred) {\n if (this.tinode.isAuthenticated()) {\n // Already logged in. Go to default screen.\n HashNavigation.navigateTo('');\n return;\n }\n\n let token = tmpToken || (this.tinode.getAuthToken() || {}).token;\n if (!(login && password) && !token) {\n // No login credentials provided.\n // Make sure we are on the login page.\n HashNavigation.navigateTo('');\n this.setState({loginDisabled: false});\n return;\n }\n\n // Sanitize and package credentail.\n cred = Tinode.credential(cred);\n // May be disconnected.\n let connectionPromise = this.tinode.isConnected() ? Promise.resolve() : this.tinode.connect();\n // Try to login with login/password. If they are not available, try token; if no token, ask for login/password.\n let loginPromise;\n if (login && password) {\n token = null;\n this.setState({password: null});\n loginPromise = connectionPromise.then(_ => this.tinode.loginBasic(login, password, cred));\n } else {\n loginPromise = connectionPromise.then(_ => this.tinode.loginToken(token, cred));\n }\n\n loginPromise.then(ctrl => {\n if (ctrl.code >= 300 && ctrl.text === 'validate credentials') {\n this.setState({loadSpinnerVisible: false});\n if (cred) {\n this.handleError(this.props.intl.formatMessage(messages.code_doesnot_match), 'warn');\n }\n TinodeWeb.navigateToCredentialsView(ctrl.params);\n } else {\n this.handleLoginSuccessful();\n }\n }).catch(err => {\n const autoLogin = err.code >= 500;\n // Connection or login failed, report error.\n this.setState({\n loginDisabled: false,\n credMethod: undefined,\n credCode: undefined,\n loadSpinnerVisible: false,\n autoLogin: autoLogin\n });\n this.handleError(err.message, 'err');\n console.warn(\"Login failed\", err);\n if (!autoLogin) {\n if (token) {\n this.handleLogout();\n }\n HashNavigation.navigateTo('');\n }\n });\n }\n\n static navigateToCredentialsView(params) {\n const parsed = HashNavigation.parseUrlHash(window.location.hash);\n parsed.path[0] = 'cred';\n parsed.params['method'] = params.cred[0];\n parsed.params['token'] = params.token;\n parsed.params['code'] = params.code;\n HashNavigation.navigateTo(HashNavigation.composeUrlHash(parsed.path, parsed.params));\n }\n\n handleLoginSuccessful() {\n this.handleError();\n\n // Refresh authentication token.\n if (LocalStorageUtil.getObject('keep-logged-in')) {\n LocalStorageUtil.setObject('auth-token', this.tinode.getAuthToken());\n }\n\n const goToTopic = this.state.requestedTopic;\n // Logged in fine, subscribe to 'me' attaching callbacks from the contacts view.\n const me = this.tinode.getMeTopic();\n me.onMetaDesc = this.tnMeMetaDesc;\n me.onContactUpdate = this.tnMeContactUpdate;\n me.onSubsUpdated = this.tnMeSubsUpdated;\n this.setState({\n connected: true,\n credMethod: undefined,\n credCode: undefined,\n credToken: undefined,\n myUserId: this.tinode.getCurrentUserID(),\n autoLogin: true,\n requestedTopic: undefined,\n });\n // Subscribe, fetch topic desc, the list of subscriptions. Messages are not fetched.\n me.subscribe(\n me.startMetaQuery().\n withLaterSub().\n withDesc().\n withTags().\n withCred().\n build()\n ).catch(err => {\n this.tinode.disconnect();\n localStorage.removeItem('auth-token');\n this.handleError(err.message, 'err');\n HashNavigation.navigateTo('');\n }).finally(_ => {\n this.setState({loadSpinnerVisible: false});\n });\n let urlHash = HashNavigation.setUrlSidePanel(window.location.hash, 'contacts');\n if (goToTopic) {\n urlHash = HashNavigation.setUrlTopic(urlHash, goToTopic);\n }\n HashNavigation.navigateTo(urlHash);\n }\n\n tnMeMetaDesc(desc) {\n if (!desc) {\n return;\n }\n\n if (desc.public) {\n this.setState({\n sidePanelTitle: desc.public.fn,\n sidePanelAvatar: makeImageUrl(desc.public.photo)\n });\n }\n\n if (desc.trusted) {\n const badges = [];\n for (const [key, val] of Object.entries(desc.trusted)) {\n if (val) {\n badges.push(key);\n }\n }\n this.setState({\n myTrustedBadges: badges,\n });\n }\n\n if (desc.acs) {\n this.setState({\n incognitoMode: !desc.acs.isPresencer()\n });\n }\n\n if (TinodeWeb.checkIfPinsUpdated(desc, this.state.chatList)) {\n this.resetContactList();\n }\n }\n\n // Reactions to updates to the contact list.\n tnMeContactUpdate(what, cont) {\n if (what == 'on' || what == 'off') {\n this.resetContactList();\n if (this.state.topicSelected == cont.topic) {\n this.setState({topicSelectedOnline: (what == 'on')});\n }\n } else if (what == 'read') {\n this.resetContactList();\n } else if (what == 'msg' && cont) {\n // Check if the topic is archived. If so, don't play a sound.\n const topic = this.tinode.getTopic(cont.topic);\n const archived = topic && topic.isArchived();\n\n // New message received. Maybe the message is from the current user, then unread is 0.\n if (cont.unread > 0 && this.state.messageSounds && !archived) {\n // Skip update if the topic is currently open, otherwise the badge will annoyingly flash.\n if (document.hidden || this.state.topicSelected != cont.topic) {\n POP_SOUND.play().catch(_ => {\n // play() throws if the user did not click the app first: https://goo.gl/xX8pDD.\n });\n }\n }\n // Reorder contact list to use possibly updated 'touched'.\n this.resetContactList();\n } else if (what == 'recv') {\n // Explicitly ignoring \"recv\" -- it causes no visible updates to contact list.\n } else if (what == 'gone' || what == 'unsub') {\n // Topic deleted or user unsubscribed. Remove topic from view.\n // If the currently selected topic is gone, clear the selection.\n if (this.state.topicSelected == cont.topic) {\n this.handleTopicSelected(null);\n }\n // Redraw without the deleted topic.\n this.resetContactList();\n } else if (what == 'acs') {\n // Permissions changed. If it's for the currently selected topic,\n // update the views.\n if (this.state.topicSelected == cont.topic) {\n this.setState({topicSelectedAcs: cont.acs});\n }\n } else if (what == 'del') {\n // TODO: messages deleted (hard or soft) -- update pill counter.\n } else if (what == 'upd' || what == 'call') {\n // upd, call - handled by the SDK. Explicitly ignoring here.\n } else {\n // TODO(gene): handle other types of notifications:\n // * ua -- user agent changes (maybe display a pictogram for mobile/desktop).\n console.info(\"Unsupported (yet) presence update:\", what, \"in\", (cont || {}).topic);\n }\n }\n\n tnMeSubsUpdated(unused) {\n this.resetContactList();\n }\n\n // Merge search results and contact list to create a single flat\n // list of known contacts for GroupManager to use.\n static prepareSearchableContacts(chatList, foundContacts) {\n const merged = {};\n\n // For chatList topics merge only p2p topics and convert them to the\n // same format as foundContacts.\n for (const c of chatList) {\n if (Tinode.isP2PTopicName(c.topic)) {\n merged[c.topic] = {\n user: c.topic,\n updated: c.updated,\n public: c.public,\n private: c.private,\n acs: c.acs\n };\n }\n }\n\n // Add all foundCountacts if they have not been added already.\n for (const c of foundContacts) {\n if (!merged[c.user]) {\n merged[c.user] = c;\n }\n }\n\n return Object.values(merged);\n }\n\n resetContactList() {\n const newState = {\n chatList: []\n };\n\n if (!this.state.ready) {\n newState.ready = true;\n }\n\n const me = this.tinode.getMeTopic();\n me.contacts(c => {\n if (!c.topic && !c.user) {\n // Contacts expect c.topic to be set.\n c.topic = c.name;\n }\n\n newState.chatList.push(c);\n if (this.state.topicSelected == c.topic) {\n newState.topicSelectedOnline = c.online;\n newState.topicSelectedAcs = c.acs;\n }\n });\n\n const past = new Date(0);\n newState.chatList.sort((a, b) => {\n // Pinned topics take precedence.\n const pins = me.pinnedTopicRank(b.topic) - me.pinnedTopicRank(a.topic);\n // Then sort by last touched time.\n return pins != 0 ? pins : (b.touched || past).getTime() - (a.touched || past).getTime();\n });\n\n // Merge search results and chat list.\n newState.searchableContacts = TinodeWeb.prepareSearchableContacts(newState.chatList, this.state.searchResults);\n this.setState(newState);\n }\n\n static checkIfPinsUpdated(me, chatList) {\n for (let i = 0; i < chatList.length; i++) {\n const c = chatList[i];\n if (!!me.pinnedTopicRank(c.topic) != c.pinned) {\n return true;\n }\n }\n return false;\n }\n\n /* Fnd topic: find contacts by tokens */\n tnInitFind() {\n const fnd = this.tinode.getFndTopic();\n fnd.onSubsUpdated = this.tnFndSubsUpdated;\n if (fnd.isSubscribed()) {\n this.tnFndSubsUpdated();\n } else {\n fnd.subscribe(fnd.startMetaQuery().withSub().build()).catch(err => {\n this.handleError(err.message, 'err');\n });\n }\n }\n\n tnFndSubsUpdated() {\n const foundContacts = [];\n // Don't attempt to create P2P topics which already exist. Server will reject the duplicates.\n this.tinode.getFndTopic().contacts((s) => {\n foundContacts.push(s);\n });\n this.setState({\n searchResults: foundContacts,\n searchableContacts: TinodeWeb.prepareSearchableContacts(this.state.chatList, foundContacts)\n });\n }\n\n /** Called when the user enters a contact into the contact search field in the NewAccount panel\n @param query {Array} is an array of contacts to search for\n */\n handleSearchContacts(query) {\n const fnd = this.tinode.getFndTopic();\n fnd.setMeta({desc: {public: query}})\n .then(_ => fnd.getMeta(fnd.startMetaQuery().withSub().build()))\n .catch(err => this.handleError(err.message, 'err'));\n }\n\n // User clicked on a topic in the side panel or deleted a topic.\n handleTopicSelected(topicName) {\n // Clear newTopicParams after use.\n if (this.state.newTopicParams && this.state.newTopicParams._topicName != topicName) {\n this.setState({\n newTopicParams: null\n });\n }\n\n if (topicName) {\n this.setState({\n errorText: '',\n errorLevel: null,\n mobilePanel: 'topic-view',\n infoPanel: undefined\n });\n // Different topic selected.\n if (this.state.topicSelected != topicName) {\n this.setState({\n topicSelectedOnline: this.tinode.isTopicOnline(topicName),\n topicSelectedAcs: this.tinode.getTopicAccessMode(topicName),\n forwardMessage: null\n });\n HashNavigation.navigateTo(HashNavigation.setUrlTopic('', topicName));\n }\n } else {\n // Currently selected contact deleted\n this.setState({\n topicSelected: null,\n errorText: '',\n errorLevel: null,\n mobilePanel: 'sidepanel',\n topicSelectedOnline: false,\n topicSelectedAcs: null,\n infoPanel: undefined,\n forwardMessage: null\n });\n\n HashNavigation.navigateTo(HashNavigation.setUrlTopic('', null));\n }\n }\n\n // In mobile view user requested to show sidepanel\n handleHideMessagesView() {\n this.setState({\n mobilePanel: 'sidepanel'\n });\n HashNavigation.navigateTo(HashNavigation.setUrlTopic(window.location.hash, null));\n }\n\n // User is sending a message, either plain text or a drafty object, possibly\n // with attachments.\n // - msg - Drafty message with content\n // - promise - Promise to be resolved when the upload is completed\n // - uploadCompletionPromise - for tracking progress\n // - head - head dictionary to be attached to the message\n handleSendMessage(msg, uploadCompletionPromise, uploader, head) {\n const topic = this.tinode.getTopic(this.state.topicSelected);\n /* TODO: check if return is required */\n return this.sendMessageToTopic(topic, msg, uploadCompletionPromise, uploader, head);\n }\n\n sendMessageToTopic(topic, msg, uploadCompletionPromise, uploader, head) {\n msg = topic.createMessage(msg, false);\n // The uploader is used to show progress.\n msg._uploader = uploader;\n\n if (head) {\n msg.head = Object.assign(msg.head || {}, head);\n }\n\n const completion = [];\n if (uploadCompletionPromise) {\n completion.push(uploadCompletionPromise);\n }\n\n if (!topic.isSubscribed()) {\n // Topic is not subscribed yet. Subscribe.\n const subscribePromise =\n topic.subscribe()\n .then(_ => {\n // If there are unsent messages (except video call messages),\n // try sending them now. Unsent video call messages will be dropped.\n let calls = [];\n topic.queuedMessages(pub => {\n if (pub._sending || pub.seq == msg.seq) {\n return;\n }\n if (pub.head && pub.head.webrtc) {\n // Filter out unsent video call messages.\n calls.push(pub.seq);\n return;\n }\n if (topic.isSubscribed()) {\n topic.publishMessage(pub);\n }\n });\n if (calls.length > 0) {\n topic.delMessagesList(calls, true);\n }\n });\n completion.push(subscribePromise);\n }\n\n // TODO: check if return is required.\n return topic.publishDraft(msg, Promise.all(completion))\n .then(ctrl => {\n if (topic.isArchived()) {\n topic.archive(false);\n }\n return ctrl;\n })\n .catch(err => this.handleError(err.message, 'err'));\n }\n\n handleNewChatInvitation(topicName, action) {\n const topic = this.tinode.getTopic(topicName);\n let response = null;\n switch (action) {\n case 'accept':\n // Accept given permissions.\n const mode = topic.getAccessMode().getGiven();\n response = topic.setMeta({sub: {mode: mode}});\n if (topic.isP2PType()) {\n // For P2P topics change 'given' permission of the peer too.\n // In p2p topics the other user has the same name as the topic.\n response = response.then(_ => topic.setMeta({sub: {user: topicName, mode: mode}}));\n }\n break;\n case 'delete':\n // Ignore invitation by deleting it.\n response = topic.delTopic(true);\n break;\n case 'block':\n // Ban the topic making futher invites impossible.\n // Just self-ban.\n const am = topic.getAccessMode().updateWant('-JP').getWant();\n response = topic.setMeta({sub: {mode: am}}).then(_ => this.handleTopicSelected(null));\n break;\n default:\n console.warn(\"Unknown invitation action\", '\"' + action + '\"\"');\n }\n\n if (response != null) {\n response.catch(err => this.handleError(err.message, 'err'));\n }\n }\n\n // User chose a Sign Up menu item.\n handleNewAccount() {\n this.handleError();\n\n HashNavigation.navigateTo(HashNavigation.setUrlSidePanel(window.location.hash, 'register'));\n }\n\n // Actual registration of a new account.\n handleNewAccountRequest(login_, password_, public_, cred_, tags_) {\n // Clear old error, if any.\n this.handleError();\n\n this.tinode.connect(this.state.serverAddress)\n .then(_ => {\n let attachments;\n if (public_ && public_.photo && public_.photo.ref) {\n attachments = [public_.photo.ref];\n }\n return this.tinode.createAccountBasic(login_, password_,\n {public: public_, tags: tags_, cred: Tinode.credential(cred_), attachments: attachments});\n }).then(ctrl => {\n if (ctrl.code >= 300 && ctrl.text == 'validate credentials') {\n TinodeWeb.navigateToCredentialsView(ctrl.params);\n } else {\n this.handleLoginSuccessful(this);\n }\n }).catch(err => {\n this.handleError(err.message, 'err');\n });\n }\n\n handleToggleIncognitoMode(on) {\n // Make state undefined.\n this.setState({incognitoMode: null});\n\n const me = this.tinode.getMeTopic();\n const am = me.getAccessMode().updateWant(on ? '-P' : '+P').getWant();\n me.setMeta({sub: {mode: am}}).catch(err => {\n // Request failed, keep existing state.\n this.setState({incognitoMode: !on});\n this.handleError(err.message, 'err');\n });\n }\n\n // Manual change of color scheme.\n handleChangeColorSchema(scheme) {\n this.setState({colorSchema: scheme});\n LocalStorageUtil.updateObject('settings', {colorSchema: scheme});\n document.documentElement.style.colorScheme = scheme;\n }\n\n // System color scheme has changed.\n handleColorSchemeChange(event) {\n console.log(\"Color scheme change:\", event.matches ? 'dark' : 'not dark');\n // this.setState({colorSchema: event.matches ? 'dark' : 'light'});\n // document.documentElement.style.setProperty('--wallpaper-invert', '0');\n }\n\n handleSelectWallpapers() {\n this.handleError();\n HashNavigation.navigateTo(HashNavigation.setUrlSidePanel(window.location.hash, 'wallpapers'));\n }\n\n applyWallpaperSettings(wallpaper, size, blur) {\n console.log(\"Applying wallpaper settings:\", wallpaper, size, blur);\n document.documentElement.style.setProperty('--wallpaper-url', `url('${wallpaper}')`);\n document.documentElement.style.setProperty('--wallpaper-repeat', size ? 'repeat' : 'no-repeat');\n document.documentElement.style.setProperty('--wallpaper-blur', size ? '0px' : `${blur}px`);\n document.documentElement.style.setProperty('--wallpaper-size', size ? `${size}px` : 'cover');\n document.documentElement.style.setProperty('--wallpaper-position', size ? 'unset' : 'center');\n }\n\n handleWallpaperSelected(wallpaper, size, blur) {\n this.handleError();\n LocalStorageUtil.updateObject('settings', {wallpaper: wallpaper, wallpaperSize: size, wallpaperBlur: blur});\n this.applyWallpaperSettings(wallpaper, size, blur);\n }\n\n handleChangeTextSize(size) {\n this.setState({textSize: size | 0});\n LocalStorageUtil.updateObject('settings', {textSize: size});\n document.documentElement.style.setProperty('--message-text-size', `${size}pt`);\n }\n\n handleSendOnEnter(option) {\n this.setState({sendOnEnter: option});\n LocalStorageUtil.updateObject('settings', {sendOnEnter: option});\n }\n\n handleUpdateAccountTagsRequest(_, tags) {\n this.tinode.getMeTopic().setMeta({tags: tags})\n .catch(err => this.handleError(err.message, 'err'));\n }\n\n // User chose Settings menu item.\n handleSettings() {\n this.handleError();\n\n HashNavigation.navigateTo(HashNavigation.setUrlSidePanel(window.location.hash,\n this.state.myUserId ? 'edit' : 'settings'));\n }\n\n // User updated global parameters.\n handleGlobalSettings(settings) {\n const serverAddress = settings.serverAddress || this.state.serverAddress;\n const transport = settings.transport || this.state.transport;\n const secureConnection = settings.secureConnection === undefined ?\n this.state.secureConnection : settings.secureConnection;\n if (this.tinode) {\n this.tinode.clearStorage();\n this.tinode.onDisconnect = undefined;\n this.tinode.disconnect();\n }\n this.tinode = TinodeWeb.tnSetup(serverAddress, secureConnection, transport,\n this.props.intl.locale, LocalStorageUtil.getObject('keep-logged-in'));\n this.tinode.onConnect = this.handleConnected;\n this.tinode.onDisconnect = this.handleDisconnect;\n this.tinode.onAutoreconnectIteration = this.handleAutoreconnectIteration;\n this.tinode.onInfoMessage = this.handleInfoMessage;\n this.tinode.onDataMessage = this.handleDataMessage;\n\n this.setState({\n serverAddress: serverAddress,\n transport: transport,\n secureConnection: secureConnection,\n });\n LocalStorageUtil.setObject('settings', {\n serverAddress: serverAddress,\n transport: transport,\n secureConnection: secureConnection,\n });\n\n HashNavigation.navigateTo(HashNavigation.setUrlSidePanel(window.location.hash, ''));\n }\n\n // User chose 'Archived chats'.\n handleShowArchive() {\n HashNavigation.navigateTo(HashNavigation.setUrlSidePanel(window.location.hash,\n this.state.myUserId ? 'archive' : ''));\n }\n\n // User viewes 'Blocked chats'.\n handleShowBlocked() {\n HashNavigation.navigateTo(HashNavigation.setUrlSidePanel(window.location.hash,\n this.state.myUserId ? 'blocked' : ''));\n }\n\n toggleFCMToken(enabled) {\n if (enabled) {\n this.setState({desktopAlerts: null});\n if (!this.state.firebaseToken) {\n this.initFCMessaging();\n } else {\n this.setState({desktopAlerts: true});\n if (LocalStorageUtil.getObject('keep-logged-in')) {\n LocalStorageUtil.updateObject('settings', {desktopAlerts: true});\n }\n }\n } else if (this.state.firebaseToken && this.fcm) {\n firebaseDelToken(this.fcm).catch(err => {\n console.error(\"Unable to delete token.\", err);\n }).finally(_ => {\n LocalStorageUtil.updateObject('settings', {desktopAlerts: false});\n localStorage.removeItem('firebase-token');\n this.setState({desktopAlerts: false, firebaseToken: null});\n // Inform the server that the token was deleted.\n this.tinode.setDeviceToken(null);\n });\n } else {\n this.setState({desktopAlerts: false, firebaseToken: null});\n LocalStorageUtil.updateObject('settings', {desktopAlerts: false});\n }\n }\n\n handleToggleMessageSounds(enabled) {\n this.setState({messageSounds: enabled});\n LocalStorageUtil.updateObject('settings', {\n messageSoundsOff: !enabled\n });\n }\n\n handleCredAdd(method, value) {\n const me = this.tinode.getMeTopic();\n me.setMeta({cred: {meth: method, val: value}})\n .catch(err => this.handleError(err.message, 'err'));\n }\n\n handleCredDelete(method, value) {\n const me = this.tinode.getMeTopic();\n me.delCredential(method, value)\n .catch(err => this.handleError(err.message, 'err'));\n }\n\n handleCredConfirm(method, response) {\n TinodeWeb.navigateToCredentialsView({cred: [method], code: response});\n }\n\n // User clicked Cancel button in Setting or Sign Up panel.\n handleSidepanelCancel() {\n const parsed = HashNavigation.parseUrlHash(window.location.hash);\n let path = '';\n if (['security','support','general','notif','acc_general'].includes(parsed.path[0])) {\n path = 'edit';\n } else if ('crop' == parsed.path[0]) {\n path = 'general';\n } else if ('blocked' == parsed.path[0]) {\n path = 'security';\n } else if ('wallpapers' == parsed.path[0]) {\n path = 'acc_general';\n } else if (this.state.myUserId) {\n path = 'contacts';\n }\n parsed.path[0] = path;\n if (parsed.params) {\n delete parsed.params.code;\n delete parsed.params.method;\n delete parsed.params.tab;\n delete parsed.params.scheme;\n delete parsed.params.token;\n }\n HashNavigation.navigateTo(HashNavigation.composeUrlHash(parsed.path, parsed.params));\n this.setState({errorText: '', errorLevel: null});\n }\n\n // Sidepanel navigator. No need to bind to 'this'.\n basicNavigator(hash) {\n HashNavigation.navigateTo(HashNavigation.setUrlSidePanel(window.location.hash, hash));\n }\n\n // Topic info navigator. No need to bind to 'this'.\n infoNavigator(hash) {\n HashNavigation.navigateTo(HashNavigation.setUrlInfoPanel(window.location.hash, hash));\n }\n\n // Request to start a topic, new or selected from search results, or \"by ID\".\n handleStartTopicRequest(topicName, newTopicParams, isChannel) {\n // Check if topic is indeed new. If not, launch it.\n if (topicName && this.tinode.isTopicCached(topicName)) {\n this.handleTopicSelected(topicName);\n return;\n }\n\n const params = {};\n if (Tinode.isP2PTopicName(topicName)) {\n // Because we are initiating the subscription, set 'want' to all permissions.\n params.sub = {mode: DEFAULT_P2P_ACCESS_MODE};\n // Give the other user all permissions too.\n params.desc = {defacs: {auth: DEFAULT_P2P_ACCESS_MODE}};\n } else {\n topicName = topicName || this.tinode.newGroupTopicName(isChannel);\n if (newTopicParams) {\n params.desc = {public: newTopicParams.public, private: {comment: newTopicParams.private}};\n params.tags = newTopicParams.tags;\n }\n }\n params._topicName = topicName;\n this.setState({newTopicParams: params}, _ => {this.handleTopicSelected(topicName)});\n }\n\n // New topic was created, here is the new topic name.\n handleNewTopicCreated(oldName, newName) {\n let nextState = {};\n if (this.state.callShouldStart) {\n nextState = {callState: CALL_STATE_IN_PROGRESS, callShouldStart: false};\n }\n if (this.state.topicSelected == oldName && oldName != newName) {\n // If the current URl contains the old topic name, replace it with new.\n // Update the name of the selected topic first so the navigator doen't clear\n // the state.\n nextState.topicSelected = newName;\n }\n this.setState(nextState, _ => {\n HashNavigation.navigateTo(HashNavigation.setUrlTopic('', newName));\n });\n }\n\n handleTopicUpdateRequest(topicName, pub, priv, defacs) {\n this.handleError();\n\n const topic = this.tinode.getTopic(topicName);\n if (topic) {\n const params = {};\n let attachments;\n if (pub) {\n if (pub.photo) {\n if (pub.photo.ref && pub.photo.ref != Tinode.DEL_CHAR) {\n attachments = [pub.photo.ref];\n } else if (!pub.photo.data || pub.photo.data == Tinode.DEL_CHAR) {\n pub.photo = Tinode.DEL_CHAR;\n }\n }\n params.public = pub;\n }\n\n if (typeof priv == 'string') {\n params.private = (priv === Tinode.DEL_CHAR) ?\n Tinode.DEL_CHAR : {comment: priv};\n }\n if (defacs) {\n params.defacs = defacs;\n }\n topic.setMeta({desc: params, attachments: attachments})\n .catch(err => this.handleError(err.message, 'err'));\n }\n }\n\n handleUnarchive(topicName) {\n const topic = this.tinode.getTopic(topicName);\n if (topic) {\n topic.archive(false).catch(err => this.handleError(err.message, 'err'));\n }\n }\n\n handleUpdatePasswordRequest(password) {\n this.handleError();\n\n if (password) {\n this.tinode.updateAccountBasic(null, this.tinode.getCurrentLogin(), password)\n .catch(err => this.handleError(err.message, 'err'));\n }\n }\n\n handleChangePermissions(topicName, mode, uid) {\n const topic = this.tinode.getTopic(topicName);\n if (topic) {\n const am = topic.getAccessMode();\n if (uid) {\n am.updateGiven(mode);\n mode = am.getGiven();\n } else {\n am.updateWant(mode);\n mode = am.getWant();\n }\n topic.setMeta({sub: {user: uid, mode: mode}})\n .catch(err => this.handleError(err.message, 'err'));\n }\n }\n\n handleTagsUpdateRequest(topicName, tags) {\n const topic = this.tinode.getTopic(topicName);\n if (topic) {\n topic.setMeta({tags: tags})\n .catch(err => this.handleError(err.message, 'err'));\n }\n }\n\n handleLogout() {\n updateFavicon(0);\n\n // Remove stored data.\n localStorage.removeItem('auth-token');\n localStorage.removeItem('firebase-token');\n localStorage.removeItem('settings');\n if (this.state.firebaseToken) {\n firebaseDelToken(this.fcm);\n }\n\n // Reset color scheme.\n document.documentElement.style.colorScheme = DEFAULT_COLOR_SCHEME;\n document.documentElement.style.setProperty('--message-text-size', `${DEFAULT_TEXT_SIZE}pt`);\n\n clearInterval(this.reconnectCountdown);\n\n let cleared;\n if (this.tinode) {\n cleared = this.tinode.clearStorage();\n this.tinode.onDisconnect = undefined;\n this.tinode.disconnect();\n } else {\n cleared = Promose.resolve();\n }\n this.setState(this.getBlankState());\n\n cleared.then(_ => {\n this.tinode = TinodeWeb.tnSetup(this.state.serverAddress, isSecureConnection(),\n this.state.transport, this.props.intl.locale, LocalStorageUtil.getObject('keep-logged-in'), _ => {\n this.tinode.onConnect = this.handleConnected;\n this.tinode.onDisconnect = this.handleDisconnect;\n this.tinode.onAutoreconnectIteration = this.handleAutoreconnectIteration;\n this.tinode.onInfoMessage = this.handleInfoMessage;\n this.tinode.onDataMessage = this.handleDataMessage;\n HashNavigation.navigateTo('');\n })\n });\n }\n\n handleDeleteAccount() {\n this.tinode.delCurrentUser(true).then(_ => {\n this.handleLogout();\n });\n }\n\n handleDeleteTopicRequest(topicName) {\n const topic = this.tinode.getTopic(topicName);\n if (!topic) {\n return;\n }\n\n // Request to hard-delete topic.\n topic.delTopic(true).then(_ => {\n // Hide MessagesView and InfoView panels.\n HashNavigation.navigateTo(HashNavigation.setUrlTopic(window.location.hash, ''));\n }).catch(err => {\n this.handleError(err.message, 'err');\n });\n }\n\n handleDeleteMessagesRequest(topicName) {\n const topic = this.tinode.getTopic(topicName);\n if (!topic) {\n return;\n }\n\n // Request hard-delete all messages.\n topic.delMessagesAll(true)\n .catch(err => this.handleError(err.message, 'err'));\n }\n\n handleLeaveUnsubRequest(topicName) {\n const topic = this.tinode.getTopic(topicName);\n if (!topic) {\n return;\n }\n\n topic.leave(true).then(_ => {\n // Hide MessagesView and InfoView panels.\n HashNavigation.navigateTo(HashNavigation.setUrlTopic(window.location.hash, ''));\n }).catch(err => {\n this.handleError(err.message, 'err');\n });\n }\n\n handleBlockTopicRequest(topicName) {\n const topic = this.tinode.getTopic(topicName);\n if (!topic) {\n return;\n }\n\n topic.updateMode(null, '-JP')\n .then(_ => {\n // Hide MessagesView and InfoView panels.\n HashNavigation.navigateTo(HashNavigation.setUrlTopic(window.location.hash, ''));\n })\n .catch(err => this.handleError(err.message, 'err'));\n }\n\n handleReportTopic(topicName) {\n const topic = this.tinode.getTopic(topicName);\n if (!topic) {\n return;\n }\n\n // Publish spam report.\n this.tinode.report('report', topicName);\n\n // Remove J and P permissions.\n topic.updateMode(null, '-JP')\n .then(_ => {\n // Hide MessagesView and InfoView panels.\n HashNavigation.navigateTo(HashNavigation.setUrlTopic(window.location.hash, ''));\n })\n .catch(err => this.handleError(err.message, 'err'));\n }\n\n handleShowContextMenu(params, menuItems) {\n this.setState({\n contextMenuVisible: true,\n contextMenuClickAt: {x: params.x, y: params.y},\n contextMenuParams: params,\n contextMenuItems: menuItems || this.defaultTopicContextMenu(params.topicName),\n contextMenuBounds: this.selfRef.current.getBoundingClientRect()\n });\n }\n\n //\n handleShowForwardDialog(params) {\n if (this.state.sidePanelSelected == 'newtpk') {\n // If the Find panel is active, close it.\n this.handleSidepanelCancel();\n }\n const header = '➦ ' + params.userName;\n const content = typeof params.content == 'string' ? Drafty.init(params.content) : Drafty.forwardedContent(params.content);\n const preview = Drafty.preview(content, FORWARDED_PREVIEW_LENGTH, true);\n const msg = Drafty.append(Drafty.appendLineBreak(Drafty.mention(header, params.userFrom)), content);\n const msgPreview = Drafty.quote(header, params.userFrom, preview);\n\n const head = {\n forwarded: params.topicName + ':' + params.seq\n };\n this.setState({\n forwardDialogVisible: true,\n forwardMessage: { head: head, msg: msg, preview: msgPreview }\n });\n }\n\n defaultTopicContextMenu(topicName) {\n const topic = this.tinode.getTopic(topicName);\n\n if (topic._deleted) {\n return [\n 'topic_delete'\n ];\n }\n\n const me = this.tinode.getMeTopic();\n let muted = false, blocked = false, self_blocked = false, subscribed = false, deleter = false,\n archived = false, pinned = false, webrtc = false, writer = false, p2p = false, self = false;\n if (topic) {\n subscribed = topic.isSubscribed();\n archived = topic.isArchived();\n pinned = me.pinnedTopicRank(topicName) > 0;\n\n const acs = topic.getAccessMode();\n if (acs) {\n muted = acs.isMuted();\n blocked = !acs.isJoiner();\n self_blocked = !acs.isJoiner('want');\n deleter = acs.isDeleter();\n writer = acs.isWriter();\n }\n }\n\n webrtc = writer && !!this.tinode.getServerParam('iceServers');\n p2p = Tinode.isP2PTopicName(topicName);\n self = Tinode.isSelfTopicName(topicName);\n\n return [\n subscribed ? {\n title: this.props.intl.formatMessage(messages.menu_item_info),\n handler: this.handleShowInfoView\n } : null,\n subscribed && p2p && webrtc ? {\n title: this.props.intl.formatMessage(messages.menu_item_audio_call),\n handler: this.handleStartAudioCall\n } : null,\n subscribed && p2p && webrtc ? {\n title: this.props.intl.formatMessage(messages.menu_item_video_call),\n handler: this.handleStartVideoCall\n } : null,\n subscribed ? 'messages_clear' : null,\n subscribed && deleter && !self ? 'messages_clear_hard' : null,\n self ? null : (muted ? (blocked ? null : 'topic_unmute') : 'topic_mute'),\n self ? null : (self_blocked ? 'topic_unblock' : 'topic_block'),\n pinned ? 'topic_unpin' : 'topic_pin',\n archived ? 'topic_restore' : 'topic_archive',\n 'topic_delete'\n ];\n }\n\n handleHideContextMenu() {\n this.setState({\n contextMenuVisible: false,\n contextMenuClickAt: null,\n contextMenuParams: null,\n contextMenuBounds: null\n });\n }\n\n handleHideForwardDialog(keepForwardedMessage) {\n this.setState({\n forwardDialogVisible: false,\n forwardMessage: keepForwardedMessage ? this.state.forwardMessage : null\n });\n }\n\n handleContextMenuAction(action, promise, params) {\n if (action == 'topic_archive') {\n if (promise && params.topicName && params.topicName == this.state.topicSelected) {\n promise.then(_ => {\n this.handleTopicSelected(null);\n });\n }\n } else if (action == 'menu_item_forward') {\n this.handleShowForwardDialog(params);\n }\n }\n\n handleShowAlert(title, content, onConfirm, confirmText, onReject, rejectText) {\n this.setState({\n alertVisible: true,\n alertParams: {\n title: title,\n content: content,\n onConfirm: onConfirm,\n confirm: confirmText,\n onReject: onReject,\n reject: rejectText\n }\n });\n }\n\n handleShowInfoView() {\n HashNavigation.navigateTo(HashNavigation.addUrlParam(window.location.hash, 'info', 'info'));\n this.setState({infoPanel: 'info'});\n }\n\n handleMemberUpdateRequest(topicName, added, removed) {\n if (!topicName) {\n return;\n }\n\n const topic = this.tinode.getTopic(topicName);\n if (!topic) {\n return;\n }\n\n if (added && added.length > 0) {\n added.forEach(uid => {\n topic.invite(uid, null)\n .catch(err => this.handleError(err.message, 'err'));\n });\n }\n\n if (removed && removed.length > 0) {\n removed.forEach(uid => {\n topic.delSubscription(uid)\n .catch(err => this.handleError(err.message, 'err'));\n });\n }\n }\n\n handleValidateCredentialsRequest(cred, code, token) {\n if (this.tinode.isAuthenticated()) {\n // Adding new email or phone number in account setting.\n this.tinode.getMeTopic().setMeta({cred: {meth: cred, resp: code}})\n .then(_ => HashNavigation.navigateTo(HashNavigation.setUrlSidePanel(window.location.hash, 'contacts')))\n .catch(err => this.handleError(err.message, 'err'));\n } else {\n // Credential validation on signup.\n this.setState({credMethod: cred, credCode: code, credToken: token});\n this.doLogin(null, null, token, {meth: cred, resp: code});\n }\n }\n\n handlePasswordResetRequest(method, value) {\n // If already connected, connnect() will return a resolved promise.\n return this.tinode.connect()\n .then(_ => this.tinode.requestResetAuthSecret('basic', method, value))\n .catch(err => {\n // Socket error\n this.handleError(err.message, 'err');\n });\n }\n\n handleResetPassword(newPassword, tempAuth) {\n const secret = base64ReEncode(tempAuth.secret);\n if (!secret || !tempAuth.scheme) {\n this.handleError(this.props.intl.formatMessage(messages.invalid_security_token), 'err');\n } else {\n this.tinode.connect()\n .then(_ => this.tinode.updateAccountBasic(null, null, newPassword, {scheme: tempAuth.scheme, secret: secret}))\n .then(_ => {\n this.handleError(this.props.intl.formatMessage(messages.password_reset_success), 'info');\n HashNavigation.navigateTo('');\n })\n .catch(err => {\n this.handleError(err.message, 'err');\n });\n }\n }\n\n handleShowCountrySelector(code, dial, selectedCallback) {\n this.handleShowAlert(this.props.intl.formatMessage(messages.select_country),\n }>\n {\n this.setState({alertVisible: false});\n selectedCallback(c, d);\n }} />\n ,\n null, null, _ => {}, null);\n }\n\n handleStartVideoCall() {\n this.setState({\n callTopic: this.state.topicSelected,\n callState: CALL_STATE_OUTGOING_INITATED,\n callAudioOnly: false\n });\n }\n\n handleStartAudioCall() {\n this.setState({\n callTopic: this.state.topicSelected,\n callState: CALL_STATE_OUTGOING_INITATED,\n callAudioOnly: true\n });\n }\n\n handleCallInvite(callTopic, callSeq, callState, audioOnly) {\n switch (callState) {\n case CALL_STATE_OUTGOING_INITATED:\n const head = { webrtc: CALL_HEAD_STARTED, aonly: !!audioOnly };\n return this.handleSendMessage(Drafty.videoCall(audioOnly), undefined, undefined, head)\n .then(ctrl => {\n if (ctrl.code < 200 || ctrl.code >= 300 || !ctrl.params || !ctrl.params.seq) {\n this.handleCallClose();\n return ctrl;\n }\n this.setState({callSeq: ctrl.params['seq']});\n return ctrl\n });\n case CALL_STATE_IN_PROGRESS:\n const topic = this.tinode.getTopic(callTopic);\n if (!topic) {\n return;\n }\n // We've accepted the call. Let the other side know.\n topic.videoCall('accept', callSeq);\n break;\n }\n }\n\n handleCallRinging(callTopic, callSeq) {\n const topic = this.tinode.getTopic(callTopic);\n if (!topic) {\n return;\n }\n\n topic.videoCall('ringing', callSeq);\n }\n\n handleCallHangup(callTopic, callSeq) {\n const topic = this.tinode.getTopic(callTopic);\n if (!topic) {\n return;\n }\n\n topic.videoCall('hang-up', callSeq);\n }\n\n handleCallSendOffer(callTopic, callSeq, sdp) {\n const topic = this.tinode.getTopic(callTopic);\n if (!topic) {\n return;\n }\n\n topic.videoCall('offer', callSeq, sdp);\n }\n\n handleCallIceCandidate(callTopic, callSeq, candidate) {\n const topic = this.tinode.getTopic(callTopic);\n if (!topic) {\n return;\n }\n\n topic.videoCall('ice-candidate', callSeq, candidate);\n }\n handleCallSendAnswer(callTopic, callSeq, sdp) {\n const topic = this.tinode.getTopic(callTopic);\n if (!topic) {\n return;\n }\n\n topic.videoCall('answer', callSeq, sdp);\n }\n\n handleCallClose() {\n if (this.callTimeoutTimer) {\n clearTimeout(this.callTimeoutTimer);\n }\n this.setState({\n callTopic: undefined,\n callState: CALL_STATE_NONE,\n callAudioOnly: undefined\n });\n }\n\n handleCallAccept(topicName, setCallTopic, callSeq) {\n const topic = this.tinode.getTopic(topicName);\n if (!topic) {\n return;\n }\n if (topic.isSubscribed()) {\n this.handleTopicSelected(setCallTopic ? topicName : this.state.callTopic);\n const upd = {\n callState: CALL_STATE_IN_PROGRESS\n };\n if (setCallTopic) {\n upd.callTopic = topicName;\n upd.callSeq = callSeq;\n }\n this.setState(upd);\n } else {\n // We need to switch and subscribe to callTopic first.\n this.setState({\n callShouldStart: true,\n }, _ => this.handleTopicSelected(this.state.callTopic));\n }\n }\n\n handleInfoMessage(info) {\n if (info.what != 'call') {\n return;\n }\n switch (info.event) {\n case 'accept':\n // If another my session has accepted the call.\n if (Tinode.isMeTopicName(info.topic) && this.tinode.isMe(info.from)) {\n this.setState({\n callTopic: null,\n callState: CALL_STATE_NONE,\n callSeq: null,\n callAudioOnly: undefined\n });\n return;\n }\n if (info.topic == this.state.callTopic) {\n // Update state.\n this.setState({callState: CALL_STATE_IN_PROGRESS});\n }\n break;\n case 'hang-up':\n // Remote hangup.\n this.handleCallClose();\n break;\n }\n }\n\n handleDataMessage(data) {\n if (data.head && data.head.webrtc && data.head.webrtc == CALL_HEAD_STARTED && Tinode.isP2PTopicName(data.topic)) {\n // If it's a video call invite message.\n // See if we need to display incoming call UI.\n const topic = this.tinode.getTopic(data.topic);\n if (topic) {\n // Check if a later version of the message exists (which means the call\n // has been either accepted or finished already).\n const msg = topic.latestMsgVersion(data.seq) || data;\n if (msg.head && msg.head.webrtc && msg.head.webrtc == CALL_HEAD_STARTED) {\n // This is a legit new call.\n if (data.from != this.state.myUserId) {\n if (this.state.callState == CALL_STATE_NONE) {\n // Incoming call.\n this.setState({\n callTopic: data.topic,\n callState: CALL_STATE_INCOMING_RECEIVED,\n callSeq: data.seq,\n callAudioOnly: !!msg.head.aonly\n });\n } else {\n // Another call is either in progress or being established.\n // Reject the incoming call.\n this.handleCallHangup(data.topic, data.seq);\n }\n }\n }\n } else {\n console.warn(\"Received vc data message from unknown topic\", data.topic);\n }\n }\n }\n\n render() {\n return (\n
\n {this.state.contextMenuVisible ?\n {\n if (topicName == this.state.topicSelected) {\n this.handleTopicSelected(null);\n }\n }}\n onError={this.handleError} />\n :\n null\n }\n {this.state.forwardDialogVisible ?\n \n :\n null\n }\n {this.state.callTopic && this.state.callState == CALL_STATE_INCOMING_RECEIVED ?\n \n :\n null\n }\n {this.state.alertVisible ?\n this.setState({alertVisible: false})) : null}\n reject={this.state.alertParams.reject}\n onConfirm={this.state.alertParams.onConfirm ?\n (_ => {this.setState({alertVisible: false}); this.state.alertParams.onConfirm();}) : null}\n confirm={this.state.alertParams.confirm}\n /> : null}\n\n {!this.state.displayMobile || this.state.mobilePanel == 'sidepanel' ?\n \n : null}\n\n {!this.state.displayMobile || (this.state.mobilePanel == 'topic-view' && !this.state.infoPanel) ?\n \n : null}\n\n {this.state.infoPanel ?\n
}>\n \n \n :\n null\n }\n \n );\n }\n};\n\nexport default injectIntl(TinodeWeb);\n","// View for editing topic parameters (including 'me' topic).\n\nimport React from 'react';\n\nimport TopicDescEdit from '../widgets/topic-desc-edit.jsx';\n\nimport { arrayEqual } from '../lib/utils.js';\n\nexport default class TopicCommonView extends React.Component {\n constructor(props) {\n super(props);\n\n const topic = this.props.tinode.getTopic(this.props.topic);\n const acs = topic.getAccessMode();\n this.state = {\n tags: []\n };\n\n this.previousTagsUpdated = undefined;\n\n this.onTagsUpdated = this.onTagsUpdated.bind(this);\n this.handleTagsUpdated = this.handleTagsUpdated.bind(this);\n }\n\n // No need to separately handle component mount.\n componentDidUpdate(props) {\n const topic = this.props.tinode.getTopic(props.topic);\n if (!topic) {\n return;\n }\n\n if (topic.onTagsUpdated != this.onTagsUpdated) {\n if (topic.getType() == 'grp') {\n this.previousTagsUpdated = topic.onTagsUpdated;\n topic.onTagsUpdated = this.onTagsUpdated;\n } else {\n this.previousTagsUpdated = undefined;\n }\n }\n\n if (this.state.topic != props.topic) {\n this.setState({topic: props.topic});\n }\n }\n\n componentWillUnmount() {\n const topic = this.props.tinode.getTopic(this.props.topic);\n topic.onTagsUpdated = this.previousTagsUpdated;\n }\n\n // Server informs that the tags have been updated.\n onTagsUpdated(tags) {\n this.setState({tags: tags});\n\n if (this.previousTagsUpdated && this.previousTagsUpdated != this.onTagsUpdated) {\n this.previousTagsUpdated(tags);\n }\n }\n\n // Request server to change tags.\n handleTagsUpdated(tags) {\n if (!arrayEqual(this.state.tags.slice(0), tags.slice(0))) {\n this.props.onUpdateTagsRequest(this.props.topic, tags);\n }\n }\n\n render() {\n return (\n
\n \n
\n );\n }\n};\n","// ValidationView: panel for confirming credentials, like email or phone.\nimport React from 'react';\nimport { FormattedMessage, defineMessages, injectIntl } from 'react-intl';\n\nconst messages = defineMessages({\n phone: {\n id: 'phone_dative',\n defaultMessage: 'phone',\n description: \"Dative case of 'phone', i.e. 'phone' in 'by phone'\",\n },\n email: {\n id: 'email_dative',\n defaultMessage: 'email',\n description: \"Dative case of 'email', i.e. 'email' in 'by email'\",\n }\n});\n\nclass ValidationView extends React.PureComponent {\n constructor(props) {\n super(props);\n\n this.state = {\n code: props.credCode || '',\n codeReceived: props.credCode\n };\n\n this.handleCodeChange = this.handleCodeChange.bind(this);\n this.handleKeyPress = this.handleKeyPress.bind(this);\n this.handleSubmit = this.handleSubmit.bind(this);\n this.handleCancel = this.handleCancel.bind(this);\n }\n\n static getDerivedStateFromProps(nextProps, prevState) {\n if (nextProps.credCode != prevState.codeReceived) {\n return {\n code: nextProps.credCode || '',\n codeReceived: nextProps.credCode\n };\n }\n\n return prevState;\n }\n\n componentDidMount() {\n // Submit code automatically if it's received from the parent.\n if (this.props.credCode) {\n this.props.onSubmit(this.props.credMethod, this.props.credCode, this.props.credToken);\n }\n }\n\n componentDidUpdate(prevProps, prevState) {\n // Submit code automatically if it's received from the parent.\n if (this.state.codeReceived && this.state.code && this.state.code != prevState.code) {\n this.props.onSubmit(this.props.credMethod, this.state.code, this.props.credToken);\n }\n }\n\n\n handleCodeChange(e) {\n this.setState({code: e.target.value.replace(/[^\\d]/g, '')});\n }\n\n handleKeyPress(e) {\n if (e.key === 'Enter') {\n this.handleSubmit(e);\n } else if (e.key == 'Escape') {\n this.handleCancel(e);\n }\n }\n\n handleSubmit(e) {\n e.preventDefault();\n if (this.state.code && this.state.code.trim()) {\n this.props.onSubmit(this.props.credMethod, this.state.code.trim(), this.props.credToken);\n }\n }\n\n handleCancel(e) {\n e.preventDefault();\n this.props.onCancel();\n }\n\n render() {\n const { formatMessage } = this.props.intl;\n const methods = {'email': formatMessage(messages.email), 'tel': formatMessage(messages.phone)};\n const method = methods[this.props.credMethod] || this.props.credMethod;\n return (\n
\n
\n \n
\n
\n {\n (numbers_only) => \n }\n
\n
\n \n \n
\n
\n );\n }\n};\n\nexport default injectIntl(ValidationView);\n","import React from 'react';\nimport { FormattedMessage } from 'react-intl';\n\nexport default class Alert extends React.PureComponent {\n render() {\n return (
\n
\n
{this.props.title}
\n
{this.props.content}
\n
\n {this.props.onReject ?\n \n :\n null\n }\n {this.props.onConfirm ?\n \n :\n null\n }\n
\n
\n
);\n }\n};\n","import React from 'react';\nimport { FormattedMessage } from 'react-intl';\n\nimport FileProgress from './file-progress.jsx';\nimport { bytesToHumanSize } from '../lib/strformat.js';\nimport { isUrlRelative, sanitizeUrl } from '../lib/utils.js';\n\nexport default class Attachment extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n downloader: null,\n progress: 0\n };\n\n this.downloadFile = this.downloadFile.bind(this);\n this.handleCancel = this.handleCancel.bind(this);\n }\n\n downloadFile(url, filename, mimetype) {\n if (!url) {\n this.props.onError(\"Invalid download URL '\" + url + \"'\");\n return;\n }\n\n const downloader = this.props.tinode.getLargeFileHelper();\n this.setState({downloader: downloader});\n downloader.download(url, filename, mimetype,\n loaded => this.setState({progress: loaded / this.props.size}),\n err => this.props.onError(err, 'err')\n )\n .then(_ => this.setState({downloader: null, progress: 0}))\n .catch(err => {\n if (err) {\n this.props.onError(\"Error downloading file: \" + err.message, 'err');\n }\n this.setState({downloader: null, progress: 0});\n });\n }\n\n handleCancel() {\n if (this.props.uploading) {\n this.props.onCancelUpload();\n } else if (this.state.downloader) {\n this.state.downloader.cancel();\n }\n }\n\n render() {\n let filename = this.props.filename || 'file_attachment';\n if (filename.length > 36) {\n filename = filename.substr(0, 16) + '...' + filename.substr(-16);\n }\n let size = this.props.size > 0 ?\n ({bytesToHumanSize(this.props.size)}) :\n null;\n\n // Detect if the download URL is relative or absolute.\n // If the URL is relative use LargeFileHelper to attach authentication\n // credentials to the request.\n let url, helperFunc;\n if (!this.props.uploading && !this.state.downloader && isUrlRelative(this.props.downloadUrl)) {\n // Relative URL. Use download helper.\n url = '#';\n helperFunc = (e) => {\n e.preventDefault();\n this.downloadFile(this.props.downloadUrl, this.props.filename, this.props.mimetype);\n };\n } else {\n url = sanitizeUrl(this.props.downloadUrl);\n helperFunc = null;\n }\n const downloadWidget = <>file_download ;\n return (\n
\n
insert_drive_file
\n
\n
{filename} {size}
\n {this.props.uploading || this.state.downloader ?\n \n :\n
{url ?\n {downloadWidget}\n :\n {downloadWidget}\n }
\n }\n
\n
\n );\n }\n};\n","// Audio recorder widget.\n\nimport React from 'react';\nimport { defineMessages, injectIntl } from 'react-intl';\n\nimport { secondsToTime } from '../lib/strformat';\nimport { base64ToIntArray } from '../lib/blob-helpers';\n\n// Make canvas bigger than the element size to reduce blurring.\nconst CANVAS_UPSCALING = 2.0;\n// Thickness of a visualization bar.\nconst LINE_WIDTH = 3 * CANVAS_UPSCALING;\n// Spacing between two visualization bars.\nconst SPACING = 2 * CANVAS_UPSCALING;\n// Color of histogram bars.\nconst BAR_COLOR = '#888A';\nconst BAR_COLOR_DARK = '#666C';\nconst THUMB_COLOR = '#444E';\n// Minimum number of amplitude bars to draw.\nconst MIN_PREVIEW_LENGTH = 16;\n\nconst messages = defineMessages({\n icon_title_play: {\n id: 'icon_title_play',\n defaultMessage: 'Play recording',\n description: 'Icon tool tip for starting audio playback'\n }\n});\n\nclass AudioPlayer extends React.PureComponent {\n constructor(props) {\n super(props);\n\n let preview = base64ToIntArray(this.props.preview);\n if (!Array.isArray(preview) || preview.length < MIN_PREVIEW_LENGTH) {\n preview = null;\n }\n\n this.state = {\n canPlay: false,\n playing: false,\n currentTime: '0:00',\n duration: this.props.duration > 0 ? secondsToTime(this.props.duration / 1000) : '-:--',\n longMin: this.props.duration >= 600000,\n preview: preview\n };\n\n this.initAudio = this.initAudio.bind(this);\n this.initCanvas = this.initCanvas.bind(this);\n this.resampleBars = this.resampleBars.bind(this);\n this.visualize = this.visualize.bind(this);\n\n this.handlePlay = this.handlePlay.bind(this);\n this.handleSeek = this.handleSeek.bind(this);\n this.handleError = this.handleError.bind(this);\n\n this.audioPlayer = null;\n\n this.viewBuffer = [];\n this.canvasRef = React.createRef();\n }\n\n componentDidMount() {\n if (this.props.src) {\n this.initAudio();\n }\n\n this.initCanvas();\n }\n\n componentWillUnmount() {\n if (this.audioPlayer) {\n this.audioPlayer.onloadedmetadata = null;\n this.audioPlayer.ontimeupdate = null;\n this.audioPlayer.onended = null;\n this.audioPlayer.pause();\n this.audioPlayer = null;\n }\n }\n\n componentDidUpdate(prevProps) {\n if (this.props.src != prevProps.src) {\n this.initAudio();\n }\n\n if (this.props.preview != prevProps.preview) {\n let preview = base64ToIntArray(this.props.preview);\n if (!Array.isArray(preview) || preview.length < MIN_PREVIEW_LENGTH) {\n preview = null;\n }\n this.setState({preview: preview}, this.initCanvas);\n }\n }\n\n initAudio() {\n this.audioPlayer = new Audio(this.props.src);\n this.audioPlayer.onloadedmetadata = _ => this.setState({canPlay: true});\n this.audioPlayer.ontimeupdate = _ => this.setState({\n currentTime: secondsToTime(this.audioPlayer.currentTime, this.state.longMin)\n });\n this.audioPlayer.onended = _ => {\n this.audioPlayer.currentTime = 0;\n this.setState({playing: false, currentTime: secondsToTime(0, this.state.longMin)})\n }\n }\n\n initCanvas() {\n // Force canvas aspect ratio to match one of the element + upscale canvas to reduce blurring.\n this.canvasRef.current.width = this.canvasRef.current.offsetWidth * CANVAS_UPSCALING;\n this.canvasRef.current.height = this.canvasRef.current.offsetHeight * CANVAS_UPSCALING;\n\n this.canvasContext = this.canvasRef.current.getContext('2d');\n this.canvasContext.lineCap = 'round';\n\n this.viewBuffer = this.resampleBars(this.state.preview);\n this.visualize();\n }\n\n // Draw amplitude of sound.\n visualize() {\n if (!this.canvasRef.current) {\n return;\n }\n\n const width = this.effectiveWidth;\n const height = this.canvasRef.current.height;\n\n this.canvasContext.lineWidth = LINE_WIDTH;\n\n const drawFrame = _ => {\n if (!this.canvasRef.current || !this.audioPlayer) {\n // The component is unmounted.\n return;\n }\n\n this.canvasContext.clearRect(0, 0, this.canvasRef.current.width, height);\n\n if (this.viewBuffer) {\n if (this.state.playing) {\n window.requestAnimationFrame(drawFrame);\n }\n\n // Current playback position.\n const thumbAt = this.props.duration ?\n Math.max(0, Math.min(this.audioPlayer.currentTime * 1000 / this.props.duration, 1)) * (width - LINE_WIDTH * 2) : -1;\n\n // Draw amplitude bars.\n this.canvasContext.beginPath();\n this.canvasContext.strokeStyle = BAR_COLOR_DARK;\n for (let i = 0; i < this.viewBuffer.length; i++) {\n let x = 1 + i * (LINE_WIDTH + SPACING) + LINE_WIDTH * 0.5;\n let y = Math.max(this.viewBuffer[i] * height * 0.9, 1);\n\n const color = x < thumbAt ? BAR_COLOR_DARK : BAR_COLOR;\n if (this.canvasContext.strokeStyle != color) {\n this.canvasContext.stroke();\n this.canvasContext.beginPath();\n this.canvasContext.strokeStyle = color;\n }\n\n this.canvasContext.moveTo(x, (height - y) * 0.5);\n this.canvasContext.lineTo(x, (height + y) * 0.5);\n }\n // Actually draw the bars on canvas.\n this.canvasContext.stroke();\n\n // Draw thumb.\n if (this.props.duration) {\n this.canvasContext.beginPath();\n this.canvasContext.arc(thumbAt + LINE_WIDTH * 2, height * 0.5, LINE_WIDTH * 2, 0, 2 * Math.PI);\n this.canvasContext.fillStyle = THUMB_COLOR;\n this.canvasContext.fill();\n }\n }\n }\n\n drawFrame();\n }\n\n // Quick and dirty downsampling of the original preview bars into a smaller (or equal) number of bars we can display here.\n resampleBars(original) {\n const dstCount = ((this.canvasRef.current.width - SPACING) / (LINE_WIDTH + SPACING)) | 0;\n // Remove extra padding on the right due to fractional bar which is not drawn.\n this.effectiveWidth = dstCount * (LINE_WIDTH + SPACING) + SPACING;\n\n if (!Array.isArray(original) || original.length == 0) {\n return Array.apply(null, Array(dstCount)).map(_ => 0.01);\n }\n\n const factor = original.length / dstCount;\n let amps = [];\n let maxAmp = -1;\n for (let i=0; i 0) {\n return amps.map(a => a / maxAmp);\n }\n return Array.apply(null, Array(dstCount)).map(_ => 0.01);\n }\n\n handlePlay(e) {\n e.preventDefault();\n if (!this.state.canPlay) {\n return;\n }\n\n if (this.state.playing) {\n this.audioPlayer.pause();\n this.setState({playing: false});\n } else if (this.audioPlayer.readyState >= 2) {\n this.audioPlayer.play();\n this.setState({playing: true}, this.visualize);\n }\n }\n\n handleError(err) {\n console.error(err);\n }\n\n handleSeek(e) {\n e.preventDefault();\n if (e.target && this.props.duration) {\n const rect = e.target.getBoundingClientRect();\n const offset = (e.clientX - rect.left) / this.effectiveWidth * CANVAS_UPSCALING;\n this.audioPlayer.currentTime = this.props.duration * offset / 1000;\n this.setState({currentTime: secondsToTime(this.audioPlayer.currentTime, this.state.longMin)});\n if (!this.state.playing) {\n this.visualize();\n }\n }\n }\n\n render() {\n const playClass = 'material-icons' +\n (this.props.short ? '' : ' large') +\n (this.state.canPlay ? '' : ' disabled');\n const play = (\n {this.state.playing ? 'pause_circle' :\n (this.state.canPlay ? 'play_circle' : 'not_interested')}\n );\n return (
{this.props.short ?\n <>\n \n {play}\n \n :\n <>\n {play}\n
\n \n
{this.state.currentTime}/{this.state.duration}
\n
\n \n }\n
);\n }\n}\n\nexport default injectIntl(AudioPlayer);\n","// Edit account parameters.\nimport React from 'react';\nimport { FormattedMessage } from 'react-intl';\n\nimport Cropper from './cropper.jsx';\nimport { imageCrop } from '../lib/blob-helpers.js';\n\nexport default class AvatarCrop extends React.PureComponent {\n constructor(props) {\n super(props);\n\n this.state = {\n top: 0,\n left: 0,\n width: 0,\n height: 0,\n scale: 1\n };\n\n this.handleSubmit = this.handleSubmit.bind(this);\n this.handleChange = this.handleChange.bind(this);\n }\n\n // Cut out in image coordinates and desired scale factor.\n handleChange(left, top, width, height, scale) {\n this.setState({\n left: left,\n top: top,\n width: width,\n height: height,\n scale: scale\n });\n }\n\n handleSubmit() {\n imageCrop(this.props.mime, this.props.avatar,\n this.state.left, this.state.top, this.state.width, this.state.height,\n this.state.scale)\n .then(img => {\n this.props.onSubmit(img.mime, img.blob, img.width, img.height);\n })\n .catch(err => {\n this.props.onError(err);\n });\n }\n\n render() {\n return (\n
\n
\n \n
\n
\n {this.props.onCancel ?\n \n : null}\n \n
\n
\n );\n }\n};\n","import React from 'react';\n\nimport LetterTile from './letter-tile.jsx';\nimport LoadSpinner from './load-spinner.jsx';\n\nimport { sanitizeUrlForMime } from '../lib/utils.js';\n\nimport { AVATAR_SIZE } from '../config.js';\n\nexport default class AvatarUpload extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n source: props.avatar\n };\n\n this.handleFileReceived = this.handleFileReceived.bind(this);\n }\n\n componentDidUpdate(prevProps) {\n if (this.props.avatar != prevProps.avatar) {\n this.setState({source: this.props.avatar});\n }\n }\n\n handleFileReceived(e) {\n const image = e.target.files[0];\n this.props.onImageUpdated(image.type, URL.createObjectURL(image), image.name);\n // Clear the value so the same file can be uploaded again.\n e.target.value = '';\n }\n\n render() {\n // Randomize id value in case more than one AvatarUpload is shown\n // at the same time.\n const randId = 'file-input-avatar-' + ('' + Math.random()).substring(0, 4);\n const className = 'avatar-upload' + (this.props.readOnly ? ' read-only' : '');\n return (\n
\n {this.props.readOnly || !this.state.source ?\n null :\n {e.preventDefault(); this.props.onImageUpdated();}}>\n clear\n }\n {this.state.source ?\n :\n this.props.readOnly && this.props.uid ?\n
\n \n
\n :\n
{AVATAR_SIZE}×{AVATAR_SIZE}
}\n {this.props.readOnly ? null :\n }\n {this.props.readOnly ? null :\n }\n \n
\n );\n }\n};\n","import React from 'react';\nimport { defineMessages, injectIntl } from 'react-intl';\n\nconst icon_mapping = {'staff': 'verified_user'};\n\nconst messages = defineMessages({\n badge_verified: {\n id: 'badge_verified',\n defaultMessage: 'Verified/official',\n description: 'Explanation of a verified account or topic badge'\n },\n badge_staff: {\n id: 'badge_staff',\n defaultMessage: 'Staff-managed',\n description: 'Explanation of a staff-managed account or topic badge'\n },\n badge_danger: {\n id: 'badge_danger',\n defaultMessage: 'Untrustworthy',\n description: 'Suspicious or untrustworthy account or topic badge'\n },\n});\n\n\n/* Trusted badges with labels: verified, staff, danger */\nclass BadgeList extends React.PureComponent {\n render() {\n const {formatMessage} = this.props.intl;\n let badges = null;\n if (this.props.trustedBadges && this.props.trustedBadges.length > 0) {\n badges = [];\n this.props.trustedBadges.forEach(b => {\n const comment = this.props.short ? null : formatMessage(messages['badge_' + b]);\n const style = 'material-icons ' + b + '-color';\n badges.push(
{icon_mapping[b] || b} {comment}
);\n });\n return <>{badges};\n }\n return null;\n }\n};\n\nexport default injectIntl(BadgeList);\n","// The <- button to be displayed in title bars.\nimport React from 'react';\n\nexport default class ButtonBack extends React.PureComponent {\n render() {\n return (\n {e.preventDefault(); this.props.onBack();}}>\n arrow_back\n \n );\n }\n}\n","// IncomingCall: displays Accept & Reject buttons for incoming calls.\nimport React from 'react';\n\nimport BadgeList from './badge-list.jsx';\nimport LetterTile from './letter-tile.jsx';\n\nimport { MAX_TITLE_LENGTH, MAX_PEER_TITLE_LENGTH } from '../config.js';\nimport { CALL_STATE_INCOMING_RECEIVED } from '../constants.js';\n\nimport { makeImageUrl } from '../lib/blob-helpers.js';\nimport { truncateString } from '../lib/strformat.js';\n\nconst RING_SOUND = new Audio('audio/call-in.m4a');\n\nexport default class CallIncoming extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n topic: null,\n fullName: undefined,\n avatar: null,\n trustedBadges: [],\n previousMetaDesc: undefined,\n };\n\n this.resetDesc = this.resetDesc.bind(this);\n this.onMetaDesc = this.onMetaDesc.bind(this);\n this.handleRejectCall = this.handleRejectCall.bind(this);\n this.handleAcceptCall = this.handleAcceptCall.bind(this);\n this.ringTimer = null;\n }\n\n componentDidMount() {\n const topic = this.props.tinode.getTopic(this.props.topic);\n if (!topic) {\n return;\n }\n\n this.resetDesc(topic);\n if (this.props.callState == CALL_STATE_INCOMING_RECEIVED) {\n // play() throws if the user did not click the app first: https://goo.gl/xX8pDD.\n RING_SOUND.play().catch(_ => {});\n this.ringTimer = setInterval(_ => {RING_SOUND.play().catch(_ => {})}, 2000);\n this.props.onRinging(this.props.topic, this.props.seq);\n }\n }\n\n // No need to separately handle component mount.\n componentDidUpdate(props) {\n const topic = this.props.tinode.getTopic(props.topic);\n if (!topic) {\n return;\n }\n\n if (this.onMetaDesc != topic.onMetaDesc) {\n this.previousMetaDesc = topic.onMetaDesc;\n topic.onMetaDesc = this.onMetaDesc;\n }\n\n if (this.state.topic != props.topic) {\n this.setState({topic: props.topic});\n this.resetDesc(topic, props);\n }\n }\n\n componentWillUnmount() {\n if (this.ringTimer != null) {\n clearInterval(this.ringTimer);\n RING_SOUND.pause();\n }\n const topic = this.props.tinode.getTopic(this.props.topic);\n if (!topic) {\n return;\n }\n this.setState({topic: null});\n topic.onMetaDesc = this.previousMetaDesc;\n }\n\n resetDesc(topic) {\n const badges = [];\n if (topic.trusted) {\n for (const [key, val] of Object.entries(topic.trusted)) {\n if (val) {\n badges.push(key);\n }\n }\n }\n\n this.setState({\n fullName: truncateString(topic.public ? topic.public.fn : undefined, MAX_TITLE_LENGTH),\n avatar: makeImageUrl(topic.public ? topic.public.photo : null),\n trustedBadges: badges,\n });\n }\n\n onMetaDesc(desc) {\n const topic = this.props.tinode.getTopic(this.props.topic);\n if (!topic) {\n return;\n }\n this.resetDesc(topic);\n\n if (this.previousMetaDesc && this.previousMetaDesc != this.onMetaDesc) {\n this.previousMetaDesc(desc);\n }\n }\n\n handleAcceptCall() {\n this.props.onAcceptCall(this.props.topic);\n }\n\n handleRejectCall() {\n this.props.onReject(this.props.topic, this.props.seq);\n this.props.onClose();\n }\n\n render() {\n return (\n
\n
\n
\n
\n \n
\n
{truncateString(this.state.fullName, MAX_PEER_TITLE_LENGTH)}\n
\n
\n
\n {this.props.callState == CALL_STATE_INCOMING_RECEIVED ?\n <>\n \n \n \n :\n null\n }\n
\n
\n
\n );\n }\n};\n","// Chat message describing a video or voice call.\n\nimport React from 'react';\nimport { FormattedMessage } from 'react-intl';\n\nimport { secondsToTime } from '../lib/strformat.js';\n\nexport default class CallMessage extends React.PureComponent {\n render() {\n const isCallDropped = ['busy', 'declined', 'disconnected', 'missed'].includes(this.props.callState);\n const successClass = 'material-icons medium ' + (isCallDropped ? 'red' : 'green');\n const callIcon = this.props.incoming ?\n (isCallDropped ? 'call_missed' : 'call_received') :\n (isCallDropped ? 'call_missed_outgoing' : 'call_made');\n const title = this.props.incoming ?\n :\n ;\n let duration;\n if (isCallDropped) {\n switch (this.props.callState) {\n case 'busy':\n duration = ;\n break;\n case 'declined':\n duration = ;\n break;\n case 'missed':\n duration = this.props.incoming ?\n :\n ;\n break;\n default:\n duration = ;\n break;\n }\n } else {\n duration = {secondsToTime(this.props.duration / 1000)};\n }\n return
\n
call
\n
\n
{title}
\n
{callIcon} {duration}
\n
\n
;\n }\n}\n","// CallPanel displays call in progress: local and remote viewports and controls.\nimport React from 'react';\nimport { FormattedMessage, defineMessages, injectIntl } from 'react-intl';\n\nimport LetterTile from './letter-tile.jsx';\n\nimport { MAX_PEER_TITLE_LENGTH } from '../config.js';\nimport { CALL_STATE_OUTGOING_INITATED, CALL_STATE_IN_PROGRESS } from '../constants.js';\nimport { truncateString } from '../lib/strformat.js';\n\nconst RING_SOUND = new Audio('audio/call-out.m4a');\nRING_SOUND.loop = true;\nconst CALL_ENDED_SOUND = new Audio('audio/call-end.m4a');\nCALL_ENDED_SOUND.loop = true;\nconst DIALING_SOUND = new Audio('audio/dialing.m4a');\n\nconst VIDEO_MUTED_EVENT = 'video:muted';\nconst VIDEO_UNMUTED_EVENT = 'video:unmuted';\n\nconst messages = defineMessages({\n already_in_call: {\n id: 'already_in_call',\n defaultMessage: 'You already in an ongoing call!',\n description: 'Error message when the user tried to accept a new call without finishing pervious one',\n }\n});\n\nclass CallPanel extends React.PureComponent {\n constructor(props) {\n super(props);\n\n this.state = {\n localStream: undefined,\n remoteStream: undefined,\n pc: undefined,\n dataChannel: undefined,\n\n previousOnInfo: undefined,\n waitingForPeer: false,\n // If true, the client has received a remote SDP from the peer and has sent a local SDP to the peer.\n callInitialSetupComplete: false,\n audioOnly: props.callAudioOnly,\n // Video mute/unmute in progress.\n videoToggleInProgress: false,\n // Indicates if the remote peer has informed us that their camera is on.\n remoteVideoLive: false,\n };\n\n this.localStreamConstraints = {\n audio: true,\n video: !props.callAudioOnly\n };\n this.isOutgoingCall = props.callState == CALL_STATE_OUTGOING_INITATED;\n\n this.containerRef = React.createRef();\n this.localRef = React.createRef();\n this.remoteRef = React.createRef();\n\n // Cache for remote ice candidates until initial setup gets completed.\n this.remoteIceCandidatesCache = [];\n\n this.onInfo = this.onInfo.bind(this);\n this.start = this.start.bind(this);\n this.stop = this.stop.bind(this);\n\n this.createPeerConnection = this.createPeerConnection.bind(this);\n this.canSendOffer = this.canSendOffer.bind(this);\n this.drainRemoteIceCandidatesCache = this.drainRemoteIceCandidatesCache.bind(this);\n\n this.handleNegotiationNeededEvent = this.handleNegotiationNeededEvent.bind(this);\n this.handleICECandidateEvent = this.handleICECandidateEvent.bind(this);\n this.handleNewICECandidateMsg = this.handleNewICECandidateMsg.bind(this);\n this.handleICEConnectionStateChangeEvent = this.handleICEConnectionStateChangeEvent.bind(this);\n this.handleSignalingStateChangeEvent = this.handleSignalingStateChangeEvent.bind(this);\n this.handleICEGatheringStateChangeEvent = this.handleICEGatheringStateChangeEvent.bind(this);\n this.handleIceCandidateErrorEvent = this.handleIceCandidateErrorEvent.bind(this);\n this.handleTrackEvent = this.handleTrackEvent.bind(this);\n\n this.handleVideoOfferMsg = this.handleVideoOfferMsg.bind(this);\n this.handleVideoAnswerMsg = this.handleVideoAnswerMsg.bind(this);\n this.handleNewICECandidateMsg = this.handleNewICECandidateMsg.bind(this);\n\n this.reportError = this.reportError.bind(this);\n this.handleGetUserMediaError = this.handleGetUserMediaError.bind(this);\n\n this.stopTracks = this.stopTracks.bind(this);\n this.disconnectMedia = this.disconnectMedia.bind(this);\n\n this.handleCloseClick = this.handleCloseClick.bind(this);\n this.handleToggleCameraClick = this.handleToggleCameraClick.bind(this);\n this.handleToggleMicClick = this.handleToggleMicClick.bind(this);\n\n this.handleRemoteHangup = this.handleRemoteHangup.bind(this);\n this.handleVideoCallAccepted = this.handleVideoCallAccepted.bind(this);\n\n this.muteVideo = this.muteVideo.bind(this);\n this.unmuteVideo = this.unmuteVideo.bind(this);\n this.emptyVideoTrack = this.emptyVideoTrack.bind(this);\n\n this.handleDataChannelEvent = this.handleDataChannelEvent.bind(this);\n this.handleDataChannelError = this.handleDataChannelError.bind(this);\n this.handleDataChannelMessage = this.handleDataChannelMessage.bind(this);\n this.handleDataChannelOpen = this.handleDataChannelOpen.bind(this);\n this.handleDataChannelClose = this.handleDataChannelClose.bind(this);\n\n this.bounds = {};\n\n this.dragStart = (event) => {\n if (!event.target.classList.contains('draggable')) {\n // Prevent dragging when clicking on buttons or other non-draggable elements.\n return;\n }\n if (window.matchMedia('(width<=640px)')) {\n // No dragging on small screens.\n return;\n }\n if (this.props.minimized && this.containerRef) {\n event.stopPropagation();\n this.containerRef.current.setPointerCapture(event.pointerId);\n this.containerRef.current.style.cursor = 'grabbing';\n this.bounds.left = this.containerRef.current.offsetLeft;\n this.bounds.top = this.containerRef.current.offsetTop;\n this.bounds.width = this.containerRef.current.offsetWidth;\n this.bounds.height = this.containerRef.current.offsetHeight;\n\n const parent = this.containerRef.current.offsetParent;\n this.bounds.maxX = parent.offsetWidth;\n this.bounds.maxY = parent.offsetHeight;\n }\n };\n this.drag = (event) => {\n event.stopPropagation();\n const el = this.containerRef.current;\n if (this.props.minimized && this.containerRef && el.hasPointerCapture(event.pointerId)) {\n // Calculate new position. Restrict to the visible area of the parent element.\n this.bounds.left = Math.min(Math.max(this.bounds.left + event.movementX, 0),\n this.bounds.maxX - this.bounds.width);\n this.bounds.top = Math.min(Math.max(this.bounds.top + event.movementY, 0),\n this.bounds.maxY - this.bounds.height);\n\n el.style.left = `${this.bounds.left}px`;\n el.style.top = `${this.bounds.top}px`;\n }\n };\n this.dragEnd = (event) => {\n event.stopPropagation();\n if (this.props.minimized && this.containerRef) {\n this.containerRef.current.releasePointerCapture(event.pointerId);\n this.containerRef.current.style.cursor = 'grab';\n }\n };\n }\n\n componentDidMount() {\n const topic = this.props.tinode.getTopic(this.props.topic);\n this.previousOnInfo = topic.onInfo;\n topic.onInfo = this.onInfo;\n if ((this.props.callState == CALL_STATE_OUTGOING_INITATED ||\n this.props.callState == CALL_STATE_IN_PROGRESS) && this.localRef.current) {\n this.start();\n }\n\n if (this.containerRef) {\n this.containerRef.current.addEventListener('pointerdown', this.dragStart);\n this.containerRef.current.addEventListener('pointermove', this.drag);\n this.containerRef.current.addEventListener('pointerup', this.dragEnd);\n }\n }\n\n componentWillUnmount() {\n const topic = this.props.tinode.getTopic(this.props.topic);\n topic.onInfo = this.previousOnInfo;\n this.stop();\n\n if (this.containerRef) {\n this.containerRef.current.removeEventListener('pointerdown', this.dragStart);\n this.containerRef.current.removeEventListener('pointermove', this.drag);\n this.containerRef.current.removeEventListener('pointerup', this.dragEnd);\n }\n }\n\n handleVideoCallAccepted(info) {\n RING_SOUND.pause();\n // Create peer connection with a data channel.\n const pc = this.createPeerConnection(true);\n const stream = this.state.localStream;\n stream.getTracks().forEach(track => {\n pc.addTrack(track, stream);\n\n if (track.kind == 'video' && this.state.audioOnly) {\n // This is an audio-only call.\n // Remove dummy video track (placeholder remains).\n track.enabled = false;\n track.stop();\n stream.removeTrack(track);\n }\n });\n }\n\n onInfo(info) {\n if (info.what != 'call') {\n return;\n }\n switch (info.event) {\n case 'accept':\n this.handleVideoCallAccepted(info);\n break;\n case 'answer':\n this.handleVideoAnswerMsg(info);\n break;\n case 'ice-candidate':\n this.handleNewICECandidateMsg(info);\n break;\n case 'hang-up':\n this.handleRemoteHangup(info);\n break;\n case 'offer':\n this.handleVideoOfferMsg(info);\n break;\n case 'ringing':\n // play() throws if the user did not click the app first: https://goo.gl/xX8pDD.\n RING_SOUND.play().catch(_ => {});\n break;\n default:\n console.warn(\"Unknown call event\", info.event);\n break;\n }\n }\n\n // Creates an empty video track placeholder.\n emptyVideoTrack() {\n const width = 640;\n const height = 480;\n const canvas = Object.assign(document.createElement(\"canvas\"), {width, height});\n canvas.getContext('2d').fillRect(0, 0, width, height);\n const stream = canvas.captureStream(0);\n return Object.assign(stream.getVideoTracks()[0], {enabled: false});\n }\n\n start() {\n if (this.state.localStream) {\n this.props.onError(this.props.intl.formatMessage(messages.already_in_call), 'info');\n return;\n }\n\n if (this.props.callState == CALL_STATE_IN_PROGRESS) {\n // We apparently just accepted the call.\n this.props.onInvite(this.props.topic, this.props.seq, CALL_STATE_IN_PROGRESS, this.props.callAudioOnly);\n return;\n }\n\n // This is an outgoing call waiting for the other side to pick up.\n // Start local video.\n navigator.mediaDevices.getUserMedia(this.localStreamConstraints)\n .then(stream => {\n if (!this.localStreamConstraints.video) {\n // Starting an audio-only call. Create a dummy video track\n // (so video can be enabled during the call if the user desires).\n stream.addTrack(this.emptyVideoTrack());\n }\n this.setState({localStream: stream, waitingForPeer: true});\n this.localRef.current.srcObject = stream;\n\n DIALING_SOUND.play();\n\n // Send call invitation.\n this.props.onInvite(this.props.topic, this.props.seq, this.props.callState, this.props.callAudioOnly);\n })\n .catch(this.handleGetUserMediaError);\n }\n\n stop() {\n CALL_ENDED_SOUND.pause();\n CALL_ENDED_SOUND.currentTime = 0;\n RING_SOUND.pause();\n RING_SOUND.currentTime = 0;\n\n this.stopTracks(this.state.localStream);\n this.stopTracks(this.state.remoteStream);\n this.disconnectMedia(this.localRef.current);\n this.disconnectMedia(this.remoteRef.current);\n if (this.state.pc) {\n this.state.pc.ontrack = null;\n this.state.pc.onremovetrack = null;\n this.state.pc.onremovestream = null;\n this.state.pc.onicecandidate = null;\n this.state.pc.oniceconnectionstatechange = null;\n this.state.pc.onsignalingstatechange = null;\n this.state.pc.onicegatheringstatechange = null;\n this.state.pc.onnegotiationneeded = null;\n this.state.pc.onicecandidateerror = null;\n this.state.pc.ondatachannel = null;\n\n if (this.state.dataChannel && (this.state.dataChannel.readyState == 'open' || this.state.dataChannel.readyState == 'connecting')) {\n this.state.dataChannel.close();\n }\n this.state.pc.close();\n }\n this.setState({pc: null, waitingForPeer: false});\n }\n\n disconnectMedia(el) {\n if (!el) {\n return;\n }\n\n el.srcObject = null;\n el.src = '';\n }\n\n stopTracks(stream) {\n if (!stream) {\n return;\n }\n\n let tracks = stream.getTracks();\n if (tracks) {\n tracks.forEach(track => {\n track.stop();\n track.enabled = false;\n });\n }\n }\n\n handleDataChannelError(error) {\n console.error('data channel error', error);\n }\n\n handleDataChannelMessage(event) {\n switch (event.data) {\n case VIDEO_MUTED_EVENT:\n this.setState({remoteVideoLive: false}, _ => { this.remoteRef.current.srcObject = this.state.remoteStream; });\n break;\n case VIDEO_UNMUTED_EVENT:\n this.setState({remoteVideoLive: true}, _ => { this.remoteRef.current.srcObject = this.state.remoteStream; });\n break;\n default:\n break;\n }\n }\n\n handleDataChannelOpen(event) {\n if (!this.state.audioOnly) {\n event.target.send(VIDEO_UNMUTED_EVENT);\n }\n }\n\n handleDataChannelClose(event) {\n console.log('close data channel:', event);\n }\n\n handleDataChannelEvent(event) {\n console.log('data channel event:', event);\n const channel = event.channel;\n channel.onerror = this.handleDataChannelError;\n channel.onmessage = this.handleDataChannelMessage;\n channel.onopen = this.handleDataChannelOpen;\n channel.onclose = this.handleDataChannelClose;\n this.setState({dataChannel: channel});\n }\n\n createPeerConnection(withDataChannel) {\n const iceServers = this.props.tinode.getServerParam('iceServers', null);\n const pc = iceServers ? new RTCPeerConnection({iceServers: iceServers}) : new RTCPeerConnection();\n\n pc.onicecandidate = this.handleICECandidateEvent;\n pc.oniceconnectionstatechange = this.handleICEConnectionStateChangeEvent;\n pc.onicegatheringstatechange = this.handleICEGatheringStateChangeEvent;\n pc.onsignalingstatechange = this.handleSignalingStateChangeEvent;\n pc.onnegotiationneeded = this.handleNegotiationNeededEvent;\n pc.onicecandidateerror = this.handleIceCandidateErrorEvent;\n pc.ontrack = this.handleTrackEvent;\n pc.ondatachannel = this.handleDataChannelEvent;\n\n let stateUpdate = {pc: pc, waitingForPeer: false};\n if (withDataChannel) {\n // Create data channel for exchanging events.\n const channel = pc.createDataChannel(\"events\", {ordered: true});\n channel.onerror = this.handleDataChannelError;\n channel.onmessage = this.handleDataChannelMessage;\n channel.onopen = this.handleDataChannelOpen;\n channel.onclose = this.handleDataChannelClose;\n stateUpdate.dataChannel = channel;\n }\n this.setState(stateUpdate);\n return pc;\n }\n\n handleVideoAnswerMsg(info) {\n // Configure the remote description, which is the SDP payload\n // in 'info' message.\n const desc = new RTCSessionDescription(info.payload);\n this.state.pc.setRemoteDescription(desc)\n .then(_ => {\n this.setState({ callInitialSetupComplete: true }, _ => this.drainRemoteIceCandidatesCache());\n })\n .catch(err => this.reportError(err));\n }\n\n reportError(err) {\n this.props.onError(err.message, 'err');\n }\n\n canSendOffer() {\n return this.isOutgoingCall || this.state.callInitialSetupComplete;\n }\n\n handleNegotiationNeededEvent(event) {\n const pc = event.target;\n if (!this.canSendOffer()) {\n return;\n }\n pc.createOffer().then(offer => {\n return pc.setLocalDescription(offer);\n })\n .then(_ => {\n this.props.onSendOffer(this.props.topic, this.props.seq, pc.localDescription.toJSON());\n })\n .catch(err => this.reportError(err));\n }\n\n handleIceCandidateErrorEvent(event) {\n console.warn(\"ICE candidate error:\", event);\n }\n\n handleICECandidateEvent(event) {\n if (event.candidate) {\n this.props.onIceCandidate(this.props.topic, this.props.seq, event.candidate.toJSON());\n }\n }\n\n handleNewICECandidateMsg(info) {\n const candidate = new RTCIceCandidate(info.payload);\n if (this.state.callInitialSetupComplete) {\n this.state.pc.addIceCandidate(candidate)\n .catch(err => {\n if (candidate.candidate) {\n this.reportError(err);\n }\n console.warn(\"Error adding new ice candidate\", candidate, err);\n });\n } else {\n this.remoteIceCandidatesCache.push(candidate);\n }\n }\n\n drainRemoteIceCandidatesCache() {\n this.remoteIceCandidatesCache.forEach(candidate => {\n this.state.pc.addIceCandidate(candidate)\n .catch(err => {\n if (candidate.candidate) {\n this.reportError(err);\n }\n console.warn(\"Error adding cached ice candidate\", candidate, err);\n });\n });\n this.remoteIceCandidatesCache = [];\n }\n\n handleICEConnectionStateChangeEvent(event) {\n switch (event.target.iceConnectionState) {\n case 'closed':\n case 'failed':\n this.handleCloseClick();\n break;\n }\n }\n\n handleSignalingStateChangeEvent(event) {\n if (event.target.signalingState == 'closed') {\n this.handleCloseClick();\n }\n }\n\n handleICEGatheringStateChangeEvent(event) {\n // ICE gathering change state\n }\n\n handleTrackEvent(event) {\n // Remote video becomes available.\n this.remoteRef.current.srcObject = event.streams[0];\n this.setState({remoteStream: event.streams[0]});\n }\n\n handleGetUserMediaError(e) {\n console.error(\"Error opening camera and/or microphone\", e);\n switch(e.name) {\n case 'NotFoundError':\n // Cannot start the call b/c no camera and/or microphone found.\n this.reportError(e);\n break;\n case 'SecurityError':\n case 'PermissionDeniedError':\n // Do nothing; this is the same as the user canceling the call.\n break;\n default:\n this.reportError(e);\n break;\n }\n\n // Make sure we shut down our end of the RTCPeerConnection so we're\n // ready to try again.\n this.handleCloseClick();\n }\n\n handleVideoOfferMsg(info) {\n let localStream = null;\n // If needed, create peer connection.\n // Not creating data channel since it should be created by the peer.\n const pc = this.state.pc ? this.state.pc : this.createPeerConnection(false);\n const desc = new RTCSessionDescription(info.payload);\n\n pc.setRemoteDescription(desc).then(_ => {\n return navigator.mediaDevices.getUserMedia(this.localStreamConstraints);\n })\n .then(stream => {\n let dummyVideo;\n if (!this.localStreamConstraints.video) {\n // Starting an audio-only call. Create an empty video track so\n // so the user can enable the video during the call.\n dummyVideo = this.emptyVideoTrack();\n stream.addTrack(dummyVideo);\n }\n localStream = stream;\n this.localRef.current.srcObject = stream;\n this.setState({localStream: stream});\n\n localStream.getTracks().forEach(track => {\n pc.addTrack(track, localStream);\n });\n\n if (dummyVideo) {\n dummyVideo.enabled = false;\n dummyVideo.stop();\n stream.removeTrack(dummyVideo);\n }\n })\n .then(_ => {\n return pc.createAnswer();\n })\n .then(answer => {\n return pc.setLocalDescription(answer);\n })\n .then(_ => {\n this.props.onSendAnswer(this.props.topic, this.props.seq, pc.localDescription.toJSON());\n this.setState({ callInitialSetupComplete: true }, _ => this.drainRemoteIceCandidatesCache());\n })\n .catch(this.handleGetUserMediaError);\n }\n\n // Call disconnected by remote.\n handleRemoteHangup() {\n if (!this.state.waitingForPeer) {\n // This is live call, just hang up.\n this.handleCloseClick();\n } else {\n // This is a call which is not yet connected.\n // Stop pulse animation.\n this.setState({waitingForPeer: false});\n // Change sound and wait a bit before ending it.\n RING_SOUND.pause();\n RING_SOUND.currentTime = 0;\n CALL_ENDED_SOUND.loop = true;\n CALL_ENDED_SOUND.play().catch(_ => {});\n setTimeout(_ => {\n this.handleCloseClick();\n }, 2000);\n }\n }\n\n handleCloseClick() {\n this.stop();\n this.props.onHangup(this.props.topic, this.props.seq);\n }\n\n // Ends video track and turns off the camera.\n muteVideo() {\n if (!this.state.pc || !this.state.dataChannel) {\n return;\n }\n\n const stream = this.state.localStream;\n const t = stream.getVideoTracks()[0];\n t.enabled = false;\n t.stop();\n\n stream.removeTrack(t);\n this.state.dataChannel.send(VIDEO_MUTED_EVENT);\n this.setState({videoToggleInProgress: false});\n }\n\n unmuteVideo() {\n if (!this.state.pc || !this.state.dataChannel) {\n return;\n }\n navigator.mediaDevices.getUserMedia({ video: true })\n .then(stream => {\n // Will extract video track from stream and throw stream away,\n // and replace video track in the media sender.\n this.localRef.current.srcObject = null;\n const sender = this.state.pc.getSenders().find(s => s.track.kind == 'video');\n const track = stream.getVideoTracks()[0];\n // Remote track from new stream.\n stream.removeTrack(track);\n // Add this track to the existing local stream.\n this.state.localStream.addTrack(track);\n return sender.replaceTrack(track);\n })\n .then(_ => {\n this.localRef.current.srcObject = this.state.localStream;\n this.state.dataChannel.send(VIDEO_UNMUTED_EVENT);\n })\n .catch(err => this.handleGetUserMediaError(err))\n .finally(_ => { this.setState({videoToggleInProgress: false}); }); // Make sure we redraw the mute/unmute icons (e.g. camera -> camera_off).\n }\n\n handleToggleCameraClick() {\n if (this.state.videoToggleInProgress) {\n // Toggle currently in progress.\n return;\n }\n const tracks = this.state.localStream.getVideoTracks();\n this.setState({videoToggleInProgress: true}, _ => {\n if (tracks && tracks.length > 0 && tracks[0].enabled && tracks[0].readyState == 'live') {\n this.muteVideo();\n } else {\n this.unmuteVideo();\n }\n this.setState({audioOnly: !this.state.audioOnly});\n });\n }\n\n handleToggleMicClick() {\n const stream = this.state.localStream;\n const t = stream.getAudioTracks()[0];\n t.enabled = !t.enabled;\n // Make sure we redraw the mute/unmute icons (e.g. mic -> mic_off).\n this.forceUpdate();\n }\n\n render() {\n const audioTracks = this.state.localStream && this.state.localStream.getAudioTracks();\n const videoTracks = !this.state.audioOnly && this.state.localStream && this.state.localStream.getVideoTracks();\n const disabled = !this.state.pc || !this.state.dataChannel || !(audioTracks && audioTracks[0]);\n const audioIcon = audioTracks && audioTracks[0] && audioTracks[0].enabled ? 'mic' : 'mic_off';\n const videoIcon = videoTracks && videoTracks[0] && videoTracks[0].enabled && videoTracks[0].readyState == 'live' ? 'videocam' : 'videocam_off';\n const peerTitle = truncateString(this.props.title, MAX_PEER_TITLE_LENGTH);\n const pulseAnimation = this.state.waitingForPeer ? ' pulse' : '';\n\n let remoteActive = false;\n if (this.remoteRef.current && this.remoteRef.current.srcObject && this.state.remoteVideoLive) {\n const rstream = this.remoteRef.current.srcObject;\n if (rstream.getVideoTracks().length > 0) {\n const t = rstream.getVideoTracks()[0];\n remoteActive = t.enabled && t.readyState == 'live';\n }\n }\n\n const minimizedClass = this.props.minimized ? 'minimized' : null;\n const fullScreen = this.props.minimized ? 'fullscreen' : 'fullscreen_exit';\n\n return (\n
\n
\n
\n
\n
\n {remoteActive ?\n <>\n
\n
\n \n
\n \n \n \n
\n
\n );\n }\n};\n\nexport default injectIntl(CallPanel);\n","// The counter of unread messages in the topic.\nimport React from 'react';\nimport { FormattedMessage } from 'react-intl';\n\nimport { secondsToTime } from '../lib/strformat.js';\n\n// Props:\n// incoming: true | false.\n// callState: 'busy' | 'declined' | 'disconnected' | 'missed'.\n// duration: (call duration in milliseconds).\nexport default class CallStatus extends React.PureComponent {\n render() {\n const isCallDropped = ['busy', 'declined', 'disconnected', 'missed'].includes(this.props.callState);\n const icon2 = this.props.incoming ?\n (isCallDropped ? 'call_missed' : 'call_received') :\n (isCallDropped ? 'call_missed_outgoing' : 'call_made');\n let duration;\n if (isCallDropped) {\n switch (this.props.callState) {\n case 'busy':\n duration = ;\n break;\n case 'declined':\n duration = ;\n break;\n case 'missed':\n duration = this.props.incoming ?\n :\n ;\n break;\n default:\n duration = ;\n break;\n }\n } else if (['accepted', 'started'].includes(this.props.callState) && !this.props.duration) {\n duration = \n } else {\n duration = {secondsToTime(this.props.duration / 1000)};\n }\n return (\n <>\n
\n call{icon2}\n
{duration}\n \n );\n }\n};\n","// Single chat message bubble, sent or received.\n\nimport React from 'react';\nimport { FormattedMessage, injectIntl } from 'react-intl';\nimport { Drafty, Tinode } from 'tinode-sdk';\n\nimport Attachment from './attachment.jsx';\nimport LetterTile from './letter-tile.jsx';\nimport ReceivedMarker from './received-marker.jsx'\n\nimport { fullFormatter } from '../lib/formatters.js';\nimport { sanitizeUrl } from '../lib/utils.js';\n\nclass BaseChatMessage extends React.PureComponent {\n constructor(props) {\n super(props);\n\n this.state = {\n progress: 0\n };\n\n if (props.uploader) {\n props.uploader.onProgress = this.handleProgress.bind(this);\n }\n\n this.handleExpandImage = this.handleExpandImage.bind(this);\n this.handlePlayVideo = this.handlePlayVideo.bind(this);\n this.handleFormButtonClick = this.handleFormButtonClick.bind(this);\n this.handleContextClick = this.handleContextClick.bind(this);\n this.handleCancelUpload = this.handleCancelUpload.bind(this);\n this.handleQuoteClick = this.handleQuoteClick.bind(this);\n\n this.formatterContext = {\n formatMessage: props.intl.formatMessage.bind(props.intl),\n viewportWidth: props.viewportWidth,\n authorizeURL: props.tinode.authorizeURL.bind(props.tinode),\n\n onImagePreview: this.handleExpandImage,\n onVideoPreview: this.handlePlayVideo,\n onFormButtonClick: this.handleFormButtonClick,\n onQuoteClick: this.handleQuoteClick\n };\n }\n\n handleExpandImage(e) {\n e.preventDefault();\n this.props.onExpandMedia({\n url: e.target.src,\n filename: e.target.dataset.name,\n width: e.target.dataset.width,\n height: e.target.dataset.height,\n size: e.target.dataset.size,\n type: e.target.dataset.mime\n });\n }\n\n handlePlayVideo(e) {\n e.preventDefault();\n this.props.onExpandMedia({\n video: true,\n url: e.target.dataset.src,\n preview: e.target.src,\n filename: e.target.dataset.name,\n width: e.target.dataset.width,\n height: e.target.dataset.height,\n duration: e.target.dataset.duration,\n size: e.target.dataset.size,\n type: e.target.dataset.mime\n });\n }\n\n handleFormButtonClick(e) {\n e.preventDefault();\n const data = {\n seq: this.props.seq\n };\n data.resp = {};\n if (e.target.dataset.name) {\n data.resp[e.target.dataset.name] = e.target.dataset.val ? e.target.dataset.val :\n e.target.dataset.val === undefined ? 1 : '' + e.target.dataset.val;\n }\n if (e.target.dataset.act == 'url') {\n data.ref = sanitizeUrl(e.target.dataset.ref) || 'about:blank';\n }\n const text = e.target.dataset.title || 'unknown';\n this.props.onFormResponse(e.target.dataset.act, text, data);\n }\n\n handleContextClick(e) {\n e.preventDefault();\n e.stopPropagation();\n const menuItems = [];\n if (this.props.received == Tinode.MESSAGE_STATUS_FAILED) {\n menuItems.push('menu_item_send_retry');\n }\n if (this.props.received > Tinode.MESSAGE_STATUS_FATAL) {\n if (this.props.userIsWriter) {\n menuItems.push('menu_item_reply');\n if (!this.props.response) {\n let immutable = false;\n Drafty.entities(this.props.content, (_0, _1, tp) => {\n immutable = ['AU', 'EX', 'FM', 'IM', 'VC', 'VD'].includes(tp);\n return immutable;\n });\n if (!immutable) {\n Drafty.styles(this.props.content, tp => {\n immutable = ['QQ'].includes(tp);\n return immutable;\n });\n }\n if (!immutable) {\n menuItems.push('menu_item_edit');\n }\n }\n }\n if (this.props.userIsAdmin) {\n menuItems.push(this.props.pinned ? 'menu_item_unpin' : 'menu_item_pin');\n }\n }\n menuItems.push('menu_item_forward');\n\n this.props.showContextMenu({\n seq: this.props.seq,\n replace: this.props.edited ? parseInt(this.props.edited.split(':')[1]) : 0,\n content: this.props.content,\n userFrom: this.props.userFrom,\n userName: this.props.userName,\n y: e.pageY,\n x: e.pageX,\n pickReply: this.props.pickReply,\n editMessage: this.props.editMessage,\n timestamp: this.props.timestamp,\n }, menuItems);\n }\n\n handleProgress(ratio) {\n this.setState({progress: ratio});\n }\n\n handleCancelUpload() {\n this.props.onCancelUpload(this.props.seq, this.props.uploader);\n }\n\n handleQuoteClick(e) {\n e.preventDefault();\n e.stopPropagation();\n const replyToSeq = this.props.replyToSeq;\n if (replyToSeq) {\n this.props.onQuoteClick(replyToSeq);\n }\n }\n\n render() {\n const sideClass = this.props.sequence + ' ' + (this.props.response ? 'left' : 'right');\n const bubbleClass = (this.props.sequence == 'single' || this.props.sequence == 'last') ? 'bubble tip' : 'bubble';\n const avatar = this.props.userAvatar || true;\n let textSizeClass = 'message-content';\n const fullDisplay = (this.props.isGroup && this.props.response &&\n (this.props.sequence == 'single' || this.props.sequence == 'last'));\n\n let content = this.props.content;\n const attachments = [];\n if (this.props.mimeType == Drafty.getContentType() && Drafty.isValid(content)) {\n Drafty.attachments(content, (att, i) => {\n if (Drafty.isFormResponseType(att.mime)) {\n // Don't show json drafty form response objects as attachments.\n // They are not meant for users.\n return;\n }\n attachments.push();\n }, this);\n const tree = Drafty.format(content, fullFormatter, this.formatterContext);\n content = React.createElement(React.Fragment, null, tree);\n } else if (typeof content == 'string') {\n // Make font bigger for emoji-only messages.\n // Must use 'new RegExp(...)' because React does not like /{1-5}/.\n if (new RegExp('^\\\\p{RGI_Emoji}{1,5}$', 'v').test(content || '')) {\n // Content consists of 1-5 emoji characters. Count how many and use it to increase the font size.\n textSizeClass += ' emoji-' + (content || '').match(/\\p{RGI_Emoji}/vg).length;\n }\n } else {\n content = <>warning_amber \n \n }\n\n return (\n
  • \n {this.props.isGroup && this.props.response ?\n
    \n {fullDisplay ?\n :\n null}\n
    :\n null}\n
    \n
    \n
    \n
    \n {content}\n {attachments}\n
    \n {this.props.timestamp ?\n \n : null}\n
    \n {this.props.showContextMenu ?\n \n \n expand_more\n \n : null\n }\n
    \n {fullDisplay ?\n
    \n {this.props.userName ||\n \n }\n
    \n : null\n }\n
    \n
    • \n );\n }\n};\n\nconst IntlChatMessage = injectIntl(BaseChatMessage);\nconst ChatMessage = React.forwardRef((props, ref) => );\n\nexport default ChatMessage;\n","import React from 'react';\n\n/* CheckBox: styled three-state checkbox, either clickable or static */\nexport default class CheckBox extends React.PureComponent {\n constructor(props) {\n super(props);\n\n this.handleChange = this.handleChange.bind(this);\n }\n\n handleChange() {\n this.props.onChange(this.props.name, !this.props.checked);\n }\n\n render() {\n let classList = ['material-icons'];\n let iconName;\n if (Array.isArray(this.props.className)) {\n classList.push(...this.props.className);\n } else if (this.props.className) {\n classList.push(this.props.className);\n }\n if (this.props.onChange) {\n if (this.props.checked) {\n classList.push('blue', 'clickable');\n iconName = 'check_box';\n } else if (this.props.checked === false) {\n classList.push('blue', 'clickable');\n iconName = 'check_box_outline_blank';\n } else {\n classList.push('lt-blue');\n iconName = 'indeterminate_check_box';\n }\n } else {\n if (this.props.checked) {\n iconName = 'check_box';\n } else {\n iconName = 'check_box_outline_blank';\n }\n }\n let attrs = {\n className: classList.join(' '),\n id: this.props.id,\n };\n if (this.props.onChange) {\n attrs.onClick = this.handleChange;\n }\n return React.createElement('i', attrs, iconName);\n }\n}\n","import React from 'react';\n\nimport Chip from './chip.jsx';\n\nimport { makeImageUrl } from '../lib/blob-helpers.js';\n\n/* BEGIN ChipInput: group membership widget */\nexport default class ChipInput extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = ChipInput.deriveStateFromProps(props);\n this.state.input = '';\n this.state.focused = false;\n\n this.handleTextInput = this.handleTextInput.bind(this);\n this.removeChipAt = this.removeChipAt.bind(this);\n this.handleChipCancel = this.handleChipCancel.bind(this);\n this.handleFocusGained = this.handleFocusGained.bind(this);\n this.handleFocusLost = this.handleFocusLost.bind(this);\n this.handleKeyDown = this.handleKeyDown.bind(this);\n }\n\n static deriveStateFromProps(props) {\n return {\n placeholder: props.chips ? '' : props.prompt,\n sortedChips: ChipInput.sortChips(props.chips, props.staticMembers),\n chipIndex: ChipInput.indexChips(props.chips)\n };\n }\n\n componentDidUpdate(prevProps, prevState) {\n if (prevProps.chips != this.props.chips ||\n prevProps.staticMembers != this.props.staticMembers ||\n prevProps.prompt != this.props.prompt) {\n this.setState(ChipInput.deriveStateFromProps(this.props));\n }\n if (!prevState || this.props.chips.length > prevState.sortedChips.length) {\n this.setState({input: ''});\n }\n }\n\n // Map chip index to user name\n static indexChips(chips) {\n const index = {};\n let count = 0;\n chips.forEach(item => {\n index[item.user] = count;\n count ++;\n });\n return index;\n }\n\n // Have non-removable chips appear before all other chips.\n static sortChips(chips, keep) {\n const required = [];\n const normal = [];\n chips.forEach(item => {\n if (keep && keep.includes(item.user)) {\n required.push(item);\n } else {\n normal.push(item);\n }\n });\n return required.concat(normal);\n }\n\n handleTextInput(e) {\n this.setState({input: e.target.value});\n if (this.props.filterFunc) {\n this.props.filterFunc(e.target.value);\n }\n }\n\n removeChipAt(idx) {\n const removed = this.state.sortedChips[idx];\n this.props.onChipRemoved(removed.user, this.state.chipIndex[removed.user]);\n }\n\n handleChipCancel(item, idx) {\n this.removeChipAt(idx);\n }\n\n handleFocusGained() {\n this.setState({focused: true});\n }\n\n handleFocusLost() {\n this.setState({focused: false});\n if (this.props.onFocusLost) {\n this.props.onFocusLost(this.state.input);\n }\n }\n\n handleKeyDown(e) {\n if (e.key === 'Backspace') {\n if (this.state.input.length == 0 && this.state.sortedChips.length > 0) {\n const at = this.state.sortedChips.length - 1;\n if (this.state.sortedChips[at].user !== this.props.staticMembers) {\n this.removeChipAt(at);\n }\n }\n } else if (e.key === 'Enter') {\n if (this.props.onEnter) {\n this.props.onEnter(this.state.input);\n }\n } else if (e.key === 'Escape') {\n if (this.props.onCancel) {\n this.props.onCancel();\n }\n }\n }\n\n render() {\n const chips = [];\n let count = 0;\n const staticMembers = this.props.staticMembers || [];\n this.state.sortedChips.forEach(item => {\n chips.push(\n \n );\n count++;\n });\n const className = \"chip-input\" + (this.state.focused ? ' focused' : '');\n const autoFocus = !(this.props.tabIndex > 0);\n return (\n
    \n {chips}\n \n
    \n );\n }\n};\n","import React from 'react';\n\nimport LetterTile from './letter-tile.jsx';\n\nexport default class Chip extends React.PureComponent {\n constructor(props) {\n super(props);\n\n this.handleCancel = this.handleCancel.bind(this);\n }\n\n handleCancel(e) {\n e.preventDefault();\n this.props.onCancel(this.props.topic, this.props.index);\n }\n\n render() {\n const title = this.props.title || this.props.topic;\n const className = this.props.invalid ? 'chip invalid' : 'chip';\n return (\n
    \n {this.props.noAvatar ?\n :\n
    \n \n
    \n }\n {title}\n {this.props.onCancel && !this.props.required ?\n ×\n : }\n
    \n );\n }\n};\n","// A panel included into a list of contacts with an action text.\nimport React from 'react';\nimport { injectIntl } from 'react-intl';\n\nclass ContactAction extends React.PureComponent {\n constructor(props) {\n super(props);\n\n this.handleClick = this.handleClick.bind(this);\n }\n\n handleClick(e) {\n e.preventDefault();\n e.stopPropagation();\n this.props.onAction(this.props.action);\n }\n\n render() {\n const {formatMessage} = this.props.intl;\n return (\n
  • \n
    {formatMessage(this.props.title, this.props.values)}
    \n
    • \n );\n }\n};\n\nexport default injectIntl(ContactAction);\n","import React from 'react';\n\nconst icon_mapping = {'muted': 'notifications_off', 'banned': 'block', 'staff': 'verified_user'};\n\n/* Contact's labels: [you], or icons [muted], [blocked] */\nexport default class ContactBadges extends React.PureComponent {\n render() {\n let badges = null;\n if (this.props.badges && this.props.badges.length > 0) {\n badges = [];\n this.props.badges.forEach(b => {\n const color = (b.color ? ' ' + b.color : '');\n if (b.icon) {\n badges.push({icon_mapping[b.icon] || b.icon});\n } else {\n badges.push({b.name});\n }\n });\n return <>{badges};\n }\n return null;\n }\n};\n","// ContactList: component for showing a list of contacts,\n// such as a list of group members in a group chat.\nimport React from 'react';\nimport { defineMessages, injectIntl } from 'react-intl';\n\nimport { Drafty, Tinode } from 'tinode-sdk';\n\nimport Contact from './contact.jsx';\nimport ContactAction from './contact-action.jsx';\n\nimport { makeImageUrl } from '../lib/blob-helpers.js';\n\nimport { MESSAGE_PREVIEW_LENGTH } from '../config.js';\n\nconst messages = defineMessages({\n badge_you: {\n id: 'badge_you',\n defaultMessage: 'you',\n description: 'Badge for indicating the current user'\n },\n badge_owner: {\n id: 'badge_owner',\n defaultMessage: 'owner',\n description: 'Badge for indicating the owner'\n }\n});\n\nclass ContactList extends React.Component {\n render() {\n const { formatMessage } = this.props.intl;\n const showCheckmark = Array.isArray(this.props.topicSelected);\n const contactNodes = [];\n\n // Count of contacts, excluding action items.\n let contactsCount = 0;\n if (this.props.showSelfTopic) {\n const selected = showCheckmark ?\n (this.props.topicSelected.indexOf('slf') > -1) :\n (this.props.topicSelected === 'slf');\n contactNodes.push(\n \n );\n contactsCount ++;\n }\n if (this.props.contacts && this.props.contacts.length > 0) {\n this.props.contacts.forEach(c => {\n if (c.action) {\n // Action item\n contactNodes.push(\n );\n } else {\n // Normal contact\n const key = this.props.showMode ? c.user : (c.topic || c.user);\n // If filter function is provided, filter out the items\n // which don't satisfy the condition.\n if (this.props.filterFunc && this.props.filter) {\n const filterOn = [key];\n if (c.private && c.private.comment) {\n filterOn.push(('' + c.private.comment).toLowerCase());\n }\n if (c.public && c.public.fn) {\n filterOn.push(('' + c.public.fn).toLowerCase());\n }\n if (!this.props.filterFunc(this.props.filter, filterOn)) {\n return;\n }\n }\n\n const isChannel = Tinode.isChannelTopicName(key);\n const isGroup = !isChannel && Tinode.isGroupTopicName(key);\n const selected = showCheckmark ?\n (this.props.topicSelected.indexOf(key) > -1) :\n (this.props.topicSelected === key);\n const badges = [];\n if (this.props.showMode) {\n if (key == this.props.myUserId) {\n badges.push({name: formatMessage(messages.badge_you), color: 'green'});\n }\n if (c.acs && c.acs.isOwner()) {\n badges.push({name: formatMessage(messages.badge_owner), color: 'blue'});\n }\n }\n\n const comment = Array.isArray(c.private) ?\n c.private.join(',') : (c.private ? c.private.comment : null);\n let preview;\n let forwarded;\n let previewIsResponse;\n let deliveryStatus;\n if (!this.props.showMode && c.latestMessage) {\n const msg = c.latestMessage();\n if (msg) {\n forwarded = msg.head ? msg.head.forwarded : null;\n deliveryStatus = msg._status || c.msgStatus(msg, true);\n previewIsResponse = msg.from != this.props.myUserId;\n if (msg.content) {\n preview = typeof msg.content == 'string' ?\n msg.content.substr(0, MESSAGE_PREVIEW_LENGTH) :\n Drafty.preview(msg.content, MESSAGE_PREVIEW_LENGTH);\n }\n }\n }\n\n contactNodes.push(\n \n );\n contactsCount ++;\n }\n }, this);\n }\n\n return (\n
    \n {contactsCount == 0 ?\n
    \n :\n null\n }\n {contactNodes.length > 0 ?\n
      \n {contactNodes}\n
    \n :\n null\n }\n
    \n );\n }\n};\n\nexport default injectIntl(ContactList);\n","// A single topic or user.\nimport React from 'react';\nimport { FormattedMessage, defineMessages, injectIntl } from 'react-intl';\n\nimport { Tinode } from 'tinode-sdk';\n\nimport ContactBadges from './contact-badges.jsx';\nimport LetterTile from './letter-tile.jsx';\nimport UnreadBadge from './unread-badge.jsx';\n\nimport { Drafty } from 'tinode-sdk';\n\nimport { previewFormatter } from '../lib/formatters.js';\nimport { deliveryMarker } from '../lib/utils.js';\nimport { truncateString } from '../lib/strformat.js';\n\nconst messages = defineMessages({\n self_topic_name: {\n id: 'self_topic_name',\n defaultMessage: 'Saved messages',\n description: 'Name of self topic for UI'\n },\n self_topic_comment: {\n id: 'self_topic_comment',\n defaultMessage: 'Notes, messages, links, files saved for posterity',\n description: 'Comment for self topic for UI'\n }\n});\n\nclass Contact extends React.Component {\n constructor(props) {\n super(props);\n\n this.handleClick = this.handleClick.bind(this);\n this.handleContextClick = this.handleContextClick.bind(this);\n }\n\n handleClick(e) {\n e.preventDefault();\n e.stopPropagation();\n if (this.props.onSelected) {\n // Index this.props.index is used by GroupManager.\n this.props.onSelected(this.props.item, this.props.index);\n }\n }\n\n handleContextClick(e) {\n e.preventDefault();\n e.stopPropagation();\n this.props.showContextMenu({\n topicName: this.props.item,\n topicTitle: this.props.title,\n y: e.pageY,\n x: e.pageX\n });\n }\n\n render() {\n let title = this.props.title;\n const self = Tinode.isSelfTopicName(this.props.item);\n if (!title) {\n if (self) {\n title = this.props.intl.formatMessage(messages.self_topic_name);\n } else {\n title = ;\n }\n } else if (title.length > 30) {\n // Have to support RTL languages too.\n title = truncateString(title, 30);\n }\n const online = this.props.now ? 'online' : 'offline';\n const avatar = this.props.avatar ? this.props.avatar : true;\n const badges = this.props.badges ? this.props.badges.slice() : [];\n const icon_badges = [];\n if (this.props.isVerified) {\n icon_badges.push({icon: 'verified', color: 'verified-color'});\n }\n if (this.props.isStaff) {\n icon_badges.push({icon: 'staff', color: 'staff-color'});\n }\n if (this.props.isDangerous) {\n icon_badges.push({icon: 'dangerous', color: 'danger-color'});\n }\n if (this.props.acs) {\n if (this.props.showMode) {\n badges.push({name: this.props.acs.getMode(), key: 'mode'});\n }\n if (this.props.acs.isMuted()) {\n icon_badges.push({icon: 'muted'});\n }\n if (!this.props.acs.isJoiner()) {\n icon_badges.push({icon: 'banned'});\n }\n }\n\n // The this.props.preview contains alreay shortened Drafty or string.\n let preview;\n if (typeof this.props.preview == 'string') {\n preview = this.props.preview;\n } else if (Drafty.isValid(this.props.preview)) {\n preview = React.createElement(React.Fragment, null, Drafty.format(this.props.preview, previewFormatter,\n {formatMessage: this.props.intl.formatMessage, previewIsResponse: this.props.previewIsResponse}));\n } else if (this.props.preview) {\n preview =\n <>warning_amber \n \n ;\n }\n\n const icon = deliveryMarker(this.props.received);\n const marker = icon ? {icon.name} : null;\n const titleClass = 'contact-title' + (this.props.deleted ? ' deleted' : '');\n\n const comment = preview || this.props.comment ||\n (self ? this.props.intl.formatMessage(messages.self_topic_comment) : '\\u00A0');\n const bgColor = this.props.showCheckmark ? null :\n (this.props.selected ? 'selected' : (this.props.pinned ? 'tpinned' : null));\n return (\n
  • \n
    \n \n {this.props.deleted ? cancel :\n (!self && this.props.showOnline) ? :\n (this.props.showCheckmark && this.props.selected) ?\n check_circle\n : null}\n
    \n
    \n
    {title}\n {this.props.isGroup ? group : null}\n {this.props.isChannel ? podcasts : null}\n {!self ? : null}\n {!this.props.deleted ? : null}\n
    \n {this.props.showMode ?\n :\n this.props.small ? null :
    {marker}{comment}
    }\n
    \n {this.props.showContextMenu ?\n \n \n expand_more\n \n : null}\n
    • \n );\n }\n};\n\nexport default injectIntl(Contact);\n","// Context Menu: popup/dropdown menu.\nimport React from 'react';\nimport { injectIntl, defineMessages } from 'react-intl';\n\nimport { REM_SIZE } from '../config.js';\n\nconst messages = defineMessages({\n info: {\n id: 'menu_item_info',\n defaultMessage: 'Info',\n description: 'Show extended topic information'\n },\n clear_messages: {\n id: 'menu_item_clear_messages',\n defaultMessage: 'Clear messages',\n description: 'Delete all messages'\n },\n clear_for_all: {\n id: 'menu_item_clear_messages_for_all',\n defaultMessage: 'Clear for All',\n description: 'Delete all message(s) for all members'\n },\n delete: {\n id: 'menu_item_delete',\n defaultMessage: 'Delete',\n description: 'Delete selected messages'\n },\n delete_for_all: {\n id: 'menu_item_delete_for_all',\n defaultMessage: 'Delete for All',\n description: 'Delete selected message(s) for all members'\n },\n send_retry: {\n id: 'menu_item_send_retry',\n defaultMessage: 'Retry',\n description: 'Retry sending message'\n },\n mute: {\n id: 'menu_item_mute',\n defaultMessage: 'Mute',\n description: 'Turn off notifications'\n },\n unmute: {\n id: 'menu_item_unmute',\n defaultMessage: 'Unmute',\n description: 'Turn notifications on'\n },\n reply: {\n id: 'menu_item_reply',\n defaultMessage: 'Reply',\n description: 'Reply to message'\n },\n forward: {\n id: 'menu_item_forward',\n defaultMessage: 'Forward',\n description: 'Forward message'\n },\n edit: {\n id: 'menu_item_edit',\n defaultMessage: 'Edit',\n description: 'Edit message'\n },\n topic_delete: {\n id: 'menu_item_delete_topic',\n defaultMessage: 'Delete',\n description: 'Delete entire topic'\n },\n topic_delete_warning: {\n id: 'topic_delete_warning',\n defaultMessage: 'Are you sure you want to delete this conversation? It cannot be undone.',\n description: 'Alert warning when deleting entire topic'\n },\n delete_messages_warning: {\n id: 'delete_messages_warning',\n defaultMessage: 'Are you sure you want to delete all messages for everyone? It cannot be undone.',\n description: 'Alert dialog warning when hard-deleting all messages.'\n },\n unblock: {\n id: 'menu_item_unblock',\n defaultMessage: 'Unblock',\n description: 'Unblock topic or user'\n },\n // Generic string suitable for either topic or user.\n block: {\n id: 'menu_item_block',\n defaultMessage: 'Block',\n description: 'Block topic or user'\n },\n topic_block_warning: {\n id: 'topic_block_warning',\n defaultMessage: 'Are you sure you want to block this conversation?',\n description: 'Alert warning when blocking a topic.'\n },\n member_delete: {\n id: 'menu_item_member_delete',\n defaultMessage: 'Remove',\n description: 'Remove user from topic'\n },\n archive: {\n id: 'menu_item_archive_topic',\n defaultMessage: 'Archive',\n description: 'Move topic from the list of active chats to archive'\n },\n unarchive: {\n id: 'menu_item_restore_topic',\n defaultMessage: 'Restore',\n description: 'Restore topic from archive'\n },\n edit_permissions: {\n id: 'menu_item_edit_permissions',\n defaultMessage: 'Edit permissions',\n description: 'Menu item [Edit permissions]'\n },\n clear_messages_warning: {\n id: 'clear_messages_warning',\n defaultMessage: 'Are you sure you want to clear all messages? It cannot be undone.',\n description: 'Alert dialog warning when deleting all messages.'\n },\n pin_message: {\n id: 'pin_message',\n defaultMessage: 'Pin',\n description: 'Menu item [Pin] for pinning message to the top.'\n },\n unpin_message: {\n id: 'unpin_message',\n defaultMessage: 'Unpin',\n description: 'Menu item [Unpin] for un-pinning the message.'\n },\n pin_chat: {\n id: 'pin_chat',\n defaultMessage: 'Pin',\n description: 'Menu item [Pin] for pinning chat to the top.'\n },\n unpin_chat: {\n id: 'unpin_chat',\n defaultMessage: 'Unpin',\n description: 'Menu item [Unpin] for un-pinning the chat.'\n },\n});\n\nclass ContextMenu extends React.Component {\n constructor(props) {\n super(props);\n\n this.selfRef = React.createRef();\n\n const {formatMessage} = props.intl;\n\n this.handlePageClick = this.handlePageClick.bind(this);\n this.handleEscapeKey = this.handleEscapeKey.bind(this);\n this.handleClick = this.handleClick.bind(this);\n\n // Preconfigured menu items.\n this.MenuItems = {\n 'topic_info': {\n id: 'topic_info',\n title: formatMessage(messages.info),\n handler: null\n },\n 'messages_clear': {\n id: 'messages_clear',\n title: formatMessage(messages.clear_messages),\n handler: (params, errorHandler) => {\n return props.onShowAlert(\n params.topicTitle || formatMessage(messages.clear_messages), // title\n formatMessage(messages.clear_messages_warning), // content\n (_ => { this.deleteMessages(true, false, params, errorHandler); }), // onConfirm\n null, // \"OK\"\n true, // Show Reject button\n null // \"Cancel\"\n );\n }\n },\n 'messages_clear_hard': {\n id: 'messages_clear_hard',\n title: formatMessage(messages.clear_for_all),\n handler: (params, errorHandler) => {\n return props.onShowAlert(\n params.topicTitle || formatMessage(messages.clear_for_all), // title\n formatMessage(messages.delete_messages_warning), // content\n (_ => { return this.deleteMessages(true, true, params, errorHandler); }),\n null, // \"OK\"\n true, // Show Reject button\n null // \"Cancel\"\n );\n }\n },\n 'message_delete': {\n id: 'message_delete',\n title: formatMessage(messages.delete),\n handler: (params, errorHandler) => {\n return this.deleteMessages(false, false, params, errorHandler);\n }\n },\n 'message_delete_hard': {\n id: 'message_delete_hard',\n title: formatMessage(messages.delete_for_all),\n handler: (params, errorHandler) => {\n return this.deleteMessages(false, true, params, errorHandler);\n }\n },\n // Hard-delete but with just 'Delete' title.\n 'message_delete_generic': {\n id: 'message_delete_generic',\n title: formatMessage(messages.delete),\n handler: (params, errorHandler) => {\n return this.deleteMessages(false, true, params, errorHandler);\n }\n },\n 'menu_item_send_retry': {\n id: 'menu_item_send_retry',\n title: formatMessage(messages.send_retry),\n handler: (params, errorHandler) => {\n return this.retryMessage(params, errorHandler);\n }\n },\n 'menu_item_reply': {\n id: 'menu_item_reply',\n title: formatMessage(messages.reply),\n handler: (params, errorHandler) => {\n return this.replyToMessage(params, errorHandler);\n }\n },\n 'menu_item_forward': {\n id: 'menu_item_forward',\n title: formatMessage(messages.forward),\n handler: _ => {} /* the action is taken directly in tinode-web */\n },\n 'menu_item_edit': {\n id: 'menu_item_edit',\n title: formatMessage(messages.edit),\n handler: (params, errorHandler) => {\n return this.editMessage(params, errorHandler);\n }\n },\n 'menu_item_pin': {\n id: 'menu_item_pin',\n title: formatMessage(messages.pin_message),\n handler: (params, errorHandler) => {\n return this.pinMessage(true, params, errorHandler);\n }\n },\n 'menu_item_unpin': {\n id: 'menu_item_unpin',\n title: formatMessage(messages.unpin_message),\n handler: (params, errorHandler) => {\n return this.pinMessage(false, params, errorHandler);\n }\n },\n 'topic_unmute': {\n id: 'topic_unmute',\n title: formatMessage(messages.unmute),\n handler: this.topicPermissionSetter.bind(this, '+P')\n },\n 'topic_mute': {\n id: 'topic_mute',\n title: formatMessage(messages.mute),\n handler: this.topicPermissionSetter.bind(this, '-P')\n },\n 'topic_unblock': {\n id: 'topic_unblock',\n title: formatMessage(messages.unblock),\n handler: this.topicPermissionSetter.bind(this, '+JP')\n },\n 'topic_block': {\n id: 'topic_block',\n title: formatMessage(messages.block),\n handler: (params, errorHandler) => {\n return props.onShowAlert(\n params.topicTitle || formatMessage(messages.block), // title\n formatMessage(messages.topic_block_warning), // content\n (_ => this.topicPermissionSetter('-JP', params, errorHandler).then(ctrl => {\n this.props.onTopicRemoved(params.topicName);\n return ctrl;\n })),\n null, // \"OK\"\n true, // Show Reject button\n null // \"Cancel\"\n );\n }\n },\n 'topic_delete': {\n id: 'topic_delete',\n title: formatMessage(messages.topic_delete),\n handler: (params, errorHandler) => {\n return props.onShowAlert(\n params.topicTitle || formatMessage(messages.topic_delete), // title\n formatMessage(messages.topic_delete_warning), // content\n (_ => {\n const topic = this.props.tinode.getTopic(params.topicName);\n if (!topic) {\n console.warn(\"Topic not found: \", params.topicName);\n return;\n }\n return topic.delTopic(true).catch(err => {\n if (errorHandler) {\n errorHandler(err.message, 'err');\n }\n });\n }),\n null, // \"OK\"\n true, // Show Reject button\n null // \"Cancel\"\n );\n }\n },\n 'topic_archive': {\n id: 'topic_archive',\n title: formatMessage(messages.archive),\n handler: (params, errorHandler) => {\n const topic = this.props.tinode.getTopic(params.topicName);\n if (!topic) {\n console.warn(\"Topic not found: \", params.topicName);\n return;\n }\n return topic.archive(true).catch(err => {\n if (errorHandler) {\n errorHandler(err.message, 'err');\n }\n });\n }\n },\n 'topic_restore': {\n id: 'topic_restore',\n title: formatMessage(messages.unarchive),\n handler: (params, errorHandler) => {\n const topic = this.props.tinode.getTopic(params.topicName);\n if (!topic) {\n console.warn(\"Topic not found: \", params.topicName);\n return;\n }\n return topic.archive(false).catch(err => {\n if (errorHandler) {\n errorHandler(err.message, 'err');\n }\n });\n }\n },\n 'topic_pin': {\n id: 'topic_pin',\n title: formatMessage(messages.pin_chat),\n handler: (params, errorHandler) => {\n const me = this.props.tinode.getMeTopic();\n if (!me) {\n console.warn(\"'me' topic not found\");\n return;\n }\n return me.pinTopic(params.topicName, true).catch(err => {\n if (errorHandler) {\n errorHandler(err.message, 'err');\n }\n });\n }\n },\n 'topic_unpin': {\n id: 'topic_unpin',\n title: formatMessage(messages.unpin_chat),\n handler: (params, errorHandler) => {\n const me = this.props.tinode.getMeTopic();\n if (!me) {\n console.warn(\"'me' topic not found\");\n return;\n }\n return me.pinTopic(params.topicName, false).catch(err => {\n if (errorHandler) {\n errorHandler(err.message, 'err');\n }\n });\n }\n },\n // menu_item_edit_permissions is defined elsewhere.\n 'permissions': {\n id: 'permissions',\n title: formatMessage(messages.edit_permissions),\n handler: null\n },\n 'member_delete': {\n id: 'member_delete',\n title: formatMessage(messages.member_delete),\n handler: (params, errorHandler) => {\n const topic = this.props.tinode.getTopic(params.topicName);\n if (!topic || !params.user) {\n console.warn(\"Topic or user not found: '\" + params.topicName + \"', '\" + params.user + \"'\");\n return;\n }\n return topic.delSubscription(params.user).catch(err => {\n if (errorHandler) {\n errorHandler(err.message, 'err');\n }\n });\n }\n },\n 'member_mute': {\n id: 'member_mute',\n title: formatMessage(messages.mute),\n handler: this.topicPermissionSetter.bind(this, '-P')\n },\n 'member_unmute': {\n id: 'member_unmute',\n title: formatMessage(messages.unmute),\n handler: this.topicPermissionSetter.bind(this, '+P')\n },\n 'member_block': {\n id: 'member_block',\n title: formatMessage(messages.block),\n handler: this.topicPermissionSetter.bind(this, '-JP')\n },\n 'member_unblock': {\n id: 'member_unblock',\n title: formatMessage(messages.unblock),\n handler: this.topicPermissionSetter.bind(this, '+JP')\n },\n };\n }\n\n componentDidMount() {\n document.addEventListener('mousedown', this.handlePageClick, false);\n document.addEventListener('keyup', this.handleEscapeKey, false);\n }\n\n componentWillUnmount() {\n document.removeEventListener('mousedown', this.handlePageClick, false);\n document.removeEventListener('keyup', this.handleEscapeKey, false);\n }\n\n handlePageClick(e) {\n if (this.selfRef.current.contains(e.target)) {\n return;\n }\n e.preventDefault();\n e.stopPropagation();\n this.props.hide();\n }\n\n handleEscapeKey(e) {\n if (e.keyCode === 27) {\n this.props.hide();\n }\n }\n\n handleClick(e) {\n e.preventDefault();\n e.stopPropagation();\n this.props.hide();\n let item = this.props.items[e.currentTarget.dataset.id];\n if (typeof item == 'string') {\n item = this.MenuItems[item];\n }\n\n if (!item) {\n console.error(\"Invalid menu item ID\", e.currentTarget.dataset.id);\n } else {\n this.props.onAction(\n item.id,\n item.handler(this.props.params, this.props.onError),\n this.props.params);\n }\n }\n\n // Menu Actions\n\n deleteMessages(all, hard, params, errorHandler) {\n const topic = this.props.tinode.getTopic(params.topicName);\n if (!topic) {\n console.warn(\"Topic not found: \", params.topicName);\n return;\n }\n\n // We don't know if the message is still pending (e.g. attachment is being uploaded),\n // so try cancelling first. No harm if we can't cancel.\n // The message can be cancelled if transmission to the server has not\n // started yet or if the message send has failed.\n if (!all && topic.cancelSend(params.seq)) {\n return;\n }\n\n const promise = all ?\n topic.delMessagesAll(hard) :\n params.replace > 0 ?\n topic.delMessagesEdits(params.replace, hard) :\n topic.delMessagesList([params.seq], hard);\n\n return promise.catch(err => {\n if (errorHandler) {\n errorHandler(err.message, 'err');\n }\n });\n }\n\n // Retries sending failed message.\n retryMessage(params, errorHandler) {\n const topic = this.props.tinode.getTopic(params.topicName);\n // Remove the existing message entry.\n if (!topic || !topic.flushMessage(params.seq)) {\n return;\n }\n const msg = topic.createMessage(params.content, false);\n return topic.publishDraft(msg).catch(err => {\n if (errorHandler) {\n errorHandler(err.message, 'err');\n }\n });\n }\n\n // Pin or unpin the message.\n pinMessage(pin, params, errorHandler) {\n const topic = this.props.tinode.getTopic(params.topicName);\n if (!topic) {\n return;\n }\n topic.pinMessage(params.seq, pin)\n .catch(err => errorHandler ? errorHandler(err.message, 'err') : null);\n }\n\n // Function is used by context menu to set permissions.\n topicPermissionSetter(mode, params, errorHandler) {\n const topic = this.props.tinode.getTopic(params.topicName);\n if (!topic) {\n console.warn(\"Topic not found\", params.topicName);\n return;\n }\n\n let result = topic.updateMode(params.user, mode);\n if (errorHandler) {\n result = result.catch(err => errorHandler(err.message, 'err'));\n }\n return result;\n }\n\n replyToMessage(params, errorHandler) {\n params.pickReply(params.seq, params.content, params.userFrom, params.userName, errorHandler);\n }\n\n editMessage(params, errorHandler) {\n params.editMessage(params.replace || params.seq, params.content, errorHandler);\n }\n\n render() {\n const menu = [];\n let count = 0;\n this.props.items.forEach(item => {\n if (typeof item == 'string') {\n item = this.MenuItems[item];\n }\n if (item && item.title) {\n const className = item.disabled ? 'disabled' : undefined;\n menu.push(\n item.title == '-' ?\n
  • \n :\n
  • {item.title}
    • \n );\n }\n count++;\n });\n\n // Ensure that menu is inside the app-container.\n const hSize = 12 * REM_SIZE;\n const vSize = REM_SIZE * (0.7 + menu.length * 2.5);\n const left = (this.props.bounds.right - this.props.clickAt.x < hSize) ?\n (this.props.clickAt.x - this.props.bounds.left - hSize) :\n (this.props.clickAt.x - this.props.bounds.left);\n const top = (this.props.bounds.bottom - this.props.clickAt.y < vSize) ?\n (this.props.clickAt.y - this.props.bounds.top - vSize) :\n (this.props.clickAt.y - this.props.bounds.top);\n\n const position = {\n left: left + 'px',\n top: top + 'px'\n };\n\n return (\n
      \n {menu}\n
    \n );\n }\n}\n\nexport default injectIntl(ContextMenu);\n","// Image zoom and crop widget.\n\nimport React from 'react';\n\nconst DEFAULT_MAX_ZOOM = 8;\n\nexport default class Cropper extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n // Coordinates of the top left corner of the image in bounding box (container) coordinates.\n panX: 0,\n panY: 0,\n // Origin of the zoom in image coordinates.\n originX: 0,\n originY: 0,\n // Zoom scale.\n zoom: 1,\n // Zoom min and max.\n minZoom: 0.001,\n maxZoom: DEFAULT_MAX_ZOOM,\n };\n\n // References to DOM elements for hooking up events and getting screen dimensions.\n // The transparent element which captures mouse moves (moves with the image).\n this.overlay = React.createRef();\n // The image cutout window or view port (static).\n this.cutout = React.createRef();\n // Scaled and translated image preview.\n this.preview = React.createRef();\n // The main container (static).\n this.boundingBox = React.createRef();\n\n // The original image width and height before any scaling (does not change).\n this.imageWidth = 0;\n this.imageHeight = 0;\n\n // Mouse position when dragging.\n this.mouseX = 0\n this.mouseY = 0;\n // Length of the previous mouse move when dragging.\n this.prevDistance = 0;\n\n // Bounding rectangles of static elements (does not change).\n this.cutoutRect = {};\n this.bBoxRect = {};\n // Center of the bounding box (does not change).\n this.originX = 0;\n this.originY = 0;\n\n this.initScaling = this.initScaling.bind(this);\n this.onZoom = this.onZoom.bind(this);\n this.handleZoom = this.handleZoom.bind(this);\n this.mouseDown = this.mouseDown.bind(this);\n this.mouseUp = this.mouseUp.bind(this);\n this.mouseMove = this.mouseMove.bind(this);\n this.mouseTouch = this.mouseTouch.bind(this);\n this.positionAll = this.positionAll.bind(this);\n this.translate = this.translate.bind(this);\n }\n\n componentDidMount() {\n this.overlay.current.addEventListener('mousedown', this.mouseDown, { passive: true });\n this.overlay.current.addEventListener('touchstart', this.mouseDown, { passive: true });\n\n // The rectangle position is in viewport coordinates.\n this.bBoxRect = this.boundingBox.current.getBoundingClientRect();\n // Center of the bounding box in container coordinates.\n this.originX = this.bBoxRect.width / 2;\n this.originY = this.bBoxRect.height / 2;\n\n // The cutout circle bounds in viewport coordinates.\n this.cutoutRect = this.cutout.current.getBoundingClientRect();\n }\n\n componentWillUnmount() {\n if (this.overlay.current) {\n this.overlay.current.removeEventListener('mousedown', this.mouseDown);\n this.overlay.current.removeEventListener('touchstart', this.mouseDown);\n }\n }\n\n // Position all elements.\n positionAll(panX, panY, zoom) {\n // Zoom origin in image preview coordinates.\n this.setState({\n panX: panX,\n panY: panY,\n zoom: zoom,\n originX: this.originX - panX,\n originY: this.originY - panY,\n });\n\n // Pass cut out coordinates to caller.\n const left = (this.originX - panX) * zoom - this.originX;\n const top = (this.originY - panY) * zoom - this.originY;\n this.props.onChange(\n (left + this.cutoutRect.left - this.bBoxRect.left) / zoom,\n (top + this.cutoutRect.top - this.bBoxRect.top) / zoom,\n this.cutoutRect.width / zoom,\n this.cutoutRect.height / zoom,\n zoom);\n }\n\n // Check if new location is within the limits.\n static checkBound(currPan, img, cutout, delta) {\n let nextDiff = Math.min(0, cutout[0] - img[0] - delta, img[1] - cutout[1] + delta);\n if (nextDiff == 0) {\n // Cutout is completely within the image.\n currPan += delta;\n } else if (Math.min(0, cutout[0] - img[0], img[1] - cutout[1]) < nextDiff) {\n // Cutout is outside of the range but closer to the bound.\n currPan += delta;\n }\n return currPan;\n }\n\n initScaling() {\n // Initialize components.\n const imgRect = this.preview.current.getBoundingClientRect();\n\n this.imageWidth = imgRect.width;\n this.imageHeight = imgRect.height;\n\n // Set zoom slider's min and max values. Make sure the scaled image cannot be smaller than the cutout.\n const minZoom = Math.max(this.cutoutRect.width / imgRect.width, this.cutoutRect.height / imgRect.height);\n this.setState({\n minZoom: minZoom,\n maxZoom: minZoom * DEFAULT_MAX_ZOOM\n });\n\n // Initial zoom level fills the bounding box at the smallest image dimension and overflows the largest, i.e. \"fill\" not \"fit\".\n const zoom = Math.max(this.bBoxRect.width / imgRect.width, this.bBoxRect.height / imgRect.height);\n // Converting from viewport coordinates to container, then panning.\n const panX = this.cutoutRect.left - this.bBoxRect.left -\n (imgRect.width - this.cutoutRect.width) / 2;\n const panY = this.cutoutRect.top - this.bBoxRect.top -\n (imgRect.height - this.cutoutRect.height) / 2;\n\n this.positionAll(panX, panY, zoom);\n }\n\n onZoom(e) {\n this.handleZoom(e.target.value);\n }\n\n handleZoom(zoom) {\n let panX = this.state.panX;\n let panY = this.state.panY;\n\n // Ensure that the image at the new zoom is not outside of the cutout boundaries.\n\n // Calculate image coordinates at the new zoom.\n const imgLeft = this.originX - (this.originX - panX) * zoom;\n const imgRight = imgLeft + this.imageWidth * zoom;\n const imgTop = this.originY - (this.originY - panY) * zoom;\n const imgBottom = imgTop + this.imageHeight * zoom;\n\n // Cutout in the same coordinates as the image.\n const coLeft = this.cutoutRect.left - this.bBoxRect.left;\n const coRight = coLeft + this.cutoutRect.width;\n const coTop = this.cutoutRect.top - this.bBoxRect.top;\n const coBottom = coTop + this.cutoutRect.height;\n\n if (coLeft < imgLeft) {\n panX -= (imgLeft - coLeft) / zoom;\n } else if (coRight > imgRight) {\n panX += (coRight - imgRight) / zoom;\n }\n\n if (coTop < imgTop) {\n panY -= (imgTop - coTop) / zoom;\n } else if (coBottom > imgBottom) {\n panY += (coBottom - imgBottom) /zoom;\n }\n\n this.positionAll(panX, panY, zoom);\n }\n\n mouseDown(e) {\n if (e.touches) {\n this.mouseX = e.touches[0].pageX;\n this.mouseY = e.touches[0].pageY;\n } else {\n this.mouseX = e.pageX;\n this.mouseY = e.pageY;\n }\n\n window.addEventListener('mousemove', this.mouseMove, { passive: false });\n window.addEventListener('touchmove', this.mouseTouch, { passive: false });\n window.addEventListener('mouseup', this.mouseUp, { passive: true });\n window.addEventListener('touchend', this.mouseUp, { passive: true });\n // Disable text selection in the entire document.\n document.body.style['userSelect'] = 'none';\n }\n\n // Perform image panning.\n translate(pageX, pageY) {\n const dX = (pageX - this.mouseX) / this.state.zoom;\n const dY = (pageY - this.mouseY) / this.state.zoom;\n\n this.mouseX = pageX;\n this.mouseY = pageY;\n\n // Make sure the image is within the cutout window.\n const imgRect = this.preview.current.getBoundingClientRect();\n\n // Check if the new position is within the boundaries, and if not if it's closer to them.\n const panX = Cropper.checkBound(this.state.panX, [imgRect.left, imgRect.right],\n [this.cutoutRect.left, this.cutoutRect.right], dX);\n const panY = Cropper.checkBound(this.state.panY, [imgRect.top, imgRect.bottom],\n [this.cutoutRect.top, this.cutoutRect.bottom], dY);\n\n this.positionAll(panX, panY, this.state.zoom);\n }\n\n // Image panning.\n mouseMove(e) {\n e.preventDefault();\n this.translate(e.pageX, e.pageY);\n }\n\n mouseTouch(e) {\n e.preventDefault();\n\n if (e.touches.length == 1) {\n this.translate(e.touches[0].pageX, e.touches[0].pageY);\n return;\n }\n\n // Image zooming by pinching.\n const [touch0, touch1] = e.touches;\n const distance = Math.sqrt((touch0.pageX - touch1.pageX) * (touch0.pageX - touch1.pageX) +\n (touch0.pageY - touch1.pageY) * (touch0.pageY - touch1.pageY));\n\n if (!this.prevDistance) {\n this.prevDistance = distance / this.state.zoom;\n }\n\n let scale = (distance / this.prevDistance);\n this.handleZoom(Math.max(this.minZoom, Math.min(this.maxZoom, scale)));\n }\n\n mouseUp(e) {\n window.removeEventListener('mousemove', this.mouseMove);\n window.removeEventListener('touchmove', this.mouseTouch);\n window.removeEventListener('mouseup', this.mouseUp);\n window.removeEventListener('touchend', this.mouseUp);\n // Re-enable text selection.\n document.body.style['userSelect'] = '';\n\n this.positionAll(this.state.panX, this.state.panY, this.state.zoom);\n }\n\n render() {\n // transform3d: position and scale.\n const t3d = `translate3d(${this.state.panX}px, ${this.state.panY}px, 0) scale(${this.state.zoom})`;\n // transformOrigin: zoom origin.\n const orig = `${this.state.originX}px ${this.state.originY}px`;\n\n // Overlay position and size are exactly equal to the position and size of the transformed image\n // except it uses different coordinates.\n const overlay = {\n top: `${this.originY - this.state.originY * this.state.zoom}px`,\n left: `${this.originX - this.state.originX * this.state.zoom}px`,\n width: `${this.imageWidth * this.state.zoom}px`,\n height: `${this.imageHeight * this.state.zoom}px`\n };\n return (\n
    \n
    \n \"\"\n\n
    \n
    \n
    \n
    \n \n
    \n
    \n );\n }\n}\n","import React from 'react';\nimport { FormattedMessage } from 'react-intl';\nimport SendMessage from '../widgets/send-message.jsx';\n\nimport { bytesToHumanSize, shortenFileName } from '../lib/strformat.js';\n\n// Get material icon name from mime type.\nfunction iconFromMime(mime) {\n // If more icons become available in material icons, add them to this mime-to-icon mapping.\n const mimeToIcon = {default: 'insert_drive_file', image: 'image', text: 'description', video: 'theaters'};\n\n return mimeToIcon[mime] || mimeToIcon[(mime || '').split('/')[0]] || mimeToIcon['default'];\n}\n\nexport default class DocPreview extends React.PureComponent {\n constructor(props) {\n super(props);\n\n this.handleSendDoc = this.handleSendDoc.bind(this);\n this.handleKeyDown = this.handleKeyDown.bind(this);\n }\n\n componentDidMount() {\n document.addEventListener('keydown', this.handleKeyDown);\n }\n\n componentWillUnmount() {\n document.removeEventListener('keydown', this.handleKeyDown);\n }\n\n handleKeyDown(e) {\n e.preventDefault();\n if (e.key === 'Escape') {\n this.props.onClose();\n }\n }\n\n handleSendDoc(caption) {\n this.props.onClose();\n this.props.onSendMessage(this.props.content.file);\n }\n\n render() {\n if (!this.props.content) {\n return null;\n }\n return (\n
    \n \n
    \n
    \n {iconFromMime(this.props.content.type)}\n
    {shortenFileName(this.props.content.name, 24) || '-'}
    \n
    {this.props.content.type || 'application/octet-stream'}
    \n
    {bytesToHumanSize(this.props.content.size)}
    \n
    \n
    \n \n
    \n );\n }\n};\n","import React from 'react';\n\nimport MenuCancel from './menu-cancel.jsx';\n\nexport default class ErrorPanel extends React.PureComponent {\n constructor(props) {\n super(props);\n\n this.state = {\n show: false,\n };\n\n this.hide = this.hide.bind(this);\n }\n\n componentDidUpdate(prevProps) {\n if (prevProps.level !== this.props.level) {\n this.setState({\n show: !(!this.props.level)\n });\n }\n }\n\n hide() {\n this.setState({show: false});\n if (this.props.onClearError) {\n this.props.onClearError();\n }\n }\n\n render() {\n const icons = {err: 'error', warn: 'warning', info: 'info'}\n const level = icons[this.props.level] || '';\n const className = 'info-box ' + level;\n return (\n
    \n
    {level}
    \n \n {this.props.text}\n {this.props.action ?\n <>\n   {e.preventDefault(); this.props.action();}}>\n {this.props.actionText}\n \n \n : null}\n \n
    \n
    \n );\n }\n};\n","// File uload/download progress indicator with a cancel inside.\nimport React from 'react';\nimport { FormattedMessage } from 'react-intl';\n\nexport default class FileProgress extends React.PureComponent {\n render() {\n return (\n
    \n
    \n {this.props.progress < 0.999 ?\n {e.preventDefault(); this.props.onCancel();}}>\n close \n \n :\n \n }\n
    \n );\n }\n}\n","// Forward Menu: message forwarding popup/dropdown menu.\nimport React from 'react';\nimport { FormattedMessage } from 'react-intl';\n\nimport { Tinode } from 'tinode-sdk';\n\nimport ContactList from './contact-list.jsx';\nimport SearchContacts from './search-contacts.jsx';\n\nexport default class ForwardDialog extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n query: null\n };\n\n this.handleEscapeKey = this.handleEscapeKey.bind(this);\n this.handleClose = this.handleClose.bind(this);\n\n this.handleSearchContacts = this.handleSearchContacts.bind(this);\n this.handleContactSelected = this.handleContactSelected.bind(this);\n }\n\n componentDidMount() {\n this.props.onInitFind();\n }\n\n handleEscapeKey(e) {\n if (e.keyCode === 27) {\n // Not forwarding the message.\n this.props.hide(false);\n }\n }\n\n handleClose(e) {\n e.preventDefault();\n this.props.hide(false);\n }\n\n handleSearchContacts(query) {\n this.setState({ query: Tinode.isNullValue(query) ? null : query });\n this.props.onSearchContacts(query);\n }\n\n handleContactSelected(uid) {\n this.props.onTopicSelected(uid);\n this.props.hide(true);\n }\n\n render() {\n let contacts = this.state.query != null ? this.props.searchResults : this.props.contacts;\n // Filter out contacts without a 'W' or 'J' permissions as well as the current topic.\n contacts = contacts.filter((c) => {\n return (c.name != this.props.topicSelected) && c.acs.isJoiner() && c.acs.isWriter();\n });\n\n return (\n
    \n
    \n
    \n
    \n \n
    \n {\n (search_placeholder) => \n }\n {\n (not_found_placeholder) => \n }\n
    \n
    \n );\n }\n}\n","// GroupSubs: a list of group subscribers currently online.\n// Show in the topic title bar\nimport React from 'react';\nimport { FormattedMessage } from 'react-intl';\n\nimport { MAX_ONLINE_IN_TOPIC } from '../config.js'\n\nimport LetterTile from './letter-tile.jsx';\nimport { makeImageUrl } from '../lib/blob-helpers.js';\n\nexport default class GroupSubs extends React.Component {\n constructor(props) {\n super(props);\n }\n\n render() {\n const usersOnline = [];\n const totalCount = (this.props.subscribers || []).length;\n const countToShow = Math.min(MAX_ONLINE_IN_TOPIC, totalCount);\n\n (this.props.subscribers || []).some((sub) => {\n usersOnline.push(\n
    \n \n
    \n );\n return usersOnline.length == countToShow;\n });\n if (usersOnline.length == 0) {\n return null;\n }\n return (\n
    {usersOnline} {totalCount > countToShow ?\n \n \n : null}\n
    \n );\n }\n};\n","import React from 'react';\n\nimport { KNOWN_HOSTS } from '../config.js';\n\n/* Combobox for selecting host name */\n\nexport default class HostSelector extends React.PureComponent {\n constructor(props) {\n super(props);\n\n this.state = {\n hostName: props.serverAddress,\n changed: false\n };\n\n this.handleHostNameChange = this.handleHostNameChange.bind(this);\n this.handleEditingFinished = this.handleEditingFinished.bind(this);\n this.handleKeyDown = this.handleKeyDown.bind(this);\n }\n\n handleHostNameChange(e) {\n this.setState({hostName: e.target.value, changed: true});\n }\n\n handleEditingFinished() {\n if (this.state.changed) {\n this.setState({changed: false});\n this.props.onServerAddressChange(this.state.hostName.trim());\n }\n }\n\n handleKeyDown(e) {\n if (e.key == 'Enter') {\n this.handleEditingFinished();\n }\n }\n\n render() {\n const hostOptions = [];\n for (let key in KNOWN_HOSTS) {\n let item = KNOWN_HOSTS[key];\n hostOptions.push(\n