feat: add auto-load media content setting option

src/components/Note/CommunityDefinition.tsx

@@ -1,4 +1,5 @@
 import { getCommunityDefinitionFromEvent } from '@/lib/event-metadata'
+import { useContentPolicy } from '@/providers/ContentPolicyProvider'
 import { Event } from 'nostr-tools'
 import { useMemo } from 'react'
 import ClientSelect from '../ClientSelect'
@@ -11,6 +12,7 @@ export default function CommunityDefinition({
   event: Event
   className?: string
 }) {
+  const { autoLoadMedia } = useContentPolicy()
   const metadata = useMemo(() => getCommunityDefinitionFromEvent(event), [event])
 
   const communityNameComponent = (
@@ -24,10 +26,10 @@ export default function CommunityDefinition({
   return (
     <div className={className}>
       <div className="flex gap-4">
-        {metadata.image && (
+        {metadata.image && autoLoadMedia && (
           <Image
             image={{ url: metadata.image, pubkey: event.pubkey }}
-            className="rounded-lg aspect-square object-cover bg-foreground h-20"
+            className="aspect-square bg-foreground h-20"
             hideIfError
           />
         )}

src/components/Note/GroupMetadata.tsx

@@ -1,4 +1,5 @@
 import { getGroupMetadataFromEvent } from '@/lib/event-metadata'
+import { useContentPolicy } from '@/providers/ContentPolicyProvider'
 import { Event } from 'nostr-tools'
 import { useMemo } from 'react'
 import ClientSelect from '../ClientSelect'
@@ -13,6 +14,7 @@ export default function GroupMetadata({
   originalNoteId?: string
   className?: string
 }) {
+  const { autoLoadMedia } = useContentPolicy()
   const metadata = useMemo(() => getGroupMetadataFromEvent(event), [event])
 
   const groupNameComponent = (
@@ -26,10 +28,10 @@ export default function GroupMetadata({
   return (
     <div className={className}>
       <div className="flex gap-4">
-        {metadata.picture && (
+        {metadata.picture && autoLoadMedia && (
           <Image
             image={{ url: metadata.picture, pubkey: event.pubkey }}
-            className="rounded-lg aspect-square object-cover bg-foreground h-20"
+            className="aspect-square bg-foreground h-20"
             hideIfError
           />
         )}

src/components/Note/LiveEvent.tsx

@@ -1,5 +1,6 @@
 import { Badge } from '@/components/ui/badge'
 import { getLiveEventMetadataFromEvent } from '@/lib/event-metadata'
+import { useContentPolicy } from '@/providers/ContentPolicyProvider'
 import { useScreenSize } from '@/providers/ScreenSizeProvider'
 import { Event } from 'nostr-tools'
 import { useMemo } from 'react'
@@ -8,6 +9,8 @@ import Image from '../Image'
 
 export default function LiveEvent({ event, className }: { event: Event; className?: string }) {
   const { isSmallScreen } = useScreenSize()
+
+  const { autoLoadMedia } = useContentPolicy()
   const metadata = useMemo(() => getLiveEventMetadataFromEvent(event), [event])
 
   const liveStatusComponent =
@@ -39,10 +42,10 @@ export default function LiveEvent({ event, className }: { event: Event; classNam
   if (isSmallScreen) {
     return (
       <div className={className}>
-        {metadata.image && (
+        {metadata.image && autoLoadMedia && (
           <Image
             image={{ url: metadata.image, pubkey: event.pubkey }}
-            className="w-full aspect-video object-cover rounded-lg"
+            className="w-full aspect-video"
             hideIfError
           />
         )}
@@ -60,10 +63,10 @@ export default function LiveEvent({ event, className }: { event: Event; classNam
   return (
     <div className={className}>
       <div className="flex gap-4">
-        {metadata.image && (
+        {metadata.image && autoLoadMedia && (
           <Image
             image={{ url: metadata.image, pubkey: event.pubkey }}
-            className="rounded-lg aspect-[4/3] xl:aspect-video object-cover bg-foreground h-44"
+            className="aspect-[4/3] xl:aspect-video bg-foreground h-44"
             hideIfError
           />
         )}

src/components/Note/LongFormArticle/index.tsx

@@ -63,7 +63,16 @@ export default function LongFormArticle({
         },
         p: (props) => <p {...props} className="break-words" />,
         div: (props) => <div {...props} className="break-words" />,
-        code: (props) => <code {...props} className="break-words whitespace-pre-wrap" />
+        code: (props) => <code {...props} className="break-words whitespace-pre-wrap" />,
+        img: (props) => (
+          <ImageWithLightbox
+            image={{ url: props.src || '', pubkey: event.pubkey }}
+            className="max-h-[80vh] sm:max-h-[50vh] object-contain my-0"
+            classNames={{
+              wrapper: 'w-fit max-w-full'
+            }}
+          />
+        )
       }) as Components,
     []
   )
@@ -81,7 +90,7 @@ export default function LongFormArticle({
       {metadata.image && (
         <ImageWithLightbox
           image={{ url: metadata.image, pubkey: event.pubkey }}
-          className="w-full aspect-[3/1] object-cover rounded-lg"
+          className="w-full aspect-[3/1] object-cover my-0"
         />
       )}
       <Markdown

src/components/Note/LongFormArticlePreview.tsx

@@ -1,6 +1,7 @@
 import { getLongFormArticleMetadataFromEvent } from '@/lib/event-metadata'
 import { toNoteList } from '@/lib/link'
 import { useSecondaryPage } from '@/PageManager'
+import { useContentPolicy } from '@/providers/ContentPolicyProvider'
 import { useScreenSize } from '@/providers/ScreenSizeProvider'
 import { Event, kinds } from 'nostr-tools'
 import { useMemo } from 'react'
@@ -15,6 +16,7 @@ export default function LongFormArticlePreview({
 }) {
   const { isSmallScreen } = useScreenSize()
   const { push } = useSecondaryPage()
+  const { autoLoadMedia } = useContentPolicy()
   const metadata = useMemo(() => getLongFormArticleMetadataFromEvent(event), [event])
 
   const titleComponent = <div className="text-xl font-semibold line-clamp-2">{metadata.title}</div>
@@ -43,10 +45,10 @@ export default function LongFormArticlePreview({
   if (isSmallScreen) {
     return (
       <div className={className}>
-        {metadata.image && (
+        {metadata.image && autoLoadMedia && (
           <Image
             image={{ url: metadata.image, pubkey: event.pubkey }}
-            className="w-full aspect-video object-cover rounded-lg"
+            className="w-full aspect-video"
             hideIfError
           />
         )}
@@ -62,7 +64,7 @@ export default function LongFormArticlePreview({
   return (
     <div className={className}>
       <div className="flex gap-4">
-        {metadata.image && (
+        {metadata.image && autoLoadMedia && (
           <Image
             image={{ url: metadata.image, pubkey: event.pubkey }}
             className="rounded-lg aspect-[4/3] xl:aspect-video object-cover bg-foreground h-44"