gatsby-remark-copy-linked-files for files inside MDX react component

[niklasab]

I want to include short HTML5 videos in the posts on my website to resemble GIF functionality. I use MDX for my content so I was thinking I could create a react component to wrap around a video tag like

const VideoTag = props => {
    const {src_webm, src_mp4} = props
    return (
    <video>
        <source type="video/mp4" src={src_mp4}></source>
        <source type="video/webm" src={src_webm}></source>
    </video>
    )
}

and then use VideoTag inside my MDX file (e.g. index.mdx) like

<VideoTag src_webm={./catvideo.webm} src_mp4={./catvideo.mp4} />

where my videos are placed in the same folder as my MDX post, i.e.:

/src/posts/cat-post/index.mdx
/src/posts/cat-post/catvideo.mp4
/src/posts/cat-post/catvideo.webm

I want to handle the conversion to mp4 and webm manually and copy them into my post folder.
So I don't want to use a plugin like gatsby-remark-videos. However, I would still like gatsby to copy the videos with relative references into the public/ folder the same way as gatsby-remark-copy-linked-files. gatsby-remark-copy-linked-files does support the video tag, but it doesn't seem to work when the video tag is wrapped inside a react component, I guess that's because it only parses the markdown files.

How would you do it?

[niklasab]

I just found #23935, it might not be possible.

[niklasab]

Okay for now I will go with this approach:

I created a video component and include it as a shortcode in MDXProvider.

 export const VideoMdx = props => {
   const {mp4, webm} = props
   return (
     <div>
         <video playsinline autoplay muted loop>
             <source type="video/mp4" src={mp4}></source>
             <source type="video/webm" src={webm}></source>
         </video>
    </div>
 )
}

...
const shortcodes = {Video: VideoMdx}
...
<MDXProvider components={shortcodes}>
    <MDXRenderer>{body}</MDXRenderer>
</MDXProvider>
....

Then I have to manually include the webm and mp4 inside my mdx file and pass them to
my shortcode.

---
date: 2020-09-06
---
import cat_video_mp4 from "./catvideo.mp4"
import cat_video_webm from "./catvideo.webm"

This post is about cats. Here is a video of a cat:
<Video mp4={cat_video_mp4} webm={cat_video_webm} />

[LekoArts]

Hi!

As you already read in the other issue this isn't currently possible and the two approaches I outlined are still the best today. As https://mdxjs.com/table-of-components doesn't list the <video> tag I don't see how gatsby-remark-copy-linked-files could work with it.