From 30c39d27f59306a137d17dfd273d5143be7702f1 Mon Sep 17 00:00:00 2001
From: Ren Amamiya <123083837+reyamir@users.noreply.github.com>
Date: Sat, 6 May 2023 08:02:53 +0700
Subject: [PATCH] fix note parser

---
 src/app/note/components/parser.tsx        | 13 ++++++++++---
 src/app/note/components/preview/video.tsx |  5 ++++-
 src/app/note/components/rootNote.tsx      | 11 ++++++++++-
 src/app/note/components/user/default.tsx  |  2 +-
 src/app/note/components/user/repost.tsx   |  2 +-
 5 files changed, 26 insertions(+), 7 deletions(-)

diff --git a/src/app/note/components/parser.tsx b/src/app/note/components/parser.tsx
index b90bba58..f11125c2 100644
--- a/src/app/note/components/parser.tsx
+++ b/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;
 };
diff --git a/src/app/note/components/preview/video.tsx b/src/app/note/components/preview/video.tsx
index 9607649e..3cdfc180 100644
--- a/src/app/note/components/preview/video.tsx
+++ b/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>
diff --git a/src/app/note/components/rootNote.tsx b/src/app/note/components/rootNote.tsx
index 05dd642d..80f0c016 100644
--- a/src/app/note/components/rootNote.tsx
+++ b/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(
diff --git a/src/app/note/components/user/default.tsx b/src/app/note/components/user/default.tsx
index 3b1e3244..816da7b8 100644
--- a/src/app/note/components/user/default.tsx
+++ b/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">
diff --git a/src/app/note/components/user/repost.tsx b/src/app/note/components/user/repost.tsx
index f756b7a4..07b3d1a6 100644
--- a/src/app/note/components/user/repost.tsx
+++ b/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">