inject frontend version

Author: aspage2

.github/workflows/release.yml

@@ -20,6 +20,8 @@ jobs:
     - name: Build Frontend
       working-directory: ./web
       run: npm i -g yarn && yarn && yarn build
+      env:
+        FRONTEND_VERSION: '${{ github.ref_name }}'
 
     - name: Collect Artifacts
       run: tar -czf frontend.tar.gz ./web/dist/* ./web/static/index.html

web/src/StatusPage/Component.js

@@ -75,13 +75,17 @@ function ComponentVersions() {
 		<h2>Component Versions</h2>
 		<table><tbody>
 			<tr>
-				<td><b>MPD Version:</b></td>
-				<td>{vResult(mpdVersion, d=>d.version)}</td>
+				<td><b>Frontend Version:</b></td>
+				<td>{__VERSION__}</td>
 			</tr>
 			<tr>
 				<td><b>Proxy Version:</b></td>
 				<td>{vResult(proxyVersion, d=>d.version)}</td>
 			</tr>
+			<tr>
+				<td><b>MPD Version:</b></td>
+				<td>{vResult(mpdVersion, d=>d.version)}</td>
+			</tr>
 		</tbody></table>
 	</>
 }

web/webpack.config.js

@@ -1,5 +1,7 @@
 const TerserPlugin = require("terser-webpack-plugin");
 const path = require("path");
+const { DefinePlugin } = require("webpack");
+
 
 module.exports = {
   entry: "./src/index.js",
@@ -10,6 +12,13 @@ module.exports = {
   optimization: {
     minimizer: [new TerserPlugin()],
   },
+	plugins: [
+		new DefinePlugin({
+			__VERSION__: JSON.stringify(
+				process.env.FRONTEND_VERSION || "dev"
+			),
+		}),
+	],
   module: {
     rules: [
       {