Add action to moderation menu to set the lobby timer

Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>

3 files changed, 78 insertions, 1 deletions

diff --git a/src/components/RightSidebar/RightSidebar.vue b/src/components/RightSidebar/RightSidebar.vue
index 3f96a8b2d..9e7471161 100644
--- a/src/components/RightSidebar/RightSidebar.vue
+++ b/src/components/RightSidebar/RightSidebar.vue
@@ -49,6 +49,16 @@
 				@change="toggleLobby">
 				{{ t('spreed', 'Enable lobby') }}
 			</ActionCheckbox>
+			<ActionInput
+				v-if="canFullModerate && hasLobbyEnabled"
+				icon="icon-calendar-dark"
+				type="datetime-local"
+				v-bind="dateTimePickerAttrs"
+				:value="lobbyTimer"
+				:disabled="lobbyTimerLoading"
+				@change="setLobbyTimer">
+				{{ t('spreed', 'Start time (optional)') }}
+			</ActionInput>
 		</template>
 		<AppSidebarTab
 			:order="1"
@@ -80,6 +90,7 @@
 
 <script>
 import ActionCheckbox from '@nextcloud/vue/dist/Components/ActionCheckbox'
+import ActionInput from '@nextcloud/vue/dist/Components/ActionInput'
 import ActionText from '@nextcloud/vue/dist/Components/ActionText'
 import AppSidebar from '@nextcloud/vue/dist/Components/AppSidebar'
 import AppSidebarTab from '@nextcloud/vue/dist/Components/AppSidebarTab'
@@ -96,6 +107,7 @@ export default {
 	name: 'RightSidebar',
 	components: {
 		ActionCheckbox,
+		ActionInput,
 		ActionText,
 		AppSidebar,
 		AppSidebarTab,
@@ -114,6 +126,7 @@ export default {
 	data() {
 		return {
 			contactsLoading: false,
+			lobbyTimerLoading: false,
 		}
 	},
 
@@ -137,6 +150,7 @@ export default {
 				isFavorite: false,
 				type: CONVERSATION.TYPE.PUBLIC,
 				lobbyState: WEBINAR.LOBBY.NONE,
+				lobbyTimer: 0,
 			}
 		},
 
@@ -163,6 +177,36 @@ export default {
 			return this.conversation.lobbyState === WEBINAR.LOBBY.NON_MODERATORS
 		},
 
+		lobbyTimer() {
+			// A timestamp of 0 means that there is no lobby, but it would be
+			// interpreted as the Unix epoch by the DateTimePicker.
+			if (this.conversation.lobbyTimer === 0) {
+				return undefined
+			}
+
+			// PHP timestamp is second-based; JavaScript timestamp is
+			// millisecond based.
+			return this.conversation.lobbyTimer * 1000
+		},
+
+		dateTimePickerAttrs() {
+			return {
+				format: 'YYYY-MM-DD HH:mm',
+				firstDayOfWeek: window.firstDay + 1, // Provided by server
+				lang: {
+					days: window.dayNamesShort, // Provided by server
+					months: window.monthNamesShort, // Provided by server
+				},
+				// Do not update the value until the confirm button has been
+				// pressed. Otherwise it would not be possible to set a lobby
+				// for today, because as soon as the day is selected the lobby
+				// timer would be set, but as no time was set at that point the
+				// lobby timer would be set to today at 00:00, which would
+				// disable the lobby due to being in the past.
+				confirm: true,
+			}
+		},
+
 		displaySearchBox() {
 			return this.conversation.type === CONVERSATION.TYPE.GROUP
 				|| this.conversation.type === CONVERSATION.TYPE.PUBLIC
@@ -215,6 +259,24 @@ export default {
 				enableLobby: this.conversation.lobbyState !== WEBINAR.LOBBY.NON_MODERATORS,
 			})
 		},
+
+		async setLobbyTimer(date) {
+			this.lobbyTimerLoading = true
+
+			let timestamp = 0
+			if (date) {
+				// PHP timestamp is second-based; JavaScript timestamp is
+				// millisecond based.
+				timestamp = date.getTime() / 1000
+			}
+
+			await this.$store.dispatch('setLobbyTimer', {
+				token: this.token,
+				timestamp: timestamp,
+			})
+
+			this.lobbyTimerLoading = false
+		},
 	},
 }
 </script>
diff --git a/src/services/conversationsService.js b/src/services/conversationsService.js
index 176ee0db3..b3b7a044a 100644
--- a/src/services/conversationsService.js
+++ b/src/services/conversationsService.js
@@ -198,11 +198,13 @@ const makePrivate = async function(token) {
  * Change the lobby state
  * @param {string} token The token of the conversation to be modified
  * @param {int} newState The new lobby state to set
+ * @param {int} timestamp The UNIX timestamp (in seconds) to set, if any
  */
-const changeLobbyState = async function(token, newState) {
+const changeLobbyState = async function(token, newState, timestamp) {
 	try {
 		const response = await axios.put(generateOcsUrl('apps/spreed/api/v1', 2) + `room/${token}/webinar/lobby`, {
 			state: newState,
+			timer: timestamp,
 		})
 		return response
 	} catch (error) {
diff --git a/src/store/conversationsStore.js b/src/store/conversationsStore.js
index ac7d7dc08..f758da753 100644
--- a/src/store/conversationsStore.js
+++ b/src/store/conversationsStore.js
@@ -142,6 +142,19 @@ const actions = {
 
 		commit('addConversation', conversation)
 	},
+
+	async setLobbyTimer({ commit, getters }, { token, timestamp }) {
+		const conversation = Object.assign({}, getters.conversations[token])
+		if (!conversation) {
+			return
+		}
+
+		// The backend requires the state and timestamp to be set together.
+		await changeLobbyState(token, conversation.lobbyState, timestamp)
+		conversation.lobbyTimer = timestamp
+
+		commit('addConversation', conversation)
+	},
 }
 
 export default { state, mutations, getters, actions }