diff --git a/css/_font.scss b/css/_font.scss index 0339740cf..844be07ba 100644 --- a/css/_font.scss +++ b/css/_font.scss @@ -27,6 +27,9 @@ .icon-arrow_back:before { content: "\e5c4"; } +.icon-close:before { + content: "\e5cd"; +} .icon-event_note:before { content: "\e616"; } diff --git a/fonts/jitsi.eot b/fonts/jitsi.eot index 69b78c82b..8f0647c9e 100755 Binary files a/fonts/jitsi.eot and b/fonts/jitsi.eot differ diff --git a/fonts/jitsi.svg b/fonts/jitsi.svg index 819949dca..632e921ed 100755 --- a/fonts/jitsi.svg +++ b/fonts/jitsi.svg @@ -15,6 +15,7 @@ + diff --git a/fonts/jitsi.ttf b/fonts/jitsi.ttf index fd52ede75..0029d3033 100755 Binary files a/fonts/jitsi.ttf and b/fonts/jitsi.ttf differ diff --git a/fonts/jitsi.woff b/fonts/jitsi.woff index d45befc40..de9348e82 100755 Binary files a/fonts/jitsi.woff and b/fonts/jitsi.woff differ diff --git a/fonts/selection.json b/fonts/selection.json index 9ac1ba2b3..0c644720d 100755 --- a/fonts/selection.json +++ b/fonts/selection.json @@ -1,6 +1,467 @@ { "IcoMoonType": "selection", "icons": [ + { + "icon": { + "paths": [ + "M810 274l-238 238 238 238-60 60-238-238-238 238-60-60 238-238-238-238 60-60 238 238 238-238z" + ], + "attrs": [], + "isMulticolor": false, + "isMulticolor2": false, + "tags": [ + "close" + ], + "defaultCode": 58829, + "grid": 24 + }, + "attrs": [], + "properties": { + "ligatures": "clear, close", + "id": 157, + "order": 1241, + "prevSize": 24, + "code": 58829, + "name": "close" + }, + "setIdx": 0, + "setId": 2, + "iconIdx": 157 + }, + { + "icon": { + "paths": [ + "M598 128h298v298h-86v-152l-418 418-60-60 418-418h-152v-86zM810 810v-298h86v298c0 46-40 86-86 86h-596c-48 0-86-40-86-86v-596c0-46 38-86 86-86h298v86h-298v596h596z" + ], + "attrs": [], + "isMulticolor": false, + "isMulticolor2": false, + "tags": [ + "open_in_new" + ], + "defaultCode": 59550, + "grid": 24 + }, + "attrs": [], + "properties": { + "ligatures": "launch, open_in_new", + "id": 1047, + "order": 1225, + "prevSize": 24, + "name": "open_in_new", + "code": 59550 + }, + "setIdx": 1, + "setId": 1, + "iconIdx": 47 + }, + { + "icon": { + "paths": [ + "M512 342h64v180l150 90-32 52-182-110v-212zM554 128c212 0 384 172 384 384s-172 384-384 384c-106 0-200-42-270-112l60-62c54 54 128 88 210 88 166 0 300-132 300-298s-134-298-300-298-298 132-298 298h128l-172 172-4-6-166-166h128c0-212 172-384 384-384z" + ], + "attrs": [], + "isMulticolor": false, + "isMulticolor2": false, + "tags": [ + "restore" + ], + "defaultCode": 59571, + "grid": 24 + }, + "attrs": [], + "properties": { + "ligatures": "history, restore", + "id": 1048, + "order": 1226, + "prevSize": 24, + "code": 59571, + "name": "restore" + }, + "setIdx": 1, + "setId": 1, + "iconIdx": 48 + }, + { + "icon": { + "paths": [ + "M426 256l256 256-256 256-60-60 196-196-196-196z" + ], + "attrs": [], + "isMulticolor": false, + "isMulticolor2": false, + "tags": [ + "navigate_next" + ], + "defaultCode": 58377, + "grid": 24 + }, + "attrs": [], + "properties": { + "ligatures": "chevron_right, navigate_next", + "id": 1049, + "order": 1227, + "prevSize": 24, + "code": 58377, + "name": "navigate_next" + }, + "setIdx": 1, + "setId": 1, + "iconIdx": 49 + }, + { + "icon": { + "paths": [ + "M128 256h768v86h-768v-86zM128 554v-84h768v84h-768zM128 768v-86h768v86h-768z" + ], + "attrs": [], + "isMulticolor": false, + "isMulticolor2": false, + "tags": [ + "menu" + ], + "defaultCode": 58834, + "grid": 24 + }, + "attrs": [], + "properties": { + "ligatures": "menu", + "id": 1050, + "order": 1228, + "prevSize": 24, + "code": 58834, + "name": "menu" + }, + "setIdx": 1, + "setId": 1, + "iconIdx": 50 + }, + { + "icon": { + "paths": [ + "M854 470v84h-520l238 240-60 60-342-342 342-342 60 60-238 240h520z" + ], + "attrs": [], + "isMulticolor": false, + "isMulticolor2": false, + "tags": [ + "arrow_back" + ], + "defaultCode": 58820, + "grid": 24 + }, + "attrs": [], + "properties": { + "ligatures": "arrow_back", + "id": 1051, + "order": 1229, + "prevSize": 24, + "code": 58820, + "name": "arrow_back" + }, + "setIdx": 1, + "setId": 1, + "iconIdx": 51 + }, + { + "icon": { + "paths": [ + "M658 316l-196 196 196 196-60 60-256-256 256-256z" + ], + "attrs": [], + "isMulticolor": false, + "isMulticolor2": false, + "tags": [ + "navigate_before" + ], + "defaultCode": 58376, + "grid": 24 + }, + "attrs": [], + "properties": { + "ligatures": "chevron_left, navigate_before", + "id": 1052, + "order": 1230, + "prevSize": 24, + "code": 58376, + "name": "navigate_before" + }, + "setIdx": 1, + "setId": 1, + "iconIdx": 52 + }, + { + "icon": { + "paths": [ + "M764 742c56-60 90-142 90-230 0-142-88-266-214-316v18c0 46-40 84-86 84h-84v86c0 24-20 42-44 42h-84v86h256c24 0 42 18 42 42v128h42c38 0 70 26 82 60zM470 850v-82c-46 0-86-40-86-86v-42l-204-204c-6 24-10 50-10 76 0 174 132 318 300 338zM512 86c236 0 426 190 426 426s-190 426-426 426-426-190-426-426 190-426 426-426z" + ], + "attrs": [], + "isMulticolor": false, + "isMulticolor2": false, + "tags": [ + "public" + ], + "defaultCode": 59403, + "grid": 24 + }, + "attrs": [], + "properties": { + "ligatures": "public", + "id": 1053, + "order": 1231, + "prevSize": 24, + "code": 59403, + "name": "public" + }, + "setIdx": 1, + "setId": 1, + "iconIdx": 53 + }, + { + "icon": { + "paths": [ + "M598 598v84h-300v-84h300zM810 810v-468h-596v468h596zM810 128c46 0 86 40 86 86v596c0 46-40 86-86 86h-596c-48 0-86-40-86-86v-596c0-46 38-86 86-86h42v-86h86v86h340v-86h86v86h42zM726 426v86h-428v-86h428z" + ], + "attrs": [], + "isMulticolor": false, + "isMulticolor2": false, + "tags": [ + "event_note" + ], + "defaultCode": 58902, + "grid": 24 + }, + "attrs": [], + "properties": { + "ligatures": "event_note", + "id": 1054, + "order": 1232, + "prevSize": 24, + "code": 58902, + "name": "event_note" + }, + "setIdx": 1, + "setId": 1, + "iconIdx": 54 + }, + { + "icon": { + "paths": [ + "M512 854c166 0 298-134 298-300s-132-298-298-298-298 132-298 298 132 300 298 300zM812 316c52 66 84 148 84 238 0 212-172 384-384 384s-384-172-384-384 172-384 384-384c90 0 174 34 240 86l60-62c22 18 42 38 60 60zM470 598v-256h84v256h-84zM640 42v86h-256v-86h256z" + ], + "attrs": [], + "isMulticolor": false, + "isMulticolor2": false, + "tags": [ + "timer" + ], + "defaultCode": 58405, + "grid": 24 + }, + "attrs": [], + "properties": { + "ligatures": "timer", + "id": 1055, + "order": 1233, + "prevSize": 24, + "code": 58405, + "name": "timer" + }, + "setIdx": 1, + "setId": 1, + "iconIdx": 55 + }, + { + "icon": { + "paths": [ + "M550 696l-80-82v162zM470 248v162l80-82zM670 328l-184 184 184 184-244 242h-42v-324l-196 196-60-60 238-238-238-238 60-60 196 196v-324h42zM834 286c40 64 62 142 62 222 0 84-24 160-66 226l-50-50c26-52 42-110 42-172s-16-120-42-172zM608 512l98-98c12 30 20 64 20 98s-8 70-20 100z" + ], + "attrs": [], + "isMulticolor": false, + "isMulticolor2": false, + "tags": [ + "bluetooth_searching" + ], + "defaultCode": 57770, + "grid": 24 + }, + "attrs": [], + "properties": { + "ligatures": "bluetooth_audio, bluetooth_searching", + "id": 1056, + "order": 1234, + "prevSize": 24, + "code": 57770, + "name": "bluetooth" + }, + "setIdx": 1, + "setId": 1, + "iconIdx": 56 + }, + { + "icon": { + "paths": [ + "M512 42c212 0 384 172 384 384v300c0 70-58 128-128 128h-128v-342h170v-86c0-166-132-298-298-298s-298 132-298 298v86h170v342h-128c-70 0-128-58-128-128v-300c0-212 172-384 384-384z" + ], + "attrs": [], + "isMulticolor": false, + "isMulticolor2": false, + "tags": [ + "headset" + ], + "defaultCode": 58128, + "grid": 24 + }, + "attrs": [], + "properties": { + "ligatures": "headset", + "id": 1057, + "order": 1235, + "prevSize": 24, + "code": 58128, + "name": "headset" + }, + "setIdx": 1, + "setId": 1, + "iconIdx": 57 + }, + { + "icon": { + "paths": [ + "M640 512c0-70-58-128-128-128v-86c118 0 214 96 214 214h-86zM810 512c0-166-132-298-298-298v-86c212 0 384 172 384 384h-86zM854 662c24 0 42 18 42 42v150c0 24-18 42-42 42-400 0-726-326-726-726 0-24 18-42 42-42h150c24 0 42 18 42 42 0 54 8 104 24 152 4 14 2 32-10 44l-94 94c62 122 162 220 282 282l94-94c12-12 30-14 44-10 48 16 98 24 152 24z" + ], + "attrs": [], + "isMulticolor": false, + "isMulticolor2": false, + "tags": [ + "phone_in_talk" + ], + "defaultCode": 58909, + "grid": 24 + }, + "attrs": [], + "properties": { + "ligatures": "phone_in_talk", + "id": 1058, + "order": 1236, + "prevSize": 24, + "code": 58909, + "name": "phone-talk" + }, + "setIdx": 1, + "setId": 1, + "iconIdx": 58 + }, + { + "icon": { + "paths": [ + "M512 682c46 0 86 40 86 86s-40 86-86 86-86-40-86-86 40-86 86-86zM512 426c46 0 86 40 86 86s-40 86-86 86-86-40-86-86 40-86 86-86zM512 342c-46 0-86-40-86-86s40-86 86-86 86 40 86 86-40 86-86 86z" + ], + "attrs": [], + "isMulticolor": false, + "isMulticolor2": false, + "tags": [ + "more_vert" + ], + "defaultCode": 58836, + "grid": 24 + }, + "attrs": [], + "properties": { + "ligatures": "more_vert", + "id": 1059, + "order": 1237, + "prevSize": 24, + "code": 58836, + "name": "thumb-menu" + }, + "setIdx": 1, + "setId": 1, + "iconIdx": 59 + }, + { + "icon": { + "paths": [ + "M330.667 554.667c-0.427-14.933 6.4-29.44 17.92-39.253 32 6.827 61.867 20.053 88.747 39.253 0 29.013-23.893 52.907-53.333 52.907s-52.907-23.467-53.333-52.907zM586.667 554.667c26.88-18.773 56.747-32 88.747-38.827 11.52 9.813 18.347 24.32 17.92 38.827 0 29.867-23.893 53.76-53.333 53.76s-53.333-23.893-53.333-53.76v0zM512 384c-118.187-1.707-234.667 27.733-338.347 85.333l-2.987 42.667c0 52.48 12.373 104.107 35.84 151.040 101.12-15.36 203.093-23.040 305.493-23.040s204.373 7.68 305.493 23.040c23.467-46.933 35.84-98.56 35.84-151.040l-2.987-42.667c-103.68-57.6-220.16-87.040-338.347-85.333zM512 85.333c235.641 0 426.667 191.025 426.667 426.667s-191.025 426.667-426.667 426.667c-235.641 0-426.667-191.025-426.667-426.667s191.025-426.667 426.667-426.667z" + ], + "attrs": [ + {} + ], + "isMulticolor": false, + "isMulticolor2": false, + "tags": [ + "ninja" + ], + "grid": 24 + }, + "attrs": [ + {} + ], + "properties": { + "order": 1238, + "id": 1060, + "name": "ninja", + "prevSize": 24, + "code": 59657 + }, + "setIdx": 1, + "setId": 1, + "iconIdx": 60 + }, + { + "icon": { + "paths": [ + "M282 460c62 120 162 220 282 282l94-94c12-12 30-16 44-10 48 16 100 24 152 24 24 0 42 18 42 42v150c0 24-18 42-42 42-400 0-726-326-726-726 0-24 18-42 42-42h150c24 0 42 18 42 42 0 54 8 104 24 152 4 14 2 32-10 44z" + ], + "attrs": [], + "isMulticolor": false, + "isMulticolor2": false, + "tags": [ + "phone" + ], + "defaultCode": 57549, + "grid": 24 + }, + "attrs": [], + "properties": { + "ligatures": "call, local_phone, phone", + "id": 1061, + "order": 1239, + "prevSize": 24, + "code": 57549, + "name": "phone" + }, + "setIdx": 1, + "setId": 1, + "iconIdx": 61 + }, + { + "icon": { + "paths": [ + "M810 554h-256v256h-84v-256h-256v-84h256v-256h84v256h256v84z" + ], + "attrs": [], + "isMulticolor": false, + "isMulticolor2": false, + "tags": [ + "add" + ], + "defaultCode": 57669, + "grid": 24 + }, + "attrs": [], + "properties": { + "ligatures": "add", + "id": 1062, + "order": 1240, + "prevSize": 24, + "code": 57669, + "name": "add" + }, + "setIdx": 1, + "setId": 1, + "iconIdx": 62 + }, { "icon": { "paths": [ @@ -26,7 +487,7 @@ "prevSize": 32, "code": 59692 }, - "setIdx": 0, + "setIdx": 1, "setId": 1, "iconIdx": 0 }, @@ -55,7 +516,7 @@ "prevSize": 32, "code": 59691 }, - "setIdx": 0, + "setIdx": 1, "setId": 1, "iconIdx": 1 }, @@ -87,7 +548,7 @@ "prevSize": 32, "code": 59690 }, - "setIdx": 0, + "setIdx": 1, "setId": 1, "iconIdx": 2 }, @@ -116,7 +577,7 @@ "prevSize": 32, "code": 59648 }, - "setIdx": 0, + "setIdx": 1, "setId": 1, "iconIdx": 3 }, @@ -145,7 +606,7 @@ "prevSize": 32, "code": 59687 }, - "setIdx": 0, + "setIdx": 1, "setId": 1, "iconIdx": 4 }, @@ -174,7 +635,7 @@ "prevSize": 32, "code": 59688 }, - "setIdx": 0, + "setIdx": 1, "setId": 1, "iconIdx": 5 }, @@ -203,7 +664,7 @@ "prevSize": 32, "code": 59689 }, - "setIdx": 0, + "setIdx": 1, "setId": 1, "iconIdx": 6 }, @@ -232,7 +693,7 @@ "prevSize": 32, "code": 59686 }, - "setIdx": 0, + "setIdx": 1, "setId": 1, "iconIdx": 7 }, @@ -261,7 +722,7 @@ "prevSize": 32, "code": 59682 }, - "setIdx": 0, + "setIdx": 1, "setId": 1, "iconIdx": 8 }, @@ -290,7 +751,7 @@ "prevSize": 32, "code": 59651 }, - "setIdx": 0, + "setIdx": 1, "setId": 1, "iconIdx": 9 }, @@ -319,7 +780,7 @@ "prevSize": 32, "code": 59677 }, - "setIdx": 0, + "setIdx": 1, "setId": 1, "iconIdx": 10 }, @@ -348,7 +809,7 @@ "prevSize": 32, "code": 59676 }, - "setIdx": 0, + "setIdx": 1, "setId": 1, "iconIdx": 11 }, @@ -374,7 +835,7 @@ "code": 59649, "name": "avatar" }, - "setIdx": 0, + "setIdx": 1, "setId": 1, "iconIdx": 12 }, @@ -400,7 +861,7 @@ "code": 59653, "name": "hangup" }, - "setIdx": 0, + "setIdx": 1, "setId": 1, "iconIdx": 13 }, @@ -426,7 +887,7 @@ "code": 59654, "name": "chat" }, - "setIdx": 0, + "setIdx": 1, "setId": 1, "iconIdx": 14 }, @@ -452,7 +913,7 @@ "code": 59650, "name": "download" }, - "setIdx": 0, + "setIdx": 1, "setId": 1, "iconIdx": 15 }, @@ -478,7 +939,7 @@ "code": 59655, "name": "edit" }, - "setIdx": 0, + "setIdx": 1, "setId": 1, "iconIdx": 16 }, @@ -504,7 +965,7 @@ "code": 59656, "name": "share-doc" }, - "setIdx": 0, + "setIdx": 1, "setId": 1, "iconIdx": 17 }, @@ -530,7 +991,7 @@ "code": 59652, "name": "kick" }, - "setIdx": 0, + "setIdx": 1, "setId": 1, "iconIdx": 18 }, @@ -556,7 +1017,7 @@ "code": 59679, "name": "menu-up" }, - "setIdx": 0, + "setIdx": 1, "setId": 1, "iconIdx": 19 }, @@ -582,7 +1043,7 @@ "code": 59680, "name": "menu-down" }, - "setIdx": 0, + "setIdx": 1, "setId": 1, "iconIdx": 20 }, @@ -608,7 +1069,7 @@ "code": 59659, "name": "full-screen" }, - "setIdx": 0, + "setIdx": 1, "setId": 1, "iconIdx": 21 }, @@ -634,7 +1095,7 @@ "code": 59660, "name": "exit-full-screen" }, - "setIdx": 0, + "setIdx": 1, "setId": 1, "iconIdx": 22 }, @@ -660,7 +1121,7 @@ "code": 59658, "name": "star-full" }, - "setIdx": 0, + "setIdx": 1, "setId": 1, "iconIdx": 23 }, @@ -686,7 +1147,7 @@ "code": 59661, "name": "security" }, - "setIdx": 0, + "setIdx": 1, "setId": 1, "iconIdx": 24 }, @@ -712,7 +1173,7 @@ "code": 59662, "name": "security-locked" }, - "setIdx": 0, + "setIdx": 1, "setId": 1, "iconIdx": 25 }, @@ -738,7 +1199,7 @@ "code": 59663, "name": "reload" }, - "setIdx": 0, + "setIdx": 1, "setId": 1, "iconIdx": 26 }, @@ -764,7 +1225,7 @@ "code": 59664, "name": "microphone" }, - "setIdx": 0, + "setIdx": 1, "setId": 1, "iconIdx": 27 }, @@ -790,7 +1251,7 @@ "code": 59665, "name": "mic-empty" }, - "setIdx": 0, + "setIdx": 1, "setId": 1, "iconIdx": 28 }, @@ -816,7 +1277,7 @@ "code": 59666, "name": "mic-disabled" }, - "setIdx": 0, + "setIdx": 1, "setId": 1, "iconIdx": 29 }, @@ -842,7 +1303,7 @@ "code": 59678, "name": "raised-hand" }, - "setIdx": 0, + "setIdx": 1, "setId": 1, "iconIdx": 30 }, @@ -868,7 +1329,7 @@ "code": 59675, "name": "contactList" }, - "setIdx": 0, + "setIdx": 1, "setId": 1, "iconIdx": 31 }, @@ -894,7 +1355,7 @@ "code": 59667, "name": "link" }, - "setIdx": 0, + "setIdx": 1, "setId": 1, "iconIdx": 32 }, @@ -920,7 +1381,7 @@ "code": 59668, "name": "shared-video" }, - "setIdx": 0, + "setIdx": 1, "setId": 1, "iconIdx": 33 }, @@ -946,7 +1407,7 @@ "code": 59669, "name": "settings" }, - "setIdx": 0, + "setIdx": 1, "setId": 1, "iconIdx": 34 }, @@ -972,7 +1433,7 @@ "code": 59670, "name": "star" }, - "setIdx": 0, + "setIdx": 1, "setId": 1, "iconIdx": 35 }, @@ -998,7 +1459,7 @@ "code": 59681, "name": "switch-camera" }, - "setIdx": 0, + "setIdx": 1, "setId": 1, "iconIdx": 36 }, @@ -1024,7 +1485,7 @@ "code": 59671, "name": "share-desktop" }, - "setIdx": 0, + "setIdx": 1, "setId": 1, "iconIdx": 37 }, @@ -1050,7 +1511,7 @@ "code": 59672, "name": "camera" }, - "setIdx": 0, + "setIdx": 1, "setId": 1, "iconIdx": 38 }, @@ -1076,7 +1537,7 @@ "code": 59673, "name": "camera-disabled" }, - "setIdx": 0, + "setIdx": 1, "setId": 1, "iconIdx": 39 }, @@ -1102,7 +1563,7 @@ "code": 59674, "name": "volume" }, - "setIdx": 0, + "setIdx": 1, "setId": 1, "iconIdx": 40 }, @@ -1131,7 +1592,7 @@ "name": "recDisable", "ligatures": "" }, - "setIdx": 0, + "setIdx": 1, "setId": 1, "iconIdx": 41 }, @@ -1161,7 +1622,7 @@ "name": "recEnable", "ligatures": "" }, - "setIdx": 0, + "setIdx": 1, "setId": 1, "iconIdx": 42 }, @@ -1191,7 +1652,7 @@ "name": "presentation", "ligatures": "" }, - "setIdx": 0, + "setIdx": 1, "setId": 1, "iconIdx": 43 }, @@ -1217,7 +1678,7 @@ "code": 59685, "name": "dialpad" }, - "setIdx": 0, + "setIdx": 1, "setId": 1, "iconIdx": 44 }, @@ -1243,7 +1704,7 @@ "code": 59683, "name": "visibility" }, - "setIdx": 0, + "setIdx": 1, "setId": 1, "iconIdx": 45 }, @@ -1269,443 +1730,9 @@ "code": 59684, "name": "visibility-off" }, - "setIdx": 0, + "setIdx": 1, "setId": 1, "iconIdx": 46 - }, - { - "icon": { - "paths": [ - "M598 128h298v298h-86v-152l-418 418-60-60 418-418h-152v-86zM810 810v-298h86v298c0 46-40 86-86 86h-596c-48 0-86-40-86-86v-596c0-46 38-86 86-86h298v86h-298v596h596z" - ], - "attrs": [], - "isMulticolor": false, - "isMulticolor2": false, - "tags": [ - "open_in_new" - ], - "defaultCode": 59550, - "grid": 24 - }, - "attrs": [], - "properties": { - "ligatures": "launch, open_in_new", - "id": 1047, - "order": 1225, - "prevSize": 24, - "name": "open_in_new", - "code": 59550 - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 47 - }, - { - "icon": { - "paths": [ - "M512 342h64v180l150 90-32 52-182-110v-212zM554 128c212 0 384 172 384 384s-172 384-384 384c-106 0-200-42-270-112l60-62c54 54 128 88 210 88 166 0 300-132 300-298s-134-298-300-298-298 132-298 298h128l-172 172-4-6-166-166h128c0-212 172-384 384-384z" - ], - "attrs": [], - "isMulticolor": false, - "isMulticolor2": false, - "tags": [ - "restore" - ], - "defaultCode": 59571, - "grid": 24 - }, - "attrs": [], - "properties": { - "ligatures": "history, restore", - "id": 1048, - "order": 1226, - "prevSize": 24, - "code": 59571, - "name": "restore" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 48 - }, - { - "icon": { - "paths": [ - "M426 256l256 256-256 256-60-60 196-196-196-196z" - ], - "attrs": [], - "isMulticolor": false, - "isMulticolor2": false, - "tags": [ - "navigate_next" - ], - "defaultCode": 58377, - "grid": 24 - }, - "attrs": [], - "properties": { - "ligatures": "chevron_right, navigate_next", - "id": 1049, - "order": 1227, - "prevSize": 24, - "code": 58377, - "name": "navigate_next" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 49 - }, - { - "icon": { - "paths": [ - "M128 256h768v86h-768v-86zM128 554v-84h768v84h-768zM128 768v-86h768v86h-768z" - ], - "attrs": [], - "isMulticolor": false, - "isMulticolor2": false, - "tags": [ - "menu" - ], - "defaultCode": 58834, - "grid": 24 - }, - "attrs": [], - "properties": { - "ligatures": "menu", - "id": 1050, - "order": 1228, - "prevSize": 24, - "code": 58834, - "name": "menu" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 50 - }, - { - "icon": { - "paths": [ - "M854 470v84h-520l238 240-60 60-342-342 342-342 60 60-238 240h520z" - ], - "attrs": [], - "isMulticolor": false, - "isMulticolor2": false, - "tags": [ - "arrow_back" - ], - "defaultCode": 58820, - "grid": 24 - }, - "attrs": [], - "properties": { - "ligatures": "arrow_back", - "id": 1051, - "order": 1229, - "prevSize": 24, - "code": 58820, - "name": "arrow_back" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 51 - }, - { - "icon": { - "paths": [ - "M658 316l-196 196 196 196-60 60-256-256 256-256z" - ], - "attrs": [], - "isMulticolor": false, - "isMulticolor2": false, - "tags": [ - "navigate_before" - ], - "defaultCode": 58376, - "grid": 24 - }, - "attrs": [], - "properties": { - "ligatures": "chevron_left, navigate_before", - "id": 1052, - "order": 1230, - "prevSize": 24, - "code": 58376, - "name": "navigate_before" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 52 - }, - { - "icon": { - "paths": [ - "M764 742c56-60 90-142 90-230 0-142-88-266-214-316v18c0 46-40 84-86 84h-84v86c0 24-20 42-44 42h-84v86h256c24 0 42 18 42 42v128h42c38 0 70 26 82 60zM470 850v-82c-46 0-86-40-86-86v-42l-204-204c-6 24-10 50-10 76 0 174 132 318 300 338zM512 86c236 0 426 190 426 426s-190 426-426 426-426-190-426-426 190-426 426-426z" - ], - "attrs": [], - "isMulticolor": false, - "isMulticolor2": false, - "tags": [ - "public" - ], - "defaultCode": 59403, - "grid": 24 - }, - "attrs": [], - "properties": { - "ligatures": "public", - "id": 1053, - "order": 1231, - "prevSize": 24, - "code": 59403, - "name": "public" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 53 - }, - { - "icon": { - "paths": [ - "M598 598v84h-300v-84h300zM810 810v-468h-596v468h596zM810 128c46 0 86 40 86 86v596c0 46-40 86-86 86h-596c-48 0-86-40-86-86v-596c0-46 38-86 86-86h42v-86h86v86h340v-86h86v86h42zM726 426v86h-428v-86h428z" - ], - "attrs": [], - "isMulticolor": false, - "isMulticolor2": false, - "tags": [ - "event_note" - ], - "defaultCode": 58902, - "grid": 24 - }, - "attrs": [], - "properties": { - "ligatures": "event_note", - "id": 1054, - "order": 1232, - "prevSize": 24, - "code": 58902, - "name": "event_note" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 54 - }, - { - "icon": { - "paths": [ - "M512 854c166 0 298-134 298-300s-132-298-298-298-298 132-298 298 132 300 298 300zM812 316c52 66 84 148 84 238 0 212-172 384-384 384s-384-172-384-384 172-384 384-384c90 0 174 34 240 86l60-62c22 18 42 38 60 60zM470 598v-256h84v256h-84zM640 42v86h-256v-86h256z" - ], - "attrs": [], - "isMulticolor": false, - "isMulticolor2": false, - "tags": [ - "timer" - ], - "defaultCode": 58405, - "grid": 24 - }, - "attrs": [], - "properties": { - "ligatures": "timer", - "id": 1055, - "order": 1233, - "prevSize": 24, - "code": 58405, - "name": "timer" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 55 - }, - { - "icon": { - "paths": [ - "M550 696l-80-82v162zM470 248v162l80-82zM670 328l-184 184 184 184-244 242h-42v-324l-196 196-60-60 238-238-238-238 60-60 196 196v-324h42zM834 286c40 64 62 142 62 222 0 84-24 160-66 226l-50-50c26-52 42-110 42-172s-16-120-42-172zM608 512l98-98c12 30 20 64 20 98s-8 70-20 100z" - ], - "attrs": [], - "isMulticolor": false, - "isMulticolor2": false, - "tags": [ - "bluetooth_searching" - ], - "defaultCode": 57770, - "grid": 24 - }, - "attrs": [], - "properties": { - "ligatures": "bluetooth_audio, bluetooth_searching", - "id": 1056, - "order": 1234, - "prevSize": 24, - "code": 57770, - "name": "bluetooth" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 56 - }, - { - "icon": { - "paths": [ - "M512 42c212 0 384 172 384 384v300c0 70-58 128-128 128h-128v-342h170v-86c0-166-132-298-298-298s-298 132-298 298v86h170v342h-128c-70 0-128-58-128-128v-300c0-212 172-384 384-384z" - ], - "attrs": [], - "isMulticolor": false, - "isMulticolor2": false, - "tags": [ - "headset" - ], - "defaultCode": 58128, - "grid": 24 - }, - "attrs": [], - "properties": { - "ligatures": "headset", - "id": 1057, - "order": 1235, - "prevSize": 24, - "code": 58128, - "name": "headset" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 57 - }, - { - "icon": { - "paths": [ - "M640 512c0-70-58-128-128-128v-86c118 0 214 96 214 214h-86zM810 512c0-166-132-298-298-298v-86c212 0 384 172 384 384h-86zM854 662c24 0 42 18 42 42v150c0 24-18 42-42 42-400 0-726-326-726-726 0-24 18-42 42-42h150c24 0 42 18 42 42 0 54 8 104 24 152 4 14 2 32-10 44l-94 94c62 122 162 220 282 282l94-94c12-12 30-14 44-10 48 16 98 24 152 24z" - ], - "attrs": [], - "isMulticolor": false, - "isMulticolor2": false, - "tags": [ - "phone_in_talk" - ], - "defaultCode": 58909, - "grid": 24 - }, - "attrs": [], - "properties": { - "ligatures": "phone_in_talk", - "id": 1058, - "order": 1236, - "prevSize": 24, - "code": 58909, - "name": "phone-talk" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 58 - }, - { - "icon": { - "paths": [ - "M512 682c46 0 86 40 86 86s-40 86-86 86-86-40-86-86 40-86 86-86zM512 426c46 0 86 40 86 86s-40 86-86 86-86-40-86-86 40-86 86-86zM512 342c-46 0-86-40-86-86s40-86 86-86 86 40 86 86-40 86-86 86z" - ], - "attrs": [], - "isMulticolor": false, - "isMulticolor2": false, - "tags": [ - "more_vert" - ], - "defaultCode": 58836, - "grid": 24 - }, - "attrs": [], - "properties": { - "ligatures": "more_vert", - "id": 1059, - "order": 1237, - "prevSize": 24, - "code": 58836, - "name": "thumb-menu" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 59 - }, - { - "icon": { - "paths": [ - "M330.667 554.667c-0.427-14.933 6.4-29.44 17.92-39.253 32 6.827 61.867 20.053 88.747 39.253 0 29.013-23.893 52.907-53.333 52.907s-52.907-23.467-53.333-52.907zM586.667 554.667c26.88-18.773 56.747-32 88.747-38.827 11.52 9.813 18.347 24.32 17.92 38.827 0 29.867-23.893 53.76-53.333 53.76s-53.333-23.893-53.333-53.76v0zM512 384c-118.187-1.707-234.667 27.733-338.347 85.333l-2.987 42.667c0 52.48 12.373 104.107 35.84 151.040 101.12-15.36 203.093-23.040 305.493-23.040s204.373 7.68 305.493 23.040c23.467-46.933 35.84-98.56 35.84-151.040l-2.987-42.667c-103.68-57.6-220.16-87.040-338.347-85.333zM512 85.333c235.641 0 426.667 191.025 426.667 426.667s-191.025 426.667-426.667 426.667c-235.641 0-426.667-191.025-426.667-426.667s191.025-426.667 426.667-426.667z" - ], - "attrs": [ - {} - ], - "isMulticolor": false, - "isMulticolor2": false, - "tags": [ - "ninja" - ], - "grid": 24 - }, - "attrs": [ - {} - ], - "properties": { - "order": 1238, - "id": 1060, - "name": "ninja", - "prevSize": 24, - "code": 59657 - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 60 - }, - { - "icon": { - "paths": [ - "M282 460c62 120 162 220 282 282l94-94c12-12 30-16 44-10 48 16 100 24 152 24 24 0 42 18 42 42v150c0 24-18 42-42 42-400 0-726-326-726-726 0-24 18-42 42-42h150c24 0 42 18 42 42 0 54 8 104 24 152 4 14 2 32-10 44z" - ], - "attrs": [], - "isMulticolor": false, - "isMulticolor2": false, - "tags": [ - "phone" - ], - "defaultCode": 57549, - "grid": 24 - }, - "attrs": [], - "properties": { - "ligatures": "call, local_phone, phone", - "id": 1061, - "order": 1239, - "prevSize": 24, - "code": 57549, - "name": "phone" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 61 - }, - { - "icon": { - "paths": [ - "M810 554h-256v256h-84v-256h-256v-84h256v-256h84v256h256v84z" - ], - "attrs": [], - "isMulticolor": false, - "isMulticolor2": false, - "tags": [ - "add" - ], - "defaultCode": 57669, - "grid": 24 - }, - "attrs": [], - "properties": { - "ligatures": "add", - "id": 1062, - "order": 1240, - "prevSize": 24, - "code": 57669, - "name": "add" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 62 } ], "height": 1024, diff --git a/react/features/base/font-icons/jitsi.json b/react/features/base/font-icons/jitsi.json index 9ac1ba2b3..0c644720d 100755 --- a/react/features/base/font-icons/jitsi.json +++ b/react/features/base/font-icons/jitsi.json @@ -1,6 +1,467 @@ { "IcoMoonType": "selection", "icons": [ + { + "icon": { + "paths": [ + "M810 274l-238 238 238 238-60 60-238-238-238 238-60-60 238-238-238-238 60-60 238 238 238-238z" + ], + "attrs": [], + "isMulticolor": false, + "isMulticolor2": false, + "tags": [ + "close" + ], + "defaultCode": 58829, + "grid": 24 + }, + "attrs": [], + "properties": { + "ligatures": "clear, close", + "id": 157, + "order": 1241, + "prevSize": 24, + "code": 58829, + "name": "close" + }, + "setIdx": 0, + "setId": 2, + "iconIdx": 157 + }, + { + "icon": { + "paths": [ + "M598 128h298v298h-86v-152l-418 418-60-60 418-418h-152v-86zM810 810v-298h86v298c0 46-40 86-86 86h-596c-48 0-86-40-86-86v-596c0-46 38-86 86-86h298v86h-298v596h596z" + ], + "attrs": [], + "isMulticolor": false, + "isMulticolor2": false, + "tags": [ + "open_in_new" + ], + "defaultCode": 59550, + "grid": 24 + }, + "attrs": [], + "properties": { + "ligatures": "launch, open_in_new", + "id": 1047, + "order": 1225, + "prevSize": 24, + "name": "open_in_new", + "code": 59550 + }, + "setIdx": 1, + "setId": 1, + "iconIdx": 47 + }, + { + "icon": { + "paths": [ + "M512 342h64v180l150 90-32 52-182-110v-212zM554 128c212 0 384 172 384 384s-172 384-384 384c-106 0-200-42-270-112l60-62c54 54 128 88 210 88 166 0 300-132 300-298s-134-298-300-298-298 132-298 298h128l-172 172-4-6-166-166h128c0-212 172-384 384-384z" + ], + "attrs": [], + "isMulticolor": false, + "isMulticolor2": false, + "tags": [ + "restore" + ], + "defaultCode": 59571, + "grid": 24 + }, + "attrs": [], + "properties": { + "ligatures": "history, restore", + "id": 1048, + "order": 1226, + "prevSize": 24, + "code": 59571, + "name": "restore" + }, + "setIdx": 1, + "setId": 1, + "iconIdx": 48 + }, + { + "icon": { + "paths": [ + "M426 256l256 256-256 256-60-60 196-196-196-196z" + ], + "attrs": [], + "isMulticolor": false, + "isMulticolor2": false, + "tags": [ + "navigate_next" + ], + "defaultCode": 58377, + "grid": 24 + }, + "attrs": [], + "properties": { + "ligatures": "chevron_right, navigate_next", + "id": 1049, + "order": 1227, + "prevSize": 24, + "code": 58377, + "name": "navigate_next" + }, + "setIdx": 1, + "setId": 1, + "iconIdx": 49 + }, + { + "icon": { + "paths": [ + "M128 256h768v86h-768v-86zM128 554v-84h768v84h-768zM128 768v-86h768v86h-768z" + ], + "attrs": [], + "isMulticolor": false, + "isMulticolor2": false, + "tags": [ + "menu" + ], + "defaultCode": 58834, + "grid": 24 + }, + "attrs": [], + "properties": { + "ligatures": "menu", + "id": 1050, + "order": 1228, + "prevSize": 24, + "code": 58834, + "name": "menu" + }, + "setIdx": 1, + "setId": 1, + "iconIdx": 50 + }, + { + "icon": { + "paths": [ + "M854 470v84h-520l238 240-60 60-342-342 342-342 60 60-238 240h520z" + ], + "attrs": [], + "isMulticolor": false, + "isMulticolor2": false, + "tags": [ + "arrow_back" + ], + "defaultCode": 58820, + "grid": 24 + }, + "attrs": [], + "properties": { + "ligatures": "arrow_back", + "id": 1051, + "order": 1229, + "prevSize": 24, + "code": 58820, + "name": "arrow_back" + }, + "setIdx": 1, + "setId": 1, + "iconIdx": 51 + }, + { + "icon": { + "paths": [ + "M658 316l-196 196 196 196-60 60-256-256 256-256z" + ], + "attrs": [], + "isMulticolor": false, + "isMulticolor2": false, + "tags": [ + "navigate_before" + ], + "defaultCode": 58376, + "grid": 24 + }, + "attrs": [], + "properties": { + "ligatures": "chevron_left, navigate_before", + "id": 1052, + "order": 1230, + "prevSize": 24, + "code": 58376, + "name": "navigate_before" + }, + "setIdx": 1, + "setId": 1, + "iconIdx": 52 + }, + { + "icon": { + "paths": [ + "M764 742c56-60 90-142 90-230 0-142-88-266-214-316v18c0 46-40 84-86 84h-84v86c0 24-20 42-44 42h-84v86h256c24 0 42 18 42 42v128h42c38 0 70 26 82 60zM470 850v-82c-46 0-86-40-86-86v-42l-204-204c-6 24-10 50-10 76 0 174 132 318 300 338zM512 86c236 0 426 190 426 426s-190 426-426 426-426-190-426-426 190-426 426-426z" + ], + "attrs": [], + "isMulticolor": false, + "isMulticolor2": false, + "tags": [ + "public" + ], + "defaultCode": 59403, + "grid": 24 + }, + "attrs": [], + "properties": { + "ligatures": "public", + "id": 1053, + "order": 1231, + "prevSize": 24, + "code": 59403, + "name": "public" + }, + "setIdx": 1, + "setId": 1, + "iconIdx": 53 + }, + { + "icon": { + "paths": [ + "M598 598v84h-300v-84h300zM810 810v-468h-596v468h596zM810 128c46 0 86 40 86 86v596c0 46-40 86-86 86h-596c-48 0-86-40-86-86v-596c0-46 38-86 86-86h42v-86h86v86h340v-86h86v86h42zM726 426v86h-428v-86h428z" + ], + "attrs": [], + "isMulticolor": false, + "isMulticolor2": false, + "tags": [ + "event_note" + ], + "defaultCode": 58902, + "grid": 24 + }, + "attrs": [], + "properties": { + "ligatures": "event_note", + "id": 1054, + "order": 1232, + "prevSize": 24, + "code": 58902, + "name": "event_note" + }, + "setIdx": 1, + "setId": 1, + "iconIdx": 54 + }, + { + "icon": { + "paths": [ + "M512 854c166 0 298-134 298-300s-132-298-298-298-298 132-298 298 132 300 298 300zM812 316c52 66 84 148 84 238 0 212-172 384-384 384s-384-172-384-384 172-384 384-384c90 0 174 34 240 86l60-62c22 18 42 38 60 60zM470 598v-256h84v256h-84zM640 42v86h-256v-86h256z" + ], + "attrs": [], + "isMulticolor": false, + "isMulticolor2": false, + "tags": [ + "timer" + ], + "defaultCode": 58405, + "grid": 24 + }, + "attrs": [], + "properties": { + "ligatures": "timer", + "id": 1055, + "order": 1233, + "prevSize": 24, + "code": 58405, + "name": "timer" + }, + "setIdx": 1, + "setId": 1, + "iconIdx": 55 + }, + { + "icon": { + "paths": [ + "M550 696l-80-82v162zM470 248v162l80-82zM670 328l-184 184 184 184-244 242h-42v-324l-196 196-60-60 238-238-238-238 60-60 196 196v-324h42zM834 286c40 64 62 142 62 222 0 84-24 160-66 226l-50-50c26-52 42-110 42-172s-16-120-42-172zM608 512l98-98c12 30 20 64 20 98s-8 70-20 100z" + ], + "attrs": [], + "isMulticolor": false, + "isMulticolor2": false, + "tags": [ + "bluetooth_searching" + ], + "defaultCode": 57770, + "grid": 24 + }, + "attrs": [], + "properties": { + "ligatures": "bluetooth_audio, bluetooth_searching", + "id": 1056, + "order": 1234, + "prevSize": 24, + "code": 57770, + "name": "bluetooth" + }, + "setIdx": 1, + "setId": 1, + "iconIdx": 56 + }, + { + "icon": { + "paths": [ + "M512 42c212 0 384 172 384 384v300c0 70-58 128-128 128h-128v-342h170v-86c0-166-132-298-298-298s-298 132-298 298v86h170v342h-128c-70 0-128-58-128-128v-300c0-212 172-384 384-384z" + ], + "attrs": [], + "isMulticolor": false, + "isMulticolor2": false, + "tags": [ + "headset" + ], + "defaultCode": 58128, + "grid": 24 + }, + "attrs": [], + "properties": { + "ligatures": "headset", + "id": 1057, + "order": 1235, + "prevSize": 24, + "code": 58128, + "name": "headset" + }, + "setIdx": 1, + "setId": 1, + "iconIdx": 57 + }, + { + "icon": { + "paths": [ + "M640 512c0-70-58-128-128-128v-86c118 0 214 96 214 214h-86zM810 512c0-166-132-298-298-298v-86c212 0 384 172 384 384h-86zM854 662c24 0 42 18 42 42v150c0 24-18 42-42 42-400 0-726-326-726-726 0-24 18-42 42-42h150c24 0 42 18 42 42 0 54 8 104 24 152 4 14 2 32-10 44l-94 94c62 122 162 220 282 282l94-94c12-12 30-14 44-10 48 16 98 24 152 24z" + ], + "attrs": [], + "isMulticolor": false, + "isMulticolor2": false, + "tags": [ + "phone_in_talk" + ], + "defaultCode": 58909, + "grid": 24 + }, + "attrs": [], + "properties": { + "ligatures": "phone_in_talk", + "id": 1058, + "order": 1236, + "prevSize": 24, + "code": 58909, + "name": "phone-talk" + }, + "setIdx": 1, + "setId": 1, + "iconIdx": 58 + }, + { + "icon": { + "paths": [ + "M512 682c46 0 86 40 86 86s-40 86-86 86-86-40-86-86 40-86 86-86zM512 426c46 0 86 40 86 86s-40 86-86 86-86-40-86-86 40-86 86-86zM512 342c-46 0-86-40-86-86s40-86 86-86 86 40 86 86-40 86-86 86z" + ], + "attrs": [], + "isMulticolor": false, + "isMulticolor2": false, + "tags": [ + "more_vert" + ], + "defaultCode": 58836, + "grid": 24 + }, + "attrs": [], + "properties": { + "ligatures": "more_vert", + "id": 1059, + "order": 1237, + "prevSize": 24, + "code": 58836, + "name": "thumb-menu" + }, + "setIdx": 1, + "setId": 1, + "iconIdx": 59 + }, + { + "icon": { + "paths": [ + "M330.667 554.667c-0.427-14.933 6.4-29.44 17.92-39.253 32 6.827 61.867 20.053 88.747 39.253 0 29.013-23.893 52.907-53.333 52.907s-52.907-23.467-53.333-52.907zM586.667 554.667c26.88-18.773 56.747-32 88.747-38.827 11.52 9.813 18.347 24.32 17.92 38.827 0 29.867-23.893 53.76-53.333 53.76s-53.333-23.893-53.333-53.76v0zM512 384c-118.187-1.707-234.667 27.733-338.347 85.333l-2.987 42.667c0 52.48 12.373 104.107 35.84 151.040 101.12-15.36 203.093-23.040 305.493-23.040s204.373 7.68 305.493 23.040c23.467-46.933 35.84-98.56 35.84-151.040l-2.987-42.667c-103.68-57.6-220.16-87.040-338.347-85.333zM512 85.333c235.641 0 426.667 191.025 426.667 426.667s-191.025 426.667-426.667 426.667c-235.641 0-426.667-191.025-426.667-426.667s191.025-426.667 426.667-426.667z" + ], + "attrs": [ + {} + ], + "isMulticolor": false, + "isMulticolor2": false, + "tags": [ + "ninja" + ], + "grid": 24 + }, + "attrs": [ + {} + ], + "properties": { + "order": 1238, + "id": 1060, + "name": "ninja", + "prevSize": 24, + "code": 59657 + }, + "setIdx": 1, + "setId": 1, + "iconIdx": 60 + }, + { + "icon": { + "paths": [ + "M282 460c62 120 162 220 282 282l94-94c12-12 30-16 44-10 48 16 100 24 152 24 24 0 42 18 42 42v150c0 24-18 42-42 42-400 0-726-326-726-726 0-24 18-42 42-42h150c24 0 42 18 42 42 0 54 8 104 24 152 4 14 2 32-10 44z" + ], + "attrs": [], + "isMulticolor": false, + "isMulticolor2": false, + "tags": [ + "phone" + ], + "defaultCode": 57549, + "grid": 24 + }, + "attrs": [], + "properties": { + "ligatures": "call, local_phone, phone", + "id": 1061, + "order": 1239, + "prevSize": 24, + "code": 57549, + "name": "phone" + }, + "setIdx": 1, + "setId": 1, + "iconIdx": 61 + }, + { + "icon": { + "paths": [ + "M810 554h-256v256h-84v-256h-256v-84h256v-256h84v256h256v84z" + ], + "attrs": [], + "isMulticolor": false, + "isMulticolor2": false, + "tags": [ + "add" + ], + "defaultCode": 57669, + "grid": 24 + }, + "attrs": [], + "properties": { + "ligatures": "add", + "id": 1062, + "order": 1240, + "prevSize": 24, + "code": 57669, + "name": "add" + }, + "setIdx": 1, + "setId": 1, + "iconIdx": 62 + }, { "icon": { "paths": [ @@ -26,7 +487,7 @@ "prevSize": 32, "code": 59692 }, - "setIdx": 0, + "setIdx": 1, "setId": 1, "iconIdx": 0 }, @@ -55,7 +516,7 @@ "prevSize": 32, "code": 59691 }, - "setIdx": 0, + "setIdx": 1, "setId": 1, "iconIdx": 1 }, @@ -87,7 +548,7 @@ "prevSize": 32, "code": 59690 }, - "setIdx": 0, + "setIdx": 1, "setId": 1, "iconIdx": 2 }, @@ -116,7 +577,7 @@ "prevSize": 32, "code": 59648 }, - "setIdx": 0, + "setIdx": 1, "setId": 1, "iconIdx": 3 }, @@ -145,7 +606,7 @@ "prevSize": 32, "code": 59687 }, - "setIdx": 0, + "setIdx": 1, "setId": 1, "iconIdx": 4 }, @@ -174,7 +635,7 @@ "prevSize": 32, "code": 59688 }, - "setIdx": 0, + "setIdx": 1, "setId": 1, "iconIdx": 5 }, @@ -203,7 +664,7 @@ "prevSize": 32, "code": 59689 }, - "setIdx": 0, + "setIdx": 1, "setId": 1, "iconIdx": 6 }, @@ -232,7 +693,7 @@ "prevSize": 32, "code": 59686 }, - "setIdx": 0, + "setIdx": 1, "setId": 1, "iconIdx": 7 }, @@ -261,7 +722,7 @@ "prevSize": 32, "code": 59682 }, - "setIdx": 0, + "setIdx": 1, "setId": 1, "iconIdx": 8 }, @@ -290,7 +751,7 @@ "prevSize": 32, "code": 59651 }, - "setIdx": 0, + "setIdx": 1, "setId": 1, "iconIdx": 9 }, @@ -319,7 +780,7 @@ "prevSize": 32, "code": 59677 }, - "setIdx": 0, + "setIdx": 1, "setId": 1, "iconIdx": 10 }, @@ -348,7 +809,7 @@ "prevSize": 32, "code": 59676 }, - "setIdx": 0, + "setIdx": 1, "setId": 1, "iconIdx": 11 }, @@ -374,7 +835,7 @@ "code": 59649, "name": "avatar" }, - "setIdx": 0, + "setIdx": 1, "setId": 1, "iconIdx": 12 }, @@ -400,7 +861,7 @@ "code": 59653, "name": "hangup" }, - "setIdx": 0, + "setIdx": 1, "setId": 1, "iconIdx": 13 }, @@ -426,7 +887,7 @@ "code": 59654, "name": "chat" }, - "setIdx": 0, + "setIdx": 1, "setId": 1, "iconIdx": 14 }, @@ -452,7 +913,7 @@ "code": 59650, "name": "download" }, - "setIdx": 0, + "setIdx": 1, "setId": 1, "iconIdx": 15 }, @@ -478,7 +939,7 @@ "code": 59655, "name": "edit" }, - "setIdx": 0, + "setIdx": 1, "setId": 1, "iconIdx": 16 }, @@ -504,7 +965,7 @@ "code": 59656, "name": "share-doc" }, - "setIdx": 0, + "setIdx": 1, "setId": 1, "iconIdx": 17 }, @@ -530,7 +991,7 @@ "code": 59652, "name": "kick" }, - "setIdx": 0, + "setIdx": 1, "setId": 1, "iconIdx": 18 }, @@ -556,7 +1017,7 @@ "code": 59679, "name": "menu-up" }, - "setIdx": 0, + "setIdx": 1, "setId": 1, "iconIdx": 19 }, @@ -582,7 +1043,7 @@ "code": 59680, "name": "menu-down" }, - "setIdx": 0, + "setIdx": 1, "setId": 1, "iconIdx": 20 }, @@ -608,7 +1069,7 @@ "code": 59659, "name": "full-screen" }, - "setIdx": 0, + "setIdx": 1, "setId": 1, "iconIdx": 21 }, @@ -634,7 +1095,7 @@ "code": 59660, "name": "exit-full-screen" }, - "setIdx": 0, + "setIdx": 1, "setId": 1, "iconIdx": 22 }, @@ -660,7 +1121,7 @@ "code": 59658, "name": "star-full" }, - "setIdx": 0, + "setIdx": 1, "setId": 1, "iconIdx": 23 }, @@ -686,7 +1147,7 @@ "code": 59661, "name": "security" }, - "setIdx": 0, + "setIdx": 1, "setId": 1, "iconIdx": 24 }, @@ -712,7 +1173,7 @@ "code": 59662, "name": "security-locked" }, - "setIdx": 0, + "setIdx": 1, "setId": 1, "iconIdx": 25 }, @@ -738,7 +1199,7 @@ "code": 59663, "name": "reload" }, - "setIdx": 0, + "setIdx": 1, "setId": 1, "iconIdx": 26 }, @@ -764,7 +1225,7 @@ "code": 59664, "name": "microphone" }, - "setIdx": 0, + "setIdx": 1, "setId": 1, "iconIdx": 27 }, @@ -790,7 +1251,7 @@ "code": 59665, "name": "mic-empty" }, - "setIdx": 0, + "setIdx": 1, "setId": 1, "iconIdx": 28 }, @@ -816,7 +1277,7 @@ "code": 59666, "name": "mic-disabled" }, - "setIdx": 0, + "setIdx": 1, "setId": 1, "iconIdx": 29 }, @@ -842,7 +1303,7 @@ "code": 59678, "name": "raised-hand" }, - "setIdx": 0, + "setIdx": 1, "setId": 1, "iconIdx": 30 }, @@ -868,7 +1329,7 @@ "code": 59675, "name": "contactList" }, - "setIdx": 0, + "setIdx": 1, "setId": 1, "iconIdx": 31 }, @@ -894,7 +1355,7 @@ "code": 59667, "name": "link" }, - "setIdx": 0, + "setIdx": 1, "setId": 1, "iconIdx": 32 }, @@ -920,7 +1381,7 @@ "code": 59668, "name": "shared-video" }, - "setIdx": 0, + "setIdx": 1, "setId": 1, "iconIdx": 33 }, @@ -946,7 +1407,7 @@ "code": 59669, "name": "settings" }, - "setIdx": 0, + "setIdx": 1, "setId": 1, "iconIdx": 34 }, @@ -972,7 +1433,7 @@ "code": 59670, "name": "star" }, - "setIdx": 0, + "setIdx": 1, "setId": 1, "iconIdx": 35 }, @@ -998,7 +1459,7 @@ "code": 59681, "name": "switch-camera" }, - "setIdx": 0, + "setIdx": 1, "setId": 1, "iconIdx": 36 }, @@ -1024,7 +1485,7 @@ "code": 59671, "name": "share-desktop" }, - "setIdx": 0, + "setIdx": 1, "setId": 1, "iconIdx": 37 }, @@ -1050,7 +1511,7 @@ "code": 59672, "name": "camera" }, - "setIdx": 0, + "setIdx": 1, "setId": 1, "iconIdx": 38 }, @@ -1076,7 +1537,7 @@ "code": 59673, "name": "camera-disabled" }, - "setIdx": 0, + "setIdx": 1, "setId": 1, "iconIdx": 39 }, @@ -1102,7 +1563,7 @@ "code": 59674, "name": "volume" }, - "setIdx": 0, + "setIdx": 1, "setId": 1, "iconIdx": 40 }, @@ -1131,7 +1592,7 @@ "name": "recDisable", "ligatures": "" }, - "setIdx": 0, + "setIdx": 1, "setId": 1, "iconIdx": 41 }, @@ -1161,7 +1622,7 @@ "name": "recEnable", "ligatures": "" }, - "setIdx": 0, + "setIdx": 1, "setId": 1, "iconIdx": 42 }, @@ -1191,7 +1652,7 @@ "name": "presentation", "ligatures": "" }, - "setIdx": 0, + "setIdx": 1, "setId": 1, "iconIdx": 43 }, @@ -1217,7 +1678,7 @@ "code": 59685, "name": "dialpad" }, - "setIdx": 0, + "setIdx": 1, "setId": 1, "iconIdx": 44 }, @@ -1243,7 +1704,7 @@ "code": 59683, "name": "visibility" }, - "setIdx": 0, + "setIdx": 1, "setId": 1, "iconIdx": 45 }, @@ -1269,443 +1730,9 @@ "code": 59684, "name": "visibility-off" }, - "setIdx": 0, + "setIdx": 1, "setId": 1, "iconIdx": 46 - }, - { - "icon": { - "paths": [ - "M598 128h298v298h-86v-152l-418 418-60-60 418-418h-152v-86zM810 810v-298h86v298c0 46-40 86-86 86h-596c-48 0-86-40-86-86v-596c0-46 38-86 86-86h298v86h-298v596h596z" - ], - "attrs": [], - "isMulticolor": false, - "isMulticolor2": false, - "tags": [ - "open_in_new" - ], - "defaultCode": 59550, - "grid": 24 - }, - "attrs": [], - "properties": { - "ligatures": "launch, open_in_new", - "id": 1047, - "order": 1225, - "prevSize": 24, - "name": "open_in_new", - "code": 59550 - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 47 - }, - { - "icon": { - "paths": [ - "M512 342h64v180l150 90-32 52-182-110v-212zM554 128c212 0 384 172 384 384s-172 384-384 384c-106 0-200-42-270-112l60-62c54 54 128 88 210 88 166 0 300-132 300-298s-134-298-300-298-298 132-298 298h128l-172 172-4-6-166-166h128c0-212 172-384 384-384z" - ], - "attrs": [], - "isMulticolor": false, - "isMulticolor2": false, - "tags": [ - "restore" - ], - "defaultCode": 59571, - "grid": 24 - }, - "attrs": [], - "properties": { - "ligatures": "history, restore", - "id": 1048, - "order": 1226, - "prevSize": 24, - "code": 59571, - "name": "restore" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 48 - }, - { - "icon": { - "paths": [ - "M426 256l256 256-256 256-60-60 196-196-196-196z" - ], - "attrs": [], - "isMulticolor": false, - "isMulticolor2": false, - "tags": [ - "navigate_next" - ], - "defaultCode": 58377, - "grid": 24 - }, - "attrs": [], - "properties": { - "ligatures": "chevron_right, navigate_next", - "id": 1049, - "order": 1227, - "prevSize": 24, - "code": 58377, - "name": "navigate_next" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 49 - }, - { - "icon": { - "paths": [ - "M128 256h768v86h-768v-86zM128 554v-84h768v84h-768zM128 768v-86h768v86h-768z" - ], - "attrs": [], - "isMulticolor": false, - "isMulticolor2": false, - "tags": [ - "menu" - ], - "defaultCode": 58834, - "grid": 24 - }, - "attrs": [], - "properties": { - "ligatures": "menu", - "id": 1050, - "order": 1228, - "prevSize": 24, - "code": 58834, - "name": "menu" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 50 - }, - { - "icon": { - "paths": [ - "M854 470v84h-520l238 240-60 60-342-342 342-342 60 60-238 240h520z" - ], - "attrs": [], - "isMulticolor": false, - "isMulticolor2": false, - "tags": [ - "arrow_back" - ], - "defaultCode": 58820, - "grid": 24 - }, - "attrs": [], - "properties": { - "ligatures": "arrow_back", - "id": 1051, - "order": 1229, - "prevSize": 24, - "code": 58820, - "name": "arrow_back" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 51 - }, - { - "icon": { - "paths": [ - "M658 316l-196 196 196 196-60 60-256-256 256-256z" - ], - "attrs": [], - "isMulticolor": false, - "isMulticolor2": false, - "tags": [ - "navigate_before" - ], - "defaultCode": 58376, - "grid": 24 - }, - "attrs": [], - "properties": { - "ligatures": "chevron_left, navigate_before", - "id": 1052, - "order": 1230, - "prevSize": 24, - "code": 58376, - "name": "navigate_before" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 52 - }, - { - "icon": { - "paths": [ - "M764 742c56-60 90-142 90-230 0-142-88-266-214-316v18c0 46-40 84-86 84h-84v86c0 24-20 42-44 42h-84v86h256c24 0 42 18 42 42v128h42c38 0 70 26 82 60zM470 850v-82c-46 0-86-40-86-86v-42l-204-204c-6 24-10 50-10 76 0 174 132 318 300 338zM512 86c236 0 426 190 426 426s-190 426-426 426-426-190-426-426 190-426 426-426z" - ], - "attrs": [], - "isMulticolor": false, - "isMulticolor2": false, - "tags": [ - "public" - ], - "defaultCode": 59403, - "grid": 24 - }, - "attrs": [], - "properties": { - "ligatures": "public", - "id": 1053, - "order": 1231, - "prevSize": 24, - "code": 59403, - "name": "public" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 53 - }, - { - "icon": { - "paths": [ - "M598 598v84h-300v-84h300zM810 810v-468h-596v468h596zM810 128c46 0 86 40 86 86v596c0 46-40 86-86 86h-596c-48 0-86-40-86-86v-596c0-46 38-86 86-86h42v-86h86v86h340v-86h86v86h42zM726 426v86h-428v-86h428z" - ], - "attrs": [], - "isMulticolor": false, - "isMulticolor2": false, - "tags": [ - "event_note" - ], - "defaultCode": 58902, - "grid": 24 - }, - "attrs": [], - "properties": { - "ligatures": "event_note", - "id": 1054, - "order": 1232, - "prevSize": 24, - "code": 58902, - "name": "event_note" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 54 - }, - { - "icon": { - "paths": [ - "M512 854c166 0 298-134 298-300s-132-298-298-298-298 132-298 298 132 300 298 300zM812 316c52 66 84 148 84 238 0 212-172 384-384 384s-384-172-384-384 172-384 384-384c90 0 174 34 240 86l60-62c22 18 42 38 60 60zM470 598v-256h84v256h-84zM640 42v86h-256v-86h256z" - ], - "attrs": [], - "isMulticolor": false, - "isMulticolor2": false, - "tags": [ - "timer" - ], - "defaultCode": 58405, - "grid": 24 - }, - "attrs": [], - "properties": { - "ligatures": "timer", - "id": 1055, - "order": 1233, - "prevSize": 24, - "code": 58405, - "name": "timer" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 55 - }, - { - "icon": { - "paths": [ - "M550 696l-80-82v162zM470 248v162l80-82zM670 328l-184 184 184 184-244 242h-42v-324l-196 196-60-60 238-238-238-238 60-60 196 196v-324h42zM834 286c40 64 62 142 62 222 0 84-24 160-66 226l-50-50c26-52 42-110 42-172s-16-120-42-172zM608 512l98-98c12 30 20 64 20 98s-8 70-20 100z" - ], - "attrs": [], - "isMulticolor": false, - "isMulticolor2": false, - "tags": [ - "bluetooth_searching" - ], - "defaultCode": 57770, - "grid": 24 - }, - "attrs": [], - "properties": { - "ligatures": "bluetooth_audio, bluetooth_searching", - "id": 1056, - "order": 1234, - "prevSize": 24, - "code": 57770, - "name": "bluetooth" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 56 - }, - { - "icon": { - "paths": [ - "M512 42c212 0 384 172 384 384v300c0 70-58 128-128 128h-128v-342h170v-86c0-166-132-298-298-298s-298 132-298 298v86h170v342h-128c-70 0-128-58-128-128v-300c0-212 172-384 384-384z" - ], - "attrs": [], - "isMulticolor": false, - "isMulticolor2": false, - "tags": [ - "headset" - ], - "defaultCode": 58128, - "grid": 24 - }, - "attrs": [], - "properties": { - "ligatures": "headset", - "id": 1057, - "order": 1235, - "prevSize": 24, - "code": 58128, - "name": "headset" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 57 - }, - { - "icon": { - "paths": [ - "M640 512c0-70-58-128-128-128v-86c118 0 214 96 214 214h-86zM810 512c0-166-132-298-298-298v-86c212 0 384 172 384 384h-86zM854 662c24 0 42 18 42 42v150c0 24-18 42-42 42-400 0-726-326-726-726 0-24 18-42 42-42h150c24 0 42 18 42 42 0 54 8 104 24 152 4 14 2 32-10 44l-94 94c62 122 162 220 282 282l94-94c12-12 30-14 44-10 48 16 98 24 152 24z" - ], - "attrs": [], - "isMulticolor": false, - "isMulticolor2": false, - "tags": [ - "phone_in_talk" - ], - "defaultCode": 58909, - "grid": 24 - }, - "attrs": [], - "properties": { - "ligatures": "phone_in_talk", - "id": 1058, - "order": 1236, - "prevSize": 24, - "code": 58909, - "name": "phone-talk" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 58 - }, - { - "icon": { - "paths": [ - "M512 682c46 0 86 40 86 86s-40 86-86 86-86-40-86-86 40-86 86-86zM512 426c46 0 86 40 86 86s-40 86-86 86-86-40-86-86 40-86 86-86zM512 342c-46 0-86-40-86-86s40-86 86-86 86 40 86 86-40 86-86 86z" - ], - "attrs": [], - "isMulticolor": false, - "isMulticolor2": false, - "tags": [ - "more_vert" - ], - "defaultCode": 58836, - "grid": 24 - }, - "attrs": [], - "properties": { - "ligatures": "more_vert", - "id": 1059, - "order": 1237, - "prevSize": 24, - "code": 58836, - "name": "thumb-menu" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 59 - }, - { - "icon": { - "paths": [ - "M330.667 554.667c-0.427-14.933 6.4-29.44 17.92-39.253 32 6.827 61.867 20.053 88.747 39.253 0 29.013-23.893 52.907-53.333 52.907s-52.907-23.467-53.333-52.907zM586.667 554.667c26.88-18.773 56.747-32 88.747-38.827 11.52 9.813 18.347 24.32 17.92 38.827 0 29.867-23.893 53.76-53.333 53.76s-53.333-23.893-53.333-53.76v0zM512 384c-118.187-1.707-234.667 27.733-338.347 85.333l-2.987 42.667c0 52.48 12.373 104.107 35.84 151.040 101.12-15.36 203.093-23.040 305.493-23.040s204.373 7.68 305.493 23.040c23.467-46.933 35.84-98.56 35.84-151.040l-2.987-42.667c-103.68-57.6-220.16-87.040-338.347-85.333zM512 85.333c235.641 0 426.667 191.025 426.667 426.667s-191.025 426.667-426.667 426.667c-235.641 0-426.667-191.025-426.667-426.667s191.025-426.667 426.667-426.667z" - ], - "attrs": [ - {} - ], - "isMulticolor": false, - "isMulticolor2": false, - "tags": [ - "ninja" - ], - "grid": 24 - }, - "attrs": [ - {} - ], - "properties": { - "order": 1238, - "id": 1060, - "name": "ninja", - "prevSize": 24, - "code": 59657 - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 60 - }, - { - "icon": { - "paths": [ - "M282 460c62 120 162 220 282 282l94-94c12-12 30-16 44-10 48 16 100 24 152 24 24 0 42 18 42 42v150c0 24-18 42-42 42-400 0-726-326-726-726 0-24 18-42 42-42h150c24 0 42 18 42 42 0 54 8 104 24 152 4 14 2 32-10 44z" - ], - "attrs": [], - "isMulticolor": false, - "isMulticolor2": false, - "tags": [ - "phone" - ], - "defaultCode": 57549, - "grid": 24 - }, - "attrs": [], - "properties": { - "ligatures": "call, local_phone, phone", - "id": 1061, - "order": 1239, - "prevSize": 24, - "code": 57549, - "name": "phone" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 61 - }, - { - "icon": { - "paths": [ - "M810 554h-256v256h-84v-256h-256v-84h256v-256h84v256h256v84z" - ], - "attrs": [], - "isMulticolor": false, - "isMulticolor2": false, - "tags": [ - "add" - ], - "defaultCode": 57669, - "grid": 24 - }, - "attrs": [], - "properties": { - "ligatures": "add", - "id": 1062, - "order": 1240, - "prevSize": 24, - "code": 57669, - "name": "add" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 62 } ], "height": 1024, diff --git a/react/features/base/styles/components/styles/ColorPalette.js b/react/features/base/styles/components/styles/ColorPalette.js index a527dc8d0..11ddef4e6 100644 --- a/react/features/base/styles/components/styles/ColorPalette.js +++ b/react/features/base/styles/components/styles/ColorPalette.js @@ -24,5 +24,16 @@ export const ColorPalette = { darkGrey: '#555555', green: '#40b183', red: '#D00000', - white: 'white' + white: 'white', + + /** + * These are colors from the atlaskit to be used on mobile, when needed. + * + * FIXME: Maybe a better solution would be good, or a native packaging of + * the respective atlaskit components. + */ + G400: '#00875A', // Slime + N500: '#42526E', // McFanning + R400: '#DE350B', // Red dirt + Y200: '#FFC400' // Pub mix }; diff --git a/react/features/conference/components/Conference.native.js b/react/features/conference/components/Conference.native.js index c4964c7b9..58ac30e35 100644 --- a/react/features/conference/components/Conference.native.js +++ b/react/features/conference/components/Conference.native.js @@ -17,6 +17,7 @@ import { createDesiredLocalTracks } from '../../base/tracks'; import { ConferenceNotification } from '../../calendar-sync'; import { Filmstrip } from '../../filmstrip'; import { LargeVideo } from '../../large-video'; +import { NotificationsContainer } from '../../notifications'; import { setToolboxVisible, Toolbox } from '../../toolbox'; import ConferenceIndicators from './ConferenceIndicators'; @@ -267,6 +268,8 @@ class Conference extends Component { this._renderConferenceNotification() } + + {/* * The dialogs are in the topmost stacking layers. */ diff --git a/react/features/filmstrip/components/native/Filmstrip.js b/react/features/filmstrip/components/native/Filmstrip.js index 537ddd800..0cc234ed8 100644 --- a/react/features/filmstrip/components/native/Filmstrip.js +++ b/react/features/filmstrip/components/native/Filmstrip.js @@ -10,6 +10,8 @@ import { makeAspectRatioAware } from '../../../base/responsive-ui'; +import { isFilmstripVisible } from '../../functions'; + import LocalThumbnail from './LocalThumbnail'; import styles from './styles'; import Thumbnail from './Thumbnail'; @@ -188,7 +190,7 @@ class Filmstrip extends Component { */ function _mapStateToProps(state) { const participants = state['features/base/participants']; - const { enabled, visible } = state['features/filmstrip']; + const { enabled } = state['features/filmstrip']; return { /** @@ -215,7 +217,7 @@ function _mapStateToProps(state) { * @private * @type {boolean} */ - _visible: visible && participants.length > 1 + _visible: isFilmstripVisible(state) }; } diff --git a/react/features/filmstrip/components/styles.js b/react/features/filmstrip/components/styles.js index 6d6fb68bc..d1edf6545 100644 --- a/react/features/filmstrip/components/styles.js +++ b/react/features/filmstrip/components/styles.js @@ -1,4 +1,5 @@ import { ColorPalette } from '../../base/styles'; +import { FILMSTRIP_SIZE } from '../constants'; /** * Size for the Avatar. @@ -44,12 +45,15 @@ export default { ...filmstrip, flexDirection: 'row', justifyContent: 'flex-end', - height: 90 + height: FILMSTRIP_SIZE }, /** * The style of the wide {@link Filmstrip} version which displays thumbnails * in a column on the short size of the screen. + * + * NOTE: width is calculated based on the children, but it should also align + * to {@code FILMSTRIP_SIZE}. */ filmstripWide: { ...filmstrip, diff --git a/react/features/filmstrip/constants.js b/react/features/filmstrip/constants.js new file mode 100644 index 000000000..6aa593081 --- /dev/null +++ b/react/features/filmstrip/constants.js @@ -0,0 +1,6 @@ +// @flow + +/** + * The height of the filmstrip in narrow aspect ratio, or width in wide. + */ +export const FILMSTRIP_SIZE = 90; diff --git a/react/features/filmstrip/functions.native.js b/react/features/filmstrip/functions.native.js new file mode 100644 index 000000000..ae2551789 --- /dev/null +++ b/react/features/filmstrip/functions.native.js @@ -0,0 +1,20 @@ +// @flow + +import { toState } from '../base/redux'; + +/** + * Returns true if the filmstrip on mobile is visible, false otherwise. + * + * NOTE: Filmstrip on mobile behaves differently to web, and is only visible + * when there are at least 2 participants. + * + * @param {Object | Function} stateful - The Object or Function that can be + * resolved to a Redux state object with the toState function. + * @returns {boolean} + */ +export function isFilmstripVisible(stateful: Object | Function) { + const state = toState(stateful); + const { length: participantCount } = state['features/base/participants']; + + return state['features/filmstrip'].visible && participantCount > 1; +} diff --git a/react/features/filmstrip/functions.js b/react/features/filmstrip/functions.web.js similarity index 68% rename from react/features/filmstrip/functions.js rename to react/features/filmstrip/functions.web.js index d250f9cad..77ad477c9 100644 --- a/react/features/filmstrip/functions.js +++ b/react/features/filmstrip/functions.web.js @@ -4,9 +4,25 @@ import { getParticipantCount, getPinnedParticipant } from '../base/participants'; +import { toState } from '../base/redux'; declare var interfaceConfig: Object; +/** + * Returns true if the filmstrip on mobile is visible, false otherwise. + * + * NOTE: Filmstrip on web behaves differently to mobile, much simpler, but so + * function lies here only for the sake of consistency and to avoid flow errors + * on import. + * + * @param {Object | Function} stateful - The Object or Function that can be + * resolved to a Redux state object with the toState function. + * @returns {boolean} + */ +export function isFilmstripVisible(stateful: Object | Function) { + return toState(stateful)['features/filmstrip'].visible; +} + /** * Determines whether the remote video thumbnails should be displayed/visible in * the filmstrip. diff --git a/react/features/filmstrip/index.js b/react/features/filmstrip/index.js index 44000a1a7..0a8f4ad7b 100644 --- a/react/features/filmstrip/index.js +++ b/react/features/filmstrip/index.js @@ -1,6 +1,7 @@ export * from './actions'; export * from './actionTypes'; export * from './components'; +export * from './constants'; export * from './functions'; import './middleware'; diff --git a/react/features/notifications/actionTypes.js b/react/features/notifications/actionTypes.js index e9860c739..cb727ea6b 100644 --- a/react/features/notifications/actionTypes.js +++ b/react/features/notifications/actionTypes.js @@ -1,3 +1,13 @@ +/** + * The type of (redux) action which signals that all the stored notifications + * need to be cleared. + * + * { + * type: CLEAR_NOTIFICATIONS + * } + */ +export const CLEAR_NOTIFICATIONS = Symbol('CLEAR_NOTIFICATIONS'); + /** * The type of (redux) action which signals that a specific notification should * not be displayed anymore. diff --git a/react/features/notifications/actions.js b/react/features/notifications/actions.js index 95164aabe..8d9bf47ba 100644 --- a/react/features/notifications/actions.js +++ b/react/features/notifications/actions.js @@ -1,4 +1,7 @@ +// @flow + import { + CLEAR_NOTIFICATIONS, HIDE_NOTIFICATION, SET_NOTIFICATIONS_ENABLED, SHOW_NOTIFICATION @@ -6,6 +9,19 @@ import { import { NOTIFICATION_TYPE } from './constants'; +/** + * Clears (removes) all the notifications. + * + * @returns {{ + * type: CLEAR_NOTIFICATIONS + * }} + */ +export function clearNotifications() { + return { + type: CLEAR_NOTIFICATIONS + }; +} + /** * Removes the notification with the passed in id. * @@ -16,7 +32,7 @@ import { NOTIFICATION_TYPE } from './constants'; * uid: number * }} */ -export function hideNotification(uid) { +export function hideNotification(uid: number) { return { type: HIDE_NOTIFICATION, uid @@ -32,7 +48,7 @@ export function hideNotification(uid) { * enabled: boolean * }} */ -export function setNotificationsEnabled(enabled) { +export function setNotificationsEnabled(enabled: boolean) { return { type: SET_NOTIFICATIONS_ENABLED, enabled @@ -45,7 +61,7 @@ export function setNotificationsEnabled(enabled) { * @param {Object} props - The props needed to show the notification component. * @returns {Object} */ -export function showErrorNotification(props) { +export function showErrorNotification(props: Object) { return showNotification({ ...props, appearance: NOTIFICATION_TYPE.ERROR @@ -65,7 +81,7 @@ export function showErrorNotification(props) { * uid: number * }} */ -export function showNotification(props = {}, timeout) { +export function showNotification(props: Object = {}, timeout: ?number) { return { type: SHOW_NOTIFICATION, props, @@ -80,7 +96,7 @@ export function showNotification(props = {}, timeout) { * @param {Object} props - The props needed to show the notification component. * @returns {Object} */ -export function showWarningNotification(props) { +export function showWarningNotification(props: Object) { return showNotification({ ...props, appearance: NOTIFICATION_TYPE.WARNING diff --git a/react/features/notifications/components/AbstractNotification.js b/react/features/notifications/components/AbstractNotification.js new file mode 100644 index 000000000..a6eb08105 --- /dev/null +++ b/react/features/notifications/components/AbstractNotification.js @@ -0,0 +1,147 @@ +// @flow + +import { Component } from 'react'; + +import { NOTIFICATION_TYPE } from '../constants'; + +export type Props = { + + /** + * Display appearance for the component, passed directly to the + * notification. + */ + appearance: string, + + /** + * The text to display in the body of the notification. If not passed + * in, the passed in descriptionKey will be used. + */ + defaultTitleKey: string, + + /** + * A description string that can be used in addition to the prop + * descriptionKey. + */ + description: string, + + /** + * The translation arguments that may be necessary for the description. + */ + descriptionArguments: Object, + + /** + * The translation key to use as the body of the notification. + */ + descriptionKey: string, + + /** + * Whether the support link should be hidden in the case of an error + * message. + */ + hideErrorSupportLink: boolean, + + /** + * Whether or not the dismiss button should be displayed. + */ + isDismissAllowed: boolean, + + /** + * Callback invoked when the user clicks to dismiss the notification. + */ + onDismissed: Function, + + /** + * Invoked to obtain translated strings. + */ + t: Function, + + /** + * The text to display at the top of the notification. If not passed in, + * the passed in titleKey will be used. + */ + title: string, + + /** + * The translation arguments that may be necessary for the title. + */ + titleArguments: Object, + + /** + * The translation key to display as the title of the notification if + * no title is provided. + */ + titleKey: string, + + /** + * The unique identifier for the notification. + */ + uid: number +}; + +/** + * Abstract class for {@code Notification} component. + * + * @extends Component + */ +export default class AbstractNotification extends Component

{ + /** + * Default values for {@code Notification} component's properties. + * + * @static + */ + static defaultProps = { + appearance: NOTIFICATION_TYPE.NORMAL, + isDismissAllowed: true + }; + + /** + * Initializes a new {@code Notification} instance. + * + * @param {Object} props - The read-only properties with which the new + * instance is to be initialized. + */ + constructor(props: P) { + super(props); + + // Bind event handler so it is only bound once for every instance. + this._onDismissed = this._onDismissed.bind(this); + } + + _getDescription: () => Array + + /** + * Returns the description array to be displayed. + * + * @protected + * @returns {Array} + */ + _getDescription() { + const { + description, + descriptionArguments, + descriptionKey, + t + } = this.props; + + const descriptionArray = []; + + descriptionKey + && descriptionArray.push(t(descriptionKey, descriptionArguments)); + + description && descriptionArray.push(description); + + return descriptionArray; + } + + _onDismissed: () => void; + + /** + * Callback to dismiss the notification. + * + * @private + * @returns {void} + */ + _onDismissed() { + this.props.onDismissed(this.props.uid); + } +} diff --git a/react/features/notifications/components/AbstractNotificationsContainer.js b/react/features/notifications/components/AbstractNotificationsContainer.js new file mode 100644 index 000000000..8cfd52e24 --- /dev/null +++ b/react/features/notifications/components/AbstractNotificationsContainer.js @@ -0,0 +1,146 @@ +// @flow + +import { Component } from 'react'; + +import { getOverlayToRender } from '../../overlay'; + +import { hideNotification } from '../actions'; + +export type Props = { + + /** + * The notifications to be displayed, with the first index being the + * notification at the top and the rest shown below it in order. + */ + _notifications: Array, + + /** + * Invoked to update the redux store in order to remove notifications. + */ + dispatch: Function +}; + +/** + * Abstract class for {@code NotificationsContainer} component. + */ +export default class AbstractNotificationsContainer + extends Component

{ + /** + * A timeout id returned by setTimeout. + */ + _notificationDismissTimeout: ?TimeoutID; + + /** + * Initializes a new {@code AbstractNotificationsContainer} instance. + * + * @inheritdoc + */ + constructor(props: P) { + super(props); + + /** + * The timeout set for automatically dismissing a displayed + * notification. This value is set on the instance and not state to + * avoid additional re-renders. + * + * @type {number|null} + */ + this._notificationDismissTimeout = null; + + // Bind event handlers so they are only bound once for every instance. + this._onDismissed = this._onDismissed.bind(this); + } + + /** + * Sets a timeout if the currently displayed notification has changed. + * + * @inheritdoc + */ + componentDidUpdate(prevProps: P) { + const { _notifications } = this.props; + + if (_notifications.length) { + const notification = _notifications[0]; + const previousNotification + = prevProps._notifications.length + ? prevProps._notifications[0] + : undefined; + + if (notification !== previousNotification) { + this._clearNotificationDismissTimeout(); + + if (notification) { + const { timeout, uid } = notification; + + this._notificationDismissTimeout = setTimeout(() => { + // Perform a no-op if a timeout is not specified. + if (Number.isInteger(timeout)) { + this._onDismissed(uid); + } + }, timeout); + } + } + } else if (this._notificationDismissTimeout) { + // Clear timeout when all notifications are cleared (e.g external + // call to clear them) + this._clearNotificationDismissTimeout(); + } + } + + /** + * Clear any dismissal timeout that is still active. + * + * @inheritdoc + * returns {void} + */ + componentWillUnmount() { + this._clearNotificationDismissTimeout(); + } + + _onDismissed: number => void; + + /** + * Clears the running notification dismiss timeout, if any. + * + * @returns {void} + */ + _clearNotificationDismissTimeout() { + this._notificationDismissTimeout + && clearTimeout(this._notificationDismissTimeout); + + this._notificationDismissTimeout = null; + } + + /** + * Emits an action to remove the notification from the redux store so it + * stops displaying. + * + * @param {number} uid - The id of the notification to be removed. + * @private + * @returns {void} + */ + _onDismissed(uid) { + this._clearNotificationDismissTimeout(); + + this.props.dispatch(hideNotification(uid)); + } +} + +/** + * Maps (parts of) the Redux state to the associated NotificationsContainer's + * props. + * + * @param {Object} state - The Redux state. + * @private + * @returns {{ + * _notifications: Array + * }} + */ +export function _abstractMapStateToProps(state: Object) { + const isAnyOverlayVisible = Boolean(getOverlayToRender(state)); + const { enabled, notifications } = state['features/notifications']; + + return { + _notifications: enabled && !isAnyOverlayVisible ? notifications : [] + }; +} diff --git a/react/features/notifications/components/Notification.native.js b/react/features/notifications/components/Notification.native.js index e69de29bb..15b34d487 100644 --- a/react/features/notifications/components/Notification.native.js +++ b/react/features/notifications/components/Notification.native.js @@ -0,0 +1,109 @@ +// @flow + +import React from 'react'; +import { Text, TouchableOpacity, View } from 'react-native'; + +import { Icon } from '../../base/font-icons'; +import { translate } from '../../base/i18n'; + +import { NOTIFICATION_TYPE } from '../constants'; + +import AbstractNotification, { + type Props +} from './AbstractNotification'; +import styles from './styles'; + +/** + * Implements a React {@link Component} to display a notification. + * + * @extends Component + */ +class Notification extends AbstractNotification { + /** + * Implements React's {@link Component#render()}. + * + * @inheritdoc + * @returns {ReactElement} + */ + render() { + const { + appearance, + isDismissAllowed, + t, + title, + titleArguments, + titleKey + } = this.props; + + let notificationStyle; + + switch (appearance) { + case NOTIFICATION_TYPE.ERROR: + notificationStyle = styles.notificationTypeError; + break; + case NOTIFICATION_TYPE.NORMAL: + notificationStyle = styles.notificationTypeNormal; + break; + case NOTIFICATION_TYPE.SUCCESS: + notificationStyle = styles.notificationTypeSuccess; + break; + case NOTIFICATION_TYPE.WARNING: + notificationStyle = styles.notificationTypeWarning; + break; + case NOTIFICATION_TYPE.INFO: + default: + notificationStyle = styles.notificationTypeInfo; + } + + return ( + + + + + { + title || t(titleKey, titleArguments) + } + + + + { + // eslint-disable-next-line no-extra-parens + this._getDescription().map((line, index) => ( + + { line } + + )) + } + + + { + isDismissAllowed + && + + + + + } + + ); + } + + _getDescription: () => Array; + + _onDismissed: () => void; +} + +export default translate(Notification); diff --git a/react/features/notifications/components/Notification.web.js b/react/features/notifications/components/Notification.web.js index 7e505154d..b2cea7092 100644 --- a/react/features/notifications/components/Notification.web.js +++ b/react/features/notifications/components/Notification.web.js @@ -5,13 +5,16 @@ import EditorInfoIcon from '@atlaskit/icon/glyph/editor/info'; import ErrorIcon from '@atlaskit/icon/glyph/error'; import WarningIcon from '@atlaskit/icon/glyph/warning'; import { colors } from '@atlaskit/theme'; -import PropTypes from 'prop-types'; -import React, { Component } from 'react'; +import React from 'react'; import { translate } from '../../base/i18n'; import { NOTIFICATION_TYPE } from '../constants'; +import AbstractNotification, { + type Props +} from './AbstractNotification'; + declare var interfaceConfig: Object; /** @@ -32,110 +35,7 @@ const ICON_COLOR = { * * @extends Component */ -class Notification extends Component<*> { - /** - * Default values for {@code Notification} component's properties. - * - * @static - */ - static defaultProps = { - appearance: NOTIFICATION_TYPE.NORMAL - }; - - /** - * {@code Notification} component's property types. - * - * @static - */ - static propTypes = { - /** - * Display appearance for the component, passed directly to - * {@code Flag}. - */ - appearance: PropTypes.string, - - /** - * The text to display in the body of the notification. If not passed - * in, the passed in descriptionKey will be used. - */ - defaultTitleKey: PropTypes.string, - - /** - * A description string that can be used in addition to the prop - * descriptionKey. - */ - description: PropTypes.string, - - /** - * The translation arguments that may be necessary for the description. - */ - descriptionArguments: PropTypes.object, - - /** - * The translation key to use as the body of the notification. - */ - descriptionKey: PropTypes.string, - - /** - * Whether the support link should be hidden in the case of an error - * message. - */ - hideErrorSupportLink: PropTypes.bool, - - /** - * Whether or not the dismiss button should be displayed. This is passed - * in by {@code FlagGroup}. - */ - isDismissAllowed: PropTypes.bool, - - /** - * Callback invoked when the user clicks to dismiss the notification. - * this is passed in by {@code FlagGroup}. - */ - onDismissed: PropTypes.func, - - /** - * Invoked to obtain translated strings. - */ - t: PropTypes.func, - - /** - * The text to display at the top of the notification. If not passed in, - * the passed in titleKey will be used. - */ - title: PropTypes.string, - - /** - * The translation arguments that may be necessary for the title. - */ - titleArguments: PropTypes.object, - - /** - * The translation key to display as the title of the notification if - * no title is provided. - */ - titleKey: PropTypes.string, - - /** - * The unique identifier for the notification. Passed back by the - * {@code Flag} component in the onDismissed callback. - */ - uid: PropTypes.number - }; - - /** - * Initializes a new {@code Notification} instance. - * - * @param {Object} props - The read-only properties with which the new - * instance is to be initialized. - */ - constructor(props) { - super(props); - - // Bind event handler so it is only bound once for every instance. - this._onDismissed = this._onDismissed.bind(this); - } - +class Notification extends AbstractNotification { /** * Implements React's {@link Component#render()}. * @@ -168,6 +68,8 @@ class Notification extends Component<*> { ); } + _getDescription: () => Array + _onDismissed: () => void; /** @@ -178,32 +80,15 @@ class Notification extends Component<*> { * @returns {ReactElement} */ _renderDescription() { - const { - description, - descriptionArguments, - descriptionKey, - t - } = this.props; - return (

- { descriptionKey - ? t(descriptionKey, descriptionArguments) : null } - { description || null } + { + this._getDescription() + }
); } - /** - * Calls back into {@code FlagGroup} to dismiss the notification. - * - * @private - * @returns {void} - */ - _onDismissed() { - this.props.onDismissed(this.props.uid); - } - /** * Opens the support page. * diff --git a/react/features/notifications/components/NotificationsContainer.native.js b/react/features/notifications/components/NotificationsContainer.native.js index e69de29bb..5baf50396 100644 --- a/react/features/notifications/components/NotificationsContainer.native.js +++ b/react/features/notifications/components/NotificationsContainer.native.js @@ -0,0 +1,145 @@ +// @flow + +import React from 'react'; +import { View } from 'react-native'; +import { connect } from 'react-redux'; + +import { + isNarrowAspectRatio, + makeAspectRatioAware +} from '../../base/responsive-ui'; +import { FILMSTRIP_SIZE, isFilmstripVisible } from '../../filmstrip'; +import { HANGUP_BUTTON_SIZE } from '../../toolbox'; + +import AbstractNotificationsContainer, { + _abstractMapStateToProps, + type Props as AbstractProps +} from './AbstractNotificationsContainer'; +import Notification from './Notification'; +import styles from './styles'; + +type Props = AbstractProps & { + + /** + * True if the {@code Filmstrip} is visible, false otherwise. + */ + _filmstripVisible: boolean, + + /** + * True if the {@ćode Toolbox} is visible, false otherwise. + */ + _toolboxVisible: boolean +}; + +/** + * The margin of the container to be kept from other components. + */ +const CONTAINER_MARGIN = 10; + +/** + * Implements a React {@link Component} which displays notifications and handles + * automatic dismissmal after a notification is shown for a defined timeout + * period. + * + * @extends {Component} + */ +class NotificationsContainer extends AbstractNotificationsContainer { + + /** + * Implements React's {@link Component#render()}. + * + * @inheritdoc + * @returns {ReactElement} + */ + render() { + const { _notifications } = this.props; + + if (!_notifications || !_notifications.length) { + return null; + } + + return ( + + + { + _notifications.map(notification => { + const { props, uid } = notification; + + return ( + + + ); + }) + } + + + ); + } + + /** + * Generates a style object that is to be used for the notification + * container. + * + * @private + * @returns {?Object} + */ + _getContainerStyle() { + const { _filmstripVisible, _toolboxVisible } = this.props; + + // The filmstrip only affects the position if we're on a narrow view. + const _narrow = isNarrowAspectRatio(this); + + let bottom = 0; + let right = 0; + + // The container needs additional distance from bottom when the + // filmstrip or the toolbox is visible. + _filmstripVisible && !_narrow && (right += FILMSTRIP_SIZE); + _filmstripVisible && _narrow && (bottom += FILMSTRIP_SIZE); + _toolboxVisible && (bottom += HANGUP_BUTTON_SIZE); + + bottom += CONTAINER_MARGIN; + + return { + bottom, + right + }; + } + + _onDismissed: number => void; +} + +/** + * Maps (parts of) the Redux state to the associated NotificationsContainer's + * props. + * + * @param {Object} state - The Redux state. + * @private + * @returns {{ + * _filmstripVisible: boolean, + * _notifications: Array, + * _showNotifications: boolean, + * _toolboxVisible: boolean + * }} + */ +export function _mapStateToProps(state: Object) { + return { + ..._abstractMapStateToProps(state), + _filmstripVisible: isFilmstripVisible(state), + _toolboxVisible: state['features/toolbox'].visible + }; +} + +export default connect(_mapStateToProps)( + makeAspectRatioAware(NotificationsContainer)); diff --git a/react/features/notifications/components/NotificationsContainer.web.js b/react/features/notifications/components/NotificationsContainer.web.js index 9f3b78789..c7785866e 100644 --- a/react/features/notifications/components/NotificationsContainer.web.js +++ b/react/features/notifications/components/NotificationsContainer.web.js @@ -1,11 +1,14 @@ +// @flow + import { FlagGroup } from '@atlaskit/flag'; -import PropTypes from 'prop-types'; -import React, { Component } from 'react'; +import React from 'react'; import { connect } from 'react-redux'; -import { hideNotification } from '../actions'; - -import { Notification } from './'; +import AbstractNotificationsContainer, { + _abstractMapStateToProps as _mapStateToProps, + type Props +} from './AbstractNotificationsContainer'; +import Notification from './Notification'; /** * Implements a React {@link Component} which displays notifications and handles @@ -14,91 +17,7 @@ import { Notification } from './'; * * @extends {Component} */ -class NotificationsContainer extends Component { - /** - * {@code NotificationsContainer} component's property types. - * - * @static - */ - static propTypes = { - /** - * The notifications to be displayed, with the first index being the - * notification at the top and the rest shown below it in order. - */ - _notifications: PropTypes.array, - - /** - * Whether or not notifications should be displayed at all. If not, - * notifications will be dismissed immediately. - */ - _showNotifications: PropTypes.bool, - - /** - * Invoked to update the redux store in order to remove notifications. - */ - dispatch: PropTypes.func - }; - - /** - * Initializes a new {@code NotificationsContainer} instance. - * - * @param {Object} props - The read-only React Component props with which - * the new instance is to be initialized. - */ - constructor(props) { - super(props); - - /** - * The timeout set for automatically dismissing a displayed - * notification. This value is set on the instance and not state to - * avoid additional re-renders. - * - * @type {number|null} - */ - this._notificationDismissTimeout = null; - - // Bind event handlers so they are only bound once for every instance. - this._onDismissed = this._onDismissed.bind(this); - } - - /** - * Sets a timeout if the currently displayed notification has changed. - * - * @inheritdoc - * returns {void} - */ - componentDidUpdate() { - const { _notifications, _showNotifications } = this.props; - - if (_notifications.length) { - const notification = _notifications[0]; - - if (!_showNotifications || this._notificationDismissTimeout) { - - // No-op because there should already be a notification that - // is waiting for dismissal. - } else { - const { timeout, uid } = notification; - - this._notificationDismissTimeout = setTimeout(() => { - // Perform a no-op if a timeout is not specified. - if (Number.isInteger(timeout)) { - this._onDismissed(uid); - } - }, timeout); - } - } - } - - /** - * Clear any dismissal timeout that is still active. - * - * @inheritdoc - * returns {void} - */ - componentWillUnmount() { - clearTimeout(this._notificationDismissTimeout); - } +class NotificationsContainer extends AbstractNotificationsContainer { /** * Implements React's {@link Component#render()}. @@ -114,20 +33,7 @@ class NotificationsContainer extends Component { ); } - /** - * Emits an action to remove the notification from the redux store so it - * stops displaying. - * - * @param {number} flagUid - The id of the notification to be removed. - * @private - * @returns {void} - */ - _onDismissed(flagUid) { - clearTimeout(this._notificationDismissTimeout); - this._notificationDismissTimeout = null; - - this.props.dispatch(hideNotification(flagUid)); - } + _onDismissed: number => void; /** * Renders notifications to display as ReactElements. An empty array will @@ -137,11 +43,7 @@ class NotificationsContainer extends Component { * @returns {ReactElement[]} */ _renderFlags() { - const { _notifications, _showNotifications } = this.props; - - if (!_showNotifications) { - return []; - } + const { _notifications } = this.props; return _notifications.map(notification => { const { props, uid } = notification; @@ -161,37 +63,4 @@ class NotificationsContainer extends Component { } } -/** - * Maps (parts of) the Redux state to the associated NotificationsContainer's - * props. - * - * @param {Object} state - The Redux state. - * @private - * @returns {{ - * _notifications: Array - * }} - */ -function _mapStateToProps(state) { - // TODO: Per existing behavior, notifications should not display when an - // overlay is visible. This logic for checking overlay display can likely be - // simplified. - const { - connectionEstablished, - haveToReload, - isMediaPermissionPromptVisible, - suspendDetected - } = state['features/overlay']; - const isAnyOverlayVisible = (connectionEstablished && haveToReload) - || isMediaPermissionPromptVisible - || suspendDetected - || state['features/base/jwt'].calleeInfoVisible; - - const { enabled, notifications } = state['features/notifications']; - - return { - _notifications: notifications, - _showNotifications: enabled && !isAnyOverlayVisible - }; -} - export default connect(_mapStateToProps)(NotificationsContainer); diff --git a/react/features/notifications/components/styles.js b/react/features/notifications/components/styles.js new file mode 100644 index 000000000..774b46494 --- /dev/null +++ b/react/features/notifications/components/styles.js @@ -0,0 +1,115 @@ +// @flow + +import { StyleSheet } from 'react-native'; + +import { BoxModel, createStyleSheet, ColorPalette } from '../../base/styles'; + +/** + * The styles of the React {@code Components} of the feature notifications. + */ +export default createStyleSheet({ + + /** + * The content (left) column of the notification. + */ + contentColumn: { + flex: 1, + flexDirection: 'column', + padding: BoxModel.padding + }, + + /** + * Test style of the notification. + */ + contentText: { + color: ColorPalette.white + }, + + /** + * Dismiss icon style. + */ + dismissIcon: { + alignSelf: 'center', + color: ColorPalette.white, + fontSize: 16, + padding: 1.5 * BoxModel.padding + }, + + /** + * Outermost view of a single notification. + */ + notification: { + borderRadius: 5, + flexDirection: 'row', + marginTop: 0.5 * BoxModel.margin + }, + + /** + * Outermost container of a list of notifications. + */ + notificationContainer: { + alignItems: 'flex-start', + bottom: 0, + left: 0, + padding: 2 * BoxModel.padding, + position: 'absolute', + right: 0 + }, + + /** + * Wrapper for the message (without title). + */ + notificationContent: { + flexDirection: 'column', + paddingVertical: 0.5 * BoxModel.padding + }, + + /** + * A full screen overlay to help to position the container. + */ + notificationOverlay: { + ...StyleSheet.absoluteFillObject + }, + + /** + * The View containing the title. + */ + notificationTitle: { + paddingVertical: 0.5 * BoxModel.padding + }, + + /** + * Background settings for different notification types. + */ + + notificationTypeError: { + backgroundColor: ColorPalette.R400 + }, + + notificationTypeInfo: { + backgroundColor: ColorPalette.N500 + }, + + notificationTypeNormal: { + // NOTE: Mobile has black background when the large video doesn't render + // a stream, so we avoid using black as the background of the normal + // type notifications. + backgroundColor: ColorPalette.N500 + }, + + notificationTypeSuccess: { + backgroundColor: ColorPalette.G400 + }, + + notificationTypeWarning: { + backgroundColor: ColorPalette.Y200 + }, + + /** + * Title text style. + */ + titleText: { + color: ColorPalette.white, + fontWeight: 'bold' + } +}); diff --git a/react/features/notifications/index.js b/react/features/notifications/index.js index b2e9c09f6..a29aa08e0 100644 --- a/react/features/notifications/index.js +++ b/react/features/notifications/index.js @@ -2,4 +2,5 @@ export * from './actions'; export * from './actionTypes'; export * from './components'; +import './middleware'; import './reducer'; diff --git a/react/features/notifications/middleware.js b/react/features/notifications/middleware.js new file mode 100644 index 000000000..4d3e35b07 --- /dev/null +++ b/react/features/notifications/middleware.js @@ -0,0 +1,19 @@ +/* @flow */ + +import { getCurrentConference } from '../base/conference'; +import { StateListenerRegistry } from '../base/redux'; + +import { clearNotifications } from './actions'; + +/** + * StateListenerRegistry provides a reliable way to detect the leaving of a + * conference, where we need to clean up the notifications. + */ +StateListenerRegistry.register( + /* selector */ state => getCurrentConference(state), + /* listener */ (conference, { dispatch }) => { + if (!conference) { + dispatch(clearNotifications()); + } + } +); diff --git a/react/features/notifications/reducer.js b/react/features/notifications/reducer.js index 0a9c4a389..bce909b17 100644 --- a/react/features/notifications/reducer.js +++ b/react/features/notifications/reducer.js @@ -1,6 +1,7 @@ import { ReducerRegistry } from '../base/redux'; import { + CLEAR_NOTIFICATIONS, HIDE_NOTIFICATION, SET_NOTIFICATIONS_ENABLED, SHOW_NOTIFICATION @@ -28,6 +29,11 @@ const DEFAULT_STATE = { ReducerRegistry.register('features/notifications', (state = DEFAULT_STATE, action) => { switch (action.type) { + case CLEAR_NOTIFICATIONS: + return { + ...state, + notifications: [] + }; case HIDE_NOTIFICATION: return { ...state, diff --git a/react/features/overlay/components/OverlayContainer.js b/react/features/overlay/components/OverlayContainer.js index 8b85dab5b..2e05e362f 100644 --- a/react/features/overlay/components/OverlayContainer.js +++ b/react/features/overlay/components/OverlayContainer.js @@ -3,40 +3,10 @@ import React, { Component } from 'react'; import { connect } from 'react-redux'; -import PageReloadFilmstripOnlyOverlay from './PageReloadFilmstripOnlyOverlay'; -import PageReloadOverlay from './PageReloadOverlay'; -import SuspendedFilmstripOnlyOverlay from './SuspendedFilmstripOnlyOverlay'; -import SuspendedOverlay from './SuspendedOverlay'; -import UserMediaPermissionsFilmstripOnlyOverlay - from './UserMediaPermissionsFilmstripOnlyOverlay'; -import UserMediaPermissionsOverlay from './UserMediaPermissionsOverlay'; +import { getOverlayToRender } from '../functions'; declare var interfaceConfig: Object; -/** - * The lazily-initialized list of overlay React {@link Component} types used The - * user interface is filmstrip-only. - * - * XXX The value is meant to be compile-time defined so it does not contradict - * our coding style to not have global values that are runtime defined and - * merely works around side effects of circular imports. - * - * @type Array - */ -let _filmstripOnlyOverlays; - -/** - * The lazily-initialized list of overlay React {@link Component} types used The - * user interface is not filmstrip-only. - * - * XXX The value is meant to be compile-time defined so it does not contradict - * our coding style to not have global values that are runtime defined and - * merely works around side effects of circular imports. - * - * @type Array - */ -let _nonFilmstripOnlyOverlays; - /** * The type of the React {@link Component} props of {@code OverlayContainer}. */ @@ -68,44 +38,6 @@ class OverlayContainer extends Component { } } -/** - * Returns the list of overlay React {@link Component} types to be rendered by - * {@code OverlayContainer}. The list is lazily initialized the first time it is - * required in order to works around side effects of circular imports. - * - * @param {boolean} filmstripOnly - The indicator which determines whether the - * user interface is filmstrip-only. - * @returns {Array} The list of overlay React {@code Component} types to be - * rendered by {@code OverlayContainer}. - */ -function _getOverlays(filmstripOnly) { - let overlays; - - if (filmstripOnly) { - if (!(overlays = _filmstripOnlyOverlays)) { - overlays = _filmstripOnlyOverlays = [ - PageReloadFilmstripOnlyOverlay, - SuspendedFilmstripOnlyOverlay, - UserMediaPermissionsFilmstripOnlyOverlay - ]; - } - } else if (!(overlays = _nonFilmstripOnlyOverlays)) { - overlays = _nonFilmstripOnlyOverlays = [ - PageReloadOverlay - ]; - - // Mobile only has a PageReloadOverlay. - if (navigator.product !== 'ReactNative') { - overlays.push(...[ - SuspendedOverlay, - UserMediaPermissionsOverlay - ]); - } - } - - return overlays; -} - /** * Maps (parts of) the redux state to the associated {@code OverlayContainer}'s * props. @@ -117,30 +49,12 @@ function _getOverlays(filmstripOnly) { * }} */ function _mapStateToProps(state) { - // XXX In the future interfaceConfig is expected to not be a global variable - // but a redux state like config. Hence, the variable filmStripOnly - // naturally belongs here in preparation for the future. - const filmstripOnly - = typeof interfaceConfig === 'object' && interfaceConfig.filmStripOnly; - let overlay; - - for (const o of _getOverlays(filmstripOnly)) { - // react-i18n / react-redux wrap components and thus we cannot access - // the wrapped component's static methods directly. - const component = o.WrappedComponent || o; - - if (component.needsRender(state)) { - overlay = o; - break; - } - } - return { /** * The React {@link Component} type of overlay to be rendered by the * associated {@code OverlayContainer}. */ - overlay + overlay: getOverlayToRender(state) }; } diff --git a/react/features/overlay/components/index.js b/react/features/overlay/components/index.js index 025b0f62a..108ee99e9 100644 --- a/react/features/overlay/components/index.js +++ b/react/features/overlay/components/index.js @@ -1 +1,15 @@ export { default as OverlayContainer } from './OverlayContainer'; +export { + default as PageReloadFilmstripOnlyOverlay +} from './PageReloadFilmstripOnlyOverlay'; +export { default as PageReloadOverlay } from './PageReloadOverlay'; +export { + default as SuspendedFilmstripOnlyOverlay +} from './SuspendedFilmstripOnlyOverlay'; +export { default as SuspendedOverlay } from './SuspendedOverlay'; +export { + default as UserMediaPermissionsFilmstripOnlyOverlay +} from './UserMediaPermissionsFilmstripOnlyOverlay'; +export { + default as UserMediaPermissionsOverlay +} from './UserMediaPermissionsOverlay'; diff --git a/react/features/overlay/functions.js b/react/features/overlay/functions.js new file mode 100644 index 000000000..6d78d7f73 --- /dev/null +++ b/react/features/overlay/functions.js @@ -0,0 +1,66 @@ +// @flow + +import { + PageReloadFilmstripOnlyOverlay, + PageReloadOverlay, + SuspendedFilmstripOnlyOverlay, + SuspendedOverlay, + UserMediaPermissionsFilmstripOnlyOverlay, + UserMediaPermissionsOverlay +} from './components'; + +declare var interfaceConfig: Object; + +/** + * Returns the list of available overlays that might be rendered. + * + * @private + * @returns {Array>} + */ +function _getOverlays() { + const filmstripOnly + = typeof interfaceConfig === 'object' && interfaceConfig.filmStripOnly; + let overlays; + + if (filmstripOnly) { + overlays = [ + PageReloadFilmstripOnlyOverlay, + SuspendedFilmstripOnlyOverlay, + UserMediaPermissionsFilmstripOnlyOverlay + ]; + } else { + overlays = [ + PageReloadOverlay + ]; + } + + // Mobile only has a PageReloadOverlay. + if (navigator.product !== 'ReactNative') { + overlays.push(...[ + SuspendedOverlay, + UserMediaPermissionsOverlay + ]); + } + + return overlays; +} + +/** + * Returns the overlay to be currently rendered. + * + * @param {Object} state - The Redux state. + * @returns {?React$ComponentType<*>} + */ +export function getOverlayToRender(state: Object) { + for (const overlay of _getOverlays()) { + // react-i18n / react-redux wrap components and thus we cannot access + // the wrapped component's static methods directly. + const component = overlay.WrappedComponent || overlay; + + if (component.needsRender(state)) { + return overlay; + } + } + + return undefined; +} diff --git a/react/features/overlay/index.js b/react/features/overlay/index.js index 7f0ef0251..3354f4deb 100644 --- a/react/features/overlay/index.js +++ b/react/features/overlay/index.js @@ -1,5 +1,6 @@ export * from './actions'; export * from './components'; +export * from './functions'; import './middleware'; import './reducer'; diff --git a/react/features/toolbox/components/native/styles.js b/react/features/toolbox/components/native/styles.js index 9e4b47297..1b4b17569 100644 --- a/react/features/toolbox/components/native/styles.js +++ b/react/features/toolbox/components/native/styles.js @@ -3,6 +3,8 @@ import { StyleSheet } from 'react-native'; import { BoxModel, ColorPalette, createStyleSheet } from '../../../base/styles'; +import { HANGUP_BUTTON_SIZE } from '../../constants'; + // Toolbox, toolbar: /** @@ -44,8 +46,8 @@ const styles = createStyleSheet({ ...toolbarButton, backgroundColor: ColorPalette.red, borderRadius: 30, - height: 60, - width: 60 + height: HANGUP_BUTTON_SIZE, + width: HANGUP_BUTTON_SIZE }, /** diff --git a/react/features/toolbox/constants.js b/react/features/toolbox/constants.js new file mode 100644 index 000000000..192d9affb --- /dev/null +++ b/react/features/toolbox/constants.js @@ -0,0 +1,7 @@ +// @flow + +/** + * The size of the hangup button. As that is the largest button, it defines + * the size of the {@code ToolBox}, so other components may relate to that. + */ +export const HANGUP_BUTTON_SIZE = 60; diff --git a/react/features/toolbox/index.js b/react/features/toolbox/index.js index 44000a1a7..0a8f4ad7b 100644 --- a/react/features/toolbox/index.js +++ b/react/features/toolbox/index.js @@ -1,6 +1,7 @@ export * from './actions'; export * from './actionTypes'; export * from './components'; +export * from './constants'; export * from './functions'; import './middleware';