Skip to content

Commit 3f4f755

Browse files
author
Thomas Belin
committed
Merge branch 'dev' into new-navigation
2 parents 728e82e + 60ad052 commit 3f4f755

File tree

18 files changed

+198
-115
lines changed

18 files changed

+198
-115
lines changed

‎.github/workflows/jira-lint-and-link.yml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ jobs:
88
if: ${{ github.actor != 'dependabot[bot]' }}
99
runs-on: ubuntu-latest
1010
steps:
11-
- uses: cakeinpanic/[email protected].0
11+
- uses: cakeinpanic/[email protected].1
1212
name: jira-description-action
1313
with:
1414
github-token: ${{ secrets.GITHUB_TOKEN }}

‎src/page/index.ejs

Lines changed: 65 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,71 @@
2424
</head>
2525

2626
<body>
27-
<main id="wire-app"></main>
27+
<main id="wire-app">
28+
<style>
29+
body {
30+
margin: 0;
31+
}
32+
33+
#loader-root {
34+
align-items: center;
35+
background-color: #fafafa;
36+
color: #676b71;
37+
display: flex;
38+
flex-direction: column;
39+
height: 100%;
40+
justify-content: center;
41+
position: absolute;
42+
width: 100%;
43+
}
44+
45+
.loading-spinner {
46+
width: 24px;
47+
height: 24px;
48+
border: 3px solid #000;
49+
border-bottom-color: transparent;
50+
border-radius: 50%;
51+
display: inline-block;
52+
box-sizing: border-box;
53+
animation: rotation 1s linear infinite;
54+
}
55+
56+
#loading-message {
57+
display: none;
58+
margin-top: 20px;
59+
padding-inline: 16px;
60+
}
61+
62+
#loading-message p {
63+
color: #676B71;
64+
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
65+
font-size: 12px;
66+
line-height: 14px;
67+
margin: 0;
68+
text-align: center;
69+
}
70+
71+
#loading-message.visible {
72+
display: block;
73+
}
74+
75+
@keyframes rotation {
76+
0% {
77+
transform: rotate(0deg);
78+
}
79+
100% {
80+
transform: rotate(360deg);
81+
}
82+
}
83+
</style>
84+
85+
<div id="loader-root">
86+
<div class="loading-spinner"></div>
87+
<div id="loading-message"></div>
88+
</div>
89+
</main>
90+
91+
<script src="./min/loader.js?<%= VERSION %>"></script>
2892
<script src="./config.js?<%= VERSION %>"></script>
2993
<script src="./min/dexie.js?<%= VERSION %>"></script>
3094
<script src="./min/vendor.js?<%= VERSION %>"></script>

‎src/page/loader.js

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
/*
2+
* Wire
3+
* Copyright (C) 2024 Wire Swiss GmbH
4+
*
5+
* This program is free software: you can redistribute it and/or modify
6+
* it under the terms of the GNU General Public License as published by
7+
* the Free Software Foundation, either version 3 of the License, or
8+
* (at your option) any later version.
9+
*
10+
* This program is distributed in the hope that it will be useful,
11+
* but WITHOUT ANY WARRANTY; without even the implied warranty of
12+
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
13+
* GNU General Public License for more details.
14+
*
15+
* You should have received a copy of the GNU General Public License
16+
* along with this program. If not, see http://www.gnu.org/licenses/.
17+
*
18+
*/
19+
20+
const HALF_MINUTE_IN_MS = 30000;
21+
22+
const translations = {
23+
de: `<p>Laden von Wire dauert länger als erwartet.</p><p>Bitte überprüfen Sie Ihre Internetverbindung.</p>`,
24+
en: `<p>Loading Wire takes longer than expected.</p><p>Please check your internet connection.</p>`,
25+
};
26+
27+
const userLang = navigator.language;
28+
29+
setTimeout(() => {
30+
const loadingMessage = document.getElementById('loading-message');
31+
32+
if (!loadingMessage) {
33+
return;
34+
}
35+
36+
// TODO: If there will be more translations, we have to change this functionality..
37+
if (userLang.startsWith('de')) {
38+
loadingMessage.innerHTML = translations['de'];
39+
} else {
40+
loadingMessage.innerHTML = translations['en'];
41+
}
42+
43+
loadingMessage.classList.add('visible');
44+
}, HALF_MINUTE_IN_MS);

‎src/script/auth/component/AccountForm.tsx

Lines changed: 3 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ import {AnyAction, Dispatch} from 'redux';
2727
import {ValidationUtil} from '@wireapp/commons';
2828
import {Button, Checkbox, CheckboxLabel, Form, Input, Small} from '@wireapp/react-ui-kit';
2929

30-
import {KEY} from 'Util/KeyboardUtil';
30+
import {handleEnterDown} from 'Util/KeyboardUtil';
3131
import {getLogger} from 'Util/Logger';
3232

3333
import {Exception} from './Exception';
@@ -170,11 +170,7 @@ const AccountFormComponent = ({account, ...props}: Props & ConnectedProps & Disp
170170
value={registrationData.name}
171171
autoComplete="section-create-team username"
172172
placeholder={_(accountFormStrings.namePlaceholder)}
173-
onKeyDown={(event: React.KeyboardEvent<HTMLInputElement>) => {
174-
if (event.key === KEY.ENTER) {
175-
inputs.email.current?.focus();
176-
}
177-
}}
173+
onKeyDown={event => handleEnterDown(event, () => inputs.email.current?.focus())}
178174
maxLength={64}
179175
minLength={2}
180176
pattern=".{2,64}"
@@ -199,11 +195,7 @@ const AccountFormComponent = ({account, ...props}: Props & ConnectedProps & Disp
199195
? accountFormStrings.emailPersonalPlaceholder
200196
: accountFormStrings.emailTeamPlaceholder,
201197
)}
202-
onKeyDown={(event: React.KeyboardEvent<HTMLInputElement>) => {
203-
if (event.key === KEY.ENTER) {
204-
inputs.password.current?.focus();
205-
}
206-
}}
198+
onKeyDown={event => handleEnterDown(event, () => inputs.password.current?.focus())}
207199
maxLength={128}
208200
type="email"
209201
required

‎src/script/auth/page/EntropyContainer.tsx

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ import {useIntl} from 'react-intl';
2323

2424
import {Button, CheckRoundIcon, ContainerSM, H1, Muted, Text} from '@wireapp/react-ui-kit';
2525

26-
import {KEY} from 'Util/KeyboardUtil';
26+
import {handleEnterDown} from 'Util/KeyboardUtil';
2727

2828
import {setEntropyStrings} from '../../strings';
2929
import {EntropyData} from '../../util/Entropy';
@@ -78,11 +78,7 @@ const EntropyContainer = ({onSetEntropy, containerSize = 400}: Props) => {
7878
css={{width: '70%'}}
7979
onClick={() => forwardEntropy(entropy.entropyData)}
8080
data-uie-name="do-entropy-confirm"
81-
onKeyDown={(event: React.KeyboardEvent) => {
82-
if (event.key === KEY.ENTER) {
83-
forwardEntropy(entropy.entropyData);
84-
}
85-
}}
81+
onKeyDown={event => handleEnterDown(event, () => forwardEntropy(entropy.entropyData))}
8682
>
8783
{_(setEntropyStrings.continue)}
8884
</Button>

‎src/script/auth/page/HistoryInfo.tsx

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ import {AnyAction, Dispatch} from 'redux';
2727

2828
import {Button, ContainerXS, H1, Link, Paragraph} from '@wireapp/react-ui-kit';
2929

30-
import {KEY} from 'Util/KeyboardUtil';
30+
import {handleEnterDown} from 'Util/KeyboardUtil';
3131

3232
import {Page} from './Page';
3333

@@ -93,11 +93,7 @@ const HistoryInfoComponent = ({
9393
type="button"
9494
onClick={onContinue}
9595
data-uie-name="do-history-confirm"
96-
onKeyDown={(event: React.KeyboardEvent) => {
97-
if (event.key === KEY.ENTER) {
98-
onContinue();
99-
}
100-
}}
96+
onKeyDown={event => handleEnterDown(event, onContinue)}
10197
>
10298
{_(historyInfoStrings.ok)}
10399
</Button>

‎src/script/auth/page/OAuthPermissions.tsx

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ import {
4343
import {Icon} from 'Components/Icon';
4444
import {AssetRemoteData} from 'src/script/assets/AssetRemoteData';
4545
import {AssetRepository} from 'src/script/assets/AssetRepository';
46-
import {handleKeyDown, KEY} from 'Util/KeyboardUtil';
46+
import {handleEscDown, handleKeyDown} from 'Util/KeyboardUtil';
4747
import {loadDataUrl} from 'Util/util';
4848

4949
import {
@@ -213,11 +213,7 @@ const OAuthPermissionsComponent = ({
213213
type="button"
214214
onClick={onCancel}
215215
data-uie-name="do-oauth-cancel"
216-
onKeyDown={(event: React.KeyboardEvent) => {
217-
if (event.key === KEY.ESC) {
218-
onCancel();
219-
}
220-
}}
216+
onKeyDown={event => handleEscDown(event, onCancel)}
221217
>
222218
{_(oauthStrings.cancel)}
223219
</Button>

‎src/script/calling/CallingRepository.ts

Lines changed: 9 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,6 @@ import {EventSource} from '../event/EventSource';
8282
import type {MediaDevicesHandler} from '../media/MediaDevicesHandler';
8383
import type {MediaStreamHandler} from '../media/MediaStreamHandler';
8484
import {MediaType} from '../media/MediaType';
85-
import {applyBlur} from '../media/VideoBackgroundBlur';
8685
import {APIClient} from '../service/APIClientSingleton';
8786
import {Core} from '../service/CoreSingleton';
8887
import {TeamState} from '../team/TeamState';
@@ -131,6 +130,7 @@ export class CallingRepository {
131130
private readonly acceptVersionWarning: (conversationId: QualifiedId) => void;
132131
private readonly callLog: string[];
133132
private readonly logger: Logger;
133+
private enableBackgroundBlur = false;
134134
private avsVersion: number = 0;
135135
private incomingCallCallback: (call: Call) => void;
136136
private isReady: boolean = false;
@@ -276,13 +276,8 @@ export class CallingRepository {
276276
if (!videoFeed) {
277277
return;
278278
}
279-
let newVideoFeed = videoFeed;
280-
if (enable) {
281-
const blurredVideoStream = await applyBlur(videoFeed);
282-
// Keep a reference to the blurred stream in order to release it when the blur is disabled
283-
selfParticipant.blurredVideoStream(blurredVideoStream);
284-
newVideoFeed = blurredVideoStream.stream;
285-
}
279+
this.enableBackgroundBlur = enable;
280+
const newVideoFeed = enable ? ((await selfParticipant.setBlurredBackground(true)) as MediaStream) : videoFeed;
286281
this.changeMediaSource(newVideoFeed, MediaType.VIDEO, false);
287282
}
288283

@@ -530,10 +525,12 @@ export class CallingRepository {
530525
private async warmupMediaStreams(call: Call, audio: boolean, camera: boolean): Promise<boolean> {
531526
// if it's a video call we query the video user media in order to display the video preview
532527
try {
528+
const selfParticipant = call.getSelfParticipant();
533529
camera = this.teamState.isVideoCallingEnabled() ? camera : false;
534530
const mediaStream = await this.getMediaStream({audio, camera}, call.isGroupOrConference);
535531
if (call.state() !== CALL_STATE.NONE) {
536-
call.getSelfParticipant().updateMediaStream(mediaStream, true);
532+
selfParticipant.updateMediaStream(mediaStream, true);
533+
await selfParticipant.setBlurredBackground(this.enableBackgroundBlur);
537534
if (camera) {
538535
call.getSelfParticipant().videoState(VIDEO_STATE.STARTED);
539536
}
@@ -1780,8 +1777,9 @@ export class CallingRepository {
17801777
}
17811778
const mediaStream = await this.getMediaStream(missingStreams, call.isGroupOrConference);
17821779
this.mediaStreamQuery = undefined;
1783-
const newStream = selfParticipant.updateMediaStream(mediaStream, true);
1784-
return newStream;
1780+
selfParticipant.updateMediaStream(mediaStream, true);
1781+
await selfParticipant.setBlurredBackground(this.enableBackgroundBlur);
1782+
return selfParticipant.getMediaStream();
17851783
} catch (error) {
17861784
this.mediaStreamQuery = undefined;
17871785
this.logger.warn('Could not get mediaStream for call', error);

0 commit comments

Comments
 (0)