feat: videos for all users and moderators

Users and moderators recording views

l10n/da.js

@@ -17,6 +17,7 @@ OC.L10N.register(
     "Edit" : "Rediger",
     "Welcome" : "Velkommen",
     "Miscellaneous" : "Diverse",
+    "Room name" : "Rumnavn",
     "Create" : "Opret",
     "Copy to clipboard" : "Kopier til udklipsholder",
     "Delete" : "Slet",

l10n/da.json

@@ -15,6 +15,7 @@
     "Edit" : "Rediger",
     "Welcome" : "Velkommen",
     "Miscellaneous" : "Diverse",
+    "Room name" : "Rumnavn",
     "Create" : "Opret",
     "Copy to clipboard" : "Kopier til udklipsholder",
     "Delete" : "Slet",

l10n/de.js

@@ -69,6 +69,7 @@ OC.L10N.register(
     "This message is shown to all users in the chat area after they joined." : "Diese Nachricht wird allen Benutzern im Chat-Bereich nach ihrem Beitritt angezeigt.",
     "Sets a limit on the number of participants for this room. Zero means there is no limit." : "Legt eine Begrenzung der Teilnehmerzahl für diesen Raum fest. Null bedeutet, dass es keine Begrenzung gibt.",
     "If enabled, the moderator is able to start the recording." : "Wenn aktiviert, kann der Moderator die Aufnahme starten.",
+    "Explanation of the different concepts that constitute access options :<br>- Public: Anyone who has the link can join.- <br>Internal: Only Nextcloud users can join.- <br>Password: Only guests who have the password can join..- <br>Waiting room: A moderator must accept each guest before they can join.- <br>Restricted : Only selected users and groups can access this room." : "Erläuterung der verschiedenen Konzepte bezüglich der Zugriffsrechte:<br>- Öffentlich: Jeder, der den Link hat, kann beitreten. <br>- Intern: Nur Nextcloud-Benutzer können beitreten. <br>- Passwort: Nur Gäste, die das Passwort haben, können beitreten. <br>- Warteraum: Ein Moderator muss jeden Gast vor dem Beitreten bestätigen.<br> – Eingeschränkt: Nur ausgewählte Benutzer und Gruppen haben Zugriff auf diesen Raum.",
     "A moderator is able to manage all participants in a meeting including kicking, muting or selecting a presenter. Users with the role moderator are also able to close a meeting or change the default settings." : "Ein Moderator kann die Teilnehmer einer Besprechung verwalten, was das Ausschließen, Stummschalten oder Gewährung von Moderatorenrechten beinhaltet. Benutzer mit Moderatorenrechten  können auch die Besprechung schließen oder die Standardeinstellungen ändern.",
     "If enabled, normal users have to wait until a moderator is in the room." : "Wenn aktiviert müssen Benutzer warten, bis ein Moderator den Raum betritt.",
     "If enabled, a moderator URL is generated which allows access with moderator permission." : "Wenn aktiviert, wird eine Moderator-URL generiert, die den Zugriff mit Moderatorberechtigung ermöglicht.",

l10n/de.json

@@ -67,6 +67,7 @@
     "This message is shown to all users in the chat area after they joined." : "Diese Nachricht wird allen Benutzern im Chat-Bereich nach ihrem Beitritt angezeigt.",
     "Sets a limit on the number of participants for this room. Zero means there is no limit." : "Legt eine Begrenzung der Teilnehmerzahl für diesen Raum fest. Null bedeutet, dass es keine Begrenzung gibt.",
     "If enabled, the moderator is able to start the recording." : "Wenn aktiviert, kann der Moderator die Aufnahme starten.",
+    "Explanation of the different concepts that constitute access options :<br>- Public: Anyone who has the link can join.- <br>Internal: Only Nextcloud users can join.- <br>Password: Only guests who have the password can join..- <br>Waiting room: A moderator must accept each guest before they can join.- <br>Restricted : Only selected users and groups can access this room." : "Erläuterung der verschiedenen Konzepte bezüglich der Zugriffsrechte:<br>- Öffentlich: Jeder, der den Link hat, kann beitreten. <br>- Intern: Nur Nextcloud-Benutzer können beitreten. <br>- Passwort: Nur Gäste, die das Passwort haben, können beitreten. <br>- Warteraum: Ein Moderator muss jeden Gast vor dem Beitreten bestätigen.<br> – Eingeschränkt: Nur ausgewählte Benutzer und Gruppen haben Zugriff auf diesen Raum.",
     "A moderator is able to manage all participants in a meeting including kicking, muting or selecting a presenter. Users with the role moderator are also able to close a meeting or change the default settings." : "Ein Moderator kann die Teilnehmer einer Besprechung verwalten, was das Ausschließen, Stummschalten oder Gewährung von Moderatorenrechten beinhaltet. Benutzer mit Moderatorenrechten  können auch die Besprechung schließen oder die Standardeinstellungen ändern.",
     "If enabled, normal users have to wait until a moderator is in the room." : "Wenn aktiviert müssen Benutzer warten, bis ein Moderator den Raum betritt.",
     "If enabled, a moderator URL is generated which allows access with moderator permission." : "Wenn aktiviert, wird eine Moderator-URL generiert, die den Zugriff mit Moderatorberechtigung ermöglicht.",

l10n/es_MX.js

@@ -13,6 +13,7 @@ OC.L10N.register(
     "Access" : "Acceso",
     "Edit" : "Editar",
     "Welcome" : "Bienvenido",
+    "Miscellaneous" : "Misceláneo",
     "Room name" : "Nombre del cuarto",
     "Create" : "Crear",
     "Copy to clipboard" : "Copiar al portapapeles",

l10n/es_MX.json

@@ -11,6 +11,7 @@
     "Access" : "Acceso",
     "Edit" : "Editar",
     "Welcome" : "Bienvenido",
+    "Miscellaneous" : "Misceláneo",
     "Room name" : "Nombre del cuarto",
     "Create" : "Crear",
     "Copy to clipboard" : "Copiar al portapapeles",

l10n/gl.js

@@ -22,7 +22,7 @@ OC.L10N.register(
     "API URL or secret not configured. Please contact your administrator." : "URL ou segredo da API  sen configurar. Póñase en contacto coa administración desta instancia.",
     "BigBlueButton Integration" : "Integración de BigBlueButton",
     "BigBlueButton integration for Nextcloud" : "Integración de BigBlueButton en Nextcloud",
-    "This app allows to create meetings with an external installation of [BigBlueButton](https://bigbluebutton.org).\n\n* **Room setup** Create multiple room configurations with name, welcome message …\n* **Share guest link** Share the room link with all your guests\n* **Share moderator link** Invite moderators to the room\n* **Share rooms** Share rooms with members, groups or circles\n* **Custom presentation** Start a room with a selected presentation from your file browser\n* **Manage recordings** View, share and delete recordings for your rooms\n* **Restrictions** Restrict room creation to certain groups\n* **Activities** Get an overview of your room activities\n\nQuick start guide and further information in our [readme](https://github.com/sualko/cloud_bbb).\nDo you like this application? Give something back to the open source community and checkout our\n[ways to contribute](https://github.com/sualko/cloud_bbb/blob/master/.github/contributing.md).\n\nDeveloper wanted! If you have time it would be awesome if you could help to enhance this application.\n\n*This app integrates BigBlueButton and is not endorsed or certified by BigBlueButton Inc. BigBlueButton and the BigBlueButton Logo are trademarks of BigBlueButton Inc.*" : "Esta aplicación permite crear xuntanzas cunha instalación externa de [BigBlueButton] (https://bigbluebutton.org).\n\n* **Configuración de salas** Crear múltiples configuracións de salas con nome, mensaxe de benvida …\n* **Compartir a ligazón de convidados** Compartir a ligazón da sala con todos os seus convidados\n* **Compartir ligazón de moderador** Convida moderadores á sala\n* **Compartir salas** Compartir salas con membros, grupos ou círculos\n* **Presentación personalizada** Inicie unha sala cunha presentación seleccionada dende o seu navegador de ficheiros\n* **Xestionar as gravacións** Ver, compartir e eliminar as gravacións das súas salas\n* **Restricións** Restrinxir a creación de salas a determinados grupos\n* ** Actividades** Obteña unha visión xeral das actividades da súa sala\n\nGuía de inicio rápido e máis información no noso [léame](https://github.com/sualko/cloud_bbb).\nGústalle esta aplicación? Devolva algo á comunidade de código aberto e consulte as nosas\n[formas de colaborar](https://github.com/sualko/cloud_bbb/blob/master/.github/contributing.md).\n\nBúscase programador! Se ten tempo, sería incríbel que puidese axudar a mellorar esta aplicación.\n\n*Esta aplicación integra BigBlueButton e non está aprobada nin certificada por BigBlueButton Inc. BigBlueButton e o logotipo de BigBlueButton son marcas comerciais de BigBlueButton Inc.*",
+    "This app allows to create meetings with an external installation of [BigBlueButton](https://bigbluebutton.org).\n\n* **Room setup** Create multiple room configurations with name, welcome message …\n* **Share guest link** Share the room link with all your guests\n* **Share moderator link** Invite moderators to the room\n* **Share rooms** Share rooms with members, groups or circles\n* **Custom presentation** Start a room with a selected presentation from your file browser\n* **Manage recordings** View, share and delete recordings for your rooms\n* **Restrictions** Restrict room creation to certain groups\n* **Activities** Get an overview of your room activities\n\nQuick start guide and further information in our [readme](https://github.com/sualko/cloud_bbb).\nDo you like this application? Give something back to the open source community and checkout our\n[ways to contribute](https://github.com/sualko/cloud_bbb/blob/master/.github/contributing.md).\n\nDeveloper wanted! If you have time it would be awesome if you could help to enhance this application.\n\n*This app integrates BigBlueButton and is not endorsed or certified by BigBlueButton Inc. BigBlueButton and the BigBlueButton Logo are trademarks of BigBlueButton Inc.*" : "Esta aplicación permite crear xuntanzas cunha instalación externa de [BigBlueButton] (https://bigbluebutton.org).\n\n* **Configuración de salas** Crear múltiples configuracións de salas con nome, mensaxe de benvida …\n* **Compartir a ligazón de convidados** Compartir a ligazón da sala con todos os seus convidados\n* **Compartir ligazón de moderador** Convida moderadores á sala\n* **Compartir salas** Compartir salas con membros, grupos ou círculos\n* **Presentación personalizada** Inicie unha sala cunha presentación seleccionada dende o seu navegador de ficheiros\n* **Xestionar as gravacións** Ver, compartir e eliminar as gravacións das súas salas\n* **Restricións** Restrinxir a creación de salas a determinados grupos\n* ** Actividades** Obteña unha vista xeral das actividades da súa sala\n\nGuía de inicio rápido e máis información no noso [léame](https://github.com/sualko/cloud_bbb).\nGústalle esta aplicación? Devolva algo á comunidade de código aberto e consulte as nosas\n[formas de colaborar](https://github.com/sualko/cloud_bbb/blob/master/.github/contributing.md).\n\nBúscase programador! Se ten tempo, sería incríbel que puidese axudar a mellorar esta aplicación.\n\n*Esta aplicación integra BigBlueButton e non está aprobada nin certificada por BigBlueButton Inc. BigBlueButton e o logotipo de BigBlueButton son marcas comerciais de BigBlueButton Inc.*",
     "Room not found" : "Non se atopou a sala",
     "The room could not be found. Maybe it was deleted?" : "Non foi posíbel atopar a sala. Quizais foi eliminada.",
     "Back to %s" : "Volver a %s",

l10n/gl.json

@@ -20,7 +20,7 @@
     "API URL or secret not configured. Please contact your administrator." : "URL ou segredo da API  sen configurar. Póñase en contacto coa administración desta instancia.",
     "BigBlueButton Integration" : "Integración de BigBlueButton",
     "BigBlueButton integration for Nextcloud" : "Integración de BigBlueButton en Nextcloud",
-    "This app allows to create meetings with an external installation of [BigBlueButton](https://bigbluebutton.org).\n\n* **Room setup** Create multiple room configurations with name, welcome message …\n* **Share guest link** Share the room link with all your guests\n* **Share moderator link** Invite moderators to the room\n* **Share rooms** Share rooms with members, groups or circles\n* **Custom presentation** Start a room with a selected presentation from your file browser\n* **Manage recordings** View, share and delete recordings for your rooms\n* **Restrictions** Restrict room creation to certain groups\n* **Activities** Get an overview of your room activities\n\nQuick start guide and further information in our [readme](https://github.com/sualko/cloud_bbb).\nDo you like this application? Give something back to the open source community and checkout our\n[ways to contribute](https://github.com/sualko/cloud_bbb/blob/master/.github/contributing.md).\n\nDeveloper wanted! If you have time it would be awesome if you could help to enhance this application.\n\n*This app integrates BigBlueButton and is not endorsed or certified by BigBlueButton Inc. BigBlueButton and the BigBlueButton Logo are trademarks of BigBlueButton Inc.*" : "Esta aplicación permite crear xuntanzas cunha instalación externa de [BigBlueButton] (https://bigbluebutton.org).\n\n* **Configuración de salas** Crear múltiples configuracións de salas con nome, mensaxe de benvida …\n* **Compartir a ligazón de convidados** Compartir a ligazón da sala con todos os seus convidados\n* **Compartir ligazón de moderador** Convida moderadores á sala\n* **Compartir salas** Compartir salas con membros, grupos ou círculos\n* **Presentación personalizada** Inicie unha sala cunha presentación seleccionada dende o seu navegador de ficheiros\n* **Xestionar as gravacións** Ver, compartir e eliminar as gravacións das súas salas\n* **Restricións** Restrinxir a creación de salas a determinados grupos\n* ** Actividades** Obteña unha visión xeral das actividades da súa sala\n\nGuía de inicio rápido e máis información no noso [léame](https://github.com/sualko/cloud_bbb).\nGústalle esta aplicación? Devolva algo á comunidade de código aberto e consulte as nosas\n[formas de colaborar](https://github.com/sualko/cloud_bbb/blob/master/.github/contributing.md).\n\nBúscase programador! Se ten tempo, sería incríbel que puidese axudar a mellorar esta aplicación.\n\n*Esta aplicación integra BigBlueButton e non está aprobada nin certificada por BigBlueButton Inc. BigBlueButton e o logotipo de BigBlueButton son marcas comerciais de BigBlueButton Inc.*",
+    "This app allows to create meetings with an external installation of [BigBlueButton](https://bigbluebutton.org).\n\n* **Room setup** Create multiple room configurations with name, welcome message …\n* **Share guest link** Share the room link with all your guests\n* **Share moderator link** Invite moderators to the room\n* **Share rooms** Share rooms with members, groups or circles\n* **Custom presentation** Start a room with a selected presentation from your file browser\n* **Manage recordings** View, share and delete recordings for your rooms\n* **Restrictions** Restrict room creation to certain groups\n* **Activities** Get an overview of your room activities\n\nQuick start guide and further information in our [readme](https://github.com/sualko/cloud_bbb).\nDo you like this application? Give something back to the open source community and checkout our\n[ways to contribute](https://github.com/sualko/cloud_bbb/blob/master/.github/contributing.md).\n\nDeveloper wanted! If you have time it would be awesome if you could help to enhance this application.\n\n*This app integrates BigBlueButton and is not endorsed or certified by BigBlueButton Inc. BigBlueButton and the BigBlueButton Logo are trademarks of BigBlueButton Inc.*" : "Esta aplicación permite crear xuntanzas cunha instalación externa de [BigBlueButton] (https://bigbluebutton.org).\n\n* **Configuración de salas** Crear múltiples configuracións de salas con nome, mensaxe de benvida …\n* **Compartir a ligazón de convidados** Compartir a ligazón da sala con todos os seus convidados\n* **Compartir ligazón de moderador** Convida moderadores á sala\n* **Compartir salas** Compartir salas con membros, grupos ou círculos\n* **Presentación personalizada** Inicie unha sala cunha presentación seleccionada dende o seu navegador de ficheiros\n* **Xestionar as gravacións** Ver, compartir e eliminar as gravacións das súas salas\n* **Restricións** Restrinxir a creación de salas a determinados grupos\n* ** Actividades** Obteña unha vista xeral das actividades da súa sala\n\nGuía de inicio rápido e máis información no noso [léame](https://github.com/sualko/cloud_bbb).\nGústalle esta aplicación? Devolva algo á comunidade de código aberto e consulte as nosas\n[formas de colaborar](https://github.com/sualko/cloud_bbb/blob/master/.github/contributing.md).\n\nBúscase programador! Se ten tempo, sería incríbel que puidese axudar a mellorar esta aplicación.\n\n*Esta aplicación integra BigBlueButton e non está aprobada nin certificada por BigBlueButton Inc. BigBlueButton e o logotipo de BigBlueButton son marcas comerciais de BigBlueButton Inc.*",
     "Room not found" : "Non se atopou a sala",
     "The room could not be found. Maybe it was deleted?" : "Non foi posíbel atopar a sala. Quizais foi eliminada.",
     "Back to %s" : "Volver a %s",

l10n/sv.js

@@ -2,6 +2,7 @@ OC.L10N.register(
     "bbb",
     {
     "Public" : "Offentlig",
+    "Internal" : "Intern",
     "Back to %s" : "Tillbaka till %s",
     "Save" : "Spara",
     "Community" : "Community",
@@ -19,6 +20,7 @@ OC.L10N.register(
     "Edit" : "Redigera",
     "Welcome" : "Välkommen",
     "Miscellaneous" : "Diverse",
+    "Recording" : "Inspelning",
     "Room name" : "Rumsnamn",
     "Create" : "Skapa",
     "Copy to clipboard" : "Kopiera till urklipp",
@@ -30,6 +32,7 @@ OC.L10N.register(
     "Share" : "Dela",
     "Loading" : "Läser in",
     "Settings saved" : "Inställningar sparade",
+    "Send to" : "Skicka till",
     "No rooms available!" : "Inga rum tillgängliga!"
 },
 "nplurals=2; plural=(n != 1);");

l10n/sv.json

@@ -1,5 +1,6 @@
 { "translations": {
     "Public" : "Offentlig",
+    "Internal" : "Intern",
     "Back to %s" : "Tillbaka till %s",
     "Save" : "Spara",
     "Community" : "Community",
@@ -17,6 +18,7 @@
     "Edit" : "Redigera",
     "Welcome" : "Välkommen",
     "Miscellaneous" : "Diverse",
+    "Recording" : "Inspelning",
     "Room name" : "Rumsnamn",
     "Create" : "Skapa",
     "Copy to clipboard" : "Kopiera till urklipp",
@@ -28,6 +30,7 @@
     "Share" : "Dela",
     "Loading" : "Läser in",
     "Settings saved" : "Inställningar sparade",
+    "Send to" : "Skicka till",
     "No rooms available!" : "Inga rum tillgängliga!"
 },"pluralForm" :"nplurals=2; plural=(n != 1);"
 }

ts/Common/ShareSelection.tsx

@@ -78,7 +78,7 @@ const ShareSelection: React.FC<Props> = (props) => {
 					className="suggestion"
 					onMouseDown={preventOnBlurEvent}
 					onClick={() => selectShare(option)}>
-					{option.label}{option.value.shareType === ShareType.Group ? ` (${t('bbb', 'Group')})` : ''}
+					{option.label}{option.value.shareType === ShareType.Group ? ' (' + t('bbb', 'Group') + ')' : ''}
 				</li>);
 		};
 

ts/Manager/EditRoomDialog.tsx

@@ -65,7 +65,7 @@ const EditRoomDialog: React.FC<Props> = ({ room, restriction, updateProperty, op
 	function inputElement(label: string, field: string, type: 'text' | 'number' = 'text') {
 		return (
 			<div className="bbb-form-element">
-				<label htmlFor={`bbb-${field}`}>
+				<label htmlFor={'bbb-' + field}>
 					<h3>{label}</h3>
 				</label>
 
@@ -78,7 +78,7 @@ const EditRoomDialog: React.FC<Props> = ({ room, restriction, updateProperty, op
 	function selectElement(label: string, field: string, value: string, options: { [key: string]: string }, onChange: (value: string) => void) {
 		return (
 			<div className="bbb-form-element">
-				<label htmlFor={`bbb-${field}`}>
+				<label htmlFor={'bbb-' + field}>
 					<h3>{label}</h3>
 				</label>
 
@@ -137,22 +137,22 @@ const EditRoomDialog: React.FC<Props> = ({ room, restriction, updateProperty, op
 				}
 
 				<div className="bbb-mt-1">
-					<input id={`bbb-everyoneIsModerator-${room.id}`}
+					<input id={'bbb-everyoneIsModerator-' + room.id}
 						type="checkbox"
 						className="checkbox"
 						checked={room.everyoneIsModerator}
 						onChange={(event) => updateProperty('everyoneIsModerator', event.target.checked)} />
-					<label htmlFor={`bbb-everyoneIsModerator-${room.id}`}>{t('bbb', 'Every participant is moderator')}</label>
+					<label htmlFor={'bbb-everyoneIsModerator-' + room.id}>{t('bbb', 'Every participant is moderator')}</label>
 				</div>
 				<em>{descriptions.moderator}</em>
 
 				<div className="bbb-mt-1">
-					<input id={`bbb-moderatorToken-${room.id}`}
+					<input id={'bbb-moderatorToken-' + room.id}
 						type="checkbox"
 						className="checkbox"
 						checked={!!room.moderatorToken}
 						onChange={(event) => updateProperty('moderatorToken', event.target.checked ? 'true' : null)} />
-					<label htmlFor={`bbb-moderatorToken-${room.id}`}>{t('bbb', 'Moderator access via URL')}</label>
+					<label htmlFor={'bbb-moderatorToken-' + room.id}>{t('bbb', 'Moderator access via URL')}</label>
 				</div>
 				{!!room.moderatorToken && <CopyToClipboard text={api.getRoomUrl(room, true)}><input type="text" readOnly={true} className="icon-clippy" value={api.getRoomUrl(room, true)} /></CopyToClipboard>}
 				<em>{descriptions.moderatorToken}</em>
@@ -162,68 +162,68 @@ const EditRoomDialog: React.FC<Props> = ({ room, restriction, updateProperty, op
 				<h3>{t('bbb', 'Miscellaneous')}</h3>
 				<div>
 					<div>
-						<input id={`bbb-record-${room.id}`}
+						<input id={'bbb-record-' + room.id}
 							type="checkbox"
 							className="checkbox"
 							checked={room.record}
 							disabled={!restriction?.allowRecording}
 							onChange={(event) => updateProperty('record', event.target.checked)} />
-						<label htmlFor={`bbb-record-${room.id}`}>{t('bbb', 'Recording')}</label>
+						<label htmlFor={'bbb-record-' + room.id}>{t('bbb', 'Recording')}</label>
 					</div>
 					<p><em>{descriptions.recording}</em></p>
 				</div>
 				<div>
 					<div>
-						<input id={`bbb-requireModerator-${room.id}`}
+						<input id={'bbb-requireModerator-' + room.id}
 							type="checkbox"
 							className="checkbox"
 							checked={room.requireModerator}
 							onChange={(event) => updateProperty('requireModerator', event.target.checked)} />
-						<label htmlFor={`bbb-requireModerator-${room.id}`}>{t('bbb', 'Require moderator to start room')}</label>
+						<label htmlFor={'bbb-requireModerator-' + room.id}>{t('bbb', 'Require moderator to start room')}</label>
 					</div>
 					<p><em>{descriptions.requireModerator}</em></p>
 				</div>
 				<div>
 					<div>
-						<input id={`bbb-listenOnly-${room.id}`}
+						<input id={'bbb-listenOnly-' + room.id}
 							type="checkbox"
 							className="checkbox"
 							checked={room.listenOnly}
 							onChange={(event) => updateProperty('listenOnly', event.target.checked)} />
-						<label htmlFor={`bbb-listenOnly-${room.id}`}>{t('bbb', 'Listen only option')}</label>
+						<label htmlFor={'bbb-listenOnly-' + room.id}>{t('bbb', 'Listen only option')}</label>
 					</div>
 					<p><em>{descriptions.listenOnly}</em></p>
 				</div>
 				<div>
 					<div>
-						<input id={`bbb-mediaCheck-${room.id}`}
+						<input id={'bbb-mediaCheck-' + room.id}
 							type="checkbox"
 							className="checkbox"
 							checked={!room.mediaCheck}
 							onChange={(event) => updateProperty('mediaCheck', !event.target.checked)} />
-						<label htmlFor={`bbb-mediaCheck-${room.id}`}>{t('bbb', 'Skip media check before usage')}</label>
+						<label htmlFor={'bbb-mediaCheck-' + room.id}>{t('bbb', 'Skip media check before usage')}</label>
 					</div>
 					<p><em>{descriptions.mediaCheck}</em></p>
 				</div>
 				<div>
 					<div>
-						<input id={`bbb-cleanLayout-${room.id}`}
+						<input id={'bbb-cleanLayout-' + room.id}
 							type="checkbox"
 							className="checkbox"
 							checked={room.cleanLayout}
 							onChange={(event) => updateProperty('cleanLayout', event.target.checked)} />
-						<label htmlFor={`bbb-cleanLayout-${room.id}`}>{t('bbb', 'Clean layout')}</label>
+						<label htmlFor={'bbb-cleanLayout-' + room.id}>{t('bbb', 'Clean layout')}</label>
 					</div>
 					<p><em>{descriptions.cleanLayout}</em></p>
 				</div>
 				<div>
 					<div>
-						<input id={`bbb-joinMuted-${room.id}`}
+						<input id={'bbb-joinMuted-' + room.id}
 							type="checkbox"
 							className="checkbox"
 							checked={room.joinMuted}
 							onChange={(event) => updateProperty('joinMuted', event.target.checked)} />
-						<label htmlFor={`bbb-joinMuted-${room.id}`}>{t('bbb', 'Join meeting muted')}</label>
+						<label htmlFor={'bbb-joinMuted-' + room.id}>{t('bbb', 'Join meeting muted')}</label>
 					</div>
 					<p><em>{descriptions.joinMuted}</em></p>
 				</div>

ts/Manager/RoomRow.tsx

@@ -220,7 +220,11 @@ const RoomRow: React.FC<Props> = (props) => {
 		<>
 			<tr className={showRecordings ? 'selected-row' : ''}>
 				<td className="start">
-					<a href={api.getRoomUrl(room)} className={`button ${room.running ? 'success' : 'primary'}`} target="_blank" rel="noopener noreferrer" title={t('bbb', 'Open room')}>
+					<a href={api.getRoomUrl(room)}
+						className={'button ' + (room.running ? 'success' : 'primary')}
+						target="_blank"
+						rel="noopener noreferrer"
+						title={t('bbb', 'Open room')}>
 						{room.running ? t('bbb', 'Join') : t('bbb', 'Start')}
 					</a>
 				</td>
@@ -251,8 +255,8 @@ const RoomRow: React.FC<Props> = (props) => {
 				</td>
 				{adminRoom &&
 				<td className="record bbb-shrink">
-					<input id={`bbb-record-${room.id}`} type="checkbox" className="checkbox" disabled={!props.restriction?.allowRecording} checked={room.record} onChange={(event) => updateRoom('record', event.target.checked)} />
+					<input id={'bbb-record-' + room.id} type="checkbox" className="checkbox" disabled={!props.restriction?.allowRecording} checked={room.record} onChange={(event) => updateRoom('record', event.target.checked)} />
-					<label htmlFor={`bbb-record-${room.id}`}></label>
+					<label htmlFor={'bbb-record-' + room.id}></label>
 				</td>
 				}
 				{!adminRoom &&
@@ -264,7 +268,10 @@ const RoomRow: React.FC<Props> = (props) => {
 					{<RecordingsNumber recordings={recordings} showRecordings={showRecordings} setShowRecordings={setShowRecordings} />}
 				</td>
 				<td className="clone icon-col">
-					<button className="action-item" onClick={cloneRow} title={t('bbb', 'Clone Room')}>
+					<button
+						className="action-item"
+						onClick={cloneRow}
+						title={t('bbb', 'Clone room')}>
 						<span className="icon icon-template-add icon-visible"></span>
 					</button>
 				</td>

ts/Manager/ShareWith.tsx

@@ -101,7 +101,7 @@ const ShareWith: React.FC<Props> = ({ room, permission, shares: allShares, setSh
 					return (
 						<li key={share.id} className="bbb-shareWith__item">
 							<div className="avatardiv">
-								{avatarUrl && <img src={avatarUrl} alt={`Avatar from ${displayName}`} />}
+								{avatarUrl && <img src={avatarUrl} alt={'Avatar from ' + displayName} />}
 								{share.shareType === ShareType.Group && <span className="icon-group-white"></span>}
 								{share.shareType === ShareType.Circle && <span className="icon-circle-white"></span>}
 							</div>

ts/Restrictions/RestrictionRow.tsx

@@ -63,12 +63,12 @@ const RestrictionRoom: React.FC<Props> = (props) => {
 
 			<td className="record bbb-shrink">
 				<input
-					id={`bbb-record-${restriction.id}`}
+					id={'bbb-record-' + restriction.id}
 					type="checkbox"
 					className="checkbox"
 					checked={restriction.allowRecording}
 					onChange={(event) => updateRestriction('allowRecording', event.target.checked)} />
-				<label htmlFor={`bbb-record-${restriction.id}`}></label>
+				<label htmlFor={'bbb-record-' + restriction.id}></label>
 			</td>
 
 			<td className="remove icon-col">