haskal
/
jiti-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
css/_font.scss
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";
} }

BIN
fonts/jitsi.eot
View File

Binary file not shown.

2
fonts/jitsi.svg
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" />

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 19 KiB

After

Width:  |  Height:  |  Size: 19 KiB

BIN
fonts/jitsi.ttf
View File

Binary file not shown.

BIN
fonts/jitsi.woff
View File

Binary file not shown.

160
fonts/selection.json
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,

2
lang/main.json
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"

5
react/features/app-settings/actions.js
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.

171
react/features/app-settings/components/AbstractAppSettings.js
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
}; };
} }

101
react/features/app-settings/components/AppSettings.native.js
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));

56
react/features/app-settings/components/BackButton.native.js Normal file
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>
);
}
}

39
react/features/app-settings/components/FormRow.native.js
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));

119
react/features/app-settings/components/FormSectionHeader.native.js Normal file
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));

75
react/features/app-settings/components/styles.js
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'
} }
}); });

28
react/features/app-settings/functions.native.js Normal file
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;
}

0
react/features/app-settings/functions.js → react/features/app-settings/functions.web.js
View File

1
react/features/app-settings/index.js
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';

37
react/features/app-settings/middleware.js Normal file
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);
}

14
react/features/app/components/AbstractApp.js
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;
} }
/** /**

160
react/features/base/font-icons/jitsi.json
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,

15
react/features/base/profile/middleware.js
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));
} }

37
react/features/base/react/functions.native.js Normal file
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))
);
}