fix(ui): fix ui elements not reflecting the env variable

Fix emby ui elements not reflecting the emby env variable set during runtime
This commit is contained in:
Fallenbagel
2022-05-29 23:51:29 +05:00
parent c67ca34111
commit 722dda5856
11 changed files with 62 additions and 33 deletions

View File

@@ -2,6 +2,10 @@ module.exports = {
env: {
commitTag: process.env.COMMIT_TAG || 'local',
},
publicRuntimeConfig: {
// Will be available on both server and client
JELLYFIN_TYPE: process.env.JELLYFIN_TYPE,
},
images: {
domains: ['image.tmdb.org'],
},

View File

@@ -35,6 +35,7 @@ import IssueComment from './IssueComment';
import IssueDescription from './IssueDescription';
import { MediaServerType } from '../../../server/constants/server';
import useSettings from '../../hooks/useSettings';
import getConfig from 'next/config';
const messages = defineMessages({
openedby: '#{issueId} opened {relativeTime} by {username}',
@@ -99,6 +100,7 @@ const IssueDetails: React.FC = () => {
(opt) => opt.issueType === issueData?.issueType
);
const settings = useSettings();
const { publicRuntimeConfig } = getConfig();
if (!data && !error) {
return <LoadingSpinner />;
@@ -366,7 +368,7 @@ const IssueDetails: React.FC = () => {
>
<PlayIcon />
<span>
{process.env.JELLYFIN_TYPE == 'emby'
{publicRuntimeConfig.JELLYFIN_TYPE == 'emby'
? intl.formatMessage(messages.playonplex, {
mediaServerName: 'Emby',
})
@@ -412,7 +414,7 @@ const IssueDetails: React.FC = () => {
>
<PlayIcon />
<span>
{process.env.JELLYFIN_TYPE == 'emby'
{publicRuntimeConfig.JELLYFIN_TYPE == 'emby'
? intl.formatMessage(messages.play4konplex, {
mediaServerName: 'Emby',
})
@@ -628,7 +630,7 @@ const IssueDetails: React.FC = () => {
>
<PlayIcon />
<span>
{process.env.JELLYFIN_TYPE == 'emby'
{publicRuntimeConfig.JELLYFIN_TYPE == 'emby'
? intl.formatMessage(messages.playonplex, {
mediaServerName: 'Emby',
})
@@ -674,7 +676,7 @@ const IssueDetails: React.FC = () => {
>
<PlayIcon />
<span>
{process.env.JELLYFIN_TYPE == 'emby'
{publicRuntimeConfig.JELLYFIN_TYPE == 'emby'
? intl.formatMessage(messages.play4konplex, {
mediaServerName: 'Emby',
})

View File

@@ -6,6 +6,7 @@ import { useToasts } from 'react-toast-notifications';
import * as Yup from 'yup';
import useSettings from '../../hooks/useSettings';
import Button from '../Common/Button';
import getConfig from 'next/config';
const messages = defineMessages({
username: 'Username',
@@ -39,21 +40,19 @@ const JellyfinLogin: React.FC<JellyfinLoginProps> = ({
const toasts = useToasts();
const intl = useIntl();
const settings = useSettings();
const { publicRuntimeConfig } = getConfig();
if (initial) {
const LoginSchema = Yup.object().shape({
host: Yup.string()
.matches(
/^(?:(?:(?:https?):)?\/\/)(?:\S+(?::\S*)?@)?(?:(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)*\.?)(?::\d{2,5})?(?:[/?#]\S*)?$/,
intl.formatMessage(messages.validationhostformat, {
mediaServerName:
process.env.JELLYFIN_TYPE == 'emby' ? 'Emby' : 'Jellyfin',
})
intl.formatMessage(messages.validationhostformat)
)
.required(
intl.formatMessage(messages.validationhostrequired, {
mediaServerName:
process.env.JELLYFIN_TYPE == 'emby' ? 'Emby' : 'Jellyfin',
publicRuntimeConfig.JELLYFIN_TYPE == 'emby' ? 'Emby' : 'Jellyfin',
})
),
email: Yup.string()
@@ -104,7 +103,9 @@ const JellyfinLogin: React.FC<JellyfinLoginProps> = ({
<label htmlFor="host" className="text-label">
{intl.formatMessage(messages.host, {
mediaServerName:
process.env.JELLYFIN_TYPE == 'emby' ? 'Emby' : 'Jellyfin',
publicRuntimeConfig.JELLYFIN_TYPE == 'emby'
? 'Emby'
: 'Jellyfin',
})}
</label>
<div className="mt-1 mb-2 sm:col-span-2 sm:mt-0">
@@ -115,7 +116,7 @@ const JellyfinLogin: React.FC<JellyfinLoginProps> = ({
type="text"
placeholder={intl.formatMessage(messages.host, {
mediaServerName:
process.env.JELLYFIN_TYPE == 'emby'
publicRuntimeConfig.JELLYFIN_TYPE == 'emby'
? 'Emby'
: 'Jellyfin',
})}

View File

@@ -48,6 +48,7 @@ import PersonCard from '../PersonCard';
import RequestButton from '../RequestButton';
import Slider from '../Slider';
import StatusBadge from '../StatusBadge';
import getConfig from 'next/config';
const messages = defineMessages({
originaltitle: 'Original Title',
@@ -95,6 +96,7 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
const minStudios = 3;
const [showMoreStudios, setShowMoreStudios] = useState(false);
const [showIssueModal, setShowIssueModal] = useState(false);
const { publicRuntimeConfig } = getConfig();
const {
data,
@@ -223,7 +225,7 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
?.flatrate ?? [];
function getAvalaibleMediaServerName() {
if (process.env.JELLYFIN_TYPE === 'emby') {
if (publicRuntimeConfig.JELLYFIN_TYPE === 'emby') {
return intl.formatMessage(messages.play, { mediaServerName: 'Emby' });
}
@@ -235,7 +237,7 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
}
function getAvalaible4kMediaServerName() {
if (process.env.JELLYFIN_TYPE === 'emby') {
if (publicRuntimeConfig.JELLYFIN_TYPE === 'emby') {
return intl.formatMessage(messages.play4k, { mediaServerName: 'Emby' });
}

View File

@@ -12,6 +12,7 @@ import Badge from '../Common/Badge';
import Button from '../Common/Button';
import LoadingSpinner from '../Common/LoadingSpinner';
import LibraryItem from './LibraryItem';
import getConfig from 'next/config';
const messages = defineMessages({
jellyfinsettings: '{mediaServerName} Settings',
@@ -80,6 +81,7 @@ const SettingsJellyfin: React.FC<SettingsJellyfinProps> = ({
);
const intl = useIntl();
const { addToast } = useToasts();
const { publicRuntimeConfig } = getConfig();
const JellyfinSettingsSchema = Yup.object().shape({
jellyfinExternalUrl: Yup.string().matches(
@@ -161,7 +163,7 @@ const SettingsJellyfin: React.FC<SettingsJellyfinProps> = ({
<>
<div className="mb-6">
<h3 className="heading">
{process.env.JELLYFIN_TYPE == 'emby'
{publicRuntimeConfig.JELLYFIN_TYPE == 'emby'
? intl.formatMessage(messages.jellyfinlibraries, {
mediaServerName: 'Emby',
})
@@ -170,7 +172,7 @@ const SettingsJellyfin: React.FC<SettingsJellyfinProps> = ({
})}
</h3>
<p className="description">
{process.env.JELLYFIN_TYPE == 'emby'
{publicRuntimeConfig.JELLYFIN_TYPE == 'emby'
? intl.formatMessage(messages.jellyfinlibrariesDescription, {
mediaServerName: 'Emby',
})
@@ -213,7 +215,7 @@ const SettingsJellyfin: React.FC<SettingsJellyfinProps> = ({
<FormattedMessage {...messages.manualscanJellyfin} />
</h3>
<p className="description">
{process.env.JELLYFIN_TYPE == 'emby'
{publicRuntimeConfig.JELLYFIN_TYPE == 'emby'
? intl.formatMessage(messages.manualscanDescriptionJellyfin, {
mediaServerName: 'Emby',
})
@@ -323,7 +325,7 @@ const SettingsJellyfin: React.FC<SettingsJellyfinProps> = ({
<>
<div className="mt-10 mb-6">
<h3 className="heading">
{process.env.JELLYFIN_TYPE == 'emby'
{publicRuntimeConfig.JELLYFIN_TYPE == 'emby'
? intl.formatMessage(messages.jellyfinSettings, {
mediaServerName: 'Emby',
})
@@ -332,7 +334,7 @@ const SettingsJellyfin: React.FC<SettingsJellyfinProps> = ({
})}
</h3>
<p className="description">
{process.env.JELLYFIN_TYPE == 'emby'
{publicRuntimeConfig.JELLYFIN_TYPE == 'emby'
? intl.formatMessage(messages.jellyfinSettingsDescription, {
mediaServerName: 'Emby',
})
@@ -355,7 +357,9 @@ const SettingsJellyfin: React.FC<SettingsJellyfinProps> = ({
addToast(
intl.formatMessage(messages.jellyfinSettingsSuccess, {
mediaServerName:
process.env.JELLYFIN_TYPE == 'emby' ? 'Emby' : 'Jellyfin',
publicRuntimeConfig.JELLYFIN_TYPE == 'emby'
? 'Emby'
: 'Jellyfin',
}),
{
autoDismiss: true,
@@ -366,7 +370,9 @@ const SettingsJellyfin: React.FC<SettingsJellyfinProps> = ({
addToast(
intl.formatMessage(messages.jellyfinSettingsFailure, {
mediaServerName:
process.env.JELLYFIN_TYPE == 'emby' ? 'Emby' : 'Jellyfin',
publicRuntimeConfig.JELLYFIN_TYPE == 'emby'
? 'Emby'
: 'Jellyfin',
}),
{
autoDismiss: true,

View File

@@ -3,6 +3,7 @@ import { defineMessages, useIntl } from 'react-intl';
import globalMessages from '../../i18n/globalMessages';
import PageTitle from '../Common/PageTitle';
import SettingsTabs, { SettingsRoute } from '../Common/SettingsTabs';
import getConfig from 'next/config';
const messages = defineMessages({
menuGeneralSettings: 'General',
@@ -18,6 +19,7 @@ const messages = defineMessages({
const SettingsLayout: React.FC = ({ children }) => {
const intl = useIntl();
const { publicRuntimeConfig } = getConfig();
const settingsRoutes: SettingsRoute[] = [
{
text: intl.formatMessage(messages.menuGeneralSettings),
@@ -76,7 +78,7 @@ const SettingsLayout: React.FC = ({ children }) => {
</>
);
function getAvalaibleMediaServerName() {
if (process.env.JELLYFIN_TYPE === 'emby') {
if (publicRuntimeConfig.JELLYFIN_TYPE === 'emby') {
return intl.formatMessage(messages.menuJellyfinSettings, {
mediaServerName: 'Emby',
});

View File

@@ -14,6 +14,7 @@ import LoadingSpinner from '../../Common/LoadingSpinner';
import PageTitle from '../../Common/PageTitle';
import PermissionEdit from '../../PermissionEdit';
import QuotaSelector from '../../QuotaSelector';
import getConfig from 'next/config';
const messages = defineMessages({
users: 'Users',
@@ -42,6 +43,7 @@ const SettingsUsers: React.FC = () => {
mutate: revalidate,
} = useSWR<MainSettings>('/api/v1/settings/main');
const settings = useSettings();
const { publicRuntimeConfig } = getConfig();
if (!data && !error) {
return <LoadingSpinner />;
@@ -131,7 +133,7 @@ const SettingsUsers: React.FC = () => {
<label htmlFor="newPlexLogin" className="checkbox-label">
{intl.formatMessage(messages.newPlexLogin, {
mediaServerName:
process.env.JELLYFIN_TYPE == 'emby'
publicRuntimeConfig.JELLYFIN_TYPE == 'emby'
? 'Emby'
: settings.currentSettings.mediaServerType ===
MediaServerType.PLEX
@@ -141,7 +143,7 @@ const SettingsUsers: React.FC = () => {
<span className="label-tip">
{intl.formatMessage(messages.newPlexLoginTip, {
mediaServerName:
process.env.JELLYFIN_TYPE == 'emby'
publicRuntimeConfig.JELLYFIN_TYPE == 'emby'
? 'Emby'
: settings.currentSettings.mediaServerType ===
MediaServerType.PLEX

View File

@@ -6,6 +6,7 @@ import axios from 'axios';
import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
import Accordion from '../Common/Accordion';
import { MediaServerType } from '../../../server/constants/server';
import getConfig from 'next/config';
const messages = defineMessages({
welcome: 'Welcome to Overseerr',
@@ -25,6 +26,7 @@ const SetupLogin: React.FC<LoginWithMediaServerProps> = ({ onComplete }) => {
);
const { user, revalidate } = useUser();
const intl = useIntl();
const { publicRuntimeConfig } = getConfig();
// 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.
@@ -91,7 +93,7 @@ const SetupLogin: React.FC<LoginWithMediaServerProps> = ({ onComplete }) => {
}`}
onClick={() => handleClick(1)}
>
{process.env.JELLYFIN_TYPE == 'emby'
{publicRuntimeConfig.JELLYFIN_TYPE == 'emby'
? intl.formatMessage(messages.signinWithJellyfin, {
mediaServerName: 'Emby',
})

View File

@@ -44,6 +44,7 @@ import RequestButton from '../RequestButton';
import RequestModal from '../RequestModal';
import Slider from '../Slider';
import StatusBadge from '../StatusBadge';
import getConfig from 'next/config';
const messages = defineMessages({
firstAirDate: 'First Air Date',
@@ -85,6 +86,7 @@ const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
router.query.manage == '1' ? true : false
);
const [showIssueModal, setShowIssueModal] = useState(false);
const { publicRuntimeConfig } = getConfig();
const {
data,
@@ -223,7 +225,7 @@ const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
?.flatrate ?? [];
function getAvalaibleMediaServerName() {
if (process.env.JELLYFIN_TYPE === 'emby') {
if (publicRuntimeConfig.JELLYFIN_TYPE === 'emby') {
return intl.formatMessage(messages.play, { mediaServerName: 'Emby' });
}
@@ -235,7 +237,7 @@ const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
}
function getAvalaible4kMediaServerName() {
if (process.env.JELLYFIN_TYPE === 'emby') {
if (publicRuntimeConfig.JELLYFIN_TYPE === 'emby') {
return intl.formatMessage(messages.play4k, { mediaServerName: 'Emby' });
}

View File

@@ -8,6 +8,7 @@ import useSettings from '../../hooks/useSettings';
import globalMessages from '../../i18n/globalMessages';
import Alert from '../Common/Alert';
import Modal from '../Common/Modal';
import getConfig from 'next/config';
interface JellyfinImportProps {
onCancel?: () => void;
@@ -32,6 +33,7 @@ const JellyfinImportModal: React.FC<JellyfinImportProps> = ({
}) => {
const intl = useIntl();
const settings = useSettings();
const { publicRuntimeConfig } = getConfig();
const { addToast } = useToasts();
const [isImporting, setImporting] = useState(false);
const [selectedUsers, setSelectedUsers] = useState<string[]>([]);
@@ -67,7 +69,7 @@ const JellyfinImportModal: React.FC<JellyfinImportProps> = ({
return <strong>{msg}</strong>;
},
mediaServerName:
process.env.JELLYFIN_TYPE == 'emby' ? 'Emby' : 'Jellyfin',
publicRuntimeConfig.JELLYFIN_TYPE == 'emby' ? 'Emby' : 'Jellyfin',
}),
{
autoDismiss: true,
@@ -82,7 +84,7 @@ const JellyfinImportModal: React.FC<JellyfinImportProps> = ({
addToast(
intl.formatMessage(messages.importfromJellyfinerror, {
mediaServerName:
process.env.JELLYFIN_TYPE == 'emby' ? 'Emby' : 'Jellyfin',
publicRuntimeConfig.JELLYFIN_TYPE == 'emby' ? 'Emby' : 'Jellyfin',
}),
{
autoDismiss: true,
@@ -120,7 +122,7 @@ const JellyfinImportModal: React.FC<JellyfinImportProps> = ({
loading={!data && !error}
title={intl.formatMessage(messages.importfromJellyfin, {
mediaServerName:
process.env.JELLYFIN_TYPE == 'emby' ? 'Emby' : 'Jellyfin',
publicRuntimeConfig.JELLYFIN_TYPE == 'emby' ? 'Emby' : 'Jellyfin',
})}
iconSvg={<InboxInIcon />}
onOk={() => {
@@ -138,7 +140,9 @@ const JellyfinImportModal: React.FC<JellyfinImportProps> = ({
<Alert
title={intl.formatMessage(messages.newJellyfinsigninenabled, {
mediaServerName:
process.env.JELLYFIN_TYPE == 'emby' ? 'Emby' : 'Jellyfin',
publicRuntimeConfig.JELLYFIN_TYPE == 'emby'
? 'Emby'
: 'Jellyfin',
strong: function strong(msg) {
return (
<strong className="font-semibold text-white">{msg}</strong>
@@ -255,7 +259,7 @@ const JellyfinImportModal: React.FC<JellyfinImportProps> = ({
<Alert
title={intl.formatMessage(messages.noJellyfinuserstoimport, {
mediaServerName:
process.env.JELLYFIN_TYPE == 'emby' ? 'Emby' : 'Jellyfin',
publicRuntimeConfig.JELLYFIN_TYPE == 'emby' ? 'Emby' : 'Jellyfin',
})}
type="info"
/>

View File

@@ -36,6 +36,7 @@ import Transition from '../Transition';
import BulkEditModal from './BulkEditModal';
import JellyfinImportModal from './JellyfinImportModal';
import PlexImportModal from './PlexImportModal';
import getConfig from 'next/config';
const messages = defineMessages({
users: 'Users',
@@ -87,6 +88,7 @@ const UserList: React.FC = () => {
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<Sort>('displayname');
@@ -503,7 +505,7 @@ const UserList: React.FC = () => {
>
<InboxInIcon />
<span>
{process.env.JELLYFIN_TYPE == 'emby'
{publicRuntimeConfig.JELLYFIN_TYPE == 'emby'
? intl.formatMessage(messages.importfromplex, {
mediaServerName: 'Emby',
})
@@ -645,7 +647,7 @@ const UserList: React.FC = () => {
<Badge badgeType="default">
{intl.formatMessage(messages.localuser)}
</Badge>
) : process.env.JELLYFIN_TYPE == 'emby' ? (
) : publicRuntimeConfig.JELLYFIN_TYPE == 'emby' ? (
<Badge badgeType="success">
{intl.formatMessage(messages.mediaServerUser, {
mediaServerName: 'Emby',