Fix settings screen layout on iOS and add soft back button

This commit is contained in:
zbettenbuk 2018-01-08 12:00:31 +01:00 committed by Lyubo Marinov
parent b7f950f5f7
commit 410dc132e1
22 changed files with 714 additions and 315 deletions

View File

@ -24,7 +24,12 @@
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
.icon-arrow_back:before {
content: "\e5c4";
}
.icon-navigate_before:before {
content: "\e408";
}
.icon-event_note:before { .icon-event_note:before {
content: "\e616"; content: "\e616";
} }

Binary file not shown.

View File

@ -11,7 +11,9 @@
<glyph unicode="&#xe145;" glyph-name="add" d="M810 470h-256v-256h-84v256h-256v84h256v256h84v-256h256v-84z" /> <glyph unicode="&#xe145;" glyph-name="add" d="M810 470h-256v-256h-84v256h-256v84h256v256h84v-256h256v-84z" />
<glyph unicode="&#xe1aa;" glyph-name="bluetooth" d="M550 328l-80 82v-162zM470 776v-162l80 82zM670 696l-184-184 184-184-244-242h-42v324l-196-196-60 60 238 238-238 238 60 60 196-196v324h42zM834 738c40-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" /> <glyph unicode="&#xe1aa;" glyph-name="bluetooth" d="M550 328l-80 82v-162zM470 776v-162l80 82zM670 696l-184-184 184-184-244-242h-42v324l-196-196-60 60 238 238-238 238 60 60 196-196v324h42zM834 738c40-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" />
<glyph unicode="&#xe310;" glyph-name="headset" d="M512 982c212 0 384-172 384-384v-300c0-70-58-128-128-128h-128v342h170v86c0 166-132 298-298 298s-298-132-298-298v-86h170v-342h-128c-70 0-128 58-128 128v300c0 212 172 384 384 384z" /> <glyph unicode="&#xe310;" glyph-name="headset" d="M512 982c212 0 384-172 384-384v-300c0-70-58-128-128-128h-128v342h170v86c0 166-132 298-298 298s-298-132-298-298v-86h170v-342h-128c-70 0-128 58-128 128v300c0 212 172 384 384 384z" />
<glyph unicode="&#xe408;" glyph-name="navigate_before" d="M658 708l-196-196 196-196-60-60-256 256 256 256z" />
<glyph unicode="&#xe425;" glyph-name="timer" d="M512 170c166 0 298 134 298 300s-132 298-298 298-298-132-298-298 132-300 298-300zM812 708c52-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 426v256h84v-256h-84zM640 982v-86h-256v86h256z" /> <glyph unicode="&#xe425;" glyph-name="timer" d="M512 170c166 0 298 134 298 300s-132 298-298 298-298-132-298-298 132-300 298-300zM812 708c52-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 426v256h84v-256h-84zM640 982v-86h-256v86h256z" />
<glyph unicode="&#xe5c4;" glyph-name="arrow_back" d="M854 554v-84h-520l238-240-60-60-342 342 342 342 60-60-238-240h520z" />
<glyph unicode="&#xe5d4;" glyph-name="thumb-menu" d="M512 342c46 0 86-40 86-86s-40-86-86-86-86 40-86 86 40 86 86 86zM512 598c46 0 86-40 86-86s-40-86-86-86-86 40-86 86 40 86 86 86zM512 682c-46 0-86 40-86 86s40 86 86 86 86-40 86-86-40-86-86-86z" /> <glyph unicode="&#xe5d4;" glyph-name="thumb-menu" d="M512 342c46 0 86-40 86-86s-40-86-86-86-86 40-86 86 40 86 86 86zM512 598c46 0 86-40 86-86s-40-86-86-86-86 40-86 86 40 86 86 86zM512 682c-46 0-86 40-86 86s40 86 86 86 86-40 86-86-40-86-86-86z" />
<glyph unicode="&#xe603;" glyph-name="presentation" horiz-adv-x="1088" d="M952.495 1019.065h-818.689c-72.81 0-132.183-60.63-132.183-135.162v-750.719c0-74.473 59.372-135.101 132.183-135.101h818.686c72.936 0 132.314 60.625 132.314 135.101v750.722c0.003 74.532-59.378 135.159-132.311 135.159zM946.346 139.651h-806.14v737.822h806.015l0.126-737.822zM685.753 738.544h216.911v-566.758h-216.911v566.758zM428.672 610.002h216.911v-438.216h-216.911v438.216zM172.339 481.46h216.161v-309.677h-216.161v309.677z" /> <glyph unicode="&#xe603;" glyph-name="presentation" horiz-adv-x="1088" d="M952.495 1019.065h-818.689c-72.81 0-132.183-60.63-132.183-135.162v-750.719c0-74.473 59.372-135.101 132.183-135.101h818.686c72.936 0 132.314 60.625 132.314 135.101v750.722c0.003 74.532-59.378 135.159-132.311 135.159zM946.346 139.651h-806.14v737.822h806.015l0.126-737.822zM685.753 738.544h216.911v-566.758h-216.911v566.758zM428.672 610.002h216.911v-438.216h-216.911v438.216zM172.339 481.46h216.161v-309.677h-216.161v309.677z" />
<glyph unicode="&#xe613;" glyph-name="recDisable" horiz-adv-x="1140" d="M1123.444 1003.015c-23.593 26.481-64.131 28.989-90.74 5.395l-1008.269-893.436c-26.609-23.468-28.991-64.131-5.46-90.676 12.674-14.306 30.308-21.649 48.126-21.649 15.123 0 30.372 5.401 42.544 16.195l130.045 115.22c90.743-81.844 210.569-132.165 342.473-132.101 282.816 0.061 510.913 227.969 511.287 510.972 0.126 109.934-34.682 211.367-93.499 294.72l118.088 104.625c26.483 23.526 28.997 64.129 5.404 90.735zM944.422 513.818c0.128-200.922-161.896-363.201-362.509-362.952-87.56 0.123-167.573 31.151-230.061 82.569l331.277 293.509v-73.176c1.071-60.993 32.696-92.18 94.944-93.692 61.997 1.512 93.686 32.763 95.131 93.756v41.096h-72.227v-47.499c0.251-4.642-0.564-10.607-2.511-17.949-1.25-3.261-3.448-6.020-6.525-8.093-3.197-2.572-7.845-3.828-13.868-3.828-10.543 0.31-17.132 4.268-19.827 11.921-1.068 3.512-1.947 6.905-2.508 10.163-0.254 2.887-0.377 5.532-0.377 7.786v143.511l42.477 37.634c0.215-0.432 0.452-0.851 0.63-1.303 1.947-6.467 2.762-12.799 2.511-19.076v-36.772h72.227v30.121c-0.246 31.245-9.086 54.699-26.363 70.447l40.711 36.069c35.787-56.055 56.803-122.585 56.867-194.244zM239.795 395.47c-12.613 37.023-19.827 76.557-19.827 117.913-0.19 200.236 161.584 362.009 361.945 362.135 56.853 0 110.313-13.302 158.133-36.398l117.846 104.421c-79.444 50.952-173.758 80.817-275.292 80.948-283.377 0.181-511.354-227.729-511.789-511.675-0.126-79.567 18.636-154.679 51.137-221.882l117.848 104.538zM388.576 690.020h-97.514v-249.057l72.23 64.070v0.689h0.815l117.72 104.418c0 0.564 0.123 0.94 0.123 1.509 0.753 53.898-30.369 80.069-93.374 78.37zM405.959 625.517c1.942-2.767 3.074-6.469 3.323-11.112 0.312-4.452 0.438-9.6 0.438-15.246 0.251-10.916-0.689-19.83-2.949-26.985-2.952-7.594-10.983-11.357-24.159-11.357h-19.325v74.043h15.31c7.842 0 13.865-0.683 18.072-2.19 4.397-1.573 7.468-3.953 9.29-7.153z" /> <glyph unicode="&#xe613;" glyph-name="recDisable" horiz-adv-x="1140" d="M1123.444 1003.015c-23.593 26.481-64.131 28.989-90.74 5.395l-1008.269-893.436c-26.609-23.468-28.991-64.131-5.46-90.676 12.674-14.306 30.308-21.649 48.126-21.649 15.123 0 30.372 5.401 42.544 16.195l130.045 115.22c90.743-81.844 210.569-132.165 342.473-132.101 282.816 0.061 510.913 227.969 511.287 510.972 0.126 109.934-34.682 211.367-93.499 294.72l118.088 104.625c26.483 23.526 28.997 64.129 5.404 90.735zM944.422 513.818c0.128-200.922-161.896-363.201-362.509-362.952-87.56 0.123-167.573 31.151-230.061 82.569l331.277 293.509v-73.176c1.071-60.993 32.696-92.18 94.944-93.692 61.997 1.512 93.686 32.763 95.131 93.756v41.096h-72.227v-47.499c0.251-4.642-0.564-10.607-2.511-17.949-1.25-3.261-3.448-6.020-6.525-8.093-3.197-2.572-7.845-3.828-13.868-3.828-10.543 0.31-17.132 4.268-19.827 11.921-1.068 3.512-1.947 6.905-2.508 10.163-0.254 2.887-0.377 5.532-0.377 7.786v143.511l42.477 37.634c0.215-0.432 0.452-0.851 0.63-1.303 1.947-6.467 2.762-12.799 2.511-19.076v-36.772h72.227v30.121c-0.246 31.245-9.086 54.699-26.363 70.447l40.711 36.069c35.787-56.055 56.803-122.585 56.867-194.244zM239.795 395.47c-12.613 37.023-19.827 76.557-19.827 117.913-0.19 200.236 161.584 362.009 361.945 362.135 56.853 0 110.313-13.302 158.133-36.398l117.846 104.421c-79.444 50.952-173.758 80.817-275.292 80.948-283.377 0.181-511.354-227.729-511.789-511.675-0.126-79.567 18.636-154.679 51.137-221.882l117.848 104.538zM388.576 690.020h-97.514v-249.057l72.23 64.070v0.689h0.815l117.72 104.418c0 0.564 0.123 0.94 0.123 1.509 0.753 53.898-30.369 80.069-93.374 78.37zM405.959 625.517c1.942-2.767 3.074-6.469 3.323-11.112 0.312-4.452 0.438-9.6 0.438-15.246 0.251-10.916-0.689-19.83-2.949-26.985-2.952-7.594-10.983-11.357-24.159-11.357h-19.325v74.043h15.31c7.842 0 13.865-0.683 18.072-2.19 4.397-1.573 7.468-3.953 9.29-7.153z" />

Before

Width:  |  Height:  |  Size: 19 KiB

After

Width:  |  Height:  |  Size: 19 KiB

Binary file not shown.

Binary file not shown.

View File

@ -1,6 +1,60 @@
{ {
"IcoMoonType": "selection", "IcoMoonType": "selection",
"icons": [ "icons": [
{
"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": 45,
"order": 924,
"prevSize": 24,
"code": 58820,
"name": "arrow_back"
},
"setIdx": 0,
"setId": 2,
"iconIdx": 45
},
{
"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": 152,
"order": 923,
"prevSize": 24,
"code": 58376,
"name": "navigate_before"
},
"setIdx": 0,
"setId": 2,
"iconIdx": 152
},
{ {
"icon": { "icon": {
"paths": [ "paths": [
@ -24,9 +78,9 @@
"code": 59403, "code": 59403,
"name": "public" "name": "public"
}, },
"setIdx": 0, "setIdx": 1,
"setId": 2, "setId": 1,
"iconIdx": 605 "iconIdx": 0
}, },
{ {
"icon": { "icon": {
@ -53,7 +107,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 0 "iconIdx": 1
}, },
{ {
"icon": { "icon": {
@ -80,7 +134,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 1 "iconIdx": 2
}, },
{ {
"icon": { "icon": {
@ -107,7 +161,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 2 "iconIdx": 3
}, },
{ {
"icon": { "icon": {
@ -134,7 +188,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 3 "iconIdx": 4
}, },
{ {
"icon": { "icon": {
@ -161,7 +215,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 4 "iconIdx": 5
}, },
{ {
"icon": { "icon": {
@ -188,7 +242,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 5 "iconIdx": 6
}, },
{ {
"icon": { "icon": {
@ -217,7 +271,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 6 "iconIdx": 7
}, },
{ {
"icon": { "icon": {
@ -244,7 +298,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 7 "iconIdx": 8
}, },
{ {
"icon": { "icon": {
@ -271,7 +325,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 8 "iconIdx": 9
}, },
{ {
"icon": { "icon": {
@ -300,7 +354,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 9 "iconIdx": 10
}, },
{ {
"icon": { "icon": {
@ -329,7 +383,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 10 "iconIdx": 11
}, },
{ {
"icon": { "icon": {
@ -358,7 +412,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 11 "iconIdx": 12
}, },
{ {
"icon": { "icon": {
@ -387,7 +441,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 12 "iconIdx": 13
}, },
{ {
"icon": { "icon": {
@ -416,7 +470,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 13 "iconIdx": 14
}, },
{ {
"icon": { "icon": {
@ -442,7 +496,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 14 "iconIdx": 15
}, },
{ {
"icon": { "icon": {
@ -468,7 +522,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 15 "iconIdx": 16
}, },
{ {
"icon": { "icon": {
@ -494,7 +548,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 16 "iconIdx": 17
}, },
{ {
"icon": { "icon": {
@ -520,7 +574,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 17 "iconIdx": 18
}, },
{ {
"icon": { "icon": {
@ -546,7 +600,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 18 "iconIdx": 19
}, },
{ {
"icon": { "icon": {
@ -572,7 +626,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 19 "iconIdx": 20
}, },
{ {
"icon": { "icon": {
@ -598,7 +652,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 20 "iconIdx": 21
}, },
{ {
"icon": { "icon": {
@ -616,7 +670,7 @@
"attrs": [], "attrs": [],
"properties": { "properties": {
"id": 10, "id": 10,
"order": 900, "order": 922,
"ligatures": "expand_less", "ligatures": "expand_less",
"prevSize": 32, "prevSize": 32,
"code": 59679, "code": 59679,
@ -624,7 +678,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 21 "iconIdx": 22
}, },
{ {
"icon": { "icon": {
@ -650,7 +704,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 22 "iconIdx": 23
}, },
{ {
"icon": { "icon": {
@ -676,7 +730,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 23 "iconIdx": 24
}, },
{ {
"icon": { "icon": {
@ -702,7 +756,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 24 "iconIdx": 25
}, },
{ {
"icon": { "icon": {
@ -728,7 +782,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 25 "iconIdx": 26
}, },
{ {
"icon": { "icon": {
@ -754,7 +808,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 26 "iconIdx": 27
}, },
{ {
"icon": { "icon": {
@ -780,7 +834,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 27 "iconIdx": 28
}, },
{ {
"icon": { "icon": {
@ -806,7 +860,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 28 "iconIdx": 29
}, },
{ {
"icon": { "icon": {
@ -832,7 +886,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 29 "iconIdx": 30
}, },
{ {
"icon": { "icon": {
@ -858,7 +912,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 30 "iconIdx": 31
}, },
{ {
"icon": { "icon": {
@ -884,7 +938,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 31 "iconIdx": 32
}, },
{ {
"icon": { "icon": {
@ -910,7 +964,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 32 "iconIdx": 33
}, },
{ {
"icon": { "icon": {
@ -936,7 +990,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 33 "iconIdx": 34
}, },
{ {
"icon": { "icon": {
@ -962,7 +1016,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 34 "iconIdx": 35
}, },
{ {
"icon": { "icon": {
@ -988,7 +1042,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 35 "iconIdx": 36
}, },
{ {
"icon": { "icon": {
@ -1014,7 +1068,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 36 "iconIdx": 37
}, },
{ {
"icon": { "icon": {
@ -1040,7 +1094,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 37 "iconIdx": 38
}, },
{ {
"icon": { "icon": {
@ -1066,7 +1120,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 38 "iconIdx": 39
}, },
{ {
"icon": { "icon": {
@ -1092,7 +1146,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 39 "iconIdx": 40
}, },
{ {
"icon": { "icon": {
@ -1118,7 +1172,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 40 "iconIdx": 41
}, },
{ {
"icon": { "icon": {
@ -1144,7 +1198,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 41 "iconIdx": 42
}, },
{ {
"icon": { "icon": {
@ -1170,7 +1224,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 42 "iconIdx": 43
}, },
{ {
"icon": { "icon": {
@ -1199,7 +1253,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 43 "iconIdx": 44
}, },
{ {
"icon": { "icon": {
@ -1229,7 +1283,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 44 "iconIdx": 45
}, },
{ {
"icon": { "icon": {
@ -1259,7 +1313,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 45 "iconIdx": 46
}, },
{ {
"icon": { "icon": {
@ -1285,7 +1339,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 46 "iconIdx": 47
}, },
{ {
"icon": { "icon": {
@ -1311,7 +1365,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 47 "iconIdx": 48
}, },
{ {
"icon": { "icon": {
@ -1337,7 +1391,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 48 "iconIdx": 49
} }
], ],
"height": 1024, "height": 1024,

View File

@ -539,9 +539,11 @@
"tooltip": "Get access info about the meeting" "tooltip": "Get access info about the meeting"
}, },
"profileModal": { "profileModal": {
"conferenceSection": "Conference",
"displayName": "Display name", "displayName": "Display name",
"email": "Email", "email": "Email",
"header": "Settings", "header": "Settings",
"profileSection": "Profile",
"serverURL": "Server URL", "serverURL": "Server URL",
"startWithAudioMuted": "Start with audio muted", "startWithAudioMuted": "Start with audio muted",
"startWithVideoMuted": "Start with video muted" "startWithVideoMuted": "Start with video muted"

View File

@ -1,9 +1,6 @@
/* @flow */ /* @flow */
import { import { HIDE_APP_SETTINGS, SHOW_APP_SETTINGS } from './actionTypes';
HIDE_APP_SETTINGS,
SHOW_APP_SETTINGS
} from './actionTypes';
/** /**
* Redux-signals the request to open the app settings modal. * Redux-signals the request to open the app settings modal.

View File

@ -10,6 +10,16 @@ import { getProfile, updateProfile } from '../../base/profile';
*/ */
type Props = { type Props = {
/**
* The current aspect ratio of the screen.
*/
_aspectRatio: Symbol,
/**
* The default URL for when there is no custom URL set in the profile.
*/
_serverURL: string,
/** /**
* The current profile object. * The current profile object.
*/ */
@ -26,45 +36,13 @@ type Props = {
dispatch: Dispatch<*> dispatch: Dispatch<*>
}; };
/**
* The type of the React {@code Component} state of {@link AbstractAppSettings}.
*/
type State = {
/**
* The display name field value on the settings screen.
*/
displayName: string,
/**
* The email field value on the settings screen.
*/
email: string,
/**
* The server url field value on the settings screen.
*/
serverURL: string,
/**
* The start audio muted switch value on the settings screen.
*/
startWithAudioMuted: boolean,
/**
* The start video muted switch value on the settings screen.
*/
startWithVideoMuted: boolean
}
/** /**
* Base (abstract) class for container component rendering * Base (abstract) class for container component rendering
* the app settings page. * the app settings page.
* *
* @abstract * @abstract
*/ */
export class AbstractAppSettings extends Component<Props, State> { export class AbstractAppSettings extends Component<Props> {
/** /**
* Initializes a new {@code AbstractAppSettings} instance. * Initializes a new {@code AbstractAppSettings} instance.
* *
@ -76,38 +54,14 @@ export class AbstractAppSettings extends Component<Props, State> {
this._onChangeDisplayName = this._onChangeDisplayName.bind(this); this._onChangeDisplayName = this._onChangeDisplayName.bind(this);
this._onChangeEmail = this._onChangeEmail.bind(this); this._onChangeEmail = this._onChangeEmail.bind(this);
this._onChangeServerName = this._onChangeServerName.bind(this); this._onChangeServerURL = this._onChangeServerURL.bind(this);
this._onRequestClose = this._onRequestClose.bind(this); this._onRequestClose = this._onRequestClose.bind(this);
this._onSaveDisplayName = this._onSaveDisplayName.bind(this);
this._onSaveEmail = this._onSaveEmail.bind(this);
this._onSaveServerName = this._onSaveServerName.bind(this);
this._onStartAudioMutedChange this._onStartAudioMutedChange
= this._onStartAudioMutedChange.bind(this); = this._onStartAudioMutedChange.bind(this);
this._onStartVideoMutedChange this._onStartVideoMutedChange
= this._onStartVideoMutedChange.bind(this); = this._onStartVideoMutedChange.bind(this);
} }
/**
* Invokes React's {@link Component#componentWillReceiveProps()} to make
* sure we have the state Initialized on component mount.
*
* @inheritdoc
*/
componentWillMount() {
this._updateStateFromProps(this.props);
}
/**
* Implements React's {@link Component#componentWillReceiveProps()}. Invoked
* before this mounted component receives new props.
*
* @inheritdoc
* @param {Props} nextProps - New props component will receive.
*/
componentWillReceiveProps(nextProps: Props) {
this._updateStateFromProps(nextProps);
}
_onChangeDisplayName: (string) => void; _onChangeDisplayName: (string) => void;
/** /**
@ -118,7 +72,7 @@ export class AbstractAppSettings extends Component<Props, State> {
* @returns {void} * @returns {void}
*/ */
_onChangeDisplayName(text) { _onChangeDisplayName(text) {
this.setState({ this._updateProfile({
displayName: text displayName: text
}); });
} }
@ -133,12 +87,12 @@ export class AbstractAppSettings extends Component<Props, State> {
* @returns {void} * @returns {void}
*/ */
_onChangeEmail(text) { _onChangeEmail(text) {
this.setState({ this._updateProfile({
email: text email: text
}); });
} }
_onChangeServerName: (string) => void; _onChangeServerURL: (string) => void;
/** /**
* Handles the server name field value change. * Handles the server name field value change.
@ -147,8 +101,8 @@ export class AbstractAppSettings extends Component<Props, State> {
* @param {string} text - The server URL typed in the server field. * @param {string} text - The server URL typed in the server field.
* @returns {void} * @returns {void}
*/ */
_onChangeServerName(text) { _onChangeServerURL(text) {
this.setState({ this._updateProfile({
serverURL: text serverURL: text
}); });
} }
@ -156,7 +110,7 @@ export class AbstractAppSettings extends Component<Props, State> {
_onRequestClose: () => void; _onRequestClose: () => void;
/** /**
* Handles the hardware back button. * Handles the back button.
* *
* @returns {void} * @returns {void}
*/ */
@ -164,61 +118,6 @@ export class AbstractAppSettings extends Component<Props, State> {
this.props.dispatch(hideAppSettings()); this.props.dispatch(hideAppSettings());
} }
_onSaveDisplayName: () => void;
/**
* Handles the display name field onEndEditing.
*
* @protected
* @returns {void}
*/
_onSaveDisplayName() {
this._updateProfile({
displayName: this.state.displayName
});
}
_onSaveEmail: () => void;
/**
* Handles the email field onEndEditing.
*
* @protected
* @returns {void}
*/
_onSaveEmail() {
this._updateProfile({
email: this.state.email
});
}
_onSaveServerName: () => void;
/**
* Handles the server name field onEndEditing.
*
* @protected
* @returns {void}
*/
_onSaveServerName() {
let serverURL;
if (this.state.serverURL.endsWith('/')) {
serverURL = this.state.serverURL.substr(
0, this.state.serverURL.length - 1
);
} else {
serverURL = this.state.serverURL;
}
this._updateProfile({
defaultURL: serverURL
});
this.setState({
serverURL
});
}
_onStartAudioMutedChange: (boolean) => void; _onStartAudioMutedChange: (boolean) => void;
/** /**
@ -230,10 +129,6 @@ export class AbstractAppSettings extends Component<Props, State> {
* @returns {void} * @returns {void}
*/ */
_onStartAudioMutedChange(newValue) { _onStartAudioMutedChange(newValue) {
this.setState({
startWithAudioMuted: newValue
});
this._updateProfile({ this._updateProfile({
startWithAudioMuted: newValue startWithAudioMuted: newValue
}); });
@ -250,10 +145,6 @@ export class AbstractAppSettings extends Component<Props, State> {
* @returns {void} * @returns {void}
*/ */
_onStartVideoMutedChange(newValue) { _onStartVideoMutedChange(newValue) {
this.setState({
startWithVideoMuted: newValue
});
this._updateProfile({ this._updateProfile({
startWithVideoMuted: newValue startWithVideoMuted: newValue
}); });
@ -274,25 +165,6 @@ export class AbstractAppSettings extends Component<Props, State> {
...updateObject ...updateObject
})); }));
} }
_updateStateFromProps: (Object) => void;
/**
* Updates the component state when (new) props are received.
*
* @private
* @param {Object} props - The component's props.
* @returns {void}
*/
_updateStateFromProps(props) {
this.setState({
displayName: props._profile.displayName,
email: props._profile.email,
serverURL: props._profile.defaultURL,
startWithAudioMuted: props._profile.startWithAudioMuted,
startWithVideoMuted: props._profile.startWithVideoMuted
});
}
} }
/** /**
@ -304,8 +176,13 @@ export class AbstractAppSettings extends Component<Props, State> {
* @returns {Object} * @returns {Object}
*/ */
export function _mapStateToProps(state: Object) { export function _mapStateToProps(state: Object) {
const _serverURL = state['features/app'].app._getDefaultURL();
const _profile = getProfile(state);
return { return {
_profile: getProfile(state), _aspectRatio: state['features/base/aspect-ratio'].aspectRatio,
_serverURL,
_profile,
_visible: state['features/app-settings'].visible _visible: state['features/app-settings'].visible
}; };
} }

View File

@ -1,6 +1,7 @@
import React from 'react'; import React from 'react';
import { import {
Modal, Modal,
ScrollView,
Switch, Switch,
Text, Text,
TextInput, TextInput,
@ -11,10 +12,16 @@ import {
_mapStateToProps, _mapStateToProps,
AbstractAppSettings AbstractAppSettings
} from './AbstractAppSettings'; } from './AbstractAppSettings';
import BackButton from './BackButton';
import FormRow from './FormRow'; import FormRow from './FormRow';
import styles from './styles'; import FormSectionHeader from './FormSectionHeader';
import styles, { HEADER_PADDING } from './styles';
import { getSafetyOffset } from '../functions.native';
import { ASPECT_RATIO_NARROW } from '../../base/aspect-ratio';
import { translate } from '../../base/i18n'; import { translate } from '../../base/i18n';
import { isIPad } from '../../base/react';
/** /**
* The native container rendering the app settings page. * The native container rendering the app settings page.
@ -22,6 +29,16 @@ import { translate } from '../../base/i18n';
* @extends AbstractAppSettings * @extends AbstractAppSettings
*/ */
class AppSettings extends AbstractAppSettings { class AppSettings extends AbstractAppSettings {
/**
* Instantiates a new {@code AppSettings} instance.
*
* @inheritdoc
*/
constructor(props) {
super(props);
this._getSafetyPadding = this._getSafetyPadding.bind(this);
}
/** /**
* Implements React's {@link Component#render()}, renders the settings page. * Implements React's {@link Component#render()}, renders the settings page.
@ -30,49 +47,62 @@ class AppSettings extends AbstractAppSettings {
* @returns {ReactElement} * @returns {ReactElement}
*/ */
render() { render() {
const { t } = this.props; const { _profile, t } = this.props;
// FIXME: presentationStyle is added to workaround
// orientation issue on iOS
return ( return (
<Modal <Modal
animationType = 'slide' animationType = 'slide'
onRequestClose = { this._onRequestClose } onRequestClose = { this._onRequestClose }
presentationStyle = 'fullScreen' presentationStyle = 'overFullScreen'
style = { styles.modal } supportedOrientations = { [
'landscape',
'portrait'
] }
visible = { this.props._visible }> visible = { this.props._visible }>
<View style = { styles.headerContainer } > <View
style = { [
styles.headerContainer,
this._getSafetyPadding()
] } >
<BackButton
onPress = { this._onRequestClose }
style = { styles.settingsBackButton } />
<Text style = { [ styles.text, styles.headerTitle ] } > <Text style = { [ styles.text, styles.headerTitle ] } >
{ t('profileModal.header') } { t('profileModal.header') }
</Text> </Text>
</View> </View>
<View style = { styles.settingsContainer } > <ScrollView style = { styles.settingsContainer } >
<FormRow <FormSectionHeader
fieldSeparator = { true } i18nLabel = 'profileModal.profileSection' />
i18nLabel = 'profileModal.serverURL' >
<TextInput
autoCapitalize = 'none'
onChangeText = { this._onChangeServerName }
onEndEditing = { this._onSaveServerName }
placeholder = 'https://jitsi.example.com'
value = { this.state.serverURL } />
</FormRow>
<FormRow <FormRow
fieldSeparator = { true } fieldSeparator = { true }
i18nLabel = 'profileModal.displayName' > i18nLabel = 'profileModal.displayName' >
<TextInput <TextInput
onChangeText = { this._onChangeDisplayName } onChangeText = { this._onChangeDisplayName }
onEndEditing = { this._onSaveDisplayName }
placeholder = 'John Doe' placeholder = 'John Doe'
value = { this.state.displayName } /> value = { _profile.displayName } />
</FormRow> </FormRow>
<FormRow <FormRow
fieldSeparator = { true }
i18nLabel = 'profileModal.email' > i18nLabel = 'profileModal.email' >
<TextInput <TextInput
keyboardType = { 'email-address' } keyboardType = { 'email-address' }
onChangeText = { this._onChangeEmail } onChangeText = { this._onChangeEmail }
onEndEditing = { this._onSaveEmail }
placeholder = 'email@example.com' placeholder = 'email@example.com'
value = { this.state.email } /> value = { _profile.email } />
</FormRow>
<FormSectionHeader
i18nLabel = 'profileModal.conferenceSection' />
<FormRow
fieldSeparator = { true }
i18nLabel = 'profileModal.serverURL' >
<TextInput
autoCapitalize = 'none'
onChangeText = { this._onChangeServerURL }
placeholder = { this.props._serverURL }
value = { _profile.serverURL } />
</FormRow> </FormRow>
<FormRow <FormRow
fieldSeparator = { true } fieldSeparator = { true }
@ -81,7 +111,9 @@ class AppSettings extends AbstractAppSettings {
onValueChange = { onValueChange = {
this._onStartAudioMutedChange this._onStartAudioMutedChange
} }
value = { this.state.startWithAudioMuted } /> value = {
_profile.startWithAudioMuted
} />
</FormRow> </FormRow>
<FormRow <FormRow
i18nLabel = 'profileModal.startWithVideoMuted' > i18nLabel = 'profileModal.startWithVideoMuted' >
@ -89,12 +121,33 @@ class AppSettings extends AbstractAppSettings {
onValueChange = { onValueChange = {
this._onStartVideoMutedChange this._onStartVideoMutedChange
} }
value = { this.state.startWithVideoMuted } /> value = {
_profile.startWithVideoMuted
} />
</FormRow> </FormRow>
</View> </ScrollView>
</Modal> </Modal>
); );
} }
/**
* Calculates header safety padding for mobile devices.
* See comment in functions.js.
*
* @private
* @returns {Object}
*/
_getSafetyPadding() {
if (isIPad() || this.props._aspectRatio === ASPECT_RATIO_NARROW) {
const safeOffset = Math.max(getSafetyOffset(), HEADER_PADDING);
return {
paddingTop: safeOffset
};
}
return undefined;
}
} }
export default translate(connect(_mapStateToProps)(AppSettings)); export default translate(connect(_mapStateToProps)(AppSettings));

View File

@ -0,0 +1,56 @@
// @flow
import React, { Component } from 'react';
import { TouchableOpacity } from 'react-native';
import styles from './styles';
import { Icon } from '../../base/font-icons';
import { Platform } from '../../base/react';
/**
* The icon glyph to be used on a specific platform.
*/
const BACK_ICON = Platform.OS === 'android' ? 'arrow_back' : 'navigate_before';
/**
* The type of the React {@code Component} props of {@link BackButton}
*/
type Props = {
/**
* The action to be performed when the button is pressed.
*/
onPress: Function,
/**
* An external style object passed to the component.
*/
style: Object
};
/**
* A component rendering a back button that looks native on both platforms.
*/
export default class BackButton extends Component<Props> {
/**
* Implements React's {@link Component#render()}, renders the button.
*
* @inheritdoc
* @returns {ReactElement}
*/
render() {
return (
<TouchableOpacity
accessibilityLabel = { 'Back' }
onPress = { this.props.onPress }>
<Icon
name = { BACK_ICON }
style = { [
styles.backIcon,
this.props.style
] } />
</TouchableOpacity>
);
}
}

View File

@ -6,8 +6,11 @@ import {
View } from 'react-native'; View } from 'react-native';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import styles, { ANDROID_UNDERLINE_COLOR } from './styles'; import styles, { ANDROID_UNDERLINE_COLOR, CONTAINER_PADDING } from './styles';
import { getSafetyOffset } from '../functions';
import { ASPECT_RATIO_WIDE } from '../../base/aspect-ratio';
import { translate } from '../../base/i18n'; import { translate } from '../../base/i18n';
/** /**
@ -15,6 +18,11 @@ import { translate } from '../../base/i18n';
*/ */
type Props = { type Props = {
/**
* The current aspect ratio of the screen.
*/
_aspectRatio: Symbol,
/** /**
*/ */
children: Object, children: Object,
@ -40,7 +48,6 @@ type Props = {
* on a form. The component should have exactly one child component. * on a form. The component should have exactly one child component.
*/ */
class FormRow extends Component<Props> { class FormRow extends Component<Props> {
/** /**
* Initializes a new {@code FormRow} instance. * Initializes a new {@code FormRow} instance.
* *
@ -118,6 +125,7 @@ class FormRow extends Component<Props> {
/** /**
* Assembles the row style array based on the row's props. * Assembles the row style array based on the row's props.
* For padding, see comment in functions.js.
* *
* @private * @private
* @returns {Array<Object>} * @returns {Array<Object>}
@ -131,8 +139,33 @@ class FormRow extends Component<Props> {
rowStyle.push(styles.fieldSeparator); rowStyle.push(styles.fieldSeparator);
} }
if (this.props._aspectRatio === ASPECT_RATIO_WIDE) {
const safeOffset = Math.max(
getSafetyOffset() - CONTAINER_PADDING, 0
);
rowStyle.push({
marginLeft: safeOffset,
marginRight: safeOffset
});
}
return rowStyle; return rowStyle;
} }
} }
export default translate(connect()(FormRow)); /**
* Maps (parts of) the redux state to the React {@code Component} props of
* {@code FormRow}.
*
* @param {Object} state - The redux state.
* @protected
* @returns {Object}
*/
export function _mapStateToProps(state: Object) {
return {
_aspectRatio: state['features/base/aspect-ratio'].aspectRatio
};
}
export default translate(connect(_mapStateToProps)(FormRow));

View File

@ -0,0 +1,119 @@
/* @flow */
import React, { Component } from 'react';
import { Text, View } from 'react-native';
import { connect } from 'react-redux';
import styles, { CONTAINER_PADDING } from './styles';
import { getSafetyOffset } from '../functions';
import { ASPECT_RATIO_WIDE } from '../../base/aspect-ratio';
import { translate } from '../../base/i18n';
/**
* The type of the React {@code Component} props of {@link FormSectionHeader}
*/
type Props = {
/**
* The current aspect ratio of the screen.
*/
_aspectRatio: Symbol,
/**
* The i18n key of the text label of the section.
*/
i18nLabel: string,
/**
* An external style object passed to the component.
*/
style: Object,
/**
* Invoked to obtain translated strings.
*/
t: Function
}
/**
* Implements a React {@code Component} which renders
* a section header on a form. This calculates the available safe view as well.
*/
class FormSectionHeader extends Component<Props> {
/**
* Initializes a new {@code FormSectionHeader} instance.
*
* @param {Object} props - Component properties.
*/
constructor(props) {
super(props);
this._getSafetyMargin = this._getSafetyMargin.bind(this);
}
/**
* Implements React's {@link Component#render()}.
*
* @inheritdoc
* @override
* @returns {ReactElement}
*/
render() {
const { t } = this.props;
return (
<View
style = { [
styles.formSectionTitle,
this.props.style,
this._getSafetyMargin()
] } >
<Text>
{ t(this.props.i18nLabel) }
</Text>
</View>
);
}
_getSafetyMargin: () => Object;
/**
* Calculates the safety margin for this header.
* See comment in functions.js.
*
* @private
* @returns {Object}
*/
_getSafetyMargin() {
if (this.props._aspectRatio === ASPECT_RATIO_WIDE) {
const safeOffset = Math.max(
getSafetyOffset() - CONTAINER_PADDING, 0
);
return {
marginLeft: safeOffset,
marginRight: safeOffset
};
}
return undefined;
}
}
/**
* Maps (parts of) the redux state to the React {@code Component} props of
* {@code FormSectionHeader}.
*
* @param {Object} state - The redux state.
* @protected
* @returns {Object}
*/
export function _mapStateToProps(state: Object) {
return {
_aspectRatio: state['features/base/aspect-ratio'].aspectRatio
};
}
export default translate(connect(_mapStateToProps)(FormSectionHeader));

View File

@ -1,25 +1,45 @@
import { Platform } from 'react-native';
import { import {
BoxModel, BoxModel,
ColorPalette, ColorPalette,
createStyleSheet createStyleSheet
} from '../../base/styles'; } from '../../base/styles';
const LABEL_TAB = 300;
export const ANDROID_UNDERLINE_COLOR = 'transparent'; export const ANDROID_UNDERLINE_COLOR = 'transparent';
export const CONTAINER_PADDING = 2 * BoxModel.padding;
export const HEADER_COLOR = ColorPalette.blue;
export const HEADER_PADDING = BoxModel.padding;
const TEXT_SIZE = 17;
/** /**
* The styles of the React {@code Components} of the feature welcome including * The styles of the React {@code Components} of the feature
* {@code WelcomePage} and {@code BlankPage}. * {@code AppSettings}.
*/ */
export default createStyleSheet({ export default createStyleSheet({
/**
*The platform specific back button style.
*/
backIcon: {
alignSelf: 'center',
...Platform.select({
ios: {
alignSelf: 'center',
fontSize: 30
},
android: {
fontSize: 24,
padding: 8
}
})
},
/** /**
* Standardized style for a field container {@code View}. * Standardized style for a field container {@code View}.
*/ */
fieldContainer: { fieldContainer: {
flexDirection: 'row',
alignItems: 'center', alignItems: 'center',
flexDirection: 'row',
minHeight: 65 minHeight: 65
}, },
@ -27,16 +47,16 @@ export default createStyleSheet({
* Standard container for a {@code View} containing a field label. * Standard container for a {@code View} containing a field label.
*/ */
fieldLabelContainer: { fieldLabelContainer: {
flexDirection: 'row',
alignItems: 'center', alignItems: 'center',
width: LABEL_TAB flexDirection: 'row'
}, },
/** /**
* Field container style for all but last row {@code View}. * Field container style for all but last row {@code View}.
*/ */
fieldSeparator: { fieldSeparator: {
borderBottomWidth: 1 borderBottomWidth: 1,
borderColor: 'rgba(0, 0, 0, 0.1)'
}, },
/** /**
@ -44,26 +64,48 @@ export default createStyleSheet({
* field values (the actual field). * field values (the actual field).
*/ */
fieldValueContainer: { fieldValueContainer: {
alignItems: 'center',
flex: 1, flex: 1,
justifyContent: 'flex-end',
flexDirection: 'row', flexDirection: 'row',
alignItems: 'center' justifyContent: 'flex-end'
},
formSectionTitle: {
backgroundColor: 'rgba(0, 0, 0, 0.1)',
marginTop: 5,
padding: 5
}, },
/** /**
* Page header {@code View}. * Page header {@code View}.
*/ */
headerContainer: { headerContainer: {
backgroundColor: ColorPalette.blue,
flexDirection: 'row',
alignItems: 'center', alignItems: 'center',
padding: 2 * BoxModel.margin backgroundColor: HEADER_COLOR,
flexDirection: 'row',
justifyContent: 'flex-start',
padding: HEADER_PADDING
}, },
/** /**
* The title {@code Text} of the header. * The title {@code Text} of the header.
*/ */
headerTitle: { headerTitle: {
color: ColorPalette.white,
fontSize: 24
},
/**
* Style of the scrollview to be able to scroll the content.
*/
scrollView: {
flex: 1
},
/**
* The back button style on the settings screen.
*/
settingsBackButton: {
color: ColorPalette.white, color: ColorPalette.white,
fontSize: 25 fontSize: 25
}, },
@ -76,7 +118,8 @@ export default createStyleSheet({
flex: 1, flex: 1,
flexDirection: 'column', flexDirection: 'column',
margin: 0, margin: 0,
padding: 2 * BoxModel.padding padding: CONTAINER_PADDING,
paddingTop: 0
}, },
/** /**
@ -84,15 +127,15 @@ export default createStyleSheet({
*/ */
text: { text: {
color: ColorPalette.black, color: ColorPalette.black,
fontSize: 20 fontSize: TEXT_SIZE
}, },
/** /**
* Standard text input field style. * Standard text input field style.
*/ */
textInputField: { textInputField: {
fontSize: 20,
flex: 1, flex: 1,
fontSize: TEXT_SIZE,
textAlign: 'right' textAlign: 'right'
} }
}); });

View File

@ -0,0 +1,28 @@
// @flow
import { isIPhoneX, Platform } from '../base/react';
const IPHONE_OFFSET = 20;
const IPHONEX_OFFSET = 44;
/**
* Determines the offset to be used for the device.
* This uses a custom implementation to minimize empty area around screen,
* especially on iPhone X.
*
* @returns {number}
*/
export function getSafetyOffset() {
if (Platform.OS === 'android') {
/* Android doesn't need offset, except the Essential phone. Should be
* addressed later with a generic solution.
*/
return 0;
}
if (isIPhoneX()) {
return IPHONEX_OFFSET;
}
return IPHONE_OFFSET;
}

View File

@ -1,5 +1,4 @@
export * from './actions'; export * from './actions';
export * from './components'; export * from './components';
export * from './functions';
import './reducer'; import './reducer';

View File

@ -0,0 +1,37 @@
/* @flow */
import { hideAppSettings } from './actions';
import { SET_ROOM } from '../base/conference';
import { MiddlewareRegistry } from '../base/redux';
/**
* The Redux middleware to trigger settings screen show or hide
* when necessary.
*
* @param {Store} store - The Redux store.
* @returns {Function}
*/
MiddlewareRegistry.register(store => next => action => {
switch (action.type) {
case SET_ROOM:
return _closeAppSettings(store, next, action);
}
return next(action);
});
/**
* Hides the settings screen.
*
* @param {Store} store - The redux store.
* @param {Dispatch} next - The redux dispatch function.
* @param {Action} action - The redux action.
* @private
* @returns {Object} The new state.
*/
function _closeAppSettings(store, next, action) {
store.dispatch(hideAppSettings());
return next(action);
}

View File

@ -179,6 +179,8 @@ export class AbstractApp extends Component {
* @returns {void} * @returns {void}
*/ */
componentWillReceiveProps(nextProps) { componentWillReceiveProps(nextProps) {
const currentProps = this.props;
this.init.then(() => { this.init.then(() => {
// The consumer of this AbstractApp did not provide a redux store. // The consumer of this AbstractApp did not provide a redux store.
if (typeof nextProps.store === 'undefined' if (typeof nextProps.store === 'undefined'
@ -189,7 +191,7 @@ export class AbstractApp extends Component {
// its own internal redux store. If the consumer did not // its own internal redux store. If the consumer did not
// provide a redux store before, then this instance is // provide a redux store before, then this instance is
// using its own internal redux store already. // using its own internal redux store already.
&& typeof this.props.store !== 'undefined') { && typeof currentProps.store !== 'undefined') {
this.setState({ this.setState({
store: this._maybeCreateStore(nextProps) store: this._maybeCreateStore(nextProps)
}); });
@ -199,11 +201,11 @@ export class AbstractApp extends Component {
let { url } = nextProps; let { url } = nextProps;
url = toURLString(url); url = toURLString(url);
if (toURLString(this.props.url) !== url if (toURLString(currentProps.url) !== url
// XXX Refer to the implementation of loadURLObject: in // XXX Refer to the implementation of loadURLObject: in
// ios/sdk/src/JitsiMeetView.m for further information. // ios/sdk/src/JitsiMeetView.m for further information.
|| this.props.timestamp !== nextProps.timestamp) { || currentProps.timestamp !== nextProps.timestamp) {
this._openURL(url || this._getDefaultURL()); this._openURL(url || this._getDefaultURL());
} }
}); });
@ -373,11 +375,11 @@ export class AbstractApp extends Component {
} }
} }
const profileDefaultURL = getProfile( const profileServerURL = getProfile(
this._getStore().getState() this._getStore().getState()
).defaultURL; ).serverURL;
return this.props.defaultURL || profileDefaultURL || DEFAULT_URL; return this.props.defaultURL || profileServerURL || DEFAULT_URL;
} }
/** /**

View File

@ -1,6 +1,60 @@
{ {
"IcoMoonType": "selection", "IcoMoonType": "selection",
"icons": [ "icons": [
{
"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": 45,
"order": 924,
"prevSize": 24,
"code": 58820,
"name": "arrow_back"
},
"setIdx": 0,
"setId": 2,
"iconIdx": 45
},
{
"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": 152,
"order": 923,
"prevSize": 24,
"code": 58376,
"name": "navigate_before"
},
"setIdx": 0,
"setId": 2,
"iconIdx": 152
},
{ {
"icon": { "icon": {
"paths": [ "paths": [
@ -24,9 +78,9 @@
"code": 59403, "code": 59403,
"name": "public" "name": "public"
}, },
"setIdx": 0, "setIdx": 1,
"setId": 2, "setId": 1,
"iconIdx": 605 "iconIdx": 0
}, },
{ {
"icon": { "icon": {
@ -53,7 +107,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 0 "iconIdx": 1
}, },
{ {
"icon": { "icon": {
@ -80,7 +134,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 1 "iconIdx": 2
}, },
{ {
"icon": { "icon": {
@ -107,7 +161,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 2 "iconIdx": 3
}, },
{ {
"icon": { "icon": {
@ -134,7 +188,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 3 "iconIdx": 4
}, },
{ {
"icon": { "icon": {
@ -161,7 +215,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 4 "iconIdx": 5
}, },
{ {
"icon": { "icon": {
@ -188,7 +242,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 5 "iconIdx": 6
}, },
{ {
"icon": { "icon": {
@ -217,7 +271,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 6 "iconIdx": 7
}, },
{ {
"icon": { "icon": {
@ -244,7 +298,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 7 "iconIdx": 8
}, },
{ {
"icon": { "icon": {
@ -271,7 +325,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 8 "iconIdx": 9
}, },
{ {
"icon": { "icon": {
@ -300,7 +354,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 9 "iconIdx": 10
}, },
{ {
"icon": { "icon": {
@ -329,7 +383,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 10 "iconIdx": 11
}, },
{ {
"icon": { "icon": {
@ -358,7 +412,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 11 "iconIdx": 12
}, },
{ {
"icon": { "icon": {
@ -387,7 +441,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 12 "iconIdx": 13
}, },
{ {
"icon": { "icon": {
@ -416,7 +470,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 13 "iconIdx": 14
}, },
{ {
"icon": { "icon": {
@ -442,7 +496,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 14 "iconIdx": 15
}, },
{ {
"icon": { "icon": {
@ -468,7 +522,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 15 "iconIdx": 16
}, },
{ {
"icon": { "icon": {
@ -494,7 +548,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 16 "iconIdx": 17
}, },
{ {
"icon": { "icon": {
@ -520,7 +574,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 17 "iconIdx": 18
}, },
{ {
"icon": { "icon": {
@ -546,7 +600,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 18 "iconIdx": 19
}, },
{ {
"icon": { "icon": {
@ -572,7 +626,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 19 "iconIdx": 20
}, },
{ {
"icon": { "icon": {
@ -598,7 +652,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 20 "iconIdx": 21
}, },
{ {
"icon": { "icon": {
@ -616,7 +670,7 @@
"attrs": [], "attrs": [],
"properties": { "properties": {
"id": 10, "id": 10,
"order": 900, "order": 922,
"ligatures": "expand_less", "ligatures": "expand_less",
"prevSize": 32, "prevSize": 32,
"code": 59679, "code": 59679,
@ -624,7 +678,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 21 "iconIdx": 22
}, },
{ {
"icon": { "icon": {
@ -650,7 +704,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 22 "iconIdx": 23
}, },
{ {
"icon": { "icon": {
@ -676,7 +730,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 23 "iconIdx": 24
}, },
{ {
"icon": { "icon": {
@ -702,7 +756,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 24 "iconIdx": 25
}, },
{ {
"icon": { "icon": {
@ -728,7 +782,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 25 "iconIdx": 26
}, },
{ {
"icon": { "icon": {
@ -754,7 +808,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 26 "iconIdx": 27
}, },
{ {
"icon": { "icon": {
@ -780,7 +834,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 27 "iconIdx": 28
}, },
{ {
"icon": { "icon": {
@ -806,7 +860,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 28 "iconIdx": 29
}, },
{ {
"icon": { "icon": {
@ -832,7 +886,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 29 "iconIdx": 30
}, },
{ {
"icon": { "icon": {
@ -858,7 +912,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 30 "iconIdx": 31
}, },
{ {
"icon": { "icon": {
@ -884,7 +938,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 31 "iconIdx": 32
}, },
{ {
"icon": { "icon": {
@ -910,7 +964,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 32 "iconIdx": 33
}, },
{ {
"icon": { "icon": {
@ -936,7 +990,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 33 "iconIdx": 34
}, },
{ {
"icon": { "icon": {
@ -962,7 +1016,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 34 "iconIdx": 35
}, },
{ {
"icon": { "icon": {
@ -988,7 +1042,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 35 "iconIdx": 36
}, },
{ {
"icon": { "icon": {
@ -1014,7 +1068,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 36 "iconIdx": 37
}, },
{ {
"icon": { "icon": {
@ -1040,7 +1094,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 37 "iconIdx": 38
}, },
{ {
"icon": { "icon": {
@ -1066,7 +1120,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 38 "iconIdx": 39
}, },
{ {
"icon": { "icon": {
@ -1092,7 +1146,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 39 "iconIdx": 40
}, },
{ {
"icon": { "icon": {
@ -1118,7 +1172,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 40 "iconIdx": 41
}, },
{ {
"icon": { "icon": {
@ -1144,7 +1198,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 41 "iconIdx": 42
}, },
{ {
"icon": { "icon": {
@ -1170,7 +1224,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 42 "iconIdx": 43
}, },
{ {
"icon": { "icon": {
@ -1199,7 +1253,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 43 "iconIdx": 44
}, },
{ {
"icon": { "icon": {
@ -1229,7 +1283,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 44 "iconIdx": 45
}, },
{ {
"icon": { "icon": {
@ -1259,7 +1313,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 45 "iconIdx": 46
}, },
{ {
"icon": { "icon": {
@ -1285,7 +1339,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 46 "iconIdx": 47
}, },
{ {
"icon": { "icon": {
@ -1311,7 +1365,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 47 "iconIdx": 48
}, },
{ {
"icon": { "icon": {
@ -1337,7 +1391,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 48 "iconIdx": 49
} }
], ],
"height": 1024, "height": 1024,

View File

@ -2,7 +2,10 @@
import { PROFILE_UPDATED } from './actionTypes'; import { PROFILE_UPDATED } from './actionTypes';
import MiddlewareRegistry from '../redux/MiddlewareRegistry'; import MiddlewareRegistry from '../redux/MiddlewareRegistry';
import { participantUpdated } from '../participants'; import {
getLocalParticipant,
participantUpdated
} from '../participants';
import { getProfile } from '../profile'; import { getProfile } from '../profile';
import { toState } from '../redux'; import { toState } from '../redux';
@ -31,13 +34,11 @@ MiddlewareRegistry.register(store => next => action => {
* @returns {void} * @returns {void}
*/ */
function _updateLocalParticipant(store) { function _updateLocalParticipant(store) {
const localParticipant = getLocalParticipant(toState(store));
const profile = getProfile(toState(store)); const profile = getProfile(toState(store));
const newLocalParticipant = { localParticipant.email = profile.email;
email: profile.email, localParticipant.name = profile.displayName;
local: true,
name: profile.displayName
};
store.dispatch(participantUpdated(newLocalParticipant)); store.dispatch(participantUpdated(localParticipant));
} }

View File

@ -0,0 +1,37 @@
// @flow
import { Dimensions } from 'react-native';
import Platform from './Platform';
const IPHONEX_HEIGHT = 812;
const IPHONEX_WIDTH = 375;
/**
* Determines if the device is an iPad or not.
*
* @returns {boolean}
*/
export function isIPad() {
const { height, width } = Dimensions.get('window');
return Platform.OS === 'ios' && (
Math.max(height, width)
/ Math.min(height, width)) < 1.6;
}
/**
* Determines if it's an iPhone X or not.
*
* @returns {boolean}
*/
export function isIPhoneX() {
const { height, width } = Dimensions.get('window');
return (
Platform.OS === 'ios'
&& ((height === IPHONEX_HEIGHT
&& width === IPHONEX_WIDTH)
|| (height === IPHONEX_WIDTH
&& width === IPHONEX_HEIGHT))
);
}