mirror of
https://github.com/spacedriveapp/spacedrive.git
synced 2026-04-21 06:59:17 -04:00
d542a8f196
* Centralize the file preview logic in `Thumb.tsx` * Fix useEffect * Fix Inspector thumb keeping internal state from previous selected files - Change video border to follow video aspect-ratio, just like Finder * Restore memo to Thumb - Only add borders to video thumb, not the video itself * Simplify and improve Thumb logic - Add A internal Thumbnail component - Rename main component to FileThumb to match mobile naming - Move getIcon utility function to assets/icons * Add new `useCallbackToWatchResize` hook - Replace `ResizeObserver` with new resize hook in `Thumb` - Simplify and improve `useIsDark` hook by replacing `react-responsive` with direct usage of WebAPI `matchMedia` - Fix `Thumb` src not updating correctly - Fix video extension incorrectly showing when size <= 80 in `Thumb` * Fix `Inspector` not updating thumb type - Remove superfluous `newThumb` from `getExplorerItemData` * Remove superfluous `ThumSize` * Forgot a `?` * Fix incorrect className check in `Thumb` - Updated changed files to use the hooks root import * Format * Fix PDF preview compleatly breaking the application - Allow Linux to access both the spacedrive:// custom protocol and the workaround webserver - On Linux only use the webserver for audio and video, which don't work when requested through a custom protocol - Configure tauri IPC to allow API access to the spacedrive://localhost domain, to avoid PDF previews from breaking the security scope and rendering the application unusable - Configure CSP to allow the pdf plugin custom protocol used by webkit - Fix race condition between Thumb error handler and thumbType useEffect, by using replacing it with a useLayoutEffect - Improve Thumb's error handling
83 lines
2.2 KiB
TypeScript
83 lines
2.2 KiB
TypeScript
import clsx from 'clsx';
|
|
import { Suspense } from 'react';
|
|
import { Navigate, Outlet, useLocation } from 'react-router-dom';
|
|
import { z } from 'zod';
|
|
import {
|
|
ClientContextProvider,
|
|
LibraryContextProvider,
|
|
initPlausible,
|
|
useClientContext,
|
|
usePlausiblePageViewMonitor
|
|
} from '@sd/client';
|
|
import { useOperatingSystem, useZodRouteParams } from '~/hooks';
|
|
import { usePlatform } from '~/util/Platform';
|
|
import { QuickPreview } from '../Explorer/QuickPreview';
|
|
import Sidebar from './Sidebar';
|
|
import Toasts from './Toasts';
|
|
|
|
const Layout = () => {
|
|
const { libraries, library } = useClientContext();
|
|
const os = useOperatingSystem();
|
|
|
|
initPlausible({
|
|
platformType: usePlatform().platform === 'tauri' ? 'desktop' : 'web'
|
|
});
|
|
|
|
usePlausiblePageViewMonitor({ currentPath: useLocation().pathname });
|
|
|
|
if (library === null && libraries.data) {
|
|
const firstLibrary = libraries.data[0];
|
|
|
|
if (firstLibrary) return <Navigate to={`/${firstLibrary.uuid}/overview`} replace />;
|
|
else return <Navigate to="/" replace />;
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className={clsx(
|
|
// App level styles
|
|
'flex h-screen cursor-default select-none overflow-hidden text-ink',
|
|
os === 'browser' && 'border-t border-app-line/50 bg-app',
|
|
os === 'macOS' && 'has-blur-effects rounded-[10px]',
|
|
os !== 'browser' && os !== 'windows' && 'border border-app-frame'
|
|
)}
|
|
onContextMenu={(e) => {
|
|
// TODO: allow this on some UI text at least / disable default browser context menu
|
|
e.preventDefault();
|
|
return false;
|
|
}}
|
|
>
|
|
<Sidebar />
|
|
<div className="relative flex w-full overflow-hidden bg-app">
|
|
{library ? (
|
|
<LibraryContextProvider library={library}>
|
|
<Suspense fallback={<div className="h-screen w-screen bg-app" />}>
|
|
<Outlet />
|
|
</Suspense>
|
|
<QuickPreview />
|
|
</LibraryContextProvider>
|
|
) : (
|
|
<h1 className="p-4 text-white">
|
|
Please select or create a library in the sidebar.
|
|
</h1>
|
|
)}
|
|
</div>
|
|
<Toasts />
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const PARAMS = z.object({
|
|
libraryId: z.string()
|
|
});
|
|
|
|
export const Component = () => {
|
|
const params = useZodRouteParams(PARAMS);
|
|
|
|
return (
|
|
<ClientContextProvider currentLibraryId={params.libraryId ?? null}>
|
|
<Layout />
|
|
</ClientContextProvider>
|
|
);
|
|
};
|