jellyfin-web/src/components/ServerContentPage.tsx

import { FunctionComponent, useEffect } from 'react';
import { useLocation } from 'react-router-dom';

import ServerConnections from './ServerConnections';
import viewManager from './viewManager/viewManager';
import globalize from '../lib/globalize';
import type { RestoreViewFailResponse } from '../types/viewManager';

interface ServerContentPageProps {
    view: string
}

/**
 * Page component that renders html content from a server request.
 * Uses the ViewManager to dynamically load and execute the page JS.
 */
const ServerContentPage: FunctionComponent<ServerContentPageProps> = ({ view }) => {
    const location = useLocation();

    useEffect(() => {
        const loadPage = () => {
            const viewOptions = {
                url: location.pathname + location.search,
                state: location.state,
                autoFocus: false,
                options: {
                    supportsThemeMedia: false,
                    enableMediaControl: true
                }
            };

            viewManager.tryRestoreView(viewOptions)
                .catch(async (result?: RestoreViewFailResponse) => {
                    if (!result?.cancelled) {
                        const apiClient = ServerConnections.currentApiClient();

                        // Fetch the view html from the server and translate it
                        const viewHtml = await apiClient?.get(apiClient.getUrl(view + location.search))
                            .then((html: string) => globalize.translateHtml(html));

                        viewManager.loadView({
                            ...viewOptions,
                            view: viewHtml
                        });
                    }
                });
        };

        loadPage();
    },
    // location.state is NOT included as a dependency here since dialogs will update state while the current view stays the same
    // eslint-disable-next-line react-hooks/exhaustive-deps
    [
        view,
        location.pathname,
        location.search
    ]);

    return null;
};

export default ServerContentPage;