small fixed

src/app.tsx

@@ -1,13 +1,13 @@
 import { message } from '@tauri-apps/api/dialog';
 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 { ReactFlowProvider } from 'reactflow';
 
 import { AuthCreateScreen } from '@app/auth/create';
 import { AuthImportScreen } from '@app/auth/import';
 import { OnboardingScreen } from '@app/auth/onboarding';
 import { ErrorScreen } from '@app/error';
+import { ExploreScreen } from '@app/explore';
 
 import { useStorage } from '@libs/storage/provider';
 
@@ -106,10 +106,12 @@ export default function App() {
         },
         {
           path: 'explore',
-          async lazy() {
-            const { ExploreScreen } = await import('@app/explore');
-            return { Component: ExploreScreen };
-          },
+          element: (
+            <ReactFlowProvider>
+              <ExploreScreen />
+            </ReactFlowProvider>
+          ),
+          errorElement: <ErrorScreen />,
         },
         {
           path: 'relays',

src/app/explore/index.tsx

@@ -2,7 +2,6 @@ import { useCallback, useMemo, useRef } from 'react';
 import ReactFlow, {
   Background,
   ConnectionMode,
-  ReactFlowProvider,
   addEdge,
   useEdgesState,
   useNodesState,
@@ -92,28 +91,26 @@ export function ExploreScreen() {
   );
 
   return (
-    <ReactFlowProvider>
-      <div className="h-full w-full" ref={reactFlowWrapper}>
-        <ReactFlow
-          proOptions={{ hideAttribution: true }}
-          nodes={nodes}
-          edges={edges}
-          nodeTypes={nodeTypes}
-          edgeTypes={edgeTypes}
-          connectionLineComponent={Line}
-          onNodesChange={onNodesChange}
-          onEdgesChange={onEdgesChange}
-          onConnect={onConnect}
-          onConnectStart={onConnectStart}
-          onConnectEnd={onConnectEnd}
-          connectionMode={ConnectionMode.Loose}
-          minZoom={0.8}
-          maxZoom={1.2}
-          fitView
-        >
-          <Background color="#3f3f46" />
-        </ReactFlow>
-      </div>
-    </ReactFlowProvider>
+    <div className="h-full w-full" ref={reactFlowWrapper}>
+      <ReactFlow
+        proOptions={{ hideAttribution: true }}
+        nodes={nodes}
+        edges={edges}
+        nodeTypes={nodeTypes}
+        edgeTypes={edgeTypes}
+        connectionLineComponent={Line}
+        onNodesChange={onNodesChange}
+        onEdgesChange={onEdgesChange}
+        onConnect={onConnect}
+        onConnectStart={onConnectStart}
+        onConnectEnd={onConnectEnd}
+        connectionMode={ConnectionMode.Loose}
+        minZoom={0.8}
+        maxZoom={1.2}
+        fitView
+      >
+        <Background color="#3f3f46" />
+      </ReactFlow>
+    </div>
   );
 }

src/app/relays/components/relayEventList.tsx

@@ -5,6 +5,7 @@ import { VList } from 'virtua';
 
 import { useNDK } from '@libs/ndk/provider';
 
+import { LoaderIcon } from '@shared/icons';
 import {
   ArticleNote,
   FileNote,
@@ -70,7 +71,12 @@ export function RelayEventList({ relayUrl }: { relayUrl: string }) {
     <div className="h-full">
       <div className="mx-auto w-full max-w-[500px]">
         {status === 'loading' ? (
-          <div>Loading...</div>
+          <div className="flex h-full w-full items-center justify-center">
+            <div className="inline-flex flex-col items-center justify-center gap-2">
+              <LoaderIcon className="h-5 w-5 animate-spin text-white" />
+              <p className="text-sm font-medium text-white/80">Loading newsfeed...</p>
+            </div>
+          </div>
         ) : (
           <VList className="scrollbar-hide h-full">
             <div className="h-10" />

src/index.css

@@ -1,3 +1,8 @@
+@import 'reactflow/dist/style.css';
+@import '@vidstack/react/player/styles/default/theme.css';
+@import '@vidstack/react/player/styles/default/layouts/audio.css';
+@import '@vidstack/react/player/styles/default/layouts/video.css';
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -67,3 +72,33 @@ input::-ms-clear {
 .ProseMirror img.ProseMirror-selectednode {
   @apply outline-fuchsia-500;
 }
+
+.player {
+  --brand-color: #f5f5f5;
+  --focus-color: #4e9cf6;
+
+  --audio-brand: var(--brand-color);
+  --audio-focus-ring-color: var(--focus-color);
+  --audio-border-radius: 2px;
+
+  --video-brand: var(--brand-color);
+  --video-focus-ring-color: var(--focus-color);
+  --video-border-radius: 8px;
+
+  /* 👉 https://vidstack.io/docs/player/components/layouts/default#css-variables for more. */
+
+  width: 100%;
+}
+
+.player[data-view-type='video'] {
+  aspect-ratio: 16 /9;
+}
+
+.src-buttons {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+  margin-top: 40px;
+  margin-inline: auto;
+  max-width: 300px;
+}

src/libs/ndk/instance.ts

@@ -58,6 +58,7 @@ export const NDKInstance = () => {
     const dexieAdapter = new NDKCacheAdapterDexie({ dbName: 'lume_ndkcache' });
     const instance = new NDK({
       explicitRelayUrls,
+      // @ts-expect-error, wtf?
       cacheAdapter: dexieAdapter,
     });
 

src/shared/notes/kinds/text.tsx

@@ -62,7 +62,7 @@ export function TextNote(props: { content?: string }) {
             }
           },
         }}
-        disallowedElements={['h1', 'h2', 'h3', 'h4', 'h5', 'h6']}
+        disallowedElements={['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'pre', 'code']}
         unwrapDisallowed={true}
         linkTarget={'_blank'}
       >

src/shared/notes/preview/link.tsx

@@ -1,7 +1,5 @@
 import { Link } from 'react-router-dom';
 
-import { Image } from '@shared/image';
-
 import { useOpenGraph } from '@utils/hooks/useOpenGraph';
 
 export function LinkPreview({ urls }: { urls: string[] }) {
@@ -38,10 +36,13 @@ export function LinkPreview({ urls }: { urls: string[] }) {
           ) : (
             <>
               {data.image && (
-                <Image
+                <img
                   src={data.image}
                   alt={urls[0]}
                   className="h-44 w-full rounded-t-lg object-cover"
+                  loading="lazy"
+                  decoding="async"
+                  style={{ contentVisibility: 'auto' }}
                 />
               )}
               <div className="flex flex-col gap-1 border-t border-white/5 px-3 py-3">

src/shared/notes/preview/video.tsx

@@ -1,4 +1,9 @@
-import { MediaPlayer, MediaProvider } from '@vidstack/react';
+import { MediaPlayer, MediaProvider, Poster } from '@vidstack/react';
+import {
+  DefaultAudioLayout,
+  DefaultVideoLayout,
+  defaultLayoutIcons,
+} from '@vidstack/react/player/layouts/default';
 
 export function VideoPreview({ urls }: { urls: string[] }) {
   return (
@@ -7,12 +12,20 @@ export function VideoPreview({ urls }: { urls: string[] }) {
         <MediaPlayer
           key={url}
           src={url}
-          poster={`https://thumbnail.video/api/get?url=${url}&seconds=1`}
           load="visible"
           aspectRatio="16/9"
           crossorigin=""
+          className="player"
         >
-          <MediaProvider />
+          <MediaProvider>
+            <Poster
+              className="vds-poster"
+              src="https://thumbnail.video/api/get?url=${url}&seconds=1"
+              alt={url}
+            />
+          </MediaProvider>
+          <DefaultAudioLayout icons={defaultLayoutIcons} />
+          <DefaultVideoLayout icons={defaultLayoutIcons} />
         </MediaPlayer>
       ))}
     </div>

src/shared/widgets/local/feeds.tsx

@@ -82,7 +82,7 @@ export function LocalFeedsWidget({ params }: { params: Widget }) {
       <TitleBar id={params.id} title={params.title} />
       <div className="flex-1">
         {status === 'loading' ? (
-          <div className="flex h-full w-full items-center justify-center ">
+          <div className="flex h-full w-full items-center justify-center">
             <div className="inline-flex flex-col items-center justify-center gap-2">
               <LoaderIcon className="h-5 w-5 animate-spin text-white" />
               <p className="text-sm font-medium text-white/80">Loading newsfeed...</p>