diff --git a/src/components/ConversationSettings/LobbySettings.vue b/src/components/ConversationSettings/LobbySettings.vue
index 2dbb5b0e591..e88c44eb806 100644
--- a/src/components/ConversationSettings/LobbySettings.vue
+++ b/src/components/ConversationSettings/LobbySettings.vue
@@ -51,6 +51,12 @@
:input-class="['mx-input', { focusable: !lobbyTimerFieldDisabled }]"
v-bind="dateTimePickerAttrs"
@change="saveLobbyTimer" />
+
+ {{ getTimeZone }}
+
+
+ {{ getRelativeTime }}
+
@@ -64,6 +70,9 @@ import NcDateTimePicker from '@nextcloud/vue/dist/Components/NcDateTimePicker.js
import NcNoteCard from '@nextcloud/vue/dist/Components/NcNoteCard.js'
import { WEBINAR } from '../../constants.js'
+import { futureRelativeTime } from '../../utils/formattedTime.ts'
+
+const ONE_DAY_IN_MS = 24 * 60 * 60 * 1000
export default {
name: 'LobbySettings',
@@ -140,6 +149,24 @@ export default {
valueType: 'timestamp',
}
},
+
+ showRelativeTime() {
+ return this.lobbyTimer
+ && this.lobbyTimer > Date.now()
+ && (this.lobbyTimer - Date.now()) < ONE_DAY_IN_MS // less than 24 hours
+ },
+
+ getTimeZone() {
+ if (!this.lobbyTimer) {
+ return ''
+ }
+ const date = new Date(this.lobbyTimer)
+ return t('spreed', `Start time: ${date}`)
+ },
+
+ getRelativeTime() {
+ return futureRelativeTime(this.lobbyTimer)
+ },
},
methods: {
@@ -189,6 +216,16 @@ export default {