Add support for public seerr logo in email

Author: felixschndr

server/lib/notifications/agents/email.ts

@@ -16,6 +16,9 @@ import { Notification, shouldSendAdminNotification } from '..';
 import type { NotificationAgent, NotificationPayload } from './agent';
 import { BaseAgent } from './agent';
 
+const PUBLIC_LOGO_URL =
+  'https://raw.githubusercontent.com/seerr-team/seerr/refs/heads/develop/public/logo_full.svg';
+
 const messages = defineMessages('notifications.agents.email', {
   issueType: '{type} issue',
   issue: 'issue',
@@ -96,6 +99,12 @@ class EmailAgent
     const settings = getSettings();
     const { applicationUrl, applicationTitle } = settings.main;
     const { embedPoster } = settings.notifications.agents.email;
+    const { usePublicLogo } = settings.notifications.agents.email.options;
+    const logoUrl = usePublicLogo
+      ? PUBLIC_LOGO_URL
+      : applicationUrl
+        ? `${applicationUrl}/logo_full.png`
+        : undefined;
 
     if (type === Notification.TEST_NOTIFICATION) {
       return {
@@ -107,6 +116,7 @@ class EmailAgent
           body: payload.message,
           applicationUrl,
           applicationTitle,
+          logoUrl,
           recipientName,
           recipientEmail,
         },
@@ -195,6 +205,7 @@ class EmailAgent
             : undefined,
           applicationUrl,
           applicationTitle,
+          logoUrl,
           recipientName,
           recipientEmail,
         },
@@ -263,6 +274,7 @@ class EmailAgent
             : undefined,
           applicationUrl,
           applicationTitle,
+          logoUrl,
           recipientName,
           recipientEmail,
         },

server/lib/settings/index.ts

@@ -255,6 +255,7 @@ export interface NotificationAgentEmail extends NotificationAgentConfig {
     authPass?: string;
     allowSelfSigned: boolean;
     senderName: string;
+    usePublicLogo: boolean;
     pgpPrivateKey?: string;
     pgpPassword?: string;
   };
@@ -472,6 +473,7 @@ class Settings {
               requireTls: false,
               allowSelfSigned: false,
               senderName: 'Seerr',
+              usePublicLogo: false,
             },
           },
           discord: {

server/templates/email/media-issue/html.pug

@@ -19,9 +19,12 @@ div(style='display: block; background-color: #111827; padding: 2.5rem 0;')
   table(style='margin: 0 auto; font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif; color: #fff; font-size: 16px; width: 26rem;')
     tr
       td(style="text-align: center;")
-        if applicationUrl
-          a(href=applicationUrl style='margin: 0 1rem;')
-            img(src=applicationUrl +'/logo_full.png' style='width: 26rem; image-rendering: crisp-edges; image-rendering: -webkit-optimize-contrast;')
+        if logoUrl
+          if applicationUrl
+            a(href=applicationUrl style='margin: 0 1rem;')
+              img(src=logoUrl style='width: 26rem; image-rendering: crisp-edges; image-rendering: -webkit-optimize-contrast;')
+          else
+            img(src=logoUrl style='margin: 0 1rem; width: 26rem; image-rendering: crisp-edges; image-rendering: -webkit-optimize-contrast;')
         else
           div(style='margin: 0 1rem 2.5rem; font-size: 3em; font-weight: 700;')
             | #{applicationTitle}

server/templates/email/media-request/html.pug

@@ -19,9 +19,12 @@ div(style='display: block; background-color: #111827; padding: 2.5rem 0;')
   table(style='margin: 0 auto; font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif; color: #fff; font-size: 16px; width: 26rem;')
     tr
       td(style="text-align: center;")
-        if applicationUrl
-          a(href=applicationUrl style='margin: 0 1rem;')
-            img(src=applicationUrl +'/logo_full.png' style='width: 26rem; image-rendering: crisp-edges; image-rendering: -webkit-optimize-contrast;')
+        if logoUrl
+          if applicationUrl
+            a(href=applicationUrl style='margin: 0 1rem;')
+              img(src=logoUrl style='width: 26rem; image-rendering: crisp-edges; image-rendering: -webkit-optimize-contrast;')
+          else
+            img(src=logoUrl style='margin: 0 1rem; width: 26rem; image-rendering: crisp-edges; image-rendering: -webkit-optimize-contrast;')
         else
           div(style='margin: 0 1rem 2.5rem; font-size: 3em; font-weight: 700;')
             | #{applicationTitle}

server/templates/email/test-email/html.pug

@@ -19,9 +19,12 @@ div(style='display: block; background-color: #111827; padding: 2.5rem 0;')
   table(style='margin: 0 auto; font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif; color: #fff; font-size: 16px; width: 26rem;')
     tr
       td(style="text-align: center;")
-        if applicationUrl
-          a(href=applicationUrl style='margin: 0 1rem;')
-            img(src=applicationUrl +'/logo_full.png' style='width: 26rem; image-rendering: crisp-edges; image-rendering: -webkit-optimize-contrast;')
+        if logoUrl
+          if applicationUrl
+            a(href=applicationUrl style='margin: 0 1rem;')
+              img(src=logoUrl style='width: 26rem; image-rendering: crisp-edges; image-rendering: -webkit-optimize-contrast;')
+          else
+            img(src=logoUrl style='margin: 0 1rem; width: 26rem; image-rendering: crisp-edges; image-rendering: -webkit-optimize-contrast;')
         else
           div(style='margin: 0 1rem 2.5rem; font-size: 3em; font-weight: 700;')
             | #{applicationTitle}

src/components/Settings/Notifications/NotificationsEmail.tsx

@@ -19,6 +19,9 @@ const messages = defineMessages('components.Settings.Notifications', {
   validationSmtpPortRequired: 'You must provide a valid port number',
   agentenabled: 'Enable Agent',
   embedPoster: 'Embed Poster',
+  usePublicLogo: 'Use public Seerr logo instead of instance logo',
+  usePublicLogoTip:
+    'If your Seerr instance is not publicly accessible, enable this option so email clients outside your network can display the image. The image will be pulled from the public GitHub repository.',
   userEmailRequired: 'Require user email',
   emailsender: 'Sender Address',
   smtpHost: 'SMTP Host',
@@ -134,6 +137,7 @@ const NotificationsEmail = () => {
       initialValues={{
         enabled: data.enabled,
         embedPoster: data.embedPoster,
+        usePublicLogo: data.options.usePublicLogo,
         userEmailRequired: data.options.userEmailRequired,
         emailFrom: data.options.emailFrom,
         smtpHost: data.options.smtpHost,
@@ -160,6 +164,7 @@ const NotificationsEmail = () => {
             embedPoster: values.embedPoster,
             options: {
               userEmailRequired: values.userEmailRequired,
+              usePublicLogo: values.usePublicLogo,
               emailFrom: values.emailFrom,
               smtpHost: values.smtpHost,
               smtpPort: Number(values.smtpPort),
@@ -209,6 +214,7 @@ const NotificationsEmail = () => {
               enabled: true,
               embedPoster: values.embedPoster,
               options: {
+                usePublicLogo: values.usePublicLogo,
                 emailFrom: values.emailFrom,
                 smtpHost: values.smtpHost,
                 smtpPort: Number(values.smtpPort),
@@ -263,6 +269,21 @@ const NotificationsEmail = () => {
                 <Field type="checkbox" id="embedPoster" name="embedPoster" />
               </div>
             </div>
+            <div className="form-row">
+              <label htmlFor="usePublicLogo" className="checkbox-label">
+                {intl.formatMessage(messages.usePublicLogo)}
+                <span className="label-tip">
+                  {intl.formatMessage(messages.usePublicLogoTip)}
+                </span>
+              </label>
+              <div className="form-input-area">
+                <Field
+                  type="checkbox"
+                  id="usePublicLogo"
+                  name="usePublicLogo"
+                />
+              </div>
+            </div>
             <div className="form-row">
               <label htmlFor="userEmailRequired" className="checkbox-label">
                 {intl.formatMessage(messages.userEmailRequired)}

src/i18n/locale/de.json

@@ -516,6 +516,8 @@
   "components.Settings.Notifications.senderName": "Absendername",
   "components.Settings.Notifications.smtpHost": "SMTP-Host",
   "components.Settings.Notifications.smtpPort": "SMTP-Port",
+  "components.Settings.Notifications.usePublicLogo": "Öffentliches Seerr-Logo statt Logo von der Instanz verwenden",
+  "components.Settings.Notifications.usePublicLogoTip": "Wenn deine Seerr-Instanz nicht öffentlich erreichbar ist, aktiviere diese Option, damit E-Mail-Clients außerhalb deines Netzwerks das Bild anzeigen können. Das Bild wird aus dem öffentlichen GitHub-Repository geladen.",
   "components.Settings.Notifications.telegramsettingsfailed": "Telegram-Benachrichtigungseinstellungen konnten nicht gespeichert werden.",
   "components.Settings.Notifications.telegramsettingssaved": "Telegram-Benachrichtigungseinstellungen erfolgreich gespeichert!",
   "components.Settings.Notifications.toastDiscordTestFailed": "Discord Testbenachrichtigung fehlgeschlagen.",

src/i18n/locale/en.json

@@ -775,6 +775,8 @@
   "components.Settings.Notifications.toastTelegramTestFailed": "Telegram test notification failed to send.",
   "components.Settings.Notifications.toastTelegramTestSending": "Sending Telegram test notification…",
   "components.Settings.Notifications.toastTelegramTestSuccess": "Telegram test notification sent!",
+  "components.Settings.Notifications.usePublicLogo": "Use public Seerr logo instead of instance logo",
+  "components.Settings.Notifications.usePublicLogoTip": "If your Seerr instance is not publicly accessible, enable this option so email clients outside your network can display the image. The image will be pulled from the public GitHub repository.",
   "components.Settings.Notifications.useUserLocale": "Use Notification Recipient Locale",
   "components.Settings.Notifications.userEmailRequired": "Require user email",
   "components.Settings.Notifications.validationBotAPIRequired": "You must provide a bot authorization token",