diff --git a/src/components/Setup/SetupLogin.tsx b/src/components/Setup/SetupLogin.tsx
index 46bf7246..a87bcb33 100644
--- a/src/components/Setup/SetupLogin.tsx
+++ b/src/components/Setup/SetupLogin.tsx
@@ -4,7 +4,6 @@ import PlexLoginButton from '@app/components/PlexLoginButton';
import { useUser } from '@app/hooks/useUser';
import { MediaServerType } from '@server/constants/server';
import axios from 'axios';
-import getConfig from 'next/config';
import type React from 'react';
import { useEffect, useState } from 'react';
import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
@@ -27,7 +26,16 @@ const SetupLogin: React.FC
= ({ onComplete }) => {
);
const { user, revalidate } = useUser();
const intl = useIntl();
- const { publicRuntimeConfig } = getConfig();
+ const [selectedService, setSelectedService] = useState(
+ undefined
+ );
+
+ // Function to handle toggle changes
+ const handleToggle = (option: string) => {
+ // Toggle between 'emby' and 'jellyfin'
+ setSelectedService(option);
+ };
+
// Effect that is triggered when the `authToken` comes back from the Plex OAuth
// We take the token and attempt to login. If we get a success message, we will
// ask swr to revalidate the user which _shouid_ come back with a valid user.
@@ -94,20 +102,21 @@ const SetupLogin: React.FC = ({ onComplete }) => {
}`}
onClick={() => handleClick(1)}
>
- {publicRuntimeConfig.JELLYFIN_TYPE == 'emby'
- ? intl.formatMessage(messages.signinWithJellyfin, {
- mediaServerName: 'Emby',
- })
- : intl.formatMessage(messages.signinWithJellyfin, {
- mediaServerName: 'Jellyfin',
- })}
+ {intl.formatMessage(messages.signinWithJellyfin, {
+ mediaServerName: selectedService ?? 'Jellyfin / Emby',
+ })}
-
+
diff --git a/src/components/StatusBadge/index.tsx b/src/components/StatusBadge/index.tsx
index 58e722bd..869727bd 100644
--- a/src/components/StatusBadge/index.tsx
+++ b/src/components/StatusBadge/index.tsx
@@ -8,7 +8,6 @@ import globalMessages from '@app/i18n/globalMessages';
import { MediaStatus } from '@server/constants/media';
import { MediaServerType } from '@server/constants/server';
import type { DownloadingItem } from '@server/lib/downloadtracker';
-import getConfig from 'next/config';
import { defineMessages, useIntl } from 'react-intl';
const messages = defineMessages({
@@ -46,7 +45,6 @@ const StatusBadge = ({
const intl = useIntl();
const { hasPermission } = useUser();
const settings = useSettings();
- const { publicRuntimeConfig } = getConfig();
let mediaLink: string | undefined;
let mediaLinkDescription: string | undefined;
@@ -84,7 +82,7 @@ const StatusBadge = ({
mediaLink = plexUrl;
mediaLinkDescription = intl.formatMessage(messages.playonplex, {
mediaServerName:
- publicRuntimeConfig.JELLYFIN_TYPE == 'emby'
+ settings.currentSettings.mediaServerType === MediaServerType.EMBY
? 'Emby'
: settings.currentSettings.mediaServerType === MediaServerType.PLEX
? 'Plex'
diff --git a/src/components/TvDetails/index.tsx b/src/components/TvDetails/index.tsx
index daceb9c8..cae7447e 100644
--- a/src/components/TvDetails/index.tsx
+++ b/src/components/TvDetails/index.tsx
@@ -49,7 +49,6 @@ import type { Crew } from '@server/models/common';
import type { TvDetails as TvDetailsType } from '@server/models/Tv';
import { hasFlag } from 'country-flag-icons';
import 'country-flag-icons/3x2/flags.css';
-import getConfig from 'next/config';
import Link from 'next/link';
import { useRouter } from 'next/router';
import { useEffect, useMemo, useState } from 'react';
@@ -105,7 +104,6 @@ const TvDetails = ({ tv }: TvDetailsProps) => {
router.query.manage == '1' ? true : false
);
const [showIssueModal, setShowIssueModal] = useState(false);
- const { publicRuntimeConfig } = getConfig();
const {
data,
@@ -274,7 +272,7 @@ const TvDetails = ({ tv }: TvDetailsProps) => {
?.flatrate ?? [];
function getAvalaibleMediaServerName() {
- if (publicRuntimeConfig.JELLYFIN_TYPE === 'emby') {
+ if (settings.currentSettings.mediaServerType === MediaServerType.EMBY) {
return intl.formatMessage(messages.play, { mediaServerName: 'Emby' });
}
@@ -286,15 +284,15 @@ const TvDetails = ({ tv }: TvDetailsProps) => {
}
function getAvalaible4kMediaServerName() {
- if (publicRuntimeConfig.JELLYFIN_TYPE === 'emby') {
- return intl.formatMessage(messages.play4k, { mediaServerName: 'Emby' });
+ if (settings.currentSettings.mediaServerType === MediaServerType.EMBY) {
+ return intl.formatMessage(messages.play, { mediaServerName: 'Emby' });
}
if (settings.currentSettings.mediaServerType === MediaServerType.PLEX) {
return intl.formatMessage(messages.play4k, { mediaServerName: 'Plex' });
}
- return intl.formatMessage(messages.play4k, { mediaServerName: 'Jellyfin' });
+ return intl.formatMessage(messages.play, { mediaServerName: 'Jellyfin' });
}
return (
diff --git a/src/components/UserList/JellyfinImportModal.tsx b/src/components/UserList/JellyfinImportModal.tsx
index 5d293e60..ddac823c 100644
--- a/src/components/UserList/JellyfinImportModal.tsx
+++ b/src/components/UserList/JellyfinImportModal.tsx
@@ -2,9 +2,9 @@ import Alert from '@app/components/Common/Alert';
import Modal from '@app/components/Common/Modal';
import useSettings from '@app/hooks/useSettings';
import globalMessages from '@app/i18n/globalMessages';
+import { MediaServerType } from '@server/constants/server';
import type { UserResultsResponse } from '@server/interfaces/api/userInterfaces';
import axios from 'axios';
-import getConfig from 'next/config';
import type React from 'react';
import { useState } from 'react';
import { defineMessages, useIntl } from 'react-intl';
@@ -36,7 +36,6 @@ const JellyfinImportModal: React.FC
= ({
}) => {
const intl = useIntl();
const settings = useSettings();
- const { publicRuntimeConfig } = getConfig();
const { addToast } = useToasts();
const [isImporting, setImporting] = useState(false);
const [selectedUsers, setSelectedUsers] = useState([]);
@@ -82,7 +81,9 @@ const JellyfinImportModal: React.FC = ({
userCount: createdUsers.length,
strong: (msg: React.ReactNode) => {msg},
mediaServerName:
- publicRuntimeConfig.JELLYFIN_TYPE == 'emby' ? 'Emby' : 'Jellyfin',
+ settings.currentSettings.mediaServerType === MediaServerType.EMBY
+ ? 'Emby'
+ : 'Jellyfin',
}),
{
autoDismiss: true,
@@ -97,7 +98,9 @@ const JellyfinImportModal: React.FC = ({
addToast(
intl.formatMessage(messages.importfromJellyfinerror, {
mediaServerName:
- publicRuntimeConfig.JELLYFIN_TYPE == 'emby' ? 'Emby' : 'Jellyfin',
+ settings.currentSettings.mediaServerType === MediaServerType.EMBY
+ ? 'Emby'
+ : 'Jellyfin',
}),
{
autoDismiss: true,
@@ -135,7 +138,9 @@ const JellyfinImportModal: React.FC = ({
loading={!data && !error}
title={intl.formatMessage(messages.importfromJellyfin, {
mediaServerName:
- publicRuntimeConfig.JELLYFIN_TYPE == 'emby' ? 'Emby' : 'Jellyfin',
+ settings.currentSettings.mediaServerType === MediaServerType.EMBY
+ ? 'Emby'
+ : 'Jellyfin',
})}
onOk={() => {
importUsers();
@@ -152,7 +157,8 @@ const JellyfinImportModal: React.FC = ({
(
@@ -269,7 +275,9 @@ const JellyfinImportModal: React.FC = ({
diff --git a/src/components/UserList/index.tsx b/src/components/UserList/index.tsx
index d4901ed4..18f96b49 100644
--- a/src/components/UserList/index.tsx
+++ b/src/components/UserList/index.tsx
@@ -28,7 +28,6 @@ import type { UserResultsResponse } from '@server/interfaces/api/userInterfaces'
import { hasPermission } from '@server/lib/permissions';
import axios from 'axios';
import { Field, Form, Formik } from 'formik';
-import getConfig from 'next/config';
import Link from 'next/link';
import { useRouter } from 'next/router';
import { useEffect, useState } from 'react';
@@ -88,7 +87,6 @@ const UserList = () => {
const intl = useIntl();
const router = useRouter();
const settings = useSettings();
- const { publicRuntimeConfig } = getConfig();
const { addToast } = useToasts();
const { user: currentUser, hasPermission: currentHasPermission } = useUser();
const [currentSort, setCurrentSort] = useState('displayname');
@@ -514,7 +512,8 @@ const UserList = () => {
>
- {publicRuntimeConfig.JELLYFIN_TYPE == 'emby'
+ {settings.currentSettings.mediaServerType ===
+ MediaServerType.EMBY
? intl.formatMessage(messages.importfrommediaserver, {
mediaServerName: 'Emby',
})
@@ -659,7 +658,7 @@ const UserList = () => {
{intl.formatMessage(messages.localuser)}
- ) : publicRuntimeConfig.JELLYFIN_TYPE == 'emby' ? (
+ ) : user.userType === UserType.EMBY ? (
{intl.formatMessage(messages.mediaServerUser, {
mediaServerName: 'Emby',
diff --git a/src/components/UserProfile/UserSettings/UserGeneralSettings/index.tsx b/src/components/UserProfile/UserSettings/UserGeneralSettings/index.tsx
index 960746ad..20d67265 100644
--- a/src/components/UserProfile/UserSettings/UserGeneralSettings/index.tsx
+++ b/src/components/UserProfile/UserSettings/UserGeneralSettings/index.tsx
@@ -16,7 +16,6 @@ import { ArrowDownOnSquareIcon } from '@heroicons/react/24/outline';
import type { UserSettingsGeneralResponse } from '@server/interfaces/api/userSettingsInterfaces';
import axios from 'axios';
import { Field, Form, Formik } from 'formik';
-import getConfig from 'next/config';
import { useRouter } from 'next/router';
import { useEffect, useState } from 'react';
import { defineMessages, useIntl } from 'react-intl';
@@ -64,7 +63,6 @@ const messages = defineMessages({
const UserGeneralSettings = () => {
const intl = useIntl();
- const { publicRuntimeConfig } = getConfig();
const { addToast } = useToasts();
const { locale, setLocale } = useLocale();
const [movieQuotaEnabled, setMovieQuotaEnabled] = useState(false);
@@ -206,7 +204,7 @@ const UserGeneralSettings = () => {
{intl.formatMessage(messages.localuser)}
- ) : publicRuntimeConfig.JELLYFIN_TYPE == 'emby' ? (
+ ) : user?.userType === UserType.EMBY ? (
{intl.formatMessage(messages.mediaServerUser, {
mediaServerName: 'Emby',
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 8110e87e..d7176d41 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -60,6 +60,16 @@
background: #f19a30;
}
+ .server-type-button {
+ @apply rounded-md border border-gray-500 bg-gray-700 px-4 py-2 text-white transition duration-150 ease-in-out hover:bg-gray-500;
+ }
+ .jellyfin-server svg {
+ @apply h-6 w-6;
+ }
+ .emby-server svg {
+ @apply h-7 w-7;
+ }
+
ul.cards-vertical,
ul.cards-horizontal {
@apply grid gap-4;