feat(notifications): make embedded posters optional (#1364)

* feat(notifications): make images optional * fix(notifications): added en i18n config * fix: prettify * fix(notifications): added embedImage support for ntfy * fix(frontend): update embedImage on form state change and submission * fix(locale): updated locale for embedImage * fix: renamed embedImage to embedPoster
2025-09-08 17:41:31 +05:30
parent 6245dae3b3
commit 479be0daeb
18 changed files with 149 additions and 28 deletions
--- a/server/lib/notifications/agents/discord.ts
+++ b/server/lib/notifications/agents/discord.ts
@@ -109,7 +109,9 @@ class DiscordAgent
    type: Notification,
    payload: NotificationPayload
  ): DiscordRichEmbed {
-    const { applicationUrl } = getSettings().main;
+    const settings = getSettings();
+    const { applicationUrl } = settings.main;
+    const { embedPoster } = settings.notifications.agents.discord;

    const appUrl =
      applicationUrl || `http://localhost:${process.env.port || 5055}`;
@@ -223,9 +225,11 @@ class DiscordAgent
          }
        : undefined,
      fields,
-      thumbnail: {
-        url: payload.image,
-      },
+      thumbnail: embedPoster
+        ? {
+            url: payload.image,
+          }
+        : undefined,
    };
  }

--- a/server/lib/notifications/agents/email.ts
+++ b/server/lib/notifications/agents/email.ts
@@ -48,7 +48,9 @@ class EmailAgent
    recipientEmail: string,
    recipientName?: string
  ): EmailOptions | undefined {
-    const { applicationUrl, applicationTitle } = getSettings().main;
+    const settings = getSettings();
+    const { applicationUrl, applicationTitle } = settings.main;
+    const { embedPoster } = settings.notifications.agents.email;

    if (type === Notification.TEST_NOTIFICATION) {
      return {
@@ -129,7 +131,7 @@ class EmailAgent
          body,
          mediaName: payload.subject,
          mediaExtra: payload.extra ?? [],
-          imageUrl: payload.image,
+          imageUrl: embedPoster ? payload.image : undefined,
          timestamp: new Date().toTimeString(),
          requestedBy: payload.request.requestedBy.displayName,
          actionUrl: applicationUrl
@@ -176,7 +178,7 @@ class EmailAgent
          issueComment: payload.comment?.message,
          mediaName: payload.subject,
          extra: payload.extra ?? [],
-          imageUrl: payload.image,
+          imageUrl: embedPoster ? payload.image : undefined,
          timestamp: new Date().toTimeString(),
          actionUrl: applicationUrl
            ? `${applicationUrl}/issues/${payload.issue.id}`
--- a/server/lib/notifications/agents/ntfy.ts
+++ b/server/lib/notifications/agents/ntfy.ts
@@ -22,7 +22,9 @@ class NtfyAgent
  }

  private buildPayload(type: Notification, payload: NotificationPayload) {
-    const { applicationUrl } = getSettings().main;
+    const settings = getSettings();
+    const { applicationUrl } = settings.main;
+    const { embedPoster } = settings.notifications.agents.ntfy;

    const topic = this.getSettings().options.topic;
    const priority = 3;
@@ -72,7 +74,7 @@ class NtfyAgent
      message += `\n\n**${extra.name}**\n${extra.value}`;
    }

-    const attach = payload.image;
+    const attach = embedPoster ? payload.image : undefined;

    let click;
    if (applicationUrl && payload.media) {
--- a/server/lib/notifications/agents/pushover.ts
+++ b/server/lib/notifications/agents/pushover.ts
@@ -78,7 +78,9 @@ class PushoverAgent
    type: Notification,
    payload: NotificationPayload
  ): Promise<Partial<PushoverPayload>> {
-    const { applicationUrl, applicationTitle } = getSettings().main;
+    const settings = getSettings();
+    const { applicationUrl, applicationTitle } = settings.main;
+    const { embedPoster } = settings.notifications.agents.pushover;

    const title = payload.event ?? payload.subject;
    let message = payload.event ? `<b>${payload.subject}</b>` : '';
@@ -155,7 +157,7 @@ class PushoverAgent

    let attachment_base64;
    let attachment_type;
-    if (payload.image) {
+    if (embedPoster && payload.image) {
      const imagePayload = await this.getImagePayload(payload.image);
      if (imagePayload.attachment_base64 && imagePayload.attachment_type) {
        attachment_base64 = imagePayload.attachment_base64;
--- a/server/lib/notifications/agents/slack.ts
+++ b/server/lib/notifications/agents/slack.ts
@@ -63,7 +63,9 @@ class SlackAgent
    type: Notification,
    payload: NotificationPayload
  ): SlackBlockEmbed {
-    const { applicationUrl, applicationTitle } = getSettings().main;
+    const settings = getSettings();
+    const { applicationUrl, applicationTitle } = settings.main;
+    const { embedPoster } = settings.notifications.agents.slack;

    const fields: EmbedField[] = [];

@@ -159,13 +161,14 @@ class SlackAgent
          type: 'mrkdwn',
          text: payload.message,
        },
-        accessory: payload.image
-          ? {
-              type: 'image',
-              image_url: payload.image,
-              alt_text: payload.subject,
-            }
-          : undefined,
+        accessory:
+          embedPoster && payload.image
+            ? {
+                type: 'image',
+                image_url: payload.image,
+                alt_text: payload.subject,
+              }
+            : undefined,
      });
    }

--- a/server/lib/notifications/agents/telegram.ts
+++ b/server/lib/notifications/agents/telegram.ts
@@ -65,7 +65,9 @@ class TelegramAgent
    type: Notification,
    payload: NotificationPayload
  ): Partial<TelegramMessagePayload | TelegramPhotoPayload> {
-    const { applicationUrl, applicationTitle } = getSettings().main;
+    const settings = getSettings();
+    const { applicationUrl, applicationTitle } = settings.main;
+    const { embedPoster } = settings.notifications.agents.telegram;

    /* eslint-disable no-useless-escape */
    let message = `\*${this.escapeText(
@@ -142,7 +144,7 @@ class TelegramAgent
    }
    /* eslint-enable */

-    return payload.image
+    return embedPoster && payload.image
      ? {
          photo: payload.image,
          caption: message,
@@ -160,7 +162,7 @@ class TelegramAgent
  ): Promise<boolean> {
    const settings = this.getSettings();
    const endpoint = `${this.baseUrl}bot${settings.options.botAPI}/${
-      payload.image ? 'sendPhoto' : 'sendMessage'
+      settings.embedPoster && payload.image ? 'sendPhoto' : 'sendMessage'
    }`;
    const notificationPayload = this.getNotificationPayload(type, payload);

--- a/server/lib/notifications/agents/webpush.ts
+++ b/server/lib/notifications/agents/webpush.ts
@@ -42,6 +42,8 @@ class WebPushAgent
    type: Notification,
    payload: NotificationPayload
  ): PushNotificationPayload {
+    const { embedPoster } = getSettings().notifications.agents.webpush;
+
    const mediaType = payload.media
      ? payload.media.mediaType === MediaType.MOVIE
        ? 'movie'
@@ -128,7 +130,7 @@ class WebPushAgent
      notificationType: Notification[type],
      subject: payload.subject,
      message,
-      image: payload.image,
+      image: embedPoster ? payload.image : undefined,
      requestId: payload.request?.id,
      actionUrl,
      actionUrlTitle,
--- a/server/lib/settings/index.ts
+++ b/server/lib/settings/index.ts
@@ -207,6 +207,7 @@ interface FullPublicSettings extends PublicSettings {

 export interface NotificationAgentConfig {
  enabled: boolean;
+  embedPoster: boolean;
  types?: number;
  options: Record<string, unknown>;
 }
@@ -434,6 +435,7 @@ class Settings {
        agents: {
          email: {
            enabled: false,
+            embedPoster: true,
            options: {
              userEmailRequired: false,
              emailFrom: '',
@@ -448,6 +450,7 @@ class Settings {
          },
          discord: {
            enabled: false,
+            embedPoster: true,
            types: 0,
            options: {
              webhookUrl: '',
@@ -457,6 +460,7 @@ class Settings {
          },
          slack: {
            enabled: false,
+            embedPoster: true,
            types: 0,
            options: {
              webhookUrl: '',
@@ -464,6 +468,7 @@ class Settings {
          },
          telegram: {
            enabled: false,
+            embedPoster: true,
            types: 0,
            options: {
              botAPI: '',
@@ -474,6 +479,7 @@ class Settings {
          },
          pushbullet: {
            enabled: false,
+            embedPoster: false,
            types: 0,
            options: {
              accessToken: '',
@@ -481,6 +487,7 @@ class Settings {
          },
          pushover: {
            enabled: false,
+            embedPoster: true,
            types: 0,
            options: {
              accessToken: '',
@@ -490,6 +497,7 @@ class Settings {
          },
          webhook: {
            enabled: false,
+            embedPoster: true,
            types: 0,
            options: {
              webhookUrl: '',
@@ -499,10 +507,12 @@ class Settings {
          },
          webpush: {
            enabled: false,
+            embedPoster: true,
            options: {},
          },
          gotify: {
            enabled: false,
+            embedPoster: false,
            types: 0,
            options: {
              url: '',
@@ -512,6 +522,7 @@ class Settings {
          },
          ntfy: {
            enabled: false,
+            embedPoster: true,
            types: 0,
            options: {
              url: '',
--- a/server/routes/settings/notifications.ts
+++ b/server/routes/settings/notifications.ts
@@ -270,6 +270,7 @@ notificationRoutes.get('/webhook', (_req, res) => {

  const response: typeof webhookSettings = {
    enabled: webhookSettings.enabled,
+    embedPoster: webhookSettings.embedPoster,
    types: webhookSettings.types,
    options: {
      ...webhookSettings.options,
@@ -291,6 +292,7 @@ notificationRoutes.post('/webhook', async (req, res, next) => {

    settings.notifications.agents.webhook = {
      enabled: req.body.enabled,
+      embedPoster: req.body.embedPoster,
      types: req.body.types,
      options: {
        jsonPayload: Buffer.from(req.body.options.jsonPayload).toString(
@@ -321,6 +323,7 @@ notificationRoutes.post('/webhook/test', async (req, res, next) => {

    const testBody = {
      enabled: req.body.enabled,
+      embedPoster: req.body.embedPoster,
      types: req.body.types,
      options: {
        jsonPayload: Buffer.from(req.body.options.jsonPayload).toString(
--- a/server/templates/email/media-request/html.pug
+++ b/server/templates/email/media-request/html.pug
@@ -53,10 +53,11 @@ div(style='display: block; background-color: #111827; padding: 2.5rem 0;')
                      b(style='color: #9ca3af; font-weight: 700;')
                        | #{extra.name}&nbsp;
                      | #{extra.value}
-              td(rowspan='2' style='width: 7rem;')
-                a(style='display: block; width: 7rem; overflow: hidden; border-radius: .375rem;' href=actionUrl)
-                  div(style='overflow: hidden; box-sizing: border-box; margin: 0px;')
-                    img(alt='' src=imageUrl style='box-sizing: border-box; padding: 0px; border: none; margin: auto; display: block; min-width: 100%; max-width: 100%; min-height: 100%; max-height: 100%;')
+              if imageUrl
+                td(rowspan='2' style='width: 7rem;')
+                  a(style='display: block; width: 7rem; overflow: hidden; border-radius: .375rem;' href=actionUrl)
+                    div(style='overflow: hidden; box-sizing: border-box; margin: 0px;')
+                      img(alt='' src=imageUrl style='box-sizing: border-box; padding: 0px; border: none; margin: auto; display: block; min-width: 100%; max-width: 100%; min-height: 100%; max-height: 100%;')
            tr
              td(style='font-size: .85em; color: #9ca3af; line-height: 1em; vertical-align: bottom; margin-right: 1rem')
                span
--- a/src/components/Settings/Notifications/NotificationsDiscord.tsx
+++ b/src/components/Settings/Notifications/NotificationsDiscord.tsx
@@ -15,6 +15,7 @@ import * as Yup from 'yup';

 const messages = defineMessages('components.Settings.Notifications', {
  agentenabled: 'Enable Agent',
+  embedPoster: 'Embed Poster',
  botUsername: 'Bot Username',
  botAvatarUrl: 'Bot Avatar URL',
  webhookUrl: 'Webhook URL',
@@ -74,6 +75,7 @@ const NotificationsDiscord = () => {
    <Formik
      initialValues={{
        enabled: data.enabled,
+        embedPoster: data.embedPoster,
        types: data.types,
        botUsername: data?.options.botUsername,
        botAvatarUrl: data?.options.botAvatarUrl,
@@ -86,6 +88,7 @@ const NotificationsDiscord = () => {
        try {
          await axios.post('/api/v1/settings/notifications/discord', {
            enabled: values.enabled,
+            embedPoster: values.embedPoster,
            types: values.types,
            options: {
              botUsername: values.botUsername,
@@ -135,6 +138,7 @@ const NotificationsDiscord = () => {
            );
            await axios.post('/api/v1/settings/notifications/discord/test', {
              enabled: true,
+              embedPoster: values.embedPoster,
              types: values.types,
              options: {
                botUsername: values.botUsername,
@@ -176,6 +180,14 @@ const NotificationsDiscord = () => {
                <Field type="checkbox" id="enabled" name="enabled" />
              </div>
            </div>
+            <div className="form-row">
+              <label htmlFor="embedPoster" className="checkbox-label">
+                {intl.formatMessage(messages.embedPoster)}
+              </label>
+              <div className="form-input-area">
+                <Field type="checkbox" id="embedPoster" name="embedPoster" />
+              </div>
+            </div>
            <div className="form-row">
              <label htmlFor="name" className="text-label">
                {intl.formatMessage(messages.webhookUrl)}
--- a/src/components/Settings/Notifications/NotificationsEmail.tsx
+++ b/src/components/Settings/Notifications/NotificationsEmail.tsx
@@ -17,6 +17,7 @@ const messages = defineMessages('components.Settings.Notifications', {
  validationSmtpHostRequired: 'You must provide a valid hostname or IP address',
  validationSmtpPortRequired: 'You must provide a valid port number',
  agentenabled: 'Enable Agent',
+  embedPoster: 'Embed Poster',
  userEmailRequired: 'Require user email',
  emailsender: 'Sender Address',
  smtpHost: 'SMTP Host',
@@ -122,6 +123,7 @@ const NotificationsEmail = () => {
    <Formik
      initialValues={{
        enabled: data.enabled,
+        embedPoster: data.embedPoster,
        userEmailRequired: data.options.userEmailRequired,
        emailFrom: data.options.emailFrom,
        smtpHost: data.options.smtpHost,
@@ -145,6 +147,7 @@ const NotificationsEmail = () => {
        try {
          await axios.post('/api/v1/settings/notifications/email', {
            enabled: values.enabled,
+            embedPoster: values.embedPoster,
            options: {
              userEmailRequired: values.userEmailRequired,
              emailFrom: values.emailFrom,
@@ -194,6 +197,7 @@ const NotificationsEmail = () => {
            );
            await axios.post('/api/v1/settings/notifications/email/test', {
              enabled: true,
+              embedPoster: values.embedPoster,
              options: {
                emailFrom: values.emailFrom,
                smtpHost: values.smtpHost,
@@ -241,6 +245,14 @@ const NotificationsEmail = () => {
                <Field type="checkbox" id="enabled" name="enabled" />
              </div>
            </div>
+            <div className="form-row">
+              <label htmlFor="embedPoster" className="checkbox-label">
+                {intl.formatMessage(messages.embedPoster)}
+              </label>
+              <div className="form-input-area">
+                <Field type="checkbox" id="embedPoster" name="embedPoster" />
+              </div>
+            </div>
            <div className="form-row">
              <label htmlFor="userEmailRequired" className="checkbox-label">
                {intl.formatMessage(messages.userEmailRequired)}
--- a/src/components/Settings/Notifications/NotificationsNtfy/index.tsx
+++ b/src/components/Settings/Notifications/NotificationsNtfy/index.tsx
@@ -19,6 +19,7 @@ const messages = defineMessages(
  'components.Settings.Notifications.NotificationsNtfy',
  {
    agentenabled: 'Enable Agent',
+    embedPoster: 'Embed Poster',
    url: 'Server root URL',
    topic: 'Topic',
    usernamePasswordAuth: 'Username + Password authentication',
@@ -80,6 +81,7 @@ const NotificationsNtfy = () => {
    <Formik
      initialValues={{
        enabled: data?.enabled,
+        embedPoster: data?.embedPoster,
        types: data?.types,
        url: data?.options.url,
        topic: data?.options.topic,
@@ -94,6 +96,7 @@ const NotificationsNtfy = () => {
        try {
          await axios.post('/api/v1/settings/notifications/ntfy', {
            enabled: values.enabled,
+            embedPoster: values.embedPoster,
            types: values.types,
            options: {
              url: values.url,
@@ -188,6 +191,14 @@ const NotificationsNtfy = () => {
                <Field type="checkbox" id="enabled" name="enabled" />
              </div>
            </div>
+            <div className="form-row">
+              <label htmlFor="embedPoster" className="checkbox-label">
+                {intl.formatMessage(messages.embedPoster)}
+              </label>
+              <div className="form-input-area">
+                <Field type="checkbox" id="embedPoster" name="embedPoster" />
+              </div>
+            </div>
            <div className="form-row">
              <label htmlFor="url" className="text-label">
                {intl.formatMessage(messages.url)}
--- a/src/components/Settings/Notifications/NotificationsPushover/index.tsx
+++ b/src/components/Settings/Notifications/NotificationsPushover/index.tsx
@@ -17,6 +17,7 @@ const messages = defineMessages(
  'components.Settings.Notifications.NotificationsPushover',
  {
    agentenabled: 'Enable Agent',
+    embedPoster: 'Embed Poster',
    accessToken: 'Application API Token',
    accessTokenTip:
      '<ApplicationRegistrationLink>Register an application</ApplicationRegistrationLink> for use with Jellyseerr',
@@ -86,6 +87,7 @@ const NotificationsPushover = () => {
    <Formik
      initialValues={{
        enabled: data?.enabled,
+        embedPoster: data?.embedPoster,
        types: data?.types,
        accessToken: data?.options.accessToken,
        userToken: data?.options.userToken,
@@ -96,6 +98,7 @@ const NotificationsPushover = () => {
        try {
          await axios.post('/api/v1/settings/notifications/pushover', {
            enabled: values.enabled,
+            embedPoster: values.embedPoster,
            types: values.types,
            options: {
              accessToken: values.accessToken,
@@ -142,6 +145,7 @@ const NotificationsPushover = () => {
            );
            await axios.post('/api/v1/settings/notifications/pushover/test', {
              enabled: true,
+              embedPoster: values.embedPoster,
              types: values.types,
              options: {
                accessToken: values.accessToken,
@@ -181,6 +185,14 @@ const NotificationsPushover = () => {
                <Field type="checkbox" id="enabled" name="enabled" />
              </div>
            </div>
+            <div className="form-row">
+              <label htmlFor="embedPoster" className="checkbox-label">
+                {intl.formatMessage(messages.embedPoster)}
+              </label>
+              <div className="form-input-area">
+                <Field type="checkbox" id="embedPoster" name="embedPoster" />
+              </div>
+            </div>
            <div className="form-row">
              <label htmlFor="accessToken" className="text-label">
                {intl.formatMessage(messages.accessToken)}
--- a/src/components/Settings/Notifications/NotificationsSlack/index.tsx
+++ b/src/components/Settings/Notifications/NotificationsSlack/index.tsx
@@ -16,6 +16,7 @@ const messages = defineMessages(
  'components.Settings.Notifications.NotificationsSlack',
  {
    agentenabled: 'Enable Agent',
+    embedPoster: 'Embed Poster',
    webhookUrl: 'Webhook URL',
    webhookUrlTip:
      'Create an <WebhookLink>Incoming Webhook</WebhookLink> integration',
@@ -59,6 +60,7 @@ const NotificationsSlack = () => {
    <Formik
      initialValues={{
        enabled: data.enabled,
+        embedPoster: data.embedPoster,
        types: data.types,
        webhookUrl: data.options.webhookUrl,
      }}
@@ -67,6 +69,7 @@ const NotificationsSlack = () => {
        try {
          await axios.post('/api/v1/settings/notifications/slack', {
            enabled: values.enabled,
+            embedPoster: values.embedPoster,
            types: values.types,
            options: {
              webhookUrl: values.webhookUrl,
@@ -111,6 +114,7 @@ const NotificationsSlack = () => {
            );
            await axios.post('/api/v1/settings/notifications/slack/test', {
              enabled: true,
+              embedPoster: values.embedPoster,
              types: values.types,
              options: {
                webhookUrl: values.webhookUrl,
@@ -148,6 +152,14 @@ const NotificationsSlack = () => {
                <Field type="checkbox" id="enabled" name="enabled" />
              </div>
            </div>
+            <div className="form-row">
+              <label htmlFor="embedPoster" className="checkbox-label">
+                {intl.formatMessage(messages.embedPoster)}
+              </label>
+              <div className="form-input-area">
+                <Field type="checkbox" id="embedPoster" name="embedPoster" />
+              </div>
+            </div>
            <div className="form-row">
              <label htmlFor="name" className="text-label">
                {intl.formatMessage(messages.webhookUrl)}
--- a/src/components/Settings/Notifications/NotificationsTelegram.tsx
+++ b/src/components/Settings/Notifications/NotificationsTelegram.tsx
@@ -15,6 +15,7 @@ import * as Yup from 'yup';

 const messages = defineMessages('components.Settings.Notifications', {
  agentenabled: 'Enable Agent',
+  embedPoster: 'Embed Poster',
  botUsername: 'Bot Username',
  botUsernameTip:
    'Allow users to also start a chat with your bot and configure their own notifications',
@@ -89,6 +90,7 @@ const NotificationsTelegram = () => {
    <Formik
      initialValues={{
        enabled: data?.enabled,
+        embedPoster: data?.embedPoster,
        types: data?.types,
        botUsername: data?.options.botUsername,
        botAPI: data?.options.botAPI,
@@ -101,6 +103,7 @@ const NotificationsTelegram = () => {
        try {
          await axios.post('/api/v1/settings/notifications/telegram', {
            enabled: values.enabled,
+            embedPoster: values.embedPoster,
            types: values.types,
            options: {
              botAPI: values.botAPI,
@@ -191,6 +194,14 @@ const NotificationsTelegram = () => {
                <Field type="checkbox" id="enabled" name="enabled" />
              </div>
            </div>
+            <div className="form-row">
+              <label htmlFor="embedPoster" className="checkbox-label">
+                {intl.formatMessage(messages.embedPoster)}
+              </label>
+              <div className="form-input-area">
+                <Field type="checkbox" id="embedPoster" name="embedPoster" />
+              </div>
+            </div>
            <div className="form-row">
              <label htmlFor="botAPI" className="text-label">
                {intl.formatMessage(messages.botAPI)}
--- a/src/components/Settings/Notifications/NotificationsWebPush/index.tsx
+++ b/src/components/Settings/Notifications/NotificationsWebPush/index.tsx
@@ -15,6 +15,7 @@ const messages = defineMessages(
  'components.Settings.Notifications.NotificationsWebPush',
  {
    agentenabled: 'Enable Agent',
+    embedPoster: 'Embed Poster',
    webpushsettingssaved: 'Web push notification settings saved successfully!',
    webpushsettingsfailed: 'Web push notification settings failed to save.',
    toastWebPushTestSending: 'Sending web push test notification…',
@@ -55,11 +56,13 @@ const NotificationsWebPush = () => {
      <Formik
        initialValues={{
          enabled: data.enabled,
+          embedPoster: data.embedPoster,
        }}
        onSubmit={async (values) => {
          try {
            await axios.post('/api/v1/settings/notifications/webpush', {
              enabled: values.enabled,
+              embedPoster: values.embedPoster,
              options: {},
            });
            mutate('/api/v1/settings/public');
@@ -77,7 +80,7 @@ const NotificationsWebPush = () => {
          }
        }}
      >
-        {({ isSubmitting }) => {
+        {({ isSubmitting, values }) => {
          const testSettings = async () => {
            setIsTesting(true);
            let toastId: string | undefined;
@@ -94,6 +97,7 @@ const NotificationsWebPush = () => {
              );
              await axios.post('/api/v1/settings/notifications/webpush/test', {
                enabled: true,
+                embedPoster: values.embedPoster,
                options: {},
              });

@@ -128,6 +132,15 @@ const NotificationsWebPush = () => {
                  <Field type="checkbox" id="enabled" name="enabled" />
                </div>
              </div>
+              <div className="form-row">
+                <label htmlFor="embedPoster" className="checkbox-label">
+                  {intl.formatMessage(messages.embedPoster)}
+                  <span className="label-required">*</span>
+                </label>
+                <div className="form-input-area">
+                  <Field type="checkbox" id="embedPoster" name="embedPoster" />
+                </div>
+              </div>
              <div className="actions">
                <div className="flex justify-end">
                  <span className="ml-3 inline-flex rounded-md shadow-sm">
--- a/src/i18n/locale/en.json
+++ b/src/i18n/locale/en.json
@@ -624,6 +624,7 @@
  "components.Settings.Notifications.NotificationsGotify.validationUrlRequired": "You must provide a valid URL",
  "components.Settings.Notifications.NotificationsGotify.validationUrlTrailingSlash": "URL must not end in a trailing slash",
  "components.Settings.Notifications.NotificationsNtfy.agentenabled": "Enable Agent",
+  "components.Settings.Notifications.NotificationsNtfy.embedPoster": "Embed Poster",
  "components.Settings.Notifications.NotificationsNtfy.ntfysettingsfailed": "Ntfy notification settings failed to save.",
  "components.Settings.Notifications.NotificationsNtfy.ntfysettingssaved": "Ntfy notification settings saved successfully!",
  "components.Settings.Notifications.NotificationsNtfy.password": "Password",
@@ -654,6 +655,7 @@
  "components.Settings.Notifications.NotificationsPushover.accessTokenTip": "<ApplicationRegistrationLink>Register an application</ApplicationRegistrationLink> for use with Jellyseerr",
  "components.Settings.Notifications.NotificationsPushover.agentenabled": "Enable Agent",
  "components.Settings.Notifications.NotificationsPushover.deviceDefault": "Device Default",
+  "components.Settings.Notifications.NotificationsPushover.embedPoster": "Embed Poster",
  "components.Settings.Notifications.NotificationsPushover.pushoversettingsfailed": "Pushover notification settings failed to save.",
  "components.Settings.Notifications.NotificationsPushover.pushoversettingssaved": "Pushover notification settings saved successfully!",
  "components.Settings.Notifications.NotificationsPushover.sound": "Notification Sound",
@@ -666,6 +668,7 @@
  "components.Settings.Notifications.NotificationsPushover.validationTypes": "You must select at least one notification type",
  "components.Settings.Notifications.NotificationsPushover.validationUserTokenRequired": "You must provide a valid user or group key",
  "components.Settings.Notifications.NotificationsSlack.agentenabled": "Enable Agent",
+  "components.Settings.Notifications.NotificationsSlack.embedPoster": "Embed Poster",
  "components.Settings.Notifications.NotificationsSlack.slacksettingsfailed": "Slack notification settings failed to save.",
  "components.Settings.Notifications.NotificationsSlack.slacksettingssaved": "Slack notification settings saved successfully!",
  "components.Settings.Notifications.NotificationsSlack.toastSlackTestFailed": "Slack test notification failed to send.",
@@ -691,6 +694,7 @@
  "components.Settings.Notifications.NotificationsWebhook.webhooksettingsfailed": "Webhook notification settings failed to save.",
  "components.Settings.Notifications.NotificationsWebhook.webhooksettingssaved": "Webhook notification settings saved successfully!",
  "components.Settings.Notifications.NotificationsWebPush.agentenabled": "Enable Agent",
+  "components.Settings.Notifications.NotificationsWebPush.embedPoster": "Embed Poster",
  "components.Settings.Notifications.NotificationsWebPush.httpsRequirement": "In order to receive web push notifications, Jellyseerr must be served over HTTPS.",
  "components.Settings.Notifications.NotificationsWebPush.toastWebPushTestFailed": "Web push test notification failed to send.",
  "components.Settings.Notifications.NotificationsWebPush.toastWebPushTestSending": "Sending web push test notification…",
@@ -713,6 +717,7 @@
  "components.Settings.Notifications.emailsender": "Sender Address",
  "components.Settings.Notifications.emailsettingsfailed": "Email notification settings failed to save.",
  "components.Settings.Notifications.emailsettingssaved": "Email notification settings saved successfully!",
+  "components.Settings.Notifications.embedPoster": "Embed Poster",
  "components.Settings.Notifications.enableMentions": "Enable Mentions",
  "components.Settings.Notifications.encryption": "Encryption Method",
  "components.Settings.Notifications.encryptionDefault": "Use STARTTLS if available",
@@ -1158,6 +1163,7 @@
  "components.Settings.menuServices": "Services",
  "components.Settings.menuUsers": "Users",
  "components.Settings.metadataProviderSelection": "Metadata Provider Selection",
+  "components.Settings.metadataProviderSettings": "Metadata Providers",
  "components.Settings.metadataSettings": "Settings for metadata provider",
  "components.Settings.metadataSettingsSaved": "Metadata provider settings saved",
  "components.Settings.no": "No",