Removed DOMPurify and fixed the opus web worker

file.ts

@@ -555,6 +555,15 @@ const WEB_APP_FILE_LIST = [
 
 
     /* web specific */
+    { /* generated assembly files */
+        "web-only": true,
+        "type": "wasm",
+        "search-pattern": /.*\.(wasm)/,
+        "build-target": "dev|rel",
+
+        "path": "wasm/",
+        "local-path": "./asm/generated/"
+    },
     { /* web css files */
         "web-only": true,
         "type": "css",

loader/app/app.ts

@@ -98,11 +98,11 @@ const loader_javascript = {
             });
             */
         }
-        await loader.scripts.load(["vendor/DOMPurify/purify.min.js"], { cache_tag: cache_tag() });
 
-        await loader.scripts.load("vendor/jsrender/jsrender.min.js", { cache_tag: cache_tag() });
         await loader.scripts.load_multiple([
+            ["vendor/jsrender/jsrender.min.js"],
             ["vendor/xbbcode/src/parser.js"],
+            ["vendor/emoji-picker/src/jquery.lsxemojipicker.js"],
             ["vendor/twemoji/twemoji.min.js", ""], /* empty string means not required */
             ["vendor/highlight/highlight.pack.js", ""], /* empty string means not required */
             ["vendor/remarkable/remarkable.min.js", ""], /* empty string means not required */
@@ -111,8 +111,6 @@ const loader_javascript = {
             max_parallel_requests: -1
         });
 
-        await loader.scripts.load("vendor/emoji-picker/src/jquery.lsxemojipicker.js", { cache_tag: cache_tag() });
-
         let manifest: Manifest;
         try {
             const response = await fetch("js/manifest.json");

package-lock.json

@@ -10,6 +10,15 @@
       "integrity": "sha512-/+CRPXpBDpo2RK9C68N3b2cOvO0Cf5B9aPijHsoDQTHivnGSObdOF2BRQOYjojWTDy6nQvMjmqRXIxH55VjxxA==",
       "dev": true
     },
+    "@types/dompurify": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@types/dompurify/-/dompurify-2.0.1.tgz",
+      "integrity": "sha512-OQ16dECrRv/I//woKkVUxyVGYR94W3qp3Wy//B63awHVe3h/1/URFqP5a/V2m4k01DEvWs1+z7FWW3xfM1lH3Q==",
+      "dev": true,
+      "requires": {
+        "@types/trusted-types": "*"
+      }
+    },
     "@types/emscripten": {
       "version": "1.39.2",
       "resolved": "https://registry.npmjs.org/@types/emscripten/-/emscripten-1.39.2.tgz",
@@ -144,6 +153,12 @@
       "integrity": "sha512-/gG2M/Imw7cQFp8PGvz/SwocNrmKFjFsm5Pb8HdbHkZ1K8pmuPzOX4VeVoiEecFCVf4CsN1r3/BRvx+6sNqwtQ==",
       "dev": true
     },
+    "@types/trusted-types": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-1.0.4.tgz",
+      "integrity": "sha512-6jtHrHpmiXOXoJ31Cg9R+iEVwuEKPf0XHwFUI93eEPXx492/J2JHyafkleKE2EYzZprayk9FSjTyK1GDqcwDng==",
+      "dev": true
+    },
     "@types/uglify-js": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/@types/uglify-js/-/uglify-js-3.0.4.tgz",

package.json

@@ -26,6 +26,7 @@
   "author": "TeaSpeak (WolverinDEV)",
   "license": "ISC",
   "devDependencies": {
+    "@types/dompurify": "^2.0.1",
     "@types/emscripten": "^1.38.0",
     "@types/fs-extra": "^8.0.1",
     "@types/jquery": "^3.3.34",
@@ -56,6 +57,7 @@
     "sha256": "^0.2.0",
     "style-loader": "^1.1.3",
     "terser": "^4.2.1",
+    "terser-webpack-plugin": "latest",
     "ts-loader": "^6.2.2",
     "ttypescript": "^1.5.10",
     "typescript": "3.6.5",
@@ -63,8 +65,7 @@
     "webpack": "^4.42.1",
     "webpack-bundle-analyzer": "^3.6.1",
     "webpack-cli": "^3.3.11",
-    "worker-plugin": "^4.0.2",
+    "worker-plugin": "^4.0.2"
-    "terser-webpack-plugin": "latest"
   },
   "repository": {
     "type": "git",

shared/css/static/general.scss

@@ -123,7 +123,6 @@ fieldset {
 }
 
 code {
-	background-color: lightgray;
 	padding: 2px;
 }
 

shared/js/MessageFormatter.ts

@@ -4,6 +4,7 @@ import {copy_to_clipboard} from "tc-shared/utils/helpers";
 import {guid} from "tc-shared/crypto/uid";
 import * as loader from "tc-loader";
 import * as image_preview from "./ui/frames/image_preview"
+import * as DOMPurify from "dompurify";
 
 declare const xbbcode;
 export namespace bbcode {

shared/js/proto.ts

@@ -63,14 +63,6 @@ declare global {
         second_best?: any;
     }
 
-    interface DOMPurify {
-        sanitize(html: string, config?: {
-            ADD_ATTR?: string[]
-            ADD_TAGS?: string[];
-        }) : string;
-    }
-    let DOMPurify: DOMPurify;
-
     let remarkable: typeof window.remarkable;
 
     class webkitAudioContext extends AudioContext {}

web/js/workers/codec/CodecWorker.ts

@@ -34,11 +34,17 @@ let global_initialize_result;
 async function handle_message(command: string, data: any) : Promise<string | object> {
     switch (command) {
         case "global-initialize":
-            const init_result = globally_initialized ? global_initialize_result : await initialize_callback();
+            try {
-            globally_initialized = true;
+                const init_result = globally_initialized ? global_initialize_result : await initialize_callback();
+                globally_initialized = true;
 
-            if(typeof init_result === "string")
+                if(typeof init_result === "string")
-                return init_result;
+                    throw init_result;
+            } catch (e) {
+                if(typeof e === "string")
+                    return e;
+                throw e;
+            }
 
             return {};
         case "initialise":

web/js/workers/codec/OpusCodec.ts

@@ -1,6 +1,7 @@
 import * as cworker from "./CodecWorker";
 import {CodecType} from "tc-backend/web/codec/Codec";
 import {CodecWorker} from "./CodecWorker";
+import {type} from "os";
 
 declare global {
     interface Window {
@@ -33,17 +34,10 @@ const runtime_initialize_promise = new Promise((resolve, reject) => {
             let message;
             if(error instanceof DOMException)
                 message = "DOMException (" + error.name + "): " + error.code + " => " + error.message;
-            else {
+            else if(error instanceof Error) {
-                abort_message = error;
+                message = error.message;
+            } else {
                 message = error;
-                if(error.indexOf("no binaryen method succeeded") != -1) {
-                    for(const error of WASM_ERROR_MESSAGES) {
-                        if(last_error_message.indexOf(error) != -1) {
-                            message = "no native wasm support detected, but its required";
-                            break;
-                        }
-                    }
-                }
             }
 
             reject(message);
@@ -51,21 +45,44 @@ const runtime_initialize_promise = new Promise((resolve, reject) => {
     });
 });
 
-let abort_message: string = undefined;
-let last_error_message: string;
 self.__init_em_module.push(Module => {
     Module['print'] = function() {
-        if(arguments.length == 1 && arguments[0] == abort_message)
+        const message = arguments[0] as string;
-            return; /* we don't need to reprint the abort message! */
+        if(message.startsWith("CompileError: WebAssembly.instantiate(): ")) {
-
+            /* Compile errors also get printed to error stream so no need to log them here */
+            return;
+        }
         console.log(...arguments);
     };
 
     Module['printErr'] = function() {
-        if(arguments.length == 1 && arguments[0] == abort_message)
+        const message = arguments[0] as string;
-            return; /* we don't need to reprint the abort message! */
+        if(message.startsWith("wasm streaming compile failed: ")) {
+            const error_message = message.substr(31);
+            if(error_message.startsWith("TypeError: Failed to execute 'compile' on 'WebAssembly': ")) {
+                console.warn("Failed to compile opus native code: %s", error_message.substr(57));
+            } else {
+                console.warn("Failed to prepare opus native code asynchronously: %s", error_message);
+            }
+            return;
+        } else if(message === "falling back to ArrayBuffer instantiation") {
+            /*
+                We suppress this message, because it comes directly after "wasm streaming compile failed:".
+                So if we want to print multiple lines we just have to edit the lines above.
+             */
+            return;
+        } else if(message.startsWith("failed to asynchronously prepare wasm:")) {
+            /*
+                Will be handled via abort
+             */
+            return;
+        } else if(message.startsWith("CompileError: WebAssembly.instantiate():")) {
+            /*
+                Will be handled via abort already
+             */
+            return;
+        }
 
-        last_error_message = arguments[0];
         for(const suppress of WASM_ERROR_MESSAGES)
             if((arguments[0] as string).indexOf(suppress) != -1)
                 return;
@@ -76,6 +93,18 @@ self.__init_em_module.push(Module => {
     Module['locateFile'] = file => "../../wasm/" + file;
 });
 
+self.addEventListener("unhandledrejection", event => {
+    if(event.reason instanceof Error) {
+        if(event.reason.name === "RuntimeError" && event.reason.message.startsWith("abort(CompileError: WebAssembly.instantiate():")) {
+            /*
+                We already handled that error via the Module['printErr'] callback.
+             */
+            event.preventDefault();
+            return;
+        }
+    }
+});
+
 enum OpusType {
     VOIP = 2048,
     AUDIO = 2049,