wip

package.json

@@ -40,6 +40,7 @@
  "@tiptap/react": "^2.1.11",
  "@tiptap/starter-kit": "^2.1.11",
  "@tiptap/suggestion": "^2.1.11",
+ "@vidstack/react": "^1.0.2",
  "dayjs": "^1.11.10",
  "destr": "^2.0.1",
  "html-to-text": "^9.0.5",
@@ -55,7 +56,6 @@
  "react-dom": "^18.2.0",
  "react-hook-form": "^7.46.2",
  "react-markdown": "^8.0.7",
- "react-player": "^2.13.0",
  "react-router-dom": "^6.16.0",
  "react-textarea-autosize": "^8.5.3",
  "reactflow": "^11.9.2",

src/app.tsx

@@ -1,11 +1,12 @@
 import { message } from '@tauri-apps/api/dialog';
-import { RouterProvider, createBrowserRouter, redirect } from 'react-router-dom';
+import { fetch } from '@tauri-apps/api/http';
+import '@vidstack/react/player/styles/default/theme.css';
+import { RouterProvider, createBrowserRouter, defer, redirect } from 'react-router-dom';
 import 'reactflow/dist/style.css';
 
 import { AuthCreateScreen } from '@app/auth/create';
 import { AuthImportScreen } from '@app/auth/import';
 import { OnboardingScreen } from '@app/auth/onboarding';
-import { BrowseScreen } from '@app/browse';
 import { ErrorScreen } from '@app/error';
 
 import { useStorage } from '@libs/storage/provider';
@@ -50,6 +51,17 @@ export default function App() {
  }
  };
 
+ const relayLoader = async ({ params }) => {
+ return defer({
+ relay: fetch(`https://${params.url}`, {
+ method: 'GET',
+ headers: {
+ Accept: 'application/nostr+json',
+ },
+ }).then((res) => res.data),
+ });
+ };
+
  const router = createBrowserRouter([
  {
  path: '/',
@@ -64,27 +76,6 @@ export default function App() {
  return { Component: SpaceScreen };
  },
  },
- {
- path: 'browse',
- element: <BrowseScreen />,
- errorElement: <ErrorScreen />,
- children: [
- {
- path: '',
- async lazy() {
- const { BrowseUsersScreen } = await import('@app/browse/users');
- return { Component: BrowseUsersScreen };
- },
- },
- {
- path: 'relays',
- async lazy() {
- const { BrowseRelaysScreen } = await import('@app/browse/relays');
- return { Component: BrowseRelaysScreen };
- },
- },
- ],
- },
  {
  path: 'users/:pubkey',
  async lazy() {
@@ -113,6 +104,30 @@ export default function App() {
  return { Component: NWCScreen };
  },
  },
+ {
+ path: 'explore',
+ async lazy() {
+ const { ExploreScreen } = await import('@app/explore');
+ return { Component: ExploreScreen };
+ },
+ },
+ {
+ path: 'relays',
+ async lazy() {
+ const { RelaysScreen } = await import('@app/relays');
+ return { Component: RelaysScreen };
+ },
+ children: [
+ {
+ path: ':url',
+ loader: relayLoader,
+ async lazy() {
+ const { RelayScreen } = await import('@app/relays/relay');
+ return { Component: RelayScreen };
+ },
+ },
+ ],
+ },
  ],
  },
  {

src/app/browse/components/userGroupNode.tsx → src/app/explore/components/userGroupNode.tsx

@@ -1,6 +1,6 @@
 import { Handle, Position } from 'reactflow';
 
-import { UserWithDrawer } from '@app/browse/components/userWithDrawer';
+import { UserWithDrawer } from '@app/explore/components/userWithDrawer';
 
 import { GroupTitle } from './groupTitle';