fix note parser

src/app/note/components/parser.tsx

@@ -23,16 +23,16 @@ export const noteParser = (event: Event) => {
     // make sure url is trimmed
     const url = item.trim();
 
-    if (url.match(/\.(jpg|jpeg|gif|png|webp|avif)$/gim)) {
+    if (url.match(/\.(jpg|jpeg|gif|png|webp|avif)$/i)) {
       // image url
       content.images.push(url);
       // remove url from original content
-      content.parsed = content.parsed.replace(url, '');
+      content.parsed = content.parsed.toString().replace(url, '');
     } else if (url.match(/\.(mp4|webm|mov)$/i)) {
       // video
       content.videos.push(url);
       // remove url from original content
-      content.parsed = content.parsed.replace(url, '');
+      content.parsed = content.parsed.toString().replace(url, '');
     } else {
       content.parsed = reactStringReplace(content.parsed, url, () => {
         return (
@@ -65,5 +65,12 @@ export const noteParser = (event: Event) => {
     }
   });
 
+  // remove extra spaces
+  content.parsed.forEach((item, index) => {
+    if (typeof item === 'string') {
+      content.parsed[index] = item.replace(/\s{2,}/g, ' ');
+    }
+  });
+
   return content;
 };

src/app/note/components/preview/video.tsx

@@ -2,7 +2,10 @@ import { MediaOutlet, MediaPlayer } from '@vidstack/react';
 
 export default function VideoPreview({ urls }: { urls: string[] }) {
   return (
-    <div onClick={(e) => e.stopPropagation()} className="relative mt-2 flex w-full flex-col rounded-lg bg-zinc-950">
+    <div
+      onClick={(e) => e.stopPropagation()}
+      className="relative mt-2 flex w-full flex-col overflow-hidden rounded-lg bg-zinc-950"
+    >
       <MediaPlayer src={urls[0]} poster="" controls>
         <MediaOutlet />
       </MediaPlayer>

src/app/note/components/rootNote.tsx

@@ -10,9 +10,18 @@ import { memo, useContext } from 'react';
 import useSWRSubscription from 'swr/subscription';
 import { navigate } from 'vite-plugin-ssr/client/router';
 
+function isJSON(str: string) {
+  try {
+    JSON.parse(str);
+  } catch (e) {
+    return false;
+  }
+  return true;
+}
+
 export const RootNote = memo(function RootNote({ id, fallback }: { id: string; fallback?: any }) {
   const pool: any = useContext(RelayContext);
-  const parseFallback = fallback.length > 1 ? JSON.parse(fallback) : null;
+  const parseFallback = isJSON(fallback) ? JSON.parse(fallback) : null;
 
   const { data, error } = useSWRSubscription(parseFallback ? null : id, (key, { next }) => {
     const unsubscribe = pool.subscribe(

src/app/note/components/user/default.tsx

@@ -15,7 +15,7 @@ export const NoteDefaultUser = ({ pubkey, time }: { pubkey: string; time: number
     <div className="group relative z-10 flex h-11 items-center gap-2">
       {isError || isLoading ? (
         <>
-          <div className="h-11 w-11 shrink animate-pulse overflow-hidden rounded-md"></div>
+          <div className="h-11 w-11 shrink animate-pulse overflow-hidden rounded-md bg-zinc-800"></div>
           <div className="flex w-full flex-1 items-start justify-between">
             <div className="flex flex-col gap-1">
               <div className="flex items-baseline gap-2">

src/app/note/components/user/repost.tsx

@@ -15,7 +15,7 @@ export const NoteRepostUser = ({ pubkey, time }: { pubkey: string; time: number
     <div className="group flex items-center gap-2">
       {isError || isLoading ? (
         <>
-          <div className="relative h-11 w-11 shrink animate-pulse overflow-hidden rounded-md"></div>
+          <div className="relative h-11 w-11 shrink animate-pulse overflow-hidden rounded-md bg-zinc-800"></div>
           <div className="flex w-full flex-1 items-start justify-between">
             <div className="flex flex-col gap-1">
               <div className="flex items-baseline gap-2">