fix(ui): adds mediaServerName to statusBadge and manageSlideOver

Adds mediaServerName to statusBadge and manageSlideOver to indicate the type of mediaServer that is
connected to jellyseerr

fix #254

src/components/ManageSlideOver/index.tsx

@@ -16,6 +16,7 @@ import type { MediaWatchDataResponse } from '@server/interfaces/api/mediaInterfa
 import type { MovieDetails } from '@server/models/Movie';
 import type { TvDetails } from '@server/models/Tv';
 import axios from 'axios';
+import getConfig from 'next/config';
 import Link from 'next/link';
 import { defineMessages, useIntl } from 'react-intl';
 import useSWR from 'swr';
@@ -30,7 +31,7 @@ const messages = defineMessages({
   manageModalNoRequests: 'No requests.',
   manageModalClearMedia: 'Clear Data',
   manageModalClearMediaWarning:
-    '* This will irreversibly remove all data for this {mediaType}, including any requests. If this item exists in your Plex library, the media information will be recreated during the next scan.',
+    '* This will irreversibly remove all data for this {mediaType}, including any requests. If this item exists in your {mediaServerName} library, the media information will be recreated during the next scan.',
   openarr: 'Open in {arr}',
   openarr4k: 'Open in 4K {arr}',
   downloadstatus: 'Downloads',
@@ -79,6 +80,7 @@ const ManageSlideOver = ({
   const { user: currentUser, hasPermission } = useUser();
   const intl = useIntl();
   const settings = useSettings();
+  const { publicRuntimeConfig } = getConfig();
   const { data: watchData } = useSWR<MediaWatchDataResponse>(
     settings.currentSettings.mediaServerType === MediaServerType.PLEX &&
       data.mediaInfo &&
@@ -505,6 +507,13 @@ const ManageSlideOver = ({
                     mediaType: intl.formatMessage(
                       mediaType === 'movie' ? messages.movie : messages.tvshow
                     ),
+                    mediaServerName:
+                      publicRuntimeConfig.JELLYFIN_TYPE == 'emby'
+                        ? 'Emby'
+                        : settings.currentSettings.mediaServerType ===
+                          MediaServerType.PLEX
+                        ? 'Plex'
+                        : 'Jellyfin',
                   })}
                 </div>
               </div>

src/components/StatusBadge/index.tsx

@@ -5,12 +5,14 @@ import useSettings from '@app/hooks/useSettings';
 import { Permission, useUser } from '@app/hooks/useUser';
 import globalMessages from '@app/i18n/globalMessages';
 import { MediaStatus } from '@server/constants/media';
+import { MediaServerType } from '@server/constants/server';
+import getConfig from 'next/config';
 import { defineMessages, useIntl } from 'react-intl';
 
 const messages = defineMessages({
   status: '{status}',
   status4k: '4K {status}',
-  playonplex: 'Play on Plex',
+  playonplex: 'Play on {mediaServerName}',
   openinarr: 'Open in {arr}',
   managemedia: 'Manage {mediaType}',
 });
@@ -37,6 +39,7 @@ const StatusBadge = ({
   const intl = useIntl();
   const { hasPermission } = useUser();
   const settings = useSettings();
+  const { publicRuntimeConfig } = getConfig();
 
   let mediaLink: string | undefined;
   let mediaLinkDescription: string | undefined;
@@ -68,7 +71,14 @@ const StatusBadge = ({
         : settings.currentSettings.series4kEnabled))
   ) {
     mediaLink = plexUrl;
-    mediaLinkDescription = intl.formatMessage(messages.playonplex);
+    mediaLinkDescription = intl.formatMessage(messages.playonplex, {
+      mediaServerName:
+        publicRuntimeConfig.JELLYFIN_TYPE == 'emby'
+          ? 'Emby'
+          : settings.currentSettings.mediaServerType === MediaServerType.PLEX
+          ? 'Plex'
+          : 'Jellyfin',
+    });
   } else if (hasPermission(Permission.MANAGE_REQUESTS)) {
     if (mediaType && tmdbId) {
       mediaLink = `/${mediaType}/${tmdbId}?manage=1`;