feat: PWA Support (#1488)

server/lib/notifications/agents/discord.ts

@@ -4,8 +4,11 @@ import { hasNotificationType, Notification } from '..';
 import { User } from '../../../entity/User';
 import logger from '../../../logger';
 import { Permission } from '../../permissions';
-import { getSettings, NotificationAgentDiscord } from '../../settings';
-import { NotificationAgentType } from '../agenttypes';
+import {
+  getSettings,
+  NotificationAgentDiscord,
+  NotificationAgentKey,
+} from '../../settings';
 import { BaseAgent, NotificationAgent, NotificationPayload } from './agent';
 
 enum EmbedColors {
@@ -227,8 +230,9 @@ class DiscordAgent
       if (payload.notifyUser) {
         // Mention user who submitted the request
         if (
-          payload.notifyUser.settings?.hasNotificationAgentEnabled(
-            NotificationAgentType.DISCORD
+          payload.notifyUser.settings?.hasNotificationType(
+            NotificationAgentKey.DISCORD,
+            type
           ) &&
           payload.notifyUser.settings?.discordId
         ) {
@@ -243,8 +247,9 @@ class DiscordAgent
           .filter(
             (user) =>
               user.hasPermission(Permission.MANAGE_REQUESTS) &&
-              user.settings?.hasNotificationAgentEnabled(
-                NotificationAgentType.DISCORD
+              user.settings?.hasNotificationType(
+                NotificationAgentKey.DISCORD,
+                type
               ) &&
               user.settings?.discordId
           )

server/lib/notifications/agents/email.ts

@@ -7,8 +7,11 @@ import { User } from '../../../entity/User';
 import logger from '../../../logger';
 import PreparedEmail from '../../email';
 import { Permission } from '../../permissions';
-import { getSettings, NotificationAgentEmail } from '../../settings';
-import { NotificationAgentType } from '../agenttypes';
+import {
+  getSettings,
+  NotificationAgentEmail,
+  NotificationAgentKey,
+} from '../../settings';
 import { BaseAgent, NotificationAgent, NotificationPayload } from './agent';
 
 class EmailAgent
@@ -152,9 +155,13 @@ class EmailAgent
       // Send notification to the user who submitted the request
       if (
         !payload.notifyUser.settings ||
-        payload.notifyUser.settings.hasNotificationAgentEnabled(
-          NotificationAgentType.EMAIL
-        )
+        // Check if user has email notifications enabled and fallback to true if undefined
+        // since email should default to true
+        (payload.notifyUser.settings.hasNotificationType(
+          NotificationAgentKey.EMAIL,
+          type
+        ) ??
+          true)
       ) {
         logger.debug('Sending email notification', {
           label: 'Notifications',
@@ -194,9 +201,13 @@ class EmailAgent
             (user) =>
               user.hasPermission(Permission.MANAGE_REQUESTS) &&
               (!user.settings ||
-                user.settings.hasNotificationAgentEnabled(
-                  NotificationAgentType.EMAIL
-                ))
+                // Check if user has email notifications enabled and fallback to true if undefined
+                // since email should default to true
+                (user.settings.hasNotificationType(
+                  NotificationAgentKey.EMAIL,
+                  type
+                ) ??
+                  true))
           )
           .map(async (user) => {
             logger.debug('Sending email notification', {

server/lib/notifications/agents/telegram.ts

@@ -2,8 +2,11 @@ import axios from 'axios';
 import { hasNotificationType, Notification } from '..';
 import { MediaType } from '../../../constants/media';
 import logger from '../../../logger';
-import { getSettings, NotificationAgentTelegram } from '../../settings';
-import { NotificationAgentType } from '../agenttypes';
+import {
+  getSettings,
+  NotificationAgentKey,
+  NotificationAgentTelegram,
+} from '../../settings';
 import { BaseAgent, NotificationAgent, NotificationPayload } from './agent';
 
 interface TelegramMessagePayload {
@@ -198,8 +201,9 @@ class TelegramAgent
 
     if (
       payload.notifyUser &&
-      payload.notifyUser.settings?.hasNotificationAgentEnabled(
-        NotificationAgentType.TELEGRAM
+      payload.notifyUser.settings?.hasNotificationType(
+        NotificationAgentKey.TELEGRAM,
+        type
       ) &&
       payload.notifyUser.settings?.telegramChatId &&
       payload.notifyUser.settings?.telegramChatId !==

server/lib/notifications/agents/webpush.ts

@@ -0,0 +1,234 @@
+import { getRepository } from 'typeorm';
+import webpush from 'web-push';
+import { hasNotificationType, Notification } from '..';
+import { MediaType } from '../../../constants/media';
+import { User } from '../../../entity/User';
+import { UserPushSubscription } from '../../../entity/UserPushSubscription';
+import logger from '../../../logger';
+import { Permission } from '../../permissions';
+import {
+  getSettings,
+  NotificationAgentConfig,
+  NotificationAgentKey,
+} from '../../settings';
+import { BaseAgent, NotificationAgent, NotificationPayload } from './agent';
+
+interface PushNotificationPayload {
+  notificationType: string;
+  mediaType?: 'movie' | 'tv';
+  tmdbId?: number;
+  subject: string;
+  message?: string;
+  image?: string;
+  actionUrl?: string;
+  requestId?: number;
+}
+
+class WebPushAgent
+  extends BaseAgent<NotificationAgentConfig>
+  implements NotificationAgent {
+  protected getSettings(): NotificationAgentConfig {
+    if (this.settings) {
+      return this.settings;
+    }
+
+    const settings = getSettings();
+
+    return settings.notifications.agents.webpush;
+  }
+
+  private getNotificationPayload(
+    type: Notification,
+    payload: NotificationPayload
+  ): PushNotificationPayload {
+    switch (type) {
+      case Notification.TEST_NOTIFICATION:
+        return {
+          notificationType: Notification[type],
+          subject: payload.subject,
+          message: payload.message,
+        };
+      case Notification.MEDIA_APPROVED:
+        return {
+          notificationType: Notification[type],
+          subject: payload.subject,
+          message: `Your ${
+            payload.media?.mediaType === MediaType.MOVIE ? 'movie' : 'series'
+          } request has been approved.`,
+          image: payload.image,
+          mediaType: payload.media?.mediaType,
+          tmdbId: payload.media?.tmdbId,
+          requestId: payload.request?.id,
+          actionUrl: `/${payload.media?.mediaType}/${payload.media?.tmdbId}`,
+        };
+      case Notification.MEDIA_AUTO_APPROVED:
+        return {
+          notificationType: Notification[type],
+          subject: payload.subject,
+          message: `Automatically approved a new ${
+            payload.media?.mediaType === MediaType.MOVIE ? 'movie' : 'series'
+          } request from ${payload.request?.requestedBy.displayName}.`,
+          image: payload.image,
+          mediaType: payload.media?.mediaType,
+          tmdbId: payload.media?.tmdbId,
+          requestId: payload.request?.id,
+          actionUrl: `/${payload.media?.mediaType}/${payload.media?.tmdbId}`,
+        };
+      case Notification.MEDIA_AVAILABLE:
+        return {
+          notificationType: Notification[type],
+          subject: payload.subject,
+          message: `Your ${
+            payload.media?.mediaType === MediaType.MOVIE ? 'movie' : 'series'
+          } request is now available!`,
+          image: payload.image,
+          mediaType: payload.media?.mediaType,
+          tmdbId: payload.media?.tmdbId,
+          requestId: payload.request?.id,
+          actionUrl: `/${payload.media?.mediaType}/${payload.media?.tmdbId}`,
+        };
+      case Notification.MEDIA_DECLINED:
+        return {
+          notificationType: Notification[type],
+          subject: payload.subject,
+          message: `Your ${
+            payload.media?.mediaType === MediaType.MOVIE ? 'movie' : 'series'
+          } request was declined.`,
+          image: payload.image,
+          mediaType: payload.media?.mediaType,
+          tmdbId: payload.media?.tmdbId,
+          requestId: payload.request?.id,
+          actionUrl: `/${payload.media?.mediaType}/${payload.media?.tmdbId}`,
+        };
+      case Notification.MEDIA_FAILED:
+        return {
+          notificationType: Notification[type],
+          subject: payload.subject,
+          message: `Failed to process ${
+            payload.media?.mediaType === MediaType.MOVIE ? 'movie' : 'series'
+          } request.`,
+          image: payload.image,
+          mediaType: payload.media?.mediaType,
+          tmdbId: payload.media?.tmdbId,
+          requestId: payload.request?.id,
+          actionUrl: `/${payload.media?.mediaType}/${payload.media?.tmdbId}`,
+        };
+      case Notification.MEDIA_PENDING:
+        return {
+          notificationType: Notification[type],
+          subject: payload.subject,
+          message: `Approval required for new ${
+            payload.media?.mediaType === MediaType.MOVIE ? 'movie' : 'series'
+          } request from ${payload.request?.requestedBy.displayName}.`,
+          image: payload.image,
+          mediaType: payload.media?.mediaType,
+          tmdbId: payload.media?.tmdbId,
+          requestId: payload.request?.id,
+          actionUrl: `/${payload.media?.mediaType}/${payload.media?.tmdbId}`,
+        };
+    }
+  }
+
+  public shouldSend(type: Notification): boolean {
+    if (
+      this.getSettings().enabled &&
+      hasNotificationType(type, this.getSettings().types)
+    ) {
+      return true;
+    }
+
+    return false;
+  }
+
+  public async send(
+    type: Notification,
+    payload: NotificationPayload
+  ): Promise<boolean> {
+    logger.debug('Sending web push notification', {
+      label: 'Notifications',
+      type: Notification[type],
+      subject: payload.subject,
+    });
+    const userRepository = getRepository(User);
+    const userPushSubRepository = getRepository(UserPushSubscription);
+    const settings = getSettings();
+
+    let pushSubs: UserPushSubscription[] = [];
+
+    const mainUser = await userRepository.findOne({ where: { id: 1 } });
+
+    if (
+      payload.notifyUser &&
+      // Check if user has webpush notifications enabled and fallback to true if undefined
+      // since web push should default to true
+      (payload.notifyUser.settings?.hasNotificationType(
+        NotificationAgentKey.WEBPUSH,
+        type
+      ) ??
+        true)
+    ) {
+      const notifySubs = await userPushSubRepository.find({
+        where: { user: payload.notifyUser.id },
+      });
+
+      pushSubs = notifySubs;
+    } else if (!payload.notifyUser) {
+      const users = await userRepository.find();
+
+      const manageUsers = users.filter(
+        (user) =>
+          user.hasPermission(Permission.MANAGE_REQUESTS) &&
+          // Check if user has webpush notifications enabled and fallback to true if undefined
+          // since web push should default to true
+          (user.settings?.hasNotificationType(
+            NotificationAgentKey.WEBPUSH,
+            type
+          ) ??
+            true)
+      );
+
+      const allSubs = await userPushSubRepository
+        .createQueryBuilder('pushSub')
+        .where('pushSub.userId IN (:users)', {
+          users: manageUsers.map((user) => user.id),
+        })
+        .getMany();
+
+      pushSubs = allSubs;
+    }
+
+    if (mainUser && pushSubs.length > 0) {
+      webpush.setVapidDetails(
+        `mailto:${mainUser.email}`,
+        settings.vapidPublic,
+        settings.vapidPrivate
+      );
+
+      Promise.all(
+        pushSubs.map(async (sub) => {
+          try {
+            await webpush.sendNotification(
+              {
+                endpoint: sub.endpoint,
+                keys: {
+                  auth: sub.auth,
+                  p256dh: sub.p256dh,
+                },
+              },
+              Buffer.from(
+                JSON.stringify(this.getNotificationPayload(type, payload)),
+                'utf-8'
+              )
+            );
+          } catch (e) {
+            // Failed to send notification so we need to remove the subscription
+            userPushSubRepository.remove(sub);
+          }
+        })
+      );
+    }
+    return true;
+  }
+}
+
+export default WebPushAgent;

server/lib/notifications/agenttypes.ts

@@ -1,16 +0,0 @@
-export enum NotificationAgentType {
-  NONE = 0,
-  EMAIL = 2,
-  DISCORD = 4,
-  TELEGRAM = 8,
-  PUSHOVER = 16,
-  PUSHBULLET = 32,
-  SLACK = 64,
-}
-
-export const hasNotificationAgentEnabled = (
-  agent: NotificationAgentType,
-  value: number
-): boolean => {
-  return !!(value & agent);
-};

server/lib/settings.ts

@@ -2,6 +2,7 @@ import fs from 'fs';
 import { merge } from 'lodash';
 import path from 'path';
 import { v4 as uuidv4 } from 'uuid';
+import webpush from 'web-push';
 import { Permission } from './permissions';
 
 export interface Library {
@@ -101,6 +102,8 @@ interface FullPublicSettings extends PublicSettings {
   originalLanguage: string;
   partialRequestsEnabled: boolean;
   cacheImages: boolean;
+  vapidPublic: string;
+  enablePushRegistration: boolean;
 }
 
 export interface NotificationAgentConfig {
@@ -168,6 +171,17 @@ export interface NotificationAgentWebhook extends NotificationAgentConfig {
   };
 }
 
+export enum NotificationAgentKey {
+  DISCORD = 'discord',
+  EMAIL = 'email',
+  PUSHBULLET = 'pushbullet',
+  PUSHOVER = 'pushover',
+  SLACK = 'slack',
+  TELEGRAM = 'telegram',
+  WEBHOOK = 'webhook',
+  WEBPUSH = 'webpush',
+}
+
 interface NotificationAgents {
   discord: NotificationAgentDiscord;
   email: NotificationAgentEmail;
@@ -176,6 +190,7 @@ interface NotificationAgents {
   slack: NotificationAgentSlack;
   telegram: NotificationAgentTelegram;
   webhook: NotificationAgentWebhook;
+  webpush: NotificationAgentConfig;
 }
 
 interface NotificationSettings {
@@ -184,6 +199,8 @@ interface NotificationSettings {
 
 interface AllSettings {
   clientId: string;
+  vapidPublic: string;
+  vapidPrivate: string;
   main: MainSettings;
   plex: PlexSettings;
   radarr: RadarrSettings[];
@@ -202,6 +219,8 @@ class Settings {
   constructor(initialSettings?: AllSettings) {
     this.data = {
       clientId: uuidv4(),
+      vapidPrivate: '',
+      vapidPublic: '',
       main: {
         apiKey: '',
         applicationTitle: 'Overseerr',
@@ -298,6 +317,11 @@ class Settings {
                 'IntcbiAgICBcIm5vdGlmaWNhdGlvbl90eXBlXCI6IFwie3tub3RpZmljYXRpb25fdHlwZX19XCIsXG4gICAgXCJzdWJqZWN0XCI6IFwie3tzdWJqZWN0fX1cIixcbiAgICBcIm1lc3NhZ2VcIjogXCJ7e21lc3NhZ2V9fVwiLFxuICAgIFwiaW1hZ2VcIjogXCJ7e2ltYWdlfX1cIixcbiAgICBcImVtYWlsXCI6IFwie3tub3RpZnl1c2VyX2VtYWlsfX1cIixcbiAgICBcInVzZXJuYW1lXCI6IFwie3tub3RpZnl1c2VyX3VzZXJuYW1lfX1cIixcbiAgICBcImF2YXRhclwiOiBcInt7bm90aWZ5dXNlcl9hdmF0YXJ9fVwiLFxuICAgIFwie3ttZWRpYX19XCI6IHtcbiAgICAgICAgXCJtZWRpYV90eXBlXCI6IFwie3ttZWRpYV90eXBlfX1cIixcbiAgICAgICAgXCJ0bWRiSWRcIjogXCJ7e21lZGlhX3RtZGJpZH19XCIsXG4gICAgICAgIFwiaW1kYklkXCI6IFwie3ttZWRpYV9pbWRiaWR9fVwiLFxuICAgICAgICBcInR2ZGJJZFwiOiBcInt7bWVkaWFfdHZkYmlkfX1cIixcbiAgICAgICAgXCJzdGF0dXNcIjogXCJ7e21lZGlhX3N0YXR1c319XCIsXG4gICAgICAgIFwic3RhdHVzNGtcIjogXCJ7e21lZGlhX3N0YXR1czRrfX1cIlxuICAgIH0sXG4gICAgXCJ7e2V4dHJhfX1cIjogW10sXG4gICAgXCJ7e3JlcXVlc3R9fVwiOiB7XG4gICAgICAgIFwicmVxdWVzdF9pZFwiOiBcInt7cmVxdWVzdF9pZH19XCIsXG4gICAgICAgIFwicmVxdWVzdGVkQnlfZW1haWxcIjogXCJ7e3JlcXVlc3RlZEJ5X2VtYWlsfX1cIixcbiAgICAgICAgXCJyZXF1ZXN0ZWRCeV91c2VybmFtZVwiOiBcInt7cmVxdWVzdGVkQnlfdXNlcm5hbWV9fVwiLFxuICAgICAgICBcInJlcXVlc3RlZEJ5X2F2YXRhclwiOiBcInt7cmVxdWVzdGVkQnlfYXZhdGFyfX1cIlxuICAgIH1cbn0i',
             },
           },
+          webpush: {
+            enabled: false,
+            types: 0,
+            options: {},
+          },
         },
       },
     };
@@ -366,6 +390,8 @@ class Settings {
       originalLanguage: this.data.main.originalLanguage,
       partialRequestsEnabled: this.data.main.partialRequestsEnabled,
       cacheImages: this.data.main.cacheImages,
+      vapidPublic: this.vapidPublic,
+      enablePushRegistration: this.data.notifications.agents.webpush.enabled,
     };
   }
 
@@ -386,6 +412,18 @@ class Settings {
     return this.data.clientId;
   }
 
+  get vapidPublic(): string {
+    this.generateVapidKeys();
+
+    return this.data.vapidPublic;
+  }
+
+  get vapidPrivate(): string {
+    this.generateVapidKeys();
+
+    return this.data.vapidPrivate;
+  }
+
   public regenerateApiKey(): MainSettings {
     this.main.apiKey = this.generateApiKey();
     this.save();
@@ -396,6 +434,15 @@ class Settings {
     return Buffer.from(`${Date.now()}${uuidv4()})`).toString('base64');
   }
 
+  private generateVapidKeys(force = false): void {
+    if (!this.data.vapidPublic || !this.data.vapidPrivate || force) {
+      const vapidKeys = webpush.generateVAPIDKeys();
+      this.data.vapidPrivate = vapidKeys.privateKey;
+      this.data.vapidPublic = vapidKeys.publicKey;
+      this.save();
+    }
+  }
+
   /**
    * Settings Load
    *