CODEWITHSUNDEEP
reactjssitecorereact-playerexperience-editor
DJanssen
DJanssen

Reputation: 13

ReactPlayer does not render in Sitecore Pages edit/preview

Currently seeing the following behaviour in our Sitecore XM Cloud Pages. We are using custom components. This is our code snippet where I think the bug is:

 {sitecoreContext?.pageState === 'edit' ? (
        <Link field={props.VideoLink}>
          {props.VideoLink?.value.href ? (
            <ReactPlayer {...playerProps} className="video-player__player" />
          ) : null}
          {props?.children}
        </Link>
      ) : do something else if not in edit mode on Pages

After running several debugging lines I can conclude the following:

  1. props.VideoLink?.value.href is not empty, nor is the props.VideoLink itself
  2. playerProps also contain the right values
  3. ReactPlayer for some reason does not want to render in Sitecore Pages Edit mode, nor does it in Preview mode enter image description here The image above is in localhost where the 'do something else if not in edit mode on Pages' code renders fine. The second image is the exact same code but it is in Pages preview (so outside edit mode) and the ReactPlayer does not render.This is the same for when the code snippet is active in Sitecore Pages edit.
  4. I don't think it's a styling issue as we see no element being present in the dev tools.

I think it might be a Sitecore Pages issue after all but really at a loss on how to solve it. If anyone has any ideas I'd love to hear them!

Listed the actions I tried. I think I found the main problem but don't know how to solve it.

Upvotes: 0

Views: 30

Answers (0)

Related Questions