feat: 💨

src/components/Content/index.tsx

@@ -31,7 +31,17 @@ import WebPreview from '../WebPreview'
 import YoutubeEmbeddedPlayer from '../YoutubeEmbeddedPlayer'
 
 const Content = memo(
-  ({ event, content, className }: { event?: Event; content?: string; className?: string }) => {
+  ({
+    event,
+    content,
+    className,
+    mustLoadMedia
+  }: {
+    event?: Event
+    content?: string
+    className?: string
+    mustLoadMedia?: boolean
+  }) => {
     const translatedEvent = useTranslatedEvent(event?.id)
     const _content = translatedEvent?.content ?? event?.content ?? content
     if (!_content) return null
@@ -95,11 +105,14 @@ const Content = memo(
                 images={allImages}
                 start={start}
                 end={end}
+                mustLoad={mustLoadMedia}
               />
             )
           }
           if (node.type === 'media') {
-            return <MediaPlayer className="mt-2" key={index} src={node.data} />
+            return (
+              <MediaPlayer className="mt-2" key={index} src={node.data} mustLoad={mustLoadMedia} />
+            )
           }
           if (node.type === 'url') {
             return <EmbeddedNormalUrl url={node.data} key={index} />
@@ -127,7 +140,14 @@ const Content = memo(
             return <Emoji classNames={{ img: 'mb-1' }} emoji={emoji} key={index} />
           }
           if (node.type === 'youtube') {
-            return <YoutubeEmbeddedPlayer key={index} url={node.data} className="mt-2" />
+            return (
+              <YoutubeEmbeddedPlayer
+                key={index}
+                url={node.data}
+                className="mt-2"
+                mustLoad={mustLoadMedia}
+              />
+            )
           }
           return null
         })}

src/components/ImageGallery/index.tsx

@@ -14,12 +14,14 @@ export default function ImageGallery({
   className,
   images,
   start = 0,
-  end = images.length
+  end = images.length,
+  mustLoad = false
 }: {
   className?: string
   images: TImetaInfo[]
   start?: number
   end?: number
+  mustLoad?: boolean
 }) {
   const id = useMemo(() => `image-gallery-${randomString()}`, [])
   const { autoLoadMedia } = useContentPolicy()
@@ -42,7 +44,7 @@ export default function ImageGallery({
 
   const displayImages = images.slice(start, end)
 
-  if (!autoLoadMedia) {
+  if (!mustLoad && !autoLoadMedia) {
     return displayImages.map((image, i) => (
       <ImageWithLightbox
         key={i}

src/components/MediaPlayer/index.tsx

@@ -4,7 +4,15 @@ import { useTranslation } from 'react-i18next'
 import AudioPlayer from '../AudioPlayer'
 import VideoPlayer from '../VideoPlayer'
 
-export default function MediaPlayer({ src, className }: { src: string; className?: string }) {
+export default function MediaPlayer({
+  src,
+  className,
+  mustLoad = false
+}: {
+  src: string
+  className?: string
+  mustLoad?: boolean
+}) {
   const { t } = useTranslation()
   const { autoLoadMedia } = useContentPolicy()
   const [display, setDisplay] = useState(autoLoadMedia)
@@ -19,7 +27,7 @@ export default function MediaPlayer({ src, className }: { src: string; className
   }, [autoLoadMedia])
 
   useEffect(() => {
-    if (!display) {
+    if (!mustLoad && !display) {
       setMediaType(null)
       return
     }
@@ -52,9 +60,9 @@ export default function MediaPlayer({ src, className }: { src: string; className
     return () => {
       video.src = ''
     }
-  }, [src, display])
+  }, [src, display, mustLoad])
 
-  if (!display) {
+  if (!mustLoad && !display) {
     return (
       <div
         className="text-primary hover:underline truncate w-fit cursor-pointer"

src/components/PostEditor/PostTextarea/Preview.tsx

@@ -15,6 +15,7 @@ export default function Preview({ content, className }: { content: string; class
       <Content
         event={createFakeEvent({ content: processedContent, tags: emojiTags })}
         className="pointer-events-none h-full"
+        mustLoadMedia
       />
     </Card>
   )

src/components/YoutubeEmbeddedPlayer/index.tsx

@@ -7,10 +7,12 @@ import { useTranslation } from 'react-i18next'
 
 export default function YoutubeEmbeddedPlayer({
   url,
-  className
+  className,
+  mustLoad = false
 }: {
   url: string
   className?: string
+  mustLoad?: boolean
 }) {
   const { t } = useTranslation()
   const { autoLoadMedia } = useContentPolicy()
@@ -29,7 +31,7 @@ export default function YoutubeEmbeddedPlayer({
   }, [autoLoadMedia])
 
   useEffect(() => {
-    if (!videoId || !containerRef.current || !display) return
+    if (!videoId || !containerRef.current || (!mustLoad && !display)) return
 
     if (!window.YT) {
       const script = document.createElement('script')
@@ -75,9 +77,9 @@ export default function YoutubeEmbeddedPlayer({
         playerRef.current.destroy()
       }
     }
-  }, [videoId, display])
+  }, [videoId, display, mustLoad])
 
-  if (!display) {
+  if (!mustLoad && !display) {
     return (
       <div
         className="text-primary hover:underline truncate w-fit cursor-pointer"