mirror of
https://github.com/element-hq/element-web
synced 2024-10-23 11:15:47 +03:00
Merge branch 'develop' of github.com:matrix-org/matrix-react-sdk into t3chguy/fix/17021
Conflicts: res/css/structures/_SpaceRoomView.scss src/components/structures/SpaceRoomView.tsx
This commit is contained in:
Michael Telatynski
commit
a4f02937cb
61 changed files with 1604 additions and 705 deletions
1
.gitignore
vendored
1
.gitignore
vendored
|
|
@ -2,6 +2,7 @@
|
|||
/*.log
|
||||
package-lock.json
|
||||
|
||||
/coverage
|
||||
/node_modules
|
||||
/lib
|
||||
|
||||
|
|
|
|||
16
package.json
16
package.json
|
|
@ -23,9 +23,7 @@
|
|||
"package.json"
|
||||
],
|
||||
"bin": {
|
||||
"reskindex": "scripts/reskindex.js",
|
||||
"matrix-gen-i18n": "scripts/gen-i18n.js",
|
||||
"matrix-prune-i18n": "scripts/prune-i18n.js"
|
||||
"reskindex": "scripts/reskindex.js"
|
||||
},
|
||||
"main": "./src/index.js",
|
||||
"matrix_src_main": "./src/index.js",
|
||||
|
|
@ -35,7 +33,7 @@
|
|||
"prepublishOnly": "yarn build",
|
||||
"i18n": "matrix-gen-i18n",
|
||||
"prunei18n": "matrix-prune-i18n",
|
||||
"diff-i18n": "cp src/i18n/strings/en_EN.json src/i18n/strings/en_EN_orig.json && ./scripts/gen-i18n.js && node scripts/compare-file.js src/i18n/strings/en_EN_orig.json src/i18n/strings/en_EN.json",
|
||||
"diff-i18n": "cp src/i18n/strings/en_EN.json src/i18n/strings/en_EN_orig.json && matrix-gen-i18n && matrix-compare-i18n-files src/i18n/strings/en_EN_orig.json src/i18n/strings/en_EN.json",
|
||||
"reskindex": "node scripts/reskindex.js -h header",
|
||||
"reskindex:watch": "node scripts/reskindex.js -h header -w",
|
||||
"rethemendex": "res/css/rethemendex.sh",
|
||||
|
|
@ -51,7 +49,8 @@
|
|||
"lint:types": "tsc --noEmit --jsx react",
|
||||
"lint:style": "stylelint 'res/css/**/*.scss'",
|
||||
"test": "jest",
|
||||
"test:e2e": "./test/end-to-end-tests/run.sh --app-url http://localhost:8080"
|
||||
"test:e2e": "./test/end-to-end-tests/run.sh --app-url http://localhost:8080",
|
||||
"coverage": "yarn test --coverage"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.12.5",
|
||||
|
|
@ -160,6 +159,7 @@
|
|||
"jest-fetch-mock": "^3.0.3",
|
||||
"matrix-mock-request": "^1.2.3",
|
||||
"matrix-react-test-utils": "^0.2.2",
|
||||
"matrix-web-i18n": "github:matrix-org/matrix-web-i18n",
|
||||
"olm": "https://packages.matrix.org/npm/olm/olm-3.2.1.tgz",
|
||||
"react-test-renderer": "^16.14.0",
|
||||
"rimraf": "^3.0.2",
|
||||
|
|
@ -189,6 +189,12 @@
|
|||
},
|
||||
"transformIgnorePatterns": [
|
||||
"/node_modules/(?!matrix-js-sdk).+$"
|
||||
],
|
||||
"collectCoverageFrom": [
|
||||
"<rootDir>/src/**/*.{js,ts,tsx}"
|
||||
],
|
||||
"coverageReporters": [
|
||||
"text"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -250,6 +250,8 @@
|
|||
@import "./views/toasts/_AnalyticsToast.scss";
|
||||
@import "./views/toasts/_NonUrgentEchoFailureToast.scss";
|
||||
@import "./views/verification/_VerificationShowSas.scss";
|
||||
@import "./views/voice_messages/_PlayPauseButton.scss";
|
||||
@import "./views/voice_messages/_PlaybackContainer.scss";
|
||||
@import "./views/voice_messages/_Waveform.scss";
|
||||
@import "./views/voip/_CallContainer.scss";
|
||||
@import "./views/voip/_CallView.scss";
|
||||
|
|
|
|||
|
|
@ -84,6 +84,15 @@ $SpaceRoomViewInnerWidth: 428px;
|
|||
max-width: $SpaceRoomViewInnerWidth;
|
||||
}
|
||||
|
||||
.mx_AddExistingToSpace {
|
||||
max-width: $SpaceRoomViewInnerWidth;
|
||||
|
||||
.mx_AddExistingToSpace_content {
|
||||
height: calc(100vh - 360px);
|
||||
max-height: 400px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_SpaceRoomView_buttons {
|
||||
display: block;
|
||||
margin-top: 44px;
|
||||
|
|
|
|||
|
|
@ -21,6 +21,66 @@ limitations under the License.
|
|||
}
|
||||
}
|
||||
|
||||
.mx_AddExistingToSpace {
|
||||
.mx_SearchBox {
|
||||
// To match the space around the title
|
||||
margin: 0 0 15px 0;
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
.mx_AddExistingToSpace_content {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.mx_AddExistingToSpace_noResults {
|
||||
display: block;
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.mx_AddExistingToSpace_section {
|
||||
&:not(:first-child) {
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
> h3 {
|
||||
margin: 0;
|
||||
color: $secondary-fg-color;
|
||||
font-size: $font-12px;
|
||||
font-weight: $font-semi-bold;
|
||||
line-height: $font-15px;
|
||||
}
|
||||
|
||||
.mx_AddExistingToSpace_entry {
|
||||
display: flex;
|
||||
margin-top: 12px;
|
||||
|
||||
.mx_BaseAvatar {
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.mx_AddExistingToSpace_entry_name {
|
||||
font-size: $font-15px;
|
||||
line-height: 30px;
|
||||
flex-grow: 1;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.mx_Checkbox {
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_AddExistingToSpace_section_spaces {
|
||||
.mx_BaseAvatar_image {
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_AddExistingToSpaceDialog {
|
||||
width: 480px;
|
||||
color: $primary-fg-color;
|
||||
|
|
@ -100,12 +160,6 @@ limitations under the License.
|
|||
}
|
||||
}
|
||||
|
||||
.mx_SearchBox {
|
||||
// To match the space around the title
|
||||
margin: 0 0 15px 0;
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
.mx_AddExistingToSpaceDialog_errorText {
|
||||
font-weight: $font-semi-bold;
|
||||
font-size: $font-12px;
|
||||
|
|
@ -114,56 +168,8 @@ limitations under the License.
|
|||
margin-bottom: 28px;
|
||||
}
|
||||
|
||||
.mx_AddExistingToSpaceDialog_content {
|
||||
flex-grow: 1;
|
||||
|
||||
.mx_AddExistingToSpaceDialog_noResults {
|
||||
display: block;
|
||||
margin-top: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_AddExistingToSpaceDialog_section {
|
||||
&:not(:first-child) {
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
> h3 {
|
||||
margin: 0;
|
||||
color: $secondary-fg-color;
|
||||
font-size: $font-12px;
|
||||
font-weight: $font-semi-bold;
|
||||
line-height: $font-15px;
|
||||
}
|
||||
|
||||
.mx_AddExistingToSpaceDialog_entry {
|
||||
display: flex;
|
||||
margin-top: 12px;
|
||||
|
||||
.mx_BaseAvatar {
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.mx_AddExistingToSpaceDialog_entry_name {
|
||||
font-size: $font-15px;
|
||||
line-height: 30px;
|
||||
flex-grow: 1;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.mx_Checkbox {
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_AddExistingToSpaceDialog_section_spaces {
|
||||
.mx_BaseAvatar_image {
|
||||
border-radius: 8px;
|
||||
}
|
||||
.mx_AddExistingToSpace {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
.mx_AddExistingToSpaceDialog_footer {
|
||||
|
|
|
|||
|
|
@ -35,44 +35,40 @@ limitations under the License.
|
|||
}
|
||||
}
|
||||
|
||||
.mx_VoiceRecordComposerTile_waveformContainer {
|
||||
padding: 5px;
|
||||
padding-right: 4px; // there's 1px from the waveform itself, so account for that
|
||||
padding-left: 15px; // +10px for the live circle, +5px for regular padding
|
||||
background-color: $voice-record-waveform-bg-color;
|
||||
border-radius: 12px;
|
||||
margin-right: 12px; // isolate from stop button
|
||||
.mx_VoiceRecordComposerTile_delete {
|
||||
width: 14px; // w&h are size of icon
|
||||
height: 18px;
|
||||
vertical-align: middle;
|
||||
margin-right: 7px; // distance from left edge of waveform container (container has some margin too)
|
||||
background-color: $muted-fg-color;
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: contain;
|
||||
mask-image: url('$(res)/img/element-icons/trashcan.svg');
|
||||
}
|
||||
|
||||
// Cheat at alignment a bit
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.mx_VoiceMessagePrimaryContainer {
|
||||
// Note: remaining class properties are in the PlayerContainer CSS.
|
||||
|
||||
margin: 6px; // force the composer area to put a gutter around us
|
||||
margin-right: 12px; // isolate from stop button
|
||||
|
||||
position: relative; // important for the live circle
|
||||
|
||||
color: $voice-record-waveform-fg-color;
|
||||
font-size: $font-14px;
|
||||
&.mx_VoiceRecordComposerTile_recording {
|
||||
padding-left: 16px; // +10px for the live circle, +6px for regular padding
|
||||
|
||||
&::before {
|
||||
animation: recording-pulse 2s infinite;
|
||||
&::before {
|
||||
animation: recording-pulse 2s infinite;
|
||||
|
||||
content: '';
|
||||
background-color: $voice-record-live-circle-color;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
position: absolute;
|
||||
left: 8px;
|
||||
top: 16px; // vertically center
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.mx_Waveform_bar {
|
||||
background-color: $voice-record-waveform-fg-color;
|
||||
}
|
||||
|
||||
.mx_Clock {
|
||||
padding-right: 8px; // isolate from waveform
|
||||
padding-left: 10px; // isolate from live circle
|
||||
width: 42px; // we're not using a monospace font, so fake it
|
||||
content: '';
|
||||
background-color: $voice-record-live-circle-color;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
position: absolute;
|
||||
left: 8px;
|
||||
top: 16px; // vertically center
|
||||
border-radius: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
51
res/css/views/voice_messages/_PlayPauseButton.scss
Normal file
51
res/css/views/voice_messages/_PlayPauseButton.scss
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
/*
|
||||
Copyright 2021 The Matrix.org Foundation C.I.C.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
.mx_PlayPauseButton {
|
||||
position: relative;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 32px;
|
||||
background-color: $primary-bg-color;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute; // sizing varies by icon
|
||||
background-color: $muted-fg-color;
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: contain;
|
||||
}
|
||||
|
||||
&.mx_PlayPauseButton_disabled::before {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
&.mx_PlayPauseButton_play::before {
|
||||
width: 13px;
|
||||
height: 16px;
|
||||
top: 8px; // center
|
||||
left: 12px; // center
|
||||
mask-image: url('$(res)/img/element-icons/play.svg');
|
||||
}
|
||||
|
||||
&.mx_PlayPauseButton_pause::before {
|
||||
width: 10px;
|
||||
height: 12px;
|
||||
top: 10px; // center
|
||||
left: 11px; // center
|
||||
mask-image: url('$(res)/img/element-icons/pause.svg');
|
||||
}
|
||||
}
|
||||
54
res/css/views/voice_messages/_PlaybackContainer.scss
Normal file
54
res/css/views/voice_messages/_PlaybackContainer.scss
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
/*
|
||||
Copyright 2021 The Matrix.org Foundation C.I.C.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
// Dev note: there's no actual component called <PlaybackContainer />. These classes
|
||||
// are shared amongst multiple voice message components.
|
||||
|
||||
// Container for live recording and playback controls
|
||||
.mx_VoiceMessagePrimaryContainer {
|
||||
padding: 6px; // makes us 4px taller than the send/stop button
|
||||
padding-right: 5px; // there's 1px from the waveform itself, so account for that
|
||||
background-color: $voice-record-waveform-bg-color;
|
||||
border-radius: 12px;
|
||||
|
||||
// Cheat at alignment a bit
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
color: $voice-record-waveform-fg-color;
|
||||
font-size: $font-14px;
|
||||
|
||||
.mx_Waveform {
|
||||
// We want the bars to be 2px shorter than the play/pause button in the waveform control
|
||||
height: 28px; // default is 30px, so we're subtracting the 2px border off the bars
|
||||
|
||||
.mx_Waveform_bar {
|
||||
background-color: $voice-record-waveform-incomplete-fg-color;
|
||||
|
||||
&.mx_Waveform_bar_100pct {
|
||||
// Small animation to remove the mechanical feel of progress
|
||||
transition: background-color 250ms ease;
|
||||
background-color: $voice-record-waveform-fg-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_Clock {
|
||||
padding-right: 4px; // isolate from waveform
|
||||
padding-left: 8px; // isolate from live circle
|
||||
width: 40px; // we're not using a monospace font, so fake it
|
||||
}
|
||||
}
|
||||
|
|
@ -17,7 +17,7 @@ limitations under the License.
|
|||
|
||||
.mx_CallView {
|
||||
border-radius: 8px;
|
||||
background-color: $voipcall-plinth-color;
|
||||
background-color: $dark-panel-bg-color;
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
// XXX: CallContainer sets pointer-events: none - should probably be set back in a better place
|
||||
|
|
@ -40,7 +40,8 @@ limitations under the License.
|
|||
width: 320px;
|
||||
padding-bottom: 8px;
|
||||
margin-top: 10px;
|
||||
box-shadow: 0px 14px 24px rgba(0, 0, 0, 0.08);
|
||||
background-color: $voipcall-plinth-color;
|
||||
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.20);
|
||||
border-radius: 8px;
|
||||
|
||||
.mx_CallView_voice {
|
||||
|
|
|
|||
4
res/img/element-icons/pause.svg
Normal file
4
res/img/element-icons/pause.svg
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
<svg width="10" height="12" viewBox="0 0 10 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0 1C0 0.447715 0.447715 0 1 0H2C2.55228 0 3 0.447715 3 1V11C3 11.5523 2.55228 12 2 12H1C0.447715 12 0 11.5523 0 11V1Z" fill="#737D8C"/>
|
||||
<path d="M7 1C7 0.447715 7.44772 0 8 0H9C9.55228 0 10 0.447715 10 1V11C10 11.5523 9.55228 12 9 12H8C7.44772 12 7 11.5523 7 11V1Z" fill="#737D8C"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 396 B |
3
res/img/element-icons/play.svg
Normal file
3
res/img/element-icons/play.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="13" height="16" viewBox="0 0 13 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0 14.2104V1.78956C0 1.00724 0.857827 0.527894 1.5241 0.937906L11.6161 7.14834C12.2506 7.53883 12.2506 8.46117 11.6161 8.85166L1.5241 15.0621C0.857828 15.4721 0 14.9928 0 14.2104Z" fill="#737D8C"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 310 B |
|
|
@ -112,7 +112,7 @@ $header-divider-color: $header-panel-text-primary-color;
|
|||
$composer-e2e-icon-color: $header-panel-text-primary-color;
|
||||
|
||||
// this probably shouldn't have it's own colour
|
||||
$voipcall-plinth-color: #21262c;
|
||||
$voipcall-plinth-color: #394049;
|
||||
|
||||
// ********************
|
||||
|
||||
|
|
|
|||
|
|
@ -109,7 +109,7 @@ $header-divider-color: $header-panel-text-primary-color;
|
|||
$composer-e2e-icon-color: $header-panel-text-primary-color;
|
||||
|
||||
// this probably shouldn't have it's own colour
|
||||
$voipcall-plinth-color: #f2f5f8;
|
||||
$voipcall-plinth-color: #394049;
|
||||
|
||||
// ********************
|
||||
|
||||
|
|
|
|||
|
|
@ -176,7 +176,7 @@ $composer-e2e-icon-color: #91a1c0;
|
|||
$header-divider-color: #91a1c0;
|
||||
|
||||
// this probably shouldn't have it's own colour
|
||||
$voipcall-plinth-color: #f2f5f8;
|
||||
$voipcall-plinth-color: #F4F6FA;
|
||||
|
||||
// ********************
|
||||
|
||||
|
|
@ -196,6 +196,7 @@ $voice-record-stop-border-color: #E3E8F0;
|
|||
$voice-record-stop-symbol-color: #ff4b55;
|
||||
$voice-record-waveform-bg-color: #E3E8F0;
|
||||
$voice-record-waveform-fg-color: $muted-fg-color;
|
||||
$voice-record-waveform-incomplete-fg-color: #C1C6CD;
|
||||
$voice-record-live-circle-color: #ff4b55;
|
||||
|
||||
$roomtile-preview-color: #9e9e9e;
|
||||
|
|
|
|||
|
|
@ -167,7 +167,7 @@ $composer-e2e-icon-color: #91A1C0;
|
|||
$header-divider-color: #91A1C0;
|
||||
|
||||
// this probably shouldn't have it's own colour
|
||||
$voipcall-plinth-color: #f2f5f8;
|
||||
$voipcall-plinth-color: #F4F6FA;
|
||||
|
||||
// ********************
|
||||
|
||||
|
|
@ -186,6 +186,7 @@ $voice-record-stop-border-color: #E3E8F0;
|
|||
$voice-record-stop-symbol-color: #ff4b55; // $warning-color, but without letting people change it in themes
|
||||
$voice-record-waveform-bg-color: #E3E8F0;
|
||||
$voice-record-waveform-fg-color: $muted-fg-color;
|
||||
$voice-record-waveform-incomplete-fg-color: #C1C6CD;
|
||||
$voice-record-live-circle-color: #ff4b55; // $warning-color, but without letting people change it in themes
|
||||
|
||||
$roomtile-preview-color: $secondary-fg-color;
|
||||
|
|
|
|||
|
|
@ -1,10 +0,0 @@
|
|||
const fs = require("fs");
|
||||
|
||||
if (process.argv.length < 4) throw new Error("Missing source and target file arguments");
|
||||
|
||||
const sourceFile = fs.readFileSync(process.argv[2], 'utf8');
|
||||
const targetFile = fs.readFileSync(process.argv[3], 'utf8');
|
||||
|
||||
if (sourceFile !== targetFile) {
|
||||
throw new Error("Files do not match");
|
||||
}
|
||||
|
|
@ -1,304 +0,0 @@
|
|||
#!/usr/bin/env node
|
||||
|
||||
/*
|
||||
Copyright 2017 New Vector Ltd
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
/**
|
||||
* Regenerates the translations en_EN file by walking the source tree and
|
||||
* parsing each file with the appropriate parser. Emits a JSON file with the
|
||||
* translatable strings mapped to themselves in the order they appeared
|
||||
* in the files and grouped by the file they appeared in.
|
||||
*
|
||||
* Usage: node scripts/gen-i18n.js
|
||||
*/
|
||||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
|
||||
const walk = require('walk');
|
||||
|
||||
const parser = require("@babel/parser");
|
||||
const traverse = require("@babel/traverse");
|
||||
|
||||
const TRANSLATIONS_FUNCS = ['_t', '_td'];
|
||||
|
||||
const INPUT_TRANSLATIONS_FILE = 'src/i18n/strings/en_EN.json';
|
||||
const OUTPUT_FILE = 'src/i18n/strings/en_EN.json';
|
||||
|
||||
// NB. The sync version of walk is broken for single files so we walk
|
||||
// all of res rather than just res/home.html.
|
||||
// https://git.daplie.com/Daplie/node-walk/merge_requests/1 fixes it,
|
||||
// or if we get bored waiting for it to be merged, we could switch
|
||||
// to a project that's actively maintained.
|
||||
const SEARCH_PATHS = ['src', 'res'];
|
||||
|
||||
function getObjectValue(obj, key) {
|
||||
for (const prop of obj.properties) {
|
||||
if (prop.key.type === 'Identifier' && prop.key.name === key) {
|
||||
return prop.value;
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
function getTKey(arg) {
|
||||
if (arg.type === 'Literal' || arg.type === "StringLiteral") {
|
||||
return arg.value;
|
||||
} else if (arg.type === 'BinaryExpression' && arg.operator === '+') {
|
||||
return getTKey(arg.left) + getTKey(arg.right);
|
||||
} else if (arg.type === 'TemplateLiteral') {
|
||||
return arg.quasis.map((q) => {
|
||||
return q.value.raw;
|
||||
}).join('');
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
function getFormatStrings(str) {
|
||||
// Match anything that starts with %
|
||||
// We could make a regex that matched the full placeholder, but this
|
||||
// would just not match invalid placeholders and so wouldn't help us
|
||||
// detect the invalid ones.
|
||||
// Also note that for simplicity, this just matches a % character and then
|
||||
// anything up to the next % character (or a single %, or end of string).
|
||||
const formatStringRe = /%([^%]+|%|$)/g;
|
||||
const formatStrings = new Set();
|
||||
|
||||
let match;
|
||||
while ( (match = formatStringRe.exec(str)) !== null ) {
|
||||
const placeholder = match[1]; // Minus the leading '%'
|
||||
if (placeholder === '%') continue; // Literal % is %%
|
||||
|
||||
const placeholderMatch = placeholder.match(/^\((.*?)\)(.)/);
|
||||
if (placeholderMatch === null) {
|
||||
throw new Error("Invalid format specifier: '"+match[0]+"'");
|
||||
}
|
||||
if (placeholderMatch.length < 3) {
|
||||
throw new Error("Malformed format specifier");
|
||||
}
|
||||
const placeholderName = placeholderMatch[1];
|
||||
const placeholderFormat = placeholderMatch[2];
|
||||
|
||||
if (placeholderFormat !== 's') {
|
||||
throw new Error(`'${placeholderFormat}' used as format character: you probably meant 's'`);
|
||||
}
|
||||
|
||||
formatStrings.add(placeholderName);
|
||||
}
|
||||
|
||||
return formatStrings;
|
||||
}
|
||||
|
||||
function getTranslationsJs(file) {
|
||||
const contents = fs.readFileSync(file, { encoding: 'utf8' });
|
||||
|
||||
const trs = new Set();
|
||||
|
||||
try {
|
||||
const plugins = [
|
||||
// https://babeljs.io/docs/en/babel-parser#plugins
|
||||
"classProperties",
|
||||
"objectRestSpread",
|
||||
"throwExpressions",
|
||||
"exportDefaultFrom",
|
||||
"decorators-legacy",
|
||||
];
|
||||
|
||||
if (file.endsWith(".js") || file.endsWith(".jsx")) {
|
||||
// all JS is assumed to be flow or react
|
||||
plugins.push("flow", "jsx");
|
||||
} else if (file.endsWith(".ts")) {
|
||||
// TS can't use JSX unless it's a TSX file (otherwise angle casts fail)
|
||||
plugins.push("typescript");
|
||||
} else if (file.endsWith(".tsx")) {
|
||||
// When the file is a TSX file though, enable JSX parsing
|
||||
plugins.push("typescript", "jsx");
|
||||
}
|
||||
|
||||
const babelParsed = parser.parse(contents, {
|
||||
allowImportExportEverywhere: true,
|
||||
errorRecovery: true,
|
||||
sourceFilename: file,
|
||||
tokens: true,
|
||||
plugins,
|
||||
});
|
||||
traverse.default(babelParsed, {
|
||||
enter: (p) => {
|
||||
const node = p.node;
|
||||
if (p.isCallExpression() && node.callee && TRANSLATIONS_FUNCS.includes(node.callee.name)) {
|
||||
const tKey = getTKey(node.arguments[0]);
|
||||
|
||||
// This happens whenever we call _t with non-literals (ie. whenever we've
|
||||
// had to use a _td to compensate) so is expected.
|
||||
if (tKey === null) return;
|
||||
|
||||
// check the format string against the args
|
||||
// We only check _t: _td has no args
|
||||
if (node.callee.name === '_t') {
|
||||
try {
|
||||
const placeholders = getFormatStrings(tKey);
|
||||
for (const placeholder of placeholders) {
|
||||
if (node.arguments.length < 2) {
|
||||
throw new Error(`Placeholder found ('${placeholder}') but no substitutions given`);
|
||||
}
|
||||
const value = getObjectValue(node.arguments[1], placeholder);
|
||||
if (value === null) {
|
||||
throw new Error(`No value found for placeholder '${placeholder}'`);
|
||||
}
|
||||
}
|
||||
|
||||
// Validate tag replacements
|
||||
if (node.arguments.length > 2) {
|
||||
const tagMap = node.arguments[2];
|
||||
for (const prop of tagMap.properties || []) {
|
||||
if (prop.key.type === 'Literal') {
|
||||
const tag = prop.key.value;
|
||||
// RegExp same as in src/languageHandler.js
|
||||
const regexp = new RegExp(`(<${tag}>(.*?)<\\/${tag}>|<${tag}>|<${tag}\\s*\\/>)`);
|
||||
if (!tKey.match(regexp)) {
|
||||
throw new Error(`No match for ${regexp} in ${tKey}`);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
} catch (e) {
|
||||
console.log();
|
||||
console.error(`ERROR: ${file}:${node.loc.start.line} ${tKey}`);
|
||||
console.error(e);
|
||||
process.exit(1);
|
||||
}
|
||||
}
|
||||
|
||||
let isPlural = false;
|
||||
if (node.arguments.length > 1 && node.arguments[1].type === 'ObjectExpression') {
|
||||
const countVal = getObjectValue(node.arguments[1], 'count');
|
||||
if (countVal) {
|
||||
isPlural = true;
|
||||
}
|
||||
}
|
||||
|
||||
if (isPlural) {
|
||||
trs.add(tKey + "|other");
|
||||
const plurals = enPlurals[tKey];
|
||||
if (plurals) {
|
||||
for (const pluralType of Object.keys(plurals)) {
|
||||
trs.add(tKey + "|" + pluralType);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
trs.add(tKey);
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
return trs;
|
||||
}
|
||||
|
||||
function getTranslationsOther(file) {
|
||||
const contents = fs.readFileSync(file, { encoding: 'utf8' });
|
||||
|
||||
const trs = new Set();
|
||||
|
||||
// Taken from element-web src/components/structures/HomePage.js
|
||||
const translationsRegex = /_t\(['"]([\s\S]*?)['"]\)/mg;
|
||||
let matches;
|
||||
while (matches = translationsRegex.exec(contents)) {
|
||||
trs.add(matches[1]);
|
||||
}
|
||||
return trs;
|
||||
}
|
||||
|
||||
// gather en_EN plural strings from the input translations file:
|
||||
// the en_EN strings are all in the source with the exception of
|
||||
// pluralised strings, which we need to pull in from elsewhere.
|
||||
const inputTranslationsRaw = JSON.parse(fs.readFileSync(INPUT_TRANSLATIONS_FILE, { encoding: 'utf8' }));
|
||||
const enPlurals = {};
|
||||
|
||||
for (const key of Object.keys(inputTranslationsRaw)) {
|
||||
const parts = key.split("|");
|
||||
if (parts.length > 1) {
|
||||
const plurals = enPlurals[parts[0]] || {};
|
||||
plurals[parts[1]] = inputTranslationsRaw[key];
|
||||
enPlurals[parts[0]] = plurals;
|
||||
}
|
||||
}
|
||||
|
||||
const translatables = new Set();
|
||||
|
||||
const walkOpts = {
|
||||
listeners: {
|
||||
names: function(root, nodeNamesArray) {
|
||||
// Sort the names case insensitively and alphabetically to
|
||||
// maintain some sense of order between the different strings.
|
||||
nodeNamesArray.sort((a, b) => {
|
||||
a = a.toLowerCase();
|
||||
b = b.toLowerCase();
|
||||
if (a > b) return 1;
|
||||
if (a < b) return -1;
|
||||
return 0;
|
||||
});
|
||||
},
|
||||
file: function(root, fileStats, next) {
|
||||
const fullPath = path.join(root, fileStats.name);
|
||||
|
||||
let trs;
|
||||
if (fileStats.name.endsWith('.js') || fileStats.name.endsWith('.ts') || fileStats.name.endsWith('.tsx')) {
|
||||
trs = getTranslationsJs(fullPath);
|
||||
} else if (fileStats.name.endsWith('.html')) {
|
||||
trs = getTranslationsOther(fullPath);
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
console.log(`${fullPath} (${trs.size} strings)`);
|
||||
for (const tr of trs.values()) {
|
||||
// Convert DOS line endings to unix
|
||||
translatables.add(tr.replace(/\r\n/g, "\n"));
|
||||
}
|
||||
},
|
||||
}
|
||||
};
|
||||
|
||||
for (const path of SEARCH_PATHS) {
|
||||
if (fs.existsSync(path)) {
|
||||
walk.walkSync(path, walkOpts);
|
||||
}
|
||||
}
|
||||
|
||||
const trObj = {};
|
||||
for (const tr of translatables) {
|
||||
if (tr.includes("|")) {
|
||||
if (inputTranslationsRaw[tr]) {
|
||||
trObj[tr] = inputTranslationsRaw[tr];
|
||||
} else {
|
||||
trObj[tr] = tr.split("|")[0];
|
||||
}
|
||||
} else {
|
||||
trObj[tr] = tr;
|
||||
}
|
||||
}
|
||||
|
||||
fs.writeFileSync(
|
||||
OUTPUT_FILE,
|
||||
JSON.stringify(trObj, translatables.values(), 4) + "\n"
|
||||
);
|
||||
|
||||
console.log();
|
||||
console.log(`Wrote ${translatables.size} strings to ${OUTPUT_FILE}`);
|
||||
|
|
@ -1,68 +0,0 @@
|
|||
#!/usr/bin/env node
|
||||
|
||||
/*
|
||||
Copyright 2017 New Vector Ltd
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
/*
|
||||
* Looks through all the translation files and removes any strings
|
||||
* which don't appear in en_EN.json.
|
||||
* Use this if you remove a translation, but merge any outstanding changes
|
||||
* from weblate first or you'll need to resolve the conflict in weblate.
|
||||
*/
|
||||
|
||||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
|
||||
const I18NDIR = 'src/i18n/strings';
|
||||
|
||||
const enStringsRaw = JSON.parse(fs.readFileSync(path.join(I18NDIR, 'en_EN.json')));
|
||||
|
||||
const enStrings = new Set();
|
||||
for (const str of Object.keys(enStringsRaw)) {
|
||||
const parts = str.split('|');
|
||||
if (parts.length > 1) {
|
||||
enStrings.add(parts[0]);
|
||||
} else {
|
||||
enStrings.add(str);
|
||||
}
|
||||
}
|
||||
|
||||
for (const filename of fs.readdirSync(I18NDIR)) {
|
||||
if (filename === 'en_EN.json') continue;
|
||||
if (filename === 'basefile.json') continue;
|
||||
if (!filename.endsWith('.json')) continue;
|
||||
|
||||
const trs = JSON.parse(fs.readFileSync(path.join(I18NDIR, filename)));
|
||||
const oldLen = Object.keys(trs).length;
|
||||
for (const tr of Object.keys(trs)) {
|
||||
const parts = tr.split('|');
|
||||
const trKey = parts.length > 1 ? parts[0] : tr;
|
||||
if (!enStrings.has(trKey)) {
|
||||
delete trs[tr];
|
||||
}
|
||||
}
|
||||
|
||||
const removed = oldLen - Object.keys(trs).length;
|
||||
if (removed > 0) {
|
||||
console.log(`${filename}: removed ${removed} translations`);
|
||||
// XXX: This is totally relying on the impl serialising the JSON object in the
|
||||
// same order as they were parsed from the file. JSON.stringify() has a specific argument
|
||||
// that can be used to control the order, but JSON.parse() lacks any kind of equivalent.
|
||||
// Empirically this does maintain the order on my system, so I'm going to leave it like
|
||||
// this for now.
|
||||
fs.writeFileSync(path.join(I18NDIR, filename), JSON.stringify(trs, undefined, 4) + "\n");
|
||||
}
|
||||
}
|
||||
4
src/@types/global.d.ts
vendored
4
src/@types/global.d.ts
vendored
|
|
@ -39,9 +39,9 @@ import {ModalWidgetStore} from "../stores/ModalWidgetStore";
|
|||
import { WidgetLayoutStore } from "../stores/widgets/WidgetLayoutStore";
|
||||
import VoipUserMapper from "../VoipUserMapper";
|
||||
import {SpaceStoreClass} from "../stores/SpaceStore";
|
||||
import {VoiceRecording} from "../voice/VoiceRecording";
|
||||
import TypingStore from "../stores/TypingStore";
|
||||
import { EventIndexPeg } from "../indexing/EventIndexPeg";
|
||||
import {VoiceRecordingStore} from "../stores/VoiceRecordingStore";
|
||||
|
||||
declare global {
|
||||
interface Window {
|
||||
|
|
@ -73,7 +73,7 @@ declare global {
|
|||
mxModalWidgetStore: ModalWidgetStore;
|
||||
mxVoipUserMapper: VoipUserMapper;
|
||||
mxSpaceStore: SpaceStoreClass;
|
||||
mxVoiceRecorder: typeof VoiceRecording;
|
||||
mxVoiceRecordingStore: VoiceRecordingStore;
|
||||
mxTypingStore: TypingStore;
|
||||
mxEventIndexPeg: EventIndexPeg;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -258,7 +258,7 @@ export default abstract class BasePlatform {
|
|||
return null;
|
||||
}
|
||||
|
||||
setLanguage(preferredLangs: string[]) {}
|
||||
async setLanguage(preferredLangs: string[]) {}
|
||||
|
||||
setSpellCheckLanguages(preferredLangs: string[]) {}
|
||||
|
||||
|
|
|
|||
|
|
@ -59,7 +59,6 @@ import {MatrixClientPeg} from './MatrixClientPeg';
|
|||
import PlatformPeg from './PlatformPeg';
|
||||
import Modal from './Modal';
|
||||
import { _t } from './languageHandler';
|
||||
import { createNewMatrixCall } from 'matrix-js-sdk/src/webrtc/call';
|
||||
import dis from './dispatcher/dispatcher';
|
||||
import WidgetUtils from './utils/WidgetUtils';
|
||||
import WidgetEchoStore from './stores/WidgetEchoStore';
|
||||
|
|
@ -86,6 +85,8 @@ import { Action } from './dispatcher/actions';
|
|||
import VoipUserMapper from './VoipUserMapper';
|
||||
import { addManagedHybridWidget, isManagedHybridWidgetEnabled } from './widgets/ManagedHybrid';
|
||||
import { randomUppercaseString, randomLowercaseString } from "matrix-js-sdk/src/randomstring";
|
||||
import SdkConfig from './SdkConfig';
|
||||
import { ensureDMExists, findDMForUser } from './createRoom';
|
||||
|
||||
export const PROTOCOL_PSTN = 'm.protocol.pstn';
|
||||
export const PROTOCOL_PSTN_PREFIXED = 'im.vector.protocol.pstn';
|
||||
|
|
@ -167,6 +168,11 @@ export default class CallHandler {
|
|||
private invitedRoomsAreVirtual = new Map<string, boolean>();
|
||||
private invitedRoomCheckInProgress = false;
|
||||
|
||||
// Map of the asserted identity users after we've looked them up using the API.
|
||||
// We need to be be able to determine the mapped room synchronously, so we
|
||||
// do the async lookup when we get new information and then store these mappings here
|
||||
private assertedIdentityNativeUsers = new Map<string, string>();
|
||||
|
||||
static sharedInstance() {
|
||||
if (!window.mxCallHandler) {
|
||||
window.mxCallHandler = new CallHandler()
|
||||
|
|
@ -179,8 +185,19 @@ export default class CallHandler {
|
|||
* Gets the user-facing room associated with a call (call.roomId may be the call "virtual room"
|
||||
* if a voip_mxid_translate_pattern is set in the config)
|
||||
*/
|
||||
public static roomIdForCall(call: MatrixCall): string {
|
||||
public roomIdForCall(call: MatrixCall): string {
|
||||
if (!call) return null;
|
||||
|
||||
const voipConfig = SdkConfig.get()['voip'];
|
||||
|
||||
if (voipConfig && voipConfig.obeyAssertedIdentity) {
|
||||
const nativeUser = this.assertedIdentityNativeUsers[call.callId];
|
||||
if (nativeUser) {
|
||||
const room = findDMForUser(MatrixClientPeg.get(), nativeUser);
|
||||
if (room) return room.roomId
|
||||
}
|
||||
}
|
||||
|
||||
return VoipUserMapper.sharedInstance().nativeRoomForVirtualRoom(call.roomId) || call.roomId;
|
||||
}
|
||||
|
||||
|
|
@ -379,14 +396,14 @@ export default class CallHandler {
|
|||
// We don't allow placing more than one call per room, but that doesn't mean there
|
||||
// can't be more than one, eg. in a glare situation. This checks that the given call
|
||||
// is the call we consider 'the' call for its room.
|
||||
const mappedRoomId = CallHandler.roomIdForCall(call);
|
||||
const mappedRoomId = this.roomIdForCall(call);
|
||||
|
||||
const callForThisRoom = this.getCallForRoom(mappedRoomId);
|
||||
return callForThisRoom && call.callId === callForThisRoom.callId;
|
||||
}
|
||||
|
||||
private setCallListeners(call: MatrixCall) {
|
||||
const mappedRoomId = CallHandler.roomIdForCall(call);
|
||||
let mappedRoomId = CallHandler.sharedInstance().roomIdForCall(call);
|
||||
|
||||
call.on(CallEvent.Error, (err: CallError) => {
|
||||
if (!this.matchesCallForThisRoom(call)) return;
|
||||
|
|
@ -500,6 +517,42 @@ export default class CallHandler {
|
|||
this.setCallListeners(newCall);
|
||||
this.setCallState(newCall, newCall.state);
|
||||
});
|
||||
call.on(CallEvent.AssertedIdentityChanged, async () => {
|
||||
if (!this.matchesCallForThisRoom(call)) return;
|
||||
|
||||
console.log(`Call ID ${call.callId} got new asserted identity:`, call.getRemoteAssertedIdentity());
|
||||
|
||||
const newAssertedIdentity = call.getRemoteAssertedIdentity().id;
|
||||
let newNativeAssertedIdentity = newAssertedIdentity;
|
||||
if (newAssertedIdentity) {
|
||||
const response = await this.sipNativeLookup(newAssertedIdentity);
|
||||
if (response.length) newNativeAssertedIdentity = response[0].userid;
|
||||
}
|
||||
console.log(`Asserted identity ${newAssertedIdentity} mapped to ${newNativeAssertedIdentity}`);
|
||||
|
||||
if (newNativeAssertedIdentity) {
|
||||
this.assertedIdentityNativeUsers[call.callId] = newNativeAssertedIdentity;
|
||||
|
||||
// If we don't already have a room with this user, make one. This will be slightly odd
|
||||
// if they called us because we'll be inviting them, but there's not much we can do about
|
||||
// this if we want the actual, native room to exist (which we do). This is why it's
|
||||
// important to only obey asserted identity in trusted environments, since anyone you're
|
||||
// on a call with can cause you to send a room invite to someone.
|
||||
await ensureDMExists(MatrixClientPeg.get(), newNativeAssertedIdentity);
|
||||
|
||||
const newMappedRoomId = this.roomIdForCall(call);
|
||||
console.log(`Old room ID: ${mappedRoomId}, new room ID: ${newMappedRoomId}`);
|
||||
if (newMappedRoomId !== mappedRoomId) {
|
||||
this.removeCallForRoom(mappedRoomId);
|
||||
mappedRoomId = newMappedRoomId;
|
||||
this.calls.set(mappedRoomId, call);
|
||||
dis.dispatch({
|
||||
action: Action.CallChangeRoom,
|
||||
call,
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
private async logCallStats(call: MatrixCall, mappedRoomId: string) {
|
||||
|
|
@ -551,7 +604,7 @@ export default class CallHandler {
|
|||
}
|
||||
|
||||
private setCallState(call: MatrixCall, status: CallState) {
|
||||
const mappedRoomId = CallHandler.roomIdForCall(call);
|
||||
const mappedRoomId = CallHandler.sharedInstance().roomIdForCall(call);
|
||||
|
||||
console.log(
|
||||
`Call state in ${mappedRoomId} changed to ${status}`,
|
||||
|
|
@ -639,7 +692,7 @@ export default class CallHandler {
|
|||
|
||||
const timeUntilTurnCresExpire = MatrixClientPeg.get().getTurnServersExpiry() - Date.now();
|
||||
console.log("Current turn creds expire in " + timeUntilTurnCresExpire + " ms");
|
||||
const call = createNewMatrixCall(MatrixClientPeg.get(), mappedRoomId);
|
||||
const call = MatrixClientPeg.get().createCall(mappedRoomId);
|
||||
|
||||
this.calls.set(roomId, call);
|
||||
if (transferee) {
|
||||
|
|
@ -772,7 +825,7 @@ export default class CallHandler {
|
|||
|
||||
const call = payload.call as MatrixCall;
|
||||
|
||||
const mappedRoomId = CallHandler.roomIdForCall(call);
|
||||
const mappedRoomId = CallHandler.sharedInstance().roomIdForCall(call);
|
||||
if (this.getCallForRoom(mappedRoomId)) {
|
||||
// ignore multiple incoming calls to the same room
|
||||
return;
|
||||
|
|
|
|||
|
|
@ -57,7 +57,11 @@ export default class VoipUserMapper {
|
|||
if (!virtualRoom) return null;
|
||||
const virtualRoomEvent = virtualRoom.getAccountData(VIRTUAL_ROOM_EVENT_TYPE);
|
||||
if (!virtualRoomEvent || !virtualRoomEvent.getContent()) return null;
|
||||
return virtualRoomEvent.getContent()['native_room'] || null;
|
||||
const nativeRoomID = virtualRoomEvent.getContent()['native_room'];
|
||||
const nativeRoom = MatrixClientPeg.get().getRoom(nativeRoomID);
|
||||
if (!nativeRoom || nativeRoom.getMyMembership() !== 'join') return null;
|
||||
|
||||
return nativeRoomID;
|
||||
}
|
||||
|
||||
public isVirtualRoom(room: Room): boolean {
|
||||
|
|
|
|||
|
|
@ -128,7 +128,11 @@ export default class RoomStatusBar extends React.Component {
|
|||
|
||||
_onRoomLocalEchoUpdated = (event, room, oldEventId, oldStatus) => {
|
||||
if (room.roomId !== this.props.room.roomId) return;
|
||||
this.setState({unsentMessages: getUnsentMessages(this.props.room)});
|
||||
const messages = getUnsentMessages(this.props.room);
|
||||
this.setState({
|
||||
unsentMessages: messages,
|
||||
isResending: messages.length > 0 && this.state.isResending,
|
||||
});
|
||||
};
|
||||
|
||||
// Check whether current size is greater than 0, if yes call props.onVisible
|
||||
|
|
|
|||
|
|
@ -525,7 +525,7 @@ export default class ScrollPanel extends React.Component {
|
|||
*/
|
||||
scrollRelative = mult => {
|
||||
const scrollNode = this._getScrollNode();
|
||||
const delta = mult * scrollNode.clientHeight * 0.5;
|
||||
const delta = mult * scrollNode.clientHeight * 0.9;
|
||||
scrollNode.scrollBy(0, delta);
|
||||
this._saveScrollState();
|
||||
};
|
||||
|
|
|
|||
|
|
@ -51,6 +51,9 @@ import MemberAvatar from "../views/avatars/MemberAvatar";
|
|||
import {useStateToggle} from "../../hooks/useStateToggle";
|
||||
import SpaceStore from "../../stores/SpaceStore";
|
||||
import FacePile from "../views/elements/FacePile";
|
||||
import {AddExistingToSpace} from "../views/dialogs/AddExistingToSpaceDialog";
|
||||
import {allSettled} from "../../utils/promise";
|
||||
import {calculateRoomVia} from "../../utils/permalinks/Permalinks";
|
||||
import {BetaPill} from "../views/beta/BetaCard";
|
||||
import {USER_LABS_TAB} from "../views/dialogs/UserSettingsDialog";
|
||||
import SettingsStore from "../../settings/SettingsStore";
|
||||
|
|
@ -399,7 +402,7 @@ const SpaceSetupFirstRooms = ({ space, title, description, onFinished }) => {
|
|||
let buttonLabel = _t("Skip for now");
|
||||
if (roomNames.some(name => name.trim())) {
|
||||
onClick = onNextClick;
|
||||
buttonLabel = busy ? _t("Creating rooms...") : _t("Continue")
|
||||
buttonLabel = busy ? _t("Creating rooms...") : _t("Continue");
|
||||
}
|
||||
|
||||
return <div>
|
||||
|
|
@ -421,6 +424,65 @@ const SpaceSetupFirstRooms = ({ space, title, description, onFinished }) => {
|
|||
</div>;
|
||||
};
|
||||
|
||||
const SpaceAddExistingRooms = ({ space, onFinished }) => {
|
||||
const [selectedToAdd, setSelectedToAdd] = useState(new Set<Room>());
|
||||
|
||||
const [busy, setBusy] = useState(false);
|
||||
const [error, setError] = useState("");
|
||||
|
||||
let onClick = onFinished;
|
||||
let buttonLabel = _t("Skip for now");
|
||||
if (selectedToAdd.size > 0) {
|
||||
onClick = async () => {
|
||||
// TODO rate limiting
|
||||
setBusy(true);
|
||||
try {
|
||||
await allSettled(Array.from(selectedToAdd).map((room) =>
|
||||
SpaceStore.instance.addRoomToSpace(space, room.roomId, calculateRoomVia(room))));
|
||||
onFinished(true);
|
||||
} catch (e) {
|
||||
console.error("Failed to add rooms to space", e);
|
||||
setError(_t("Failed to add rooms to space"));
|
||||
}
|
||||
setBusy(false);
|
||||
};
|
||||
buttonLabel = busy ? _t("Adding...") : _t("Add");
|
||||
}
|
||||
|
||||
return <div>
|
||||
<h1>{ _t("What do you want to organise?") }</h1>
|
||||
<div className="mx_SpaceRoomView_description">
|
||||
{ _t("Pick rooms or conversations to add. This is just a space for you, " +
|
||||
"no one will be informed. You can add more later.") }
|
||||
</div>
|
||||
|
||||
{ error && <div className="mx_SpaceRoomView_errorText">{ error }</div> }
|
||||
|
||||
<AddExistingToSpace
|
||||
space={space}
|
||||
selected={selectedToAdd}
|
||||
onChange={(checked, room) => {
|
||||
if (checked) {
|
||||
selectedToAdd.add(room);
|
||||
} else {
|
||||
selectedToAdd.delete(room);
|
||||
}
|
||||
setSelectedToAdd(new Set(selectedToAdd));
|
||||
}}
|
||||
/>
|
||||
|
||||
<div className="mx_SpaceRoomView_buttons">
|
||||
<AccessibleButton
|
||||
kind="primary"
|
||||
disabled={busy}
|
||||
onClick={onClick}
|
||||
>
|
||||
{ buttonLabel }
|
||||
</AccessibleButton>
|
||||
</div>
|
||||
</div>;
|
||||
};
|
||||
|
||||
const SpaceSetupPublicShare = ({ space, onFinished }) => {
|
||||
return <div className="mx_SpaceRoomView_publicShare">
|
||||
<h1>{ _t("Share %(name)s", { name: space.name }) }</h1>
|
||||
|
|
@ -718,7 +780,7 @@ export default class SpaceRoomView extends React.PureComponent<IProps, IState> {
|
|||
space={this.props.space}
|
||||
justCreatedOpts={this.props.justCreatedOpts}
|
||||
onFinished={(invite: boolean) => {
|
||||
this.setState({ phase: invite ? Phase.PrivateInvite : Phase.PrivateCreateRooms });
|
||||
this.setState({ phase: invite ? Phase.PrivateInvite : Phase.PrivateExistingRooms });
|
||||
}}
|
||||
/>;
|
||||
case Phase.PrivateInvite:
|
||||
|
|
@ -734,6 +796,11 @@ export default class SpaceRoomView extends React.PureComponent<IProps, IState> {
|
|||
"You can add more later too, including already existing ones.")}
|
||||
onFinished={() => this.setState({ phase: Phase.Landing })}
|
||||
/>;
|
||||
case Phase.PrivateExistingRooms:
|
||||
return <SpaceAddExistingRooms
|
||||
space={this.props.space}
|
||||
onFinished={() => this.setState({ phase: Phase.Landing })}
|
||||
/>;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
|
|||
limitations under the License.
|
||||
*/
|
||||
|
||||
import React, {useState} from "react";
|
||||
import React, {useContext, useState} from "react";
|
||||
import classNames from "classnames";
|
||||
import {Room} from "matrix-js-sdk/src/models/room";
|
||||
import {MatrixClient} from "matrix-js-sdk/src/client";
|
||||
|
|
@ -33,6 +33,7 @@ import {allSettled} from "../../../utils/promise";
|
|||
import DMRoomMap from "../../../utils/DMRoomMap";
|
||||
import {calculateRoomVia} from "../../../utils/permalinks/Permalinks";
|
||||
import StyledCheckbox from "../elements/StyledCheckbox";
|
||||
import MatrixClientContext from "../../../contexts/MatrixClientContext";
|
||||
|
||||
interface IProps extends IDialogProps {
|
||||
matrixClient: MatrixClient;
|
||||
|
|
@ -41,31 +42,35 @@ interface IProps extends IDialogProps {
|
|||
}
|
||||
|
||||
const Entry = ({ room, checked, onChange }) => {
|
||||
return <label className="mx_AddExistingToSpaceDialog_entry">
|
||||
return <label className="mx_AddExistingToSpace_entry">
|
||||
<RoomAvatar room={room} height={32} width={32} />
|
||||
<span className="mx_AddExistingToSpaceDialog_entry_name">{ room.name }</span>
|
||||
<span className="mx_AddExistingToSpace_entry_name">{ room.name }</span>
|
||||
<StyledCheckbox onChange={(e) => onChange(e.target.checked)} checked={checked} />
|
||||
</label>;
|
||||
};
|
||||
|
||||
const AddExistingToSpaceDialog: React.FC<IProps> = ({ matrixClient: cli, space, onCreateRoomClick, onFinished }) => {
|
||||
interface IAddExistingToSpaceProps {
|
||||
space: Room;
|
||||
selected: Set<Room>;
|
||||
onChange(checked: boolean, room: Room): void;
|
||||
}
|
||||
|
||||
export const AddExistingToSpace: React.FC<IAddExistingToSpaceProps> = ({ space, selected, onChange }) => {
|
||||
const cli = useContext(MatrixClientContext);
|
||||
const [query, setQuery] = useState("");
|
||||
const lcQuery = query.toLowerCase();
|
||||
|
||||
const [selectedSpace, setSelectedSpace] = useState(space);
|
||||
const [selectedToAdd, setSelectedToAdd] = useState(new Set<Room>());
|
||||
|
||||
const existingSubspaces = SpaceStore.instance.getChildSpaces(space.roomId);
|
||||
const existingSubspacesSet = new Set(existingSubspaces);
|
||||
const existingRoomsSet = new Set(SpaceStore.instance.getChildRooms(space.roomId));
|
||||
|
||||
const joinRule = selectedSpace.getJoinRule();
|
||||
const joinRule = space.getJoinRule();
|
||||
const [spaces, rooms, dms] = cli.getVisibleRooms().reduce((arr, room) => {
|
||||
if (room.getMyMembership() !== "join") return arr;
|
||||
if (!room.name.toLowerCase().includes(lcQuery)) return arr;
|
||||
|
||||
if (room.isSpaceRoom()) {
|
||||
if (room !== space && room !== selectedSpace && !existingSubspacesSet.has(room)) {
|
||||
if (room !== space && !existingSubspacesSet.has(room)) {
|
||||
arr[0].push(room);
|
||||
}
|
||||
} else if (!existingRoomsSet.has(room)) {
|
||||
|
|
@ -79,11 +84,80 @@ const AddExistingToSpaceDialog: React.FC<IProps> = ({ matrixClient: cli, space,
|
|||
return arr;
|
||||
}, [[], [], []]);
|
||||
|
||||
return <div className="mx_AddExistingToSpace">
|
||||
<SearchBox
|
||||
className="mx_textinput_icon mx_textinput_search"
|
||||
placeholder={ _t("Filter your rooms and spaces") }
|
||||
onSearch={setQuery}
|
||||
autoComplete={true}
|
||||
autoFocus={true}
|
||||
/>
|
||||
<AutoHideScrollbar className="mx_AddExistingToSpace_content" id="mx_AddExistingToSpace">
|
||||
{ rooms.length > 0 ? (
|
||||
<div className="mx_AddExistingToSpace_section">
|
||||
<h3>{ _t("Rooms") }</h3>
|
||||
{ rooms.map(room => {
|
||||
return <Entry
|
||||
key={room.roomId}
|
||||
room={room}
|
||||
checked={selected.has(room)}
|
||||
onChange={(checked) => {
|
||||
onChange(checked, room);
|
||||
}}
|
||||
/>;
|
||||
}) }
|
||||
</div>
|
||||
) : undefined }
|
||||
|
||||
{ spaces.length > 0 ? (
|
||||
<div className="mx_AddExistingToSpace_section mx_AddExistingToSpace_section_spaces">
|
||||
<h3>{ _t("Spaces") }</h3>
|
||||
{ spaces.map(space => {
|
||||
return <Entry
|
||||
key={space.roomId}
|
||||
room={space}
|
||||
checked={selected.has(space)}
|
||||
onChange={(checked) => {
|
||||
onChange(checked, space);
|
||||
}}
|
||||
/>;
|
||||
}) }
|
||||
</div>
|
||||
) : null }
|
||||
|
||||
{ dms.length > 0 ? (
|
||||
<div className="mx_AddExistingToSpace_section">
|
||||
<h3>{ _t("Direct Messages") }</h3>
|
||||
{ dms.map(room => {
|
||||
return <Entry
|
||||
key={room.roomId}
|
||||
room={room}
|
||||
checked={selected.has(room)}
|
||||
onChange={(checked) => {
|
||||
onChange(checked, room);
|
||||
}}
|
||||
/>;
|
||||
}) }
|
||||
</div>
|
||||
) : null }
|
||||
|
||||
{ spaces.length + rooms.length + dms.length < 1 ? <span className="mx_AddExistingToSpace_noResults">
|
||||
{ _t("No results") }
|
||||
</span> : undefined }
|
||||
</AutoHideScrollbar>
|
||||
</div>;
|
||||
};
|
||||
|
||||
const AddExistingToSpaceDialog: React.FC<IProps> = ({ matrixClient: cli, space, onCreateRoomClick, onFinished }) => {
|
||||
const [selectedSpace, setSelectedSpace] = useState(space);
|
||||
const existingSubspaces = SpaceStore.instance.getChildSpaces(space.roomId);
|
||||
const [selectedToAdd, setSelectedToAdd] = useState(new Set<Room>());
|
||||
|
||||
const [busy, setBusy] = useState(false);
|
||||
const [error, setError] = useState("");
|
||||
|
||||
let spaceOptionSection;
|
||||
if (existingSubspacesSet.size > 0) {
|
||||
if (existingSubspaces.length > 0) {
|
||||
const options = [space, ...existingSubspaces].map((space) => {
|
||||
const classes = classNames("mx_AddExistingToSpaceDialog_dropdownOption", {
|
||||
mx_AddExistingToSpaceDialog_dropdownOptionActive: space === selectedSpace,
|
||||
|
|
@ -123,87 +197,26 @@ const AddExistingToSpaceDialog: React.FC<IProps> = ({ matrixClient: cli, space,
|
|||
return <BaseDialog
|
||||
title={title}
|
||||
className="mx_AddExistingToSpaceDialog"
|
||||
contentId="mx_AddExistingToSpaceDialog"
|
||||
contentId="mx_AddExistingToSpace"
|
||||
onFinished={onFinished}
|
||||
fixedWidth={false}
|
||||
>
|
||||
{ error && <div className="mx_AddExistingToSpaceDialog_errorText">{ error }</div> }
|
||||
|
||||
<SearchBox
|
||||
className="mx_textinput_icon mx_textinput_search"
|
||||
placeholder={ _t("Filter your rooms and spaces") }
|
||||
onSearch={setQuery}
|
||||
autoComplete={true}
|
||||
autoFocus={true}
|
||||
/>
|
||||
<AutoHideScrollbar className="mx_AddExistingToSpaceDialog_content" id="mx_AddExistingToSpaceDialog">
|
||||
{ rooms.length > 0 ? (
|
||||
<div className="mx_AddExistingToSpaceDialog_section">
|
||||
<h3>{ _t("Rooms") }</h3>
|
||||
{ rooms.map(room => {
|
||||
return <Entry
|
||||
key={room.roomId}
|
||||
room={room}
|
||||
checked={selectedToAdd.has(room)}
|
||||
onChange={(checked) => {
|
||||
if (checked) {
|
||||
selectedToAdd.add(room);
|
||||
} else {
|
||||
selectedToAdd.delete(room);
|
||||
}
|
||||
setSelectedToAdd(new Set(selectedToAdd));
|
||||
}}
|
||||
/>;
|
||||
}) }
|
||||
</div>
|
||||
) : undefined }
|
||||
|
||||
{ spaces.length > 0 ? (
|
||||
<div className="mx_AddExistingToSpaceDialog_section mx_AddExistingToSpaceDialog_section_spaces">
|
||||
<h3>{ _t("Spaces") }</h3>
|
||||
{ spaces.map(space => {
|
||||
return <Entry
|
||||
key={space.roomId}
|
||||
room={space}
|
||||
checked={selectedToAdd.has(space)}
|
||||
onChange={(checked) => {
|
||||
if (checked) {
|
||||
selectedToAdd.add(space);
|
||||
} else {
|
||||
selectedToAdd.delete(space);
|
||||
}
|
||||
setSelectedToAdd(new Set(selectedToAdd));
|
||||
}}
|
||||
/>;
|
||||
}) }
|
||||
</div>
|
||||
) : null }
|
||||
|
||||
{ dms.length > 0 ? (
|
||||
<div className="mx_AddExistingToSpaceDialog_section">
|
||||
<h3>{ _t("Direct Messages") }</h3>
|
||||
{ dms.map(space => {
|
||||
return <Entry
|
||||
key={space.roomId}
|
||||
room={space}
|
||||
checked={selectedToAdd.has(space)}
|
||||
onChange={(checked) => {
|
||||
if (checked) {
|
||||
selectedToAdd.add(space);
|
||||
} else {
|
||||
selectedToAdd.delete(space);
|
||||
}
|
||||
setSelectedToAdd(new Set(selectedToAdd));
|
||||
}}
|
||||
/>;
|
||||
}) }
|
||||
</div>
|
||||
) : null }
|
||||
|
||||
{ spaces.length + rooms.length + dms.length < 1 ? <span className="mx_AddExistingToSpaceDialog_noResults">
|
||||
{ _t("No results") }
|
||||
</span> : undefined }
|
||||
</AutoHideScrollbar>
|
||||
<MatrixClientContext.Provider value={cli}>
|
||||
<AddExistingToSpace
|
||||
space={space}
|
||||
selected={selectedToAdd}
|
||||
onChange={(checked, room) => {
|
||||
if (checked) {
|
||||
selectedToAdd.add(room);
|
||||
} else {
|
||||
selectedToAdd.delete(room);
|
||||
}
|
||||
setSelectedToAdd(new Set(selectedToAdd));
|
||||
}}
|
||||
/>
|
||||
</MatrixClientContext.Provider>
|
||||
|
||||
<div className="mx_AddExistingToSpaceDialog_footer">
|
||||
<span>
|
||||
|
|
@ -217,6 +230,7 @@ const AddExistingToSpaceDialog: React.FC<IProps> = ({ matrixClient: cli, space,
|
|||
kind="primary"
|
||||
disabled={busy || selectedToAdd.size < 1}
|
||||
onClick={async () => {
|
||||
// TODO rate limiting
|
||||
setBusy(true);
|
||||
try {
|
||||
await allSettled(Array.from(selectedToAdd).map((room) =>
|
||||
|
|
|
|||
|
|
@ -198,6 +198,7 @@ interface IState {
|
|||
export default class MessageComposer extends React.Component<IProps, IState> {
|
||||
private dispatcherRef: string;
|
||||
private messageComposerInput: SendMessageComposer;
|
||||
private voiceRecordingButton: VoiceRecordComposerTile;
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
|
@ -322,7 +323,15 @@ export default class MessageComposer extends React.Component<IProps, IState> {
|
|||
});
|
||||
}
|
||||
|
||||
sendMessage = () => {
|
||||
sendMessage = async () => {
|
||||
if (this.state.haveRecording && this.voiceRecordingButton) {
|
||||
// There shouldn't be any text message to send when a voice recording is active, so
|
||||
// just send out the voice recording.
|
||||
await this.voiceRecordingButton.send();
|
||||
return;
|
||||
}
|
||||
|
||||
// XXX: Private function access
|
||||
this.messageComposerInput._sendMessage();
|
||||
}
|
||||
|
||||
|
|
@ -387,6 +396,7 @@ export default class MessageComposer extends React.Component<IProps, IState> {
|
|||
if (SettingsStore.getValue("feature_voice_messages")) {
|
||||
controls.push(<VoiceRecordComposerTile
|
||||
key="controls_voice_record"
|
||||
ref={c => this.voiceRecordingButton = c}
|
||||
room={this.props.room} />);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -763,7 +763,9 @@ export default class RoomSublist extends React.Component<IProps, IState> {
|
|||
'mx_RoomSublist': true,
|
||||
'mx_RoomSublist_hasMenuOpen': !!this.state.contextMenuPosition,
|
||||
'mx_RoomSublist_minimized': this.props.isMinimized,
|
||||
'mx_RoomSublist_hidden': !this.state.rooms.length && this.props.alwaysVisible !== true,
|
||||
'mx_RoomSublist_hidden': (
|
||||
!this.state.rooms.length && !this.props.extraTiles?.length && this.props.alwaysVisible !== true
|
||||
),
|
||||
});
|
||||
|
||||
let content = null;
|
||||
|
|
|
|||
|
|
@ -506,9 +506,8 @@ export default class SendMessageComposer extends React.Component {
|
|||
member.rawDisplayName : userId;
|
||||
const caret = this._editorRef.getCaret();
|
||||
const position = model.positionForOffset(caret.offset, caret.atNodeEnd);
|
||||
// index is -1 if there are no parts but we only care for if this would be the part in position 0
|
||||
const insertIndex = position.index > 0 ? position.index : 0;
|
||||
const parts = partCreator.createMentionParts(insertIndex, displayName, userId);
|
||||
// Insert suffix only if the caret is at the start of the composer
|
||||
const parts = partCreator.createMentionParts(caret.offset === 0, displayName, userId);
|
||||
model.transform(() => {
|
||||
const addedLen = model.insert(parts, position);
|
||||
return model.positionForOffset(caret.offset + addedLen, true);
|
||||
|
|
|
|||
|
|
@ -16,8 +16,8 @@ limitations under the License.
|
|||
|
||||
import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
|
||||
import {_t} from "../../../languageHandler";
|
||||
import React from "react";
|
||||
import {VoiceRecording} from "../../../voice/VoiceRecording";
|
||||
import React, {ReactNode} from "react";
|
||||
import {RecordingState, VoiceRecording} from "../../../voice/VoiceRecording";
|
||||
import {Room} from "matrix-js-sdk/src/models/room";
|
||||
import {MatrixClientPeg} from "../../../MatrixClientPeg";
|
||||
import classNames from "classnames";
|
||||
|
|
@ -25,6 +25,8 @@ import LiveRecordingWaveform from "../voice_messages/LiveRecordingWaveform";
|
|||
import {replaceableComponent} from "../../../utils/replaceableComponent";
|
||||
import LiveRecordingClock from "../voice_messages/LiveRecordingClock";
|
||||
import {VoiceRecordingStore} from "../../../stores/VoiceRecordingStore";
|
||||
import {UPDATE_EVENT} from "../../../stores/AsyncStore";
|
||||
import RecordingPlayback from "../voice_messages/RecordingPlayback";
|
||||
|
||||
interface IProps {
|
||||
room: Room;
|
||||
|
|
@ -32,6 +34,7 @@ interface IProps {
|
|||
|
||||
interface IState {
|
||||
recorder?: VoiceRecording;
|
||||
recordingPhase?: RecordingState;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -43,87 +46,141 @@ export default class VoiceRecordComposerTile extends React.PureComponent<IProps,
|
|||
super(props);
|
||||
|
||||
this.state = {
|
||||
recorder: null, // not recording by default
|
||||
recorder: null, // no recording started by default
|
||||
};
|
||||
}
|
||||
|
||||
private onStartStopVoiceMessage = async () => {
|
||||
// TODO: @@ TravisR: We do not want to auto-send on stop.
|
||||
public async componentWillUnmount() {
|
||||
await VoiceRecordingStore.instance.disposeRecording();
|
||||
}
|
||||
|
||||
// called by composer
|
||||
public async send() {
|
||||
if (!this.state.recorder) {
|
||||
throw new Error("No recording started - cannot send anything");
|
||||
}
|
||||
|
||||
await this.state.recorder.stop();
|
||||
const mxc = await this.state.recorder.upload();
|
||||
MatrixClientPeg.get().sendMessage(this.props.room.roomId, {
|
||||
"body": "Voice message",
|
||||
"msgtype": "org.matrix.msc2516.voice",
|
||||
//"msgtype": MsgType.Audio,
|
||||
"url": mxc,
|
||||
"info": {
|
||||
duration: Math.round(this.state.recorder.durationSeconds * 1000),
|
||||
mimetype: this.state.recorder.contentType,
|
||||
size: this.state.recorder.contentLength,
|
||||
},
|
||||
|
||||
// MSC1767 experiment
|
||||
"org.matrix.msc1767.text": "Voice message",
|
||||
"org.matrix.msc1767.file": {
|
||||
url: mxc,
|
||||
name: "Voice message.ogg",
|
||||
mimetype: this.state.recorder.contentType,
|
||||
size: this.state.recorder.contentLength,
|
||||
},
|
||||
"org.matrix.msc1767.audio": {
|
||||
duration: Math.round(this.state.recorder.durationSeconds * 1000),
|
||||
// TODO: @@ TravisR: Waveform? (MSC1767 decision)
|
||||
},
|
||||
"org.matrix.experimental.msc2516.voice": { // MSC2516+MSC1767 experiment
|
||||
duration: Math.round(this.state.recorder.durationSeconds * 1000),
|
||||
|
||||
// Events can't have floats, so we try to maintain resolution by using 1024
|
||||
// as a maximum value. The waveform contains values between zero and 1, so this
|
||||
// should come out largely sane.
|
||||
//
|
||||
// We're expecting about one data point per second of audio.
|
||||
waveform: this.state.recorder.getPlayback().waveform.map(v => Math.round(v * 1024)),
|
||||
},
|
||||
});
|
||||
await this.disposeRecording();
|
||||
}
|
||||
|
||||
private async disposeRecording() {
|
||||
await VoiceRecordingStore.instance.disposeRecording();
|
||||
|
||||
// Reset back to no recording, which means no phase (ie: restart component entirely)
|
||||
this.setState({recorder: null, recordingPhase: null});
|
||||
}
|
||||
|
||||
private onCancel = async () => {
|
||||
await this.disposeRecording();
|
||||
};
|
||||
|
||||
private onRecordStartEndClick = async () => {
|
||||
if (this.state.recorder) {
|
||||
await this.state.recorder.stop();
|
||||
const mxc = await this.state.recorder.upload();
|
||||
MatrixClientPeg.get().sendMessage(this.props.room.roomId, {
|
||||
"body": "Voice message",
|
||||
"msgtype": "org.matrix.msc2516.voice",
|
||||
//"msgtype": MsgType.Audio,
|
||||
"url": mxc,
|
||||
"info": {
|
||||
duration: Math.round(this.state.recorder.durationSeconds * 1000),
|
||||
mimetype: this.state.recorder.contentType,
|
||||
size: this.state.recorder.contentLength,
|
||||
},
|
||||
|
||||
// MSC1767 experiment
|
||||
"org.matrix.msc1767.text": "Voice message",
|
||||
"org.matrix.msc1767.file": {
|
||||
url: mxc,
|
||||
name: "Voice message.ogg",
|
||||
mimetype: this.state.recorder.contentType,
|
||||
size: this.state.recorder.contentLength,
|
||||
},
|
||||
"org.matrix.msc1767.audio": {
|
||||
duration: Math.round(this.state.recorder.durationSeconds * 1000),
|
||||
// TODO: @@ TravisR: Waveform? (MSC1767 decision)
|
||||
},
|
||||
"org.matrix.experimental.msc2516.voice": { // MSC2516+MSC1767 experiment
|
||||
duration: Math.round(this.state.recorder.durationSeconds * 1000),
|
||||
|
||||
// Events can't have floats, so we try to maintain resolution by using 1024
|
||||
// as a maximum value. The waveform contains values between zero and 1, so this
|
||||
// should come out largely sane.
|
||||
//
|
||||
// We're expecting about one data point per second of audio.
|
||||
waveform: this.state.recorder.finalWaveform.map(v => Math.round(v * 1024)),
|
||||
},
|
||||
});
|
||||
await VoiceRecordingStore.instance.disposeRecording();
|
||||
this.setState({recorder: null});
|
||||
return;
|
||||
}
|
||||
const recorder = VoiceRecordingStore.instance.startRecording();
|
||||
await recorder.start();
|
||||
this.setState({recorder});
|
||||
|
||||
// We don't need to remove the listener: the recorder will clean that up for us.
|
||||
recorder.on(UPDATE_EVENT, (ev: RecordingState) => {
|
||||
if (ev === RecordingState.EndingSoon) return; // ignore this state: it has no UI purpose here
|
||||
this.setState({recordingPhase: ev});
|
||||
});
|
||||
|
||||
this.setState({recorder, recordingPhase: RecordingState.Started});
|
||||
};
|
||||
|
||||
private renderWaveformArea() {
|
||||
if (!this.state.recorder) return null;
|
||||
private renderWaveformArea(): ReactNode {
|
||||
if (!this.state.recorder) return null; // no recorder means we're not recording: no waveform
|
||||
|
||||
return <div className='mx_VoiceRecordComposerTile_waveformContainer'>
|
||||
if (this.state.recordingPhase !== RecordingState.Started) {
|
||||
// TODO: @@ TR: Should we disable this during upload? What does a failed upload look like?
|
||||
return <RecordingPlayback playback={this.state.recorder.getPlayback()} />;
|
||||
}
|
||||
|
||||
// only other UI is the recording-in-progress UI
|
||||
return <div className="mx_VoiceMessagePrimaryContainer mx_VoiceRecordComposerTile_recording">
|
||||
<LiveRecordingClock recorder={this.state.recorder} />
|
||||
<LiveRecordingWaveform recorder={this.state.recorder} />
|
||||
</div>;
|
||||
}
|
||||
|
||||
public render() {
|
||||
const classes = classNames({
|
||||
'mx_MessageComposer_button': !this.state.recorder,
|
||||
'mx_MessageComposer_voiceMessage': !this.state.recorder,
|
||||
'mx_VoiceRecordComposerTile_stop': !!this.state.recorder,
|
||||
});
|
||||
public render(): ReactNode {
|
||||
let recordingInfo;
|
||||
let deleteButton;
|
||||
if (!this.state.recordingPhase || this.state.recordingPhase === RecordingState.Started) {
|
||||
const classes = classNames({
|
||||
'mx_MessageComposer_button': !this.state.recorder,
|
||||
'mx_MessageComposer_voiceMessage': !this.state.recorder,
|
||||
'mx_VoiceRecordComposerTile_stop': this.state.recorder?.isRecording,
|
||||
});
|
||||
|
||||
let tooltip = _t("Record a voice message");
|
||||
if (!!this.state.recorder) {
|
||||
// TODO: @@ TravisR: Change to match behaviour
|
||||
tooltip = _t("Stop & send recording");
|
||||
let tooltip = _t("Record a voice message");
|
||||
if (!!this.state.recorder) {
|
||||
tooltip = _t("Stop the recording");
|
||||
}
|
||||
|
||||
let stopOrRecordBtn = <AccessibleTooltipButton
|
||||
className={classes}
|
||||
onClick={this.onRecordStartEndClick}
|
||||
title={tooltip}
|
||||
/>;
|
||||
if (this.state.recorder && !this.state.recorder?.isRecording) {
|
||||
stopOrRecordBtn = null;
|
||||
}
|
||||
|
||||
recordingInfo = stopOrRecordBtn;
|
||||
}
|
||||
|
||||
if (this.state.recorder && this.state.recordingPhase !== RecordingState.Uploading) {
|
||||
deleteButton = <AccessibleTooltipButton
|
||||
className='mx_VoiceRecordComposerTile_delete'
|
||||
title={_t("Delete recording")}
|
||||
onClick={this.onCancel}
|
||||
/>;
|
||||
}
|
||||
|
||||
return (<>
|
||||
{deleteButton}
|
||||
{this.renderWaveformArea()}
|
||||
<AccessibleTooltipButton
|
||||
className={classes}
|
||||
onClick={this.onStartStopVoiceMessage}
|
||||
title={tooltip}
|
||||
/>
|
||||
{recordingInfo}
|
||||
</>);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -192,7 +192,11 @@ export default class GeneralUserSettingsTab extends React.Component {
|
|||
|
||||
SettingsStore.setValue("language", null, SettingLevel.DEVICE, newLanguage);
|
||||
this.setState({language: newLanguage});
|
||||
PlatformPeg.get().reload();
|
||||
const platform = PlatformPeg.get();
|
||||
if (platform) {
|
||||
platform.setLanguage(newLanguage);
|
||||
platform.reload();
|
||||
}
|
||||
};
|
||||
|
||||
_onSpellCheckLanguagesChange = (languages) => {
|
||||
|
|
|
|||
|
|
@ -255,10 +255,9 @@ export default class SecurityUserSettingsTab extends React.Component {
|
|||
_renderIgnoredUsers() {
|
||||
const {waitingUnignored, ignoredUserIds} = this.state;
|
||||
|
||||
if (!ignoredUserIds || ignoredUserIds.length === 0) return null;
|
||||
|
||||
const userIds = ignoredUserIds
|
||||
.map((u) => <IgnoredUser
|
||||
const userIds = !ignoredUserIds?.length
|
||||
? _t('You have no ignored users.')
|
||||
: ignoredUserIds.map((u) => <IgnoredUser
|
||||
userId={u}
|
||||
onUnignored={this._onUserUnignored}
|
||||
key={u}
|
||||
|
|
|
|||
|
|
@ -29,14 +29,20 @@ interface IState {
|
|||
* displayed, making it possible to see "82:29".
|
||||
*/
|
||||
@replaceableComponent("views.voice_messages.Clock")
|
||||
export default class Clock extends React.PureComponent<IProps, IState> {
|
||||
export default class Clock extends React.Component<IProps, IState> {
|
||||
public constructor(props) {
|
||||
super(props);
|
||||
}
|
||||
|
||||
shouldComponentUpdate(nextProps: Readonly<IProps>, nextState: Readonly<IState>, nextContext: any): boolean {
|
||||
const currentFloor = Math.floor(this.props.seconds);
|
||||
const nextFloor = Math.floor(nextProps.seconds);
|
||||
return currentFloor !== nextFloor;
|
||||
}
|
||||
|
||||
public render() {
|
||||
const minutes = Math.floor(this.props.seconds / 60).toFixed(0).padStart(2, '0');
|
||||
const seconds = Math.round(this.props.seconds % 60).toFixed(0).padStart(2, '0'); // hide millis
|
||||
const seconds = Math.floor(this.props.seconds % 60).toFixed(0).padStart(2, '0'); // hide millis
|
||||
return <span className='mx_Clock'>{minutes}:{seconds}</span>;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@ interface IState {
|
|||
* A clock for a live recording.
|
||||
*/
|
||||
@replaceableComponent("views.voice_messages.LiveRecordingClock")
|
||||
export default class LiveRecordingClock extends React.Component<IProps, IState> {
|
||||
export default class LiveRecordingClock extends React.PureComponent<IProps, IState> {
|
||||
public constructor(props) {
|
||||
super(props);
|
||||
|
||||
|
|
@ -39,12 +39,6 @@ export default class LiveRecordingClock extends React.Component<IProps, IState>
|
|||
this.props.recorder.liveData.onUpdate(this.onRecordingUpdate);
|
||||
}
|
||||
|
||||
shouldComponentUpdate(nextProps: Readonly<IProps>, nextState: Readonly<IState>, nextContext: any): boolean {
|
||||
const currentFloor = Math.floor(this.state.seconds);
|
||||
const nextFloor = Math.floor(nextState.seconds);
|
||||
return currentFloor !== nextFloor;
|
||||
}
|
||||
|
||||
private onRecordingUpdate = (update: IRecordingUpdate) => {
|
||||
this.setState({seconds: update.timeSeconds});
|
||||
};
|
||||
|
|
|
|||
|
|
@ -20,6 +20,7 @@ import {replaceableComponent} from "../../../utils/replaceableComponent";
|
|||
import {arrayFastResample, arraySeed} from "../../../utils/arrays";
|
||||
import {percentageOf} from "../../../utils/numbers";
|
||||
import Waveform from "./Waveform";
|
||||
import {PLAYBACK_WAVEFORM_SAMPLES} from "../../../voice/Playback";
|
||||
|
||||
interface IProps {
|
||||
recorder: VoiceRecording;
|
||||
|
|
@ -29,8 +30,6 @@ interface IState {
|
|||
heights: number[];
|
||||
}
|
||||
|
||||
const DOWNSAMPLE_TARGET = 35; // number of bars we want
|
||||
|
||||
/**
|
||||
* A waveform which shows the waveform of a live recording
|
||||
*/
|
||||
|
|
@ -39,14 +38,14 @@ export default class LiveRecordingWaveform extends React.PureComponent<IProps, I
|
|||
public constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {heights: arraySeed(0, DOWNSAMPLE_TARGET)};
|
||||
this.state = {heights: arraySeed(0, PLAYBACK_WAVEFORM_SAMPLES)};
|
||||
this.props.recorder.liveData.onUpdate(this.onRecordingUpdate);
|
||||
}
|
||||
|
||||
private onRecordingUpdate = (update: IRecordingUpdate) => {
|
||||
// The waveform and the downsample target are pretty close, so we should be fine to
|
||||
// do this, despite the docs on arrayFastResample.
|
||||
const bars = arrayFastResample(Array.from(update.waveform), DOWNSAMPLE_TARGET);
|
||||
const bars = arrayFastResample(Array.from(update.waveform), PLAYBACK_WAVEFORM_SAMPLES);
|
||||
this.setState({
|
||||
// The incoming data is between zero and one, but typically even screaming into a
|
||||
// microphone won't send you over 0.6, so we artificially adjust the gain for the
|
||||
|
|
|
|||
61
src/components/views/voice_messages/PlayPauseButton.tsx
Normal file
61
src/components/views/voice_messages/PlayPauseButton.tsx
Normal file
|
|
@ -0,0 +1,61 @@
|
|||
/*
|
||||
Copyright 2021 The Matrix.org Foundation C.I.C.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
import React, {ReactNode} from "react";
|
||||
import {replaceableComponent} from "../../../utils/replaceableComponent";
|
||||
import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
|
||||
import {_t} from "../../../languageHandler";
|
||||
import {Playback, PlaybackState} from "../../../voice/Playback";
|
||||
import classNames from "classnames";
|
||||
|
||||
interface IProps {
|
||||
// Playback instance to manipulate. Cannot change during the component lifecycle.
|
||||
playback: Playback;
|
||||
|
||||
// The playback phase to render. Able to change during the component lifecycle.
|
||||
playbackPhase: PlaybackState;
|
||||
}
|
||||
|
||||
/**
|
||||
* Displays a play/pause button (activating the play/pause function of the recorder)
|
||||
* to be displayed in reference to a recording.
|
||||
*/
|
||||
@replaceableComponent("views.voice_messages.PlayPauseButton")
|
||||
export default class PlayPauseButton extends React.PureComponent<IProps> {
|
||||
public constructor(props) {
|
||||
super(props);
|
||||
}
|
||||
|
||||
private onClick = async () => {
|
||||
await this.props.playback.toggle();
|
||||
};
|
||||
|
||||
public render(): ReactNode {
|
||||
const isPlaying = this.props.playback.isPlaying;
|
||||
const isDisabled = this.props.playbackPhase === PlaybackState.Decoding;
|
||||
const classes = classNames('mx_PlayPauseButton', {
|
||||
'mx_PlayPauseButton_play': !isPlaying,
|
||||
'mx_PlayPauseButton_pause': isPlaying,
|
||||
'mx_PlayPauseButton_disabled': isDisabled,
|
||||
});
|
||||
return <AccessibleTooltipButton
|
||||
className={classes}
|
||||
title={isPlaying ? _t("Pause") : _t("Play")}
|
||||
onClick={this.onClick}
|
||||
disabled={isDisabled}
|
||||
/>;
|
||||
}
|
||||
}
|
||||
71
src/components/views/voice_messages/PlaybackClock.tsx
Normal file
71
src/components/views/voice_messages/PlaybackClock.tsx
Normal file
|
|
@ -0,0 +1,71 @@
|
|||
/*
|
||||
Copyright 2021 The Matrix.org Foundation C.I.C.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
import React from "react";
|
||||
import {replaceableComponent} from "../../../utils/replaceableComponent";
|
||||
import Clock from "./Clock";
|
||||
import {Playback, PlaybackState} from "../../../voice/Playback";
|
||||
import {UPDATE_EVENT} from "../../../stores/AsyncStore";
|
||||
|
||||
interface IProps {
|
||||
playback: Playback;
|
||||
}
|
||||
|
||||
interface IState {
|
||||
seconds: number;
|
||||
durationSeconds: number;
|
||||
playbackPhase: PlaybackState;
|
||||
}
|
||||
|
||||
/**
|
||||
* A clock for a playback of a recording.
|
||||
*/
|
||||
@replaceableComponent("views.voice_messages.PlaybackClock")
|
||||
export default class PlaybackClock extends React.PureComponent<IProps, IState> {
|
||||
public constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
seconds: this.props.playback.clockInfo.timeSeconds,
|
||||
// we track the duration on state because we won't really know what the clip duration
|
||||
// is until the first time update, and as a PureComponent we are trying to dedupe state
|
||||
// updates as much as possible. This is just the easiest way to avoid a forceUpdate() or
|
||||
// member property to track "did we get a duration".
|
||||
durationSeconds: this.props.playback.clockInfo.durationSeconds,
|
||||
playbackPhase: PlaybackState.Stopped, // assume not started, so full clock
|
||||
};
|
||||
this.props.playback.on(UPDATE_EVENT, this.onPlaybackUpdate);
|
||||
this.props.playback.clockInfo.liveData.onUpdate(this.onTimeUpdate);
|
||||
}
|
||||
|
||||
private onPlaybackUpdate = (ev: PlaybackState) => {
|
||||
// Convert Decoding -> Stopped because we don't care about the distinction here
|
||||
if (ev === PlaybackState.Decoding) ev = PlaybackState.Stopped;
|
||||
this.setState({playbackPhase: ev});
|
||||
};
|
||||
|
||||
private onTimeUpdate = (time: number[]) => {
|
||||
this.setState({seconds: time[0], durationSeconds: time[1]});
|
||||
};
|
||||
|
||||
public render() {
|
||||
let seconds = this.state.seconds;
|
||||
if (this.state.playbackPhase === PlaybackState.Stopped) {
|
||||
seconds = this.state.durationSeconds;
|
||||
}
|
||||
return <Clock seconds={seconds} />;
|
||||
}
|
||||
}
|
||||
68
src/components/views/voice_messages/PlaybackWaveform.tsx
Normal file
68
src/components/views/voice_messages/PlaybackWaveform.tsx
Normal file
|
|
@ -0,0 +1,68 @@
|
|||
/*
|
||||
Copyright 2021 The Matrix.org Foundation C.I.C.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
import React from "react";
|
||||
import {replaceableComponent} from "../../../utils/replaceableComponent";
|
||||
import {arraySeed, arrayTrimFill} from "../../../utils/arrays";
|
||||
import Waveform from "./Waveform";
|
||||
import {Playback, PLAYBACK_WAVEFORM_SAMPLES} from "../../../voice/Playback";
|
||||
import {percentageOf} from "../../../utils/numbers";
|
||||
|
||||
interface IProps {
|
||||
playback: Playback;
|
||||
}
|
||||
|
||||
interface IState {
|
||||
heights: number[];
|
||||
progress: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* A waveform which shows the waveform of a previously recorded recording
|
||||
*/
|
||||
@replaceableComponent("views.voice_messages.PlaybackWaveform")
|
||||
export default class PlaybackWaveform extends React.PureComponent<IProps, IState> {
|
||||
public constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
heights: this.toHeights(this.props.playback.waveform),
|
||||
progress: 0, // default no progress
|
||||
};
|
||||
|
||||
this.props.playback.waveformData.onUpdate(this.onWaveformUpdate);
|
||||
this.props.playback.clockInfo.liveData.onUpdate(this.onTimeUpdate);
|
||||
}
|
||||
|
||||
private toHeights(waveform: number[]) {
|
||||
const seed = arraySeed(0, PLAYBACK_WAVEFORM_SAMPLES);
|
||||
return arrayTrimFill(waveform, PLAYBACK_WAVEFORM_SAMPLES, seed);
|
||||
}
|
||||
|
||||
private onWaveformUpdate = (waveform: number[]) => {
|
||||
this.setState({heights: this.toHeights(waveform)});
|
||||
};
|
||||
|
||||
private onTimeUpdate = (time: number[]) => {
|
||||
// Track percentages to very coarse precision, otherwise 0.002 ends up highlighting a bar.
|
||||
const progress = Number(percentageOf(time[0], 0, time[1]).toFixed(1));
|
||||
this.setState({progress});
|
||||
};
|
||||
|
||||
public render() {
|
||||
return <Waveform relHeights={this.state.heights} progress={this.state.progress} />;
|
||||
}
|
||||
}
|
||||
62
src/components/views/voice_messages/RecordingPlayback.tsx
Normal file
62
src/components/views/voice_messages/RecordingPlayback.tsx
Normal file
|
|
@ -0,0 +1,62 @@
|
|||
/*
|
||||
Copyright 2021 The Matrix.org Foundation C.I.C.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
import {Playback, PlaybackState} from "../../../voice/Playback";
|
||||
import React, {ReactNode} from "react";
|
||||
import {UPDATE_EVENT} from "../../../stores/AsyncStore";
|
||||
import PlaybackWaveform from "./PlaybackWaveform";
|
||||
import PlayPauseButton from "./PlayPauseButton";
|
||||
import PlaybackClock from "./PlaybackClock";
|
||||
|
||||
interface IProps {
|
||||
// Playback instance to render. Cannot change during component lifecycle: create
|
||||
// an all-new component instead.
|
||||
playback: Playback;
|
||||
}
|
||||
|
||||
interface IState {
|
||||
playbackPhase: PlaybackState;
|
||||
}
|
||||
|
||||
export default class RecordingPlayback extends React.PureComponent<IProps, IState> {
|
||||
constructor(props: IProps) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
playbackPhase: PlaybackState.Decoding, // default assumption
|
||||
};
|
||||
|
||||
// We don't need to de-register: the class handles this for us internally
|
||||
this.props.playback.on(UPDATE_EVENT, this.onPlaybackUpdate);
|
||||
|
||||
// Don't wait for the promise to complete - it will emit a progress update when it
|
||||
// is done, and it's not meant to take long anyhow.
|
||||
// noinspection JSIgnoredPromiseFromCall
|
||||
this.props.playback.prepare();
|
||||
}
|
||||
|
||||
private onPlaybackUpdate = (ev: PlaybackState) => {
|
||||
this.setState({playbackPhase: ev});
|
||||
};
|
||||
|
||||
public render(): ReactNode {
|
||||
return <div className='mx_VoiceMessagePrimaryContainer'>
|
||||
<PlayPauseButton playback={this.props.playback} playbackPhase={this.state.playbackPhase} />
|
||||
<PlaybackClock playback={this.props.playback} />
|
||||
<PlaybackWaveform playback={this.props.playback} />
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
|
@ -16,9 +16,11 @@ limitations under the License.
|
|||
|
||||
import React from "react";
|
||||
import {replaceableComponent} from "../../../utils/replaceableComponent";
|
||||
import classNames from "classnames";
|
||||
|
||||
interface IProps {
|
||||
relHeights: number[]; // relative heights (0-1)
|
||||
progress: number; // percent complete, 0-1, default 100%
|
||||
}
|
||||
|
||||
interface IState {
|
||||
|
|
@ -28,9 +30,16 @@ interface IState {
|
|||
* A simple waveform component. This renders bars (centered vertically) for each
|
||||
* height provided in the component properties. Updating the properties will update
|
||||
* the rendered waveform.
|
||||
*
|
||||
* For CSS purposes, a mx_Waveform_bar_100pct class is added when the bar should be
|
||||
* "filled", as a demonstration of the progress property.
|
||||
*/
|
||||
@replaceableComponent("views.voice_messages.Waveform")
|
||||
export default class Waveform extends React.PureComponent<IProps, IState> {
|
||||
public static defaultProps = {
|
||||
progress: 1,
|
||||
};
|
||||
|
||||
public constructor(props) {
|
||||
super(props);
|
||||
}
|
||||
|
|
@ -38,7 +47,13 @@ export default class Waveform extends React.PureComponent<IProps, IState> {
|
|||
public render() {
|
||||
return <div className='mx_Waveform'>
|
||||
{this.props.relHeights.map((h, i) => {
|
||||
return <span key={i} style={{height: (h * 100) + '%'}} className='mx_Waveform_bar' />;
|
||||
const progress = this.props.progress;
|
||||
const isCompleteBar = (i / this.props.relHeights.length) <= progress && progress > 0;
|
||||
const classes = classNames({
|
||||
'mx_Waveform_bar': true,
|
||||
'mx_Waveform_bar_100pct': isCompleteBar,
|
||||
});
|
||||
return <span key={i} style={{height: (h * 100) + '%'}} className={classes} />;
|
||||
})}
|
||||
</div>;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -27,6 +27,7 @@ import SettingsStore from "../../../settings/SettingsStore";
|
|||
import { CallEvent, CallState, MatrixCall } from 'matrix-js-sdk/src/webrtc/call';
|
||||
import { MatrixClientPeg } from '../../../MatrixClientPeg';
|
||||
import {replaceableComponent} from "../../../utils/replaceableComponent";
|
||||
import { Action } from '../../../dispatcher/actions';
|
||||
|
||||
const SHOW_CALL_IN_STATES = [
|
||||
CallState.Connected,
|
||||
|
|
@ -142,6 +143,7 @@ export default class CallPreview extends React.Component<IProps, IState> {
|
|||
switch (payload.action) {
|
||||
// listen for call state changes to prod the render method, which
|
||||
// may hide the global CallView if the call it is tracking is dead
|
||||
case Action.CallChangeRoom:
|
||||
case 'call_state': {
|
||||
const [primaryCall, secondaryCalls] = getPrimarySecondaryCalls(
|
||||
CallHandler.sharedInstance().getAllActiveCallsNotInRoom(this.state.roomId),
|
||||
|
|
|
|||
|
|
@ -208,7 +208,7 @@ export default class CallView extends React.Component<IProps, IState> {
|
|||
};
|
||||
|
||||
private onExpandClick = () => {
|
||||
const userFacingRoomId = CallHandler.roomIdForCall(this.props.call);
|
||||
const userFacingRoomId = CallHandler.sharedInstance().roomIdForCall(this.props.call);
|
||||
dis.dispatch({
|
||||
action: 'view_room',
|
||||
room_id: userFacingRoomId,
|
||||
|
|
@ -337,7 +337,7 @@ export default class CallView extends React.Component<IProps, IState> {
|
|||
};
|
||||
|
||||
private onRoomAvatarClick = () => {
|
||||
const userFacingRoomId = CallHandler.roomIdForCall(this.props.call);
|
||||
const userFacingRoomId = CallHandler.sharedInstance().roomIdForCall(this.props.call);
|
||||
dis.dispatch({
|
||||
action: 'view_room',
|
||||
room_id: userFacingRoomId,
|
||||
|
|
@ -345,7 +345,7 @@ export default class CallView extends React.Component<IProps, IState> {
|
|||
}
|
||||
|
||||
private onSecondaryRoomAvatarClick = () => {
|
||||
const userFacingRoomId = CallHandler.roomIdForCall(this.props.secondaryCall);
|
||||
const userFacingRoomId = CallHandler.sharedInstance().roomIdForCall(this.props.secondaryCall);
|
||||
|
||||
dis.dispatch({
|
||||
action: 'view_room',
|
||||
|
|
@ -354,7 +354,7 @@ export default class CallView extends React.Component<IProps, IState> {
|
|||
}
|
||||
|
||||
private onCallResumeClick = () => {
|
||||
const userFacingRoomId = CallHandler.roomIdForCall(this.props.call);
|
||||
const userFacingRoomId = CallHandler.sharedInstance().roomIdForCall(this.props.call);
|
||||
CallHandler.sharedInstance().setActiveCallRoomId(userFacingRoomId);
|
||||
}
|
||||
|
||||
|
|
@ -365,8 +365,8 @@ export default class CallView extends React.Component<IProps, IState> {
|
|||
|
||||
public render() {
|
||||
const client = MatrixClientPeg.get();
|
||||
const callRoomId = CallHandler.roomIdForCall(this.props.call);
|
||||
const secondaryCallRoomId = CallHandler.roomIdForCall(this.props.secondaryCall);
|
||||
const callRoomId = CallHandler.sharedInstance().roomIdForCall(this.props.call);
|
||||
const secondaryCallRoomId = CallHandler.sharedInstance().roomIdForCall(this.props.secondaryCall);
|
||||
const callRoom = client.getRoom(callRoomId);
|
||||
const secCallRoom = this.props.secondaryCall ? client.getRoom(secondaryCallRoomId) : null;
|
||||
|
||||
|
|
@ -482,11 +482,13 @@ export default class CallView extends React.Component<IProps, IState> {
|
|||
const isOnHold = this.state.isLocalOnHold || this.state.isRemoteOnHold;
|
||||
let holdTransferContent;
|
||||
if (transfereeCall) {
|
||||
const transferTargetRoom = MatrixClientPeg.get().getRoom(CallHandler.roomIdForCall(this.props.call));
|
||||
const transferTargetRoom = MatrixClientPeg.get().getRoom(
|
||||
CallHandler.sharedInstance().roomIdForCall(this.props.call),
|
||||
);
|
||||
const transferTargetName = transferTargetRoom ? transferTargetRoom.name : _t("unknown person");
|
||||
|
||||
const transfereeRoom = MatrixClientPeg.get().getRoom(
|
||||
CallHandler.roomIdForCall(transfereeCall),
|
||||
CallHandler.sharedInstance().roomIdForCall(transfereeCall),
|
||||
);
|
||||
const transfereeName = transfereeRoom ? transfereeRoom.name : _t("unknown person");
|
||||
|
||||
|
|
|
|||
|
|
@ -22,6 +22,7 @@ import dis from '../../../dispatcher/dispatcher';
|
|||
import {Resizable} from "re-resizable";
|
||||
import ResizeNotifier from "../../../utils/ResizeNotifier";
|
||||
import {replaceableComponent} from "../../../utils/replaceableComponent";
|
||||
import { Action } from '../../../dispatcher/actions';
|
||||
|
||||
interface IProps {
|
||||
// What room we should display the call for
|
||||
|
|
@ -62,6 +63,7 @@ export default class CallViewForRoom extends React.Component<IProps, IState> {
|
|||
|
||||
private onAction = (payload) => {
|
||||
switch (payload.action) {
|
||||
case Action.CallChangeRoom:
|
||||
case 'call_state': {
|
||||
const newCall = this.getCall();
|
||||
if (newCall !== this.state.call) {
|
||||
|
|
|
|||
|
|
@ -72,7 +72,7 @@ export default class IncomingCallBox extends React.Component<IProps, IState> {
|
|||
e.stopPropagation();
|
||||
dis.dispatch({
|
||||
action: 'answer',
|
||||
room_id: CallHandler.roomIdForCall(this.state.incomingCall),
|
||||
room_id: CallHandler.sharedInstance().roomIdForCall(this.state.incomingCall),
|
||||
});
|
||||
};
|
||||
|
||||
|
|
@ -80,7 +80,7 @@ export default class IncomingCallBox extends React.Component<IProps, IState> {
|
|||
e.stopPropagation();
|
||||
dis.dispatch({
|
||||
action: 'reject',
|
||||
room_id: CallHandler.roomIdForCall(this.state.incomingCall),
|
||||
room_id: CallHandler.sharedInstance().roomIdForCall(this.state.incomingCall),
|
||||
});
|
||||
};
|
||||
|
||||
|
|
@ -91,7 +91,7 @@ export default class IncomingCallBox extends React.Component<IProps, IState> {
|
|||
|
||||
let room = null;
|
||||
if (this.state.incomingCall) {
|
||||
room = MatrixClientPeg.get().getRoom(CallHandler.roomIdForCall(this.state.incomingCall));
|
||||
room = MatrixClientPeg.get().getRoom(CallHandler.sharedInstance().roomIdForCall(this.state.incomingCall));
|
||||
}
|
||||
|
||||
const caller = room ? room.name : _t("Unknown caller");
|
||||
|
|
|
|||
|
|
@ -114,6 +114,9 @@ export enum Action {
|
|||
*/
|
||||
VirtualRoomSupportUpdated = "virtual_room_support_updated",
|
||||
|
||||
// Probably would be better to have a VoIP states in a store and have the store emit changes
|
||||
CallChangeRoom = "call_change_room",
|
||||
|
||||
/**
|
||||
* Fired when an upload has started. Should be used with UploadStartedPayload.
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -125,10 +125,8 @@ export default class AutocompleteWrapperModel {
|
|||
case "at-room":
|
||||
return [this.partCreator.atRoomPill(completionId), this.partCreator.plain(completion.suffix)];
|
||||
case "user":
|
||||
// not using suffix here, because we also need to calculate
|
||||
// the suffix when clicking a display name to insert a mention,
|
||||
// which happens in createMentionParts
|
||||
return this.partCreator.createMentionParts(this.partIndex, text, completionId);
|
||||
// Insert suffix only if the pill is the part with index 0 - we are at the start of the composer
|
||||
return this.partCreator.createMentionParts(this.partIndex === 0, text, completionId);
|
||||
case "command":
|
||||
// command needs special handling for auto complete, but also renders as plain texts
|
||||
return [(this.partCreator as CommandPartCreator).command(text)];
|
||||
|
|
|
|||
|
|
@ -535,9 +535,9 @@ export class PartCreator {
|
|||
return new UserPillPart(userId, displayName, member);
|
||||
}
|
||||
|
||||
createMentionParts(partIndex: number, displayName: string, userId: string) {
|
||||
createMentionParts(insertTrailingCharacter: boolean, displayName: string, userId: string) {
|
||||
const pill = this.userPill(displayName, userId);
|
||||
const postfix = this.plain(partIndex === 0 ? ": " : " ");
|
||||
const postfix = this.plain(insertTrailingCharacter ? ": " : " ");
|
||||
return [pill, postfix];
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -904,6 +904,8 @@
|
|||
"Incoming call": "Incoming call",
|
||||
"Decline": "Decline",
|
||||
"Accept": "Accept",
|
||||
"Pause": "Pause",
|
||||
"Play": "Play",
|
||||
"The other party cancelled the verification.": "The other party cancelled the verification.",
|
||||
"Verified!": "Verified!",
|
||||
"You've successfully verified this user.": "You've successfully verified this user.",
|
||||
|
|
@ -1310,6 +1312,7 @@
|
|||
"Cryptography": "Cryptography",
|
||||
"Session ID:": "Session ID:",
|
||||
"Session key:": "Session key:",
|
||||
"You have no ignored users.": "You have no ignored users.",
|
||||
"Bulk options": "Bulk options",
|
||||
"Accept all %(invitedRooms)s invites": "Accept all %(invitedRooms)s invites",
|
||||
"Reject all %(invitedRooms)s invites": "Reject all %(invitedRooms)s invites",
|
||||
|
|
@ -1650,7 +1653,8 @@
|
|||
"Jump to first unread message.": "Jump to first unread message.",
|
||||
"Mark all as read": "Mark all as read",
|
||||
"Record a voice message": "Record a voice message",
|
||||
"Stop & send recording": "Stop & send recording",
|
||||
"Stop the recording": "Stop the recording",
|
||||
"Delete recording": "Delete recording",
|
||||
"Error updating main address": "Error updating main address",
|
||||
"There was an error updating the room's main address. It may not be allowed by the server or a temporary failure occurred.": "There was an error updating the room's main address. It may not be allowed by the server or a temporary failure occurred.",
|
||||
"There was an error updating the room's alternative addresses. It may not be allowed by the server or a temporary failure occurred.": "There was an error updating the room's alternative addresses. It may not be allowed by the server or a temporary failure occurred.",
|
||||
|
|
@ -2022,10 +2026,10 @@
|
|||
"Add a new server...": "Add a new server...",
|
||||
"%(networkName)s rooms": "%(networkName)s rooms",
|
||||
"Matrix rooms": "Matrix rooms",
|
||||
"Space selection": "Space selection",
|
||||
"Add existing rooms": "Add existing rooms",
|
||||
"Filter your rooms and spaces": "Filter your rooms and spaces",
|
||||
"Direct Messages": "Direct Messages",
|
||||
"Space selection": "Space selection",
|
||||
"Add existing rooms": "Add existing rooms",
|
||||
"Don't want to add an existing room?": "Don't want to add an existing room?",
|
||||
"Create a new room": "Create a new room",
|
||||
"Failed to add rooms to space": "Failed to add rooms to space",
|
||||
|
|
@ -2673,6 +2677,8 @@
|
|||
"Failed to create initial space rooms": "Failed to create initial space rooms",
|
||||
"Skip for now": "Skip for now",
|
||||
"Creating rooms...": "Creating rooms...",
|
||||
"What do you want to organise?": "What do you want to organise?",
|
||||
"Pick rooms or conversations to add. This is just a space for you, no one will be informed. You can add more later.": "Pick rooms or conversations to add. This is just a space for you, no one will be informed. You can add more later.",
|
||||
"Share %(name)s": "Share %(name)s",
|
||||
"It's just you at the moment, it will be even better with others.": "It's just you at the moment, it will be even better with others.",
|
||||
"Go to my first room": "Go to my first room",
|
||||
|
|
|
|||
|
|
@ -255,7 +255,7 @@ matrixLinkify.options = {
|
|||
target: function(href, type) {
|
||||
if (type === 'url') {
|
||||
const transformed = tryTransformPermalinkToLocalHref(href);
|
||||
if (transformed !== href || href.match(matrixLinkify.ELEMENT_URL_PATTERN)) {
|
||||
if (transformed !== href || decodeURIComponent(href).match(matrixLinkify.ELEMENT_URL_PATTERN)) {
|
||||
return null;
|
||||
} else {
|
||||
return '_blank';
|
||||
|
|
|
|||
|
|
@ -60,6 +60,8 @@ const INITIAL_STATE = {
|
|||
replyingToEvent: null,
|
||||
|
||||
shouldPeek: false,
|
||||
|
||||
viaServers: [],
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
@ -113,6 +115,7 @@ class RoomViewStore extends Store<ActionPayload> {
|
|||
this.setState({
|
||||
roomId: null,
|
||||
roomAlias: null,
|
||||
viaServers: [],
|
||||
});
|
||||
break;
|
||||
case 'view_room_error':
|
||||
|
|
@ -191,6 +194,7 @@ class RoomViewStore extends Store<ActionPayload> {
|
|||
replyingToEvent: null,
|
||||
// pull the user out of Room Settings
|
||||
isEditingSettings: false,
|
||||
viaServers: payload.via_servers,
|
||||
};
|
||||
|
||||
// Allow being given an event to be replied to when switching rooms but sanity check its for this room
|
||||
|
|
@ -226,6 +230,7 @@ class RoomViewStore extends Store<ActionPayload> {
|
|||
roomAlias: payload.room_alias,
|
||||
roomLoading: true,
|
||||
roomLoadError: null,
|
||||
viaServers: payload.via_servers,
|
||||
});
|
||||
try {
|
||||
const result = await MatrixClientPeg.get().getRoomIdForAlias(payload.room_alias);
|
||||
|
|
@ -261,6 +266,7 @@ class RoomViewStore extends Store<ActionPayload> {
|
|||
roomAlias: payload.room_alias,
|
||||
roomLoading: false,
|
||||
roomLoadError: payload.err,
|
||||
viaServers: [],
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -272,9 +278,10 @@ class RoomViewStore extends Store<ActionPayload> {
|
|||
|
||||
const cli = MatrixClientPeg.get();
|
||||
const address = this.state.roomAlias || this.state.roomId;
|
||||
const viaServers = this.state.viaServers || [];
|
||||
try {
|
||||
await retry<void, MatrixError>(() => cli.joinRoom(address, {
|
||||
viaServers: payload.via_servers,
|
||||
viaServers,
|
||||
...payload.opts,
|
||||
}), NUM_JOIN_RETRY, (err) => {
|
||||
// if we received a Gateway timeout then retry
|
||||
|
|
|
|||
|
|
@ -78,3 +78,5 @@ export class VoiceRecordingStore extends AsyncStoreWithClient<IState> {
|
|||
return this.updateState({recording: null});
|
||||
}
|
||||
}
|
||||
|
||||
window.mxVoiceRecordingStore = VoiceRecordingStore.instance;
|
||||
|
|
|
|||
|
|
@ -55,6 +55,15 @@ export default class DMRoomMap {
|
|||
return DMRoomMap.sharedInstance;
|
||||
}
|
||||
|
||||
/**
|
||||
* Set the shared instance to the instance supplied
|
||||
* Used by tests
|
||||
* @param inst the new shared instance
|
||||
*/
|
||||
public static setShared(inst: DMRoomMap) {
|
||||
DMRoomMap.sharedInstance = inst;
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns a shared instance of the class
|
||||
* that uses the singleton matrix client
|
||||
|
|
|
|||
|
|
@ -73,6 +73,26 @@ export function arraySeed<T>(val: T, length: number): T[] {
|
|||
return a;
|
||||
}
|
||||
|
||||
/**
|
||||
* Trims or fills the array to ensure it meets the desired length. The seed array
|
||||
* given is pulled from to fill any missing slots - it is recommended that this be
|
||||
* at least `len` long. The resulting array will be exactly `len` long, either
|
||||
* trimmed from the source or filled with the some/all of the seed array.
|
||||
* @param {T[]} a The array to trim/fill.
|
||||
* @param {number} len The length to trim or fill to, as needed.
|
||||
* @param {T[]} seed Values to pull from if the array needs filling.
|
||||
* @returns {T[]} The resulting array of `len` length.
|
||||
*/
|
||||
export function arrayTrimFill<T>(a: T[], len: number, seed: T[]): T[] {
|
||||
// Dev note: we do length checks because the spread operator can result in some
|
||||
// performance penalties in more critical code paths. As a utility, it should be
|
||||
// as fast as possible to not cause a problem for the call stack, no matter how
|
||||
// critical that stack is.
|
||||
if (a.length === len) return a;
|
||||
if (a.length > len) return a.slice(0, len);
|
||||
return a.concat(seed.slice(0, len - a.length));
|
||||
}
|
||||
|
||||
/**
|
||||
* Clones an array as fast as possible, retaining references of the array's values.
|
||||
* @param a The array to clone. Must be defined.
|
||||
|
|
|
|||
|
|
@ -346,7 +346,7 @@ export function tryTransformPermalinkToLocalHref(permalink: string): string {
|
|||
return permalink;
|
||||
}
|
||||
|
||||
const m = permalink.match(matrixLinkify.ELEMENT_URL_PATTERN);
|
||||
const m = decodeURIComponent(permalink).match(matrixLinkify.ELEMENT_URL_PATTERN);
|
||||
if (m) {
|
||||
return m[1];
|
||||
}
|
||||
|
|
@ -411,8 +411,8 @@ function getPermalinkConstructor(): PermalinkConstructor {
|
|||
|
||||
export function parsePermalink(fullUrl: string): PermalinkParts {
|
||||
const elementPrefix = SdkConfig.get()['permalinkPrefix'];
|
||||
if (fullUrl.startsWith(matrixtoBaseUrl)) {
|
||||
return new SpecPermalinkConstructor().parsePermalink(fullUrl);
|
||||
if (decodeURIComponent(fullUrl).startsWith(matrixtoBaseUrl)) {
|
||||
return new SpecPermalinkConstructor().parsePermalink(decodeURIComponent(fullUrl));
|
||||
} else if (elementPrefix && fullUrl.startsWith(elementPrefix)) {
|
||||
return new ElementPermalinkConstructor(elementPrefix).parsePermalink(fullUrl);
|
||||
}
|
||||
|
|
|
|||
141
src/voice/Playback.ts
Normal file
141
src/voice/Playback.ts
Normal file
|
|
@ -0,0 +1,141 @@
|
|||
/*
|
||||
Copyright 2021 The Matrix.org Foundation C.I.C.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
import EventEmitter from "events";
|
||||
import {UPDATE_EVENT} from "../stores/AsyncStore";
|
||||
import {arrayFastResample, arraySeed} from "../utils/arrays";
|
||||
import {SimpleObservable} from "matrix-widget-api";
|
||||
import {IDestroyable} from "../utils/IDestroyable";
|
||||
import {PlaybackClock} from "./PlaybackClock";
|
||||
|
||||
export enum PlaybackState {
|
||||
Decoding = "decoding",
|
||||
Stopped = "stopped", // no progress on timeline
|
||||
Paused = "paused", // some progress on timeline
|
||||
Playing = "playing", // active progress through timeline
|
||||
}
|
||||
|
||||
export const PLAYBACK_WAVEFORM_SAMPLES = 35;
|
||||
const DEFAULT_WAVEFORM = arraySeed(0, PLAYBACK_WAVEFORM_SAMPLES);
|
||||
|
||||
export class Playback extends EventEmitter implements IDestroyable {
|
||||
private readonly context: AudioContext;
|
||||
private source: AudioBufferSourceNode;
|
||||
private state = PlaybackState.Decoding;
|
||||
private audioBuf: AudioBuffer;
|
||||
private resampledWaveform: number[];
|
||||
private waveformObservable = new SimpleObservable<number[]>();
|
||||
private readonly clock: PlaybackClock;
|
||||
|
||||
/**
|
||||
* Creates a new playback instance from a buffer.
|
||||
* @param {ArrayBuffer} buf The buffer containing the sound sample.
|
||||
* @param {number[]} seedWaveform Optional seed waveform to present until the proper waveform
|
||||
* can be calculated. Contains values between zero and one, inclusive.
|
||||
*/
|
||||
constructor(private buf: ArrayBuffer, seedWaveform = DEFAULT_WAVEFORM) {
|
||||
super();
|
||||
this.context = new AudioContext();
|
||||
this.resampledWaveform = arrayFastResample(seedWaveform, PLAYBACK_WAVEFORM_SAMPLES);
|
||||
this.waveformObservable.update(this.resampledWaveform);
|
||||
this.clock = new PlaybackClock(this.context);
|
||||
|
||||
// TODO: @@ TR: Calculate real waveform
|
||||
}
|
||||
|
||||
public get waveform(): number[] {
|
||||
return this.resampledWaveform;
|
||||
}
|
||||
|
||||
public get waveformData(): SimpleObservable<number[]> {
|
||||
return this.waveformObservable;
|
||||
}
|
||||
|
||||
public get clockInfo(): PlaybackClock {
|
||||
return this.clock;
|
||||
}
|
||||
|
||||
public get currentState(): PlaybackState {
|
||||
return this.state;
|
||||
}
|
||||
|
||||
public get isPlaying(): boolean {
|
||||
return this.currentState === PlaybackState.Playing;
|
||||
}
|
||||
|
||||
public emit(event: PlaybackState, ...args: any[]): boolean {
|
||||
this.state = event;
|
||||
super.emit(event, ...args);
|
||||
super.emit(UPDATE_EVENT, event, ...args);
|
||||
return true; // we don't ever care if the event had listeners, so just return "yes"
|
||||
}
|
||||
|
||||
public destroy() {
|
||||
// noinspection JSIgnoredPromiseFromCall - not concerned about being called async here
|
||||
this.stop();
|
||||
this.removeAllListeners();
|
||||
this.clock.destroy();
|
||||
this.waveformObservable.close();
|
||||
}
|
||||
|
||||
public async prepare() {
|
||||
this.audioBuf = await this.context.decodeAudioData(this.buf);
|
||||
this.emit(PlaybackState.Stopped); // signal that we're not decoding anymore
|
||||
this.clock.durationSeconds = this.audioBuf.duration;
|
||||
}
|
||||
|
||||
private onPlaybackEnd = async () => {
|
||||
await this.context.suspend();
|
||||
this.emit(PlaybackState.Stopped);
|
||||
};
|
||||
|
||||
public async play() {
|
||||
// We can't restart a buffer source, so we need to create a new one if we hit the end
|
||||
if (this.state === PlaybackState.Stopped) {
|
||||
if (this.source) {
|
||||
this.source.disconnect();
|
||||
this.source.removeEventListener("ended", this.onPlaybackEnd);
|
||||
}
|
||||
|
||||
this.source = this.context.createBufferSource();
|
||||
this.source.connect(this.context.destination);
|
||||
this.source.buffer = this.audioBuf;
|
||||
this.source.start(); // start immediately
|
||||
this.source.addEventListener("ended", this.onPlaybackEnd);
|
||||
}
|
||||
|
||||
// We use the context suspend/resume functions because it allows us to pause a source
|
||||
// node, but that still doesn't help us when the source node runs out (see above).
|
||||
await this.context.resume();
|
||||
this.clock.flagStart();
|
||||
this.emit(PlaybackState.Playing);
|
||||
}
|
||||
|
||||
public async pause() {
|
||||
await this.context.suspend();
|
||||
this.emit(PlaybackState.Paused);
|
||||
}
|
||||
|
||||
public async stop() {
|
||||
await this.onPlaybackEnd();
|
||||
this.clock.flagStop();
|
||||
}
|
||||
|
||||
public async toggle() {
|
||||
if (this.isPlaying) await this.pause();
|
||||
else await this.play();
|
||||
}
|
||||
}
|
||||
78
src/voice/PlaybackClock.ts
Normal file
78
src/voice/PlaybackClock.ts
Normal file
|
|
@ -0,0 +1,78 @@
|
|||
/*
|
||||
Copyright 2021 The Matrix.org Foundation C.I.C.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
import {SimpleObservable} from "matrix-widget-api";
|
||||
import {IDestroyable} from "../utils/IDestroyable";
|
||||
|
||||
// Because keeping track of time is sufficiently complicated...
|
||||
export class PlaybackClock implements IDestroyable {
|
||||
private clipStart = 0;
|
||||
private stopped = true;
|
||||
private lastCheck = 0;
|
||||
private observable = new SimpleObservable<number[]>();
|
||||
private timerId: number;
|
||||
private clipDuration = 0;
|
||||
|
||||
public constructor(private context: AudioContext) {
|
||||
}
|
||||
|
||||
public get durationSeconds(): number {
|
||||
return this.clipDuration;
|
||||
}
|
||||
|
||||
public set durationSeconds(val: number) {
|
||||
this.clipDuration = val;
|
||||
this.observable.update([this.timeSeconds, this.clipDuration]);
|
||||
}
|
||||
|
||||
public get timeSeconds(): number {
|
||||
return (this.context.currentTime - this.clipStart) % this.clipDuration;
|
||||
}
|
||||
|
||||
public get liveData(): SimpleObservable<number[]> {
|
||||
return this.observable;
|
||||
}
|
||||
|
||||
private checkTime = () => {
|
||||
const now = this.timeSeconds;
|
||||
if (this.lastCheck !== now) {
|
||||
this.observable.update([now, this.durationSeconds]);
|
||||
this.lastCheck = now;
|
||||
}
|
||||
};
|
||||
|
||||
public flagStart() {
|
||||
if (this.stopped) {
|
||||
this.clipStart = this.context.currentTime;
|
||||
this.stopped = false;
|
||||
}
|
||||
|
||||
if (!this.timerId) {
|
||||
// case to number because the types are wrong
|
||||
// 100ms interval to make sure the time is as accurate as possible
|
||||
this.timerId = <number><any>setInterval(this.checkTime, 100);
|
||||
}
|
||||
}
|
||||
|
||||
public flagStop() {
|
||||
this.stopped = true;
|
||||
}
|
||||
|
||||
public destroy() {
|
||||
this.observable.close();
|
||||
if (this.timerId) clearInterval(this.timerId);
|
||||
}
|
||||
}
|
||||
|
|
@ -24,7 +24,8 @@ import EventEmitter from "events";
|
|||
import {IDestroyable} from "../utils/IDestroyable";
|
||||
import {Singleflight} from "../utils/Singleflight";
|
||||
import {PayloadEvent, WORKLET_NAME} from "./consts";
|
||||
import {arrayFastClone} from "../utils/arrays";
|
||||
import {UPDATE_EVENT} from "../stores/AsyncStore";
|
||||
import {Playback} from "./Playback";
|
||||
|
||||
const CHANNELS = 1; // stereo isn't important
|
||||
const SAMPLE_RATE = 48000; // 48khz is what WebRTC uses. 12khz is where we lose quality.
|
||||
|
|
@ -52,20 +53,17 @@ export class VoiceRecording extends EventEmitter implements IDestroyable {
|
|||
private recorderStream: MediaStream;
|
||||
private recorderFFT: AnalyserNode;
|
||||
private recorderWorklet: AudioWorkletNode;
|
||||
private buffer = new Uint8Array(0);
|
||||
private buffer = new Uint8Array(0); // use this.audioBuffer to access
|
||||
private mxc: string;
|
||||
private recording = false;
|
||||
private observable: SimpleObservable<IRecordingUpdate>;
|
||||
private amplitudes: number[] = []; // at each second mark, generated
|
||||
private playback: Playback;
|
||||
|
||||
public constructor(private client: MatrixClient) {
|
||||
super();
|
||||
}
|
||||
|
||||
public get finalWaveform(): number[] {
|
||||
return arrayFastClone(this.amplitudes);
|
||||
}
|
||||
|
||||
public get contentType(): string {
|
||||
return "audio/ogg";
|
||||
}
|
||||
|
|
@ -79,6 +77,16 @@ export class VoiceRecording extends EventEmitter implements IDestroyable {
|
|||
return this.recorderContext.currentTime;
|
||||
}
|
||||
|
||||
public get isRecording(): boolean {
|
||||
return this.recording;
|
||||
}
|
||||
|
||||
public emit(event: string, ...args: any[]): boolean {
|
||||
super.emit(event, ...args);
|
||||
super.emit(UPDATE_EVENT, event, ...args);
|
||||
return true; // we don't ever care if the event had listeners, so just return "yes"
|
||||
}
|
||||
|
||||
private async makeRecorder() {
|
||||
this.recorderStream = await navigator.mediaDevices.getUserMedia({
|
||||
audio: {
|
||||
|
|
@ -154,6 +162,12 @@ export class VoiceRecording extends EventEmitter implements IDestroyable {
|
|||
};
|
||||
}
|
||||
|
||||
private get audioBuffer(): Uint8Array {
|
||||
// We need a clone of the buffer to avoid accidentally changing the position
|
||||
// on the real thing.
|
||||
return this.buffer.slice(0);
|
||||
}
|
||||
|
||||
public get liveData(): SimpleObservable<IRecordingUpdate> {
|
||||
if (!this.recording) throw new Error("No observable when not recording");
|
||||
return this.observable;
|
||||
|
|
@ -203,8 +217,19 @@ export class VoiceRecording extends EventEmitter implements IDestroyable {
|
|||
|
||||
// Now that we've updated the data/waveform, let's do a time check. We don't want to
|
||||
// go horribly over the limit. We also emit a warning state if needed.
|
||||
const secondsLeft = TARGET_MAX_LENGTH - timeSeconds;
|
||||
if (secondsLeft <= 0) {
|
||||
//
|
||||
// We use the recorder's perspective of time to make sure we don't cut off the last
|
||||
// frame of audio, otherwise we end up with a 1:59 clip (119.68 seconds). This extra
|
||||
// safety can allow us to overshoot the target a bit, but at least when we say 2min
|
||||
// maximum we actually mean it.
|
||||
//
|
||||
// In testing, recorder time and worker time lag by about 400ms, which is roughly the
|
||||
// time needed to encode a sample/frame.
|
||||
//
|
||||
// Ref for recorderSeconds: https://github.com/chris-rudmin/opus-recorder#instance-fields
|
||||
const recorderSeconds = this.recorder.encodedSamplePosition / 48000;
|
||||
const secondsLeft = TARGET_MAX_LENGTH - recorderSeconds;
|
||||
if (secondsLeft < 0) { // go over to make sure we definitely capture that last frame
|
||||
// noinspection JSIgnoredPromiseFromCall - we aren't concerned with it overlapping
|
||||
this.stop();
|
||||
} else if (secondsLeft <= TARGET_WARN_TIME_LEFT) {
|
||||
|
|
@ -239,9 +264,9 @@ export class VoiceRecording extends EventEmitter implements IDestroyable {
|
|||
}
|
||||
|
||||
// Disconnect the source early to start shutting down resources
|
||||
await this.recorder.stop(); // stop first to flush the last frame
|
||||
this.recorderSource.disconnect();
|
||||
this.recorderWorklet.disconnect();
|
||||
await this.recorder.stop();
|
||||
|
||||
// close the context after the recorder so the recorder doesn't try to
|
||||
// connect anything to the context (this would generate a warning)
|
||||
|
|
@ -255,15 +280,33 @@ export class VoiceRecording extends EventEmitter implements IDestroyable {
|
|||
await this.recorder.close();
|
||||
this.emit(RecordingState.Ended);
|
||||
|
||||
return this.buffer;
|
||||
return this.audioBuffer;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets a playback instance for this voice recording. Note that the playback will not
|
||||
* have been prepared fully, meaning the `prepare()` function needs to be called on it.
|
||||
*
|
||||
* The same playback instance is returned each time.
|
||||
*
|
||||
* @returns {Playback} The playback instance.
|
||||
*/
|
||||
public getPlayback(): Playback {
|
||||
this.playback = Singleflight.for(this, "playback").do(() => {
|
||||
return new Playback(this.audioBuffer.buffer, this.amplitudes); // cast to ArrayBuffer proper;
|
||||
});
|
||||
return this.playback;
|
||||
}
|
||||
|
||||
public destroy() {
|
||||
// noinspection JSIgnoredPromiseFromCall - not concerned about stop() being called async here
|
||||
this.stop();
|
||||
this.removeAllListeners();
|
||||
Singleflight.forgetAllFor(this);
|
||||
// noinspection JSIgnoredPromiseFromCall - not concerned about being called async here
|
||||
this.playback?.destroy();
|
||||
this.observable.close();
|
||||
}
|
||||
|
||||
public async upload(): Promise<string> {
|
||||
|
|
@ -274,7 +317,7 @@ export class VoiceRecording extends EventEmitter implements IDestroyable {
|
|||
if (this.mxc) return this.mxc;
|
||||
|
||||
this.emit(RecordingState.Uploading);
|
||||
this.mxc = await this.client.uploadContent(new Blob([this.buffer], {
|
||||
this.mxc = await this.client.uploadContent(new Blob([this.audioBuffer], {
|
||||
type: this.contentType,
|
||||
}), {
|
||||
onlyContentUri: false, // to stop the warnings in the console
|
||||
|
|
@ -283,5 +326,3 @@ export class VoiceRecording extends EventEmitter implements IDestroyable {
|
|||
return this.mxc;
|
||||
}
|
||||
}
|
||||
|
||||
window.mxVoiceRecorder = VoiceRecording;
|
||||
|
|
|
|||
216
test/CallHandler-test.ts
Normal file
216
test/CallHandler-test.ts
Normal file
|
|
@ -0,0 +1,216 @@
|
|||
/*
|
||||
Copyright 2021 The Matrix.org Foundation C.I.C.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
import './skinned-sdk';
|
||||
|
||||
import CallHandler, { PlaceCallType } from '../src/CallHandler';
|
||||
import { stubClient, mkStubRoom } from './test-utils';
|
||||
import { MatrixClientPeg } from '../src/MatrixClientPeg';
|
||||
import dis from '../src/dispatcher/dispatcher';
|
||||
import { CallEvent, CallState } from 'matrix-js-sdk/src/webrtc/call';
|
||||
import DMRoomMap from '../src/utils/DMRoomMap';
|
||||
import EventEmitter from 'events';
|
||||
import { Action } from '../src/dispatcher/actions';
|
||||
import SdkConfig from '../src/SdkConfig';
|
||||
|
||||
const REAL_ROOM_ID = '$room1:example.org';
|
||||
const MAPPED_ROOM_ID = '$room2:example.org';
|
||||
const MAPPED_ROOM_ID_2 = '$room3:example.org';
|
||||
|
||||
function mkStubDM(roomId, userId) {
|
||||
const room = mkStubRoom(roomId);
|
||||
room.getJoinedMembers = jest.fn().mockReturnValue([
|
||||
{
|
||||
userId: '@me:example.org',
|
||||
name: 'Member',
|
||||
rawDisplayName: 'Member',
|
||||
roomId: roomId,
|
||||
membership: 'join',
|
||||
getAvatarUrl: () => 'mxc://avatar.url/image.png',
|
||||
getMxcAvatarUrl: () => 'mxc://avatar.url/image.png',
|
||||
},
|
||||
{
|
||||
userId: userId,
|
||||
name: 'Member',
|
||||
rawDisplayName: 'Member',
|
||||
roomId: roomId,
|
||||
membership: 'join',
|
||||
getAvatarUrl: () => 'mxc://avatar.url/image.png',
|
||||
getMxcAvatarUrl: () => 'mxc://avatar.url/image.png',
|
||||
},
|
||||
]);
|
||||
room.currentState.getMembers = room.getJoinedMembers;
|
||||
|
||||
return room;
|
||||
}
|
||||
|
||||
class FakeCall extends EventEmitter {
|
||||
roomId: string;
|
||||
callId = "fake call id";
|
||||
|
||||
constructor(roomId) {
|
||||
super();
|
||||
|
||||
this.roomId = roomId;
|
||||
}
|
||||
|
||||
setRemoteOnHold() {}
|
||||
setRemoteAudioElement() {}
|
||||
|
||||
placeVoiceCall() {
|
||||
this.emit(CallEvent.State, CallState.Connected, null);
|
||||
}
|
||||
}
|
||||
|
||||
describe('CallHandler', () => {
|
||||
let dmRoomMap;
|
||||
let callHandler;
|
||||
let audioElement;
|
||||
let fakeCall;
|
||||
|
||||
beforeEach(() => {
|
||||
stubClient();
|
||||
MatrixClientPeg.get().createCall = roomId => {
|
||||
if (fakeCall && fakeCall.roomId !== roomId) {
|
||||
throw new Error("Only one call is supported!");
|
||||
}
|
||||
fakeCall = new FakeCall(roomId);
|
||||
return fakeCall;
|
||||
};
|
||||
|
||||
callHandler = new CallHandler();
|
||||
callHandler.start();
|
||||
|
||||
dmRoomMap = {
|
||||
getUserIdForRoomId: roomId => {
|
||||
if (roomId === REAL_ROOM_ID) {
|
||||
return '@user1:example.org';
|
||||
} else if (roomId === MAPPED_ROOM_ID) {
|
||||
return '@user2:example.org';
|
||||
} else if (roomId === MAPPED_ROOM_ID_2) {
|
||||
return '@user3:example.org';
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
},
|
||||
getDMRoomsForUserId: userId => {
|
||||
if (userId === '@user2:example.org') {
|
||||
return [MAPPED_ROOM_ID];
|
||||
} else if (userId === '@user3:example.org') {
|
||||
return [MAPPED_ROOM_ID_2];
|
||||
} else {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
};
|
||||
DMRoomMap.setShared(dmRoomMap);
|
||||
|
||||
audioElement = document.createElement('audio');
|
||||
audioElement.id = "remoteAudio";
|
||||
document.body.appendChild(audioElement);
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
callHandler.stop();
|
||||
DMRoomMap.setShared(null);
|
||||
// @ts-ignore
|
||||
window.mxCallHandler = null;
|
||||
MatrixClientPeg.unset();
|
||||
|
||||
document.body.removeChild(audioElement);
|
||||
SdkConfig.unset();
|
||||
});
|
||||
|
||||
it('should move calls between rooms when remote asserted identity changes', async () => {
|
||||
const realRoom = mkStubDM(REAL_ROOM_ID, '@user1:example.org');
|
||||
const mappedRoom = mkStubDM(MAPPED_ROOM_ID, '@user2:example.org');
|
||||
const mappedRoom2 = mkStubDM(MAPPED_ROOM_ID_2, '@user3:example.org');
|
||||
|
||||
MatrixClientPeg.get().getRoom = roomId => {
|
||||
switch (roomId) {
|
||||
case REAL_ROOM_ID:
|
||||
return realRoom;
|
||||
case MAPPED_ROOM_ID:
|
||||
return mappedRoom;
|
||||
case MAPPED_ROOM_ID_2:
|
||||
return mappedRoom2;
|
||||
}
|
||||
};
|
||||
|
||||
dis.dispatch({
|
||||
action: 'place_call',
|
||||
type: PlaceCallType.Voice,
|
||||
room_id: REAL_ROOM_ID,
|
||||
}, true);
|
||||
|
||||
let dispatchHandle;
|
||||
// wait for the call to be set up
|
||||
await new Promise<void>(resolve => {
|
||||
dispatchHandle = dis.register(payload => {
|
||||
if (payload.action === 'call_state') {
|
||||
resolve();
|
||||
}
|
||||
});
|
||||
});
|
||||
dis.unregister(dispatchHandle);
|
||||
|
||||
// should start off in the actual room ID it's in at the protocol level
|
||||
expect(callHandler.getCallForRoom(REAL_ROOM_ID)).toBe(fakeCall);
|
||||
|
||||
let callRoomChangeEventCount = 0;
|
||||
const roomChangePromise = new Promise<void>(resolve => {
|
||||
dispatchHandle = dis.register(payload => {
|
||||
if (payload.action === Action.CallChangeRoom) {
|
||||
++callRoomChangeEventCount;
|
||||
resolve();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Now emit an asserted identity for user2: this should be ignored
|
||||
// because we haven't set the config option to obey asserted identity
|
||||
fakeCall.getRemoteAssertedIdentity = jest.fn().mockReturnValue({
|
||||
id: "@user2:example.org",
|
||||
});
|
||||
fakeCall.emit(CallEvent.AssertedIdentityChanged);
|
||||
|
||||
// Now set the config option
|
||||
SdkConfig.put({
|
||||
voip: {
|
||||
obeyAssertedIdentity: true,
|
||||
},
|
||||
});
|
||||
|
||||
// ...and send another asserted identity event for a different user
|
||||
fakeCall.getRemoteAssertedIdentity = jest.fn().mockReturnValue({
|
||||
id: "@user3:example.org",
|
||||
});
|
||||
fakeCall.emit(CallEvent.AssertedIdentityChanged);
|
||||
|
||||
await roomChangePromise;
|
||||
dis.unregister(dispatchHandle);
|
||||
|
||||
// If everything's gone well, we should have seen only one room change
|
||||
// event and the call should now be in user 3's room.
|
||||
// If it's not obeying any, the call will still be in REAL_ROOM_ID.
|
||||
// If it incorrectly obeyed both asserted identity changes, either it will
|
||||
// have just processed one and the call will be in the wrong room, or we'll
|
||||
// have seen two room change dispatches.
|
||||
expect(callRoomChangeEventCount).toEqual(1);
|
||||
expect(callHandler.getCallForRoom(REAL_ROOM_ID)).toBeNull();
|
||||
expect(callHandler.getCallForRoom(MAPPED_ROOM_ID_2)).toBe(fakeCall);
|
||||
});
|
||||
});
|
||||
|
|
@ -64,6 +64,11 @@ export function createTestClient() {
|
|||
getRoomIdForAlias: jest.fn().mockResolvedValue(undefined),
|
||||
getRoomDirectoryVisibility: jest.fn().mockResolvedValue(undefined),
|
||||
getProfileInfo: jest.fn().mockResolvedValue({}),
|
||||
getThirdpartyProtocols: jest.fn().mockResolvedValue({}),
|
||||
getClientWellKnown: jest.fn().mockReturnValue(null),
|
||||
supportsVoip: jest.fn().mockReturnValue(true),
|
||||
getTurnServersExpiry: jest.fn().mockReturnValue(2^32),
|
||||
getThirdpartyUser: jest.fn().mockResolvedValue([]),
|
||||
getAccountData: (type) => {
|
||||
return mkEvent({
|
||||
type,
|
||||
|
|
|
|||
|
|
@ -22,6 +22,7 @@ import {
|
|||
arrayHasOrderChange,
|
||||
arrayMerge,
|
||||
arraySeed,
|
||||
arrayTrimFill,
|
||||
arrayUnion,
|
||||
ArrayUtil,
|
||||
GroupedArray,
|
||||
|
|
@ -64,6 +65,38 @@ describe('arrays', () => {
|
|||
});
|
||||
});
|
||||
|
||||
describe('arrayTrimFill', () => {
|
||||
it('should shrink arrays', () => {
|
||||
const input = [1, 2, 3];
|
||||
const output = [1, 2];
|
||||
const seed = [4, 5, 6];
|
||||
const result = arrayTrimFill(input, output.length, seed);
|
||||
expect(result).toBeDefined();
|
||||
expect(result).toHaveLength(output.length);
|
||||
expect(result).toEqual(output);
|
||||
});
|
||||
|
||||
it('should expand arrays', () => {
|
||||
const input = [1, 2, 3];
|
||||
const output = [1, 2, 3, 4, 5];
|
||||
const seed = [4, 5, 6];
|
||||
const result = arrayTrimFill(input, output.length, seed);
|
||||
expect(result).toBeDefined();
|
||||
expect(result).toHaveLength(output.length);
|
||||
expect(result).toEqual(output);
|
||||
});
|
||||
|
||||
it('should keep arrays the same', () => {
|
||||
const input = [1, 2, 3];
|
||||
const output = [1, 2, 3];
|
||||
const seed = [4, 5, 6];
|
||||
const result = arrayTrimFill(input, output.length, seed);
|
||||
expect(result).toBeDefined();
|
||||
expect(result).toHaveLength(output.length);
|
||||
expect(result).toEqual(output);
|
||||
});
|
||||
});
|
||||
|
||||
describe('arraySeed', () => {
|
||||
it('should create an array of given length', () => {
|
||||
const val = 1;
|
||||
|
|
|
|||
92
yarn.lock
92
yarn.lock
|
|
@ -26,6 +26,13 @@
|
|||
dependencies:
|
||||
"@babel/highlight" "^7.10.4"
|
||||
|
||||
"@babel/code-frame@^7.12.13":
|
||||
version "7.12.13"
|
||||
resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.12.13.tgz#dcfc826beef65e75c50e21d3837d7d95798dd658"
|
||||
integrity sha512-HV1Cm0Q3ZrpCR93tkWOYiuYIgLxZXZFVG2VgK+MBWjUqZTundupbfx2aXarXuw5Ko5aMcjtJgbSs4vUGBS5v6g==
|
||||
dependencies:
|
||||
"@babel/highlight" "^7.12.13"
|
||||
|
||||
"@babel/compat-data@^7.12.5", "@babel/compat-data@^7.12.7":
|
||||
version "7.12.7"
|
||||
resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.12.7.tgz#9329b4782a7d6bbd7eef57e11addf91ee3ef1e41"
|
||||
|
|
@ -61,6 +68,15 @@
|
|||
jsesc "^2.5.1"
|
||||
source-map "^0.5.0"
|
||||
|
||||
"@babel/generator@^7.13.16":
|
||||
version "7.13.16"
|
||||
resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.13.16.tgz#0befc287031a201d84cdfc173b46b320ae472d14"
|
||||
integrity sha512-grBBR75UnKOcUWMp8WoDxNsWCFl//XCK6HWTrBQKTr5SV9f5g0pNOjdyzi/DTBv12S9GnYPInIXQBTky7OXEMg==
|
||||
dependencies:
|
||||
"@babel/types" "^7.13.16"
|
||||
jsesc "^2.5.1"
|
||||
source-map "^0.5.0"
|
||||
|
||||
"@babel/helper-annotate-as-pure@^7.10.4", "@babel/helper-annotate-as-pure@^7.12.10":
|
||||
version "7.12.10"
|
||||
resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.12.10.tgz#54ab9b000e60a93644ce17b3f37d313aaf1d115d"
|
||||
|
|
@ -130,6 +146,15 @@
|
|||
"@babel/template" "^7.12.7"
|
||||
"@babel/types" "^7.12.11"
|
||||
|
||||
"@babel/helper-function-name@^7.12.13":
|
||||
version "7.12.13"
|
||||
resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.12.13.tgz#93ad656db3c3c2232559fd7b2c3dbdcbe0eb377a"
|
||||
integrity sha512-TZvmPn0UOqmvi5G4vvw0qZTpVptGkB1GL61R6lKvrSdIxGm5Pky7Q3fpKiIkQCAtRCBUwB0PaThlx9vebCDSwA==
|
||||
dependencies:
|
||||
"@babel/helper-get-function-arity" "^7.12.13"
|
||||
"@babel/template" "^7.12.13"
|
||||
"@babel/types" "^7.12.13"
|
||||
|
||||
"@babel/helper-get-function-arity@^7.12.10":
|
||||
version "7.12.10"
|
||||
resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.12.10.tgz#b158817a3165b5faa2047825dfa61970ddcc16cf"
|
||||
|
|
@ -137,6 +162,13 @@
|
|||
dependencies:
|
||||
"@babel/types" "^7.12.10"
|
||||
|
||||
"@babel/helper-get-function-arity@^7.12.13":
|
||||
version "7.12.13"
|
||||
resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.12.13.tgz#bc63451d403a3b3082b97e1d8b3fe5bd4091e583"
|
||||
integrity sha512-DjEVzQNz5LICkzN0REdpD5prGoidvbdYk1BVgRUOINaWJP2t6avB27X1guXK1kXNrX0WMfsrm1A/ZBthYuIMQg==
|
||||
dependencies:
|
||||
"@babel/types" "^7.12.13"
|
||||
|
||||
"@babel/helper-hoist-variables@^7.10.4":
|
||||
version "7.10.4"
|
||||
resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.10.4.tgz#d49b001d1d5a68ca5e6604dda01a6297f7c9381e"
|
||||
|
|
@ -225,6 +257,13 @@
|
|||
dependencies:
|
||||
"@babel/types" "^7.12.11"
|
||||
|
||||
"@babel/helper-split-export-declaration@^7.12.13":
|
||||
version "7.12.13"
|
||||
resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.12.13.tgz#e9430be00baf3e88b0e13e6f9d4eaf2136372b05"
|
||||
integrity sha512-tCJDltF83htUtXx5NLcaDqRmknv652ZWCHyoTETf1CXYJdPC7nohZohjUgieXhv0hTJdRf2FjDueFehdNucpzg==
|
||||
dependencies:
|
||||
"@babel/types" "^7.12.13"
|
||||
|
||||
"@babel/helper-validator-identifier@^7.10.4", "@babel/helper-validator-identifier@^7.12.11":
|
||||
version "7.12.11"
|
||||
resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.12.11.tgz#c9a1f021917dcb5ccf0d4e453e399022981fc9ed"
|
||||
|
|
@ -263,11 +302,25 @@
|
|||
chalk "^2.0.0"
|
||||
js-tokens "^4.0.0"
|
||||
|
||||
"@babel/highlight@^7.12.13":
|
||||
version "7.13.10"
|
||||
resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.13.10.tgz#a8b2a66148f5b27d666b15d81774347a731d52d1"
|
||||
integrity sha512-5aPpe5XQPzflQrFwL1/QoeHkP2MsA4JCntcXHRhEsdsfPVkvPi2w7Qix4iV7t5S/oC9OodGrggd8aco1g3SZFg==
|
||||
dependencies:
|
||||
"@babel/helper-validator-identifier" "^7.12.11"
|
||||
chalk "^2.0.0"
|
||||
js-tokens "^4.0.0"
|
||||
|
||||
"@babel/parser@^7.1.0", "@babel/parser@^7.12.10", "@babel/parser@^7.12.11", "@babel/parser@^7.12.7", "@babel/parser@^7.7.0":
|
||||
version "7.12.11"
|
||||
resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.12.11.tgz#9ce3595bcd74bc5c466905e86c535b8b25011e79"
|
||||
integrity sha512-N3UxG+uuF4CMYoNj8AhnbAcJF0PiuJ9KHuy1lQmkYsxTer/MAH9UBNHsBoAX/4s6NvlDD047No8mYVGGzLL4hg==
|
||||
|
||||
"@babel/parser@^7.12.13", "@babel/parser@^7.13.16":
|
||||
version "7.13.16"
|
||||
resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.13.16.tgz#0f18179b0448e6939b1f3f5c4c355a3a9bcdfd37"
|
||||
integrity sha512-6bAg36mCwuqLO0hbR+z7PHuqWiCeP7Dzg73OpQwsAB1Eb8HnGEz5xYBzCfbu+YjoaJsJs+qheDxVAuqbt3ILEw==
|
||||
|
||||
"@babel/plugin-proposal-async-generator-functions@^7.12.1":
|
||||
version "7.12.12"
|
||||
resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.12.12.tgz#04b8f24fd4532008ab4e79f788468fd5a8476566"
|
||||
|
|
@ -980,6 +1033,15 @@
|
|||
"@babel/parser" "^7.12.7"
|
||||
"@babel/types" "^7.12.7"
|
||||
|
||||
"@babel/template@^7.12.13":
|
||||
version "7.12.13"
|
||||
resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.12.13.tgz#530265be8a2589dbb37523844c5bcb55947fb327"
|
||||
integrity sha512-/7xxiGA57xMo/P2GVvdEumr8ONhFOhfgq2ihK3h1e6THqzTAkHbkXgB0xI9yeTfIUoH3+oAeHhqm/I43OTbbjA==
|
||||
dependencies:
|
||||
"@babel/code-frame" "^7.12.13"
|
||||
"@babel/parser" "^7.12.13"
|
||||
"@babel/types" "^7.12.13"
|
||||
|
||||
"@babel/traverse@^7.1.0", "@babel/traverse@^7.10.4", "@babel/traverse@^7.12.1", "@babel/traverse@^7.12.10", "@babel/traverse@^7.12.12", "@babel/traverse@^7.12.5", "@babel/traverse@^7.7.0", "@babel/traverse@^7.7.4":
|
||||
version "7.12.12"
|
||||
resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.12.12.tgz#d0cd87892704edd8da002d674bc811ce64743376"
|
||||
|
|
@ -995,6 +1057,20 @@
|
|||
globals "^11.1.0"
|
||||
lodash "^4.17.19"
|
||||
|
||||
"@babel/traverse@^7.13.17":
|
||||
version "7.13.17"
|
||||
resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.13.17.tgz#c85415e0c7d50ac053d758baec98b28b2ecfeea3"
|
||||
integrity sha512-BMnZn0R+X6ayqm3C3To7o1j7Q020gWdqdyP50KEoVqaCO2c/Im7sYZSmVgvefp8TTMQ+9CtwuBp0Z1CZ8V3Pvg==
|
||||
dependencies:
|
||||
"@babel/code-frame" "^7.12.13"
|
||||
"@babel/generator" "^7.13.16"
|
||||
"@babel/helper-function-name" "^7.12.13"
|
||||
"@babel/helper-split-export-declaration" "^7.12.13"
|
||||
"@babel/parser" "^7.13.16"
|
||||
"@babel/types" "^7.13.17"
|
||||
debug "^4.1.0"
|
||||
globals "^11.1.0"
|
||||
|
||||
"@babel/types@^7.0.0", "@babel/types@^7.10.4", "@babel/types@^7.10.5", "@babel/types@^7.12.1", "@babel/types@^7.12.10", "@babel/types@^7.12.11", "@babel/types@^7.12.12", "@babel/types@^7.12.5", "@babel/types@^7.12.7", "@babel/types@^7.3.0", "@babel/types@^7.3.3", "@babel/types@^7.4.4", "@babel/types@^7.7.0":
|
||||
version "7.12.12"
|
||||
resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.12.12.tgz#4608a6ec313abbd87afa55004d373ad04a96c299"
|
||||
|
|
@ -1004,6 +1080,14 @@
|
|||
lodash "^4.17.19"
|
||||
to-fast-properties "^2.0.0"
|
||||
|
||||
"@babel/types@^7.12.13", "@babel/types@^7.13.16", "@babel/types@^7.13.17":
|
||||
version "7.13.17"
|
||||
resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.13.17.tgz#48010a115c9fba7588b4437dd68c9469012b38b4"
|
||||
integrity sha512-RawydLgxbOPDlTLJNtoIypwdmAy//uQIzlKt2+iBiJaRlVuI6QLUxVAyWGNfOzp8Yu4L4lLIacoCyTNtpb4wiA==
|
||||
dependencies:
|
||||
"@babel/helper-validator-identifier" "^7.12.11"
|
||||
to-fast-properties "^2.0.0"
|
||||
|
||||
"@bcoe/v8-coverage@^0.2.3":
|
||||
version "0.2.3"
|
||||
resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
|
||||
|
|
@ -5614,6 +5698,14 @@ matrix-react-test-utils@^0.2.2:
|
|||
resolved "https://registry.yarnpkg.com/matrix-react-test-utils/-/matrix-react-test-utils-0.2.2.tgz#c87144d3b910c7edc544a6699d13c7c2bf02f853"
|
||||
integrity sha512-49+7gfV6smvBIVbeloql+37IeWMTD+fiywalwCqk8Dnz53zAFjKSltB3rmWHso1uecLtQEcPtCijfhzcLXAxTQ==
|
||||
|
||||
"matrix-web-i18n@github:matrix-org/matrix-web-i18n":
|
||||
version "1.1.2"
|
||||
resolved "https://codeload.github.com/matrix-org/matrix-web-i18n/tar.gz/63f9119bc0bc304e83d4e8e22364caa7850e7671"
|
||||
dependencies:
|
||||
"@babel/parser" "^7.13.16"
|
||||
"@babel/traverse" "^7.13.17"
|
||||
walk "^2.3.14"
|
||||
|
||||
matrix-widget-api@^0.1.0-beta.13:
|
||||
version "0.1.0-beta.13"
|
||||
resolved "https://registry.yarnpkg.com/matrix-widget-api/-/matrix-widget-api-0.1.0-beta.13.tgz#ebddc83eaef39bbb87b621a02a35902e1a29b9ef"
|
||||
|
|
|
|||
Loading…
Reference in a new issue