Merge pull request #15097 from wayne-chen/audioSettingsModified

Case 21562: Audio settings screen

interface/resources/fonts/hifi-glyphs-1.38/fonts/hifi-glyphs.svg

@@ -14,7 +14,6 @@
 <glyph glyph-name="headphones-mic" unicode="&#102;" d="M419 348l-22 0c-3 48-42 83-89 83l-105 0c-47 0-86-35-89-83l-20 0c-25 0-45-19-45-44l0-71c0-25 20-45 45-45l19 0c1-27 14-50 33-66-3-17 5-35 20-45l41-25c7-4 15-7 23-7 3 0 6 1 10 2 11 2 21 9 27 19 13 21 6 48-14 60l-41 26c-10 6-21 8-33 5-8-2-15-6-20-11-12 11-20 27-20 45l0 152c0 34 29 62 64 62l105 0c35 0 64-28 64-62l0-152c0-1-1-3-1-3l48 0c25 0 46 20 46 45l0 71c0 25-21 44-46 44z m-306-134l-19 0c-10 0-19 9-19 19l0 71c0 10 9 19 19 19l19 0z m61-90c3 4 7 6 11 7 2 1 3 1 4 1 4 0 7-1 9-3l41-25c8-5 11-16 6-24-3-4-7-7-11-8-5-1-10 0-14 2l-40 25c-8 6-11 16-6 25z m264 109c0-10-8-19-19-19l-22 0 0 109 22 0c11 0 19-9 19-19z"/>
 <glyph glyph-name="gamepad" unicode="&#103;" d="M107 136c-10 0-20 3-29 10-46 37-8 131-4 141l1 1c1 4 3 7 5 11 16 30 37 73 81 73l182 0c51 0 71-47 87-85 5-10 44-101 4-138-28-26-67-1-102 22-21 13-42 26-56 26l-39 0c-13 0-33-13-53-27-25-16-52-34-77-34z m-10 141c-10-24-30-90-3-112 17-13 47 7 76 26 24 16 47 31 67 31l40 0c20 0 44-15 68-30 28-18 59-37 72-25 23 22 0 89-10 110-17 42-31 70-64 70l-182 0c-29 0-45-33-59-60-2-3-3-7-5-10z m247-36l-3 0c-7 0-13 6-13 13 0 7 6 13 13 13l3 0c7 0 13-6 13-13 0-7-6-13-13-13z m0 55l-3 0c-7 0-13 6-13 13 0 7 6 13 13 13l3 0c7 0 13-6 13-13 0-7-6-13-13-13z m-29-29l-2 0c-8 0-13 6-13 13 0 8 5 13 13 13l2 0c8 0 13-5 13-13 0-7-5-13-13-13z m57 0l-3 0c-7 0-13 6-13 13 0 8 6 13 13 13l3 0c7 0 13-5 13-13 0-7-6-13-13-13z m-172 26l-12 0 0 13c0 7-6 13-13 13-7 0-13-6-13-13l0-13-13 0c-7 0-13-6-13-13 0-7 6-13 13-13l13 0 0-12c0-8 6-14 13-14 7 0 13 6 13 14l0 12 12 0c8 0 13 6 13 13 0 7-5 13-13 13z"/>
 <glyph glyph-name="headphones" unicode="&#104;" d="M141 168l0 152c0 35 28 65 63 65l106 0c34 0 62-30 62-65l0-151c0-1 1-3 0-4l48 0c25 0 47 21 47 46l0 70c0 25-22 45-47 45l-21 0c-4 47-42 83-89 83l-106 0c-47 0-86-36-89-83l-19 0c-25 0-45-20-45-45l0-70c0-25 20-46 45-46l45 0z m-63 43l0 70c0 11 7 19 18 19l19 0 0-108-19 0c-11 0-18 8-18 19z m362 0c0-11-9-19-20-19l-20 0 0 108 20 0c11 0 20-8 20-19z"/>
-<glyph glyph-name="mic" unicode="&#105;" d="M318 370c0 33-26 59-59 59l-6 0c-33 0-59-26-59-59l0-105c0-33 26-59 59-59l6 0c33 0 59 26 59 59z m-25-103c0-19-15-34-34-34l-7 0c-19 0-34 15-34 34l0 104c0 19 15 34 34 34l7 0c19 0 34-15 34-34z m82 8c0 7-6 13-12 13-7 0-13-6-13-13 0-51-42-93-93-93-52 0-93 42-93 93 0 7-6 13-13 13-7 0-12-6-12-13 0-60 46-110 104-117l0-34-80 0c-8 0-14-6-14-14 0-7 6-13 14-13l186 0c7 0 13 6 13 13 0 8-6 14-13 14l-80 0 0 34c60 6 106 56 106 117z"/>
 <glyph glyph-name="upload" unicode="&#106;" d="M330 193l-83 86-84-86 52 0 0-141 61 23 0 118z m-12 247c-39 0-76-15-105-41-23-21-40-49-47-80-9 3-19 4-29 4-53 0-97-43-97-97 0-54 44-98 97-98 1 0 19 0 45 0l0 29c-26 0-44 0-45 0-37 0-68 31-68 69 0 37 31 68 68 68 12 0 23-3 34-9l19-11 2 23c3 31 18 59 41 81 23 21 54 33 85 33 70 0 127-57 127-127 0-70-57-127-127-127 0 0-5 0-10 0l0-29c5 0 10 0 10 0 86 0 156 70 156 156 0 86-70 156-156 156z"/>
 <glyph glyph-name="script" unicode="&#107;" d="M283 80l-150 0c-30 0-56 15-73 44-13 21-17 42-17 42l-3 15 91 0 0 252 315 0 0-238c1-7 5-58-21-87-13-14-29-21-50-21-42 0-63 23-73 41-6 11-9 21-10 29l-220 0c2-6 5-13 9-20 13-21 31-32 52-32l150 0c7 0 13-6 13-13 0-6-6-12-13-12z m-127 101l158 0 1-12c0 0 1-15 9-30 10-18 27-28 51-28 13 0 23 5 31 13 10 11 14 29 15 42 1 15 0 27 0 27l0 1 0 214-265 0z m225 168l-185 0c-8 0-14 6-14 13 0 8 6 14 14 14l185 0c8 0 14-6 14-14 0-7-6-13-14-13z m0-61l-185 0c-8 0-14 7-14 14 0 8 6 14 14 14l185 0c8 0 14-6 14-14 0-7-6-14-14-14z m0-60l-185 0c-8 0-14 6-14 14 0 7 6 13 14 13l185 0c8 0 14-6 14-13 0-8-6-14-14-14z"/>
 <glyph glyph-name="text" unicode="&#108;" d="M220 134l-81 232c-1 2-3 4-6 4l-10 0c-3 0-5-2-6-4l-83-233c-1-2 0-5 1-7 1-1 3-3 6-3l16 0c3 0 5 3 6 5l27 79 74 0 27-79c1-2 4-5 7-5l16 0c2 0 4 2 5 4 2 1 2 4 1 7z m-120 102l26 73c1 2 1 3 2 5 0-2 1-3 2-4l24-74z m252 60c-10 12-25 18-44 18-17 0-35-5-53-14-3-2-4-6-3-9l5-14c1-2 2-3 4-4 2-1 4 0 6 1 14 8 28 12 41 12 11 0 19-3 23-10 5-7 8-18 8-33l0-4-23-1c-25 0-44-6-58-16-14-11-21-26-21-45 0-17 4-31 14-40 10-10 23-16 40-16 12 0 23 3 32 8 6 4 11 8 17 14l1-13c1-4 4-7 7-7l10 0c4 0 8 4 8 8l0 115c0 23-5 39-14 50z m-87-119c0 11 4 19 11 24 8 5 22 9 42 10l19 1 0-10c0-17-4-30-12-39-8-9-19-13-33-13-9 0-16 2-20 7-5 4-7 11-7 20z m186-105c-10 0-15 8-15 18 0 22 0 298 0 320 0 10 5 19 15 19 0 0 0 0 0 0 10 0 15-8 15-18 1-22 1-299 1-321 0-10-6-18-16-18 0 0 0 0 0 0z"/>
@@ -97,7 +96,6 @@
 <glyph glyph-name="acceleration" unicode="&#57347;" d="M207 350c3 2 8 3 14 3 3 0 5 0 8-1 2 0 4-1 5-2 2-1 3-2 4-4 1-1 2-3 2-4l0 0c1 1 2 3 3 4 2 1 3 3 5 4 2 1 4 2 7 2 2 1 5 1 8 1 5 0 8 0 11-1 3-2 5-3 7-5 1-2 2-5 3-7 1-3 1-6 1-8l0-35-15 0 0 35c0 1 0 3 0 4 0 2-1 4-2 5-1 1-2 2-3 3-2 1-4 1-7 1-2 0-4 0-6-1-2-1-4-2-6-4-1-1-2-3-3-5-1-2-1-4-1-7l0-31-14 0 0 35c0 1-1 3-1 4 0 2-1 3-1 5-1 1-2 2-4 3-2 1-4 1-7 1-2 0-4 0-6-1-2-1-4-2-5-4-2-1-3-3-3-5-1-2-2-4-2-7l0-32-14 0 0 41c0 3 0 5 0 8 0 2 0 4-1 6l14 0c0-1 1-3 1-5 0-2 0-3 0-4l0 0c2 3 4 6 8 8z m112-92c0-2 0-4-1-5 0-1-1-3-2-4 0-2-1-3-2-4-1-2-2-3-3-5l-11-15 18 0 0-6-25 0 0 6 14 20c2 2 3 4 4 6 1 2 1 4 1 6 0 3 0 5-1 6-1 2-3 3-5 3-2 0-4-1-5-2-1-2-2-3-2-6l-7 1c1 4 3 7 5 9 2 2 5 3 9 3 2 0 4 0 6-1 1 0 3-1 4-3 1-1 2-2 2-4 1-2 1-3 1-5z m-112-18c-1 1-2 2-3 3-1 1-3 1-5 1-1 0-3 0-4-2-1-1-2-3-2-5 0-2 1-3 2-4 1-1 3-2 6-3 1-1 2-1 3-2 2-1 3-2 4-3 1-1 2-2 2-4 1-1 1-3 1-5 0-2 0-4-1-6-1-2-2-3-3-5-1-1-3-2-4-2-2-1-4-1-6-1-3 0-5 0-7 1-3 1-4 3-6 5l5 5c1-2 2-3 3-4 2 0 3-1 5-1 2 0 4 1 5 2 1 2 2 3 2 6 0 1 0 2-1 3 0 1-1 2-2 2 0 1-1 1-2 2-1 0-2 1-3 1-2 1-3 1-4 2-1 0-2 1-3 2-1 1-1 2-2 4 0 1-1 3-1 5 0 2 1 4 1 5 1 2 2 3 3 5 1 1 3 2 4 2 2 1 4 1 6 1 2 0 5 0 7-1 2-1 3-2 5-4z m18-16c0-2 0-4 0-6 1-2 1-4 2-5 1-1 2-3 3-3 1-1 3-2 4-2 2 0 4 1 5 2 1 2 2 3 3 5l6-3c-2-3-3-6-6-8-2-1-5-2-8-2-5 0-10 2-13 6-3 4-4 10-4 18 0 4 0 7 1 10 1 3 2 6 4 8 1 2 3 3 5 5 2 1 4 1 7 1 2 0 5 0 7-1 2-2 3-3 5-5 1-2 2-5 2-7 1-3 1-6 1-9l0-4-24 0z m16 6c0 4 0 7-2 10-1 2-3 4-6 4-1 0-3-1-4-2-1-1-2-2-2-3-1-2-1-3-2-5 0-1 0-2 0-4l16 0z m31-28c-3 0-5 0-7 1-2 2-4 3-5 5-2 3-3 5-3 8-1 3-1 6-1 10 0 4 0 7 1 10 0 3 1 5 3 8 1 2 3 3 5 5 2 1 5 1 7 1 3 0 5 0 6-1 2-1 3-1 4-2l-4-6c0 1-1 1-2 2-1 0-2 1-4 1-1 0-2-1-3-2-1-1-2-2-3-3-1-2-1-4-2-6 0-2 0-4 0-7 0-2 0-5 0-7 1-2 1-4 2-5 1-2 2-3 3-4 1-1 2-1 4-1 1 0 3 0 4 1 1 0 1 1 2 2l4-6c-3-3-6-4-11-4z m17 74l-107 0c-2 0-4 2-4 4 0 2 2 4 4 4l107 0c2 0 4-2 4-4 0-2-2-4-4-4z"/>
 <glyph glyph-name="particles" unicode="&#57348;" d="M332 229c0 12 10 23 23 23 13 0 23-11 23-23 0-13-10-24-23-24-13 0-23 11-23 24z m-54-68c0 13 10 23 23 23 13 0 23-10 23-23 0-13-10-23-23-23-13 0-23 10-23 23z m-62-18c0 13 11 23 24 23 12 0 23-10 23-23 0-13-11-23-23-23-13 0-24 10-24 23z m-46 60c0 13 10 23 23 23 13 0 23-10 23-23 0-13-10-23-23-23-13 0-23 10-23 23z m81-138c-5 3-8 9-9 15-1 6 1 12 4 17 4 5 9 8 15 9 6 1 13 0 18-4 5-4 8-9 9-15 1-6-1-13-4-18-4-4-9-8-16-9-6-1-12 1-17 5z m-183 201c0 13 10 23 23 23 13 0 23-10 23-23 0-13-10-23-23-23-13 0-23 10-23 23z m111 46c0 13 10 24 23 24 13 0 23-11 23-24 0-12-10-23-23-23-13 0-23 11-23 23z m71-94c0 13 11 23 24 23 12 0 23-10 23-23 0-13-11-23-23-23-13 0-24 10-24 23z m163 52c0 13 10 23 23 23 13 0 23-10 23-23 0-13-10-23-23-23-12 0-23 10-23 23z m-111 38c0 13 11 23 23 23 13 0 24-10 24-23 0-13-11-23-24-23-12 0-23 10-23 23z m-170 90c0 13 11 24 24 24 12 0 23-11 23-24 0-12-11-23-23-23-13 0-24 11-24 23z m235-23c0 13 10 23 23 23 13 0 23-10 23-23 0-13-10-23-23-23-13 0-23 10-23 23z"/>
 <glyph glyph-name="voxels" unicode="&#57349;" d="M434 379l-85 49c-4 2-10 2-14 0l-77-45-79 46c-4 2-10 2-14 0l-85-49c-4-3-7-7-7-12l0-98c0-5 3-10 7-13l78-45 0-89c0-5 3-10 7-12l85-49c2-2 5-2 7-2 2 0 5 0 7 2l85 49c4 2 7 7 7 12l0 88 78 45c5 3 7 7 7 12l0 99c0 5-2 9-7 12z m-21-88l-59 34 0 68 59-35z m-69-55l-73 42 0 80 59 35 0-68-29-17c-6-3-8-11-4-16 2-4 6-6 10-6 2 0 4 0 6 1l29 17 60-34z m-75-57l0 66 59-34 0-66z m-26 113l-59 34 0 68 59-34z m-142 68l59 34 0-68-31-18c-6-3-8-11-5-17 2-3 7-6 11-6 2 0 4 1 6 2l31 18 59-34-60-34-70 41z m156-270l-71 41 0 81 59 34 0-67-28-16c-6-3-8-11-5-17 3-3 7-6 11-6 2 0 4 1 6 2l28 16 59-34z"/>
-<glyph glyph-name="lock" unicode="&#57350;" d="M389 233l0 62c0 68-55 124-123 124-69 0-124-56-124-124l0-62c-24-4-44-26-44-52l0-74c0-29 24-52 52-52l230 0c29 0 53 23 53 52l0 74c0 26-18 48-44 52z m-123 129c37 0 67-30 67-67l0-61-135 0 0 61c0 37 31 67 68 67z"/>
 <glyph glyph-name="visible" unicode="&#57351;" d="M258 116c-55 0-106 17-147 51-31 25-47 51-47 52-4 7-4 16 1 23 2 4 66 98 195 96 133-3 192-93 195-97 4-6 4-15 0-22 0-1-15-27-46-53-29-23-79-50-151-50 0 0 0 0 0 0z m-148 113c7-7 17-18 30-29 34-27 73-40 118-40 0 0 0 0 0 0 47 0 88 13 122 40 13 10 23 21 29 29-7 7-16 16-30 26-34 25-74 38-119 38-81 2-130-42-150-64z m-27 1z m227-4c0-25-21-46-47-46-26 0-47 21-47 46 0 26 21 47 47 47 26 0 47-21 47-47z"/>
 <glyph glyph-name="model" unicode="&#57352;" d="M494 395c-2 5-8 8-13 7l-90-16 45 72c3 5 2 11-1 15-4 4-10 5-15 3l-213-98c-15 5-72 27-111 43 0 0-1 0-1 0 0 0 0 0 0 0 0 0-1 0-1 1 0 0-1 0-1 0 0 0-1 0-1 0 0 0 0 0 0 0-1 0-1 0-2 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0-1 0-1 0 0 0 0 0 0-1-1 0-1 0-2 0 0 0 0 0 0 0 0 0-1 0-1 0 0 0 0-1 0-1-1 0-2 0-3-1 0 0 0 0 0 0 0-1-1-1-1-1 0 0 0 0 0 0 0 0 0-1 0-1-1 0-1 0-1 0 0 0 0 0 0-1 0 0 0 0-1-1l-27-52-33-40c-3-4-3-10 0-15 2-3 6-5 10-5 1 0 2 0 4 1l50 17 40 2-26-51c-3-4-2-9 1-13 1-1 26-30 52-58 15-17 28-30 38-40 6-6 11-11 15-14l-16-61-46-18c-6-3-9-10-6-16 2-5 6-8 11-8 1 0 3 1 4 1l45 18 17-15c2-3 5-4 8-4 4 0 7 2 9 5 5 5 4 12-1 17l-17 15 16 61 76-90c2-2 6-4 9-4 1 0 2 0 3 0l85 23c5 2 8 6 9 11 0 5-2 9-7 12l-136 72 45 91 178 123c5 3 6 9 4 15z m-200-117l-122 55 41 21 181 83z m-148 73l-24 33c16-6 39-15 54-21z m-59-6l-9 13 15 29 27-38 2-2z m36-77l23 44c18-45 35-91 47-121-19 20-45 49-70 77z m194-194l-57 68 105-55z m-94 101c-5 14-42 104-30 77 0-2-21 49-28 66l121-59-48-95z m108 120l43 63 70 16z"/>
 <glyph glyph-name="avatar-2" unicode="&#57353;" d="M256 88c-93 0-169 75-169 168 0 93 76 169 169 169 93 0 169-76 169-169 0-93-76-168-169-168z m0 316c-81 0-148-66-148-148 0-81 67-147 148-147 81 0 148 66 148 147 0 82-67 148-148 148z m97-90l-1 1c-3 3-7 4-10 4-1 0-61-9-86-9-1 0-1 0-2 0-25 0-87 10-87 10-5 0-10-2-13-6l-1-2c-2-3-2-7-1-10 1-4 3-6 6-8 12-5 49-20 60-22 2 0 5 0 6-7 1-8-3-46-7-65-5-17-13-40-13-41-2-6 1-13 7-15l8-3c3-1 6-1 9 1 3 1 5 4 6 7l21 65 20-67c1-3 3-6 6-7 2-1 4-1 5-1 2 0 3 0 5 0l7 3c5 2 8 8 7 14 0 0-6 24-11 44-3 12-4 30-5 45 0 9-1 16-2 22 0 1 0 4 5 5 0 0 1 0 2 0l55 22c4 2 6 5 7 9 1 4 0 8-3 11z m-68 37c0-16-13-29-29-29-16 0-29 13-29 29 0 16 13 29 29 29 16 0 29-13 29-29z"/>
@@ -137,7 +135,6 @@
 <glyph glyph-name="wallet" unicode="&#57383;" d="M400 400c-3 10-8 19-15 24-7 5-15 8-24 7l-227 0c-19 0-35-15-35-34l0-58c-19-2-34-18-34-37l0-95c0-19 15-35 34-37l0-53c0-19 16-34 35-34l228 0c20 0 30 16 38 31l0 1c1 2 21 53 21 139 0 83-19 140-21 146z m-309-193l0 95c0 6 5 11 11 11l86 0c6 0 11-5 11-11l0-95c0-6-5-11-11-11l-86 0c-6 0-11 5-11 11z m285-82c-8-16-11-16-14-16l-228 0c-5 0-9 4-9 8l0 53 63 0c21 0 37 17 37 37l0 95c0 20-16 37-37 37l-63 0 0 58c0 4 4 8 9 8l228 0c3 0 10 1 13-13l0 0 0-1c1 0 20-55 20-137 0-77-17-124-19-129z"/>
 <glyph glyph-name="send" unicode="&#57384;" d="M391 376c4-4 4-10 2-16-7-21-14-42-22-63-21-63-43-125-65-188-1-4-4-7-6-10-8-6-17-4-22 5-15 28-30 56-44 85-1 1 0 3 0 4 18 21 35 43 53 64 5 6 10 12 15 18 4 6 5 10 1 14-4 4-8 3-14-1-18-15-36-30-54-44-9-8-19-16-28-24-1-1-3-1-4 0-29 14-57 29-85 44-6 3-8 8-8 14 1 7 5 11 11 13 36 13 72 25 107 37 49 17 97 34 145 51 7 2 13 2 18-3z"/>
 <glyph glyph-name="password" unicode="&#57385;" d="M104 267l0 41 22 0 0-41 35 20 11-19-35-20 35-20-11-20-35 20 0-40-22 0 0 40-35-20-11 20 35 20-35 20 11 19z m136 0l0 41 23 0 0-41 35 20 11-19-35-20 35-20-11-20-35 20 0-40-23 0 0 40-35-20-11 20 35 20-35 20 11 19z m137 0l0 41 23 0 0-41 34 20 12-19-35-20 35-20-12-20-35 20 0-40-22 0 0 40-35-20-11 20 35 20-35 20 11 19z"/>
-<glyph glyph-name="rez" unicode="&#57381;" d="M373 321c-2 5-6 8-11 8l-49 8 55 61c4 4 5 9 3 14-2 5-7 8-12 8 0 0 0 0 0 0l-114-1c-5-1-10-4-12-9l-54-136c-1-4-1-8 1-11 2-4 6-6 9-7l38-5-54-136c-2-6 0-13 6-16 2-1 4-2 7-2 3 0 7 2 10 5l175 206c3 4 3 9 2 13z"/>
 <glyph glyph-name="keyboard-collapse" unicode="&#57387;" d="M373 249l-26 0 0 25 26 0z m-35 0l-27 0 0 25 27 0z m-36 0l-27 0 0 25 27 0z m-36 0l-26 0 0 25 26 0z m-35 0l-27 0 0 25 27 0z m-36 0l-27 0 0 25 27 0z m-36 0l-26 0 0 25 26 0z m224-1l18 0c7 0 13 6 13 13 0 7-6 13-13 13l-18 0m-262 0l-17 0c-7 0-13-6-13-13 0-7 6-13 13-13l17 0m252 39l-31 0 0 25 31 0z m-42 0l-31 0 0 25 31 0z m-41 0l-32 0 0 25 32 0z m-42 0l-32 0 0 25 32 0z m-42 0l-32 0 0 25 32 0z m-41 0l-32 0 0 25 32 0z m218-1l18 0c7 0 13 6 13 13 0 8-6 14-13 14l-18 0m-262 0l-17 0c-7 0-13-6-13-14 0-7 6-13 13-13l17 0m288-124l-315 0c-33 0-59 28-59 61l0 76c0 34 26 61 59 61l315 0c33 0 59-27 59-61l0-76c1-33-26-61-59-61z m-315 172c-18 0-33-16-33-34l0-77c0-19 15-34 33-34l315 0c18 0 33 15 33 34l0 77c0 19-15 34-33 34z m248-99l32 0 0-25-32 0z m-41 0l31 0 0-25-31 0z m-42 0l31 0 0-25-31 0z m-43 0l32 0 0-25-32 0z m-42 0l32 0 0-25-32 0z m-41 0l31 0 0-25-31 0z m250-26l18 0c7 0 13 6 13 14 0 7-6 13-13 13l-18 0m-262 0l-17 0c-7 0-13-6-13-13 0-8 6-13 13-13l17 0m81-82l50-50 53 54-107 0"/>
 <glyph glyph-name="image" unicode="&#57386;" d="M257 428c52 0 104 0 156 0 24 0 37-13 37-37 1-90 1-179 0-269 0-25-13-38-39-38-103 0-207 0-311 0-26 0-39 13-39 40 0 88 0 176 0 263 0 28 13 41 41 41 51 0 103 0 155 0z m167-263c0 7 0 10 0 14 0 69 0 138 0 206 0 17 0 17-17 17-101 0-202 0-303 0-16 0-17-1-17-17 0-58 0-115 0-173 0-3 0-7 0-12 8 3 14 6 19 9 17 8 30 7 44-6 5-5 10-10 15-15 5-7 11-8 19-4 40 21 81 41 121 61 19 10 31 8 46-7 9-9 18-18 27-27 15-15 29-29 46-46z m-328-54c7 0 11-1 15-1 98 0 197 0 296 0 6 0 14 2 16 6 5 7 0 14-6 20-27 26-54 53-80 80-8 9-15 9-26 4-67-35-135-68-203-102-3-2-6-4-12-7z m-8 26c21 10 40 20 63 31-8 7-14 12-20 17-2 2-7 3-10 3-30-9-36-17-34-48 0 0 0-1 1-3z m134 169c1-25-21-46-46-46-25-1-46 20-47 46 0 25 21 46 47 47 25 0 46-21 46-47z m-46 22c-12 0-22-9-22-21 0-13 9-22 21-23 13 0 23 9 23 22 0 13-10 22-22 22z"/>
 <glyph glyph-name="environments" unicode="&#57388;" d="M256 454c-110 0-199-89-199-199 0-110 89-199 199-199 0 0 0 0 0 0l2-1 0 1c109 1 197 90 197 199 0 110-89 199-199 199z m114-204l0 0 0 5c0 0 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 2l0 4 0 0c-1 22-4 43-10 63 21 5 36 11 46 15 15-26 24-56 24-87 0-30-8-59-23-85-8 4-23 11-47 16 6 21 9 42 10 64z m-19 102c-13 30-30 53-46 69 34-10 64-30 86-57-9-4-22-8-40-12z m-6-95c0-23-4-45-11-66-20 4-42 6-65 6l0 120c23 1 45 3 66 6 6-21 10-43 10-66z m-46-170c17 17 37 41 52 75 20-5 34-10 42-13-24-31-57-53-94-62z m-30 256l0 77c17-14 40-37 56-73-17-2-36-4-56-4z m0-248l0 77c20-1 39-3 56-5-16-35-40-59-56-72z m-83 252c17 35 40 59 56 73l0-77c-19 0-38 1-56 4z m-19-90c0 23 4 45 10 65 20-3 42-5 65-5l0-120c-23 0-45-1-65-4-6 20-10 42-10 64z m-47 106c22 28 52 48 86 58-15-16-33-39-46-70-18 4-31 8-40 12z m40-199c15-36 37-61 53-77-38 10-72 32-96 64 9 4 24 9 43 13z m82 8l0-77c-16 13-39 37-56 73 18 2 37 3 56 4z m-100 92l-1 0 0-4c0-1 0-1 0-2 0 0 0 0 0-1 0 0 0 0 0-1 0 0 0-1 0-1l0-5 1 0c0-21 4-42 10-62-23-5-39-10-49-15-14 25-21 53-21 82 0 30 8 60 23 86 10-4 25-10 47-14-6-20-10-41-10-63z"/>
@@ -156,4 +153,10 @@
 <glyph glyph-name="avatar-1" unicode="&#84;" d="M396 344l-2 2c-4 4-9 5-15 5-1 0-88-13-124-14-1 0-2 0-3 0-37 0-126 15-127 15-7 1-14-2-18-8l-2-4c-3-4-3-9-2-14 2-5 5-9 10-11 16-7 69-22 85-29 3-1 10-4 10-14 1-11-4-67-10-93-7-26-18-60-19-60-3-9 2-19 11-22l11-4c4-2 9-1 13 1 5 2 8 6 9 10l31 94 28-96c2-5 5-9 9-11 3-1 5-2 8-2 2 0 4 0 7 1l10 4c8 3 12 12 10 20 0 1-8 36-16 65-4 17-6 43-7 64-1 13-1 21-3 30 0 1 2 11 10 14 10 4 81 29 80 28 6 2 10 7 11 13 1 6-1 12-5 16z m-98 54c0-24-19-43-43-43-24 0-43 19-43 43 0 23 19 42 43 42 24 0 43-19 43-42z"/>
 <glyph glyph-name="steam-square" unicode="&#57397;" d="M391 327c0 15-5 28-16 39-11 11-24 16-39 16-15 0-28-5-39-16-11-11-16-24-16-39 0-15 5-28 16-39 11-11 24-16 39-16 15 0 28 5 39 16 11 11 16 24 16 39z m-174-168c0-16-5-29-16-40-11-11-25-16-40-16-11 0-21 2-30 8-9 5-16 13-20 22 9-4 19-8 28-12 11-4 22-4 34 1 11 5 19 13 24 25 5 11 5 22 0 34-5 11-13 19-25 24l-23 9c4 1 8 2 12 2 15 0 29-6 40-17 11-11 16-24 16-40z m258 234l0-274c0-23-8-42-24-58-16-16-35-24-58-24l-274 0c-23 0-42 8-58 24-16 16-24 35-24 58l0 44 49-20c4-18 12-32 26-44 14-11 30-17 49-17 19 0 37 7 51 20 15 14 23 30 25 50l99 72c28 0 53 10 73 30 20 20 30 44 30 73 0 28-10 52-30 73-20 20-45 30-73 30-28 0-53-10-73-30-20-20-30-44-30-72l-64-92c-2 0-5 0-8 0-15 0-28-4-40-11l-84 34 0 134c0 23 8 42 24 58 16 16 35 24 58 24l274 0c23 0 42-8 58-24 16-16 24-35 24-58z m-70-66c0-19-7-36-20-49-14-14-30-20-49-20-19 0-36 6-49 20-13 13-20 30-20 49 0 19 7 35 20 48 13 14 30 21 49 21 19 0 35-7 49-20 13-14 20-30 20-49z"/>
 <glyph glyph-name="oculus" unicode="&#57398;" d="M431 363c-16 13-34 22-54 26-11 3-23 4-34 5-9 0-18 0-26 0-41 0-82 0-123 0-9 0-18 0-26 0-12-1-24-2-35-5-20-4-38-13-54-26-32-26-51-65-51-106 0-41 19-80 51-106 16-13 34-22 54-27 12-2 23-3 35-4 8 0 17 0 26 0 41 0 82 0 123 0 8 0 17 0 26 0 11 0 23 2 34 4 20 5 38 14 54 27 32 26 51 65 51 106 0 41-19 80-51 106z m-60-143c-6-4-13-7-20-8-7-1-14-1-22-1-49 0-99 0-148 0-8 0-15 0-22 1-7 1-14 4-20 8-12 8-19 22-19 37 0 15 7 29 19 37 6 4 13 7 20 8 7 1 14 1 22 1 49 0 99 0 148 0 8 0 15 0 22-1 7-1 14-4 20-8 12-8 19-22 19-37 0-15-7-29-19-37z"/>
+<glyph glyph-name="check-circled" unicode="&#57399;" d="M258 74c-48 0-94 19-128 53-34 34-53 80-53 130 0 47 19 92 53 126 35 34 80 53 128 53 0 0 0 0 0 0 49 0 95-19 129-54 34-34 52-80 52-129 0-47-19-92-53-126-35-34-80-53-128-53z m0 324c-38 0-74-15-101-42-27-27-42-62-42-100 0-39 15-75 42-102 27-27 63-42 101-42 38 0 74 15 101 42 27 27 42 62 42 99 0 39-15 75-42 102-27 28-62 43-101 43 0 0 0 0 0 0z m-25-164c-2 3-3 5-4 6-13 13-26 26-39 39-10 11-26 12-36 2-10-10-10-25 1-36 20-21 40-41 60-61 11-10 26-10 36 0 36 35 71 71 106 107 4 3 7 9 8 14 2 10-3 21-13 26-10 4-21 3-29-5-28-29-57-57-85-86-2-1-3-3-5-6z"/>
+<glyph glyph-name="rez-01" unicode="&#57381;" d="M373 321c-2 5-6 8-11 8l-49 8 55 61c4 4 5 9 3 14-2 5-7 8-12 8 0 0 0 0 0 0l-114-1c-5-1-10-4-12-9l-54-136c-1-4-1-8 1-11 2-4 6-6 9-7l38-5-54-136c-2-6 0-13 6-16 2-1 4-2 7-2 3 0 7 2 10 5l175 206c3 4 3 9 2 13z"/>
+<glyph glyph-name="locked" unicode="&#57350;" d="M367 271c-7 7-15 12-23 17l0 64c0 27-9 50-28 69-19 19-42 28-69 28l-6 0c-27 0-50-9-70-28-19-19-28-42-28-69l0-65c-8-4-16-10-23-16-19-19-29-42-29-69l0-43c0-27 10-50 29-68 20-19 43-28 70-28l108 0c27 0 50 9 69 28 19 19 28 42 28 68l0 43c0 27-9 50-28 69z m-187 81c0 17 6 31 18 42 12 12 26 18 43 18l6 0c17 0 31-6 43-18 12-11 18-25 18-42l0-54c-3 1-7 1-10 1l-108 0c-4 0-7 0-10-1z m179-193c0-17-6-30-18-42-12-12-26-18-43-18l-108 0c-17 0-31 6-43 18-12 12-18 25-18 42l0 43c0 17 6 30 18 42 12 12 26 18 43 18l108 0c17 0 31-6 43-18 12-12 18-25 18-42z m-116 55c-12 0-22-10-22-22l0-55c0-12 10-22 22-22 13 0 23 10 23 22l0 55c0 12-10 22-23 22z"/>
+<glyph glyph-name="unlocked" unicode="&#57401;" d="M243 214c-12 0-22-10-22-22l0-55c0-12 10-22 22-22 13 0 23 10 23 22l0 55c0 12-10 22-23 22z m237 207c-19 19-42 28-69 28l-6 0c-27 0-50-9-69-28-20-19-29-42-29-69l0-53c-3 0-6 0-9 0l-108 0c-27 0-50-9-70-28-19-19-29-42-29-69l0-43c0-27 10-50 29-68 19-19 43-28 69-28l109 0c27 0 50 9 69 28 18 19 28 42 28 68l0 43c0 27-9 50-28 69-7 7-15 12-23 17l0 64c0 17 6 31 18 42 12 12 26 18 43 18l6 0c17 0 31-6 43-18 12-11 18-25 18-42l0-81 36 0 0 81c0 27-9 50-28 69z m-121-219l0-43c0-17-6-30-18-42-12-12-26-18-43-18l-108 0c-17 0-31 6-43 18-12 12-18 25-18 42l0 43c0 17 6 30 18 42 12 12 26 18 43 18l108 0c17 0 31-6 43-18 12-12 18-26 18-42z"/>
+<glyph glyph-name="mic" unicode="&#105;" d="M299 347l0 47c0 21-17 38-40 38-21 0-39-17-39-38l0-47z m-79-41l0-46c0-21 18-38 39-38 22 0 40 17 40 38l0 46z m159 3l0-56c0-55-43-98-98-108l0-36 46 0c11 0 20-9 20-19 0-11-9-20-20-20l-131 0c-10 0-19 9-19 20 0 10 9 19 19 19l46 0 0 36c-55 9-98 53-98 108l0 58c0 11 10 19 20 18 10 0 17-9 17-20l0-56c0-40 37-72 80-72 44 0 80 32 80 72l0 55c0 11 8 19 18 19 10 0 20-7 20-18z"/>
+<glyph glyph-name="92-lock-01" unicode="&#57400;" d="M389 233l0 62c0 68-55 124-123 124-69 0-124-56-124-124l0-62c-24-4-44-26-44-52l0-74c0-29 24-52 52-52l230 0c29 0 53 23 53 52l0 74c0 26-18 48-44 52z m-123 129c37 0 67-30 67-67l0-61-135 0 0 61c0 37 31 67 68 67z"/>
 </font></defs></svg>

interface/resources/fonts/hifi-glyphs-1.38/icons-reference.html

@@ -12,7 +12,7 @@
   <body>
     <div class="container">
       <h1>HiFi Glyphs</h1>
-      <p class="small">This font was created for use in <a href="http://highfidelity.io/">High Fidelity</a></p>
+      <p class="small">This font was created with<a href="http://fontastic.me/">Fontastic</a></p>
       <h2>CSS mapping</h2>
       <ul class="glyphs css-mapping">
         <li>
@@ -43,10 +43,6 @@
           <div class="icon icon-headphones"></div>
           <input type="text" readonly="readonly" value="headphones">
         </li>
-        <li>
-          <div class="icon icon-mic"></div>
-          <input type="text" readonly="readonly" value="mic">
-        </li>
         <li>
           <div class="icon icon-upload"></div>
           <input type="text" readonly="readonly" value="upload">
@@ -375,10 +371,6 @@
           <div class="icon icon-voxels"></div>
           <input type="text" readonly="readonly" value="voxels">
         </li>
-        <li>
-          <div class="icon icon-lock"></div>
-          <input type="text" readonly="readonly" value="lock">
-        </li>
         <li>
           <div class="icon icon-visible"></div>
           <input type="text" readonly="readonly" value="visible">
@@ -535,10 +527,6 @@
           <div class="icon icon-password"></div>
           <input type="text" readonly="readonly" value="password">
         </li>
-        <li>
-          <div class="icon icon-rez"></div>
-          <input type="text" readonly="readonly" value="rez">
-        </li>
         <li>
           <div class="icon icon-keyboard-collapse"></div>
           <input type="text" readonly="readonly" value="keyboard-collapse">
@@ -611,6 +599,30 @@
           <div class="icon icon-oculus"></div>
           <input type="text" readonly="readonly" value="oculus">
         </li>
+        <li>
+          <div class="icon icon-check-circled"></div>
+          <input type="text" readonly="readonly" value="check-circled">
+        </li>
+        <li>
+          <div class="icon icon-rez-01"></div>
+          <input type="text" readonly="readonly" value="rez-01">
+        </li>
+        <li>
+          <div class="icon icon-locked"></div>
+          <input type="text" readonly="readonly" value="locked">
+        </li>
+        <li>
+          <div class="icon icon-unlocked"></div>
+          <input type="text" readonly="readonly" value="unlocked">
+        </li>
+        <li>
+          <div class="icon icon-mic"></div>
+          <input type="text" readonly="readonly" value="mic">
+        </li>
+        <li>
+          <div class="icon icon-92-lock-01"></div>
+          <input type="text" readonly="readonly" value="92-lock-01">
+        </li>
       </ul>
       <h2>Character mapping</h2>
       <ul class="glyphs character-mapping">
@@ -642,10 +654,6 @@
           <div data-icon="h" class="icon"></div>
           <input type="text" readonly="readonly" value="h">
         </li>
-        <li>
-          <div data-icon="i" class="icon"></div>
-          <input type="text" readonly="readonly" value="i">
-        </li>
         <li>
           <div data-icon="j" class="icon"></div>
           <input type="text" readonly="readonly" value="j">
@@ -974,10 +982,6 @@
           <div data-icon="&#xe005;" class="icon"></div>
           <input type="text" readonly="readonly" value="&amp;#xe005;">
         </li>
-        <li>
-          <div data-icon="&#xe006;" class="icon"></div>
-          <input type="text" readonly="readonly" value="&amp;#xe006;">
-        </li>
         <li>
           <div data-icon="&#xe007;" class="icon"></div>
           <input type="text" readonly="readonly" value="&amp;#xe007;">
@@ -1134,10 +1138,6 @@
           <div data-icon="&#xe029;" class="icon"></div>
           <input type="text" readonly="readonly" value="&amp;#xe029;">
         </li>
-        <li>
-          <div data-icon="&#xe025;" class="icon"></div>
-          <input type="text" readonly="readonly" value="&amp;#xe025;">
-        </li>
         <li>
           <div data-icon="&#xe02b;" class="icon"></div>
           <input type="text" readonly="readonly" value="&amp;#xe02b;">
@@ -1210,6 +1210,30 @@
           <div data-icon="&#xe036;" class="icon"></div>
           <input type="text" readonly="readonly" value="&amp;#xe036;">
         </li>
+        <li>
+          <div data-icon="&#xe037;" class="icon"></div>
+          <input type="text" readonly="readonly" value="&amp;#xe037;">
+        </li>
+        <li>
+          <div data-icon="&#xe025;" class="icon"></div>
+          <input type="text" readonly="readonly" value="&amp;#xe025;">
+        </li>
+        <li>
+          <div data-icon="&#xe006;" class="icon"></div>
+          <input type="text" readonly="readonly" value="&amp;#xe006;">
+        </li>
+        <li>
+          <div data-icon="&#xe039;" class="icon"></div>
+          <input type="text" readonly="readonly" value="&amp;#xe039;">
+        </li>
+        <li>
+          <div data-icon="i" class="icon"></div>
+          <input type="text" readonly="readonly" value="i">
+        </li>
+        <li>
+          <div data-icon="&#xe038;" class="icon"></div>
+          <input type="text" readonly="readonly" value="&amp;#xe038;">
+        </li>
       </ul>
     </div>
     <script>(function() {

interface/resources/fonts/hifi-glyphs-1.38/styles.css

@@ -59,9 +59,6 @@
 .icon-headphones:before {
   content: "\68";
 }
-.icon-mic:before {
-  content: "\69";
-}
 .icon-upload:before {
   content: "\6a";
 }
@@ -308,9 +305,6 @@
 .icon-voxels:before {
   content: "\e005";
 }
-.icon-lock:before {
-  content: "\e006";
-}
 .icon-visible:before {
   content: "\e007";
 }
@@ -428,9 +422,6 @@
 .icon-password:before {
   content: "\e029";
 }
-.icon-rez:before {
-  content: "\e025";
-}
 .icon-keyboard-collapse:before {
   content: "\e02b";
 }
@@ -485,3 +476,21 @@
 .icon-oculus:before {
   content: "\e036";
 }
+.icon-check-circled:before {
+  content: "\e037";
+}
+.icon-rez-01:before {
+  content: "\e025";
+}
+.icon-locked:before {
+  content: "\e006";
+}
+.icon-unlocked:before {
+  content: "\e039";
+}
+.icon-mic:before {
+  content: "\69";
+}
+.icon-92-lock-01:before {
+  content: "\e038";
+}

interface/resources/qml/controlsUit/Switch.qml

@@ -27,6 +27,7 @@ Item {
     property string labelGlyphOnText: "";
     property int labelGlyphOnSize: 32;
     property alias checked: originalSwitch.checked;
+    property string backgroundOnColor: "#252525";
     signal onCheckedChanged;
     signal clicked;
 
@@ -40,10 +41,10 @@ Item {
         onClicked: rootSwitch.clicked();
         hoverEnabled: true
 
-        topPadding: 3;
+        topPadding: 1;
         leftPadding: 3;
         rightPadding: 3;
-        bottomPadding: 3;
+        bottomPadding: 1;
 
         onHoveredChanged: {
             if (hovered) {
@@ -54,7 +55,7 @@ Item {
         }
 
         background: Rectangle {
-            color: "#252525";
+            color: checked ? backgroundOnColor : "#252525";
             implicitWidth: rootSwitch.switchWidth;
             implicitHeight: rootSwitch.height;
             radius: rootSwitch.switchRadius;

interface/resources/qml/hifi/NameCard.qml

@@ -376,7 +376,7 @@ Item {
     }
     FiraSansRegular {
         id: nameCardConnectionInfoText
-        visible: selected && !isMyCard && pal.activeTab == "connectionsTab" && !isMyCard
+        visible: selected && !isMyCard && pal.activeTab == "connectionsTab"
         width: parent.width
         height: displayNameTextPixelSize
         size: displayNameTextPixelSize - 4
@@ -412,7 +412,7 @@ Item {
     }
     FiraSansRegular {
         id: nameCardRemoveConnectionText
-        visible: selected && !isMyCard && pal.activeTab == "connectionsTab" && !isMyCard
+        visible: selected && !isMyCard && pal.activeTab == "connectionsTab"
         width: parent.width
         height: displayNameTextPixelSize
         size: displayNameTextPixelSize - 4
@@ -425,7 +425,7 @@ Item {
     }
     HifiControls.Button {
         id: visitConnectionButton
-        visible: selected && !isMyCard && pal.activeTab == "connectionsTab" && !isMyCard
+        visible: selected && !isMyCard && pal.activeTab == "connectionsTab"
         text: "Visit"
         enabled: thisNameCard.placeName !== ""
         anchors.verticalCenter: nameCardRemoveConnectionImage.verticalCenter
@@ -450,7 +450,7 @@ Item {
         // Style
         radius: 4
         color: "#c5c5c5"
-        visible: (isMyCard || (selected && pal.activeTab == "nearbyTab")) && isPresent
+        visible: (!isMyCard && (selected && pal.activeTab == "nearbyTab")) && isPresent
         // Rectangle for the zero-gain point on the VU meter
         Rectangle {
             id: vuMeterZeroGain
@@ -481,7 +481,7 @@ Item {
             id: vuMeterBase
             // Anchors
             anchors.fill: parent
-            visible: isMyCard || selected
+            visible: !isMyCard && selected
             // Style
             color: parent.color
             radius: parent.radius
@@ -489,7 +489,7 @@ Item {
         // Rectangle for the VU meter audio level
         Rectangle {
             id: vuMeterLevel
-            visible: isMyCard || selected
+            visible: !isMyCard && selected
             // Size
             width: (thisNameCard.audioLevel) * parent.width
             // Style
@@ -525,7 +525,7 @@ Item {
         anchors.verticalCenter: nameCardVUMeter.verticalCenter;
         anchors.left: nameCardVUMeter.left;
         // Properties
-        visible: (isMyCard || (selected && pal.activeTab == "nearbyTab")) && isPresent;
+        visible: (!isMyCard && (selected && pal.activeTab == "nearbyTab")) && isPresent;
         minimumValue: -60.0
         maximumValue: 20.0
         stepSize: 5
@@ -572,18 +572,6 @@ Item {
                 implicitHeight: 16
             }
         }
-         RalewayRegular {
-            // The slider for my card is special, it controls the master gain
-            id: gainSliderText;
-            visible: isMyCard;
-            text: "master volume";
-            size: hifi.fontSizes.tabularData;
-            anchors.left: parent.right;
-            anchors.leftMargin: 8;
-            color: hifi.colors.baseGrayHighlight;
-            horizontalAlignment: Text.AlignLeft;
-            verticalAlignment: Text.AlignTop;
-        }
     }
 
     function updateGainFromQML(avatarUuid, sliderValue, isReleased) {

interface/resources/qml/hifi/audio/Audio.qml

@@ -11,12 +11,12 @@
 //  See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
 //
 
-import QtQuick 2.5
+import QtQuick 2.7
 import QtQuick.Controls 2.2
 import QtQuick.Layouts 1.3
 
 import stylesUit 1.0
-import controlsUit 1.0 as HifiControls
+import controlsUit 1.0 as HifiControlsUit
 import "../../windows"
 import "./" as AudioControls
 
@@ -26,7 +26,11 @@ Rectangle {
     HifiConstants { id: hifi; }
 
     property var eventBridge;
+    // leave as blank, this is user's volume for the avatar mixer
+    property var myAvatarUuid: ""
     property string title: "Audio Settings"
+    property int switchHeight: 16
+    property int switchWidth: 40
     signal sendToScript(var message);
 
     color: hifi.colors.baseGray;
@@ -38,7 +42,7 @@ Rectangle {
 
 
     property bool isVR: AudioScriptingInterface.context === "VR"
-    property real rightMostInputLevelPos: 0
+    property real rightMostInputLevelPos: 450
     //placeholder for control sizes and paddings
     //recalculates dynamically in case of UI size is changed
     QtObject {
@@ -80,16 +84,16 @@ Rectangle {
         });
     }
 
-    function disablePeakValues() {
+    function updateMyAvatarGainFromQML(sliderValue, isReleased) {
-        root.showPeaks = false;
+        if (Users.getAvatarGain(myAvatarUuid) != sliderValue) {
-        AudioScriptingInterface.devices.input.peakValuesEnabled = false;
+            Users.setAvatarGain(myAvatarUuid, sliderValue);
+        }
     }
 
     Component.onCompleted: enablePeakValues();
-    Component.onDestruction: disablePeakValues();
-    onVisibleChanged: visible ? enablePeakValues() : disablePeakValues();
 
     Column {
+        id: column
         spacing: 12;
         anchors.top: bar.bottom
         anchors.bottom: parent.bottom
@@ -98,65 +102,68 @@ Rectangle {
 
         Separator { }
 
-        RalewayRegular {
+        RowLayout {
-            x: margins.paddings + muteMic.boxSize + muteMic.spacing;
+            x: 2 * margins.paddings;
-            size: 16;
+            spacing: columnOne.width;
-            color: "white";
-            text: qsTr("Input Device Settings")
-        }
-
-        ColumnLayout {
-            x: margins.paddings;
-            spacing: 16;
             width: parent.width;
 
             // mute is in its own row
-            RowLayout {
+            ColumnLayout {
-                spacing: (margins.sizeCheckBox - 10.5) * 3;
+                id: columnOne
-                AudioControls.CheckBox {
+                spacing: 24;
-                    id: muteMic
+                x: margins.paddings
-                    text: qsTr("Mute microphone");
+                HifiControlsUit.Switch {
-                    spacing: margins.sizeCheckBox - boxSize
+                    id: muteMic;
-                    isRedCheck: true;
+                    height: root.switchHeight;
+                    switchWidth: root.switchWidth;
+                    labelTextOn: "Mute microphone";
+                    backgroundOnColor: "#E3E3E3";
                     checked: AudioScriptingInterface.muted;
-                    onClicked: {
+                    onCheckedChanged: {
                         AudioScriptingInterface.muted = checked;
                         checked = Qt.binding(function() { return AudioScriptingInterface.muted; }); // restore binding
                     }
                 }
 
-                AudioControls.CheckBox {
+                HifiControlsUit.Switch {
-                    id: stereoMic
+                    id: stereoInput;
-                    spacing: muteMic.spacing;
+                    height: root.switchHeight;
-                    text: qsTr("Enable stereo input");
+                    switchWidth: root.switchWidth;
+                    labelTextOn:  qsTr("Stereo input");
+                    backgroundOnColor: "#E3E3E3";
                     checked: AudioScriptingInterface.isStereoInput;
-                    onClicked: {
+                    onCheckedChanged: {
                         AudioScriptingInterface.isStereoInput = checked;
                         checked = Qt.binding(function() { return AudioScriptingInterface.isStereoInput; }); // restore binding
                     }
                 }
             }
 
-            RowLayout {
+            ColumnLayout {
-                spacing: muteMic.spacing*2; //make it visually distinguish
+                spacing: 24;
-                AudioControls.CheckBox {
+                HifiControlsUit.Switch {
-                    spacing: muteMic.spacing
+                    height: root.switchHeight;
-                    text: qsTr("Enable noise reduction");
+                    switchWidth: root.switchWidth;
+                    labelTextOn: "Noise Reduction";
+                    backgroundOnColor: "#E3E3E3";
                     checked: AudioScriptingInterface.noiseReduction;
-                    onClicked: {
+                    onCheckedChanged: {
                         AudioScriptingInterface.noiseReduction = checked;
                         checked = Qt.binding(function() { return AudioScriptingInterface.noiseReduction; }); // restore binding
                     }
                 }
-                AudioControls.CheckBox {
+
-                    spacing: muteMic.spacing
+                HifiControlsUit.Switch {
-                    text: qsTr("Show audio level meter");
+                    id: audioLevelSwitch
+                    height: root.switchHeight;
+                    switchWidth: root.switchWidth;
+                    labelTextOn: qsTr("Audio Level Meter");
+                    backgroundOnColor: "#E3E3E3";
                     checked: AvatarInputs.showAudioTools;
-                    onClicked: {
+                    onCheckedChanged: {
                         AvatarInputs.showAudioTools = checked;
                         checked = Qt.binding(function() { return AvatarInputs.showAudioTools; }); // restore binding
                     }
-                    onXChanged: rightMostInputLevelPos = x + width
                 }
             }
         }
@@ -171,7 +178,7 @@ Rectangle {
             HiFiGlyphs {
                 width: margins.sizeCheckBox
                 text: hifi.glyphs.mic;
-                color: hifi.colors.primaryHighlight;
+                color: hifi.colors.white;
                 anchors.left: parent.left
                 anchors.leftMargin: -size/4 //the glyph has empty space at left about 25%
                 anchors.verticalCenter: parent.verticalCenter;
@@ -183,8 +190,8 @@ Rectangle {
                 anchors.left: parent.left
                 anchors.leftMargin: margins.sizeCheckBox
                 size: 16;
-                color: hifi.colors.lightGrayText;
+                color: hifi.colors.white;
-                text: qsTr("CHOOSE INPUT DEVICE");
+                text: qsTr("Choose input device");
             }
         }
 
@@ -222,7 +229,7 @@ Rectangle {
                         }
                     }
                 }
-                InputPeak {
+                AudioControls.InputPeak {
                     id: inputLevel
                     anchors.right: parent.right
                     peak: model.peak;
@@ -233,6 +240,13 @@ Rectangle {
                 }
             }
         }
+        AudioControls.LoopbackAudio {
+            x: margins.paddings
+
+            visible: (bar.currentIndex === 1 && isVR) ||
+                (bar.currentIndex === 0 && !isVR);
+            anchors { left: parent.left; leftMargin: margins.paddings }
+        }
 
         Separator {}
 
@@ -247,7 +261,7 @@ Rectangle {
                 anchors.verticalCenter: parent.verticalCenter;
                 width: margins.sizeCheckBox
                 text: hifi.glyphs.unmuted;
-                color: hifi.colors.primaryHighlight;
+                color: hifi.colors.white;
                 size: 36;
             }
 
@@ -257,8 +271,8 @@ Rectangle {
                 anchors.leftMargin: margins.sizeCheckBox
                 anchors.verticalCenter: parent.verticalCenter;
                 size: 16;
-                color: hifi.colors.lightGrayText;
+                color: hifi.colors.white;
-                text: qsTr("CHOOSE OUTPUT DEVICE");
+                text: qsTr("Choose output device");
             }
         }
 
@@ -293,7 +307,68 @@ Rectangle {
                 }
             }
         }
-        PlaySampleSound {
+
+        Item {
+            id: gainContainer
+            x: margins.paddings;
+            width: parent.width - margins.paddings*2
+            height: gainSliderTextMetrics.height
+
+            HifiControlsUit.Slider {
+                id: gainSlider
+                anchors.right: parent.right
+                height: parent.height
+                width: 200
+                minimumValue: -60.0
+                maximumValue: 20.0
+                stepSize: 5
+                value: Users.getAvatarGain(myAvatarUuid)
+                onValueChanged: {
+                    updateMyAvatarGainFromQML(value, false);
+                }
+                onPressedChanged: {
+                    if (!pressed) {
+                        updateMyAvatarGainFromQML(value, false);
+                    }
+                }
+
+                MouseArea {
+                    anchors.fill: parent
+                    onWheel: {
+                        // Do nothing.
+                    }
+                    onDoubleClicked: {
+                        gainSlider.value = 0.0
+                    }
+                    onPressed: {
+                        // Pass through to Slider
+                        mouse.accepted = false
+                    }
+                    onReleased: {
+                        // the above mouse.accepted seems to make this
+                        // never get called, nonetheless...
+                        mouse.accepted = false
+                    }
+                }
+            }
+            TextMetrics {
+                id: gainSliderTextMetrics
+                text: gainSliderText.text
+                font: gainSliderText.font
+            }
+            RalewayRegular {
+                // The slider for my card is special, it controls the master gain
+                id: gainSliderText;
+                text: "Avatar volume";
+                size: 16;
+                anchors.left: parent.left;
+                color: hifi.colors.white;
+                horizontalAlignment: Text.AlignLeft;
+                verticalAlignment: Text.AlignTop;
+            }
+        }
+
+        AudioControls.PlaySampleSound {
             x: margins.paddings
 
             visible: (bar.currentIndex === 1 && isVR) ||

interface/resources/qml/hifi/audio/LoopbackAudio.qml

@@ -0,0 +1,67 @@
+//
+//  LoopbackAudio.qml
+//  qml/hifi/audio
+//
+//  Created by Seth Alves on 2019-2-18
+//  Copyright 2019 High Fidelity, Inc.
+//
+//  Distributed under the Apache License, Version 2.0.
+//  See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
+//
+
+import QtQuick 2.7
+import QtQuick.Controls 2.2
+import QtQuick.Layouts 1.3
+
+import stylesUit 1.0
+import controlsUit 1.0 as HifiControlsUit
+
+RowLayout {
+    property bool audioLoopedBack: AudioScriptingInterface.getServerEcho();
+    function startAudioLoopback() {
+        if (!audioLoopedBack) {
+            audioLoopedBack = true;
+            AudioScriptingInterface.setServerEcho(true);
+        }
+    }
+    function stopAudioLoopback() {
+        if (audioLoopedBack) {
+            audioLoopedBack = false;
+            AudioScriptingInterface.setServerEcho(false);
+        }
+    }
+
+    HifiConstants { id: hifi; }
+
+    Timer {
+        id: loopbackTimer
+        interval: 8000;
+        running: false;
+        repeat: false;
+        onTriggered: {
+            stopAudioLoopback();
+        }
+    }
+
+    HifiControlsUit.Button {
+        text: audioLoopedBack ? qsTr("STOP TESTING YOUR VOICE") : qsTr("TEST YOUR VOICE");
+        color: audioLoopedBack ? hifi.buttons.red : hifi.buttons.blue;
+        onClicked: {
+            if (audioLoopedBack) {
+                loopbackTimer.stop();
+                stopAudioLoopback();
+            } else {
+                loopbackTimer.restart();
+                startAudioLoopback();
+            }
+        }
+    }
+
+    RalewayRegular {
+        Layout.leftMargin: 2;
+        size: 14;
+        color: "white";
+        font.italic: true
+        text: audioLoopedBack ? qsTr("Speak in your input") : "";
+    }
+}

interface/resources/qml/hifi/audio/PlaySampleSound.qml

@@ -14,7 +14,7 @@ import QtQuick.Controls 2.2
 import QtQuick.Layouts 1.3
 
 import stylesUit 1.0
-import controlsUit 1.0 as HifiControls
+import controlsUit 1.0 as HifiControlsUit
 
 RowLayout {
     property var sound: null;
@@ -55,32 +55,9 @@ RowLayout {
 
     HifiConstants { id: hifi; }
 
-    Button {
+    HifiControlsUit.Button {
-        id: control
+        text: isPlaying ? qsTr("STOP TESTING YOUR SOUND") : qsTr("TEST YOUR SOUND");
-        background: Rectangle {
+        color: isPlaying ? hifi.buttons.red : hifi.buttons.blue;
-            implicitWidth: 20;
-            implicitHeight: 20;
-            radius: hifi.buttons.radius;
-            gradient: Gradient {
-                GradientStop {
-                    position: 0.2;
-                    color: isPlaying ? hifi.buttons.colorStart[hifi.buttons.blue] : hifi.buttons.colorStart[hifi.buttons.black];
-                }
-                GradientStop {
-                    position: 1.0;
-                    color: isPlaying ? hifi.buttons.colorFinish[hifi.buttons.blue] : hifi.buttons.colorFinish[hifi.buttons.black];
-                }
-            }
-        }
-        contentItem: HiFiGlyphs {
-            // absolutely position due to asymmetry in glyph
-//            x: isPlaying ? 0 : 1;
-//            y: 1;
-            size: 14;
-            color: (control.pressed || control.hovered) ? (isPlaying ? "black" : hifi.colors.primaryHighlight) : "white";
-            text: isPlaying ? hifi.glyphs.stop_square : hifi.glyphs.playback_play;
-        }
-
         onClicked: isPlaying ? stopSound() : playSound();
     }
 
@@ -88,7 +65,7 @@ RowLayout {
         Layout.leftMargin: 2;
         size: 14;
         color: "white";
-        text: isPlaying ? qsTr("Stop sample sound") : qsTr("Play sample sound");
+        font.italic: true
+        text: isPlaying ? qsTr("Listen to your output") : "";
     }
-
 }

libraries/audio-client/src/AudioClient.cpp

@@ -1531,7 +1531,6 @@ void AudioClient::setNoiseReduction(bool enable, bool emitSignal) {
     }
 }
 
-
 bool AudioClient::setIsStereoInput(bool isStereoInput) {
     bool stereoInputChanged = false;
     if (isStereoInput != _isStereoInput && _inputDeviceInfo.supportedChannelCounts().contains(2)) {

libraries/audio-client/src/AudioClient.h

@@ -210,13 +210,13 @@ public slots:
     void setNoiseReduction(bool isNoiseGateEnabled, bool emitSignal = true);
     bool isNoiseReductionEnabled() const { return _isNoiseGateEnabled; }
 
-    bool getLocalEcho() { return _shouldEchoLocally; }
+    virtual bool getLocalEcho() override { return _shouldEchoLocally; }
-    void setLocalEcho(bool localEcho) { _shouldEchoLocally = localEcho; }
+    virtual void setLocalEcho(bool localEcho) override { _shouldEchoLocally = localEcho; }
-    void toggleLocalEcho() { _shouldEchoLocally = !_shouldEchoLocally; }
+    virtual void toggleLocalEcho() override { _shouldEchoLocally = !_shouldEchoLocally; }
 
-    bool getServerEcho() { return _shouldEchoToServer; }
+    virtual bool getServerEcho() override { return _shouldEchoToServer; }
-    void setServerEcho(bool serverEcho) { _shouldEchoToServer = serverEcho; }
+    virtual void setServerEcho(bool serverEcho) override { _shouldEchoToServer = serverEcho; }
-    void toggleServerEcho() { _shouldEchoToServer = !_shouldEchoToServer; }
+    virtual void toggleServerEcho() override { _shouldEchoToServer = !_shouldEchoToServer; }
 
     void processReceivedSamples(const QByteArray& inputBuffer, QByteArray& outputBuffer);
     void sendMuteEnvironmentPacket();

libraries/audio/src/AbstractAudioInterface.h

@@ -45,9 +45,16 @@ public slots:
     virtual bool shouldLoopbackInjectors() { return false; }
 
     virtual bool setIsStereoInput(bool stereo) = 0;
-
     virtual bool isStereoInput() = 0;
 
+    virtual bool getLocalEcho() = 0;
+    virtual void setLocalEcho(bool localEcho) = 0;
+    virtual void toggleLocalEcho() = 0;
+
+    virtual bool getServerEcho() = 0;
+    virtual void setServerEcho(bool serverEcho) = 0;
+    virtual void toggleServerEcho() = 0;
+
 signals:
     void isStereoInputChanged(bool isStereo);
 };

libraries/script-engine/src/AudioScriptingInterface.cpp

@@ -88,3 +88,43 @@ bool AudioScriptingInterface::isStereoInput() {
     }
     return stereoEnabled;
 }
+
+bool AudioScriptingInterface::getServerEcho() {
+    bool serverEchoEnabled = false;
+    if (_localAudioInterface) {
+        serverEchoEnabled = _localAudioInterface->getServerEcho();
+    }
+    return serverEchoEnabled;
+}
+
+void AudioScriptingInterface::setServerEcho(bool serverEcho) {
+    if (_localAudioInterface) {
+        QMetaObject::invokeMethod(_localAudioInterface, "setServerEcho", Q_ARG(bool, serverEcho));
+    }
+}
+
+void AudioScriptingInterface::toggleServerEcho() {
+    if (_localAudioInterface) {
+        QMetaObject::invokeMethod(_localAudioInterface, "toggleServerEcho");
+    }
+}
+
+bool AudioScriptingInterface::getLocalEcho() {
+    bool localEchoEnabled = false;
+    if (_localAudioInterface) {
+        localEchoEnabled = _localAudioInterface->getLocalEcho();
+    }
+    return localEchoEnabled;
+}
+
+void AudioScriptingInterface::setLocalEcho(bool localEcho) {
+    if (_localAudioInterface) {
+        QMetaObject::invokeMethod(_localAudioInterface, "setLocalEcho", Q_ARG(bool, localEcho));
+    }
+}
+
+void AudioScriptingInterface::toggleLocalEcho() {
+    if (_localAudioInterface) {
+        QMetaObject::invokeMethod(_localAudioInterface, "toggleLocalEcho");
+    }
+}

libraries/script-engine/src/AudioScriptingInterface.h

@@ -66,6 +66,39 @@ public:
         _localAudioInterface->getAudioSolo().reset();
     }
 
+    /**jsdoc
+     * @function Audio.getServerEcho
+     */
+    Q_INVOKABLE bool getServerEcho();
+
+    /**jsdoc
+     * @function Audio.setServerEcho
+     * @parm {boolean} serverEcho
+     */
+    Q_INVOKABLE void setServerEcho(bool serverEcho);
+
+    /**jsdoc
+     * @function Audio.toggleServerEcho
+     */
+    Q_INVOKABLE void toggleServerEcho();
+
+    /**jsdoc
+     * @function Audio.getLocalEcho
+     */
+    Q_INVOKABLE bool getLocalEcho();
+
+    /**jsdoc
+     * @function Audio.setLocalEcho
+     * @parm {boolean} localEcho
+     */
+    Q_INVOKABLE void setLocalEcho(bool localEcho);
+
+    /**jsdoc
+     * @function Audio.toggleLocalEcho
+     */
+    Q_INVOKABLE void toggleLocalEcho();
+
+
 protected:
     AudioScriptingInterface() = default;