diff --git a/Dockerfile b/Dockerfile
index df744628..05d8c62f 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -8,6 +8,12 @@ ENV PHOTOVIEW_API_ENDPOINT=${PHOTOVIEW_API_ENDPOINT}
ARG UI_PUBLIC_URL
ENV UI_PUBLIC_URL=${UI_PUBLIC_URL:-/}
+ARG VERSION
+ENV VERSION=${VERSION:-undefined}
+
+ARG BUILD_DATE
+ENV BUILD_DATE=${BUILD_DATE:-undefined}
+
RUN mkdir -p /app
WORKDIR /app
diff --git a/ui/build.mjs b/ui/build.mjs
index e8efb7bb..ae710f4e 100644
--- a/ui/build.mjs
+++ b/ui/build.mjs
@@ -12,7 +12,7 @@ const bs = browserSync.create()
const production = process.env.NODE_ENV == 'production'
const watchMode = process.argv[2] == 'watch'
-const ENVIRONMENT_VARIABLES = ['NODE_ENV', 'PHOTOVIEW_API_ENDPOINT']
+const ENVIRONMENT_VARIABLES = ['NODE_ENV', 'PHOTOVIEW_API_ENDPOINT', 'VERSION', 'BUILD_DATE']
const defineEnv = ENVIRONMENT_VARIABLES.reduce((acc, key) => {
acc[`process.env.${key}`] = process.env[key] ? `"${process.env[key]}"` : null
diff --git a/ui/src/Pages/SettingsPage/SettingsPage.tsx b/ui/src/Pages/SettingsPage/SettingsPage.tsx
index c8b1dbf6..afaac4d7 100644
--- a/ui/src/Pages/SettingsPage/SettingsPage.tsx
+++ b/ui/src/Pages/SettingsPage/SettingsPage.tsx
@@ -9,6 +9,7 @@ import Layout from '../../Layout'
import ScannerSection from './ScannerSection'
import UserPreferences from './UserPreferences'
import UsersTable from './Users/UsersTable'
+import VersionInfo from './VersionInfo'
export const SectionTitle = styled.h2<{ nospace?: boolean }>`
margin-top: ${({ nospace }) => (nospace ? '0' : '1.4em')} !important;
@@ -48,6 +49,7 @@ const SettingsPage = () => {
>
{t('settings.logout', 'Log out')}
+
)
}
diff --git a/ui/src/Pages/SettingsPage/VersionInfo.tsx b/ui/src/Pages/SettingsPage/VersionInfo.tsx
new file mode 100644
index 00000000..319f6c9d
--- /dev/null
+++ b/ui/src/Pages/SettingsPage/VersionInfo.tsx
@@ -0,0 +1,28 @@
+import React from 'react'
+import styled from 'styled-components'
+import {
+ InputLabelDescription,
+ InputLabelTitle,
+ SectionTitle,
+} from './SettingsPage'
+
+const VERSION = process.env.VERSION ? process.env.VERSION : 'undefined'
+const BUILD_DATE = process.env.BUILD_DATE ? process.env.BUILD_DATE : 'undefined'
+
+const VersionInfoWrapper = styled.div`
+ margin-bottom: 24px;
+`
+
+const VersionInfo = () => {
+ return (
+
+ Photoview Version
+ Release Version
+ {VERSION}
+ Build date
+ {BUILD_DATE}
+
+ )
+}
+
+export default VersionInfo