src/components/Notes/NoteRender.tsx

@@ -7,7 +7,7 @@ import { BlogPreview } from './internal/BlogPreview'
 import { ModPreview } from './internal/ModPreview'
 import { NoteWrapper } from './internal/NoteWrapper'
 import { NIP05_REGEX } from 'nostr-tools/nip05'
-import { isValidImageUrl, isValidUrl } from 'utils'
+import { isValidImageUrl, isValidUrl, isValidVideoUrl } from 'utils'
 
 interface NoteRenderProps {
   content: string
@@ -36,9 +36,12 @@ export const NoteRender = ({ content }: NoteRenderProps) => {
         const [href] = part.match(link) || []
 
         if (href && isValidUrl(href)) {
-          // Image
           if (isValidImageUrl(href)) {
+            // Image
             return <img className='imgFeedRender' src={href} alt='' />
+          } else if (isValidVideoUrl(href)) {
+            // Video
+            return <video className='videoFeedRender' src={href} controls />
           }
         }
 

src/utils/url.ts

@@ -60,6 +60,11 @@ export const isValidImageUrl = (url: string) => {
   return regex.test(url)
 }
 
+export const isValidVideoUrl = (url: string) => {
+  const regex = /\.(mp4|mkv|webm|mov)$/
+  return regex.test(url)
+}
+
 export const isReachable = async (url: string) => {
   try {
     const response = await fetch(url, { method: 'HEAD' })