feat: add option to use theme in bbb

lib/BigBlueButton/API.php

@@ -13,6 +13,7 @@ use OCA\BigBlueButton\Crypto;
 use OCA\BigBlueButton\Db\Room;
 use OCA\BigBlueButton\Event\MeetingStartedEvent;
 use OCA\BigBlueButton\UrlHelper;
+use OCP\Defaults;
 use OCP\EventDispatcher\IEventDispatcher;
 use OCP\IConfig;
 use OCP\IL10N;
@@ -40,13 +41,17 @@ class API {
 	/** @var UrlHelper */
 	private $urlHelper;
 
+	/** @var Defaults */
+	private $defaults;
+
 	public function __construct(
 		IConfig $config,
 		IURLGenerator $urlGenerator,
 		Crypto $crypto,
 		IEventDispatcher $eventDispatcher,
 		IL10N $l10n,
-		UrlHelper $urlHelper
+		UrlHelper $urlHelper,
+		Defaults $defaults
 	) {
 		$this->config = $config;
 		$this->urlGenerator = $urlGenerator;
@@ -54,6 +59,7 @@ class API {
 		$this->eventDispatcher = $eventDispatcher;
 		$this->l10n = $l10n;
 		$this->urlHelper = $urlHelper;
+		$this->defaults = $defaults;
 	}
 
 	private function getServer(): BigBlueButton {
@@ -83,6 +89,13 @@ class API {
 		$joinMeetingParams->setRedirect(true);
 		$joinMeetingParams->setGuest($uid === null);
 
+		if ($this->config->getAppValue('bbb', 'join.theme') === 'true') {
+			$primaryColor = $this->defaults->getColorPrimary();
+			$textColor = $this->defaults->getTextColorPrimary();
+
+			$joinMeetingParams->addUserData('bbb_custom_style', ":root{--nc-primary-color:$primaryColor;--nc-primary-text-color:$textColor;--nc-bg-color:#444;--color-primary:var(--nc-primary-color);--btn-primary-color:var(--nc-primary-text-color);--color-text:#222;--loader-bg:var(--nc-bg-color);--user-list-bg:#fff;--user-list-text:#222;--list-item-bg-hover:#f5f5f5;--item-focus-border:var(--nc-primary-color);--color-off-white:#fff;--color-gray-dark:var(--nc-bg-color);}body{background-color:var(--nc-bg-color);}.overlay--1aTlbi{background-color:var(--nc-bg-color);}.userlistPad--o5KDX{border-right: 1px solid #ededed;}.scrollStyle--Ckr4w{background: transparent;}.item--yl1AH:hover, .item--yl1AH:focus{color:--nc-primary-text-color;}#message-input:focus{box-shadow:0 0 0 1px var(--nc-primary-color);border-color:--nc-primary-color;}.active--Z1SuO2X{border-radius:5px;}");
+		}
+
 		if ($uid) {
 			$joinMeetingParams->setUserId($uid);
 			// $joinMeetingParams->setAvatarURL();

lib/Settings/Admin.php

@@ -28,6 +28,7 @@ class Admin implements ISettings {
 			'api.url'    => $this->config->getAppValue('bbb', 'api.url'),
 			'api.secret' => $this->config->getAppValue('bbb', 'api.secret'),
 			'app.navigation' => $this->config->getAppValue('bbb', 'app.navigation') === 'true' ? 'checked' : '',
+			'join.theme' => $this->config->getAppValue('bbb', 'join.theme') === 'true' ? 'checked' : '',
 			'app.shortener' => $this->config->getAppValue('bbb', 'app.shortener'),
 		];
 

templates/admin.php

@@ -20,10 +20,15 @@ script('bbb', 'restrictions');
         </form>
 
         <p>
-            <input type="checkbox" name="app.navigation" id="bbb-app-navigation" class="checkbox" value="1" <?php p($_['app.navigation']); ?> />
+            <input type="checkbox" name="app.navigation" id="bbb-app-navigation" class="checkbox bbb-setting" value="1" <?php p($_['app.navigation']); ?> />
             <label for="bbb-app-navigation"><?php p($l->t('Show room manager in app navigation instead of settings page.')); ?></label>
         </p>
 
+        <p>
+            <input type="checkbox" name="join.theme" id="bbb-join-theme" class="checkbox bbb-setting" value="1" <?php p($_['join.theme']); ?> />
+            <label for="bbb-join-theme"><?php p($l->t('Use Nextcloud theme in BigBlueButton.')); ?></label>
+        </p>
+
         <h3><?php p($l->t('Community')); ?></h3>
         <p><?php p($l->t('Are you enjoying this app? Give something back to the open source community.')); ?> <a href="https://github.com/sualko/cloud_bbb/blob/master/.github/contributing.md" target="_blank" rel="noopener noreferrer" class="button"><span class="heart"></span> <?php p($l->t('Checkout the contributor guide')); ?></a></p>
 

ts/admin.ts

@@ -151,11 +151,11 @@ return 307;</pre></details>
 	});
 	$('#bbb-shortener [name="app.shortener"]').trigger('keyup');
 
-	$<HTMLInputElement>('#bbb-settings [name="app.navigation"]').on('change', (ev) => {
+	$<HTMLInputElement>('.bbb-setting[type="checkbox"]').on('change', (ev) => {
 		ev.preventDefault();
 
-		console.log('checkbox changed to', ev.target.checked);
+		console.log(`checkbox ${ev.target.name} changed to ${ev.target.checked}`);
 
-		OCP.AppConfig.setValue('bbb', 'app.navigation', ev.target.checked);
+		OCP.AppConfig.setValue('bbb', ev.target.name, ev.target.checked);
 	});
 });