Properly handle react-sdk's recorder worklet

Fixes https://github.com/vector-im/element-web/issues/18393
This commit is contained in:
Travis Ralston 2021-08-04 15:08:52 -06:00
parent aeca4df693
commit d4fc3ed354
4 changed files with 37 additions and 6 deletions

View file

@ -153,7 +153,8 @@
"webpack": "^4.46.0",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.2",
"worker-loader": "^2.0.0"
"worker-loader": "^2.0.0",
"worklet-loader": "^2.0.0"
},
"jest": {
"testEnvironment": "jest-environment-jsdom-sixteen",

View file

@ -58,10 +58,7 @@
} %>
</head>
<body
style="height: 100%; margin: 0;"
data-vector-recorder-worklet-script="<%= htmlWebpackPlugin.files.js.find(entry => entry.includes("recorder-worklet.js")) %>"
>
<body style="height: 100%; margin: 0;">
<noscript>Sorry, Element requires JavaScript to be enabled.</noscript> <!-- TODO: Translate this? -->
<section id="matrixchat" style="height: 100%;" class="notranslate"></section>
<script src="<%= htmlWebpackPlugin.files.js.find(entry => entry.includes("bundle.js")) %>"></script>

View file

@ -89,7 +89,6 @@ module.exports = (env, argv) => {
"mobileguide": "./src/vector/mobile_guide/index.ts",
"jitsi": "./src/vector/jitsi/index.ts",
"usercontent": "./node_modules/matrix-react-sdk/src/usercontent/index.js",
"recorder-worklet": "./node_modules/matrix-react-sdk/src/audio/RecorderWorklet.ts",
...(useCssHotReload ? {} : cssThemes),
},
@ -351,6 +350,26 @@ module.exports = (env, argv) => {
outputPath: '.',
},
},
{
// Special case the recorder worklet as it can't end up HMR'd, but the worker-loader
// isn't good enough for us. Note that the worklet-loader is listed as "do not use",
// however it seems to work fine for our purposes.
test: /RecorderWorklet\.ts$/,
type: "javascript/auto",
use: [ // executed last -> first, for some reason.
{
loader: "worklet-loader",
options: {
// Override name so we know what it is in the output.
name: 'recorder-worklet.[hash:7].js',
},
},
{
// TS -> JS because the worklet-loader won't do this for us.
loader: "babel-loader",
},
],
},
{
// This is from the same place as the encoderWorker above, but only needed
// for Safari support.

View file

@ -5651,6 +5651,11 @@ hmac-drbg@^1.0.1:
minimalistic-assert "^1.0.0"
minimalistic-crypto-utils "^1.0.1"
hoek@^4.2.1:
version "4.2.1"
resolved "https://registry.yarnpkg.com/hoek/-/hoek-4.2.1.tgz#9634502aa12c445dd5a7c5734b572bb8738aacbb"
integrity sha512-QLg82fGkfnJ/4iy1xZ81/9SIJiq1NGFUMGs6ParyjBZr6jW2Ufj/snDqTHixNlHdPNwN2RLVD0Pi3igeK9+JfA==
hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2:
version "3.3.2"
resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
@ -12284,6 +12289,15 @@ worker-loader@^2.0.0:
loader-utils "^1.0.0"
schema-utils "^0.4.0"
worklet-loader@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/worklet-loader/-/worklet-loader-2.0.0.tgz#c6c8f7dbed38f3d32dfc61c399f13a85f7eebe9d"
integrity sha512-zvCCyhgrn85C5g1+EQWDz4KHxkEMq/fZQXVftjFOcxTy6f+grBSRTJLoit3u8xyKIBTGEgQzYiousSm3YWt8oA==
dependencies:
hoek "^4.2.1"
loader-utils "^1.0.0"
schema-utils "^0.4.0"
wrap-ansi@^5.1.0:
version "5.1.0"
resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-5.1.0.tgz#1fd1f67235d5b6d0fee781056001bfb694c03b09"