diff --git a/src/apps/dashboard/features/plugins/components/PluginDetailsTable.tsx b/src/apps/dashboard/features/plugins/components/PluginDetailsTable.tsx index af57cd1d5a..dfda460953 100644 --- a/src/apps/dashboard/features/plugins/components/PluginDetailsTable.tsx +++ b/src/apps/dashboard/features/plugins/components/PluginDetailsTable.tsx @@ -46,7 +46,7 @@ const PluginDetailsTable: FC = ({ { - (isPluginLoading || !pluginDetails?.version?.version && ) + (isPluginLoading && ) || pluginDetails?.version?.version } diff --git a/src/apps/dashboard/routes/plugins/plugin.tsx b/src/apps/dashboard/routes/plugins/plugin.tsx index 1318e1813d..cfc4c685db 100644 --- a/src/apps/dashboard/routes/plugins/plugin.tsx +++ b/src/apps/dashboard/routes/plugins/plugin.tsx @@ -35,6 +35,7 @@ import Page from 'components/Page'; import { useApi } from 'hooks/useApi'; import globalize from 'scripts/globalize'; import { getPluginUrl } from 'utils/dashboard'; +import { getUri } from 'utils/api'; interface AlertMessage { severity?: 'success' | 'info' | 'warning' | 'error' @@ -103,10 +104,7 @@ const PluginPage: FC = () => { let imageUrl; if (pluginInfo?.HasImage) { - imageUrl = api?.axiosInstance.getUri({ - baseURL: api.basePath, - url: `/Plugins/${pluginInfo.Id}/${pluginInfo.Version}/Image` - }); + imageUrl = getUri(`/Plugins/${pluginInfo.Id}/${pluginInfo.Version}/Image`, api); } return { @@ -124,7 +122,21 @@ const PluginPage: FC = () => { versions: packageInfo?.versions || [] }; } - }, [api?.axiosInstance, api?.basePath, configurationPages, isEnabledOverride, isPluginsLoading, packageInfo?.description, packageInfo?.imageUrl, packageInfo?.name, packageInfo?.overview, packageInfo?.owner, packageInfo?.versions, pluginId, pluginName, plugins]); + }, [ + api, + configurationPages, + isEnabledOverride, + isPluginsLoading, + packageInfo?.description, + packageInfo?.imageUrl, + packageInfo?.name, + packageInfo?.overview, + packageInfo?.owner, + packageInfo?.versions, + pluginId, + pluginName, + plugins + ]); const alertMessages = useMemo(() => { const alerts: AlertMessage[] = []; diff --git a/src/components/MarkdownBox.tsx b/src/components/MarkdownBox.tsx index 94d13b1c88..b5023ce1eb 100644 --- a/src/components/MarkdownBox.tsx +++ b/src/components/MarkdownBox.tsx @@ -20,8 +20,14 @@ const MarkdownBox: FC = ({ undefined } sx={{ - '> :first-child': { marginTop: 0, paddingTop: 0 }, - '> :last-child': { marginBottom: 0, paddingBottom: 0 } + '> :first-child /* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */': { + marginTop: 0, + paddingTop: 0 + }, + '> :last-child': { + marginBottom: 0, + paddingBottom: 0 + } }} > {markdown ? undefined : fallback} diff --git a/src/utils/api.ts b/src/utils/api.ts new file mode 100644 index 0000000000..eca45aec7f --- /dev/null +++ b/src/utils/api.ts @@ -0,0 +1,17 @@ +import type { Api } from '@jellyfin/sdk'; + +/** + * Gets a full URI for a relative URL to the Jellyfin server for a given SDK Api instance. + * TODO: Add to SDK + * @param api - The Jellyfin SDK Api instance. + * @param url - The relative URL. + * @returns The complete URI with protocol, host, and base URL (if any). + */ +export const getUri = (url: string, api?: Api) => { + if (!api) return; + + return api.axiosInstance.getUri({ + baseURL: api.basePath, + url + }); +};