Skip to content

fix: Improve URL handling to correctly play GIFs #663

@chugue

Description

@chugue

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch react-notion-x@7.4.3 for the project I'm working on.

Your package correctly changes the image URL to an "attachment" format, but I've found that it only plays a short, looping segment of a .gif file instead of the entire animation. To fix this, .gif files need to use their original URLs. I've added a conditional branch to handle .gif files specifically. This also required a small modification to the notion-utils package.

Here is the diff that solved my problem:

React-notion-x package diff

diff --git a/node_modules/react-notion-x/build/index.js b/node_modules/react-notion-x/build/index.js
index 4403ab4..ce270a5 100644
--- a/node_modules/react-notion-x/build/index.js
+++ b/node_modules/react-notion-x/build/index.js

@@ -784,9 +787,12 @@ function Asset({
       }
     }
   } else if (block.type === "image") {
-    if (source.includes("file.notion.so")) {
-      source = (_k = (_j = (_i = block.properties) == null ? void 0 : _i.source) == null ? void 0 : _j[0]) == null ? void 0 : _k[0];
+    if (!source.includes('.gif')) {
+      if (source.includes("file.notion.so")) {
+        source = (_k = (_j = (_i = block.properties) == null ? void 0 : _i.source) == null ? void 0 : _j[0]) == null ? void 0 : _k[0];
+      } 
     }
+
     const src = mapImageUrl(source, block);
     const caption = getTextContent((_l = block.properties) == null ? void 0 : _l.caption);
     const alt = caption || "notion image";

Notion Utils package diff

diff --git a/node_modules/notion-utils/build/index.js b/node_modules/notion-utils/build/index.js
index 5014cfb..fe35bec 100644
--- a/node_modules/notion-utils/build/index.js
+++ b/node_modules/notion-utils/build/index.js
@@ -755,6 +755,11 @@ var defaultMapImageUrl = (url, block) => {
   if (!url) {
     return void 0;
   }
+
+  if (url.includes('.gif')) {
+    return url;
+  }
+
   if (url.startsWith("data:")) {
     return url;
   }

This issue body was partially generated by patch-package.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions