gatsbyjs/gatsby-source-wordpress-experimental

Serving Video Files Locally

Closed this issue · 4 comments

doingandlearning commented

I'm having a similar issue to #131 for MP4s and wondering if I'm doing something wrong.

I'm using the latest version of WPGatsby and the latest version of Gatsby and this plugin.

"gatsby": "^2.30.1",
"gatsby-source-wordpress-experimental": "^6.0.0",

What I was hoping for:

  • the localFile graphQL object would have a sourceUrl or equivalent.

From reading previous issues, I thought that any URL that had was being sourced from the uploads directory would be remapped and downloaded.

What I'm doing

Here's the relevant part of the graphQL query:

{
  allWpPage {
    nodes {
      title
      blocks {
        ... on WpAcfSpotlightBlock {
          name
          acf {
            backgroundVideo {
              localFile {
                relativePath
              }
              mediaItemUrl
              sourceUrl
            }
          }
        }
      }
    }
  }
}

It's worth noting that sourceUrl comes back as null and that the localFile is there to show where I was hoping to find sourceUrl.

This is then used in a component where I pass the video down:

const BackgroundVideoComponent = ({ backgroundVideo }) => {
  return (
    <>
      <video
        autoPlay
        muted
        loop
        className="background-video z-10 object-cover absolute w-full h-full"
      >
        <source src={backgroundVideo.mediaItemUrl} type="video/mp4" />
      </video>
    </>
  );
};

What is happening

On inspection, this produces the following HTML.

<video autoplay="" loop="" class="background-video z-10 object-cover absolute w-full h-full">
<source src="http://website.local/wp-content/uploads/2020/07/rain.mp4" type="video/mp4">
</video>

Do I need to be adding more transforms or should the plugin be fetching this asset automatically?

Super appreciative of all the work you're doing - thank you!

acao commented

@doingandlearning thanks for reporting this issue you're having! Do you have a way to provide a repository or some such that allows us to reproduce this bug?

doingandlearning commented

Hi,

I've done a minimal reproduction. The repo is here: https://github.com/doingandlearning/example-wordpress-video-repo

  • I have a WordPress instance with an ACF field that is serving a file
  • The file is a video file
  • In the template I'm using that file

What I was hoping

That the localFile would have a transformed URL for a file in the cache.

What is actually happening

The URL provided in localFile is linking to the WP instance.

Here is the WP plugins that are installed.
Screenshot 2021-01-11 at 12 50 51

I think this is the simplest version of the question I have above - I would like these files to be locally sourced so I can disconnect from the WP instance in the static build.

doingandlearning commented

Hi,

I haven't heard anything back about this since I reproduced the issue above.

At the moment, I can see the files in the cache after the build but the localFile is not linking to the cached version.

I'm very happy to do the work myself, I'm just not sure where to head. I'm around in the wpgraphl Slack (Kevin) and if someone could help I'd very much appreciate it.

Best,
Kevin.