feat(notifications): added Play On Media Server in notifications when media is available

In the email notification users receive when their media request is now available, I have added a
Play on media server (e.g. Play on Plex) button that takes them directly to the media on their media
server.

feat(notifications): play On Media Server in Discord & Slack Notifications

In the Discord & Slack notification users receive when their media request is now available, I have
added a Play on media server (e.g. Play on Plex) button that takes them directly to the media on
their media server.

Author: JackW6809

server/lib/notifications/agents/email.ts

@@ -1,5 +1,6 @@
 import { IssueType, IssueTypeName } from '@server/constants/issue';
 import { MediaType } from '@server/constants/media';
+import { MediaServerType } from '@server/constants/server';
 import { getRepository } from '@server/datasource';
 import { User } from '@server/entity/User';
 import PreparedEmail from '@server/lib/email';
@@ -49,9 +50,33 @@ class EmailAgent
     recipientName?: string
   ): EmailOptions | undefined {
     const settings = getSettings();
-    const { applicationUrl, applicationTitle } = settings.main;
+    const { applicationUrl, applicationTitle, mediaServerType } = settings.main;
     const { embedPoster } = settings.notifications.agents.email;
 
+    function getAvailableMediaServerName() {
+      if (mediaServerType === MediaServerType.EMBY) {
+        return 'Emby';
+      }
+
+      if (mediaServerType === MediaServerType.PLEX) {
+        return 'Plex';
+      }
+
+      return 'Jellyfin';
+    }
+
+    const mediaServerName = getAvailableMediaServerName();
+
+    function getAvailableMediaServerUrl(): string | undefined {
+      const wants4k = payload.request?.is4k;
+      const url4k = (payload.media as any)?.mediaUrl4k as string | undefined;
+      const url = (payload.media as any)?.mediaUrl as string | undefined;
+
+      return (wants4k ? (url4k ?? url) : (url ?? url4k)) || undefined;
+    }
+
+    const mediaServerUrl = getAvailableMediaServerUrl();
+
     if (type === Notification.TEST_NOTIFICATION) {
       return {
         template: path.join(__dirname, '../../../templates/email/test-email'),
@@ -141,6 +166,10 @@ class EmailAgent
           applicationTitle,
           recipientName,
           recipientEmail,
+          mediaServerActionUrl: mediaServerUrl
+            ? `${mediaServerUrl}`
+            : undefined,
+          mediaServerName,
         },
       };
     } else if (payload.issue) {

server/lib/notifications/agents/slack.ts

@@ -1,4 +1,5 @@
 import { IssueStatus, IssueTypeName } from '@server/constants/issue';
+import { MediaServerType } from '@server/constants/server';
 import type { NotificationAgentSlack } from '@server/lib/settings';
 import { getSettings } from '@server/lib/settings';
 import logger from '@server/logger';
@@ -64,9 +65,29 @@ class SlackAgent
     payload: NotificationPayload
   ): SlackBlockEmbed {
     const settings = getSettings();
-    const { applicationUrl, applicationTitle } = settings.main;
+    const { applicationUrl, applicationTitle, mediaServerType } = settings.main;
     const { embedPoster } = settings.notifications.agents.slack;
 
+    function getAvailableMediaServerName() {
+      if (mediaServerType === MediaServerType.EMBY) {
+        return 'Emby';
+      }
+
+      if (mediaServerType === MediaServerType.PLEX) {
+        return 'Plex';
+      }
+
+      return 'Jellyfin';
+    }
+
+    function getAvailableMediaServerUrl(): string | undefined {
+      const wants4k = payload.request?.is4k;
+      const url4k = (payload.media as any)?.mediaUrl4k as string | undefined;
+      const url = (payload.media as any)?.mediaUrl as string | undefined;
+
+      return (wants4k ? (url4k ?? url) : (url ?? url4k)) || undefined;
+    }
+
     const fields: EmbedField[] = [];
 
     if (payload.request) {
@@ -206,6 +227,28 @@ class SlackAgent
       });
     }
 
+    if (!payload.issue) {
+      const mediaServerName = getAvailableMediaServerName();
+      const mediaServerUrl = getAvailableMediaServerUrl();
+
+      if (mediaServerUrl) {
+        blocks.push({
+          type: 'actions',
+          elements: [
+            {
+              action_id: 'open-in-mediaServer',
+              type: 'button',
+              url: mediaServerUrl,
+              text: {
+                type: 'plain_text',
+                text: `Play on ${mediaServerName}`,
+              },
+            },
+          ],
+        });
+      }
+    }
+
     return {
       text: payload.event ?? payload.subject,
       blocks,

server/lib/notifications/agents/telegram.ts

@@ -1,5 +1,6 @@
 import { IssueStatus, IssueTypeName } from '@server/constants/issue';
 import { MediaStatus } from '@server/constants/media';
+import { MediaServerType } from '@server/constants/server';
 import { getRepository } from '@server/datasource';
 import { User } from '@server/entity/User';
 import type { NotificationAgentTelegram } from '@server/lib/settings';
@@ -66,9 +67,29 @@ class TelegramAgent
     payload: NotificationPayload
   ): Partial<TelegramMessagePayload | TelegramPhotoPayload> {
     const settings = getSettings();
-    const { applicationUrl, applicationTitle } = settings.main;
+    const { applicationUrl, applicationTitle, mediaServerType } = settings.main;
     const { embedPoster } = settings.notifications.agents.telegram;
 
+    function getAvailableMediaServerName() {
+      if (mediaServerType === MediaServerType.EMBY) {
+        return 'Emby';
+      }
+
+      if (mediaServerType === MediaServerType.PLEX) {
+        return 'Plex';
+      }
+
+      return 'Jellyfin';
+    }
+
+    function getAvailableMediaServerUrl(): string | undefined {
+      const wants4k = payload.request?.is4k;
+      const url4k = (payload.media as any)?.mediaUrl4k as string | undefined;
+      const url = (payload.media as any)?.mediaUrl as string | undefined;
+
+      return (wants4k ? (url4k ?? url) : (url ?? url4k)) || undefined;
+    }
+
     /* eslint-disable no-useless-escape */
     let message = `\*${this.escapeText(
       payload.event ? `${payload.event} - ${payload.subject}` : payload.subject
@@ -142,6 +163,15 @@ class TelegramAgent
         payload.issue ? 'Issue' : 'Media'
       } in ${this.escapeText(applicationTitle)}\]\(${url}\)`;
     }
+
+    if (!payload.issue) {
+      const mediaServerName = getAvailableMediaServerName();
+      const mediaServerUrl = getAvailableMediaServerUrl();
+
+      if (mediaServerUrl) {
+        message += `\n\[Play on ${this.escapeText(mediaServerName)}\]\(${mediaServerUrl}\)`;
+      }
+    }
     /* eslint-enable */
 
     return embedPoster && payload.image

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

@@ -68,3 +68,9 @@ div(style='display: block; background-color: #111827; padding: 2.5rem 0;')
           a(href=actionUrl style='display: block; margin: 1.5rem 3rem 0; text-decoration: none; font-size: 1.0em; line-height: 2.25em;')
             span(style='padding: 0.2rem; font-weight: 500; text-align: center; border-radius: 10px; background-color: rgb(99,102,241); color: #fff; display: block; border: 1px solid rgba(255,255,255,0.2);')
               | View Media in #{applicationTitle}
+    if mediaServerActionUrl
+      tr
+        td
+          a(href=mediaServerActionUrl style='display: block; margin: 1.5rem 3rem 0; text-decoration: none; font-size: 1.0em; line-height: 2.25em;')
+            span(style='padding: 0.2rem; font-weight: 500; text-align: center; border-radius: 10px; background-color: rgb(99,102,241); color: #fff; display: block; border: 1px solid rgba(255,255,255,0.2);')
+              | Play on #{mediaServerName}