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

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)}

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)}

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)}

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)}

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)}

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)}

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">

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",