BC-8193 - Expanding and registering BBB (#3469)

* adding yellow to color picker in room * implementing VC element + VC element scope * determine which VC is running * positioning yellow color for rooms * adding more functionality (info messages) and tests for VC element * fixing long title in video conference creation dialog * approaching to fix iOS bug
hpi-schul-cloud · Dec 16, 2024 · 9287dda · 9287dda
1 parent bfe0c96
commit 9287dda
Show file tree

Hide file tree

Showing 37 changed files with 5,276 additions and 3,135 deletions.
diff --git a/config/webpack/webpack.common.js b/config/webpack/webpack.common.js
@@ -145,6 +145,9 @@ module.exports = {
 			"@feature-board-collaborative-text-editor-element": getDir(
 				"src/modules/feature/board-collaborative-text-editor-element"
 			),
+			"@feature-board-video-conference-element": getDir(
+				"src/modules/feature/board-video-conference-element"
+			),
 			"@feature-board-deleted-element": getDir(
 				"src/modules/feature/board-deleted-element"
 			),

diff --git a/src/assets/img/index.d.ts b/src/assets/img/index.d.ts
@@ -11,3 +11,7 @@ declare module "@/assets/img/collaborativeEditor.svg" {
 	const value: string;
 	export default value;
 }
+declare module "@/assets/img/videoConference.svg" {
+	const value: string;
+	export default value;
+}
diff --git a/src/assets/img/videoConference.svg b/src/assets/img/videoConference.svg
diff --git a/src/components/icons/material/index.ts b/src/components/icons/material/index.ts
@@ -136,6 +136,7 @@ import {
 	mdiTune,
 	mdiUndo,
 	mdiUndoVariant,
+	mdiVideo,
 	mdiViewAgendaOutline,
 	mdiViewDashboard,
 	mdiViewDashboardOutline,
@@ -282,6 +283,7 @@ export {
 	mdiTune,
 	mdiUndo,
 	mdiUndoVariant,
+	mdiVideo,
 	mdiViewAgendaOutline,
 	mdiViewDashboard,
 	mdiViewDashboardOutline,

diff --git a/src/locales/de.ts b/src/locales/de.ts
@@ -167,6 +167,7 @@ export default {
 	"common.words.color.purple": "Violett",
 	"common.words.color.red": "Rot",
 	"common.words.color.turquoise": "Türkis",
+	"common.words.color.yellow": "Gelb",
 	"common.words.copiedToClipboard": "In die Zwischenablage kopiert",
 	"common.words.courseGroups": "Kursgruppen",
 	"common.words.courses": "Kurse",
@@ -353,6 +354,8 @@ export default {
 	"components.board.menu.fileElement": "Datei-Einstellungen",
 	"components.board.menu.linkElement": "Link-Einstellungen",
 	"components.board.menu.submissionElement": "Abgabe-Einstellungen",
+	"components.board.menu.videoConferenceElement":
+		"Videokonferenz-Einstellungen",
 	"components.board.menu.deletedElement": "Gelöschter-Inhalt-Einstellungen",
 	"components.board.notifications.errors.fileNameExists":
 		"Es existiert bereits eine Datei mit diesem Namen.",
@@ -448,6 +451,9 @@ export default {
 	"components.cardElement.titleElement.validation.required":
 		"Bitte Titel angeben.",
 	"components.cardElement.titleElement": "Titelelement",
+	"components.cardElement.videoConferenceElement": "Videokonferenz",
+	"components.cardElement.videoConferenceElement.label":
+		"Videokonferenz-Titel einfügen",
 	"components.cardElement.deletedElement": "Gelöschter Inhalt",
 	"components.cardElement.deletedElement.warning.externalToolElement":
 		"Tool {toolName} nicht verfügbar. Bitte an Schuladministrator:in wenden.",
@@ -472,6 +478,8 @@ export default {
 	"components.elementTypeSelection.elements.submissionElement.subtitle":
 		"Abgabe",
 	"components.elementTypeSelection.elements.textElement.subtitle": "Text",
+	"components.elementTypeSelection.elements.videoConferenceElement.subtitle":
+		"Videokonferenz",
 	"components.externalTools.status.deactivated": "Deaktiviert",
 	"components.externalTools.status.incomplete": "Unvollständig",
 	"components.externalTools.status.latest": "Aktuell",
@@ -1494,6 +1502,14 @@ export default {
 		"Lehrkraft erfolgreich angelegt!",
 	"pages.administration.teachers.new.title": "Lehrkraft hinzufügen",
 	"pages.administration.teachers.table.edit.ariaLabel": "Lehrkraft bearbeiten",
+	"pages.common.tools.configureVideoconferenceDialog.title":
+		"Videokonferenz erstellen",
+	"pages.common.tools.configureVideoconferenceDialog.text.allModeratorPermission":
+		"Alle Nutzer:innen nehmen als Moderator:in teil",
+	"pages.common.tools.configureVideoconferenceDialog.text.mute":
+		"Teilnehmer:innen beim Betreten stummschalten",
+	"pages.common.tools.configureVideoconferenceDialog.text.waitingRoom":
+		"Freigabe durch Moderator:in, bevor der Raum betreten werden kann",
 	"pages.content._id.addToTopic": "Hinzufügen zu",
 	"pages.content._id.collection.selectElements":
 		"Wählen Sie die Elemente, die Sie zum Thema hinzufügen möchten",
@@ -1562,14 +1578,6 @@ export default {
 	"pages.courseRooms.tabLabel.groups": "Gruppen",
 	"pages.courseRooms.tabLabel.tools": "Tools",
 	"pages.courseRooms.tabLabel.toolsOld": "Tools",
-	"pages.courseRooms.tools.configureVideoconferenceDialog.title":
-		"Videokonferenz {roomName} erstellen",
-	"pages.courseRooms.tools.configureVideoconferenceDialog.text.allModeratorPermission":
-		"Alle Nutzer:innen nehmen als Moderator:in teil",
-	"pages.courseRooms.tools.configureVideoconferenceDialog.text.mute":
-		"Teilnehmer:innen beim Betreten stummschalten",
-	"pages.courseRooms.tools.configureVideoconferenceDialog.text.waitingRoom":
-		"Freigabe durch Moderator:in, bevor der Raum betreten werden kann",
 	"pages.files.overview.courseFiles": "Kurs-Dateien",
 	"pages.files.overview.favorites": "Favoriten",
 	"pages.files.overview.personalFiles": "Meine persönlichen Dateien",
@@ -1809,6 +1817,10 @@ export default {
 		"Die Videokonferenz wurde noch nicht gestartet oder du bist nicht berechtigt, an ihr teilzunehmen.",
 	"pages.videoConference.info.notStarted":
 		"Die Videokonferenz wurde noch nicht gestartet.",
+	"pages.videoConference.info.notEnabledParticipants":
+		"Das Element ist nicht mehr verfügbar. Bitte an die Lehrkraft wenden.",
+	"pages.videoConference.info.notEnabledTeacher":
+		"Das Element ist nicht mehr verfügbar. Bitte an den Admin wenden.",
 	"pages.videoConference.title": "Videokonferenz BigBlueButton",
 	"error.500":
 		"Es gibt Probleme im System. Wir arbeiten daran, das Problem zu beheben. Bitte später erneut versuchen.",

diff --git a/src/locales/en.ts b/src/locales/en.ts
@@ -168,6 +168,7 @@ export default {
 	"common.words.color.purple": "Purple",
 	"common.words.color.red": "Red",
 	"common.words.color.turquoise": "Turquoise",
+	"common.words.color.yellow": "Yellow",
 	"common.words.copiedToClipboard": "Copied to the clipboard",
 	"common.words.courseGroups": "Course Groups",
 	"common.words.courses": "Courses",
@@ -350,6 +351,7 @@ export default {
 	"components.board.menu.fileElement": "File settings",
 	"components.board.menu.linkElement": "Link settings",
 	"components.board.menu.submissionElement": "Submission settings",
+	"components.board.menu.videoConferenceElement": "Video conference settings",
 	"components.board.menu.deletedElement": "Deleted content settings",
 	"components.board.notifications.errors.fileNameExists":
 		"A file with this name already exists.",
@@ -445,6 +447,9 @@ export default {
 	"components.cardElement.titleElement.validation.required":
 		"Please enter a title.",
 	"components.cardElement.titleElement": "Title element",
+	"components.cardElement.videoConferenceElement": "Video conference",
+	"components.cardElement.videoConferenceElement.label":
+		"Insert video conference title",
 	"components.cardElement.deletedElement": "Deleted content",
 	"components.cardElement.deletedElement.warning.externalToolElement":
 		"Tool {toolName} not available. Please contact the school administrator.",
@@ -468,6 +473,8 @@ export default {
 	"components.elementTypeSelection.elements.submissionElement.subtitle":
 		"Submission",
 	"components.elementTypeSelection.elements.textElement.subtitle": "Text",
+	"components.elementTypeSelection.elements.videoConferenceElement.subtitle":
+		"Video conference",
 	"components.externalTools.status.deactivated": "Deactivated",
 	"components.externalTools.status.incomplete": "Configuration incomplete",
 	"components.externalTools.status.latest": "Latest",
@@ -1472,6 +1479,14 @@ export default {
 	"pages.administration.teachers.new.success": "Teacher successfully created!",
 	"pages.administration.teachers.new.title": "Add teacher",
 	"pages.administration.teachers.table.edit.ariaLabel": "Edit teacher",
+	"pages.common.tools.configureVideoconferenceDialog.title":
+		"Create video conference",
+	"pages.common.tools.configureVideoconferenceDialog.text.allModeratorPermission":
+		"All users participate as moderators",
+	"pages.common.tools.configureVideoconferenceDialog.text.mute":
+		"Mute participants when entering",
+	"pages.common.tools.configureVideoconferenceDialog.text.waitingRoom":
+		"Approval by the moderator before the room can be entered",
 	"pages.content._id.addToTopic": "To be added to",
 	"pages.content._id.collection.selectElements":
 		"Select the items you want to add to the topic",
@@ -1538,14 +1553,6 @@ export default {
 	"pages.courseRooms.tabLabel.groups": "Groups",
 	"pages.courseRooms.tabLabel.tools": "Tools",
 	"pages.courseRooms.tabLabel.toolsOld": "Tools",
-	"pages.courseRooms.tools.configureVideoconferenceDialog.title":
-		"Create video conference {roomName}",
-	"pages.courseRooms.tools.configureVideoconferenceDialog.text.allModeratorPermission":
-		"All users participate as moderators",
-	"pages.courseRooms.tools.configureVideoconferenceDialog.text.mute":
-		"Mute participants when entering",
-	"pages.courseRooms.tools.configureVideoconferenceDialog.text.waitingRoom":
-		"Approval by the moderator before the room can be entered",
 	"pages.files.overview.courseFiles": "Course files",
 	"pages.files.overview.favorites": "Favourites",
 	"pages.files.overview.personalFiles": "My personal files",
@@ -1776,6 +1783,10 @@ export default {
 		"The video conference hasn't started yet or you don't have permission to join it.",
 	"pages.videoConference.info.notStarted":
 		"The video conference hasn't started yet.",
+	"pages.videoConference.info.notEnabledParticipants":
+		"The element is no longer available. Please contact the teacher.",
+	"pages.videoConference.info.notEnabledTeacher":
+		"The element is no longer available. Please contact the admin.",
 	"pages.videoConference.title": "Video conference BigBlueButton",
 	"error.500":
 		"There are problems in the system. We are working on fixing the issue. Please try again later.",

diff --git a/src/locales/es.ts b/src/locales/es.ts
@@ -170,6 +170,7 @@ export default {
 	"common.words.color.purple": "Violeta",
 	"common.words.color.red": "Roja",
 	"common.words.color.turquoise": "Turquesa",
+	"common.words.color.yellow": "Amarillo",
 	"common.words.copiedToClipboard": "Copiado en el portapapeles",
 	"common.words.courseGroups": "grupos de cursos",
 	"common.words.courses": "Cursos",
@@ -357,6 +358,8 @@ export default {
 	"components.board.menu.fileElement": "Configuración del archivo",
 	"components.board.menu.linkElement": "Configuración del enlace",
 	"components.board.menu.submissionElement": "Configuración del envío",
+	"components.board.menu.videoConferenceElement":
+		"Configuración de la videoconferencia",
 	"components.board.menu.deletedElement":
 		"Configuración de contenido eliminado",
 	"components.board.notifications.errors.fileNameExists":
@@ -453,6 +456,9 @@ export default {
 	"components.cardElement.titleElement.validation.required":
 		"Por favor ingrese un título.",
 	"components.cardElement.titleElement": "Elemento título",
+	"components.cardElement.videoConferenceElement": "Videoconferencia",
+	"components.cardElement.videoConferenceElement.label":
+		"Insertar título de la videoconferencia",
 	"components.cardElement.deletedElement": "Contenido eliminado",
 	"components.cardElement.deletedElement.warning.externalToolElement":
 		"La herramienta {toolName} no está disponible. Por favor comuníquese con el administrador de la escuela.",
@@ -477,6 +483,8 @@ export default {
 	"components.elementTypeSelection.elements.submissionElement.subtitle":
 		"Envíos",
 	"components.elementTypeSelection.elements.textElement.subtitle": "Texto",
+	"components.elementTypeSelection.elements.videoConferenceElement.subtitle":
+		"Videoconferencia",
 	"components.externalTools.status.deactivated": "Desactivado",
 	"components.externalTools.status.incomplete": "Configuración incompleta",
 	"components.externalTools.status.latest": "Actual",
@@ -1517,6 +1525,14 @@ export default {
 		"¡Profesor creado correctamente!",
 	"pages.administration.teachers.new.title": "Añadir profesor",
 	"pages.administration.teachers.table.edit.ariaLabel": "Editar profesor",
+	"pages.common.tools.configureVideoconferenceDialog.title":
+		"Crear videoconferencia",
+	"pages.common.tools.configureVideoconferenceDialog.text.allModeratorPermission":
+		"Todas las usuarias participan como moderadoras",
+	"pages.common.tools.configureVideoconferenceDialog.text.mute":
+		"Silenciar a las participantes al entrar",
+	"pages.common.tools.configureVideoconferenceDialog.text.waitingRoom":
+		"Aprobación del moderador antes de poder ingresar a la sala",
 	"pages.content._id.addToTopic": "Para ser añadido a",
 	"pages.content._id.collection.selectElements":
 		"Selecciona los elementos que deses añadir al tema",
@@ -1584,14 +1600,6 @@ export default {
 	"pages.courseRooms.tabLabel.groups": "Grupos",
 	"pages.courseRooms.tabLabel.tools": "Herramientas",
 	"pages.courseRooms.tabLabel.toolsOld": "Herramientas",
-	"pages.courseRooms.tools.configureVideoconferenceDialog.title":
-		"Crear videoconferencia {roomName}",
-	"pages.courseRooms.tools.configureVideoconferenceDialog.text.allModeratorPermission":
-		"Todas las usuarias participan como moderadoras",
-	"pages.courseRooms.tools.configureVideoconferenceDialog.text.mute":
-		"Silenciar a las participantes al entrar",
-	"pages.courseRooms.tools.configureVideoconferenceDialog.text.waitingRoom":
-		"Aprobación del moderador antes de poder ingresar a la sala",
 	"pages.files.overview.courseFiles": "Archivos del curso",
 	"pages.files.overview.favorites": "Favoritos",
 	"pages.files.overview.personalFiles": "Archivos personales",
@@ -1827,6 +1835,10 @@ export default {
 		"La videoconferencia aún no ha comenzado o no tienes permiso para unirte.",
 	"pages.videoConference.info.notStarted":
 		"La videoconferencia aún no ha comenzado.",
+	"pages.videoConference.info.notEnabledParticipants":
+		"El elemento ya no está disponible. Póngase en contacto con el profesor.",
+	"pages.videoConference.info.notEnabledTeacher":
+		"El elemento ya no está disponible. Póngase en contacto con el administrador.",
 	"pages.videoConference.title": "Videoconferencia BigBlueButton",
 	"error.500":
 		"Hay problemas en el sistema. Estamos trabajando para solucionar el problema. Vuelva a intentarlo más tarde.",

diff --git a/src/locales/uk.ts b/src/locales/uk.ts
@@ -170,6 +170,7 @@ export default {
 	"common.words.color.purple": "Фіалка",
 	"common.words.color.red": "Червоний",
 	"common.words.color.turquoise": "Бірюза",
+	"common.words.color.yellow": "Жовтий",
 	"common.words.copiedToClipboard": "Скопійовано в буфер обміну",
 	"common.words.courseGroups": "курсові групи",
 	"common.words.courses": "Мій курс",
@@ -358,6 +359,8 @@ export default {
 	"components.board.menu.fileElement": "Налаштування файлу",
 	"components.board.menu.linkElement": "Налаштування посилання",
 	"components.board.menu.submissionElement": "Налаштування Подання",
+	"components.board.menu.videoConferenceElement":
+		"Налаштування відеоконференція",
 	"components.board.menu.deletedElement": "Видалені налаштування вмісту",
 	"components.board.notifications.errors.fileNameExists":
 		"Файл з такою назвою вже існує.",
@@ -454,6 +457,9 @@ export default {
 	"components.cardElement.titleElement.validation.required":
 		"Будь ласка, введіть назву.",
 	"components.cardElement.titleElement": "Елемент заголовка",
+	"components.cardElement.videoConferenceElement": "Відеоконференція",
+	"components.cardElement.videoConferenceElement.label":
+		"Вставити назву відеоконференції",
 	"components.cardElement.deletedElement": "Видалений вміст",
 	"components.cardElement.deletedElement.warning.externalToolElement":
 		"Інструмент {toolName} недоступний. Будь ласка, зверніться до адміністратора школи.",
@@ -476,6 +482,8 @@ export default {
 	"components.elementTypeSelection.elements.submissionElement.subtitle":
 		"Подання",
 	"components.elementTypeSelection.elements.textElement.subtitle": "Текст",
+	"components.elementTypeSelection.elements.videoConferenceElement.subtitle":
+		"Відеоконференція",
 	"components.externalTools.status.deactivated": "Деактивовано",
 	"components.externalTools.status.incomplete": "Конфігурація не завершена",
 	"components.externalTools.status.latest": "Останній",
@@ -1500,6 +1508,14 @@ export default {
 	"pages.administration.teachers.new.success": "Викладача успішно створено!",
 	"pages.administration.teachers.new.title": "Додати викладача",
 	"pages.administration.teachers.table.edit.ariaLabel": "Редагування вчителя",
+	"pages.common.tools.configureVideoconferenceDialog.title":
+		"Створити відеоконференцію",
+	"pages.common.tools.configureVideoconferenceDialog.text.allModeratorPermission":
+		"Усі користувачі беруть участь як модератори",
+	"pages.common.tools.configureVideoconferenceDialog.text.mute":
+		"Вимкнення звуку учасників при вході",
+	"pages.common.tools.configureVideoconferenceDialog.text.waitingRoom":
+		"Схвалення модератором перед входом до кімнати",
 	"pages.content._id.addToTopic": "Для додавання в",
 	"pages.content._id.collection.selectElements":
 		"Виберіть елементи, які треба додати до теми",
@@ -1566,14 +1582,6 @@ export default {
 	"pages.courseRooms.tabLabel.groups": "Групи",
 	"pages.courseRooms.tabLabel.tools": "Інструмент",
 	"pages.courseRooms.tabLabel.toolsOld": "Інструмент",
-	"pages.courseRooms.tools.configureVideoconferenceDialog.title":
-		"Створити відеоконференцію {roomName}",
-	"pages.courseRooms.tools.configureVideoconferenceDialog.text.allModeratorPermission":
-		"Усі користувачі беруть участь як модератори",
-	"pages.courseRooms.tools.configureVideoconferenceDialog.text.mute":
-		"Вимкнення звуку учасників при вході",
-	"pages.courseRooms.tools.configureVideoconferenceDialog.text.waitingRoom":
-		"Схвалення модератором перед входом до кімнати",
 	"pages.files.overview.courseFiles": "Файли курсу",
 	"pages.files.overview.favorites": "Обрані",
 	"pages.files.overview.personalFiles": "Мої особисті справи",
@@ -1803,6 +1811,10 @@ export default {
 	"pages.videoConference.info.noPermission":
 		"Відеоконференція ще не почалася або у вас немає дозволу приєднатися до неї.",
 	"pages.videoConference.info.notStarted": "Відеоконференція ще не почалася.",
+	"pages.videoConference.info.notEnabledParticipants":
+		"Елемент більше не доступний. Будь ласка, зверніться до викладача.",
+	"pages.videoConference.info.notEnabledTeacher":
+		"Елемент більше не доступний. Будь ласка, зверніться з адміністратором.",
 	"pages.videoConference.title": "Відеоконференція BigBlueButton",
 	"error.500":
 		"Є проблеми в системі. Ми працюємо над усуненням проблеми. Будь ласка, спробуйте пізніше.",

diff --git a/src/modules/data/board/BoardApi.composable.ts b/src/modules/data/board/BoardApi.composable.ts
@@ -17,6 +17,7 @@ import {
 	RichTextElementContentBody,
 	RoomApiFactory,
 	SubmissionContainerElementContentBody,
+	VideoConferenceElementContentBody,
 } from "@/serverApi/v3";
 import { BoardContextType } from "@/types/board/BoardContext";
 import { AnyContentElement } from "@/types/board/ContentElement";
@@ -124,6 +125,13 @@ export const useBoardApi = () => {
 				type: ContentElementType.Drawing,
 			};
 		}
+
+		if (element.type === ContentElementType.VideoConference) {
+			return {
+				content: element.content,
+				type: ContentElementType.VideoConference,
+			} as VideoConferenceElementContentBody;
+		}
 		throw new Error("element.type mapping is undefined for updateElementCall");
 	};