Add dark mode logo support for BBB

app/Http/Controllers/api/v1/SettingsController.php

@@ -110,6 +110,17 @@
             $bigBlueButtonSettings->logo = null;
         }
 
+        // Dark version Logo for BBB
+        if ($request->has('bbb_logo_dark_file')) {
+            $path = $request->file('bbb_logo_dark_file')->store('images', 'public');
+            $url = Storage::url($path);
+            $bigBlueButtonSettings->logo_dark = url($url);
+        } elseif ($request->has('bbb_logo_dark') && trim($request->input('bbb_logo_dark') != '')) {
+            $bigBlueButtonSettings->logo_dark = $request->input('bbb_logo_dark');
+        } else {
+            $bigBlueButtonSettings->logo_dark = null;
+        }
+
         // Custom style file for BBB
         if ($request->has('bbb_style')) {
             if (! empty($request->file('bbb_style'))) {

app/Http/Requests/UpdateSettings.php

@@ -79,6 +79,8 @@ public function rules()
 
             'bbb_logo' => ['string', 'max:255'],
             'bbb_logo_file' => ['image', 'max:500'],
+            'bbb_logo_dark' => ['string', 'max:255'],
+            'bbb_logo_dark_file' => ['image', 'max:500'],
             'bbb_style' => ['nullable', 'file', 'max:500'],
             'bbb_default_presentation' => ['nullable', 'file', 'max:'.(config('bigbluebutton.max_filesize') * 1000), 'mimes:'.config('bigbluebutton.allowed_file_mimes')],
         ];

app/Http/Resources/Settings.php

@@ -71,6 +71,7 @@ public function toArray($request)
             'recording_attendance_retention_period' => $recordingSettings->attendance_retention_period,
             'recording_recording_retention_period' => $recordingSettings->recording_retention_period,
             'bbb_logo' => $bigBlueButtonSettings->logo,
+            'bbb_logo_dark' => $bigBlueButtonSettings->logo_dark,
             'bbb_style' => $bigBlueButtonSettings->style,
             'bbb_default_presentation' => $bigBlueButtonSettings->default_presentation,
         ];

app/Services/MeetingService.php

@@ -130,6 +130,11 @@
             $meetingParams->setLogo(app(BigBlueButtonSettings::class)->logo);
         }
 
+        // if a dark logo is defined, set dark logo
+        if (app(BigBlueButtonSettings::class)->logo_dark) {
+            $meetingParams->setDarklogo(app(BigBlueButtonSettings::class)->logo_dark);
+        }
+
         // Try to start meeting
         try {
             $result = $this->serverService->getBigBlueButton()->createMeeting($meetingParams);

app/Settings/BigBlueButtonSettings.php

@@ -8,6 +8,8 @@ class BigBlueButtonSettings extends Settings
 {
     public ?string $logo;
 
+    public ?string $logo_dark;
+
     public ?string $style;
 
     public ?string $default_presentation;

database/settings/2024_12_13_133315_add_dark_mode_logo_to_big_blue_button_settings.php

@@ -0,0 +1,11 @@
+<?php
+
+use Spatie\LaravelSettings\Migrations\SettingsMigration;
+
+return new class extends SettingsMigration
+{
+    public function up(): void
+    {
+        $this->migrator->add('bbb.logo_dark');
+    }
+};

resources/js/views/AdminSettings.vue

@@ -1098,6 +1098,34 @@
                 />
               </div>
             </fieldset>
+            <fieldset class="grid grid-cols-12 gap-4">
+              <legend
+                id="bbb-logo-dark-label"
+                class="col-span-12 md:col-span-4 md:mb-0"
+              >
+                {{ $t("admin.settings.logo_dark.title") }}
+              </legend>
+              <div class="col-span-12 md:col-span-8">
+                <SettingsImageSelector
+                  v-model:image-url="settings.bbb_logo_dark"
+                  v-model:image="uploadBBBLogoDarkFile"
+                  v-model:image-deleted="bbbLogoDarkDeleted"
+                  :disabled="disabled"
+                  :readonly="viewOnly"
+                  :max-file-size="500000"
+                  preview-width="150"
+                  preview-bg-class="bg-surface-900"
+                  show-delete
+                  :preview-alt="$t('admin.settings.bbb.logo.alt')"
+                  :allowed-extensions="['jpg', 'jpeg', 'png', 'gif', 'svg']"
+                  input-id="bbb-logo"
+                  :url-invalid="formErrors.fieldInvalid('bbb_logo_dark')"
+                  :file-invalid="formErrors.fieldInvalid('bbb_logo_dark_file')"
+                  :url-error="formErrors.fieldError('bbb_logo_dark')"
+                  :file-error="formErrors.fieldError('bbb_logo_dark_file')"
+                />
+              </div>
+            </fieldset>
             <fieldset class="grid grid-cols-12 gap-4">
               <legend
                 id="bbb-style-label"
@@ -1191,6 +1219,8 @@
 const uploadLogoDarkFile = ref(null);
 const uploadBBBLogoFile = ref(null);
 const bbbLogoDeleted = ref(false);
+const uploadBBBLogoDarkFile = ref(null);
+const bbbLogoDarkDeleted = ref(false);
 const defaultPresentation = ref(null);
 const defaultPresentationDeleted = ref(false);
 const bbbStyle = ref(null);
@@ -1289,6 +1319,15 @@
     formData.append("bbb_logo", settings.value.bbb_logo);
   }
 
+  if (uploadBBBLogoDarkFile.value) {
+    formData.append("bbb_logo_dark_file", uploadBBBLogoDarkFile.value);
+  } else if (
+    !bbbLogoDarkDeleted.value &&
+    settings.value.bbb_logo_dark != null
+  ) {
+    formData.append("bbb_logo_dark", settings.value.bbb_logo_dark);
+  }
+
   if (bbbStyle.value !== null) {
     formData.append("bbb_style", bbbStyle.value);
   } else if (bbbStyleDeleted.value) {
@@ -1307,6 +1346,7 @@
     "theme_favicon",
     "theme_favicon_dark",
     "bbb_logo",
+    "bbb_logo_dark",
     "bbb_style",
     "bbb_default_presentation",
   ];
@@ -1346,9 +1386,11 @@
       defaultPresentation.value = null;
       defaultPresentationDeleted.value = false;
       uploadBBBLogoFile.value = null;
+      uploadBBBLogoDarkFile.value = null;
       bbbStyle.value = null;
       bbbStyleDeleted.value = false;
       bbbLogoDeleted.value = false;
+      bbbLogoDarkDeleted.value = false;
 
       // update form input
       settings.value = response.data.data;