matty/ncd-fe
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

pl-fe: we don't advertise the embed feature, it's too heavy done this way anyway

Browse Source 
Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>
This commit is contained in:
nicole mikołajczyk
2025-10-19 19:48:52 +02:00
parent a6f93fd3c7
commit ad0f1c3393
6 changed files with 18 additions and 165 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
packages/pl-fe/src/actions/compose.ts
View File

@ -298,19 +298,6 @@ const directCompose = (account: ComposeDirectAction['account']) =>
useModalsStore.getState().openModal('COMPOSE');
};
const directComposeById = (accountId: string) =>
(dispatch: AppDispatch, getState: () => RootState) => {
const account = selectAccount(getState(), accountId);
if (!account) return;
dispatch<ComposeDirectAction>({
type: COMPOSE_DIRECT,
composeId: 'compose-modal',
account,
});
useModalsStore.getState().openModal('COMPOSE');
};
const handleComposeSubmit = (dispatch: AppDispatch, getState: () => RootState, composeId: string, data: BaseStatus | ScheduledStatus, status: string, edit?: boolean, redact?: boolean) => {
if (!dispatch || !getState) return;
@ -1153,7 +1140,6 @@ export {
resetCompose,
mentionCompose,
directCompose,
directComposeById,
submitCompose,
uploadFile,
uploadCompose,

25
packages/pl-fe/src/components/ui/banner.tsx
View File

@ -1,25 +0,0 @@
import clsx from 'clsx';
import React from 'react';
interface IBanner {
theme: 'frosted' | 'opaque';
children: React.ReactNode;
className?: string;
}
/** Displays a sticky full-width banner at the bottom of the screen. */
const Banner: React.FC<IBanner> = ({ theme, children, className }) => (
<div
data-testid='banner'
className={clsx('fixed inset-x-0 bottom-0 z-50 py-8', {
'backdrop-blur bg-primary-800/80 dark:bg-primary-900/80': theme === 'frosted',
'bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-3xl dark:shadow-inset': theme === 'opaque',
}, className)}
>
<div className='mx-auto max-w-4xl px-4'>
{children}
</div>
</div>
);
export { Banner as default };

73
packages/pl-fe/src/features/embedded-status/index.tsx
View File

@ -1,73 +0,0 @@
import React, { useCallback, useEffect, useState } from 'react';
import { useIntl } from 'react-intl';
import { useHistory } from 'react-router-dom';
import { fetchStatus } from 'pl-fe/actions/statuses';
import MissingIndicator from 'pl-fe/components/missing-indicator';
import Status from 'pl-fe/components/status';
import Spinner from 'pl-fe/components/ui/spinner';
import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch';
import { useAppSelector } from 'pl-fe/hooks/use-app-selector';
import { iframeId } from 'pl-fe/iframe';
import { makeGetStatus } from 'pl-fe/selectors';
interface IEmbeddedStatus {
params: {
statusId: string;
};
}
/** Status to be presented in an iframe for embeds on external websites. */
const EmbeddedStatus: React.FC<IEmbeddedStatus> = ({ params }) => {
const dispatch = useAppDispatch();
const history = useHistory();
const getStatus = useCallback(makeGetStatus(), []);
const intl = useIntl();
const status = useAppSelector(state => getStatus(state, { id: params.statusId }));
const [loading, setLoading] = useState(true);
useEffect(() => {
// Prevent navigation for UX and security.
// https://stackoverflow.com/a/71531211
history.block();
dispatch(fetchStatus(params.statusId, intl))
.then(() => setLoading(false))
.catch(() => setLoading(false));
}, []);
useEffect(() => {
window.parent.postMessage({
type: 'setHeight',
id: iframeId,
height: document.getElementsByTagName('html')[0].scrollHeight,
}, '*');
}, [status, loading]);
const renderInner = () => {
if (loading) {
return <Spinner />;
} else if (status) {
return <Status status={status} variant='default' />;
} else {
return <MissingIndicator nested />;
}
};
return (
<a
className='block bg-white dark:bg-primary-900'
href={status?.url || '#'}
onClick={e => e.stopPropagation()}
target='_blank'
>
<div className='pointer-events-none p-4 sm:p-6'>
{renderInner()}
</div>
</a>
);
};
export { EmbeddedStatus as default };

6
packages/pl-fe/src/features/ui/index.tsx
View File

@ -170,7 +170,7 @@ const SwitchingColumnsArea: React.FC<ISwitchingColumnsArea> = React.memo(({ chil
const { isLoggedIn } = useLoggedIn();
const standalone = useAppSelector(isStandalone);
const { authenticatedProfile, cryptoAddresses } = usePlFeConfig();
const { authenticatedProfile, cryptoAddresses, redirectRootNoLogin } = usePlFeConfig();
const hasCrypto = cryptoAddresses.length > 0;
// NOTE: Mastodon and Pleroma route some basenames to the backend.
@ -180,6 +180,10 @@ const SwitchingColumnsArea: React.FC<ISwitchingColumnsArea> = React.memo(({ chil
// Ex: use /login instead of /auth, but redirect /auth to /login
return (
<Switch>
{(!isLoggedIn && redirectRootNoLogin) && (
<Redirect exact from='/' to={redirectRootNoLogin} />
)}
{standalone && !isLoggedIn && (WITH_LANDING_PAGE
? <WrappedRoute path='/' exact layout={DefaultLayout} component={LandingPage} publicRoute />
: <Redirect from='/' to='/login/external' exact />)}

14
packages/pl-fe/src/iframe.ts
View File

@ -1,14 +0,0 @@
/** ID of this iframe (given by embed.js) when embedded on a page. */
let iframeId: string;
/** Receive iframe messages. */
// https://github.com/mastodon/mastodon/pull/4853
const handleMessage = (e: MessageEvent) => {
if (e.data?.type === 'setHeight') {
iframeId = e.data?.id;
}
};
window.addEventListener('message', handleMessage);
export { iframeId };

51
packages/pl-fe/src/init/pl-fe-mount.tsx
View File

@ -1,6 +1,6 @@
import React, { Suspense } from 'react';
import { Toaster } from 'react-hot-toast';
import { BrowserRouter, Switch, Redirect, Route } from 'react-router-dom';
import { BrowserRouter } from 'react-router-dom';
import { CompatRouter } from 'react-router-dom-v5-compat';
// @ts-ignore: it doesn't have types
import { ScrollContext } from 'react-router-scroll-4';
@ -9,22 +9,14 @@ import * as BuildConfig from 'pl-fe/build-config';
import LoadingScreen from 'pl-fe/components/loading-screen';
import SiteErrorBoundary from 'pl-fe/components/site-error-boundary';
import { ModalRoot } from 'pl-fe/features/ui/util/async-components';
import { useLoggedIn } from 'pl-fe/hooks/use-logged-in';
import { usePlFeConfig } from 'pl-fe/hooks/use-pl-fe-config';
import { useCachedLocationHandler } from 'pl-fe/utils/redirect';
const EmbeddedStatus = React.lazy(() => import('pl-fe/features/embedded-status'));
const UI = React.lazy(() => import('pl-fe/features/ui'));
/** Highest level node with the Redux store. */
const PlFeMount = () => {
useCachedLocationHandler();
const { isLoggedIn } = useLoggedIn();
const plFeConfig = usePlFeConfig();
const { redirectRootNoLogin } = plFeConfig;
// @ts-ignore: I don't actually know what these should be, lol
const shouldUpdateScroll = (prevRouterProps, { location }) =>
!(location.state?.plFeModalKey && location.state?.plFeModalKey !== prevRouterProps?.location?.state?.plFeModalKey)
@ -35,37 +27,20 @@ const PlFeMount = () => {
<BrowserRouter basename={BuildConfig.FE_SUBDIRECTORY}>
<CompatRouter>
<ScrollContext shouldUpdateScroll={shouldUpdateScroll}>
<Switch>
{(!isLoggedIn && redirectRootNoLogin) && (
<Redirect exact from='/' to={redirectRootNoLogin} />
)}
<>
<Suspense fallback={<LoadingScreen />}>
<UI />
</Suspense>
<Route
path='/embed/:statusId'
render={(props) => (
<Suspense>
<EmbeddedStatus params={props.match.params} />
</Suspense>
)}
<Suspense>
<ModalRoot />
</Suspense>
<Toaster
position='top-right'
containerClassName='top-4'
/>
<Redirect from='/@:username/:statusId/embed' to='/embed/:statusId' />
<Route>
<Suspense fallback={<LoadingScreen />}>
<UI />
</Suspense>
<Suspense>
<ModalRoot />
</Suspense>
<Toaster
position='top-right'
containerClassName='top-4'
/>
</Route>
</Switch>
</>
</ScrollContext>
</CompatRouter>
</BrowserRouter>