fix(desktop): enhance video handling in markdown parser and improve changelog loading

Innei · Innei · commit 0605d2dddd32 · 2025-05-14T20:55:08.000+08:00
- Added support for multiple video formats in the markdown parser.
- Implemented dynamic loading of the changelog using Suspense for better performance.

This improves the user experience by allowing for more versatile video content and optimizing changelog rendering.

Signed-off-by: Innei &lt;tukon479@gmail.com&gt;
diff --git a/apps/desktop/layer/renderer/src/lib/parse-markdown.ts b/apps/desktop/layer/renderer/src/lib/parse-markdown.ts
@@ -6,16 +6,48 @@ import { MarkdownLink } from "~/components/ui/markdown/renderers/MarkdownLink"
 import { VideoPlayer } from "~/components/ui/media/VideoPlayer"
 
 export const parseMarkdown = (content: string, options?: Partial<RemarkOptions>) => {
+  const videoExts = ["mp4", "webm"]
   return parseMarkdownImpl(content, {
     ...options,
     components: {
       a: ({ node, ...props }) => createElement(MarkdownLink, { ...props } as any),
       img: ({ node, ...props }) => {
         const { src } = props
         try {
-          const path = new URL(src || "").pathname
-          const isVideo = path.endsWith(".mp4")
+          const url = new URL(src || "")
+          const path = url.pathname
+          const search = url.searchParams
+          const ratio = search.get("ratio")
+
+          const isVideo = videoExts.some((ext) => path.endsWith(ext))
           if (isVideo) {
+            if (ratio) {
+              return createElement(
+                "div",
+                {
+                  style: {
+                    width: "100%",
+                    paddingTop: `${(1 / Number(ratio)) * 100}%`,
+                    position: "relative",
+                  },
+                },
+                createElement(
+                  "div",
+                  {
+                    style: {
+                      position: "absolute",
+                      top: 0,
+                      left: 0,
+                      width: "100%",
+                      height: "100%",
+                    },
+                  },
+                  createElement(VideoPlayer, {
+                    src: src as string,
+                  }),
+                ),
+              )
+            }
             return createElement(VideoPlayer, {
               src: src as string,
             })
diff --git a/apps/desktop/layer/renderer/src/modules/upgrade/container.tsx b/apps/desktop/layer/renderer/src/modules/upgrade/container.tsx
@@ -4,7 +4,7 @@ import { nextFrame } from "@follow/utils/dom"
 import { getStorageNS } from "@follow/utils/ns"
 import { repository } from "@pkg"
 import type { FC } from "react"
-import { useEffect, useRef } from "react"
+import { Suspense, use, useEffect, useRef } from "react"
 import { toast } from "sonner"
 
 import { useServerConfigs } from "~/atoms/server-configs"
@@ -85,7 +85,11 @@ const AppNotificationContainer: FC = () => {
                     CustomModalComponent: ({ children }) => {
                       return <PeekModal>{children}</PeekModal>
                     },
-                    content: Changelog,
+                    content: () => (
+                      <Suspense>
+                        <Changelog />
+                      </Suspense>
+                    ),
                     overlay: true,
                   })
                 })
@@ -98,16 +102,21 @@ const AppNotificationContainer: FC = () => {
       setTimeout(toaster)
     }
 
-    DEV && DebugRegistry.add("simulate_app_upgraded_toast", toaster)
+    DEV && DebugRegistry.add("App Upgraded Toast", toaster)
   })
 
   return null
 }
-
 export default AppNotificationContainer
 
+const changelogContext = (async () => {
+  if (import.meta.env.DEV) {
+    return import("../../../../../changelog/next.md?raw").then((m) => m.default)
+  }
+  return CHANGELOG_CONTENT
+})()
 const Changelog = () => (
   <Paper>
-    <Markdown className="mt-8 w-full max-w-full">{CHANGELOG_CONTENT}</Markdown>
+    <Markdown className="mt-8 w-full max-w-full">{use(changelogContext)}</Markdown>
   </Paper>
 )
