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 {