Updated the loader which now uses webpack assets

file.ts

@@ -32,7 +32,7 @@ type ProjectResource = {
 const APP_FILE_LIST_SHARED_SOURCE: ProjectResource[] = [
     { /* javascript files as manifest.json */
         "type": "js",
-        "search-pattern": /.*\.(js|json|svg|png|css|html)$/,
+        "search-pattern": /.*\.(js|json|svg|png|css)$/,
         "build-target": "dev|rel",
 
         "path": "js/",

loader/app/css/loader.scss

@@ -81,7 +81,7 @@
 
 				width: 249px;
 				height: 125px;
-				background: url("../images/steam.png") 0 0;
+				background: url("../../images/steam.png") 0 0;
 
 				animation: sprite-steam 2.5s steps(50) forwards infinite;
 			}
@@ -160,19 +160,19 @@
 	}
 }
 
-@keyframes loader-initial-sequence {
+@keyframes :global(loader-initial-sequence) {
 	to {
 		display: none;
 	}
 }
 
-@keyframes sprite-steam {
+@keyframes :global(sprite-steam) {
 	to {
 		background-position: 0 -6250px;
 	}
 }
 
-@keyframes swipe-out-bowl {
+@keyframes :global(swipe-out-bowl) {
 	from {
 		transform: translate3d(0, 0, 0);
 	}
@@ -188,7 +188,7 @@
 	}
 }
 
-@keyframes swipe-out-text {
+@keyframes :global(swipe-out-text) {
 	from {
 		transform: translate3d(0, 0, 0);
 	}
@@ -204,19 +204,19 @@
 	}
 }
 
-@keyframes animation-nothing {
+@keyframes :global(animation-nothing) {
 	to {
 		background-position: 0 -6250px;
 	}
 }
 
-@keyframes overlay-fade {
+@keyframes :global(overlay-fade) {
 	to {
 		opacity: 0;
 	}
 }
 
-@keyframes loader-setup-timeout {
+@keyframes :global(loader-setup-timeout) {
 	to {
 		opacity: 1;
 	}

loader/app/css/overlay.scss

@@ -30,8 +30,17 @@
         }
     }
 
+    #overlay-no-js {
+        display: block;
+        color: #999;
+
+        svg {
+            fill: #999;
+        }
+    }
+
     #critical-load {
-        img {
+        .img {
             height: 12em
         }
 
@@ -45,6 +54,11 @@
             margin-top: .5em
         }
     }
+
+    svg {
+        max-height: 100%;
+        max-width: 100%;
+    }
 }
 
 

loader/images/script.svg

@@ -0,0 +1,66 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 58 58" style="enable-background:new 0 0 58 58;" xml:space="preserve">
+<g>
+	<path d="M6.5,41v15c0,1.009,1.22,2,2.463,2h40.074c1.243,0,2.463-0.991,2.463-2V41H6.5z M27.021,51.566
+		c0,0.474-0.087,0.873-0.26,1.196c-0.174,0.323-0.406,0.583-0.697,0.779c-0.292,0.196-0.627,0.333-1.005,0.41
+		s-0.769,0.116-1.169,0.116c-0.201,0-0.436-0.021-0.704-0.062s-0.547-0.104-0.834-0.191s-0.563-0.185-0.827-0.294
+		c-0.265-0.109-0.488-0.232-0.67-0.369l0.697-1.107c0.091,0.063,0.221,0.13,0.39,0.198s0.353,0.132,0.554,0.191
+		c0.2,0.06,0.41,0.111,0.629,0.157s0.424,0.068,0.615,0.068c0.482,0,0.868-0.094,1.155-0.28s0.439-0.504,0.458-0.95v-7.711h1.668
+		V51.566z M34.958,52.298c-0.15,0.342-0.362,0.643-0.636,0.902s-0.611,0.467-1.012,0.622c-0.401,0.155-0.857,0.232-1.367,0.232
+		c-0.219,0-0.444-0.012-0.677-0.034s-0.468-0.062-0.704-0.116c-0.237-0.055-0.463-0.13-0.677-0.226s-0.399-0.212-0.554-0.349
+		l0.287-1.176c0.127,0.073,0.289,0.144,0.485,0.212s0.398,0.132,0.608,0.191c0.209,0.06,0.419,0.107,0.629,0.144
+		c0.209,0.036,0.405,0.055,0.588,0.055c0.556,0,0.982-0.13,1.278-0.39s0.444-0.645,0.444-1.155c0-0.31-0.105-0.574-0.314-0.793
+		c-0.21-0.219-0.472-0.417-0.786-0.595s-0.654-0.355-1.019-0.533c-0.365-0.178-0.707-0.388-1.025-0.629
+		c-0.319-0.241-0.584-0.526-0.793-0.854c-0.21-0.328-0.314-0.738-0.314-1.23c0-0.446,0.082-0.843,0.246-1.189
+		s0.385-0.641,0.663-0.882s0.602-0.426,0.971-0.554s0.759-0.191,1.169-0.191c0.419,0,0.843,0.039,1.271,0.116
+		c0.428,0.077,0.774,0.203,1.039,0.376c-0.055,0.118-0.119,0.248-0.191,0.39c-0.073,0.142-0.142,0.273-0.205,0.396
+		c-0.064,0.123-0.119,0.226-0.164,0.308c-0.046,0.082-0.073,0.128-0.082,0.137c-0.055-0.027-0.116-0.063-0.185-0.109
+		s-0.167-0.091-0.294-0.137c-0.128-0.046-0.297-0.077-0.506-0.096c-0.21-0.019-0.479-0.014-0.807,0.014
+		c-0.183,0.019-0.355,0.07-0.52,0.157s-0.311,0.193-0.438,0.321c-0.128,0.128-0.229,0.271-0.301,0.431
+		c-0.073,0.159-0.109,0.313-0.109,0.458c0,0.364,0.104,0.658,0.314,0.882c0.209,0.224,0.469,0.419,0.779,0.588
+		c0.31,0.169,0.646,0.333,1.012,0.492c0.364,0.159,0.704,0.354,1.019,0.581s0.576,0.513,0.786,0.854
+		c0.209,0.342,0.314,0.781,0.314,1.319C35.184,51.603,35.108,51.956,34.958,52.298z"/>
+	<path d="M51.5,39V13.978c0-0.766-0.092-1.333-0.55-1.792L39.313,0.55C38.964,0.201,38.48,0,37.985,0H8.963
+		C7.777,0,6.5,0.916,6.5,2.926V39H51.5z M29.5,32c0,0.552-0.447,1-1,1s-1-0.448-1-1v-3c0-0.552,0.447-1,1-1s1,0.448,1,1V32z
+		 M37.5,3.391c0-0.458,0.553-0.687,0.877-0.363l10.095,10.095C48.796,13.447,48.567,14,48.109,14H37.5V3.391z M36.5,23v-4
+		c0-0.551-0.448-1-1-1c-0.553,0-1-0.448-1-1s0.447-1,1-1c1.654,0,3,1.346,3,3v4c0,1.103,0.897,2,2,2c0.553,0,1,0.448,1,1
+		s-0.447,1-1,1c-1.103,0-2,0.897-2,2v4c0,1.654-1.346,3-3,3c-0.553,0-1-0.448-1-1s0.447-1,1-1c0.552,0,1-0.449,1-1v-4
+		c0-1.2,0.542-2.266,1.382-3C37.042,25.266,36.5,24.2,36.5,23z M28.5,21c0.828,0,1.5,0.672,1.5,1.5S29.328,24,28.5,24
+		S27,23.328,27,22.5S27.672,21,28.5,21z M16.5,25c1.103,0,2-0.897,2-2v-4c0-1.654,1.346-3,3-3c0.553,0,1,0.448,1,1s-0.447,1-1,1
+		c-0.552,0-1,0.449-1,1v4c0,1.2-0.542,2.266-1.382,3c0.84,0.734,1.382,1.8,1.382,3v4c0,0.551,0.448,1,1,1c0.553,0,1,0.448,1,1
+		s-0.447,1-1,1c-1.654,0-3-1.346-3-3v-4c0-1.103-0.897-2-2-2c-0.553,0-1-0.448-1-1S15.947,25,16.5,25z"/>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

loader/index.ejs

@@ -40,10 +40,10 @@
             gtag('config', 'UA-113151733-4');
         </script>
 
-        <link rel="preload" as="image" href="img/loader/initial-sequence.gif">
+        <link rel="preload" as="image" href="<%= require("./images/initial-sequence.gif") %>">
-        <link rel="preload" as="image" href="img/loader/bowl.png">
+        <link rel="preload" as="image" href="<%= require("./images/bowl.png") %>">
         <% /* We don't preload the bowl since it's only a div background */ %>
-        <link rel="preload" as="image" href="img/loader/text.png">
+        <link rel="preload" as="image" href="<%= require("./images/text.png") %>">
 
         <%= htmlWebpackPlugin.tags.headTags %>
     </head>
@@ -52,7 +52,9 @@
         <noscript>
             <div id="overlay-no-js">
                 <div class="container">
-                    <img draggable="false" src="img/script.svg" height="128px" alt="no script" >
+                    <div class="img">
+                        <%= require("./images/script.svg") %>
+                    </div>
                     <h1>Please enable JavaScript</h1>
                     <h3>TeaSpeak web could not run without it!</h3>
                     <h3>Its like you, without coffee</h3>
@@ -68,16 +70,16 @@
         <div class="loader" id="loader-overlay">
             <div class="container">
                 <div class="setup">
-                    <lazy-img src="img/loader/initial-sequence.gif" alt="initial loading sequence" x-animation-depend="normal"></lazy-img>
+                    <lazy-img src="<%= require("./images/initial-sequence.gif") %>" alt="initial loading sequence" x-animation-depend="normal"></lazy-img>
-                    <lazy-img src="img/loader/halloween-initial-sequence.gif" alt="initial loading sequence" x-animation-depend="halloween"></lazy-img>
+                    <lazy-img src="<%= require("./images/halloween-initial-sequence.gif") %>" alt="initial loading sequence" x-animation-depend="halloween"></lazy-img>
                 </div>
                 <div class="idle animation-normal">
-                    <lazy-img class="bowl" src="img/loader/bowl.png" alt="bowl" x-animation-depend="normal"></lazy-img>
+                    <lazy-img class="bowl" src="<%= require("./images/bowl.png") %>" alt="bowl" x-animation-depend="normal"></lazy-img>
-                    <lazy-img class="text" src="img/loader/text.png" alt="TeaSpeak" x-animation-depend="normal"></lazy-img>
+                    <lazy-img class="text" src="<%= require("./images/text.png") %>" alt="TeaSpeak" x-animation-depend="normal"></lazy-img>
                     <div class="steam"></div>
                 </div>
                 <div class="idle animation-halloween">
-                    <lazy-img src="img/loader/halloween-loop.gif" alt="halloween loop" x-animation-depend="halloween"></lazy-img>
+                    <lazy-img src="<%= require("./images/halloween-loop.gif") %>" alt="halloween loop" x-animation-depend="halloween"></lazy-img>
                 </div>
             </div>
 
@@ -87,7 +89,9 @@
         <!-- Critical load error -->
         <div class="fulloverlay" id="critical-load">
             <div class="container">
-                <img draggable="false" src="img/loading_error_right.svg" alt="load error" />
+                <div class="img">
+                    <%= require("./images/loading_error_right.svg") %>
+                </div>
 
                 <h1 class="error"></h1>
                 <h3 class="detail"></h3>

package.json

@@ -13,7 +13,7 @@
     "webpack-web": "webpack --config webpack-web.config.js",
     "webpack-client": "webpack --config webpack-client.config.js",
     "generate-i18n-gtranslate": "node shared/generate_i18n_gtranslate.js",
-    "dev-server": "webpack serve --config webpack-web.config.js"
+    "dev-server": "npm run compile-project-base && webpack serve --config webpack-web.config.js"
   },
   "author": "TeaSpeak (WolverinDEV)",
   "license": "ISC",
@@ -47,6 +47,7 @@
     "circular-dependency-plugin": "^5.2.0",
     "clean-css": "^4.2.1",
     "clean-webpack-plugin": "^3.0.0",
+    "copy-webpack-plugin": "^8.0.0",
     "css-loader": "^3.6.0",
     "css-minimizer-webpack-plugin": "^1.3.0",
     "exports-loader": "^0.7.0",
@@ -112,6 +113,7 @@
     "simple-jsonp-promise": "^1.1.0",
     "twemoji": "^13.0.0",
     "url-knife": "^3.1.3",
+    "webcrypto-liner": "^1.2.4",
     "webpack-manifest-plugin": "^3.1.0",
     "webrtc-adapter": "^7.5.1"
   }

webpack.config.ts

@@ -3,7 +3,7 @@ import * as util from "util";
 import * as path from "path";
 import * as child_process from "child_process";
 
-import { DefinePlugin, Configuration } from "webpack";
+import { DefinePlugin, Configuration, } from "webpack";
 
 import { Plugin as SvgSpriteGenerator } from "webpack-svg-sprite-generator";
 const ManifestGenerator = require("./webpack/ManifestPlugin");
@@ -14,6 +14,7 @@ import {TranslateableWebpackPlugin} from "./tools/trgen/WebpackPlugin";
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
 const TerserPlugin = require('terser-webpack-plugin');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
 
 const { CleanWebpackPlugin } = require("clean-webpack-plugin");
 const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
@@ -87,8 +88,8 @@ export const config = async (target: "web" | "client"): Promise<Configuration &
 
     return {
         entry: {
-            "loader": ["./loader/app/index.ts"],
+            "loader": "./loader/app/index.ts",
-            "modal-external": ["./shared/js/ui/react-elements/external-modal/PopoutEntrypoint.ts"],
+            "modal-external": "./shared/js/ui/react-elements/external-modal/PopoutEntrypoint.ts",
             //"devel-main": "./shared/js/devel_main.ts"
         },
 
@@ -98,6 +99,14 @@ export const config = async (target: "web" | "client"): Promise<Configuration &
             new CleanWebpackPlugin(),
             new DefinePlugin(await generateDefinitions(target)),
 
+            new CopyWebpackPlugin({
+                patterns: [
+                    { from: path.join(__dirname, "shared", "img"), to: 'img' },
+                    { from: path.join(__dirname, "shared", "i18n"), to: 'i18n' },
+                    { from: path.join(__dirname, "shared", "audio"), to: 'audio' }
+                ]
+            }),
+
             new MiniCssExtractPlugin({
                 filename: isDevelopment ? "[name].[contenthash].css" : "[contenthash].css",
                 chunkFilename: isDevelopment ? "[name].[contenthash].css" : "[contenthash].css",
@@ -108,7 +117,6 @@ export const config = async (target: "web" | "client"): Promise<Configuration &
                 outputFileName: "manifest.json",
                 context: __dirname
             }),
-
             new SvgSpriteGenerator({
                 dtsOutputFolder: path.join(__dirname, "shared", "svg-sprites"),
                 publicPath: "js/",
@@ -150,7 +158,7 @@ export const config = async (target: "web" | "client"): Promise<Configuration &
             generateIndexPlugin(target),
             new HtmlWebpackInlineSourcePlugin(HtmlWebpackPlugin),
 
-            translateablePlugin
+            translateablePlugin,
             //new BundleAnalyzerPlugin(),
         ].filter(e => !!e),
 
@@ -200,7 +208,6 @@ export const config = async (target: "web" | "client"): Promise<Configuration &
                             options: {
                                 context: __dirname,
                                 colors: true,
-
                                 getCustomTransformers: program => ({
                                     before: [translateablePlugin.createTypeScriptTransformer(program)]
                                 }),
@@ -249,7 +256,7 @@ export const config = async (target: "web" | "client"): Promise<Configuration &
             filename: isDevelopment ? "[name].[contenthash].js" : "[contenthash].js",
             chunkFilename: isDevelopment ? "[name].[contenthash].js" : "[contenthash].js",
             path: path.resolve(__dirname, 'dist'),
-            publicPath: "js/"
+            publicPath: "/js/"
         },
         performance: {
             hints: false
@@ -266,10 +273,13 @@ export const config = async (target: "web" | "client"): Promise<Configuration &
             ]
         },
         devServer: {
-            publicPath: "/",
+            publicPath: "/js/",
             contentBase: path.join(__dirname, 'dist'),
             writeToDisk: true,
-            compress: true
+            compress: true,
+            hot: false,
+            inline: false,
+            liveReload: false,
         },
     };
 };