From d03272a2583f4a5d9082a50e4cc3cdae30ab7d72 Mon Sep 17 00:00:00 2001
From: Samuel Weirich <4281791+SamuelWei@users.noreply.github.com>
Date: Fri, 13 Dec 2024 15:19:57 +0100
Subject: [PATCH] Add dark mode logo support

---
 .../Controllers/api/v1/SettingsController.php | 11 +++++
 app/Http/Requests/UpdateSettings.php          |  2 +
 app/Http/Resources/Settings.php               |  1 +
 app/Services/MeetingService.php               |  5 +++
 app/Settings/BigBlueButtonSettings.php        |  2 +
 ..._mode_logo_to_big_blue_button_settings.php | 11 +++++
 resources/js/views/AdminSettings.vue          | 42 +++++++++++++++++++
 7 files changed, 74 insertions(+)
 create mode 100644 database/settings/2024_12_13_133315_add_dark_mode_logo_to_big_blue_button_settings.php

diff --git a/app/Http/Controllers/api/v1/SettingsController.php b/app/Http/Controllers/api/v1/SettingsController.php
index 68e808687..85725f9c2 100644
--- a/app/Http/Controllers/api/v1/SettingsController.php
+++ b/app/Http/Controllers/api/v1/SettingsController.php
@@ -110,6 +110,17 @@ public function update(UpdateSettings $request)
             $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'))) {
diff --git a/app/Http/Requests/UpdateSettings.php b/app/Http/Requests/UpdateSettings.php
index 5bc9a97cd..b687023a7 100644
--- a/app/Http/Requests/UpdateSettings.php
+++ b/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')],
         ];
diff --git a/app/Http/Resources/Settings.php b/app/Http/Resources/Settings.php
index 0511eb9b2..7188c7e4d 100644
--- a/app/Http/Resources/Settings.php
+++ b/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,
         ];
diff --git a/app/Services/MeetingService.php b/app/Services/MeetingService.php
index f3c32a525..045893b31 100644
--- a/app/Services/MeetingService.php
+++ b/app/Services/MeetingService.php
@@ -130,6 +130,11 @@ public function start(): ?\BigBlueButton\Responses\CreateMeetingResponse
             $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);
diff --git a/app/Settings/BigBlueButtonSettings.php b/app/Settings/BigBlueButtonSettings.php
index 619035b90..2a66edfd3 100644
--- a/app/Settings/BigBlueButtonSettings.php
+++ b/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;
diff --git a/database/settings/2024_12_13_133315_add_dark_mode_logo_to_big_blue_button_settings.php b/database/settings/2024_12_13_133315_add_dark_mode_logo_to_big_blue_button_settings.php
new file mode 100644
index 000000000..121ca2e46
--- /dev/null
+++ b/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');
+    }
+};
diff --git a/resources/js/views/AdminSettings.vue b/resources/js/views/AdminSettings.vue
index 7fd932740..c814f1872 100644
--- a/resources/js/views/AdminSettings.vue
+++ b/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 uploadFaviconDarkFile = ref(null);
 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 @@ function updateSettings() {
     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 @@ function updateSettings() {
     "theme_favicon",
     "theme_favicon_dark",
     "bbb_logo",
+    "bbb_logo_dark",
     "bbb_style",
     "bbb_default_presentation",
   ];
@@ -1346,9 +1386,11 @@ function updateSettings() {
       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;